/* ===========================================================================
   Navnirman — stylesheet
   Layout uses a 12-column grid with Bootstrap-style class names
   (.container / .row / .col-*), defined in section 0 below. No framework is
   loaded; these are plain CSS Grid rules, so the page stays dependency-free.
   =========================================================================== */

/* ===========================================================================
   0. LAYOUT GRID  —  .container / .row / .col-*
   A 12-column CSS Grid using Bootstrap's class names and breakpoints, so the
   markup reads the way any web developer expects. Nothing is loaded from a CDN.

     <div class="container">
       <div class="row">
         <div class="col-12 col-sm-6 col-lg-3"> … </div>
       </div>
     </div>

   Breakpoints:  sm 576px · md 768px · lg 992px · xl 1200px
   Gutters:      .row is 18px by default; .g-0 .g-sm .g-lg .g-xl override it.

   NOTE: columns set `grid-column-end: span N` rather than the `grid-column`
   shorthand. The shorthand also writes grid-column-start, which an .offset-*
   class then overwrites — collapsing the column to a single track. Keeping the
   two properties separate lets a column carry both a span and an offset.
   =========================================================================== */
.container{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-fluid{ width:100%; padding-inline:var(--gutter); }

.row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gap,18px);
}
.row.g-0 { --gap:0; }
.row.g-sm{ --gap:12px; }
.row.g-lg{ --gap:24px; }
.row.g-xl{ --gap:clamp(24px,4vw,44px); }

/* a column with no size class spans the full width until one applies */
[class*="col-"]{ grid-column-start:auto; grid-column-end:span 12; min-width:0; }

.row.align-start  { align-items:start; }
.row.align-center { align-items:center; }
.row.align-stretch{ align-items:stretch; }
.row.justify-center{ justify-content:center; }

/* children that must fill their column, so cards in a row match height */
.col-fill > *{ height:100%; }

.col-1{ grid-column-end:span 1; }
.col-2{ grid-column-end:span 2; }
.col-3{ grid-column-end:span 3; }
.col-4{ grid-column-end:span 4; }
.col-5{ grid-column-end:span 5; }
.col-6{ grid-column-end:span 6; }
.col-7{ grid-column-end:span 7; }
.col-8{ grid-column-end:span 8; }
.col-9{ grid-column-end:span 9; }
.col-10{ grid-column-end:span 10; }
.col-11{ grid-column-end:span 11; }
.col-12{ grid-column-end:span 12; }
/* NOTE: these are ABSOLUTE starts, not Bootstrap's relative push. `.offset-1`
   means "begin at column 2", so pairing it with a preceding .col-6 sends the
   item to the next row instead of placing it after. To sit two blocks side by
   side, size the columns and let them auto-place. */
.offset-0{ grid-column-start:auto; }
.offset-1{ grid-column-start:2; }
.offset-2{ grid-column-start:3; }
.offset-3{ grid-column-start:4; }
.offset-4{ grid-column-start:5; }
.offset-5{ grid-column-start:6; }
.offset-6{ grid-column-start:7; }
.offset-7{ grid-column-start:8; }
.offset-8{ grid-column-start:9; }
.offset-9{ grid-column-start:10; }
.offset-10{ grid-column-start:11; }
.offset-11{ grid-column-start:12; }

@media (min-width:576px){
  .col-sm-1{ grid-column-end:span 1; }
  .col-sm-2{ grid-column-end:span 2; }
  .col-sm-3{ grid-column-end:span 3; }
  .col-sm-4{ grid-column-end:span 4; }
  .col-sm-5{ grid-column-end:span 5; }
  .col-sm-6{ grid-column-end:span 6; }
  .col-sm-7{ grid-column-end:span 7; }
  .col-sm-8{ grid-column-end:span 8; }
  .col-sm-9{ grid-column-end:span 9; }
  .col-sm-10{ grid-column-end:span 10; }
  .col-sm-11{ grid-column-end:span 11; }
  .col-sm-12{ grid-column-end:span 12; }
  .offset-sm-0{ grid-column-start:auto; }
  .offset-sm-1{ grid-column-start:2; }
  .offset-sm-2{ grid-column-start:3; }
  .offset-sm-3{ grid-column-start:4; }
  .offset-sm-4{ grid-column-start:5; }
  .offset-sm-5{ grid-column-start:6; }
  .offset-sm-6{ grid-column-start:7; }
  .offset-sm-7{ grid-column-start:8; }
  .offset-sm-8{ grid-column-start:9; }
  .offset-sm-9{ grid-column-start:10; }
  .offset-sm-10{ grid-column-start:11; }
  .offset-sm-11{ grid-column-start:12; }
}

@media (min-width:768px){
  .col-md-1{ grid-column-end:span 1; }
  .col-md-2{ grid-column-end:span 2; }
  .col-md-3{ grid-column-end:span 3; }
  .col-md-4{ grid-column-end:span 4; }
  .col-md-5{ grid-column-end:span 5; }
  .col-md-6{ grid-column-end:span 6; }
  .col-md-7{ grid-column-end:span 7; }
  .col-md-8{ grid-column-end:span 8; }
  .col-md-9{ grid-column-end:span 9; }
  .col-md-10{ grid-column-end:span 10; }
  .col-md-11{ grid-column-end:span 11; }
  .col-md-12{ grid-column-end:span 12; }
  .offset-md-0{ grid-column-start:auto; }
  .offset-md-1{ grid-column-start:2; }
  .offset-md-2{ grid-column-start:3; }
  .offset-md-3{ grid-column-start:4; }
  .offset-md-4{ grid-column-start:5; }
  .offset-md-5{ grid-column-start:6; }
  .offset-md-6{ grid-column-start:7; }
  .offset-md-7{ grid-column-start:8; }
  .offset-md-8{ grid-column-start:9; }
  .offset-md-9{ grid-column-start:10; }
  .offset-md-10{ grid-column-start:11; }
  .offset-md-11{ grid-column-start:12; }
}

@media (min-width:992px){
  .col-lg-1{ grid-column-end:span 1; }
  .col-lg-2{ grid-column-end:span 2; }
  .col-lg-3{ grid-column-end:span 3; }
  .col-lg-4{ grid-column-end:span 4; }
  .col-lg-5{ grid-column-end:span 5; }
  .col-lg-6{ grid-column-end:span 6; }
  .col-lg-7{ grid-column-end:span 7; }
  .col-lg-8{ grid-column-end:span 8; }
  .col-lg-9{ grid-column-end:span 9; }
  .col-lg-10{ grid-column-end:span 10; }
  .col-lg-11{ grid-column-end:span 11; }
  .col-lg-12{ grid-column-end:span 12; }
  .offset-lg-0{ grid-column-start:auto; }
  .offset-lg-1{ grid-column-start:2; }
  .offset-lg-2{ grid-column-start:3; }
  .offset-lg-3{ grid-column-start:4; }
  .offset-lg-4{ grid-column-start:5; }
  .offset-lg-5{ grid-column-start:6; }
  .offset-lg-6{ grid-column-start:7; }
  .offset-lg-7{ grid-column-start:8; }
  .offset-lg-8{ grid-column-start:9; }
  .offset-lg-9{ grid-column-start:10; }
  .offset-lg-10{ grid-column-start:11; }
  .offset-lg-11{ grid-column-start:12; }
}

@media (min-width:1200px){
  .col-xl-1{ grid-column-end:span 1; }
  .col-xl-2{ grid-column-end:span 2; }
  .col-xl-3{ grid-column-end:span 3; }
  .col-xl-4{ grid-column-end:span 4; }
  .col-xl-5{ grid-column-end:span 5; }
  .col-xl-6{ grid-column-end:span 6; }
  .col-xl-7{ grid-column-end:span 7; }
  .col-xl-8{ grid-column-end:span 8; }
  .col-xl-9{ grid-column-end:span 9; }
  .col-xl-10{ grid-column-end:span 10; }
  .col-xl-11{ grid-column-end:span 11; }
  .col-xl-12{ grid-column-end:span 12; }
  .offset-xl-0{ grid-column-start:auto; }
  .offset-xl-1{ grid-column-start:2; }
  .offset-xl-2{ grid-column-start:3; }
  .offset-xl-3{ grid-column-start:4; }
  .offset-xl-4{ grid-column-start:5; }
  .offset-xl-5{ grid-column-start:6; }
  .offset-xl-6{ grid-column-start:7; }
  .offset-xl-7{ grid-column-start:8; }
  .offset-xl-8{ grid-column-start:9; }
  .offset-xl-9{ grid-column-start:10; }
  .offset-xl-10{ grid-column-start:11; }
  .offset-xl-11{ grid-column-start:12; }
}

/* ===========================================================================
   1. TOKENS
   Palette: muted pine primary, heather accent, pastel section tints.
   Deliberately no navy/gold, no red, no saturated or party-like colour.
   =========================================================================== */
:root{
  /* Deep algae green, per the brand brief. Token names kept so existing rules
     keep working; the values are the requested algae ramp. */
  --pine-900:#0E2E24;   /* algae-900 — footer, darkest overlay */
  --pine-800:#163D30;   /* algae-800 — dark sections */
  --pine-700:#1F4D3A;   /* algae-700 — PRIMARY. One filled action per view. */
  --pine-600:#2B6349;
  --pine-500:#3C7A5E;   /* algae-500 — hover, icons */

  --heather-700:#5E5075;   /* accent, used sparingly */
  --heather-500:#7A6C8F;
  --heather-200:#E4E1EE;

  /* Light pastels */
  --sage-200:#CFE3D4;
  --sage-100:#E8F3EC;   /* mint-100 */
  --sage-050:#F2F8F4;
  --sand-100:#F1E9DA;
  --mist-100:#CFE3D4;   /* sage-200 */
  --lilac-100:#F4E6E0;  /* blush-100 — sparingly */
  --cream-50:#FAF7F0;

  --bg:#FAF7F0;        /* cream-50 */
  --surface:#FFFFFF;
  --surface-2:#F4F1EC;
  --ink:#13211B;       /* ink-900 — never pure black */
  --ink-2:#2E3D36;
  --muted:#4A5A52;     /* ink-600 */
  --line:#E0DCD4;
  --line-strong:#CFC9BE;

  --brand:var(--pine-700);
  --brand-ink:var(--pine-800);
  --on-brand:#FFFFFF;
  --accent:var(--heather-700);

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --shadow-1:0 1px 2px rgba(28,36,34,.05), 0 2px 8px rgba(28,36,34,.05);
  --shadow-2:0 2px 4px rgba(28,36,34,.05), 0 10px 26px rgba(28,36,34,.08);
  --shadow-3:0 14px 40px rgba(28,36,34,.13);

  /* Google Sans is not in the open Google Fonts catalogue; Noto Sans sits
     directly behind it so the page is correct whether or not it loads. */
  --font-display:"Google Sans", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap:1320px;
  --gutter:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:60px;
}
@media (min-width:768px){ :root{ --gutter:28px; --nav-h:66px; } }
@media (min-width:1200px){ :root{ --gutter:40px; } }
/* on a large monitor a 1120px column leaves the page looking stranded;
   widen the measure rather than stretching the type */
@media (min-width:1500px){ :root{ --wrap:1480px; --gutter:56px; } }
@media (min-width:1900px){ :root{ --wrap:1680px; --gutter:64px; } }

