/* =============================================================
   Giga Impact Solutions — Design System
   Commercial architecture for expertise-led companies.
   Light editorial base · deep-teal feature sections ·
   teal-blue accent · scarce green signal · gold proof accent ·
   systems motifs. Aligned to the official Giga brand system.
   Single self-contained stylesheet. No external dependencies.
   ============================================================= */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-var-italic.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
}
/* IBM Plex Mono — brand technical/label voice (eyebrows, tags, breadcrumbs, captions) */
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Paper / light surfaces (brand: cool off-white / cool mist) */
  --paper:#F4F6F7;
  --paper-2:#EEF4F6;
  --paper-3:#E3ECEE;
  --card:#FFFFFF;

  /* Ink (brand: deep teal primary, teal-grey secondary) */
  --ink:#0A2C36;
  --ink-2:#36515A;
  --ink-3:#5A727B;
  --hairline:rgba(10,44,54,.12);
  --hairline-2:rgba(10,44,54,.07);

  /* Deep-teal feature sections (var names kept --navy* for stability) */
  --navy:#0A2C36;
  --navy-2:#0E3A45;
  --navy-3:#14424F;
  --on-navy:#EAF1F3;
  --on-navy-2:rgba(234,241,243,.74);
  --on-navy-3:rgba(234,241,243,.52);
  --navy-hairline:rgba(234,241,243,.14);

  /* Accents — teal-blue primary, scarce green signal, gold proof extension */
  --blue:#1E5160;        /* teal-blue: links, eyebrows, arrow-links, accents */
  --blue-700:#0A2C36;    /* deep teal: hover / darker */
  --blue-300:#6E9AA4;    /* light teal */
  --blue-soft:rgba(30,81,96,.10);
  --gold:#8A5E12;        /* retained proof accent — documented brand extension */
  --gold-bright:#E2AC44;
  --gold-soft:rgba(169,118,26,.12);
  --green:#6DBA5B;       /* signal green: nodes, ticks, focus, emphasis */

  /* Radii */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;
  --pill:999px;

  /* Shadow (soft, premium on light) */
  --shadow-sm:0 1px 2px rgba(10,44,54,.05), 0 2px 8px rgba(10,44,54,.04);
  --shadow:0 6px 20px rgba(10,44,54,.07), 0 2px 6px rgba(10,44,54,.05);
  --shadow-lg:0 24px 60px rgba(10,44,54,.14), 0 8px 22px rgba(10,44,54,.08);

  /* Layout */
  --max:1160px;
  --measure:66ch;

  /* Type */
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans:"InterVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif:"Newsreader", Charter, "Iowan Old Style", "Palatino Linotype", Georgia, Cambria, "Times New Roman", serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"cv08" 1,"ss01" 1;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
svg{display:block;}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--blue-700);}
.link-on-navy{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.link-on-navy:hover{color:#fff; text-decoration-color:var(--gold-bright);}
strong,b{color:var(--ink); font-weight:650;}
/* On dark surfaces, bold/lead-in text must stay light (not the dark ink default). */
.hero strong, .hero b,
.page-header strong, .page-header b,
.section--navy strong, .section--navy b,
.cta-band strong, .cta-band b,
.site-footer strong, .site-footer b{color:#fff;}
hr{border:none; border-top:1px solid var(--hairline); margin:0;}
::selection{background:rgba(30,81,96,.16);}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:600;
  margin:0 0 .5em;
  text-wrap:balance; /* even line lengths, no orphan word on the last line */
}
h1{font-size:clamp(2.35rem,1.4rem + 4.2vw,4.1rem); letter-spacing:-.03em; line-height:1.02;}
h2{font-size:clamp(1.7rem,1.2rem + 2.1vw,2.6rem); letter-spacing:-.025em;}
h3{font-size:clamp(1.18rem,1.05rem + .6vw,1.45rem);}
h4{font-size:1.02rem; letter-spacing:-.01em;}
p{margin:0 0 1.1rem; text-wrap:pretty;} /* avoid orphans/short last lines */
p:last-child{margin-bottom:0;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap; row-gap:.3rem;
  font-family:var(--font-mono);
  font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue);
  margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:1.6rem; height:1px; background:var(--blue); opacity:.55;
}
/* Eyebrows on any deep-teal surface use the gold accent so they stay readable
   (teal-blue eyebrow on teal failed contrast on .hero / .page-header). */
.section--navy .eyebrow,
.hero .eyebrow,
.page-header .eyebrow{color:var(--gold-bright);}
.section--navy .eyebrow::before,
.hero .eyebrow::before,
.page-header .eyebrow::before{background:var(--gold-bright);}

.lede{
  font-size:clamp(1.08rem,1rem + .4vw,1.3rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:var(--measure);
}
.section--navy .lede{color:var(--on-navy-2);}
.muted{color:var(--ink-3);}
.section--navy .muted{color:var(--on-navy-3);}
.measure{max-width:var(--measure);}
/* Typographic discipline: tabular figures for data/labels, optical sizing for serif */
.stat__num,.breadcrumb,.article__meta,.step__num,.service-card .idx{font-variant-numeric:tabular-nums;}
.lede{text-wrap:pretty;}
.prose,.pullquote{font-optical-sizing:auto;}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px;}
.wrap--narrow{max-width:780px;}
.section{padding:clamp(56px,6vw,104px) 0;}
.section--tight{padding:clamp(40px,4vw,68px) 0;}
section[id]{scroll-margin-top:84px;} /* clear the sticky nav for anchor jumps (#book etc.) */
.section--paper2{background:var(--paper-2);}
.section--paper3{background:var(--paper-3);}
.section--navy{background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden;}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:var(--on-navy);}
.section--navy::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background:
    radial-gradient(740px 460px at 12% 0%, rgba(30,81,96,.20), transparent 60%),
    radial-gradient(680px 520px at 92% 18%, rgba(226,172,68,.10), transparent 62%);
}
.section--navy > *{position:relative; z-index:1;}

