/* ═══════════════════════════════════════════════════════════
   PK Solar — Design System
   "Olive Grove" — minimal premium green, June 2026
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Alba';
  src: url('../assets/fonts/Alba-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Glacier Free';
  src: url('../assets/fonts/Glacier-Free.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* demo build watermarks the glyphs for 0-4 and ₹ — exclude them so
     headings fall back to Fraunces for those characters instead */
  unicode-range: U+0000-002F, U+0035-007F;
}
@font-face {
  font-family: 'Roundelay';
  src: url('../assets/fonts/Roundelay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roundelay';
  src: url('../assets/fonts/Roundelay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roundelay';
  src: url('../assets/fonts/Roundelay-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Brand palette — "Olive Grove" ──
     Onyx anchors (nav/footer/hero), Parchment + Cream canvases,
     olive leaf for secondary accents, matcha for CTAs. */
  --onyx:      #090D0A;
  --olive:     #4A612F;
  --matcha:    #879D55;
  --matcha-lt: #B7C68F;
  --cream:     #EEE6D1;
  --parchment: #FAF5EF;

  --rich-black:  var(--onyx);
  --ink-deep:    var(--onyx);
  --beau:        var(--cream);
  --gentle:      #E9ECDA;
  --mist:        var(--parchment);
  --cloud:       #FFFFFF;
  --navagio:     var(--olive);

  --jelly:       var(--navagio);
  --columbia:    var(--ink-deep);
  --pastel:      #2E3D1D;
  --accent:      var(--matcha);
  --accent-2:    var(--matcha-lt);
  --gold-ink:    var(--onyx);
  --on-accent:   var(--onyx);

  /* ── Surfaces ── */
  --bg:     var(--mist);
  --surf:   var(--cloud);
  --surf-2: var(--cream);
  --charcoal: var(--onyx);
  --navy:   var(--onyx);
  --warm-black: var(--olive);
  --warm:   var(--warm-black);
  --white:      var(--cloud);
  --warm-white: rgba(12,23,7,.04);

  /* ── Text (default = dark ink on light canvas) ── */
  --ink:      var(--ink-deep);
  --ink-2:    #5C6650;
  --ink-3:    rgba(12,23,7,.65);
  --ink-muted:var(--ink-2);
  --muted:    var(--ink-2);
  --eb:  var(--columbia);
  --ns:  var(--pastel);
  --cc:  var(--ink-3);
  --tc:  var(--jelly);
  --eco: var(--jelly);
  --mp:  var(--rich-black);
  --mo:  rgba(74,97,47,.35);
  --ma:  var(--warm-black);

  /* ── Accent ── */
  --gold:       var(--accent);
  --gold-light: var(--accent-2);
  --gold-dim:   rgba(135,157,85,.14);
  --gold-glow:  rgba(135,157,85,.34);

  /* ── Status ── */
  --green:    #4F7A3A; --green-bg: rgba(79,122,58,.08); --green-bd: rgba(79,122,58,.22);
  --red:      #B5453F; --red-bg:   rgba(181,69,63,.08); --red-bd:   rgba(181,69,63,.22);

  /* ── Structure ── */
  --border: rgba(12,23,7,.10);
  --line:   rgba(12,23,7,.10);
  --r:      18px;
  --radius: 18px;
  --max:    1240px;

  /* ── Adaptive tint tiers (dark-on-light by default) ── */
  --tint-1: rgba(12,23,7,.035);
  --tint-2: rgba(12,23,7,.06);
  --tint-3: rgba(12,23,7,.09);
  --tint-4: rgba(12,23,7,.13);
  --tint-5: rgba(12,23,7,.18);
  --tint-6: rgba(12,23,7,.28);

  /* ── Type ── */
  --ff-d: 'Glacier Free', 'Fraunces', serif;
  --font-display: var(--ff-d);
  --ff-b: 'Roundelay', 'Geist', system-ui, sans-serif;
  --ff-u: 'Roundelay', 'Geist', system-ui, sans-serif;
  --font-ui: var(--ff-u);
  --ff-serif: 'Fraunces', serif;

  /* ── Motion ── */
  --ease-expo:   cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.22,1,.36,1);
  --ease-soft:   cubic-bezier(.32,.72,0,1);
  --t: .5s var(--ease-expo);
}

/* ── Dark-anchor scope — nav, footer, hero, marquee, final CTA, instrument ──
   Re-light the semantic text tokens for light-on-dark surfaces. */
.nav-inner, .nav-island, .mob-nav, .dropdown, .mob-cta,
footer, .marquee-wrap, .final-cta-sec, .final-cta, .instrument-inner,
.hero, .s-dark, .stats-bar, .cta-band, .error-page, .partners-sec {
  --columbia: var(--parchment);
  --pastel:   var(--cream);
  --ink-2:    #AEB99B;
  --ink-3:    rgba(250,245,239,.55);
  --jelly:    #A6BD78;
  --gold-ink: var(--accent);
  --border:   rgba(250,245,239,.14);
  --line:     rgba(250,245,239,.14);
  --tint-1: rgba(250,245,239,.06);
  --tint-2: rgba(250,245,239,.09);
  --tint-3: rgba(250,245,239,.13);
  --tint-4: rgba(250,245,239,.18);
  --tint-5: rgba(250,245,239,.24);
  --tint-6: rgba(250,245,239,.34);
}

/* ═══════════════════ RESET / BASE ═══════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  font-family:var(--ff-b); color:var(--ink); background:var(--bg);
  overflow-x:hidden; font-weight:400; line-height:1.5;
}
img  { display:block; max-width:100%; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
:focus-visible { outline:2px solid var(--rich-black); outline-offset:3px; border-radius:3px; }
.nav-inner :focus-visible, .mob-nav :focus-visible, footer :focus-visible,
.marquee-wrap :focus-visible, .final-cta-sec :focus-visible,
.instrument-inner :focus-visible, .hero :focus-visible, .s-dark :focus-visible,
.dropdown :focus-visible, .mob-cta :focus-visible {
  outline-color: var(--accent-2);
}
::selection { background:var(--accent); color:var(--on-accent); }

/* theme-matched scrollbar — adapts to light/dark via tokens */
html { scrollbar-width:thin; scrollbar-color:var(--tint-5) transparent; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:var(--tint-5); border-radius:10px;
  border:3px solid var(--bg); background-clip:padding-box;
  transition:background .3s;
}
::-webkit-scrollbar-thumb:hover { background:var(--tint-6); background-clip:padding-box; }

/* smooth cross-fade when toggling day/night — the `.theme-anim` class is
   added to <html> for ~500ms around the switch, then removed, so the page
   melts between palettes instead of snapping (and normal interactions stay snappy) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:background-color .5s var(--ease-soft), border-color .5s var(--ease-soft),
             color .5s var(--ease-soft), fill .5s var(--ease-soft),
             box-shadow .5s var(--ease-soft) !important;
}
/* …but keep the hero's day/night photo + veil crossfade (opacity/transform),
   which the blanket rule above would otherwise clobber into a hard snap */
html.theme-anim .hero-house { transition:opacity .9s var(--ease-expo), transform .9s var(--ease-expo) !important; }
html.theme-anim .hero-glow  { transition:opacity 1.1s ease-in-out !important; }
/* …and the Morning/Night toggle thumb — without this exception the blanket
   rule strips its transform transition and the pill snaps instead of gliding */
html.theme-anim .hero-toggle-thumb {
  transition:transform .6s var(--ease-spring), background-color .5s var(--ease-soft),
             box-shadow .5s var(--ease-soft) !important;
}
@media (prefers-reduced-motion:reduce) { html.theme-anim, html.theme-anim * { transition:none !important; } }

/* fixed grain overlay — GPU-safe */
body::after {
  content:''; position:fixed; inset:0; z-index:998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.025; mix-blend-mode:multiply;
}
/* in dark mode multiply-on-black hides the grain — switch to screen so the
   texture lifts the flat-black surfaces just slightly */
html[data-theme="dark"] body::after { opacity:.035; mix-blend-mode:screen; }

/* scroll progress bar — injected by main.js, fills as the page scrolls */
.scroll-progress {
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transform-origin:0 50%;
  z-index:1100; pointer-events:none;
  transition:transform .12s linear;
}
@media (prefers-reduced-motion:reduce) { .scroll-progress { display:none; } }

/* ═══════════════════ TOPBAR (legacy — hidden) ═══════════════════ */
.topbar { display:none; }

/* ═══════════════════ NAV — floating glass island ═══════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 24px; pointer-events:none;
  display:flex; justify-content:center;
}
.nav-inner, .nav-island {
  pointer-events:all;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; max-width:1040px;
  background:rgba(12,23,7,.88);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--border);
  border-radius:100px;
  padding:8px 8px 8px 26px;
  box-shadow:0 12px 40px rgba(12,23,7,.16), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .45s var(--ease-expo), border-color .45s var(--ease-expo), box-shadow .45s var(--ease-expo);
}
.nav.scrolled .nav-inner, .nav.scrolled .nav-island {
  background:rgba(12,23,7,.92);
  border-color:rgba(250,245,239,.18);
  box-shadow:0 16px 48px rgba(12,23,7,.22), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ── Cream/beige nav (everything except the un-scrolled index hero, which
   stays a transparent overlay on the photo) ── */
.nav:not(.nav--hero) .nav-inner, .nav:not(.nav--hero) .nav-island,
.nav:not(.nav--hero) .dropdown,
.nav--hero.scrolled .nav-inner, .nav--hero.scrolled .nav-island,
.nav--hero.scrolled .dropdown {
  --columbia: var(--ink-deep);
  --ink-3:    rgba(12,23,7,.65);
  --border:   rgba(12,23,7,.10);
  --line:     rgba(12,23,7,.10);
}
.nav:not(.nav--hero) .nav-inner, .nav:not(.nav--hero) .nav-island {
  background:rgba(250,245,239,.78);
  box-shadow:0 12px 40px rgba(74,97,47,.12), inset 0 1px 0 rgba(255,255,255,.6);
}
.nav:not(.nav--hero).scrolled .nav-inner, .nav:not(.nav--hero).scrolled .nav-island,
.nav--hero.scrolled .nav-inner, .nav--hero.scrolled .nav-island {
  background:rgba(250,245,239,.94);
  border-color:rgba(12,23,7,.12);
  box-shadow:0 16px 48px rgba(74,97,47,.16), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav:not(.nav--hero) .dropdown,
.nav--hero.scrolled .dropdown {
  background:rgba(250,245,239,.96);
  box-shadow:0 24px 64px rgba(74,97,47,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.nav:not(.nav--hero) .nav-links a:hover, .nav:not(.nav--hero) .nav-links > li > button:hover,
.nav:not(.nav--hero) .nav-links a.active,
.nav--hero.scrolled .nav-links a:hover, .nav--hero.scrolled .nav-links > li > button:hover,
.nav--hero.scrolled .nav-links a.active {
  background:rgba(12,23,7,.06);
}
.nav:not(.nav--hero) .dropdown a:hover, .nav--hero.scrolled .dropdown a:hover { background:rgba(12,23,7,.06); }
.nav:not(.nav--hero) .nav-toggle:hover, .nav--hero.scrolled .nav-toggle:hover { background:rgba(12,23,7,.06); }

.nav-logo { display:flex; align-items:center; flex-shrink:0; transition:opacity .25s; }
.nav-logo:hover { opacity:.85; }
.nav-logo img { height:54px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); }

.nav-links { display:flex; align-items:center; gap:0; flex:1; justify-content:center; }
.nav-links > li { position:relative; }
.nav-links a,
.nav-links > li > button {
  position:relative;
  font-family:var(--ff-u); font-weight:500; font-size:13px; letter-spacing:.01em;
  color:var(--ink-3); padding:9px 12px; border-radius:100px;
  transition:color .3s var(--ease-expo), background .3s var(--ease-expo);
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; border:none; background:none; white-space:nowrap;
}
.nav-links a:hover, .nav-links > li > button:hover { color:var(--columbia); background:rgba(250,245,239,.08); }
.nav-links a.active { color:var(--columbia); background:rgba(250,245,239,.10); }
.has-drop { position:relative; }
.has-drop > button::after { content:''; display:inline-block; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.5; margin-left:2px; }
.dropdown {
  position:absolute; top:calc(100% + 12px); left:0;
  background:rgba(12,23,7,.62); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--border);
  border-radius:18px; padding:6px; min-width:236px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transition:opacity .25s var(--ease-expo), visibility .25s, transform .3s var(--ease-expo);
  z-index:200; box-shadow:0 24px 64px rgba(12,23,7,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown { opacity:1; visibility:visible; transform:none; }
.dropdown a {
  font-size:13px; color:var(--ink-3); padding:10px 16px;
  border-radius:12px; display:block; transition:color .15s, background .15s;
}
.dropdown a:hover { color:var(--columbia); background:rgba(250,245,239,.08); }

/* CTA pill — button-in-button */
.nav-cta {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex !important; align-items:center; gap:10px !important;
  background:var(--accent) !important; color:var(--on-accent) !important;
  font-weight:600 !important; border-radius:100px !important;
  padding:9px 9px 9px 22px !important; font-size:13px !important;
  flex-shrink:0; white-space:nowrap;
  transition:transform .45s var(--ease-spring), box-shadow .35s var(--ease-expo), background .3s var(--ease-expo) !important;
}
.nav-cta::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
  transform:translateX(-130%); transition:transform .85s var(--ease-expo);
}
.nav-cta > * { position:relative; z-index:1; }
.nav-cta::after {
  content:'\2192'; width:28px; height:28px; border-radius:50%;
  background:rgba(12,23,7,.14); display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0; position:relative; z-index:1;
  transition:transform .5s var(--ease-spring), background .3s var(--ease-expo);
}
.nav-cta:hover { transform:translateY(-2px) scale(1.025); box-shadow:0 12px 32px var(--gold-glow) !important; background:var(--accent-2) !important; }
.nav-cta:hover::before { transform:translateX(130%); }
.nav-cta:hover::after { transform:translateX(2px) rotate(45deg) scale(1.1); background:rgba(12,23,7,.22); }
.nav-cta:active { transform:translateY(0) scale(.97) !important; transition:transform .15s var(--ease-soft) !important; }
@keyframes icon-nudge-sm {
  0%, 100% { transform:translateX(2px) rotate(45deg) scale(1.1); }
  50%      { transform:translateX(5px) rotate(45deg) scale(1.1); }
}
@media (prefers-reduced-motion:no-preference) {
  .nav-cta:hover::after { animation:icon-nudge-sm 1.1s ease-in-out infinite; }
}

/* hamburger */
.nav-toggle {
  display:none; flex-direction:column; gap:5.5px;
  padding:10px; min-width:44px; min-height:44px;
  align-items:center; justify-content:center;
  border-radius:100px; transition:background .25s; flex-shrink:0;
}
.nav-toggle:hover { background:rgba(250,245,239,.08); }
.nav-toggle span {
  display:block; width:20px; height:1.5px;
  background:var(--columbia); border-radius:2px;
  transform-origin:center;
  transition:transform .42s var(--ease-spring), opacity .2s;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* mob-close already shows an X when the menu is open — hide the hamburger so the two don't overlap */
.nav-toggle.open { opacity:0; pointer-events:none; }

/* ── THEME TOGGLE — sun / moon, site-wide dark mode ── */
.theme-toggle {
  position:relative; flex-shrink:0;
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--columbia);
  border:1px solid var(--border); background:var(--tint-1);
  transition:background .3s var(--ease-expo), border-color .3s var(--ease-expo),
             transform .5s var(--ease-spring), color .3s var(--ease-expo);
}
.theme-toggle:hover { background:var(--tint-2); transform:translateY(-2px); }
.theme-toggle:active { transform:scale(.9); transition:transform .15s var(--ease-soft); }
.theme-toggle svg {
  position:absolute; width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .4s var(--ease-expo), transform .55s var(--ease-spring);
}
.theme-toggle .ic-moon { opacity:1; transform:rotate(0) scale(1); }
.theme-toggle .ic-sun  { opacity:0; transform:rotate(-90deg) scale(.4); }
html[data-theme="dark"] .theme-toggle .ic-moon { opacity:0; transform:rotate(90deg) scale(.4); }
html[data-theme="dark"] .theme-toggle .ic-sun  { opacity:1; transform:rotate(0) scale(1); }
@media (max-width:380px) { .theme-toggle { width:38px; height:38px; } }

/* ── MOBILE FULL-SCREEN NAV ── */
.mob-nav {
  display:none; position:fixed; inset:0; z-index:1002;
  background:rgba(12,23,7,.98);
  backdrop-filter:blur(36px); -webkit-backdrop-filter:blur(36px);
  padding:104px 28px 48px; flex-direction:column; gap:0; overflow-y:auto;
}
.mob-nav.open { display:flex; }
.mob-nav-links { display:flex; flex-direction:column; gap:0; }
.mob-nav > a, .mob-nav-links > a {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(26px,8vw,44px); letter-spacing:-.01em;
  color:var(--ink-3); padding:16px 0;
  border-bottom:1px solid var(--border);
  transition:color .25s var(--ease-expo);
  opacity:0; transform:translateY(18px);
}
.mob-nav.open > a, .mob-nav.open .mob-nav-links > a { animation:mob-link-rise .56s var(--ease-expo) both; }
.mob-nav > a:hover, .mob-nav-links > a:hover { color:var(--columbia); }
.mob-nav > a.gold-link, .mob-nav-links > a.gold-link { color:var(--accent); }
.mob-nav details, .mob-nav-links > details {
  border-bottom:1px solid var(--border);
  opacity:0; transform:translateY(18px);
  animation:mob-link-rise .56s var(--ease-expo) both;
}
.mob-nav summary, .mob-nav-links > details summary {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(26px,8vw,44px); letter-spacing:-.01em;
  color:var(--ink-3); padding:16px 0; cursor:pointer; list-style:none;
}
.mob-nav summary:hover, .mob-nav-links > details summary:hover { color:var(--columbia); }
.mob-nav details a, .mob-nav-links > details a {
  font-family:var(--ff-u); font-size:15px; font-weight:500;
  color:var(--ink-3); padding:11px 18px; display:block;
  opacity:1 !important; transform:none !important; animation:none !important;
  border-bottom:none; transition:color .2s;
}
.mob-nav details a:hover, .mob-nav-links > details a:hover { color:var(--columbia); }
.mob-nav > a:nth-child(1) { animation-delay:.04s; }
.mob-nav > *:nth-child(2) { animation-delay:.09s; }
.mob-nav > *:nth-child(3) { animation-delay:.14s; }
.mob-nav > *:nth-child(4) { animation-delay:.19s; }
.mob-nav > *:nth-child(5) { animation-delay:.24s; }
.mob-nav > *:nth-child(6) { animation-delay:.29s; }
.mob-nav > *:nth-child(7) { animation-delay:.34s; }
.mob-nav > *:nth-child(8) { animation-delay:.39s; }
@keyframes mob-link-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

/* WhatsApp pill at the bottom of the mobile menu — double-class specificity
   overrides the big display-font link styling that .mob-nav > a applies */
.mob-nav .mob-nav-wa, .mob-nav-links .mob-nav-wa {
  display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-end;
  width:52px; height:52px;
  margin-top:28px; padding:0; border-radius:50%;
  color:#5FE08B;
  background:#25D366; border:1px solid rgba(37,211,102,.38);
  transition:background .25s, color .25s, border-color .25s;
}
.mob-nav .mob-nav-wa:hover, .mob-nav-links .mob-nav-wa:hover {
  background:#20bd5a; border-color:rgba(37,211,102,.55);
}
.mob-nav .mob-nav-wa img, .mob-nav-links .mob-nav-wa img { flex-shrink:0; width:24px; height:24px; object-fit:contain; }
.mob-nav.open .mob-nav-wa { animation-delay:.44s; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.mob-close {
  position:fixed; top:20px; right:20px; z-index:1001;
  width:44px; height:44px; border-radius:50%;
  background:rgba(250,245,239,.06); border:1px solid rgba(250,245,239,.16);
  color:var(--ink-3); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .35s var(--ease-spring);
}
.mob-close:hover { background:rgba(250,245,239,.14); transform:rotate(90deg); }

/* ═══════════════════ PAGE HERO (inner pages) ═══════════════════ */
.page-hero {
  background:var(--beau);
  padding:172px 24px 56px; text-align:center;
  position:relative; overflow:hidden;
}
.page-hero + .sec { padding-top:64px; }
.breadcrumb {
  font-family:var(--ff-u); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:22px; position:relative;
}
.breadcrumb a { color:var(--ink-3); transition:color .2s; }
.breadcrumb a:hover { color:var(--gold-ink); }
.breadcrumb span { margin:0 10px; opacity:.4; }
.page-hero h1 {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(36px,6.4vw,76px); color:var(--columbia);
  letter-spacing:-.012em; line-height:1.06; position:relative; margin-bottom:20px;
}
.page-hero h1 em { font-style:normal; font-family:var(--ff-serif); font-style:italic; font-weight:400; color:var(--accent); }
.page-hero > p {
  font-size:17px; color:var(--ink-2); max-width:560px;
  margin:0 auto; line-height:1.75; position:relative;
}
@media (prefers-reduced-motion:no-preference) {
  @keyframes page-hero-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
  .page-hero .breadcrumb { animation:page-hero-rise .6s var(--ease-expo) both; }
  .page-hero h1          { animation:page-hero-rise .7s var(--ease-expo) .08s both; }
  .page-hero > p          { animation:page-hero-rise .7s var(--ease-expo) .16s both; }
}

/* ═══════════════════ SECTION BASE ═══════════════════ */
.sec  { padding:120px 24px; position:relative; }
.max  { max-width:var(--max); margin:0 auto; position:relative; z-index:1; }
.sh   { text-align:center; margin-bottom:40px; }
.eyebrow {
  font-family:var(--ff-u); font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--jelly);
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.eyebrow::before {
  content:''; display:inline-block; width:24px; height:1px;
  background:var(--jelly); flex-shrink:0;
}
.eyebrow.dim { color:var(--ink-3); }
.eyebrow.dim::before { background:var(--ink-3); }
.eyebrow.center { justify-content:center; }
.eyebrow.center::before { display:none; }
.h2 {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(30px,4.4vw,56px); line-height:1.06;
  letter-spacing:-.012em; color:var(--columbia); margin-bottom:18px;
}
.h2 em { font-style:italic; font-family:var(--ff-serif); font-weight:400; color:var(--accent); }
.lead { font-size:16.5px; color:var(--ink-2); max-width:580px; margin:0 auto; line-height:1.8; }

/* section backgrounds — quiet pastel rhythm across a light, premium canvas */
.s-warm  { background:var(--beau); }
.s-white { background:var(--mist); }
.s-navy  { background:var(--gentle); position:relative; overflow:hidden; }
.s-dark  { background:var(--rich-black); position:relative; overflow:hidden; }
.s-navy::before {
  content:''; position:absolute; width:640px; height:640px; left:50%; top:50%;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 65%);
}
.s-dark::before {
  content:''; position:absolute; width:640px; height:640px; left:50%; top:50%;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(135,157,85,.12) 0%, transparent 65%);
}
.s-dark .h2 em, .s-dark .eyebrow { color:var(--accent); }
.s-dark .eyebrow::before { background:var(--jelly); }

/* light cards (white/cloud bg) inside a dark section keep dark-on-light text */
.s-dark .tl-card, .s-dark .why-card, .s-dark .svc-detail-card, .s-dark .service-card,
.s-dark .vm-card, .s-dark .bezel {
  --columbia: var(--ink-deep);
  --ink-2: #5C6650;
  --ink-3: rgba(12,23,7,.65);
  --jelly: var(--navagio);
  --gold-ink: #090D0A;
  --border: rgba(12,23,7,.10);
  --line: rgba(12,23,7,.10);
}

/* fade-up reveal */
.fu {
  opacity:0; transform:translateY(32px) scale(.99); filter:blur(6px);
  transition:opacity .9s var(--ease-expo), transform .9s var(--ease-expo), filter .9s var(--ease-expo);
}
.fu.vis { opacity:1; transform:none; filter:blur(0); }
.fu:nth-child(1) { transition-delay:0s; }
.fu:nth-child(2) { transition-delay:.08s; }
.fu:nth-child(3) { transition-delay:.16s; }
.fu:nth-child(4) { transition-delay:.24s; }

/* directional reveal variants — pair with .fu so the same IntersectionObserver picks them up */
.fu-left  { transform:translateX(-44px) scale(.99); }
.fu-right { transform:translateX(44px) scale(.99); }
@media (max-width:1024px) {
  .fu-left, .fu-right { transform:translateY(32px) scale(.99); }
}

/* ── WORD-MASK HEADING REVEAL ──
   main.js splits section headings / page-hero titles into
   <span class="wr-w"><span class="wr-i">word</span></span> pairs; each word
   rises out of its own line mask with a small stagger when scrolled into view.
   Without JS (or with reduced motion) headings are never split, so the plain
   text stays fully visible. */
.is-wr .wr-w {
  display:inline-block; overflow:hidden; vertical-align:bottom;
  /* breathing room so descenders and italic overhangs don't get clipped */
  padding:0 .08em .14em; margin:0 -.08em -.14em;
}
.is-wr .wr-i {
  display:inline-block; transform:translateY(115%);
  transition:transform .85s var(--ease-expo);
  transition-delay:calc(var(--wi, 0) * 46ms);
}
.is-wr.wr-vis .wr-i { transform:none; }
/* the word stagger replaces the block-level rise on inner-page heroes */
.page-hero h1.is-wr { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .is-wr .wr-i { transform:none !important; transition:none !important; }
}

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn, .btn-gold, .btn-primary {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-u); font-weight:600; font-size:14px; letter-spacing:.01em;
  padding:14px 14px 14px 28px; border-radius:100px;
  background:linear-gradient(135deg, var(--accent-2), var(--accent) 70%);
  background-size:200% 200%; background-position:0% 0%;
  color:var(--on-accent); border:none; cursor:pointer;
  transition:transform .6s var(--ease-spring), box-shadow .5s var(--ease-expo),
             background-position .7s var(--ease-expo), letter-spacing .4s var(--ease-expo);
  box-shadow:0 8px 24px rgba(135,157,85,.34), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn::before, .btn-gold::before, .btn-primary::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 66%);
  transform:translateX(-130%) skewX(-12deg); transition:transform .85s var(--ease-expo);
}
.btn > *, .btn-gold > *, .btn-primary > * { position:relative; z-index:1; }
.btn:hover, .btn-gold:hover, .btn-primary:hover {
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 18px 44px rgba(135,157,85,.5), inset 0 1px 0 rgba(255,255,255,.6);
  background-position:100% 100%; letter-spacing:.03em;
}
.btn:hover::before, .btn-gold:hover::before, .btn-primary:hover::before { transform:translateX(130%) skewX(-12deg); }
.btn:active, .btn-gold:active, .btn-primary:active {
  transform:translateY(-1px) scale(.965); transition:transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
  box-shadow:0 4px 14px rgba(135,157,85,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-icon, .btn-arrow::after {
  width:30px; height:30px; border-radius:50%;
  background:rgba(12,23,7,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; flex-shrink:0;
  transition:transform .6s var(--ease-spring), background .35s var(--ease-expo);
}
.btn-arrow::after { content:'\2192'; }
.btn:hover .btn-icon, .btn-arrow:hover::after { transform:translate(4px,-4px) rotate(45deg) scale(1.16); background:rgba(12,23,7,.24); }
.btn:active .btn-icon, .btn-arrow:active::after { transform:translate(2px,-2px) rotate(45deg) scale(.92); transition:transform .15s var(--ease-soft); }

/* gentle continuous nudge while hovering — reinforces the "go" direction */
@keyframes icon-nudge {
  0%, 100% { transform:translate(4px,-4px) rotate(45deg) scale(1.16); }
  50%      { transform:translate(8px,-8px) rotate(45deg) scale(1.16); }
}
@media (prefers-reduced-motion:no-preference) {
  .btn:hover .btn-icon, .btn-arrow:hover::after { animation:icon-nudge 1.1s ease-in-out infinite; }
}

/* focus-visible glow ring — keyboard users get the same warmth as :hover */
.btn:focus-visible, .btn-gold:focus-visible, .btn-primary:focus-visible, .btn-submit:focus-visible {
  outline:none;
  box-shadow:0 0 0 4px var(--gold-glow), 0 8px 24px rgba(135,157,85,.34), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-ghost:focus-visible, .btn-outline-w:focus-visible, .btn-navy:focus-visible {
  outline:none; border-color:var(--jelly);
  box-shadow:0 0 0 4px var(--gold-dim);
}

/* click ripple — appended via JS on pointerdown */
.btn-ripple {
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(12,23,7,.16) 0%, rgba(12,23,7,0) 72%);
  transform:scale(0); animation:btn-ripple .7s var(--ease-expo) forwards;
}
@keyframes btn-ripple { to { transform:scale(2.6); opacity:0; } }

.btn-ghost, .btn-outline-w {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-u); font-weight:600; font-size:14px;
  padding:14px 28px; border-radius:100px;
  background:var(--tint-1); color:var(--ink-2);
  border:1px solid var(--border); cursor:pointer;
  transition:border-color .4s var(--ease-expo), color .4s var(--ease-expo), transform .6s var(--ease-spring),
             background .4s var(--ease-expo), box-shadow .4s var(--ease-expo), letter-spacing .4s var(--ease-expo);
}
.btn-ghost::before, .btn-outline-w::before {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:radial-gradient(circle at 50% 120%, var(--accent) 0%, transparent 70%);
  opacity:0; transform:scale(.5); transition:opacity .5s var(--ease-expo), transform .6s var(--ease-expo);
}
.btn-ghost > :not(.btn-ripple), .btn-outline-w > :not(.btn-ripple) { position:relative; z-index:1; }
.btn-ghost:hover, .btn-outline:hover, .btn-outline-w:hover {
  border-color:var(--rich-black); color:var(--columbia); transform:translateY(-3px) scale(1.01);
  background:var(--tint-2); box-shadow:0 10px 28px rgba(12,23,7,.1); letter-spacing:.02em;
}
.btn-ghost:hover::before, .btn-outline-w:hover::before { opacity:.16; transform:scale(1); }
.btn-ghost:active, .btn-outline-w:active {
  transform:translateY(-1px) scale(.985); box-shadow:none;
  transition:transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.hero .btn-ghost:hover, .hero .btn-outline:hover, .hero .btn-outline-w:hover,
footer .btn-ghost:hover, footer .btn-outline:hover, footer .btn-outline-w:hover,
.final-cta-sec .btn-ghost:hover, .final-cta-sec .btn-outline:hover, .final-cta-sec .btn-outline-w:hover,
.final-cta .btn-ghost:hover, .final-cta .btn-outline:hover, .final-cta .btn-outline-w:hover,
.s-dark .btn-ghost:hover, .s-dark .btn-outline:hover, .s-dark .btn-outline-w:hover,
.cta-band .btn-ghost:hover, .cta-band .btn-outline:hover, .cta-band .btn-outline-w:hover,
.instrument-inner .btn-ghost:hover, .instrument-inner .btn-outline:hover, .instrument-inner .btn-outline-w:hover,
.error-page .btn-ghost:hover, .error-page .btn-outline:hover, .error-page .btn-outline-w:hover {
  border-color:var(--accent-2);
}
.btn-navy {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-u); font-weight:600; font-size:14px;
  padding:14px 28px; border-radius:100px;
  background:var(--tint-2); color:var(--ink-2);
  border:1px solid var(--border);
  transition:background .4s var(--ease-expo), border-color .4s var(--ease-expo), color .4s var(--ease-expo),
             transform .6s var(--ease-spring), box-shadow .4s var(--ease-expo);
}
.btn-navy::before {
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:radial-gradient(circle at 50% 120%, var(--accent) 0%, transparent 70%);
  opacity:0; transform:scale(.5); transition:opacity .5s var(--ease-expo), transform .6s var(--ease-expo);
}
.btn-navy > * { position:relative; z-index:1; }
.btn-navy:hover {
  background:var(--tint-3); border-color:var(--rich-black); color:var(--columbia);
  transform:translateY(-3px) scale(1.01); box-shadow:0 10px 28px rgba(12,23,7,.1);
}
.btn-navy:hover::before { opacity:.14; transform:scale(1); }
.btn-navy:active { transform:translateY(-1px) scale(.985); transition:transform .2s var(--ease-soft); }
.final-cta-sec .btn-navy:hover, .final-cta .btn-navy:hover, .hero .btn-navy:hover, footer .btn-navy:hover, .s-dark .btn-navy:hover, .cta-band .btn-navy:hover, .instrument-inner .btn-navy:hover, .error-page .btn-navy:hover { border-color:var(--accent-2); }
.btn-outline {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-u); font-weight:600; font-size:14px;
  color:var(--ink-2); border:none;
  padding:0 0 4px; border-radius:0; background:none;
  transition:color .35s var(--ease-expo), gap .35s var(--ease-expo);
  position:relative;
}
.btn-outline::after {
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:linear-gradient(90deg, currentColor, var(--accent));
  transition:right .5s var(--ease-expo);
}
.btn-outline:hover { color:var(--columbia); background:none; transform:none; gap:10px; }
.btn-outline:hover::after { right:0; }
.btn-outline:active { transform:translateY(1px); transition:transform .15s var(--ease-soft); }

.gold { color:var(--gold-ink); }
.s-dark .gold, footer .gold, .hero .gold, .final-cta-sec .gold, .cta-band .gold, .instrument-inner .gold, .error-page .gold { color:var(--accent); }

/* ═══════════════════ SERVICE / DETAIL CARDS ═══════════════════ */
.service-intro { max-width:740px; margin:0 auto 64px; text-align:center; }
.service-intro p { font-size:16.5px; color:var(--ink-2); line-height:1.85; }
.service-cards-grid, .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:80px; }

.svc-detail-card, .service-card,
.tl-card, .why-card, .gallery-card, .location-card,
.vm-card, .calc-wrap, .contact-form-wrap, .quote-wrap,
.bezel {
  background:var(--cloud);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 2px 20px rgba(12,23,7,.05);
  transition:border-color .35s var(--ease-expo), background .35s var(--ease-expo), box-shadow .35s var(--ease-expo), transform .5s var(--ease-expo);
}
.svc-detail-card { padding:36px 28px; }
.svc-detail-card:hover, .service-card:hover { border-color:var(--accent-2); transform:translateY(-4px); box-shadow:0 16px 44px rgba(12,23,7,.10); }
.svc-detail-card h3, .service-card h3 {
  font-family:var(--ff-u); font-weight:600; font-size:18px;
  color:var(--columbia); margin-bottom:10px; letter-spacing:-.005em;
}
.svc-detail-card p, .service-card p { font-size:14.5px; color:var(--ink-2); line-height:1.75; }
.svc-detail-card .svc-icon, .service-icon {
  width:50px; height:50px; border-radius:14px;
  background:var(--tint-2); border:1px solid var(--tint-4);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--jelly); flex-shrink:0; font-size:22px;
  transition:transform .5s var(--ease-spring), background .35s var(--ease-expo), color .35s var(--ease-expo), border-color .35s var(--ease-expo);
}
.svc-detail-card:hover .svc-icon, .service-card:hover .service-icon {
  transform:scale(1.1) rotate(-6deg);
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.svc-detail-card.icon-card { padding:36px 30px; }
.svc-detail-card.icon-card h3 { margin-bottom:8px; }
.service-features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.service-card { padding:34px 28px; display:flex; flex-direction:column; gap:14px; }
.service-features { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.service-features li { font-size:13.5px; color:var(--ink-2); padding-left:20px; position:relative; line-height:1.6; }
.service-features li::before { content:'\2713'; position:absolute; left:0; color:var(--gold-ink); font-weight:700; font-size:12px; }
.service-link { font-size:13.5px; font-weight:600; color:var(--jelly); margin-top:auto; transition:color .2s; }
.service-link:hover { color:var(--gold-ink); }

/* "why" grid */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why-card { padding:28px; }
.why-icon { font-size:24px; display:block; margin-bottom:12px; }
.why-card h4 { font-family:var(--ff-u); font-weight:600; font-size:15px; color:var(--columbia); margin-bottom:8px; }
.why-card p { font-size:13.5px; color:var(--ink-2); line-height:1.7; }

/* ═══════════════════ STATS BAR ═══════════════════ */
.stats-bar {
  background:var(--charcoal); padding:40px 24px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stats-inner { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; }
.stat-item { display:flex; flex-direction:column; gap:8px; }
.stat-number { font-family:var(--ff-d); font-weight:600; font-size:clamp(26px,3vw,38px); color:var(--accent); line-height:1; letter-spacing:-.01em; }
.stat-label { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ═══════════════════ FAQ ═══════════════════ */
.faq-item, .faq-inner > div {
  border-bottom:1px solid var(--border);
}
.faq-question {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:24px 4px; font-family:var(--ff-d); font-weight:500; font-size:clamp(16px,1.8vw,19px);
  color:var(--columbia); cursor:pointer; text-align:left; background:none; border:none;
  border-radius:14px;
  transition:color .2s, background .3s var(--ease-expo), padding-left .35s var(--ease-expo);
}
.faq-question:hover { color:var(--gold-ink); background:var(--tint-1); padding-left:14px; }
.faq-icon {
  font-size:18px; color:var(--gold-ink); flex-shrink:0; transition:transform .4s var(--ease-spring), background .3s var(--ease-expo);
  width:32px; height:32px; border-radius:50%; background:rgba(135,157,85,.12);
  display:flex; align-items:center; justify-content:center;
}
.faq-question:hover .faq-icon { background:var(--accent); color:var(--on-accent); }
.faq-item.open .faq-icon { transform:rotate(135deg); }
.faq-answer {
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows .45s var(--ease-expo);
  font-size:14.5px; color:var(--ink-2); line-height:1.8;
}
.faq-answer > * { overflow:hidden; padding-top:0; padding-bottom:0; transition:padding-bottom .45s var(--ease-expo); }
.faq-item.open .faq-answer { grid-template-rows:1fr; }
.faq-item.open .faq-answer > * { padding-bottom:18px; }

/* ═══════════════════ FINAL CTA (page-level) ═══════════════════ */
.final-cta { background:var(--charcoal); padding:120px 24px; text-align:center; position:relative; overflow:hidden; }
.final-cta::before {
  content:''; position:absolute; width:700px; height:700px; left:50%; top:50%;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(135,157,85,.13) 0%, transparent 65%);
}
.final-cta-inner { max-width:640px; margin:0 auto; position:relative; }
.final-cta h2 {
  font-family:var(--ff-d); font-weight:500; font-size:clamp(30px,5vw,58px);
  color:var(--columbia); line-height:1.08; letter-spacing:-.01em; margin-bottom:18px;
}
.final-cta p { font-size:16px; color:var(--ink-2); line-height:1.8; margin-bottom:36px; }
.actions, .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ═══════════════════ TWO-COL SPLIT ═══════════════════ */
.two-col-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.split-heading {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(24px,3vw,36px); color:var(--columbia);
  letter-spacing:-.01em; margin-bottom:22px; line-height:1.14;
}
.split-heading em { font-style:italic; font-family:var(--ff-serif); font-weight:400; color:var(--gold-ink); }
.split-lead { font-size:15.5px; color:var(--ink-2); line-height:1.85; margin-bottom:30px; }
.benefit-list { list-style:none; display:flex; flex-direction:column; gap:14px; }
.benefit-list li { display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--ink-2); line-height:1.65; }
.benefit-list li::before {
  content:''; width:20px; height:20px; border-radius:50%;
  background:var(--tint-2); border:1.5px solid var(--jelly);
  flex-shrink:0; margin-top:2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234A612F' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.who-chips { display:flex; flex-wrap:wrap; gap:10px; }
.who-chip {
  background:var(--tint-1); border:1px solid var(--border);
  border-radius:100px; padding:9px 20px;
  font-family:var(--ff-u); font-size:13px; font-weight:500; color:var(--ink-2);
  transition:border-color .25s, background .25s, color .25s;
}
.who-chip:hover { border-color:var(--jelly); background:var(--tint-3); color:var(--columbia); }
.who-label {
  font-family:var(--ff-u); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--jelly); margin-bottom:16px;
}
.subsidy-banner {
  background:var(--gold-dim); border:1px solid rgba(135,157,85,.25);
  border-radius:20px; padding:26px 30px;
  display:flex; align-items:center; gap:20px; margin-top:40px;
}
.subsidy-banner .sb-icon { font-size:32px; flex-shrink:0; }
.subsidy-banner h4 { font-family:var(--ff-u); font-weight:600; font-size:15px; color:var(--columbia); margin-bottom:4px; }
.subsidy-banner p { font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.subsidy-banner a { color:var(--gold-ink); font-weight:600; }

/* ═══════════════════ TIMELINE / PROCESS ═══════════════════ */
.timeline-heading {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(24px,3.4vw,40px); color:var(--columbia);
  letter-spacing:-.01em; text-align:center; margin-bottom:56px;
}
.timeline-heading span { font-style:italic; font-family:var(--ff-serif); font-weight:400; color:var(--gold-ink); }
.timeline-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tl-card.fu {
  opacity:1; transform:none; filter:none; transition:none;
}
.tl-card {
  padding:30px 24px;
  /* Card always has a light (white) background — re-light text tokens
     even when nested inside a dark-anchor section like .s-dark. */
  --columbia: var(--ink-deep);
  --ink-2: #5C6650;
  --jelly: var(--navagio);
}
.tl-card:hover { border-color:rgba(135,157,85,.4); box-shadow:0 16px 44px rgba(12,23,7,.10); transform:translateY(-4px); }
.tl-num {
  width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--ff-u); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.tl-card h3 { font-family:var(--ff-u); font-weight:700; font-size:14px; color:var(--columbia); margin-bottom:14px; letter-spacing:.01em; }
.tl-card ul { display:flex; flex-direction:column; gap:9px; }
.tl-card li { font-size:13px; color:var(--ink-2); padding-left:14px; position:relative; line-height:1.6; }
.tl-card li::before { content:'\2013'; position:absolute; left:0; color:var(--jelly); }

/* ═══════════════════ ABOUT PAGE ═══════════════════ */
.about-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:72px; }
.about-intro-img {
  border-radius:28px; overflow:hidden; padding:7px;
  background:var(--tint-1); border:1px solid var(--border);
}
.about-intro-img img { width:100%; height:420px; object-fit:cover; object-position:top; border-radius:22px; }
.about-intro-text h2 {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(26px,3.4vw,42px); color:var(--columbia);
  letter-spacing:-.01em; margin-bottom:18px; line-height:1.12;
}
.about-intro-text p { font-size:15.5px; color:var(--ink-2); line-height:1.85; margin-bottom:16px; }
.vision-mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vm-card { padding:44px; }
.vm-card.vision { color:var(--columbia); }
.vm-card.vision:hover { border-color:rgba(74,97,47,.35); }
.vm-card.mission { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.vm-card.mission:hover { transform:translateY(-4px); }
.vm-card h3 { font-family:var(--ff-d); font-weight:500; font-size:23px; margin-bottom:16px; letter-spacing:-.006em; }
.vm-card p { font-size:15px; line-height:1.85; opacity:.85; }
.vm-card.mission p { opacity:.78; }

/* ═══════════════════ CONTACT PAGE ═══════════════════ */
.contact-grid { display:grid; grid-template-columns:0.85fr 1.3fr; gap:64px; align-items:start; }
.contact-form-wrap { padding:28px; }
.contact-form-wrap h2 {
  font-family:var(--ff-d); font-weight:500; font-size:21px;
  color:var(--columbia); margin-bottom:6px; letter-spacing:-.01em;
}
.contact-form-wrap > p { font-size:13px; color:var(--ink-2); margin-bottom:18px; }
.contact-form-wrap .form-group { margin-bottom:12px; }
.contact-form-wrap .form-group textarea { min-height:72px; }
.contact-info-block h3 {
  font-family:var(--ff-u); font-weight:600; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--jelly);
  margin-bottom:16px; margin-top:32px;
}
.contact-info-block h3:first-child { margin-top:0; }
.contact-info-block a, .contact-info-block p {
  font-size:15px; color:var(--ink-2); display:block;
  margin-bottom:9px; line-height:1.65; transition:color .2s;
}
.contact-info-block a:hover { color:var(--columbia); }
.contact-link { display:flex; align-items:center; gap:10px; }
.contact-link svg { flex-shrink:0; color:var(--jelly); transition:color .2s; }
.contact-link:hover svg { color:var(--columbia); }
.info-cards-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.info-card {
  background:var(--mist); border:1px solid var(--border);
  border-radius:18px; padding:22px;
}
.info-card h3 { margin-top:0 !important; }
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.location-card { padding:24px; margin-bottom:0; }
.location-card h4 { font-family:var(--ff-u); font-weight:700; font-size:13px; color:var(--columbia); margin-bottom:8px; }
.service-area-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.area-chip {
  font-family:var(--ff-u); font-size:12px; font-weight:500;
  padding:6px 14px; border-radius:100px;
  background:var(--tint-1); border:1px solid var(--border); color:var(--ink-2);
}
.map-embed {
  margin-top:32px; border-radius:24px; overflow:hidden;
  border:1px solid var(--border);
  filter:grayscale(.3) contrast(1.02);
}

/* ═══════════════════ GALLERY ═══════════════════ */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-card { border-radius:22px; overflow:hidden; aspect-ratio:4/3; position:relative; cursor:pointer; padding:0; }
.gallery-card img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-expo); }
.gallery-card:hover img { transform:scale(1.06); }
.gallery-card-label {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(12,23,7,.92));
  padding:24px 18px 16px; color:#FAF5EF;
  font-family:var(--ff-u); font-weight:600; font-size:13px;
  opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s;
}
.gallery-card:hover .gallery-card-label { opacity:1; transform:none; }

