/*
Theme Name: Thrivin
Theme URI: https://getthrivin.com
Author: Numen
Description: The Thrivin WorkSystem Optimization design system. Ported from the August 2026 static handover. Every number on this site comes from the spacing scale, the type ramp or the radius scale.
Version: 0.1.0
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: thrivin
*/

@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700;
  font-stretch:100%; font-display:swap;
  src:url('assets/fonts/plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700;
  font-stretch:100%; font-display:swap;
  src:url('assets/fonts/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* spine */
  --ground:#191C1B;
  --nav-band:#262A29;
  --ground-deep:#101113;
  --paper:#F7F7F5;
  --recessed:#F1F1EF;
  --surface:#FFFFFF;
  --ink:#191A1C;
  --muted:#6B6C6E;
  --line:#E5E5E3;
  --edge:#D8D8D3;

  /* one accent, every action */
  --accent:#BC5717;
  --accent-hover:#C75E1B;
  --accent-dark:#E3763A;

  /* the three — phases and the mark only */
  --signal:#1B7FA8;  --signal-up:#4FA3C9;
  --ember:#CF5F33;   --ember-up:#E0703F;
  --growth:#5FA544;  --growth-up:#7FC95F;

  /* measurement — four bands, red to green. Supplied 2026-08-11.
     Bar tone and text tone are deliberately the same value here: Thrivin chose
     the swatch colours for both, so the split the handover describes in §5 no
     longer applies. Note the consequence, which was accepted knowingly — against
     the white scorecard the 10px band labels measure PARTIAL 2.8:1,
     EMERGING 3.4:1 and HIGH 4.4:1, below the 4.5:1 small-text floor.
     Do not "fix" these back to darker tones without asking. */
  --limited:#BA4233;   --limited-t:#BA4233;
  --partial:#C49231;   --partial-t:#C49231;
  --emerging:#729838;  --emerging-t:#729838;
  --clear:#278A47;     --clear-t:#278A47;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --pad-x:80px;
  --maxw:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}

/* ============================ LAYOUT ============================ */
.shell{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); position:relative; z-index:2}
.section{position:relative; isolation:isolate; padding-block:104px}
.section--dark{padding-block:96px; background:var(--band-bg); color:var(--band-fg); --ember-tx:#E0703F}  /* 5.4:1 on the dark tint */
.section--recessed{background:var(--recessed)}
.section--dark .eyebrow__text{color:var(--band-fg-3)}
.section--dark .lede,
.section--dark .body{color:var(--band-fg-2)}
.section--dark .rule{background:var(--band-hair)}

/* ============================ ATMOSPHERE ============================
   Dark bands carry a drifting dot grid and two slow light pools.
   Everything here is decorative and disabled under reduced motion.
   ==================================================================== */
.atmosphere{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; display:var(--atmos)}
/* the pointer-reactive field is the hero's alone — on the other dark bands it
   read as a gimmick, so they carry a still grid that drifts very slowly */
.dotfield{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:var(--atmos)}
.atmosphere__grid{
  position:absolute; inset:-60px;
  background-image:radial-gradient(circle, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:52px 52px;
  animation:grid-drift 64s linear infinite;
}
@keyframes grid-drift{ to{background-position:52px 52px} }
.atmosphere__pool{position:absolute; border-radius:50%}
.atmosphere__pool--a{
  width:min(70vw,980px); aspect-ratio:1.4/1;
  background:radial-gradient(closest-side, rgba(255,255,255,.065), rgba(255,255,255,.02) 55%, transparent);
  animation:pool-pulse 19s var(--ease-soft) infinite;
}
.atmosphere__pool--b{
  width:min(52vw,720px); aspect-ratio:1.4/1;
  background:radial-gradient(closest-side, rgba(255,255,255,.038), rgba(255,255,255,.012) 55%, transparent);
  animation:pool-drift 27s var(--ease-soft) infinite;
}
@keyframes pool-pulse{ 0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.12); opacity:1} }
@keyframes pool-drift{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(38px,-26px,0)} }

/* ============================ TYPE ============================ */
.eyebrow{display:flex; align-items:center; gap:16px; margin:0 0 48px}
.eyebrow__dots{display:flex; gap:6px; flex:none}
.eyebrow__dots i{width:6px; height:6px; border-radius:50%; display:block}
.eyebrow__dots i:nth-child(1){background:var(--signal)}
.eyebrow__dots i:nth-child(2){background:var(--ember)}
.eyebrow__dots i:nth-child(3){background:var(--growth)}
.section--dark .eyebrow__dots i:nth-child(1){background:var(--band-dot-1)}
.section--dark .eyebrow__dots i:nth-child(2){background:var(--band-dot-2)}
.section--dark .eyebrow__dots i:nth-child(3){background:var(--band-dot-3)}
.eyebrow__text{font-size:12px; line-height:16px; font-weight:600; letter-spacing:2.16px; color:var(--muted)}

.h2{margin:0 0 40px; font-size:48px; font-weight:400; line-height:54px; letter-spacing:-1.2px}
.section--dark .h2{color:var(--band-fg)}
.h2 em{font-style:normal; font-weight:600; color:var(--accent)}
.section--dark .h2 em{color:var(--band-em)}
.body{margin:0; font-size:16px; line-height:26px; color:rgba(25,26,28,.75); max-width:620px}
.rule{height:1px; background:var(--line); border:0; margin:0 0 35px}

.link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; line-height:20px; font-weight:600; color:var(--ink); text-decoration:none;
}
.section--dark .link{color:var(--band-fg)}
.link svg{transition:transform .34s var(--ease)}
.link:hover svg{transform:translateX(5px)}

/* ============================ REVEAL ============================ */
.reveal > *{opacity:0; transform:translateY(18px)}
.reveal.in > *{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-soft), transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}

/* ============================ NO-JS GUARD ============================
   Mirrors the prefers-reduced-motion force-set at :526 exactly. Both
   answer the same question — "this visitor is not getting the
   animation, so give them the end state" — and any element added to
   one list belongs in the other.

   `.no-js` is on <html> (functions.php's language_attributes filter) and
   is removed before first paint by the priority-0 inline head script. It
   is put BACK by that script's watchdog if nothing sets
   window.__thrivinRevealReady -- checked at 1200ms, re-armed on `load`
   while the document is still loading (R-6.7), and given up on at a
   5000ms ceiling regardless. So this block also covers "JavaScript ran
   but the reveal engine did not", not only "JavaScript is off".

   `.reveal .stagger > *` is in this list and NOT in :526's, because the
   stagger rules live in their own block at :585 with their own
   prefers-reduced-motion media query at :591. Same reason,
   different place. `.track__fill` and `.rail::before` are carried over
   from :527-528. Everything here is !important because the rules it
   overrides are plain declarations of equal specificity that appear
   later in the file.
   ==================================================================== */
.no-js .rise,
.no-js .plane,
.no-js .pill,
.no-js .figure__band,
.no-js .row__band,
.no-js .reveal > *,
.no-js .reveal .stagger > *,
.no-js .step__dot{opacity:1 !important; transform:none !important}
.no-js .track__fill{width:var(--v) !important}
.no-js .rail::before{transform:scaleX(1) !important}

/* ============================ HERO ============================ */
/* The hero is pulled up under the sticky bar so its ground runs behind the
   nav — at the top of the page the bar reads as part of the hero, and only
   separates once a paper section slides under it. */
.hero{position:relative; background:var(--ground); overflow:hidden; isolation:isolate;
  margin-top:-65px; min-height:776px}
.hero__pool{position:absolute; z-index:0; pointer-events:none; width:1180px; height:860px; right:-260px; top:-40px; background:radial-gradient(closest-side,
    rgba(75,80,77,.78) 0%, rgba(61,66,64,.34) 55%, rgba(41,46,44,0) 100%); opacity:0; transform:scale(.94); transition:opacity 1.4s var(--ease-soft), transform 1.6s var(--ease); display:var(--atmos)}
.is-ready .hero__pool{opacity:1; transform:none}

/* The bar is glass, not a slab: rgba(42,46,45,.78) over the hero ground
   resolves to exactly #262A29, so it reads the same at rest — but paper
   sections blur through it as they pass underneath. Solid fallback for
   engines without backdrop-filter, where translucency alone would leave
   the links sitting on live text. */
.topbar{position:sticky; top:0; z-index:60; background:var(--nav-bg); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid rgba(247,247,245,.10); border-bottom-color:var(--nav-hair)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{background:var(--nav-solid)}
}
.nav{position:relative; z-index:4; display:flex; align-items:center; gap:32px; height:64px}
/* the real mark, inline SVG. the wordmark inherits `color`, so the same
   symbol serves the dark nav and the dark footer without a second file */
.logo{flex:none; display:inline-flex; align-items:center; color:var(--nav-fg-on); text-decoration:none; transition:opacity .25s var(--ease-soft)}
.logo:hover{opacity:.82}
.logo__mark{display:block; width:106px; height:32px}
.nav__links{display:flex; gap:26px; margin-left:auto; margin-right:auto}
.nav__link{position:relative; font-size:13px; line-height:20px; font-weight:500; color:var(--nav-fg); text-decoration:none; padding:4px 0; transition:color .28s var(--ease-soft)}
.nav__link::after{content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--accent-dark); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease)}
.nav__link--menu{display:inline-flex; align-items:center; gap:6px}
.nav__caret{font-size:11px; line-height:1; opacity:.85; transition:transform .25s var(--ease-soft)}
.nav__link--menu:hover .nav__caret{transform:translateY(1px)}
.nav__link:hover{color:#fff}
.nav__link:hover::after{transform:scaleX(1)}
.nav__end{display:flex; align-items:center; gap:14px; flex:none}
.nav__menu{display:none; align-items:center; gap:9px; background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:11px 16px; color:var(--nav-fg); font:600 14px/1 inherit; cursor:pointer; transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft); border-color:var(--nav-btn-line)}
.nav__menu:hover{border-color:var(--nav-fg-on); color:var(--nav-fg-on)}
.nav__menu i{display:block; width:16px; height:1.5px; background:currentColor;
  box-shadow:0 5px 0 currentColor, 0 -5px 0 currentColor}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff; font-size:14px; line-height:20px; font-weight:600;
  border:0; border-radius:8px; padding:14px 24px; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 18px -6px rgba(120,50,10,.55);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .2s linear;
}
.btn--sm{padding:10px 20px; font-size:13px}
.btn:hover{transform:translateY(-2px); background:var(--accent-hover);
  box-shadow:0 14px 30px -8px rgba(120,50,10,.7)}
.btn:active{transform:none; transition-duration:.08s}
.btn svg{transition:transform .34s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
/* the secondary is a border, never a filled grey */
.linkcta{display:inline-flex; align-items:center; gap:10px; color:var(--band-fg); border:1px solid rgba(247,247,245,.25); border-radius:8px; padding:13px 24px; font-size:14px; line-height:20px; font-weight:600; text-decoration:none; transition:border-color .25s var(--ease-soft), background .25s var(--ease-soft); border-color:var(--band-hair)}
.linkcta:hover{border-color:var(--band-fg-3); background:var(--band-fill)}
.linkcta svg{transition:transform .34s var(--ease)}
.linkcta:hover svg{transform:translateX(5px)}

.hero__body{position:relative; display:grid; grid-template-columns:minmax(0,600px) 660px;
  gap:20px; padding-top:168px; padding-bottom:128px}
.rise{opacity:0; transform:translateY(20px)}
.is-ready .rise{opacity:1; transform:none;
  transition:opacity .8s var(--ease-soft), transform .9s var(--ease); transition-delay:var(--d,0ms)}
.hero .eyebrow{margin-bottom:24px}
.hero .eyebrow__text{color:rgba(255,255,255,.6)}
.h1{margin:0 0 28px; font-size:60px; font-weight:400; line-height:64px; letter-spacing:-1.5px; color:var(--band-fg); text-wrap:balance}
.h1 em{font-style:normal; font-weight:600; color:var(--band-em)}
.lede{margin:0 0 36px; max-width:576px; font-size:16px; line-height:26px; color:rgba(255,255,255,.7)}
.cta-row{display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap}
.microcopy{margin:0; font-size:12px; line-height:16px; color:var(--band-fg-3)}

/* hero artwork */
.art{position:relative; width:660px; height:467px; will-change:transform;
  transition:transform .9s var(--ease-soft)}
.plane{position:absolute; border-radius:12px; transform:translateY(26px) scale(.985); opacity:0;
  transition:opacity .9s var(--ease-soft), transform 1.1s var(--ease)}
.is-ready .plane{opacity:1; transform:none; transition-delay:var(--d,0ms)}
/* the photograph sits flush to the right margin and starts on the eyebrow line.
   The crop is explicit — 81% of the source width and 85% of its height — because
   a centred cover crop leaves a third of the panel as empty ceiling. */
.art__photo{position:absolute; left:220px; top:0; width:440px; height:460px; margin:0; border-radius:12px; overflow:hidden; opacity:0; transform:translateY(22px) scale(.99); transition:opacity .9s var(--ease-soft), transform 1.1s var(--ease); display:none}
.is-ready .art__photo{opacity:1; transform:none; transition-delay:var(--d,0ms)}
/* crop and grade both come from the Figma fill: 76% of the source width, 79% of
   its height, and a cooler, slightly flatter grade so the picture sits under the
   type instead of competing with it */
.art__photo img{position:absolute; width:131.6%; max-width:none; height:auto; left:-6.74%; top:-25.85%;
  filter:contrast(.92) saturate(.95)}
.art__photo::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(96,136,186,.16); mix-blend-mode:soft-light}

/* the index card sits over the dimensions card: the payload on the front plane */
.plane--index{left:29px; top:101px; width:360px; height:192px; padding:24px;
  background:linear-gradient(180deg,#FFFFFE 0%,#F1F1EE 100%); border:1px solid #E6E6E1;
  box-shadow:0 26px 80px -22px rgba(13,10,8,.25)}
.panel-eyebrow{margin:0 0 14px; font-size:10px; line-height:14px; font-weight:600; letter-spacing:1.2px; color:var(--muted)}
.panel-title{margin:0; font-size:17px; font-weight:600; line-height:24px; letter-spacing:-.2px; color:var(--ink)}
.figure{display:flex; align-items:flex-start; gap:14px; margin-top:20px}
.figure__value{font-size:44px; font-weight:600; line-height:44px; letter-spacing:-1.1px;
  color:var(--partial-t); font-variant-numeric:tabular-nums}
.figure__meta{padding-top:10px}
.figure__band{font-size:12px; line-height:16px; font-weight:500; color:var(--partial-t); opacity:0; transform:translateY(6px);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease)}
.is-counted .figure__band{opacity:1; transform:none}
.figure__max{font-size:12px; line-height:16px; color:var(--muted)}

/* the back plane. Its top band is deliberately empty — that is where the
   index card lands, so no row is ever covered. */
.plane--dims{left:129px; top:263px; width:416px; height:204px; padding:60px 24px 28px;
  border-radius:12px; background:#EDEDEA; border:1px solid #E6E6E1;
  box-shadow:0 2px 8px rgba(18,14,10,.2), 0 26px 80px -22px rgba(13,10,8,.5)}
.row{position:relative; transition:opacity .3s var(--ease-soft)}
.row + .row{margin-top:16px}
.row__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.row__name{font-size:14px; line-height:20px; font-weight:600; color:var(--ink);
  transition:transform .3s var(--ease)}
.row:hover .row__name{transform:translateX(3px)}
.row__right{display:flex; align-items:baseline; gap:14px}
.row__band{font-size:10px; line-height:20px; font-weight:600; letter-spacing:1.2px; color:var(--band-t); opacity:0;
  transition:opacity .5s var(--ease-soft) var(--d,0ms)}
.is-ready .row__band{opacity:1}
.row__value{font-size:14px; line-height:20px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; min-width:22px; text-align:right;
  transition:transform .3s var(--ease)}
.row:hover .row__value{transform:scale(1.06)}
.track{position:relative; margin-top:4px; width:100%; height:4px;
  border-radius:2px; background:var(--line); overflow:hidden}
.track__fill{position:absolute; inset:0 auto 0 0; width:0; border-radius:2px; background:var(--band);
  transition:width 1.5s var(--ease) var(--d,0ms), filter .3s var(--ease-soft)}
.is-ready .track__fill{width:var(--v)}
.row:hover .track__fill{filter:brightness(1.1) saturate(1.08)}
.track__fill::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform:translateX(-100%)}
.is-ready .track__fill::after{animation:sweep 1.5s var(--ease) var(--d,0ms) 1 both}
@keyframes sweep{from{transform:translateX(-100%)} to{transform:translateX(100%)}}

