/* =====================================================================
 * GeoSutra design system — shared across all non-app pages.
 * One stylesheet, no build step. Tokens follow the GeoSutra Brand
 * Guidelines V1.0 (July 2026): three greens carry the system — Deep
 * Forest, Canopy, Sage — and Anomaly orange is reserved for the one
 * signal per view (an alert, a delta, the CTA that matters). Type is
 * Archivo (display 800 / headings 700 / body 400) + IBM Plex Mono for
 * labels and data.
 * ===================================================================== */

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

:root{
  --green:#1D5C47;          /* Deep Forest — primary; 7.8:1 with white button text (WCAG AA) */
  --green-deep:#164536;     /* darker step — hover, dark bands */
  --green-ink:#17231D;      /* Ink — near-black text */
  --canopy:#5F997C;         /* Canopy — secondary elements, mid data series */
  --green-200:#AFCBBA;      /* Sage — fills, tints, borders, map base */
  --green-100:#CFDFD5;      /* sage tint (light text on dark bands) */
  --green-50:#E8EFE9;       /* faint sage fill — chips, badges */
  --tint:#F2F4EF;           /* Mist — alternate section surface */
  --tint-2:#E9EEE7;
  --paper:#FAF9F6;          /* Paper White */
  --ink:#17231D;
  --muted:#44544B;
  --muted-2:#64736A;        /* clears 4.5:1 (WCAG AA) on Paper White */
  --line:rgba(23,35,29,0.10);
  --line-strong:rgba(23,35,29,0.18);
  --anomaly:#E5854B;        /* Anomaly / Terracotta — fire & alert accent */
  --anomaly-deep:#B85C22;   /* AA-safe anomaly for text/borders on light */
  --rust:#9A3417;

  /* ---- Grounded-Playful prism ---------------------------------------
   * Forest green stays the brand constant (chrome, primary CTA, logo).
   * These accents ROTATE one-per-section via .section--* utilities,
   * driving --accent so eyebrows/badges/buttons pick up the hue. */
  --canopy:#2FA37C;         /* brighter leaf green (was #5F997C) */
  --sky:#1AA7E0;            /* climate / water */
  --terracotta:#E5854B;     /* alias of anomaly — fire / alert */
  --amber:#E8B04B;          /* data / finance */
  --accent:var(--green);    /* section-driven; defaults to brand green */

  --radius:14px;            /* cards — warmer than the old 10px */
  --radius-sm:10px;         /* buttons, inputs, chips */
  --radius-lg:20px;         /* hero panels, large surfaces */
  --shadow-sm:0 1px 2px rgba(15,15,20,.05);
  --shadow:0 8px 24px rgba(15,15,20,.08);   /* soft card lift (ref) */
  --maxw:1200px;
  --serif:'Archivo','IBM Plex Sans Devanagari',system-ui,sans-serif;  /* legacy alias — display face is Archivo now */
  --sans:'Archivo','IBM Plex Sans Devanagari',system-ui,sans-serif;
  --body:'Inter','IBM Plex Sans Devanagari',system-ui,sans-serif;     /* body / UI text */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --deva:'IBM Plex Sans Devanagari','Archivo',sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Accessibility: visible keyboard focus + skip link ----------
 * WCAG 2.1 AA — 2.4.1 Bypass Blocks, 2.4.7 Focus Visible. Only shows the
 * ring for keyboard/AT users (:focus-visible), not on mouse click. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--green-deep);
  outline-offset:2px;
  border-radius:3px;
}
.skip-link{
  position:absolute; top:-48px; left:8px; z-index:10000;
  background:var(--green-deep); color:#fff; padding:10px 16px;
  border-radius:6px; font-family:var(--mono); font-size:13px; font-weight:600;
  text-decoration:none; transition:top .15s ease;
}
.skip-link:focus{ top:8px; }
@media (prefers-reduced-motion: reduce){
  .skip-link{ transition:none; }
}
body[data-lang="ne"]{font-family:var(--deva);}
::selection{background:var(--green);color:#fff;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.12;letter-spacing:-0.02em;margin:0 0 .5em;color:var(--green-ink);}
h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-0.03em;line-height:1.05;}
h2{font-size:clamp(26px,3.4vw,42px);}
h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-0.01em;}
p{margin:0 0 1em;}
.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;}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);}
.section{padding:clamp(56px,8vw,104px) 0;}
.section--tint{background:var(--tint);}
.section--ink{background:var(--green-deep);color:var(--green-50);}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff;}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:18px;display:block;}
.section--ink .eyebrow{color:var(--green-200);}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--muted);max-width:62ch;}
.section--ink .lead{color:var(--green-100);}
.center{text-align:center;}
.center .lead{margin-left:auto;margin-right:auto;}
.grid{display:grid;gap: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:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease;line-height:1;font-family:inherit;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-deep);box-shadow:var(--shadow-sm);}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--green-ink);}
.btn-ghost:hover{border-color:var(--green);color:var(--green-deep);}
.section--ink .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;}
.btn-light{background:#fff;color:var(--green-deep);}
.btn-sm{padding:9px 15px;font-size:13.5px;}

/* ---- cards ---- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .15s,box-shadow .15s,transform .15s;}
.card--hover:hover{border-color:var(--green-200);box-shadow:var(--shadow);transform:translateY(-2px);}
.card h3{margin-bottom:.35em;}
.card .muted{color:var(--muted);font-size:14.5px;margin:0;}
.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-deep);background:var(--green-50);border-radius:100px;padding:5px 11px;}
.num-badge{width:34px;height:34px;border-radius:9px;background:var(--green-50);color:var(--green-deep);
  display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:15px;flex:none;}
.tag-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:7px;}
.tag-list li{font-size:14px;color:var(--muted);padding-left:18px;position:relative;}
.tag-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--canopy);}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.stats .stat{background:var(--paper);padding:24px;}
.stat .n{font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;font-size:clamp(26px,3vw,38px);color:var(--green-deep);line-height:1;}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:8px;}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}

/* ---- header / nav ---- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(250,249,246,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand .b-mark{flex:none;display:block;}
.brand .b-name{font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--green-ink);}
/* Brand shows ONE name for the active language: GeoSutra (en) / जियोसूत्र (ne). */
.brand .b-deva{display:none;font-family:var(--deva);font-size:21px;font-weight:600;letter-spacing:.02em;color:var(--green-ink);}
body[data-lang="ne"] .brand .b-name{display:none;}
body[data-lang="ne"] .brand .b-deva{display:inline-block;}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.nav-links a{font-size:13.5px;color:var(--muted);padding:8px 10px;border-radius:6px;white-space:nowrap;transition:color .12s,background .12s;}
.nav-links a:hover{color:var(--green-deep);background:var(--green-50);}
.nav-links a.active{color:var(--green-deep);font-weight:600;}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none;}
.lang-toggle{display:flex;border:1px solid var(--line-strong);border-radius:100px;overflow:hidden;}
.lang-toggle button{border:0;background:transparent;font-family:inherit;font-size:12px;padding:6px 11px;cursor:pointer;color:var(--muted);}
.lang-toggle button.on{background:var(--green);color:#fff;}
.has-drop{position:relative;}
.has-drop>.drop-toggle{cursor:pointer;}
.drop{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px;display:none;}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block;}
.drop a{display:block;font-size:13.5px;padding:9px 11px;border-radius:7px;color:var(--ink);}
.drop a:hover{background:var(--green-50);color:var(--green-deep);}
.drop small{display:block;color:var(--muted-2);font-size:11.5px;}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--green-ink);margin:4px 0;border-radius:2px;}
@media(max-width:1040px){
  .nav-links,.nav .lang-toggle{display:none;}
  .hamburger{display:block;}
}
/* mobile drawer */
.m-drawer{position:fixed;inset:0;z-index:80;background:rgba(16,36,24,.4);opacity:0;pointer-events:none;transition:opacity .2s;}
.m-drawer.open{opacity:1;pointer-events:auto;}
.m-panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:var(--paper);padding:22px;overflow-y:auto;transform:translateX(100%);transition:transform .24s ease;}
.m-drawer.open .m-panel{transform:none;}
.m-panel a{display:block;padding:12px 6px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);}
.m-panel a.active{color:var(--green-deep);font-weight:600;}
.m-close{float:right;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);}

