/* =====================================================
   Propulsion Revenue Institute™ — Design System v2.1
   Light institute · Fraunces + Inter · 7-color accents
   ===================================================== */

:root{
  /* light surfaces */
  --bg:#FCFBF8;
  --bg-2:#F5F3EC;
  --panel:#FFFFFF;
  --panel-2:#F8F6F0;
  --line:#E5E2D8;
  --line-soft:#EDEAE1;

  /* ink */
  --ink:#16203A;
  --ink-dim:#4C5870;
  --ink-faint:#8A93A8;

  /* gold accent: -deep for text, base for graphics */
  --ember:#D8A23B;
  --ember-2:#E8B04B;
  --ember-deep:#A5761A;

  /* The 8 primary colors (deepened for white backgrounds) — one per
     Propulsion Station. c8 was added when the spec locked eight stations;
     seven colours meant two stations sharing a strand, which defeats the
     point of the rope. Terracotta: the hue the original seven left open. */
  --c1:#C98F24; --c2:#22857C; --c3:#C24A7E; --c4:#3D6FD4;
  --c5:#348F58; --c6:#7E50C4; --c7:#1F97BD; --c8:#C2543A;

  /* dark band (footer, CTA band, instrument panel) */
  --navy:#101A31;
  --navy-2:#16223E;
  --navy-line:#26324E;
  --navy-ink:#EEF2FA;
  --navy-dim:#9AA7C2;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, "Segoe UI", sans-serif;

  --shadow-sm:0 1px 2px rgba(22,32,58,.05), 0 4px 14px -6px rgba(22,32,58,.08);
  --shadow-md:0 2px 6px rgba(22,32,58,.06), 0 16px 34px -18px rgba(22,32,58,.18);

  /* One radius scale, three steps. Twenty different values had accumulated
     (16, 14, 12, 10, 9, 8, 7, 6, 5, 4, 3, 999) which is what made the UI read
     as assembled rather than designed. Everything now maps onto these. */
  --radius:8px;        /* cards, panels, tables, larger surfaces */
  --btn-radius:5px;    /* buttons, inputs, selects — squared, not capsules */
  --radius-sm:4px;     /* badges, tags, small inner chips */
  --container:1140px;
  --gutter:32px;
}

/* ---------- large screens ----------
   The layout was capped at 1140px, which reads as a narrow column on
   14"/16" MacBooks and desktop monitors. These steps widen the container
   and lift type/spacing so the design fills the screen properly. */
@media (min-width:1440px){          /* 14" MacBook Pro and up */
  :root{ --container:1280px; --gutter:40px; font-size:16.5px; }
}
@media (min-width:1680px){          /* 16" MacBook Pro, 1080p+ desktops */
  :root{ --container:1400px; --gutter:48px; font-size:17px; }
}
@media (min-width:1920px){          /* large desktop / iMac */
  :root{ --container:1520px; --gutter:56px; font-size:17.5px; }
}
@media (min-width:2400px){          /* Studio Display / 4K */
  :root{ --container:1660px; font-size:18px; }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 560px at 50% -8%, #F3EDDD 0%, transparent 62%),
    radial-gradient(900px 520px at 90% 108%, #EEF1F6 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--ember-deep)}
::selection{background:rgba(232,176,75,.35)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ---------- typography ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
h1{font-size:clamp(32px,4.8vw,56px);font-weight:300}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:300}
h3{font-size:clamp(19px,2.2vw,24px)}
h1 em,h2 em{font-style:italic;color:var(--ember-deep)}
.kicker{
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ember-deep);margin-bottom:18px;
}
.kicker.dim{color:var(--ink-faint)}
.lede{font-size:18px;color:var(--ink-dim);max-width:46em;margin-top:20px}
.lede strong,.body strong{color:var(--ink);font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.02em;
  padding:14px 28px;border-radius:var(--btn-radius);cursor:pointer;text-decoration:none;border:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s, color .15s, background .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  color:#16203A;background:linear-gradient(135deg,var(--ember-2),var(--ember));
  box-shadow:0 6px 20px rgba(200,150,50,.30);
}
.btn-primary:hover{box-shadow:0 8px 26px rgba(200,150,50,.4)}
.btn-ghost{color:var(--ink);border:1px solid var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ember-deep);color:var(--ember-deep)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(252,251,248,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-logo{display:block;height:52px;width:auto;flex:none;max-width:none}
.brand .name{font-family:var(--serif);font-size:17px;font-weight:500;white-space:nowrap}
.brand .name span{color:var(--ember-deep)}

/* PRI icon mark (used on badges, placeholders) */
.pri-mark{
  display:inline-block;flex:none;
  background:url(../img/pri-icon.png) center/contain no-repeat;
}

/* footer logo sits on a light plate so the navy wordmark stays legible */
.footer-logo-plate{
  display:inline-block;background:#fff;border-radius:var(--radius);
  padding:12px 16px;line-height:0;
}
.footer-logo-plate img{display:block;height:42px;width:auto}

/* animated hero logo */
.hero-logo{margin:0 auto 26px;max-width:660px}
.hero-logo img{display:block;width:100%;height:auto}
@media (max-width:620px){ .hero-logo{max-width:88vw} .brand-logo{height:36px} }
.site-nav .nav-list{display:flex;gap:2px;list-style:none;flex-wrap:nowrap;align-items:center}
.site-nav a{
  display:block;padding:9px 14px;border-radius:var(--radius);white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--ink-dim);text-decoration:none;transition:color .15s,background .15s;
}
.site-nav a:hover{color:var(--ink);background:rgba(22,32,58,.05)}
.site-nav .current-menu-item > a,.site-nav .current_page_item > a{color:var(--ember-deep)}

/* dropdowns */
.site-nav .has-sub{position:relative}
.site-nav .has-sub > a{display:flex;align-items:center;gap:7px}
.site-nav .caret{
  width:0;height:0;flex:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4.5px solid currentColor;opacity:.55;transition:transform .18s, opacity .18s;
}
.site-nav .has-sub:hover > a .caret,
.site-nav .has-sub:focus-within > a .caret{transform:rotate(180deg);opacity:1}
.site-nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:250px;z-index:120;
  list-style:none;margin:0;padding:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-nav .has-sub:hover > .sub-menu,
.site-nav .has-sub:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.site-nav .sub-menu a{
  padding:9px 12px;font-size:13.5px;font-weight:400;color:var(--ink-dim);white-space:nowrap;border-radius:var(--radius);
}
.site-nav .sub-menu a:hover{background:var(--bg-2);color:var(--ink)}
/* keep the last dropdowns from running off-screen */
.site-nav .nav-list > li:nth-last-child(-n+2) .sub-menu{left:auto;right:0}
.header-cta{flex:none}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);padding:8px 12px;font-size:13px;cursor:pointer;
}

/* ---------- page hero ---------- */
.page-hero{padding:96px 0 56px;border-bottom:1px solid var(--line);text-align:left}
.page-hero h1{max-width:20em}

/* ---------- sections ---------- */
.section{padding:88px 0}
.section.tight{padding:64px 0}
.section.alt{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-head{max-width:56em;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.body{color:var(--ink-dim);font-size:16px;max-width:46em}
.body + .body{margin-top:14px}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:20px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}

/* ---------------------------------------------------------------
   The card.

   Previously a 3px full-width coloured bar sat across the top. That
   pattern reads as 2015 framework default, and a straight bar on a
   16px radius never sits right — the colour squares off exactly where
   the corner curves. Replaced with a short editorial kicker rule,
   which keeps the palette doing its job while looking deliberate.

   Cards are flex columns so a .card-foot pins to the bottom and
   ragged-length cards still line up along their base.
   --------------------------------------------------------------- */
.card{
  --cardc:var(--ac,var(--ac2,var(--ink-faint)));
  /* The accent pulled toward ink, for anything set in type. The raw palette
     is tuned for graphics — as 10–12px uppercase text most of it fails
     contrast on white (gold sits at 2.8:1 against a 4.5:1 requirement).
     Mixing 55% toward ink keeps the hue readable and clears 4.5:1 on every
     one of the eight, on white and on the tinted badge alike. */
  --cardc-ink:color-mix(in srgb, var(--cardc) 55%, var(--ink));
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:28px 28px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease,
             border-color .22s ease;
}
/* the kicker rule — first flex item, so it works whatever the card holds */
.card::before{
  content:"";display:block;flex:none;
  width:30px;height:3px;border-radius:2px;
  background:var(--cardc);
  margin-bottom:18px;
  transition:width .28s cubic-bezier(.2,.7,.3,1);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb, var(--cardc) 38%, var(--line));
}
.card:hover::before{width:46px}
.card.accent{
  --cardc:var(--ac,var(--ember));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--cardc) 5%, var(--panel)) 0%,
    var(--panel) 62%);
  border-color:color-mix(in srgb, var(--cardc) 32%, var(--line));
}
.card .tag{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cardc-ink);
}
.card h3{margin-top:10px;font-size:clamp(18px,1.4vw,21px);line-height:1.3;letter-spacing:-.01em}
.card .tag + h3{margin-top:8px}
.card p{margin-top:11px;font-size:14.5px;line-height:1.65;color:var(--ink-dim)}
.card > *:last-child{margin-bottom:0}
/* push a footer line to the base so cards in a row agree */
.card .card-foot{margin-top:auto;padding-top:16px}

/* Tinted fill with a darkened accent for the numeral, not white on solid.
   Solid + white fails contrast badly on the lighter half of the palette —
   gold lands at 2.8:1 where 4.5:1 is needed. Mixing the accent toward ink
   for the text keeps every one of the eight readable. */
.card .num{
  font-family:var(--serif);font-size:16px;font-weight:600;line-height:1;
  color:var(--cardc-ink);
  background:color-mix(in srgb, var(--cardc) 13%, var(--panel));
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.card .num + h3{margin-top:14px}

a.card{text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-4px)}
a.card .go{
  margin-top:auto;padding-top:16px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cardc-ink);
}
a.card .go::after{content:" →";transition:margin-left .2s ease;display:inline-block}
a.card:hover .go::after{margin-left:5px}

/* The palette cycles across a plain grid. Eight steps, matching the
   eight Propulsion Stations — it was seven, left over from the old
   seven-station home page, so colours fell out of step with the
   stations they were meant to echo. */
.grid > .card:nth-child(8n+1){--ac2:var(--c1)}
.grid > .card:nth-child(8n+2){--ac2:var(--c2)}
.grid > .card:nth-child(8n+3){--ac2:var(--c3)}
.grid > .card:nth-child(8n+4){--ac2:var(--c4)}
.grid > .card:nth-child(8n+5){--ac2:var(--c5)}
.grid > .card:nth-child(8n+6){--ac2:var(--c6)}
.grid > .card:nth-child(8n+7){--ac2:var(--c7)}
.grid > .card:nth-child(8n+8){--ac2:var(--c8)}

/* definition callout */
.definition{
  display:flex;flex-direction:column;
  border:1px solid color-mix(in srgb, var(--ember) 40%, var(--line));
  border-radius:var(--radius);padding:34px 38px;
  background:color-mix(in srgb, var(--ember) 4%, var(--panel));
  box-shadow:var(--shadow-sm);max-width:52em;
}
.definition::before{
  content:"";display:block;flex:none;
  width:30px;height:3px;border-radius:2px;background:var(--ember);margin-bottom:20px;
}
.definition .term{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-deep)}
.definition p{font-family:var(--serif);font-size:clamp(19px,2.4vw,25px);line-height:1.45;margin-top:10px;color:var(--ink)}

/* dual kpi pair */
.kpi-pair{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;background:var(--panel)}
.kpi-pair>div{flex:1;padding:16px 18px}
.kpi-pair>div:first-child{border-right:1px solid var(--line)}
.kpi-pair .lbl{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.kpi-pair .val{font-family:var(--serif);font-size:17px;margin-top:5px}
.kpi-pair .val.rev{color:var(--ember-deep)}

/* checklist */
.list-check{list-style:none;max-width:46em}
.list-check li{
  padding:11px 0 11px 34px;position:relative;color:var(--ink-dim);font-size:15px;
  border-bottom:1px dashed var(--line);
}
.list-check li::before{content:"＋";position:absolute;left:4px;color:var(--ember-deep);font-weight:600}
.list-check li strong{color:var(--ink);font-weight:600}
.list-check.no li::before{content:"—";color:var(--c3)}

/* data table */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding:12px 16px;border-bottom:2px solid var(--line);background:var(--panel-2);
}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink-dim);vertical-align:top}
.data-table td:first-child{color:var(--ink);font-family:var(--serif);font-size:15px}
.data-table tr:nth-child(even) td{background:rgba(245,243,236,.5)}
.table-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;background:var(--panel);box-shadow:var(--shadow-sm)}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.timeline>div{padding:28px 26px;border-right:1px solid var(--line);background:var(--panel);border-top:3px solid var(--tc,var(--ember))}
.timeline>div:nth-child(1){--tc:var(--c4)}
.timeline>div:nth-child(2){--tc:var(--c2)}
.timeline>div:nth-child(3){--tc:var(--c6)}
.timeline>div:nth-child(4){--tc:var(--c5)}
.timeline>div:last-child{border-right:none}
.timeline .when{font-family:var(--serif);font-size:22px;color:var(--tc,var(--ember-deep))}
.timeline .what{margin-top:10px;font-size:13.5px;color:var(--ink-dim)}