.section-head{max-width:var(--measure); margin:0 0 clamp(32px,3.8vw,56px);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head .lede{margin-top:.85rem;}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-sans); font-size:.95rem; font-weight:600; line-height:1;
  letter-spacing:-.01em;
  padding:.82rem 1.25rem; border-radius:var(--pill);
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  cursor:pointer; white-space:nowrap; transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s, border-color .16s, color .16s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow); color:var(--fg);}
.btn:active{transform:translateY(0);}
.btn .arw{transition:transform .18s var(--ease);}
.btn:hover .arw{transform:translate(3px,-1px);}
.btn--primary{--bg:var(--ink); --fg:#fff; --bd:var(--ink);}
.btn--primary:hover{--bg:var(--blue); --bd:var(--blue);}
.btn--ghost{--bg:transparent; --fg:var(--ink); --bd:var(--hairline); box-shadow:none;}
.btn--ghost:hover{--bd:var(--ink); --fg:var(--ink); background:rgba(10,44,54,.03);}
.btn--on-navy{--bg:#fff; --fg:var(--navy); --bd:#fff;}
.btn--on-navy:hover{--bg:#fff; --fg:var(--navy);}
.btn--on-navy-ghost{--bg:transparent; --fg:var(--on-navy); --bd:var(--navy-hairline); box-shadow:none;}
.btn--on-navy-ghost:hover{--bd:rgba(234,241,243,.45); background:rgba(255,255,255,.05); --fg:var(--on-navy);}
.btn--lg{padding:1rem 1.6rem; font-size:1.02rem; white-space:normal; line-height:1.2; text-align:center;}
.btn-row{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;}
@media (max-width:560px){
  .hero__cta{flex-direction:column; align-items:stretch;}
  .hero__cta .btn, .cta-band__inner .btn{width:100%;}
  .cta-band__inner .btn-row{flex-direction:column; align-items:stretch; width:100%;}
}

/* ---------- Site nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(244,246,247,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.site-nav.scrolled{border-bottom-color:var(--hairline); background:rgba(244,246,247,.92); box-shadow:var(--shadow-sm);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; height:72px;}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:var(--ink);}
.brand img{height:42px; width:auto;}
.brand__mark{display:none;}
.brand:hover{color:var(--ink);}
/* Mobile: keep the full horizontal lockup (name included), just scaled down a
   touch so it clears the menu button on narrow phones. The icon-only mark
   stays hidden — the wordmark reads as more established/professional. */
@media (max-width:560px){
  .brand img.brand__full{height:30px;}
  .brand img.brand__mark{display:none;}
}
.nav-right{display:flex; align-items:center; gap:6px;}
.nav-menu{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0;}
.nav-link{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.94rem; font-weight:550; color:var(--ink-2);
  padding:.55rem .7rem; border-radius:10px; line-height:1;
  transition:color .15s, background .15s;
}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--ink); background:rgba(10,44,54,.05);}
.nav-cta{margin-left:8px;}

/* Dropdown */
.has-dropdown{position:relative;}
.has-dropdown > .nav-link .caret{width:.6rem; height:.6rem; transition:transform .2s;}
.has-dropdown:hover > .nav-link .caret,
.has-dropdown:focus-within > .nav-link .caret{transform:rotate(180deg);}
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:300px;
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:8px; list-style:none; margin:0;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown a{
  display:block; padding:.6rem .7rem; border-radius:10px; color:var(--ink);
}
.dropdown a:hover{background:var(--paper-2);}
.dropdown a small{display:block; color:var(--ink-3); font-size:.8rem; font-weight:400; margin-top:2px;}
.dropdown a strong{font-weight:600;}

/* Mobile nav */
.nav-toggle{display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--hairline); border-radius:10px; background:var(--card); cursor:pointer;}
.nav-toggle span{position:relative; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s;}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s;}
.nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}
body.nav-open .nav-toggle span{background:transparent;}
body.nav-open .nav-toggle span::before{top:0; transform:rotate(45deg);}
body.nav-open .nav-toggle span::after{top:0; transform:rotate(-45deg);}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;}

  /* Full-height overlay — a single surface, nothing peeking behind it.
     Sized with viewport units (not bottom:0) because .site-nav's backdrop-filter
     makes it the containing block for this fixed child, so percentage/inset
     heights would resolve against the 72px nav box instead of the screen. */
  .nav-menu{
    position:fixed; top:72px; left:0; right:0;
    height:calc(100vh - 72px); height:calc(100dvh - 72px);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper);
    padding:6px 24px 0; overflow-y:auto;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:transform .26s var(--ease), opacity .26s var(--ease), visibility .26s var(--ease);
  }
  body.nav-open{overflow:hidden;}                  /* lock the page behind the menu */
  body.nav-open .nav-menu{transform:none; opacity:1; visibility:visible;}

  /* Consistent, generous rows */
  .nav-menu > li:not(.nav-cta){border-bottom:1px solid var(--hairline-2);}
  .nav-link{
    display:flex; justify-content:space-between; align-items:center;
    min-height:54px; padding:1rem .2rem;
    font-size:1.12rem; font-weight:600; color:var(--ink);
    background:none; border:none; border-radius:0;
  }
  .nav-link[aria-current="page"]{background:none;}  /* no stray pill in the overlay */

  /* Services → tap-to-expand accordion */
  .has-dropdown > .nav-link .caret{display:block; width:.85rem; height:.85rem; transition:transform .24s var(--ease);}
  .has-dropdown.open > .nav-link .caret{transform:rotate(180deg);}
  .dropdown{
    position:static; min-width:0; margin:0; padding:0;
    background:none; border:none; box-shadow:none; border-radius:0;
    max-height:0; overflow:hidden; opacity:0; visibility:visible;
    transition:max-height .3s var(--ease), opacity .25s var(--ease), padding .3s var(--ease);
  }
  .has-dropdown.open > .dropdown{max-height:480px; opacity:1; padding:2px 0 14px 16px;}
  .dropdown a{padding:.7rem .2rem; color:var(--ink-2); font-size:1rem;}
  .dropdown a strong{font-weight:500;}
  .dropdown a small{display:none;}                 /* restraint: titles only on mobile */

  /* Primary action anchored to the bottom — always one tap away, no scrolling */
  .nav-cta{
    margin:auto 0 0; position:sticky; bottom:0;
    padding:16px 0 max(18px, env(safe-area-inset-bottom));
    background:var(--paper); border-top:1px solid var(--hairline-2);
  }
  .nav-cta .btn{width:100%; justify-content:center; padding:1rem 1.2rem; font-size:1.05rem;}

  /* Restrained staggered entrance */
  @media (prefers-reduced-motion:no-preference){
    .nav-menu > li{opacity:0; transform:translateY(10px);}
    body.nav-open .nav-menu > li{
      opacity:1; transform:none;
      transition:opacity .42s var(--ease), transform .42s var(--ease);
    }
    body.nav-open .nav-menu > li:nth-child(1){transition-delay:.04s;}
    body.nav-open .nav-menu > li:nth-child(2){transition-delay:.09s;}
    body.nav-open .nav-menu > li:nth-child(3){transition-delay:.14s;}
    body.nav-open .nav-menu > li:nth-child(4){transition-delay:.19s;}
    body.nav-open .nav-menu > li:nth-child(5){transition-delay:.24s;}
  }
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--navy); color:var(--on-navy);}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 540px at 8% -8%, rgba(30,81,96,.30), transparent 58%),
    radial-gradient(760px 560px at 96% 8%, rgba(226,172,68,.12), transparent 60%),
    radial-gradient(600px 600px at 60% 120%, rgba(30,81,96,.14), transparent 60%);
}
/* Landscape + systems-overlay band (brand doc 11): misty teal mountains fade in along
   the bottom of the hero, grounding it with "calm natural scale." Sits behind content
   (z-index 0 < .hero__inner z-index 1), masked + low opacity so the H1 stays high-contrast. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:0; pointer-events:none;
  background:url("../img/hero-landscape.jpg") center bottom / cover no-repeat;
  opacity:.30;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 60%);
          mask-image:linear-gradient(to bottom, transparent, #000 60%);
}
.hero__grid-bg{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--navy-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--navy-hairline) 1px, transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(900px 600px at 70% 30%, #000, transparent 75%);
}
.hero__inner{position:relative; z-index:1; padding-top:clamp(72px,9vw,128px); padding-bottom:clamp(56px,6vw,96px);}
.hero__layout{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,4vw,60px); align-items:center;}
.hero h1{color:#fff; max-width:16ch;}
.hero__lede{color:var(--on-navy-2); font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.55; max-width:54ch; margin:1.3rem 0 1.9rem;}
.hero__cta{margin-bottom:1.6rem;}
.hero__micro{color:var(--on-navy-3); font-size:.92rem; max-width:50ch; line-height:1.55;}
@media (max-width:860px){ .hero__layout{grid-template-columns:1fr; gap:36px;} .hero__aside{order:2;} }

/* Page header (interior pages) */
.page-header{background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden;}
.page-header::before{content:""; position:absolute; inset:0; background:radial-gradient(820px 460px at 10% -20%, rgba(30,81,96,.26), transparent 60%), radial-gradient(620px 480px at 98% 0%, rgba(226,172,68,.10), transparent 62%); pointer-events:none;}
.page-header__inner{position:relative; z-index:1; padding-top:clamp(64px,7vw,112px); padding-bottom:clamp(40px,4.4vw,64px);}
.page-header h1{color:#fff; max-width:18ch;}
.page-header .lede{color:var(--on-navy-2); margin-top:1.1rem;}
.breadcrumb{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-navy-3); margin-bottom:1.1rem; display:flex; gap:.5rem; flex-wrap:wrap;}
.breadcrumb a{color:var(--on-navy-2);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.5;}