/* the stitch: the only element touching photograph, back plane and front plane */
.pill{position:absolute; left:329px; top:247px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  background:#FCFCFA; border:1px solid #E6E6E1; border-radius:999px; padding:9px 20px;
  font-size:12px; line-height:16px; font-weight:600; color:var(--ink); white-space:nowrap;
  box-shadow:0 10px 26px -8px rgba(13,10,8,.4);
  opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .5s var(--ease-soft), transform .6s var(--ease), box-shadow .3s var(--ease-soft)}
.is-counted .pill{opacity:1; transform:none; transition-delay:.15s}
.pill:hover{transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(13,10,8,.5)}
.pill__dot{width:6px; height:6px; border-radius:50%; background:var(--limited); position:relative}
.pill__dot::after{content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid var(--limited); opacity:0; animation:ping 3.4s var(--ease-soft) infinite 2s}
@keyframes ping{0%{opacity:.6; transform:scale(.6)} 55%,100%{opacity:0; transform:scale(2.1)}}

/* ============================ TRUSTED BY ============================
   A continuous marquee that runs on its own clock, independent of the
   page scroll. The track holds the same row twice, so translating it
   by exactly -50% lands on an identical frame and the loop is seamless.
   ==================================================================== */
.trusted{padding:64px 0 72px; overflow:hidden}
.trusted__label{margin:0 0 34px; font-size:12px; font-weight:600; letter-spacing:1.6px; color:var(--muted)}
.trusted__viewport{position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.trusted__track{display:flex; width:max-content; will-change:transform;
  animation:marquee 34s linear infinite}
.trusted__viewport:hover .trusted__track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.trusted__row{display:flex; gap:56px; padding-right:56px; flex:none}
.trusted__row span{font-size:22px; color:rgba(107,108,110,.85); letter-spacing:-.3px; white-space:nowrap; transition:color .3s var(--ease-soft), transform .3s var(--ease); cursor:default}  /* was .72 — 2.87:1, now 3.6:1 */
.trusted__row span:hover{color:var(--ink); transform:translateY(-2px)}

/* ============================ GRIDS ============================ */
/* Task 10 (thrivin/grids) -- `align-items:start` on all five bases (added
   here; absent from the handover source, which sets no align-items at all
   and so falls back to the grid initial value, `stretch`). HANDOVER.md
   §17's own "traps that have already cost time" table names this directly:
   "Forcing a row of cards to equal height leaves dead space and scatters
   the grid. | Let cards hug." -- confirmed by measurement, not merely
   assumed: the ported source declares no align-items override anywhere for
   .cols-2/.grid-3/.grid-4/.grid-6/.grid-2x2 (grep across the handover's own
   styles.css), so a card shorter than its row-mates would otherwise stretch
   to match, leaving blank padding at its own bottom. `.grid--stretch` below
   is the deliberate escape hatch for the one measured real exception
   (worksystem-execution.html:109, `style="align-items:stretch"` on a
   `.grid-4` wrapping `.cap` capability cards whose own equal-length link
   lists genuinely benefit from a level row) -- `.cap` itself is a different,
   unbuilt component (not `.card`), out of this task's scope; the modifier
   exists so a future task building `.cap` does not have to touch this file
   again to reach it. */
.cols-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px; align-items:start}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; align-items:start}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; align-items:start}
.grid-6{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 32px; align-items:start}
.grid--stretch{align-items:stretch}
/* worksystem-execution.html:109's own real .cap grid carries a literal
   `style="margin-top:56px"` on top of `.grid--stretch` -- ported as a
   scoped rule (Phase 4 Task 6) rather than an inline style. `.grid--
   stretch` is the deliberate one-instance escape hatch grids.php's own
   docblock already names for this exact element, so scoping the margin to
   the same selector carries no risk of reaching an unrelated instance. */
.grid-4.grid--stretch{margin-top:56px}

/* costs */
.costs__lead{margin:52px 0 34px; font-size:17px; font-weight:600; color:var(--ink)}
.cost{border-top:1px solid var(--edge); padding-top:22px}
.cost__n{font-size:14px; line-height:20px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}
.cost__t{margin:13px 0 0; font-size:15px; line-height:24px; color:rgba(25,26,28,.8)}

/* consequence */
.consequence{display:grid; grid-template-columns:minmax(0,640px) minmax(0,560px); gap:80px 100px}
.pull{margin:0 0 40px; font-size:48px; font-weight:400; line-height:54px; letter-spacing:-1.2px; color:var(--band-fg)}
.pull em{font-style:normal; font-weight:600; color:var(--band-em)}
.pull-sub{margin:0; font-size:18px; line-height:28px; color:var(--band-fg-2)}
.cons{border-top:1px solid rgba(255,255,255,.18); padding-top:26px; border-top-color:var(--band-hair)}
.cons__label{margin:0 0 20px; font-size:12px; line-height:16px; font-weight:600; letter-spacing:2.16px; color:var(--band-em)}
.cons__text{margin:0; font-size:18px; line-height:28px; color:var(--band-fg)}

/* capability cards */
.card{background:var(--surface); border-radius:12px; padding:26px; transition:transform .38s var(--ease), box-shadow .38s var(--ease), background .3s var(--ease-soft); border:1px solid var(--line)}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(20,16,12,.28)}
.section--dark .card{background:var(--band-fill); border-color:var(--band-hair)}
.section--dark .card:hover{background:var(--band-fill-2)}
.card__top{display:flex; align-items:flex-start; justify-content:space-between}
.tile{width:40px; height:40px; border-radius:4px; display:grid; place-items:center; flex:none}
.tile svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.card__n{font-size:18px; line-height:28px; font-weight:600; color:rgba(25,26,28,.50); font-variant-numeric:tabular-nums}  /* was .25 — 1.71:1, now 3.34:1 */
.card__t{margin:24px 0 0; font-size:16px; font-weight:600; line-height:24px; color:var(--ink)}
.section--dark .card__t{color:var(--band-fg)}
.card__b{margin:8px 0 0; font-size:14px; line-height:24px; color:rgba(25,26,28,.65)}
.section--dark .card__b{color:var(--band-fg-2)}
/* Task 6 fix round 1 -- ported class-keyed, not the source's own inline
   style="..." literals (patterns/card.php's own docblock has the full
   measurement and the ruling on the 6 numbered cards that omit the
   16px tuck in the source). */
.card__t--numbered{margin-top:16px}
.card .article__tag{margin:0 0 8px}
.card .article__tag + .card__t{margin-top:0}
.card__b--lead{font-weight:600; color:var(--ink)}

.question{border-left:3px solid var(--accent); padding-left:28px; align-self:start}
.question p{margin:0; font-size:18px; line-height:28px; font-weight:500; color:rgba(25,26,28,.9)}

/* phases */
.phase{border-top:1px solid var(--line)}
.section--dark .phase{border-color:var(--band-hair)}
/* Task 8: the general (non-trio) shape -- 30/30 real non-trio .phase
   instances carry an inline style="border-color:var(--edge)" in the source.
   Ported as a class this pattern controls, not the inline mechanism --
   patterns/phase-step.php's own docblock has the full measurement. Lower
   specificity than `.section--dark .phase` above, deliberately: no real
   non-trio .phase sits on a dark ground, but if a future page ever put one
   there, the dark remap should still win over this flat default. */
.phase--edge{border-color:var(--edge)}
.phase__tile{margin-top:28px; width:44px; height:44px}
.phase__tile svg{width:22px; height:22px}
.phase__label{margin:20px 0 0; font-size:12px; font-weight:600; letter-spacing:1.4px}
.phase__t{margin:28px 0 0; font-size:20px; font-weight:600; line-height:28px; color:var(--paper)}
.phase__b{margin:8px 0 0; font-size:14px; line-height:24px; color:rgba(255,255,255,.65)}

/* value rail */
.rail{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:36px; margin-top:76px; position:relative}
.rail::before{content:""; position:absolute; left:4px; right:4px; top:4px; height:1px; background:var(--edge); z-index:0;
  transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease)}
.rail.in::before{transform:scaleX(1)}
.step{position:relative}
.step__dot{display:block; position:relative; z-index:1; width:8px; height:8px; border-radius:50%; opacity:0; transform:scale(.4);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease); transition-delay:calc(var(--i) * 130ms + 300ms)}
.rail.in .step__dot{opacity:1; transform:none}
.step__n{margin:24px 0 0; font-size:24px; line-height:32px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}
.step__t{margin:16px 0 0; font-size:16px; font-weight:600; line-height:24px; color:var(--ink)}
.step__c{margin:8px 0 0; font-size:14px; line-height:24px; color:rgba(25,26,28,.7)}
/* Task 8: the 5 real .step instances (index.html's own value rail) carry
   style="background:var(--signal|ember|growth)" on .step__dot and, on the
   first 4, style="color:var(--signal|ember|growth)" on .step__n -- ported as
   class-keyed modifiers, not the inline mechanism (patterns/phase-step.php's
   own docblock has the full measurement). The 5th (growth) real instance
   carries .is-grow instead of an inline colour -- growth's raw value fails
   text contrast (see --growth-tx above, "3.9:1 on paper"), so it is the ONE
   colour of the three that is never used directly as .step__n's own text
   colour; signal/ember are, unmodified. */
.step__dot--signal{background:var(--signal)}
.step__dot--ember{background:var(--ember)}
.step__dot--growth{background:var(--growth)}
.step__n--signal{color:var(--signal)}
.step__n--ember{color:var(--ember)}

/* benefits */
.benefit{border-top:1px solid rgba(255,255,255,.15); padding-top:25px; font-size:15px; line-height:24px; color:var(--band-fg-2); display:flex; gap:12px; align-items:flex-start; margin:0; border-top-color:var(--band-hair)}
.benefit svg{width:18px; height:18px; flex:none; margin-top:3px; fill:none; stroke:var(--band-em); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease)}
.benefit:hover svg{transform:translateY(-2px)}
.statement{margin:0 0 56px; max-width:900px; font-size:36px; font-weight:400; line-height:44px; letter-spacing:-.9px; color:var(--band-fg)}
.statement em{font-style:normal; font-weight:600; color:var(--band-em)}

/* proof */
.stat{border-top:1px solid var(--line); padding-top:28px}
.stat__f{font-size:60px; font-weight:400; line-height:64px; letter-spacing:-1.5px; color:var(--ink)}
.stat__d{margin:16px 0 0; font-size:15px; line-height:24px; color:rgba(25,26,28,.75)}
.stat__s{margin:24px 0 0; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--muted)}

/* case study */
.case{display:flex; align-items:stretch; justify-content:space-between; gap:0; flex-wrap:nowrap; background:var(--surface); border-radius:12px; padding:0; box-shadow:0 8px 24px -6px rgba(0,0,0,.10); transition:transform .38s var(--ease), box-shadow .38s var(--ease); overflow:hidden}
.case:hover{transform:translateY(-3px); box-shadow:0 20px 44px -12px rgba(0,0,0,.16)}
.case__l{margin:0; display:flex; align-items:center; gap:16px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--muted)}
.case__l .eyebrow__dots i{width:6px; height:6px}
.case__t{margin:14px 0 0; max-width:760px; font-size:18px; font-weight:400; line-height:28px; color:rgba(25,26,28,.85)}
.case__t em{font-style:normal; font-weight:600; color:var(--accent)}
.case__pill{border:1px solid var(--line); background:var(--recessed); border-radius:999px; flex:none; padding:9px 20px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:rgba(25,26,28,.7); align-self:center; margin-right:40px}

/* closing + footer */
.closing__h{margin:0 0 28px; font-size:48px; font-weight:400; line-height:54px; letter-spacing:-1.2px; color:var(--band-fg); max-width:780px}
.closing__h em{font-style:normal; font-weight:600; color:var(--band-em)}
.closing__p{margin:0 0 40px; max-width:580px; font-size:18px; line-height:28px; color:var(--band-fg-2)}
.foot{margin-top:112px; border-top:1px solid rgba(255,255,255,.12); padding-top:72px; display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:48px; border-top-color:var(--band-hair-2)}
.foot__d{margin:28px 0 32px; max-width:384px; font-size:14px; line-height:24px; color:var(--band-fg-2)}
.foot__cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; justify-self:end;
  width:100%; max-width:800px}
.foot__h{margin:0 0 20px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--band-fg-3)}
.foot__cols a{display:block; margin-bottom:12px; font-size:14px; line-height:20px; color:var(--band-fg-2); text-decoration:none; transition:color .25s var(--ease-soft), transform .25s var(--ease)}
.foot__cols a:hover{color:var(--band-fg); transform:translateX(3px)}
.foot__bottom{margin-top:88px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14.5px; color:var(--band-fg-3); border-top-color:var(--band-hair-2)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  :root{--pad-x:48px}
  .nav__links{display:none}
  .nav__menu{display:inline-flex}
  .hero__body{grid-template-columns:1fr; padding-top:64px}
  .h1{font-size:44px; line-height:54px}
  .art{height:430px; margin-top:44px}
  .plane--index{left:0; top:0; width:600px; height:246px; padding:22px 30px}
  .panel-title{font-size:24px; line-height:32px}
  .figure__value{font-size:72px}
  .plane--dims{left:0; top:222px; width:640px; padding:26px 30px 32px}
  .row__head,.track{width:480px}
  .pill{left:280px; top:200px}
  .consequence{grid-template-columns:1fr; gap:48px}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 32px}
  .rail::before{display:none}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:1fr}
  .foot__cols{justify-self:start}
}
@media (max-width:860px){
  :root{--pad-x:24px}
  .section{padding-block:80px}
  /* the bar cannot hold a logo, a menu and a CTA at this width —
     the menu carries the CTA from here down */
  .nav{height:78px; gap:16px}
  .nav__end .btn{display:none}
  .logo__mark{width:92px; height:28px}
  .btn{padding:17px 26px; font-size:15px}
  .h1{font-size:34px; line-height:44px}
  .h2{font-size:30px; line-height:40px}
  .pull{font-size:30px; line-height:40px}
  .statement{font-size:24px; line-height:34px}
  .cols-2,.grid-3,.grid-6{grid-template-columns:1fr; gap:36px}
  .grid-4{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr}
  .art{height:390px}
  .plane--index{width:100%; height:auto; min-height:224px}
  .figure__value{font-size:60px}
  .plane--dims{width:100%; top:206px; padding:22px 24px 28px}
  .row__head,.track{width:100%}
  .row__band{display:none}
  .pill{left:auto; right:0; top:186px}
  .stat__f{font-size:48px; line-height:56px}
  .foot__cols{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* A-3: the universal selector does NOT match pseudo-elements, so
     .track__fill::after's `sweep` and .pill__dot::after's INFINITE `ping`
     (:322/:336) kept running for a visitor who has asked their OS to stop
     motion -- a WCAG 2.3.3 failure. *::before,*::after closes the gap. */
  *, *::before, *::after{animation:none !important; transition-duration:.01ms !important}
  .rise,.plane,.pill,.figure__band,.row__band,.reveal > *,.step__dot{opacity:1 !important; transform:none !important}
  .track__fill{width:var(--v) !important}
  .rail::before{transform:scaleX(1) !important}
  .art{transform:none !important}
}


/* ============================ PHOTOGRAPHY ============================
   Every source image is square and no panel on the page is, so the crop
   is always set explicitly. width:100% + a negative top offset expresses
   "show this window of the source" and keeps working at any panel size.
   The rule that matters: heads clear the top edge, and a standing figure
   is cut below the joint, never at it.
   ==================================================================== */
.shot{position:relative; margin:0; border-radius:12px; overflow:hidden; background:var(--edge)}
.shot img{position:absolute; left:0; width:100%; height:auto}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:64px 24px 24px;
  font-size:12px; line-height:16px; font-weight:500; letter-spacing:.3px;
  color:rgba(247,247,245,.9);
  background:linear-gradient(180deg, rgba(15,18,17,0), rgba(15,18,17,.82));
}
/* boardroom, 2:1 — window lifted so the faces sit a third down */
.shot--wide{aspect-ratio:2/1; align-self:start}
.shot--wide img{top:-36%}
/* standing desk, 6:5 — near enough square that a centred window works */
.shot--tall{aspect-ratio:6/5}
.shot--tall img{top:-10%}

/* WorkSystem: photograph left, the four capabilities 2×2 right */
.ws-grid{display:grid; grid-template-columns:minmax(0,480px) minmax(0,760px); gap:40px; margin-top:56px}
.grid-2x2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 40px; align-items:start}

/* case study portrait, bled to the card edge. No wrap: the row is
   photograph, copy, status — in that order, at any width above mobile. */