/* control panel mock — stays dark: it's an instrument, not reading copy */
.panel-mock{
  border:1px solid var(--navy-line);border-radius:var(--radius);overflow:hidden;
  background:var(--navy);box-shadow:var(--shadow-md);
}
.panel-mock .bar{
  display:flex;gap:8px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--navy-line);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-dim);
}
.panel-mock .bar i{width:9px;height:9px;border-radius:50%;background:var(--navy-line);display:inline-block}
.panel-mock .bar i:first-child{background:var(--ember)}
.panel-mock .inner{padding:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{border:1px solid var(--navy-line);border-radius:var(--radius);padding:16px 18px;background:var(--navy-2)}
.stat .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-dim)}
.stat .v{font-family:var(--serif);font-size:24px;margin-top:4px;color:var(--navy-ink)}
.stat .v.up{color:#59B87A}
.stat .v.gold{color:var(--ember-2)}
.stat .d{font-size:11px;color:var(--navy-dim);margin-top:3px}

/* slide ruler */
.ruler{border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;background:var(--panel);box-shadow:var(--shadow-sm)}
.ruler .row{display:grid;grid-template-columns:180px 1fr 1fr;gap:14px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.ruler .row:last-child{border-bottom:none}
.ruler .st{font-size:12.5px;font-weight:600;color:var(--sc,var(--ink))}
.meter{height:8px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line-soft);position:relative;overflow:hidden}
.meter i{position:absolute;inset:0;width:var(--w,50%);border-radius:4px;background:var(--sc,var(--ember))}
.ruler .cap{display:grid;grid-template-columns:180px 1fr 1fr;gap:14px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:10px}

/* station diagram */
.stations{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.station{
  border:1px solid var(--line);border-top:3px solid var(--sc);border-radius:0 0 var(--radius) var(--radius);padding:14px 10px;text-align:center;
  background:var(--panel);box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s;
}
.station:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.station .dotc{width:10px;height:10px;border-radius:50%;background:var(--sc);margin:0 auto 8px}
.station .nm{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}

/* quote / final statement */
.statement{
  font-family:var(--serif);font-size:clamp(22px,3vw,32px);line-height:1.4;max-width:32em;
  text-align:center;margin:0 auto;color:var(--ink);
}
.statement .accent{color:var(--ember-deep)}

/* cta band — deep navy for rhythm and contrast */
.cta-band{
  padding:90px 0;text-align:center;
  background:
    radial-gradient(800px 400px at 50% -20%, var(--navy-2) 0%, transparent 70%),
    var(--navy);
  border-top:1px solid var(--navy-line);
}
.cta-band h2{max-width:22em;margin:0 auto 30px;color:var(--navy-ink)}
.cta-band .btn-row{justify-content:center}
.cta-band .btn-ghost{color:var(--navy-ink);border-color:var(--navy-line)}
.cta-band .btn-ghost:hover{border-color:var(--ember);color:var(--ember-2)}
.hxai{margin-top:26px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-dim)}

/* footer — deep navy */
.site-footer{border-top:1px solid var(--navy-line);background:var(--navy);padding:56px 0 40px;color:var(--navy-ink)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.footer-brand .name{font-family:var(--serif);font-size:17px;margin-top:10px;color:var(--navy-ink)}
.footer-brand p{font-size:13px;color:var(--navy-dim);margin-top:12px;max-width:26em}
.site-footer h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-dim);font-weight:600;margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer li a{display:block;padding:5px 0;font-size:13.5px;color:var(--navy-dim);text-decoration:none}
.site-footer li a:hover{color:var(--ember-2)}
.footer-legal{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--navy-line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:var(--navy-dim);
}
.footer-legal .hx{letter-spacing:.16em;text-transform:uppercase}

/* reveal on scroll
   Only hidden when JS is confirmed present (html.js is set by an
   inline script in the head). Without JS the content shows normally,
   so a script failure can never blank the page. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* home hero
   Flat background so the logo animation (which carries the same
   base colour baked in) blends seamlessly with the page. */
.home-hero{padding:110px 0 90px;text-align:center;position:relative;background:var(--bg)}
.home-hero .kicker{color:var(--ink-dim)}
.home-hero h1{max-width:15em;margin:0 auto}
.home-hero .lede{margin:26px auto 0;text-align:center}
.home-hero .btn-row{justify-content:center;margin-top:40px}
.hero-orbit{width:120px;height:120px;margin:0 auto 34px;position:relative}
.hero-orbit .pri-mark{width:100%;height:100%;display:block;animation:spin 40s linear infinite}
.hero-orbit::after{
  content:"";position:absolute;inset:-18px;border-radius:50%;
  border:1px dashed var(--line);animation:spin 90s linear infinite reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* screen label */
.screen-tag{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember-deep);background:color-mix(in srgb, var(--ember) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--ember) 35%, var(--line));
  border-radius:var(--radius-sm);padding:5px 14px;margin-bottom:20px;
}

/* problem visual */
.silo-vis{display:flex;gap:12px;justify-content:center;align-items:flex-end;margin-top:38px;flex-wrap:wrap}
.silo{
  width:96px;border:1px solid var(--line);border-radius:var(--radius) var(--radius) var(--radius-sm) var(--radius-sm);
  background:var(--panel);box-shadow:var(--shadow-sm);
  padding:12px 8px;text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.silo::after{content:"";display:block;height:34px;margin-top:10px;border-radius:3px;background:repeating-linear-gradient(45deg,#EDEAE1 0 6px,#F8F6F0 6px 12px)}
.silo-gap{align-self:center;color:var(--c3);font-size:18px}

/* path cards */
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---------- education library ---------- */
.vocab-tools{display:flex;gap:20px;align-items:flex-end;margin-bottom:22px;flex-wrap:wrap}
.vocab-count{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:12px}
.vocab-count span{color:var(--ember-deep);font-weight:600}
.vocab-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:38px}
.chip{
  font-family:var(--sans);font-size:12.5px;font-weight:500;padding:8px 16px;border-radius:var(--btn-radius);
  border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);cursor:pointer;transition:all .15s;
}
.chip:hover{border-color:var(--ink-faint);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.vocab-group{margin-bottom:44px}
.vocab-group-title{
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-deep);
  font-family:var(--sans);padding-bottom:12px;border-bottom:2px solid var(--line);margin-bottom:6px;
}
.vocab-dl{margin:0}
.vocab-item{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.vocab-item dt{
  font-family:var(--serif);font-size:21px;font-weight:400;color:var(--ink);margin-bottom:8px;
}
.vocab-item dd{margin:0;color:var(--ink-dim);font-size:15.5px;max-width:52em}
.vocab-note{
  margin-top:10px;padding-left:16px;border-left:3px solid var(--ember);
  font-style:italic;color:var(--ink);font-size:14.5px;
}
.vocab-empty{padding:40px 0;color:var(--ink-faint);font-style:italic}

/* component library */
.comp-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:48px}
.comp-nav a{
  display:block;text-decoration:none;padding:12px 10px;border-radius:0 0 var(--radius) var(--radius);text-align:center;
  border:1px solid var(--line);border-top:3px solid var(--cc);background:var(--panel);
  box-shadow:var(--shadow-sm);transition:transform .15s, box-shadow .15s;
}
.comp-nav a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.comp-nav .cn{font-family:var(--serif);font-size:16px;color:var(--cc)}
.comp-nav .ct{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);margin-top:4px;line-height:1.35}

.component{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);box-shadow:var(--shadow-sm);padding:40px 44px;margin-bottom:28px;scroll-margin-top:90px;
  transition:border-color .22s ease, box-shadow .22s ease;
}
.component::before{
  content:"";display:block;flex:none;
  width:30px;height:3px;border-radius:2px;background:var(--cc);margin-bottom:22px;
}
.component:hover{border-color:color-mix(in srgb, var(--cc) 34%, var(--line));box-shadow:var(--shadow-md)}
.component .comp-num{
  font-family:var(--serif);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc);font-weight:500;
}
.component h2{margin-top:6px}
.component .comp-statement{
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);
  margin-top:16px;padding-left:18px;border-left:3px solid var(--cc);
}
.comp-block{margin-top:26px}
.comp-block h4{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:9px;
}
.comp-block p{color:var(--ink-dim);font-size:15.5px;max-width:54em}
.comp-def{
  background:color-mix(in srgb, var(--cc) 6%, #fff);
  border:1px solid color-mix(in srgb, var(--cc) 30%, var(--line));
  border-radius:var(--radius);padding:20px 24px;
}
.comp-def p{color:var(--ink);font-family:var(--serif);font-size:17.5px;line-height:1.5}
.comp-list{list-style:none;margin-top:4px}
.comp-list li{
  padding:9px 0 9px 26px;position:relative;color:var(--ink-dim);font-size:15px;
}
.comp-list li::before{content:"";position:absolute;left:4px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--cc)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pill{
  font-size:12.5px;padding:6px 13px;border-radius:var(--radius-sm);
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-dim);
}
.pill.out{background:color-mix(in srgb, var(--cc) 9%, #fff);border-color:color-mix(in srgb, var(--cc) 30%, var(--line));color:var(--ink)}
.comp-standard{
  margin-top:26px;padding:20px 24px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);
}
.comp-standard .lbl{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cc)}
.comp-standard p{margin-top:7px;color:var(--ink);font-size:15.5px}
.blueprint-footer{
  text-align:center;font-family:var(--serif);font-style:italic;color:var(--ink-faint);
  font-size:15px;margin-top:36px;
}

/* shared intelligence loop */
.si-loop{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:none}
.si-loop li{
  position:relative;border:1px solid var(--line);border-top:3px solid var(--cc);border-radius:0 0 var(--radius) var(--radius);
  background:var(--panel);box-shadow:var(--shadow-sm);padding:20px 18px;text-align:center;
}
.si-loop li::after{
  content:"↓";position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  color:var(--ink-faint);font-size:14px;rotate:-90deg;
}
.si-loop li:last-child::after{content:"↻";rotate:0deg;right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%);color:var(--ember-deep)}
.si-loop .n{display:block;font-family:var(--serif);font-size:15px;color:var(--cc)}
.si-loop .s{display:block;margin-top:6px;font-size:13.5px;font-weight:500;color:var(--ink)}
@media (max-width:880px){.si-loop{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.si-loop{grid-template-columns:1fr}.si-loop li::after{display:none}}

/* download cards */
.dl-card{
  display:flex;gap:18px;align-items:flex-start;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:22px 24px;box-shadow:var(--shadow-sm);transition:transform .15s, box-shadow .15s;
}
.dl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.dl-icon{
  flex:none;width:44px;height:52px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--bg-2);display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--c3);
}
.dl-card h3{font-size:18px}
.dl-card p{margin-top:5px;font-size:13.5px;color:var(--ink-dim)}
.dl-card .meta{margin-top:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-deep);font-weight:600}

@media (max-width:980px){.comp-nav{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){
  .comp-nav{grid-template-columns:repeat(2,1fr)}
  .component{padding:28px 24px}
  .vocab-tools{flex-direction:column;align-items:stretch}
}

/* ---------- Founding 100 counter ---------- */
.f100-counter{
  border:1px solid color-mix(in srgb, var(--ember) 45%, var(--line));
  border-radius:var(--radius);background:var(--panel);
  box-shadow:var(--shadow-sm);padding:22px 26px;max-width:44em;
}
.f100-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.f100-label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-deep)}
.f100-status{font-size:14px;color:var(--ink-dim)}
.f100-status strong{font-family:var(--serif);font-size:22px;color:var(--ink);margin-right:2px}
.f100-bar{height:10px;border-radius:5px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;margin:14px 0 10px}
.f100-bar i{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--ember-2),var(--ember));
  transition:width .6s ease;
}
.f100-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-faint)}
.f100-price s{color:var(--ink-faint)}
.f100-price b{color:var(--ember-deep);margin-left:6px}
.f100-counter.is-closed{border-color:var(--line)}
.f100-counter.is-closed .f100-bar i{background:var(--ink-faint)}
.f100-inline{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ember-deep)}
.f100-inline strong{font-family:var(--serif);font-size:16px}
.f100-inline.closed{color:var(--ink-faint)}

/* price block */
.price-block{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px}
.price-was{font-family:var(--serif);font-size:26px;color:var(--ink-faint);text-decoration:line-through}
.price-now{font-family:var(--serif);font-size:38px;color:var(--ember-deep)}
.price-note{font-size:13px;color:var(--ink-dim)}

/* deliverables list */
.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.deliver div{padding:16px 20px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-dim)}
.deliver div:nth-child(2n){border-right:none}
.deliver div::before{content:"✓";color:var(--c5);font-weight:700;flex:none}
.deliver div strong{color:var(--ink);font-weight:600}
@media (max-width:620px){.deliver{grid-template-columns:1fr}.deliver div{border-right:none}}

/* tier comparison */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tier{
  border:1px solid var(--line);border-top:4px solid var(--tc,var(--ember));border-radius:0 0 var(--radius) var(--radius);
  background:var(--panel);box-shadow:var(--shadow-sm);padding:30px 32px;display:flex;flex-direction:column;
}
.tier .t-tag{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tc,var(--ember-deep))}
.tier h3{margin-top:8px;font-size:24px}
.tier .t-price{font-family:var(--serif);font-size:30px;color:var(--tc);margin:10px 0 4px}
.tier .t-sub{font-size:13.5px;color:var(--ink-faint);margin-bottom:18px}
.tier ul{list-style:none;margin:0 0 22px 0;flex:1}
.tier li{padding:8px 0 8px 26px;position:relative;font-size:14.5px;color:var(--ink-dim);border-bottom:1px dashed var(--line-soft)}
.tier li::before{content:"✓";position:absolute;left:2px;color:var(--tc);font-weight:700}
@media (max-width:760px){.tiers{grid-template-columns:1fr}}

/* session price list */
.session-list{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.session-row{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:13px 16px;border-bottom:1px solid var(--line-soft);background:var(--panel);
}
.session-row:last-child{border-bottom:none}
.session-row .s-name{font-weight:600;color:var(--ink);font-size:14.5px}
.session-row .s-detail{font-size:12.5px;color:var(--ink-faint);font-style:italic}
.session-row .s-price{font-family:var(--serif);font-size:19px;color:var(--ink)}
.session-row.bundle{background:var(--bg-2);border-top:1px solid var(--line)}
.session-row.bundle .s-price{color:var(--ember-deep)}
@media (max-width:520px){
  .session-row{grid-template-columns:1fr auto}
  .session-row .s-detail{display:none}
}

/* "is not" row */
.not-row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  padding:22px 26px;border:1px dashed var(--line);border-radius:var(--radius);
  background:var(--panel);max-width:56em;margin:0 auto;
}
.not-label{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c3);margin-right:6px;
}
.not-item{
  font-size:14px;color:var(--ink-faint);text-decoration:line-through;
  padding:5px 13px;border-radius:var(--radius-sm);background:var(--bg-2);
}