/* ---------- Cards & grids ---------- */
.grid{display:grid; gap:clamp(16px,2vw,22px);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){ .grid--4{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:1fr 1fr;} }
@media (max-width:680px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;} }

.card{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px); box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  position:relative; height:100%;
}
.card--hover:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(30,81,96,.32);}
.card h3{margin-bottom:.5rem;}
.card p{color:var(--ink-2); font-size:.97rem;}
.section--navy .card{background:rgba(255,255,255,.04); border-color:var(--navy-hairline); box-shadow:none;}
.section--navy .card p{color:var(--on-navy-2);}

.card__icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); margin-bottom:1rem;
}
.card__icon svg{width:24px; height:24px;}
.section--navy .card__icon{background:rgba(110,154,164,.18); color:var(--blue-300);}

/* Service cards (numbered) */
.service-card{display:flex; flex-direction:column; gap:.2rem;}
.service-card .idx{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--blue); margin-bottom:.6rem;}
.service-card .tag{margin-top:.2rem;}
.service-card .arrow-link{margin-top:auto; padding-top:1rem;}
.arrow-link{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--blue);}
.arrow-link:hover .arw{transform:translateX(3px);}
.arrow-link .arw{transition:transform .18s var(--ease);}

/* Tag / pill */
.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:var(--paper-2); border:1px solid var(--hairline);
  padding:.32rem .6rem; border-radius:var(--pill);
}
.tag--blue{color:var(--blue); background:var(--blue-soft); border-color:rgba(30,81,96,.22);}
.tag--gold{color:var(--gold); background:var(--gold-soft); border-color:rgba(169,118,26,.25);}