/* ---- hero ---- */
.hero{padding:clamp(56px,8vw,96px) 0;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px;}}
.hero h1{margin-bottom:.4em;}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}

/* ---- footer ---- */
.site-footer{background:var(--green-ink);color:#C9D6CE;padding:64px 0 28px;}
.site-footer h4{color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:16px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.site-footer a{color:#A9BBB0;font-size:14px;display:block;padding:5px 0;}
.site-footer a:hover{color:#fff;}
.foot-brand .foot-mark{margin-bottom:12px;}
.foot-brand .b-name{font-family:var(--sans);font-weight:800;letter-spacing:-0.02em;font-size:21px;color:#fff;}
.foot-brand .b-deva{display:none;font-family:var(--deva);font-size:22px;color:#fff;}
body[data-lang="ne"] .foot-brand .b-name{display:none;}
body[data-lang="ne"] .foot-brand .b-deva{display:inline-block;}
.foot-brand p{color:#90A398;font-size:14px;margin-top:12px;max-width:34ch;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#7E938A;font-size:13px;}
.foot-legal{display:flex;gap:18px;}
.foot-legal a{display:inline;padding:0;}

/* ---- forms ---- */
.field{margin-bottom:14px;}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 13px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;outline:none;transition:border-color .12s,box-shadow .12s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-50);}
.field textarea{resize:vertical;min-height:110px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.note{font-size:13px;padding:11px 14px;border-radius:var(--radius-sm);}
.note-ok{background:var(--green-50);border:1px solid rgba(29,92,71,.35);color:var(--green-deep);}
.note-err{background:#FBEAE6;border:1px solid rgba(192,73,43,.4);color:var(--rust);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

/* ---- misc ---- */
.partner-strip{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;justify-content:center;}
.partner-strip span{font-family:var(--sans);font-weight:500;font-size:17px;color:var(--muted-2);opacity:.85;}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;}
.pill{font-family:var(--mono);font-size:12px;color:var(--green-deep);background:var(--green-50);border-radius:100px;padding:6px 13px;}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted-2);}
.divider{height:1px;background:var(--line);border:0;margin:0;}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* =====================================================================
 * Venture-grade layer — premium primitives layered on top of the base
 * system. Everything here is progressive: pages that don't use it are
 * unaffected, and all motion is disabled under prefers-reduced-motion.
 * ===================================================================== */

/* ---- scroll progress bar ---- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--green),var(--green-200));transition:width .08s linear;}

/* ---- gradient / mesh hero surface ---- */
.hero--mesh{position:relative;overflow:hidden;}
.hero--mesh::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 60% at 8% 0%, rgba(95,153,124,.12), transparent 60%),
    radial-gradient(50% 50% at 100% 8%, rgba(175,203,186,.30), transparent 55%),
    radial-gradient(40% 60% at 80% 100%, rgba(29,92,71,.08), transparent 60%);}
.hero--mesh::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(29,92,71,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,92,71,.06) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 80%);}