/* layered architecture diagram */
.stack-diagram{margin-top:32px;display:flex;flex-direction:column;gap:8px;max-width:52em}
.stack-diagram .layer{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:16px 22px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
/* The accent as an inset strip, clipped by the card's own radius, rather
   than a border-left that squares off where the corner curves. */
.stack-diagram .layer::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lc);
}
.stack-diagram .l-label{font-family:var(--serif);font-size:19px;color:var(--lc);min-width:9em}
.stack-diagram .l-role{font-size:14px;color:var(--ink-dim)}

/* emotional opening */
.opening{max-width:44em;margin:0 auto;text-align:center}
.opening p{color:var(--ink-dim);font-size:17px;margin-bottom:14px}
.opening-lead{
  font-family:var(--serif);font-size:clamp(22px,3vw,30px);line-height:1.35;
  color:var(--ink)!important;margin-bottom:16px!important;
}
.opening-turn{
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,25px);
  color:var(--ember-deep)!important;margin:24px 0 16px!important;
}
.all-without{
  margin-top:34px;text-align:center;font-family:var(--serif);font-size:clamp(18px,2.2vw,23px);
  color:var(--ink);padding:18px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}

/* global assessment CTA band */
.assess-band{
  padding:64px 0;background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.assess-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
.assess-copy h2{font-size:clamp(22px,2.8vw,31px);margin-top:4px}
.assess-copy p{margin-top:12px;color:var(--ink-dim);font-size:15.5px;max-width:34em}
.assess-copy .btn-row{margin-top:22px}
@media (max-width:880px){.assess-inner{grid-template-columns:1fr}}

/* hero strapline */
.hero-strap{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,22px);
  color:var(--ember-deep);margin-top:14px;
}

/* badge card */
.badge-card{
  max-width:26em;margin:0 auto;text-align:center;padding:38px 40px;
  border:2px solid var(--ember);border-radius:var(--radius);
  background:linear-gradient(180deg,#FFFDF7,var(--panel));box-shadow:var(--shadow-md);
}
.badge-mark{margin-bottom:16px}
.badge-title{font-family:var(--serif);font-size:26px;color:var(--ink);letter-spacing:.02em}
.badge-org{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ember-deep);margin-top:8px}
.badge-role{font-size:13px;color:var(--ink-dim);margin-top:4px}
.badge-rule{height:1px;background:var(--line);margin:18px auto;width:60%}
.badge-body{font-size:13px;color:var(--ink-dim);line-height:1.6}
.badge-hx{margin-top:16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* large-screen grid comfort */
@media (min-width:1680px){
  .grid{gap:22px}
  .section{padding:104px 0}
  .home-hero{padding:130px 0 100px}
  .hero-logo{max-width:760px}
}
@media (min-width:1920px){
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .section{padding:116px 0}
  .hero-logo{max-width:820px}
}

/* implementation partner block */
.partner-block{padding:64px 0}
.partner-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);box-shadow:var(--shadow-md);padding:44px 48px;
}
.partner-card::before{
  content:"";display:block;flex:none;
  width:30px;height:3px;border-radius:2px;background:var(--c2);margin-bottom:22px;
}
.partner-card .screen-tag{
  color:var(--c2);background:color-mix(in srgb, var(--c2) 10%, #fff);
  border-color:color-mix(in srgb, var(--c2) 35%, var(--line));
}
.partner-card h2{max-width:18em}
.partner-card h2 em{color:var(--c2)}
.partner-card .lede{max-width:52em}
@media (max-width:620px){.partner-card{padding:30px 26px}}

/* trademark footnote */
.tm-note{font-size:12px;color:var(--ink-faint);font-style:italic;margin-top:28px;max-width:52em}

/* ---------- contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
.form-card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:34px;box-shadow:var(--shadow-sm);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--bg);
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(232,176,75,.2);
}
.field textarea{min-height:150px;resize:vertical}
.form-note{font-size:12px;color:var(--ink-faint);margin-top:14px}
.notice{
  border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;font-size:14.5px;border:1px solid;
}
.notice.ok{background:#F0F7F1;border-color:#BEDCC6;color:#25603B}
.notice.err{background:#FBF1F4;border-color:#E8C4D2;color:#8E3A5D}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* wp content fallback */
.entry-content{max-width:46em;color:var(--ink-dim)}
.entry-content h2,.entry-content h3{color:var(--ink);margin:34px 0 12px}
.entry-content p{margin:14px 0}
.entry-content a{color:var(--ember-deep)}
.entry-content ul,.entry-content ol{margin:14px 0 14px 22px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .stations{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  .site-nav a{padding:9px 10px;font-size:13.2px}
  .brand-logo{height:44px}
}
@media (max-width:1000px){
  .site-nav a{padding:8px 8px;font-size:12.6px}
  .header-cta .btn{padding:11px 18px;font-size:13px}
}
@media (max-width:880px){
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);padding:12px 24px 20px;
    box-shadow:var(--shadow-md);max-height:78vh;overflow-y:auto;
  }
  .site-nav.open{display:block}
  .site-nav .nav-list{flex-direction:column;gap:0;flex-wrap:wrap;align-items:stretch}
  .site-nav a{padding:12px 8px;font-size:15px}
  /* dropdowns become inline sections on mobile */
  .site-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:transparent;
    padding:0 0 8px 14px;min-width:0;border-left:2px solid var(--line);margin:0 0 6px 8px;
  }
  .site-nav .sub-menu a{font-size:14px;padding:9px 8px}
  .site-nav .caret{display:none}
  .nav-toggle{display:block}
  .header-cta{display:none}
  .grid.c3{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline>div:nth-child(2n){border-right:none}
  .timeline>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .panel-mock .inner{grid-template-columns:1fr 1fr}
  .path-grid{grid-template-columns:1fr 1fr}
  .ruler .row,.ruler .cap{grid-template-columns:120px 1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .container{padding:0 22px}
  .grid.c2,.grid.c3,.grid.c4,.path-grid{grid-template-columns:1fr}
  .stations{grid-template-columns:repeat(2,1fr)}
  .kpi-pair{flex-direction:column}
  .kpi-pair>div:first-child{border-right:none;border-bottom:1px solid var(--line)}
  .timeline{grid-template-columns:1fr}
  .timeline>div{border-right:none;border-bottom:1px solid var(--line)}
  .timeline>div:last-child{border-bottom:none}
  .panel-mock .inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .section{padding:64px 0}
  .home-hero{padding:80px 0 64px}
}

/* certification session layout */
.session-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin-top:24px}
.flow-list{margin:0;padding-left:20px;color:var(--ink-dim);font-size:15px}
.flow-list li{padding:6px 0}
.flow-list li::marker{color:var(--cc);font-weight:600}
@media (max-width:980px){.session-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.session-grid{grid-template-columns:1fr}}

/* logo story stage */
.logo-stage{
  max-width:760px;margin:0 auto;padding:34px 30px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);box-shadow:var(--shadow-sm);
}
.logo-stage img{display:block;width:100%;height:auto}
@media (max-width:620px){.logo-stage{padding:20px 16px}}

/* ---------- Founding 100 hook (home page) ---------- */
.f100-hook{
  padding:56px 0;
  background:
    radial-gradient(700px 300px at 20% 0%, color-mix(in srgb, var(--ember) 10%, transparent) 0%, transparent 70%),
    var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.f100-hook-inner{
  display:grid;grid-template-columns:1.35fr .85fr;gap:44px;align-items:center;
}
.f100-hook-copy h2{font-size:clamp(24px,3.1vw,34px);max-width:16em;margin-top:4px}
.f100-hook-copy p{margin-top:14px;color:var(--ink-dim);font-size:16.5px;max-width:40em}
.f100-hook-note{
  font-family:var(--serif);font-style:italic;font-size:19px;
  color:var(--ember-deep)!important;margin-top:16px!important;
}
.f100-hook-copy .btn-row{margin-top:26px}
.f100-hook-meter{text-align:center}
.f100-big{
  font-family:var(--serif);font-size:clamp(64px,9vw,104px);line-height:1;
  color:var(--ember-deep);
}
.f100-big-label{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin:8px 0 20px;
}
@media (max-width:900px){
  .f100-hook-inner{grid-template-columns:1fr;gap:30px}
  .f100-hook-meter{text-align:left}
}

/* -------------------------------------------------
 * A note from the founder — home page
 * ------------------------------------------------- */
.founder-note{
  background:
    radial-gradient(120% 100% at 88% 0%, color-mix(in srgb, var(--c3) 8%, transparent) 0%, transparent 62%),
    var(--bg);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.founder-inner{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:clamp(34px,4.4vw,64px);
  align-items:start;
}
.founder-portrait{margin:0;position:sticky;top:110px}
.founder-portrait img{
  display:block;width:100%;height:auto;border-radius:50%;
  background:var(--bg-alt);
  box-shadow:0 18px 44px -22px rgba(20,26,40,.42);
  outline:1px solid var(--rule);
  outline-offset:10px;
}
.founder-portrait figcaption{
  display:flex;flex-direction:column;gap:2px;
  margin-top:26px;text-align:center;
}
.founder-name{
  font-family:var(--font-display);font-size:21px;letter-spacing:.01em;color:var(--ink);
}
.founder-role{font-size:13px;line-height:1.5;color:var(--ink-soft)}

.founder-copy h2{
  font-size:clamp(28px,3.6vw,40px);
  margin:6px 0 22px;
}
.founder-copy p{
  font-size:clamp(16px,1.15vw,17.5px);
  line-height:1.75;color:var(--ink-soft);
  max-width:34em;margin:0 0 15px;
}
.founder-copy p em{color:var(--ink);font-style:italic}
.founder-close{
  font-family:var(--font-display);
  font-size:clamp(19px,1.9vw,23px)!important;
  line-height:1.5!important;color:var(--ink)!important;
  border-left:2px solid var(--ember);
  padding-left:20px;margin:26px 0 0!important;
}
.founder-sig{margin:28px 0 4px}
.sig-name{
  display:block;font-family:var(--font-display);font-style:italic;
  font-size:26px;color:var(--ember);line-height:1.2;
}
.sig-line{
  display:block;margin-top:6px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.founder-copy .btn-row{margin-top:26px}

@media (max-width:900px){
  .founder-inner{grid-template-columns:1fr;gap:30px;justify-items:start}
  .founder-portrait{position:static;width:180px;max-width:45vw}
  .founder-portrait figcaption{text-align:left;margin-top:20px}
  .founder-close{padding-left:16px}
}

/* =====================================================
   EDITORIAL LAYER v3.4 — home page
   Institute, not vendor: large quiet display type,
   hairline rules, numbered sections, varied rhythm.
   ===================================================== */

/* ---------- refined header ---------- */
.header-rule{
  height:3px;
  background:linear-gradient(90deg,
    var(--c3) 0%, var(--c1) 17%, var(--c5) 33%,
    var(--c2) 50%, var(--c7) 67%, var(--c4) 83%, var(--c6) 100%);
  opacity:.9;
}
.site-header{transition:box-shadow .25s ease, background .25s ease}
.header-inner{padding:22px var(--gutter);transition:padding .25s ease}
.brand-logo{height:60px;transition:height .25s ease}
.site-nav .nav-list{gap:4px}
.site-nav > ul > li > a{
  font-size:14.5px;font-weight:500;letter-spacing:.005em;padding:10px 15px;color:var(--ink);
}
.site-nav > ul > li > a:hover{background:transparent;color:var(--ember-deep)}
.site-nav > ul > li{position:relative}
.site-nav > ul > li > a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1.5px;
  background:var(--ember-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.site-nav > ul > li:hover > a::after,
.site-nav > ul > li:focus-within > a::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:18px}
.header-cta .btn{padding:13px 24px}

.header-seats{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  padding-right:18px;border-right:1px solid var(--line);
}
.header-seats .hs-n{
  font-family:var(--serif);font-size:26px;line-height:1;color:var(--ember-deep);
}
.header-seats .hs-l{
  font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);line-height:1.35;
}
.header-seats:hover .hs-l{color:var(--ink-dim)}

/* condensed on scroll */
.site-header.is-condensed{box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(22,32,58,.5)}
.site-header.is-condensed .header-inner{padding:10px var(--gutter)}
.site-header.is-condensed .brand-logo{height:40px}
.site-header.is-condensed .header-seats{display:none}

@media (max-width:1180px){ .header-seats{display:none} }

/* ---------- shared editorial primitives ---------- */
.ed-num{
  display:block;font-family:var(--serif);font-size:13px;font-weight:500;
  letter-spacing:.16em;color:var(--ember-deep);margin-bottom:14px;
}
.ed-num::after{
  content:"";display:block;width:34px;height:1.5px;background:var(--ember-deep);
  margin-top:9px;opacity:.55;
}
.ed-eyebrow{
  display:block;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px;
}
.ed-lede{font-size:17.5px;line-height:1.7;color:var(--ink-dim);max-width:40em;margin-top:20px}
.ed-strap{
  font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,19px);
  color:var(--ember-deep);margin-top:14px;
}
.ed-sec{padding:clamp(80px,8vw,132px) 0}
.ed-sec.alt{
  background:var(--bg-2);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.ed-head{max-width:30em;margin-bottom:clamp(44px,5vw,68px)}
.ed-head h2{font-size:clamp(30px,4vw,46px);line-height:1.15}

/* two-column split: sticky aside + body */
.ed-split{display:grid;grid-template-columns:0.92fr 1.35fr;gap:clamp(40px,6vw,96px);align-items:start}
.ed-aside{position:sticky;top:130px}
.ed-aside h2{font-size:clamp(28px,3.5vw,42px);line-height:1.14}
.ed-aside .btn-row{margin-top:30px}

/* numbered index list — replaces the uniform card grid */
.ed-index{list-style:none;counter-reset:none;margin:0}
.ed-index li{
  display:grid;grid-template-columns:56px 1fr;gap:0 4px;
  padding:24px 0;border-top:1px solid var(--line);
  transition:background .2s ease;
}
.ed-index li:last-child{border-bottom:1px solid var(--line)}
.ed-index .ei-n{
  font-family:var(--serif);font-size:13px;letter-spacing:.1em;
  color:var(--cc,var(--ink-faint));padding-top:5px;
}
.ed-index .ei-t{
  display:block;font-family:var(--serif);font-size:clamp(19px,2vw,23px);
  line-height:1.3;color:var(--ink);
}
.ed-index .ei-d{display:block;margin-top:8px;font-size:15px;line-height:1.65;color:var(--ink-dim);max-width:34em}
.ed-index li::before{content:none}
.ed-index li:hover .ei-t{color:var(--cc,var(--ink))}
.ed-index.tight li{padding:20px 0}
.ed-index li.is-final .ei-t{color:var(--ember-deep)}

/* the consequence block that closes section 01 */
.ed-consequence{
  margin-top:34px;padding:30px 34px;border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--c3) 34%, var(--line));
  background:color-mix(in srgb, var(--c3) 5%, var(--panel));
}
.ec-tag{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c3);margin-bottom:10px;
}
.ed-consequence h3{font-size:clamp(24px,2.6vw,30px);color:var(--ink)}
.ed-consequence p{margin-top:8px;font-size:15.5px;color:var(--ink-dim)}