/* ---------- Steps / mechanism ---------- */
.steps{counter-reset:step; display:grid; gap:14px;}
.steps--row{grid-template-columns:repeat(3,1fr);}
@media (max-width:760px){ .steps--row{grid-template-columns:1fr;} }
.step{
  position:relative; background:var(--card); border:1px solid var(--hairline);
  border-radius:var(--r); padding:1.3rem 1.3rem 1.3rem 1.3rem; box-shadow:var(--shadow-sm);
}
.step__num{
  font-family:var(--font-mono); font-size:.8rem; color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; background:var(--blue-soft); margin-bottom:.7rem;
}
.step h3,.step h4{font-size:1.02rem; letter-spacing:-.01em; margin-bottom:.3rem;}
.step p{font-size:.92rem; color:var(--ink-2); margin:0;}
.section--navy .step{background:rgba(255,255,255,.04); border-color:var(--navy-hairline); box-shadow:none;}
.section--navy .step p{color:var(--on-navy-2);}
.section--navy .step__num{background:rgba(110,154,164,.18); color:var(--blue-300);}

/* ---------- Checklist / fit lists ---------- */
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:.7rem;}
.checklist li{display:flex; gap:.7rem; align-items:flex-start; font-size:.97rem; color:var(--ink-2); line-height:1.5;}
.checklist .tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(109,186,91,.14); color:#3F7E45; border:1px solid rgba(109,186,91,.5);
}
.checklist .tick svg{width:13px; height:13px;}
.section--navy .checklist li{color:var(--on-navy-2);}
.section--navy .checklist .tick{color:#6DBA5B; border-color:rgba(109,186,91,.5);}

.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:680px){ .fit-grid{grid-template-columns:1fr;} }
.fit{background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(20px,2.2vw,26px); box-shadow:var(--shadow-sm);}
.fit h3, .fit h4{font-size:1.02rem; letter-spacing:-.01em; display:flex; align-items:center; gap:.5rem;}
.fit ul{list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.55rem;}
.fit li{display:flex; gap:.6rem; align-items:flex-start; font-size:.94rem; color:var(--ink-2);}
.fit li .mk{flex:0 0 auto; font-weight:700; margin-top:1px;}
.fit--yes .mk{color:var(--green);}
.fit--no .mk{color:#B35A54;}

/* ---------- Proof strip / stats ---------- */
.proof-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px);}
@media (max-width:680px){ .proof-strip{grid-template-columns:1fr;} }
.stat{padding:0;}
.stat__num{font-family:var(--font-display); font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1;}
.section--navy .stat__num{color:#fff;}
.stat__label{margin-top:.5rem; font-size:.92rem; color:var(--ink-3); line-height:1.45;}
.section--navy .stat__label{color:var(--on-navy-2);}

/* ---------- Figures / diagrams ---------- */
.figure{margin:0; background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,32px); box-shadow:var(--shadow);}
.figure svg{width:100%; height:auto;}
.figure__caption{margin-top:1rem; font-size:.85rem; color:var(--ink-3); text-align:center; font-family:var(--font-mono); letter-spacing:.04em;}
.section--navy .figure{background:rgba(255,255,255,.03); border-color:var(--navy-hairline); box-shadow:none;}
.section--navy .figure__caption{color:var(--on-navy-3);}

