/* ============================================================
   CIS™ — Global stylesheet
   Design logic: nothing is ornamental without meaning.
   Gold = recognition. Inversion = weight. Space = breathing.

   Craft pass, ten pages:
   · gold reduced to .u and a genuine threshold .rule (max two a page)
   · spacing on an 8px step, cadence consistent across pages
   · optical tracking per type size
   · fields rebuilt from layered falloff — no grids, no hard edges
   · mobile first: every multi-column grid sheds columns in stages
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --navy:#0A2540;
  --navy-deep:#071B30;
  --navy-lift:#123055;
  --gold:#B8893E;
  --gold-soft:#C9A25E;
  --cream:#F5F2EC;
  --paper:#FFFFFF;
  --slate:#4A5666;
  --line:rgba(10,37,64,.14);
  --line-soft:rgba(10,37,64,.08);
  --ink-quiet:rgba(10,37,64,.28);

  --serif:"Cormorant Garamond",Georgia,serif;   /* feeling */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; /* structure */

  --wrap:1120px;
  --gut:32px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:44px; --s6:60px; --s7:80px;

  /* one film-grain layer, reused as the top background layer of every
     field so no field is a flat gradient. Never visible on its own. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--navy);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-wrap:pretty;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:rgba(10,37,64,.1)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:800px}

/* ---------- TYPE ----------
   Cormorant is drawn small: it needs negative tracking as it grows
   and none as it shrinks. Set per size rather than globally. */
h1,h2,h3,.disp{
  font-family:var(--serif);font-weight:500;
  font-optical-sizing:auto;text-wrap:balance;
}
h1{font-size:clamp(42px,6.2vw,80px);line-height:1.015;letter-spacing:-.018em}
h2{font-size:clamp(30px,4.4vw,54px);line-height:1.08;letter-spacing:-.013em}
h3{font-size:clamp(22px,2.8vw,33px);line-height:1.16;letter-spacing:-.006em}
p{max-width:62ch}
.lede{font-size:clamp(18.5px,2.1vw,23px);color:var(--slate);line-height:1.62;letter-spacing:-.002em}
.body-lg{font-size:18px;color:var(--slate);line-height:1.72}

/* eyebrow — structural, navy not gold (gold is reserved for recognition) */
.eyebrow{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--slate);
  margin-bottom:var(--s3);display:block;
}

/* ---------- GOLD = RECOGNITION ----------
   Gold lives on .u — the recognized word — and on a .rule that marks
   a conceptual threshold. Nowhere else: not the mark, not the nav
   underline, not stage numbers, not field edges. A gold border that
   separates nothing is decoration, which the system forbids.     */
.mark{display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--s3)}
.mark i{width:6px;height:6px;background:var(--ink-quiet);transform:rotate(45deg);display:block}
.mark b{height:1px;width:44px;background:rgba(10,37,64,.2);display:block}
/* optical centring for a centred mark: ◆ — TEXT — ◆ */
.center .mark{justify-content:center}
.center .mark span::after{content:"";display:inline-block;width:44px;height:1px;
  background:rgba(10,37,64,.2);vertical-align:middle;margin-left:6px}
.center .mark::after{content:"";width:6px;height:6px;background:var(--ink-quiet);
  transform:rotate(45deg);display:block}
.mark span{
  font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--slate);
}
/* the recognized word */
.u{
  border-bottom:1.5px solid var(--gold);
  padding-bottom:.08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* a threshold — the line between before and after, noticing and knowing */
.rule{height:1px;width:64px;background:var(--gold);margin:var(--s4) 0}
.rule.center{margin-left:auto;margin-right:auto}
/* a divider that separates nothing conceptual stays navy */
.rule.quiet{background:rgba(10,37,64,.22)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.06em;
  padding:15px 30px;border-radius:40px;
  background:var(--navy);color:var(--cream);
  box-shadow:0 1px 2px rgba(10,37,64,.06);
  transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn:hover{background:var(--navy-deep);transform:translateY(-1px);box-shadow:0 8px 22px -12px rgba(10,37,64,.34)}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(10,37,64,.06)}
.btn .arw{transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:rgba(10,37,64,.42);background:rgba(10,37,64,.015);box-shadow:none}
.btn.light{background:var(--cream);color:var(--navy)}
.btn.light:hover{background:#fff;box-shadow:0 8px 22px -12px rgba(0,0,0,.4)}
.btn.outline-light{background:transparent;color:var(--cream);border:1px solid rgba(245,242,236,.36);box-shadow:none}
.btn.outline-light:hover{border-color:rgba(245,242,236,.8);background:rgba(245,242,236,.05);box-shadow:none}
.btn:focus-visible{outline:1.5px solid var(--navy);outline-offset:3px}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
  padding:28px 0;
}
.nav.solid{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(170%) blur(16px);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  box-shadow:0 1px 0 var(--line-soft);
  padding:15px 0;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:30px}

.brand{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.brand .bm{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.01em}
.brand .bm sup{font-size:11px;vertical-align:super;font-weight:400;letter-spacing:0}
.brand .bs{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin-top:6px;
}

.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-family:var(--sans);font-size:13px;letter-spacing:.01em;color:var(--navy);
  position:relative;padding:5px 0;opacity:.78;transition:opacity .3s var(--ease);
}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink-quiet);transition:right .45s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{right:0}

.nav-cta{flex-shrink:0}
.nav-cta .btn{padding:12px 24px;font-size:12px}