/* display pull-quote */
.ed-quote{
  margin:clamp(56px,6vw,88px) auto 0;max-width:34em;text-align:center;
}
.ed-quote p{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(22px,2.9vw,34px);line-height:1.38;color:var(--ink);
}
.ed-quote .accent{color:var(--ember-deep);font-style:normal}
.ed-quote::before{
  content:"";display:block;width:46px;height:1.5px;background:var(--ember-deep);
  opacity:.5;margin:0 auto 30px;
}

/* two-column hairline ledger */
.ed-ledger{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(34px,5vw,80px);
  border-top:1px solid var(--line);
}
.ed-row{
  display:grid;grid-template-columns:44px 1fr;gap:2px 6px;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.ed-row .er-n{
  grid-row:1 / span 2;font-family:var(--serif);font-size:12.5px;letter-spacing:.1em;
  color:var(--ink-faint);padding-top:6px;
}
.ed-row .er-t{font-family:var(--serif);font-size:clamp(18px,1.9vw,21px);line-height:1.3;color:var(--ink)}
.ed-row .er-d{font-size:14.5px;line-height:1.6;color:var(--ink-dim)}
.ed-without{
  margin-top:38px;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.9vw,21px);color:var(--ember-deep);
}

/* asymmetric numbered features */
/* The numbered feature card.

   Was: a 3px coloured bar down the left edge plus an 84px ghosted
   numeral. The bar is a dated pattern and it fought the corner radius —
   a straight rule squares off exactly where the corner curves, so the
   colour appeared to leak past the card. The numeral, at 32% opacity in
   a 112px column, was decoration occupying a sixth of the width.

   Now: the numeral carries the accent itself, with the same short
   kicker rule the cards use, and the column is narrower so the writing
   gets the room. */
.ed-feature{
  --fc:var(--cc,var(--ember));
  display:grid;grid-template-columns:clamp(54px,4.8vw,78px) 1fr;
  gap:clamp(20px,2.4vw,32px);
  padding:clamp(28px,3.2vw,40px) clamp(26px,3vw,40px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  margin-bottom:20px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease,
             border-color .22s ease;
}
.ed-feature:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb, var(--fc) 38%, var(--line));
}
.ed-feature .ef-num{
  font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(32px,3.2vw,44px);
  color:var(--fc,var(--ember));opacity:.92;
  letter-spacing:.02em;
}
/* the same kicker rule the cards carry, so one visual language */
.ef-num::after{
  content:"";display:block;
  width:24px;height:3px;border-radius:2px;
  background:var(--fc,var(--ember));
  margin-top:14px;opacity:.55;
  transition:width .28s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
}
.ed-feature:hover .ef-num::after{width:38px;opacity:1}
.ed-feature h3{font-size:clamp(21px,2.4vw,28px);line-height:1.25}
.ed-feature .ef-body > p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--ink-dim);max-width:44em}
.ed-feature .ef-strong{color:var(--ink);font-weight:600}
.ed-feature .stations{margin-top:24px}
.ed-feature .ef-kpi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:center}
.ed-feature .ef-kpi > div:first-child p{margin-top:12px;font-size:15.5px;color:var(--ink-dim)}
.ed-feature .ef-list{list-style:none;margin-top:18px}
.ed-feature .ef-list li{
  padding:10px 0 10px 22px;position:relative;font-size:15px;color:var(--ink-dim);
  border-bottom:1px dashed var(--line);
}
.ed-feature .ef-list li::before{
  content:"";position:absolute;left:2px;top:18px;width:7px;height:7px;border-radius:50%;
  background:var(--cc,var(--ember));
}
.ed-feature .ef-note{margin-top:14px;font-size:14.5px;color:var(--ink-faint)}
.ed-feature .ef-link{
  display:inline-block;margin-top:18px;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cc,var(--ember-deep));text-decoration:none;
}
.ed-feature .ef-link:hover{text-decoration:underline;text-underline-offset:4px}
.ed-feature-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}
.ed-feature-pair .ed-feature{margin-bottom:0;height:100%}

/* EOF manifesto panel */
.ed-manifesto{
  padding:clamp(44px,5.4vw,76px) clamp(34px,5vw,72px);
  border-radius:0 0 var(--radius) var(--radius);background:var(--panel);
  border:1px solid var(--line);border-top:3px solid var(--c2);
  box-shadow:var(--shadow-md);
  background-image:radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--c2) 7%, transparent) 0%, transparent 60%);
}
.ed-manifesto h2{font-size:clamp(28px,3.6vw,42px);max-width:16em}
.ed-manifesto h2 em{color:var(--c2)}
.ed-manifesto .ed-num{color:var(--c2)}
.ed-manifesto .ed-num::after{background:var(--c2)}
.ed-manifesto .ed-lede{max-width:46em;font-style:italic}
.ed-manifesto .pill-row{margin-top:26px}
.ed-manifesto .btn-row{margin-top:30px}

/* assessment price row */
.ed-price-row{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,72px);align-items:center;
  padding-bottom:clamp(48px,5vw,72px);border-bottom:1px solid var(--line);
}
.ed-price .price-note{margin-top:16px;max-width:34em}
.ed-price .btn-row{margin-top:28px}

/* deliverables ledger */
.ed-deliver-block{margin-top:clamp(48px,5vw,72px)}
.ed-sub{margin-bottom:30px}
.ed-sub .ed-eyebrow{margin-bottom:10px}
.ed-deliver{
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(34px,5vw,72px);border-top:1px solid var(--line);
}
.ed-deliver li{
  display:grid;grid-template-columns:42px 1fr;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;color:var(--ink-dim);
}
.ed-deliver .dl-n{font-family:var(--serif);font-size:12px;letter-spacing:.1em;color:var(--ink-faint)}
.ed-deliver .dl-t strong{color:var(--ink);font-weight:600}

/* education portals */
.ed-portals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.ed-portal{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  padding:clamp(30px,3.2vw,42px) clamp(20px,2.2vw,30px);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  position:relative;transition:background .22s ease;
}
.ed-portal:first-child{border-left:1px solid var(--line)}
.ed-portal::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;
  background:var(--cc);transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.ed-portal:hover{background:var(--panel)}
.ed-portal:hover::before{transform:scaleX(1)}
.ep-tag{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.ep-t{
  display:block;margin-top:16px;font-family:var(--serif);
  font-size:clamp(21px,2.3vw,27px);line-height:1.22;color:var(--ink);
}
.ep-d{display:block;margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--ink-dim);flex:1}
.ep-go{
  display:block;margin-top:22px;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cc);
}

/* ---------- hero refinements ---------- */
.ed-hero{padding:clamp(76px,8vw,124px) 0 clamp(64px,7vw,104px)}
.ed-hero .hero-logo{max-width:560px;margin-bottom:34px}
.ed-hero h1{
  font-size:clamp(36px,5.4vw,68px);font-weight:300;line-height:1.08;
  letter-spacing:-.022em;max-width:16em;
}
.ed-strap{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin:26px auto 0;max-width:34em;
}
.ed-strap::before,.ed-strap::after{content:"";flex:1;height:1px;background:var(--line)}
.ed-strap span{
  font-family:var(--serif);font-style:italic;white-space:nowrap;
  font-size:clamp(15px,1.5vw,18px);color:var(--ember-deep);
}
.ed-hero .lede{max-width:36em;font-size:clamp(16px,1.35vw,18.5px);margin-top:30px}
.ed-hero-italic{
  margin:16px auto 0;max-width:36em;font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,1.5vw,19px);color:var(--ink-dim);
}
.btn-lg{padding:17px 34px;font-size:15px}
.ed-hero .btn-row{margin-top:42px}
.ed-hero-foot{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--line);
  max-width:30em;margin-left:auto;margin-right:auto;
  display:flex;justify-content:center;
}

/* ---------- opening statement ---------- */
.ed-open{padding:clamp(72px,7.5vw,116px) 0;text-align:center}
.ed-open-inner{max-width:38em;margin:0 auto}
.ed-open-lead{
  font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.2vw,38px);
  line-height:1.24;color:var(--ink);
}
.ed-open-body{margin-top:22px;font-size:17px;line-height:1.75;color:var(--ink-dim)}
.ed-open-body strong{color:var(--ink);font-weight:600}
.ed-open-turn{
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line);
  font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.6vw,30px);color:var(--ember-deep);
}

/* founder note picks up the editorial numbering */
.founder-note .ed-num{margin-bottom:12px}
.founder-copy h2{font-size:clamp(30px,3.8vw,44px)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .ed-split{grid-template-columns:1fr;gap:38px}
  .ed-aside{position:static}
  .ed-feature-pair{grid-template-columns:1fr}
}
@media (max-width:860px){
  .ed-ledger,.ed-deliver{grid-template-columns:1fr}
  .ed-portals{grid-template-columns:repeat(2,1fr)}
  .ed-portal:nth-child(odd){border-left:1px solid var(--line)}
  .ed-price-row{grid-template-columns:1fr;gap:34px}
  .ed-feature .ef-kpi{grid-template-columns:1fr;gap:20px}
  .ed-feature{grid-template-columns:1fr;gap:6px}
  .ed-feature .ef-num{font-size:44px}
}
@media (max-width:620px){
  .ed-portals{grid-template-columns:1fr}
  .ed-portal{border-left:1px solid var(--line)}
  .ed-index li{grid-template-columns:38px 1fr}
  .ed-strap::before,.ed-strap::after{display:none}
}

/* =====================================================
   HOME HERO v3.5 — founder-led, two column
   ===================================================== */
.ed-hero{
  position:relative;overflow:hidden;text-align:left;
  padding:clamp(48px,5.4vw,84px) 0 0;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
/* soft brand wash sitting behind the portrait */
.hero-wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 78% at 78% 74%, color-mix(in srgb, var(--c4) 14%, transparent) 0%, transparent 68%),
    radial-gradient(38% 62% at 92% 18%, color-mix(in srgb, var(--ember) 17%, transparent) 0%, transparent 70%),
    radial-gradient(50% 60% at 12% 6%,  color-mix(in srgb, var(--c2) 9%, transparent) 0%, transparent 72%);
}
.ed-hero .container{position:relative;z-index:1}

.hero-grid{
  display:grid;grid-template-columns:1.18fr .82fr;
  gap:clamp(20px,2.6vw,44px);align-items:end;
  min-height:clamp(520px,70vh,720px);
}
.hero-copy{align-self:center;padding-bottom:clamp(34px,4vw,62px);max-width:none}

.hero-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:18px;
}
.ed-hero h1{
  font-size:clamp(32px,4.1vw,54px);font-weight:300;line-height:1.07;
  letter-spacing:-.024em;max-width:none;margin:0;
}
/* strap: rule only on the right, since the block is left-aligned now */
.ed-hero .ed-strap{
  justify-content:flex-start;margin:20px 0 0;max-width:none;
}
.ed-hero .ed-strap::before{display:none}
.ed-hero .ed-strap::after{max-width:120px}
.ed-hero .lede{margin:22px 0 0;max-width:31em;text-align:left;font-size:clamp(15px,1.15vw,16.5px)}
.ed-hero .ed-hero-italic{margin:12px 0 0;max-width:31em;font-size:clamp(15px,1.3vw,17px)}
.ed-hero .btn-row{justify-content:flex-start;margin-top:30px;gap:12px}
.ed-hero .btn-lg{padding:15px 26px;font-size:14px}
.ed-hero .ed-hero-foot{
  margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line);
  max-width:26em;justify-content:flex-start;
}

/* the founder, standing in an arch so the base crop reads as intentional */
.hero-founder{
  position:relative;margin:0;align-self:end;
  display:flex;justify-content:center;align-items:flex-end;
  padding-top:26px;
}
.hero-founder::before{                 /* the arch */
  content:"";position:absolute;z-index:0;
  left:50%;transform:translateX(-50%);bottom:0;
  width:min(100%,486px);height:82%;
  border-radius:999px 999px 0 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c4) 15%, var(--bg-2)) 0%,
      color-mix(in srgb, var(--ember) 9%, var(--bg-2)) 62%,
      var(--bg-2) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.hero-founder picture{position:relative;z-index:1;display:block;line-height:0}
.hero-founder img{
  display:block;width:auto;max-width:100%;
  height:clamp(420px,58vh,632px);
  object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 26px 34px rgba(22,32,58,.22));
}
.hero-plate{
  position:absolute;left:0;bottom:34px;z-index:2;
  display:flex;flex-direction:column;gap:3px;
  padding:14px 20px;border-radius:var(--radius);
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
  overflow:hidden;
}
.hero-plate::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ember);
}
.hp-name{font-family:var(--serif);font-size:17px;line-height:1.15;color:var(--ink)}
.hp-role{font-size:11.5px;letter-spacing:.03em;color:var(--ink-dim)}