/* Operator-proof photo: edge-to-edge image in a rounded bordered card + caption below.
   For real photography (e.g. the Cleantech panel) — brand tokens, no inner padding. */
.operator-proof-image{margin:0; background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden;}
.operator-proof-image img{display:block; width:100%; height:auto;}
.operator-proof-image .figure__caption{margin:0; padding:.85rem 1.1rem 1rem; text-align:left; line-height:1.45;}

/* Two-column feature (text + figure) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center;}
.split--reverse .split__media{order:-1;}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:32px;} .split--reverse .split__media{order:0;} }

/* ---------- Pull quote ---------- */
.pullquote{
  font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); line-height:1.3; color:var(--ink);
  max-width:36ch; margin:2.6rem 0; padding-left:1.5rem; border-left:3px solid var(--blue);
}
.section--navy .pullquote{color:#fff; border-left-color:var(--gold-bright);}
.pullquote__cite{display:block; font-family:var(--font-sans); font-style:normal; font-size:.9rem; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin-top:1.1rem;}
.section--navy .pullquote__cite{color:var(--on-navy-3);}

/* ---------- Founder note ---------- */
.founder-note{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;}
.founder-note__avatar{width:84px; height:84px; border-radius:18px; overflow:hidden; border:1px solid var(--hairline); background:var(--paper-2); flex:0 0 auto;}
.founder-note__avatar img{width:100%; height:100%; object-fit:cover;}
@media (max-width:560px){ .founder-note{grid-template-columns:1fr;} }

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy); color:var(--on-navy); position:relative; overflow:hidden;}
.cta-band::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(700px 420px at 15% 10%, rgba(30,81,96,.30), transparent 60%), radial-gradient(620px 420px at 90% 90%, rgba(226,172,68,.12), transparent 62%);}
.cta-band__inner{position:relative; z-index:1; padding-top:clamp(48px,5.4vw,84px); padding-bottom:clamp(48px,5.4vw,84px); text-align:center; display:flex; flex-direction:column; align-items:center;}
.cta-band h2{color:#fff; max-width:20ch;}
.cta-band .lede{color:var(--on-navy-2); margin:1rem auto 1.8rem;}

/* ---------- Logo / partner row ---------- */
.logo-row{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,4vw,52px); justify-content:center;}
.logo-row img{height:30px; width:auto; opacity:.62; filter:grayscale(1); transition:opacity .2s, filter .2s;}
.logo-row img:hover{opacity:.9; filter:grayscale(0);}