/* ---- gradient text accent ---- */
.accent{background:linear-gradient(100deg,var(--green-deep),var(--green) 45%,var(--canopy));
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---- availability / status dot ---- */
.live-dot{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--green-deep);
  background:var(--green-50);border:1px solid var(--green-100);border-radius:100px;padding:6px 13px;}
.live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--anomaly);
  box-shadow:0 0 0 0 rgba(229,133,75,.55);animation:pulse 2.2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,133,75,.5);}70%{box-shadow:0 0 0 7px rgba(229,133,75,0);}100%{box-shadow:0 0 0 0 rgba(229,133,75,0);}}

/* ---- impact metric tiles (bigger emphasis than .stats) ---- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.metrics{grid-template-columns:1fr;}}
.metric{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;position:relative;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s;}
.metric:hover{border-color:var(--green-200);box-shadow:var(--shadow);transform:translateY(-2px);}
.metric .big{font-family:var(--sans);font-weight:800;font-size:clamp(34px,4.4vw,52px);line-height:1;
  color:var(--green-deep);letter-spacing:-.03em;}
.metric .big .unit{font-size:.5em;color:var(--green);margin-left:2px;}
.metric .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:10px;}
.metric .sub{font-size:13.5px;color:var(--muted);margin-top:8px;}
.section--ink .metric{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);}
.section--ink .metric .big{color:#fff;}
.section--ink .metric .big .unit{color:var(--green-200);}
.section--ink .metric .lbl{color:var(--green-200);}
.section--ink .metric .sub{color:var(--green-100);}

/* ---- trust strip / credibility wall ---- */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px;}
.trust span{font-family:var(--sans);font-weight:500;font-size:clamp(15px,1.5vw,18px);color:var(--muted-2);
  letter-spacing:.01em;white-space:nowrap;transition:color .2s,opacity .2s;opacity:.85;}