.burger{display:none;flex-direction:column;gap:5px;padding:10px}
.burger span{width:22px;height:1.5px;background:var(--navy);transition:transform .35s var(--ease),opacity .25s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  padding:112px var(--gut) 48px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{
  display:block;font-family:var(--serif);font-size:27px;letter-spacing:-.01em;
  padding:15px 0;border-bottom:1px solid var(--line-soft);
  transition:padding-left .35s var(--ease);
}
.mobile-menu a:hover{padding-left:6px}
.mobile-menu .btn{margin-top:var(--s4);border-bottom:none;padding:16px 30px}
.mobile-menu .btn:hover{padding-left:30px}

/* ---------- SECTIONS ---------- */
section{position:relative}
.sec{padding:clamp(72px,11.5vw,156px) 0}
.sec-sm{padding:clamp(56px,8vw,112px) 0}
/* ---------- SEAMS ----------
   Two sections on the same paper need a seam or they float: each one
   ends, a long silence follows, another begins from nowhere. Where two
   plain sections meet, a hairline runs the width of the page and the
   two paddings collapse to one measure. A field change, an inversion,
   a full-bleed photograph or the threshold keeps its own silence —
   those breaks already mean something. */
:root{--seam:clamp(56px,7vw,96px)}
.sec:not(.atm):not(.arch):not(.invert) + .sec:not(.atm):not(.arch):not(.invert),
.sec:not(.atm):not(.arch):not(.invert) + .sec-sm:not(.atm):not(.arch):not(.invert),
.sec:not(.atm):not(.arch):not(.invert) + .guard,
.sec:not(.atm):not(.arch):not(.invert) + .orient,
.sec:not(.atm):not(.arch):not(.invert) + .conviction,
.sec-sm:not(.atm):not(.arch):not(.invert) + .sec:not(.atm):not(.arch):not(.invert),
.sec-sm:not(.atm):not(.arch):not(.invert) + .sec-sm:not(.atm):not(.arch):not(.invert),
.sec-sm:not(.atm):not(.arch):not(.invert) + .guard,
.sec-sm:not(.atm):not(.arch):not(.invert) + .orient,
.sec-sm:not(.atm):not(.arch):not(.invert) + .conviction,
.guard + .sec:not(.atm):not(.arch):not(.invert),
.guard + .sec-sm:not(.atm):not(.arch):not(.invert),
.guard + .orient,
.orient + .sec:not(.atm):not(.arch):not(.invert),
.orient + .sec-sm:not(.atm):not(.arch):not(.invert),
.conviction + .sec:not(.atm):not(.arch):not(.invert),
.conviction + .sec-sm:not(.atm):not(.arch):not(.invert),
.credstrip + .sec:not(.atm):not(.arch):not(.invert),
.credstrip + .sec-sm:not(.atm):not(.arch):not(.invert){
  border-top:1px solid var(--line-soft);padding-top:var(--seam)}
/* the section before a seam gives up its doubled bottom measure too */
.sec:not(.atm):not(.arch):not(.invert):has(+ .sec:not(.atm):not(.arch):not(.invert)),
.sec:not(.atm):not(.arch):not(.invert):has(+ .sec-sm:not(.atm):not(.arch):not(.invert)),
.sec:not(.atm):not(.arch):not(.invert):has(+ .guard),
.sec:not(.atm):not(.arch):not(.invert):has(+ .orient),
.sec:not(.atm):not(.arch):not(.invert):has(+ .conviction),
.sec-sm:not(.atm):not(.arch):not(.invert):has(+ .sec:not(.atm):not(.arch):not(.invert)),
.sec-sm:not(.atm):not(.arch):not(.invert):has(+ .sec-sm:not(.atm):not(.arch):not(.invert)),
.sec-sm:not(.atm):not(.arch):not(.invert):has(+ .guard),
.sec-sm:not(.atm):not(.arch):not(.invert):has(+ .orient),
.sec-sm:not(.atm):not(.arch):not(.invert):has(+ .conviction),
.guard:has(+ .sec:not(.atm):not(.arch):not(.invert)),
.guard:has(+ .sec-sm:not(.atm):not(.arch):not(.invert)),
.guard:has(+ .orient),
.orient:has(+ .sec:not(.atm):not(.arch):not(.invert)),
.orient:has(+ .sec-sm:not(.atm):not(.arch):not(.invert)),
.conviction:has(+ .sec:not(.atm):not(.arch):not(.invert)),
.conviction:has(+ .sec-sm:not(.atm):not(.arch):not(.invert)){padding-bottom:var(--seam)}
/* Before the threshold, the page gives up its doubled bottom measure:
   the threshold's own approach is the silence, and its gold rule is
   the line. No hairline here — a second line would argue with it. */
.sec:not(.atm):not(.arch):not(.invert):has(+ .threshold),
.sec-sm:not(.atm):not(.arch):not(.invert):has(+ .threshold),
.guard:has(+ .threshold),.orient:has(+ .threshold),
.conviction:has(+ .threshold){padding-bottom:var(--seam)}
/* the credstrip already draws its own rules; no second line */
.credstrip + .sec:not(.atm):not(.arch):not(.invert),
.credstrip + .sec-sm:not(.atm):not(.arch):not(.invert){border-top:none}
/* tap targets: every button and chip clears 44px on touch */
@media(pointer:coarse){.btn{min-height:46px}.chip,.rec-q,.opt-t{min-height:48px}.nav-links a,.foot a{padding:8px 0;display:inline-block}}
/* smooth in-page anchors, unless the reader asked for no motion */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* A pull-quote alone on paper is the loneliest thing on the site. Give
   it a room: a measure, and the seams either side it now has. */
.sec-sm > .wrap > .pull:only-child,.sec > .wrap > .pull:only-child{padding:clamp(8px,1.5vw,20px) 0}

/* The definition sits at the foot of its section, so it reads as the
   section's last word rather than a separate thought left behind. */
.defn{margin-top:clamp(36px,4.6vw,60px)}

/* INVERSION = WEIGHT. One per page, maximum. */
.invert{background:var(--navy);color:var(--cream)}
.invert h1,.invert h2,.invert h3{color:#fff}
.invert p{color:rgba(245,242,236,.8)}
.invert .eyebrow{color:rgba(245,242,236,.5)}
.invert .mark span{color:rgba(245,242,236,.6)}
.invert .mark i{background:rgba(245,242,236,.38)}
.invert .center .mark span::after{background:rgba(245,242,236,.26)}
.invert .center .mark::after{background:rgba(245,242,236,.38)}
.invert .mark b{background:rgba(245,242,236,.26)}
.invert .u{border-color:var(--gold-soft)}
.invert .rule{background:var(--gold-soft)}
.invert .rule.quiet{background:rgba(245,242,236,.28)}
.invert ::selection{background:rgba(245,242,236,.18)}

/* ---------- ATMOSPHERIC FIELDS (the mind's world) ----------
   Light, texture, no subject. Light pools upper-left where the
   headline sits, so navy Cormorant reads with no scrim.     */
.atm{position:relative;overflow:hidden}
.atm > *{position:relative;z-index:2}

/* late-morning sun on plaster — the safest default */
.atm-wall{
  background:
    var(--grain),
    radial-gradient(78% 62% at 14% 6%, rgba(255,253,248,1) 0%, rgba(255,252,246,.86) 22%, rgba(252,248,240,.42) 48%, rgba(250,246,237,0) 74%),
    radial-gradient(52% 44% at 6% 34%, rgba(255,254,250,.7) 0%, rgba(255,254,250,0) 68%),
    radial-gradient(120% 130% at 96% 104%, rgba(206,194,175,.5) 0%, rgba(206,194,175,0) 58%),
    linear-gradient(158deg,#FBF9F4 0%,#F5F1E8 38%,#EDE7DA 68%,#E4DCCB 100%);
}
/* light through frosted glass — cool, clinical, the framework pages */
.atm-frost{
  background:
    var(--grain),
    radial-gradient(72% 62% at 22% 16%, rgba(255,255,255,.98) 0%, rgba(250,250,250,.6) 40%, rgba(250,250,250,0) 74%),
    radial-gradient(90% 90% at 96% 100%, rgba(150,164,184,.36) 0%, rgba(150,164,184,0) 62%),
    linear-gradient(162deg,#FAFAF9 0%,#F2F3F3 42%,#E3E7EC 74%,#D2D9E2 100%);
}
/* dark atmospheric — one shaft of warm light entering a navy room.
   Pairs with .invert; the light lands where the type sits.     */
.atm-shaft{
  background:
    var(--grain),
    linear-gradient(106deg, rgba(255,240,212,.15) 0%, rgba(232,206,158,.12) 9%, rgba(201,162,94,.05) 20%, rgba(201,162,94,0) 36%),
    radial-gradient(64% 88% at 4% -6%, rgba(255,238,206,.22) 0%, rgba(255,238,206,.06) 42%, rgba(255,238,206,0) 74%),
    radial-gradient(46% 52% at 20% 42%, rgba(190,206,232,.12) 0%, rgba(190,206,232,0) 72%),
    radial-gradient(130% 120% at 100% 108%, rgba(3,12,24,.82) 0%, rgba(3,12,24,0) 62%),
    linear-gradient(152deg,#14375C 0%,#0A2540 44%,#071B30 78%,#051425 100%);
}
.invert.atm-shaft{background-color:var(--navy)}

/* ---------- ARCHITECTURAL FIELDS (the organization's world)
   Threshold and first light. Depth comes from light and single
   receding edges — never from repeated verticals. No grids. */
.arch{position:relative;overflow:hidden}
.arch > *{position:relative;z-index:4}

/* first light across a floor. The threshold is a change in value,
   not a drawn line, and the wash never meets an element edge. */
.arch-dawn{
  background:
    var(--grain),
    radial-gradient(126% 82% at 56% 96%, rgba(255,250,238,.94) 0%, rgba(250,242,226,.56) 30%, rgba(248,240,224,.22) 54%, rgba(248,240,224,0) 78%),
    radial-gradient(70% 56% at 16% 8%, rgba(255,254,249,.7) 0%, rgba(255,254,249,0) 72%),
    linear-gradient(184deg,#F4F1EB 0%,#EFEAE1 44%,#E8E0D2 72%,#DFD5C2 100%);
}
.arch-dawn::after{
  content:"";position:absolute;left:0;right:0;top:40%;bottom:0;z-index:1;
  background:linear-gradient(178deg,
    rgba(255,251,241,0) 0%, rgba(255,251,241,.28) 26%,
    rgba(255,251,241,.6) 52%, rgba(255,251,241,.34) 76%,
    rgba(255,251,241,0) 100%);
}
.arch-dawn::before{
  content:"";position:absolute;left:0;right:0;top:auto;bottom:7%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(10,37,64,.13) 30%,rgba(10,37,64,.07) 70%,transparent);
}

/* dark architectural — Before Dawn. Warm light gathering at the floor
   line; the value change is the threshold, not a drawn rule.     */
.arch-predawn{
  background:
    var(--grain),
    radial-gradient(56% 50% at 16% 22%, rgba(190,206,232,.1) 0%, rgba(190,206,232,0) 74%),
    linear-gradient(178deg,#12324F 0%,#0A2540 46%,#071B30 82%,#051425 100%);
}
.arch-predawn::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;
  background:linear-gradient(180deg,transparent 0%,rgba(201,162,94,.1) 58%,rgba(236,212,164,.18) 100%);
}
.arch-predawn::after{
  content:"";position:absolute;left:0;right:0;bottom:32%;height:8%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(236,212,164,.14) 70%,transparent);
  filter:blur(6px);
}

/* ---------- MOTION ----------
   Restraint executed well. Things arrive; nothing performs.  */
.rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}
.rise.d2{transition-delay:.14s}
.rise.d3{transition-delay:.21s}
.rise.d4{transition-delay:.28s}
/* Mid-page sections arrive as one block. Staged arrival belongs to
   the hero and to the page's one moment (.staged); ten small waits
   down a page are ten small interruptions. */
section:not(.staged) .rise.d1,section:not(.staged) .rise.d2,
section:not(.staged) .rise.d3,section:not(.staged) .rise.d4{transition-delay:0s}
body.home section:first-of-type .rise.d1{transition-delay:.07s}
body.home section:first-of-type .rise.d2{transition-delay:.14s}
body.home section:first-of-type .rise.d3{transition-delay:.21s}
body.home section:first-of-type .rise.d4{transition-delay:.28s}

/* a threshold that draws itself */
.draw{width:0;transition:width 1.2s var(--ease) .18s}
.draw.in{width:64px}

/* soft reveal for full-bleed fields */
.fade{opacity:0;transition:opacity 1.1s var(--ease)}
.fade.in{opacity:1}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  .draw{width:64px}
  .fade{opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- FOOTER ---------- */
.foot{background:var(--navy);color:var(--cream);padding:88px 0 40px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px;padding-bottom:56px;
  border-bottom:1px solid rgba(245,242,236,.12)}
.foot .brand .bm{color:#fff}
.foot .brand .bs{color:rgba(245,242,236,.5)}
.foot-tag{margin-top:var(--s3);font-size:15.5px;line-height:1.7;color:rgba(245,242,236,.7);max-width:34ch}
.foot h4{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(245,242,236,.5);margin-bottom:var(--s3)}
.foot ul{list-style:none}
.foot li{margin-bottom:12px}
.foot li a{font-size:15px;color:rgba(245,242,236,.76);transition:color .3s var(--ease)}
.foot li a:hover{color:#fff}
.foot-bot{padding-top:var(--s4);display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:12.5px;letter-spacing:.01em;color:rgba(245,242,236,.45);flex-wrap:wrap}

/* ---------- UTILITIES ---------- */
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,76px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.6vw,48px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.8vw,36px)}
.stack>*+*{margin-top:var(--s3)}

/* ---------- PAGE HERO (interior pages) ---------- */
.phero{padding:clamp(132px,17vw,208px) 0 clamp(64px,9vw,116px)}
.phero h1{max-width:18ch}
.phero .sub{
  font-family:var(--serif);font-size:clamp(22px,2.8vw,33px);line-height:1.24;
  letter-spacing:-.008em;color:var(--navy);margin-top:var(--s3);max-width:26ch;
  text-wrap:balance;
}
.phero .lede{margin-top:var(--s3);max-width:52ch}

/* ---------- STAGE / STEP CARDS ---------- */
.stages{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.stages.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stages.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stages.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stage{background:var(--paper);padding:34px 28px 36px;display:flex;flex-direction:column}
.stage .no{font-family:var(--serif);font-size:15px;color:var(--slate);margin-bottom:10px;letter-spacing:.06em}
.stage h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:6px}
.stage .kick{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--s3)}
.stage p{font-size:15.5px;color:var(--slate);line-height:1.62}
.stage ul{list-style:none;margin-top:14px}
.stage li{font-size:15px;color:var(--slate);padding:5px 0 5px 18px;position:relative;line-height:1.5}
.stage li::before{content:"";position:absolute;left:0;top:14px;width:4px;height:4px;background:var(--navy);opacity:.32;transform:rotate(45deg)}
.stage .said{margin-top:auto;padding-top:var(--s3);font-family:var(--serif);font-style:italic;font-size:17.5px;color:var(--navy);line-height:1.34}

/* pull-quote */
.pull{text-align:center;max-width:30ch;margin:0 auto;font-family:var(--serif);font-style:italic;font-weight:400;
      font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:-.006em;text-wrap:balance}
.pull-attr{margin-top:var(--s3);font-family:var(--sans);font-size:10px;letter-spacing:.26em;
      text-transform:uppercase;color:var(--slate);text-align:center}

/* quad grid (VOICE) */
.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.quad > div{background:var(--paper);padding:40px 34px}
.quad .kick{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--s2)}
.quad h3{font-size:clamp(23px,2.6vw,31px);margin-bottom:14px;max-width:12ch}
.quad p{font-size:16px;color:var(--slate);line-height:1.66}

/* ---------- METRICS ROW (For Leaders) ---------- */
.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metrics > div{background:var(--paper);padding:32px 24px}
.metrics h3{font-size:clamp(19px,2vw,23px);margin-bottom:var(--s1)}
.metrics p{font-size:15px;color:var(--slate);line-height:1.55}

/* ---------- COST ROW (what goes unnamed) ---------- */
.cost{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:rgba(245,242,236,.14);
  border:1px solid rgba(245,242,236,.14);border-radius:3px;overflow:hidden;margin-top:var(--s5)}
.cost > div{padding:26px 16px;text-align:center;background:transparent}
.cost span{display:block;font-family:var(--sans);font-size:13.5px;line-height:1.45;color:rgba(245,242,236,.86)}

/* ---------- CHECK LIST ---------- */
.checks{list-style:none;max-width:42ch}
.checks li{position:relative;padding:11px 0 11px 30px;font-size:17px;color:var(--slate);line-height:1.55}
.checks li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:5px;
  border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);
  transform:rotate(-45deg);opacity:.45}