/* ---- founder note at the foot of the page: signature, no repeat photo ---- */
.founder-inner.is-signature{grid-template-columns:.62fr 1.38fr}
.founder-mark{
  display:flex;flex-direction:column;position:sticky;top:130px;
  padding-left:clamp(0px,1vw,10px);
}
.fm-quote{
  font-family:var(--serif);font-size:clamp(72px,8vw,116px);line-height:.7;
  color:var(--ember);opacity:.34;
}
.fm-rule{display:block;width:52px;height:1.5px;background:var(--ember-deep);opacity:.55;margin:22px 0 20px}
.fm-name{font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.2}
.fm-role{font-size:13px;line-height:1.55;color:var(--ink-dim);margin-top:4px}

/* ---------- hero responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{padding-bottom:44px;max-width:none}
  .ed-hero .ed-strap::after{max-width:none}
  .hero-founder img{max-height:none;width:min(78%,420px)}
  .hero-plate{left:50%;transform:translateX(-50%);bottom:14px;text-align:center;align-items:center}
  .founder-inner.is-signature{grid-template-columns:1fr}
  .founder-mark{position:static;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 14px}
  .fm-rule{display:none}
  .fm-quote{font-size:56px}
}
@media (max-width:620px){
  .ed-hero{padding-top:34px}
  .ed-hero h1{font-size:clamp(30px,8.4vw,40px)}
  .hero-founder img{width:min(88%,340px)}
  .ed-hero .btn-row .btn{width:100%;text-align:center}
}

/* ---- Founding 100™ meter inside section 06 (single instance on home) ---- */
.f100-meter{margin:30px 0 4px}
.f100-meter .f100-big{
  font-family:var(--serif);font-weight:300;line-height:.86;
  font-size:clamp(58px,7vw,92px);color:var(--ember-deep);
}
.f100-meter .f100-big-label{
  margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
}
.f100-meter .f100-counter{margin-top:20px}
.ed-price-row.single{grid-template-columns:1fr}
.ed-price-row.single .ed-price{max-width:40em}
/* the big numeral already states the count — don't repeat it in the bar head */
.f100-meter .f100-counter .f100-status{display:none}
.f100-meter .f100-counter .f100-head{margin-bottom:10px}

/* =====================================================
   SECTION ARTWORK v3.6
   Inline SVG concept drawings filling the empty halves.
   ===================================================== */
.pri-art{display:block;width:100%;height:auto;overflow:visible}

/* head split: copy left, drawing right */
.ed-head.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(30px,4.4vw,72px);align-items:center;max-width:none;
}
.ed-head.split > div:first-child{max-width:30em}
.ed-head-art{justify-self:end;width:100%;max-width:520px}
.ed-head-art.small{max-width:290px}
.ed-head-art .pri-art{filter:drop-shadow(0 12px 26px rgba(22,32,58,.07))}

/* the leak drawing under the section 01 headline */
.aside-art{
  margin-top:clamp(30px,3.4vw,46px);
  padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--line);
  max-width:430px;
}

/* assessment: price left, the result you get back on the right */
.ed-price-art{justify-self:end;width:100%;max-width:420px}

@media (max-width:1080px){
  .ed-head.split{grid-template-columns:1fr;gap:34px}
  .ed-head.split > div:first-child{max-width:none}
  .ed-head-art{justify-self:start;max-width:440px}
  .ed-head-art.small{max-width:250px}
  .aside-art{max-width:none}
  .ed-price-art{justify-self:start;max-width:380px}
}
@media (max-width:620px){
  .ed-head-art,.ed-price-art{max-width:100%}
  .art-volumes{max-width:220px}
}

/* ---- founder note as a centred letter (no empty side column) ---- */
.founder-inner.is-letter{
  display:block;max-width:41em;margin:0 auto;text-align:left;
}
.founder-inner.is-letter .fm-quote{
  display:block;text-align:center;
  font-family:var(--serif);font-size:clamp(66px,7vw,104px);line-height:.62;
  color:var(--ember);opacity:.32;margin-bottom:26px;
}
.founder-inner.is-letter .ed-num,
.founder-inner.is-letter .ed-eyebrow{text-align:center}
.founder-inner.is-letter .ed-num{margin-left:auto;margin-right:auto;width:max-content}
.founder-inner.is-letter .ed-num::after{margin-left:auto;margin-right:auto}
.founder-inner.is-letter .founder-copy h2{
  text-align:center;margin-bottom:34px;
  font-size:clamp(30px,3.8vw,46px);
}
.founder-inner.is-letter .founder-copy p{max-width:none;font-size:17px;line-height:1.8}
.founder-inner.is-letter .founder-close{
  border-left:none;padding-left:0;text-align:center;
  border-top:1px solid var(--line);padding-top:30px;margin-top:36px!important;
}
.founder-inner.is-letter .founder-sig{text-align:center;margin-top:30px}
.founder-inner.is-letter .btn-row{justify-content:center;margin-top:30px}

/* =====================================================
   FOCUS LAYER v3.7
   ===================================================== */

/* ---- 1. scroll progress along the header's colour rule ---- */
.header-rule{position:relative;background:var(--line-soft);overflow:hidden}
.header-rule i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,
    var(--c3) 0%, var(--c1) 17%, var(--c5) 33%,
    var(--c2) 50%, var(--c7) 67%, var(--c4) 83%, var(--c6) 100%);
}

/* ---- 2. the section rail ---- */
.pri-rail{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:90;
  display:none;flex-direction:column;gap:2px;
  padding:10px 4px;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.pri-rail.is-visible{opacity:1;pointer-events:auto}
/* only appears where there is gutter to spare */
@media (min-width:1440px){ .pri-rail{display:flex} }

.rail-item{
  position:relative;
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:7px 0;text-decoration:none;cursor:pointer;
}
/* absolutely positioned so the rail's own footprint stays ~46px wide and
   never intercepts pointer events over the page content */
.rail-label{
  position:absolute;right:calc(100% + 12px);top:50%;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);white-space:nowrap;
  padding:5px 11px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(-50%) translateX(6px);pointer-events:none;
  transition:opacity .26s ease, transform .26s ease, color .26s ease;
}
.rail-num{
  font-family:var(--serif);font-size:11px;letter-spacing:.08em;
  color:var(--ink-faint);opacity:.55;transition:opacity .25s, color .25s;
}
.rail-dash{
  display:block;width:16px;height:2px;border-radius:2px;
  background:var(--ink-faint);opacity:.4;
  transition:width .32s cubic-bezier(.22,1,.36,1), background .28s, opacity .28s;
}
.pri-rail:hover .rail-label{opacity:1;transform:translateY(-50%) translateX(0)}
.rail-item:hover .rail-dash{width:26px;opacity:.85;background:var(--ink-dim)}
.rail-item:hover .rail-num{opacity:1}
.rail-item.is-active .rail-dash{width:34px;opacity:1;background:var(--ember-deep)}
.rail-item.is-active .rail-num{color:var(--ember-deep);opacity:1}
.pri-rail:hover .rail-item.is-active .rail-label{color:var(--ink)}

/* ---- 3. refined reveal: rise, don't just fade ---- */
html.js .reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .66s cubic-bezier(.22,1,.36,1),
             transform .66s cubic-bezier(.22,1,.36,1);
}
/* No will-change here on purpose: this class lands on ~60 nodes, and promoting
   every one of them to its own compositor layer costs far more than the
   transition saves. */
html.js .reveal.in{opacity:1;transform:none}

/* staggered children — the eye walks the list instead of meeting it all at once */
.ed-index li.in,.ed-row.in,.ed-deliver li.in,.ed-portal.in,.ed-feature.in{transition-delay:var(--sd,0ms)}
.ed-index li:nth-child(1),.ed-row:nth-child(1),.ed-deliver li:nth-child(1),.ed-portal:nth-child(1){--sd:0ms}
.ed-index li:nth-child(2),.ed-row:nth-child(2),.ed-deliver li:nth-child(2),.ed-portal:nth-child(2){--sd:70ms}
.ed-index li:nth-child(3),.ed-row:nth-child(3),.ed-deliver li:nth-child(3),.ed-portal:nth-child(3){--sd:140ms}
.ed-index li:nth-child(4),.ed-row:nth-child(4),.ed-deliver li:nth-child(4),.ed-portal:nth-child(4){--sd:210ms}
.ed-index li:nth-child(5),.ed-row:nth-child(5),.ed-deliver li:nth-child(5){--sd:280ms}
.ed-index li:nth-child(6),.ed-row:nth-child(6),.ed-deliver li:nth-child(6){--sd:350ms}
.ed-deliver li:nth-child(7){--sd:420ms}
.ed-deliver li:nth-child(8){--sd:490ms}

/* ---- 4. the graphics draw themselves, once ---- */
.pri-art .rope-strand,
.pri-art .orb-line,
.pri-art .leak-line,
.pri-art .gauge-value{stroke-dasharray:1;stroke-dashoffset:1}
.pri-art .rope-node,
.pri-art .orb-node,
.pri-art .leak-drip,
.pri-art .vol{opacity:0}
.pri-art .score-bar{transform:scaleX(0);transform-origin:240px 0}

.pri-art.art-in .rope-strand{animation:pri-draw 1.15s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * 90ms)}
.pri-art.art-in .rope-node{animation:pri-pop .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * 90ms)}
.pri-art.art-in .orb-line{animation:pri-draw .8s ease-out forwards;animation-delay:calc(var(--i) * 80ms + 150ms)}
.pri-art.art-in .orb-node{animation:pri-pop .46s cubic-bezier(.34,1.4,.5,1) forwards;animation-delay:calc(var(--i) * 80ms + 380ms)}
.pri-art.art-in .leak-line{animation:pri-draw .6s ease-out forwards;animation-delay:calc(var(--i) * 130ms + 200ms)}
.pri-art.art-in .leak-drip{animation:pri-drip .7s cubic-bezier(.5,0,.75,0) forwards;animation-delay:calc(var(--i) * 130ms + 620ms)}
.pri-art.art-in .gauge-value{animation:pri-draw 1.25s cubic-bezier(.22,1,.36,1) forwards;animation-delay:150ms}
.pri-art.art-in .score-bar{animation:pri-grow .8s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * 100ms + 450ms)}
.pri-art.art-in .vol{animation:pri-rise .62s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * 95ms)}

@keyframes pri-draw{to{stroke-dashoffset:0}}
@keyframes pri-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes pri-grow{to{transform:scaleX(1)}}
@keyframes pri-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pri-drip{
  0%{opacity:0;transform:translateY(-14px)}
  55%{opacity:.9;transform:translateY(0)}
  100%{opacity:.85;transform:translateY(0)}
}
.pri-art .rope-node,.pri-art .orb-node,.pri-art .vol,.pri-art .leak-drip{
  transform-box:fill-box;transform-origin:center;
}

/* the counting numeral shouldn't reflow as digits change */
.gauge-num{font-variant-numeric:tabular-nums}

/* ---- respect the reader ---- */
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .pri-art .rope-strand,.pri-art .orb-line,.pri-art .leak-line,.pri-art .gauge-value{stroke-dashoffset:0}
  .pri-art .rope-node,.pri-art .orb-node,.pri-art .leak-drip,.pri-art .vol{opacity:1}
  .pri-art .score-bar{transform:none}
  .pri-art *{animation:none!important}
  .header-rule i{transition:none}
  .site-header,.header-inner,.brand-logo{transition:none}
}

/* =====================================================
   v3.8 — section 04 as a white band, section 05 balanced
   ===================================================== */

/* ---- 04: full white section, no card ---- */
.ed-sec.white{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background-image:radial-gradient(60% 90% at 100% 0%,
    color-mix(in srgb, var(--c2) 6%, transparent) 0%, transparent 62%);
}
.ed-engine{
  display:grid;grid-template-columns:1.32fr .68fr;
  gap:clamp(40px,6vw,96px);align-items:center;
}
.ed-engine-copy .ed-num{color:var(--c2)}
.ed-engine-copy .ed-num::after{background:var(--c2)}
.ed-engine-copy h2{font-size:clamp(30px,4vw,46px);max-width:15em;line-height:1.14}
.ed-engine-copy h2 em{color:var(--c2)}
.ed-engine-copy .ed-lede{font-style:italic;max-width:38em}
.ed-engine-copy .btn-row{margin-top:32px}

/* what EOF actually runs — a plain hairline list, not pills */
.ed-engine-list{list-style:none;margin:0;border-top:1px solid var(--line)}
.ed-engine-list li{
  position:relative;padding:16px 0 16px 26px;
  border-bottom:1px solid var(--line);
  font-size:15.5px;color:var(--ink-dim);
}
.ed-engine-list li::before{
  content:"";position:absolute;left:2px;top:24px;
  width:8px;height:8px;border-radius:50%;background:var(--c2);
}

/* ---- 05: copy + price left, result card centred right ---- */
.ed-assess{
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(40px,5.6vw,88px);align-items:center;
  padding-bottom:clamp(48px,5vw,72px);border-bottom:1px solid var(--line);
}
.ed-head.plain{max-width:none;margin-bottom:clamp(34px,3.6vw,48px)}
.ed-assess-copy .ed-head h2{font-size:clamp(30px,3.7vw,44px)}
.ed-assess-copy .ed-lede{max-width:30em}
.ed-assess .ed-price{max-width:34em}
.ed-assess .ed-price .price-note{margin-top:16px}
.ed-assess .ed-price .btn-row{margin-top:26px}

.ed-assess-art{margin:0;justify-self:center;width:100%;max-width:460px}
.ed-assess-art figcaption{
  margin-top:18px;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--ink-faint);
}

@media (max-width:1080px){
  .ed-engine{grid-template-columns:1fr;gap:38px}
  .ed-engine-copy h2{max-width:none}
  .ed-assess{grid-template-columns:1fr;gap:44px}
  .ed-assess-art{justify-self:start;max-width:400px}
  .ed-assess-art figcaption{text-align:left}
}

/* =====================================================
   TWO NUMBERING SYSTEMS
   Arabic 01–08 = sections (and the side rail).
   Roman        = items inside a section.
   Mixing them made a card labelled "4" read as section 04.
   ===================================================== */
.ei-n,.er-n,.dl-n{
  font-family:var(--serif);font-style:italic;
  letter-spacing:.04em;text-transform:lowercase;
  color:var(--ink-faint);
}
.ed-index .ei-n{font-size:14px}
.ed-row .er-n{font-size:13.5px}
.ed-deliver .dl-n{font-size:13px}