.trust span:hover{color:var(--green-deep);opacity:1;}
.trust .sep{width:5px;height:5px;border-radius:50%;background:var(--line-strong);}

/* ---- soft list / checklist ---- */
.check{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;}
.check li{position:relative;padding-left:30px;font-size:15px;color:var(--muted);line-height:1.5;}
.check li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:6px;
  background:var(--green-50);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231D5C47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;}
.section--ink .check li{color:var(--green-100);}
.section--ink .check li::before{background-color:rgba(255,255,255,.1);}

/* ---- feature row (icon + text) ---- */
.frow{display:flex;gap:16px;align-items:flex-start;}
.frow .ic{width:42px;height:42px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--green-50);color:var(--green-deep);font-family:var(--mono);font-weight:600;font-size:17px;}

/* ---- timeline / roadmap ---- */
.timeline{position:relative;margin-top:30px;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line-strong);}
.tl-item{position:relative;padding-bottom:26px;}
.tl-item::before{content:"";position:absolute;left:-26px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--green);}
.tl-item.done::before{background:var(--green);}
.tl-item .when{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);}
.tl-item h4{font-family:var(--sans);font-size:18px;font-weight:700;margin:4px 0 4px;color:var(--green-ink);}
.tl-item p{margin:0;font-size:14.5px;color:var(--muted);}

/* ---- card with top accent + hover lift used on feature grids ---- */
.card--accent{border-top:2px solid var(--green);}
.card .num-badge{margin-bottom:14px;}
.card--hover{position:relative;}

/* ---- staggered reveal helpers ---- */
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}
.reveal[data-delay="5"]{transition-delay:.40s;}

/* ---- counter number ---- */
.count{font-variant-numeric:tabular-nums;}

/* ---- big quote / vision ---- */
.bigquote{font-family:var(--sans);font-weight:700;font-size:clamp(24px,3.2vw,38px);line-height:1.25;
  letter-spacing:-.015em;color:var(--green-ink);max-width:24ch;}
.section--ink .bigquote{color:#fff;}

/* ---- reduced motion: kill all the new animation ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1!important;transform:none!important;}
}

/* =====================================================================
 * Company-story layer — the animated brand raster, the three-layer
 * "building towards" stack and the scroll-drawn roadmap used on the
 * homepage's company chapter. Progressive like everything above: pages
 * that don't use it are unaffected; all motion respects reduced-motion.
 * ===================================================================== */

/* ---- animated 5×5 brand raster: scan the field, surface the change ---- */
.raster-wrap{max-width:380px;margin:0 auto;}
.raster{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:6.5%;
  aspect-ratio:1;padding:4%;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.raster .t{border-radius:18%;opacity:0;transform:scale(.5);}
.raster .t-l{background:var(--green-200);}
.raster .t-m{background:var(--canopy);}
.raster .t-d{background:var(--green);}
/* the anomaly tile lands green like the others — the scan reveals it */
.raster .t-o{background:var(--green);position:relative;}
.play .raster .t{animation:tile-in .5s cubic-bezier(.2,.7,.3,1.25) forwards;
  animation-delay:calc(var(--i)*42ms);}
@keyframes tile-in{to{opacity:1;transform:none;}}
/* sweep line passes once, left to right, after the tiles land */
.raster::after{content:"";position:absolute;top:0;bottom:0;left:-14%;width:10%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(29,92,71,.16),transparent);}
.play .raster::after{animation:raster-sweep .9s ease-in-out 1.25s 1 forwards;}
@keyframes raster-sweep{0%{opacity:1;left:-14%;}100%{opacity:0;left:108%;}}
/* …and the one cell that changed turns orange */
.play .raster .t-o{animation:tile-in .5s cubic-bezier(.2,.7,.3,1.25) forwards,
  anomaly-flip .45s ease 1.9s forwards,anomaly-ping 1.1s ease-out 1.9s 1;
  animation-delay:calc(var(--i)*42ms),1.9s,1.9s;}
@keyframes anomaly-flip{to{background:var(--anomaly);}}
@keyframes anomaly-ping{0%{box-shadow:0 0 0 0 rgba(229,133,75,.55);}
  100%{box-shadow:0 0 0 16px rgba(229,133,75,0);}}
.raster-cap{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  margin-top:12px;}
.raster-cap .flag{color:var(--anomaly-deep);opacity:0;transition:opacity .5s ease 2.2s;}
.play .raster-cap .flag{opacity:1;}

/* ---- founding facts strip ---- */
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:10px 28px;margin-top:26px;
  justify-content:start;}