/* ---------- PILLAR GRID ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.pillars > div{background:var(--paper);padding:36px 30px}
.pillars .kick{font-family:var(--sans);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--slate);margin-bottom:var(--s2)}
.pillars h3{font-size:clamp(20px,2.1vw,25px);margin-bottom:10px;max-width:14ch}
.pillars p{font-size:15.5px;color:var(--slate);line-height:1.62}

/* ---------- QUOTE CARDS (Evidence) ---------- */
.quotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:30px 26px;
  display:flex;flex-direction:column;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.qcard:hover{border-color:rgba(10,37,64,.24);box-shadow:0 14px 34px -26px rgba(10,37,64,.3)}
.qcard p{font-family:var(--serif);font-size:19.5px;line-height:1.38;margin-bottom:var(--s3);letter-spacing:-.004em}
.qcard .who{margin-top:auto;font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy)}
.qcard .yrs{font-family:var(--sans);font-size:11px;color:var(--slate);margin-top:5px}

/* ---------- RESEARCH / ALIGNED ---------- */
.reflist{list-style:none}
.reflist li{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.reflist li:last-child{border-bottom:none}
.reflist .claim{font-size:16.5px;color:var(--navy);line-height:1.55}
.reflist .cite{font-family:var(--sans);font-size:13px;color:var(--slate);font-style:italic;margin-top:6px;line-height:1.5}

/* ---------- STAT ROW ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats > div{background:var(--paper);padding:36px 26px;text-align:center}
.stats .big{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1;margin-bottom:6px;letter-spacing:-.012em}
.stats .cap{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);margin-bottom:var(--s2)}
.stats p{font-size:14.5px;color:var(--slate);line-height:1.5;max-width:22ch;margin:0 auto}

/* ---------- JOURNEY ---------- */
.journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.journey > div{background:var(--paper);padding:32px 24px}
.journey .kick{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);margin-bottom:var(--s2)}
.journey p{font-size:15px;color:var(--slate);line-height:1.6}

/* ---------- TOPIC LIST ---------- */
.topics{list-style:none;max-width:56ch}
.topics li{padding:24px 0;border-bottom:1px solid var(--line-soft)}
.topics li:last-child{border-bottom:none}
.topics h3{font-size:clamp(19px,2vw,23px);margin-bottom:6px}
.topics p{font-size:15.5px;color:var(--slate);line-height:1.62}

/* ---------- FORM ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);max-width:560px}
.form .full{grid-column:1/-1}
.field label{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);margin-bottom:var(--s1)}
/* "Required" is information, not recognition: label voice, one shade quieter, no gold */
.field .req{font-weight:400;letter-spacing:.14em;text-transform:none;font-size:11px;color:rgba(10,37,64,.55);margin-left:6px}
/* An error is a threshold to cross again: muted brick, not alarm red;
   the field keeps its value and its calm */
.field.err input,.q .field.err input:focus{border-color:#A34A3F;box-shadow:inset 0 -1px 0 #A34A3F}
.err-msg{margin-top:8px;font-family:var(--sans);font-size:13.5px;line-height:1.45;color:#8E3F35}
.fl-note.err{color:#8E3F35;max-width:36ch;line-height:1.45}
.q > label.qh{display:block;cursor:pointer}
.privacy{margin-top:18px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--slate);max-width:48ch}
.opt-note{margin-top:14px;font-family:var(--sans);font-size:13.5px;color:var(--slate)}
/* Confirmation: the drawn gold rule is the mark of arrival; the kicker is structure, navy */
.done-k{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);margin-bottom:18px}
#flSubmit:disabled,#cSubmit:disabled{opacity:.55;cursor:default}

/* ---------- ABOUT — the question, standing out ----------
   The page's centrepiece. Larger than any other line on the page, with a
   gold left rule: the threshold between what she noticed and what CIS™
   became. The rule is the mark; the type itself stays navy. */
.question .big-q.standout{font-size:clamp(34px,5.6vw,64px);line-height:1.08;letter-spacing:-.015em;
  max-width:19ch;padding-left:clamp(18px,2.4vw,30px);border-left:2px solid var(--gold);
  overflow-wrap:break-word;text-wrap:balance}
@media(max-width:640px){.question .big-q.standout{font-size:clamp(29px,7.6vw,38px);line-height:1.12;padding-left:16px}}

/* ---------- LEADERS — two coordinated sets ----------
   A three-column set reads as a progression, not three boxes, when the
   columns share one baseline and are numbered by a hairline count rather
   than boxed apart. So: no cell borders, one rule above the set, and a
   small ordinal that carries the reader left to right. */
.pillars.prog{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;gap:0}
.pillars.prog > div{background:transparent;padding:30px 28px 8px 0;position:relative}
.pillars.prog > div + div{padding-left:28px;border-left:1px solid var(--line-soft)}
.pillars.prog .kick{display:flex;align-items:baseline;gap:10px;color:var(--navy);margin-bottom:12px}
.pillars.prog .kick::before{counter-increment:pillar;content:counter(pillar,decimal-leading-zero);
  font-family:var(--sans);font-size:10px;letter-spacing:.12em;color:var(--slate);font-variant-numeric:tabular-nums}
.pillars.prog{counter-reset:pillar}
.pillars.prog p{max-width:32ch}
/* the second set follows the first on the same paper: one seam, not two
   full measures, so they read as a pair rather than a six-column block */
.sec-sm:has(+ .pair-2){padding-bottom:var(--seam)}
.pair-2{border-top:1px solid var(--line-soft);padding-top:var(--seam)}
@media(max-width:820px){
  .pillars.prog > div{padding:26px 0 6px}
  .pillars.prog > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line-soft)}
  .pillars.prog p{max-width:none}
}
/* ---------- CONTACT — final refinements ---------- */
/* "Required" sits at the right of its label, in the label's own voice */
.field label .req-w{float:right;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(10,37,64,.55);font-weight:400}
.field.err select,.field.err textarea{border-color:#A34A3F}
/* The confirmation takes the form's place: a gold rule draws, then the
   words. Same measure as the intake's arrival so the two doors feel like
   one house. */
.sent{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease);outline:none;
  padding-top:6px;min-height:200px}
.sent.go{opacity:1;transform:none}
.sent .ln{width:0;height:1px;background:var(--gold);margin-bottom:28px;transition:width 1.3s var(--ease) .2s}
.sent.go .ln{width:84px}
.sent h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.8vw,31px);line-height:1.25;margin-bottom:14px;max-width:22ch;color:var(--navy)}
.sent p{font-size:16.5px;line-height:1.6;color:var(--slate);max-width:44ch}
/* the two columns start level; the portrait leads the right column, so the
   left heading and the photo top align */
@media(max-width:820px){
  .sent{min-height:0}
  .field label .req-w{float:none;margin-left:8px}
}
.next a{border-bottom:1px solid var(--line);transition:border-color .25s var(--ease)}
.next a:hover{border-color:var(--navy)}
@media(min-width:720px){.next{grid-template-columns:repeat(3,minmax(0,1fr))}}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--navy);
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:14px 16px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(10,37,64,.24)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,37,64,.07)}
.field textarea{min-height:130px;resize:vertical;font-family:var(--sans);line-height:1.6}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--slate);line-height:1.55}
.consent input{margin-top:4px;flex-shrink:0;width:17px;height:17px;accent-color:var(--navy)}

.cdetails{list-style:none}
.cdetails li{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.cdetails li:last-child{border-bottom:none}
.cdetails .lbl{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);margin-bottom:7px}
.cdetails .val{font-size:17px;color:var(--navy);line-height:1.5}

/* ============================================================
   RESPONSIVE — mobile is the first review, not the fallback.
   Wide grids shed columns in stages; the column count is chosen
   by measure, not by device. !important beats the inline
   grid-template overrides on the built pages.
   ============================================================ */