@media (prefers-color-scheme:dark){
  :root{
    --bg:#121817;
    --surface:#1A2221;
    --surface-2:#202A28;
    --ink:#EDF1EF;
    --ink-2:#C8D2CF;
    --muted:#9DAAA6;
    --line:#2C3835;
    --line-strong:#3B4845;

    --sage-100:#1E2A27;
    --sage-050:#1A2321;
    --sand-100:#282420;
    --mist-100:#1B2728;
    --lilac-100:#232030;
    --heather-200:#2E2940;

    --brand:#9DC4BC;
    --brand-ink:#B7D6CF;
    --on-brand:#10201D;
    --accent:#B7A8CC;

    --shadow-1:0 1px 2px rgba(0,0,0,.34);
    --shadow-2:0 2px 4px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.34);
    --shadow-3:0 14px 40px rgba(0,0,0,.45);
  }
}

/* ===========================================================================
   2. BASE
   =========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--brand-ink); text-decoration-thickness:1px; text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.14; letter-spacing:-.021em; color:var(--ink); margin:0 0 .5em; }
h1{ font-size:clamp(2rem,7.4vw,3.6rem); }
h2{ font-size:clamp(1.9rem,5.4vw,3.1rem); letter-spacing:-.025em; }
h3{ font-size:clamp(1.12rem,3.2vw,1.34rem); line-height:1.28; font-weight:700; }
p{ margin:0 0 1em; color:var(--ink-2); }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip{
  position:absolute; left:8px; top:-64px; z-index:200;
  background:var(--brand); color:var(--on-brand);
  padding:12px 18px; border-radius:var(--radius-sm); font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{ top:8px; }
.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;
}

/* ===========================================================================
   3. SCROLL PROGRESS + NAV
   =========================================================================== */
.progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--pine-600), var(--heather-500));
  z-index:90; will-change:transform;
}
@media (prefers-color-scheme:dark){ .progress{ background:linear-gradient(90deg, var(--brand), var(--accent)); } }