/* gallery lightbox — full-screen preview on click */
.gallery-lightbox {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(3,5,3,.92); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:32px;
}
.gallery-lightbox.open { display:flex; }
.gallery-lightbox img {
  max-width:min(1100px,92vw); max-height:88vh; width:auto; height:auto;
  border-radius:12px; box-shadow:0 24px 80px rgba(0,0,0,.5);
  animation:lightbox-in .3s var(--ease-expo) both;
}
@keyframes lightbox-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.gallery-lightbox-close {
  position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#F4F1E8;
  font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s, transform .2s;
}
.gallery-lightbox-close:hover { background:rgba(255,255,255,.16); transform:rotate(90deg); }

/* ═══════ TESTIMONIALS ═══════ */
.testi-sec { padding:140px 24px; background:var(--gentle); position:relative; overflow:hidden; }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card {
  background:var(--cloud); border:1px solid var(--border); box-shadow:0 2px 20px rgba(12,23,7,.05);
  border-radius:26px; padding:38px; display:flex; flex-direction:column;
  transition:border-color .35s, transform .5s var(--ease-expo), box-shadow .35s;
}
.testi-card:hover { border-color:var(--accent-2); transform:translateY(-4px); box-shadow:0 16px 44px rgba(12,23,7,.10); }
.testi-card:nth-child(2) { margin-top:32px; }
.testi-mark { font-family:var(--ff-serif); font-style:italic; font-size:48px; color:var(--accent); line-height:1; margin-bottom:8px; opacity:.7; }
.testi-quote { font-family:var(--ff-serif); font-style:italic; font-size:19px; line-height:1.65; color:var(--pastel); margin-bottom:28px; flex:1; }
.testi-meta { padding-top:20px; border-top:1px solid var(--border); }
.testi-name { font-family:var(--ff-u); font-weight:600; font-size:13.5px; color:var(--columbia); margin-bottom:2px; }
.testi-loc { font-family:var(--ff-u); font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
.testi-video { width:100%; aspect-ratio:9/16; border-radius:16px; margin-top:24px; object-fit:cover; background:#000; }
@media (max-width:900px) { .testi-grid { grid-template-columns:1fr; } .testi-card:nth-child(2) { margin-top:0; } }
@media (max-width:600px) { .testi-sec { padding:88px 20px; } }

/* ═══════════════════ FORMS ═══════════════════ */
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-family:var(--ff-u); font-weight:600;
  font-size:12px; letter-spacing:.04em; color:var(--ink-2); margin-bottom:6px;
}
.form-group input, .form-group select, .form-group textarea, .app-num,
input, select, textarea {
  width:100%; font-family:var(--ff-b); font-size:14px;
  padding:10px 14px; border:1px solid var(--border);
  border-radius:10px; background:var(--tint-1);
  color:var(--columbia); transition:border-color .25s, box-shadow .25s, background .25s; outline:none;
}
.form-group input::placeholder, .form-group textarea::placeholder, input::placeholder, textarea::placeholder { color:var(--ink-3); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, input:focus, select:focus, textarea:focus {
  border-color:var(--jelly); background:rgba(74,97,47,.05);
  box-shadow:0 0 0 4px rgba(74,97,47,.12);
}
.form-group textarea { resize:vertical; min-height:96px; }
.form-group select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234F6E64' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.form-group select option { background:var(--cloud); color:var(--columbia); }
.btn-submit {
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; background:linear-gradient(135deg, var(--accent-2), var(--accent) 70%);
  background-size:200% 200%; background-position:0% 0%;
  color:var(--on-accent);
  font-family:var(--ff-u); font-weight:600; font-size:14px; letter-spacing:.01em;
  padding:13px; border-radius:100px; border:none; cursor:pointer;
  transition:background-position .7s var(--ease-expo), transform .6s var(--ease-spring),
             box-shadow .5s var(--ease-expo), letter-spacing .4s var(--ease-expo);
  box-shadow:0 4px 24px var(--gold-glow);
}
.btn-submit::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 66%);
  transform:translateX(-130%) skewX(-12deg); transition:transform .85s var(--ease-expo);
}
.btn-submit > * { position:relative; z-index:1; }
.btn-submit:hover {
  background-position:100% 100%; transform:translateY(-3px) scale(1.01);
  box-shadow:0 14px 44px var(--gold-glow); letter-spacing:.03em;
}
.btn-submit:hover::before { transform:translateX(130%) skewX(-12deg); }
.btn-submit:active { transform:translateY(-1px) scale(.98); transition:transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft); }