@media(max-width:1180px){
  /* crisp.html carries its five columns as an inline override, so the
     step has to match the override rather than a class. Targeting
     .stages.c4 here would drop trm4's genuine four cards to three. */
  .stages.c5,
  .stages[style*="repeat(5"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .journey{grid-template-columns:repeat(3,minmax(0,1fr))}
  .journey > div:last-child{grid-column:span 2}
  .cost{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
  .foot-top .brand-col{grid-column:1/-1}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .stages.c4,
  .stages.c5,
  .stages[style*="repeat(5"],
  .stages[style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .journey{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey > div:last-child{grid-column:1 / -1}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:1fr}
}
@media(max-width:760px){
  :root{--gut:22px}
  body{font-size:16.5px}
  h1{letter-spacing:-.012em}
  h2{letter-spacing:-.008em}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-3,.grid-4{gap:var(--s5)}
  .foot-top{grid-template-columns:1fr;gap:var(--s5)}
  .foot{padding:64px 0 36px}
  .foot-top{padding-bottom:var(--s5)}
  .brand .bm{font-size:26px}
  .btn{padding:14px 26px}
  .nav{padding:20px 0}
  .nav.solid{padding:12px 0}
  /* a full-width tap target reads as intended on a phone */
  .mobile-menu .btn{width:100%;justify-content:center}
}
@media(max-width:640px){
  .stages.c4,.stages.c5,.stages.c2,
  .stages[style*="repeat("],.quad{grid-template-columns:1fr!important}
  .quotes,.stats,.journey,.form{grid-template-columns:1fr}
  .journey > div:last-child{grid-column:auto}
  .metrics{grid-template-columns:1fr}
  .cost{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* one column means the cell edge is the page edge: pull padding in
     so the measure stays comfortable rather than the box staying big */
  .stage{padding:28px 22px 30px}
  .quad > div{padding:32px 24px}
  .metrics > div,.journey > div{padding:26px 22px}
  .pillars > div{padding:30px 24px}
  .stats > div{padding:30px 22px}
  .qcard{padding:26px 22px}
  .cost > div{padding:22px 12px}
  .quotes{gap:var(--s2)}
  .checks li{padding-left:26px;font-size:16.5px}
  .topics li{padding:20px 0}
  .pull{max-width:20ch}
}
@media(max-width:420px){
  h1{font-size:clamp(36px,10.6vw,44px)}
  .phero{padding-top:120px}
  .brand .bs{font-size:9px;letter-spacing:.18em}
  .mobile-menu a{font-size:24px;padding:13px 0}
  .cost{grid-template-columns:1fr}
  .cost > div{text-align:left;padding:18px 20px}
}

/* ============================================================
   ROOM 7 — the recognition scenario.
   Full screen means STOP. The interruption is the lesson, and this
   is the only page on the site that takes the screen.

   Gold is earned here: the selected observation, the active stage,
   the escalation rule, the reveal. Nowhere else — the continue
   buttons are cream, because a gold button is decoration.
   ============================================================ */

/* the page steps back so the moment can step forward */
body > *:not(.scene){
  transition:transform 1s var(--ease),opacity 1s var(--ease),filter 1s var(--ease);
}
body.locked > *:not(.scene){
  transform:scale(.986);opacity:.45;filter:blur(2px);
}
body.locked{overflow:hidden;overscroll-behavior:none}

.scene{
  position:fixed;inset:0;z-index:200;
  background:var(--navy);color:var(--cream);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:scale(1.014);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),visibility 1s;
}
.scene.on{opacity:1;visibility:visible;transform:none}
/* the frame arrives after the field, so the room settles first */
.scene .sc-prog,.scene .sc-exit{opacity:0;transition:opacity .7s var(--ease) .45s}
.scene.on .sc-prog,.scene.on .sc-exit{opacity:1}

/* dark atmospheric ground — one shaft of light, no scrim */
.scene{
  background:
    var(--grain),
    radial-gradient(58% 74% at 12% -8%, rgba(255,238,206,.13) 0%, rgba(255,238,206,.04) 44%, rgba(255,238,206,0) 74%),
    radial-gradient(130% 120% at 100% 108%, rgba(3,12,24,.72) 0%, rgba(3,12,24,0) 62%),
    linear-gradient(152deg,#12324F 0%,#0A2540 46%,#071B30 82%,#051425 100%);
  background-color:var(--navy);
}

/* progress — the active stage is a recognition mark */
.sc-prog{display:flex;border-bottom:1px solid rgba(245,242,236,.12);flex-shrink:0;
  padding-right:96px}
.sc-prog span{
  flex:1;text-align:center;padding:17px 6px;white-space:nowrap;position:relative;
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,242,236,.5);border-right:1px solid rgba(245,242,236,.12);
  transition:color .7s var(--ease);
}
.sc-prog span:last-child{border-right:none}
.sc-prog span::after{
  content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;
  background:var(--gold-soft);transition:right .9s var(--ease);
}
.sc-prog span.on{color:var(--gold-soft)}
.sc-prog span.on::after{right:0}
.sc-prog span.done{color:rgba(245,242,236,.78)}
.sc-prog span.done::after{right:0;background:rgba(245,242,236,.28)}

/* exit */
.sc-exit{
  position:absolute;top:12px;right:20px;z-index:5;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.5);padding:10px 12px;border-radius:40px;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.sc-exit:hover{color:var(--cream);background:rgba(245,242,236,.06)}
.sc-exit:focus-visible{outline:1px solid rgba(245,242,236,.6);outline-offset:2px}

/* margin:auto centres when there is room and never clips when there
   is not — align-items:center would make tall steps unscrollable */
.sc-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;align-items:flex-start;padding:48px 0}
.sc-wrap{max-width:820px;margin:auto;padding:0 30px;width:100%}

.sc-step{display:none}
.sc-step.show{display:block}
/* each element arrives in turn: stillness, then the next line */
@keyframes scin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sc-step.show > *{animation:scin .85s var(--ease) both}
.sc-step.show > *:nth-child(1){animation-delay:.05s}
.sc-step.show > *:nth-child(2){animation-delay:.14s}
.sc-step.show > *:nth-child(3){animation-delay:.23s}
.sc-step.show > *:nth-child(4){animation-delay:.32s}
.sc-step.show > *:nth-child(5){animation-delay:.41s}
.sc-step.show > *:nth-child(6){animation-delay:.5s}
.sc-step.show > *:nth-child(7){animation-delay:.59s}
.sc-step.show > *:nth-child(8){animation-delay:.68s}
.sc-step.show > .sc-reveal{animation:none}

/* the facts build rather than appear. Each line lands on its own,
   and the particle field reads every landing — more can happen when
   more is known. */
.sc-step.show .compare > div{animation:scin .8s var(--ease) both}
.sc-step.show .compare > div:nth-child(1){animation-delay:.22s}
.sc-step.show .compare > div:nth-child(2){animation-delay:.34s}
.sc-step.show .compare li{animation:scin .7s var(--ease) both}
.sc-step.show .compare > div:nth-child(1) li:nth-child(1){animation-delay:.46s}
.sc-step.show .compare > div:nth-child(1) li:nth-child(2){animation-delay:.60s}
.sc-step.show .compare > div:nth-child(1) li:nth-child(3){animation-delay:.74s}
.sc-step.show .compare > div:nth-child(1) li:nth-child(4){animation-delay:.88s}
.sc-step.show .compare > div:nth-child(2) li:nth-child(1){animation-delay:1.06s}
.sc-step.show .compare > div:nth-child(2) li:nth-child(2){animation-delay:1.26s}
.sc-step.show .compare > div:nth-child(2) li:nth-child(3){animation-delay:1.46s}
.sc-step.show .compare > div:nth-child(2) li:nth-child(4){animation-delay:1.66s}
.sc-step.show .vitals .vital{animation:scin .7s var(--ease) both}
.sc-step.show .vitals .vital:nth-child(1){animation-delay:.30s}
.sc-step.show .vitals .vital:nth-child(2){animation-delay:.44s}
.sc-step.show .vitals .vital:nth-child(3){animation-delay:.58s}
.sc-step.show .vitals .vital:nth-child(4){animation-delay:.72s}
/* the quote arrives as a whole, then its rule draws down it */
.sc-step.show .escal{animation:scin .9s var(--ease) .5s both}
.sc-step.show .escal{background-image:linear-gradient(transparent,transparent)}

.sc-kick{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(245,242,236,.5);margin-bottom:var(--s2)}
.sc-step h2{color:#fff;font-size:clamp(27px,4.6vw,46px);line-height:1.11;letter-spacing:-.016em;
  margin-bottom:var(--s2);max-width:20ch}
.sc-step p{color:rgba(245,242,236,.8);font-size:17.5px;line-height:1.68;max-width:56ch}
.sc-step p + p{margin-top:var(--s2)}

/* vitals — every number inside the normal range */
.vitals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(245,242,236,.13);
  border:1px solid rgba(245,242,236,.13);border-radius:3px;overflow:hidden;margin:var(--s3) 0 10px}
.vital{background:rgba(7,27,48,.55);padding:20px 12px;text-align:center}
.vital .v{font-family:var(--serif);font-size:clamp(23px,3vw,31px);color:#fff;line-height:1;letter-spacing:-.01em}
.vital .l{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.5);margin-top:8px}
.within{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.62);text-align:center}

