@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

/* ===========================================================================
   Jimcan Construction Ltd — Core Stylesheet
   Signature: architectural blueprint grid + dimension-line dividers
   ========================================================================== */

:root{
  --c-primary: #302923;
  --c-primary-light: #564b42;
  --c-secondary: #eee5d9;
  --c-accent: #c89b3c;
  --c-accent-dark: #80591d;
  --c-cobalt: #8c5941;
  --c-cobalt-dark: #704534;
  --c-gray: #62584e;
  --c-white: #f8f3eb;
  --c-surface: #fdf8f0;
  --c-surface-raised: #fffaf4;
  --c-field: #f7eee3;
  --c-line: #ddcfbe;
  --c-line-light: #aa9784;
  --c-dark-surface: #3b2d26;
  --c-control: #704534;
  --c-section: #e9dece;
  --c-section-alt: #f1e8dc;
  --c-section-text: #302923;
  --c-section-muted: #62584e;
  --c-footer: #e1d1bf;
  --c-on-dark: #fffaf0;
  --c-on-dark-muted: #eee0ce;
  --c-hero-overlay: #dcc8ae;
  --c-hero-text: #302923;
  --c-hero-muted: #4e443a;
  --c-hero-blend: screen;
  --c-hero-outline: #302923;
  --c-banner-text: #302923;
  --c-banner-muted: #62584e;
  --c-nav-glass: #fdf8f0;
  --c-nav-glass-strong: #f8f3eb;
  --c-nav-border: #ddcfbe;
  --nav-overlay-text: #fffaf0;
  --nav-topbar-bg: rgba(48,40,30,.88);
  --nav-topbar-text: rgba(236, 201, 129, 0.86);
  --nav-topbar-hover: rgba(255,250,240,.12);
  --nav-sticky-bg: rgba(253,248,240,.96);
  --nav-border: rgba(48,41,35,.16);
  --nav-muted: rgba(48,41,35,.76);
  --nav-control-border: rgba(48,41,35,.4);
  --nav-drawer-bg: #f8f3eb;
  --nav-toggle-color: #fffaf0;
  --nav-toggle-bg: rgba(255,250,240,.12);
  --nav-toggle-border: rgba(255,250,240,.7);
  --nav-toggle-hover-bg: rgba(255,250,240,.18);

  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Archivo', Arial, sans-serif;

  --fs-h1: clamp(2.75rem, 4.8vw, 5.25rem);
  --fs-h2: clamp(2rem, 3.2vw, 3.35rem);
  --fs-h3: clamp(1.3rem, 1.8vw, 1.62rem);
  --fs-body: 1.08rem;
  --fs-caption: 0.74rem;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --space-5: 80px;
  --space-6: 120px;

  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;

  --shadow-soft: none;
  --shadow-card: none;
  --motion-curve: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 180ms;
  --motion-med: 300ms;
  --motion-slow: 520ms;

  --c-grid-line: rgba(48, 41, 35, 0.035);
  --container-w: 1240px;
}