/* ---------- Forms ---------- */
.form{display:grid; gap:18px;}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:620px){ .form__row{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:.4rem;}
.field--full{grid-column:1 / -1;}
.field label{font-size:.86rem; font-weight:600; color:var(--ink); letter-spacing:-.005em;}
.field label .req{color:var(--blue);}
.field .hint{font-size:.8rem; color:var(--ink-3); font-weight:400;}
.field input,.field select,.field textarea{
  font-family:var(--font-sans); font-size:.98rem; color:var(--ink);
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-sm);
  padding:.78rem .9rem; width:100%; transition:border-color .15s, box-shadow .15s; outline:none;
}
.field textarea{min-height:118px; resize:vertical; line-height:1.5;}
.field select{appearance:none; -webkit-appearance:none; 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 d='M2 4l4 4 4-4' stroke='%235A727B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.2rem;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color:var(--ink-2); line-height:1.45;}
.consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--blue); flex:0 0 auto;}
.form-note{font-size:.82rem; color:var(--ink-3);}
.form-status{display:none; padding:.9rem 1.1rem; border-radius:var(--r-sm); font-size:.92rem; margin-top:.4rem;}
.form-status.is-success{display:block; background:rgba(109,186,91,.12); border:1px solid rgba(109,186,91,.34); color:#3F7E45;}
.form-status.is-error{display:block; background:rgba(180,84,63,.1); border:1px solid rgba(180,84,63,.3); color:#9a4131;}
.form-card{background:var(--card); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow);}

/* Calendly */
.calendly-shell{border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; background:var(--card); box-shadow:var(--shadow);}
/* min-height (not height) is required: Calendly's widget.js auto-resizes the
   iframe to fit its content, but only when our CSS doesn't pin a fixed
   height. A fixed height forced an internal scrollbar on mobile, where the
   stacked (no side-by-side calendar+times) layout needs much more vertical
   space than desktop — i.e. the "double scroll" (page scroll + iframe
   scroll). min-height just keeps the box from collapsing before content/JS
   sets the real height. */
.calendly-inline-widget{width:100%; min-width:320px; min-height:680px;}
/* Shown in place of the iframe if Calendly fails to load (ad blocker,
   browser privacy shield, or third-party outage) — a direct link beats a
   blank box. */
.calendly-inline-widget.calendly-fallback{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; text-align:center; padding:2.4rem;}
.calendly-inline-widget.calendly-fallback p{color:var(--ink-3); max-width:46ch; margin:0;}
/* Soft, always-shown escape hatch — appears a few seconds after load starts
   regardless of whether the embed "looks" loaded, since a stalled calendar
   can reserve full-height space without ever painting its content (see the
   comment above showInlineHint in site.js). Sits below the widget rather
   than replacing it, in case the calendar is just slow and finishes late. */
.calendly-direct-hint{
  display:block;
  margin-top:.9rem;
  text-align:center;
  font-size:.86rem;
  color:var(--ink-3);
}
.calendly-direct-hint:hover,
.calendly-direct-hint:focus-visible{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}

/* Desktop popup: keep the scheduler within the viewport so it never needs an
   outer scrollbar. Calendly's default popup uses `margin:5% auto` — and margin
   percentages resolve against WIDTH, not height — so on a wide window the
   top/bottom margin grows large enough that the popup + margins overflow the
   viewport, and the overlay (overflow:auto) shows a scrollbar on the right.
   We center the popup with flexbox instead and cap it to the viewport.
   !important is required to override Calendly's CDN stylesheet. */
.calendly-overlay{
  overflow:hidden !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.calendly-overlay .calendly-popup{
  margin:0 !important;
  width:min(1000px, calc(100vw - 32px)) !important;
  height:min(680px, calc(100vh - 32px)) !important;
  max-height:calc(100vh - 32px) !important;
}
.calendly-overlay .calendly-popup .calendly-popup-content,
.calendly-overlay .calendly-popup .calendly-popup-content iframe{
  height:100% !important; max-height:100% !important;
}

/* ---------- Article / prose ---------- */
.article{max-width:720px; margin:0 auto;}
.article__meta{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem;}
.prose{font-family:var(--font-serif); font-size:1.18rem; line-height:1.72; color:var(--ink-2);}
.prose p{margin:0 0 1.5rem;}
.prose h2{font-family:var(--font-display); font-size:1.7rem; margin:2.4rem 0 .9rem;}
.prose h3{font-size:1.3rem; margin:2rem 0 .7rem;}
.prose strong{color:var(--ink);}
.prose blockquote{margin:1.8rem 0; padding:.4rem 0 .4rem 1.4rem; border-left:3px solid var(--blue); font-style:italic; color:var(--ink);}
.prose ul,.prose ol{margin:0 0 1.3rem; padding-left:1.3rem;}
.prose li{margin:.35rem 0;}
.prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}

/* Insight cards */
.insight-card{display:flex; flex-direction:column;}
.insight-card .tag{align-self:flex-start; margin-bottom:1rem;}
.insight-card h3{margin-bottom:.5rem;}
.insight-card .arrow-link{margin-top:auto; padding-top:1rem;}
.insight-card.is-soon{opacity:.92;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:var(--on-navy-2); padding:clamp(48px,5vw,76px) 0 36px; position:relative; overflow:hidden;}
.site-footer::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 360px at 5% 0%, rgba(30,81,96,.14), transparent 60%); pointer-events:none;}
.footer-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,3vw,40px);}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand .f-logo{display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem; transition:opacity .2s var(--ease);}
.footer-brand .f-logo:hover{opacity:.82;}
.footer-brand .f-logo img{height:40px; width:auto;}
.footer-brand .f-logo b{font-family:var(--font-display); color:#fff; font-size:1.02rem; letter-spacing:-.01em;}
.footer-brand p{color:var(--on-navy-3); font-size:.92rem; max-width:34ch;}
.footer-col h5{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-3); margin:0 0 1rem; font-weight:500;}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;}
.footer-col a{color:var(--on-navy-2); font-size:.94rem; transition:color .2s var(--ease);}
.footer-col a:hover{color:#fff;}
.footer-bottom{position:relative; z-index:1; margin-top:clamp(32px,4vw,52px); padding-top:24px; border-top:1px solid var(--navy-hairline); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;}
.footer-bottom small{color:var(--on-navy-3); font-size:.82rem; line-height:1.5;}
.footer-bottom .f-legal{display:flex; gap:18px; flex-wrap:wrap;}
.footer-bottom .f-legal a{color:var(--on-navy-3); font-size:.82rem; transition:color .2s var(--ease);}
.footer-bottom .f-legal a:hover{color:#fff;}
.disclaimer{max-width:var(--max); margin:18px auto 0; padding:0 24px;}
.disclaimer small{color:var(--on-navy-3); font-size:.78rem; line-height:1.55; display:block;}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.on{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------- Skip link & a11y ---------- */
.skip{position:absolute; left:-9999px; top:auto;}
.skip:focus{left:16px; top:16px; z-index:200; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:10px;}
:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:4px;}
.section--navy :focus-visible,.hero :focus-visible,.cta-band :focus-visible,.site-footer :focus-visible{outline-color:var(--green);}

/* ---------- Helpers ---------- */
.center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-lg{margin-top:2rem;}
.btn-row--center{justify-content:center;}
.stack-sm > * + *{margin-top:.7rem;}
.stack > * + *{margin-top:1.1rem;}
.divider{height:1px; background:var(--hairline); border:none; margin:0;}
.badge-note{display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--pill); padding:.4rem .8rem;}
/* Multi-line variant: the pill radius (999px) is sized for short one-line
   badges. On a multi-sentence disclaimer it balloons into a lopsided oval
   that clips its own text at the corners. Use a normal card radius and let
   the box grow to full width instead of shrink-wrapping. */
.badge-note--block{display:flex; align-items:flex-start; max-width:none; border-radius:var(--r-sm); line-height:1.55; padding:.95rem 1.15rem;}

/* ---------- Upgrades: trust strip, form reassurance, footer link affordance ---------- */
.trust-strip{padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--hairline-2);}
.trust-row{display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:center; list-style:none; margin:0; padding:0; font-size:.9rem; color:var(--ink-3);}
.trust-row li{display:inline-flex; align-items:center; gap:.5rem;}
.trust-row .tk{color:var(--gold); font-size:.62rem; line-height:1;}
.form-reassure{font-size:.85rem; color:var(--ink-3); margin:0 0 .7rem;}
/* Readability — keep standalone body copy at a comfortable reading measure
   (cards, grids, splits, and .prose set their own width and are unaffected). */