/* observation chips — selection is the first act of recognition */
.chips{display:flex;flex-direction:column;gap:11px;margin:var(--s3) 0 6px;max-width:48ch}
.chip{
  position:relative;text-align:left;font-family:var(--serif);font-size:19px;line-height:1.34;
  color:rgba(245,242,236,.88);background:rgba(245,242,236,.02);
  border:1px solid rgba(245,242,236,.2);border-radius:3px;
  padding:16px 20px;min-height:56px;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.chip::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold);transform:scaleY(0);transform-origin:center;
  transition:transform .5s var(--ease);
}
.chip:hover{border-color:rgba(245,242,236,.4);background:rgba(245,242,236,.045);color:#fff}
.chip:focus-visible{outline:1px solid var(--gold-soft);outline-offset:2px}
.chip.sel{border-color:rgba(184,137,62,.7);background:rgba(184,137,62,.1);color:#fff}
.chip.sel::before{transform:scaleY(1)}
.chip .after{
  display:block;font-family:var(--sans);font-size:14px;font-style:italic;line-height:1.5;
  color:rgba(245,242,236,.62);max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .55s var(--ease),opacity .45s var(--ease) .1s,margin-top .55s var(--ease);
}
.chip.sel .after{max-height:7em;opacity:1;margin-top:10px}

/* compare — deviation only exists relative to a baseline */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(245,242,236,.13);
  border:1px solid rgba(245,242,236,.13);border-radius:3px;overflow:hidden;margin:var(--s3) 0 10px}
.compare > div{background:rgba(7,27,48,.5);padding:26px 24px}
.compare .now{background:rgba(7,27,48,.72)}
.compare h4{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,242,236,.5);margin-bottom:var(--s2)}
.compare ul{list-style:none}
.compare li{font-family:var(--serif);font-size:18px;line-height:1.4;color:rgba(245,242,236,.6);padding:7px 0}
.compare .now li{color:#fff}

/* escalation — the rule marks the threshold between noticing and saying */
.escal{border-left:2px solid var(--gold);background:rgba(245,242,236,.055);
  padding:24px 28px;margin:var(--s3) 0 10px;max-width:54ch;border-radius:0 2px 2px 0}
.escal p{font-family:var(--serif);font-style:italic;font-size:19.5px;line-height:1.46;color:#fff;max-width:none}

/* reveal — the payoff. It lands in five beats, not one. */
.sc-reveal{text-align:center;padding:10px 0}
.sc-reveal .ln{width:0;height:1px;background:var(--gold);margin:0 auto var(--s5);
  transition:width 1.6s var(--ease)}
.sc-reveal.go .ln{width:190px}
.sc-reveal .big,.sc-reveal .mins,.sc-reveal .sm,.sc-reveal .sc-ctrl,.sc-reveal .ln + * ~ *{
  opacity:0;transform:translateY(10px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.sc-reveal.go .big{opacity:1;transform:none;transition-delay:.55s}
.sc-reveal.go .mins{opacity:1;transform:none;transition-delay:1.15s}
.sc-reveal.go .sm{opacity:1;transform:none;transition-delay:1.75s}
.sc-reveal.go .sc-ctrl{opacity:1;transform:none;transition-delay:2.25s}
.sc-reveal.go > div:last-child{opacity:1;transform:none;transition-delay:2.55s}
.sc-reveal .big{color:#fff;font-family:var(--serif);font-size:clamp(26px,4.4vw,44px);
  line-height:1.14;letter-spacing:-.016em;max-width:19ch;margin:0 auto var(--s2);text-wrap:balance}
.sc-reveal .mins{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.2vw,32px);
  color:var(--gold-soft);margin-bottom:var(--s4)}
.sc-reveal .sm{color:rgba(245,242,236,.76);font-size:17px;line-height:1.68;max-width:48ch;margin:0 auto}

.sc-ctrl{margin-top:var(--s4);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sc-hint{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:rgba(245,242,236,.62)}
.sc-again{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.55);text-decoration:underline;text-underline-offset:5px;padding:8px 4px;
  transition:color .3s var(--ease)}
.sc-again:hover{color:var(--cream)}
.sc-again:focus-visible{outline:1px solid rgba(245,242,236,.6);outline-offset:2px}

/* a gold button would be decoration. On light ground it is the navy
   button; inside the scene it is cream, per the inversion palette. */
.btn.gold{background:var(--navy);color:var(--cream)}
.btn.gold:hover{background:var(--navy-deep)}
.scene .btn.gold{background:var(--cream);color:var(--navy)}
.scene .btn.gold:hover{background:#fff;box-shadow:0 8px 22px -12px rgba(0,0,0,.5)}
.btn:disabled{opacity:.32;cursor:default;transform:none;box-shadow:none}
.btn:disabled:hover{transform:none;box-shadow:none}

@media(max-width:700px){
  .sc-prog span{font-size:9px;letter-spacing:.09em;padding:14px 2px}
  .vitals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare{grid-template-columns:1fr}
  .compare > div{padding:22px 20px}
  .sc-body{padding:32px 0 92px}
  .sc-wrap{padding:0 22px}
  .chip{font-size:17.5px;padding:15px 18px;min-height:60px}
  .escal{padding:20px 22px}
  .sc-reveal .ln{margin-bottom:var(--s4)}
  .sc-ctrl .btn{width:100%;justify-content:center}
  .sc-reveal .sc-ctrl .btn{width:auto}
}
/* Below 820px the reserved gutter would squeeze four labels too far,
   so the exit leaves the row entirely and becomes a thumb-reachable
   pill. That also covers the 701–772px band where a top-right exit
   overlaps the "Speak" glyphs directly. */
@media(max-width:820px){
  .sc-prog{padding-right:0}
  .sc-exit{top:auto;bottom:16px;right:16px;background:rgba(7,27,48,.82);
    border:1px solid rgba(245,242,236,.18);padding:11px 20px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .sc-body{padding-bottom:92px}
}
@media(max-width:380px){
  .sc-prog span{font-size:8.5px;letter-spacing:.04em;padding:13px 1px}
}

@media(prefers-reduced-motion:reduce){
  body.locked > *:not(.scene){transform:none;filter:none;opacity:1}
  .scene{transform:none}
  .scene .sc-prog,.scene .sc-exit{opacity:1}
  .sc-step.show > *,
  .sc-step.show .compare > div,.sc-step.show .compare li,
  .sc-step.show .vitals .vital,.sc-step.show .escal{animation:none!important}
  .sc-reveal .ln{width:190px}
  .sc-reveal .big,.sc-reveal .mins,.sc-reveal .sm,.sc-reveal .sc-ctrl,
  .sc-reveal > div:last-child{opacity:1;transform:none}
}

/* ============================================================
   PHOTOGRAPHY
   Two worlds, two treatments. Photographs sit INSIDE a section;
   the CSS field stays behind them. Grading is done with filters
   and blended overlays rather than baked into the file, so every
   value here stays adjustable and new images inherit it.

   Slots are aspect ratios, not images: drop a founder portrait
   into .ph-portrait or a speaking shot into .ph-wide and it
   arrives already graded.
   ============================================================ */

.photo{
  position:relative;overflow:hidden;display:block;margin:0;
  border-radius:3px;border:1px solid var(--line);
  background:#EAE4DA;               /* the cream the grading lands on */
  isolation:isolate;
}
.photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.024);
  transition:opacity 1.4s var(--ease),transform 1.9s var(--ease);
}
/* .in is set by the same observer that drives .rise, so photographs
   arrive on the same cadence as the type beside them */
.photo.in img{opacity:1;transform:none}

/* ---------- FEATURE PHOTO ----------
   A photograph that carries a section is the section: it breaks the
   text column and runs edge to edge, tall enough that the reader is
   in the frame rather than looking at a picture of one. The caption
   sits inside the lower edge on the image's own shadow, so the line
   belongs to the moment instead of hanging beneath it in white. */
.feature{position:relative;margin:0 calc(50% - 50vw);width:100vw;max-width:100vw;border-radius:0;border:none;
  aspect-ratio:auto;height:clamp(420px,72vh,760px)}
.feature img{object-position:center 38%}
.feature .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(80px,10vw,140px) var(--gut) clamp(30px,4vw,52px);
  background:linear-gradient(to top,rgba(10,37,64,.62),rgba(10,37,64,.28) 55%,transparent);
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.9vw,22px);line-height:1.35;
  color:var(--cream);text-align:center;text-wrap:balance;opacity:0;transform:translateY(10px);
  transition:opacity 1.2s var(--ease) .5s,transform 1.2s var(--ease) .5s}
.feature.in .cap{opacity:1;transform:none}
.feature .cap span{display:block;max-width:34ch;margin:0 auto}
@media(max-width:640px){.feature{height:auto;aspect-ratio:16/9}.feature img{object-position:center}
  .feature .cap{font-size:20px;padding-bottom:28px}}
/* the section holding a feature drops its own top gap; the photo is
   the pause */
.sec-feature{padding:0 0 clamp(72px,11.5vw,156px)}

/* slots */
.ph-band{aspect-ratio:21/9}
.ph-wide{aspect-ratio:16/9}
.ph-panel{aspect-ratio:4/3}
.ph-square{aspect-ratio:1/1}
/* no crop at all — the slot takes the photograph's own proportions.
   For frames where any crop costs the subject. */
.ph-natural{aspect-ratio:auto}
.ph-natural img{height:auto}
.ph-high img{object-position:50% 34%}
.ph-tall{aspect-ratio:3/4}
.ph-portrait{aspect-ratio:4/5}

/* .ph-tight — scale up and anchor to the lower left, pushing an
   unwanted top/right edge out of frame. Used where a straight band
   crop would take the subjects' heads with it. */
.ph-tight img{
  position:absolute;left:0;bottom:0;
  width:113%;height:113%;max-width:none;
  transform-origin:0% 100%;
}
.ph-tight img{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 3%, #000 9%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 3%, #000 9%);
}

/* ---- WARM & HUMAN — the clinician's world ----
   The source reads beige/grey with an orange pillow. Saturation down
   pulls the orange out of competition, sepia carries what is left
   toward cream, and brightness/contrast hold the faces — this world
   has to feel like "she sees me", so skin must not go waxy.     */
.photo-warm img{
  filter:saturate(.94) contrast(1.05) brightness(1.01) sepia(.05);
}
/* a single warm pass, held well off the faces */
.photo-warm::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(168deg, rgba(184,137,62,.06) 0%, rgba(184,137,62,0) 46%, rgba(10,37,64,.07) 100%);
  mix-blend-mode:soft-light;
}
/* the founder portrait and the podium shot are already shot on
   palette — navy, cream, warm light — so they take almost nothing */
.photo-asis img{filter:contrast(1.02) saturate(1.02)}
.photo-asis::after{content:none}

/* ---- QUIET & ARCHITECTURAL — the organization's world ----
   The source reads cold clinical white, which looks like a different
   brand beside the warm work. Sepia warms it into the cream family;
   the object-position crop drops the ceiling grid out of frame and
   keeps the receding walls and the light at the far end — the part
   that reads as a new dawn.                                     */