@media(max-width:620px){.facts{grid-template-columns:repeat(2,auto);}}
.fact .n{font-family:var(--sans);font-weight:800;font-size:24px;letter-spacing:-.02em;
  color:var(--green-deep);line-height:1.1;}
.fact .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-top:3px;}

/* ---- vision pull-quote ---- */
.vision{margin:30px 0 0;padding:6px 0 6px 22px;border-left:3px solid var(--green);}
.vision p{font-family:var(--sans);font-weight:700;font-size:clamp(19px,2vw,24px);
  line-height:1.35;letter-spacing:-.015em;color:var(--green-ink);margin:0;max-width:30ch;}
.vision cite{display:block;font-family:var(--mono);font-style:normal;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-top:10px;}

/* ---- the three-layer stack (ten-year shape) ---- */
.layers{position:relative;display:grid;gap:12px;margin:36px auto 0;max-width:900px;
  padding-left:26px;}
.layers::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;
  background:var(--line-strong);border-radius:2px;}
.layers::after{content:"";position:absolute;left:7px;top:14px;width:2px;height:0;
  background:linear-gradient(var(--green),var(--canopy));border-radius:2px;}
.play.layers::after,.play .layers::after{animation:rail-fill 1.5s ease .35s forwards;}
@keyframes rail-fill{to{height:calc(100% - 28px);}}
.layer{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;opacity:0;transform:translateX(-16px);
  transition:opacity .6s ease,transform .6s ease,border-color .15s,box-shadow .15s;}
.layer:hover{border-color:var(--green-200);box-shadow:var(--shadow-sm);}
.play .layer{opacity:1;transform:none;}
.play .layer:nth-child(1){transition-delay:.15s;}
.play .layer:nth-child(2){transition-delay:.5s;}
.play .layer:nth-child(3){transition-delay:.85s;}
.layer::before{content:"";position:absolute;left:-25px;top:50%;width:12px;height:12px;
  margin-top:-6px;border-radius:50%;background:var(--paper);border:2px solid var(--green);}
.layer .lnum{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--green-deep);
  background:var(--green-50);border-radius:7px;padding:8px 10px;flex:none;font-weight:600;}
.layer .lbody{flex:1;min-width:220px;}
.layer h3{margin:0 0 3px;font-size:17.5px;}
.layer p{margin:0;font-size:14px;color:var(--muted);}
.layer .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;border-radius:100px;padding:6px 12px;flex:none;white-space:nowrap;}
.chip--live{color:var(--green-deep);background:var(--green-50);}
.chip--live::before{content:"● ";color:var(--green);}
.chip--shipping{color:var(--green-deep);background:var(--green-50);}
.chip--shipping::before{content:"◐ ";color:var(--canopy);}
.chip--ahead{color:var(--anomaly-deep);border:1px solid var(--anomaly);background:transparent;}
.chip--ahead::before{content:"○ ";}