/* the operating-model cards: Roman, upright, unmistakably not a section number */
.ed-feature .ef-num{
  font-size:clamp(34px,3.6vw,50px);
  letter-spacing:.06em;font-style:normal;opacity:.38;
  line-height:1;padding-top:.12em;
}

/* =====================================================
   v3.9 — the opening as a pivot, not a paragraph stack
   ===================================================== */
.ed-open{
  padding:clamp(72px,7.5vw,116px) 0;text-align:left;
  background:
    linear-gradient(90deg, var(--bg-2) 0%, var(--bg-2) 50%, var(--panel) 50%, var(--panel) 100%);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.ed-pivot{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(30px,4.4vw,72px);align-items:stretch;
}
/* both sides start at the same baseline so the comparison reads across */
.ed-pivot-side{max-width:27em;justify-self:start;align-self:center}

.pivot-tag{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:20px;
}
.is-answer .pivot-tag{color:var(--ember-deep)}

.ed-open-lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(25px,2.9vw,36px);line-height:1.2;color:var(--ink);
  margin:0;
}
.ed-open-turn{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(25px,2.9vw,36px);line-height:1.2;color:var(--ember-deep);
  margin:0;padding:0;border:none;
}
.ed-open-body{
  margin-top:22px;font-size:16.5px;line-height:1.78;color:var(--ink-dim);
}
.ed-open-body strong{color:var(--ink);font-weight:600}

/* the hinge between problem and answer */
.ed-pivot-hinge{
  position:relative;align-self:stretch;
  width:1px;min-height:230px;justify-self:center;
  background:linear-gradient(180deg,
    transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%);
}
.ed-pivot-hinge span{
  position:absolute;left:50%;top:50%;
  width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%) rotate(45deg);border-radius:2px;
  background:var(--ember);
  box-shadow:0 0 0 7px var(--panel), 0 0 0 8px var(--line);
}

@media (max-width:900px){
  .ed-open{
    background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg-2) 50%, var(--panel) 50%, var(--panel) 100%);
  }
  .ed-pivot{grid-template-columns:1fr;gap:0}
  .ed-pivot-side{max-width:none}
  .ed-pivot-side.is-answer{justify-self:start}
  .ed-pivot-hinge{
    width:100%;min-height:0;height:1px;margin:38px 0;
    background:linear-gradient(90deg,
      transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%);
  }
}

/* =====================================================
   v4.0 — stations land in sequence; founder note goes wide
   ===================================================== */

/* ---- the eight stations arrive one after another ---- */
html.js .pri-stagger .station{
  opacity:0;transform:translateY(14px) scale(.96);
}
html.js .pri-stagger.art-in .station{
  animation:station-land .58s cubic-bezier(.22,1.15,.4,1) forwards;
  animation-delay:calc(var(--i) * 95ms);
}
@keyframes station-land{
  0%  {opacity:0;transform:translateY(14px) scale(.96)}
  60% {opacity:1;transform:translateY(-3px) scale(1.015)}
  100%{opacity:1;transform:none}
}
/* the dot lights up as its station lands */
html.js .pri-stagger .station .dotc{transform:scale(0)}
html.js .pri-stagger.art-in .station .dotc{
  animation:station-dot .42s cubic-bezier(.34,1.5,.5,1) forwards;
  animation-delay:calc(var(--i) * 95ms + 180ms);
}
@keyframes station-dot{
  from{transform:scale(0)}
  to  {transform:scale(1)}
}

/* ---- 08: the founder note, full width with a background ---- */
.founder-note{
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 90% at 12% 0%,  color-mix(in srgb, var(--ember) 13%, transparent) 0%, transparent 62%),
    radial-gradient(65% 85% at 92% 96%, color-mix(in srgb, var(--c4) 12%, transparent) 0%, transparent 64%),
    var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
/* the rope, oversized and quiet, as the section's texture */
/* The rope sits low, like a horizon under the letter, and is masked so it
   fades out well before it reaches the text. Behind the paragraphs it was
   legible enough to fight them. */
.founder-bg{
  position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.fb-rope{
  width:min(1700px,150%);opacity:.13;
  transform:translateY(22%) rotate(-3deg);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 58%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 58%, #000 100%);
}
.fb-rope .pri-art{filter:none}
/* it is texture, not a performance — draw it fully, never animate it */
.fb-rope .rope-strand,.fb-rope .orb-line{stroke-dashoffset:0!important;stroke-dasharray:none!important}
.fb-rope .rope-node{opacity:1!important}
.fb-rope .pri-art *{animation:none!important}
.founder-note .container{position:relative;z-index:1}

.founder-head{text-align:center;max-width:22em;margin:0 auto clamp(38px,4vw,58px)}
.founder-head .ed-num{width:max-content;margin-left:auto;margin-right:auto}
.founder-head .ed-num::after{margin-left:auto;margin-right:auto}
.founder-head h2{font-size:clamp(32px,4.4vw,52px)}

/* the letter, set in two columns like a printed foreword */
.founder-letter{
  max-width:min(980px,100%);margin:0 auto;
  column-count:2;column-gap:clamp(34px,4.4vw,72px);
  column-rule:1px solid var(--line);
}
.founder-letter p{
  font-size:16.5px;line-height:1.82;color:var(--ink-dim);
  margin:0 0 17px;break-inside:avoid;
}
.founder-letter p em{color:var(--ink);font-style:italic}
.founder-letter .fl-open{
  font-family:var(--serif);font-size:clamp(19px,2vw,23px);
  line-height:1.45;color:var(--ink);margin-bottom:20px;
}

.founder-note .founder-close{
  max-width:26em;margin:clamp(44px,4.6vw,68px) auto 0!important;
  text-align:center;border:none;padding:0;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(21px,2.6vw,30px)!important;line-height:1.4!important;color:var(--ink)!important;
}
.founder-note .founder-close::before{
  content:"";display:block;width:46px;height:1.5px;
  background:var(--ember-deep);opacity:.55;margin:0 auto 28px;
}

.founder-foot{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  margin-top:clamp(36px,3.6vw,52px);
}
.founder-foot .founder-sig{margin:0;text-align:center}
.founder-foot .btn-row{justify-content:center}

@media (max-width:820px){
  .founder-letter{column-count:1;column-rule:none;max-width:none}
  .fb-rope{width:230%;opacity:.1}
}

/* =====================================================
   RESPONSIVE CORRECTIONS v4.1
   These live at the end of the file on purpose. Several
   later blocks (the v3.7 header, the editorial layer)
   re-declared properties that earlier media queries had
   already handled, silently winning the cascade — the
   mobile header was the worst case: `.header-cta`
   re-declared as display:flex undid its display:none and
   pushed 285px of the header off every page at 360px.
   ===================================================== */

/* ---------- header ---------- */
@media (max-width:880px){
  .site-header .header-cta{display:none}
  .header-inner{padding:12px var(--gutter);gap:14px}
  .brand-logo{height:40px}
  .site-nav{padding:10px 22px 18px}
}
@media (max-width:480px){
  .header-inner{padding:10px 18px;gap:10px}
  .brand-logo{height:32px}
  .nav-toggle{padding:7px 11px;font-size:12.5px}
}
/* the brand mark must be allowed to shrink on small screens */
@media (max-width:880px){
  .brand{min-width:0;flex:0 1 auto}
  .brand-logo{max-width:100%;height:auto;width:auto;max-height:40px}
}
@media (max-width:480px){ .brand-logo{max-height:32px} }

/* ---------- hero ---------- */
@media (max-width:620px){
  .ed-hero{padding-top:28px}
  .ed-hero h1{font-size:clamp(28px,7.8vw,38px)}
  .ed-hero .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .ed-hero .btn-row .btn{width:100%;text-align:center}
  .hero-plate{position:static;transform:none;margin:16px auto 0;align-items:center;text-align:center}
  .hero-founder::before{display:none}
  .hero-founder{flex-direction:column;padding-top:12px}
  .ed-hero-foot{max-width:none}
}

/* ---------- editorial components ---------- */
@media (max-width:620px){
  .ed-sec{padding:56px 0}
  .ed-open{padding:56px 0}
  .ed-head.split{gap:26px}
  .ed-head h2,.ed-aside h2{font-size:clamp(25px,6.6vw,32px)}
  .ed-quote p{font-size:clamp(19px,5.4vw,24px)}
  .ed-index li{grid-template-columns:32px 1fr;padding:18px 0}
  .ed-index .ei-t{font-size:18px}
  .ed-row{grid-template-columns:32px 1fr;padding:20px 0}
  .ed-deliver li{grid-template-columns:30px 1fr;font-size:14.5px}
  .ed-feature{padding:24px 20px}
  .ed-feature h3{font-size:20px}
  .ed-feature .ef-num{font-size:30px}
  .ed-manifesto,.ed-engine{padding-left:0;padding-right:0}
  .founder-letter p{font-size:15.5px}
  .founder-foot .btn-row{flex-direction:column;align-items:stretch;width:100%}
  .founder-foot .btn-row .btn{text-align:center}
}

/* stations: never fewer than a readable label.
   Eight divides cleanly into 4 and 2, so the rows always stay even. */
@media (max-width:1080px){ .stations{grid-template-columns:repeat(4,1fr);gap:8px} }
@media (max-width:640px){  .stations{grid-template-columns:repeat(2,1fr)} }

/* ---- station weight badge + footnote (v4.9, eight-station spec) ---- */
.station{position:relative}
.station .wt{
  position:absolute;top:8px;right:9px;
  font-size:10px;font-weight:700;line-height:1;
  color:var(--sc);opacity:.55;font-variant-numeric:tabular-nums;
}
/* The weight is reference, not decoration — it should never crowd the
   label, so it drops out entirely once the tile gets tight. */
@media (max-width:460px){ .station .wt{display:none} }

.station-foot{
  margin-top:14px;font-size:13px;line-height:1.6;color:var(--ink-dim);
  max-width:62ch;
}
.station-foot em{font-style:italic;color:var(--ink)}
.station .nm{overflow-wrap:anywhere;hyphens:auto}

/* ---------- long words and tables never push the page wide ---------- */
h1,h2,h3,p,li,td,th,.ei-t,.er-t,.ep-t{overflow-wrap:break-word}
.table-wrap{max-width:100%}
.pri-art{max-width:100%}

/* ---------- price / CTA rows ---------- */
@media (max-width:620px){
  .btn-row .btn{width:100%;text-align:center}
  .price-block{flex-wrap:wrap}
  .f100-counter .f100-foot{flex-direction:column;align-items:flex-start;gap:6px}
  .f100-hook-inner{gap:24px}
}

/* ---------- a final guard ----------
   NOT `overflow-x:hidden` on html/body. That was here briefly and it broke
   `position:sticky` on the header: setting overflow on the root makes the
   body a scroll container, the sticky header binds to that instead of the
   viewport, and it scrolls straight off the top — which read as the header
   "blinking" as it left and re-entered on every scroll.

   The overflow audit found and fixed the real causes (the mobile header CTA
   and the un-shrunk nav), so no blanket clamp is needed. Individual sections
   that intentionally bleed — the founder rope — clip themselves. */
.founder-note,.ed-hero,.home-hero{overflow-x:clip}

/* Wide data tables scroll inside their wrapper rather than widening the page;
   a soft right edge tells the reader there is more to see. */
.table-wrap{position:relative;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  .table-wrap{
    background:
      linear-gradient(90deg, var(--panel) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat,
      linear-gradient(270deg, var(--panel) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(22,32,58,.12), transparent) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(22,32,58,.12), transparent) right / 12px 100% no-repeat,
      var(--panel);
    background-attachment:local, local, scroll, scroll, local;
  }
  .data-table{min-width:520px}
}

/* ---------- mid-width header (880–1400px) ----------
   The v3.7 nav rules used `.site-nav > ul > li > a`, which outranks the older
   `.site-nav a` responsive rules — so the nav never actually shrank and the
   CTA was being clipped on iPads and small laptops. Matching specificity here. */
@media (max-width:1540px){
  .header-inner{gap:16px}
  .brand-logo{height:46px}
  .site-nav > ul > li > a{padding:9px 11px;font-size:13.6px}
  .header-cta{gap:12px}
  .header-cta .btn{padding:12px 18px;font-size:13.2px}
}
@media (max-width:1180px){
  .brand-logo{height:40px}
  .site-nav > ul > li > a{padding:8px 9px;font-size:12.8px}
  .site-nav > ul > li > a::after{left:9px;right:9px}
  .header-cta .btn{padding:11px 15px;font-size:12.4px}
}
@media (max-width:1000px){
  .brand-logo{height:36px}
  .site-nav > ul > li > a{padding:8px 7px;font-size:12px}
  .site-nav > ul > li > a::after{left:7px;right:7px}
  .header-cta .btn{padding:10px 13px;font-size:11.8px;letter-spacing:0}
}
/* below 880 the nav collapses to the Menu button, so the row is roomy again */
@media (max-width:880px){
  .site-nav > ul > li > a{font-size:15px;padding:12px 8px}
}

/* The Founding 100 counter is a bonus, not a necessity — it only appears once
   the header genuinely has room for it alongside the nav and the CTA. */
@media (max-width:1540px){ .site-header .header-seats{display:none} }

/* =====================================================
   v4.2 — the menu button becomes a mark, not a word
   ===================================================== */

/* screen-reader-only label (WordPress convention) */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.nav-toggle{
  display:none;
  width:44px;height:44px;padding:0;flex:none;   /* 44px = comfortable touch target */
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  cursor:pointer;color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.nav-toggle:hover{border-color:var(--ember-deep);background:rgba(216,162,59,.07)}
.nav-toggle:focus-visible{outline:2px solid var(--ember-deep);outline-offset:2px}

.nav-toggle-bars{
  position:relative;display:block;width:19px;height:13px;
}
.nav-toggle-bars i{
  position:absolute;left:0;right:0;height:1.8px;border-radius:2px;
  background:currentColor;
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease, top .28s cubic-bezier(.22,1,.36,1);
}
.nav-toggle-bars i:nth-child(1){top:0}
.nav-toggle-bars i:nth-child(2){top:5.6px}
.nav-toggle-bars i:nth-child(3){top:11.2px}

/* open: the three bars fold into a cross */
.nav-toggle[aria-expanded="true"]{border-color:var(--ember-deep);background:rgba(216,162,59,.1)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){top:5.6px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){top:5.6px;transform:rotate(-45deg)}

@media (max-width:880px){ .nav-toggle{display:inline-flex} }
@media (max-width:480px){ .nav-toggle{width:40px;height:40px} }

@media (prefers-reduced-motion: reduce){
  .nav-toggle-bars i{transition:none}
}

/* =====================================================
   v4.5 — header condense: stop the flicker
   -----------------------------------------------------
   The condensed header animated BOTH `padding` and the logo's `height`.
   Both are layout properties, so for 250ms the document height changed on
   every frame. The header is position:sticky, so it occupies flow space —
   shrinking it pulls the page content up, which fires more scroll events,
   which re-evaluate the threshold, which re-runs the transition. Scrolling
   slowly across the 40px trigger put that in a loop and the header strobed.

   Fix, in two parts:
   1. Animate the logo with `transform` (compositor-only, zero layout) and
      snap the padding instantly, so a state change costs exactly one reflow.
   2. Hysteresis in the JS below, so the state cannot flip-flop at the edge.
   ===================================================== */
.header-inner{transition:none}
.brand-logo{
  transition:transform .26s cubic-bezier(.22,1,.36,1);
  transform-origin:left center;
}
.site-header.is-condensed .brand-logo{
  height:60px;                 /* box stays put — only the pixels scale */
  transform:scale(.66);
}
@media (max-width:1540px){ .site-header.is-condensed .brand-logo{height:46px} }
@media (max-width:1180px){ .site-header.is-condensed .brand-logo{height:40px} }
@media (max-width:880px){
  /* the mobile bar is already compact; don't shrink it further */
  .site-header.is-condensed .brand-logo{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .brand-logo{transition:none}
}

/* The WordPress admin bar is position:fixed over the viewport, so a sticky
   header at top:0 hides underneath it. Only affects logged-in users, but it
   makes previewing the site as an admin misleading. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){ body.admin-bar .site-header{top:46px} }

/* =====================================================
   v4.6 — LearnDash inside the Institute shell
   LearnDash (LD30) ships its own markup via the_content.
   These rules only give it the theme's container, spacing
   and palette; nothing here fights the plugin's layout.
   ===================================================== */
.ld-shell{padding:clamp(48px,5vw,80px) 0 clamp(64px,7vw,110px)}
.ld-backlink{margin-bottom:26px}
.ld-backlink a{
  font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;
}
.ld-backlink a:hover{color:var(--ember-deep)}

.ld-body{max-width:var(--container)}
.ld-body h2,.ld-body h3,.ld-body h4{font-family:var(--serif);font-weight:400;color:var(--ink)}
.ld-body h3{font-size:clamp(19px,2.1vw,23px);margin:30px 0 12px}
.ld-body p,.ld-body li{color:var(--ink-dim);line-height:1.75}
.ld-body ul,.ld-body ol{margin:0 0 18px 22px}
.ld-body li{margin-bottom:8px}
.ld-body li::marker{color:var(--ember-deep)}
.ld-lesson-purpose{
  padding:18px 22px;border-left:3px solid var(--ember);
  background:color-mix(in srgb, var(--ember) 7%, var(--panel));
  border-radius:0 var(--radius) var(--radius) 0;
}
.ld-lesson-purpose strong{color:var(--ink)}

/* LearnDash's own components, tinted to match */
.ld-shell .ld-item-list-item{border-color:var(--line)}
.ld-shell .learndash_mark_complete_button,
.ld-shell .ld-button:not(.ld-button-transparent){
  background:linear-gradient(135deg,var(--ember-2),var(--ember))!important;
  color:#16203A!important;border:none!important;border-radius:var(--btn-radius)!important;
  font-weight:600!important;box-shadow:0 6px 20px rgba(200,150,50,.3)!important;
}
.ld-shell .ld-progress-bar .ld-progress-bar-percentage{background:var(--ember)!important}
.ld-shell .ld-course-status{border-radius:var(--radius);border-color:var(--line)}

/* ---- My Account → My Courses ---- */
.pri-mycourses{display:grid;gap:16px}
.pri-course-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:24px 26px;box-shadow:var(--shadow-sm);
}
.pri-course-card::before{
  content:"";display:block;flex:none;
  width:26px;height:3px;border-radius:2px;background:var(--ember);margin-bottom:16px;
}
.pcc-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pri-course-card h3{font-size:clamp(18px,2vw,22px);margin:0}
.pri-course-card h3 a{color:var(--ink);text-decoration:none}
.pri-course-card h3 a:hover{color:var(--ember-deep)}
.pcc-pct{font-family:var(--serif);font-size:20px;color:var(--ember-deep);flex:none}
.pcc-bar{height:6px;border-radius:3px;background:var(--line-soft);margin:16px 0 12px;overflow:hidden}
.pcc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ember-2),var(--ember))}
.pcc-meta{font-size:13.5px;color:var(--ink-faint);margin:0 0 18px}
.pri-mycourses-empty{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:34px 30px;text-align:center;
}
.pri-mycourses-empty h3{margin-bottom:10px}
.pri-mycourses-empty p{color:var(--ink-dim);max-width:34em;margin:0 auto 20px}