.section .wrap > p,
.section .wrap > ul,
.section .wrap > ol{max-width:var(--measure);}
.lead-para{font-size:1.06rem; color:var(--ink-2);}
.lead-para strong:first-child{color:var(--ink);}
/* Pull-quote rest-stops — mobile-crisp rhythm breaks between dense sections */
.quote-band{padding:clamp(44px,5vw,76px) 0; border-top:1px solid var(--hairline-2);}
.quote-band .pullquote{max-width:22ch; margin:0 auto; text-align:center; border-left:none; padding-left:0; font-size:clamp(1.55rem,1.1rem + 1.9vw,2.35rem); line-height:1.25;}
.quote-band .pullquote::before{content:""; display:block; width:42px; height:2px; background:var(--gold); opacity:.85; margin:0 auto 1.5rem;}
/* Mobile diagrams: brand spec says never force tiny diagram text — keep a legible
   minimum and let complex figures become horizontally swipeable "panels" instead of
   shrinking to illegibility. Only diagrams wider than the viewport scroll. */
@media (max-width:768px){
  /* let grid/flex items shrink so the figure can contain + scroll its min-width svg
     (default min-width:auto would otherwise blow the column past the viewport) */
  .split > *, .grid > *{min-width:0;}
  .figure{padding:16px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:rgba(90,114,123,.4) transparent;}
  .figure::-webkit-scrollbar{height:5px;}
  .figure::-webkit-scrollbar-track{background:transparent;}
  .figure::-webkit-scrollbar-thumb{background:rgba(90,114,123,.4); border-radius:3px;}
  .figure svg{min-width:460px;}
}