.case__shot{position:relative; margin:0; width:240px; flex:none; overflow:hidden; background:var(--edge)}
.case__shot img{width:100%; height:100%; object-fit:cover; object-position:50% 8%}
.case > div{flex:1 1 auto; min-width:0; padding:36px 32px 36px 40px; align-self:center}

/* The closing band runs a full-bleed photograph under a left-weighted scrim:
   the copy sits on solid ground and the group stays readable on the right.
   The photograph is capped to the CTA's own height rather than the whole
   band, so the footer keeps its plain ground and the crop stays fixed —
   object-position 41% is what clears the tops of all four heads. */
.section--photo{background:var(--band-hero)}
.band-photo{position:absolute; inset:0 0 auto 0; height:600px; overflow:hidden; z-index:0; pointer-events:none; display:var(--imagery)}
.band-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 41%; opacity:.55}
.band-photo__scrim{position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(25,28,27,0) 72%, rgba(25,28,27,.9) 94%, var(--ground) 100%),
    linear-gradient(90deg, rgba(25,28,27,.94) 0%, rgba(25,28,27,.72) 48%, rgba(25,28,27,.3) 100%)}


/* ============================ STAGGER ============================
   Grids animate item by item rather than as one block. 55ms apart, so a
   six-card grid is fully in within a third of a second — read as motion,
   not as waiting.
   ================================================================== */
.reveal.in > .stagger{opacity:1; transform:none; transition:none}
.reveal .stagger > *{opacity:0; transform:translateY(14px)}
.reveal.in .stagger > *{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-soft), transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms + 60ms);
}
@media (prefers-reduced-motion: reduce){
  .reveal .stagger > *{opacity:1 !important; transform:none !important}
}


/* ===================================================================
   PAGE PATTERNS — added when porting the inner pages.
   Everything here uses the existing scales: spacing off the 4pt set,
   radius from 0/2/4/8/12/999, type off the ramp in §4 of the handover.
   =================================================================== */

/* ---- page hero -----------------------------------------------------
   Inner pages open on a plain dark ground with no artefact. Same trick
   as the homepage hero: the ground runs up behind the sticky bar, so
   the nav reads as part of the hero rather than a strip above it.
   65px is the bar (64 + its 1px rule); 112 is the dark-band value. */
.phero{position:relative; background:var(--ground); overflow:hidden; isolation:isolate; margin-top:-65px}
.phero__body{position:relative; z-index:2; padding-top:calc(65px + 112px); padding-bottom:112px; max-width:820px}
.phero .eyebrow{margin-bottom:24px}
.phero .eyebrow__text{color:rgba(255,255,255,.6)}
.phero .h1{font-size:48px; line-height:54px; letter-spacing:-1.2px; margin-bottom:24px}
.phero .lede{max-width:620px; font-size:18px; line-height:28px; margin-bottom:32px}
.phero .lede + .lede{margin-top:-12px}
/* Task 9 (thrivin/phero) -- the `.cols-2` companion shape (pulse.html,
   strengths-skill-path.html, strengthsmultiplier.html): all 3 real
   instances carry the byte-identical `style="max-width:none"` on
   `.phero__body` and `style="align-items:center; gap:64px"` on `.cols-2`.
   Ported as class-keyed rules rather than literal inline styles, matching
   `.split-media--flush`'s own precedent for the same move. */
.phero__body--cols{max-width:none}
.phero__cols{align-items:center; gap:64px}

/* current page in the nav — the hover underline, held on */
.nav__link--active{color:#fff}
.nav__link--active::after{transform:scaleX(1)}

/* ---- section intro variants --------------------------------------- */
/* a lead line introducing a grid, matching .costs__lead's role */
.lead-in{margin:0 0 34px; font-size:18px; line-height:28px; font-weight:600; color:var(--ink)}
.section--dark .lead-in{color:var(--band-fg)}
/* the closing pull line a section lands on */
.note{margin:56px 0 0; font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.2px;
  color:var(--ink); max-width:900px}
.section--dark .note{color:var(--band-fg)}
.note em{font-style:normal; color:var(--accent)}
.section--dark .note em{color:var(--band-em)}
/* small print under a grid */
.fine{margin:24px 0 0; font-size:15px; line-height:24px; color:var(--muted); max-width:820px}
.section--dark .fine{color:var(--band-fg-2)}

/* ---- two-lens comparison ------------------------------------------- */
.lens{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:56px}
.lens__c{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:32px}
.lens__c--now{border-top:3px solid var(--edge)}
.lens__c--next{border-top:3px solid var(--accent)}
.lens__l{margin:0 0 20px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--muted)}
.lens__c--next .lens__l{color:var(--accent)}
.lens__q{margin:0 0 24px; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
.lens__s{margin:0 0 16px; font-size:14px; line-height:24px; color:var(--muted)}
.lens__list{margin:0; padding:0; list-style:none}
.lens__list li{font-size:15px; line-height:24px; color:rgba(25,26,28,.8); padding:8px 0; border-top:1px solid var(--line)}
.lens__list li:first-child{border-top:0; padding-top:0}
.lens__list b{font-weight:600; color:var(--ink)}

/* ---- arrow list (Index / Blueprint) -------------------------------- */
.arrows{margin:0; padding:0; list-style:none}
.arrows li{display:flex; gap:12px; font-size:15px; line-height:24px; color:rgba(25,26,28,.8); padding:12px 0;
  border-top:1px solid var(--line)}
.arrows li:first-child{border-top:0}
.arrows svg{width:16px; height:16px; flex:none; margin-top:4px; fill:none; stroke:var(--accent);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.section--dark .arrows li{color:var(--band-fg-2); border-color:var(--band-hair)}
.section--dark .arrows svg{stroke:var(--band-em)}

/* ---- deliverables checklist ---------------------------------------- */
.checks{display:block; columns:2; column-gap:40px; margin:0; padding:0; list-style:none}
.checks li{display:flex; gap:12px; font-size:15px; line-height:24px; color:rgba(25,26,28,.8); padding:14px 0; border-top:1px solid var(--line); break-inside:avoid; -webkit-column-break-inside:avoid}
.checks svg{width:16px; height:16px; flex:none; margin-top:4px; fill:none; stroke:var(--growth);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.section--dark .checks li{color:var(--band-fg-2); border-color:var(--band-hair)}
.section--dark .checks svg{stroke:var(--band-tick)}
/* a deliverables panel sitting inside a paper section */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:32px 40px; margin-top:56px}
.panel__l{margin:0 0 8px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--accent)}
.panel__t{margin:0 0 24px; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}

/* ---- phased process (How It Works) ---------------------------------
   A phase label column beside its rows. The bracket rule on the left of
   the engineering phases is what marks where the paid process starts. */
.proc{margin-top:56px}
.proc__g{display:grid; grid-template-columns:minmax(0,224px) minmax(0,1fr); gap:40px; padding:32px 0;
  border-top:1px solid var(--line)}
.proc__g--eng{border-left:2px solid var(--accent); padding-left:32px; margin-left:-34px}
.proc__l{margin:0; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--accent)}
.proc__s{margin:12px 0 0; font-size:14px; line-height:24px; color:var(--muted)}
.proc__row + .proc__row{margin-top:28px; padding-top:28px; border-top:1px solid var(--line)}
.proc__stage{margin:0; font-size:10px; line-height:14px; font-weight:600; letter-spacing:1.2px; color:var(--muted)}
.proc__h{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:12px 0 0}
.proc__t{margin:0; font-size:18px; line-height:28px; font-weight:600; color:var(--ink)}
.proc__tag{border:1px solid var(--line); background:var(--recessed); border-radius:999px; padding:4px 12px;
  font-size:10px; line-height:14px; font-weight:600; letter-spacing:1.2px; color:var(--muted)}
.proc__d{margin:8px 0 0; font-size:15px; line-height:24px; color:rgba(25,26,28,.75); max-width:620px}
.proc__banner{display:flex; align-items:center; gap:16px; margin:0 0 8px; padding:16px 20px;
  background:var(--recessed); border-radius:8px; font-size:14px; line-height:24px; color:rgba(25,26,28,.75)}
.proc__banner b{font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--accent); flex:none}

/* ---- continuous optimization cycle ---------------------------------
   A diagram, not an icon: four stations on a ring, drawn in the same
   1.5px outline language as the tiles. */
.cycle{display:grid; grid-template-columns:minmax(0,480px) minmax(0,760px); gap:40px; margin-top:56px;
  align-items:center}
.cycle__fig{margin:0; display:grid; place-items:center}
.cycle__fig svg{width:100%; max-width:400px; height:auto; overflow:visible}
.cycle__ring{fill:none; stroke:var(--cycle-ring); stroke-width:1.5; stroke-dasharray:5 7}
.cycle__node{fill:var(--band-bg); stroke:var(--band-em); stroke-width:1.5}
.cycle__glyph{fill:none; stroke:var(--band-em); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.cycle__label{fill:var(--band-fg); font-size:10px; font-weight:600; letter-spacing:1.2px; text-anchor:middle}
.cycle__mid{fill:var(--band-fg); font-size:12px; font-weight:600; letter-spacing:2.16px; text-anchor:middle}
.cycle__arrow{fill:var(--band-fg-2)}
.cycle__steps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 40px}
.cycle__s{border-top:1px solid rgba(255,255,255,.16); padding-top:20px; border-top-color:var(--band-hair)}
.cycle__st{margin:0; font-size:16px; line-height:24px; font-weight:600; color:var(--band-fg)}
.cycle__sd{margin:8px 0 0; font-size:14px; line-height:24px; color:var(--band-fg-2)}

/* ---- capability link lists (WorkSystem Execution) ------------------- */
.cap{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:32px; transition:transform .38s var(--ease), box-shadow .38s var(--ease)}
.cap:hover{transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(20,16,12,.28)}
.cap__t{margin:20px 0 0; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
/* Phase 4 Task 2 (thrivin/cap) -- the source's own `.cap__t a` carries
   `style="color:inherit;text-decoration:none"` inline on all 4 real
   instances; no inline style= is allowed, so this is that same rule as a
   real class-scoped selector instead. */
.cap__t a{color:inherit; text-decoration:none}
.cap__q{margin:12px 0 24px; font-size:15px; line-height:24px; color:var(--muted)}
.cap__list{margin:0 0 24px; padding:0; list-style:none; flex:1 1 auto}
.cap__list a{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0; border-top:1px solid var(--line);
  font-size:15px; line-height:24px; font-weight:500; color:var(--ink); text-decoration:none;
  transition:color .25s var(--ease-soft)}
.cap__list a span{color:var(--accent); flex:none; transition:transform .3s var(--ease)}
.cap__list a:hover{color:var(--accent)}
.cap__list a:hover span{transform:translateX(4px)}

/* ---- risk reversal / single statement card -------------------------- */
.assure{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:12px; padding:32px 40px}
.assure__l{margin:0 0 16px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--accent)}
.assure__t{margin:0 0 12px; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
.assure__d{margin:0; font-size:15px; line-height:24px; color:rgba(25,26,28,.75); max-width:820px}

/* ---- focus ring, both grounds --------------------------------------- */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.section--dark :focus-visible,.phero :focus-visible,.topbar :focus-visible,
.hero :focus-visible,.section--photo :focus-visible,.mobilenav :focus-visible{outline-color:var(--accent-dark)}
[id]{scroll-margin-top:88px}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1180px){
  /* Fix: the homepage's photo+cards split never collapsed, so the 480+760
     tracks kept their width below 1180 and pushed the document wider than
     the viewport. §12 of the handover: the photo goes full width above the
     cards from 1180 down. */
  .ws-grid{grid-template-columns:1fr}
  .cycle{grid-template-columns:1fr; gap:48px}
  .lens{gap:32px}
  .proc__g{grid-template-columns:1fr; gap:24px}
  .proc__g--eng{margin-left:0; padding-left:24px}
}
@media (max-width:860px){
  .phero__body{padding-top:calc(65px + 64px); padding-bottom:80px}
  .phero .h1{font-size:34px; line-height:44px}
  /* Fix: .grid-2x2 held two columns all the way down, and a 40px tile plus
     its index number cannot fit a 48px track — that was the 375px scrollbar. */
  .grid-2x2{grid-template-columns:1fr}
  .lens,.cycle__steps{grid-template-columns:1fr}
  .panel{padding:28px 24px}
  .lens{gap:24px}
  .cycle__steps{grid-template-columns:1fr}
  .assure{padding:28px}
}


/* ===================================================================
   BATCH 2 — Pulse, solution pages, StrengthsMultiplier, Insights, About.
   Same scales throughout: 4pt spacing, 0/2/4/8/12/999 radius, the §4 ramp.
   =================================================================== */

/* ---- landscape photography -----------------------------------------
   The original set is square, so .shot crops with width:100% and a
   negative top. The supplied photographs are 3:2 and 16:9 — that method
   would leave a gap under them, so these crop with object-fit and an
   explicit object-position instead. Still an explicit decision per panel,
   never a default centred cover. */
.shot--cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.shot--21{aspect-ratio:2/1}
.shot--65{aspect-ratio:6/5}
.shot--43{aspect-ratio:4/3}

/* ---- Pulse: the questionnaire --------------------------------------- */
.quiz{max-width:940px; margin:0 auto}
.quiz__bar{height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:24px}
.quiz__fill{height:100%; background:var(--accent); border-radius:2px; width:0;
  transition:width .5s var(--ease)}
.quiz__meta{display:flex; justify-content:space-between; gap:20px; margin-bottom:32px;
  font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--muted)}
.quiz__dim{color:var(--accent)}
.quiz__q{margin:0 0 40px; font-size:30px; line-height:40px; font-weight:400; letter-spacing:-.6px;
  color:var(--ink); min-height:120px}
.quiz__scale{display:block}
.quiz__opt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:88px; padding:16px 12px; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; cursor:pointer; text-align:center;
  font-family:inherit; color:var(--ink);
  transition:border-color .25s var(--ease-soft), transform .25s var(--ease), background .25s var(--ease-soft)}
.quiz__opt:hover{border-color:var(--accent); transform:translateY(-2px)}
.quiz__opt:active{transform:none; transition-duration:.08s}
.quiz__n{font-size:24px; line-height:32px; font-weight:600; font-variant-numeric:tabular-nums}
.quiz__l{font-size:12px; line-height:16px; font-weight:500; color:var(--muted)}
.quiz__skip{display:flex; align-items:center; justify-content:flex-start; gap:20px; margin-top:28px}
.quiz__back{background:none; border:0; padding:8px 0; font:600 14px/20px inherit; color:var(--muted);
  cursor:pointer; transition:color .25s var(--ease-soft)}
.quiz__back:hover{color:var(--ink)}
.quiz__back[disabled]{opacity:.35; cursor:default}
.quiz__idk{background:none; border:1px solid var(--line); border-radius:8px; padding:11px 20px;
  font:600 14px/20px inherit; color:var(--muted); cursor:pointer;
  transition:border-color .25s var(--ease-soft), color .25s var(--ease-soft)}
.quiz__idk:hover{border-color:var(--edge); color:var(--ink)}

/* ---- Pulse: the Executive Scorecard ---------------------------------
   Data region: band tones only, and every bar is a redundant encoding of
   a number that is already in the DOM beside it. */
.score{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:40px}
.score__top{display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom:32px; border-bottom:1px solid var(--line)}
.score__l{margin:0 0 12px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--muted)}
.score__t{margin:0; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
.score__fig{display:flex; align-items:flex-start; gap:16px}
.score__v{font-size:60px; line-height:64px; font-weight:400; letter-spacing:-1.5px;
  font-variant-numeric:tabular-nums; color:var(--band-t,var(--ink))}
.score__meta{padding-top:14px}
.score__band{font-size:15px; line-height:24px; font-weight:600; color:var(--band-t,var(--ink))}
.score__max{font-size:12px; line-height:16px; color:var(--muted)}
.score__rows{margin-top:32px}
.score__row + .score__row{margin-top:24px}
.score__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.score__name{font-size:16px; line-height:24px; font-weight:600; color:var(--ink)}
.score__right{display:flex; align-items:baseline; gap:16px}
.score__rb{font-size:10px; line-height:20px; font-weight:600; letter-spacing:1.2px; color:var(--band-t)}
.score__rv{font-size:16px; line-height:24px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; min-width:28px; text-align:right}
.score__note{margin:8px 0 0; font-size:14px; line-height:24px; color:rgba(25,26,28,.7); max-width:620px}
.score__flags{margin-top:32px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px}
.flagpill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  background:var(--recessed); border-radius:999px; padding:8px 16px;
  font-size:12px; line-height:16px; font-weight:600; color:var(--ink)}