/* The Courses dropdown made the nav six items. At ~900px that overflowed by
   20px before the old 880px collapse point could catch it, so the bar now
   folds to the menu button slightly earlier. */
@media (max-width:940px){
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);padding:10px 22px 18px;
    box-shadow:var(--shadow-md);max-height:78vh;overflow-y:auto;
  }
  .site-nav.open{display:block}
  .site-nav .nav-list{flex-direction:column;gap:0;flex-wrap:wrap;align-items:stretch}
  .site-nav > ul > li > a{font-size:15px;padding:12px 8px}
  .site-nav > ul > li > a::after{display:none}
  .site-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:transparent;
    padding:0 0 8px 14px;min-width:0;border-left:2px solid var(--line);margin:0 0 6px 8px;
  }
  .site-nav .sub-menu a{font-size:14px;padding:9px 8px}
  .site-nav .caret{display:none}
  .nav-toggle{display:inline-flex}
  .site-header .header-cta{display:none}
  .header-inner{padding:12px var(--gutter);gap:14px}
  .brand{min-width:0;flex:0 1 auto}
  .brand-logo{max-width:100%;height:auto;width:auto;max-height:40px}
}

/* =====================================================
   v4.9 — How Scoring Works, and the Control Center schema

   Appended at the end deliberately, same reasoning as the v4.1
   corrections block: later declarations win, and putting new
   component styles above the responsive corrections would let
   the corrections silently override them.
   ===================================================== */

/* ---- shared small pieces ---- */
.note-band{
  margin-top:34px;padding:20px 24px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--c4) 5%, var(--panel));
  border:1px solid color-mix(in srgb, var(--c4) 22%, var(--line-soft));
  font-size:15px;line-height:1.7;color:var(--ink-dim);max-width:78ch;
}
.note-band strong{color:var(--ink)}
.card-foot{margin-top:14px;font-size:13px;font-weight:600;color:var(--ink-dim);font-style:italic}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.mt{margin-top:34px}

/* ---- 1. the three depth levels ---- */
.scoring-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.sl-card{
  border:1px solid var(--line);border-top:4px solid var(--cc);border-radius:0 0 var(--radius) var(--radius);
  background:var(--panel);padding:26px 24px 24px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.sl-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sl-n{font-size:12px;font-weight:800;color:var(--cc);letter-spacing:.08em}
.sl-head h3{margin:0;font-size:20px}
.sl-q{
  margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;
}
.sl-promise{font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 12px}
.sl-adds{font-size:13.5px;line-height:1.65;color:var(--ink-dim);margin:0 0 18px;flex:1}
.sl-out{
  margin:0;padding-top:16px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;
}
.sl-out dt{color:var(--ink-dim);font-weight:600}
.sl-out dd{margin:0;color:var(--ink);font-weight:600}
.sl-conf{color:var(--cc)!important}

/* ---- 2. station weight table ---- */
.weight-table{
  margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--panel);box-shadow:var(--shadow-sm);
}
.wt-head,.wt-row{
  display:grid;
  grid-template-columns:1.15fr 2.4fr 68px 52px 52px 52px;
  gap:12px;align-items:center;padding:13px 20px;
}
.wt-head{
  background:var(--bg-2);border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim);
}
.wt-row{border-bottom:1px solid var(--line-soft);font-size:14px}
.wt-row:last-child{border-bottom:none}
.wt-name{font-weight:700;color:var(--ink);border-left:3px solid var(--sc);padding-left:11px}
.wt-purpose{font-size:13px;color:var(--ink-dim);line-height:1.55}
.weight-table .num{text-align:right;font-variant-numeric:tabular-nums}
.wt-weight{font-weight:800;color:var(--sc);font-size:16px}
.wt-total{background:var(--bg-2);font-weight:700}
.wt-total .wt-name{border-left-color:transparent;color:var(--ink)}
.wt-total .wt-weight{color:var(--ink)}
.wt-total .wt-purpose{font-style:italic}

/* ---- 3. the scale ---- */
.scale-pair{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:12px}
.scale-col h3{font-size:17px;margin:0 0 16px}
.scale-list,.grade-list,.ev-list{list-style:none;margin:0;padding:0}
.scale-list li{
  display:grid;grid-template-columns:26px 1fr 38px 1.5fr;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.sc-rating{font-weight:800;color:var(--ink);text-align:center}
.sc-bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.sc-bar>span{display:block;height:100%;border-radius:3px;background:var(--c4)}
.sc-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-dim);font-weight:600}
.sc-mean{color:var(--ink-dim)}
.scale-note{
  margin-top:18px;font-size:13px;line-height:1.65;color:var(--ink-dim);
  padding-left:14px;border-left:3px solid var(--line);
}
.scale-note strong{color:var(--ink)}

.grade-list li,.ev-list li{
  display:grid;grid-template-columns:34px 62px 1fr;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.gr-letter{
  width:28px;height:28px;border-radius:var(--btn-radius);display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff;
}
.gr-a{background:var(--c5)} .gr-b{background:var(--c2)} .gr-c{background:var(--c1)}
.gr-d{background:var(--c8)} .gr-f{background:var(--c4)}
.gr-band,.ev-score{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-weight:700}
.gr-mean,.ev-def{color:var(--ink-dim)}
.ev-list li{grid-template-columns:96px 42px 1fr}
.ev-name{font-weight:700;color:var(--ink)}

/* ---- 4. Revenue Dams ---- */
.dam-formula{
  margin:0 0 28px;padding:22px 24px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--c3) 4%, var(--panel));
  border:1px solid color-mix(in srgb, var(--c3) 22%, var(--line));
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);
}
.df-label{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c3);
}
.dam-formula code{
  font-size:15px;color:var(--ink);font-weight:600;
  overflow-wrap:anywhere;line-height:1.5;
}
.df-note{font-size:12.5px;color:var(--ink-dim);font-style:italic}

.dam-list{list-style:none;margin:0;padding:0;counter-reset:dam;display:grid;gap:2px}
.dam-list li{
  counter-increment:dam;
  display:grid;grid-template-columns:auto 1fr;gap:8px 22px;align-items:baseline;
  padding:15px 20px;background:var(--panel);border:1px solid var(--line-soft);
}
.dam-list li:first-child{border-radius:var(--radius) var(--radius) 0 0}
.dam-list li:last-child{border-radius:0 0 var(--radius) var(--radius)}
.dam-list li::before{
  content:counter(dam,decimal-leading-zero);
  font-size:11px;font-weight:800;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;grid-row:span 2;
}
.dm-pair{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;font-weight:700}
.dm-from{color:var(--ink)}
.dm-arrow{color:var(--c3);font-weight:400}
.dm-to{color:var(--ink)}
.dm-what{font-size:13px;line-height:1.6;color:var(--ink-dim);grid-column:2}

/* ---- 5. formula library ---- */
.formula-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:12px}
.fx{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:20px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);
}
.fx-head h3{margin:0 0 4px;font-size:16px}
.fx-meta{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-dim);text-transform:uppercase}
.fx-formula{
  display:block;padding:12px 14px;border-radius:var(--radius);background:var(--bg-2);
  border:1px solid var(--line-soft);font-size:13px;line-height:1.55;color:var(--ink);
  overflow-wrap:anywhere;
}
.fx-guard{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-dim)}
.fx-guard span{
  display:block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c1);margin-bottom:3px;
}

/* ---- 6. Organizational Noise ---- */
.noise-block{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center}
.nb-copy h2{margin:12px 0 16px}
.nb-copy p{font-size:15px;line-height:1.7;color:var(--ink-dim)}
.nb-bars{display:flex;flex-direction:column;gap:14px}
.nbar{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding:16px 18px;border-radius:var(--radius);background:var(--panel);
  border:1px solid color-mix(in srgb, var(--sc) 26%, var(--line));
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
/* the tint behind each row is the weight, drawn to scale */
.nbar::before{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--w);
  background:var(--sc);opacity:.07;
}
.nb-n{font-weight:700;font-size:15px;color:var(--ink);position:relative}
.nb-p{font-weight:800;font-size:15px;color:var(--sc);font-variant-numeric:tabular-nums;position:relative}
.nb-d{grid-column:1/-1;font-size:12.5px;color:var(--ink-dim);position:relative}

/* ---- 7. status rules ---- */
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
.st-card{
  border:1px solid var(--line);border-top:4px solid var(--sc);border-radius:0 0 var(--radius) var(--radius);
  background:var(--panel);padding:22px 20px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
}
.st-card header{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.st-dot{width:11px;height:11px;border-radius:50%;background:var(--sc);flex:none}
.st-card h3{margin:0;font-size:17px}
.st-swatch{
  margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);
}
.st-def{margin:0;font-size:13px;line-height:1.65;color:var(--ink-dim);flex:1}
.st-resp{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink);padding-top:12px;border-top:1px solid var(--line-soft)}
.st-resp span{
  display:block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sc);margin-bottom:3px;
}