/* success / error messages */
.form-success, .quote-success {
  background:var(--green-bg); border:1px solid var(--green-bd);
  border-radius:14px; padding:16px 20px;
  font-size:14px; color:var(--green); margin-top:16px;
}
.form-error {
  background:var(--red-bg); border:1px solid var(--red-bd);
  border-radius:14px; padding:16px 20px;
  font-size:14px; color:var(--red); margin-top:16px;
}
.quote-success { display:none; text-align:center; padding:48px 20px; background:none; border:none; }
.quote-success.show { display:block; }
.quote-success .tick {
  width:64px; height:64px; border-radius:50%; background:var(--green-bg);
  border:1px solid var(--green-bd);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:26px; color:var(--green);
}
.quote-success h3 { font-family:var(--ff-d); font-weight:500; font-size:24px; color:var(--columbia); margin-bottom:10px; }
.quote-success p { font-size:14.5px; color:var(--ink-2); line-height:1.7; }

/* quote modal */
#quote-modal {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(12,23,7,.55); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:20px;
}
#quote-modal.open { display:flex; }
#quote-modal .modal-box {
  background:var(--surf); border:1px solid var(--border);
  border-radius:24px; padding:32px; max-width:440px; width:100%; position:relative;
  box-shadow:0 24px 64px rgba(12,23,7,.18);
}
#close-quote-modal {
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background:var(--tint-1);
  color:var(--ink-2); font-size:18px; cursor:pointer; transition:background .2s, transform .35s var(--ease-spring);
}
#close-quote-modal:hover { background:var(--tint-3); transform:rotate(90deg); }
#quote-modal h3 { font-family:var(--ff-d); font-size:21px; font-weight:500; margin-bottom:16px; color:var(--columbia); }
#quote-form input { margin-bottom:12px; }