.flagpill i{width:6px; height:6px; border-radius:50%; background:var(--limited); display:block; flex:none}

/* ---- StrengthsMultiplier: tiers and FAQ ------------------------------ */
.tier{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:32px;
  display:flex; flex-direction:column}
.tier--lead{border-top:3px solid var(--accent)}
.tier__l{margin:0 0 12px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--muted)}
.tier--lead .tier__l{color:var(--accent)}
.tier__t{margin:0 0 8px; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
.tier__p{margin:0 0 24px; font-size:44px; line-height:44px; font-weight:600; letter-spacing:-1.1px;
  color:var(--ink); font-variant-numeric:tabular-nums}
.tier__p small{font-size:14px; line-height:20px; font-weight:500; color:var(--muted); letter-spacing:0}
.tier ul{margin:0 0 32px; padding:0; list-style:none; flex:1 1 auto}
.tier li{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line);
  font-size:15px; line-height:24px; color:rgba(25,26,28,.8)}
.tier svg{width:16px; height:16px; flex:none; margin-top:4px; fill:none; stroke:var(--growth);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
/* patterns/tier.php: composes card__b (Phase 3a's .card body-copy class)
   for its own description paragraph rather than forking a duplicate rule
   -- see that file's own JUDGEMENT CALL 1. The one real delta, every
   measured .tier .card__b's literal style="margin:0 0 24px", ported as a
   scoped compound selector built from classes already on the markup, not
   a new class token and never a literal style=. */
.tier .card__b{margin:0 0 24px}
/* the source's own literal style="margin:0" on the unclassed <p> wrapping
   the inert commerce CTA -- ported as a class-keyed rule, matching
   quote.php's own .quote__dl precedent for the same move. */
.tier__cta{margin:0}

.faq{max-width:820px; margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:24px 0; display:flex; gap:24px;
  align-items:baseline; justify-content:space-between;
  font-size:18px; line-height:28px; font-weight:600; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font-size:20px; line-height:28px; font-weight:400; color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 24px; font-size:15px; line-height:24px; color:rgba(25,26,28,.75); max-width:620px}

/* ---- Insights: article cards ----------------------------------------- */
.article{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:32px; text-decoration:none;
  transition:transform .38s var(--ease), box-shadow .38s var(--ease)}
.article:hover{transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(20,16,12,.28)}
/* Ported from the source's own literal `style="margin-top:20px"`, present
   on all 8 real `.article .article__tag` instances -- see article-card.php's
   own docblock, MARGIN-TOP:20PX, and the `.card .article__tag` precedent
   (this file, above -- the same "scoped selector, not an inline style"
   move for the same shared class, a different ancestor). */
.article .article__tag{margin-top:20px}
.article__tag{margin:0 0 20px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px; color:var(--accent)}
.article__t{margin:0 0 12px; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
.article__d{margin:0 0 24px; font-size:15px; line-height:24px; color:rgba(25,26,28,.75); flex:1 1 auto}
.article__a{display:inline-flex; align-items:center; gap:8px; font-size:14px; line-height:20px;
  font-weight:600; color:var(--ink)}
.article__a svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .34s var(--ease)}
.article:hover .article__a svg{transform:translateX(5px)}

/* ---- role rows (buying committee) ------------------------------------ */
.role{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:32px; padding:24px 0; border-top:1px solid var(--line); align-items:baseline}
.role-list{margin-top:48px}
.role__r{margin:0; font-size:15px; line-height:24px; font-weight:600; color:var(--ink)}
.role__q{margin:0; font-size:16px; line-height:26px; color:rgba(25,26,28,.75); max-width:620px}
.section--dark .role{border-color:var(--band-hair)}
.section--dark .role__r{color:var(--band-fg)}
.section--dark .role__q{color:var(--band-fg-2)}

@media (max-width:1180px){
  .quiz__q{font-size:24px; line-height:34px; min-height:0}
}
@media (max-width:860px){
  .quiz__opt{min-height:72px; padding:12px 4px}
  .quiz__l{display:none}
  .score{padding:24px}
  .score__v{font-size:48px; line-height:56px}
  .tier__p{font-size:36px; line-height:44px}
  .role{grid-template-columns:1fr; gap:8px}
  .faq summary{font-size:16px; line-height:26px}
}

/* sibling links in a solution-area footer */
.foot__sibs{display:flex; flex-direction:column; gap:12px; margin-top:20px}
.foot__sib{display:inline-flex; align-items:center; gap:10px; font-size:16px; line-height:24px; font-weight:500; color:var(--band-fg-2); text-decoration:none; transition:color .25s var(--ease-soft), transform .25s var(--ease)}
.foot__sib::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--band-em); flex:none}
.foot__sib:hover{color:var(--band-fg); transform:translateX(3px)}

/* nav dropdown — §13 */
.nav__has-menu{position:relative; display:inline-flex}
.menu{position:absolute; top:calc(100% + 14px); left:-16px; min-width:288px; z-index:70; background:var(--nav-solid); border-radius:8px; padding:8px; box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
.menu[hidden]{display:none}
.menu__i{display:block; padding:11px 16px; border-radius:4px; font-size:14px; line-height:20px; font-weight:500; color:var(--nav-fg); text-decoration:none; transition:background .2s var(--ease-soft), color .2s var(--ease-soft)}
.menu__i:hover,.menu__i:focus-visible{background:var(--band-fill); color:var(--nav-fg-on)}
@media (max-width:1180px){ .menu{display:none} }

/* mobile navigation panel — a build, not a port: the handover shipped
   .nav__menu with no JS behind it, so below 1180px there was no navigation
   at all. Default is display:none (desktop never shows it); the 1180
   breakpoint below turns it on for exactly the range where .nav__links is
   hidden and .nav__menu is the only trigger left standing.

   The explicit [hidden] rule matters here for the same reason it does on
   .menu and .dlgate above/below: .mobilenav{display:flex} inside the media
   query has higher source-order presence than this rule, but a class+
   attribute selector (0,2,0) always outranks a single class (0,1,0)
   regardless of order, so [hidden] wins at every width once JS sets it —
   without this rule the panel would render, at full opacity, on top of the
   page the moment the viewport crossed 1180px, before the button was ever
   pressed. */
.mobilenav{position:fixed; inset:0; z-index:90; display:none}
.mobilenav[hidden]{display:none}
.mobilenav__backdrop{position:absolute; inset:0; background:rgba(15,16,17,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.mobilenav__sheet{position:relative; z-index:1; margin-left:auto; width:min(360px,86vw); max-width:100%; height:100%;
  overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--nav-solid); padding:96px 28px 32px;
  display:flex; flex-direction:column; gap:32px; box-shadow:-24px 0 60px -18px rgba(0,0,0,.5)}
.mobilenav__links{display:flex; flex-direction:column}
.mobilenav__link{display:block; padding:14px 2px; font-size:16px; font-weight:600; line-height:24px;
  color:var(--nav-fg-on); text-decoration:none; border-bottom:1px solid var(--nav-hair)}
/* always-expanded, not an accordion — six extra rows in a panel that already
   scrolls don't earn a second disclosure control with its own open/close
   state to keep in sync with the outer panel's. See functions.php. */
.mobilenav__sub{display:flex; flex-direction:column; padding:2px 0 10px 14px}
.mobilenav__sub-i{display:block; padding:10px 2px; font-size:14px; line-height:20px; color:var(--nav-fg); text-decoration:none}
.mobilenav__sub-i:hover,.mobilenav__sub-i:focus-visible{color:var(--nav-fg-on)}
.mobilenav__cta{margin-top:auto; justify-content:center; width:100%}
@media (max-width:1180px){ .mobilenav{display:flex} }

/* the secondary purchase action on a paper ground — a border, never a grey fill,
   so only one orange button is ever in view per section */
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--edge); box-shadow:none}
.btn--ghost:hover{background:transparent; border-color:var(--ink); box-shadow:none; transform:translateY(-2px)}

/* ---- StrengthsMultiplier report covers -------------------------------
   Products, not photographs: they keep the prototype's overlapping
   arrangement and rotations. Radius 12 and a warm feathered shadow bring
   them onto the system — an artefact lifted off a dark ground, per §6. */
.covers{position:relative; height:460px; margin:0}
.covers img{position:absolute; border-radius:12px; max-width:none}
/* Phase 4 Task 2 (thrivin/covers) -- a real core/image block puts its own
   className on the block's OUTER <figure>, never on the inner <img> (see
   patterns/covers.php's own docblock), so `.covers__a`/`.covers__b` land
   one level up from where the static handover source put them. This pair
   makes the figure the positioned box `.covers__a`/`.covers__b` already
   target, and the img fill it at its natural ratio -- same split already
   used by `.hero__media`/`.hero__media img` above. The `.covers img` rule
   above is untouched: it still matches the real <img> at any depth and
   still usefully rounds it. */
.covers .wp-block-image{position:absolute}
.covers .wp-block-image img{display:block; width:100%; height:auto}
.covers__a{left:4%; top:36px; width:54%;
  box-shadow:0 2px 8px rgba(18,14,10,.2), 0 26px 70px -18px rgba(13,10,8,.5);
  transform:rotate(-6deg)}
.covers__b{right:2%; top:0; width:56%;
  box-shadow:0 2px 8px rgba(18,14,10,.2), 0 30px 80px -20px rgba(13,10,8,.55);
  transform:rotate(5deg)}
@media (max-width:1180px){ .covers{height:400px} }
@media (max-width:860px){ .covers{height:320px} .covers__a{top:24px} }

/* ---- product shots -----------------------------------------------------
   Screens and documents, not photographs, so they sit in a bordered frame
   on the recessed ground rather than being cropped like a photo panel. */
.shot--product{border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#fff; margin:0 0 24px; aspect-ratio:4/3; display:block}
.shot--product img{display:block; width:100%; height:100%; position:static; object-fit:contain; object-position:50% 12%}
.section--dark .shot--product{border-color:var(--band-hair); background:var(--band-fill)}
/* the skill-path platform shot is wide and sits beside its copy */
.skillpath{display:grid; grid-template-columns:minmax(0,480px) minmax(0,760px); gap:40px; align-items:center;
  margin-top:56px}
.skillpath ul{margin:0; padding:0; list-style:none}
.skillpath li{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line);
  font-size:15px; line-height:24px; color:rgba(25,26,28,.8)}
.skillpath li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  flex:none; margin-top:9px}
@media (max-width:1180px){ .skillpath{grid-template-columns:1fr} }


/* ===================================================================
   THEMES — imagery-led (dark) and white mode.

   Everything that used to be hard-coded light-on-dark now reads from a
   set of band tokens. A "band" is any section that was dark: the hero,
   the statement bands, the closing CTA. In dark mode the tokens resolve
   to the original values, so nothing changes. In light mode the same
   band becomes recessed paper with ink type, and the imagery-led
   backgrounds drop away.

   The toggle writes data-theme on <html>. Dark is the default on first
   visit -- prefers-color-scheme is deliberately NOT consulted, because
   most corporate machines report light and that would hide the
   imagery-led dark design, the brand's front door, from almost everyone.
   A stored choice in localStorage['thrivin-theme'] survives reloads; see
   the wp_head pre-paint guard in functions.php.
   =================================================================== */

:root{
  /* the band, as it was: near-black with paper type over it */
  --band-bg:      var(--ground-deep);
  --band-hero:    var(--ground);
  --band-fg:      var(--paper);
  /* --band-fg-2/3/4 are set once, below, with the contrast-repaired values —
     see the "small grey text was too faint" note further down this file. */
  --band-hair:    rgba(255,255,255,.16);
  --band-hair-2:  rgba(255,255,255,.12);
  --band-fill:    rgba(255,255,255,.05);
  --band-fill-2:  rgba(255,255,255,.08);
  --band-em:      var(--accent-dark);
  --band-dot-1:   var(--signal-up);
  --band-dot-2:   var(--ember-up);
  --band-dot-3:   var(--growth-up);
  --band-tick:    var(--growth-up);
  /* chrome */
  --nav-bg:       rgba(42,46,45,.78);
  --nav-solid:    var(--nav-band);
  --nav-fg:       rgba(247,247,245,.72);
  --nav-fg-on:    #fff;
  --nav-hair:     rgba(247,247,245,.10);
  --nav-btn-line: rgba(255,255,255,.22);
  --hero-pull:    -65px;   /* the hero ground runs up behind the bar */
  --imagery:      block;   /* imagery-led backgrounds visible */
  --atmos:        block;
}

html[data-theme="light"]{
  /* white mode: the band is recessed paper, type is ink */
  --band-bg:      var(--recessed);
  --band-hero:    var(--paper);
  --band-fg:      var(--ink);
  --band-fg-2:    rgba(25,26,28,.75);
  --band-fg-3:    var(--muted);
  --band-fg-4:    var(--muted);
  --band-hair:    var(--line);
  --band-hair-2:  var(--line);
  --band-fill:    var(--surface);
  --band-fill-2:  var(--surface);
  --band-em:      var(--accent);
  --band-dot-1:   var(--signal);
  --band-dot-2:   var(--ember);
  --band-dot-3:   var(--growth);
  --band-tick:    var(--growth);
  --nav-bg:       rgba(247,247,245,.82);
  --nav-solid:    var(--paper);
  --nav-fg:       rgba(25,26,28,.72);
  --nav-fg-on:    var(--ink);
  --nav-hair:     var(--line);
  --nav-btn-line: var(--edge);
  --hero-pull:    0px;     /* opens on paper, so the bar separates — §11 */
  --imagery:      none;
  --atmos:        none;
}

/* ---- bands ----------------------------------------------------------- */
.section--dark .lede,
.section--dark .card__n{color:var(--band-fg-3)}
.section--dark .phase__t{color:var(--band-fg)}
.section--dark .phase__b{color:var(--band-fg-2)}
.section--dark .step__n{color:var(--band-em)}
.section--dark .step__t{color:var(--band-fg)}
.section--dark .step__c{color:var(--band-fg-2)}
.section--dark .cost{border-color:var(--band-hair)}
.section--dark .cost__n{color:var(--band-em)}
.section--dark .cost__t{color:var(--band-fg-2)}
.section--dark .tile{outline:1px solid var(--band-hair)}


/* ---- hero and page heroes -------------------------------------------- */
.hero,.phero{background:var(--band-hero); margin-top:var(--hero-pull)}
.hero .eyebrow__text,.phero .eyebrow__text{color:var(--band-fg-3)}
.hero .lede,.phero .lede{color:var(--band-fg-2)}

/* ---- imagery-led backgrounds -----------------------------------------
   Dark mode carries the photograph across the whole band under a
   left-weighted scrim. White mode drops it: the band is recessed paper
   and the photograph, where the design keeps one, sits in a panel. */
.hero__media{display:var(--imagery); position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; margin:0}

.section--imagery{position:relative; isolation:isolate; overflow:hidden}
.section--imagery > .imagery{position:absolute; inset:0; z-index:0; pointer-events:none;
  display:var(--imagery)}
.section--imagery > .imagery img{width:100%; height:100%; object-fit:cover;
  filter:contrast(.92) saturate(.9)}
.section--imagery > .imagery::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,17,15,.93) 0%, rgba(20,17,15,.80) 46%, rgba(20,17,15,.58) 100%),
    linear-gradient(180deg, rgba(16,17,19,.55) 0%, rgba(16,17,19,.35) 40%, rgba(16,17,19,.6) 100%)}

/* ---- the homepage hero photograph -------------------------------------
   Dark: bleeds across the band under a scrim, per the imagery-led design.
   Light: becomes the right-hand panel the white-mode design shows, and the
   scorecard planes overlap its left edge exactly as they do there. */
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:50% 34%;
  filter:contrast(.92) saturate(.95)}
.hero__media::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(22,18,16,.93) 0%, rgba(22,18,16,.72) 38%, rgba(22,18,16,.35) 62%, rgba(22,18,16,.5) 100%),
    linear-gradient(180deg, rgba(16,17,19,.4), rgba(16,17,19,.25) 45%, rgba(16,17,19,.55))}
html[data-theme="light"] .hero__media{display:block; left:auto; right:0; top:96px; bottom:96px;
  width:min(46%, 620px); border-radius:12px; overflow:hidden}
html[data-theme="light"] .hero__media::after{display:none}
html[data-theme="light"] .hero__media img{object-position:56% 28%}

/* ---- nav -------------------------------------------------------------- */
.nav__link:hover,.nav__link--active{color:var(--nav-fg-on)}
html[data-theme="light"] .menu{border:1px solid var(--line)}
html[data-theme="light"] .menu__i:hover,
html[data-theme="light"] .menu__i:focus-visible{background:var(--recessed)}