/* Header entrance — header content rises in on load (premium first impression).
   Disabled under reduced-motion. Only targets above-the-fold header content;
   everything below uses the scroll-reveal cascade in site.js. */
@media (prefers-reduced-motion:no-preference){
  @keyframes giga-rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
  .page-header__inner > *,
  .hero__inner .hero__layout > div:first-child > *{ animation:giga-rise .65s var(--ease) both; }
  .page-header__inner > :nth-child(1), .hero__inner .hero__layout > div:first-child > :nth-child(1){ animation-delay:.04s; }
  .page-header__inner > :nth-child(2), .hero__inner .hero__layout > div:first-child > :nth-child(2){ animation-delay:.12s; }
  .page-header__inner > :nth-child(3), .hero__inner .hero__layout > div:first-child > :nth-child(3){ animation-delay:.20s; }
  .page-header__inner > :nth-child(4), .hero__inner .hero__layout > div:first-child > :nth-child(4){ animation-delay:.28s; }
  .page-header__inner > :nth-child(5), .hero__inner .hero__layout > div:first-child > :nth-child(5){ animation-delay:.36s; }
  .page-header__inner > :nth-child(6){ animation-delay:.44s; }
}
/* Footer link hover — ONE consistent motion across the column links and the legal row,
   and identical whether a link sits on one line or wraps to two: the underline fades in
   (text-decoration-color) and the color lifts to white. Replaces the old background-size
   "grow" underline, which animated inconsistently on multi-line links. The brand logo is
   a .footer-col a but NOT a .footer-col ul a, so it's excluded (it gets an opacity fade). */
.footer-col ul a,
.footer-bottom .f-legal a{
  text-decoration:underline; text-decoration-color:transparent;
  text-decoration-thickness:1px; text-underline-offset:4px;
  transition:color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.footer-col ul a:hover,
.footer-bottom .f-legal a:hover{color:#fff; text-decoration-color:currentColor;}