/* ---- scroll-drawn roadmap (timeline that draws itself) ---- */
.timeline--motion{--tl:0;}
.timeline--motion::before{background:var(--line);}
.timeline--motion::after{content:"";position:absolute;left:6px;top:6px;width:2px;
  height:calc(var(--tl)*(100% - 12px));background:linear-gradient(var(--green),var(--canopy));
  transition:height .15s linear;}
.timeline--motion .tl-item::before{transition:background .35s ease,border-color .35s ease,
  box-shadow .35s ease;z-index:1;}
.timeline--motion .tl-item.lit::before{background:var(--green);}
.timeline--motion .tl-item.goal.lit::before{background:var(--anomaly);border-color:var(--anomaly);
  box-shadow:0 0 0 4px rgba(229,133,75,.18);}
.timeline--motion .tl-item.goal .when{color:var(--anomaly-deep);}

/* reduced motion: everything lands in its final state instantly */
@media(prefers-reduced-motion:reduce){
  .raster .t,.layer{opacity:1!important;transform:none!important;}
  .raster .t-o{background:var(--anomaly)!important;}
  .raster-cap .flag{opacity:1!important;}
  .layers::after{height:calc(100% - 28px)!important;}
  .timeline--motion{--tl:1!important;}
  .timeline--motion .tl-item::before{background:var(--green)!important;}
}

/* =====================================================================
 * Grounded-Playful prism layer (2026 revamp).
 * Forest green anchors the chrome; these utilities rotate one accent hue
 * per section (sky → canopy → terracotta → amber), driving --accent so
 * eyebrows, badges, number tiles and accent buttons pick it up
 * automatically. Non-accented sections keep --accent = brand green, so
 * everything is backward-compatible.
 * ===================================================================== */

/* --- section accent tints (8–10% of the hue over paper) --- */
.section--sky{background:color-mix(in srgb,var(--sky) 7%,var(--paper));--accent:var(--sky);}
.section--canopy{background:color-mix(in srgb,var(--canopy) 8%,var(--paper));--accent:var(--canopy);}
.section--terracotta{background:color-mix(in srgb,var(--terracotta) 7%,var(--paper));--accent:var(--terracotta);}
.section--amber{background:color-mix(in srgb,var(--amber) 10%,var(--paper));--accent:var(--amber);}
/* let any section opt into an accent without a tint */
.accent-sky{--accent:var(--sky);} .accent-canopy{--accent:var(--canopy);}
.accent-terracotta{--accent:var(--terracotta);} .accent-amber{--accent:var(--amber);}

/* --- accent-aware primitives (fall back to green when --accent unset) --- */
.eyebrow{color:var(--accent);}
.badge{color:color-mix(in srgb,var(--accent),#000 22%);background:color-mix(in srgb,var(--accent) 14%,#fff);}
.num-badge,.frow .ic{background:color-mix(in srgb,var(--accent) 14%,#fff);color:color-mix(in srgb,var(--accent),#000 22%);}
.pill{color:color-mix(in srgb,var(--accent),#000 22%);background:color-mix(in srgb,var(--accent) 14%,#fff);}
.card--accent{border-top:2px solid var(--accent);}
.tag-list li::before{background:var(--accent);}

/* --- accent button (hue fill, no scale on hover, per ref) --- */
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{filter:brightness(.92);box-shadow:var(--shadow-sm);}
.btn-outline{background:transparent;border:1.5px solid var(--accent);color:color-mix(in srgb,var(--accent),#000 18%);}
.btn-outline:hover{background:color-mix(in srgb,var(--accent) 8%,#fff);}

/* --- playful hero panel: rounded, soft, multi-hue blob field --- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(22px,3vw,34px);}
.hero--playful{position:relative;overflow:hidden;border-radius:var(--radius-lg);}
.hero--playful .blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.16;z-index:0;pointer-events:none;}
.hero--playful>*{position:relative;z-index:1;}

/* --- flat-vector illustration sizing --- */
.illus{width:100%;height:auto;max-width:460px;}
@media(max-width:900px){.illus{max-width:70%;margin:0 auto;}}

/* --- focus ring picks up the section accent --- */
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}