/* ---- the toggle -------------------------------------------------------- */
.themer{display:inline-flex; align-items:center; gap:2px; flex:none;
  background:transparent; border:1px solid var(--nav-btn-line); border-radius:999px; padding:3px}
.themer button{display:grid; place-items:center; width:30px; height:30px; padding:0;
  background:transparent; border:0; border-radius:999px; cursor:pointer; color:var(--nav-fg);
  transition:background .25s var(--ease-soft), color .25s var(--ease-soft)}
.themer button svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.themer button:hover{color:var(--nav-fg-on)}
.themer button[aria-pressed="true"]{background:var(--band-fill-2); color:var(--nav-fg-on)}
html[data-theme="light"] .themer button[aria-pressed="true"]{background:var(--recessed); color:var(--ink)}

/* ---- light-mode corrections ------------------------------------------- */
/* a band that was dark now sits on recessed paper, so a card inside it
   needs the surface and a hairline back, not a translucent white fill */
html[data-theme="light"] .section--dark .card{background:var(--surface); border:1px solid var(--line)}
html[data-theme="light"] .section--dark .tile{outline:0}
/* the measurement bands keep their base (non-lifted) tones on light grounds */
html[data-theme="light"] .section--dark .score__rb{color:var(--band-t)}
/* photographs in a band keep their frame rather than bleeding */
html[data-theme="light"] .section--photo{background:var(--recessed)}
html[data-theme="light"] .section--photo .shell{position:relative; z-index:2}

@media (prefers-reduced-motion:reduce){
  .themer button{transition-duration:.01ms}
}

/* ---- phase colours used as TYPE ---------------------------------------
   The three are safe as tile fills, but as type they have to clear 3:1 on
   whichever ground they land on. The lifted set is for dark grounds only —
   on paper it measures 1.9–3.0:1 — so light mode swaps to the base set,
   and green darkens because #5FA544 only reaches 2.8:1 on paper. */
:root{
  --growth-tx:#4E8A38;              /* 3.9:1 on paper, 4.5:1 on dark */
  --em-see:var(--signal-up);
  --em-build:var(--ember-up);
  --em-grow:var(--growth-up);
}
html[data-theme="light"]{
  --em-see:var(--signal);
  --em-build:var(--ember);
  --em-grow:var(--growth-tx);
}
.em-see{color:var(--em-see)}
.em-build{color:var(--em-build)}
.em-grow{color:var(--em-grow)}
/* the value rail always sits on paper, so its green takes the text tone */
.step__n.is-grow{color:var(--growth-tx)}

/* ---- inner-page hero photography ---------------------------------------
   Same rule as the homepage: dark mode bleeds the photograph across the
   band under a scrim; white mode puts it in a bordered panel on the right.
   The min-height only applies when a page actually carries one. */
.phero--media .phero__body{min-height:420px; max-width:680px}
.phero .hero__media{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
html[data-theme="light"] .phero .hero__media{
  left:auto; right:0; top:112px; bottom:80px; width:min(38%,460px); border-radius:12px}
@media (max-width:1180px){
  .phero--media .phero__body{min-height:0; max-width:none}
  html[data-theme="light"] .phero .hero__media{display:none}
}

/* ===================================================================
   CORRECTIONS
   =================================================================== */

/* A .panel is a white surface. Dropped on a dark band its contents
   inherited band type — white on white, 1:1. It now takes the band fill
   in dark mode and stays a white surface on paper. */
.section--dark .panel{background:var(--band-fill); border-color:var(--band-hair)}
.section--dark .panel__t{color:var(--band-fg)}
.section--dark .panel__l{color:var(--band-em)}

/* A statement line should not float in 128px of empty band either side. */
.section--statement{padding-block:88px}
.section--statement .pull{max-width:980px}

/* WHY / PRINCIPLE: copy and photograph sit side by side rather than a
   620px column with a full-bleed slab jammed underneath it. */
.split-media{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; margin-top:48px; margin-bottom:56px}
.split-media .body{max-width:none}
.split-media--top{align-items:center}
@media (max-width:1180px){ .split-media{grid-template-columns:1fr; gap:40px} }

/* Task 7 (patterns/split-media.php): the measured margin-top:0 inline
   override (7 real source instances) ported as a modifier class -- the
   value is real, the inline-style mechanism is not. */
.split-media--flush{margin-top:0}

/* ---- the engineering process, rebuilt from the prototype -------------- */
.eng{margin-top:56px}
.eng__banner{display:flex; align-items:center; gap:16px; margin:0 0 12px;
  padding:16px 26px; border-radius:8px;
  background:color-mix(in srgb, var(--ember) 10%, transparent);
  border:1.5px solid color-mix(in srgb, var(--ember) 45%, transparent)}
.eng__banner b{display:block; font-size:12px; line-height:16px; font-weight:600; letter-spacing:2.16px; color:var(--ember-tx)}
.eng__banner span{display:block; margin-top:4px; font-size:14px; line-height:24px; color:var(--muted)}
.section--dark .eng__banner span{color:var(--band-fg-2)}

.eng__g{display:grid; grid-template-columns:64px minmax(0,1fr); gap:0}
.eng__rail{position:relative}
/* one continuous bracket down the left of the two engineering phases */
.eng__rail i{position:absolute; left:14px; top:0; width:14px;
  border:2px solid var(--eng-accent, var(--ember)); border-right:0}
.eng__g--first .eng__rail i{bottom:-14px; border-radius:8px 0 0 0}
.eng__g--last  .eng__rail i{bottom:34px;  border-radius:0 0 0 8px}
.eng__head{display:flex; align-items:baseline; gap:14px; padding:20px 0 22px;
  border-bottom:1px solid var(--line); margin-bottom:30px}
.section--dark .eng__head{border-color:var(--band-hair)}
.eng__label{font-size:12px; line-height:16px; font-weight:600; letter-spacing:2.16px; color:var(--eng-accent,var(--accent))}
.eng__sub{font-size:14px; line-height:24px; color:var(--muted)}
.section--dark .eng__sub{color:var(--band-fg-2)}

.eng__row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:28px; padding-bottom:34px}
.eng__stage{text-align:right; padding-top:26px; font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:2.16px; color:var(--eng-accent,var(--accent))}
.eng__body{position:relative; padding-left:40px}
/* the station, and the line running to the next one */
.eng__body::before{content:""; position:absolute; left:0; top:30px; width:14px; height:14px;
  border-radius:50%; background:var(--eng-accent,var(--accent));
  border:3px solid var(--paper); box-shadow:0 0 0 2px var(--eng-accent,var(--accent)); z-index:1}
.section--dark .eng__body::before{border-color:var(--band-bg)}
.eng__row--linked .eng__body::after{content:""; position:absolute; left:6.5px; top:44px; bottom:-34px;
  width:1.5px; background:var(--line)}
.section--dark .eng__row--linked .eng__body::after{background:var(--band-hair)}
.eng__card{position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px 28px; transition:transform .38s var(--ease), box-shadow .38s var(--ease); max-width:760px}
.eng__card:hover{transform:translateY(-3px); box-shadow:0 14px 36px -14px rgba(20,16,12,.28)}
.section--dark .eng__card{background:var(--band-fill); border-color:var(--band-hair)}
/* the corner flag from the prototype */
.eng__card::before{content:""; position:absolute; top:0; right:0;
  border-style:solid; border-width:0 44px 44px 0;
  border-color:transparent var(--eng-accent,var(--accent)) transparent transparent; opacity:.18}
.eng__t{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 10px}
.eng__t h3{margin:0; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
.section--dark .eng__t h3{color:var(--band-fg)}
.eng__tag{font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px;
  color:var(--eng-accent,var(--accent)); border:1.5px solid var(--eng-accent,var(--accent));
  border-radius:4px; padding:2px 8px}
.eng__d{margin:0; font-size:15px; line-height:24px; color:rgba(25,26,28,.75); max-width:620px}
.section--dark .eng__d{color:var(--band-fg-2)}

@media (max-width:860px){
  .eng__g{grid-template-columns:24px minmax(0,1fr)}
  .eng__rail i{left:4px}
  .eng__row{grid-template-columns:1fr; gap:8px}
  .eng__stage{text-align:left; padding-top:0}
  .eng__body{padding-left:28px}
  .eng__body::before{top:8px}
  .eng__row--linked .eng__body::after{top:22px}
}


/* The banner label is 12px, so it needs 4.5:1 — and it sits on its own
   10% ember tint, which drags the base ember down to 3.3:1.
   This follows the GROUND, not the theme: .section--recessed stays light in
   both themes, so the default has to be the dark-on-light tone. */
:root{ --ember-tx:#A34319 }                       /* 5.2:1 on the paper tint */

/* an inline reference to the Index + Blueprint page */
.inline{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.section--dark .inline,.hero .inline,.phero .inline{color:var(--band-em)}
.inline:hover{text-decoration-thickness:2px}

/* ---- early proof band -------------------------------------------------
   [p41] Executives want evidence before the methodology. Two quotations
   and the measured outcomes, immediately after the Executive Challenge. */
.proof{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:48px}
.quote{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:12px; padding:32px}
.section--dark .quote{background:var(--band-fill); border-color:var(--band-hair); border-left-color:var(--band-em)}
.quote__t{margin:0 0 20px; font-size:18px; line-height:28px; color:var(--ink); flex:1 1 auto}
.section--dark .quote__t{color:var(--band-fg)}
.quote__t em{font-style:normal; font-weight:600; color:var(--accent)}
.section--dark .quote__t em{color:var(--band-em)}
.quote__a{margin:0; font-size:13px; line-height:20px; font-weight:600; color:var(--ink)}
.section--dark .quote__a{color:var(--band-fg)}
.quote__r{margin:2px 0 0; font-size:13px; line-height:20px; color:var(--muted)}
.section--dark .quote__r{color:var(--band-fg-2)}
/* patterns/quote.php: quote__t's copy is a real, client-editable
   core/paragraph nested inside a core/group(tagName:"blockquote") -- the
   source itself has no wrapping <p> (raw text + inline <em> directly
   inside <blockquote>). core/paragraph's save() always emits <p>, so this
   neutralizes the browser's UA default paragraph margin the wrapping
   introduces. Not a source value being ported -- there is no inline style
   here to preserve -- purely a consequence of this pattern's own block
   mechanism, same category of fix as .split-media--flush below. */
.quote__t p{margin:0}
/* the source's own literal style="margin:12px 0 0" on the optional
   download line inside figcaption (index.html:253, Gardant quote only) --
   ported as a class-keyed rule, not a literal inline style, matching
   .split-media--flush's own precedent for the same move. */
.quote__dl{margin:12px 0 0}
.proof__figs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin-top:40px}
.pfig{border-top:1px solid var(--line); padding-top:20px}
.section--dark .pfig{border-color:var(--band-hair)}
.pfig__n{font-size:36px; line-height:44px; font-weight:400; letter-spacing:-.9px; color:var(--accent);
  font-variant-numeric:tabular-nums}
.section--dark .pfig__n{color:var(--band-em)}
.pfig__l{margin:8px 0 0; font-size:14px; line-height:24px; color:rgba(25,26,28,.75)}
.section--dark .pfig__l{color:var(--band-fg-2)}
@media (max-width:1180px){ .proof{grid-template-columns:repeat(2,minmax(0,1fr))} .proof__figs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .proof{grid-template-columns:1fr} }
@media (max-width:860px){ .proof__figs{grid-template-columns:1fr} }

/* [p89] the low-friction alternative under the closing CTA */
.closing__alt{margin:20px 0 0; font-size:15px; line-height:24px; color:var(--band-fg-2)}
.closing__alt a{color:var(--band-fg); text-decoration:underline; text-underline-offset:2px}
.closing__alt a:hover{color:var(--band-em)}

/* [p83] small grey text was too faint, most visibly on the How It Works
   cycle diagram in dark mode. These lift the faintest tones to clear 4.5:1
   for body copy and 3:1 for the diagram's labels. */
:root{
  --band-fg-2:rgba(255,255,255,.82);   /* was .70 — 4.6:1 on the dark band */
  --band-fg-3:rgba(255,255,255,.68);   /* was .55 */
  --band-fg-4:rgba(255,255,255,.58);   /* was .45 */
}
/* The cycle diagram must follow the ground, not be hard-coded near-white —
   in white mode that band becomes recessed paper and near-white type would
   vanish. Its labels take the strongest band tone, and the ring gets its own
   token so it can be firmer than a normal hairline without breaking light. */
:root{ --cycle-ring:rgba(255,255,255,.34) }
html[data-theme="light"]{ --cycle-ring:var(--edge) }


/* ---- layout audit fixes ------------------------------------------------

   A checklist is a list, not a card grid. Multi-column balances by height,
   so three items never leave one stranded in a row of its own the way a
   two-column grid does. */
@media (max-width:860px){ .checks{columns:1} }


/* A split-media block sat flush against whatever followed it, so a benefit
   row's hairline landed on the bottom edge of the photograph. */
.split-media:last-child{margin-bottom:0}


/* In white mode a dark band resolves to recessed, so wherever a dark band
   sits directly beside a recessed one the two run together as a single grey
   slab. Only that pairing needs help — give whichever of the two comes
   second the paper ground so the ladder keeps alternating. Dark mode is
   untouched, because there the two grounds are already different. */
html[data-theme="light"] .section--recessed + .section--dark,
html[data-theme="light"] .section--dark + .section--recessed,
html[data-theme="light"] .section--dark + .section--dark{
  --band-bg:var(--paper);
  background:var(--paper);
}

/* Column-count modifiers, chosen so a grid never leaves one item alone on the
   last row. These are classes rather than inline styles precisely so the
   breakpoints below can still collapse them. */
/* Task 10 (thrivin/grids) -- PORTING GAP FOUND AND FIXED, not present in the
   handover source in this exact form. The handover source re-declares a
   bare `.cols-2{grid-template-columns:repeat(2,...)}` a SECOND time here
   (styles.css:1429), after `.grid-3`/`.grid-4`/`.grid-6` (:343-345), relying
   on file-order cascade (both are single-class selectors, equal
   specificity, later wins) so the one real `grid-6 cols-2` instance
   (strengths-skill-path.html:197) actually renders two columns rather than
   `.grid-6`'s own three. This theme's ported style.css never carried that
   second declaration at all, so `grid-6 cols-2` silently rendered THREE
   columns -- caught by this task's own Playwright test (`grid-6 cols-2 is
   2`, patterns.spec.js), which failed with `Received: 3` before this fix.
   Reproducing the source's own bare-`.cols-2`-twice mechanism was rejected:
   this project's own flattening.spec.js enforces "no top-level selector
   declared twice" project-wide (a real audit fix, not a style preference --
   the source itself shipped a genuine duplicate-`.section`/`#featured,
   #latest` defect that rule exists to catch). A compound selector achieves
   the identical cascade result without a text-duplicate: `.grid-6.cols-2`
   has higher specificity (0,2,0) than either bare class alone (0,1,0), so it
   wins regardless of declaration order -- and thrivin_grid_valid_cols()
   (patterns/grids.php) only ever permits `cols-2` on the `grid-6` base (the
   one real combination), so this single rule covers every combination this
   pattern's own API can produce. */
.grid-6.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  /* Task 10 fix round 1 (post-review) -- MOBILE REGRESSION FOUND BY TASK 11's
     integration test, confirmed by the coordinator. The `.grid-6.cols-2`
     compound selector above (specificity 0,2,0) fixed the desktop cascade
     gap, but a media query adds no specificity, so it ALSO outranked both
     of this stylesheet's own ≤860 collapse rules -- this one and the
     `.cols-2,.grid-3,.grid-6{grid-template-columns:1fr; gap:36px}` rule
     near the top of the RESPONSIVE section -- each only 0,1,0. Without this
     line, `grid-6 cols-2` silently stayed at two columns below 860px
     instead of collapsing to one, matching neither the source (whose bare
     `.cols-2` at 0,1,0 loses cleanly to these same collapse rules) nor the
     brief's own measured three-width table.
     FIX, not a reintroduction of the order-dependence the compound
     selector was built to remove: this rule uses the IDENTICAL selector
     `.grid-6.cols-2`, not a competing bare class, so there is no
     specificity race to be fragile about -- it is the same "later
     @media block overrides the base declaration for the same selector"
     pattern every other responsive rule in this file already relies on
     (.grid-4, .rail, .grid-2x2, etc., each redeclared verbatim inside a
     later @media block). Moving this line before its own base declaration
     would break every responsive override in the file the same way, so
     "stays after the base rule" is this file's existing architecture, not
     a new fragile invariant this fix introduces. */
  .grid-6.cols-2{grid-template-columns:1fr}
}

/* ---- Gardant case study ------------------------------------------------
   The band used to promise "here are the highlights:" and then show none.
   Copy on the left, the four measured outcomes on the right. */
.cs{display:grid; grid-template-columns:minmax(0,620px) minmax(0,1fr); gap:64px;
  align-items:start; margin-top:48px}
.cs__meta{margin:20px 0 0; font-size:13px; line-height:20px; color:var(--muted)}
.section--dark .cs__meta{color:var(--band-fg-3)}
.cs__figs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 28px}
.csfig{border-top:1px solid var(--edge); padding-top:18px}
.section--dark .csfig{border-color:var(--band-hair)}
.csfig__n{font-size:36px; line-height:44px; font-weight:400; letter-spacing:-.9px;
  color:var(--accent); font-variant-numeric:tabular-nums}