[data-theme="dark"]{
  --c-primary: #f1e9dc;
  --c-primary-light: #ded3c2;
  --c-secondary: #2b251f;
  --c-accent: #ddb35b;
  --c-accent-dark: #f0c76c;
  --c-cobalt: #b89043;
  --c-cobalt-dark: #d4a64c;
  --c-gray: #cbc0b0;
  --c-white: #201b16;
  --c-surface: #29231d;
  --c-surface-raised: #332b23;
  --c-field: #302820;
  --c-line: #55493d;
  --c-line-light: #786a59;
  --c-dark-surface: #18140f;
  --c-control: #18140f;
  --c-section: #241d17;
  --c-section-alt: #2b231b;
  --c-section-text: #fff7e9;
  --c-section-muted: #e1d3c1;
  --c-footer: #16120e;
  --c-on-dark: #fff7e9;
  --c-on-dark-muted: #e1d3c1;
  --c-hero-overlay: #17120e;
  --c-hero-text: #fff7e9;
  --c-hero-muted: #e1d3c1;
  --c-hero-blend: multiply;
  --c-hero-outline: #fff7e9;
  --c-banner-text: #fff7e9;
  --c-banner-muted: #e1d3c1;
  --c-nav-glass: #29231d;
  --c-nav-glass-strong: #201b16;
  --c-nav-border: #786a59;
  --nav-overlay-text: #fff7e9;
  --nav-topbar-bg: rgba(10,8,5,.88);
  --nav-topbar-text: rgba(255,247,225,.82);
  --nav-topbar-hover: rgba(255,247,225,.1);
  --nav-sticky-bg: rgba(24,20,15,.97);
  --nav-border: rgba(255,247,233,.15);
  --nav-muted: rgba(255,247,233,.78);
  --nav-control-border: rgba(255,247,233,.4);
  --nav-drawer-bg: #1b1814;
  --nav-toggle-color: #fff7e9;
  --nav-toggle-bg: rgba(255,247,233,.10);
  --nav-toggle-border: rgba(255,247,233,.72);
  --nav-toggle-hover-bg: rgba(255,247,233,.16);
  --c-grid-line: rgba(241, 233, 220, 0.035);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  overflow-x:clip;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: 0;
  color: var(--c-primary);
  background-color: var(--c-white);
  background-image: 
    linear-gradient(var(--c-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  padding-top:0;
}
h1,h2,h3,h4,h5{
  font-family: var(--font-head);
  color: var(--c-primary);
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: 0;
  text-wrap: balance;
}
h1{ font-size: var(--fs-h1); font-weight:800; line-height:1.03; font-variation-settings:'opsz' 120; }
h2{ font-size: var(--fs-h2); font-weight:700; line-height:1.08; font-variation-settings:'opsz' 72; }
h3{ font-size: var(--fs-h3); font-weight:700; line-height:1.2; }
h4{ font-size:1.12rem; font-weight:700; }
h5{ font-size:0.82rem; font-weight:700; }
p{ margin:0 0 26px; color: var(--c-gray); max-width:62ch; }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
img:not(.brand-logo){ aspect-ratio:3 / 2; object-fit:cover; }
ul{ margin:0; padding:0; list-style:none; }
button,
.btn,
.filter-btn,
.nav-links a,
.social-row a,
.topbar-action,
.project-card,
.card-plain,
.value-card,
.timeline-item,
.faq-q .plus,
.testi-arrow,
.testi-dots button,
.home-why-item,
.why-content,
.process-step,
.purpose-card,
.purpose-points i{
  transition:
    transform var(--motion-med) var(--motion-curve),
    background-color var(--motion-med) var(--motion-curve),
    color var(--motion-med) var(--motion-curve),
    border-color var(--motion-med) var(--motion-curve),
    box-shadow var(--motion-med) var(--motion-curve),
    opacity var(--motion-med) var(--motion-curve);
}
:focus-visible{ outline: 2px solid var(--c-accent); outline-offset: 3px; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.container{ max-width: var(--container-w); margin: 0 auto; padding: 0 32px; }
section{ padding: var(--space-6) 0; }
@media (max-width: 768px){ .container{ padding: 0 22px; } section{ padding: var(--space-5) 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-head); font-weight:700; font-size:var(--fs-caption);
  letter-spacing:.12em; text-transform:uppercase; color: var(--c-accent-dark);
  margin-bottom:20px;
}
.section-head{ max-width: 700px; margin-bottom: 64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ font-size:1.14rem; }
@media (max-width: 1100px){
  .section-head{ max-width: 640px; margin-bottom: 52px; }
  .section-head p{ font-size:1.04rem; }
}
@media (max-width: 768px){
  .section-head{ margin-bottom: 38px; }
  .section-head p{ font-size:.98rem; }
}

/* ---- Dimension-line divider (signature element) ----
   Mimics an architectural drawing's measurement line: tick, rule, tick */
.dim-divider{
  display:flex; align-items:center; gap:14px; margin: 0 0 40px;
  color: var(--c-gray); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
}
.dim-divider::before,.dim-divider::after{
  content:""; flex:1; height:0; border-top:1px dashed var(--c-line);
}
.dim-divider.light{ color: var(--c-line-light); }
.dim-divider.light::before,.dim-divider.light::after{ border-color: var(--c-line-light); }

/* ---- Blueprint grid texture, used on dark sections ---- */
.blueprint-bg{
  position:relative; background: var(--c-section); color: var(--c-section-text); overflow:hidden;
}
.blueprint-bg::before{
  content:""; position:absolute; inset:24px; pointer-events:none;
  border:1px solid var(--c-line-light); opacity:.35;
}
.blueprint-bg .container{ position:relative; z-index:1; }
.blueprint-bg h2, .blueprint-bg h3{ color: var(--c-section-text); }
.blueprint-bg p{ color:var(--c-section-muted); }

/* ---- Corner brackets — blueprint callout framing for photos/cards ---- */
.bp-frame{ position:relative; }
.bp-frame::before,.bp-frame::after,
.bp-frame > .bp-tr, .bp-frame > .bp-bl{
  content:""; position:absolute; width:22px; height:22px; z-index:2;
  border-color: var(--c-accent); border-style: solid; opacity:0;
  transition: opacity .35s ease;
}
.bp-frame::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.bp-frame::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.bp-frame:hover::before,.bp-frame:hover::after{ opacity:1; }

/* ================= NAVIGATION ================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0; background:transparent; border-bottom:1px solid transparent;
  transition:border-color .32s ease;
}
.site-header.scrolled,.site-header.header-on-light{
  background:var(--nav-sticky-bg);
  border-color:var(--nav-border); box-shadow:0 9px 28px rgba(0,0,0,.18); backdrop-filter:blur(14px);
}
/* light-theme topbar overrides */
[data-theme="light"] .contact-topbar{
  --nav-topbar-bg: rgba(235,221,200,.96);
  --nav-topbar-text: rgba(48,41,35,.84);
  --nav-topbar-hover: rgba(48,41,35,.09);
  background:var(--nav-topbar-bg);
}
[data-theme="light"] .site-header.scrolled .nav-links a,
[data-theme="light"] .site-header.header-on-light .nav-links a{ color:var(--c-primary); }
[data-theme="light"] .site-header.scrolled .nav-links a.active,
[data-theme="light"] .site-header.header-on-light .nav-links a.active,
[data-theme="light"] .site-header.scrolled .nav-links a:hover,
[data-theme="light"] .site-header.header-on-light .nav-links a:hover{ color:var(--c-accent-dark); }
[data-theme="light"] .site-header.scrolled .theme-toggle,
[data-theme="light"] .site-header.header-on-light .theme-toggle,
[data-theme="light"] .site-header.scrolled .nav-toggle,
[data-theme="light"] .site-header.header-on-light .nav-toggle{ color:var(--c-primary); }
.contact-topbar{
  display:block;
  position:fixed;
  top:12px;
  left:50%;
  width:min(calc(100vw - 24px), 1400px);
  transform:translateX(-50%);
  z-index:1025;
  background:var(--nav-topbar-bg);
  border:1px solid var(--nav-border);
  border-radius:999px;
  backdrop-filter:blur(12px);
  max-height:26px;
  overflow:hidden;
}
.site-header .contact-topbar .container{ min-height:26px; padding:0 28px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; }
.contact-ticker{ display:flex; align-items:center; min-width:0; overflow:hidden; }
.contact-ticker-track{ display:flex; width:max-content; will-change:transform; animation:contact-ticker 28s linear infinite; }
.contact-ticker-track span{ flex:0 0 auto; padding-right:56px; color:var(--nav-topbar-text); white-space:nowrap; font-family:var(--font-body); font-size:.58rem; font-weight:600; letter-spacing:.05em; }
.contact-ticker-track a{ transition:color .22s ease; }
.contact-ticker-track a:hover{ color:var(--c-accent); }
.contact-ticker-track i,.contact-ticker-track b{ color:var(--c-accent); }
.contact-ticker-track i{ margin-right:6px; }
.contact-ticker-track b{ padding:0 14px; }
.topbar-actions{ display:flex; align-items:stretch; margin-left:16px; border-left:1px solid var(--nav-border); }
.topbar-action{ display:inline-flex; align-items:center; gap:6px; padding:0 10px; height:26px; color:var(--nav-topbar-text); font-family:var(--font-body); font-size:.56rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; transition:background-color .22s ease, color .22s ease; }
.topbar-action i{ color:var(--c-accent); font-size:.68rem; }
.topbar-action:hover{ background:var(--nav-topbar-hover); color:var(--c-accent); }
.topbar-action.primary{ background:var(--c-accent); color:var(--c-primary); }
.topbar-action.primary i{ color:var(--c-primary); }
.topbar-action.primary:hover{ background:var(--c-accent-dark); color:var(--c-on-dark); }
.topbar-action.primary:hover i{ color:var(--c-on-dark); }
@keyframes contact-ticker{ to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){ .contact-ticker-track{ animation:none; } }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:66px; padding:7px 28px;
}
.brand{ display:flex; align-items:center; font-family:var(--font-head); font-weight:800; font-size:1.64rem; color:var(--nav-overlay-text); line-height:1; }
.brand-logo{
  width:166px;
  height:auto;
  border-radius:0;
  object-fit:contain;
  background:transparent !important;
  border:0;
  box-shadow:none;
}
.brand .mark{ display:none; }
.brand .mark::after{ content:"CONSTRUCTION LTD"; color:var(--c-accent); font-family:var(--font-body); font-size:.48rem; font-weight:700; letter-spacing:.18em; }
.brand small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.22em; color:var(--c-gray); }
.nav-links{
  display:flex; align-items:center; gap:3px;
  background:transparent; border:0; border-radius:0; padding:0;
  transform:translateX(12px);
}
.nav-links a{
  color:var(--nav-overlay-text); font-family:var(--font-body); font-size:.65rem; font-weight:700; letter-spacing:.055em; text-transform:uppercase; position:relative;
  padding:10px 10px; border-radius:0;
  transition:color .28s ease-out, transform .28s ease-out;
}
.nav-links a:not(.nav-cta)::after{ content:""; position:absolute; right:10px; bottom:5px; left:10px; height:1px; background:var(--c-accent); transform:scaleX(0); transform-origin:center; transition:transform .28s ease; }
.nav-links a:hover{
  color:var(--c-accent);
  background:transparent;
}
.nav-links a.active{
  color:var(--c-accent); background:transparent; box-shadow:none;
}
.nav-links a.active::after,.nav-links a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.nav-cta{
  background:var(--c-accent);
  color:var(--c-primary) !important;
  padding:11px 14px !important;
  border-radius:9px;
  font-weight:700 !important;
  font-size:.7rem !important;
  border:1px solid var(--c-accent);
  transition:background-color .28s ease-out, transform .28s ease-out, box-shadow .28s ease-out;
}
.nav-cta::after{ content:"\f061"; margin-left:8px; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.72rem; }
.nav-cta:hover{
  background:var(--c-accent-dark); color:var(--c-on-dark) !important; transform:translateY(-2px); box-shadow:0 8px 16px color-mix(in srgb, var(--c-accent) 28%, transparent);
}
.nav-toggle{ display:none; background:none; border:0; color:var(--nav-overlay-text); font-size:1.5rem; cursor:pointer; }
/* thin divider between CTA and theme toggle */
.theme-toggle{ position:relative; width:40px; height:40px; margin-left:20px; padding:0; border:0; border-radius:999px; background:color-mix(in srgb, var(--nav-overlay-text) 12%, transparent); color:var(--nav-overlay-text); display:grid; place-items:center; cursor:pointer; font-size:.82rem; overflow:hidden; transition:background-color .32s ease, color .32s ease, transform .28s cubic-bezier(.22,1,.36,1), box-shadow .32s ease; }
.theme-toggle::before{ content:""; position:absolute; left:-20px; top:50%; transform:translateY(-50%); width:1px; height:26px; background:color-mix(in srgb, var(--nav-overlay-text) 22%, transparent); }
.theme-toggle:hover{ background:var(--c-accent); color:var(--c-primary); transform:translateY(-3px) scale(1.06); box-shadow:0 6px 18px color-mix(in srgb, var(--c-accent) 32%, transparent); }
.theme-toggle[aria-pressed="true"]{ background:color-mix(in srgb, var(--c-accent) 18%, transparent); color:var(--c-accent); box-shadow:inset 0 0 0 1px var(--c-accent); }
.theme-toggle[aria-pressed="true"]:hover{ background:var(--c-accent); color:var(--c-primary); }
.theme-toggle i{ transition:transform .36s cubic-bezier(.22,1,.36,1), opacity .22s ease; }
@media (max-width: 992px){
  .site-header{ padding:0; }
  .site-header .container{ min-height:60px; border-radius:0; padding:6px 20px; }
  .site-header .contact-topbar .container{ min-height:25px; padding:0 20px; }
  .brand{ font-size:1.42rem; }
  .brand-logo{ width:166px; height:auto; }
  .brand small{ display:none; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
    background:var(--nav-drawer-bg);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:112px 22px 24px; gap:10px; transform:translateX(100%); transition:transform .4s ease;
    border-radius:0; border-left:1px solid var(--nav-border);
  }
  .nav-links a{ font-size:.9rem; padding:12px 14px; }
  .nav-links .nav-cta{ margin-top: 10px; text-align:center; }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:block; }
  .theme-toggle{ width:38px; height:38px; margin-left:auto; margin-right:0; }
  .theme-toggle::before{ display:none; }
}
@media (max-width:640px){
  .site-header .contact-topbar .container{ min-height:30px; padding:0 12px; grid-template-columns:1fr auto; }
  .contact-ticker-track span{ padding-right:42px; font-size:.57rem; }
  .contact-ticker-track b{ padding:0 9px; }
  .topbar-actions{ margin-left:7px; }
  .topbar-action{ width:35px; justify-content:center; padding:0; }
  .topbar-action span{ display:none; }
  .site-header .container{ min-height:56px; padding:5px 14px; }
  .brand{ font-size:1.16rem; }
  .brand-logo{ width:136px; height:auto; }
  .theme-toggle{ width:36px; height:36px; margin-right:0; }
}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 30px; border-radius:999px; font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer; transition: transform .34s cubic-bezier(0.22,1,0.36,1), box-shadow .34s cubic-bezier(0.22,1,0.36,1), background-color .28s ease-out, color .28s ease-out, border-color .28s ease-out; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn-accent{ background: var(--c-accent); color: var(--c-primary); box-shadow:0 10px 22px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.btn-accent:hover{ background:var(--c-accent-dark); color:var(--c-white); transform: translateY(-4px) scale(1.025); box-shadow:0 16px 30px color-mix(in srgb, var(--c-accent) 44%, transparent); }
.btn-outline{ border-color:var(--c-hero-outline); color:var(--c-hero-outline); }
.btn-outline:hover{ border-color:var(--c-accent); color:var(--c-hero-outline); background:color-mix(in srgb, var(--c-hero-outline) 10%, transparent); transform: translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.16); }
.btn-dark{ background: var(--c-control); color:var(--c-on-dark); }
.btn-dark:hover{ background:var(--c-accent); color:var(--c-primary); transform: translateY(-3px) scale(1.01); box-shadow:none; }
.btn-sm{ padding:11px 18px; font-size:.68rem; }
.btn-ripple::after{
  content:""; position:absolute; inset:0; background:var(--c-on-dark);
  transform: scale(0); border-radius:100px; transition: transform .5s ease;
}
.btn-ripple:active::after{ transform: scale(2.6); opacity:0; }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background-image:linear-gradient(90deg, rgba(26,21,17,.86) 0%, rgba(26,21,17,.66) 40%, rgba(26,21,17,.18) 76%, rgba(26,21,17,.1) 100%), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=2400&q=85');
  background-position:center; background-size:cover; background-attachment:fixed;
  color:var(--c-hero-text); padding: 64px 0 72px;
}
.hero .container{ width:100%; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); }
.hero-copy{ grid-column:span 8; max-width:900px; padding:72px 0 54px; }
.hero-eyebrow{ display:flex; align-items:center; gap:12px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--c-accent); font-weight:700; margin-bottom:16px; animation:hero-enter .48s cubic-bezier(.16,1,.3,1) both; }
.hero-eyebrow span.line{ width:34px; height:2px; background: var(--c-accent); display:block; }
.hero h1{ max-width:17ch; color:var(--c-on-dark); font-size:clamp(3.2rem,6vw,5.5rem); line-height:.98; letter-spacing:0; margin-bottom:0; }
.hero-title-line{ display:block; overflow:hidden; }
.hero-title-line{ animation:hero-title-enter .62s cubic-bezier(.16,1,.3,1) both; }
.hero-title-line:nth-child(1){ animation-delay:120ms; }
.hero-title-line:nth-child(2){ animation-delay:230ms; }
.hero-accent{ color:var(--c-accent); font-style:italic; font-weight:800; }
.hero p.lead{ color:var(--c-on-dark-muted); font-size:1.12rem; line-height:1.62; max-width:55ch; margin:30px 0 48px; animation:hero-enter .52s cubic-bezier(.16,1,.3,1) 360ms both; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; animation:hero-enter .52s cubic-bezier(.16,1,.3,1) 490ms both; }
.hero .btn-outline{ color:var(--c-on-dark); border-color:rgba(255,250,240,.68); }
.hero .btn-outline:hover{ color:var(--c-on-dark); border-color:var(--c-accent); background:rgba(255,250,240,.1); }
.hero-scroll-cue{ display:flex; align-items:center; gap:10px; margin-top:66px; color:rgba(255,250,240,.64); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; animation:hero-enter .5s cubic-bezier(.16,1,.3,1) 620ms both; }
.hero-scroll-cue span{ width:42px; height:1px; position:relative; background:rgba(255,250,240,.44); overflow:hidden; }
.hero-scroll-cue span::after{ content:""; position:absolute; inset:0 auto 0 0; width:42%; background:var(--c-accent); animation:hero-line 1.8s cubic-bezier(.16,1,.3,1) .8s infinite; }
@keyframes hero-enter{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes hero-title-enter{ from{ opacity:0; transform:translateY(108%); } to{ opacity:1; transform:translateY(0); } }
@keyframes hero-line{ 0%,100%{ transform:translateX(-100%); } 52%{ transform:translateX(145%); } }

.hero-form{
  background:var(--c-surface-raised); color: var(--c-primary); border-radius:var(--radius-md);
  border:1px solid var(--c-line); border-left:5px solid var(--c-accent);
  padding: 32px; box-shadow:none;
}
.hero-form h3{ font-size:1.42rem; margin-bottom:6px; }
.hero-form p{ font-size:1rem; margin-bottom:24px; }
.form-kicker{ color:var(--c-accent-dark); font-family:var(--font-head); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.field{ margin-bottom:16px; }
.hero-estimate .field{ margin-bottom:12px; }
.hero-estimate .field:last-of-type{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-head); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; color: var(--c-gray); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--c-line);
  font-family: var(--font-body); font-size:.94rem; background:var(--c-field); color: var(--c-primary);
}
.field textarea{ resize:vertical; min-height:68px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--c-accent); outline-offset:2px; border-color: var(--c-accent); box-shadow:none; }

@media (max-width: 992px){
  .hero{ min-height:auto; background-attachment:scroll; padding:64px 0; }
  .hero .container{ grid-template-columns:1fr; gap:42px; }
  .hero-copy{ grid-column:auto; max-width:720px; }
  .hero h1{ max-width:13ch; }
  .hero-form{ max-width:560px; }
}
@media (max-width:640px){ .hero{ padding-top:54px; } .hero-copy{ padding:44px 0 26px; } .hero h1{ font-size:clamp(3rem,13vw,4.25rem); max-width:11ch; } .hero p.lead{ font-size:1rem; margin:26px 0 38px; } .hero-scroll-cue{ margin-top:48px; } .hero-form{ padding:26px 22px; } }