.nav{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){ .nav{ background:var(--bg); } }
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 4px 18px rgba(28,36,34,.06); }
.nav-inner{ display:flex; align-items:center; gap:12px; min-height:var(--nav-h); }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto; min-width:0; min-height:44px; padding-right:8px; border-radius:var(--radius-sm); }
.brand-mark{
  width:34px; height:34px; flex:none; border-radius:9px;
  overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease);
}
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand:hover .brand-mark{ transform:translateY(-1px) scale(1.04); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text b{ font-family:var(--font-display); font-weight:500; font-size:1rem; white-space:nowrap; }
.brand-text span{ font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

.nav-links{ display:none; align-items:center; gap:2px; list-style:none; }
.nav-links a{
  display:block; padding:11px 13px; border-radius:999px;
  font-size:.92rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:color .22s var(--ease), background-color .22s var(--ease);
}
.nav-links a:hover{ color:var(--brand-ink); background:var(--sage-100); }
.nav-links a.is-active{ color:var(--brand-ink); background:var(--sage-100); }
@media (min-width:1000px){ .nav-links{ display:flex; } }

/* Persistent chrome, not the page's primary action. It used to be a fourth
   solid fill competing with whichever section you were reading; outlined, the
   one filled button in view is always the one that section wants you to press. */
.nav-cta{
  display:none; padding:11px 17px; border-radius:999px;
  background:transparent; color:var(--brand-ink);
  border:1px solid var(--line-strong);
  font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:transform .2s var(--ease), border-color .2s var(--ease),
             background-color .2s var(--ease), color .2s var(--ease);
}
.nav-cta:hover{ border-color:var(--brand); background:var(--sage-100); }
@media (prefers-color-scheme:dark){ .nav-cta:hover{ background:rgba(157,196,188,.14); border-color:var(--brand); } }
@media (min-width:1000px){ .nav-cta{ display:inline-block; } }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:44px; min-width:44px; padding:0 15px 0 13px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  /* a squared control reads as a control; the pills on this page are actions */
  border-radius:var(--radius); font:inherit; font-size:.875rem; font-weight:600;
  letter-spacing:.005em; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             box-shadow .2s var(--ease), color .2s var(--ease);
}
.nav-toggle[aria-expanded="true"]{
  background:var(--brand); border-color:var(--brand); color:var(--on-brand);
  box-shadow:var(--shadow-1);
}
.nav-toggle .label{ min-width:3.4em; text-align:left; }
.nav-toggle:hover{ background:var(--surface-2); }
@media (min-width:1000px){ .nav-toggle{ display:none; } }
.burger{ width:19px; height:13px; position:relative; flex:none; }
.burger i{
  position:absolute; left:0; width:100%; height:1.5px; border-radius:1px;
  background:currentColor; transform-origin:50% 50%;
  transition:transform .4s cubic-bezier(.62,.03,.31,1),
             opacity .16s var(--ease), width .4s cubic-bezier(.62,.03,.31,1);
}
.burger i:nth-child(1){ top:0; }
.burger i:nth-child(2){ top:5.75px; }
.burger i:nth-child(3){ top:11.5px; }
/* the two outer bars travel to the middle, then cross; the centre bar retracts
   to nothing first so the three never overlap mid-animation */
[aria-expanded="true"] .burger i:nth-child(1){ transform:translateY(5.75px) rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2){ opacity:0; width:0; }
[aria-expanded="true"] .burger i:nth-child(3){ transform:translateY(-5.75px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   "You are here" bar. This is a single page, so there is no trail to walk up —
   what a reader needs is which section they are currently in, and this is where
   it matters most: on mobile, where the nav links are behind the toggle.
   Appears once you are past the hero, and hides while the menu is open.
   --------------------------------------------------------------------------- */
.crumbs{
  display:none; overflow:hidden; max-height:0;
  background:var(--surface-2); border-top:1px solid transparent;
  transition:max-height .34s var(--ease), border-color .34s var(--ease);
}
@media (max-width:999px){ .crumbs{ display:block; } }
.crumbs.is-shown{ max-height:52px; border-top-color:var(--line); }
/* while the reader is still in the home section the trail would read
   "Home > Home", so it stays out of the way until they are somewhere */
.crumbs.at-home{ max-height:0; border-top-color:transparent; }
.crumbs-inner{
  display:flex; align-items:center; gap:7px; min-height:46px;
  font-size:.78rem; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; overflow-x:auto; scrollbar-width:none;
}
.crumbs-inner::-webkit-scrollbar{ display:none; }
.crumbs a{
  color:var(--muted); text-decoration:none; flex:none;
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding-inline:2px;   /* keeps the 44px touch target */
}
.crumbs a:hover{ color:var(--brand-ink); }
.crumbs svg{ width:12px; height:12px; color:var(--line-strong); flex:none; }
.crumb-now{
  color:var(--brand-ink); background:var(--sage-100);
  padding:4px 11px; border-radius:999px; flex:none;
}
@media (orientation:landscape) and (max-height:520px){ .crumbs{ display:none; } }

.nav-drawer{
  overflow:hidden; max-height:0;
  transition:max-height .34s var(--ease), border-color .34s var(--ease);
  border-top:1px solid transparent;
}
.nav-drawer.is-open{ border-top-color:var(--line); }
.nav-drawer ul{ list-style:none; padding:8px 0 16px; }
.nav-drawer a{
  display:block; padding:13px 12px; border-radius:var(--radius-sm);
  color:var(--ink); text-decoration:none; font-weight:500;
  transition:background-color .2s var(--ease), padding-left .2s var(--ease);
}
.nav-drawer a:hover, .nav-drawer a.is-active{ background:var(--sage-100); padding-left:18px; color:var(--brand-ink); }
@media (min-width:1000px){ .nav-drawer{ display:none; } }

/* ===========================================================================
   4. SECTION FURNITURE
   =========================================================================== */
section{ padding-block:clamp(80px,12vw,160px); position:relative; }

/* ---------------------------------------------------------------------------
   DARK SECTIONS
   Every section was a pale tint, so the page ran as one continuous wash. A dark
   band gives the eye somewhere to rest and makes the light sections read as
   deliberate rather than default.
   --------------------------------------------------------------------------- */
.section-dark{
  background:
    radial-gradient(900px 600px at 82% 10%, rgba(60,122,94,.30), transparent 62%),
    linear-gradient(160deg, var(--pine-900) 0%, var(--pine-800) 58%, #1B4636 100%);
  color:#E9F1EC;
}
.section-dark h1,.section-dark h2,.section-dark h3{ color:#fff; }
.section-dark p,.section-dark .lede{ color:#C3D6CC; }
.section-dark .eyebrow{ color:#8FD3B4; }
.section-dark .card{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14); }
.section-dark .card h3{ color:#fff; }
.section-dark .card p{ color:#C3D6CC; }
.section-dark .card:hover{ border-color:rgba(255,255,255,.3); }
.section-dark .ico{ background:rgba(143,211,180,.14); color:#9BDCC0; }
.section-dark .tells{ border-top-color:rgba(255,255,255,.18); color:#B4CCC2; }
.section-dark .tells b{ color:#fff; }
.section-dark .plain{ border-top-color:#8FD3B4; }
.section-dark::before{ display:none; }
.tint-sage{ background:var(--sage-050); }
/* Two tinted bands of the same colour in a row read as one block, so the two
   full section paddings between them become 317px of visible nothing. Halve
   the join; the sections still breathe, they just stop yawning. */
.tint-sage + .tint-sage{ padding-top:clamp(40px,5vw,72px); }
.tint-sand{ background:var(--sand-100); }
.tint-mist{ background:var(--mist-100); }
.tint-lilac{ background:var(--lilac-100); }
/* the one plain-white band. It follows the dark marquee strip, so the jump from
   pine to white is the hardest cut on the page — which is the point. */
.tint-white{ background:var(--surface); }

.section-no{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(.86rem,1.5vw,.98rem); letter-spacing:.17em; text-transform:uppercase;
  color:var(--pine-600); margin-bottom:18px;
}
.section-no::after{
  content:""; flex:1; max-width:120px; height:1px;
  background:linear-gradient(90deg,var(--pine-600),var(--heather-700) 60%, transparent);
}
.section-dark .section-no::after{
  background:linear-gradient(90deg,#9BDCC0,var(--lilac-100,#C6B7DD) 60%, transparent);
}
.section-dark .section-no{ color:#8FD3B4; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 16px;
}
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:currentColor; }
.section-head{ max-width:58ch; margin-bottom:clamp(28px,4vw,44px); }
.section-head h2 + p, .section-head h2 + .rule + p{ margin-top:18px; }
.section-head h2::after{
  content:""; display:block; width:clamp(90px,16vw,170px); height:4px;
  border-radius:4px; margin:20px 0 0;
  background:linear-gradient(90deg,var(--pine-700),var(--teal,#215049) 30%, var(--heather-700) 70%, transparent);
  transform:scaleX(0); transform-origin:0 50%;
}
.has-motion .section-head h2.is-in::after,
html:not(.has-motion) .section-head h2::after{
  transform:scaleX(1); transition:transform .9s var(--ease-out) .25s;
}
.section-dark .section-head h2::after{
  background:linear-gradient(90deg,#9BDCC0,#9FC6D9 40%, #C6B7DD 75%, transparent);
}
.section-head p{ font-size:1.05rem; color:var(--muted); }
.lede{ font-size:clamp(1.05rem,2.6vw,1.2rem); color:var(--ink-2); max-width:62ch; }

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:none;                 /* border-led, not a floating shadowed tile */
  transition:transform .34s var(--ease), box-shadow .34s var(--ease),
             border-color .34s var(--ease);
}

/* A card lifts on hover. Nothing else: an earlier version fanned two ghost
   layers out from behind it, which read as stray lines rather than a stack. */
.card:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow-2); }
[class*="col-"]{ isolation:isolate; }
.card h3{ margin-bottom:.35em; }
.card p{ font-size:.97rem; }


.ico{
  width:42px; height:42px; border-radius:11px; flex:none;
  display:grid; place-items:center; margin-bottom:16px;
  background:var(--sage-100); color:var(--brand-ink);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
svg:not([fill]){
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico svg{ width:21px; height:21px; }
/* A tool responding, not a decoration spinning: the tile lifts and warms and
   the stroke thickens. An icon that rotates on hover means nothing. */
.card:hover .ico{ transform:translateY(-2px); background:var(--sage-200); }
.card:hover .ico svg{ stroke-width:2.1; }

/* ---------------------------------------------------------------------------
   ICONS DRAW THEMSELVES IN
   Every shape in the sprite carries pathLength="1", so one dash length fits
   every icon and they all draw at the same rate regardless of real perimeter.
   `stroke-dasharray` is an inherited SVG property, so setting it on the <svg>
   reaches the referenced shapes inside the <use> shadow tree.

   Scoped to icons inside a .reveal or .card — the only things that reliably
   receive .is-in. An icon anywhere else is never hidden waiting for a class
   that will not arrive.

   Gated on `html.js-anim`, not `.has-motion`, because js-anim already carries
   the reveal system's own contract: main.js strips it after 1.5s if nothing
   has revealed. So a broken observer un-hides the icons instead of leaving
   blank tiles on the page.
   --------------------------------------------------------------------------- */
.js-anim .reveal .ico svg,
.js-anim .card .ico svg,
.js-anim .reveal .tick svg,
.js-anim .card .tick svg{
  /* dasharray "1 2", not "1": with a 1/1 pattern the period is 2, so any offset
     past 1 wraps the NEXT dash back into view as a stray mark. A gap of 2 gives
     the dash somewhere to go. The 1.05 then parks it just clear of the path
     start, so the round linecap has nothing to paint either. */
  stroke-dasharray:1 2; stroke-dashoffset:1.05;
}
.js-anim .reveal.is-in .ico svg,
.js-anim .card.is-in .ico svg,
.js-anim .is-in .ico svg,
.js-anim .reveal.is-in .tick svg,
.js-anim .card.is-in .tick svg,
.js-anim .is-in .tick svg{
  animation:icon-draw .85s var(--ease-out) forwards;
  animation-delay:calc(140ms + var(--d, 0ms));
}
@keyframes icon-draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .ico svg, .tick svg{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
}
.ico.alt{ background:var(--heather-200); color:var(--accent); }

/* ---------------------------------------------------------------------------
   Three short assurances do not need three more bordered tiles. Rules between
   them do the same job with far less furniture, which is the difference
   between a designed page and a grid of boxes.
   --------------------------------------------------------------------------- */
.plain{
  background:none; border:0; border-radius:0; padding:26px 0 0; box-shadow:none;
}
.plain::before, .plain::after{ display:none; }
.plain:hover{ transform:none; box-shadow:none; }
.plain{ border-top:2px solid var(--ink); }
.plain .ico{ display:none; }
.plain h3{ font-size:1.12rem; margin-bottom:8px; }
.plain p{ font-size:.97rem; }
@media (max-width:767px){
  .plain{ padding-top:20px; }
  .plain:first-child{ border-top-width:2px; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 22px; border-radius:999px;
  font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer;
  border:1px solid transparent; font-family:inherit;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-1); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); background:var(--pine-800); }
@media (prefers-color-scheme:dark){ .btn-primary:hover{ background:var(--brand-ink); } }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:var(--brand); color:var(--brand-ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------------------------------------------------------------------------
   Home-page section index. These are whole-card links, so the card itself is
   the target rather than a small "read more" at the bottom of it.
   --------------------------------------------------------------------------- */
.nav-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.nav-card h3{ color:var(--ink); }
.nav-card p{ flex:1; }
.nav-card .go{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:.88rem; font-weight:600; color:var(--brand-ink);
}
.nav-card .go svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.nav-card:hover .go svg{ transform:translateX(4px); }

/* ===========================================================================
   5. HERO — full-bleed, left-aligned, masked line reveal
   =========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-block:clamp(104px,15vh,150px) clamp(70px,9vh,96px);
  overflow:hidden; isolation:isolate; color:#EAF2ED;
}
@supports not (min-height:100svh){ .hero{ min-height:100vh; } }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 55%;
  transform:scale(1.14); transform-origin:60% 50%;
}
html.js-anim .hero-bg img{ animation:kenburns 18s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.14); } to{ transform:scale(1); } }
.hero::before{                       /* the algae wash */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(14,46,36,.86) 0%, rgba(14,46,36,.58) 46%, rgba(14,46,36,.30) 100%),
    linear-gradient(180deg, rgba(14,46,36,.30) 0%, rgba(14,46,36,.74) 100%);
}
.hero-inner{ position:relative; width:100%; }
.hero-copy{ max-width:min(860px, 92%); }

.hero-eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 22px;
  font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#9BDCC0;
}
.hero-eyebrow .rule{
  display:block; width:46px; height:1px; background:currentColor; flex:none;
  transform-origin:0 50%;
}
html.js-anim .hero-eyebrow .rule{ transform:scaleX(0); }
html.js-anim .is-lit .hero-eyebrow .rule{ transform:scaleX(1); transition:transform .9s var(--ease-out) .1s; }

.hero-h{
  font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.04; letter-spacing:-.022em;
  font-weight:700; color:#fff; margin:0 0 20px;
}
.hero-h em{ font-style:normal; color:#9BDCC0; }
/* each line rides inside its own mask so words rise from behind a hard edge */
.hero-h .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-h .line > span{ display:block; }
html.js-anim .hero-h .line > span{ transform:translateY(112%); }
html.js-anim .is-lit .hero-h .line > span{
  transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
}
html.js-anim .is-lit .hero-h .line:nth-child(2) > span{ transition-delay:.09s; }
html.js-anim .is-lit .hero-h .line:nth-child(3) > span{ transition-delay:.18s; }

.hero-rotate{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 18px; font-size:clamp(1rem,2vw,1.2rem); color:#C3D6CC;
}
.rot-label{ opacity:.85; }
.rot{ position:relative; display:inline-block; height:1.5em; overflow:hidden; vertical-align:bottom; }
.rot b{
  display:block; height:1.5em; line-height:1.5em; color:#fff; font-weight:600;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  transform:translateY(calc(var(--r,0) * -1.5em));
}
.hero-sub{ font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.7; color:#C7D9D0; max-width:54ch; margin:0 0 30px; }
.hero .btn-row{ margin:0; }
.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline:hover{ background:rgba(255,255,255,.1); border-color:#fff; transform:translateY(-2px); }

/* glass stats bar along the hero's lower edge */
.hero-stats{
  list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin:clamp(34px,5vw,56px) 0 0; overflow:hidden;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
@media (min-width:768px){ .hero-stats{ grid-template-columns:repeat(4,1fr); } }
.hero-stats li{ background:rgba(14,46,36,.34); padding:18px 20px; }
.hero-stats b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1; color:#fff; margin-bottom:5px;
}
.hero-stats span{ font-size:.78rem; letter-spacing:.06em; color:#AFC8BD; }

.hero-scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:9px;
  min-height:44px; text-decoration:none;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:#9BDCC0;
}
.hero-scroll i{ display:block; width:1px; height:34px; background:linear-gradient(to bottom,#9BDCC0,transparent); }
@media (prefers-reduced-motion:no-preference){
  .hero-scroll i{ animation:scrollcue 2.1s ease-in-out infinite; transform-origin:50% 0; }
  @keyframes scrollcue{ 0%,100%{ transform:scaleY(.35); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }
}
@media (max-width:767px){ .hero-scroll{ display:none; } }
@media (orientation:landscape) and (max-height:520px){
  .hero{ min-height:0; padding-block:74px 30px; }
  .hero-stats{ display:none; }
}

/* ===========================================================================
   6. STAT TILES + PULL QUOTE
   =========================================================================== */
.stats{ margin-top:clamp(26px,4vw,38px); }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; box-shadow:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stat:hover{ transform:translateY(-2px); border-color:var(--line-strong); box-shadow:var(--shadow-1); }
.stat b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,5.4vw,2.5rem); line-height:1.02; letter-spacing:-.025em;
  color:var(--brand-ink); margin-bottom:6px;
}
.stat span{ font-size:.86rem; color:var(--muted); line-height:1.4; display:block; }

.quote{
  margin:clamp(28px,4vw,40px) 0 0;
  padding:26px 24px 26px 28px;
  border-left:3px solid var(--accent);
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.quote p{
  font-family:var(--font-display); font-size:clamp(1.12rem,3.2vw,1.42rem);
  line-height:1.42; color:var(--ink); margin:0;
}

/* ===========================================================================
   7. CHALLENGE CARDS
   =========================================================================== */
.challenge{ display:flex; flex-direction:column; }
.challenge .tells{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-strong);
  font-size:.89rem; color:var(--muted); font-style:italic;
}
.challenge .tells b{ font-style:normal; font-weight:600; color:var(--ink-2); }
/* On the dark Challenges page this rule and `.section-dark .tells b` are both
   (0,2,1); this one comes later, so "What it tells us:" was rendering in ink-2
   on a dark card — 1.10:1, invisible. Beat it on specificity. */
.section-dark .challenge .tells b{ color:#fff; }

/* ===========================================================================
   8. PLAN GRID + TIMELINE
   =========================================================================== */
.plan-card{ position:relative; padding-top:26px; }
.plan-card .num{
  position:absolute; top:18px; right:20px;
  font-family:var(--font-display); font-size:1.5rem; color:var(--line-strong);
  line-height:1; transition:color .3s var(--ease);
}
.plan-card:hover .num{ color:var(--brand); }

/* ---------------------------------------------------------------------------
   THE NAME, TAKEN APART
   Fills the half of the "what the name carries" band that the heading leaves
   empty. Each part's rule draws across as the block reveals, one after another.

   Fail visible: the rule sits at scaleX(1) by default and is only collapsed
   under html.js-anim, which main.js strips after 1.5s if no reveal has fired.
   --------------------------------------------------------------------------- */
.nk{ list-style:none; display:grid; gap:0; margin:0; padding:0; }  /* ol has a 40px inline-start pad */
.nk li{
  position:relative; display:flex; align-items:baseline;
  gap:clamp(14px,2.4vw,26px); padding:clamp(14px,2vw,20px) 0;
}
.nk li::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--line-strong);
  transform:scaleX(1); transform-origin:0 50%;
}
/* Specificity, not source order: .js-anim .reveal (0,3,1) loses outright to
   .js-anim .reveal.is-in (0,4,1). The :not(.is-in) form this replaced tied at
   (0,4,1) and relied on coming first, which is a thinner guarantee. */
.js-anim .reveal .nk li::before{ transform:scaleX(0); }
.js-anim .reveal.is-in .nk li::before{
  transform:scaleX(1);
  transition:transform .85s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 170ms);
}
.nk-word{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.35rem,3vw,1.9rem); color:var(--ink);
  min-width:6.2em; letter-spacing:-.01em;
}
.nk-gloss{ font-size:clamp(.95rem,2vw,1.05rem); color:var(--muted); }

/* the sum line reads as the answer, not a third entry */
.nk .nk-sum{ padding-top:clamp(18px,2.4vw,24px); }
.nk .nk-sum::before{ height:2px; background:var(--brand); }
.nk-sum .nk-word{ color:var(--brand-ink); }
.nk-sum .nk-gloss{ color:var(--ink-2); font-weight:600; }

.nk-note{
  margin-top:clamp(16px,2.4vw,22px);
  font-size:.92rem; color:var(--muted); max-width:34ch;
}
@media (max-width:575px){ .nk-word{ min-width:5em; } }

.timeline{ margin-top:clamp(34px,5vw,52px); }
.timeline h3{ margin-bottom:6px; }
.timeline-sub{ color:var(--muted); font-size:.95rem; margin-bottom:26px; }
.track{ list-style:none; display:grid; gap:0; position:relative; }
.track li{
  position:relative; padding:0 0 22px 30px;
  border-left:2px solid var(--line-strong);
}
.track li:last-child{ padding-bottom:0; border-left-color:transparent; }
.track li::before{
  content:""; position:absolute; left:-7px; top:5px;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--brand);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.track li:hover::before{ background:var(--brand); transform:scale(1.25); }
.track .day{
  display:block; font-size:.74rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent); margin-bottom:2px;
}
.track .what{ font-size:.97rem; color:var(--ink-2); }
@media (min-width:1000px){
  /* Eight milestones over two rows of four. The row gap was 0, so the second
     row's rule and dot landed 3px under the first row's text — and because the
     row is as tall as its longest entry, the short ones sat in space while the
     long ones looked jammed. The gap is the fix; the dot straddles the rule at
     top:-7px and needs clear air above it. */
  .track{ grid-template-columns:repeat(4,1fr); gap:46px 18px; }
  .track li{ padding:26px 12px 0 0; border-left:0; border-top:2px solid var(--line-strong); }
  .track li:last-child{ padding-bottom:0; border-left:0; }
  .track li::before{ left:0; top:-7px; }
}

/* ===========================================================================
   9. TEAM
   =========================================================================== */

.member{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:none; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.member:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
.member-photo{
  aspect-ratio:4/5; background:var(--surface-2); position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.member-photo img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 16%; transition:transform .5s var(--ease); }
.member:hover .member-photo img{ transform:scale(1.03); }
.avatar-fallback{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--sage-100), var(--heather-200));
  color:var(--pine-800); font-family:var(--font-display);
  font-size:clamp(2rem,7vw,2.6rem); letter-spacing:.02em;
}
@media (prefers-color-scheme:dark){ .avatar-fallback{ color:var(--brand-ink); } }
.member-body{ padding:18px; display:flex; flex-direction:column; gap:4px; flex:1; }
.member-name{ font-family:var(--font-display); font-size:1.12rem; font-weight:500; line-height:1.25; }
.member-meta{ font-size:.84rem; color:var(--muted); }
.member-role{
  display:inline-block; align-self:flex-start; margin-top:6px;
  font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--sage-100); color:var(--brand-ink);
  padding:4px 10px; border-radius:999px;
}
.member-prof{ font-size:.9rem; color:var(--ink-2); margin-top:8px; }
/* professions run to different lengths, so let that line take the slack and
   the buttons line up across the row instead of stepping */
.member-prof{ flex:1; }
.member-actions{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.bio-toggle{
  flex:1; min-height:44px; padding:10px 14px;
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-2);
  border-radius:999px; font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bio-toggle:hover{ background:var(--sage-100); color:var(--brand-ink); border-color:var(--brand); }
.bio-toggle .chev{ width:14px; height:14px; transition:transform .3s var(--ease); }
.bio-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.li-link{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center; color:var(--muted);
  border:1px solid var(--line-strong);
  transition:color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.li-link:hover{ color:var(--brand-ink); border-color:var(--brand); background:var(--sage-100); }
.li-link svg{ width:17px; height:17px; }
.member-bio{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .34s var(--ease), opacity .28s var(--ease);
}
.member-bio.is-open{ opacity:1; }
.member-bio p{
  font-size:.9rem; color:var(--muted); margin:14px 0 0;
  padding-top:14px; border-top:1px dashed var(--line-strong);
}
.placeholder-note{
  margin-top:18px; font-size:.85rem; color:var(--muted);
  background:var(--surface-2); border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm); padding:12px 14px;
}

/* ===========================================================================
   10. CTA / CONTACT / FOOTER
   =========================================================================== */
.steps{ list-style:none; counter-reset:step; display:grid; gap:14px; }
.steps li{
  counter-increment:step; position:relative; padding-left:48px;
  font-size:.99rem; color:var(--ink-2);
}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-2px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:var(--on-brand);
  font-family:var(--font-display); font-size:.96rem;
}
.steps b{ color:var(--ink); }
.contact-card ul{ list-style:none; display:grid; gap:4px; margin-top:6px; }
.contact-card a, .contact-card .placeholder-val{
  display:flex; align-items:center; gap:12px; min-height:48px;
  padding:9px 12px; margin-inline:-12px; border-radius:var(--radius-sm);
  text-decoration:none; color:var(--ink); font-weight:500; font-size:.96rem;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.contact-card a:hover{ background:var(--sage-100); transform:translateX(3px); }
.contact-card svg{ width:19px; height:19px; flex:none; color:var(--brand); }
.contact-card small{ display:block; font-size:.78rem; color:var(--muted); font-weight:400; }

.footer{
  background:var(--pine-900); color:#D9E3E0;
  padding-block:clamp(40px,6vw,64px) clamp(24px,3vw,32px);
}
@media (prefers-color-scheme:dark){ .footer{ background:#0E1413; border-top:1px solid var(--line); } }

.footer-top{
  padding-bottom:clamp(26px,4vw,38px);
  border-bottom:1px solid rgba(255,255,255,.12);   /* the rule spans the footer,
                                                      not just one column */
}
.footer h2{
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#8FB0A8; margin:0 0 14px;
}
.footer ul{ list-style:none; display:grid; gap:2px; }
.footer li a{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding-block:4px;   /* touch target, not just a link */
  color:#CBD9D5; text-decoration:none; font-size:.92rem;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.footer li a:hover{ color:#fff; transform:translateX(3px); }
.footer li a svg{ width:16px; height:16px; flex:none; color:#7FA79D; }
.footer p{ color:#A8BDB7; font-size:.9rem; max-width:44ch; }

.footer-logo{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  color:#fff; margin-bottom:14px; min-height:44px;
}
.footer-logo .brand-mark{ width:36px; height:36px; }
.footer-logo b{ display:block; font-family:var(--font-display); font-size:1.05rem; font-weight:700; }
.footer-logo span span{
  display:block; font-size:.67rem; letter-spacing:.12em;
  text-transform:uppercase; color:#8FB0A8; font-weight:600;
}
.footer-date{ margin-top:12px; font-size:.88rem; color:#CBD9D5; }
.footer-date strong{ color:#fff; }
.footer-contact a{ word-break:break-word; }

/* `.footer p` sets max-width:44ch at specificity (0,1,1). The disclaimer is a
   <p>, so it lost its own 88ch at (0,1,0) and rendered at the brand column's
   measure — with its border-top stopping a third of the way across the footer.
   Match the specificity, and let .footer-top carry the full-width rule. */
.footer .disclaimer{
  font-size:.82rem; color:#93A9A4; max-width:92ch; line-height:1.55;
  padding-top:clamp(20px,3vw,26px); border-top:0;
}
.footer-bottom{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:4px 20px; align-items:center; justify-content:space-between;
  font-size:.82rem; color:#93A9A4;
}
.footer-bottom span{ display:inline-flex; align-items:center; min-height:44px; }
.footer-bottom a{
  display:inline-flex; align-items:center; min-height:44px; padding-inline:2px;
  color:#CBD9D5; border-radius:var(--radius-sm); transition:color .2s var(--ease);
}
.footer-bottom a:hover{ color:#fff; }

/* ===========================================================================
   10b. TENANTS + FORM
   =========================================================================== */

.tenant-points{ list-style:none; display:grid; gap:14px; margin-top:22px; }
.tenant-points li{ display:flex; gap:12px; align-items:flex-start; font-size:.97rem; color:var(--ink-2); }
.tenant-points .tick{
  width:26px; height:26px; flex:none; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  background:var(--sage-100); color:var(--brand-ink);
}
.tenant-points .tick svg{ width:14px; height:14px; }

/* ---------------------------------------------------------------------------
   The form runs to ~1300px while the intro beside it is ~550px, which left two
   thirds of the left column as empty sand. Pin the intro so it travels with the
   form instead. `overflow:hidden` on any ancestor would silently kill this, so
   the section textures use `overflow:clip`, which does not create a scrollport.
   --------------------------------------------------------------------------- */
@media (min-width:992px){
  .tenant-aside{ position:sticky; top:calc(var(--nav-h) + 34px); align-self:start; }
}
@media (prefers-reduced-motion:reduce){ .tenant-aside{ position:static; } }

.form-card{ padding:22px; }
@media (min-width:600px){ .form-card{ padding:26px; } }
.form-card > h3{ margin-bottom:.2em; }
.form-intro{ font-size:.93rem; color:var(--muted); margin-bottom:18px; }

fieldset{ border:0; padding:0; margin:0 0 28px; }
fieldset:last-of-type{ margin-bottom:14px; }
/* the group labels were bare text butted against the field above them. A rule
   under each one turns them into headings the eye can use to skim the form. */
legend{
  width:100%; padding:0 0 9px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
  font-size:.72rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent);
}
.field-row{ display:grid; gap:12px; margin-bottom:12px; }
@media (min-width:520px){ .field-row.two{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.86rem; font-weight:600; color:var(--ink); }
.field label .opt{ font-weight:400; color:var(--muted); }
.field .hint{ font-size:.78rem; color:var(--muted); }
.field input, .field textarea, .field select{
  width:100%; min-height:48px; padding:12px 14px;
  font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); appearance:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ min-height:88px; resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); opacity:.75; }
.field input:hover, .field textarea:hover{ border-color:var(--pine-500); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  background:var(--surface);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .field input:focus, .field textarea:focus{ box-shadow:0 0 0 3px var(--sage-100); }
}
.field input:invalid:not(:placeholder-shown){ border-color:var(--heather-500); }

/* inline validation — shown on blur, never while someone is still typing */
.field.has-error input, .field.has-error textarea{
  border-color:var(--heather-700); background:color-mix(in srgb, var(--heather-200) 34%, var(--bg));
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .field.has-error input, .field.has-error textarea{ background:var(--heather-200); }
}
.field-error{
  display:none; gap:6px; align-items:flex-start;
  font-size:.79rem; font-weight:500; color:var(--heather-700); line-height:1.4;
}
.field.has-error .field-error{ display:flex; }
.field-error svg{ width:13px; height:13px; flex:none; margin-top:2px; }
@media (prefers-color-scheme:dark){ .field-error{ color:var(--accent); } }
.consent.has-error{ color:var(--heather-700); }
.consent.has-error input{ outline:2px solid var(--heather-700); outline-offset:2px; }

/* the submit button while the form is in flight, and any disabled control */
.btn[disabled], .btn[aria-busy="true"]{ cursor:not-allowed; opacity:.72; }
.btn[disabled]:hover, .btn[aria-busy="true"]:hover{ transform:none; box-shadow:var(--shadow-1); }
.btn .spinner{
  width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite; display:none;
}
.btn[aria-busy="true"] .spinner{ display:block; }
.btn[aria-busy="true"] svg{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .btn .spinner{ animation-duration:1.8s; } }

/* team grid with nothing in it yet */
.team-empty{
  grid-column:1 / -1; text-align:center; padding:34px 20px;
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  color:var(--muted); font-size:.95rem; background:var(--surface);
}

.choices{ display:flex; flex-wrap:wrap; gap:8px; }
.choice{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:9px 14px;
  border:1px solid var(--line-strong); border-radius:999px;
  font-size:.88rem; color:var(--ink-2); cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.choice:hover{ background:var(--sage-100); border-color:var(--brand); color:var(--brand-ink); }
.choice input{ accent-color:var(--brand); width:16px; height:16px; margin:0; flex:none; }
.choice:has(input:checked){ background:var(--sage-100); border-color:var(--brand); color:var(--brand-ink); font-weight:600; }

.consent{
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 0; font-size:.87rem; color:var(--ink-2); cursor:pointer;
}
.consent input{ accent-color:var(--brand); width:18px; height:18px; margin:3px 0 0; flex:none; }
.form-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:6px; }
.form-privacy{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-strong);
  font-size:.8rem; color:var(--muted);
}
.form-status{
  margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm);
  font-size:.89rem; display:none;
}
.form-status.is-error{ display:block; background:var(--heather-200); color:var(--heather-700); }
.form-status.is-ok{ display:block; background:var(--sage-100); color:var(--brand-ink); }
@media (prefers-color-scheme:dark){
  .form-status.is-error{ color:var(--accent); }
  .form-status.is-ok{ color:var(--brand-ink); }
}
.form-done{ display:none; text-align:center; padding:18px 4px; }
.form-done.is-shown{ display:block; }
.form-done .tick-big{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; background:var(--sage-100); color:var(--brand-ink);
}
.form-done .tick-big svg{ width:26px; height:26px; }
.form-sink{ display:none; }

/* ===========================================================================
   11. REVEAL ANIMATION
   =========================================================================== */
.js-anim .reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:var(--d,0ms);
}
.no-js .reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .card:hover,.stat:hover,.member:hover,.btn:hover{ transform:none; }
}

/* ---------------------------------------------------------------------------
   .plain inside a dark section
   `.plain { background:none }` is specificity (0,1,0); `.section-dark .card`
   is (0,2,0) and was winning, so these kept a card background the text did not
   fill — three uneven boxes instead of three ruled columns. Match the
   specificity and strip the card treatment properly.
   --------------------------------------------------------------------------- */
.section-dark .card.plain,
.section-dark .plain{
  background:none; border:0; box-shadow:none;
  border-top:2px solid #9BDCC0; border-radius:0;
  padding:26px 0 0;
}
.section-dark .card.plain::before,
.section-dark .card.plain::after,
.section-dark .plain::before,
.section-dark .plain::after{ display:none; content:none; }
.section-dark .card.plain:hover{ transform:none; box-shadow:none; border-top-color:#C8ECDC; }
.section-dark .plain h3{ color:#fff; }
.section-dark .plain p{ color:#C3D6CC; }

/* the three columns should end level even when one runs longer */
.row.col-fill > .plain{ display:flex; flex-direction:column; }
.row.col-fill > .plain p{ flex:1; }

/* ---------------------------------------------------------------------------
   MINIMAL FOOTER
   Carried by every page except the last. Keeps the disclaimer visible on a
   deep link without breaking the sense of one continuous document.
   --------------------------------------------------------------------------- */
.footer-min{
  background:var(--pine-900); color:#93A9A4;
  padding-block:22px; border-top:1px solid rgba(255,255,255,.08);
}
@media (prefers-color-scheme:dark){ .footer-min{ background:#0E1413; } }
.footer-min p{
  margin:0; font-size:.78rem; line-height:1.6; color:#8CA39D; max-width:88ch;
}
.footer-min strong{ color:#BFD3CA; font-weight:600; }

/* ---------------------------------------------------------------------------
   DOCUMENT CARD — the manifesto, with its real first page as the thumbnail
   --------------------------------------------------------------------------- */
.doc{
  display:grid; gap:clamp(22px,4vw,44px); align-items:center;
  margin-top:clamp(34px,5vw,54px);
  padding:clamp(24px,4vw,40px);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:
    radial-gradient(680px 380px at 88% 8%, rgba(60,122,94,.10), transparent 62%),
    var(--surface);
}
@media (min-width:760px){ .doc{ grid-template-columns:clamp(190px,24vw,260px) 1fr; } }

.doc-thumb{
  position:relative; display:block; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:706/1000; max-width:260px;
  border:1px solid var(--line-strong);
  box-shadow:0 18px 40px -18px rgba(14,46,36,.45);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.doc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.doc-thumb::after{           /* a page edge, so it reads as a document */
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:var(--radius);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.22), inset -1px 0 0 rgba(14,46,36,.10);
}
.doc-thumb:hover{ transform:translateY(-4px) rotate(-.6deg); box-shadow:0 26px 54px -18px rgba(14,46,36,.55); }
/* the affordance sits ON the cover, in glass, so the page is the target and
   the button is not a second thing competing beside it */
.doc-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,46,36,.10) 0%, rgba(14,46,36,.48) 100%);
  opacity:.55; transition:opacity .4s var(--ease);
}
.doc-thumb:hover .doc-scrim, .doc-thumb:focus-visible .doc-scrim{ opacity:1; }

.doc-open{
  position:absolute; left:50%; bottom:16px; z-index:2;
  transform:translateX(-50%) translateY(6px);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:11px 18px; border-radius:999px; white-space:nowrap;
  font-size:.86rem; font-weight:700; letter-spacing:.01em; color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 8px 26px -10px rgba(0,0,0,.55);
  opacity:.94;
  transition:opacity .3s var(--ease), transform .35s var(--ease),
             background-color .3s var(--ease), border-color .3s var(--ease);
}
/* if backdrop-filter is unavailable the glass would read as a faint smudge,
   so fall back to something solid enough to stay legible */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .doc-open{ background:rgba(14,46,36,.72); border-color:rgba(255,255,255,.5); }
}
.doc-open svg{ width:16px; height:16px; }
.doc-thumb:hover .doc-open, .doc-thumb:focus-visible .doc-open{
  opacity:1; transform:translateX(-50%) translateY(0);
  background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.7);
}
@media (max-width:420px){ .doc-open{ font-size:.8rem; padding:11px 15px; } }

.doc-kicker{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--pine-600); margin-bottom:10px;
}
.doc-body h3{ font-size:clamp(1.3rem,3vw,1.75rem); margin-bottom:10px; }
.doc-body p{ font-size:1rem; color:var(--ink-2); max-width:52ch; margin-bottom:18px; }
.doc-facts{
  display:flex; flex-wrap:wrap; gap:26px; list-style:none; margin:0 0 22px;
  padding-top:16px; border-top:1px solid var(--line);
}
.doc-facts b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; line-height:1; color:var(--brand-ink); letter-spacing:-.02em;
}
.doc-facts span{ font-size:.78rem; color:var(--muted); }

/* ---------------------------------------------------------------------------
   NEXT-UP  —  the sequential reading path
   Reaching the bottom does nothing; the footer stays reachable. Continuing to
   scroll past it fills the bar and advances. Intent, not accident.
   --------------------------------------------------------------------------- */
/* it now follows the footer, so it carries the footer's ground */
.nextup{
  padding-block:clamp(34px,5vw,54px) clamp(44px,6vw,70px);
  background:var(--pine-900);
  border-top:1px solid rgba(255,255,255,.10);
}
@media (prefers-color-scheme:dark){ .nextup{ background:#0E1413; } }
.nextup-card{
  display:grid; gap:18px; align-items:center;
  grid-template-columns:1fr auto;
  padding:clamp(24px,4vw,38px);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg);
  background:
    radial-gradient(760px 420px at 88% 10%, rgba(60,122,94,.30), transparent 62%),
    rgba(255,255,255,.055);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nextup-card:hover{ border-color:rgba(155,220,192,.55); transform:translateY(-3px); }
.nextup-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--pine-700),var(--pine-500) 45%, var(--heather-700));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease-out);
}
.nextup-card:hover::before{ transform:scaleX(1); }
.nextup-meta{ grid-column:1/-1; display:flex; align-items:center; gap:14px; }
.nextup-step{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#8FB0A8;
}
.nextup-label{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#9BDCC0; padding-left:14px; border-left:1px solid rgba(255,255,255,.2);
}
.nextup-title{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,4vw,2.3rem); letter-spacing:-.022em; color:#fff;
  line-height:1.1; margin-bottom:8px;
}
.nextup-desc{ display:block; font-size:1rem; color:#BFD3CA; max-width:46ch; }
.nextup-go{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#9BDCC0; color:#0E2E24; flex:none;
  transition:transform .35s var(--ease);
}
.nextup-go svg{ width:22px; height:22px; }
.nextup-card:hover .nextup-go{ transform:translateX(5px); }

/* the countdown affordance — on screen the whole time it runs */
.nextup-hint{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:18px 0 0; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:#A9C2B8;
  opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.nextup-hint.is-armed{ opacity:1; transform:none; }
.nextup-hint.is-off{ opacity:1; transform:none; color:var(--muted); }
.nextup-hint.is-off .nextup-bar, .nextup-hint.is-off .nextup-stay{ display:none; }
.nextup-bar{
  display:block; width:110px; height:4px; border-radius:4px;
  background:rgba(255,255,255,.22); overflow:hidden; flex:none;
}
.nextup-bar i{
  display:block; height:100%; width:100%; border-radius:4px;
  background:linear-gradient(90deg,#9BDCC0,#C6B7DD);
  transform:scaleX(0); transform-origin:0 50%;
}
.nextup-stay{
  min-height:44px; padding:0 14px; margin-left:auto;
  background:none; border:1px solid rgba(255,255,255,.3); border-radius:999px;
  font:inherit; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:#D3E2DB; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.nextup-stay:hover{ border-color:#9BDCC0; color:#fff; background:rgba(155,220,192,.14); }

@media (max-width:575px){
  .nextup-card{ grid-template-columns:1fr; }
  .nextup-go{ width:48px; height:48px; justify-self:start; }
}

/* ---------------------------------------------------------------------------
   PAGE TRANSITION
   A real navigation flashes white between documents. A veil in the page colour
   fades in before leaving and out on arrival, so the two loads read as one
   movement. Only opacity and transform animate, so it stays on the compositor.
   --------------------------------------------------------------------------- */
html::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  background:var(--bg); opacity:0;
  transition:opacity .42s cubic-bezier(.4,0,.2,1);
}
html.page-leaving::after{ opacity:1; }
html.page-leaving{ pointer-events:none; }

html.page-leaving main,
html.page-leaving .footer,
html.page-leaving .footer-min,
html.page-leaving .nextup{
  opacity:0; transform:translateY(-46px);
  transition:opacity .34s cubic-bezier(.4,0,1,1), transform .44s cubic-bezier(.55,0,1,.45);
}
/* Not gated behind .has-motion: the stylesheet is render-blocking, so this
   starts on the first painted frame. Gated on a JS-added class it would begin
   after the page was already visible, which reads as a stutter. */
@media (prefers-reduced-motion:no-preference){
  main{ animation:pagein .66s cubic-bezier(.22,1,.36,1) both; }
  @keyframes pagein{ from{ opacity:0; transform:translateY(34px); } }
}

@media (prefers-reduced-motion:reduce){
  html::after{ display:none; }
  html.page-leaving main{ transition:none; opacity:1; transform:none; }
  main{ animation:none !important; }
  .nextup-hint{ display:none; }
}

/* ---------------------------------------------------------------------------
   MARQUEE. One slow strip of outline serif between two sections. Exactly one
   on the site — a second stops being a detail and becomes decoration.
   --------------------------------------------------------------------------- */
.marquee{
  overflow:hidden; padding-block:26px; background:var(--pine-900);
  border-block:1px solid rgba(255,255,255,.08);
}
.marquee-track{ display:flex; width:max-content; animation:marq 38s linear infinite; }
.marquee span{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,4vw,2.6rem); padding-inline:.5em; white-space:nowrap;
  /* set solid in the mint the separators already used, not outlined */
  color:rgba(155,220,192,.85); -webkit-text-stroke:0;
}
.marquee span em{ font-style:normal; color:rgba(155,220,192,.85); }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }


/* image reveal: the mask opens while the picture settles from a slight zoom */
[data-reveal-img]{ overflow:hidden; }
html.js-anim [data-reveal-img] img{
  clip-path:inset(100% 0 0 0); transform:scale(1.22);
}
html.js-anim [data-reveal-img].is-revealed img{
  clip-path:inset(0 0 0 0); transform:scale(1);
  transition:clip-path 1.15s cubic-bezier(.22,1,.36,1), transform 1.4s cubic-bezier(.22,1,.36,1);
}
/* header retracts on the way down so the content owns the screen */
.nav{ transition:transform .42s var(--ease), background-color .3s var(--ease),
                 border-color .3s var(--ease), box-shadow .3s var(--ease); }
.nav.is-hidden{ transform:translateY(-100%); }

/* ---------------------------------------------------------------------------
   PLEDGE LIST
   These classes were used in the accountability markup but only ever defined
   inside manifesto.html, so on the site the tick was an unstyled span wrapping
   a dimensionless SVG — which browsers render at the SVG default size. Hence
   the giant check marks on the home page.
   --------------------------------------------------------------------------- */
.pledge{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 0; border-bottom:1px dashed var(--line-strong);
}
.pledge:last-child{ border-bottom:0; }
.pledge .tick{
  width:28px; height:28px; flex:none; border-radius:50%;
  display:grid; place-items:center; margin-top:2px;
  background:var(--sage-100); color:var(--brand-ink);
}
.pledge .tick svg{ width:14px; height:14px; }
.pledge b{ display:block; font-size:1.02rem; color:var(--ink); margin-bottom:3px; }
.pledge span{ font-size:.95rem; color:var(--muted); line-height:1.6; }
.section-dark .pledge{ border-bottom-color:rgba(255,255,255,.16); }
.section-dark .pledge .tick{ background:rgba(155,220,192,.16); color:#9BDCC0; }
.section-dark .pledge b{ color:#fff; }
.section-dark .pledge span{ color:#C3D6CC; }

/* ---------------------------------------------------------------------------
   CONTRAST PANELS — today vs. what we commit to
   --------------------------------------------------------------------------- */
.panel-neg{
  border:1px dashed var(--line-strong); border-radius:var(--radius); padding:24px;
}
.panel-neg h3, .panel-pos h3{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 14px;
}
.panel-neg h3{ color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.chips li{
  font-size:.82rem; color:var(--ink-2); background:var(--sage-100);
  border:1px solid var(--line); border-radius:999px; padding:7px 13px;
}
.panel-pos{
  border-radius:var(--radius); padding:26px; position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--pine-700) 0%, var(--pine-600) 60%, #24564A 120%);
  color:#E9F1EC;
}
.panel-pos h3{ color:#9BDCC0; }
.panel-pos .big{ font-size:1.3rem; font-weight:700; color:#fff; margin:0 0 6px; letter-spacing:-.015em; }
.panel-pos p{ color:#C3D6CC; margin:0; font-size:.95rem; }
.panel-pos p + p{ margin-top:10px; }
.arrow-cell{ display:flex; justify-content:center; color:var(--accent); }
.arrow-cell svg{ width:30px; height:30px; transform:rotate(90deg); }
@media (min-width:992px){ .arrow-cell svg{ transform:none; } }

.quote-dark{
  margin:0; padding:24px 26px; border-left:3px solid #9BDCC0;
  background:rgba(255,255,255,.055); border-radius:0 var(--radius) var(--radius) 0;
}
.quote-dark p{ font-size:1.05rem; line-height:1.55; color:#DCE9E3; margin:0; }

/* ledger used on the challenges bridge */
.ledger{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.ledger-head{ display:none; background:var(--sage-100); border-bottom:1px solid var(--line);
  font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--brand-ink); }
.ledger-head div{ padding:13px 20px; }
.row-b{ border-bottom:1px solid var(--line); }
.row-b:last-child{ border-bottom:0; }
.row-b .c1{ padding:18px 20px 6px; }
.row-b .c2{ padding:0 20px 18px; }
.row-b .when{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:5px; }
.row-b .what{ font-size:1rem; font-weight:700; color:var(--ink); line-height:1.35; }
.row-b .c2 p{ font-size:.95rem; color:var(--ink-2); margin:0; }
.row-b .c2 b{ color:var(--brand-ink); }
@media (min-width:860px){
  .ledger-head{ display:grid; grid-template-columns:1fr 1fr; }
  .row-b{ display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .row-b .c1{ padding:20px 22px; }
  .row-b .c2{ padding:20px 22px; border-left:1px solid var(--line); }
}

/* ---------------------------------------------------------------------------
   FAQ — native <details>, so it opens with JavaScript disabled
   --------------------------------------------------------------------------- */
.faq{ max-width:82ch; border-top:1px solid var(--line-strong); }
.faq-item{ border-bottom:1px solid var(--line-strong); }
.faq-item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:22px 2px; cursor:pointer; list-style:none;
  font-size:clamp(1rem,2vw,1.12rem); font-weight:600; color:var(--ink);
  transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--brand-ink); }
.faq-item summary i{
  position:relative; width:18px; height:18px; flex:none; margin-top:4px;
}
.faq-item summary i::before, .faq-item summary i::after{
  content:""; position:absolute; background:var(--brand); border-radius:2px;
  transition:transform .32s var(--ease), opacity .2s var(--ease);
}
.faq-item summary i::before{ left:0; right:0; top:8px; height:2px; }
.faq-item summary i::after{ top:0; bottom:0; left:8px; width:2px; }
.faq-item[open] summary i::after{ transform:rotate(90deg); opacity:0; }
.faq-item[open] summary{ color:var(--brand-ink); }
.faq-a{ padding:0 2px 24px; max-width:72ch; }
.faq-a p{ font-size:.99rem; color:var(--ink-2); margin:0; }
.faq-a a{ color:var(--brand-ink); text-underline-offset:3px; }
@media (prefers-reduced-motion:no-preference){
  .faq-item[open] .faq-a{ animation:faqin .34s var(--ease-out); }
  @keyframes faqin{ from{ opacity:0; transform:translateY(-6px); } }
}

/* ===========================================================================
   ADVANCED SCROLL MOTION
   All of it vanilla — no GSAP/ScrollTrigger/SplitType/Lenis. Content is
   visible by default; JS adds .has-motion to opt in, so a script failure
   leaves a readable page rather than a blank one.
   =========================================================================== */
section{ overflow-x:clip; }          /* sliding cards must never scroll the page */

/* --- A. cards arrive from alternating sides ------------------------------- */
.has-motion [data-slide]{
  opacity:0; will-change:transform,opacity;
  transform:translateX(var(--sx,0)) rotate(var(--sr,0deg));
}
.has-motion [data-slide].is-in{
  opacity:1; transform:translateX(0) rotate(0deg);
  transition:transform 1s cubic-bezier(.22,1,.36,1), opacity .8s ease-out;
  transition-delay:var(--sd,0ms);
}
.has-motion [data-slide] img{ transform:scale(1.18); transition:transform 1.3s cubic-bezier(.22,1,.36,1); }
.has-motion [data-slide].is-in img{ transform:scale(1); }

/* --- B. headings fall, letter by letter ----------------------------------- */
.fall{ perspective:800px; }
.fall .w{ display:inline-block; white-space:nowrap; }
.has-motion .fall .l{
  display:inline-block; opacity:0;
  transform:translateY(-.55em) rotateX(-90deg);
  transform-origin:50% 100%;
}
.has-motion .fall.is-in .l{
  opacity:1; transform:translateY(0) rotateX(0deg);
  transition:transform .78s cubic-bezier(.24,1.2,.4,1), opacity .4s ease-out;
  transition-delay:calc(var(--i,0) * 28ms);
}

/* --- C. hero responds to the scroll --------------------------------------- */
.hero-bg{ will-change:transform; }
.hero-veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,46,36,0) 0%, rgba(14,46,36,.9) 100%);
  opacity:0;
}

/* --- D. giant ghost numerals behind stats --------------------------------- */
.stat, .hero-stats li{ position:relative; }
/* ---------------------------------------------------------------------------
   WATERMARK NUMERALS
   The figure repeated behind its own tile in outline, sitting in the empty
   right-hand third. It is set *inside* the tile, not bled off the bottom edge:
   cropped, the digits were unreadable and looked like a rendering fault.
   Never interactive, hidden from assistive tech.
   --------------------------------------------------------------------------- */
.stat, .hero-stats li{ position:relative; overflow:hidden; }
.stat{ padding:26px 20px 28px; }

.stat .ghost-no, .hero-stats .ghost-no{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  /* set in from the bottom-right corner so the whole figure is legible */
  right:.18em; bottom:.46em;
  font-family:var(--font-display); font-weight:700; line-height:.74;
  font-size:clamp(3.4rem,6vw,5.2rem); letter-spacing:-.05em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.4px var(--pine-700); opacity:0;
  transform:translateY(26px);
  transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
.stat.is-in .ghost-no{ opacity:.10; transform:translateY(0); }
.stat:hover .ghost-no{ opacity:.17; transform:translateY(0) translateX(-6px); }
.hero-stats .ghost-no{
  -webkit-text-stroke-color:#EAF2ED;
  font-size:clamp(3rem,5vw,4.2rem);
  bottom:.58em;
}
.hero-stats li.is-in .ghost-no{ opacity:.13; transform:translateY(0); }
.section-dark .ghost-no{ -webkit-text-stroke-color:#EAF2ED; }
@media (max-width:575px){
  /* two tiles per row on a phone leaves too little width — pull it in */
  .stat .ghost-no{ font-size:2.9rem; }
}
@media (prefers-reduced-motion:reduce){
  .stat .ghost-no, .hero-stats .ghost-no{ transition:none; }
}
.stat > b, .stat > span:not(.ghost-no),
.hero-stats b, .hero-stats span:not(.ghost-no){ position:relative; z-index:1; }

/* --- E. two background textures, one per section -------------------------- */


/* ---------------------------------------------------------------------------
   E2. MOVING LINES + SIDE RAILS

   This replaces a drifting colour-blob field. Those blobs were built from
   --sage-200 and --heather-200, which are NOT redefined for the dark colour
   scheme — so on a dark Chrome profile they rendered as big pale glows over a
   near-black page. Everything here is drawn from --line, --brand and --accent,
   all of which do flip, so it is correct in both schemes by construction.
   --------------------------------------------------------------------------- */
.has-fx{ position:relative; overflow:clip; isolation:isolate; }
.has-fx > .container{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------------
   B. THE BUILDINGS, ERECTED ON SCROLL

   Not an outline that appears — a structure that goes up in the order a real
   one does, each stage owning a slice of the scroll:

     .g   the ground line is set out
     .c   columns rise, all of them, bottom to top
     .s1  slabs are poured, lowest band first
     .s2  .. and the next
     .s3  .. and the next
     .s4  .. up to the top
     .r   the roofs cap each block

   pathLength="1" normalises every path so one dashoffset ramp fits all of them,
   and a path of several M..H.. subpaths draws them in sequence — so a band of
   slabs lands one after another rather than all at once.

   The fallback must be 1, not 0: the offset is (start - p), so an absent --p of
   0 gives a POSITIVE offset and hides everything. With 1 it goes negative,
   clamps to 0, and the buildings are simply drawn.
   --------------------------------------------------------------------------- */
.fx-build{
  position:absolute; right:0; bottom:0; z-index:0; pointer-events:none;
  /* held to the right of the measure so it never sits under the column of text.
     aspect-ratio is set inline from the computed isometric bounds; this is only
     the value used before that lands. */
  width:min(56%, 700px); aspect-ratio:543 / 202;
  transform:translate3d(0, calc(var(--p, .5) * -40px + 20px), 0);
}
.fx-build svg{ width:100%; height:100%; display:block; }
.fx-build path{
  fill:none; stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:0;   /* pathLength is an attribute */
}

/* Three weights, not one. Setting-out and roofs are the heavy members, columns
   the medium, slabs the light green infill — so the drawing reads as a
   structure with depth rather than a flat wireframe at a single opacity. */
.fx-build .g, .fx-build .r{ stroke:var(--muted); }
.fx-build .c{ stroke:var(--line-strong); stroke-width:1.1; }
.fx-build .s1, .fx-build .s2, .fx-build .s3, .fx-build .s4{
  stroke:var(--brand); stroke-width:.75;   /* the floor lines are the infill */
}
.fx-build .g{ stroke-width:1.1; }
.fx-build .r{ stroke-width:1.4; }

.section-dark .fx-build .g, .section-dark .fx-build .r{ stroke:#C3D6CC; }
.section-dark .fx-build .c{ stroke:rgba(255,255,255,.4); }
.section-dark .fx-build .s1, .section-dark .fx-build .s2,
.section-dark .fx-build .s3, .section-dark .fx-build .s4{ stroke:#8FD3B4; }

/* Each stage draws (stroke-dashoffset) and then firms up (opacity) over its own
   slice of the scroll, and each slab band settles darker than the one below it.
   The clamp's upper bound IS that member's final opacity, so one expression
   does the fade and the ceiling together. */
/* footprints -> columns -> roofs close the volume -> floors fill it in.
   The roofs come third, not last: until the top face lands the masses read as
   loose verticals rather than solids. */
/* the footprint stays light once the mass is up — a plan under a model, not a
   fourth wall showing through it */
.fx-build .g { stroke-dashoffset:clamp(0, calc((0.18 - var(--p, 1)) * 6.0), 1);
               opacity:clamp(0, calc((var(--p, 1) - 0.02) * 6.0), .34); }
.fx-build .c { stroke-dashoffset:clamp(0, calc((0.40 - var(--p, 1)) * 3.6), 1);
               opacity:clamp(0, calc((var(--p, 1) - 0.14) * 3.4), .70); }
.fx-build .r { stroke-dashoffset:clamp(0, calc((0.56 - var(--p, 1)) * 4.4), 1);
               opacity:clamp(0, calc((var(--p, 1) - 0.32) * 4.4), .82); }
.fx-build .s1{ stroke-dashoffset:clamp(0, calc((0.68 - var(--p, 1)) * 5.5), 1);
               opacity:clamp(0, calc((var(--p, 1) - 0.52) * 6.0), .26); }
.fx-build .s2{ stroke-dashoffset:clamp(0, calc((0.77 - var(--p, 1)) * 5.5), 1);
               opacity:clamp(0, calc((var(--p, 1) - 0.61) * 6.0), .32); }
.fx-build .s3{ stroke-dashoffset:clamp(0, calc((0.86 - var(--p, 1)) * 5.5), 1);
               opacity:clamp(0, calc((var(--p, 1) - 0.70) * 6.0), .38); }
.fx-build .s4{ stroke-dashoffset:clamp(0, calc((0.95 - var(--p, 1)) * 5.5), 1);
               opacity:clamp(0, calc((var(--p, 1) - 0.79) * 6.0), .44); }

@media (max-width:767px){
  /* damped on the container: a per-path rule here would lose to the per-stage
     opacities above on specificity, and container opacity multiplies anyway */
  .fx-build{ width:88%; opacity:.78; }
}
/* No prefers-reduced-motion block here, and none is reachable: motion.js
   returns before it injects anything when that preference is set, so .fx-build
   never exists on the page. The whole background layer is absent by design for
   that reader, not merely frozen. */

/* ---------------------------------------------------------------------------
   C. The side rails. Three layers, because one element cannot both scale to the
   scroll position and carry a travelling highlight — the scale would squash it.
     .fx-rail          the track, full height, always faint
     .fx-rail::before  the fill, scaled to the section's scroll progress
     .fx-rail::after   a light that runs down the track on its own clock
   --------------------------------------------------------------------------- */
.fx-rail{
  position:absolute; top:0; bottom:0; width:3px; z-index:2;
  pointer-events:none; border-radius:3px; overflow:hidden;
  background:var(--line);
}
.fx-rail.l{ left:0; }
.fx-rail.r{ right:0; }
.fx-rail::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--brand) 0%, var(--accent) 100%);
  transform:scaleY(var(--p, 1)); transform-origin:50% 0;
  opacity:.85;
}
/* a plain white gleam, so it reads as a highlight on the rail in either scheme
   rather than a second colour that has to be defined twice */
.fx-rail::after{
  content:""; position:absolute; left:0; right:0; top:0; height:26%;
  background:linear-gradient(180deg, transparent 0%, #fff 50%, transparent 100%);
  opacity:.85;
}
.section-dark .fx-rail{ background:rgba(255,255,255,.12); }
.section-dark .fx-rail::before{ background:linear-gradient(180deg, #8FD3B4 0%, #B7A8CC 100%); }
@media (prefers-reduced-motion:no-preference){
  .fx-rail::after{ animation:rail-run 7.5s ease-in-out infinite; }
  .fx-rail.r::after{ animation-duration:9.5s; animation-delay:-3s; }
  .has-fx:not(.is-live) .fx-rail::after{ animation-play-state:paused; }
}
@keyframes rail-run{
  0%{ transform:translateY(-110%); }
  100%{ transform:translateY(500%); }
}
@media (max-width:767px){ .fx-rail{ width:2px; } }

/* Same for the rails: injected by motion.js, so unreachable under reduce. */

/* --- F. footer ------------------------------------------------------------ */
.footer{ position:relative; overflow:hidden; }
.footer-skyline{
  position:absolute; top:0; left:0; right:0; height:46px; z-index:0;
  pointer-events:none; color:var(--pine-800);
}
.footer-skyline svg{ width:100%; height:100%; display:block; }
.footer .container{ position:relative; z-index:2; }
.footer-wordmark{
  position:absolute; left:0; right:0; bottom:-.16em; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:700; font-size:15vw; line-height:.8;
  text-align:center; color:transparent; -webkit-text-stroke:1px rgba(233,241,236,.30);
  white-space:nowrap; overflow:hidden;
}
.footer-wordmark .l{ display:inline-block; }
.has-motion .footer-wordmark .l{ transform:translateY(100%); }
.has-motion .footer.is-in .footer-wordmark .l{
  transform:translateY(0);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i,0) * 40ms);
}
.footer h2{ position:relative; padding-bottom:12px; }
.footer h2::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:38px;
  background:var(--pine-500); transform:scaleX(1); transform-origin:0 50%;
}
/* fail visible: only hide it when there is motion to reveal it with */
.has-motion .footer h2::after{ transform:scaleX(0); }
.has-motion .footer.is-in h2::after{ transform:scaleX(1); transition:transform .8s var(--ease-out) .2s; }
.footer li a{ position:relative; }
.footer li a::after{
  content:""; position:absolute; left:0; bottom:6px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .38s var(--ease);
}
.footer li a:hover::after{ transform:scaleX(1); }
.has-motion .footer-top > [class*="col-"]{ opacity:0; transform:translateY(22px); }
.has-motion .footer.is-in .footer-top > [class*="col-"]{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 100ms);
}

/* back-to-top with a scroll-progress ring */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--brand-ink);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  box-shadow:var(--shadow-2);
}
.to-top.is-shown{ opacity:1; visibility:visible; transform:none; }
.to-top svg.ring{ position:absolute; inset:-1px; width:52px; height:52px; transform:rotate(-90deg); }
.to-top .ring circle{ fill:none; stroke-width:2; }
.to-top .ring .track{ stroke:var(--line); }
.to-top .ring .bar{ stroke:var(--brand); stroke-linecap:round; transition:stroke-dashoffset .1s linear; }
.to-top .arw{ width:17px; height:17px; }
@media print{ .to-top{ display:none !important; } }

/* ---------------------------------------------------------------------------
   COMMITMENT CARDS ON MOBILE
   They stay cards — own border, own padding, icon well, tag, number. What
   changes is that only one body is open at a time: opening the next one closes
   the last, so the column stays short without turning into a list of buttons.
   The toggle IS the card header, so there is no button chrome sitting on top
   of the card. It is still a real <button> underneath for keyboard and AT.
   --------------------------------------------------------------------------- */
@media (max-width:767px){
  .row.acc{ display:block; gap:0; }
  .row.acc > .card{
    margin-bottom:12px; padding:0; overflow:hidden;
    transform:none !important; opacity:1 !important;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .row.acc > .card:last-child{ margin-bottom:0; }
  .row.acc > .card.is-open{ border-color:var(--pine-500); box-shadow:var(--shadow-1); }

  .acc-head{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
    width:100%; padding:18px 20px; min-height:64px;
    background:none; border:0; font:inherit; text-align:left; color:inherit;
    cursor:pointer;
  }
  .acc-head .ico{ margin:0; width:38px; height:38px; border-radius:10px; }
  .acc-head .ico svg{ width:18px; height:18px; }
  .acc-head h3{
    margin:0; font-size:1.02rem; line-height:1.3; font-weight:700;
    transition:color .25s var(--ease);
  }
  .is-open .acc-head h3{ color:var(--brand-ink); }
  .section-dark .is-open .acc-head h3{ color:#9BDCC0; }

  /* a hairline that turns, not a chevron button */
  .acc-mark{
    position:relative; width:14px; height:14px; flex:none; opacity:.55;
    transition:opacity .25s var(--ease);
  }
  .acc-mark::before, .acc-mark::after{
    content:""; position:absolute; background:currentColor; border-radius:2px;
    transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .25s var(--ease);
  }
  .acc-mark::before{ left:0; right:0; top:6px; height:2px; }
  .acc-mark::after { top:0; bottom:0; left:6px; width:2px; }
  .is-open .acc-mark{ opacity:1; }
  .is-open .acc-mark::after{ transform:rotate(90deg); opacity:0; }

  .acc-body{ overflow:hidden; max-height:0; transition:max-height .42s cubic-bezier(.22,1,.36,1); }
  .acc-body > div{ padding:0 20px 20px 72px; }
  .acc-body p{ margin:0; }
  .acc-body .tag{
    display:inline-block; margin:0 0 10px; font-size:10px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; color:var(--pine-600);
    background:var(--sage-100); padding:4px 9px; border-radius:999px;
  }
  .section-dark .acc-body .tag{ background:rgba(155,220,192,.16); color:#9BDCC0; }
  .acc-body .tells{ margin-top:12px; padding-top:10px; }
  .row.acc > .card .num{
    display:block; position:absolute; top:16px; right:52px;
    font-size:1.5rem; opacity:.10;
  }
}
@media (min-width:768px){
  .acc-head{ all:unset; display:block; }
  .acc-mark{ display:none; }
  .acc-body{ max-height:none !important; }
}

/* ===========================================================================
   11a. SHORT LANDSCAPE VIEWPORTS
   A phone on its side is ~390px tall but ~850px wide, so type scaled by vw
   comes out far too big for the height available and the hero pushes its own
   buttons off screen. Scale by the real constraint here.
   =========================================================================== */
@media (orientation:landscape) and (max-height:520px){
  :root{ --nav-h:50px; }
  h1{ font-size:clamp(1.65rem,3.6vw,2.3rem); }
  h2{ font-size:clamp(1.35rem,2.8vw,1.9rem); }
  section{ padding-block:clamp(26px,4vw,44px); }
  .hero{ padding-block:22px 30px; }
  .hero-sub{ font-size:1rem; margin-bottom:18px; }
  .hero .btn-row{ margin-bottom:18px; }
  .hero-figure{ aspect-ratio:16/9; }
  .section-head{ margin-bottom:20px; }
  .brand-text span{ display:none; }
}

/* ===========================================================================
   11b. TOUCH DEVICES
   On a touch screen :hover latches after a tap and stays until you tap
   somewhere else — cards sit lifted, buttons stay highlighted. Every hover
   effect is decoration, so switch the whole layer off where there is no real
   pointer and give taps their own brief feedback instead.
   =========================================================================== */
@media (hover:none){
  .card:hover,
  .stat:hover,
  .member:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .nav-cta:hover,
  .nav-toggle:hover,
  .bio-toggle:hover,
  .li-link:hover,
  .choice:hover,
  .contact-card a:hover,
  .brand:hover .brand-mark,
  .card:hover .ico,
  .member:hover .member-photo img,
  .track li:hover::before{
    transform:none;
  }
  .card:hover      { box-shadow:var(--shadow-1); border-color:var(--line); }
  .member:hover    { box-shadow:var(--shadow-1); border-color:var(--line); }
  .stat:hover      { box-shadow:var(--shadow-1); }
  .btn-primary:hover{ background:var(--brand); box-shadow:var(--shadow-1); }
  .btn-ghost:hover { box-shadow:none; border-color:var(--line-strong); color:var(--ink); }
  .nav-cta:hover   { background:transparent; border-color:var(--line-strong); }
  .nav-toggle:hover{ background:var(--surface); }
  .nav-links a:hover{ color:var(--ink-2); background:transparent; }
  .nav-drawer a:hover{ background:transparent; padding-left:12px; color:var(--ink); }
  .bio-toggle:hover{ background:transparent; color:var(--ink-2); border-color:var(--line-strong); }
  .li-link:hover   { color:var(--muted); border-color:var(--line-strong); background:transparent; }
  .choice:hover    { background:transparent; border-color:var(--line-strong); color:var(--ink-2); }
  .contact-card a:hover{ background:transparent; }
  .plan-card:hover .num{ color:var(--line-strong); }
  .track li:hover::before{ background:var(--bg); }
  .field input:hover, .field textarea:hover{ border-color:var(--line-strong); }
  .footer-bottom a:hover{ color:#D9E3E0; }

  /* the scroll-spy highlight must still show on touch */
  .nav-links a.is-active{ color:var(--brand-ink); background:var(--sage-100); }
  .nav-drawer a.is-active{ background:var(--sage-100); padding-left:18px; color:var(--brand-ink); }

  /* taps get their own short, non-latching feedback */
  .card:active, .member:active, .stat:active{ transform:scale(.993); }
  .btn:active, .nav-cta:active, .bio-toggle:active,
  .li-link:active, .choice:active, .nav-toggle:active{ transform:scale(.97); }
  .contact-card a:active{ background:var(--sage-100); }
}

/* the default blue tap flash clashes with the palette on Android Chrome */
a, button, label, summary, [role="button"]{
  -webkit-tap-highlight-color:color-mix(in srgb, var(--brand) 16%, transparent);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  a, button, label, summary, [role="button"]{ -webkit-tap-highlight-color:rgba(44,74,71,.16); }
}
/* no 300ms delay on older touch browsers, and no accidental double-tap zoom */
button, .btn, .choice, .bio-toggle, .li-link, .nav-toggle, .nav-cta{ touch-action:manipulation; }

/* ===========================================================================
   12. PRINT — two-page handout
   =========================================================================== */
@media print{
  @page{ margin:10mm 11mm; }
  :root{ --bg:#fff; --surface:#fff; --ink:#000; --ink-2:#1a1a1a; --muted:#3a3a3a; --line:#b4b4b4; --line-strong:#b4b4b4; }
  html{ font-size:100%; }
  body{ background:#fff; color:#000; font-size:7.8pt; line-height:1.25; }

  /* chrome, decoration and anything screen-only */
  .nav,.progress,.skip,.btn,.nav-toggle,.nav-drawer,.hero-figure,.bio-toggle,
  .li-link,.placeholder-note,.hero-pills,.ico,.plan-card .num,.member-photo,
  .timeline-sub,.plan-download,.btn-row,.form-card,.form-sink,
  .stats{ display:none !important; }
  .tint-sage,.tint-sand,.tint-mist,.tint-lilac,.tint-white{ background:#fff !important; }
  .hero::before{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ box-shadow:none !important; }

  section{ padding-block:3pt; break-inside:auto; }
  .wrap{ max-width:none; padding-inline:0; }
  .hero{ padding-block:0 6pt; }
  
  h1{ font-size:14pt; margin-bottom:2pt; }
  h2{ font-size:10pt; margin-bottom:1.5pt; }
  h3{ font-size:8.6pt; margin-bottom:1.5pt; }
  p{ margin-bottom:.35em; }
  .eyebrow{ font-size:6.2pt; margin-bottom:3pt; }
  .eyebrow::before{ width:10px; }
  .section-head{ max-width:none; margin-bottom:4pt; }
  .lede,.section-head p,.hero-sub{ font-size:8.2pt; max-width:none; }

  .card,.stat,.quote,.member{
    border:1px solid #b4b4b4 !important; border-radius:4px;
    padding:4pt 5pt; break-inside:avoid;
  }
  .card p,.member p{ font-size:7.8pt; }
  /* Print media queries do not reliably see the page width, so the responsive
     col-* classes cannot be trusted here. Neutralise them and pin each row's
     printed layout explicitly. */
  .row{ gap:4pt; }
  [class*="col-"]{ grid-column:auto / auto !important; }
  #home .row{ grid-template-columns:1fr; }
  #community .row{ grid-template-columns:repeat(4,1fr); }
  #challenges .row{ grid-template-columns:repeat(2,1fr); }
  #plan .row{ grid-template-columns:repeat(4,1fr); }
  #why .row{ grid-template-columns:repeat(3,1fr); }
  #tenants .row{ grid-template-columns:1fr; }
  .challenge .tells{ margin-top:4pt; padding-top:3pt; font-size:7.4pt; }

  .stat b{ font-size:12pt; margin-bottom:0; }
  .stat span{ font-size:7pt; }
  .quote{ margin-top:6pt; padding:5pt 7pt; border-left:2px solid #555; }
  .quote p{ font-size:9pt; line-height:1.3; }

  .timeline{ margin-top:7pt; }
  .track{ grid-template-columns:repeat(4,1fr); gap:0 8pt; }
  .track li{ padding:4pt 4pt 4pt 0; border-left:0; border-top:1px solid #b4b4b4; break-inside:avoid; }
  .track li::before{ display:none; }
  .track .day{ font-size:6.4pt; margin-bottom:0; }
  .track .what{ font-size:7.4pt; }

  #teamGrid{ grid-template-columns:repeat(4,1fr); gap:4pt; }
  /* on paper a short slate reads better full width — the bio flows across the
     page in a few lines instead of down a narrow column */
  #teamGrid.few{ grid-template-columns:repeat(2,1fr) !important; }
  /* On the two-page handout the candidate bios are the one thing that does not
     have to be here — they are on the website and in the full manifesto. Name,
     flat, role and the one-line background stay. This also keeps the sheet at
     two pages as more candidates are added. */
  .member-bio{ display:none !important; }
  .member{ break-inside:avoid; }
  .member-body{ padding:0; gap:1pt; }
  .member-name{ font-size:8.4pt; }
  .member-meta,.member-prof{ font-size:7.4pt; }
  .member-role{ background:none; padding:0; font-size:6.6pt; }
  .member-actions{ display:none; }
  .member-bio{ max-height:none !important; opacity:1 !important; overflow:visible !important; }
  .member-bio p{ margin-top:3pt; padding-top:3pt; font-size:7.4pt; }

  #contact .row{ grid-template-columns:1.3fr .7fr; gap:5pt; }
  .steps{ gap:4pt; }
  .steps li{ padding-left:16pt; font-size:7.8pt; }
  .steps li::before{ width:12pt; height:12pt; font-size:7pt; background:#ddd; color:#000; }
  .contact-card a,.contact-card .placeholder-val{ min-height:0; padding:1pt 0; margin-inline:0; font-size:7.8pt; }
  .contact-card svg{ display:none; }
  .contact-card small{ display:inline; font-size:7pt; }
  .contact-card small::before{ content:" — "; }

    .tenant-points{ grid-template-columns:repeat(3,1fr); gap:6pt; margin-top:5pt; }
  .tenant-points li{ font-size:7.4pt; gap:0; display:block; break-inside:avoid; }
  .tenant-points .tick{ display:none; }
  #tenants .lede{ margin-bottom:0; }
  .print-form-line{ display:block !important; font-size:7.8pt; margin-top:4pt; }

  .footer-top{ display:none !important; }
  .footer{ background:#fff !important; color:#000; border-top:1px solid #b4b4b4; padding-block:5pt; }
  .footer h3{ color:#000; font-size:8.4pt; }
  .footer p,.footer-bottom,.disclaimer{ color:#1a1a1a; font-size:7pt; }
  .footer-bottom{ margin-top:4pt; padding-top:4pt; }
  .footer-bottom span,.footer-bottom a{ min-height:0; }
  a{ color:#000; text-decoration:none; }

  /* let content flow; cards and milestones never split across the two pages */
  section,.timeline,.section-head{ break-inside:auto; }
  h2,h3{ break-after:avoid; }
}