.section--dark .csfig__n{color:var(--band-em)}
.csfig__l{margin:6px 0 0; font-size:14px; line-height:22px; color:rgba(25,26,28,.75)}
.section--dark .csfig__l{color:var(--band-fg-2)}
@media (max-width:1180px){ .cs{grid-template-columns:1fr; gap:48px} }
@media (max-width:860px){ .cs__figs{grid-template-columns:1fr; gap:24px} }

/* ===================================================================
   PULSE — snapshot gate + Executive Intelligence Brief
   Flow: quiz → snapshot (score + band only) → details form → full Brief,
   personalized, on screen and printable. Benchmarked on the 8-slide
   Brief deck, rebuilt in the site's own system.
   =================================================================== */

/* ---- the snapshot ---- */
.snap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start;
  margin-top:48px}
.snap__card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:40px;
  text-align:center}
.snap__l{margin:0 0 16px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.6px;
  color:var(--muted)}
.snap__v{font-size:72px; line-height:72px; font-weight:400; letter-spacing:-1.8px;
  color:var(--band-t,var(--ink)); font-variant-numeric:tabular-nums}
.snap__max{font-size:14px; line-height:20px; color:var(--muted)}
.snap__band{margin:10px 0 0; font-size:17px; line-height:24px; font-weight:600; color:var(--band-t,var(--ink))}
.snap__pill{display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  background:var(--recessed); border:1px solid var(--line); border-radius:999px; padding:8px 18px;
  font-size:12px; line-height:16px; font-weight:600; color:var(--ink)}
.snap__pill i{width:6px; height:6px; border-radius:50%; background:var(--limited); flex:none}
.snap__hint{margin:22px 0 0; font-size:13px; line-height:20px; color:var(--muted)}

/* ---- the gate form ---- */
.gate{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:12px; padding:32px}
.gate h3{margin:0 0 6px; font-size:20px; line-height:28px; font-weight:600; color:var(--ink)}
.gate > p{margin:0 0 22px; font-size:14px; line-height:22px; color:rgba(25,26,28,.7)}
.gate label{display:block; margin:0 0 6px; font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:.4px; color:var(--ink)}
.gate input,.gate select{display:block; width:100%; height:48px; padding:0 14px; margin:0 0 16px;
  font:400 15px/1.4 'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; outline:none;
  transition:border-color .2s var(--ease-soft)}
.gate input:focus,.gate select:focus{border-color:var(--accent)}
.gate input[aria-invalid="true"]{border-color:var(--limited)}
.gate__err{display:none; margin:-10px 0 14px; font-size:12.5px; line-height:18px; color:var(--limited)}
.gate__err.is-on{display:block}
.gate .btn{width:100%; justify-content:center; margin-top:6px}
.gate__fine{margin:14px 0 0; font-size:12px; line-height:18px; color:var(--muted)}
.gate__fine a{color:var(--accent)}
/* the dark band variants */
.section--dark .snap__card,.section--dark .gate{background:var(--band-fill); border-color:var(--band-hair)}
.section--dark .gate{border-top-color:var(--band-em)}
.section--dark .gate h3,.section--dark .gate label{color:var(--band-fg)}
.section--dark .gate > p{color:var(--band-fg-2)}
.section--dark .snap__pill{background:var(--band-fill); border-color:var(--band-hair); color:var(--band-fg)}
.section--dark .snap__hint,.section--dark .snap__l,.section--dark .snap__max{color:var(--band-fg-3)}
.section--dark .gate input{background:rgba(255,255,255,.06); border-color:var(--band-hair); color:var(--band-fg)}
.section--dark .gate__fine{color:var(--band-fg-3)}

/* ---- the Brief ---- */
.brief-ready{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--growth-tx);
  border-radius:12px; padding:22px 28px; margin:0 0 56px}
.brief-ready p{margin:0; font-size:15px; line-height:24px; color:var(--ink)}
.brief-ready p b{font-weight:600}
.brief-ready span{display:block; margin-top:2px; font-size:13px; line-height:20px; color:var(--muted)}
.section--dark .brief-ready{background:var(--band-fill); border-color:var(--band-hair);
  border-left-color:var(--band-tick)}
.section--dark .brief-ready p{color:var(--band-fg)}
.section--dark .brief-ready span{color:var(--band-fg-3)}

.bsec{border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:44px 48px; margin-bottom:24px; break-inside:avoid}
.section--dark .bsec{background:var(--band-fill); border-color:var(--band-hair)}
.bsec__k{display:flex; align-items:center; gap:12px; margin:0 0 12px;
  font-size:11px; line-height:16px; font-weight:600; letter-spacing:1.8px; color:var(--muted)}
.section--dark .bsec__k{color:var(--band-fg-3)}
.bsec__h{margin:0 0 14px; font-size:28px; line-height:36px; font-weight:600; letter-spacing:-.4px; color:var(--ink)}
.section--dark .bsec__h{color:var(--band-fg)}
.bsec__p{margin:0 0 8px; font-size:15px; line-height:24px; color:rgba(25,26,28,.75); max-width:640px}
.section--dark .bsec__p{color:var(--band-fg-2)}

/* cover */
.bcover{display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap}
.bcover__t{margin:0; font-size:34px; line-height:42px; font-weight:600; letter-spacing:-.6px; color:var(--ink)}
.section--dark .bcover__t{color:var(--band-fg)}
.bcover__s{margin:10px 0 0; font-size:16px; line-height:26px; color:rgba(25,26,28,.7)}
.section--dark .bcover__s{color:var(--band-fg-2)}
.bcover__for{border-left:3px solid var(--accent); padding:6px 0 6px 18px; flex:none}
.bcover__for b{display:block; font-size:16px; font-weight:600; color:var(--ink)}
.section--dark .bcover__for b{color:var(--band-fg)}
.bcover__for span{display:block; font-size:13px; line-height:20px; color:var(--muted)}
.section--dark .bcover__for span{color:var(--band-fg-3)}

/* scorecard rows with the banded scale */
.brow{display:grid; grid-template-columns:minmax(0,260px) minmax(0,150px) minmax(0,1fr); gap:28px;
  align-items:center; padding:22px 0; border-top:1px solid var(--line)}
.section--dark .brow{border-color:var(--band-hair)}
.brow__t{margin:0; font-size:15px; line-height:22px; font-weight:600; color:var(--ink)}
.section--dark .brow__t{color:var(--band-fg)}
.brow__d{margin:4px 0 0; font-size:12.5px; line-height:18px; font-weight:400; color:var(--muted)}
.section--dark .brow__d{color:var(--band-fg-3)}
.brow__v{font-size:34px; line-height:38px; font-weight:600; letter-spacing:-.8px;
  font-variant-numeric:tabular-nums; color:var(--bt)}