/* ================= STATS ================= */
.stats{ background: var(--c-secondary); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.stats .container{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; padding: var(--space-4) 32px; }
.stat{ text-align:center; border-left:1px solid var(--c-line); }
.stat:first-child{ border-left:none; }
.stat .num{ font-family: var(--font-head); font-weight:700; font-size:2.72rem; color: var(--c-primary); line-height:1.1; }
.stat .num .accent{ color: var(--c-accent); }
.stat .label{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color: var(--c-gray); font-weight:600; }
@media (max-width:768px){ .stats .container{ grid-template-columns: repeat(2,1fr); } .stat{ border-left:none; border-top:1px solid var(--c-line); padding-top:16px;} .stat:nth-child(odd){border-left:none;} }

/* ================= ABOUT PREVIEW ================= */
.about-preview{ background:var(--c-surface); }
.about-preview .container{ display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(42px,7vw,108px); align-items:center; }
.about-copy{ max-width:570px; }
.about-preview h2{ max-width:12ch; }
.about-preview .media{ position:relative; min-height:560px; padding:0 0 0 clamp(20px,3vw,44px); }
.about-preview .media img{ border-radius:0; width:100%; height:560px; object-fit:cover; }
.badge-float{
  position:absolute; bottom:0; left:0; background:var(--c-dark-surface); color:var(--c-on-dark); border-radius: var(--radius-sm) 0 0 0;
  padding:18px 21px; display:flex; align-items:center; gap:15px; min-width:178px;
}
.badge-float .num{ font-family:var(--font-head); font-weight:700; font-size:2.2rem; color: var(--c-accent); }
.badge-float .txt{ font-size:.7rem; color:var(--c-on-dark-muted); max-width:92px; line-height:1.35; }
.about-quote{ position:absolute; right:0; bottom:0; margin:0; width:min(62%, 284px); padding:25px 28px 22px; background:var(--c-dark-surface); color:var(--c-on-dark); }
.about-quote i{ color:var(--c-accent); font-size:1.1rem; }
.about-quote p{ margin:10px 0 0; color:var(--c-on-dark); font-family:var(--font-head); font-size:1.02rem; line-height:1.38; }
.value-list{ margin-top:30px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.value-list li{ --value-color:#b8682a; position:relative; display:grid; grid-template-columns:1fr; gap:14px; min-height:164px; padding:16px 12px; border-top:1px solid var(--c-line); cursor:default; overflow:hidden; transition:transform .42s cubic-bezier(.22,1,.36,1), background-color .42s ease, border-color .42s ease, box-shadow .42s ease; }
.value-list li:nth-child(2){ --value-color:#397276; }
.value-list li:nth-child(3){ --value-color:#a6533b; }
.value-list li::before{ content:""; position:absolute; top:0; left:0; width:0; height:2px; background:var(--value-color); transition:width .42s cubic-bezier(.22,1,.36,1); }
.value-list .ic{ position:relative; isolation:isolate; width:46px; height:46px; border-radius:14px; color:var(--value-color); border:1px solid color-mix(in srgb, var(--value-color) 55%, var(--c-line)); background:color-mix(in srgb, var(--value-color) 10%, var(--c-surface-raised)); display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--value-color) 5%, transparent); transition:background-color .42s ease, color .42s ease, border-color .42s ease, box-shadow .42s ease, transform .42s cubic-bezier(.22,1,.36,1); }
.value-list .ic::after{ content:""; position:absolute; z-index:-1; inset:5px; border:1px solid color-mix(in srgb, var(--value-color) 35%, transparent); border-radius:10px; opacity:.7; transition:inset .42s cubic-bezier(.22,1,.36,1), opacity .42s ease; }
.value-list i{ transition:transform .42s cubic-bezier(.22,1,.36,1); }
.value-list strong{ display:block; color:var(--c-primary); font-size:.73rem; line-height:1.32; margin-bottom:6px; }
.value-list li div > span{ display:block; color:var(--c-gray); font-size:.68rem; line-height:1.45; }
.value-list li:hover,.value-list li:focus-visible{ transform:translateY(-6px); background:color-mix(in srgb, var(--value-color) 10%, var(--c-surface-raised)); border-color:color-mix(in srgb, var(--value-color) 56%, var(--c-line)); box-shadow:0 12px 22px color-mix(in srgb, var(--value-color) 16%, transparent); outline:0; }
.value-list li:hover::before,.value-list li:focus-visible::before{ width:100%; }
.value-list li:hover .ic,.value-list li:focus-visible .ic{ background:var(--value-color); color:var(--c-on-dark); border-color:var(--value-color); box-shadow:0 8px 16px color-mix(in srgb, var(--value-color) 30%, transparent); transform:translateY(-3px) rotate(-5deg); }
.value-list li:hover .ic::after,.value-list li:focus-visible .ic::after{ inset:8px; opacity:.45; }
.value-list li:hover i,.value-list li:focus-visible i{ transform:scale(1.14) rotate(5deg); }
@media (max-width:992px){ .about-preview .container{ grid-template-columns:1fr; } .about-copy{ max-width:720px; } .about-preview h2{ max-width:16ch; } .about-preview .media{ max-width:720px; width:100%; margin-left:auto; } }
@media (max-width:640px){ .about-preview .media{ min-height:440px; padding-left:16px; } .about-preview .media img{ height:440px; } .value-list{ grid-template-columns:1fr; gap:0; } .value-list li{ grid-template-columns:42px 1fr; align-items:start; min-height:0; padding:16px 8px; } .about-quote{ width:min(75%,250px); padding:19px 20px; } .about-quote p{ font-size:.9rem; } .badge-float{ padding:13px 15px; min-width:145px; } .badge-float .num{ font-size:1.8rem; } }
@media (prefers-reduced-motion:reduce){ .value-list li,.value-list li::before,.value-list .ic,.value-list .ic::after,.value-list i{ transition:none; } .value-list li:hover,.value-list li:focus-visible,.value-list li:hover .ic,.value-list li:focus-visible .ic,.value-list li:hover i,.value-list li:focus-visible i{ transform:none; } }

/* ================= SERVICES ================= */
.services-masonry{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:132px; grid-auto-flow:dense; gap:20px; }
.service-masonry-card{ position:relative; isolation:isolate; grid-column:span 1; grid-row:span 3; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--c-line); border-radius:var(--radius-lg); background:var(--c-cobalt-dark); transition:transform .45s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease; }
.service-masonry-card--wide{ grid-column:span 2; grid-row:span 3; min-height:0; }
.service-masonry-card--tall{ grid-row:span 4; }
.service-masonry-card:nth-child(2),.service-masonry-card:nth-child(3){ grid-row:span 4; }
.service-masonry-card:nth-child(7){ grid-column:span 1; grid-row:span 3; }
.service-masonry-card:nth-child(8){ grid-column:span 3; grid-row:span 3; }
.service-masonry-card::before{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(20,16,13,.94) 0%, rgba(20,16,13,.7) 42%, rgba(20,16,13,.12) 78%, transparent 100%); transition:background .5s ease; }
.service-masonry-card:hover{ transform:translateY(-5px); border-color:var(--c-accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--c-accent) 45%, transparent), 0 18px 34px color-mix(in srgb, var(--c-primary) 20%, transparent); }
.service-placeholder{ position:absolute; z-index:0; inset:-1px; display:block; overflow:hidden; color:var(--c-on-dark); background-color:var(--c-cobalt-dark); background-image:var(--service-image); background-position:center; background-size:cover; transform:scale(1); transition:transform .65s cubic-bezier(.22,1,.36,1), filter .5s ease; }
.service-masonry-card:nth-child(1) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1200&q=80'); }
.service-masonry-card:nth-child(2) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=900&q=80'); }
.service-masonry-card:nth-child(3) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=900&q=80'); }
.service-masonry-card:nth-child(4) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80'); }
.service-masonry-card:nth-child(5) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=900&q=80'); }
.service-masonry-card:nth-child(6) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=900&q=80'); }
.service-masonry-card:nth-child(7) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?auto=format&fit=crop&w=1200&q=80'); }
.service-masonry-card:nth-child(8) .service-placeholder{ --service-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=80'); }
.service-placeholder::before{ content:none; }
.service-placeholder span{ display:none; }
.service-placeholder b{ display:none; }
.service-masonry-body{ position:absolute; z-index:2; right:0; bottom:0; left:0; padding:28px 24px 24px; color:var(--c-on-dark); }
.service-masonry-body h3{ color:var(--c-on-dark); font-size:1.42rem; margin-bottom:9px; }
.service-masonry-body p{ color:var(--c-on-dark-muted); margin-bottom:15px; font-size:.86rem; line-height:1.56; }
.learn{ font-weight:700; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--c-on-dark); display:inline-flex; align-items:center; gap:8px; transition:color .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.learn i{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.service-masonry-card:hover .learn{ color:var(--c-accent); transform:translateX(4px); }
.service-masonry-card:hover .learn i{ transform:translateX(2px); }
.service-masonry-card:hover::before{ background:linear-gradient(to top, rgba(20,16,13,.98) 0%, rgba(20,16,13,.78) 48%, rgba(20,16,13,.22) 82%, rgba(20,16,13,.06) 100%); }
.service-masonry-card:hover .service-placeholder{ transform:scale(1.065); filter:brightness(1.06) saturate(1.08); }
@media (max-width:992px){ .services-masonry{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:auto; } .service-masonry-card,.service-masonry-card--wide,.service-masonry-card--tall,.service-masonry-card:nth-child(2),.service-masonry-card:nth-child(3),.service-masonry-card:nth-child(7),.service-masonry-card:nth-child(8){ grid-column:span 1; grid-row:auto; min-height:440px; } }
@media (max-width:640px){ .services-masonry{ grid-template-columns:1fr; } .service-masonry-card,.service-masonry-card--tall{ min-height:440px; } .service-masonry-body{ padding:26px 22px 22px; } }
@media (prefers-reduced-motion:reduce){ .service-masonry-card,.service-placeholder,.service-masonry-card::before,.learn,.learn i{ transition:none; } .service-masonry-card:hover{ transform:none; } .service-masonry-card:hover .service-placeholder{ transform:scale(1); filter:brightness(1.04); } }

/* ================= WHY CHOOSE (dark) ================= */
.why-intro{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:64px; align-items:end; margin-bottom:48px; }
.why-intro .section-head{ margin:0; }
.why-intro-note{ padding:0 0 8px 24px; border-left:1px solid var(--c-line-light); }
.why-intro-note span{ display:block; color:var(--c-accent-dark); font-family:var(--font-head); font-size:3.3rem; font-weight:800; line-height:1; margin-bottom:8px; }
.why-intro-note p{ margin:0; font-size:.86rem; line-height:1.55; }
.home-why-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:54px 46px; max-width:1040px; margin:0 auto; padding:10px 56px 26px; }
.home-why-item{ position:relative; min-height:286px; display:flex; align-items:stretch; padding:34px 0 0 88px; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.home-why-item:nth-child(even){ padding:34px 88px 0 0; }
.why-number{ position:absolute; z-index:3; top:0; left:0; display:flex; align-items:center; justify-content:center; width:106px; height:106px; background:var(--tab-color); color:var(--tab-ink); border-radius:8px 8px 8px 0; font-family:var(--font-head); font-size:2.85rem; font-weight:800; line-height:1; box-shadow:10px 12px 0 color-mix(in srgb, var(--c-primary) 14%, transparent); transition:transform .4s cubic-bezier(.22,1,.36,1), filter .35s ease, box-shadow .35s ease; }
.home-why-item:nth-child(1){ --tab-color:var(--c-accent); --tab-ink:var(--c-primary); --panel-image:url('https://images.unsplash.com/photo-1777919393730-463e2c0b7f4c?auto=format&fit=crop&w=900&q=80'); }
.home-why-item:nth-child(2){ --tab-color:var(--c-cobalt); --tab-ink:var(--c-on-dark); --panel-image:url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=900&q=80'); }
.home-why-item:nth-child(3){ --tab-color:var(--c-primary-light); --tab-ink:var(--c-on-dark); --panel-image:url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=900&q=80'); }
.home-why-item:nth-child(4){ --tab-color:var(--c-accent-dark); --tab-ink:var(--c-on-dark); --panel-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=80'); }
.why-number::after{ content:""; position:absolute; bottom:-14px; left:31px; border:8px solid transparent; border-top-color:var(--tab-color); }
.home-why-item:nth-child(2) .why-number{ right:0; left:auto; border-radius:8px 8px 0 8px; }
.home-why-item:nth-child(2) .why-number::after{ right:31px; left:auto; }
.home-why-item:nth-child(3) .why-number{ top:0; right:auto; bottom:auto; left:0; border-radius:8px 8px 8px 0; }
.home-why-item:nth-child(3) .why-number::after{ top:auto; right:auto; bottom:-14px; left:31px; border-top-color:var(--c-accent); border-bottom-color:transparent; }
.home-why-item:nth-child(4) .why-number{ top:0; right:0; bottom:auto; left:auto; border-radius:8px 8px 0 8px; }
.home-why-item:nth-child(4) .why-number::after{ top:auto; right:31px; bottom:-14px; left:auto; border-top-color:var(--c-accent); border-bottom-color:transparent; }
.why-content{ position:relative; width:100%; min-height:204px; padding:28px 28px 26px; overflow:visible; background-color:var(--c-dark-surface); background-image:linear-gradient(to top, rgba(20,16,13,.94), rgba(20,16,13,.68) 58%, rgba(20,16,13,.3)), var(--panel-image); background-position:center; background-size:100%; background-repeat:no-repeat; border:1px solid color-mix(in srgb, var(--c-on-dark) 28%, transparent); border-radius:8px 8px 8px 0; box-shadow:0 14px 24px color-mix(in srgb, var(--c-primary) 13%, transparent); transition:transform .4s cubic-bezier(.22,1,.36,1), background-size .65s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease; }
.why-content::after{ content:""; position:absolute; top:48px; left:-13px; width:24px; height:24px; background:var(--c-dark-surface); border-bottom:1px solid color-mix(in srgb, var(--c-on-dark) 28%, transparent); border-left:1px solid color-mix(in srgb, var(--c-on-dark) 28%, transparent); transform:rotate(45deg); }
.home-why-item:nth-child(2) .why-content{ border-radius:8px 8px 0 8px; }
.home-why-item:nth-child(2) .why-content::after{ right:-13px; left:auto; border:0; border-top:1px solid var(--c-line); border-right:1px solid var(--c-line); }
.home-why-item:nth-child(3){ align-items:stretch; padding:34px 0 0 88px; }
.home-why-item:nth-child(3) .why-content{ border-radius:8px 8px 8px 0; }
.home-why-item:nth-child(3) .why-content::after{ top:48px; right:auto; bottom:auto; left:-13px; border:0; border-bottom:1px solid var(--c-line); border-left:1px solid var(--c-line); }
.home-why-item:nth-child(4){ align-items:stretch; padding:34px 88px 0 0; }
.home-why-item:nth-child(4) .why-content{ border-radius:8px 8px 0 8px; }
.home-why-item:nth-child(4) .why-content::after{ top:48px; right:-13px; bottom:auto; left:auto; border:0; border-top:1px solid var(--c-line); border-right:1px solid var(--c-line); }
.why-kicker{ position:relative; z-index:1; color:var(--c-on-dark); font-family:var(--font-head); font-size:1.28rem; font-weight:700; line-height:1.18; margin-bottom:12px; }
.why-kicker span{ color:var(--c-accent); font-family:var(--font-body); font-size:1.1em; font-weight:700; margin-right:5px; }
.home-why-item p{ position:relative; z-index:1; color:var(--c-on-dark-muted); font-size:.86rem; line-height:1.58; margin:0; }
.home-why-item:hover{ transform:translateY(-5px); }
.home-why-item:hover .why-content{ transform:translateY(-3px); background-size:106%; border-color:var(--c-accent); box-shadow:0 18px 30px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.home-why-item:hover .why-number{ transform:translateY(-6px) rotate(-2deg); filter:brightness(1.12) saturate(1.08); box-shadow:12px 16px 0 color-mix(in srgb, var(--c-primary) 18%, transparent); }
@media (max-width:992px){ .why-intro{ grid-template-columns:1fr; gap:20px; } .why-intro-note{ max-width:360px; } .home-why-grid{ gap:44px 34px; padding:10px 28px 26px; } .home-why-item{ min-height:310px; } }
@media (max-width:640px){ .why-intro{ margin-bottom:32px; } .why-intro-note{ padding-left:18px; } .why-intro-note span{ font-size:2.7rem; } .home-why-grid{ grid-template-columns:1fr; gap:30px; padding:10px 0 18px 28px; } .home-why-item,.home-why-item:nth-child(even),.home-why-item:nth-child(3),.home-why-item:nth-child(4){ min-height:250px; padding:32px 0 0 58px; align-items:stretch; } .home-why-item .why-number,.home-why-item:nth-child(2) .why-number,.home-why-item:nth-child(3) .why-number,.home-why-item:nth-child(4) .why-number{ top:0; right:auto; bottom:auto; left:0; width:76px; height:76px; border-radius:6px 6px 6px 0; font-size:2rem; } .home-why-item .why-number::after,.home-why-item:nth-child(2) .why-number::after,.home-why-item:nth-child(3) .why-number::after,.home-why-item:nth-child(4) .why-number::after{ top:auto; right:auto; bottom:-12px; left:22px; border:7px solid transparent; border-top-color:var(--c-accent); border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } .why-content,.home-why-item:nth-child(2) .why-content,.home-why-item:nth-child(3) .why-content,.home-why-item:nth-child(4) .why-content{ min-height:194px; padding:25px 22px 22px; border-radius:8px; } .why-content::after{ display:none; } }
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:2px; background: var(--c-line); border:1px solid var(--c-line); border-radius: var(--radius-lg); overflow:hidden; }
.why-item{ background: var(--c-section); padding: 46px 36px; }
.why-item .ic{ width:48px;height:48px;border-radius:50%;background:var(--c-accent);color:var(--c-section-text);display:flex;align-items:center;justify-content:center;margin-bottom:22px; }
.why-item h4{ color:var(--c-section-text); font-size:1.1rem; margin-bottom:10px; }
.why-item p{ color:var(--c-section-muted); }
.why-item p{ font-size:.9rem; margin:0; }
@media (max-width:992px){ .why-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:640px){ .why-grid{ grid-template-columns: 1fr;} }

/* ================= PROJECTS ================= */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter-btn{
  padding:10px 20px; border-radius:100px; border:1px solid var(--c-line); background:var(--c-surface-raised);
  font-size:.85rem; font-weight:600; color: var(--c-gray); cursor:pointer; transition: all .25s ease;
}
.filter-btn:hover{ border-color: var(--c-accent); color: var(--c-primary); }
.filter-btn.active{ background: var(--c-control); color:var(--c-on-dark); border-color: var(--c-control); }

.projects-masonry{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:26px; }
.project-card{
  aspect-ratio:4 / 3; border-radius: var(--radius-lg); overflow:hidden; position:relative;
  box-shadow: var(--shadow-card); display:block; background: var(--c-control);
  transition: transform .38s cubic-bezier(0.22,1,0.36,1), box-shadow .38s cubic-bezier(0.22,1,0.36,1);
}
.project-card:hover{ transform: translateY(-6px); box-shadow:none; }
.project-card img{ width:100%; height:100%; display:block; object-fit:cover; transition: transform .7s cubic-bezier(0.22,1,0.36,1); }
.project-card:hover img{ transform: scale(1.055); }
.project-card .overlay{
  position:absolute; right:0; bottom:0; left:0; min-height:42%; background:var(--c-control);
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:var(--c-on-dark);
}
.project-card .cat{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--c-accent); font-weight:700; margin-bottom:6px; }
.project-card h4{ color:var(--c-on-dark); font-size:1.15rem; margin-bottom:4px; }
.project-card .meta{ font-size:.82rem; color:var(--c-on-dark-muted); }
@media (max-width:992px){ .projects-masonry{ grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:640px){ .projects-masonry{ grid-template-columns:1fr;} }

/* ================= PROCESS ================= */
.how-work-section{ position:relative; overflow:hidden; background:var(--c-surface); }
.how-work-hero{ min-height:260px; padding:30px 0 20px; background:linear-gradient(90deg, var(--c-surface) 43%, color-mix(in srgb, var(--c-surface) 88%, transparent) 57%, transparent 80%), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1400&q=85') right center / 57% 100% no-repeat; }
.how-work-copy{ max-width:610px; }
.how-work-copy .eyebrow{ margin-bottom:19px; }
.how-work-copy h2{ color:#111c2b; font-size:clamp(2.55rem, 4.4vw, 4.35rem); margin-bottom:14px; }
.how-work-copy h2 span{ color:var(--c-accent); }
.how-work-copy p{ max-width:440px; margin:0; font-size:1rem; }
.process-track{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; position:relative; padding-top:56px; }
.process-rail{ position:absolute; top:0; left:0; right:0; height:39px; display:flex; align-items:center; z-index:2; }
.process-rail::before{ content:""; position:absolute; left:0; right:0; top:19px; height:1px; background:var(--c-accent); }
.process-rail span{ position:relative; z-index:1; width:39px; height:39px; border-radius:50%; display:grid; place-items:center; background:var(--c-surface-raised); border:1px solid var(--c-accent); color:#111c2b; font-family:var(--font-head); font-size:.8rem; font-weight:800; }
.process-rail i{ flex:1; position:relative; height:1px; }
.process-rail i::after{ content:""; position:absolute; right:-1px; top:-3px; width:6px; height:6px; border-top:1px solid var(--c-accent); border-right:1px solid var(--c-accent); transform:rotate(45deg); }
.process-step{ --process-color:#c89b3c; position:relative; min-width:0; overflow:visible; background:var(--c-surface-raised); border:1px solid color-mix(in srgb, var(--c-primary) 8%, transparent); border-radius:8px; box-shadow:0 10px 24px rgba(48,41,35,.08); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.process-step:nth-child(3){ --process-color:#348d9c; }
.process-step:nth-child(4){ --process-color:#638342; }
.process-step:nth-child(5){ --process-color:#9a3555; }
.process-step:nth-child(6){ --process-color:#d39022; }
.process-step:hover{ transform:translateY(-7px); box-shadow:0 18px 32px rgba(48,41,35,.14); }
.process-photo{ height:144px; overflow:hidden; border-radius:7px 7px 0 0; background:var(--c-primary-light); }
.process-photo img{ width:100%; height:100%; aspect-ratio:auto; object-fit:cover; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.process-step:hover .process-photo img{ transform:scale(1.07); }
.process-icon{ position:absolute; z-index:1; top:119px; left:50%; width:54px; height:54px; display:grid; place-items:center; transform:translateX(-50%); border-radius:50%; background:var(--c-surface-raised); border:1px solid color-mix(in srgb, var(--c-primary) 12%, transparent); box-shadow:0 5px 13px rgba(48,41,35,.13); color:var(--process-color); font-size:1.2rem; }
.process-body{ display:flex; flex-direction:column; min-height:215px; padding:27px 22px 17px; }
.process-step .no{ color:var(--process-color); font-family:var(--font-head); font-size:1.65rem; font-weight:800; line-height:1; }
.process-step h4{ color:#111c2b; font-size:1.15rem; margin:5px 0 10px; }
.process-step p{ margin:0; color:var(--c-gray); font-size:.76rem; line-height:1.58; }
.process-detail{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--c-line); color:var(--c-primary-light); font-size:.63rem; font-weight:700; letter-spacing:.02em; }
.process-detail i{ color:var(--process-color); }
.process-promise{ display:flex; align-items:center; justify-content:center; gap:18px; max-width:630px; margin:18px auto 0; padding:12px 18px; background:color-mix(in srgb, var(--c-secondary) 52%, var(--c-surface-raised)); border-radius:8px; }
.promise-icon{ width:41px; height:41px; display:grid; place-items:center; flex:0 0 auto; border:1px solid color-mix(in srgb, var(--c-accent) 55%, transparent); border-radius:50%; color:var(--c-accent); }
.process-promise p{ margin:0; color:var(--c-primary); font-size:.73rem; line-height:1.48; }
.process-promise strong{ color:var(--c-accent-dark); font-family:var(--font-head); font-size:1rem; }
.promise-divider{ width:1px; height:31px; background:var(--c-line-light); }
@media (max-width:992px){ .how-work-hero{ min-height:0; background:var(--c-surface); } .process-track{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; padding-top:0; } .process-rail{ display:none; } .process-photo{ height:180px; } .process-icon{ top:155px; } }
@media (max-width:640px){ .how-work-copy h2 br{ display:none; } .process-track{ grid-template-columns:1fr; } .process-photo{ height:190px; } .process-icon{ top:165px; } .process-promise{ align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; gap:12px; } .promise-divider{ display:none; } }

/* ================= TESTIMONIALS ================= */
.client-stories{ background:var(--c-surface); overflow:hidden; }
.stories-heading{ max-width:670px; margin:0 auto 34px; text-align:center; }
.stories-heading .eyebrow{ position:relative; margin-bottom:18px; }
.stories-heading .eyebrow::after{ content:""; position:absolute; left:50%; bottom:-10px; width:34px; height:1px; background:var(--c-accent); transform:translateX(-50%); }
.stories-heading h2{ margin-bottom:15px; }
.stories-heading p{ max-width:560px; margin:0 auto; font-size:.94rem; }
.stories-stage{ position:relative; width:calc(100% + 120px); margin-left:-60px; padding:12px 0 42px; }
.testi-viewport{ position:relative; height:330px; }
.testi-track{ position:relative; height:100%; }
.testi-slide{ position:absolute; top:0; left:50%; width:min(46%, 486px); height:100%; opacity:0; pointer-events:none; transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .45s ease, filter .45s ease; }
.testi-slide.is-active{ z-index:3; opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1); }
.testi-slide.is-previous{ z-index:1; opacity:.76; transform:translateX(calc(-50% - 360px)) scale(.94); }
.testi-slide.is-next{ z-index:1; opacity:.76; transform:translateX(calc(-50% + 360px)) scale(.94); }
.testi-card{ height:100%; padding:36px 44px 31px; background:var(--c-surface-raised); border:1px solid var(--c-line); border-radius:var(--radius-lg); box-shadow:0 15px 34px rgba(66,48,32,.1); display:flex; flex-direction:column; }
.testi-slide.is-active .testi-card{ box-shadow:0 20px 38px rgba(66,48,32,.14); }
.testi-quote{ color:var(--c-accent); font-family:var(--font-head); font-size:3.35rem; line-height:.72; }
.testi-card p.body{ flex:1; margin:18px 0 20px; color:var(--c-primary); font-size:.86rem; line-height:1.62; }
.testi-slide.is-active .testi-card p.body{ font-size:1rem; }
.testi-project-label{ display:inline-flex; align-items:center; align-self:flex-start; gap:8px; padding:7px 10px; background:color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); color:var(--c-accent-dark); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.testi-card--project p.body{ margin-top:26px; }
.testi-person{ display:flex; align-items:center; gap:13px; padding-top:18px; border-top:1px solid var(--c-line); }
.testi-avatar{ width:43px; height:43px; border-radius:50%; background:var(--c-control); color:var(--c-on-dark); display:grid; place-items:center; font-family:var(--font-head); font-size:.82rem; font-weight:800; }
.testi-slide:nth-child(1) .testi-avatar{ background:#536045; }
.testi-slide:nth-child(2) .testi-avatar{ background:#87513a; }
.testi-slide:nth-child(3) .testi-avatar{ background:#263b57; }
.testi-slide:nth-child(5) .testi-avatar{ background:#73583c; }
.testi-person .name{ color:var(--c-primary); font-size:.8rem; font-weight:700; }
.testi-person .role{ margin-top:2px; color:var(--c-gray); font-size:.66rem; }
.testi-arrow{ position:absolute; z-index:5; top:151px; width:48px; height:48px; border:1px solid var(--c-line); border-radius:50%; background:var(--c-surface-raised); color:var(--c-primary); display:grid; place-items:center; cursor:pointer; box-shadow:0 9px 20px rgba(66,48,32,.1); transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .3s ease, color .3s ease; }
.testi-arrow--prev{ left:44px; }
.testi-arrow--next{ right:44px; }
.testi-arrow:hover{ background:var(--c-accent); color:var(--c-primary); transform:translateY(-3px); }
.testi-dots{ display:flex; justify-content:center; align-items:center; gap:9px; margin-top:27px; }
.testi-dots button{ width:10px; height:10px; padding:0; border:0; border-radius:50%; background:var(--c-line); cursor:pointer; transition:width .35s cubic-bezier(.22,1,.36,1), background-color .35s ease, transform .35s ease; }
.testi-dots button:hover,.testi-dots button:focus-visible{ background:var(--c-accent); outline:0; transform:scale(1.15); }
.testi-dots button.active{ width:24px; border-radius:7px; background:var(--c-accent); }
.stories-trust{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:14px; padding-top:25px; border-top:1px solid var(--c-line); }
.stories-trust article{ display:grid; grid-template-columns:46px 1fr; gap:15px; min-height:72px; padding:4px 24px; border-left:1px solid var(--c-line); }
.stories-trust article:first-child{ border-left:0; }
.stories-trust > article > i{ color:var(--c-accent); font-size:2.2rem; text-align:center; }
.stories-trust h3{ margin:0 0 3px; color:var(--c-primary); font-family:var(--font-body); font-size:.7rem; line-height:1.35; }
.stories-trust p{ margin:0; color:var(--c-gray); font-size:.65rem; line-height:1.48; }
@media (max-width:992px){ .stories-stage{ width:100%; margin-left:0; } .testi-slide{ width:min(58%, 486px); } .testi-slide.is-previous{ transform:translateX(calc(-50% - 300px)) scale(.9); } .testi-slide.is-next{ transform:translateX(calc(-50% + 300px)) scale(.9); } .testi-arrow--prev{ left:12px; } .testi-arrow--next{ right:12px; } .stories-trust{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0; } .stories-trust article:nth-child(3){ border-left:0; } }
@media (max-width:640px){ .stories-heading h2 br{ display:none; } .stories-stage{ padding:0 0 31px; } .testi-viewport{ height:365px; } .testi-slide{ width:100%; } .testi-slide.is-previous,.testi-slide.is-next{ opacity:0; transform:translateX(-50%) scale(.95); } .testi-card{ padding:31px 27px 26px; } .testi-slide.is-active .testi-card p.body{ font-size:.94rem; } .testi-arrow{ top:auto; bottom:0; width:40px; height:40px; } .testi-arrow--prev{ left:calc(50% - 58px); } .testi-arrow--next{ right:calc(50% - 58px); } .testi-dots{ margin-top:20px; padding:0 70px; } .stories-trust{ grid-template-columns:1fr; gap:0; } .stories-trust article,.stories-trust article:nth-child(3){ padding:17px 0; border:0; border-top:1px solid var(--c-line); } }

/* ================= FAQ ================= */
.faq-item{ border-bottom:1px solid var(--c-line); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:22px 4px; cursor:pointer; font-weight:700; font-size:1.02rem; }
.faq-q .plus{ width:26px;height:26px;flex-shrink:0; border-radius:50%; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; transition: transform .3s ease; margin-left:20px; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); background: var(--c-accent); border-color: var(--c-accent); color:var(--c-dark-surface); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-a p{ padding: 0 4px 22px; font-size:.94rem; }
.faq-item.open .faq-a{ max-height:300px; }

/* ================= CTA ================= */
.cta-final{
  position:relative; color:var(--c-banner-text); text-align:center;
  background:var(--c-section-alt);
}
.cta-final h2{ color:var(--c-banner-text); font-size: clamp(1.9rem,4vw,3rem); max-width:700px; margin:0 auto 20px; }
.cta-final p{ max-width:520px; margin:0 auto 34px; color:var(--c-banner-muted); }
.cta-final .actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ================= FOOTER ================= */
.site-footer{ background: var(--c-footer); color:var(--c-section-text); padding: 88px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--c-line-light); }
.footer-grid h5{ color:var(--c-section-text); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; }
.footer-grid ul li{ margin-bottom:12px; }
.footer-grid ul a{ font-size:.92rem; color:var(--c-section-text); transition: color .2s ease; }
.footer-grid ul a:hover{ color: var(--c-accent); }
.footer-brand p{ font-size:.92rem; max-width:280px; }

/* ---- Premium floating navigation ---------------------------------------- */
.site-header{
  top:58px; left:50%; right:auto; width:min(calc(100% - 40px), 1400px);
  transform:translateX(-50%); border:1px solid color-mix(in srgb, var(--c-primary) 10%, transparent);
  border-radius:18px; background:color-mix(in srgb, var(--c-surface) 95%, transparent);
  box-shadow:0 15px 40px rgba(0,0,0,.08); backdrop-filter:blur(16px);
  transition:top .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-topbar{
  display:block; position:fixed; top:12px; left:50%; width:min(680px, calc(100vw - 80px)); height:28px;
  transform:translateX(-50%); border:1px solid color-mix(in srgb, var(--c-primary) 10%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--c-surface) 92%, transparent); box-shadow:0 8px 22px rgba(0,0,0,.07); backdrop-filter:blur(12px);
  z-index:1025;
}
.contact-topbar .container{ display:block; min-height:26px; padding:0 18px; }
.contact-topbar .topbar-actions{ display:none; }
.contact-ticker{ height:26px; }
.contact-ticker-track{ animation-duration:34s; }
.contact-ticker-track span{ color:var(--c-primary); font-size:.62rem; }
.contact-ticker-track:hover{ animation-play-state:paused; }
.site-header .container{
  position:relative; max-width:none; min-height:90px; padding:12px 26px;
  transition:min-height .3s ease, padding .3s ease;
}
.site-header .brand{ flex:0 0 auto; }
.site-header .brand-logo{ width:auto; height:60px; max-width:220px; transition:height .3s ease, transform .3s ease; }
.site-header .nav-links{
  position:absolute; left:50%; transform:translateX(-50%); gap:32px; white-space:nowrap;
}
.site-header .nav-links a{
  padding:9px 0; color:var(--c-primary); font-family:'Manrope', var(--font-body); font-size:.94rem;
  font-weight:600; letter-spacing:.025em; line-height:1.15; transition:color .25s ease-in-out, background-color .25s ease-in-out;
}
.site-header .nav-links a:not(.nav-cta)::after{ display:none; }
.site-header .nav-links a:hover{ color:var(--c-accent-dark); }
.site-header .nav-links a.active{
  padding:9px 13px; border-radius:999px; background:color-mix(in srgb, var(--c-accent) 22%, transparent);
  color:var(--c-primary);
}
.site-header .nav-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.site-header .nav-actions > .nav-cta{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:48px; margin-left:auto;
  padding:0 30px !important; border-radius:12px; font-family:'Manrope', var(--font-body); font-size:.86rem !important;
  letter-spacing:.02em; box-shadow:none; transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.site-header .nav-actions > .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(48,41,35,.18); }
.site-header .theme-toggle{
  width:44px; height:44px; margin-left:0; border:1px solid var(--c-accent); background:var(--c-surface); color:var(--c-primary);
  transition:background-color .25s ease, color .25s ease, transform .3s ease;
}
.site-header .theme-toggle::before{ display:none; }
.site-header .theme-toggle i{ transition:transform .3s ease; }
.site-header .theme-toggle:hover{ transform:none; box-shadow:none; background:color-mix(in srgb, var(--c-accent) 15%, var(--c-surface)); }
.site-header .theme-toggle[aria-pressed="true"] i{ transform:rotate(180deg); }
.site-header.scrolled,.site-header.header-on-light{
  background:var(--c-surface); border-color:color-mix(in srgb, var(--c-primary) 12%, transparent);
  box-shadow:0 18px 42px rgba(0,0,0,.14);
}
.site-header.scrolled{ top:48px; }
.site-header.scrolled .container{ min-height:72px; padding-top:6px; padding-bottom:6px; }
.site-header.scrolled .brand-logo{ height:48px; }
[data-theme="dark"] .site-header{ background:color-mix(in srgb, var(--c-surface) 95%, transparent); border-color:rgba(255,255,255,.13); }
[data-theme="dark"] .contact-topbar{ background:color-mix(in srgb, var(--c-surface) 92%, transparent); border-color:rgba(255,255,255,.16); }
[data-theme="dark"] .contact-ticker-track span{ color:var(--c-primary); }
[data-theme="dark"] .site-header.scrolled,[data-theme="dark"] .site-header.header-on-light{ background:var(--c-surface); }
[data-theme="dark"] .site-header .nav-links a{ color:var(--c-primary); }
[data-theme="dark"] .site-header .nav-links a.active{ color:var(--c-primary); }

.site-header a:hover,
.site-footer a:hover,
.social-row a:hover,
.topbar-action:hover{
  transform: translateY(-2px);
}

.site-header .nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:4.5px; position:relative; width:42px; height:42px; margin-left:8px;
  border:1px solid var(--nav-toggle-border); border-radius:50%; background:var(--nav-toggle-bg);
  color:var(--nav-toggle-color); cursor:pointer; backdrop-filter:blur(10px);
  transition:transform var(--motion-med) var(--motion-curve), background-color var(--motion-med) var(--motion-curve), color var(--motion-med) var(--motion-curve), border-color var(--motion-med) var(--motion-curve), box-shadow var(--motion-med) var(--motion-curve);
}
.site-header .nav-toggle:hover{
  transform:translateY(-2px);
  background:var(--nav-toggle-hover-bg);
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.site-header .nav-toggle:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.site-header .nav-toggle span {
  display:block; width:16px; height:1.8px; border-radius:999px; background-color:currentColor;
  transition:transform .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
  transform-origin:center;
}
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(1),
.site-header .nav-toggle.is-active span:nth-child(1) {
  transform: translateY(6.3px) rotate(45deg);
}
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(2),
.site-header .nav-toggle.is-active span:nth-child(2) {
  opacity:0;
}
.site-header .nav-toggle[aria-expanded="true"] span:nth-child(3),
.site-header .nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-6.3px) rotate(-45deg);
}

.mobile-drawer,.mobile-drawer-backdrop{ display:none; }

@media (max-width:1160px){
  .site-header .nav-links{ gap:20px; }
  .site-header .nav-links a{ font-size:.85rem; }
  .site-header .nav-actions > .nav-cta{ padding:0 20px !important; }
}
@media (max-width:1100px){
  .site-header{ top:48px; width:min(calc(100% - 28px), 1400px); }
  .site-header.scrolled{ top:48px; }
  .site-header .container{ min-height:84px; padding:10px 20px; }
  .site-header .brand-logo{ height:54px; max-width:200px; }
}
/* Keep the drawer breakpoint in sync with the hamburger toggle. */
@media (max-width:992px){
  .site-header{ top:44px; width:calc(100% - 24px); border-radius:14px; }
  .site-header.scrolled{ top:44px; }
  .contact-topbar{ top:10px; width:calc(100vw - 48px); height:25px; }
  .contact-topbar .container{ min-height:23px; padding:0 12px; }
  .contact-ticker{ height:23px; }
  .contact-ticker-track span{ font-size:.55rem; padding-right:38px; }
  .site-header .container,.site-header.scrolled .container{ min-height:72px; padding:8px 16px; }
  .site-header .brand-logo,.site-header.scrolled .brand-logo{ height:48px; max-width:188px; }
  .site-header .nav-links,.site-header .nav-actions > .nav-cta{ display:none; }
  .site-header .theme-toggle{ width:42px; height:42px; margin-left:auto; }
  .site-header .nav-toggle{ display:grid; }
  .mobile-drawer-backdrop{ position:fixed; inset:0; z-index:1090; background:rgba(0,0,0,.48); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
  .mobile-drawer{
    display:flex; position:fixed; z-index:1100; top:0; left:0; width:100%; min-height:100vh; height:100dvh;
    padding:max(24px, env(safe-area-inset-top)) clamp(16px, 5vw, 32px) max(24px, env(safe-area-inset-bottom));
    flex-direction:column; justify-content:flex-start; align-items:center; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:
      linear-gradient(180deg, rgba(20,20,24,0.94), rgba(16,16,18,0.97)),
      radial-gradient(circle at top left, rgba(205,161,64,0.15), transparent 45%);
    color:var(--c-on-dark); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    visibility:hidden; opacity:0; transform:translateY(-15px);
    transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
  }
  .mobile-drawer.is-open{ transform:translateY(0); visibility:visible; opacity:1; }
  .mobile-drawer-backdrop.is-open{ opacity:1; visibility:visible; }
  .mobile-drawer__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px; width:100%; max-width:440px; }
  .mobile-drawer__brand img{ width:180px; height:auto; filter:none; }
  .mobile-drawer__close{
    display:grid; width:44px; height:44px; place-items:center; flex:0 0 auto; border:1px solid var(--c-accent);
    border-radius:50%; background:transparent; color:var(--c-on-dark); font-size:1.15rem; cursor:pointer;
  }
  .mobile-drawer .drawer-links{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:0 0 28px; width:100%; max-width:440px; }
  .mobile-drawer .drawer-links a{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px;
    color:var(--c-on-dark); font-family:'Manrope',var(--font-body);
    font-size:1.15rem; font-weight:700; line-height:1.2; letter-spacing:.04em; text-transform:none; text-decoration:none;
    transition:color 0.2s ease;
  }
  .mobile-drawer .drawer-links a i{ display:none; }
  .mobile-drawer .drawer-links a .drawer-link__text{ min-width:0; }
  .mobile-drawer .drawer-links a .drawer-link__arrow{ display:none; }
  .mobile-drawer .drawer-links a.active{ color:var(--c-accent); }

  .mobile-drawer .nav-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: none;
  }

  .mobile-drawer .nav-dropdown-trigger {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    color: var(--c-on-dark) !important;
    font-size: 1.15rem !important;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .04em;
    border-radius: 0 !important;
    background: none !important;
    cursor: pointer;
  }

  .mobile-drawer .nav-dropdown .dropdown-arrow {
    font-size: 0.75rem;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-drawer .nav-dropdown.is-expanded .dropdown-arrow {
    transform: rotate(180deg);
  }

  .mobile-drawer .dropdown-menu {
    display:block;
    max-height:0;
    transition:max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events:none;
    backdrop-filter: none;
  }

  .mobile-drawer .nav-dropdown.is-expanded .dropdown-menu {
    max-height:360px;
    pointer-events:auto;
  }

  .mobile-drawer .dropdown-menu li {
    min-height: 0;
  }

  .mobile-drawer .dropdown-menu li a {
    display: block;
    padding: 10px 0;
    color: var(--c-on-dark-muted);
    font-family: 'Manrope', var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
    line-height:1.35;
    text-align: center;
    transition: color 0.2s ease;
  }

  .mobile-drawer .dropdown-menu li a:hover {
    background: none;
    color: var(--c-accent);
  }

  .mobile-drawer .drawer-cta{
    display:inline-flex; align-items:center; justify-content:center; min-height:50px; margin:10px 0 20px; padding:12px 32px; border-radius:100px;
    background:linear-gradient(180deg, #d4a23a, #c78e1f); color:var(--c-primary); font-family:'Manrope',var(--font-body); font-size:0.95rem; font-weight:700; text-align:center;
    text-decoration:none; width:auto; max-width:440px; box-sizing:border-box;
  }
  .mobile-drawer .drawer-cta::after{ display:none; }
  .mobile-drawer__divider{
    display:none;
  }
  .mobile-drawer__lead{
    display:none;
  }
  .mobile-drawer__contact{ margin-top:20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; max-width:440px; }
  .mobile-drawer__contact p{ margin:0; color:var(--c-on-dark); font-size:0.92rem; }
  .mobile-drawer__contact a{ display:inline-flex; align-items:center; gap:10px; color:var(--c-on-dark); line-height:1.4; text-decoration:none; }
  .mobile-drawer__contact i{ width:20px; color:var(--c-accent); font-size:1rem; text-align:center; }
  .mobile-drawer__social{ display:flex; gap:14px; margin-top:16px; justify-content:center; }
  .mobile-drawer__social a{ display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(205,161,64,.8); border-radius:50%; color:var(--c-accent); font-size:1rem; text-decoration:none; }
  body.nav-drawer-open{ overflow:hidden; }
}

@media (max-width:1100px){
  .site-header{ top:44px; width:min(calc(100% - 28px), 1400px); }
  .site-header.scrolled{ top:44px; }
  .site-header .container{ min-height:84px; padding:10px 20px; }
  .site-header .brand-logo{ height:54px; max-width:200px; }
  .projects-masonry{ gap:20px; }
  .process-track{ gap:16px; }
  .stories-heading{ margin-bottom:28px; }
}

@media (max-width:768px){
  :root{
    --fs-h1: clamp(2.35rem, 10vw, 3.5rem);
    --fs-h2: clamp(1.7rem, 7vw, 2.5rem);
    --fs-body: 1rem;
  }
  section{ padding: var(--space-5) 0; }
  .purpose-bg{ width:42vw; opacity:.18; }
  .purpose-card,.purpose-card--vision{ grid-template-columns:1fr; min-height:0; }
  .purpose-card__image{ min-height:220px; }
  .purpose-card__body{ padding:28px 24px 30px; }
  .purpose-note{ align-items:flex-start; text-align:left; flex-direction:column; }
  .values-grid,.timeline{ grid-template-columns:1fr; }
  .projects-masonry{ gap:16px; }
  .process-track{ grid-template-columns:1fr; }
  .testi-card{ padding:28px 24px 24px; }
  .footer-grid{ gap:28px; }
}

@media (max-width:640px){
  .site-header{ top:36px; width:calc(100% - 16px); border-radius:12px; }
  .site-header.scrolled{ top:36px; }
  .contact-topbar{ top:8px; width:calc(100vw - 32px); height:22px; }
  .site-header .contact-topbar .container{ min-height:20px; padding:0 10px; }
  .site-header .contact-ticker{ height:20px; }
  .site-header .container,.site-header.scrolled .container{ min-height:68px; padding:7px 12px; }
  .site-header .brand-logo,.site-header.scrolled .brand-logo{ height:42px; max-width:156px; }
  .site-header .theme-toggle{ width:38px; height:38px; }
  .site-header .nav-toggle{ width:38px; height:38px; font-size:.82rem; }
  .mobile-drawer{
    width:100%;
    padding:max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  }
  .mobile-drawer__top{ margin-bottom:clamp(14px, 3vh, 24px); }
  .mobile-drawer__brand img{ width:clamp(132px, 42vw, 176px); }
  .mobile-drawer .drawer-links{ gap:2px; margin-bottom:clamp(12px, 2.5vh, 20px); }
  .mobile-drawer .drawer-links a,
  .mobile-drawer .nav-dropdown-trigger{ padding:clamp(10px, 2.4vh, 16px) 12px; font-size:clamp(1rem, 4.8vw, 1.12rem) !important; }
  .mobile-drawer .dropdown-menu li a{ padding:8px 0; font-size:.9rem; }
  .mobile-drawer .drawer-cta{ min-height:50px; margin:8px 0 14px; padding:10px 24px; }
  .mobile-drawer__contact{ margin-top:10px; gap:5px; }
  .mobile-drawer__contact p{ font-size:.84rem; }
  .mobile-drawer__social{ margin-top:10px; }
  .mobile-drawer__social a{ width:40px; height:40px; }
}

@media (max-width:420px){
  .site-header .brand-logo,.site-header.scrolled .brand-logo{ height:38px; max-width:132px; }
  .site-header .nav-toggle,.site-header .theme-toggle{ width:36px; height:36px; }
  .mobile-drawer__brand img{ width:154px; }
  .contact-topbar{ top:6px; width:calc(100vw - 20px); }
}

@media (max-width:320px){
  .site-header{ width:calc(100% - 12px); }
  .site-header .container,.site-header.scrolled .container{ padding-right:8px; padding-left:8px; }
  .site-header .brand-logo,.site-header.scrolled .brand-logo{ height:34px; max-width:112px; }
  .site-header .nav-actions{ gap:6px; }
  .site-header .nav-toggle,.site-header .theme-toggle{ width:34px; height:34px; }
  .mobile-drawer{ padding-right:14px; padding-left:14px; }
  .mobile-drawer__brand img{ width:132px; }
}

.social-row{ display:flex; gap:12px; margin-top:20px; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--c-line-light); display:flex; align-items:center; justify-content:center; transition: all .25s ease; }
.social-row a:hover{ background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.newsletter-row{ display:flex; gap:0; margin-top:14px; border:1px solid var(--c-line-light); border-radius:100px; overflow:hidden; }
.newsletter-row input{ flex:1; background:transparent; border:none; padding:12px 18px; color:var(--c-section-text); font-family:var(--font-body); }
.newsletter-row input:focus{ outline:none; }
.newsletter-row button{ background: var(--c-accent); border:none; padding:0 20px; color: var(--c-dark-surface); font-weight:700; cursor:pointer; }
.map-embed{ border-radius: var(--radius-md); overflow:hidden; margin-top:14px; filter: grayscale(1) invert(0.92) contrast(0.9); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 26px 0; font-size:.82rem; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:var(--c-section-text); }
.footer-bottom-links { display:flex; flex-wrap:wrap; gap:20px; }
@media (max-width:992px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ align-items:flex-start; padding:22px 0; }
  .footer-bottom-links { gap:8px 14px !important; }
}

/* ================= GENERIC PAGE HERO (inner pages) ================= */
.page-hero{
  position:relative; min-height:500px; display:flex; align-items:flex-end; padding:184px 0 88px; color:var(--c-on-dark); text-align:left;
  background-color:var(--c-dark-surface); background-image:linear-gradient(90deg, rgba(26,21,17,.86) 0%, rgba(26,21,17,.66) 40%, rgba(26,21,17,.18) 76%, rgba(26,21,17,.1) 100%), var(--bg-img); background-position:center; background-size:cover;
}
.page-hero .container{ width:100%; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); }
.page-hero h1{ grid-column:span 8; color:var(--c-on-dark); max-width:15ch; font-size:clamp(3.2rem,5.5vw,5.25rem); line-height:1; margin:0; }
.breadcrumb{ grid-column:span 12; display:flex; gap:8px; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-on-dark-muted); margin-bottom:16px; }
.breadcrumb a{ color:var(--c-on-dark); }
.breadcrumb .accent{ color: var(--c-accent); }
@media (max-width:768px){ .page-hero{ min-height:420px; padding:156px 0 64px; } .page-hero .container{ grid-template-columns:1fr; } .page-hero h1{ grid-column:auto; max-width:12ch; font-size:clamp(2.75rem,11vw,4rem); } .breadcrumb{ grid-column:auto; } }

/* ================= UTILS ================= */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{ padding:7px 16px; border-radius:100px; background: var(--c-secondary); font-size:.8rem; font-weight:600; color: var(--c-gray); }
.card-plain{
  background:var(--c-surface-raised); border:1px solid var(--c-line); border-radius: var(--radius-lg); padding:36px;
  transition: transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s cubic-bezier(0.22,1,0.36,1), border-color .28s ease-out;
}
.card-plain:hover{ transform: translateY(-4px); box-shadow:none; border-color:var(--c-accent); }
.icon-circle{
  width:52px;height:52px;border-radius:0; background:var(--c-surface-raised); color: var(--c-primary);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--c-accent);
}

.editorial-break{
  margin: 0;
  background: var(--c-section-alt);
  color:var(--c-section-text);
}
.editorial-break .container{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap:var(--space-5); align-items:center; }
.editorial-pull{
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  line-height:1.28;
  color:var(--c-section-text);
  padding-left: var(--space-3);
  border-left: 3px solid var(--c-accent);
  margin: 0 0 var(--space-3);
}
.editorial-meta{
  display:flex; gap:var(--space-2); align-items:center; color:var(--c-section-muted);
  font-size: var(--fs-caption); letter-spacing: .11em; text-transform: uppercase;
}
.editorial-media{
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transform: translateY(24px);
}
.editorial-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s cubic-bezier(0.22,1,0.36,1);
}
.editorial-break:hover .editorial-media img{ transform: scale(1.04); }
@media (max-width:900px){
  .editorial-break .container{ grid-template-columns:1fr; }
  .editorial-media{ transform:none; min-height:280px; }
}

.purpose-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #f4efe7 0%, color-mix(in srgb, #f4efe7 82%, var(--c-surface) 18%) 100%);
}
.purpose-section .container{ position:relative; z-index:1; }
.purpose-bg{
  position:absolute; inset:auto; top:0; bottom:0; width:28vw; pointer-events:none; opacity:.18;
  background-position:center; background-size:cover; filter:grayscale(.2) contrast(.88) brightness(.82);
}
.purpose-bg--left{
  left:0;
  background-image:linear-gradient(90deg, rgba(20,16,13,.8), rgba(20,16,13,.18)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1200&q=80');
}
.purpose-bg--right{
  right:0;
  background-image:linear-gradient(270deg, rgba(20,16,13,.84), rgba(20,16,13,.16)), url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=80');
}
.purpose-intro{
  max-width:860px;
  margin:0 auto var(--space-5);
  text-align:center;
}
.purpose-intro .eyebrow{ justify-content:center; margin-bottom:18px; }
.purpose-intro h2{
  font-size:clamp(2.35rem, 4.8vw, 4.45rem);
  line-height:.97;
  letter-spacing:-.03em;
  margin:0 0 18px;
}
.purpose-intro p{
  max-width:760px;
  margin:0 auto;
  font-size:1.08rem;
  color:var(--c-section-muted);
}
.purpose-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}
.purpose-card{
  display:grid;
  grid-template-columns:minmax(0, .42fr) minmax(0, 1fr);
  min-height:400px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--c-primary) 14%, transparent);
  border-radius:28px;
  background:color-mix(in srgb, var(--c-surface) 88%, var(--c-secondary) 12%);
  box-shadow:0 18px 44px rgba(26,21,17,.08);
}
.purpose-card:hover,
.value-card:hover,
.timeline-item:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 42px rgba(26,21,17,.10);
}
.purpose-card--vision{ grid-template-columns:minmax(0, 1fr) minmax(0, .42fr); }
.purpose-card__image{
  position:relative;
  min-height:100%;
  background-size:cover;
  background-position:center;
}
.purpose-card__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28));
}
.purpose-card__image--mission{
  background-image:linear-gradient(180deg, rgba(20,16,13,.2), rgba(20,16,13,.56)), url('https://images.unsplash.com/photo-1777919393730-463e2c0b7f4c?auto=format&fit=crop&w=1200&q=80');
}
.purpose-card__image--vision{
  background-image:linear-gradient(180deg, rgba(20,16,13,.2), rgba(20,16,13,.42)), url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1200&q=80');
}
.purpose-card__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 38px;
}
.purpose-card__eyebrow{
  color:var(--c-accent-dark);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.purpose-card h3{
  font-size:clamp(2rem, 2.55vw, 3.1rem);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 18px;
}
.purpose-card p{
  max-width:42ch;
  font-size:1rem;
  line-height:1.68;
  color:var(--c-section-muted);
  margin:0;
}
.purpose-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-top:26px;
}
.purpose-points span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--c-section-text);
  font-size:.88rem;
  font-weight:600;
}
.purpose-points i{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:color-mix(in srgb, var(--c-accent) 16%, transparent);
  color:var(--c-accent-dark);
  font-size:.88rem;
}
.purpose-points--vision i{ background:color-mix(in srgb, var(--c-cobalt) 12%, transparent); color:var(--c-cobalt); }
.purpose-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-width:840px;
  margin:28px auto 0;
  padding-top:20px;
  border-top:1px solid color-mix(in srgb, var(--c-primary) 14%, transparent);
  color:var(--c-section-text);
  text-align:center;
}
.purpose-note i{
  color:var(--c-accent-dark);
  font-size:1.3rem;
}
.purpose-note p{
  margin:0;
  font-family:var(--font-head);
  font-size:1rem;
  font-style:italic;
}
.values-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,155,60,.08), transparent 28%),
    linear-gradient(180deg, #f7f3ed 0%, #f6f1ea 100%);
}
.values-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:44px;
}
.value-card{
  position:relative;
  min-height:370px;
  overflow:hidden;
  border:1px solid rgba(48,41,35,.08);
  border-radius:14px;
  background:var(--c-surface);
  box-shadow:0 16px 34px rgba(26,21,17,.08);
  transition:transform .35s var(--motion-curve), box-shadow .35s var(--motion-curve), border-color .25s ease;
}
.value-card::before{
  content:"";
  position:absolute;
  inset:0 0 0 48%;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)), var(--card-image) center center / cover no-repeat;
}
.value-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 52%, rgba(255,255,255,.08) 100%),
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 49%, rgba(255,255,255,0) 50%);
}
.value-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 42px rgba(26,21,17,.12);
  border-color:color-mix(in srgb, var(--c-accent) 55%, rgba(48,41,35,.08) 45%);
}
.value-card__index,
.value-card__copy{
  position:relative;
  z-index:1;
}
.value-card__index{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:26px 26px 0;
  color:var(--c-accent-dark);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
}
.value-card__index::after{
  content:"";
  width:52px;
  height:1px;
  background:color-mix(in srgb, var(--c-accent) 66%, transparent);
}
.value-card__copy{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;
  max-width:52%;
  padding:38px 26px 26px;
}
.value-card__copy h4{
  margin:0;
  color:var(--c-section-text);
  font-size:clamp(1.7rem, 2vw, 2.25rem);
  line-height:1.02;
}
.value-card__copy p{
  margin:0;
  max-width:20ch;
  color:var(--c-section-muted);
  font-size:.95rem;
  line-height:1.7;
}
.value-card__copy a{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-top:auto;
  border:1px solid var(--c-line);
  color:var(--c-section-text);
  background:var(--c-surface-raised);
}
.value-card__copy a:hover{
  border-color:var(--c-accent);
  color:var(--c-accent-dark);
}
.value-card__copy a i{ font-size:1rem; }
.editorial-value-card--light{
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96));
}
.values-quote{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:30px;
  margin-top:28px;
  padding:34px 30px;
  border-radius:14px;
  color:var(--c-on-dark);
  background:
    linear-gradient(180deg, rgba(20,28,24,.94), rgba(12,16,14,.96)),
    url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1800&q=80') center center / cover no-repeat;
  box-shadow:0 24px 48px rgba(0,0,0,.18);
}
.values-quote__text{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.values-quote__text i{
  color:var(--c-accent);
  font-size:2.2rem;
}
.values-quote__text p{
  margin:0;
  max-width:26ch;
  color:var(--c-on-dark);
  font-family:var(--font-head);
  font-size:1.55rem;
  line-height:1.22;
}
.values-quote__text p span{ color:var(--c-accent); }
.values-quote__facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:center;
}
.values-quote__facts div{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding-left:16px;
  border-left:1px solid rgba(255,255,255,.12);
}
.values-quote__facts div:first-child{ border-left:0; padding-left:0; }
.values-quote__facts i{
  color:var(--c-accent);
  font-size:1.35rem;
}
.values-quote__facts span{
  color:var(--c-on-dark);
  font-size:.9rem;
  line-height:1.45;
}
.timeline-section{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(241,232,220,.84) 0%, rgba(241,232,220,.64) 36%, rgba(241,232,220,.24) 60%, rgba(241,232,220,0) 72%),
    linear-gradient(180deg, rgba(26,21,17,.10), rgba(26,21,17,.28)),
    url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1800&q=80') center center / cover no-repeat,
    var(--c-secondary);
}
.timeline-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(244,239,231,.72) 0%, rgba(244,239,231,.42) 28%, rgba(244,239,231,0) 52%),
    radial-gradient(circle at 78% 18%, rgba(200,155,60,.12), transparent 18%);
  opacity:.92;
}
.timeline-section .container{ position:relative; z-index:1; }
}
.timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  padding-top:10px;
}
.timeline::before{
  content:"";
  position:absolute;
  top:30px;
  left:8%;
  right:8%;
  height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent-dark) 72%, transparent), transparent);
}
.timeline-item{
  position:relative;
  padding:24px 22px 22px;
  border:1px solid color-mix(in srgb, var(--c-primary) 12%, transparent);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,251,245,.84), rgba(255,251,245,.96)),
    linear-gradient(90deg, rgba(200,155,60,.06), transparent 46%, transparent 54%, rgba(200,155,60,.06));
  box-shadow:0 18px 38px rgba(26,21,17,.12);
  backdrop-filter:blur(10px);
}
.timeline-item:hover .timeline-item__year{
  transform:translateY(-2px);
}
.timeline-item__year{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:9px 14px;
  border-radius:999px;
  background:color-mix(in srgb, var(--c-accent) 16%, transparent);
  color:var(--c-accent-dark);
  font-family:var(--font-head);
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:.08em;
  box-shadow:0 8px 18px rgba(200,155,60,.12);
}
.timeline-item__line{
  width:22px;
  height:22px;
  margin:24px 0 16px;
  border-radius:50%;
  border:2px solid var(--c-accent-dark);
  background:linear-gradient(180deg, var(--c-surface), #fff);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--c-accent) 10%, transparent), 0 8px 16px rgba(26,21,17,.08);
}
.timeline-item h4{
  margin:0 0 10px;
  font-size:1.1rem;
}
.timeline-item p{
  margin:0;
  color:var(--c-section-muted);
  font-size:.93rem;
  line-height:1.65;
}
.team-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 10%, rgba(200,155,60,.12), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(12,28,20,.10), transparent 18%),
    linear-gradient(90deg, rgba(244,239,231,.88) 0%, rgba(244,239,231,.70) 36%, rgba(244,239,231,.22) 58%, rgba(244,239,231,0) 72%),
    linear-gradient(180deg, #f4efe7 0%, color-mix(in srgb, #f4efe7 82%, var(--c-surface) 18%) 100%);
}
.team-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(48,41,35,.16) 49.8%, transparent 50%),
    linear-gradient(180deg, rgba(48,41,35,.05), transparent 14%, transparent 84%, rgba(48,41,35,.05)),
    linear-gradient(135deg, rgba(48,41,35,.02) 0 1px, transparent 1px 100%);
  background-size:auto, auto, 220px 220px;
  opacity:.58;
}
.team-section .container{ position:relative; z-index:1; }
.team-hero{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(220px,.36fr) minmax(0,1.25fr);
  align-items:stretch;
  gap:22px;
  min-height:430px;
}
.team-hero__copy{
  position:relative;
  padding:34px 0 22px;
  align-self:center;
}
.team-hero__copy h2{
  max-width:9ch;
  margin-bottom:18px;
  font-size:clamp(2.7rem, 4.8vw, 4.2rem);
  line-height:.96;
  letter-spacing:-.04em;
}
.team-hero__copy p{
  max-width:34ch;
  font-size:1.02rem;
  line-height:1.7;
  color:var(--c-section-muted);
}
.team-hero__link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding-bottom:10px;
  border-bottom:2px solid color-mix(in srgb, var(--c-accent) 60%, transparent);
  color:var(--c-section-text);
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.team-hero__link i{ color:var(--c-accent-dark); }
.team-hero__stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:30px;
  border-radius:10px;
  background:linear-gradient(180deg, #173320, #102318);
  color:var(--c-on-dark);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  align-self:center;
  max-width:290px;
  z-index:2;
}
.team-hero__stat i{
  color:var(--c-accent);
  font-size:1.4rem;
}
.team-hero__stat-number{
  font-family:var(--font-head);
  font-size:clamp(3rem, 5vw, 4.6rem);
  line-height:1;
  letter-spacing:-.04em;
}
.team-hero__stat-label{
  font-family:var(--font-head);
  font-size:1.15rem;
  font-weight:700;
}
.team-hero__stat p{
  margin:0;
  color:color-mix(in srgb, var(--c-on-dark) 82%, transparent);
  font-size:.95rem;
  line-height:1.6;
}
.team-hero__art{
  position:relative;
  min-height:430px;
  border-radius:2px;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(244,239,231,.34), rgba(244,239,231,0) 12%),
    linear-gradient(180deg, rgba(20,16,13,.05), rgba(20,16,13,.16)),
    url('https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1800&q=80') center center / cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(48,41,35,.08);
}
.team-hero__art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(244,239,231,.8) 0%, rgba(244,239,231,.5) 20%, rgba(244,239,231,0) 42%),
    linear-gradient(180deg, transparent 52%, rgba(200,155,60,.13) 100%);
}
.team-hero__art::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:38%;
  height:20%;
  background:linear-gradient(180deg, rgba(200,155,60,.95), rgba(184,137,44,.92));
}
.team-values{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:54px 0 0;
  padding:28px 0;
  background:linear-gradient(90deg, #1d1b19, #111312);
  color:var(--c-on-dark);
}
.team-value{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:0 28px;
  border-left:1px solid rgba(255,255,255,.12);
}
.team-value:first-child{ border-left:0; }
.team-value i{
  color:var(--c-accent);
  font-size:1.5rem;
  padding-top:2px;
}
.team-value h4{
  margin:0 0 8px;
  color:var(--c-on-dark);
  font-family:var(--font-head);
  font-size:1.12rem;
}
.team-value p{
  margin:0;
  color:color-mix(in srgb, var(--c-on-dark) 82%, transparent);
  font-size:.88rem;
  line-height:1.6;
}
.team-leadership-head{
  max-width:520px;
  margin:72px 0 28px;
  text-align:left;
}
.team-leadership-head .eyebrow{ justify-content:flex-start; }
.team-carousel{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.team-profile{
  overflow:hidden;
  border-radius:8px;
  background:var(--c-primary);
  box-shadow:0 16px 34px rgba(0,0,0,.09);
}
.team-profile__media{
  position:relative;
  min-height:230px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.18)),
    radial-gradient(circle at 24% 24%, rgba(255,255,255,.46), transparent 22%),
    radial-gradient(circle at 76% 16%, rgba(200,155,60,.22), transparent 22%),
    linear-gradient(135deg, rgba(39,49,44,.95), rgba(15,18,16,.92));
  background-size:cover;
  background-position:center top;
}
.team-profile__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 24%, rgba(255,255,255,.08) 24.5%, transparent 25.5%, transparent 71%, rgba(255,255,255,.08) 71.5%, transparent 72.5%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 50%, rgba(0,0,0,.12));
  mix-blend-mode:screen;
  opacity:.38;
}
.team-profile__media::after{
  content:"";
  position:absolute;
  inset:auto 16px 16px auto;
  width:74px;
  height:74px;
  border:1px solid rgba(200,155,60,.55);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(200,155,60,.1), rgba(200,155,60,.02));
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  opacity:.5;
}
.team-profile__badge{
  position:absolute;
  top:0;
  right:0;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:color-mix(in srgb, var(--c-accent) 85%, #fff 15%);
  color:var(--c-primary);
  font-size:.78rem;
  font-weight:800;
  text-transform:lowercase;
}
.team-avatar{
  position:absolute;
  left:16px;
  bottom:16px;
  inset:auto;
  width:68px;
  height:68px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--c-on-dark);
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.06em;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(180deg, rgba(30,29,27,.76), rgba(30,29,27,.88));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);
}
.team-avatar::before{
  content:"";
  position:absolute;
  inset:14px 16px 24px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50% 50% 42% 42%;
  box-shadow:
    0 0 0 8px rgba(255,255,255,.03) inset,
    0 14px 0 -8px rgba(255,255,255,.12) inset;
}
.team-avatar::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:10px;
  width:48%;
  height:22px;
  transform:translateX(-50%);
  border-radius:45% 45% 22% 22%;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  opacity:.55;
}
.team-avatar--dark{ background:linear-gradient(180deg, rgba(20,24,22,.18), rgba(17,18,20,.58)), linear-gradient(135deg, #21262a, #111417); }
.team-avatar--olive{ background:linear-gradient(180deg, rgba(24,28,18,.16), rgba(20,20,16,.52)), linear-gradient(135deg, #3d4a31, #182018); }
.team-avatar--gold{ background:linear-gradient(180deg, rgba(25,22,14,.16), rgba(22,18,11,.54)), linear-gradient(135deg, #8a6b31, #1f1a14); }
.team-avatar--sand{ background:linear-gradient(180deg, rgba(30,22,14,.18), rgba(20,17,14,.5)), linear-gradient(135deg, #8c7358, #2a2118); }
.team-profile__body{
  padding:20px 20px 22px;
  background:
    linear-gradient(180deg, rgba(23,21,19,.98), rgba(18,16,14,.98)),
    linear-gradient(90deg, rgba(200,155,60,.06), transparent 34%, transparent 66%, rgba(200,155,60,.06));
}
.team-profile__body h4{
  margin:0 0 4px;
  color:var(--c-on-dark);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.team-profile__body .role{
  color:var(--c-accent);
  font-family:var(--font-head);
  font-size:.92rem;
  font-style:italic;
  margin-bottom:10px;
}
.team-profile__body p{
  margin:0;
  color:color-mix(in srgb, var(--c-on-dark) 78%, transparent);
  font-size:.88rem;
  line-height:1.6;
}
.team-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:28px 0 0;
  padding:20px 18px;
  border:1px solid color-mix(in srgb, var(--c-primary) 10%, transparent);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.96)),
    linear-gradient(90deg, rgba(200,155,60,.08), transparent 40%, transparent 60%, rgba(200,155,60,.08));
  box-shadow:0 10px 24px rgba(26,21,17,.06);
}
.team-metric{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:8px 20px;
  border-left:1px solid var(--c-line);
}
.team-metric:first-child{ border-left:0; }
.team-metric span{
  color:var(--c-accent-dark);
  font-family:var(--font-head);
  font-size:2rem;
  font-weight:800;
  line-height:1;
}
.team-metric p{
  margin:0;
  color:var(--c-section-muted);
  font-size:.86rem;
  line-height:1.55;
}
@media (max-width:1100px){
  :root{
    --fs-h1: clamp(2.5rem, 5.6vw, 4.6rem);
    --fs-h2: clamp(1.8rem, 3.9vw, 3rem);
    --fs-body: 1.04rem;
  }
  .purpose-grid{ grid-template-columns:1fr; }
  .purpose-card,.purpose-card--vision{ grid-template-columns:minmax(0, .42fr) minmax(0, 1fr); }
  .values-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .timeline{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .timeline::before{ display:none; }
  .team-hero{ grid-template-columns:1fr; min-height:0; }
  .team-hero__art{ min-height:360px; }
  .team-hero__stat{ max-width:none; }
  .team-values{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .team-carousel{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .team-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .projects-masonry{ gap:20px; }
  .process-track{ gap:16px; }
  .stories-heading{ margin-bottom:28px; }
}
@media (max-width:768px){
  :root{
    --fs-h1: clamp(2.35rem, 10vw, 3.5rem);
    --fs-h2: clamp(1.7rem, 7vw, 2.5rem);
    --fs-body: 1rem;
  }
  section{ padding: var(--space-5) 0; }
  .team-section::before{ opacity:.35; }
  .purpose-bg{ width:42vw; opacity:.18; }
  .purpose-card,.purpose-card--vision{ grid-template-columns:1fr; min-height:0; }
  .purpose-card__image{ min-height:220px; }
  .purpose-card__body{ padding:28px 24px 30px; }
  .purpose-note{ align-items:flex-start; text-align:left; flex-direction:column; }
  .values-grid,.timeline{ grid-template-columns:1fr; }
  .values-quote{ grid-template-columns:1fr; padding:26px 22px; }
  .values-quote__facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .team-values{ grid-template-columns:1fr; }
  .team-value{ border-left:0; border-top:1px solid rgba(255,255,255,.12); padding:18px 22px; }
  .team-value:first-child{ border-top:0; }
  .team-carousel{ grid-template-columns:1fr; }
  .team-metrics{ grid-template-columns:1fr; }
  .team-metric{ border-left:0; border-top:1px solid var(--c-line); padding:14px 0; }
  .team-metric:first-child{ border-top:0; }
  .projects-masonry{ gap:16px; }
  .process-track{ grid-template-columns:1fr; }
  .testi-card{ padding:28px 24px 24px; }
  .footer-grid{ gap:28px; }
  .team-hero__art{ min-height:280px; order:3; }
}

[data-aos]{
  opacity:1;
  transition-property: opacity, transform;
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(0.22,1,0.36,1);
  transition-delay: var(--aos-delay, 0ms);
}
.motion-ready [data-aos]{ opacity:0; }
[data-aos].aos-in{ opacity:1; }
[data-aos="fade-up"]{ transform: translateY(28px); }
[data-aos="fade-up"].aos-in{ transform: translateY(0); }
[data-aos="fade-right"]{ transform: translateX(-28px); }
[data-aos="fade-right"].aos-in{ transform: translateX(0); }
[data-aos="fade-left"]{ transform: translateX(28px); }
[data-aos="fade-left"].aos-in{ transform: translateX(0); }

.theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after{
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, box-shadow 320ms ease !important;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ================= MODERN UI ANIMATIONS & INTERACTIONS ================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Tactile Card Hovers (Hardware-accelerated) */
.project-card,
.service-masonry-card,
.home-why-item,
.process-step,
.testi-card,
.purpose-card,
.value-card,
.team-profile {
  will-change: transform, box-shadow;
  transition: transform var(--motion-med) var(--motion-curve), box-shadow var(--motion-med) var(--motion-curve), border-color var(--motion-med) var(--motion-curve);
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover,
  .service-masonry-card:hover,
  .home-why-item:hover,
  .process-step:hover,
  .testi-card:hover,
  .purpose-card:hover,
  .value-card:hover,
  .team-profile:hover {
    transform: translateY(-8px) translate3d(0,0,0) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16) !important;
  }
}

/* Internal Image Zoom */
.project-card,
.bp-frame,
.gallery-grid > div {
  overflow: hidden !important;
}

.project-card img,
.bp-frame img,
.gallery-grid img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover img,
  .bp-frame:hover img,
  .gallery-grid > div:hover img {
    transform: scale(1.06) !important;
  }
}

/* Asymmetrical Layout Offset (Desktop only) */
@media (min-width: 993px) {
  .services-masonry > *:nth-child(even),
  .projects-masonry > *:nth-child(even) {
    margin-top: 60px;
  }
}

/* ==========================================================================
   1. The Vertical Reveal (Intersection Observer)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   2. The Contained Image Scale
   ========================================================================== */
.image-wrapper {
  overflow: hidden;
  border-radius: 4px;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease-out;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .image-wrapper:hover img {
    transform: scale(1.05);
  }
}

/* ==========================================================================
   3. The Drafting Underline (Navigation Links)
   ========================================================================== */
.nav-link {
  position: relative;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor; /* Matches the color of the text automatically */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   4. The Smooth Accordion (FAQ Section using modern CSS Grid)
   ========================================================================== */
.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.faq-question {
  width: 100%;
  padding: 16px 0;
  text-align: left;
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  color: inherit;
}

.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.faq-answer-wrapper.is-open {
  grid-template-rows: 1fr;
}

.faq-answer {
  overflow: hidden;
  min-height: 0; /* Critical for CSS Grid transition to function properly */
}

.faq-answer p {
  padding: 0 0 16px 0;
  margin: 0;
  line-height: 1.6;
  color: #555;
}

/* ==========================================================================
   5. Navigation Dropdown Menu (Premium & Adaptive)
   ========================================================================== */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--nav-overlay-text);
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: color .25s ease, background-color .25s ease;
}

.site-header .nav-dropdown-trigger {
  color: var(--c-primary);
  font-family: 'Manrope', var(--font-body);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .025em;
  padding: 9px 13px;
  border-radius: 999px;
}

.dropdown-arrow {
  font-size: 0.65rem;
  opacity: 0.85;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-dropdown.is-active .dropdown-arrow,
.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 260px;
  background: color-mix(in srgb, var(--c-surface) 96%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--c-primary) 12%, transparent);
  border-radius: 12px;
  padding: 8px 0;
  margin: 12px 0 0 0;
  list-style: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
  z-index: 100;
  pointer-events: none;
}

/* Show dropdown on hover (desktop only) */
@media (min-width: 993px) {
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown.is-active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
}

.dropdown-menu li {
  margin: 4px 0;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 18px;
  color: var(--c-primary);
  font-family: 'Manrope', var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  line-height: 1.4;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu li a:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-accent-dark);
}

/* Dark mode fallback hover color */
[data-theme="dark"] .dropdown-menu li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-accent);
}

/* Active Page State for Dropdown Trigger & Options */
.nav-dropdown.is-active-page .nav-dropdown-trigger {
  background: color-mix(in srgb, var(--c-accent) 22%, transparent);
  color: var(--c-primary) !important;
}

.nav-dropdown:hover .nav-dropdown-trigger {
  color: var(--c-accent-dark) !important;
}

/* Mobile responsive accordion-style dropdown */
@media (max-width: 992px) {
  .nav-dropdown {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-dropdown-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    color: var(--c-on-dark) !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 0 !important;
    background: none !important;
  }

  .dropdown-menu {
    position: static;
    transform: none !important;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 16px 20px;
    margin: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    backdrop-filter: none;
  }

  .nav-dropdown.is-active .dropdown-menu {
    display: block;
  }

  .dropdown-menu li {
    padding: 0;
    margin: 0;
  }

  .dropdown-menu li a {
    padding: 12px 0;
    font-size: 0.68rem;
    color: var(--c-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0;
  }
  
  .dropdown-menu li a:hover {
    background: none;
    color: var(--c-accent);
  }
}