.photo-arch img{
  filter:saturate(.56) sepia(.22) contrast(1.03) brightness(1.03);
}
.photo-arch::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(172deg, rgba(245,242,236,.2) 0%, rgba(245,242,236,.04) 34%, rgba(10,37,64,.07) 100%);
  mix-blend-mode:soft-light;
}
/* corridor only: crop the ceiling grid out of frame and dissolve the
   top edge into the cream ground, which reads as light from above.
   Not on .photo-arch itself — the boardroom must not be cropped. */
.ph-nogrid img{
  object-position:50% 76%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 6%, #000 16%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 6%, #000 16%);
}

/* a photograph carries no caption unless it is saying something the
   image cannot: structural, sans, never gold */
.photo-note{
  margin-top:14px;font-family:var(--sans);font-size:12px;letter-spacing:.02em;
  color:var(--slate);line-height:1.6;max-width:44ch;
}

@media(max-width:900px){
  .ph-band{aspect-ratio:16/9}
}
@media(max-width:600px){
  .ph-band,.ph-wide{aspect-ratio:16/9}
  .ph-panel{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  .photo img{opacity:1;transform:none}
}

/* ============================================================
   LOGO
   Full lockup for the footer, a compact mark + name for the fixed
   nav (the full lockup is far too wide at header size), and a
   light-on-navy variant so the mark holds on the footer ground.
   The wordmark text stays in the markup for screen readers and is
   visually hidden — the image carries the visual.
   ============================================================ */
.brand{
  display:block;position:relative;flex-shrink:0;
  width:132px;height:46px;
  background:url("img/logo-nav.png") left center/contain no-repeat;
  transition:opacity .3s var(--ease);
}
a.brand:hover{opacity:.78}
.brand .bm,.brand .bs{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* the footer takes the full lockup, light on navy */
.foot .brand{
  width:min(288px,100%);height:auto;aspect-ratio:940/438;
  background-image:url("img/logo-full-light.png");
  background-position:left top;
}
@media(max-width:1000px){
  .brand{width:120px;height:42px}
}
@media(max-width:420px){
  /* leave clear air between the mark and the burger */
  .brand{width:104px;height:38px}
  .foot .brand{width:min(248px,100%)}
}

/* ============================================================
   PARTICLE LAYERS
   The ambient layer sits above section grounds and below all type.
   Every text-bearing wrapper is lifted one step, which is what
   guarantees navy Cormorant never competes with a particle.
   Remove this block and the script tag and the site is unchanged.
   ============================================================ */
.cis-particles{position:fixed;inset:0;z-index:1;pointer-events:none}
.wrap,.stats,.metrics,.stages,.journey,.quotes{position:relative;z-index:2}

/* the scene carries its own layer; .scene is already a stacking
   context at z-index 200, so the canvas sits at 0 inside it and
   the frame and body are lifted above it */
.cis-scene-particles{position:absolute;inset:0;z-index:0;pointer-events:none}
.scene .sc-prog,.scene .sc-body{position:relative;z-index:1}

/* ---------- BOOKING ----------
   The primary action in the right column, and it earns that by
   ground and type alone: a cream fill against the page's white,
   one hairline, and the solid navy button — while the sibling
   "explore first" box stays borderless-quiet with a ghost button.
   No gold, no shadow, no scale-up. Nothing asks for attention. */
.book{padding:32px 34px;border:1px solid var(--line);border-radius:3px;
  background:var(--cream)}
.book h3{letter-spacing:-.005em}
@media(max-width:560px){.book{padding:26px 24px}}

/* Calendly's popup chrome, kept quiet and palette-matched */
.calendly-overlay .calendly-popup{border-radius:4px!important;
  box-shadow:0 30px 80px -30px rgba(10,37,64,.45)!important}
.calendly-overlay .calendly-popup-close{opacity:.7}

/* ---------- THE CIS CYCLE (circular model) ----------
   Line-work only, navy on the frost. The sequence: the ring turns once
   carrying the three names; it lands upright; each stage's role then
   arrives, TRM-4 → VOICE → CRISP, in the order the loop runs; then the
   clinician at the centre, and finally the three qualities. */
.cycle{max-width:560px;margin:0 auto;opacity:0;transform:translateY(20px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.cycle.in{opacity:1;transform:none}
.cycle svg{width:100%;height:auto;display:block;overflow:visible}
.cycle .c-arc path{fill:none;stroke:var(--navy);stroke-opacity:.34;stroke-width:1.25}
.cycle .c-hub{fill:#FFFFFF;fill-opacity:.46;stroke:var(--navy);stroke-opacity:.09}
.cycle .c-node{fill:#FFFFFF;fill-opacity:.95;stroke:var(--navy);stroke-opacity:.14}
.cycle .c-name{font-family:var(--serif);font-size:27px;fill:var(--navy)}
.cycle .c-role{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;fill:var(--slate)}
.cycle .c-note{font-family:var(--sans);font-size:11px;fill:var(--gold)}
.cycle .c-mid{font-family:var(--serif);font-size:25px;fill:var(--navy)}
.cycle .c-word{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--gold)}

.cycle .c-role,.cycle .c-note,.cycle .c-mid,.cycle .c-word{opacity:0}
.cycle .c-ring{transform-box:view-box;transform-origin:261px 288px}
.cycle.in .c-ring{animation:cyc-turn 2.6s cubic-bezier(.17,.85,.28,1) both}
/* roles, in loop order, after the ring settles (2.6s) */
.cycle.in .n1 .c-role,.cycle.in .n1 .c-note{animation:cyc-in .8s var(--ease) 2.8s forwards}
.cycle.in .n2 .c-role,.cycle.in .n2 .c-note{animation:cyc-in .8s var(--ease) 3.5s forwards}
.cycle.in .n3 .c-role,.cycle.in .n3 .c-note{animation:cyc-in .8s var(--ease) 4.2s forwards}
.cycle.in .c-w1{animation:cyc-in .7s var(--ease) 5.2s forwards,cyc-out .8s var(--ease) 8.0s forwards}
.cycle.in .c-w2{animation:cyc-in .7s var(--ease) 5.8s forwards,cyc-out .8s var(--ease) 8.0s forwards}
.cycle.in .c-w3{animation:cyc-in .7s var(--ease) 6.4s forwards,cyc-out .8s var(--ease) 8.0s forwards}
.cycle.in .c-mid{animation:cyc-in 1.1s var(--ease) 8.9s forwards}
@keyframes cyc-out{to{opacity:0}}
@keyframes cyc-turn{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
@keyframes cyc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .cycle .c-ring,.cycle.in .c-ring{animation:none;transform:none}
  .cycle.in .c-role,.cycle.in .c-note,.cycle.in .c-mid,.cycle.in .c-word,
  .cycle.in .n1 .c-role,.cycle.in .n1 .c-note,.cycle.in .n2 .c-role,.cycle.in .n2 .c-note,
  .cycle.in .n3 .c-role,.cycle.in .n3 .c-note,.cycle.in .c-w1,.cycle.in .c-w2,.cycle.in .c-w3{animation:none}
  /* the resting state is the END of the sequence: the qualities have
     cleared and the name holds the hub */
  .cycle .c-role,.cycle .c-note,.cycle .c-mid{opacity:1}
  .cycle .c-word{opacity:0}
}
@media(max-width:560px){
  .cycle{max-width:none;width:calc(100% + var(--gut) * 2);margin-left:calc(var(--gut) * -1)}
  .cycle .c-name{font-size:31px}
  .cycle .c-role{font-size:11px;letter-spacing:.08em}
  .cycle .c-note{font-size:12.5px}
  .cycle .c-mid{font-size:28px}
  .cycle .c-word{font-size:13px;letter-spacing:.1em}
  .cycle .c-arc path{stroke-width:1.6}
}

/* A gold underline must not break across lines — a mark split in two
   marks nothing. Applied where the phrase genuinely fits one line;
   below 360px it is released rather than forcing a page to scroll
   sideways, which would be a worse fault than the break. */
.nowrap .u{white-space:nowrap}
@media(max-width:380px){.nowrap .u{white-space:normal}}

/* ============================================================
   START A CONVERSATION — the intake flow.
   Recognition-first: the questions give language to something
   already felt. Not extraction. Not qualification.
   ============================================================ */
.flow{max-width:720px;margin:0 auto}

/* progress — three steps, quiet */
.fl-prog{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:clamp(34px,4vw,52px)}
.fl-prog span{
  flex:1;padding:14px 8px;text-align:center;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(74,86,102,.45);border-right:1px solid var(--line);
  transition:color .5s var(--ease);
}
.fl-prog span:last-child{border-right:none}
.fl-prog span.on{color:var(--gold)}
.fl-prog span.done{color:var(--navy)}

.fl-step{display:none}
.fl-step.show{display:block;animation:flin .8s var(--ease)}
/* a step arrives; it does not slide in from somewhere */
@keyframes flin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fl-step.show{animation:none}}

/* question blocks */
.q{margin-bottom:clamp(30px,3.6vw,44px)}
.q > .qh{
  font-family:var(--serif);font-size:clamp(21px,2.5vw,27px);line-height:1.28;
  margin-bottom:6px;max-width:30ch;
}
.q > .qs{font-size:15px;color:var(--slate);margin-bottom:16px;max-width:46ch}
.q input[type=text],.q input[type=email],.q textarea{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--navy);
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:14px 16px;transition:border-color .25s var(--ease);
}
.q input:focus,.q textarea:focus{outline:none;border-color:var(--gold)}
.q textarea{min-height:104px;resize:vertical}

/* selectable option tiles */
.opts{display:grid;gap:10px}
.opts.c2{grid-template-columns:1fr 1fr}
.opt-t{
  text-align:left;font-family:var(--sans);font-size:15.5px;color:var(--navy);
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:16px 18px;min-height:52px;cursor:pointer;line-height:1.4;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.opt-t:hover{border-color:rgba(10,37,64,.3)}

.opt-t.sel{border-color:rgba(10,37,64,.45);background:var(--cream);font-weight:500;
  box-shadow:inset 3px 0 0 var(--gold)}
.opt-t small{display:block;font-size:13.5px;color:var(--slate);margin-top:4px;line-height:1.4}

/* the recognition questions — serif, felt, not form-like */
.rec-q{
  display:block;width:100%;text-align:left;
  font-family:var(--serif);font-size:clamp(18px,2.1vw,21px);line-height:1.42;color:var(--navy);
  background:transparent;border:1px solid var(--line);border-radius:3px;
  padding:18px 22px;min-height:56px;cursor:pointer;margin-bottom:10px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.rec-q{transition:border-color .3s var(--ease),background .3s var(--ease),
  box-shadow .3s var(--ease)}
.rec-q:hover{border-color:rgba(10,37,64,.3)}
.rec-q:focus-visible,.opt-t:focus-visible,.fl-back:focus-visible,#flSubmit:focus-visible,#flBook:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;box-shadow:none}
/* Recognition is the one thing gold marks: the statement the reader
   says yes to. Inset rule, not a fill — the sentence stays the
   subject and the mark sits beside it. */
/* Selected must be unmistakable at a glance and at arm's length: the
   gold left rule (recognition), a cream ground, the type up a weight,
   and a navy check. Four quiet signals so none has to shout. */
.rec-q.sel{border-color:rgba(10,37,64,.45);background:var(--cream);font-weight:500;
  box-shadow:inset 3px 0 0 var(--gold)}
.rec-q.sel::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:12px;
  border:solid var(--navy);border-width:0 1.5px 1.5px 0;transform:translateY(-62%) rotate(45deg)}
.rec-q{position:relative;padding-right:52px}

.fl-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(28px,3vw,40px);
  padding-top:24px;border-top:1px solid var(--line)}
.fl-back{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);text-decoration:underline;text-underline-offset:5px}
.fl-back:hover{color:var(--navy)}
.fl-note{font-family:var(--sans);font-size:13px;color:var(--slate)}

/* confirmation */
.fl-done{text-align:center;padding:clamp(20px,3vw,40px) 0}
.fl-done .ln{width:0;height:1px;background:var(--gold);margin:0 auto 32px;
  transition:width 1.9s cubic-bezier(.16,.8,.28,1)}
.fl-done.go .ln{width:170px}
@media(prefers-reduced-motion:reduce){.fl-done .ln{transition:none;width:170px}}
.fl-done h2{max-width:20ch;margin:0 auto 16px}
.fl-done p{max-width:46ch;margin:0 auto;color:var(--slate);font-size:17px}
.next{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:3px;overflow:hidden;margin-top:clamp(32px,4vw,48px);text-align:left}
.next > div{background:var(--paper);padding:22px 24px;min-width:0}
.next .next-link{display:inline-block;margin-top:10px;font-size:15.5px;color:var(--navy);overflow-wrap:anywhere}
.next .nk{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin-bottom:8px}
.next p{font-size:15.5px;color:var(--slate);margin:0;max-width:52ch}

@media(max-width:640px){
  .opts.c2{grid-template-columns:1fr}
  /* three labels, one line, no wrap — 9px was below the site's floor */
  .fl-prog span{font-size:10px;letter-spacing:.03em;padding:13px 4px}
  .threshold{padding:clamp(88px,20vw,120px) 0 clamp(80px,18vw,110px)}
}

/* ============================================================
   THRESHOLD — the crossing at the bottom of every page.
   Gold rule = the line between before and after. Same device
   everywhere, so the reader learns it: gold rule at the bottom
   means cross here. One direction. One button. No "next page."
   ============================================================ */
/* Space is what separates a crossing from a footer. The approach is
   longer than the departure, so the reader arrives at the rule with
   the page already quiet behind them. */
.threshold{padding:clamp(108px,14vw,184px) 0 clamp(96px,12vw,152px);text-align:center}

/* The rule draws slowly and from the centre outward, because a
   threshold is a line you meet, not a bar that fills. */
.threshold .t-rule{width:0;height:1px;background:var(--gold);
  margin:0 auto clamp(38px,4.6vw,56px);
  transition:width 2.2s cubic-bezier(.16,.8,.28,1) .15s}
.threshold .t-rule.in{width:clamp(84px,11vw,132px)}

.threshold .t-line{
  font-family:var(--serif);font-size:clamp(27px,4vw,44px);line-height:1.2;
  letter-spacing:-.012em;max-width:23ch;margin:0 auto clamp(16px,1.8vw,22px);
  color:var(--navy);text-wrap:balance;
}
.threshold .t-sub{font-size:17.5px;line-height:1.62;color:var(--slate);
  max-width:44ch;margin:0 auto clamp(40px,4.6vw,54px);text-wrap:pretty}

/* Quiet by default. The gold rule above has already said cross here;
   a solid navy button would say it twice, and louder. */
.threshold .t-go{display:inline-flex;background:transparent;color:var(--navy);
  border:1px solid var(--line)}
.threshold .t-go:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.invert .threshold .t-go{color:var(--cream);border-color:rgba(245,242,236,.32)}
.invert .threshold .t-go:hover{background:var(--cream);color:var(--navy);
  border-color:var(--cream)}

/* the rule is the one thing that must not arrive twice */
@media(prefers-reduced-motion:reduce){
  .threshold .t-rule{transition:none;width:clamp(84px,11vw,132px)}
}
/* on an inverted page-end, keep it readable */
.invert .threshold .t-line{color:#fff}
.invert .threshold .t-sub{color:rgba(245,242,236,.78)}

/* opening acknowledgment — light, one line, above the hero eyebrow */
/* A whisper before the headline. It shares the h1's serif, so size
   and weight are the only things keeping it secondary — it stays
   below the sub's size at every width and never competes. */
.recall{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,1.5vw,18.5px);line-height:1.5;
  color:rgba(74,86,102,.82);margin-bottom:clamp(14px,1.6vw,20px);max-width:44ch;
}
.invert .recall{color:rgba(245,242,236,.7)}

/* ============================================================
   FOR LEADERS — components for Desiree's ten-section arc
   ============================================================ */

/* 2. the familiar clinical sequence */
.seq{list-style:none;max-width:34ch}
.seq li{font-family:var(--serif);font-size:clamp(20px,2.3vw,25px);line-height:1.3;color:var(--navy);
  padding:14px 0 14px 26px;position:relative}
.seq li::before{content:"";position:absolute;left:0;top:26px;width:8px;height:8px;
  background:var(--navy);opacity:.35;transform:rotate(45deg)}
.seq li + li::after{content:"";position:absolute;left:3px;top:-12px;height:24px;width:1px;background:var(--line)}
.seq li.last{color:var(--navy);font-weight:500}

/* 3. the enormous term inside the inversion */
.enormous{font-family:var(--serif);font-weight:500;font-size:clamp(46px,8.4vw,104px);
  line-height:.98;letter-spacing:-.015em;color:#fff;margin:22px 0 26px;max-width:12ch}

/* 4. stakes */
.stakes{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stakes > div{background:var(--paper);padding:30px 22px}
.stakes .dim{font-family:var(--serif);font-size:clamp(20px,2vw,24px);margin-bottom:8px}
.stakes .sub{font-family:var(--sans);font-size:14.5px;color:var(--slate);line-height:1.5}

/* 5. the gap diagram — intellectual centerpiece */
.gapd{max-width:720px;margin:0 auto}
.gapd .v{font-size:clamp(21px,2.4vw,27px)}
.gapd .row{position:relative;padding:22px 26px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);text-align:center}
.gapd .row + .row{margin-top:0}
.gapd .arrow{height:34px;display:flex;align-items:center;justify-content:center;color:var(--slate);opacity:.55;font-size:18px}
.gapd .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.gapd .v{font-family:var(--serif);font-size:clamp(19px,2.1vw,23px);margin-top:6px;line-height:1.25}
.gapd .s{font-family:var(--sans);font-size:13.5px;color:var(--slate);margin-top:6px}
.gapd .row.cis{border-color:var(--navy);background:var(--cream)}
.gapd .row.cis .k{color:var(--navy)}
.gapd .tag{position:absolute;right:-10px;top:50%;transform:translate(100%,-50%);white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--navy);padding-left:18px}
.gapd .tag::before{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:rgba(10,37,64,.4)}

/* 6. reassurance — three tiny columns */
.reassure{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.reassure > div{background:var(--paper);padding:26px 24px}
.reassure h4{font-family:var(--serif);font-size:20px;margin-bottom:6px;font-weight:500}
.reassure p{font-family:var(--sans);font-size:14.5px;color:var(--slate);margin:0}
.reassure > div.us{background:var(--cream)}

/* 10. action — typographic, spacious */
.action{text-align:center;padding:clamp(20px,3vw,40px) 0}
.action .eyebrow-gold{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--navy);margin-bottom:26px;display:block}
.action h2{max-width:20ch;margin:0 auto 14px}
.action .q{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);color:var(--slate);
  max-width:34ch;margin:0 auto 26px;line-height:1.35}
.action p{max-width:52ch;margin:0 auto}

@media(max-width:1000px){.stakes{grid-template-columns:repeat(3,1fr)}.reassure{grid-template-columns:1fr}}
@media(max-width:640px){.stakes{grid-template-columns:1fr}}
/* the tag hangs off the diagram's right edge only where there is room
   for it: 720 diagram + gutters + 160 tag. Below that it sits under
   the row as a line of its own. */
@media(max-width:1080px){
  .gapd .tag{position:static;transform:none;display:block;margin-top:10px;padding-left:0;white-space:normal}
  .gapd .tag::before{display:none}
}

/* Room 7 — VOICE foreshadow + What Just Happened reveal + selected-chip mark */
.escal + .voice-hint{font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:var(--gold-soft);margin:16px 0 8px}
.chip{position:relative;padding-right:46px}
.chip::after{content:"";position:absolute;right:18px;top:20px;width:12px;height:7px;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg);
  opacity:0;transition:opacity .3s var(--ease)}