.brow__b{margin:2px 0 0; font-size:10px; line-height:16px; font-weight:600; letter-spacing:1.2px; color:var(--bt)}
.brow__chip{display:inline-block; margin-top:6px; padding:3px 10px; border-radius:4px;
  font-size:9.5px; line-height:14px; font-weight:600; letter-spacing:1px; color:#fff; background:var(--bt)}
.bscale{position:relative; height:34px}
.bscale__track{position:absolute; left:0; right:0; top:14px; height:8px; border-radius:4px;
  overflow:hidden; display:flex}
.bscale__seg{height:100%}
.bscale__marker{position:absolute; top:0; width:30px; height:30px; margin-left:-15px; border-radius:50%;
  background:var(--bt); color:#fff; display:grid; place-items:center;
  font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2.5px var(--surface)}
.section--dark .bscale__marker{box-shadow:0 0 0 2.5px var(--band-bg)}

/* suggest cards + question rows */
.bsug{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px}
.bsug__c{border:1px solid var(--line); border-top:3px solid var(--bt,var(--accent)); border-radius:10px;
  padding:22px 22px 20px; background:var(--paper)}
.section--dark .bsug__c{background:var(--band-fill); border-color:var(--band-hair);
  border-top-color:var(--bt,var(--band-em))}
.bsug__l{margin:0 0 10px; font-size:10px; line-height:14px; font-weight:600; letter-spacing:1.4px; color:var(--bt)}
.bsug__t{margin:0 0 6px; font-size:16px; line-height:23px; font-weight:600; color:var(--ink)}
.section--dark .bsug__t{color:var(--band-fg)}
.bsug__v{font-size:26px; line-height:30px; font-weight:600; color:var(--bt); font-variant-numeric:tabular-nums}
.bsug__d{margin:8px 0 0; font-size:13px; line-height:20px; color:rgba(25,26,28,.7)}
.section--dark .bsug__d{color:var(--band-fg-2)}
.bq{display:flex; gap:16px; align-items:baseline; padding:14px 0; border-top:1px solid var(--line)}
.section--dark .bq{border-color:var(--band-hair)}
.bq__n{flex:none; width:26px; height:26px; border-radius:6px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:600; align-self:center}
.bq__k{display:block; font-size:10px; line-height:14px; font-weight:600; letter-spacing:1.2px; color:var(--accent)}
.bq__q{display:block; margin-top:2px; font-size:15.5px; line-height:23px; font-weight:500; color:var(--ink)}
.section--dark .bq__q{color:var(--band-fg)}
.btake{display:flex; gap:16px; align-items:flex-start; margin-top:24px; border-radius:10px;
  background:var(--ground); color:var(--paper); padding:20px 24px}
.btake b{flex:none; font-size:10px; line-height:20px; font-weight:600; letter-spacing:1.4px; color:var(--accent-dark)}
.btake p{margin:0; font-size:15px; line-height:24px; color:rgba(247,247,245,.9)}

/* ---- print: the Brief becomes the document ----

   PHASE 6 TASK 15. The source's two rules were
     html[data-theme] body > *{display:none !important}
     html[data-theme] body > #pulseBrief{display:block !important}
   and they were correct in the agency's static HTML, where #pulseBrief WAS a
   direct child of <body>. A block theme wraps post content in
   <main> > .wp-block-post-content, so the re-show never matched, the blanket
   hide was unopposed, and the Brief printed blank -- recorded in
   docs/phase-records/2026-08-27-the-brief-cannot-print.md.

   Two things were wrong, not one. The blanket hide carried NO PAGE SCOPE
   either, so it applied to all 25 pages: before this rule, every print job
   anywhere on the site produced an empty sheet. Measured with Playwright at
   print emulation on `/`: zero of body's children had a client rect.

   The fix is a structure-independent selector rather than hoisting the node
   to <body> at print time. Hoisting would work, but it needs beforeprint /
   afterprint to stay balanced -- afterprint does not fire in every
   print-cancel path -- and a failed restore leaves the live DOM rearranged
   for the rest of the session. CSS cannot half-finish. `:has()` is Baseline
   in every engine this theme targets and is what makes the selector
   structure-independent: hide everything in the body that is neither the
   Brief, inside the Brief, nor an ANCESTOR of it, whatever the wrapper
   chain happens to be.

   `body:has(#briefDoc > *)` is the scope, and it is deliberately narrower
   than "the page has a Brief element": #briefDoc is empty until buildBrief()
   fills it (assets/js/pulse.js), so the Brief takes over the document only
   once there IS a Brief. Every other page, and the Pulse page before a run
   is finished, prints normally. */
@media print{
  @page{size:A4; margin:14mm 12mm}
  html[data-theme] body:has(#briefDoc > *)
    *:not(#pulseBrief):not(#pulseBrief *):not(:has(#pulseBrief)){display:none !important}
  html[data-theme] body:has(#briefDoc > *) #pulseBrief{display:block !important}
  #pulseBrief{padding:0 !important; background:#fff !important}
  #pulseBrief .shell{max-width:none; padding:0}
  #pulseBrief .brief-ready,#pulseBrief .brief-actions,#pulseBrief .rule,
  #pulseBrief .eyebrow,#pulseBrief .h2,#pulseBrief .body{display:none !important}
  .bsec{border-color:#ddd; box-shadow:none; margin-bottom:14pt; padding:24pt 26pt; break-inside:avoid}
  .bsec--break{break-before:page}
  .bscale__marker{box-shadow:0 0 0 2.5px #fff}
}
.bsug__bl{margin:2px 0 0; font-size:10px; line-height:14px; font-weight:600; letter-spacing:1.2px; color:var(--bt)}

/* the post-quiz layout: the original scorecard beside the details form */
.snap--card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start}
@media (max-width:1180px){ .snap,.snap--card{grid-template-columns:1fr; gap:40px} }

/* Purchase buttons are present but not yet wired to a checkout — they go
   nowhere by design until purchasing opens. Inert: no navigation, no hover
   lift, default cursor. */
.btn--inert{pointer-events:none; cursor:default}

/* ============================ Website 5.0 ============================ */

/* deep links into the Index + Blueprint page clear the sticky topbar */
#index,#blueprint,#receives,#how-index-works{scroll-margin-top:104px}

/* About: the six beliefs carry icons now — tile left, index right */
.cost__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}


/* Pulse: the sample-Brief panel in the Four Indicators section */
.brief-sample{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px;
  align-items:center; margin-top:64px; padding:40px; border:1px solid var(--edge); border-radius:12px}
.brief-sample__thumbs{display:flex; gap:16px}
.brief-sample__thumbs img{width:calc((100% - 32px)/3); height:auto; border:1px solid var(--edge);
  border-radius:6px; box-shadow:0 12px 28px rgba(25,26,28,.10); background:#fff}
@media (max-width:860px){ .brief-sample{grid-template-columns:1fr; gap:32px; padding:28px} }

/* Contact: the request-a-call form beside what-happens-next */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:64px;
  align-items:start; margin-top:56px}
.checks--1col{display:block; columns:1}
@media (max-width:1180px){ .contact-grid{grid-template-columns:1fr; gap:48px} }

/* Gated downloads: the overlay card that collects details before a file */
.dlgate{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(15,16,17,.62); backdrop-filter:blur(3px)}
.dlgate[hidden]{display:none}
/* Phase 6 Task 8: the focus trap's sentinels. Focusable, zero-size, and
   never announced -- they exist only so that Tab off either end of the
   dialog lands somewhere assets/js/gated-download.js can intercept, which
   is what closes the tab cycle inside an aria-modal dialog the source's own
   implementation (app.js:414) declared but never enforced. They inherit
   .dlgate[hidden]'s display:none with it, so they owe no [hidden] override
   of their own -- they have no display of their own to beat. */
.dlgate__sentinel{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.dlgate__card{position:relative; width:min(440px,100%); max-height:calc(100vh - 48px); overflow:auto;
  background:#fff; border-radius:12px; padding:32px; box-shadow:0 32px 80px -24px rgba(0,0,0,.5)}
.dlgate__card .gate{border:0; padding:0; margin:0; background:transparent}
.dlgate__l{margin:0 0 8px; font-size:11px; line-height:16px; font-weight:700; letter-spacing:.14em;
  color:var(--accent)}
.dlgate__card h3{color:#191a1c}
.dlgate__card label{color:#191a1c}
.dlgate__x{position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:8px;
  background:transparent; color:#6b6c6e; font-size:22px; line-height:1; cursor:pointer}
.dlgate__x:hover{background:rgba(25,26,28,.06); color:#191a1c}
/* inside the white overlay card the form is always ink-on-white, both themes */
.dlgate__card .gate input{color:#191a1c; background:#fff; border-color:rgba(25,26,28,.18)}
.dlgate__card .gate__fine{color:rgba(25,26,28,.55)}
/* the two insight documents: buttons sit on a shared baseline */
.docgrid .card{display:flex; flex-direction:column}
.docgrid__cta{margin:auto 0 0; padding-top:24px}

/* sourced statistics link out; the line stays quiet until hovered */
.stat__s a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
.stat__s a:hover{color:var(--accent)}

/* ============================ Team call, August 2026 ============================ */

/* Consecutive image sections alternate sides for visual variety. The flip
   is applied by the generator to every second split on a page. */
.split-media--flip > div:first-child{order:2}
.split-media--flip > figure{order:1}
@media (max-width:1180px){
  .split-media--flip > div:first-child{order:0}
  .split-media--flip > figure{order:1}
}

/* Hero photography reaches the edges in light mode too — the inset panel
   left space around the image on laptops. A paper scrim keeps the type in
   charge exactly as the dark scrim does. */
html[data-theme="light"] .hero__media{left:0; right:0; top:0; bottom:0; width:auto;
  border-radius:0}
html[data-theme="light"] .hero__media::after{display:block; background:
  linear-gradient(90deg, rgba(247,247,245,.97) 0%, rgba(247,247,245,.88) 38%, rgba(247,247,245,.42) 66%, rgba(247,247,245,.55) 100%),
  linear-gradient(180deg, rgba(247,247,245,.5), rgba(247,247,245,.2) 45%, rgba(247,247,245,.6))}
html[data-theme="light"] .hero__media img{object-position:56% 30%}
html[data-theme="light"] .phero .hero__media{left:0; right:0; top:0; bottom:0; width:auto;
  border-radius:0}
html[data-theme="light"] .phero .hero__media::after{content:""; display:block; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(247,247,245,.97) 0%, rgba(247,247,245,.88) 40%, rgba(247,247,245,.45) 70%, rgba(247,247,245,.55) 100%),
    linear-gradient(180deg, rgba(247,247,245,.45), rgba(247,247,245,.2) 45%, rgba(247,247,245,.55))}
@media (max-width:1180px){
  html[data-theme="light"] .phero .hero__media{display:block}
}

/* The pointer-reactive dot field now renders over the hero photograph
   instead of hiding behind it — under test per the team call. */
.hero .dotfield{display:block; z-index:1}
.hero > .shell{position:relative; z-index:2}

/* Language control — design only. Selecting a language stores the choice
   and updates the control; translation itself is Davor's backend. */
.langer{position:relative; flex:none}
.langer__b{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px;
  background:transparent; border:1px solid var(--nav-btn-line); border-radius:999px;
  color:var(--nav-fg); font:600 12px/1 'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.4px; cursor:pointer; transition:color .25s var(--ease-soft)}
.langer__b:hover{color:var(--nav-fg-on)}
.langer__b svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.langer__b .nav__caret{margin-left:-2px}
.langer__menu{position:absolute; top:calc(100% + 10px); right:0; min-width:150px; padding:8px;
  background:var(--nav-solid); border-radius:10px; box-shadow:0 18px 44px -12px rgba(0,0,0,.45); z-index:60}
html[data-theme="light"] .langer__menu{border:1px solid var(--line)}
.langer__menu button{display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:9px 12px; background:transparent; border:0; border-radius:7px; color:var(--nav-fg);
  font:500 13.5px/1.3 'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif; cursor:pointer; text-align:left}
.langer__menu button:hover{color:var(--nav-fg-on); background:var(--band-fill)}
html[data-theme="light"] .langer__menu button:hover{background:var(--recessed)}
.langer__menu button[aria-pressed="true"]{color:var(--nav-fg-on)}
.langer__menu button[aria-pressed="true"]::after{content:"✓"; font-size:12px; color:var(--accent)}


/* the two downloadable documents show their actual covers */
.docgrid .card--doc,.card--doc{display:flex; flex-direction:row; gap:24px; align-items:stretch}
.card--doc .doc-cover{flex:0 0 150px; margin:0; align-self:flex-start;
  border:1px solid var(--edge); border-radius:6px; overflow:hidden;
  box-shadow:0 12px 28px rgba(25,26,28,.12); background:#fff}
.card--doc .doc-cover img{display:block; width:100%; height:auto}
.card--doc .card--doc__body{display:flex; flex-direction:column; min-width:0; flex:1}
@media (max-width:860px){ .docgrid .card--doc,.card--doc{flex-direction:column} .card--doc .doc-cover{flex-basis:auto; width:150px} }

/* pointer lists stacked under a section title, beside the photograph */
.benefits-stack{margin-top:32px}
.benefits-stack .benefit{margin:0; padding:14px 0; border-top:1px solid var(--band-hair, var(--edge))}

/* steps as stacked rows in the text column of a photo split */
.steps-stack{margin-top:32px}
.steps-stack__row{display:flex; gap:16px; align-items:flex-start; padding:16px 0;
  border-top:1px solid var(--band-hair, var(--edge))}
.steps-stack__row .tile{flex:none}
.steps-stack__row b{display:block; font-size:15px; line-height:22px; margin:2px 0 4px}
.steps-stack__row p{margin:0; font-size:13.5px; line-height:20px; color:var(--muted)}
.section--dark .steps-stack__row p{color:var(--band-fg-2)}

/* ============================ Mobile optimization ============================ */
/* the language pill collapses to its globe on phones — the full pill pushed
   the nav row 20px past the viewport on every page */
@media (max-width:640px){
  .langer__b{width:38px; padding:0; justify-content:center; gap:0}
  .langer__b [data-lang-current],.langer__b .nav__caret{display:none}
}
/* CSS fallback for the scorecard scale — stepped so it works without JS.
   The JS fit() refines it to the exact column width when it runs. */
@media (max-width:720px){ .art{zoom:.8} }
@media (max-width:600px){ .art{zoom:.62} }
@media (max-width:460px){ .art{zoom:.49} }

/* Website 6.0: insights section anchors clear the sticky bar */
#featured,#latest{scroll-margin-top:104px}

/* ============================ Articles (blogs) ============================ */
.article-tile{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--edge);
  border-radius:12px; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.article-tile:hover{transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(25,26,28,.25)}
.article-tile__thumb{margin:0; aspect-ratio:16/9; overflow:hidden; background:#fff;
  border-bottom:1px solid var(--edge)}
.article-tile__thumb img{width:100%; height:100%; object-fit:cover; object-position:0 0}
.article-tile__body{display:flex; flex-direction:column; flex:1; padding:22px 24px 24px}
.article-tile__body .article__a{margin-top:auto; padding-top:14px}

/* the article page prose */
.prose{max-width:800px}
.prose p{font-size:16.5px; line-height:28px; margin:0 0 22px; color:var(--ink)}
.prose .eyebrow{margin:44px 0 10px}
.prose h2.h2{margin:0 0 18px}
.prose__lede{font-size:19px; line-height:31px}
.prose__strong{font-weight:600}
.prose__pull{font-size:23px; line-height:34px; letter-spacing:-.4px; font-weight:600;
  border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:34px 0 !important}
.exhibit{border:1px solid var(--edge); border-radius:12px; padding:26px 28px; margin:34px 0;
  background:var(--surface)}
.exhibit__l{margin:0 0 16px; font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--accent)}
.exhibit__src{margin:14px 0 0; font-size:12px; color:var(--muted)}
.extable{width:100%; border-collapse:collapse; font-size:14px; line-height:21px}
.extable th{text-align:left; font-size:11px; letter-spacing:.1em; color:var(--muted); font-weight:600;
  padding:0 16px 10px 0; border-bottom:1px solid var(--edge); text-transform:uppercase}
.extable td{padding:10px 16px 10px 0; border-bottom:1px solid var(--edge); vertical-align:top; width:50%}
.extable tr:last-child td{border-bottom:0}
.exhibit .chain .cost{padding-top:14px; margin-top:14px}
.exhibit .chain .cost:first-child{border-top:0; padding-top:0; margin-top:0}

/* .tscroll carries zero rules in the handover source -- confirmed by
   exhaustive search (no "tscroll" match anywhere in styles.css, base or
   media). The name implies horizontal-scroll behaviour the stylesheet
   never delivers; added here, scoped to this one class, per
   patterns/exhibit.php's own JUDGEMENT CALL 3. */
.tscroll{overflow-x:auto}
.tscroll:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* the end-of-scroll download panel */
.prose-dl{display:grid; grid-template-columns:150px minmax(0,1fr); gap:32px; align-items:center;
  max-width:800px; margin-top:56px; padding:32px; border:1px solid var(--edge); border-left:3px solid var(--accent);
  border-radius:12px; background:var(--surface)}
.prose-dl .doc-cover{margin:0; border:1px solid var(--edge); border-radius:6px; overflow:hidden;
  box-shadow:0 12px 28px rgba(25,26,28,.12); background:#fff}
.prose-dl .doc-cover img{display:block; width:100%; height:auto}
@media (max-width:640px){ .prose-dl{grid-template-columns:1fr} .prose-dl .doc-cover{width:150px} }

/* article figures — the PDF's photography carried into the web article */
.prose__fig{margin:34px 0; border-radius:12px; overflow:hidden; border:1px solid var(--edge)}
.prose__fig img{display:block; width:100%; height:auto}
.prose__fig figcaption{padding:12px 18px; font-size:13px; line-height:19px; color:var(--muted);
  background:var(--surface); border-top:1px solid var(--edge)}
#case-studies{scroll-margin-top:104px}

/* ============================ Spacing + fills, August round ============================ */
/* the WorkSystem photograph fills the full height of the 2×2 beside it —
   the fixed 6:5 window left it floating short of the cards */
.ws-grid .shot--tall{aspect-ratio:auto; height:100%; min-height:400px}
.ws-grid .shot--tall img{top:0; height:100%; object-fit:cover; object-position:50% 30%}

/* two plain-paper sections in a row stacked their full padding — the pair
   reads as one long gap. Halve the join; grounds that change colour keep theirs. */
.section:not(.section--dark):not(.section--recessed):not(.section--photo):not(.section--statement)
 + .section:not(.section--dark):not(.section--recessed):not(.section--photo):not(.section--statement){padding-top:48px}
#global-why,#global-models,#global-how,#global-value{scroll-margin-top:104px}
/* Pulse slider */
.qslider{margin-top:8px}
.qslider__val{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.qslider__val b{font-size:40px; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; color:var(--accent)}
.qslider__val span{font-size:14px; color:var(--muted)}
.qslider__in{width:100%; accent-color:var(--accent); height:40px; cursor:pointer}
.qslider__ends{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:-4px}
.qslider__go{margin-top:0}

/* Web 8.0: the slider begins unset — the handle sits at the floor, the
   read-out shows an em dash, and Continue unlocks on first movement. */
.qslider__val b.is-unset{color:var(--muted); font-weight:400}
.qslider:not(.is-set) .qslider__in{opacity:.55}
.qslider__go[disabled]{opacity:.4; pointer-events:none}
#pulseStart .checks--1col li{align-items:flex-start; padding:12px 0}
#pulseStart .snap--card{margin-top:40px; align-items:start}

/* ---- Pulse results: the action panel beside the scorecard ---- */
.resultkit{background:var(--band-fill); border:1px solid var(--band-hair); border-top:3px solid var(--accent);
  border-radius:12px; padding:32px}
.resultkit__l{margin:0 0 10px; font-size:11px; line-height:16px; font-weight:700; letter-spacing:.13em;
  color:var(--band-em)}
.resultkit__t{margin:0 0 8px; font-size:22px; line-height:30px; letter-spacing:-.3px; color:var(--band-fg)}
.resultkit__d{margin:0 0 24px; font-size:14px; line-height:22px; color:var(--band-fg-2)}
.resultkit__btn{width:100%; justify-content:center}
.resultkit__note{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--band-hair);
  font-size:13px; line-height:20px; color:var(--band-fg-3)}
.resultkit__more{margin:16px 0 0}
html[data-theme="light"] .resultkit{background:var(--surface); border-color:var(--line)}
/* ghost buttons on a dark band take band type, not ink */
.section--dark .btn--ghost{color:var(--band-fg); border-color:var(--band-hair-2, var(--band-hair))}
.section--dark .btn--ghost:hover{border-color:var(--band-fg)}
.section--dark .btn--ghost.btn--inert{color:var(--band-fg-2)}
.resultkit__sub{margin:12px 0 0; font-size:12.5px; line-height:19px; color:var(--band-fg-3)}

/* Web 8.0: a longer slider, and "I do not know" kept next to it */
.qslider__row{display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap}
.qslider__row .quiz__idk{margin:0}
@media (max-width:640px){ .qslider__row{gap:10px} .qslider__row .btn,.qslider__row .quiz__idk{flex:1 1 auto; justify-content:center} }

/* ============================ Insights library (Web 8.0) ============================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.inshero{max-width:760px}
.inshero .lede{margin-top:18px}
.inssearch{display:flex; gap:12px; margin-top:32px; max-width:620px}
.inssearch input{flex:1; height:52px; padding:0 18px; font:400 15px/1 inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; outline:none}
.inssearch input:focus{border-color:var(--accent)}
.inssearch .btn{flex:none}

/* featured: one large card, two stacked beside it */
.featgrid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px; margin-top:48px; align-items:start}
.featstack{display:grid; gap:28px}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column}
.feat__img{display:block; aspect-ratio:16/9; overflow:hidden; background:#fff; border-bottom:1px solid var(--line)}
.feat__img img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.feat--big .feat__img{aspect-ratio:16/10}
.feat__body{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1}
.feat__t{margin:8px 0 10px; font-size:20px; line-height:28px; letter-spacing:-.2px}
.feat--big .feat__t{font-size:26px; line-height:34px; letter-spacing:-.4px}
.feat__t a{color:inherit; text-decoration:none}
.feat__t a:hover{color:var(--accent)}
.feat__s{margin:0 0 14px; font-size:14.5px; line-height:23px; color:var(--muted)}
.feat .rcard__cta{margin-top:auto}
.feat:hover{box-shadow:0 16px 36px -20px rgba(25,26,28,.28)}

/* topic cards */
.topicgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:48px}
.topiccard{display:block; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:26px 28px; cursor:pointer; font:inherit; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.topiccard:hover{transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(25,26,28,.26)}
.topiccard.is-empty{cursor:default; opacity:.72}
.topiccard.is-empty:hover{transform:none; box-shadow:none}
.topiccard__t{margin:0 0 8px; font-size:17px; line-height:24px; font-weight:600}
.topiccard__d{margin:0 0 16px; font-size:14px; line-height:22px; color:var(--muted)}
.topiccard__a{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--accent)}
.topiccard.is-empty .topiccard__a{color:var(--muted); font-weight:400; font-style:italic}

/* all-insights header, filter bar, chips */
.allhead{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap}
.allcount{margin:0 0 6px; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.insbar{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-top:36px;
  padding:20px 22px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.insbar__field{flex:2 1 260px}
.insbar__field input{width:100%; height:44px; padding:0 14px; font:400 14.5px/1 inherit; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; outline:none}
.insbar__field input:focus{border-color:var(--accent)}
.insbar__sel{flex:1 1 150px; display:flex; flex-direction:column; gap:6px}
.insbar__sel label{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.insbar__sel select{height:44px; padding:0 12px; font:400 14px/1 inherit; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px}
.insbar__clear{flex:none; height:44px; background:none; border:0; color:var(--accent);
  font:600 13.5px/1 inherit; cursor:pointer; padding:0 4px; text-decoration:underline}
.inschips{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
/* Phase 6 Task 9, correction C-9. #insChips is toggled via the `hidden`
   attribute (app.js:576) and ships hidden. display:flex above beats the UA's
   [hidden]{display:none}, so without this the chip row stays visible while
   the script believes it hidden -- the same trap the .rcard/.rgrid comment
   below records, present in the agency source (styles.css:1937) and carried
   into this file unguarded until now. #insEmpty needs no equivalent:
   .insempty sets no display, so the UA rule wins unaided. */
.inschips[hidden]{display:none}
.inschip{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:var(--recessed); border:1px solid var(--line); font-size:12.5px; cursor:pointer}
.inschip b{font-weight:600}
.inschip::after{content:"×"; font-size:14px; color:var(--muted)}

/* the resource grid */
.rgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:36px}
.rcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.rcard:hover{transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(25,26,28,.26)}
.rcard__img{display:block; aspect-ratio:16/9; overflow:hidden; background:#fff; border-bottom:1px solid var(--line)}
.rcard__img img{width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.rcard__body{display:flex; flex-direction:column; flex:1; padding:20px 22px 22px}
.rcard__labels{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; font-size:10.5px;
  font-weight:700; letter-spacing:.1em}
.rcard__fmt{color:var(--accent)}
.rcard__topic{color:var(--muted)}
.rcard__t{margin:0 0 8px; font-size:16.5px; line-height:24px; font-weight:600}
.rcard__t a{color:inherit; text-decoration:none}
.rcard__t a:hover{color:var(--accent)}
.rcard__s{margin:0 0 14px; font-size:14px; line-height:22px; color:var(--muted)}
.rcard__meta{margin:0 0 14px; font-size:12.5px; color:var(--muted)}
.rcard__reg{display:block; margin-top:4px; font-size:11.5px; color:var(--accent)}
.rcard__cta{margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--accent)}
.insempty{text-align:center; padding:64px 24px; border:1px dashed var(--edge); border-radius:12px; margin-top:36px}
.insempty h3{margin:0 0 8px; font-size:20px; font-weight:600}
.insempty p{margin:0 0 20px; color:var(--muted)}

@media (max-width:1180px){
  .featgrid{grid-template-columns:1fr}
  .topicgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .topicgrid,.rgrid{grid-template-columns:1fr}
  .inssearch{flex-direction:column}
  /* A-2: in a COLUMN flex container flex:1's implicit flex-basis:0%
     applies to height, not width, and overrides the declared height:52px
     above -- measured 620x17 instead of 620x52. flex:none restores
     flex-basis:auto (the declared height), and touches nothing on the
     cross axis (width), which was already full-width via the container's
     default align-items:stretch. */
  .inssearch input{flex:none}
  .inssearch .btn{width:100%; justify-content:center}
  .insbar{flex-direction:column; align-items:stretch}
}

/* --- Phase 9 Task 5: WCAG 2.1 SC 1.4.10 Reflow at 320px ------------------
   Measured across all 25 published pages: every one reports
   document.documentElement.scrollWidth 360 against clientWidth 320.
   Isolated by subtree -- hiding #topbar drops it to 320; hiding main,
   footer or .mobilenav leaves it at 360. The offender is .nav__end at
   [132..360]: nowrap, 228.4px wide (nav__menu 92.4 + themer 70 + langer 38
   + 2x14 gap), starting after the logo and shell padding at 132. The
   header does not fit below ~361px.

   380px, not 360px: the threshold is 360.4, and a breakpoint sitting on
   the failure is a breakpoint that fails on the next font-metric change.

   ADDITIVE, NOT A REDESIGN. This range has no rule in this stylesheet at
   all -- the narrowest existing breakpoint is max-width:760px -- and
   #topbar's measured height is unchanged at 380/375/360/320 both with and
   without this block, so nothing a visitor above 380 sees changes. Two
   alternatives were measured and rejected: .nav__end{flex-wrap:wrap}
   alone does NOT clear 320 (scrollWidth stays 360, because .nav itself
   still refuses to give up width), and shrinking the menu button to an
   icon (e.g. font-size:0) clears it only by removing the visible word
   "Menu" from a sighted visitor. */
@media (max-width:380px){
  .nav.shell{flex-wrap:wrap; row-gap:8px}
  .nav__end{flex-wrap:wrap; justify-content:flex-end}
}
/* --- end Phase 9 Task 5 --- */

/* featured row: identical cards, slightly more presence than the grid */
.rgrid--feat{margin-top:48px}
.rgrid--feat .rcard__t{font-size:18.5px; line-height:26px}
/* the hidden attribute must always win — .rcard/.rgrid set display:flex/grid,
   which silently overrides the UA [hidden] rule and made filters look dead */
.rcard[hidden],.rgrid[hidden],.feat[hidden]{display:none}
/* mobile: the filter controls collapse behind one button, per the spec.
   Phase 6 Task 9: scoped so the collapse only applies where something can
   open it. `.is-open` is added by script alone, so with JavaScript off the
   source's own rules hid every select and left a toggle that does nothing --
   the filter was unreachable on mobile, which R-6.3 forbids. The submit
   button is covered by the same collapse; it is matched by [type="submit"]
   rather than a class, so no new class name enters the contract.

   Phase 6 Task 11 RETARGETED these from `html:not(.no-js)` to
   `html.has-insfilter`, and the difference is R-6.3's whole point.
   `.no-js` is removed by the inline head guard the moment JavaScript is
   ENABLED -- it says nothing about whether assets/js/insights.js ran. So
   with JS on and that one script missing (blocked, a CSP refusal, an
   optimiser, or simply removed the way R-6.3 requires it to be removable),
   `html:not(.no-js)` still matched: a visible toggle over hidden selects,
   with nothing in the page able to open them. `.has-insfilter` is set by
   insights.js itself, so removing the script degrades to the JS-off layout
   -- bar open, no toggle -- which is the correct fallback. Asserted both
   ways in tools/qa/insights-client-filter.spec.js's `mobile` block. */
.insbar__toggle{display:none}
@media (max-width:760px){
  html.has-insfilter .insbar__toggle{display:block; width:100%; margin-top:32px; height:48px;
    background:var(--surface); border:1px solid var(--line); border-radius:8px;
    font:600 14px/1 inherit; color:var(--ink); cursor:pointer}
  .insbar{margin-top:12px}
  html.has-insfilter .insbar:not(.is-open) .insbar__sel,
  html.has-insfilter .insbar:not(.is-open) .insbar__clear,
  html.has-insfilter .insbar:not(.is-open) [type="submit"]{display:none}
}

/* Insights hero on the photo band: search styled for the dark ground */
.phero .inshero .lede{color:var(--band-fg-2)}
.phero .inssearch input{background:rgba(255,255,255,.94); border-color:transparent; color:#191A1C}
html[data-theme="light"] .phero .inssearch input{background:var(--surface); border-color:var(--line); color:var(--ink)}

/* Task 4 (patterns/assure.php): the measured margin-top overrides (40px
   contact.html, 56px strengthsmultiplier.html; index-blueprint.html and
   skills-pathing.html carry none) ported as two opt-in modifier classes --
   the values are real, the inline-style mechanism is not. */
.assure--mt40{margin-top:40px}
.assure--mt56{margin-top:56px}
/* contact.html's own <a class="link" style="text-decoration:underline;
   color:var(--accent)"> inside assure__d overrides .link's own
   text-decoration:none/color:var(--ink) -- ported as a class-keyed rule
   scoped to where it is measured, never a literal inline style. */
.assure__d a.link{text-decoration:underline; color:var(--accent)}
/* Task 4 (patterns/faq.php): the wrapper's own literal
   style="margin-top:48px" (the only real instance, strengthsmultiplier.html)
   ported as an opt-in modifier class, matching .split-media--flush's own
   precedent -- the value is real, the inline-style mechanism is not. */
.faq--mt48{margin-top:48px}
/* patterns/faq.php: each <summary>'s question text is a real, client-
   editable core/paragraph nested inside a core/group(tagName:"summary") --
   the source itself has no wrapping <p> (raw text directly inside
   <summary>). core/paragraph's save() always emits <p>, so this neutralizes
   the browser's UA default paragraph margin the wrapping introduces inside
   a flex row (.faq summary is display:flex; align-items:baseline). Not a
   source value being ported -- purely a consequence of this pattern's own
   block mechanism, same category of fix as .quote__t p{margin:0}. */
.faq summary p{margin:0}

/* ===== SMB LANDING PORT ===== */
/* The SMB landing page at /global-capabilities/ (ruling P-9). Every rule
   below is a NEW selector. Nothing here redefines anything the theme
   already declares -- style.css is the live stylesheet of 24 pages ruling
   P-1 has frozen, so a redefinition to suit one page is an edit to all of
   them that cannot be recomposed. See the collision table in
   docs/plans/2026-09-01-smb-landing-port.md: 31 collisions, theme wins 31.

   NO LITERAL LIGHT-ON-DARK COLOUR. The source hard-codes solid white and
   semi-transparent white fills in four places the theme drives from
   --band-* tokens; ported literally, every dark band on this page would
   stop responding to html[data-theme="light"]. Everything below reads a
   token. */

/* the closing italic-accent line -- 6 instances, the only recurring new rule */
.smb-tail{margin:56px 0 0; padding-top:28px; border-top:1px solid var(--line);
  font-size:17px; line-height:26px; font-weight:600; color:var(--ink)}
.smb-tail em{font-style:normal; color:var(--accent)}
.section--dark .smb-tail{border-top-color:var(--band-hair); color:var(--band-fg)}
.section--dark .smb-tail em{color:var(--band-em)}

/* hero extras the .phero shape has no slot of its own for */
.smb-kicker{margin:0 0 16px; font-size:20px; line-height:28px; font-weight:600; color:var(--band-em)}
.smb-strip{display:flex; flex-wrap:wrap; gap:10px 0; align-items:center;
  margin:8px 0 0; font-size:13px; line-height:20px; white-space:nowrap; color:var(--band-fg-2)}
.smb-strip span{display:flex; align-items:center}
.smb-strip span + span::before{content:""; width:1px; height:13px;
  background:var(--band-hair); margin-inline:12px}
.smb-tag{margin:28px 0 0; font-size:15px; line-height:22px; font-style:italic; color:var(--band-fg-3)}

/* the value row -- four coloured 2px rules */
.smb-vals{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin-top:48px}
.smb-vals h3{margin:0 0 8px; font-size:17px; line-height:24px; font-weight:600; color:var(--band-fg)}
.smb-vals p{margin:0; font-size:15px; line-height:24px; color:var(--band-fg-2)}
.smb-vals__rule{height:2px; width:34px; margin-bottom:16px; background:var(--accent)}
.smb-vals > div:nth-child(1) .smb-vals__rule{background:var(--band-dot-3)}
.smb-vals > div:nth-child(2) .smb-vals__rule{background:var(--band-dot-1)}
.smb-vals > div:nth-child(3) .smb-vals__rule{background:var(--band-dot-2)}
.smb-vals > div:nth-child(4) .smb-vals__rule{background:var(--band-em)}

/* in-card progressive disclosure, 6 instances */
.smb-tasks{margin-top:16px; font-size:14px; line-height:22px}
.smb-tasks summary{cursor:pointer; color:var(--accent); font-weight:600;
  list-style:none; display:flex; align-items:center; gap:6px}
.smb-tasks summary::-webkit-details-marker{display:none}
.smb-tasks summary::after{content:"\25BE"; font-size:11px; transition:transform .2s var(--ease)}
.smb-tasks[open] summary::after{transform:rotate(180deg)}
.smb-tasks ul{margin:12px 0 0; padding-left:18px; color:var(--muted)}
.smb-tasks li{margin-bottom:5px}

/* the environment pills -- NO group opacity anywhere, see census 8.7 */
.smb-badge{display:inline-block; align-self:flex-start; margin-bottom:18px;
  padding:5px 12px; border-radius:99px;
  font-size:12px; line-height:16px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase}
.smb-badge--office{background:var(--accent); color:#fff}
.smb-badge--remote{background:var(--recessed); color:var(--ink)}

/* the hairline pillar grid */
.smb-pillars{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  margin-top:16px; background:var(--band-hair); border:1px solid var(--band-hair);
  border-radius:10px; overflow:hidden}
.smb-pillars > div{background:var(--band-bg); padding:30px 26px}
.smb-pillars h3{margin:0 0 8px; font-size:16px; line-height:24px; color:var(--band-fg)}
.smb-pillars p{margin:0; font-size:14px; line-height:22px; color:var(--band-fg-2)}

/* the overlapping initials disc on the three profile cards */
.smb-avatar{width:52px; height:52px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; position:relative;
  margin:-26px 0 14px; border:3px solid var(--surface);
  font-size:17px; line-height:1; font-weight:700; color:#fff; background:var(--accent)}
.smb-avatar--signal{background:var(--signal)}
.smb-avatar--ember{background:var(--ember)}
.smb-avatar--growth{background:var(--growth)}

/* the funnel */
.smb-funnel{max-width:660px; margin:44px auto 0}
.smb-funnel form{margin:0}
.smb-funnel .gate{background:transparent; border:0; border-top:0; padding:0}
.smb-funnel .gate label{color:var(--band-fg-2)}
.smb-funnel .gate input,.smb-funnel .gate select,.smb-funnel .gate textarea{
  width:100%; font:inherit; font-size:15px; padding:13px 14px; border-radius:6px;
  border:1px solid var(--band-hair); background:var(--band-fill); color:var(--band-fg)}
.smb-funnel .gate textarea{height:auto; min-height:84px}
.smb-funnel__meta{margin:0 0 22px; font-size:12px; line-height:16px;
  letter-spacing:1.7px; text-transform:uppercase; color:var(--band-fg-3)}
.smb-funnel__nav{display:flex; gap:12px; margin-top:22px}
.smb-funnel__nav .btn{flex:1; justify-content:center}
.smb-funnel__fine{margin-top:16px; font-size:13px; line-height:20px;
  text-align:center; color:var(--band-fg-3)}

.smb-paths{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px; max-width:760px; margin:40px auto 0}
.smb-path{text-align:left; cursor:pointer; font:inherit; color:var(--band-fg);
  border-radius:10px; padding:24px 26px; background:var(--band-fill);
  border:1px solid var(--band-hair);
  transition:border-color .2s var(--ease), background .2s var(--ease)}
.smb-path:hover{background:var(--band-fill-2)}
.smb-path[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.smb-path__t{display:block; margin-bottom:8px; font-size:18px; line-height:26px; font-weight:600}
.smb-path[aria-pressed="true"] .smb-path__t{color:var(--band-em)}
.smb-path__d{display:block; font-size:14px; line-height:21px; color:var(--band-fg-2)}

/* THE CONDITIONAL-FIELD WRAPPER, AND ITS OVERRIDE.
   The source's .field{display:flex} beats the UA stylesheet's
   [hidden]{display:none} regardless of specificity, which is why all four
   of its conditional fields are permanently on screen (census 3.1,
   measured at 322x77 client rects each). This is the exact trap
   docs/handover-source/VENDORING-NOTE.md records for .rcard/.rgrid/.dlgate.
   The attribute selector is 0,2,0 against the class's 0,1,0, so the
   override wins irrespective of source order. */
.smb-field{display:flex; flex-direction:column}
.smb-field[hidden]{display:none}

.smb-consent{display:flex; gap:10px; align-items:flex-start; margin-top:20px;
  font-size:14px; line-height:21px; color:var(--band-fg-2); cursor:pointer}
.smb-consent input{flex:none; width:16px; height:16px; margin-top:3px; accent-color:var(--accent)}

.smb-thanks{display:none; padding:48px 0; text-align:center}
.smb-thanks h3{margin:0 0 12px; font-size:24px; line-height:32px; color:var(--band-fg)}
.smb-thanks p{margin:0; font-size:16px; line-height:26px; color:var(--band-fg-2)}
.smb-funnel.is-sent form{display:none}
.smb-funnel.is-sent .smb-thanks{display:block}

.smb-accel{margin-top:32px; padding-top:28px; border-top:1px solid var(--band-hair)}
/* accel__t (no smb- prefix) is frozen into post 7429's post_content
   (inc/smb-funnel.php:348) — that markup cannot be recomposed, so this
   selector must stay as an additional selector here rather than be
   "tidied" to smb-accel__t alone. Confirmed free elsewhere in style.css
   and the rest of the theme (2026-09-01).
   Both forms are scoped `.smb-accel .smb-accel__t`/`.smb-accel .accel__t`
   (2 classes, specificity 0,2,0), not bare class selectors (0,1,0):
   `.smb-thanks p` two rules up (line 2252, font-size:16px) also matches
   this <p> -- it is a descendant of `.smb-thanks` too -- and a bare
   single-class selector loses that cascade, so font-size:16px would keep
   winning even once the class name itself resolves. Measured live: with
   the bare form the element still computed 16px; scoped, it computes 13px. */
.smb-accel .smb-accel__t, .smb-accel .accel__t{margin:0 0 16px; font-size:13px; line-height:18px;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--band-fg-3)}
.smb-accel .btn{margin:0 8px 10px 0}

/* the persistent mobile CTA. 860px, not the source's 640: style.css:530 is
   where .nav__end .btn{display:none} takes the header's own CTA away, and a
   sticky CTA earns its place exactly then. */
.smb-sticky{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--nav-bg); backdrop-filter:blur(12px); border-top:1px solid var(--nav-hair)}
.smb-sticky .btn{width:100%; justify-content:center}
.smb-sticky.is-off{display:none}
@media (max-width:860px){
  .smb-sticky{display:block}
  .smb-paths{grid-template-columns:1fr}
  .smb-funnel__nav{flex-direction:column}
  .smb-vals,.smb-pillars{grid-template-columns:1fr}
}
@media (max-width:1180px){
  .smb-vals,.smb-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the hero video. Sits in the theme's own .hero__media figure, under the
   same scrim and the same --imagery display switch as the still, so it
   inherits both theme modes for free. src is set by JS; with JS off this
   element loads nothing at all. */
.smb-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease)}
.smb-video.is-playing{opacity:1}
.hero__media.has-video img{opacity:0; transition:opacity 1.2s var(--ease)}
/* ===== end SMB LANDING PORT ===== */