/* ---- responsive ---- */
@media (max-width:1080px){
  .scoring-levels{grid-template-columns:1fr}
  .status-grid{grid-template-columns:repeat(2,1fr)}
  .formula-list{grid-template-columns:1fr}
  .noise-block{grid-template-columns:1fr;gap:30px}
  .scale-pair{grid-template-columns:1fr;gap:34px}
  /* the weight table loses the purpose column before it loses the numbers */
  .wt-head,.wt-row{grid-template-columns:1.3fr 60px 46px 46px 46px}
  .wt-purpose{display:none}
}
@media (max-width:640px){
  .status-grid{grid-template-columns:1fr}
  .wt-head,.wt-row{grid-template-columns:1fr 54px;padding:12px 14px}
  .wt-head span:nth-child(n+4),.wt-row span:nth-child(n+4){display:none}
  .scale-list li{grid-template-columns:22px 1fr 34px;row-gap:2px}
  .sc-mean{grid-column:2/-1;font-size:12px}
  .dam-list li{padding:14px 16px;gap:6px 14px}
  .fx-formula{font-size:12px}
  .dam-formula code{font-size:13px}
}

/* ---- Control Center: schema, register, queue, gain, meeting ---- */
.schema-group{margin-top:34px}
.sg-title{display:flex;align-items:center;gap:12px;font-size:18px;margin:0 0 14px}
.sg-n{
  font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--c4);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 8px;line-height:1;
}
.schema-table{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow-sm);
}
.sch-head,.sch-row{
  display:grid;grid-template-columns:1.15fr 2.5fr .85fr .85fr;
  gap:14px;align-items:baseline;padding:13px 20px;
}
.sch-head{
  background:var(--bg-2);border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-dim);
}
.sch-row{border-bottom:1px solid var(--line-soft);font-size:13.5px}
.sch-row:last-child{border-bottom:none}
.sch-field{font-weight:700;color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.sch-def{color:var(--ink-dim);line-height:1.55;font-size:13px}
.sch-req,.sch-cad{font-size:12px;color:var(--ink-dim)}
.sch-req{font-weight:600}

.register-grid{display:grid;gap:2px;margin-top:12px}
.rg-row{
  display:grid;grid-template-columns:1.1fr 1fr 1fr .8fr;gap:14px;align-items:center;
  padding:14px 20px;background:var(--panel);border:1px solid var(--line-soft);
}
.rg-row:first-child{border-radius:var(--radius) var(--radius) 0 0}
.rg-row:last-child{border-radius:0 0 var(--radius) var(--radius)}
.rg-station{font-weight:700;font-size:14px;color:var(--ink);border-left:3px solid var(--sc);padding-left:12px}
.rg-slot{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:7px 11px;border-radius:var(--radius-sm);text-align:center;
}
.rg-op{background:var(--bg-2);color:var(--ink-dim);border:1px solid var(--line-soft)}
.rg-rev{background:color-mix(in srgb, var(--sc) 12%, #fff);color:var(--sc);border:1px solid color-mix(in srgb, var(--sc) 28%, #fff)}
.rg-owner{font-size:12px;color:var(--ink-faint);font-style:italic}

.queue-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
.qf-step{
  border:1px solid var(--line);border-top:4px solid var(--sc);border-radius:0 0 var(--radius) var(--radius);
  background:var(--panel);padding:22px 20px;box-shadow:var(--shadow-sm);position:relative;
}
.qf-n{font-size:11px;font-weight:800;color:var(--sc);letter-spacing:.08em}
.qf-step h3{margin:8px 0 8px;font-size:16px}
.qf-step p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.qf-human{background:color-mix(in srgb, var(--sc) 5%, var(--panel))}
.qf-human strong{color:var(--ink)}

.gain-formula{
  margin:12px 0 34px;padding:28px 24px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.gf-terms{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.gf-t{
  padding:12px 16px;border-radius:var(--btn-radius);font-size:13.5px;font-weight:600;
  border:1px solid var(--line-soft);background:var(--bg-2);
}
.gf-t em{font-style:normal}
.gf-plus{color:var(--c2);border-color:color-mix(in srgb, var(--c2) 26%, #fff)}
.gf-minus{color:var(--c4);border-color:color-mix(in srgb, var(--c4) 26%, #fff)}
.gf-result{
  color:#fff;background:var(--ink);border-color:var(--ink);font-weight:700;
}
.gf-op{font-size:19px;font-weight:700;color:var(--ink-faint)}
.gf-eq{color:var(--ink)}

.meeting-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
.ms-step{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:24px 22px;box-shadow:var(--shadow-sm);
}
.ms-step::before{
  content:"";display:block;flex:none;
  width:26px;height:3px;border-radius:2px;background:var(--sc);margin-bottom:16px;
}
.ms-n{font-size:11px;font-weight:800;color:var(--sc);letter-spacing:.08em}
.ms-step h3{margin:8px 0 8px;font-size:18px}
.ms-step p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
.closing-question{
  margin:34px auto 0;text-align:center;font-size:17px;line-height:1.8;
  color:var(--ink-dim);max-width:44ch;
}
.closing-question strong{display:inline-block;margin-top:6px;font-size:23px;color:var(--ink)}

@media (max-width:1080px){
  .queue-flow,.meeting-steps{grid-template-columns:repeat(2,1fr)}
  .sch-head,.sch-row{grid-template-columns:1.2fr 2.2fr .9fr}
  .sch-head span:nth-child(4),.sch-row .sch-cad{display:none}
  .rg-row{grid-template-columns:1fr 1fr 1fr}
  .rg-owner{display:none}
}
@media (max-width:640px){
  .queue-flow,.meeting-steps{grid-template-columns:1fr}
  .sch-head{display:none}
  .sch-row{grid-template-columns:1fr;gap:5px;padding:14px 16px}
  .sch-req::before{content:"Requirement: ";font-weight:700}
  .rg-row{grid-template-columns:1fr;gap:8px;padding:14px 16px}
  .rg-station{border-left:none;border-top:3px solid var(--sc);padding:9px 0 0}
  .gf-terms{flex-direction:column;gap:10px}
  .gf-t{width:100%;text-align:center}
  .closing-question strong{font-size:19px}
}

/* =====================================================
   v5.0 — the assessment: claim form, instrument, thanks
   ===================================================== */

.container.narrow{max-width:840px}
.form-error{
  margin:0 0 24px;padding:15px 20px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--c4) 8%, #fff);
  border:1px solid color-mix(in srgb, var(--c4) 30%, #fff);
  color:var(--ink);font-size:14.5px;
}

/* ---- claim form ---- */
.claim-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px;box-shadow:var(--shadow-md);
}
.claim-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:26px}
.claim-grid label{display:flex;flex-direction:column;gap:7px}
.claim-grid label>span{font-size:13px;font-weight:600;color:var(--ink)}
.claim-grid em{font-style:normal;color:var(--c4)}
.claim-grid em.opt{color:var(--ink-faint);font-weight:400;font-size:12px}
.claim-grid input{
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--btn-radius);
  font:inherit;font-size:15px;color:var(--ink);background:var(--bg);
  transition:border-color .15s, box-shadow .15s;
}
.claim-grid input:focus{
  outline:none;border-color:var(--c4);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c4) 16%, transparent);
}
.claim-note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.claim-held{text-align:center}
.cc-eyebrow{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c2);
}
.claim-held h3{margin:0 0 10px;font-size:24px}
.claim-held p{color:var(--ink-dim);margin:0 0 22px}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.pri-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- the instrument ---- */
.assess-intro{
  padding:20px 24px;border-radius:var(--radius);
  background:color-mix(in srgb, var(--c2) 5%, var(--panel));
  border:1px solid color-mix(in srgb, var(--c2) 22%, var(--line-soft));
  font-size:14.5px;line-height:1.7;color:var(--ink-dim);margin-bottom:30px;
}
.assess-intro strong{color:var(--ink)}

.assess-progress{
  position:sticky;top:var(--header-h,72px);z-index:5;
  background:var(--bg);padding:14px 0 12px;margin-bottom:8px;
  border-bottom:1px solid var(--line-soft);
}
.ap-bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.ap-bar>span{display:block;height:100%;width:0;border-radius:3px;background:var(--c2);transition:width .25s ease}
.ap-text{margin-top:7px;font-size:12px;font-weight:600;color:var(--ink-dim);font-variant-numeric:tabular-nums}

.assess-step{border:none;margin:0 0 12px;padding:30px 0 6px;border-top:1px solid var(--line)}
.assess-step:first-of-type{border-top:none}
.assess-step legend{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:0;margin-bottom:8px;width:100%;
}
.as-n{
  font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--sc);
  border:1px solid currentColor;border-radius:var(--radius-sm);padding:4px 8px;line-height:1;
}
.as-name{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink)}
.as-count{margin-left:auto;font-size:12px;color:var(--ink-faint)}

.aq{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.aq:last-child{border-bottom:none}
.aq-label{display:flex;gap:12px;align-items:baseline;cursor:default}
.aq-id{
  font-size:10.5px;font-weight:700;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;flex:none;padding-top:3px;
}
.aq-text{font-size:15.5px;line-height:1.55;color:var(--ink)}
.aq-req{color:var(--c4)}
.aq-help{margin:7px 0 0 42px;font-size:13px;line-height:1.55;color:var(--ink-dim)}

.aq input[type=text],.aq input[type=number],.aq select,.aq textarea{
  margin-top:12px;margin-left:42px;width:calc(100% - 42px);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--btn-radius);
  font:inherit;font-size:15px;color:var(--ink);background:var(--bg);
}
.aq input:focus,.aq select:focus,.aq textarea:focus{
  outline:none;border-color:var(--sc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sc) 16%, transparent);
}
.aq-num{display:flex;align-items:center;gap:10px;margin-left:42px;margin-top:12px;flex-wrap:wrap}
.aq-num input[type=number]{margin:0;width:170px;flex:none}
.aq-pre,.aq-suf{font-size:14px;font-weight:600;color:var(--ink-dim)}
.aq-pre{order:-1}
.aq-ns{
  display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-dim);
  cursor:pointer;margin-left:4px;
}
.aq-ns input{margin:0}

/* the 1–5 scale */
.aq-scale{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0 0 42px}
.rt{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);cursor:pointer;text-align:center;
  transition:border-color .15s, background .15s, transform .12s;
}
.rt:hover{border-color:var(--sc);transform:translateY(-2px)}
.rt input{position:absolute;opacity:0;width:0;height:0}
.rt-n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:14px;background:var(--bg-2);color:var(--ink-dim);
  transition:background .15s, color .15s;
}
.rt-l{font-size:10.5px;line-height:1.3;color:var(--ink-dim);font-weight:600}
.rt:has(input:checked){
  border-color:var(--sc);background:color-mix(in srgb, var(--sc) 8%, var(--panel));
}
.rt:has(input:checked) .rt-n{background:var(--sc);color:#fff}
.rt:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb, var(--sc) 20%, transparent)}
.rt-ns .rt-n{background:transparent;border:1px dashed var(--line);color:var(--ink-faint)}
.rt-ns:has(input:checked) .rt-n{background:var(--ink-faint);border-color:var(--ink-faint);color:#fff}

.assess-submit{
  margin-top:34px;padding:28px 30px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line-soft);text-align:center;
}
.assess-submit p{margin:0 0 20px;font-size:14px;color:var(--ink-dim)}

/* ---- thank you ---- */
.thanks-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:44px 40px;box-shadow:var(--shadow-md);text-align:center;
}
.tc-mark{
  width:60px;height:60px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;font-size:28px;color:#fff;background:var(--c2);
}
.thanks-card h2{margin:0 0 14px}
.tc-lede{font-size:16px;line-height:1.7;color:var(--ink-dim);max-width:56ch;margin:0 auto 30px}
.tc-next{
  text-align:left;max-width:58ch;margin:0 auto 26px;padding:0;
  list-style:none;counter-reset:tcn;display:grid;gap:16px;
}
.tc-next li{
  counter-increment:tcn;position:relative;padding-left:42px;
  font-size:14.5px;line-height:1.65;color:var(--ink-dim);
}
.tc-next li::before{
  content:counter(tcn);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);
  font-size:12px;font-weight:800;color:var(--ink);
}
.tc-next strong{color:var(--ink)}
.tc-note{
  font-size:13.5px;color:var(--ink-dim);max-width:56ch;margin:0 auto 28px;
  padding-top:22px;border-top:1px solid var(--line-soft);
}
.thanks-card .btn-row{justify-content:center}

/* ---- assessment facts strip ---- */
.assess-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.assess-facts>div{
  text-align:center;padding:14px 8px;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line-soft);
}
.af-n{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);line-height:1}
.af-l{display:block;margin-top:5px;font-size:11px;color:var(--ink-dim);line-height:1.3}

@media (max-width:760px){
  .claim-grid{grid-template-columns:1fr;gap:16px}
  .aq-scale{grid-template-columns:repeat(3,1fr);margin-left:0}
  .aq-label{gap:9px}
  .aq input[type=text],.aq input[type=number],.aq select,.aq textarea{margin-left:0;width:100%}
  .aq-num{margin-left:0}
  .aq-help{margin-left:0}
  .assess-facts{grid-template-columns:repeat(2,1fr)}
  .thanks-card,.claim-card{padding:28px 22px}
  .as-name{font-size:21px}
  .as-count{margin-left:0;width:100%}
}
@media (max-width:400px){
  .aq-scale{grid-template-columns:repeat(2,1fr)}
  .aq-num input[type=number]{width:100%}
}

/* =====================================================
   v5.2 — trademark symbols in display type

   Fraunces draws ™ at close to cap height, so at hero size it
   reads as two full-size italic letters shouting at the end of the
   headline rather than as a mark. There is no CSS selector for a
   character, so main.js wraps each ™ / ® inside a heading in
   <span class="tm"> and this sizes it. Without JS the page is
   unchanged — the mark is simply large, not broken.
   ===================================================== */
.tm{
  font-size:.44em;
  vertical-align:.42em;   /* sits just above the cap line, not floating free */
  line-height:0;
  font-style:normal;      /* a trademark mark never italicises */
  letter-spacing:.02em;
  font-weight:400;
}