.chip.sel::after{opacity:1}
.path{margin:34px auto 0;max-width:38ch;text-align:left;border-top:1px solid rgba(245,242,236,.16);padding-top:26px}
.path-k{font-family:var(--sans);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;text-align:center}
.path ul{list-style:none}
.path li{font-family:var(--sans);font-size:15px;color:rgba(245,242,236,.8);padding:6px 0;line-height:1.5}
.path li b{color:#fff;font-weight:500}
.path-line{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:20px;color:#fff;text-align:center}

/* ============================================================
   ABOUT — the question is the hero
   ============================================================ */
.question{padding:clamp(90px,12vw,160px) 0}
.question .qwrap{max-width:640px;margin:0 auto}
.question .bio{font-family:var(--sans);font-size:15.5px;line-height:1.7;color:var(--slate);margin-bottom:clamp(44px,6vw,72px)}
.question .bio b{color:var(--navy);font-weight:500}
.question .big-q{font-family:var(--serif);font-size:clamp(32px,5vw,56px);line-height:1.12;letter-spacing:-.01em;
  color:var(--navy);max-width:20ch;margin-bottom:clamp(36px,5vw,56px)}
.question .narr p{font-size:17.5px;color:var(--slate);line-height:1.75;margin-bottom:18px;max-width:58ch}
.question .narr p.ask{font-family:var(--serif);font-size:20px;color:var(--navy);line-height:1.5}
.question .narr p.land{font-family:var(--serif);font-size:22px;color:var(--navy);margin-top:26px}

/* faith — small, consequential, no heading */
.conviction{padding:clamp(70px,9vw,120px) 0}
.conviction .cwrap{max-width:560px;margin:0 auto;text-align:center}
.conviction .c-mark{width:7px;height:7px;background:var(--gold);opacity:.55;transform:rotate(45deg);margin:0 auto 34px}
.conviction p{font-family:var(--serif);font-size:clamp(19px,2.3vw,24px);line-height:1.55;color:var(--navy)}
.conviction .who{margin-top:26px;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}

/* tighter gap before the horizon (her 25–35% note) */
.sec.horizon{padding-top:clamp(50px,7vw,96px)}

/* ---------- SPOKEN INTRO ----------
   Copy that arrives at the pace of speech. The caret is a thin navy
   rule — a pen, not a terminal cursor — and only while a line is being
   said. Static (no JS / reduced motion) is the plain paragraphs. */
.spoken .lede{max-width:62ch;text-wrap:wrap}  /* stable lines: no re-balancing while it types */
.spoken.spk-live .lede{transition:opacity .8s var(--ease)}
.spoken .lede.fading{opacity:0}
.spoken .lede .rest{visibility:hidden}
.spoken .lede.spk-wait .said::after{display:none}
.spoken .lede.typing .said::after{content:"";display:inline-block;width:1px;height:.9em;
  background:var(--navy);opacity:.55;margin-left:3px;vertical-align:-.12em;
  animation:spk-caret 1.1s steps(1) infinite}
@keyframes spk-caret{50%{opacity:0}}
.spoken.spk-done .lede{transition:none}
.narrow.center h2{text-wrap:balance;letter-spacing:-.012em}

/* Home close — tighter, per client (15–25% shorter) */
body.home .threshold{padding:clamp(66px,8.5vw,108px) 0 clamp(72px,9vw,116px)}

/* ============================================================
   LAUNCH REFINEMENTS — TRM-4 / VOICE / CRISP / EVIDENCE / SPEAKING
   ============================================================ */
.guard{padding:clamp(66px,8vw,110px) 0}
.guard .gwrap{max-width:640px;margin:0 auto}
.guard .gk{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--navy);margin-bottom:22px}
.guard p{font-size:17.5px;color:var(--slate);line-height:1.75;margin-bottom:16px;max-width:60ch}
/* a boundary statement is armour, not a headline: one step above the
   body, so it holds without asking */
.guard .gline{font-family:var(--serif);font-size:clamp(20px,2.1vw,24px);line-height:1.4;
  letter-spacing:-.004em;color:var(--navy);margin-top:clamp(22px,2.6vw,30px);max-width:40ch;text-wrap:pretty}

/* A definition set as a marginal note: a hairline, small type, no
   ground. Navy — gold on this rule would be a third mark on the page. */
.defn{max-width:46ch;margin:clamp(30px,4vw,48px) auto 0;padding-left:22px;border-left:1px solid rgba(10,37,64,.28)}
.defn .dt{font-family:var(--serif);font-size:21px;color:var(--navy);margin-bottom:6px;font-style:italic}
.defn p{font-size:15px;color:var(--slate);line-height:1.62;margin:0;text-wrap:pretty}

/* The page's centrepiece: five letters read as one word first, five
   ideas second. Hairlines, not boxes; letters large and light. */
.voice5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.voice5 > div{padding:clamp(30px,3.4vw,44px) clamp(16px,2vw,26px) clamp(30px,3.4vw,40px);
  border-right:1px solid var(--line);min-width:0}
.voice5 > div:last-child{border-right:none}
.voice5 .ltr{font-family:var(--serif);font-weight:300;font-size:clamp(48px,6.2vw,84px);line-height:.9;
  letter-spacing:-.02em;color:var(--navy);margin-bottom:18px}
.voice5 .nm{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);margin-bottom:10px}
.voice5 p{font-size:15px;color:var(--slate);line-height:1.58;margin:0;text-wrap:pretty}
.voice5 p.subnote{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate);opacity:.85;font-style:italic;font-family:var(--serif);font-size:15px}
/* VOICE clinical example — side by side; the structured side carries the mark */
.vx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);max-width:900px;margin:0 auto;border-top:1px solid var(--line);padding-top:clamp(22px,2.6vw,30px)}
.vx .ek{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:16px}
.vx .said{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--navy);text-wrap:pretty}
.vx .via{padding-left:clamp(18px,2.4vw,28px);border-left:2px solid var(--gold)}
@media(max-width:720px){.vx{grid-template-columns:1fr;gap:28px}.vx .via{padding-left:18px}}