/* ═══════════════════ SOLAR CALCULATOR ═══════════════════ */
.calc-wrap { max-width:680px; margin:0 auto; padding:36px; }
.calc-wrap h2 {
  font-family:var(--ff-d); font-weight:500; font-size:26px;
  color:var(--columbia); margin-bottom:8px; letter-spacing:-.01em;
}
.calc-wrap > p { font-size:14px; color:var(--ink-2); margin-bottom:24px; line-height:1.7; }
.calc-result {
  background:rgba(74,97,47,.06); border:1px solid rgba(74,97,47,.22);
  border-radius:18px; padding:30px; margin-top:28px; display:none;
}
.calc-result.show { display:block; }
.calc-result h4 { font-family:var(--ff-u); font-weight:600; font-size:13px; color:var(--ink-2); margin-bottom:8px; }
.calc-result .result-val { font-family:var(--ff-d); font-weight:600; font-size:42px; color:var(--gold-ink); margin-bottom:4px; }
.calc-result p { font-size:13px; color:var(--ink-2); line-height:1.65; }

/* ═══════════════════ FOOTER ═══════════════════ */
footer {
  background:var(--charcoal); padding:80px 0 28px;
  border-top:1px solid var(--tint-2);
  position:relative;
}
.footer-inner {
  max-width:var(--max); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:56px;
  margin-bottom:56px;
}
.footer-brand img { height:56px; width:auto; margin-bottom:18px; }
.footer-brand p { font-size:13.5px; color:var(--ink-3); line-height:1.8; max-width:280px; margin-bottom:24px; }
.socials { display:flex; gap:10px; }
.socials a {
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); font-size:13px; transition:background .25s, border-color .25s, color .25s, transform .35s var(--ease-spring);
}
.socials a:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); transform:translateY(-2px); }
.footer-col h4 {
  font-family:var(--ff-u); font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--jelly); margin-bottom:18px;
}
.footer-col a, .footer-col p, .footer-col span {
  display:block; font-size:13.5px; color:var(--ink-3);
  margin-bottom:10px; line-height:1.6; transition:color .2s;
}
.footer-col a:hover { color:var(--columbia); }
.footer-col .hours-row, .hours-row {
  display:flex; justify-content:space-between;
  font-size:13.5px; color:var(--ink-3) !important; margin-bottom:9px; gap:12px;
}
.footer-col .hours-row span:last-child, .hours-row span:last-child { color:var(--ink-2) !important; font-weight:600; white-space:nowrap; }
.footer-bottom {
  border-top:1px solid var(--tint-2); padding:24px 24px 0;
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.footer-bottom p { font-size:11.5px; color:var(--ink-3); }
.back-top {
  width:44px; height:44px; border-radius:50%;
  background:var(--tint-1); border:1px solid var(--border);
  color:var(--jelly); display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer;
  opacity:0; transform:translateY(10px) scale(.9); pointer-events:none;
  transition:background .25s, transform .45s var(--ease-spring), color .25s, opacity .35s var(--ease-expo);
}
.back-top.show { opacity:1; transform:none; pointer-events:all; }
.back-top:hover { background:rgba(135,157,85,.1); border-color:rgba(135,157,85,.3); color:var(--accent); }
.back-top.show:hover { transform:translateY(-3px); }

/* ═══════════════════ WHATSAPP / MOBILE CTA ═══════════════════ */
.wa {
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:54px; height:54px; border-radius:50%;
  background:transparent; border:none;
  box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); transition:transform .4s var(--ease-spring), background .3s var(--ease-expo);
}
.wa:hover { transform:scale(1.08) rotate(-4deg); background:var(--accent-2); color:var(--on-accent); }
/* soft expanding ring every few seconds — a quiet "we're reachable" nudge */
@media (prefers-reduced-motion:no-preference) {
  .wa::before {
    content:''; position:absolute; inset:5px; border-radius:50%;
    border:2px solid var(--accent); opacity:0; pointer-events:none;
    animation:wa-ping 4s var(--ease-expo) 2s infinite;
  }
  @keyframes wa-ping {
    0%   { transform:scale(.7); opacity:0; }
    10%  { opacity:.55; }
    32%  { transform:scale(1.45); opacity:0; }
    100% { transform:scale(1.45); opacity:0; }
  }
  .wa:hover::before { animation:none; }
}
.mob-cta {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:80;
  background:rgba(12,23,7,.94); backdrop-filter:blur(20px);
  border-top:1px solid var(--tint-2);
  padding:10px 16px; padding-bottom:max(10px, env(safe-area-inset-bottom)); gap:8px;
  /* forces its own compositing layer — without this, iOS Safari can leave a
     `position:fixed` + `backdrop-filter` bar unresponsive to the first tap
     until the page is scrolled once */
  -webkit-transform:translateZ(0); transform:translateZ(0);
}
.mob-cta a {
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:44px; padding:11px; border-radius:100px;
  font-family:var(--ff-u); font-weight:700; font-size:13px; transition:opacity .2s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.mob-cta-q { background:var(--accent); color:var(--on-accent); }
.mob-cta-q:hover { opacity:.9; }
.mob-cta-c { background:var(--tint-1); color:var(--ink-2); border:1px solid var(--border); }

/* ═══════════════════ CTA BAND (legacy) ═══════════════════ */
.cta-band { background:var(--charcoal); padding:96px 24px; text-align:center; position:relative; overflow:hidden; }
.cta-band::before {
  content:''; position:absolute; width:560px; height:560px;
  background:radial-gradient(circle, rgba(135,157,85,.08) 0%, transparent 65%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
}
.cta-band h2 {
  font-family:var(--ff-d); font-weight:500;
  font-size:clamp(26px,3.6vw,46px); color:var(--columbia);
  letter-spacing:-.01em; margin-bottom:14px; position:relative;
}
.cta-band h2 em { font-style:italic; font-family:var(--ff-serif); font-weight:400; color:var(--accent); }
.cta-band p {
  font-size:15.5px; color:var(--ink-2); margin-bottom:32px;
  max-width:520px; margin-left:auto; margin-right:auto;
  line-height:1.75; position:relative;
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1024px) {
  .timeline-grid { grid-template-columns:repeat(2,1fr); }
  .service-cards-grid, .services-grid { grid-template-columns:repeat(2,1fr); }
  .service-features-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .footer-brand p { max-width:460px; }
  .contact-grid { grid-template-columns:1fr; }
  .vision-mission-grid { grid-template-columns:1fr; }
  .about-intro-grid { grid-template-columns:1fr; }
  .two-col-split { grid-template-columns:1fr; gap:48px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  /* hide the inline nav-links earlier — at ~850-1024px the floating
     pill doesn't have room for all six links plus the CTA and overflows */
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .nav { padding:14px 16px; }
  .nav-inner, .nav-island { padding:6px 6px 6px 20px; }
}
/* ── Tablet & mobile (≤1024px): CTA hidden, theme toggle docked beside the hamburger ── */
@media (max-width:1024px) {
  .nav-inner, .nav-island { position:relative; justify-content:flex-start; }
  /* !important needed — the base .nav-cta rule sets display:inline-flex !important */
  .nav-cta { display:none !important; }
  .theme-toggle { margin-left:auto; }
}
@media (max-width:768px) {
  .sec { padding:80px 20px; }
  .page-hero { padding:148px 20px 40px; }
  .page-hero + .sec { padding-top:48px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .timeline-grid { grid-template-columns:1fr; }
  .service-cards-grid, .services-grid, .why-grid, .stats-inner { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .footer-inner { grid-template-columns:1fr; gap:36px; margin-bottom:36px; }
  footer { padding:56px 0 16px; }
  .footer-bottom { padding-top:18px; }
  .mob-cta { display:flex; }
  .nav-cta { display:none !important; }
  /* clearance below the footer — margin (not padding) so the gap shows the
     dark <html> background instead of the body's light page background.
     Pages with the mob-cta bar need enough room to clear its full height;
     other pages just need a small buffer so the in-flow back-top button
     doesn't sit directly under the fixed WhatsApp button. */
  body:has(.mob-cta) { margin-bottom:calc(64px + env(safe-area-inset-bottom)); }
  body:not(:has(.mob-cta)) { margin-bottom:80px; }
  html { background:var(--charcoal); }
  .wa { right:16px; }
  body:has(.mob-cta) .wa { bottom:calc(84px + env(safe-area-inset-bottom)); }
  .calc-wrap, .contact-form-wrap, .quote-wrap { padding:32px 24px; }
}
@media (max-width:600px) {
  .service-features-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .gallery-grid { grid-template-columns:1fr; }
  .calc-wrap { padding:28px 20px; }
  .nav { padding:12px; }
  .info-cards-row, .location-grid { grid-template-columns:1fr; }
  .about-intro-img img { height:280px; }
}
@media (max-width:400px) {
  .nav-logo img { height:44px; }
}

/* ═══════════════════ MOBILE PERFORMANCE ═══════════════════
   Phones: drop the GPU-expensive effects that cause scroll jank —
   animated blur() filters, the full-screen blend-mode grain overlay,
   and heavy backdrop blurs on fixed elements. Reveals keep their
   opacity + transform motion, which composites cheaply. */
@media (max-width:768px) {
  /* grain overlay: full-viewport mix-blend layer re-composites every
     scrolled frame — invisible at phone DPI anyway */
  body::after { display:none; }

  /* scroll reveals: blur() is rasterized on the CPU on many mobile GPUs —
     keep the rise + fade, skip the blur */
  .fu {
    filter:none;
    transform:translateY(24px);
    transition:opacity .6s var(--ease-expo), transform .6s var(--ease-expo);
  }
  .fu-left, .fu-right { transform:translateY(24px); }

  /* fixed glass surfaces: halve the backdrop blur radius; the mobile
     menu is near-opaque so it needs none at all */
  .nav-inner, .nav-island {
    backdrop-filter:blur(10px) saturate(150%);
    -webkit-backdrop-filter:blur(10px) saturate(150%);
  }
  .mob-nav {
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(12,23,7,.99);
  }
  .mob-cta { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(12,23,7,.97); }
  html[data-theme="dark"] .mob-nav { background:rgba(0,0,0,.99); }
}

/* ═══════════════════ MOTION ═══════════════════ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
  }
  .fu { opacity:1; transform:none; filter:none; }
  .mob-nav > *, .mob-nav-links > * { opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — toggled via [data-theme="dark"] on <html>.
   Set when the hero Day/Night toggle is switched to "Night"
   (and persisted to localStorage so it applies site-wide).
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* as black as possible — true-black anchor, with a minimal green-tinted
     elevation scale so cards still separate from the page */
  --onyx:      #000000;
  --cream:     #0A100A;
  --parchment: #030503;
  --gentle:    #070907;
  --cloud:     #0B0E0A;

  --bg:     var(--parchment);
  --surf:   var(--cloud);
  --surf-2: var(--cream);
  --beau:   var(--cream);
  --warm-white: rgba(245,242,233,.05);

  --ink-deep: #F4F1E8;
  --pastel:   #DCE3CB;
  --columbia: var(--ink-deep);
  --ink:      var(--ink-deep);
  --ink-2:    #A9B696;
  --ink-3:    rgba(244,241,232,.55);
  --ink-muted:var(--ink-2);
  --muted:    var(--ink-2);
  --jelly:    #A6BD78;
  --gold-ink: var(--accent);

  --border: rgba(244,241,232,.10);
  --line:   rgba(244,241,232,.10);

  --tint-1: rgba(244,241,232,.045);
  --tint-2: rgba(244,241,232,.07);
  --tint-3: rgba(244,241,232,.10);
  --tint-4: rgba(244,241,232,.15);
  --tint-5: rgba(244,241,232,.20);
  --tint-6: rgba(244,241,232,.30);

  --gold-dim:  rgba(135,157,85,.18);
  --gold-glow: rgba(135,157,85,.30);

  --green-bg: rgba(79,122,58,.18);  --green-bd: rgba(79,122,58,.36);
  --red-bg:   rgba(181,69,63,.18);  --red-bd:   rgba(181,69,63,.36);
}

/* keyboard focus ring needs to stay visible against dark surfaces */
html[data-theme="dark"] :focus-visible { outline-color: var(--accent-2); }

/* re-light the dark-anchor surfaces (nav, footer, hero, final CTA, etc.) —
   their light-on-dark tokens were derived from --parchment/--cream, which
   are now dark themselves, so restate them explicitly */
html[data-theme="dark"] .nav-inner, html[data-theme="dark"] .nav-island, html[data-theme="dark"] .mob-nav,
html[data-theme="dark"] .dropdown, html[data-theme="dark"] .mob-cta,
html[data-theme="dark"] footer, html[data-theme="dark"] .marquee-wrap, html[data-theme="dark"] .final-cta-sec,
html[data-theme="dark"] .final-cta, html[data-theme="dark"] .instrument-inner,
html[data-theme="dark"] .hero, html[data-theme="dark"] .s-dark, html[data-theme="dark"] .stats-bar,
html[data-theme="dark"] .cta-band, html[data-theme="dark"] .error-page, html[data-theme="dark"] .partners-sec {
  --columbia: #F4F1E8;
  --pastel:   #DCE3CB;
  --ink-2:    #AEB99B;
  --ink-3:    rgba(244,241,232,.55);
  --jelly:    #A6BD78;
  --gold-ink: var(--accent);
  --border:   rgba(244,241,232,.14);
  --line:     rgba(244,241,232,.14);
  --tint-1: rgba(244,241,232,.06);
  --tint-2: rgba(244,241,232,.09);
  --tint-3: rgba(244,241,232,.13);
  --tint-4: rgba(244,241,232,.18);
  --tint-5: rgba(244,241,232,.24);
  --tint-6: rgba(244,241,232,.34);
}

/* mobile sticky CTA bar — in dark theme the bar itself goes true black
   and the primary button flips to brand dark green so it stands out */
html[data-theme="dark"] .mob-cta { background:#000; border-top-color:rgba(244,241,232,.10); }
html[data-theme="dark"] .mob-cta-q { background:var(--olive); color:#F4F1E8; }
html[data-theme="dark"] .mob-cta-c { background:rgba(244,241,232,.06); }

/* light cards inside dark sections (.s-dark .tl-card etc) — re-darken
   their text tokens for the now-dark --cloud card surface */
html[data-theme="dark"] .s-dark .tl-card, html[data-theme="dark"] .s-dark .why-card,
html[data-theme="dark"] .s-dark .svc-detail-card, html[data-theme="dark"] .s-dark .service-card,
html[data-theme="dark"] .s-dark .vm-card, html[data-theme="dark"] .s-dark .bezel {
  --columbia: #F4F1E8;
  --ink-2: #A9B696;
  --ink-3: rgba(244,241,232,.55);
  --jelly: #A6BD78;
  --gold-ink: var(--accent);
  --border: rgba(244,241,232,.10);
  --line: rgba(244,241,232,.10);
}

/* timeline cards always force a light-card palette — flip it for dark mode */
html[data-theme="dark"] .tl-card {
  --ink-2: #A9B696;
  --jelly: #A6BD78;
}

/* non-hero nav bars are a cream glass pill in light mode — make them a
   dark glass pill in dark mode */
html[data-theme="dark"] .nav:not(.nav--hero) .nav-inner,
html[data-theme="dark"] .nav:not(.nav--hero) .nav-island,
html[data-theme="dark"] .nav:not(.nav--hero) .dropdown,
html[data-theme="dark"] .nav--hero.scrolled .nav-inner,
html[data-theme="dark"] .nav--hero.scrolled .nav-island,
html[data-theme="dark"] .nav--hero.scrolled .dropdown {
  --columbia: #F4F1E8;
  --ink-3:    rgba(244,241,232,.55);
  --border:   rgba(244,241,232,.12);
  --line:     rgba(244,241,232,.12);
}
html[data-theme="dark"] .nav:not(.nav--hero) .nav-inner,
html[data-theme="dark"] .nav:not(.nav--hero) .nav-island {
  background: rgba(0,0,0,.88);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
html[data-theme="dark"] .nav:not(.nav--hero).scrolled .nav-inner,
html[data-theme="dark"] .nav:not(.nav--hero).scrolled .nav-island,
html[data-theme="dark"] .nav--hero.scrolled .nav-inner,
html[data-theme="dark"] .nav--hero.scrolled .nav-island {
  background: #000000;
  border-color: rgba(244,241,232,.12);
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}
html[data-theme="dark"] .nav:not(.nav--hero) .dropdown,
html[data-theme="dark"] .nav--hero.scrolled .dropdown {
  background: rgba(8,11,7,.98);
  box-shadow:0 24px 64px rgba(0,0,0,.45);
}

/* comparison table "us" card — the cream gradient stop reads as a stark
   white wash on dark surfaces, so use a gold-tinted dark gradient instead */
html[data-theme="dark"] .cmp-col.us {
  background:linear-gradient(160deg, rgba(135,157,85,.14), var(--cloud) 55%);
}
html[data-theme="dark"] .nav:not(.nav--hero) .nav-links a:hover,
html[data-theme="dark"] .nav:not(.nav--hero) .nav-links > li > button:hover,
html[data-theme="dark"] .nav:not(.nav--hero) .nav-links a.active,
html[data-theme="dark"] .nav--hero.scrolled .nav-links a:hover,
html[data-theme="dark"] .nav--hero.scrolled .nav-links > li > button:hover,
html[data-theme="dark"] .nav--hero.scrolled .nav-links a.active,
html[data-theme="dark"] .nav:not(.nav--hero) .dropdown a:hover,
html[data-theme="dark"] .nav--hero.scrolled .dropdown a:hover,
html[data-theme="dark"] .nav:not(.nav--hero) .nav-toggle:hover,
html[data-theme="dark"] .nav--hero.scrolled .nav-toggle:hover {
  background: rgba(244,241,232,.08);
}

/* quote-modal popups carry inline background:#fff — re-skin them for dark
   (inline styles need !important to override) */
html[data-theme="dark"] #quote-modal > div,
html[data-theme="dark"] #quote-modal .modal-box {
  background: #11160C !important;
  border: 1px solid rgba(244,241,232,.12);
  color: #F4F1E8;
  box-shadow: 0 32px 90px rgba(0,0,0,.7);
}
html[data-theme="dark"] #quote-modal h3 { color: #F4F1E8 !important; }
html[data-theme="dark"] #quote-modal input,
html[data-theme="dark"] #quote-modal select,
html[data-theme="dark"] #quote-modal textarea {
  background: rgba(244,241,232,.05) !important;
  border-color: rgba(244,241,232,.16) !important;
  color: #F4F1E8 !important;
}
html[data-theme="dark"] #quote-modal input::placeholder,
html[data-theme="dark"] #quote-modal textarea::placeholder { color: rgba(244,241,232,.4); }
html[data-theme="dark"] #quote-modal #close-quote-modal {
  background: rgba(244,241,232,.08) !important;
  border-color: rgba(244,241,232,.16) !important;
  color: #F4F1E8 !important;
}

/* CONTACT INFO CARDS — .info-card uses --mist, which in dark mode equals
   --bg, leaving the cards invisible against the page; lift them and give
   the service-area chips real contrast */
html[data-theme="dark"] .info-card {
  background: var(--cloud);
  border-color: rgba(244,241,232,.10);
}

/* Google Maps embed has no native dark mode for the basic iframe API —
   invert + hue-rotate flips its light tiles to a dark palette */
html[data-theme="dark"] .map-embed {
  border-color: rgba(244,241,232,.10);
  filter: invert(94%) hue-rotate(180deg) brightness(.75) contrast(1.35);
}
html[data-theme="dark"] .area-chip {
  background: rgba(244,241,232,.07);
  border-color: rgba(244,241,232,.16);
  color: var(--ink-2);
}

/* PRICING / ROI TABLE */
.pricing-table-wrap { overflow-x:auto; border-radius:14px; border:1px solid var(--border); }
.pricing-table { width:100%; border-collapse:collapse; min-width:640px; background:var(--warm-white); }
.pricing-table th, .pricing-table td { padding:14px 16px; text-align:left; font-size:13.5px; }
.pricing-table thead th { font-family:var(--ff-u); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border-bottom:2px solid var(--border); }
.pricing-table tbody tr { border-bottom:1px solid var(--border); }
.pricing-table tbody tr:last-child { border-bottom:none; }
.pricing-table tbody tr:nth-child(3) { background:rgba(238,230,209,.18); }
.pricing-table td:first-child, .pricing-table th:first-child { font-family:var(--ff-u); font-weight:700; color:var(--ink); }
.pricing-note { font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.6; }