.example{max-width:640px;margin:0 auto;padding:clamp(22px,2.6vw,30px) 0 0;border-top:1px solid var(--line)}
.example .ek{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin-bottom:16px}
.example .said{font-family:var(--serif);font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--navy);text-wrap:pretty}
.example .note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--slate)}

.orient{text-align:center;padding:clamp(50px,6vw,86px) 0}
.orient .ok{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--slate);margin-bottom:22px}
.orient .row{font-family:var(--serif);font-size:clamp(19px,2.3vw,26px);color:var(--navy);line-height:1.5}
.orient .row .sep{color:var(--gold);padding:0 12px;font-weight:300}
.orient .sub{margin-top:12px;font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--slate)}
.orient .ret{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--navy)}

.evarch{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.evarch > div{background:var(--paper);padding:32px 28px}
.evarch .ek{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin-bottom:14px}
.evarch h3{font-family:var(--serif);font-size:clamp(20px,2.1vw,24px);line-height:1.25;margin-bottom:12px;font-weight:500}
.evarch p{font-size:15.5px;color:var(--slate);line-height:1.6}

/* Citations as a reference list, not a link list: the source is the
   line, the identifiers sit beneath it in small caps. Keys are navy —
   gold on four labels would be four marks. */
.cites{list-style:none;max-width:720px;margin:clamp(34px,4vw,52px) auto 0}
.cites li{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px;
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line-soft)}
.cites li:last-child{border-bottom:none}
.cites .ck{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);line-height:1.5}
.cites .cref{font-size:16px;color:var(--navy);line-height:1.62;text-wrap:pretty}
.cites .clinks{margin-top:10px;font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;
  display:flex;flex-wrap:wrap;align-items:baseline;row-gap:6px}
.cites .clinks a{color:var(--slate);border-bottom:1px solid var(--line);padding-bottom:1px;
  transition:color .25s var(--ease),border-color .25s var(--ease);overflow-wrap:anywhere}
.cites .clinks a:hover{color:var(--navy);border-color:var(--navy)}
.cites .clinks .sp{color:var(--line);padding:0 10px}

.establish{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.establish > div{background:var(--paper);padding:clamp(28px,3.2vw,38px) clamp(22px,3vw,34px)}
.establish h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin-bottom:18px}
.establish ul{list-style:none}
.establish li{font-size:16px;color:var(--slate);line-height:1.62;padding:9px 0 9px 20px;position:relative;text-wrap:pretty}
.establish li::before{content:"";position:absolute;left:0;top:17px;width:5px;height:5px;
  background:var(--navy);opacity:.3;transform:rotate(45deg)}
.establish > div.open li::before{background:var(--gold);opacity:.85}

.credstrip{text-align:center;padding:clamp(44px,5.5vw,76px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.credstrip .ck{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--slate);margin-bottom:20px}
.credstrip .items{font-family:var(--serif);font-size:clamp(17px,2vw,22px);color:var(--navy);line-height:1.7;
  max-width:56ch;margin:0 auto;text-wrap:balance}
.credstrip .items .d{color:var(--gold);padding:0 12px;font-weight:300}

.founder-id{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--slate);line-height:1.7;margin-top:22px}
.founder-id .d{color:var(--gold);padding:0 8px}

@media(max-width:900px){
  /* the word V-O-I-C-E must still read across; hold one row, shrink */
  .voice5 > div{padding:24px 12px}
  .voice5 .ltr{font-size:clamp(34px,6.4vw,52px)}
  .voice5 .nm{font-size:10px;letter-spacing:.12em}
  .voice5 p{font-size:14px}
  .evarch{grid-template-columns:1fr}
  .establish{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* on a phone the five columns become five lines, each led by its
     letter, so the progression stays a sequence rather than a stack
     of five boxes */
  .voice5{grid-template-columns:1fr;border-top:none}
  .voice5 > div{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;
    padding:22px 0;border-right:none;border-top:1px solid var(--line)}
  .voice5 .ltr{font-size:56px;margin:0;grid-row:1 / span 2;line-height:1}
  .voice5 .nm{font-size:10.5px;letter-spacing:.2em;margin-bottom:6px;align-self:end}
  .voice5 p{font-size:15px}
  .example{padding:24px 20px}
  .cites .clinks .sp{display:none}
  .cites .clinks a{margin-right:18px}
  .credstrip .items .d{display:block;height:0;overflow:hidden;padding:0}
  .credstrip .items{line-height:1.9}
  .founder-id .d{display:block;height:0;overflow:hidden;padding:0}
}