/* Pulse Branding library - GENERATED from build/tokens.json by build/gen_library.py.

   One stylesheet for every page. A page carries no styles of its own.

   Source of truth: projects/pulse-branding-v5/docs/META-LAYER.md sections 1 and 2. */

/* ---- 0. Faces: self-hosted, never a CDN (META-LAYER 1.2) ---- */
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-normal-300-700.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-italic-300-700.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-normal-300-700.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/inter-italic-300-700.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap;}
@font-face{font-family:'Noto Serif Display';src:url('../fonts/notoserifdisplay-normal-300-500.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap;}
@font-face{font-family:'Noto Serif Display';src:url('../fonts/notoserifdisplay-italic-300-500.woff2') format('woff2');font-weight:300 500;font-style:italic;font-display:swap;}

/* ---- 1. Primitives: the frozen brand values (META-LAYER 1.1, 1.2, 1.3) ---- */
:root{
  --ink-navy:#0a1931;
  --deep-navy:#001d2a;
  --pulse-blue:#2163af;
  --pulse-cyan:#2ea8ae;
  --pulse-violet:#291c53;
  --violet-bright:#7865f0;
  --paper:#f0f4f4;
  --paper-2:#e8eeee;
  --ink:#111c29;
  --muted:#5b666c;
  --stone:#d7dfdf;
  --ice:#e1eef0;
  --ink-navy-rgb:10,25,49;
  --deep-navy-rgb:0,29,42;
  --pulse-blue-rgb:33,99,175;
  --pulse-cyan-rgb:46,168,174;
  --pulse-violet-rgb:41,28,83;
  --violet-bright-rgb:120,101,240;
  --paper-rgb:240,244,244;
  --ice-rgb:225,238,240;
  --line:rgba(10,25,49,.13);
  --line-dark:rgba(225,238,240,.14);
  --sp-0:4px;
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;
  --sp-8:128px;
  --radius:4px;
  --shell:1320px;
  --gutter:clamp(18px,3.2vw,56px);
  --sys-shell-inset:96px;
  --sys-shell-inset-laptop:64px;
  --sys-shell-inset-mobile:40px;
  --section-y:clamp(80px,8vw,128px);
  --section-y-tight:clamp(48px,6vw,64px);
  --content-gap:clamp(40px,6vw,96px);
  --grid-gap:clamp(18px,2vw,28px);
  --measure:62ch;
  --measure-max:72ch;
  --nav-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-micro:160ms;
  --dur-struct:300ms;
  --dur-atmos:1200ms;
  --z-base:0;
  --z-sticky:10;
  --z-nav:20;
  --z-menu:30;
  --z-overlay:40;
  --z-toast:50;
  --font-display:Montserrat,Inter,"Helvetica Neue",Arial,sans-serif;
  --font-body:Inter,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Noto Serif Display",Georgia,serif;
  --t-11:11.5px;
  --t-12:12px;
  --t-13:13px;
  --t-14:14px;
  --t-15:15px;
  --t-18:18px;
  --glow-angle:0deg;
  --action-glow:conic-gradient(from var(--glow-angle),transparent 0 18%,rgba(var(--pulse-cyan-rgb),.95) 24%,rgba(var(--pulse-blue-rgb),.78) 31%,rgba(var(--pulse-violet-rgb),.75) 38%,transparent 46% 100%);
}

/* ---- 2. Semantics: light (META-LAYER 1.12) ---- */
:root{
  --surface:#f0f4f4;
  --surface-recessed:#e8eeee;
  --surface-card:#e8eeee;
  --surface-dark:#0a1931;
  --text-primary:#111c29;
  --text-secondary:#5b666c;
  --text-on-dark:#f0f4f4;
  --text-on-dark-2:rgba(225,238,240,.78);
  --border-subtle:rgba(10,25,49,.13);
  --border-on-dark:rgba(225,238,240,.14);
  --action:#2163af;
  --action-hover:#1b539a;
  --focus-ring:#2ea8ae;
  --graphic:#2ea8ae;
  --graphic-2:#291c53;
  color-scheme:light;
}

/* ---- 2. Semantics: dark (META-LAYER 1.12) ---- */
html[data-theme="dark"]{
  --surface:#0a1931;
  --surface-recessed:#001d2a;
  --surface-card:rgba(225,238,240,.06);
  --surface-dark:#001d2a;
  --text-primary:#f0f4f4;
  --text-secondary:rgba(225,238,240,.72);
  --text-on-dark:#f0f4f4;
  --text-on-dark-2:rgba(225,238,240,.78);
  --border-subtle:rgba(225,238,240,.14);
  --border-on-dark:rgba(225,238,240,.14);
  --action:#2ea8ae;
  --action-hover:#38c2c6;
  --focus-ring:#2ea8ae;
  --graphic:#2ea8ae;
  --graphic-2:#7865f0;
  color-scheme:dark;
}

/* ---- 2. Semantics: dark (META-LAYER 1.12) ---- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])}{
  --surface:#0a1931;
  --surface-recessed:#001d2a;
  --surface-card:rgba(225,238,240,.06);
  --surface-dark:#001d2a;
  --text-primary:#f0f4f4;
  --text-secondary:rgba(225,238,240,.72);
  --text-on-dark:#f0f4f4;
  --text-on-dark-2:rgba(225,238,240,.78);
  --border-subtle:rgba(225,238,240,.14);
  --border-on-dark:rgba(225,238,240,.14);
  --action:#2ea8ae;
  --action-hover:#38c2c6;
  --focus-ring:#2ea8ae;
  --graphic:#2ea8ae;
  --graphic-2:#7865f0;
  color-scheme:dark;
}

/* ---- 3. Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--surface);color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--t-15);line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;display:block}
a{color:var(--action);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius)}
::selection{background:rgba(var(--pulse-cyan-rgb),.28)}
[hidden]{display:none !important}

/* ---- 4. Type roles (META-LAYER 1.2) ---- */
.display,.h1,.h2,.h3{font-family:var(--font-display);font-weight:500;margin:0}
.display{font-size:clamp(38px,4.6vw,74px);line-height:.98;letter-spacing:-.045em;
  text-wrap:balance}
.h1{font-size:clamp(34px,4vw,62px);line-height:1;letter-spacing:-.04em}
.h2{font-size:clamp(26px,2.6vw,42px);line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.h3{font-size:clamp(19px,1.7vw,27px);line-height:1.14;letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.7vw,25px);line-height:1.48;letter-spacing:-.015em;max-width:var(--measure-max)}
.copy{font-size:var(--t-15);line-height:1.7;text-wrap:pretty}
.eyebrow{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;color:var(--text-secondary)}
.link{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.10em;text-transform:uppercase}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;display:block;line-height:1.1;
  padding-bottom:.06em}
.muted{color:var(--text-secondary)}
.small{font-size:var(--t-13);line-height:1.6}

/* ---- 5. Shell and rhythm (META-LAYER 1.3) ---- */
.shell{width:min(var(--shell),calc(100% - var(--sys-shell-inset)));margin-inline:auto}
.shell-wide{width:min(1560px,calc(100% - var(--sys-shell-inset)));margin-inline:auto}
.section{padding-block:var(--section-y)}
.section-tight{padding-block:var(--section-y-tight)}
.stack>*+*{margin-top:var(--sp-3)}
.stack-sm>*+*{margin-top:var(--sp-2)}
.stack-lg>*+*{margin-top:var(--sp-5)}
.on-dark{background:var(--surface-dark);color:var(--text-on-dark)}
.on-dark .muted,.on-dark .eyebrow{color:var(--text-on-dark-2)}

/* ---- 6. Skip link and footer theme control ---- */
.skip{position:absolute;left:var(--sp-2);top:-64px;z-index:var(--z-menu);
  background:var(--surface-dark);color:var(--text-on-dark);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius);font-family:var(--font-display);font-size:var(--t-13)}
.skip:focus{top:var(--sp-2)}
.theme-toggle{min-height:44px;display:inline-flex;align-items:center;gap:var(--sp-1);
  color:var(--text-on-dark-2);font-family:var(--font-display);font-size:var(--t-12);
  letter-spacing:.08em;text-transform:uppercase}
.theme-toggle:hover{color:var(--text-on-dark)}

/* ---- 7. Navigation (META-LAYER 2.1) ----
   The masthead is the brand's own navy in both themes, with a lit top edge once the
   page moves: the proven v4 treatment. It keeps the wordmark legible over the hero. */
.nav{position:fixed;inset-inline:0;top:0;z-index:var(--z-nav);height:var(--nav-h);
  color:var(--text-on-dark);
  background:linear-gradient(to bottom,rgba(var(--deep-navy-rgb),.86),
    rgba(var(--deep-navy-rgb),.32) 62%,transparent);
  border-bottom:1px solid transparent;
  transition:background var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),
  box-shadow var(--dur-micro) var(--ease)}
.nav.scrolled{background:rgba(var(--ink-navy-rgb),.96);
  border-bottom-color:var(--border-on-dark);
  box-shadow:0 10px 30px rgba(var(--ink-navy-rgb),.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav-inner{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--sp-3)}
.nav-mark{display:flex;align-items:center;min-height:44px}
.nav-mark img{height:20px;width:auto;filter:brightness(0) invert(1)}
.nav-links{display:flex;gap:var(--sp-3);justify-content:center}
.nav-links a{font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.06em;
  color:var(--text-on-dark);display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--sp-1)}
.nav-links a:hover{text-decoration:none;color:var(--pulse-cyan)}
.nav-links a[aria-current="page"]{position:relative}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:var(--sp-1);right:var(--sp-1);bottom:6px;height:1px;background:var(--pulse-cyan)}
.nav-utility{display:flex;align-items:center;gap:var(--sp-2);justify-content:flex-end}
.nav-toggle{display:none;min-height:44px;min-width:44px;align-items:center;justify-content:center;
  border:1px solid var(--border-on-dark);border-radius:var(--radius);color:var(--text-on-dark)}
.nav-panel{display:none}

/* ---- 8. Actions (META-LAYER 2.2) ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--sp-1);min-height:46px;
  padding:0 var(--sp-3);border-radius:var(--radius);font-family:var(--font-display);
  font-size:var(--t-12);letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  border:1px solid transparent;transition:transform var(--dur-micro) var(--ease),
  background-color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease),
  color var(--dur-micro) var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--action);color:var(--paper);box-shadow:0 1px 0 rgba(var(--ink-navy-rgb),.18)}
.btn-primary:hover{background:var(--action-hover)}
.btn-primary::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--action-glow);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.9;pointer-events:none;
  animation:glow-sweep 6s linear infinite}
@keyframes glow-sweep{to{--glow-angle:360deg}}
@property --glow-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn-secondary{border-color:var(--border-subtle);color:var(--text-primary)}
.btn-secondary:hover{border-color:var(--action);color:var(--action)}
.btn-ghost{padding-inline:0;border:0;color:var(--text-primary);gap:var(--sp-1)}
.btn-ghost:hover{color:var(--action)}
.btn-ghost .ico{transition:transform var(--dur-micro) var(--ease)}
.btn-ghost:hover .ico{transform:translate(2px,-2px)}
.ico{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.on-dark .btn-secondary{border-color:var(--border-on-dark);color:var(--text-on-dark)}
.on-dark .btn-secondary:hover{border-color:var(--pulse-cyan);color:var(--pulse-cyan)}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}

/* ---- 9. Hero: the island runs behind the words (home only, META-LAYER 2.3) ---- */
.hero{position:relative;isolation:isolate;min-height:100dvh;display:grid;
  grid-template-rows:1fr auto;padding-top:var(--nav-h);background:var(--ink-navy);
  color:var(--text-on-dark);overflow:hidden}
.hero-atmos{position:absolute;inset:0;z-index:-1}
.hero-atmos .rb-island{width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 78% at 0% 100%,rgba(var(--ink-navy-rgb),.9),transparent 62%),
  linear-gradient(180deg,rgba(var(--ink-navy-rgb),.58) 0%,rgba(var(--ink-navy-rgb),.12) 42%,
  rgba(var(--ink-navy-rgb),.92) 100%)}
.hero-body{align-self:end;padding-bottom:clamp(48px,7vw,96px)}
.hero-label{margin-bottom:var(--sp-4)}
.hero h1{max-width:20ch}
.hero h1 .serif{font-size:.94em;line-height:1.04;margin-top:.08em;text-wrap:balance}
.hero .lead{margin-top:var(--sp-4);color:var(--text-on-dark-2);max-width:44ch;
  text-wrap:balance}
.hero .actions{margin-top:var(--sp-6)}
.hero .btn-secondary{border-color:var(--border-on-dark);color:var(--text-on-dark)}
.hero .btn-secondary:hover{border-color:var(--pulse-cyan);color:var(--pulse-cyan)}
.hero .btn-ghost{color:var(--text-on-dark)}
.hero .btn-ghost:hover{color:var(--pulse-cyan)}
/* Dark surfaces: a component that carries its own colour is re-scoped on dark, never left to inherit a light value. */
.hero .eyebrow,.hero .muted,.proof .eyebrow,.proof .muted{color:var(--text-on-dark-2)}
.hero .link,.proof .link,.on-dark .link{color:var(--text-on-dark)}
.hero .link:hover,.proof .link:hover,.on-dark .link:hover{color:var(--pulse-cyan)}
.on-dark .book-note a,.on-dark .copy a,.on-dark .small a{color:var(--pulse-cyan)}
.on-dark .muted{color:var(--text-on-dark-2)}

/* ---- 10. Proof marquee: real marks only, pause control, static without motion ---- */
.proof{border-block:1px solid var(--border-on-dark);background:var(--surface-dark)}
.proof-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding-block:var(--sp-3);border-bottom:1px solid var(--border-on-dark);flex-wrap:wrap}
.marquee{position:relative;overflow:hidden;padding-block:var(--sp-5)}
.marquee-track{display:flex;align-items:center;gap:clamp(48px,7vw,112px);width:max-content;
  animation:marquee-run 46s linear infinite}
.marquee[data-paused="true"] .marquee-track{animation-play-state:paused}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee-run{to{transform:translateX(-50%)}}
/* One ink for every mark on the dark band, as the reference set it: a mark's own colour is
   unreadable at this size on navy (Vodkiss' bottle wordmark measured under 3:1), so all of
   them are flattened to the band's white. Text marks already take that colour. */
.marquee img{height:clamp(20px,2vw,28px);width:auto;opacity:.86;
  filter:brightness(0) invert(1)}
.marquee .mark-text{font-family:var(--font-display);font-size:clamp(19px,2vw,26px);font-weight:500;
  letter-spacing:-.01em;color:var(--text-on-dark);white-space:nowrap}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);
  padding-block:var(--sp-5);border-top:1px solid var(--border-on-dark)}
.fact dt{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-on-dark-2);margin-bottom:var(--sp-1)}
.fact dd{font-family:var(--font-display);font-size:var(--t-18);line-height:1.3}
/* Contact is the only page whose fact value is a link. It keeps the dd's size and sentence
   case, so the address reads as it has to be typed, and it meets the 44px tap floor. */
.fact dd .link{display:inline-flex;align-items:center;min-height:44px;
  font-size:inherit;letter-spacing:0;text-transform:none}

/* ---- 11. Index rail: an index pins left, the open one right (What we do) ---- */
.index-rail{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.index-list{position:sticky;top:calc(var(--nav-h) + var(--sp-5))}
.index-item{width:100%;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);
  align-items:baseline;padding-block:var(--sp-3);border-top:1px solid var(--border-subtle);
  color:var(--text-secondary);transition:color var(--dur-micro) var(--ease)}
.index-item:last-child{border-bottom:1px solid var(--border-subtle)}
.index-item .num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em}
.index-item .name{font-family:var(--font-display);font-size:clamp(19px,1.7vw,27px);
  letter-spacing:-.02em;line-height:1.14;color:var(--text-primary)}
.index-item[aria-selected="true"]{color:var(--action)}
.index-item[aria-selected="true"] .name{color:var(--action)}
.index-item:hover .name{color:var(--action)}
.panel{display:grid;gap:var(--sp-4)}
.panel[hidden]{display:none}
.panel h3{margin-bottom:var(--sp-2)}
.panel .copy{max-width:var(--measure);color:var(--text-primary)}
.panel ul{display:grid;gap:var(--sp-1);max-width:var(--measure)}
.panel li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2);font-size:var(--t-15)}
.panel li .ico{margin-top:.42em;color:var(--action)}
.index-count{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary)}

/* ---- 12. Phase rail: five phases down the side (How the work runs) ---- */
.phases{display:grid;gap:0;max-width:min(100%,840px)}
.phase{border-top:1px solid var(--border-subtle)}
.phase:last-child{border-bottom:1px solid var(--border-subtle)}
.phase summary{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3);align-items:baseline;
  padding-block:var(--sp-3);cursor:pointer;min-height:44px;list-style:none}
.phase summary::-webkit-details-marker{display:none}
.phase .num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;color:var(--text-secondary)}
.phase .name{font-family:var(--font-display);font-size:clamp(19px,1.7vw,27px);letter-spacing:-.02em}
.phase .chev{transition:transform var(--dur-struct) var(--ease);color:var(--text-secondary)}
.phase[open] .chev{transform:rotate(180deg)}
.phase[open] .name{color:var(--action)}
.phase .body{padding-bottom:var(--sp-5);display:grid;gap:var(--sp-2);
  grid-template-columns:auto 1fr;column-gap:var(--sp-3)}
.phase .body p{grid-column:2;max-width:var(--measure);color:var(--text-secondary)}
.phase .body .out{grid-column:2;font-size:var(--t-13);color:var(--text-secondary)}
.phase .body .out strong{color:var(--text-primary);font-weight:500}

/* ---- 13. Work: every case as a row, then the pager ---- */
.case-rows{border-top:1px solid var(--border-subtle)}
.case-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--sp-3);
  align-items:baseline;padding-block:var(--sp-3);border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);transition:background-color var(--dur-micro) var(--ease)}
.case-row:hover{text-decoration:none;background:color-mix(in srgb,var(--action) 6%,transparent)}
.case-row .idx{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;color:var(--text-secondary)}
.case-row .client{font-family:var(--font-display);font-size:clamp(19px,1.7vw,27px);letter-spacing:-.02em}
.case-row .line{font-size:var(--t-13);color:var(--text-secondary);grid-column:2}
.case-row .meta{font-size:var(--t-12);color:var(--text-secondary);font-family:var(--font-display);
  letter-spacing:.06em;text-transform:uppercase;justify-self:end}
.case-row .ico{color:var(--action);align-self:center}
.case-row:hover .client{color:var(--action)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding-top:var(--sp-4);flex-wrap:wrap}

/* ---- 14. Questions: two columns of rows ---- */
.faq-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px)}
.faq{border-top:1px solid var(--border-subtle)}
.faq summary{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:baseline;
  padding-block:var(--sp-3);cursor:pointer;min-height:44px;list-style:none;
  font-family:var(--font-display);font-size:var(--t-18);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq[open] summary{color:var(--action)}
.faq .body{padding-bottom:var(--sp-3);color:var(--text-secondary);max-width:var(--measure)}
.faq .chev{color:var(--text-secondary);transition:transform var(--dur-struct) var(--ease)}
.faq[open] .chev{transform:rotate(180deg)}

/* ---- 15. Quote stage: centred quote, client marks under it ---- */
.quote-stage{display:grid;gap:var(--sp-5);justify-items:center;text-align:center}
.quote-stage blockquote{max-width:min(100%,44ch);font-family:var(--font-display);
  font-size:clamp(24px,2.6vw,40px);line-height:1.24;letter-spacing:-.03em;font-weight:400}
.quote-stage blockquote .serif{display:inline;font-size:1.04em}
.quote-attr{font-size:var(--t-13);color:var(--text-secondary)}
.quote-attr strong{display:block;color:var(--text-primary);font-family:var(--font-display);
  font-size:var(--t-15);font-weight:500;letter-spacing:-.01em}
.quote-marks{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);justify-content:center;align-items:center;
  padding-top:var(--sp-4);border-top:1px solid var(--border-subtle);width:100%}
.quote-marks button{display:flex;align-items:center;min-height:44px;padding-inline:var(--sp-1);
  font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);opacity:.72;transition:opacity var(--dur-micro) var(--ease),
  color var(--dur-micro) var(--ease)}
.quote-marks button:hover{opacity:1}
/* The chosen client is not signalled by colour alone: weight and a rule under the name
   carry the state too (decision ledger: the active name was not obvious enough). */
.quote-marks button[aria-pressed="true"]{opacity:1;color:var(--action);font-weight:600;
  box-shadow:inset 0 -2px 0 currentColor}

/* ---- 16. Conversion band: audit left, booking right ---- */
.convert{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,88px);align-items:start}
.book-frame{border:1px solid var(--border-on-dark);border-radius:var(--radius);
  aspect-ratio:4/3;display:grid;align-content:center;justify-items:start;gap:var(--sp-2);
  padding:var(--sp-5)}
.book-frame .copy{color:var(--text-on-dark-2)}

/* ---- 16b. Fields: one label above every control (META-LAYER 2.2) ----
   The embedded band and the contact page share this set; on dark the card surface, the
   hairline and the text all take their on-dark values rather than inheriting a light one. */
.book-form{display:grid;gap:var(--sp-2);max-width:var(--measure);width:100%}
/* A full-width submit is stretched by the grid, so its label has to be centred: the same
   .btn in the header reads centred because it is only as wide as its text. */
.book-form .btn{justify-content:center}
.field{display:grid;gap:var(--sp-1)}
.field-label{font-size:var(--t-13);color:var(--text-secondary)}
.on-dark .field-label,.book-frame .field-label{color:var(--text-on-dark-2)}
.input{min-height:46px;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius);
  border:1px solid var(--border-subtle);background:var(--surface-card);color:var(--text-primary);
  width:100%;font:inherit}
.input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;
  border-color:var(--focus-ring)}
textarea.input{min-height:calc(var(--sp-6) * 2);resize:vertical}
.on-dark .input,.book-frame .input{border-color:var(--border-on-dark);
  background:rgba(var(--ice-rgb),.06);color:var(--text-on-dark)}
/* The browser default placeholder sat at 3.3:1 on the dark card; .62 ice is 5.9:1 and
   still reads as a hint rather than a value. */
.on-dark .input::placeholder,.book-frame .input::placeholder{color:rgba(var(--ice-rgb),.62);opacity:1}
.book-note a{display:inline-flex;align-items:center;min-height:44px;
  /* axe: a link inside a paragraph must not rely on colour alone (1.5:1 against the note text) */
  text-decoration:underline;text-underline-offset:.18em}

/* ---- 16b.2 A field that fails says what is wrong and how to fix it (META-LAYER 1.7) ----
   Status is colour plus icon plus text and never colour alone, and a coloured border is not
   an error message: the sentence under the field carries the failure, the icon marks it, and
   the border only agrees with them. The summary at the top of the form is the landmark a
   failed submit moves focus to, with one link per field back to it. No colour is introduced:
   the invalid border is the strongest neutral the surface already carries, so nothing
   competes with the one accent on the page. Both intake forms sit on the dark card today;
   the light values are stated here so a form on paper does not have to invent them later. */
/* Not a box: the form already sits in a bordered card, and a second bordered or filled panel
   inside it read as a box in a box. This is the same ruled block the audit gate and the index
   use in the same card, so the summary is part of the form's own anatomy. Focus lands here
   on a failed submit, and the focus ring then draws the boundary that matters. */
.form-errors{display:grid;gap:var(--sp-1);width:100%;padding-top:var(--sp-2);
  border-top:1px solid var(--border-subtle)}
.form-errors__head{font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-primary)}
.form-errors a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-13);
  line-height:1.5;color:var(--action);text-decoration:underline;text-underline-offset:.18em}
.on-dark .form-errors,.book-frame .form-errors{border-top-color:var(--border-on-dark)}
.on-dark .form-errors__head,.book-frame .form-errors__head{color:var(--text-on-dark)}
.on-dark .form-errors a,.book-frame .form-errors a{color:var(--pulse-cyan)}
.field-error{display:flex;gap:var(--sp-1);align-items:flex-start;font-size:var(--t-12);
  line-height:1.5;color:var(--text-secondary);max-width:var(--measure)}
.field-error .ico{width:14px;height:14px;margin-top:.18em}
.on-dark .field-error,.book-frame .field-error{color:var(--text-on-dark)}
/* The marker sits on the field's leading edge rather than all the way round, because a box
   drawn round the control is the focus ring this site already uses. A left mark, an icon and
   a sentence cannot be confused with focus, and none of them carries the state on its own. */
.input[aria-invalid="true"]{box-shadow:inset 3px 0 0 var(--text-primary)}
.on-dark .input[aria-invalid="true"],.book-frame .input[aria-invalid="true"]{
  box-shadow:inset 3px 0 0 var(--ice)}
/* The frame is a 4:3 box sized for a form with nothing to say. Once a field has something to
   say the box grows rather than spilling over its own border. */
.book-frame:has(.form-errors:not([hidden])){aspect-ratio:auto}

/* ---- 16c. The free audit: index, axes, findings, gate (META-LAYER 2.2, 2.3) ----
   The intake writes its result back into the same dark frame. Every value is a token:
   no colour, space or size is invented here, and the bar width is the only calculation. */
.audit-out{display:grid;gap:var(--sp-3);width:100%;margin-top:var(--sp-2)}
.audit-index{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);
  align-items:baseline;padding-top:var(--sp-3);border-top:1px solid var(--border-on-dark)}
.audit-index b{display:block;color:var(--text-on-dark)}
.audit-index span{font-size:var(--t-13);line-height:1.6;color:var(--text-on-dark-2);
  max-width:var(--measure)}
.audit-axes{display:grid;gap:var(--sp-2)}
.audit-axis{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-2);
  align-items:center}
.audit-axis>span:first-child{grid-column:1;grid-row:1;font-family:var(--font-display);
  font-size:var(--t-12);letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-dark-2)}
.audit-axis>b{grid-column:2;grid-row:1;justify-self:end;font-family:var(--font-display);
  font-size:var(--t-13);color:var(--text-on-dark)}
.audit-bar{grid-column:1/-1;grid-row:2;display:block;height:var(--sp-1);border-radius:var(--radius);
  background:rgba(var(--ice-rgb),.16);overflow:hidden}
.audit-bar i{display:block;height:100%;width:calc(var(--v,0)*1%);background:var(--pulse-cyan);
  transition:width var(--dur-struct) var(--ease)}
.audit-out ul{display:grid;gap:var(--sp-1);padding-top:var(--sp-1)}
.audit-out li{font-size:var(--t-13);line-height:1.6;color:var(--text-on-dark-2);
  padding-left:var(--sp-3);position:relative;max-width:var(--measure)}
.audit-out li::before{content:"";position:absolute;left:0;top:.65em;width:var(--sp-1);height:1px;
  background:var(--pulse-cyan)}
.audit-finding{display:grid;gap:var(--sp-1);padding-block:var(--sp-2);
  border-top:1px solid var(--border-on-dark)}
.audit-finding strong{font-family:var(--font-display);font-size:var(--t-15);line-height:1.3;
  font-weight:500;color:var(--text-on-dark)}
.audit-finding p{font-size:var(--t-13);line-height:1.6;color:var(--text-on-dark-2);
  max-width:var(--measure)}
.audit-finding p.small{font-size:var(--t-12)}
.audit-note{font-size:var(--t-13);line-height:1.6;color:var(--text-on-dark-2);
  max-width:var(--measure)}
.audit-note a{color:var(--pulse-cyan);text-decoration:underline;text-underline-offset:.18em}
/* Generated strings can carry a long address or an unbroken word; wrap rather than overflow. */
.audit-out,.audit-index span,.audit-axis>span:first-child,.audit-finding p,.audit-note,
.audit-gate .copy{overflow-wrap:anywhere}
.audit-gate{display:grid;gap:var(--sp-2);width:100%;margin-top:var(--sp-2);
  padding-top:var(--sp-3);border-top:1px solid var(--border-on-dark)}
/* The shared .input rule already reaches select.input: min-height, border, radius and the
   on-dark surface are all inherited from that one class, so no second rule is added here. */

/* The contact page opens under the fixed nav; .section alone would start beneath it. */
.page-head{padding-top:calc(var(--nav-h) + var(--section-y-tight))}
/* The frame's 4:3 ratio holds the short booking form. A four-field message form takes its
   height from the fields instead, so the page-head frame does not crop or overlap. */
.page-head .book-frame{aspect-ratio:auto;align-content:start}

/* The facts row is styled for the dark proof band. On a light section the same component
   takes the light hairline and label colour, so it is not light text on paper. */
.section:not(.on-dark) .facts{border-top-color:var(--border-subtle)}
.section:not(.on-dark) .fact dt{color:var(--text-secondary)}

/* ---- 17. Footer: brand block and three columns ---- */
.footer{background:var(--surface-dark);color:var(--text-on-dark);border-top:1px solid var(--border-on-dark)}
.footer-grid{display:grid;grid-template-columns:5fr repeat(3,minmax(0,1fr));gap:clamp(32px,5vw,72px);
  padding-block:var(--sp-7)}
.footer h2{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-on-dark-2);margin-bottom:var(--sp-3);font-weight:600}
.footer li{margin-bottom:var(--sp-1)}
.footer a{color:var(--text-on-dark);display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-14)}
.footer a:hover{color:var(--pulse-cyan)}
/* Short labels ("Blog", "About") were a 30-39px wide hit area in the columns; the row height
   was already 44px, so only the width needed the floor. Scoped to the columns so the legal
   row's inline Privacy / Terms links are untouched. */
.footer li a{min-width:44px}
/* The one wordmark asset is drawn in #0a1930, so on the navy footer it measured 1.0:1 and
   read as an empty rectangle; the nav already inverts it, the footer did not. Same filter,
   so a single asset serves both grounds. */
.footer .mark img{height:26px;width:auto;margin-bottom:var(--sp-3);
  filter:brightness(0) invert(1)}
/* .muted is the light-surface secondary colour (2.97:1 on navy); the footer carries the on-dark one */
.footer .muted,.footer .copy{color:var(--text-on-dark-2)}
.footer .legal{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  padding-block:var(--sp-4);border-top:1px solid var(--border-on-dark);
  font-size:var(--t-13);color:var(--text-on-dark-2)}

/* ---- 18. Islands: the shared base rule (META-LAYER 8) ---- */
.rb-island{position:relative;overflow:hidden;isolation:isolate}

/* ---- 19. One scroll reveal per page, at most (META-LAYER 1.5) ---- */
.reveal>*{opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.reveal.is-in>*{opacity:1;transform:none}
.reveal>*:nth-child(1){transition-delay:0ms}
.reveal>*:nth-child(2){transition-delay:60ms}
.reveal>*:nth-child(3){transition-delay:120ms}
.reveal>*:nth-child(4){transition-delay:180ms}
.reveal>*:nth-child(5){transition-delay:240ms}
.reveal>*:nth-child(6){transition-delay:300ms}
.reveal>*:nth-child(7){transition-delay:360ms}
.reveal>*:nth-child(8){transition-delay:420ms}
.reveal>*:nth-child(9){transition-delay:480ms}
.reveal>*:nth-child(10){transition-delay:500ms}
.reveal>*:nth-child(11){transition-delay:500ms}

/* ---- 20. Section heading ---- */
.head{display:grid;gap:var(--sp-2);max-width:var(--measure-max);
  margin-bottom:clamp(32px,4vw,64px)}
.head .lead{color:var(--text-secondary)}
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,88px);align-items:end}

/* ---- 22. Comparison columns, check list, index on small screens ---- */
.compare{display:grid;gap:0}
.compare-head,.compare-row{display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:var(--sp-4);
  padding-block:var(--sp-3);border-top:1px solid var(--border-subtle);align-items:start}
.compare-row:last-child{border-bottom:1px solid var(--border-subtle)}
.compare-head{border-top:0}
.compare .label{font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.10em;
  text-transform:uppercase;color:var(--text-secondary)}
.compare-row .label{color:var(--text-primary);text-transform:none;letter-spacing:-.01em;
  font-size:var(--t-15)}
.check-list{display:grid;gap:var(--sp-2);max-width:var(--measure)}
.check-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2);font-size:var(--t-15)}
.check-list li span{text-wrap:pretty}
.check-list .ico{margin-top:.42em;color:var(--pulse-cyan)}
.on-dark .check-list .ico{color:var(--pulse-cyan)}

/* ---- 23. Case plates: a real client mark on a neutral surface (UPGRADE-PLAN 4) ----
   The plate is the only new surface. The mark keeps its own colour, so a white mark takes
   the neutral ink plate and a dark or coloured mark takes the neutral paper plate. No
   filter, no recolour, no generated image. The plate is 40 to 56 px in both directions. */
.case-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--grid-gap)}
.case-plates .case-card{display:flex;align-items:center;gap:var(--sp-3);
  min-height:calc(var(--sp-7) + var(--sp-2));padding-block:var(--sp-2);
  border-top:1px solid var(--border-subtle);color:var(--text-primary)}
.case-plates .case-card:hover{text-decoration:none;
  background:color-mix(in srgb,var(--action) 6%,transparent)}
.case-plates .case-plate{flex:none;display:grid;place-items:center;
  width:clamp(88px,8vw,124px);height:clamp(48px,4.4vw,58px);padding:var(--sp-1);
  border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line)}
.case-plates .case-plate img{width:100%;height:100%;object-fit:contain}
.case-plates .case-plate-ink{background:var(--ink);border-color:var(--ink)}
.case-plates .case-initial{font-family:var(--font-display);font-size:clamp(22px,2vw,30px);
  line-height:1;letter-spacing:.01em;color:var(--ink)}
.case-plates .case-body{display:grid;gap:var(--sp-0);min-width:0;flex:1}
.case-plates .case-client{font-family:var(--font-display);
  font-size:clamp(19px,1.7vw,27px);letter-spacing:-.02em}
.case-plates .copy{color:var(--text-secondary);text-wrap:pretty}
.case-plates .case-more{display:inline-flex;align-items:center;gap:var(--sp-1);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.10em;
  text-transform:uppercase;color:var(--action)}
.case-plates .case-card:hover .case-client{color:var(--action)}

/* ---- 24. Responsive (breakpoints 1180 / 900 / 620) ---- */
@media (max-width:1180px){
  .index-rail{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .footer-grid{grid-template-columns:4fr repeat(3,minmax(0,1fr));gap:var(--sp-5)}
}
@media (max-width:900px){
  .nav-links,.nav-utility .btn{display:none}
  .nav-inner{grid-template-columns:1fr auto}
  .nav-toggle{display:inline-flex}
  .nav-panel{display:block;position:fixed;inset:var(--nav-h) 0 auto 0;z-index:var(--z-menu);
    background:var(--surface);border-bottom:1px solid var(--border-subtle);padding:var(--sp-3) 0 var(--sp-4)}
  .nav-panel[aria-hidden="true"]{display:none}
  .nav-panel a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--border-subtle);
    font-family:var(--font-display);font-size:var(--t-18)}
  .index-rail,.split,.convert,.footer-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .index-rail .index-list{display:none}
  .faq-rows{grid-template-columns:1fr}
  .case-plates{grid-template-columns:1fr}
  .quote-marks{gap:var(--sp-4)}
  .case-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:var(--sp-0)}
  .case-row .line{grid-column:2}
  .case-row .meta{grid-column:2;justify-self:start}
}
@media (max-width:620px){
  :root{--section-y:64px;--section-y-tight:48px;--content-gap:28px;--grid-gap:14px;
    --sys-shell-inset:var(--sys-shell-inset-mobile)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .lead{max-width:100%}
  .hero-body{padding-bottom:var(--sp-6)}
  .footer-grid{padding-block:var(--sp-6)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;gap:var(--sp-5);justify-content:center}
  .reveal>*{opacity:1;transform:none}
}
@media print{
  .nav,.skip,.theme-toggle,.marquee{display:none}
  .hero{min-height:auto}
}

/* ---- 25. Discipline plate: one full-bleed atmospheric image (UPGRADE-PLAN 1, 4) ----
   A discipline page carries one plate, between the four-decision rows and the system
   ledger. It is decorative, so it carries an empty alt. The frame carries the box, not the
   image, because the wipe and the settle are two properties on two elements: a clip-path
   and a scale on the same element would scale the wipe edge with the picture.

   Motion: one beat, on the first intersection (threshold .15, once). The wipe layer runs
   from inset(0 100% 0 0) to inset(0) in 1100 ms while the image settles scale(1.06) to
   scale(1) in 1400 ms on the same curve, so the settle is still moving about 300 ms after
   the edge has landed: overlap, not a line-up. Transform and clip-path only. No opacity,
   no crossfade, no blur, no stagger, and nothing outside the plate moves.

   The clip sits on .plate-atmos-wipe and never on the frame, because the frame is the
   element the observer watches: measured 2026-10-28, an observed element clipped to zero
   width reports intersectionRatio 0 forever, so the observer never fires and the picture
   never appears. The frame therefore keeps its full box and only clips its child.

   The hidden state is scoped to html.has-motion, which site.js sets only when an
   IntersectionObserver exists and reduced motion is not requested. Without the script, or
   with reduced motion, the plate is simply present at its final state. */
.plate-atmos-frame{display:block;width:min(calc(100% - 2*var(--gutter)),var(--shell));
  margin-inline:auto;margin-block:var(--section-y-tight);height:clamp(220px,24vw,360px);
  border-radius:var(--radius);border:1px solid var(--border-subtle);overflow:hidden}
.plate-atmos-wipe{display:block;width:100%;height:100%}
.plate-atmos{display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 62%}
html.has-motion .plate-atmos-frame .plate-atmos-wipe{clip-path:inset(0 100% 0 0)}
html.has-motion .plate-atmos-frame .plate-atmos{transform:scale(1.06)}
html.has-motion .plate-atmos-frame.is-lit .plate-atmos-wipe{
  animation:plate-wipe 1100ms var(--ease) both}
html.has-motion .plate-atmos-frame.is-lit .plate-atmos{
  animation:plate-settle 1400ms var(--ease) forwards}
@keyframes plate-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes plate-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  html.has-motion .plate-atmos-frame .plate-atmos-wipe{clip-path:none}
  html.has-motion .plate-atmos-frame .plate-atmos{transform:none}
}

/* ---- 26. About hero: the one entrance on the site (route /about only) ----
   /about is the only page where the hero is a statement rather than an offer, so it is the
   only page allowed an entrance of its own. Every selector below is scoped under
   body.page-about, so no other page changes by a single declaration.

   The entrance is deterministic CSS: three headline lines wipe up inside their own
   overflow:hidden boxes (clip-path inset(100% 0 0 0) to inset(0), translateY(18px) to 0),
   then the hairline under the eyebrow draws out (scaleX(0) to 1, origin 0 50%), then the
   lead and the action row fade up 10px. --ease is cubic-bezier(.16,1,.3,1), the same curve
   the library uses for structural motion. Delays are 0 / 60 / 120 ms on the three lines,
   380 ms on the hairline, 520 ms on the lead and 600 ms on the actions, so the actions land
   at 980 ms and the hairline at 1100 ms: nothing is still moving after 1.1 s.

   Only clip-path, transform and opacity move. No height, width, top or left, so no element
   changes size or position and the layout cannot shift: each box is final from the first
   frame. The lines carry a bottom padding of .16em so the clip box contains the descenders;
   the following lines are pulled back by the same amount, which keeps the display leading. */
body.page-about .hero h1{max-width:min(100%,30ch)}
body.page-about .hero h1 .about-line{display:block;overflow:hidden}
body.page-about .hero h1 .about-line+.about-line{margin-top:-.16em}
body.page-about .hero h1 .about-line>span{display:block;padding-bottom:.16em;
  animation:about-line-in 560ms var(--ease) both}
body.page-about .hero h1 .about-line:nth-child(1)>span{animation-delay:0ms}
body.page-about .hero h1 .about-line:nth-child(2)>span{animation-delay:60ms}
body.page-about .hero h1 .about-line:nth-child(3)>span{animation-delay:120ms}
/* The hairline is the eyebrow label's own ::after: it sits in the label's box, so it holds
   its row from the first frame and no element is added to the page for it. */
body.page-about .hero-label::after{content:"";display:block;width:var(--sp-5);height:1px;
  margin-top:var(--sp-2);background:var(--pulse-cyan);transform-origin:0 50%;
  transform:scaleX(1);animation:about-rule-in 720ms var(--ease) 380ms both}
body.page-about .hero .lead{animation:about-fade-up 380ms var(--ease) 520ms both}
body.page-about .hero .actions{animation:about-fade-up 380ms var(--ease) 600ms both}

@keyframes about-line-in{
  from{clip-path:inset(100% 0 0 0);transform:translateY(18px)}
  to{clip-path:inset(0);transform:translateY(0)}}
@keyframes about-rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes about-fade-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}}

/* Reduced motion: every animated element starts, and stays, at its final state. */
@media (prefers-reduced-motion:reduce){
  body.page-about .hero h1 .about-line>span,
  body.page-about .hero .lead,
  body.page-about .hero .actions{animation:none;opacity:1;transform:none;clip-path:none}
  body.page-about .hero-label::after{animation:none;transform:scaleX(1)}
}

/* Work index, rich rows: one case per row, reading order role, client, three labelled
   lines, scope tags. The card is the same .case-card component; this modifier only changes
   how it composes, so nothing is duplicated and no page carries its own styles. */
.case-plates-rich{grid-template-columns:1fr;gap:0}
.case-plates-rich .case-card{align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-4) 0;border-top:1px solid var(--border-subtle)}
.case-plates-rich .case-card:last-child{border-bottom:1px solid var(--border-subtle)}
.case-plates-rich .case-body{gap:var(--sp-1)}
.case-plates-rich .case-role{font-size:var(--t-12);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-secondary)}
.case-plates-rich .case-line{color:var(--text-secondary);max-width:72ch;text-wrap:pretty}
.case-plates-rich .case-line strong{color:var(--text-primary);font-weight:600}
.case-plates-rich .case-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.case-plates-rich .case-tags li{font-size:var(--t-12);color:var(--text-secondary);
  border:1px solid var(--border-subtle);border-radius:999px;padding:2px 10px}
@media (max-width:640px){
  .case-plates-rich .case-card{flex-direction:column}
}

/* ---- 27. The sample report on /ai-audit (UPGRADE-PLAN item 5) ----
   The audit page described its own output in prose: the form on the right, four axis names in
   text, nothing that looked like the thing the reader would get. This is the output object
   itself, drawn with the same classes site.js writes back after a real run (audit-index,
   audit-axis, audit-bar, audit-finding), so the sample and the live result cannot drift into
   two different designs. It is marked sample, because no client site is on show.

   The four bar widths live here rather than in a style attribute on the element, because the
   page guards reject inline style. Each bar is selected by its data-axis, and the number it
   draws is published beside it in build/content/audit.py: move a score and its width together,
   in the two places named in that file. */
.sample-report{display:grid;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--radius);
  border:1px solid var(--border-on-dark);background:rgba(var(--ice-rgb),.04)}
.sample-report>.audit-index{padding-top:0;border-top:0}
.sample-report>.audit-index .display{font-size:clamp(46px,5vw,84px);letter-spacing:-.04em}
.sample-report .audit-bar i{transition:none}
.sample-report .audit-index small{font-size:.26em;font-weight:500;letter-spacing:0;
  color:var(--text-on-dark-2)}
/* The metric's own name sits on its own line above the caption, so the number is never an
   unlabelled score to a reader who is skimming. */
.sample-metric{display:block;font-family:var(--font-display);font-style:normal;
  font-size:var(--t-11);letter-spacing:.15em;text-transform:uppercase;
  color:var(--pulse-cyan);margin-bottom:var(--sp-1)}
/* The actionable line in a finding is the smallest change, so it carries the ink and a rule;
   the evidence above it stays secondary. */
.sample-report .audit-finding{gap:var(--sp-1)}
.sample-report .audit-finding p.small{color:var(--text-on-dark);
  padding-left:var(--sp-2);border-left:1px solid var(--pulse-cyan)}
.sample-flag{display:inline-flex;align-items:center;width:max-content;
  padding:var(--sp-0) var(--sp-1);border:1px solid var(--border-on-dark);
  border-radius:999px;font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.15em;text-transform:uppercase;color:var(--pulse-cyan)}
.sample-report ul{display:grid;gap:var(--sp-1)}
.sample-report ul li{position:relative;padding-left:var(--sp-3);font-size:var(--t-13);
  line-height:1.6;color:var(--text-on-dark-2);max-width:var(--measure)}
.sample-report ul li::before{content:"";position:absolute;left:0;top:.65em;width:var(--sp-1);
  height:1px;background:var(--pulse-cyan)}
.sample-report .audit-axis[data-axis="positioning"] .audit-bar i,
.sample-preview .audit-axis[data-axis="positioning"] .audit-bar i{--v:78}
.sample-report .audit-axis[data-axis="trust"] .audit-bar i,
.sample-preview .audit-axis[data-axis="trust"] .audit-bar i{--v:52}
.sample-report .audit-axis[data-axis="journey"] .audit-bar i,
.sample-preview .audit-axis[data-axis="journey"] .audit-bar i{--v:68}
.sample-report .audit-axis[data-axis="ai"] .audit-bar i,
.sample-preview .audit-axis[data-axis="ai"] .audit-bar i{--v:45}
/* On a phone the numeral and its caption cannot share a row without both becoming narrow:
   the index stacks, the number first. */
/* The index stacks on a phone for the sample and for a real result alike. Scoped to the
   sample only, it stacked there and stayed two-column where the audit actually lands, which is
   the drift the sample was built to prevent. */
@media (max-width:560px){
  .audit-index{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
}

/* A section head on a dark band: the light-surface secondary colour measured 2.98:1 on navy
   (route /ai-audit, 2026-10-28), so the on-dark tone wins inside .head as it does everywhere
   else on a dark ground. */
.on-dark .head .lead{color:var(--text-on-dark-2)}

/* The closing band: the action, then the one line under it. The shared .copy margin left the
   mailbox line 8px under the button, which read as cramped, so the gap is the section's own. */
body.page-audit #final .actions{margin-block:var(--sp-3) var(--sp-2)}

/* Three plain promises under the steps. The same box as the facts row, in prose. */
.reassure{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:var(--sp-3) var(--sp-5);margin-block:var(--sp-4);padding:var(--sp-3);
  border:1px solid var(--border-subtle);border-radius:var(--radius)}
.reassure strong{display:block;margin-bottom:var(--sp-1);font-family:var(--font-display);
  font-size:var(--t-13);letter-spacing:.01em}
.reassure p{margin:0;font-size:var(--t-13);line-height:1.6;color:var(--text-secondary)}

/* ---- 28. Her argument on the home page: why now, the problem underneath the brief, why
   Pulse (UPGRADE-PLAN 2, FB-24 to FB-29). The copy is hers, carried from the reference
   unchanged; every component under it is this library's, so the page gains no second
   visual language. No new colour: the quote is the serif role the hero already owns, and
   the recessed band is an existing surface. ---- */
.h2 .serif{font-size:.9em;line-height:1.06;margin-top:.06em;letter-spacing:-.02em}
.split-top{align-items:start}
.band-recessed{background:var(--surface-recessed);
  border-block:1px solid var(--border-subtle)}

/* One vertical block: the label, the quote read as a quote, then the three symptoms. The
   measure is short on purpose, so a 90-character quote breaks into a pull quote instead of
   a paragraph. */
.argument{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);
  align-items:start;margin-top:clamp(48px,6vw,88px);padding-top:var(--sp-5);
  border-top:1px solid var(--border-subtle)}
.pov-quote{display:grid;gap:var(--sp-3);margin:0}
.pov-quote blockquote{font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,2vw,30px);line-height:1.26;letter-spacing:-.012em;
  text-wrap:balance;max-width:26em;
  /* The opening mark hangs into the gutter, so the first letter lines up with the label
     and the rules beneath it rather than sitting one quote back. */
  text-indent:-.4em}
.pov-quote figcaption{font-size:var(--t-13);color:var(--text-secondary);line-height:1.5}
/* Name on its own line, role under it: the site's one attribution shape (.quote-attr). */
.pov-quote figcaption strong{display:block;font-family:var(--font-display);font-size:var(--t-15);
  font-weight:500;letter-spacing:-.01em;color:var(--text-primary);margin-bottom:var(--sp-0)}
/* A label that names the block has to be read before the block: 11 px tracked uppercase
   in secondary grey measured legible but read as dust at this size, so it takes the ink. */
.pov-label{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-primary)}
.pov-points{display:grid;margin-top:var(--sp-2);border-top:1px solid var(--border-subtle)}
.pov-points p{padding-block:var(--sp-3);border-bottom:1px solid var(--border-subtle);
  font-size:clamp(17px,1.4vw,21px);line-height:1.5;text-wrap:pretty}
/* The founder's line sits beside a rule rather than on the section's floor: it is quoted
   speech, not the section's headline (FB-28). */
.pov-quote-founder{border-left:2px solid var(--action);padding-left:var(--sp-4);
  max-width:52ch;margin-top:clamp(32px,4vw,56px)}

/* Three claims, each ending in the collection it belongs to (FB-29). */
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,72px);padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle)}
/* The claim column is a column: heading, proof, then its link on the row's floor, so the
   three links sit on one line however long the middle paragraph runs. */
.proof-grid article{display:flex;flex-direction:column;align-items:flex-start}
.proof-grid h3{font-size:var(--t-18);letter-spacing:-.01em;line-height:1.2}
.proof-grid p{color:var(--text-secondary);margin-top:var(--sp-2);max-width:34ch}
.proof-grid a{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:auto;
  padding-top:var(--sp-3);min-height:44px;color:var(--action);
  font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.10em;text-transform:uppercase}
.proof-grid a:hover{text-decoration:none;color:var(--action-hover)}
.proof-grid a .ico{width:14px;height:14px}
/* A quote that has a case page says so, under the attribution, at the tap floor. */
/* Its own line under the attribution, underlined so it reads as an action and not as more
   metadata, and at the 44 px tap floor. */
.quote-case{display:flex;justify-content:center;align-items:center;min-height:44px;
  margin-top:var(--sp-2);color:var(--action);font-size:var(--t-12);letter-spacing:.02em;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:900px){
  .proof-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .proof-grid p{max-width:none}
  .argument{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
}
/* ---- 29. The audit offer and the AI discipline (UPGRADE-PLAN 9 followed on, FB-32,
   FB-33, FB-36). Both blocks are made of parts the page already owns: the split, the
   ruled ledger, the display heading with a serif second line, the dark surface. Nothing
   new in colour, type or radius, so the page gains two arguments and no second visual
   language. */
/* The claim and her paragraph share the top; the three tests read as a ledger the band is
   measuring against, and the actions close the band on its own floor line. An earlier
   pass put the tests in the left column beside the actions and left a dead strip of
   background under the buttons, and a second pass pushed the actions to that floor, which
   opened a void between the paragraph and the buttons instead. */
.audit-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,56px);
  padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.audit-ledger li{display:grid;gap:var(--sp-1);align-content:start}
.audit-ledger strong{font-family:var(--font-display);font-weight:600;font-size:var(--t-18);
  letter-spacing:-.01em}
.audit-ledger span{font-size:var(--t-15);color:var(--text-secondary);line-height:1.6;
  max-width:34ch;text-wrap:pretty}
/* The band ends on its action line, under a hairline, so the recessed surface closes with
   a decision rather than with whitespace. */
.audit-actions{margin-top:clamp(32px,4vw,56px);padding-top:var(--sp-4);
  border-top:1px solid var(--border-subtle)}
/* The AI block is one argument in two columns: the claim on the left, the working on the
   right. The columns are centred against each other, because the heading is two words and
   the copy is a paragraph, and starting both at the same top edge leaves the left column
   visibly empty underneath. */
#ai-consulting .split{align-items:center}
/* The lead is three phrases and a verb: unbalanced it leaves "faster." alone on line two,
   which reads as a widow rather than a cadence. */
#ai-consulting .lead{text-wrap:balance}
.on-dark .actions{margin-top:var(--sp-2)}
@media (max-width:900px){
  .audit-ledger{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .audit-ledger span{max-width:none}
}

/* ---------------------------------------------------------------- 30. the short version
   The band between the hero and the marks: the claim left, the studio's method right.
   The right column is short by nature, so it ends on the same floor as the claim; left
   top-aligned it left 128 px of dead surface under itself (measured at 1440, 2026-10-29).
   The library sets every svg to display:block, so a link that carries its arrow has to be
   a flex row, otherwise the arrow drops to a line of its own (measured: a 35 px link). */
#short-version .split{align-items:end}
#short-version .link{display:inline-flex;align-items:center;gap:var(--sp-1)}
/* The answer line is a subtitle, not a second lead: at lead size (24.5 px against a
   37 px heading) it competed with the claim, so it takes the reference's own answer size
   and measure instead. */
#short-version .answer{font-size:var(--t-18);line-height:1.55;max-width:54ch}

/* ---------------------------------------------------------------- 31. about: the studio's
   own history (route /about, ported from the reference 2026-10-29).
   Three parts and no new visual language: the split, the ruled ledger, the recessed band,
   the 16:10 frame. The states ledger takes the audit ledger's metrics, so the site has one
   ruled three-column measure instead of two that nearly match. The covers are the projects'
   own published artwork at their native 16:10, so nothing is cropped to fit a cell. */
.states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,56px);
  padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.states li{display:grid;gap:var(--sp-1);align-content:start}
.states .num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  color:var(--text-secondary)}
.states strong{font-family:var(--font-display);font-weight:600;font-size:var(--t-18);
  letter-spacing:-.01em}
.states span:last-child{font-size:var(--t-15);color:var(--text-secondary);line-height:1.6;
  max-width:34ch;text-wrap:pretty}
/* The one-line version of the three states is a legend, not a second paragraph: at lead size
   it read as more of the intro (measured 2026-10-29). It takes the smaller body size, the
   secondary colour and the same 2 px rule the founder quote carries, so the band reads as one
   argument and one definition. */
#practice .answer{font-size:var(--t-15);line-height:1.7;color:var(--text-secondary);
  max-width:52ch;padding-left:var(--sp-3);border-left:2px solid var(--action)}
.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px) var(--grid-gap);margin-top:clamp(32px,4vw,56px)}
.evidence{display:grid;gap:var(--sp-2);color:var(--text-primary)}
.evidence:hover{text-decoration:none}
.evidence-frame{display:block;border:1px solid var(--border-subtle);border-radius:var(--radius);
  overflow:hidden;background:var(--surface-card)}
.evidence-frame img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform var(--dur-struct) var(--ease)}
.evidence:hover .evidence-frame img{transform:scale(1.02)}
.evidence-cap{display:grid;gap:var(--sp-0)}
.evidence-cap strong{font-family:var(--font-display);font-size:var(--t-15);font-weight:600;
  letter-spacing:-.01em}
.evidence-cap span{font-size:var(--t-13);color:var(--text-secondary);line-height:1.5}
.evidence:hover .evidence-cap strong{color:var(--action)}
.flow{display:grid;gap:0;margin-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--border-subtle)}
.flow li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,2fr);
  gap:var(--sp-2) var(--sp-4);align-items:baseline;padding-block:var(--sp-3);
  border-bottom:1px solid var(--border-subtle)}
.flow .num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  color:var(--text-secondary)}
.flow strong{font-family:var(--font-display);font-weight:500;font-size:var(--t-18);
  letter-spacing:-.01em}
.flow span:last-child{font-size:var(--t-15);color:var(--text-secondary);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){
  .evidence:hover .evidence-frame img{transform:none}
}
@media (max-width:900px){
  .states{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .states span:last-child{max-width:none}
  .evidence-grid{grid-template-columns:minmax(0,1fr)}
  .flow li{grid-template-columns:auto minmax(0,1fr)}
  .flow li span:last-child{grid-column:2}
}

/* ---------------------------------------------------------------- 32. /work: client proof
   and the studio's earlier work (ported from the reference 2026-10-29, FB-06, FB-34, FB-35,
   FB-11).
   The proof band is three rows, not three columns: at 1440 a third of the page gives each
   quote a 380 px measure, and the longest of the three is 330 characters, so it would run
   twenty lines deep beside a four-line neighbour. One quote per row, the quote in the serif
   role the site already owns and the attribution in the right column, keeps each one at a
   readable measure and puts every name on its own line.
   The archive is a cover grid, the same 16:10 frame the about page uses, so no cover is
   cropped to fit a cell. Nothing in this block is a link: this build has no case page for
   any of the fourteen, and a card that looks clickable and is not is a defect. */
.proof-wall{display:grid;margin-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--border-on-dark)}
.proof-wall figure{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(20px,3vw,56px);align-items:end;margin:0;
  padding-block:clamp(24px,2.6vw,40px);border-bottom:1px solid var(--border-on-dark)}
.proof-wall blockquote{font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.6vw,26px);line-height:1.38;letter-spacing:-.01em;
  max-width:34em;text-wrap:pretty}
.proof-attr{display:grid;gap:var(--sp-0);align-content:start;justify-items:start}
.proof-attr strong{font-family:var(--font-display);font-size:var(--t-15);font-weight:500;
  letter-spacing:-.01em;color:var(--text-on-dark)}
.proof-attr span{font-size:var(--t-13);line-height:1.5;color:var(--text-on-dark-2)}
.proof-case{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--sp-1);
  color:var(--pulse-cyan);font-size:var(--t-12);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.proof-case:hover{color:var(--ice)}

.archive-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.2vw,32px) clamp(14px,1.8vw,24px);margin-top:clamp(32px,4vw,56px);
  list-style:none;padding:0}
.archive-item{display:grid;gap:var(--sp-2);align-content:start;min-width:0}
.archive-frame{display:block;border:1px solid var(--border-subtle);border-radius:var(--radius);
  overflow:hidden;background:var(--surface-card)}
.archive-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover}
.archive-meta{display:grid;gap:var(--sp-0);min-width:0}
.archive-meta strong{font-family:var(--font-display);font-size:var(--t-13);font-weight:600;
  letter-spacing:-.01em;line-height:1.35}
.archive-meta .disc{margin-top:var(--sp-0);font-family:var(--font-display);
  font-size:var(--t-11);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary)}
.archive-meta .scope{font-size:var(--t-12);line-height:1.5;color:var(--text-secondary)}
@media (max-width:1080px){
  .archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .proof-wall figure{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
}
/* Two across on a phone, the density the fourteen want: one per row turns the archive into
   seven thousand pixels of scroll under the cases, which is a different page. */
@media (max-width:760px){
  .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(20px,4vw,26px) clamp(12px,3vw,16px)}
  .archive-meta strong{font-size:var(--t-13)}
  .archive-meta .scope{font-size:var(--t-12)}
}

/* ---------------------------------------------------------------- 33. a case page: the specimen
   /work/<slug> carries the case itself, ported from the reference's own page for the same
   project (2026-10-29). Every plate is the project's own artwork at its native ratio and is
   never cropped to fit a cell: a full-page interface screenshot forced into a 16:10 frame is a
   picture of nothing. The four palette values and the light specimen ground are the client's
   own published case colours, taken from the reference page, so they are declared here and
   nowhere else in the library. */
.case-open{display:grid;gap:var(--sp-2);max-width:min(100%,860px);margin:0 auto;
  justify-items:center}
.case-open-frame{display:block;width:100%;border:1px solid var(--border-subtle);
  border-radius:var(--radius);overflow:hidden;background:#F5F6F8}
.case-open-frame img{display:block;width:100%;height:auto}
.case-open figcaption{font-size:var(--t-13);color:var(--text-secondary);line-height:1.5}
.case-open + .facts{margin-top:clamp(32px,4vw,56px)}
/* The client's own address is one unbroken token: an inline-flex link will not wrap it and
   pushes the facts row past the viewport at 320, so it is inline-block and breaks anywhere. */
.facts dd a{display:inline-block;max-width:100%;overflow-wrap:anywhere;
  text-underline-offset:3px;padding-block:var(--sp-1)}

.case-story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.case-story-copy{display:grid;gap:clamp(24px,3vw,40px)}
.case-lines{display:grid;margin:0}
.case-lines > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--sp-2) var(--sp-4);align-items:baseline;padding-block:var(--sp-3);
  border-top:1px solid var(--border-subtle)}
.case-lines dt{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary)}
.case-lines dd{font-size:var(--t-15);line-height:1.7;text-wrap:pretty}
.case-outcome{border-bottom:1px solid var(--border-subtle)}

.case-plate{display:grid;gap:var(--sp-2);margin:0}
.case-plate-frame{display:block;border:1px solid var(--border-subtle);
  border-radius:var(--radius);overflow:hidden;background:var(--surface-card)}
.case-plate-frame img{display:block;width:100%;height:auto}
.case-plate figcaption{font-size:var(--t-13);color:var(--text-secondary);line-height:1.5}

.case-principles,.case-marks,.case-palette,.case-gallery{list-style:none;padding:0;margin:0}
.case-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.case-principles li{display:grid;gap:var(--sp-1);align-content:start}
.case-principles strong{font-family:var(--font-display);font-size:var(--t-18);font-weight:500;
  letter-spacing:-.01em}
.case-principles span{font-size:var(--t-15);line-height:1.65;color:var(--text-secondary);
  text-wrap:pretty}

.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);align-items:start}

/* One specimen sheet, not two cards: a 10:1 lockup and a square symbol in two equal cells
   leaves the symbol swimming in its own cell, and two pale cards of different weight read as
   two grades of mark. The sheet holds both marks at optical size, each with its own caption. */
.case-sheet{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  align-items:stretch;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vw,64px);
  background:#F5F6F8;border:1px solid color-mix(in srgb,var(--text-primary) 14%,transparent);
  border-radius:var(--radius)}
/* Two specimens are two boxes of one height, or the shorter one reads as the lesser mark. The
   figures stretch to the tallest cell and the artwork fills its own cell, so the grounds meet
   along one line at the top and one line above the captions. */
.case-sheet figure{display:grid;gap:var(--sp-3);justify-items:center;margin:0;
  grid-template-rows:minmax(0,1fr) auto}
.case-sheet img{width:auto;height:auto;max-width:100%;object-fit:contain}
.case-sheet .case-mark--wide img{max-height:clamp(62px,7vw,92px)}
.case-sheet .case-mark--symbol img{max-height:clamp(96px,11vw,148px)}
/* A small mark beside a full-width lockup floats like a placeholder. This modifier mounts the
   mark on the off-white ground it was drawn for, at the cell's own width, so both cells are
   specimens of equal weight and their captions sit on one line. */
.case-sheet .case-mark--plate{width:100%;align-self:stretch}
.case-sheet .case-mark--plate img{width:100%;height:100%;max-height:none;object-fit:contain;
  background:var(--case-mark-plate,#F5F5F0);border:1px solid color-mix(in srgb,var(--text-primary) 14%,transparent);
  padding:clamp(24px,4vw,56px);border-radius:calc(var(--radius) * .75)}
/* The sheet is always light, in either theme, so its caption takes the muted primitive and
   not the theme's secondary text, which would turn pale on the dark theme. */
.case-sheet figcaption{font-size:var(--t-12);line-height:1.5;color:#5b666c;
  letter-spacing:.02em;text-align:center;text-wrap:pretty}

.case-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,24px)}
.case-palette li{display:grid;gap:var(--sp-1);align-content:start}
/* A near-white chip on a near-white page is invisible with a subtle border, and the palette is
   the one band where the client's own ground has to be seen: the chip carries a drawn edge. */
.case-swatch{display:block;height:clamp(84px,8vw,124px);border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--text-primary) 18%,transparent)}
.case-palette strong{font-family:var(--font-display);font-size:var(--t-15);font-weight:500;
  letter-spacing:-.01em}
.case-palette span:last-child{font-size:var(--t-12);color:var(--text-secondary);
  letter-spacing:.02em}
.sw-scientific-blue{background:#144168}
.sw-aqua{background:#59A7BE}
.sw-orange{background:#EE8D00}
.sw-light-ground{background:#F5F6F8}
.sw-navy-base{background:#060D18}
.sw-navy-surface{background:#0C1828}
.sw-navy-raised{background:#142035}
.sw-navy-structural{background:#1E3550}
.sw-ocean-blue{background:#4AA8C8}
.sw-arctic-tint{background:#A8DCEF}
.sw-off-white{background:#F0F4F8}
/* NeoLabCare: a near-black foundation, one sand-gold accent and its three supporting steps. */
.sw-nlc-void{background:#0A0A0A}
.sw-nlc-charcoal{background:#1A1A1A}
.sw-nlc-gold{background:#C8B89A}
.sw-nlc-offblack{background:#111111}
.sw-nlc-mid{background:#242424}
.sw-nlc-goldlight{background:#E0D0B0}
.sw-nlc-offwhite{background:#F5F5F0}
/* The brand book's own rule about the chips, set under the band it governs. */
.case-palette-note{margin-top:clamp(20px,2.4vw,32px);max-width:74ch;
  color:var(--text-secondary);font-size:var(--t-13)}

/* A palette with steps in it is one family, not four chips and a remainder: the band lays out
   the count the project actually publishes, so no row ends on an empty cell. The counts only
   apply where there is room for them, because six columns at 320 px is a chip past the edge. */
@media (min-width:1081px){
.case-palette[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.case-palette[data-count="6"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.case-palette[data-count="7"]{grid-template-columns:repeat(7,minmax(0,1fr))}
.case-palette[data-count="8"]{grid-template-columns:repeat(8,minmax(0,1fr))}
}
/* One mark is one column. The 1.7fr / 1fr split exists to hold a lockup beside a symbol, and
   with a single plate the second cell reads as a missing asset. */
.case-sheet--single{grid-template-columns:minmax(0,1fr)}
/* A white wordmark on the site's light sheet is a blank rectangle, so the reverse lockup is
   shown the way a brand book mounts it: the mark in white on the project's own deep navy, the
   sheet's mat around it and the caption under it. The wide-mark height limit does not apply,
   or the panel's padding would eat the artwork. The ground is the project's, not the library's:
   a brand whose own dark is not navy sets it with one modifier class. */
.case-sheet .case-mark--reverse{width:100%;max-width:min(100%,880px);justify-self:center}
.case-sheet .case-mark--reverse img{width:100%;height:100%;max-height:none;
  object-fit:contain;background:var(--case-mark-ground,#060D18);
  padding:clamp(24px,4.6vw,64px);border-radius:calc(var(--radius) * .75)}
.case-sheet .case-mark--ground-ink{--case-mark-ground:#0A0A0A}

.case-close{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,5vw,80px);align-items:start}
/* The note and the way back read as one column with a gap, and neither the note nor the card is
   stretched to match the other: a card padded out to a neighbour's height leaves a dead floor. */
.case-notes{display:grid;gap:var(--sp-4);align-content:start;justify-items:start}
.case-notes .copy{max-width:52ch}
.case-notes a.link{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.case-next{display:grid;gap:var(--sp-1);align-content:start;padding:var(--sp-4);
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  background:var(--surface-card);min-height:44px}
.case-next:hover{text-decoration:none;border-color:var(--action)}
.case-next strong{font-family:var(--font-display);font-size:clamp(22px,2vw,31px);
  font-weight:500;letter-spacing:-.02em}
.case-next .copy{color:var(--text-secondary)}
.case-next:hover strong{color:var(--action)}

@media (max-width:1080px){
  .case-palette{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .case-story,.case-close{grid-template-columns:minmax(0,1fr)}
  .case-gallery{grid-template-columns:minmax(0,1fr)}
  .case-principles{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .case-lines > div{grid-template-columns:minmax(0,1fr);gap:var(--sp-0)}
}
@media (max-width:640px){
  .case-sheet{grid-template-columns:minmax(0,1fr);gap:var(--sp-5);
    padding:clamp(24px,6vw,40px)}
  /* Stacked, a square mounted mark becomes a screen of empty ground. The plate keeps its width
     and gives up its height. */
  .case-sheet .case-mark--plate img{height:clamp(180px,52vw,260px)}
  /* Seven steps on a phone: two across, and the last one takes the row rather than leaving a
     hole where an eighth chip would be. */
  .case-palette[data-count="7"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-palette[data-count="7"] li:last-child{grid-column:1 / -1}
}

/* ---------------------------------------------------------------- 34. a case page: the identity
   order (UPGRADE-PLAN 19). A case whose reference prints a mark sheet of three and the
   client's own type specimens gets both, between the mark and the palette, which is the order
   a brand book prints an identity in. The two faces are the client's own served files, so they
   are declared here and used by nothing else: a page that does not show them never fetches
   them. Grounds are the project's, never the library's. */
@font-face{font-family:CaseBaloo;src:url('../fonts/baloo2-gramlingo.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:CaseDM;src:url('../fonts/dmsans-gramlingo.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

/* A sheet holding a lockup and two symbols: the lockup takes the wide cell, the two symbols
   split the rest, and all three grounds meet on one line at the top and one above the captions. */
.case-sheet--trio{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
/* Three cells share one height, so the plate's padding has to leave the artwork room: at the
   pair's padding the mascots filled half their squares and read as stamps. */
.case-sheet--trio .case-mark--plate img{padding:clamp(16px,2.2vw,30px)}
/* A lockup is not a symbol: the reference mounts the wordmark on a shallow band, not a square,
   and stretched to a square plate it is a field of empty cream around one line of artwork. It
   keeps its own ratio, sits on the same top line as the two poses, and its caption sits under
   its own mount. */
.case-sheet--trio{grid-auto-rows:auto}
.case-sheet .case-mark--lockup{align-self:start}
.case-sheet .case-mark--lockup img{height:auto}
/* The ground the artwork was drawn for, where it is not the library's off-white. */
.case-sheet .case-mark--ground-cream{--case-mark-plate:#FFF5EE}
.case-sheet .case-mark--ground-green{--case-mark-plate:#8FD14F}

/* The story band without a plate: the reference's own shape for a case whose artwork lives in
   the covers below. The heading, then the goal, the solution and the outcome as three columns
   under one rule, so the band still answers three questions without an image to carry it. */
.case-story--solo{grid-template-columns:minmax(0,1fr)}
.case-story--solo .case-lines{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);border-top:1px solid var(--border-subtle);padding-top:var(--sp-4)}
.case-story--solo .case-lines > div{grid-template-columns:minmax(0,1fr);gap:var(--sp-1);
  border-top:0;padding-block:0}
.case-story--solo .case-outcome{border-bottom:0}

/* The client's own type, on the ground it was drawn for: the display face at the weight the
   product sets it, the body face beside it. Both cells carry the project's cream and ink in
   either theme, so the specimen is the brand's and not the library's. */
.case-type{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px)}
/* A cell's ground and ink belong to the project, so they are properties with the library's
   own cream as the default: a case whose type was drawn on paper sets three values. */
.case-type-cell{margin:0;display:grid;gap:var(--sp-2);align-content:start;
  padding:clamp(28px,4vw,56px);background:var(--case-type-ground,#FFF5EE);
  color:var(--case-type-ink,#2D1B10);
  border:1px solid color-mix(in srgb,var(--text-primary) 14%,transparent);
  border-radius:var(--radius)}
.case-type-family{font-size:var(--t-15);letter-spacing:.04em;color:var(--case-type-ink,#2D1B10);
  font-weight:500}
.case-type-spec{margin:0;font-size:clamp(28px,3.1vw,44px);line-height:1.12;
  letter-spacing:-.02em;color:var(--case-type-ink,#2D1B10);text-wrap:balance}
.case-type--baloo .case-type-spec{font-family:CaseBaloo,sans-serif;font-weight:800;
  letter-spacing:-.04em}
/* A body face is not shown at display size: the same sentence at a reading size, and the two
   sentences under it set in the face itself, which is the specimen a brand book prints. */
.case-type--dm .case-type-spec{font-family:CaseDM,sans-serif;font-weight:400;
  font-size:clamp(24px,2.4vw,32px);line-height:1.25;letter-spacing:0}
.case-type-role{font-size:var(--t-12);letter-spacing:.1em;text-transform:uppercase;
  color:var(--case-type-muted,#5a4636);font-weight:500;margin-top:calc(var(--sp-1) * -1)}
.case-type-alphabet{font-family:CaseBaloo,sans-serif;font-weight:800;
  font-size:clamp(38px,4.2vw,60px);line-height:1;letter-spacing:-.03em;
  /* The brand's orange is 2.15:1 on its own cream, which fails at any size. The reference's
     own stylesheet carries a darker step of the same hue for text on this ground. */
  color:#b54d10;margin-top:var(--sp-1)}
.case-type-note{font-size:var(--t-13);line-height:1.6;color:var(--case-type-note,#6b5544);max-width:34ch}
.case-type--dm .case-type-note{font-family:CaseDM,sans-serif;font-size:var(--t-18);
  line-height:1.7;color:#2D1B10;max-width:36ch;margin-top:var(--sp-1)}

/* The landing page's own four colours. */
.sw-gl-sunset{background:#FF8C42}
.sw-gl-cream{background:#FFF5EE}
.sw-gl-brown{background:#2D1B10}
.sw-gl-green{background:#8FD14F}

@media (max-width:1080px){
  .case-sheet--trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-sheet--trio > figure:first-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .case-story--solo .case-lines{grid-template-columns:minmax(0,1fr);gap:0}
  .case-story--solo .case-lines > div{padding-block:var(--sp-3)}
  .case-story--solo .case-lines > div + div{border-top:1px solid var(--border-subtle)}
  .case-type{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .case-sheet--trio{grid-template-columns:minmax(0,1fr)}
  .case-sheet--trio > figure:first-child{grid-column:auto}
  /* Stacked, a 3.6:1 lockup held to the square plates' height is a band of empty cream around
     one line of artwork. It keeps its width and takes its own ratio. */
  .case-sheet .case-mark--lockup img{height:auto}
}

/* ---------------------------------------------------------------- 35. a case page: three wide
   wordmarks and a full-width plate (UPGRADE-PLAN 20, Vodkiss). A brand whose reference prints
   three states of one wordmark needs a sheet that holds three wide marks, not the lockup-beside-
   two-symbols split; and a gallery whose last plate is a flat construction prints it full width
   instead of leaving half a row empty. Both are general: no project's colour is in either rule. */

/* Three equal cells, and a mount the height of a wordmark rather than a square it would swim
   in: each mark is about 3:1, so a square plate would be mostly ground. */
.case-sheet--marks3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
  gap:clamp(16px,2.2vw,32px)}
.case-sheet--marks3 figure{grid-template-rows:auto auto}
.case-sheet--marks3 .case-mark--plate img{height:clamp(104px,11vw,150px);
  padding:clamp(14px,1.8vw,26px)}

/* A case prints its material in groups, at the density the reference uses for each: four labels
   across, three worlds across, a single flat construction at full width. Each group is its own
   row block, so a group never pairs with the group after it. */
.case-group + .case-group{margin-top:clamp(32px,4vw,64px)}
.case-group .h3{margin:0 0 clamp(14px,1.6vw,22px);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-subtle)}
.case-gallery--cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-gallery--cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
.case-gallery--cols1{grid-template-columns:minmax(0,1fr)}
@media (max-width:1080px){
  /* Four portrait labels in four columns is a stamp; two across keeps each label readable. */
  .case-gallery--cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .case-gallery--cols3,.case-gallery--cols4{grid-template-columns:minmax(0,1fr)}
}

/* A mark's own ground, where the artwork was cut for a colour the library does not carry. */
.case-sheet .case-mark--ground-artwork{--case-mark-plate:#F1ECDB}

/* Vodkiss: a dark green anchor with floral gold, citrus green, a fruit pink and a quiet teal,
   on the pale ground the identity artwork was drawn for. */
.sw-vk-green{background:#464D48}
.sw-vk-gold{background:#C9B875}
.sw-vk-citrus{background:#5C6E3F}
.sw-vk-pink{background:#D8817A}
.sw-vk-teal{background:#708D8D}
.sw-vk-ground{background:#F1ECDB}

@media (max-width:620px){
  /* A case's facts carry lists, not words: "Visual identity · Bilingual packaging · Label design"
     in a half-width cell breaks mid-phrase and orphans the last word. The case's own facts stack
     full width, so each value keeps its phrase together. */
  .case-open + .facts{grid-template-columns:minmax(0,1fr)}
  /* Stacked, three equal cells become three full-width bands of ground, so the sheet goes one
     mark per row and each keeps its shallow mount. */
  .case-sheet--marks3{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------------------------- 36. a case page: bilingual
   type on paper (UPGRADE-PLAN 21, Ancient Science of China). The project's identity is Latin and
   Chinese type on warm paper, so its specimen band needs four faces, two of them CJK, and a
   ground that is the identity's own rather than the library's cream. The CJK files are the
   client's own served faces, split into glyph chunks; each chunk is declared with the range it
   carries, so a page fetches only the glyphs it sets. Nothing else on the site requests them. */
@font-face{font-family:CaseLibre;src:url('../fonts/libre-baskerville-asoc.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:CaseWork;src:url('../fonts/work-sans-asoc.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:CaseNotoSC;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseNotoSC-4e2d.woff2') format('woff2');unicode-range:u+4e2d}
@font-face{font-family:CaseNotoSC;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseNotoSC-4ee3.woff2') format('woff2');unicode-range:u+4ee3}
@font-face{font-family:CaseNotoSC;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseNotoSC-53e4.woff2') format('woff2');unicode-range:u+53e4}
@font-face{font-family:CaseNotoSC;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseNotoSC-56fd.woff2') format('woff2');unicode-range:u+56fd,u+5b66,u+79d1}
@font-face{font-family:CaseLongCang;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseLongCang-535c.woff2') format('woff2');unicode-range:u+535c}
@font-face{font-family:CaseLongCang;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseLongCang-533b.woff2') format('woff2');unicode-range:u+533b,u+547d}
@font-face{font-family:CaseLongCang;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseLongCang-5c71.woff2') format('woff2');unicode-range:u+5c71}
@font-face{font-family:CaseLongCang;font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/CaseLongCang-76f8.woff2') format('woff2');unicode-range:u+76f8}

/* The identity's paper and ink. The band keeps the project's ground in either theme, the way
   the mark sheet does, because a specimen shown on the site's surface is not the client's type
   on the client's ground. */
.case-type--paper{--case-type-ground:#F4EEE1;--case-type-ink:#3B1907;
  --case-type-muted:#6b3a22;--case-type-note:#5c4433}
/* Four faces, each at the size and spacing its own role sets: a display serif, an interface
   sans, a Chinese reading serif and a calligraphic display. */
.case-type--libre .case-type-spec{font-family:CaseLibre,Georgia,serif;font-weight:400;
  letter-spacing:-.01em}
.case-type--worksans .case-type-spec{font-family:CaseWork,system-ui,sans-serif;font-weight:400;
  font-size:clamp(24px,2.4vw,32px);line-height:1.3;letter-spacing:0}
.case-type--notosc .case-type-spec{font-family:CaseNotoSC,serif;font-weight:400;
  font-size:clamp(32px,3.6vw,50px);line-height:1.25;letter-spacing:.02em}
.case-type--longcang .case-type-spec{font-family:CaseLongCang,cursive;font-weight:400;
  font-size:clamp(38px,4.6vw,60px);line-height:1.15;letter-spacing:0}

/* The cinnabar mark was cut for the identity's paper. */
.case-sheet .case-mark--ground-paper{--case-mark-plate:#F4EEE1}
/* A seal mark alone on a sheet takes a mount, not the full width: a square of paper 1,200 px
   across is a page of nothing around one glyph. The sheet goes transparent and the mount, at its
   own size and centred, is the specimen. */
.case-sheet--single{grid-template-columns:minmax(0,1fr);padding:0;background:transparent;
  border:0}
.case-sheet--single .case-mark--plate{max-width:min(100%,420px);justify-self:center}
.case-sheet--single .case-mark--plate img{height:auto}

/* Ancient Science of China: warm paper, a warmer digital ground, brown ink and the seal's
   cinnabar, with bronze carrying the supporting tone. */
.sw-asoc-paper{background:#F4EEE1}
.sw-asoc-homepaper{background:#F6F1E8}
.sw-asoc-ink{background:#3B1907}
.sw-asoc-cinnabar{background:#B8452E}
.sw-asoc-bronze{background:#8B7355}

@media (max-width:640px){
  /* Two Chinese specimens at display size in a half-width cell break mid-word; stacked, each
     face keeps its own line and its own size. */
  .case-type--notosc .case-type-spec,.case-type--longcang .case-type-spec{
    font-size:clamp(28px,9vw,38px)}
}

/* ---------------------------------------------------------------- 33. Home: the work first
   (review home-2026-10-29, upgrade 1). The reference's pixel grid, rebuilt on this library's
   tokens rather than its shell: no 18 px radius, no hardcoded navy, no per-card offsets.
   Every cover and clip is 16:10 natively, so the card takes the media's own ratio and the
   image is contained at that ratio: nothing is cropped (FB-22, FB-23). A clip plays while
   its card is on screen and the poster stays underneath it, so the still is always the
   fallback (no JavaScript, no clip file, reduced motion). */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);margin-top:clamp(32px,4vw,56px)}
/* The card is the picture plus its plate, not a picture with the name written over the
   screenshot's own headline. The screen keeps the media's 16:10 ratio and clips the clip and
   the pixel canvas; the client and the line sit under it on the page surface. This is the
   reference's grid with the caption moved out of the image, because a cover that already
   says "One Cream. Does It All." must not be contradicted by a second copy of the same
   sentence printed on top of it. */
.pixel-card{position:relative;display:block;color:var(--text-primary)}
.pixel-screen{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  background:var(--surface-recessed);isolation:isolate}
.pixel-card:hover .pixel-screen{border-color:var(--border-strong)}
.pixel-card:hover{text-decoration:none}
.pixel-poster,.pixel-clip{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:top center;display:block}
/* The two ratios agree at every card size, so contain and cover would draw the same box;
   contain is stated because it is the rule that keeps a future cover uncropped (FB-22). */
.pixel-clip{opacity:0;z-index:2;pointer-events:none;transition:opacity 520ms var(--ease)}
.pixel-clip.on{opacity:1}
.pixel-card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;
  pointer-events:none;display:block}
.pixel-copy{padding-top:var(--sp-2)}
.pixel-copy h3{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,1.15vw,19px);line-height:1.25;letter-spacing:-.015em}
.pixel-copy p{margin:.25em 0 0;font-size:var(--t-13);line-height:1.5;
  color:var(--text-secondary);max-width:44ch}
.pixel-card:hover .pixel-copy h3{color:var(--action)}
.work-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-2);margin-top:clamp(24px,3vw,40px);padding-top:var(--sp-2);
  border-top:1px solid var(--border-subtle)}
/* Six cards at rest, the rest on one press. The state lives on the grid, so without the
   script every case is simply shown (see site.js). */
.work-grid[data-more="closed"] .pixel-card:nth-child(n+7){display:none}
.work-more .link{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;
  justify-self:start}
@media (max-width:700px){
  .work-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .pixel-clip{display:none}
}

/* ---------------------------------------------------------------- 34. Home: the services as
   Soul, Body, Brain (review upgrade 2, FB-27, FB-30, FB-31, FB-34). The reference's model,
   vertical: the introduction pinned left, the three services read down the right. No index
   number, no tab, nothing hidden behind a control, so all of it is readable at once and
   without JavaScript. The service name is the boldest thing in the row (FB-30). */
.services{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);
  align-items:start}
.services-intro{position:sticky;top:calc(var(--nav-h) + var(--sp-5))}
.services-intro .copy{color:var(--text-secondary);max-width:42ch}
.service-list{border-top:1px solid var(--border-subtle)}
.service-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3);
  padding-block:var(--sp-4);border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);align-items:start}
.service-row:hover{text-decoration:none}
.service-row h3{font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,2vw,32px);line-height:1.08;letter-spacing:-.025em}
.service-row .desc{font-size:var(--t-15);line-height:1.65;color:var(--text-secondary);
  max-width:52ch;margin-top:var(--sp-2);text-wrap:pretty}
.service-row .ico{color:var(--text-secondary);margin-top:.5em;
  transition:transform var(--dur-micro) var(--ease)}
.service-row:hover h3,.service-row:focus-visible h3{color:var(--action)}
.service-row:hover .ico{transform:translate(2px,-2px);color:var(--action)}
/* The fourth discipline is ongoing work across the three, so it closes the list as one
   ruled line rather than as a fourth model term. Its sentence is the page's own. */
.service-coda{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);align-items:baseline;
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border-subtle);
  font-size:var(--t-13);line-height:1.6;color:var(--text-secondary);max-width:40ch}
/* Without the index number the summary is the name and the chevron: two columns, chevron
   at the right edge of the row, so five names end on one line instead of five ragged ones. */
.phases-plain .phase summary{grid-template-columns:minmax(0,1fr) auto}
.service-coda .link{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;
  font-family:var(--font-display);font-weight:600;font-size:var(--t-15);
  color:var(--text-primary)}
.service-coda span{display:block;flex-basis:100%}
@media (max-width:900px){
  .services{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .services-intro{position:static}
}

/* ---------------------------------------------------------------- 35. Home: the argument read
   down the page (review upgrade 5, FB-24 to FB-28). The quote is a quote: figure, blockquote
   in the serif face, figcaption naming the speaker. One column, so the claim, the problem and
   the symptoms arrive in the order they are argued rather than side by side. */
.argument-vertical{display:grid;gap:clamp(28px,3.5vw,48px);
  margin-top:clamp(40px,5vw,72px);padding-top:var(--sp-5);
  border-top:1px solid var(--border-subtle);max-width:74ch}
.argument-vertical .pov-quote blockquote{max-width:22em}
.argument-vertical .pov-points{margin-top:0}
.argument-vertical .pov-points p{max-width:60ch}

/* ---------------------------------------------------------------- 36. Home: the top bar's
   Solutions menu (review upgrade 3, FB-07, FB-37). Revealed on hover, on focus, on click and
   dismissed with Escape. The panel is a panel, not a browser default: one surface, one
   hairline, the same 4 px radius as every other component. Names only, no descriptor lines
   (L62). It is progressive: with JavaScript off, the same links sit in the mobile panel. */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding-inline:var(--sp-1);font-family:var(--font-display);font-size:var(--t-12);
  letter-spacing:.06em;color:var(--text-on-dark)}
.nav-drop-btn .chev{width:12px;height:12px;transition:transform var(--dur-micro) var(--ease)}
.nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{color:var(--pulse-cyan)}
.nav-drop-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% - 4px);left:50%;translate:-50% 0;
  min-width:236px;padding:var(--sp-1) 0;z-index:var(--z-menu);
  background:var(--surface-dark);border:1px solid var(--border-on-dark);
  border-radius:var(--radius);box-shadow:0 24px 48px rgba(var(--ink-navy-rgb),.45)}
.nav-drop-menu[hidden]{display:none}
.nav-drop-menu a{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-3);
  font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.04em;
  color:var(--text-on-dark);white-space:nowrap}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{
  background:rgba(var(--ice-rgb),.08);color:var(--pulse-cyan);text-decoration:none}
/* The mobile control says what it does (FB-07): the reference's MENU, not a bare chevron. */
.nav-toggle{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;padding-inline:var(--sp-2);gap:var(--sp-1)}
.nav-panel .sub{display:flex;align-items:center;min-height:44px;padding-left:var(--sp-4);
  font-size:var(--t-15);color:var(--text-secondary);border-bottom:0}
.nav-panel .sub::before{content:"";width:10px;height:1px;margin-right:var(--sp-2);
  background:var(--border-strong)}
/* The panel is fixed; on a short landscape phone it must scroll rather than run off the
   screen, because that is where the only mobile route to the audit lives. */
@media (max-width:900px){.nav-panel{max-height:calc(100dvh - var(--nav-h));overflow-y:auto}}
.nav-panel .sub:hover{color:var(--pulse-cyan)}
/* Without JavaScript the panel is simply open on small screens: the menu is a list of links,
   and a list of links does not need a script to be readable. */
@media (max-width:900px){
  .nav-panel .sub{min-height:44px}
}

/* The pause control is a control: 44 px of target, per the library's own tap rule. */
.proof-head .link{display:inline-flex;align-items:center;min-height:44px;padding-inline:0}

/* The AI statement carries one claim and one line (FB-32, FB-35). With the repeated
   paragraph gone it is a divider, not a section, so it takes divider padding and sits on one
   optical line instead of leaving a tall navy void under two short blocks. */
#ai-consulting{padding-block:clamp(56px,6vw,88px)}
#ai-consulting .split{align-items:center}

/* ---------------------------------------------------------------- 37. Home: hero proportions
   (review upgrade 3). The reference set the first line at 52 px on a 1320 shell; v5 ran it
   to 74 px, which at 390 broke the heading into four lines and pushed both actions past the
   first screen. The home hero takes the reference's scale and, on small screens, its 88svh
   ceiling, so the propositions and both actions are in the first view. Scoped to the home
   page: every other route keeps the larger display it was built with. */
.page-home .hero h1{font-size:clamp(34px,3.7vw,56px);letter-spacing:-.04em;max-width:19ch}
.page-home .hero .lead{max-width:42ch}
@media (max-width:900px){
  .page-home .hero{min-height:88svh}
}
@media (max-width:620px){
  .page-home .hero{min-height:0;padding-top:calc(var(--nav-h) + var(--sp-4))}
  .page-home .hero-body{align-self:start;padding-block:var(--sp-4) var(--sp-5)}
  .page-home .hero h1{font-size:clamp(30px,8.4vw,38px)}
  .page-home .hero .lead{margin-top:var(--sp-3)}
  .page-home .hero .actions{margin-top:var(--sp-5);gap:var(--sp-1)}
}
/* The secondary action is the reference's plain link beside the filled button: two filled
   buttons at 390 read as one decision split in two. */
.page-home .hero .actions .link{display:inline-flex;align-items:center;gap:var(--sp-1);
  min-height:44px;color:var(--text-on-dark)}
.page-home .hero .actions .link:hover{color:var(--pulse-cyan)}

/* ---------------------------------------------------------------- 38. Contact: the form has
   to look like something you can write in (review upgrade 2, FB-43 companion). On the paper
   ground a 0.13 navy hairline field boundary measured 1.3:1, under the 3:1 a control outline
   needs, and the paper-on-paper fill made the fields read as empty space. Scoped to the
   contact route: the booking frames on other pages sit on navy, where the light values
   already clear the bar. */
.page-contact .input{border-color:rgba(var(--ink-navy-rgb),.42);background:var(--paper)}
.page-contact .input:hover{border-color:rgba(var(--ink-navy-rgb),.58)}
.page-contact .field-label{color:var(--text-primary)}
/* The two routes are one decision, so they sit under the hero without a full section gap. */
.page-contact #where-to-start{padding-block:var(--section-y-tight)}
/* .split ends its columns on one baseline, which is right for a section that closes with two
   paragraphs and wrong here: the form is taller, so the copy column sank to the bottom edge. */
.page-contact #project-form .split{align-items:start}
.page-contact #project-form{scroll-margin-top:calc(var(--nav-h) + var(--sp-3))}

/* ---------------------------------------------------------------- 39. /ai-audit: the intake
   is the offer (review 2026-10-30, items 1, 2, 5, 6, 7). Measured at 390 before this block:
   the headline ran to two display lines plus a serif line, the stack kept its 24 px gaps, and
   the first field sat below 700 px, so the audit itself began under a scroll. Everything here
   is scoped to body.page-audit so no other route moves by a single declaration. */

/* The frame is the actionable surface, not a panel inside the band: the hairline at .14 ice
   measured 1.3:1 against the navy, so the border, the fill and the fields all take values that
   separate. The field surface is recessed navy, not an ice wash, so text and border both read. */
body.page-audit .book-frame{border-color:rgba(var(--ice-rgb),.32);
  background:rgba(var(--ice-rgb),.05);padding:clamp(20px,2.6vw,40px);gap:var(--sp-2)}
body.page-audit .book-frame .h3{color:var(--text-on-dark)}
body.page-audit .book-frame .copy{max-width:46ch}
body.page-audit .book-form{gap:var(--sp-2);max-width:none}
body.page-audit .book-form .btn{min-height:52px;width:100%}
/* One disabled state for both buttons: the label already says what is happening, so the
   surface only has to stop inviting a second press. */
body.page-audit .book-form .btn[aria-disabled="true"],
body.page-audit .audit-gate .btn[aria-disabled="true"]{
  opacity:.72;cursor:progress;transform:none}
/* 48 px is the floor for a control a thumb has to hit; 50 leaves the border visible width. */
body.page-audit .input{min-height:50px;border-color:rgba(var(--ice-rgb),.34);
  background:rgba(var(--ink-navy-rgb),.55)}
body.page-audit .input:hover{border-color:rgba(var(--ice-rgb),.46)}
body.page-audit .input:focus-visible{outline:2px solid var(--pulse-cyan);outline-offset:2px;
  border-color:var(--pulse-cyan);background:rgba(var(--ink-navy-rgb),.74)}
body.page-audit textarea.input{min-height:calc(var(--sp-6) * 1.6)}
/* A hint under a label is not an error and must not look like one: same size as the error
   line, no icon, no marker. */
.field-hint{font-size:var(--t-12);line-height:1.5;color:var(--text-secondary)}
.on-dark .field-hint,.book-frame .field-hint{color:var(--text-on-dark-2)}
/* Desktop: the frame takes close to half the band instead of a narrow panel in a wide void,
   and it starts at the top of the band rather than floating to the middle of it. */
@media (min-width:901px){
  body.page-audit .page-head .convert{grid-template-columns:minmax(0,1fr) minmax(440px,.92fr)}
}
/* The nav action and the closing CTA both land on #run; the fixed masthead must not cover
   the frame it lands on. */
body.page-audit #run{scroll-margin-top:var(--nav-h)}

/* The phone view: the headline, the lead and the chips share the first screen with the start
   of the form. Type comes down, the stack tightens, the serif line gets a short measure so it
   breaks once or twice instead of four times. */
@media (max-width:767px){
  body.page-audit .page-head{padding-top:calc(var(--nav-h) + var(--sp-2))}
  body.page-audit .page-head .convert{gap:var(--sp-4)}
  body.page-audit .page-head .stack>*+*{margin-top:var(--sp-2)}
  body.page-audit .page-head h1.display{font-size:clamp(27px,7.4vw,34px);line-height:1.08;
    letter-spacing:-.028em;max-width:18ch}
  body.page-audit .page-head h1 .serif{font-size:.92em;line-height:1.1;margin-top:.06em;
    padding-bottom:0;max-width:16ch}
  body.page-audit .page-head .lead{font-size:var(--t-15);line-height:1.5;max-width:36ch}
  body.page-audit .page-head .check-list{gap:var(--sp-0)}
  body.page-audit .page-head .check-list li{font-size:var(--t-13);gap:var(--sp-1)}
  body.page-audit .book-frame{padding:var(--sp-3)}
}

/* ---- 39b. The weighting, drawn. Each bar is that axis's share of the one index out of 100,
   with the number published beside it and repeated in the meter's own label. On paper the
   component takes the light hairline and the light fill, because the audit's own values are
   on-dark and this block is not. ---- */
.weighting{display:grid;gap:var(--sp-1);margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--border-subtle);max-width:min(100%,680px)}
.weighting .audit-axis>span:first-child{color:var(--text-secondary)}
.weighting .audit-axis>b{color:var(--text-primary);font-size:var(--t-15)}
.weighting .audit-bar{background:rgba(var(--ink-navy-rgb),.12)}
.weighting .audit-bar i{background:var(--action)}
.weighting .audit-axis[data-axis="positioning"] .audit-bar i{--v:30}
.weighting .audit-axis[data-axis="trust"] .audit-bar i{--v:25}
.weighting .audit-axis[data-axis="journey"] .audit-bar i{--v:25}
.weighting .audit-axis[data-axis="ai"] .audit-bar i{--v:20}
.weighting-note{font-size:var(--t-13);line-height:1.6;color:var(--text-secondary);
  max-width:var(--measure);padding-top:var(--sp-1)}

/* ---- 39c. The compact sample, inside the frame and under the form: the thing the reader is
   about to get, before they type. Same audit-* classes the live result is written with, so the
   preview and the output cannot become two designs. Once the audit has run the preview has
   nothing left to add, and the result takes its place. ---- */
.sample-preview{display:grid;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid var(--border-on-dark)}
.sample-preview .audit-index{padding-top:0;border-top:0;gap:var(--sp-2)}
.sample-preview .audit-index b{font-family:var(--font-display);font-size:clamp(30px,3.4vw,42px);
  line-height:1;letter-spacing:-.03em}
.sample-preview .audit-index small{font-size:.3em;font-weight:500;letter-spacing:0;
  color:var(--text-on-dark-2)}
.sample-preview .audit-index span{font-size:var(--t-12)}
.sample-preview .audit-finding{padding-block:var(--sp-1) 0}
.sample-preview .audit-finding strong{font-size:var(--t-13)}
.sample-preview .audit-note{font-size:var(--t-12)}
/* Wide screens: the preview sits beside itself rather than in one tall column, so the frame
   does not run twice the height of the offer it belongs to. */
@media (min-width:901px){
  .sample-preview{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--sp-3);
    align-items:start}
  .sample-preview .sample-flag,.sample-preview .audit-finding,
  .sample-preview .audit-note{grid-column:1/-1}
}
/* The preview steps aside only once there is a result to read: an error line leaves the sample
   in place, because nothing has replaced it yet. */
.book-frame:has([data-audit-complete]) .sample-preview{display:none}

@media (prefers-reduced-motion:reduce){
  .audit-bar i{transition:none}
}

/* ---- 36. /solutions (review 2026-10-30): the page opens sooner, prints its four
   disciplines, reads its five phases as one progression and shows the work as work.
   Scoped to body.page-solutions: no other route changes. ---- */
/* The reference's own 100dvh hero leaves the argument well below the fold; the hub is an
   index, so the words start where the eye lands and both actions stay in the first screen. */
body.page-solutions .hero{min-height:auto;
  padding-top:calc(var(--nav-h) + clamp(18px,3.2vw,40px))}
body.page-solutions .hero-body{align-self:start;
  padding-bottom:clamp(36px,4.6vw,68px)}
body.page-solutions .hero h1{max-width:24ch;font-size:clamp(33px,4.3vw,66px)}
body.page-solutions .hero .lead{margin-top:var(--sp-3);max-width:52ch}
body.page-solutions .hero .actions{margin-top:var(--sp-4)}
/* The ridge island needs a ground to read against. This gradient is that ground, and it is
   the whole atmosphere where the script, the canvas or the motion is not available. */
body.page-solutions .hero-atmos{background:
  radial-gradient(62% 56% at 16% 14%,rgba(46,168,174,.34),transparent 68%),
  radial-gradient(58% 62% at 82% 22%,rgba(33,99,175,.38),transparent 70%),
  radial-gradient(48% 48% at 64% 92%,rgba(41,28,83,.62),transparent 74%),
  var(--ink-navy)}
body.page-solutions .hero-atmos .rb-island{opacity:.9}
/* Four disciplines, printed rather than tabbed. Four equal boxes with a hairline between
   them, each one closed by its own page link, so a reader compares without interacting. */
.sol-disc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;margin-top:clamp(28px,3.4vw,44px);background:var(--border-subtle);
  border-block:1px solid var(--border-subtle)}
.sol-disc>article{background:var(--surface);
  padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:var(--sp-2)}
.sol-disc .num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.15em;
  color:var(--text-secondary);margin:0}
.sol-disc h3{margin:0}
.sol-disc .copy{color:var(--text-secondary);max-width:44ch;margin:0}
.sol-cap{list-style:none;margin:var(--sp-1) 0 var(--sp-2);padding:0;display:grid;
  gap:.45em;font-size:var(--t-13);line-height:1.5;color:var(--text-secondary)}
.sol-cap li{position:relative;padding-left:14px}
.sol-cap li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;
  background:var(--action)}
.sol-disc .link{margin-top:auto;display:inline-flex;align-items:center;gap:var(--sp-1);
  min-height:44px;font-family:var(--font-display);font-weight:600;font-size:var(--t-15);
  color:var(--text-primary)}
.sol-disc .link:hover,.sol-disc .link:focus-visible{color:var(--action);
  text-decoration:none}
@media (max-width:900px){.sol-disc{grid-template-columns:minmax(0,1fr)}}
/* Five phases as one progression: number column, name, sentence, outcome, ruled off. */
.phases-visible{display:grid;margin-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--border-subtle)}
.phase-step{display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(14px,2vw,28px);
  padding-block:clamp(18px,2.2vw,26px);border-bottom:1px solid var(--border-subtle)}
.phase-step .num{font-family:var(--font-display);font-size:var(--t-13);letter-spacing:.12em;
  color:var(--action);margin:0;padding-top:.35em}
.phase-step h3{margin:0;font-size:clamp(19px,1.6vw,25px)}
.phase-step p{margin:.5em 0 0;font-size:var(--t-15);line-height:1.65;
  color:var(--text-secondary);max-width:62ch}
.phase-step .out{margin-top:.55em;color:var(--text-primary);font-size:var(--t-13)}
.phase-step .out strong{font-weight:600;color:var(--text-secondary);text-transform:uppercase;
  font-size:var(--t-11);letter-spacing:.14em;margin-right:.5em}
@media (max-width:640px){
  .phase-step{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .phase-step .num{padding-top:0}
}
/* Three cases at the work page's own cover ratio, side by side on a wide screen. */
.sol-work{grid-template-columns:repeat(3,minmax(0,1fr))}
.sol-work .pixel-poster{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.sol-work{grid-template-columns:minmax(0,1fr)}}
/* Conversion: the audit is the one primary action. The booking request keeps its place but
   gives up the filled button and the panel fill, so two offers are not drawn at one weight. */
body.page-solutions .book-frame{background:transparent;
  border-color:rgba(var(--ink-navy-rgb),.6)}
body.page-solutions .book-frame .btn-primary{background:transparent;
  border:1px solid var(--border-on-dark);color:var(--text-on-dark)}
body.page-solutions .book-frame .btn-primary:hover{border-color:var(--pulse-cyan);
  color:var(--pulse-cyan);background:transparent}
@media (prefers-reduced-motion:reduce){
  body.page-solutions .hero-atmos .rb-island{display:none}
}

/* ============================================================ /solutions/ai-automation
   Review 2026-10-30: the page is the supervised-action demonstration, not a services
   template. Hero proposition left and console right; then the reliability problem, the
   chain of constraints, three inspectable scenarios, four workflow sequences, Pulse's own
   systems, machine readability, and the AI-specific close.

   Colour: the contract carries six values and no orange, so the reference's two chip
   treatments are rebuilt from it. A system action is filled teal (--pulse-cyan, the
   graphic colour); a human decision is an outlined, dashed violet (--pulse-violet). Dash
   plus outline plus the legend means the distinction never rests on hue alone. */

/* Hero: the console is the defining asset, so the band is a two-column screen, not a
   centred statement with empty air above it (the review's 390px complaint). */
body.page-ai .hero{min-height:0;padding-block:calc(var(--nav-h) + var(--sp-5)) var(--sp-7);
  align-items:start}
body.page-ai .hero::after{background:radial-gradient(90% 70% at 82% 18%,
  rgba(var(--pulse-cyan-rgb),.16),transparent 64%),
  linear-gradient(180deg,rgba(var(--ink-navy-rgb),.2) 0%,rgba(var(--ink-navy-rgb),.72) 100%)}
body.page-ai .hero-body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,4.4vw,68px);align-items:center;padding-bottom:0}
body.page-ai .hero h1{max-width:100%;font-size:clamp(36px,4.1vw,58px);letter-spacing:-.045em}
/* The second line carries the restraint half of the proposition, so it takes the one accent
   this band has: the cyan the console signals with. */
body.page-ai .hero h1 .ai-accent{display:block;color:var(--pulse-cyan);font-size:.86em}
/* The second sentence is the lockup's other half, so on a wide screen it holds one line
   rather than orphaning two words. Below the breakpoint it wraps normally. */
@media (min-width:961px){body.page-ai .hero h1 .ai-accent{white-space:nowrap}}
body.page-ai .hero .lead{max-width:46ch}
body.page-ai .hero .actions{margin-top:var(--sp-5)}
@media (max-width:960px){
  body.page-ai .hero-body{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  body.page-ai .hero{padding-block:calc(var(--nav-h) + var(--sp-3)) var(--sp-6)}
  body.page-ai .hero h1{font-size:clamp(32px,8.4vw,44px)}
  body.page-ai .hero .actions{margin-top:var(--sp-4)}
}

/* ---- the console: one enquiry, read, proposed, released by a person ---- */
.ai-console{border:1px solid var(--border-on-dark);border-radius:var(--radius);
  background:rgba(var(--deep-navy-rgb),.72);overflow:hidden;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ai-bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-on-dark)}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--pulse-cyan);
  box-shadow:0 0 0 3px rgba(var(--pulse-cyan-rgb),.18);flex:none}
.ai-bar-title{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-on-dark-2)}
.ai-bar-state{margin-left:auto;font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.12em;text-transform:uppercase;color:var(--pulse-cyan)}
.ai-console-body{padding:var(--sp-3)}
.ai-k{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-on-dark-2)}
.ai-event{margin-top:var(--sp-1);font-size:var(--t-15);line-height:1.55;
  color:var(--text-on-dark);max-width:38ch}
.ai-console-row{margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid var(--border-on-dark)}
.ai-acts{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.ai-acts span{border:1px solid rgba(var(--ice-rgb),.34);border-radius:var(--radius);
  padding:6px 10px;font-size:var(--t-12);color:var(--text-on-dark)}
.ai-perm{margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid var(--border-on-dark);font-family:var(--font-display);
  font-size:var(--t-12);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pulse-cyan)}
.ai-btns{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
.ai-btn{min-height:44px;padding-inline:var(--sp-3);border:1px solid var(--border-on-dark);
  border-radius:var(--radius);background:transparent;color:var(--text-on-dark);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:color var(--dur-micro) var(--ease),
  border-color var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease)}
.ai-btn:hover{border-color:var(--pulse-cyan);color:var(--pulse-cyan)}
.ai-btn--go{background:var(--pulse-cyan);border-color:var(--pulse-cyan);
  color:var(--ink-navy)}
.ai-btn--go:hover{background:transparent;color:var(--pulse-cyan)}
.ai-verdict{margin-top:var(--sp-2);min-height:1.6em;font-size:var(--t-13);
  color:var(--pulse-cyan)}
.ai-foot{margin-top:var(--sp-1);font-size:var(--t-13);color:var(--text-on-dark-2)}
.ai-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-2);
  padding-top:var(--sp-2);border-top:1px solid var(--border-on-dark);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-on-dark-2)}

/* ---- the reliability questions: an open log, one per line ---- */
.ai-problem-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){.ai-problem-grid{grid-template-columns:minmax(0,1fr)}}
.ai-problem-grid .statement{font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,2.5vw,34px);line-height:1.22;letter-spacing:-.015em;
  margin:var(--sp-3) 0 0;text-wrap:pretty;max-width:26ch}
.ai-qlog{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-subtle)}
.ai-qlog li{display:flex;align-items:baseline;gap:var(--sp-2);
  padding-block:var(--sp-2);border-bottom:1px solid var(--border-subtle);
  font-size:var(--t-15);color:var(--text-secondary)}
.ai-qlog li::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--text-secondary);transform:translateY(-2px)}
.ai-qlog li.is-open{color:var(--text-primary)}
.ai-qlog li.is-open::before{background:var(--pulse-cyan)}

/* ---- the chain of constraints: seven parts, read as one line ---- */
.anat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--sp-2);margin-top:var(--sp-5)}
.anat-node{border:1px solid var(--border-subtle);border-top:2px solid var(--pulse-cyan);
  border-radius:var(--radius);background:var(--surface-card);padding:var(--sp-3);
  display:flex;flex-direction:column;gap:var(--sp-1)}
.anat-i{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  color:var(--text-secondary)}
.anat-node h3{margin:0;font-size:var(--t-18);font-weight:500;letter-spacing:-.01em}
.anat-d{margin:0;font-size:var(--t-13);color:var(--text-secondary)}
.anat-node p.anat-more{margin:var(--sp-1) 0 0;font-size:var(--t-13);line-height:1.6;
  color:var(--text-secondary)}
.anat-exception{margin-top:var(--sp-2);display:grid;gap:var(--sp-1);
  grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;
  border:1px solid var(--border-subtle);border-left:2px solid var(--pulse-cyan);
  border-radius:var(--radius);padding:var(--sp-3) var(--sp-3)}
.anat-exception dt{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.anat-exception dd{margin:0;font-size:var(--t-15);line-height:1.6;color:var(--text-primary);
  max-width:74ch}
@media (max-width:640px){.anat-exception{grid-template-columns:minmax(0,1fr)}}

/* ---- use it: three scenarios, each with the state around the reply ---- */
.ai-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-4)}
.ai-tab{min-height:44px;padding-inline:var(--sp-3);border:1px solid var(--border-subtle);
  border-radius:var(--radius);background:transparent;color:var(--text-secondary);
  font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.08em;
  cursor:pointer;transition:color var(--dur-micro) var(--ease),
  border-color var(--dur-micro) var(--ease)}
.ai-tab:hover{color:var(--text-primary);border-color:var(--text-secondary)}
.ai-tab[aria-selected="true"]{color:var(--text-primary);border-color:var(--pulse-cyan);
  background:rgba(var(--pulse-cyan-rgb),.12);box-shadow:inset 0 -2px 0 var(--pulse-cyan)}
.ai-workspace{margin-top:var(--sp-3);border:1px solid var(--border-subtle);
  border-radius:var(--radius);overflow:hidden;background:var(--surface-card)}
.ai-pane{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}
.ai-pane[hidden]{display:none}
@media (max-width:900px){.ai-pane{grid-template-columns:minmax(0,1fr)}}
.ai-conv{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.ai-line{display:grid;gap:6px}
.ai-who{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary)}
.ai-say{margin:0;font-size:var(--t-15);line-height:1.62;color:var(--text-primary);
  max-width:56ch}
.ai-line--sys{padding-left:var(--sp-3);border-left:2px solid var(--pulse-cyan)}
.ai-line--sys .ai-who{color:var(--pulse-cyan)}
.ai-state{padding:var(--sp-4) var(--sp-3);border-left:1px solid var(--border-subtle);
  background:var(--surface-recessed);display:flex;flex-direction:column;gap:var(--sp-2)}
@media (max-width:900px){.ai-state{border-left:0;border-top:1px solid var(--border-subtle)}}
.ai-state-k{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary)}
.ai-state-v{margin:4px 0 0;font-size:var(--t-13);line-height:1.5;color:var(--text-primary)}
.ai-state-v.is-hold{color:var(--pulse-violet);font-weight:500}
html[data-theme="dark"] .ai-state-v.is-hold{color:var(--violet-bright)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .ai-state-v.is-hold{color:var(--violet-bright)}
}
.ai-note{margin-top:var(--sp-2);font-size:var(--t-13);color:var(--text-secondary)}

/* ---- workflows: the chain from trigger to action, inspectable ---- */
.wf-list{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.wf{border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:var(--sp-3);background:var(--surface-card);
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:var(--sp-2) var(--sp-4);align-items:center}
.wf-k{margin:0;font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.wf-chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.chip{border:1px solid var(--text-secondary);border-radius:var(--radius);
  padding:6px 10px;font-size:var(--t-13);color:var(--text-primary);background:transparent}
.chip--act{background:rgba(var(--pulse-cyan-rgb),.14);border-color:var(--pulse-cyan);
  color:var(--text-primary)}
.chip--hold{border-style:dashed;border-color:var(--pulse-violet);
  color:var(--pulse-violet)}
html[data-theme="dark"] .chip--hold{color:var(--violet-bright);
  border-color:var(--violet-bright)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .chip--hold{color:var(--violet-bright);
    border-color:var(--violet-bright)}
}
.wf-step{display:inline-flex;align-items:center;gap:var(--sp-1)}
.chip-arrow{color:var(--text-secondary);font-size:var(--t-13)}
.wf-legend{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2);
  align-items:center;font-size:var(--t-13);color:var(--text-secondary)}
.wf-legend span{display:inline-flex;align-items:center;gap:var(--sp-1)}
.wf-swatch{width:14px;height:14px;border-radius:3px;flex:none;
  background:rgba(var(--pulse-cyan-rgb),.14);border:1px solid var(--pulse-cyan)}
.wf-swatch--hold{background:transparent;border:1px dashed var(--pulse-violet)}
@media (max-width:760px){
  .wf{grid-template-columns:minmax(0,1fr)}
  /* A chain that wraps sideways leaves a connector pointing at nothing. On a phone the same
     chain runs top to bottom instead, so every arrow sits above the step it leads to. */
  .wf-chain{flex-direction:column;align-items:flex-start;gap:0}
  .wf-step{flex-direction:column;align-items:flex-start}
  .chip-arrow{transform:rotate(90deg);margin-block:2px}
}

/* ---- our own systems: three cards, the middle one read as a record ---- */
.eco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--sp-2);margin-top:var(--sp-4);align-items:stretch}
.eco-card{border:1px solid var(--border-subtle);border-radius:var(--radius);
  background:var(--surface-card);overflow:hidden;display:flex;flex-direction:column}
.eco-shot{background:var(--surface-dark);border-bottom:1px solid var(--border-subtle)}
.eco-shot img{display:block;width:100%;height:auto}
.eco-body{padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);
  flex:1}
.eco-k{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--pulse-cyan);font-weight:600}
.eco-v{margin:0;font-size:var(--t-15);line-height:1.55;color:var(--text-primary)}
.eco-record{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:grid;gap:6px;
  font-size:var(--t-13);color:var(--text-secondary)}
.eco-record b{display:block;font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);
  font-weight:500}

/* ---- AI visibility: what a person reads, what a machine extracts ---- */
.vis-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);margin-top:var(--sp-4);align-items:start}
@media (max-width:860px){.vis-grid{grid-template-columns:minmax(0,1fr)}}
.vis-k{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);margin:0 0 var(--sp-2)}
.vis-quote{margin:0;font-family:var(--font-serif);font-size:clamp(22px,2.2vw,30px);
  line-height:1.3;color:var(--text-primary);text-wrap:pretty}
.vis-note{margin-top:var(--sp-2);font-size:var(--t-13);color:var(--text-secondary);
  max-width:42ch}
.vis-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-subtle)}
.vis-list li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:var(--sp-2);align-items:baseline;padding-block:var(--sp-1);
  border-bottom:1px solid var(--border-subtle);font-size:var(--t-13);
  color:var(--text-secondary)}
.vis-list b{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-primary);font-weight:500;
  min-width:8ch}
.vis-body{margin-top:var(--sp-3);font-size:var(--t-15);line-height:1.7;
  color:var(--text-secondary);max-width:70ch}
.vis-cta{margin-top:var(--sp-3)}

/* ---- close: the AI-specific proposition, the booking path kept ---- */
body.page-ai .convert .lead{max-width:46ch}
@media (prefers-reduced-motion:reduce){
  .ai-btn,.ai-tab{transition:none}
}

/* ============================================================ /solutions/brand-identity
   Review 2026-10-30: the discipline template was rejected on this route because it argued
   about identity instead of showing it. This block carries the approved v4 composition in
   v5's tokens: a three-fragment canvas in the hero, the recognition test, four identities,
   seven expressions, the phone states, the four categories and the brand close.
   Scoped to body.page-brand so no other route moves. ---- */

/* ---- 1. hero: the words left, the canvas right ---- */
body.page-brand .idn-hero{padding-block:calc(var(--nav-h) + clamp(32px,4vw,64px)) clamp(56px,6vw,96px)}
.idn-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.idn-hero__words{padding-top:0}
body.page-brand .idn-hero .hero-label{line-height:1}
.idn-h1{margin-top:var(--sp-2);max-width:12ch;font-size:clamp(40px,5.4vw,86px);
  line-height:.94;letter-spacing:-.05em}
.idn-hero__words .lead{margin-top:var(--sp-3);max-width:34ch}
.idn-hero__words .actions{margin-top:var(--sp-4)}
/* Three fragments of real identity work, at their own proportions. Nothing here is a
   montage of one system: the point is that three different brands stay distinguishable. */
.idn-canvas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);align-items:start}
.idn-frag{overflow:hidden;margin:0;background:var(--surface-recessed);
  border:1px solid var(--border-subtle)}
.idn-frag img{display:block;width:100%;height:100%;object-fit:cover}
.idn-frag--pack{grid-column:1 / -1;aspect-ratio:21/9}
.idn-frag--pack img{object-position:50% 46%}
.idn-frag--char{grid-column:1 / span 2;aspect-ratio:1/1}
.idn-frag--char img{object-position:50% 32%;background:var(--paper)}
.idn-frag--label{grid-column:3 / -1;aspect-ratio:1/1}

/* ---- 2. the recognition test ---- */
.idn-test{background:var(--surface-recessed)}
.idn-head{max-width:var(--measure)}
.idn-statement{margin-top:var(--sp-2);font-size:clamp(28px,3.4vw,52px);line-height:1.02}
.idn-statement--wide{max-width:16ch}
.idn-head__body{margin-top:var(--sp-2);max-width:var(--measure)}
.idn-test__row{display:grid;grid-template-columns:1.15fr .85fr 1fr;
  gap:clamp(20px,3vw,52px);align-items:end;margin-top:clamp(40px,5vw,80px)}
.idn-item{display:flex;flex-direction:column;gap:var(--sp-2);margin:0}
.idn-item--b{margin-bottom:clamp(30px,4vw,70px)}
.idn-item--c{margin-bottom:clamp(12px,2vw,26px)}
.idn-crop{display:block;overflow:hidden;background:var(--ink-navy)}
.idn-crop img{display:block;width:100%;height:100%;object-fit:cover}
.idn-crop--a{aspect-ratio:5/4}
.idn-crop--b{aspect-ratio:4/5}
.idn-crop--c{aspect-ratio:1/1}
/* Cropped into the object, not the frame: the bottle, the character and the mascot are
   zoomed so the recognition test reads as a detail, not as a thumbnail. */
.idn-crop--a img{object-position:50% 50%}
.idn-crop--b img{object-position:62% 50%}
.idn-crop--c img{transform:scale(1.15);transform-origin:50% 46%}
.idn-mark{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);padding-top:var(--sp-2);
  border-top:1px solid var(--border-subtle)}
.idn-what{margin-top:var(--sp-1);font-size:var(--t-15);line-height:1.5;
  color:var(--text-secondary);max-width:34ch}
.idn-what strong{font-weight:600;color:var(--text-primary)}

/* ---- 3. four identities, one section each ---- */
.idn-num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;color:var(--action);font-weight:600}
.idn-cine{height:min(72vh,720px);overflow:hidden;background:var(--ink-navy)}
.idn-cine img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.idn-ex--cine{padding-bottom:clamp(56px,6vw,96px)}
.idn-ex--cine .idn-ex__grid{margin-top:clamp(28px,3.4vw,52px)}
.idn-ex__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(20px,3vw,64px);align-items:start}
.idn-ex__head h3,.idn-ex__side h3{margin-top:var(--sp-2);max-width:24ch}
.idn-ex__copy{color:var(--text-secondary);max-width:46ch}
.idn-ex__split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);align-items:center}
.idn-ex__split--duo{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.idn-ex__side p.copy{margin-top:var(--sp-2);max-width:40ch}
.idn-ex--char{background:var(--surface-recessed)}
.idn-ex__figure img{width:100%;height:min(58vh,520px);object-fit:contain;object-position:50% 100%;
  background:var(--paper)}
.idn-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);align-items:end}
.idn-crop--label{aspect-ratio:2/3}
.idn-ex--gram{background:var(--surface-dark)}
.idn-stage__screen{position:relative}
.idn-stage__screen>img:first-child{display:block;width:100%;height:auto;
  border:1px solid var(--border-on-dark)}
.idn-mascot{position:absolute;right:-3%;bottom:-8%;width:22%;height:auto;
  filter:drop-shadow(0 18px 40px rgba(var(--ink-navy-rgb),.45))}

/* ---- 4. one idea, seven expressions: the sequence printed, not hidden in tabs ---- */
.idn-seven{background:var(--surface-dark)}
.idn-terms{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(8px,1.1vw,18px);margin-top:clamp(32px,4vw,64px);
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,4.1vw,58px);line-height:1.06;letter-spacing:-.03em;
  color:var(--text-on-dark)}
.idn-term{display:inline-flex;align-items:baseline;gap:clamp(6px,.8vw,12px);padding-bottom:.08em;
  border-bottom:1px solid transparent}
.idn-arrow{font-size:.42em;color:var(--pulse-cyan);letter-spacing:0;
  transform:translateY(-.45em);line-height:1}
.idn-term__art img{display:block;height:.62em;width:auto;opacity:.92;
  filter:brightness(0) invert(1)}
.idn-sw{display:inline-block;width:.52em;height:.52em;border-radius:2px;
  background:linear-gradient(135deg,var(--pulse-cyan),var(--violet-bright));
  transform:translateY(-.04em)}
.idn-seven__note{margin-top:clamp(32px,4vw,64px);max-width:46ch;color:var(--text-on-dark-2)}

/* ---- 5. digital behaviour: one phone, three states named beside it ---- */
.idn-behaviour__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.idn-behaviour__words h2{max-width:22ch}
.idn-behaviour__words p{margin-top:var(--sp-2);max-width:46ch}
.idn-field{position:relative;min-height:clamp(320px,44vw,520px);display:flex;
  justify-content:center;align-items:center}
.idn-phone{width:min(40%,300px);overflow:hidden;border:1px solid var(--border-subtle);
  border-radius:var(--radius);background:var(--ink-navy);
  box-shadow:0 40px 80px -60px rgba(var(--ink-navy-rgb),.66)}
.idn-phone img{display:block;width:100%;height:auto}
.idn-note{position:absolute;max-width:16ch}
.idn-note p{margin-top:var(--sp-1);font-size:var(--t-13);line-height:1.55}
.idn-note--a{left:0;top:6%}
.idn-note--b{right:0;top:46%}
.idn-note--c{left:0;bottom:4%}
.idn-tiny{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--action);font-weight:600}

/* ---- 6. what we build: four categories, then the marks ---- */
.idn-build{background:var(--surface-recessed)}
.idn-build__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,3vw,56px) clamp(24px,4vw,64px);align-items:start}
.idn-build__grid h2{margin-top:var(--sp-2);max-width:20ch}
.idn-rows{margin:0}
.idn-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(14px,2vw,32px);padding-block:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--border-subtle)}
.idn-row:last-child{border-bottom:1px solid var(--border-subtle)}
.idn-row dt{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--text-secondary);padding-top:.35em}
.idn-row dd{margin:0;font-family:var(--font-display);font-size:clamp(19px,1.7vw,26px);
  line-height:1.22;letter-spacing:-.02em;color:var(--text-primary);max-width:42ch}
.idn-marks{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,3vw,48px);
  padding-top:clamp(20px,2vw,32px);border-top:1px solid var(--border-subtle)}
.idn-marks img{height:30px;width:auto;opacity:.8}
.idn-marks li:first-child img{height:22px;filter:brightness(0);opacity:.72}

/* ---- 7. close: the brand proposition, not an audit detour ---- */
.idn-cta{position:relative;overflow:hidden;background:var(--surface-dark);
  padding-block:clamp(80px,10vw,152px)}
.idn-cta__art{position:absolute;inset:0;pointer-events:none;opacity:.34}
.idn-cta__art img{position:absolute;object-fit:cover}
.idn-cta__a{left:-4%;top:-16%;width:32%;height:74%}
.idn-cta__b{right:-6%;bottom:-22%;width:36%;height:78%}
.idn-cta__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);
  align-items:end}
.idn-cta__h{max-width:12ch}
.idn-cta__side p{color:var(--text-on-dark-2);max-width:42ch}
.idn-cta__side .actions{margin-top:var(--sp-4)}

/* ---- 8. responsive: one column, reading order unchanged ---- */
@media (max-width:960px){
  .idn-hero__grid,.idn-ex__grid,.idn-ex__split,.idn-ex__split--duo,
  .idn-behaviour__grid,.idn-build__grid,.idn-cta__grid{
    grid-template-columns:minmax(0,1fr)}
  .idn-hero__words{order:1}
  .idn-canvas{order:2;margin-top:var(--sp-3)}
  .idn-ex__figure img{height:auto;max-height:52vh}
  .idn-build__grid .idn-rows{margin-top:var(--sp-3)}
  .idn-field{min-height:0;display:block;margin-top:var(--sp-4)}
  .idn-phone{width:min(76%,320px);margin-inline:auto}
  .idn-note{position:static;max-width:var(--measure);margin-top:var(--sp-3)}
  .idn-cta__side{margin-top:var(--sp-3)}
}
@media (max-width:640px){
  .idn-h1{font-size:clamp(36px,9.6vw,54px)}
  .idn-test__row{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);align-items:start}
  .idn-item,.idn-item--b,.idn-item--c{margin-bottom:0;flex-direction:row;
    gap:var(--sp-2);align-items:center}
  .idn-item .idn-crop{width:42%;flex:0 0 42%}
  .idn-item figcaption{flex:1}
  .idn-ex__split--duo .idn-duo{max-width:76%}
  .idn-terms{font-size:clamp(24px,7.6vw,34px);gap:6px 10px}
  .idn-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
}

/* ---- /solutions/digital-growth/ (page cycle 2026-10-30) ----
   v4's evidence-led structure rebuilt in v5's tokens: a light editorial hero with the
   real surfaces growth lands on, the four activities as rows of named work, the four
   decisions, three cases of actual work, the five layers, the paired phone states and
   a question-led close. No decorative canvas: every image is work we shipped. ---- */
body.page-brand .dxg-hero{padding-block:calc(var(--nav-h) + clamp(20px,2.6vw,44px)) clamp(24px,3vw,48px)}
.dxg-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4.4vw,72px);align-items:start}
.dxg-h1{margin-top:var(--sp-2);max-width:15ch;font-size:clamp(32px,4.4vw,68px);
  line-height:1;letter-spacing:-.04em}
.dxg-hero__lead{margin-top:var(--sp-2);max-width:36ch}
.dxg-hero__actions{margin-top:var(--sp-3)}
.dxg-surfaces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);align-items:end}
.dxg-surf{overflow:hidden;margin:0;background:var(--surface-recessed);
  border:1px solid var(--border-subtle)}
.dxg-surf img{display:block;width:100%;height:100%;object-fit:cover}
.dxg-surf--wide{grid-column:1 / -1;aspect-ratio:2000/1142}
.dxg-surf--wide img{object-position:50% 30%}
/* the two lower frames share one height, so the pair reads as a composition and not as
   two unrelated crops. Nothing is cut from the wide frame above them. */
/* two frames, both full width, neither cropped: the banner and the interface below it
   are the same surface at two scales, which is the argument the page makes. */
.dxg-surf--desk{grid-column:1 / -1;aspect-ratio:1440/960}
.dxg-surf--desk img{object-position:50% 0%}
.dxg-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1) var(--sp-3);
  margin-top:var(--sp-2);padding-top:var(--sp-1);border-top:1px solid var(--border-subtle);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary)}
.dxg-cap span:last-child{color:var(--action)}

/* the four activities, as rows of named work rather than a directory of services */
.dxg-head{max-width:var(--measure)}
.dxg-statement{margin-top:var(--sp-2);font-size:clamp(26px,3.2vw,48px);line-height:1.04}
.dxg-rows{margin-top:clamp(28px,3.2vw,52px);border-top:1px solid var(--border-subtle)}
.dxg-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--sp-1) clamp(16px,2.4vw,48px);padding:clamp(16px,1.9vw,28px) 0;
  border-bottom:1px solid var(--border-subtle)}
.dxg-row dt{font-family:var(--font-display);font-weight:600;font-size:var(--t-18,18px);
  line-height:1.2;letter-spacing:-.01em}
.dxg-row dt .dxg-idx{display:block;margin-bottom:var(--sp-1);font-size:var(--t-11);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--action)}
.dxg-row dd{margin:0;max-width:56ch;color:var(--text-secondary)}

/* four decisions, one rail */
.dxg-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.2vw,36px);margin-top:clamp(24px,3vw,44px)}
.dxg-node{border-top:1px solid var(--border-subtle);padding-top:var(--sp-2)}
.dxg-k{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--action)}
.dxg-v{margin-top:var(--sp-1);font-size:clamp(19px,1.6vw,24px);font-weight:600;
  letter-spacing:-.01em}
.dxg-d{margin-top:var(--sp-1);color:var(--text-secondary);max-width:30ch}
.dxg-close{margin-top:clamp(28px,3.4vw,52px);max-width:52ch;
  font-size:clamp(18px,1.7vw,24px);line-height:1.4}

/* three cases: a wide frame, a device, a full-bleed screen */
.dxg-cine{overflow:hidden;background:var(--ink-navy)}
.dxg-cine img{display:block;width:100%;height:auto;object-fit:cover;object-position:50% 40%}
.dxg-case__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(18px,3vw,56px);align-items:start;margin-top:clamp(24px,3vw,44px)}
.dxg-case__num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--action);font-weight:600}
.dxg-case__grid h3{margin-top:var(--sp-2);max-width:22ch}
.dxg-case__copy{margin-top:var(--sp-2);max-width:46ch;color:var(--text-secondary)}
.dxg-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(20px,3vw,48px);align-items:center}
.dxg-shot{grid-column:1 / -1;margin:clamp(22px,2.6vw,40px) 0 0;overflow:hidden;
  border:1px solid var(--border-subtle);background:var(--surface-recessed)}
.dxg-shot img{display:block;width:100%;height:auto}
#system{padding-top:clamp(40px,4vw,64px)}
.dxg-phone{justify-self:center;width:min(100%,300px);margin:0;overflow:hidden;
  border:1px solid var(--border-subtle);background:var(--surface-recessed)}
.dxg-phone img{display:block;width:100%;height:auto}
.dxg-states__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.dxg-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,28px);margin-top:clamp(20px,2.4vw,36px);max-width:560px}
.dxg-states__words .dxg-v{font-size:clamp(20px,2vw,28px);line-height:1.15;max-width:22ch}
.dxg-layer p{margin-top:var(--sp-1);color:var(--text-secondary);max-width:26ch;font-size:var(--t-15,15px);line-height:1.5}
.dxg-pair figure{margin:0}
.dxg-pair figure img{display:block;width:100%;height:auto;
  border:1px solid var(--border-subtle);background:var(--surface-recessed)}
.dxg-pair .dxg-k{display:block;margin-top:var(--sp-2)}
.dxg-pair p{margin-top:var(--sp-1);color:var(--text-secondary);max-width:34ch}

/* five layers: the visible screen is the last one named */
.dxg-layers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,28px);margin-top:clamp(24px,3vw,44px)}
.dxg-layer{border-top:1px solid var(--border-dark,var(--border-subtle));padding-top:var(--sp-2)}
.dxg-layer .dxg-k{display:block}
.dxg-layer p{margin-top:var(--sp-1);color:var(--text-secondary);max-width:26ch}

/* close */
.dxg-cta__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3.4vw,64px);align-items:end}
.dxg-cta__h{max-width:18ch;font-size:clamp(30px,3.8vw,56px);line-height:1.02;letter-spacing:-.03em}
.dxg-cta__side p{margin-bottom:var(--sp-3);max-width:40ch}

@media (max-width:900px){
  .dxg-hero__grid,.dxg-case__grid,.dxg-split,.dxg-cta__grid{grid-template-columns:minmax(0,1fr)}
  .dxg-hero__grid{gap:var(--sp-4)}
  .dxg-layers{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .dxg-path{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3)}
}
@media (max-width:560px){
  .dxg-h1{font-size:clamp(30px,9vw,42px)}
  .dxg-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .dxg-path{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  .dxg-layers{grid-template-columns:minmax(0,1fr)}
  .dxg-pairrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
    height:clamp(150px,46vw,200px)}
  .dxg-cine img{object-position:50% 32%}
  .dxg-pair{grid-template-columns:minmax(0,1fr);max-width:none;gap:var(--sp-3)}
  .dxg-hero .btn,.dxg-cta .btn{min-height:44px}
  .dxg-hero__actions{display:grid;gap:10px}
  .dxg-hero__actions .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dxg-cine img,.dxg-surf img{transition:none}
}

@media (max-width:900px){
  .dxg-states__grid{grid-template-columns:minmax(0,1fr)}
  .dxg-states__words{max-width:46ch}
}

/* ---- /solutions/web-app/ — the approved Web & Digital Experience page rebuilt in v5
   tokens: a light editorial hero carrying the same interface at two scales, the three
   questions every visit answers, three projects in their own treatments, the five layers,
   the paired phone states and a question-led close. No decorative canvas, no empty
   fields, nothing hidden behind an accordion. ---- */
body.page-brand .wxa-hero{padding-block:calc(var(--nav-h) + clamp(14px,1.9vw,30px)) clamp(26px,3.2vw,52px)}
.wxa-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(22px,3.6vw,60px);align-items:start}
.wxa-h1{margin-top:var(--sp-2);max-width:17ch;font-size:clamp(30px,3.9vw,60px);
  line-height:1.02;letter-spacing:-.035em}
.wxa-hero__lead{margin-top:var(--sp-2);max-width:34ch;color:var(--text-secondary)}
.wxa-hero__actions{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.wxa-devices{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);
  gap:clamp(10px,1.3vw,18px);align-items:end}
.wxa-frame{margin:0;overflow:hidden;background:var(--surface-recessed);
  border:1px solid var(--border-subtle)}
.wxa-frame img{display:block;width:100%;height:auto}
.wxa-frame--desk img{aspect-ratio:1440/960;object-fit:cover;object-position:50% 0%}
.wxa-frame--phone img{aspect-ratio:390/844;object-fit:cover;object-position:50% 0%}
.wxa-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1) var(--sp-3);
  margin-top:var(--sp-2);padding-top:var(--sp-1);border-top:1px solid var(--border-subtle);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-secondary)}
.wxa-cap span:last-child{color:var(--action)}

/* three questions, one rail — the page's argument, all three visible at once */
.wxa-head{max-width:var(--measure)}
.wxa-statement{margin-top:var(--sp-2);font-size:clamp(26px,3.2vw,46px);line-height:1.05}
.wxa-asks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2.4vw,40px);margin-top:clamp(24px,3vw,44px)}
.wxa-ask{border-top:1px solid var(--border-subtle);padding-top:var(--sp-2)}
.wxa-ask__num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--action)}
.wxa-ask__q{margin-top:var(--sp-1);font-family:var(--font-display);font-weight:600;
  font-size:clamp(21px,2.1vw,30px);line-height:1.12;letter-spacing:-.02em;max-width:14ch}
.wxa-close{margin-top:clamp(26px,3.2vw,48px);max-width:52ch;
  font-size:clamp(18px,1.7vw,23px);line-height:1.42}

/* three projects, three compositions */
.wxa-case__head{max-width:var(--measure)}
.wxa-case__num{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--action);font-weight:600}
.wxa-case__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(16px,3vw,56px);align-items:end;margin-top:clamp(20px,2.6vw,36px)}
.wxa-case__grid h3{margin-top:var(--sp-2);max-width:22ch}
.wxa-case__note{margin:0;color:var(--text-secondary);max-width:46ch}
.wxa-shot{grid-column:1 / -1;margin:clamp(20px,2.6vw,38px) 0 0;overflow:hidden;
  border:1px solid var(--border-subtle);background:var(--surface-recessed)}
.wxa-shot img{display:block;width:100%;height:auto}
.wxa-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(20px,3vw,48px);align-items:center}
.wxa-phone{justify-self:center;width:min(100%,290px);margin:0;overflow:hidden;
  border:1px solid var(--border-subtle);background:var(--surface-recessed)}
.wxa-phone img{display:block;width:100%;height:auto}
.wxa-case__copy{margin-top:var(--sp-2);max-width:44ch;color:var(--text-secondary)}

/* five layers, as a definition list — every term carries its own line */
.wxa-layers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,28px);margin-top:clamp(24px,3vw,44px)}
.wxa-layer{border-top:1px solid var(--border-subtle);padding-top:var(--sp-2)}
.wxa-layer dt{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--action)}
.wxa-layer dd{margin:var(--sp-1) 0 0;color:var(--text-secondary);max-width:26ch;
  font-size:var(--t-15,15px);line-height:1.5}

/* two states of the same product */
.wxa-states{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.wxa-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,28px);margin-top:clamp(20px,2.4vw,36px);max-width:560px}
.wxa-pair figure{margin:0}
.wxa-pair img{display:block;width:100%;height:auto;border:1px solid var(--border-subtle);
  background:var(--surface-recessed)}
.wxa-pair figcaption{margin-top:var(--sp-2)}
.wxa-pair .wxa-k{display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-15,15px);letter-spacing:-.01em}
.wxa-pair p{margin-top:var(--sp-1);color:var(--text-secondary);max-width:34ch;
  font-size:var(--t-15,15px);line-height:1.5}
.wxa-states__words p:first-child{font-size:clamp(20px,2vw,27px);line-height:1.16;max-width:22ch}
.wxa-states__words p+p{margin-top:var(--sp-2);color:var(--text-secondary);max-width:42ch}

/* the other three services, compact and secondary */
.wxa-others{border-top:1px solid var(--border-subtle);padding-top:clamp(18px,2.2vw,28px)}
.wxa-others h2{font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);font-weight:500}
.wxa-others ul{display:flex;flex-wrap:wrap;gap:var(--sp-1) clamp(16px,2.6vw,40px);
  margin:var(--sp-2) 0 0;padding:0;list-style:none}
.wxa-others a{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-family:var(--font-display);font-weight:600;font-size:var(--t-15,15px);
  text-decoration:none;border-bottom:1px solid transparent}
.wxa-others a:hover{border-bottom-color:currentColor}
.wxa-others .ico{width:14px;height:14px}

/* close */
.wxa-cta__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3.4vw,64px);align-items:end}
.wxa-cta__h{max-width:18ch;font-size:clamp(28px,3.6vw,52px);line-height:1.03;
  letter-spacing:-.03em}
.wxa-cta__side p{margin-bottom:var(--sp-3);max-width:40ch}

@media (max-width:900px){
  .wxa-hero__grid,.wxa-case__grid,.wxa-split,.wxa-cta__grid,.wxa-states{grid-template-columns:minmax(0,1fr)}
  .wxa-hero__grid{gap:var(--sp-4)}
  .wxa-layers{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .wxa-asks{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  .wxa-states__words{max-width:46ch}
}
@media (max-width:560px){
  .wxa-h1{font-size:clamp(29px,8.6vw,40px)}
  .wxa-hero__lead{max-width:none}
  .wxa-hero__actions{display:grid;gap:10px}
  .wxa-hero__actions .btn{width:100%;justify-content:center;min-height:44px}
  .wxa-devices{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .wxa-layers{grid-template-columns:minmax(0,1fr)}
  .wxa-pair{grid-template-columns:minmax(0,1fr);max-width:none;gap:var(--sp-3)}
  .wxa-cta .btn{min-height:44px}
  .wxa-cta__side .actions{display:grid;gap:10px}
  .wxa-cta__side .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .wxa-frame img,.wxa-shot img{transition:none}
}

/* ===========================================================================
   /terms — a legal document, not a landing page (2026-10-30)
   Six approved sections, a numbered contents list above them, one narrow
   reading column. Dark hero, light document. Static: nothing here animates,
   reveals on scroll or moves under the reader.
   =========================================================================== */
body.page-terms .legal-hero{padding-top:calc(var(--nav-h) + clamp(44px,5.4vw,88px));
  padding-bottom:clamp(32px,4.2vw,60px)}
.legal-hero .legal-words{max-width:62ch}
.legal-topline{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-2) var(--sp-3);flex-wrap:wrap}
.legal-topline .eyebrow{margin:0}
.legal-stamp{margin:0;font-size:var(--t-12);letter-spacing:.02em;color:var(--text-on-dark-2)}
.legal-h1{font-size:clamp(33px,4.4vw,66px);line-height:1.02;letter-spacing:-.042em;
  margin-top:var(--sp-2);text-wrap:balance}
.legal-h1 .serif{display:block;font-size:.96em;line-height:1.05;margin-top:.06em}
.legal-standfirst{margin:clamp(16px,1.9vw,26px) 0 0;max-width:54ch;
  font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--text-on-dark-2)}

/* on this page: numbered, ruled, two columns at desktop, one at 390 */
.legal-toc{margin-top:clamp(28px,3.6vw,52px);padding-top:clamp(14px,1.8vw,22px);
  border-top:1px solid var(--border-on-dark)}
.legal-toc__title{margin:0 0 var(--sp-2);font-family:var(--font-display);font-weight:600;
  font-size:var(--t-11);letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-on-dark-2)}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);
  grid-auto-flow:column;gap:0 clamp(20px,3vw,56px)}
.legal-toc li{border-top:1px solid var(--border-on-dark)}
.legal-toc li:nth-child(1),.legal-toc li:nth-child(4){border-top:0}
.legal-toc a{display:flex;align-items:baseline;gap:var(--sp-2);min-height:52px;
  padding-block:var(--sp-2);color:var(--text-on-dark);text-decoration:none;
  font-size:var(--t-15);line-height:1.4}
.legal-toc__n{font-family:var(--font-display);font-weight:600;font-size:var(--t-11);
  letter-spacing:.14em;color:var(--text-on-dark-2);flex:none;
  transition:color var(--dur-micro) var(--ease)}
.legal-toc__t{transition:box-shadow var(--dur-micro) var(--ease)}
.legal-toc a:hover .legal-toc__n,.legal-toc a:focus-visible .legal-toc__n{color:var(--pulse-cyan)}
.legal-toc a:hover .legal-toc__t,.legal-toc a:focus-visible .legal-toc__t{
  box-shadow:inset 0 -1px 0 currentColor}

/* the document */
.legal-body{padding-block:clamp(44px,5.6vw,88px)}
.legal-column{max-width:760px}
@media (min-width:1056px){
  /* one document block: hero words, contents and body share one centred container */
  body.page-terms main .shell{max-width:960px}
}
.legal-section{--num-w:26px;--num-gap:clamp(12px,1.6vw,20px)}
.legal-section + .legal-section{margin-top:clamp(44px,5.4vw,72px)}
.legal-section h2{display:grid;grid-template-columns:var(--num-w) minmax(0,1fr);align-items:baseline;
  column-gap:var(--num-gap);margin:0 0 var(--sp-3);font-family:var(--font-display);font-weight:500;
  font-size:clamp(21px,2vw,27px);line-height:1.22;letter-spacing:-.022em;
  scroll-margin-top:calc(var(--nav-h) + var(--sp-4));outline-offset:8px}
.legal-section h2:focus{outline:0}
.legal-section h2:focus-visible{outline:2px solid var(--pulse-cyan);outline-offset:8px}
.legal-index{font-size:var(--t-11);letter-spacing:.14em;font-weight:600;
  color:var(--text-secondary);font-variant-numeric:tabular-nums}
.legal-section .copy{font-size:clamp(16px,1.1vw,17.5px);line-height:1.66;margin:0;
  padding-left:calc(var(--num-w) + var(--num-gap));
  max-width:calc(68ch + var(--num-w) + var(--num-gap));color:var(--text-primary)}
.legal-section .copy + .copy{margin-top:var(--sp-3)}
.legal-section .copy strong{font-weight:600}
.legal-section .copy a{color:inherit;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:rgba(46,168,174,.6)}
.legal-section .copy a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.legal-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-2) var(--sp-3);margin-top:clamp(30px,3.4vw,44px);
  padding-top:var(--sp-3);border-top:1px solid var(--border-subtle)}
.legal-return{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;
  font-family:var(--font-display);font-size:var(--t-12);letter-spacing:.10em;
  text-transform:uppercase;font-weight:600;color:var(--text-secondary);text-decoration:none}
.legal-return:hover,.legal-return:focus-visible{color:var(--text-primary);
  box-shadow:inset 0 -1px 0 currentColor}
.legal-updated{margin:0;font-size:var(--t-13);line-height:1.6;color:var(--text-secondary)}

@media (max-width:680px){
  .legal-toc ol{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .legal-toc li{border-top:1px solid var(--border-on-dark)}
  .legal-toc li:first-child{border-top:0}
  .legal-h1{font-size:clamp(31px,8.6vw,44px)}
  .legal-standfirst{font-size:15.5px;line-height:1.55}
  .legal-section{--num-w:auto;--num-gap:0}
  .legal-section h2{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .legal-index{display:block}
  .legal-section .copy{padding-left:0;max-width:none;font-size:16px;line-height:1.65}
}
@media (prefers-reduced-motion:reduce){
  .legal-toc__n,.legal-toc__t{transition:none}
}

/* ---- /work/ (page cycle 2026-10-30). The approved index rebuilt here: v4's continuous
   portfolio, not three fixed service sections. The hero is editorial and compact, so the
   headline sits high in the first screen; the atmospheric layer is lifted out of the flat
   navy it was buried in, and the one control is the filter, not an audit button. ---- */
body.page-work .hero{min-height:clamp(400px,50vh,540px)}
body.page-work .hero-body{align-self:center;padding-bottom:clamp(24px,3vw,40px)}
body.page-work .hero h1{max-width:16ch}
body.page-work .hero::after{background:
  radial-gradient(120% 78% at 0% 100%,rgba(var(--ink-navy-rgb),.86),transparent 62%),
  linear-gradient(180deg,rgba(var(--ink-navy-rgb),.34) 0%,rgba(var(--ink-navy-rgb),.06) 46%,
  rgba(var(--ink-navy-rgb),.86) 100%)}
@media (max-width:640px){
  body.page-work .hero{min-height:auto;padding-bottom:var(--sp-3)}
  body.page-work .hero-body{padding-bottom:var(--sp-4)}
  body.page-work .hero h1{max-width:none}
}

/* the filter: five controls over the whole list, one row, wrapping on a phone */
.wki-filter{border-block:1px solid var(--border-subtle);padding-block:clamp(20px,2.4vw,30px)}
.wki-filter__inner{display:grid;gap:var(--sp-2)}
.wki-filter__h{margin:0;font-family:var(--font-display);font-size:var(--t-11);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.wki-filter__row{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.wki-filter__btn{appearance:none;background:transparent;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--text-primary) 26%,transparent);
  border-radius:999px;color:var(--text-primary);min-height:44px;padding-inline:var(--sp-3);
  font-family:var(--font-display);font-size:var(--t-13);font-weight:500;letter-spacing:.01em;
  transition:background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),
  border-color var(--dur-micro) var(--ease)}
.wki-filter__btn:hover{border-color:var(--action);color:var(--action)}
.wki-filter__btn[aria-pressed="true"]{background:var(--text-primary);
  border-color:var(--text-primary);color:var(--surface)}
.wki-filter__btn[aria-pressed="true"]:hover{background:var(--action);border-color:var(--action);
  color:var(--surface)}
.wki-filter__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.wki-filter__status{margin:0;font-size:var(--t-13);line-height:1.4;color:var(--text-secondary)}

/* the portfolio: one list, two tiers. The lead cases take the page width in pairs; the rest
   sit as rows, media left, so eleven projects read as one collection instead of three. */
.wki-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;
  gap:clamp(24px,3vw,44px) var(--grid-gap);margin:clamp(28px,3.6vw,52px) 0 0;padding:0}
.wki-rows{display:grid;list-style:none;margin:clamp(32px,4vw,64px) 0 0;padding:0;
  border-top:1px solid var(--border-subtle)}
.wki-item--row{border-bottom:1px solid var(--border-subtle)}
.wki-card{display:block;color:var(--text-primary)}
.wki-card:hover{text-decoration:none}
.wki-media{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  background:var(--surface-recessed)}
.wki-media img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:contain;object-position:top center}
.wki-card:hover .wki-media{border-color:color-mix(in srgb,var(--text-primary) 34%,transparent)}
.wki-body{display:grid;gap:var(--sp-0);padding-top:var(--sp-2)}
.wki-role{margin:0;font-size:var(--t-11);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary)}
.wki-name{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(19px,1.6vw,26px);line-height:1.12;letter-spacing:-.02em}
.wki-card:hover .wki-name{color:var(--action)}
/* The name and the picture carry the card; the three lines are the evidence under them. */
.wki-line{margin:var(--sp-1) 0 0;font-size:var(--t-13);line-height:1.55;
  color:var(--text-secondary);max-width:62ch;text-wrap:pretty}
.wki-k{display:block;font-size:var(--t-11);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-primary);margin-bottom:2px}
.wki-line--changed{color:var(--text-primary)}
.wki-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);list-style:none;
  margin:var(--sp-2) 0 0;padding:0}
.wki-tags li{border:1px solid var(--border-subtle);border-radius:999px;padding:3px 10px;
  font-size:var(--t-11);letter-spacing:.03em;color:var(--text-secondary)}
.wki-more{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-12);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--action)}
.wki-more .ico{width:14px;height:14px;transition:transform var(--dur-micro) var(--ease)}
.wki-card:hover .wki-more .ico{transform:translate(2px,-2px)}
.wki-item--row .wki-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,40px);padding-block:clamp(20px,2.6vw,32px);align-items:start}
.wki-item--row .wki-body{padding-top:0;gap:2px}
.wki-item--row .wki-name{font-size:clamp(18px,1.4vw,22px)}
.wki-close{max-width:64ch}
.wki-close .lead{margin-top:var(--sp-3)}
.wki-close .actions{margin-top:var(--sp-4)}

@media (max-width:900px){
  .wki-lead{grid-template-columns:minmax(0,1fr)}
  .wki-item--row .wki-card{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
}
@media (max-width:560px){
  .wki-filter__btn{min-height:44px;padding-inline:var(--sp-2)}
  .wki-line{font-size:var(--t-12)}
  .wki-media{border-radius:var(--radius)}
  .wki-close .actions{display:grid;gap:10px}
  .wki-close .btn{width:100%;justify-content:center;min-height:44px}
}

/* ---- /work/ancient-science-of-china/ (page cycle 2026-10-30). The approved case study,
   carried in the project's own identity instead of the site's service-page treatment:
   warm paper #F4EEE1, homepage paper #F6F1E8, ink #3B1907, cinnabar #B8452E and bronze
   #8B7355, on this route only. The artwork opens beside the headline, four chapters name
   the way through, and the identity bands sit on the paper the identity was drawn for.
   Every tint below is mixed from the identity's own two grounds, so the page introduces
   no colour the project does not publish. Ink on paper measures 13.7:1, cinnabar 4.6:1;
   the small uppercase labels take bronze mixed half into ink (7.4:1), because bronze alone
   is 3.9:1 on paper and would have been a label nobody could read. The display face is the client's own
   Libre Baskerville (CaseLibre, already served by the specimen band above), set against the
   house serif's true italic: two real faces, no synthesised oblique. ---- */
body.page-case--asoc{
  --asoc-paper:#F4EEE1;--asoc-homepaper:#F6F1E8;--asoc-ink:#3B1907;
  --asoc-cinnabar:#B8452E;--asoc-bronze:#8B7355;
  --asoc-muted:color-mix(in srgb,var(--asoc-ink) 76%,var(--asoc-paper));
  --asoc-label:color-mix(in srgb,var(--asoc-bronze) 50%,var(--asoc-ink));
  --asoc-rule:color-mix(in srgb,var(--asoc-ink) 20%,var(--asoc-paper));
  --surface:var(--asoc-paper);--surface-recessed:var(--asoc-homepaper);
  --surface-card:var(--asoc-homepaper);
  --text-primary:var(--asoc-ink);--text-secondary:var(--asoc-muted);
  --border-subtle:var(--asoc-rule);--focus-ring:var(--asoc-cinnabar);
  background:var(--asoc-paper);color:var(--asoc-ink)}
/* The case is the current page, so its bands carry the identity's action colour. The closing
   commercial section and the footer are the site's, and keep the site's blue. */
body.page-case--asoc .asoc-open,
body.page-case--asoc .asoc-band,
body.page-case--asoc .asoc-chapters,
body.page-case--asoc .asoc-index{--action:var(--asoc-cinnabar);--action-hover:var(--asoc-ink)}
body.page-case--asoc .section.on-dark{--action:var(--pulse-blue);--focus-ring:var(--pulse-cyan)}

/* the bar: the case's own context, on the case's own paper, no audit button */
body.page-case--asoc .nav,body.page-case--asoc .nav.scrolled{
  background:var(--asoc-paper);color:var(--asoc-ink);border-bottom:1px solid var(--asoc-rule)}
body.page-case--asoc .nav.scrolled{box-shadow:0 10px 30px rgba(59,25,7,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--asoc .nav-mark img{filter:none}
body.page-case--asoc .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4}
body.page-case--asoc .nav-context-k{color:var(--asoc-muted)}
body.page-case--asoc .nav-context-v{color:var(--asoc-ink);font-weight:600}
body.page-case--asoc .nav-toggle{border-color:var(--asoc-rule);color:var(--asoc-ink)}
body.page-case--asoc .nav-toggle:hover{border-color:var(--asoc-cinnabar);color:var(--asoc-cinnabar)}
body.page-case--asoc .nav-panel{background:var(--asoc-paper);border-bottom:1px solid var(--asoc-rule)}
body.page-case--asoc .nav-panel a{color:var(--asoc-ink)}

/* the opening: headline left, the project's artwork beside it, in the first screen */
body.page-case--asoc .asoc-open{padding-block:calc(var(--nav-h) + clamp(20px,3vw,44px)) clamp(24px,3vw,40px)}
body.page-case--asoc .asoc-open__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4.4vw,72px);align-items:center}
body.page-case--asoc .asoc-kicker{color:var(--asoc-cinnabar);letter-spacing:.16em}
body.page-case--asoc .asoc-h1{margin-top:var(--sp-3);max-width:12ch;
  font-family:CaseLibre,Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,84px);
  line-height:.98;letter-spacing:-.02em;text-wrap:balance}
body.page-case--asoc .asoc-h1 .serif{font-family:var(--font-serif);font-style:italic;
  font-size:.94em;line-height:1.04;margin-top:.06em;padding-bottom:.04em}
body.page-case--asoc .asoc-w{display:inline}
body.page-case--asoc .asoc-lead{margin-top:var(--sp-3);max-width:34ch;color:var(--asoc-muted)}
body.page-case--asoc .asoc-actions{margin-top:var(--sp-4)}
body.page-case--asoc .asoc-cta{display:inline-flex;align-items:center;gap:var(--sp-1);
  min-height:44px;font-family:var(--font-display);font-size:var(--t-12);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--asoc-cinnabar);
  border-bottom:1px solid color-mix(in srgb,var(--asoc-cinnabar) 42%,transparent);
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--asoc .asoc-cta:hover{color:var(--asoc-ink);text-decoration:none;
  border-bottom-color:var(--asoc-ink)}
body.page-case--asoc .asoc-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--asoc .asoc-cta:hover .ico{transform:translate(2px,-2px)}
body.page-case--asoc .asoc-art{display:grid;gap:var(--sp-2);margin:0}
body.page-case--asoc .asoc-art__frame{display:block;overflow:hidden;
  border:1px solid var(--asoc-rule);background:var(--asoc-homepaper)}
body.page-case--asoc .asoc-art__frame img{display:block;width:100%;height:auto}
body.page-case--asoc .asoc-art figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--asoc-muted)}
body.page-case--asoc .asoc-open__facts{margin-top:clamp(32px,4vw,56px)}
body.page-case--asoc .asoc-facts{border-top:1px solid var(--asoc-rule);padding-block:var(--sp-4)}
body.page-case--asoc .asoc-facts .fact dt{color:var(--asoc-label)}
body.page-case--asoc .asoc-facts .fact dd{font-size:var(--t-18);color:var(--asoc-ink)}

/* the chapter rail: sticky under the bar, the current chapter inked, progress underneath */
/* html already carries scroll-padding-top: var(--nav-h), so the target's own margin is the
   rest of the offset: 64px lands a jumped-to section just under the 125px bar + rail. */
body.page-case--asoc [id]{scroll-margin-top:64px}
body.page-case--asoc .asoc-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--asoc-paper) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-chapters__inner{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);min-height:56px}
body.page-case--asoc .asoc-chapters__list{display:flex;gap:clamp(8px,1.8vw,28px);
  min-width:0;overflow-x:auto;scrollbar-width:none}
body.page-case--asoc .asoc-chapters__list::-webkit-scrollbar{display:none}
body.page-case--asoc .asoc-chapters__list li{flex:none}
body.page-case--asoc .asoc-chapters__list a,body.page-case--asoc .asoc-chapters__all{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;
  font-family:var(--font-display);font-size:var(--t-11);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--asoc-muted);border-bottom:1px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--asoc .asoc-chapters__list a:hover,body.page-case--asoc .asoc-chapters__all:hover{
  color:var(--asoc-cinnabar);text-decoration:none}
body.page-case--asoc .asoc-chapters__list a[aria-current]{color:var(--asoc-ink);
  border-bottom-color:var(--asoc-cinnabar)}
body.page-case--asoc .asoc-chapters__all{flex:none;color:var(--asoc-ink);
  border-bottom-color:var(--asoc-rule)}
body.page-case--asoc .asoc-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--asoc-cinnabar);transform:scaleX(0);transform-origin:0 50%}

/* the bands */
body.page-case--asoc .asoc-band{padding-block:clamp(48px,6.4vw,104px);
  border-top:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-h2{font-family:CaseLibre,Georgia,serif;font-weight:400;
  letter-spacing:-.015em;font-size:clamp(28px,3.2vw,52px);line-height:1.04;max-width:20ch}
body.page-case--asoc .asoc-h2 .serif{font-family:var(--font-serif);font-style:italic;
  font-size:.96em}
body.page-case--asoc .asoc-h3{margin-top:clamp(40px,5vw,72px);padding-top:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--asoc-label);border-top:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-note{margin-top:var(--sp-2);max-width:62ch;
  color:var(--asoc-muted);font-size:var(--t-15);line-height:1.65}

/* the thinking: the explanation and the catalogue screen it describes, side by side */
body.page-case--asoc .asoc-thinking{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.6vw,72px);align-items:center}
body.page-case--asoc .asoc-lines{display:grid;margin-top:clamp(24px,3vw,40px)}
body.page-case--asoc .asoc-lines > div{display:grid;gap:var(--sp-1);padding-block:var(--sp-3);
  border-top:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-lines > div:last-child{border-bottom:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-lines dt{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.14em;text-transform:uppercase;color:var(--asoc-label)}
body.page-case--asoc .asoc-lines dd{margin:0;font-size:var(--t-15);line-height:1.65;
  color:var(--asoc-ink);max-width:46ch;text-wrap:pretty}

/* the identity: principles, then the mark, the type and the palette on the project's paper */
body.page-case--asoc .asoc-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3.6vw,48px);list-style:none;
  padding:clamp(20px,2.4vw,32px) 0 0;border-top:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-principles li{display:grid;gap:var(--sp-1);align-content:start}
body.page-case--asoc .asoc-num{margin:0 0 var(--sp-1);font-family:CaseLibre,Georgia,serif;
  font-size:var(--t-13);letter-spacing:.06em;color:var(--asoc-cinnabar)}
body.page-case--asoc .asoc-principles strong{font-family:CaseLibre,Georgia,serif;
  font-size:var(--t-18);font-weight:400;letter-spacing:0}
body.page-case--asoc .asoc-principles span{font-size:var(--t-15);line-height:1.65;
  color:var(--asoc-muted);max-width:30ch}
body.page-case--asoc .case-sheet{background:var(--asoc-homepaper);
  border-color:var(--asoc-rule)}
body.page-case--asoc .case-sheet .case-mark--plate img{border-color:var(--asoc-rule)}
body.page-case--asoc .case-sheet figcaption{color:var(--asoc-muted)}
body.page-case--asoc .case-plate-frame{border-color:var(--asoc-rule);border-radius:0}
body.page-case--asoc .case-plate figcaption{color:var(--asoc-muted)}
body.page-case--asoc .case-type--paper{border:1px solid var(--asoc-rule)}
body.page-case--asoc .case-palette{margin-top:clamp(20px,2.4vw,32px)}
body.page-case--asoc .case-palette strong{font-family:CaseLibre,Georgia,serif;font-weight:400;
  font-size:var(--t-15)}
body.page-case--asoc .case-palette span:last-child{color:var(--asoc-muted)}
body.page-case--asoc .case-swatch{border-radius:0;border-color:var(--asoc-rule)}

/* the experience, then the same screens at a phone: one narrative, two viewports */
body.page-case--asoc .asoc-mobile .case-gallery{max-width:900px;margin-inline:auto}
body.page-case--asoc #experience .case-gallery{margin-top:var(--sp-3)}

/* the close: the notes, the way on, and the site's commercial section underneath */
body.page-case--asoc .asoc-close__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,64px);align-items:start}
body.page-case--asoc .asoc-k{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.14em;text-transform:uppercase;color:var(--asoc-label);margin-bottom:var(--sp-2)}
body.page-case--asoc .asoc-notes{max-width:64ch;color:var(--asoc-muted)}
body.page-case--asoc .asoc-close__notes .asoc-cta{margin-top:var(--sp-4)}
body.page-case--asoc .case-next{display:grid;gap:var(--sp-1);padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--asoc-rule);background:var(--asoc-homepaper)}
body.page-case--asoc .case-next:hover{border-color:var(--asoc-cinnabar);text-decoration:none}
body.page-case--asoc .case-next strong{font-family:CaseLibre,Georgia,serif;font-weight:400;
  font-size:var(--t-18)}
body.page-case--asoc .case-next .copy{color:var(--asoc-muted);font-size:var(--t-13)}

/* the section index, in the identity's paper */
body.page-case--asoc .asoc-index{width:min(560px,calc(100vw - 32px));max-height:80vh;
  padding:clamp(20px,3vw,32px);background:var(--asoc-paper);color:var(--asoc-ink);
  border:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-index::backdrop{background:rgba(59,25,7,.55)}
body.page-case--asoc .asoc-index__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-index__h{margin:0;font-family:CaseLibre,Georgia,serif;
  font-weight:400;font-size:var(--t-18)}
body.page-case--asoc .asoc-index__close{min-height:44px;min-width:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;color:var(--asoc-muted);border:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-index__close:hover{color:var(--asoc-cinnabar);
  border-color:var(--asoc-cinnabar)}
body.page-case--asoc .asoc-index__list{list-style:none;margin:var(--sp-2) 0 0;padding:0;
  display:grid}
body.page-case--asoc .asoc-index__list a{display:flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-13);color:var(--asoc-ink);
  border-bottom:1px solid var(--asoc-rule)}
body.page-case--asoc .asoc-index__list a:hover{color:var(--asoc-cinnabar);text-decoration:none}
body.page-case--asoc :focus-visible{outline:2px solid var(--asoc-cinnabar);outline-offset:3px}

@media (max-width:900px){
  /* three children in a two-column bar (mark, context, menu) would wrap the menu onto a
     second row inside the fixed 72px bar. */
  body.page-case--asoc .nav-inner{grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--sp-1)}
  body.page-case--asoc .asoc-open__grid,
  body.page-case--asoc .asoc-thinking,
  body.page-case--asoc .asoc-close__grid{grid-template-columns:minmax(0,1fr)}
  body.page-case--asoc .asoc-open__grid{gap:clamp(20px,4vw,32px)}
  body.page-case--asoc .asoc-thinking{gap:clamp(20px,4vw,32px)}
  body.page-case--asoc .asoc-thinking .case-plate{order:2}
  body.page-case--asoc .asoc-thinking__copy{order:1}
  body.page-case--asoc .asoc-principles{grid-template-columns:minmax(0,1fr);
    gap:var(--sp-3)}
  body.page-case--asoc .asoc-mobile .case-gallery{grid-template-columns:minmax(0,1fr)}
  body.page-case--asoc .asoc-mobile .case-plate{max-width:min(100%,340px);margin-inline:auto}
}
@media (max-width:640px){
  /* the reference's three-line composition: Knowledge, / made / discoverable. */
  body.page-case--asoc .asoc-w{display:block}
  body.page-case--asoc .asoc-h1{max-width:none;font-size:clamp(34px,8.6vw,46px)}
  body.page-case--asoc .asoc-h2{max-width:none}
  body.page-case--asoc .asoc-lead{max-width:none}
  body.page-case--asoc .asoc-facts{grid-template-columns:minmax(0,1fr);
    gap:var(--sp-3);padding-block:var(--sp-3)}
  body.page-case--asoc .nav-context{font-size:10px;letter-spacing:.1em;line-height:1.35}
  body.page-case--asoc .asoc-chapters__inner{min-height:52px;gap:var(--sp-1)}
  body.page-case--asoc .asoc-chapters__list a,body.page-case--asoc .asoc-chapters__all{
    font-size:10px;letter-spacing:.08em;padding-inline:2px}
  body.page-case--asoc .case-palette,body.page-case--asoc .case-palette[data-count="5"]{
    grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  body.page-case--asoc .case-swatch{height:72px}
  /* a specimen has to stay readable on a phone: two sizes down, and it may break anywhere */
  body.page-case--asoc .case-type-cell{padding:var(--sp-3)}
  body.page-case--asoc .case-type-spec{font-size:clamp(20px,6.4vw,28px);
    overflow-wrap:anywhere}
  body.page-case--asoc .case-type-family,body.page-case--asoc .case-type-role{
    overflow-wrap:anywhere}
  body.page-case--asoc .case-sheet{padding:var(--sp-3)}
  body.page-case--asoc .asoc-open__facts{margin-top:var(--sp-4)}
}

/* ---- /work/brainybaobei/ (page cycle 2026-10-30). The approved case study,
   carried in the project's own identity instead of the site's service-page treatment:
   warm paper #E8E2DE, homepage paper #CDC6C3, ink #181818, cinnabar #5D4B4E and bronze
   #8A8280, on this route only. The artwork opens beside the headline, four chapters name
   the way through, and the identity bands sit on the paper the identity was drawn for.
   Every tint below is mixed from the identity's own two grounds, so the page introduces
   no colour the project does not publish. Ink on paper measures 13.7:1, cinnabar 4.6:1;
   the small uppercase labels take bronze mixed half into ink (7.4:1), because bronze alone
   is 3.9:1 on paper and would have been a label nobody could read. The display face is the client's own
   Libre Baskerville (CasePhilosopher, already served by the specimen band above), set against the
   house serif's true italic: two real faces, no synthesised oblique. ---- */
body.page-case--bb{
  --bb-paper:#E8E2DE;--bb-homepaper:#CDC6C3;--bb-ink:#181818;
  --bb-cinnabar:#5D4B4E;--bb-bronze:#8A8280;
  --bb-muted:color-mix(in srgb,var(--bb-ink) 76%,var(--bb-paper));
  --bb-label:color-mix(in srgb,var(--bb-bronze) 50%,var(--bb-ink));
  --bb-rule:color-mix(in srgb,var(--bb-ink) 20%,var(--bb-paper));
  --surface:var(--bb-paper);--surface-recessed:var(--bb-homepaper);
  --surface-card:var(--bb-homepaper);
  --text-primary:var(--bb-ink);--text-secondary:var(--bb-muted);
  --border-subtle:var(--bb-rule);--focus-ring:var(--bb-cinnabar);
  background:var(--bb-paper);color:var(--bb-ink)}
/* The case is the current page, so its bands carry the identity's action colour. The closing
   commercial section and the footer are the site's, and keep the site's blue. */
body.page-case--bb .bb-open,
body.page-case--bb .bb-band,
body.page-case--bb .bb-chapters,
body.page-case--bb .bb-index{--action:var(--bb-cinnabar);--action-hover:var(--bb-ink)}
body.page-case--bb .section.on-dark{--action:var(--pulse-blue);--focus-ring:var(--pulse-cyan)}

/* the bar: the case's own context, on the case's own paper, no audit button */
body.page-case--bb .nav,body.page-case--bb .nav.scrolled{
  background:var(--bb-paper);color:var(--bb-ink);border-bottom:1px solid var(--bb-rule)}
body.page-case--bb .nav.scrolled{box-shadow:0 10px 30px rgba(24,24,24,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--bb .nav-mark img{filter:none}
body.page-case--bb .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4}
body.page-case--bb .nav-context-k{color:var(--bb-muted)}
body.page-case--bb .nav-context-v{color:var(--bb-ink);font-weight:600}
body.page-case--bb .nav-toggle{border-color:var(--bb-rule);color:var(--bb-ink)}
body.page-case--bb .nav-toggle:hover{border-color:var(--bb-cinnabar);color:var(--bb-cinnabar)}
body.page-case--bb .nav-panel{background:var(--bb-paper);border-bottom:1px solid var(--bb-rule)}
body.page-case--bb .nav-panel a{color:var(--bb-ink)}

/* the opening: headline left, the project's artwork beside it, in the first screen */
body.page-case--bb .bb-open{padding-block:calc(var(--nav-h) + clamp(20px,3vw,44px)) clamp(24px,3vw,40px)}
body.page-case--bb .bb-open__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4.4vw,72px);align-items:center}
body.page-case--bb .bb-kicker{color:var(--bb-cinnabar);letter-spacing:.16em}
body.page-case--bb .bb-h1{margin-top:var(--sp-3);max-width:12ch;
  font-family:CasePhilosopher,Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,84px);
  line-height:.98;letter-spacing:-.02em;text-wrap:balance}
body.page-case--bb .bb-h1 .serif{font-family:var(--font-serif);font-style:italic;
  font-size:.94em;line-height:1.04;margin-top:.06em;padding-bottom:.04em}
body.page-case--bb .bb-w{display:inline}
body.page-case--bb .bb-lead{margin-top:var(--sp-3);max-width:34ch;color:var(--bb-muted)}
body.page-case--bb .bb-actions{margin-top:var(--sp-4)}
body.page-case--bb .bb-cta{display:inline-flex;align-items:center;gap:var(--sp-1);
  min-height:44px;font-family:var(--font-display);font-size:var(--t-12);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bb-cinnabar);
  border-bottom:1px solid color-mix(in srgb,var(--bb-cinnabar) 42%,transparent);
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--bb .bb-cta:hover{color:var(--bb-ink);text-decoration:none;
  border-bottom-color:var(--bb-ink)}
body.page-case--bb .bb-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--bb .bb-cta:hover .ico{transform:translate(2px,-2px)}
body.page-case--bb .bb-art{display:grid;gap:var(--sp-2);margin:0}
body.page-case--bb .bb-art__frame{display:block;overflow:hidden;
  border:1px solid var(--bb-rule);background:var(--bb-homepaper)}
body.page-case--bb .bb-art__frame img{display:block;width:100%;height:auto}
body.page-case--bb .bb-art figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--bb-muted)}
body.page-case--bb .bb-open__facts{margin-top:clamp(32px,4vw,56px)}
body.page-case--bb .bb-facts{border-top:1px solid var(--bb-rule);padding-block:var(--sp-4)}
body.page-case--bb .bb-facts .fact dt{color:var(--bb-label)}
body.page-case--bb .bb-facts .fact dd{font-size:var(--t-18);color:var(--bb-ink)}

/* the chapter rail: sticky under the bar, the current chapter inked, progress underneath */
/* html already carries scroll-padding-top: var(--nav-h), so the target's own margin is the
   rest of the offset: 64px lands a jumped-to section just under the 125px bar + rail. */
body.page-case--bb [id]{scroll-margin-top:64px}
body.page-case--bb .bb-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--bb-paper) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bb-rule)}
body.page-case--bb .bb-chapters__inner{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);min-height:56px}
body.page-case--bb .bb-chapters__list{display:flex;gap:clamp(8px,1.8vw,28px);
  min-width:0;overflow-x:auto;scrollbar-width:none}
body.page-case--bb .bb-chapters__list::-webkit-scrollbar{display:none}
body.page-case--bb .bb-chapters__list li{flex:none}
body.page-case--bb .bb-chapters__list a,body.page-case--bb .bb-chapters__all{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;
  font-family:var(--font-display);font-size:var(--t-11);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bb-muted);border-bottom:1px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--bb .bb-chapters__list a:hover,body.page-case--bb .bb-chapters__all:hover{
  color:var(--bb-cinnabar);text-decoration:none}
body.page-case--bb .bb-chapters__list a[aria-current]{color:var(--bb-ink);
  border-bottom-color:var(--bb-cinnabar)}
body.page-case--bb .bb-chapters__all{flex:none;color:var(--bb-ink);
  border-bottom-color:var(--bb-rule)}
body.page-case--bb .bb-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--bb-cinnabar);transform:scaleX(0);transform-origin:0 50%}

/* the bands */
body.page-case--bb .bb-band{padding-block:clamp(48px,6.4vw,104px);
  border-top:1px solid var(--bb-rule)}
body.page-case--bb .bb-h2{font-family:CasePhilosopher,Georgia,serif;font-weight:400;
  letter-spacing:-.015em;font-size:clamp(28px,3.2vw,52px);line-height:1.04;max-width:20ch}
body.page-case--bb .bb-h2 .serif{font-family:var(--font-serif);font-style:italic;
  font-size:.96em}
body.page-case--bb .bb-h3{margin-top:clamp(40px,5vw,72px);padding-top:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bb-label);border-top:1px solid var(--bb-rule)}
body.page-case--bb .bb-note{margin-top:var(--sp-2);max-width:62ch;
  color:var(--bb-muted);font-size:var(--t-15);line-height:1.65}

/* the thinking: the explanation and the catalogue screen it describes, side by side */
body.page-case--bb .bb-thinking{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.6vw,72px);align-items:center}
body.page-case--bb .bb-lines{display:grid;margin-top:clamp(24px,3vw,40px)}
body.page-case--bb .bb-lines > div{display:grid;gap:var(--sp-1);padding-block:var(--sp-3);
  border-top:1px solid var(--bb-rule)}
body.page-case--bb .bb-lines > div:last-child{border-bottom:1px solid var(--bb-rule)}
body.page-case--bb .bb-lines dt{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bb-label)}
body.page-case--bb .bb-lines dd{margin:0;font-size:var(--t-15);line-height:1.65;
  color:var(--bb-ink);max-width:46ch;text-wrap:pretty}

/* the identity: principles, then the mark, the type and the palette on the project's paper */
body.page-case--bb .bb-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3.6vw,48px);list-style:none;
  padding:clamp(20px,2.4vw,32px) 0 0;border-top:1px solid var(--bb-rule)}
body.page-case--bb .bb-principles li{display:grid;gap:var(--sp-1);align-content:start}
body.page-case--bb .bb-num{margin:0 0 var(--sp-1);font-family:CasePhilosopher,Georgia,serif;
  font-size:var(--t-13);letter-spacing:.06em;color:var(--bb-cinnabar)}
body.page-case--bb .bb-principles strong{font-family:CasePhilosopher,Georgia,serif;
  font-size:var(--t-18);font-weight:400;letter-spacing:0}
body.page-case--bb .bb-principles span{font-size:var(--t-15);line-height:1.65;
  color:var(--bb-muted);max-width:30ch}
body.page-case--bb .case-sheet{background:var(--bb-homepaper);
  border-color:var(--bb-rule)}
body.page-case--bb .case-sheet .case-mark--plate img{border-color:var(--bb-rule)}
body.page-case--bb .case-sheet figcaption{color:var(--bb-muted)}
body.page-case--bb .case-plate-frame{border-color:var(--bb-rule);border-radius:0}
body.page-case--bb .case-plate figcaption{color:var(--bb-muted)}
body.page-case--bb .case-type--paper{border:1px solid var(--bb-rule)}
body.page-case--bb .case-palette{margin-top:clamp(20px,2.4vw,32px)}
body.page-case--bb .case-palette strong{font-family:CasePhilosopher,Georgia,serif;font-weight:400;
  font-size:var(--t-15)}
body.page-case--bb .case-palette span:last-child{color:var(--bb-muted)}
body.page-case--bb .case-swatch{border-radius:0;border-color:var(--bb-rule)}

/* the experience, then the same screens at a phone: one narrative, two viewports */
body.page-case--bb .bb-mobile .case-gallery{max-width:900px;margin-inline:auto}
body.page-case--bb #experience .case-gallery{margin-top:var(--sp-3)}

/* the close: the notes, the way on, and the site's commercial section underneath */
body.page-case--bb .bb-close__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,64px);align-items:start}
body.page-case--bb .bb-k{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bb-label);margin-bottom:var(--sp-2)}
body.page-case--bb .bb-notes{max-width:64ch;color:var(--bb-muted)}
body.page-case--bb .bb-close__notes .bb-cta{margin-top:var(--sp-4)}
body.page-case--bb .case-next{display:grid;gap:var(--sp-1);padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--bb-rule);background:var(--bb-homepaper)}
body.page-case--bb .case-next:hover{border-color:var(--bb-cinnabar);text-decoration:none}
body.page-case--bb .case-next strong{font-family:CasePhilosopher,Georgia,serif;font-weight:400;
  font-size:var(--t-18)}
body.page-case--bb .case-next .copy{color:var(--bb-muted);font-size:var(--t-13)}

/* the section index, in the identity's paper */
body.page-case--bb .bb-index{width:min(560px,calc(100vw - 32px));max-height:80vh;
  padding:clamp(20px,3vw,32px);background:var(--bb-paper);color:var(--bb-ink);
  border:1px solid var(--bb-rule)}
body.page-case--bb .bb-index::backdrop{background:rgba(24,24,24,.55)}
body.page-case--bb .bb-index__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--bb-rule)}
body.page-case--bb .bb-index__h{margin:0;font-family:CasePhilosopher,Georgia,serif;
  font-weight:400;font-size:var(--t-18)}
body.page-case--bb .bb-index__close{min-height:44px;min-width:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bb-muted);border:1px solid var(--bb-rule)}
body.page-case--bb .bb-index__close:hover{color:var(--bb-cinnabar);
  border-color:var(--bb-cinnabar)}
body.page-case--bb .bb-index__list{list-style:none;margin:var(--sp-2) 0 0;padding:0;
  display:grid}
body.page-case--bb .bb-index__list a{display:flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-13);color:var(--bb-ink);
  border-bottom:1px solid var(--bb-rule)}
body.page-case--bb .bb-index__list a:hover{color:var(--bb-cinnabar);text-decoration:none}
body.page-case--bb :focus-visible{outline:2px solid var(--bb-cinnabar);outline-offset:3px}

@media (max-width:900px){
  /* three children in a two-column bar (mark, context, menu) would wrap the menu onto a
     second row inside the fixed 72px bar. */
  body.page-case--bb .nav-inner{grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--sp-1)}
  body.page-case--bb .bb-open__grid,
  body.page-case--bb .bb-thinking,
  body.page-case--bb .bb-close__grid{grid-template-columns:minmax(0,1fr)}
  body.page-case--bb .bb-open__grid{gap:clamp(20px,4vw,32px)}
  body.page-case--bb .bb-thinking{gap:clamp(20px,4vw,32px)}
  body.page-case--bb .bb-thinking .case-plate{order:2}
  body.page-case--bb .bb-thinking__copy{order:1}
  body.page-case--bb .bb-principles{grid-template-columns:minmax(0,1fr);
    gap:var(--sp-3)}
  body.page-case--bb .bb-mobile .case-gallery{grid-template-columns:minmax(0,1fr)}
  body.page-case--bb .bb-mobile .case-plate{max-width:min(100%,340px);margin-inline:auto}
}
@media (max-width:640px){
  /* the reference's three-line composition: Knowledge, / made / discoverable. */
  body.page-case--bb .bb-w{display:block}
  body.page-case--bb .bb-h1{max-width:none;font-size:clamp(34px,8.6vw,46px)}
  body.page-case--bb .bb-h2{max-width:none}
  body.page-case--bb .bb-lead{max-width:none}
  body.page-case--bb .bb-facts{grid-template-columns:minmax(0,1fr);
    gap:var(--sp-3);padding-block:var(--sp-3)}
  body.page-case--bb .nav-context{font-size:10px;letter-spacing:.1em;line-height:1.35}
  body.page-case--bb .bb-chapters__inner{min-height:52px;gap:var(--sp-1)}
  body.page-case--bb .bb-chapters__list a,body.page-case--bb .bb-chapters__all{
    font-size:10px;letter-spacing:.08em;padding-inline:2px}
  body.page-case--bb .case-palette,body.page-case--bb .case-palette[data-count="5"]{
    grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  body.page-case--bb .case-swatch{height:72px}
  /* a specimen has to stay readable on a phone: two sizes down, and it may break anywhere */
  body.page-case--bb .case-type-cell{padding:var(--sp-3)}
  body.page-case--bb .case-type-spec{font-size:clamp(20px,6.4vw,28px);
    overflow-wrap:anywhere}
  body.page-case--bb .case-type-family,body.page-case--bb .case-type-role{
    overflow-wrap:anywhere}
  body.page-case--bb .case-sheet{padding:var(--sp-3)}
  body.page-case--bb .bb-open__facts{margin-top:var(--sp-4)}
}

/* ---- BrainyBaobei's own faces and accents (page cycle 2026-10-30). The project publishes
   Mulish for reading and Philosopher for display, and both are served from its own files, so
   the case is set in the identity's real typefaces rather than a house substitute. Pink is a
   fill, never text: #FFC1CB on warm grey measures 1.15:1, so every label, link and eyebrow
   uses a rose mixed 30 percent into ink (#5D4B4E, 4.8:1 on paper) and pink carries the mark
   plate, the active chapter and the read line. ---- */
@font-face{font-family:CasePhilosopher;src:url('../fonts/philosopher-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:CasePhilosopher;src:url('../fonts/philosopher-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:CaseMulish;src:url('../fonts/mulish-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:CaseMulish;src:url('../fonts/mulish-600.woff2') format('woff2');font-weight:600;font-display:swap}
.sw-bb-pink{background:#FFC1CB}
.sw-bb-warmgrey{background:#CDC6C3}
.sw-bb-ink{background:#181818}
body.page-case--bb .bb-open,body.page-case--bb .bb-band,body.page-case--bb .bb-close,
body.page-case--bb .bb-chapters,body.page-case--bb .bb-index{
  font-family:CaseMulish,"Helvetica Neue",Arial,sans-serif}
body.page-case--bb .bb-h1,body.page-case--bb .bb-h2,body.page-case--bb .bb-h3{
  font-family:CasePhilosopher,Georgia,serif;font-weight:400;letter-spacing:-.01em}
body.page-case--bb .bb-h1 .serif,body.page-case--bb .bb-h2 .serif{
  display:block;font-family:CasePhilosopher,Georgia,serif;font-style:italic}
body.page-case--bb .bb-logo{display:block;width:clamp(44px,4vw,64px);height:auto;
  margin-bottom:var(--sp-3)}
body.page-case--bb .case-mark--ground-pink{background:#FFC1CB}
body.page-case--bb .case-mark--ground-pink img{mix-blend-mode:multiply}
/* The headline's second line is two words: "of you." is one phrase and must not split between
   them on a phone, where the italic pair would otherwise break after "of" and strand it. */
body.page-case--bb .bb-h1 .serif{white-space:nowrap}
@media (max-width:767px){
  body.page-case--bb .bb-open__grid{grid-template-columns:minmax(0,1fr)}
  body.page-case--bb .bb-h1{font-size:clamp(44px,12.5vw,72px)}
  body.page-case--bb .bb-chapters{position:static}
  /* Four chapter names do not fit a phone at reading size: the rail scrolls sideways inside
     itself instead of squeezing every label into an abbreviation nobody can read. */
  body.page-case--bb .bb-chapters__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--sp-3);align-items:center}
  body.page-case--bb .bb-chapters__list{display:flex;gap:clamp(16px,4vw,24px);overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0;padding:0 0 2px;list-style:none;
    /* The rail is wider than the phone, so the last chip fades out instead of being cut
       mid-word: the fade is the affordance that says there is more to scroll. */
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent 100%)}
  body.page-case--bb .bb-chapters__list::-webkit-scrollbar{display:none}
  body.page-case--bb .bb-chapters__list li{flex:0 0 auto}
  body.page-case--bb .bb-chapters__list a{white-space:nowrap;display:inline-block;
    padding-block:12px;min-height:44px}
}

/* The identity band reads as two columns -- the mark and the palette it belongs to -- rather
   than a ground-wide plate around a small logo. */
body.page-case--bb .bb-idgrid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,72px);align-items:stretch}
body.page-case--bb .bb-idgrid .bb-block{margin-top:clamp(24px,3vw,40px);display:flex;
  flex-direction:column}
body.page-case--bb .bb-mark{display:grid;gap:var(--sp-3);align-content:center;justify-items:center;
  margin:0;flex:1;min-height:clamp(220px,22vw,320px);
  padding:clamp(28px,3.4vw,52px);background:#FFC1CB}
body.page-case--bb .bb-mark img{width:clamp(96px,10vw,150px);height:auto;mix-blend-mode:multiply}
body.page-case--bb .bb-mark figcaption{font-size:var(--t-13);line-height:1.5;color:#3B3133;
  text-align:center}
body.page-case--bb .bb-palette{grid-template-columns:minmax(0,1fr);flex:1;grid-auto-rows:1fr;
  align-content:stretch}
@media (max-width:899px){body.page-case--bb .bb-idgrid{grid-template-columns:minmax(0,1fr)}}

/* ---- /work/edenne/ (page cycle 2026-10-30). The approved case carried in the project's own
   day and night system: the day is blush #FAEDF5 with plum #392335 and blossom #FF9BD3, the
   night is #251323 with a warm off-white and fuchsia #D8419A. The page is the demonstration
   rather than a description of it: the opening is the day paper, the identity band prints
   each lockup on the ground it was drawn for, and the experience band flips to the night
   ground under the desktop screens. Every rule is scoped to body.page-case--ed, so the site's
   tokens are not repainted and the shared conversion band and footer keep their own colours.
   Measured contrast: plum on day 12.6:1, muted plum 5.4:1, warm off-white on night 13.2:1.
   Fuchsia on day measures 3.6:1 and blossom on day 1.7:1, so neither carries small text: they
   fill the swatches and the display accent, and every label is plum. Display type is Montserrat
   against Noto Serif Display's true italic, both already self-hosted by this site. ---- */
body.page-case--ed{
  --ed-day:#FAEDF5;--ed-plum:#392335;--ed-blossom:#FF9BD3;
  --ed-night:#251323;--ed-fuchsia:#D8419A;
  --ed-warm:color-mix(in srgb,var(--ed-day) 92%,var(--ed-night));
  --ed-muted:color-mix(in srgb,var(--ed-plum) 74%,var(--ed-day));
  --ed-rule:color-mix(in srgb,var(--ed-plum) 18%,var(--ed-day));
  --surface:var(--ed-day);--surface-recessed:var(--ed-night);--surface-card:var(--ed-day);
  --text-primary:var(--ed-plum);--text-secondary:var(--ed-muted);
  --border-subtle:var(--ed-rule);--focus-ring:var(--ed-plum);
  background:var(--ed-day);color:var(--ed-plum)}
/* the case is the current page, so its bands take the identity's action colour; the closing
   commercial section and the footer are the site's and keep the site's blue. */
body.page-case--ed .ed-open,
body.page-case--ed .ed-band,
body.page-case--ed .ed-chapters,
body.page-case--ed .ed-index{--action:var(--ed-plum);--action-hover:var(--ed-night)}
body.page-case--ed .section.on-dark{--action:var(--pulse-blue);--focus-ring:var(--pulse-cyan)}

/* the bar: the case's own context on the day paper, no audit button */
body.page-case--ed .nav,body.page-case--ed .nav.scrolled{
  background:var(--ed-day);color:var(--ed-plum);border-bottom:1px solid var(--ed-rule)}
body.page-case--ed .nav.scrolled{box-shadow:0 10px 30px rgba(57,35,53,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--ed .nav-mark img{filter:none}
body.page-case--ed .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4}
body.page-case--ed .nav-context-k{color:var(--ed-muted)}
body.page-case--ed .nav-context-v{color:var(--ed-plum);font-weight:600}
body.page-case--ed .nav-toggle{border-color:var(--ed-rule);color:var(--ed-plum)}
body.page-case--ed .nav-toggle:hover{border-color:var(--ed-fuchsia);color:var(--ed-plum)}
body.page-case--ed .nav-panel{background:var(--ed-day);border-bottom:1px solid var(--ed-rule)}
body.page-case--ed .nav-panel a{color:var(--ed-plum)}

/* the opening: the lockup, the headline with its italic second line and the artwork in the
   same screen, on the paper the identity was drawn for */
body.page-case--ed .ed-open{background:var(--ed-day);color:var(--ed-plum);
  /* the day bloom is a soft plate behind the artwork and is deliberately larger than its
     frame, so the section clips it instead of letting it widen the page. */
  overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(24px,3.2vw,48px)) clamp(32px,4vw,56px)}
body.page-case--ed .ed-open__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.4vw,72px);align-items:center}
body.page-case--ed .ed-lockup{display:block;width:clamp(148px,16vw,224px);height:auto}
body.page-case--ed .ed-kicker{margin-top:clamp(18px,2.2vw,28px);color:var(--ed-muted);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase}
body.page-case--ed .ed-h1{margin-top:var(--sp-2);font-family:var(--font-display);font-weight:500;
  font-size:clamp(42px,6.4vw,96px);line-height:.94;letter-spacing:-.03em;text-wrap:balance}
body.page-case--ed .ed-h1 .serif{display:block;margin-top:.06em;font-family:var(--font-serif);
  font-style:italic;font-weight:300;font-size:.9em;line-height:1.02;letter-spacing:-.01em}
body.page-case--ed .ed-lead{margin-top:clamp(18px,2.2vw,28px);max-width:36ch;
  font-size:var(--t-18);line-height:1.6;color:var(--ed-muted)}
body.page-case--ed .ed-actions{margin-top:clamp(22px,2.8vw,34px);display:flex;flex-wrap:wrap;
  align-items:center;gap:clamp(16px,2.4vw,28px)}
body.page-case--ed .ed-cta{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ed-plum);
  border-bottom:1px solid color-mix(in srgb,var(--ed-plum) 42%,transparent);
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--ed .ed-cta:hover{color:var(--ed-plum);text-decoration:none;
  border-bottom-color:var(--ed-plum)}
body.page-case--ed .ed-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--ed .ed-cta:hover .ico{transform:translate(2px,-2px)}
/* The pause control is revealed by site.js only where there is motion to pause, so a reader
   who asked for reduced motion never meets a button that controls nothing. It is a real
   button, its aria-pressed is the state (pressed = paused), and the glow it governs starts
   still and only animates under html.has-motion. */
body.page-case--ed .ed-motion{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ed-muted);
  border:1px solid var(--ed-rule);background:transparent}
body.page-case--ed .ed-motion:hover{color:var(--ed-plum);border-color:var(--ed-plum)}
body.page-case--ed .ed-motion[aria-pressed="true"]{color:var(--ed-plum);border-color:var(--ed-plum)}

/* the artwork: the day bloom behind the frame is the only thing on the page that moves */
body.page-case--ed .ed-art-wrap{position:relative;isolation:isolate;display:block}
body.page-case--ed .ed-glow{position:absolute;z-index:-1;inset:-16% -12% -14% -10%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--ed-blossom) 62%,transparent),transparent 78%);
  opacity:.85;pointer-events:none}
body.page-case--ed .ed-art{display:grid;gap:var(--sp-2);margin:0}
body.page-case--ed .ed-art__frame{display:block;overflow:hidden;background:var(--ed-night);
  border:1px solid color-mix(in srgb,var(--ed-plum) 26%,var(--ed-day))}
body.page-case--ed .ed-art__frame img{display:block;width:100%;height:auto}
body.page-case--ed .ed-art figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--ed-muted)}
body.page-case--ed .ed-open__facts{margin-top:clamp(32px,4vw,56px)}
body.page-case--ed .ed-facts{border-top:1px solid var(--ed-rule);padding-block:var(--sp-4)}
body.page-case--ed .ed-facts .fact dt{color:var(--ed-muted)}
body.page-case--ed .ed-facts .fact dd{font-size:var(--t-18);color:var(--ed-plum)}

/* the chapter rail: sticky under the bar, the current chapter inked, progress underneath */
body.page-case--ed [id]{scroll-margin-top:64px}
body.page-case--ed .ed-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--ed-day) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ed-rule)}
body.page-case--ed .ed-chapters__inner{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);min-height:56px}
body.page-case--ed .ed-chapters__list{display:flex;gap:clamp(8px,1.8vw,28px);
  min-width:0;overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
body.page-case--ed .ed-chapters__list::-webkit-scrollbar{display:none}
body.page-case--ed .ed-chapters__list li{flex:none}
body.page-case--ed .ed-chapters__list a,body.page-case--ed .ed-chapters__all{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;
  background:none;border:0;border-bottom:1px solid transparent;
  font-family:var(--font-display);font-size:var(--t-11);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ed-muted);
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--ed .ed-chapters__list a:hover,body.page-case--ed .ed-chapters__all:hover{
  color:var(--ed-plum);text-decoration:none}
body.page-case--ed .ed-chapters__list a[aria-current]{color:var(--ed-plum);
  border-bottom-color:var(--ed-fuchsia)}
body.page-case--ed .ed-chapters__all{flex:none;color:var(--ed-plum);
  border-bottom-color:var(--ed-rule)}
body.page-case--ed .ed-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ed-fuchsia);transform:scaleX(0);transform-origin:0 50%}

/* the bands */
body.page-case--ed .ed-band{padding-block:clamp(52px,6.4vw,104px);
  border-top:1px solid var(--ed-rule)}
body.page-case--ed .ed-h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(30px,3.6vw,56px);line-height:1.02;max-width:22ch}
body.page-case--ed .ed-h2 .serif{display:block;font-family:var(--font-serif);font-style:italic;
  font-weight:300;font-size:.94em;letter-spacing:-.01em;margin-top:.04em}
body.page-case--ed .ed-h3{margin-top:clamp(40px,5vw,72px);padding-top:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ed-muted);border-top:1px solid var(--ed-rule)}

/* the thinking: the intention and the direction capture beside it */
body.page-case--ed .ed-thinking{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.6vw,72px);align-items:center}
body.page-case--ed .ed-lines{display:grid;margin-top:clamp(24px,3vw,40px)}
body.page-case--ed .ed-lines > div{display:grid;gap:var(--sp-1);padding-block:var(--sp-3);
  border-top:1px solid var(--ed-rule)}
body.page-case--ed .ed-lines > div:last-child{border-bottom:1px solid var(--ed-rule)}
body.page-case--ed .ed-lines dt{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ed-muted)}
body.page-case--ed .ed-lines dd{margin:0;font-size:var(--t-15);line-height:1.65;
  color:var(--ed-plum);max-width:46ch;text-wrap:pretty}

/* the identity: the principles, then each lockup on the ground it was drawn for, then the
   symbol, the app icon and the five published values */
body.page-case--ed .ed-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);margin-top:clamp(28px,3.6vw,48px);list-style:none;
  padding:clamp(20px,2.4vw,32px) 0 0;border-top:1px solid var(--ed-rule)}
body.page-case--ed .ed-principles li{display:grid;gap:var(--sp-1);align-content:start}
body.page-case--ed .ed-num{margin:0 0 var(--sp-1);font-family:var(--font-serif);
  font-style:italic;font-size:var(--t-13);color:var(--ed-muted)}
body.page-case--ed .ed-principles strong{font-family:var(--font-display);font-weight:600;
  font-size:var(--t-18);letter-spacing:-.01em;color:var(--ed-plum)}
body.page-case--ed .ed-principles span{font-size:var(--t-15);line-height:1.65;
  color:var(--ed-muted);max-width:30ch}

body.page-case--ed .ed-lockups{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,28px);margin-top:clamp(24px,3vw,36px)}
body.page-case--ed .ed-lockup{display:grid;gap:var(--sp-3);margin:0;
  padding:clamp(24px,3.2vw,48px);align-content:center}
body.page-case--ed .ed-lockup--day{background:var(--ed-day);border:1px solid var(--ed-rule)}
body.page-case--ed .ed-lockup--night{background:var(--ed-night);
  border:1px solid color-mix(in srgb,var(--ed-fuchsia) 42%,var(--ed-night))}
body.page-case--ed .ed-lockup img{display:block;width:100%;height:auto}
body.page-case--ed .ed-lockup figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--ed-muted)}
body.page-case--ed .ed-lockup--night figcaption{color:color-mix(in srgb,var(--ed-warm) 80%,var(--ed-night))}

body.page-case--ed .ed-symbols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,28px);margin-top:clamp(16px,2.4vw,28px)}
body.page-case--ed .ed-symbol{display:grid;gap:var(--sp-3);margin:0;justify-items:center;
  align-content:center;min-height:clamp(220px,24vw,320px);padding:clamp(24px,3.2vw,44px);
  background:var(--ed-day);border:1px solid var(--ed-rule)}
body.page-case--ed .ed-symbol--mark img{width:clamp(96px,11vw,150px);height:auto}
body.page-case--ed .ed-symbol--icon img{width:clamp(84px,9vw,120px);height:auto}
body.page-case--ed .ed-symbol figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--ed-muted);text-align:center}

/* the five published values, one row, each chip the value itself */
body.page-case--ed .ed-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);margin-top:clamp(16px,2vw,24px);list-style:none;padding:0}
body.page-case--ed .ed-palette li{display:grid;gap:var(--sp-1);align-content:start}
body.page-case--ed .ed-palette .case-swatch{height:clamp(64px,7vw,104px);border-radius:0;
  border:1px solid color-mix(in srgb,var(--ed-plum) 34%,var(--ed-day))}
body.page-case--ed .ed-palette strong{font-family:var(--font-display);font-weight:600;
  font-size:var(--t-13);color:var(--ed-plum)}
body.page-case--ed .ed-palette span:last-child{font-size:var(--t-11);color:var(--ed-muted)}

/* the five chips carry the values themselves; the names are namespaced so no other page
   can pick them up */
.sw-ed-day{background:#FAEDF5}
.sw-ed-plum{background:#392335}
.sw-ed-blossom{background:#FF9BD3}
.sw-ed-night{background:#251323}
.sw-ed-fuchsia{background:#D8419A}

/* the experience: the night ground, and the desktop screens at content width */
body.page-case--ed .ed-band.ed-night{background:var(--ed-night);color:var(--ed-warm);
  border-top:1px solid color-mix(in srgb,var(--ed-fuchsia) 45%,var(--ed-night));
  --ed-rule:color-mix(in srgb,var(--ed-warm) 20%,var(--ed-night));
  --ed-muted:color-mix(in srgb,var(--ed-warm) 78%,var(--ed-night))}
body.page-case--ed .ed-night .ed-h2{color:var(--ed-warm)}
body.page-case--ed .ed-night .case-plate-frame{border-color:var(--ed-rule);
  background:var(--ed-night)}
body.page-case--ed .ed-night .case-plate figcaption{color:var(--ed-muted)}
body.page-case--ed .ed-desktop{margin-top:clamp(28px,3.6vw,48px);gap:clamp(24px,3.4vw,48px)}

/* on mobile: the product's own 390 by 844 screens, at the phone's ratio */
body.page-case--ed .ed-phones{grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:760px;margin:clamp(28px,3.6vw,44px) auto 0;gap:clamp(16px,2.8vw,40px)}

/* the close: the notes, the way back, and the next case; the site's conversion band sits
   below this as a shared section, not as the case's climax */
body.page-case--ed .ed-close__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,64px);align-items:start}
body.page-case--ed .ed-k{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ed-muted);margin-bottom:var(--sp-2)}
body.page-case--ed .ed-notes{max-width:64ch;color:var(--ed-muted)}
body.page-case--ed .ed-close__notes .ed-cta{margin-top:var(--sp-4)}
body.page-case--ed .case-next{display:grid;gap:var(--sp-1);padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--ed-rule);background:color-mix(in srgb,var(--ed-day) 92%,var(--ed-plum))}
body.page-case--ed .case-next:hover{border-color:var(--ed-fuchsia);text-decoration:none}
body.page-case--ed .case-next strong{font-family:var(--font-display);font-weight:600;
  font-size:var(--t-18);color:var(--ed-plum)}
body.page-case--ed .case-next .copy{color:var(--ed-muted);font-size:var(--t-13)}

/* the section index, on the day paper */
body.page-case--ed .ed-index{width:min(560px,calc(100vw - 32px));max-height:80vh;
  padding:clamp(20px,3vw,32px);background:var(--ed-day);color:var(--ed-plum);
  border:1px solid var(--ed-rule)}
body.page-case--ed .ed-index::backdrop{background:rgba(37,19,35,.55)}
body.page-case--ed .ed-index__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--ed-rule)}
body.page-case--ed .ed-index__h{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-18)}
body.page-case--ed .ed-index__close{min-height:44px;min-width:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ed-muted);border:1px solid var(--ed-rule);
  background:transparent}
body.page-case--ed .ed-index__close:hover{color:var(--ed-plum);border-color:var(--ed-plum)}
body.page-case--ed .ed-index__list{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid}
body.page-case--ed .ed-index__list a{display:flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-13);color:var(--ed-plum);
  border-bottom:1px solid var(--ed-rule)}
body.page-case--ed .ed-index__list a:hover{color:var(--ed-plum);text-decoration:underline;
  text-underline-offset:4px}
body.page-case--ed :focus-visible{outline:2px solid var(--ed-plum);outline-offset:3px}
body.page-case--ed .ed-night :focus-visible{outline-color:var(--ed-warm)}

/* the only motion on the page, and only for a reader who has not asked it to stop */
@keyframes ed-breathe{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:.95;transform:scale(1.04)}}
html.has-motion body.page-case--ed .ed-glow{animation:ed-breathe 11s ease-in-out infinite}
html[data-motion-off] body.page-case--ed .ed-glow{animation:none;opacity:.85;transform:none}
@media (prefers-reduced-motion:reduce){
  body.page-case--ed .ed-glow{animation:none;opacity:.85;transform:none}
  body.page-case--ed *{transition-duration:1ms}
}

@media (max-width:900px){
  /* three children in a two-column bar (mark, context, menu) would wrap the menu onto a
     second row inside the fixed bar. */
  body.page-case--ed .nav-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-1)}
  body.page-case--ed .ed-open__grid,
  body.page-case--ed .ed-thinking,
  body.page-case--ed .ed-close__grid{grid-template-columns:minmax(0,1fr)}
  body.page-case--ed .ed-open__grid,body.page-case--ed .ed-thinking{
    gap:clamp(20px,4vw,32px)}
  body.page-case--ed .ed-thinking .case-plate{order:2}
  body.page-case--ed .ed-thinking__copy{order:1}
  body.page-case--ed .ed-principles{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
}
@media (max-width:640px){
  body.page-case--ed .ed-h1{font-size:clamp(40px,11.5vw,58px)}
  body.page-case--ed .ed-h2{max-width:none}
  body.page-case--ed .ed-lead{max-width:none;font-size:var(--t-16)}
  body.page-case--ed .ed-lockup{width:clamp(132px,42vw,180px)}
  body.page-case--ed .ed-facts{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);
    padding-block:var(--sp-3)}
  body.page-case--ed .nav-context{font-size:10px;letter-spacing:.1em;line-height:1.35}
  /* the rail stays pinned on a phone too: it is the only thing that says which chapter the
     reader is in, and a rail that scrolls away cannot report that. */
  body.page-case--ed .ed-chapters__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:var(--sp-3);align-items:center;min-height:52px}
  /* four chapter names do not fit a phone at reading size: the rail scrolls inside itself
     and fades at the edge that has more to show. */
  body.page-case--ed .ed-chapters__list{display:flex;gap:clamp(14px,3.4vw,22px);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%)}
  body.page-case--ed .ed-chapters__list::-webkit-scrollbar{display:none}
  body.page-case--ed .ed-chapters__list li{flex:0 0 auto}
  body.page-case--ed .ed-chapters__list a{white-space:nowrap;padding-block:12px}
  body.page-case--ed .ed-lockups,
  body.page-case--ed .ed-symbols{grid-template-columns:minmax(0,1fr)}
  body.page-case--ed .ed-lockup{padding:var(--sp-4)}
  body.page-case--ed .ed-symbol{min-height:0;padding:var(--sp-4)}
  body.page-case--ed .ed-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  /* five values in two columns would leave the last row half empty: the fifth chip takes
     the row it would otherwise leave a hole in. */
  body.page-case--ed .ed-palette li:last-child{grid-column:1 / -1}
  body.page-case--ed .ed-palette .case-swatch{height:72px}
  body.page-case--ed .ed-phones{grid-template-columns:minmax(0,1fr);
    max-width:min(100%,340px)}
}

/* ---- /work/firefly-global/ (page cycle 2026-10-30). The approved reference carried this
   healthcare case on pale ice-blue paper (#E1EEF0) with dark editorial ink (#0A1931) and the
   practice's own blue (#2163AF) as the only accent; the rejected rebuild opened it on dark
   navy as an "AI and growth" pitch and never showed the site. The page is therefore the
   reference's composition -- the classification, the name, the deck and David Fairbanks'
   portrait in one screen, the four project facts underneath, then the live site itself in
   three captioned captures, the three decisions and the scope note.
   Measured: ink on ice 14.8:1, muted ink on ice 6.9:1, blue on ice 5.1:1. Every rule is
   scoped to body.page-case--ff, so the site's tokens are not repainted and the shared
   conversion band and footer keep their own colours. ---- */
body.page-case--ff{
  --ff-ground:#E1EEF0;--ff-ink:#0A1931;--ff-accent:#2163AF;
  --ff-muted:color-mix(in srgb,var(--ff-ink) 74%,var(--ff-ground));
  --ff-rule:color-mix(in srgb,var(--ff-ink) 16%,var(--ff-ground));
  --ff-raised:color-mix(in srgb,var(--ff-ground) 52%,#fff);
  --surface:var(--ff-ground);--surface-card:var(--ff-raised);
  --text-primary:var(--ff-ink);--text-secondary:var(--ff-muted);
  --border-subtle:var(--ff-rule);--focus-ring:var(--ff-accent);
  background:var(--ff-ground);color:var(--ff-ink)}
body.page-case--ff .ff-open,
body.page-case--ff .ff-band,
body.page-case--ff .ff-chapters{--action:var(--ff-accent);--action-hover:var(--ff-ink)}
/* the closing commercial band and the footer are the site's own and keep the site's colour */
body.page-case--ff .section.on-dark{--action:var(--pulse-blue);--focus-ring:var(--pulse-cyan)}

/* the bar is the paper the case sits on, not the site's dark gradient: over a pale hero a
   transparent navy bar leaves its mark and its context line unreadable. It carries the case's
   name instead of the four links, and no audit button, so nothing competes with the evidence */
body.page-case--ff .nav,
body.page-case--ff .nav.scrolled{background:color-mix(in srgb,var(--ff-ground) 97%,transparent);
  color:var(--ff-ink);border-bottom:1px solid var(--ff-rule)}
body.page-case--ff .nav.scrolled{box-shadow:0 10px 30px rgba(10,25,49,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--ff .nav-mark img{filter:none}
body.page-case--ff .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4;color:var(--ff-ink)}
body.page-case--ff .nav-context-k{color:var(--ff-muted)}
body.page-case--ff .nav-context-v{color:var(--ff-ink);font-weight:600}
body.page-case--ff .nav-toggle{border-color:var(--ff-rule);color:var(--ff-ink)}
body.page-case--ff .nav-toggle:hover{border-color:var(--ff-accent);color:var(--ff-ink)}

/* the opening: the classification, the name, the deck and the provider's portrait in the same
   screen, on the paper the reference set the case on */
body.page-case--ff .ff-open{background:var(--ff-ground);color:var(--ff-ink);
  padding-block:calc(var(--nav-h) + clamp(28px,3.6vw,56px)) clamp(32px,4vw,56px)}
body.page-case--ff .ff-open__grid{display:grid;
  grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);
  gap:clamp(28px,4.4vw,64px);align-items:start}
body.page-case--ff .ff-kicker{color:var(--ff-muted);letter-spacing:.16em}
body.page-case--ff .ff-h1{margin-top:clamp(14px,1.8vw,24px);
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(48px,6.4vw,100px);line-height:.94;letter-spacing:-.045em;
  text-wrap:balance}
body.page-case--ff .ff-lead{margin-top:clamp(18px,2.4vw,28px);max-width:34ch;
  color:var(--ff-muted);text-wrap:pretty}
/* the portrait is the case's trust evidence, so it is never cropped: a square frame at the
   asset's own ratio, anchored to the top if a frame ever is not square */
body.page-case--ff .ff-portrait{display:grid;gap:var(--sp-2);margin:0;
  justify-self:end;width:min(100%,clamp(220px,26vw,368px))}
body.page-case--ff .ff-portrait__frame{display:block;overflow:hidden;aspect-ratio:1 / 1;
  border:1px solid color-mix(in srgb,var(--ff-ink) 26%,var(--ff-ground));
  background:var(--ff-ink)}
body.page-case--ff .ff-portrait__frame img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center}
body.page-case--ff .ff-portrait figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--ff-muted)}

/* the four project facts, each group a label over its own value */
body.page-case--ff .ff-facts-wrap{margin-top:clamp(32px,4vw,56px)}
body.page-case--ff .ff-facts{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,28px) clamp(20px,2.4vw,40px);
  padding-block:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--ff-rule);border-bottom:1px solid var(--ff-rule)}
body.page-case--ff .ff-facts .fact dt{color:var(--ff-muted)}
body.page-case--ff .ff-facts .fact dd{font-family:var(--font-display);font-size:var(--t-15);
  font-weight:500;line-height:1.4;color:var(--ff-ink);text-wrap:pretty}
body.page-case--ff .ff-scopes{display:grid;gap:2px;margin:0;padding:0;list-style:none;
  font-family:var(--font-body);font-size:var(--t-14);font-weight:400;line-height:1.5}
body.page-case--ff .ff-fact-link{display:inline-flex;align-items:center;gap:var(--sp-0);
  min-height:44px;color:var(--ff-ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--ff-ink) 40%,transparent)}
body.page-case--ff .ff-fact-link:hover{color:var(--ff-accent);text-decoration-color:currentColor}
body.page-case--ff .ff-fact-link .ico{width:14px;height:14px}

/* the chapter rail: three anchors for a short page, pinned under the bar */
body.page-case--ff [id]{scroll-margin-top:calc(var(--nav-h) + 52px)}
body.page-case--ff .ff-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--ff-ground) 94%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ff-rule)}
body.page-case--ff .ff-chapters__inner{display:flex;align-items:center;min-height:52px}
body.page-case--ff .ff-chapters__list{display:flex;gap:clamp(12px,2.2vw,36px);min-width:0;
  overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
body.page-case--ff .ff-chapters__list::-webkit-scrollbar{display:none}
body.page-case--ff .ff-chapters__list li{flex:none}
body.page-case--ff .ff-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-11);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ff-ink);
  border-bottom:1px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--ff .ff-chapters__list a:hover{color:var(--ff-accent);text-decoration:none;
  border-bottom-color:var(--ff-accent)}

/* the bands */
body.page-case--ff .ff-band{padding-block:clamp(48px,6vw,96px);
  border-top:1px solid var(--ff-rule)}
body.page-case--ff .ff-h2{font-family:var(--font-display);font-weight:500;
  font-size:clamp(30px,3.6vw,56px);line-height:1.02;letter-spacing:-.032em;max-width:20ch}
body.page-case--ff .ff-h2 .serif{font-family:var(--font-serif);font-style:italic;
  font-weight:300;font-size:.92em;line-height:1.04;letter-spacing:-.012em;margin-top:.06em}

/* the story: the heading in the left column, Goal and Experience side by side on the right */
body.page-case--ff .ff-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,72px);align-items:start}
body.page-case--ff .ff-story__lines{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px)}
body.page-case--ff .ff-line{padding-top:var(--sp-2);border-top:1px solid var(--ff-rule)}
body.page-case--ff .ff-h3{margin-bottom:var(--sp-1);font-family:var(--font-display);
  font-size:var(--t-12);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ff-ink)}
body.page-case--ff .ff-copy{font-size:var(--t-15);line-height:1.7;color:var(--ff-muted);
  max-width:38ch;text-wrap:pretty}

/* the walkthrough: three captures of the live site at content width, each captioned */
body.page-case--ff .ff-plates{margin-top:clamp(24px,3vw,40px);
  gap:clamp(28px,3.6vw,52px)}
body.page-case--ff .ff-plates .case-plate-frame{border-color:var(--ff-rule);border-radius:0;
  background:var(--ff-raised)}
body.page-case--ff .ff-plates figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--ff-muted);max-width:72ch}

/* the three decisions, numbered, in one row that stacks on a phone */
body.page-case--ff .ff-principles{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);
  margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--ff-rule);list-style:none;counter-reset:ff-p}
body.page-case--ff .ff-principles li{display:grid;gap:var(--sp-1);align-content:start;
  counter-increment:ff-p}
body.page-case--ff .ff-principles li::before{content:counter(ff-p,decimal-leading-zero);
  font-family:var(--font-serif);font-style:italic;font-size:var(--t-18);
  color:var(--ff-accent);margin-bottom:var(--sp-0)}
body.page-case--ff .ff-principles strong{font-family:var(--font-display);font-weight:600;
  font-size:var(--t-18);letter-spacing:-.012em;color:var(--ff-ink)}
body.page-case--ff .ff-principles span{font-size:var(--t-15);line-height:1.65;
  color:var(--ff-muted);max-width:34ch;text-wrap:pretty}

/* the close: the scope note and the next case, sitting on one baseline above the shared
   conversion band, so neither column leaves a hole under the other */
body.page-case--ff .ff-close__grid{display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:clamp(24px,3.2vw,48px);
  align-items:end}
body.page-case--ff .ff-h2--note{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.022em}
body.page-case--ff .ff-note__copy{margin-top:var(--sp-2);max-width:56ch;
  color:var(--ff-ink);text-wrap:pretty}
body.page-case--ff .case-next{padding:clamp(20px,2.4vw,28px);border-color:var(--ff-rule);
  background:var(--ff-raised)}
body.page-case--ff .case-next:hover{border-color:var(--ff-accent)}
body.page-case--ff .case-next .link{color:var(--ff-muted)}
body.page-case--ff .case-next strong{font-size:var(--t-18);font-weight:600;color:var(--ff-ink)}
body.page-case--ff .case-next .copy{color:var(--ff-muted);font-size:var(--t-13)}

/* keyboard focus is visible on every link, button and card on this ground */
body.page-case--ff a:focus-visible,
body.page-case--ff button:focus-visible{outline:2px solid var(--ff-accent);outline-offset:3px}
/* nothing on this page animates; the one transition it carries stops for a reader who asks */
@media (prefers-reduced-motion:reduce){
  body.page-case--ff *{transition-duration:1ms;animation-duration:1ms;animation-iteration-count:1}
}

@media (max-width:1080px){
  body.page-case--ff .ff-open__grid{grid-template-columns:minmax(0,1fr) minmax(0,min(46%,380px))}
  body.page-case--ff .ff-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--ff .ff-story,
  body.page-case--ff .ff-close__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  /* three children in a two-column bar (mark, context, menu) would push the menu onto a
     second row inside the fixed bar */
  body.page-case--ff .nav-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-1)}
  body.page-case--ff .ff-open__grid{grid-template-columns:minmax(0,1fr);
    gap:clamp(24px,4vw,36px)}
  body.page-case--ff .ff-portrait{justify-self:start;width:min(100%,320px)}
  body.page-case--ff .ff-h1{font-size:clamp(44px,8vw,66px)}
  body.page-case--ff .ff-principles{grid-template-columns:minmax(0,1fr);
    gap:var(--sp-3)}
}
@media (max-width:640px){
  body.page-case--ff .ff-h1{font-size:clamp(40px,11.5vw,54px)}
  body.page-case--ff .ff-lead{max-width:none;font-size:var(--t-16)}
  body.page-case--ff .ff-facts{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);
    padding-block:var(--sp-3)}
  body.page-case--ff .ff-story__lines{grid-template-columns:minmax(0,1fr)}
  /* a phone has one column: the portrait claims it, as the reference's own hero image does */
  body.page-case--ff .ff-portrait{width:100%}
  body.page-case--ff .nav-context{font-size:10px;letter-spacing:.1em;line-height:1.35}
  /* three things share a phone bar; the case's own name is the one that must survive, so the
     "Selected work /" key steps out and leaves the name on one line */
  body.page-case--ff .nav-context-k{display:none}
  /* the three chapter names fit a phone on one row; the rail only scrolls if a future label
     makes it longer, so it carries no fade that would dim a label that is already fully in
     view */
  body.page-case--ff .ff-chapters__list{gap:clamp(12px,3.2vw,20px)}
  body.page-case--ff .ff-chapters__list a{white-space:nowrap}
}

/* ---- /work/gramlingo/ (page cycle 2026-10-30). The approved reference carried this case on
   the project's own paper: cream #FFF5EE, dark brown #2D1B10, sunset #FF8C42 and the landing
   green #8FD14F, with the wordmark above the headline and the learning worlds as overlapping,
   rotated artwork beside it. The rejected rebuild opened it on the site's navy hero with no
   project identity in the first screen at all, so this page is the reference's composition:
   cream opening, four facts, chapter rail, then thinking, work, mark, type and palette in the
   order a brand book prints them. Display type is the client's own Baloo 2 against the site's
   Noto Serif italic for the second half of the headline; body copy is the client's DM Sans.
   Measured: brown on cream 13.9:1, muted brown 7.2:1. Sunset on cream is 2.1:1 and landing
   green on cream 1.4:1, so neither carries text: the sunset fills the rule above each
   principle, the chapter underline and the progress line, the green fills the celebrating
   Gramlin's plate, and every label is brown. Every rule is scoped to body.page-case--gl, so
   the site's tokens are not repainted and the shared conversion band and footer keep their
   own colours. ---- */
body.page-case--gl{
  --gl-ground:#FFF5EE;--gl-ink:#2D1B10;--gl-sunset:#FF8C42;--gl-green:#8FD14F;
  --gl-muted:color-mix(in srgb,var(--gl-ink) 72%,var(--gl-ground));
  --gl-rule:color-mix(in srgb,var(--gl-ink) 16%,var(--gl-ground));
  --gl-plate:#fff;
  --surface:var(--gl-ground);--surface-card:var(--gl-plate);
  --text-primary:var(--gl-ink);--text-secondary:var(--gl-muted);
  --border-subtle:var(--gl-rule);--focus-ring:var(--gl-ink);
  background:var(--gl-ground);color:var(--gl-ink)}
body.page-case--gl .gl-open,
body.page-case--gl .gl-band,
body.page-case--gl .gl-chapters,
body.page-case--gl .gl-index{--action:var(--gl-ink);--action-hover:#000}
body.page-case--gl .section.on-dark{--action:var(--pulse-blue);--focus-ring:var(--pulse-cyan)}

/* the bar: the case's own paper and context, and no audit button competing with the case */
body.page-case--gl .nav,body.page-case--gl .nav.scrolled{
  background:color-mix(in srgb,var(--gl-ground) 97%,transparent);color:var(--gl-ink);
  border-bottom:1px solid var(--gl-rule)}
body.page-case--gl .nav.scrolled{box-shadow:0 10px 30px rgba(45,27,16,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--gl .nav-mark img{filter:none}
body.page-case--gl .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4;color:var(--gl-ink)}
body.page-case--gl .nav-context-k{color:var(--gl-muted)}
body.page-case--gl .nav-context-v{color:var(--gl-ink);font-weight:600}
body.page-case--gl .nav-toggle{border-color:var(--gl-rule);color:var(--gl-ink)}
body.page-case--gl .nav-toggle:hover{border-color:var(--gl-ink);color:var(--gl-ink)}
body.page-case--gl .nav-panel{background:var(--gl-ground);border-bottom:1px solid var(--gl-rule)}
body.page-case--gl .nav-panel a{color:var(--gl-ink)}

/* the opening: the wordmark, the classification, the headline with its serif half, the deck
   and the reference's exploration link in one column, the learning worlds in the other */
body.page-case--gl .gl-open{background:var(--gl-ground);color:var(--gl-ink);overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(24px,3.2vw,48px)) clamp(32px,4vw,56px)}
body.page-case--gl .gl-open__grid{display:grid;
  grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);
  gap:clamp(28px,4vw,64px);align-items:center}
body.page-case--gl .gl-logo{display:block;width:clamp(144px,15vw,214px);height:auto}
body.page-case--gl .gl-kicker{margin-top:clamp(16px,2vw,26px);color:var(--gl-muted);
  font-family:CaseDM;font-size:var(--t-11);font-weight:500;letter-spacing:.15em;
  text-transform:uppercase}
body.page-case--gl .gl-h1{margin-top:var(--sp-2);font-family:CaseBaloo;
  font-weight:700;font-size:clamp(44px,6.2vw,98px);line-height:.96;letter-spacing:-.02em;
  text-wrap:balance}
body.page-case--gl .gl-h1 .serif{display:block;margin-top:.04em;font-family:var(--font-serif);
  font-style:italic;font-weight:300;font-size:.9em;line-height:1.02;letter-spacing:-.01em}
body.page-case--gl .gl-lead{margin-top:clamp(16px,2vw,26px);max-width:34ch;
  font-family:CaseDM;font-size:var(--t-18);line-height:1.6;color:var(--gl-muted)}
body.page-case--gl .gl-actions{margin-top:clamp(22px,2.6vw,34px);display:flex;flex-wrap:wrap;
  align-items:center;gap:clamp(14px,2vw,24px)}
body.page-case--gl .gl-cta{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gl-ink);
  border-bottom:1px solid color-mix(in srgb,var(--gl-ink) 42%,transparent);
  transition:border-color var(--dur-micro) var(--ease)}
body.page-case--gl .gl-cta:hover{color:var(--gl-ink);text-decoration:none;
  border-bottom-color:var(--gl-ink)}
body.page-case--gl .gl-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--gl .gl-cta:hover .ico{transform:translateY(2px)}
/* site.js reveals this only where motion can run, so nobody meets a control for nothing;
   aria-pressed carries the state (pressed = paused) */
body.page-case--gl .gl-motion{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gl-muted);
  border:1px solid var(--gl-rule);background:transparent}
body.page-case--gl .gl-motion:hover{color:var(--gl-ink);border-color:var(--gl-ink)}
body.page-case--gl .gl-motion[aria-pressed="true"]{color:var(--gl-ink);border-color:var(--gl-ink)}

/* the artwork: three worlds overlapping in one cell, each at the angle it was composed for */
body.page-case--gl .gl-art{position:relative;display:grid;place-items:center;
  min-height:clamp(300px,36vw,470px)}
body.page-case--gl .gl-art__card{margin:0;grid-area:1/1;border-radius:20px;overflow:hidden;
  background:var(--gl-plate);border:1px solid color-mix(in srgb,var(--gl-ink) 12%,transparent);
  box-shadow:0 18px 44px rgba(45,27,16,.16)}
body.page-case--gl .gl-art__card img{display:block;width:100%;height:auto}
body.page-case--gl .gl-art__card--lead{width:min(74%,400px);z-index:2;transform:rotate(-3deg)}
body.page-case--gl .gl-art__card--night{width:min(50%,250px);z-index:1;
  transform:translate(-72%,-34%) rotate(6deg)}
body.page-case--gl .gl-art__card--meadow{width:min(42%,210px);z-index:3;
  transform:translate(40%,32%) rotate(5deg)}
html.has-motion body.page-case--gl .gl-art__card--lead{
  animation:gl-float 9s ease-in-out infinite}
html[data-motion-off] body.page-case--gl .gl-art__card--lead{animation:none;transform:rotate(-3deg)}
@keyframes gl-float{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-10px)}}

body.page-case--gl .gl-open__facts{margin-top:clamp(28px,4vw,52px)}
body.page-case--gl .gl-facts{border-top:1px solid var(--gl-rule);padding-block:var(--sp-4)}
body.page-case--gl .gl-facts .fact dt{color:var(--gl-muted)}
body.page-case--gl .gl-facts .fact dd{font-size:var(--t-18);color:var(--gl-ink)}
body.page-case--gl .gl-fact-link{display:inline-flex;align-items:center;gap:6px;
  color:var(--gl-ink);border-bottom:1px solid color-mix(in srgb,var(--gl-ink) 40%,transparent)}
body.page-case--gl .gl-fact-link:hover{color:var(--gl-ink);text-decoration:none;
  border-bottom-color:var(--gl-ink)}
body.page-case--gl .gl-fact-link .ico{width:14px;height:14px}

/* the chapter rail: sticky under the bar, the current chapter inked and underlined in the
   project's sunset, the read measured along the bottom edge */
body.page-case--gl [id]{scroll-margin-top:64px}
body.page-case--gl .gl-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--gl-ground) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gl-rule)}
body.page-case--gl .gl-chapters__inner{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);min-height:56px}
body.page-case--gl .gl-chapters__list{display:flex;gap:clamp(10px,2vw,28px);min-width:0;
  overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
body.page-case--gl .gl-chapters__list::-webkit-scrollbar{display:none}
body.page-case--gl .gl-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;font-family:var(--font-display);font-size:var(--t-11);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gl-muted);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--gl .gl-chapters__list a:hover{color:var(--gl-ink)}
body.page-case--gl .gl-chapters__list a[aria-current]{color:var(--gl-ink);
  border-bottom-color:var(--gl-sunset)}
body.page-case--gl .gl-chapters__all{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gl-ink);border:1px solid var(--gl-rule);
  background:transparent}
body.page-case--gl .gl-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--gl-sunset);transform:scaleX(0);transform-origin:left;
  transition:transform 120ms linear}

/* the bands */
body.page-case--gl .gl-band{background:var(--gl-ground);color:var(--gl-ink);
  padding-block:clamp(48px,6.4vw,96px)}
body.page-case--gl .gl-band--tight{padding-block:clamp(32px,4.4vw,64px)}
body.page-case--gl .gl-h2{font-family:CaseBaloo;font-weight:700;
  font-size:clamp(30px,3.8vw,54px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
body.page-case--gl .gl-h2 .serif{display:block;margin-top:.06em;
  font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:.86em;
  line-height:1.06;letter-spacing:-.005em}
body.page-case--gl .gl-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);margin-top:clamp(22px,3vw,36px);max-width:80ch}
body.page-case--gl .gl-lines dt{font-family:var(--font-display);font-size:var(--t-11);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gl-muted)}
body.page-case--gl .gl-lines dd{margin:8px 0 0;font-family:CaseDM;font-size:var(--t-18);
  line-height:1.55}

/* the landing capture: on the project's own paper, at content width, captioned quietly */
body.page-case--gl .gl-shot{margin:clamp(30px,4.4vw,60px) 0 0;display:grid;
  gap:var(--sp-2);justify-items:center}
body.page-case--gl .gl-shot__frame{display:block;width:100%;overflow:hidden;
  border-radius:16px;border:1px solid var(--gl-rule);background:var(--gl-plate);
  box-shadow:0 14px 34px rgba(45,27,16,.10)}
body.page-case--gl .gl-shot__frame img{display:block;width:100%;height:auto}
body.page-case--gl .gl-shot figcaption{font-family:CaseDM;font-size:var(--t-12);
  letter-spacing:.04em;color:var(--gl-muted);text-align:center}

body.page-case--gl .gl-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0}
body.page-case--gl .gl-principles li{display:grid;gap:6px;align-content:start;
  padding-top:var(--sp-3);border-top:2px solid var(--gl-sunset)}
body.page-case--gl .gl-num{margin:0;font-family:CaseBaloo;font-weight:800;
  font-size:var(--t-13);letter-spacing:.06em;color:var(--gl-muted)}
body.page-case--gl .gl-principles strong{font-family:CaseBaloo;font-weight:700;
  font-size:var(--t-20);line-height:1.2}
body.page-case--gl .gl-principles span{font-family:CaseDM;font-size:var(--t-15);
  line-height:1.55;color:var(--gl-muted)}

/* the four learning worlds, each at its own baseline so the band reads as a journey, not an
   asset grid */
body.page-case--gl .gl-worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.4vw,48px) clamp(20px,3vw,40px);margin-top:clamp(24px,3vw,40px);
  align-items:start}
body.page-case--gl .gl-world{margin:0;display:grid;gap:10px}
body.page-case--gl .gl-world:nth-child(2n){margin-top:clamp(40px,6vw,110px);
  justify-self:end;width:88%}
body.page-case--gl .gl-world:nth-child(3){width:94%}
body.page-case--gl .gl-world__frame{display:block;overflow:hidden;border-radius:16px;
  background:var(--gl-plate);border:1px solid var(--gl-rule);
  box-shadow:0 12px 30px rgba(45,27,16,.08)}
body.page-case--gl .gl-world__frame img{display:block;width:100%;height:auto;
  transition:transform var(--dur-slow) var(--ease)}
html.has-motion body.page-case--gl .gl-world:hover .gl-world__frame img{transform:scale(1.02)}
body.page-case--gl .gl-world figcaption{font-family:CaseDM;font-size:var(--t-13);
  letter-spacing:.11em;text-transform:uppercase;color:var(--gl-ink)}

/* the mark, each on the ground it was drawn for */
body.page-case--gl .gl-marks{display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,2.2vw,26px);margin-top:clamp(22px,3vw,36px)}
body.page-case--gl .gl-mark{margin:0;display:grid;gap:12px;align-content:center;
  padding:clamp(18px,2.6vw,32px);border-radius:16px;
  border:1px solid color-mix(in srgb,var(--gl-ink) 22%,transparent);
  box-shadow:0 10px 26px rgba(45,27,16,.07)}
body.page-case--gl .gl-mark--cream{background:var(--gl-plate)}
body.page-case--gl .gl-mark--green{background:var(--gl-green);
  border-color:color-mix(in srgb,var(--gl-ink) 26%,transparent)}
body.page-case--gl .gl-mark img{display:block;width:100%;height:auto;object-fit:contain}
body.page-case--gl .gl-mark figcaption{font-family:CaseDM;font-size:var(--t-13);
  letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--gl-ink) 90%,transparent)}

/* the type: the client's own two faces, each set at the weight the product sets it */
body.page-case--gl .gl-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,36px);margin-top:clamp(22px,3vw,36px)}
body.page-case--gl .gl-type-cell{margin:0;display:grid;gap:6px;align-content:start;
  padding:clamp(20px,3vw,40px);border-radius:16px;border:1px solid var(--gl-rule);
  background:color-mix(in srgb,var(--gl-plate) 72%,var(--gl-ground))}
body.page-case--gl .gl-type-family{margin:0;font-family:var(--font-display);
  font-size:var(--t-11);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gl-muted)}
body.page-case--gl .gl-type-role{margin:0;font-family:CaseDM;font-size:var(--t-12);
  color:var(--gl-muted)}
body.page-case--gl .gl-type-spec{margin:clamp(12px,1.8vw,22px) 0 0;
  font-size:clamp(30px,4.4vw,62px);line-height:1.04;color:var(--gl-ink);text-wrap:balance}
body.page-case--gl .case-type--baloo .gl-type-spec{font-family:CaseBaloo;font-weight:800;
  letter-spacing:-.01em}
body.page-case--gl .case-type--dm .gl-type-spec{font-family:CaseDM;font-weight:400;
  letter-spacing:-.01em}
body.page-case--gl .gl-type-note{margin:var(--sp-2) 0 0;font-family:CaseDM;
  font-size:var(--t-15);line-height:1.55;color:var(--gl-muted)}

/* the palette: the landing page's own four colours; the cream chip needs a hairline or it
   reads as an empty tile on cream paper */
body.page-case--gl .gl-palette{margin-top:clamp(22px,3vw,36px)}
body.page-case--gl .gl-palette .case-swatch{height:clamp(72px,8vw,120px);border-radius:12px;
  border:1px solid color-mix(in srgb,var(--gl-ink) 34%,transparent)}

/* the close */
body.page-case--gl .gl-close{border-top:1px solid var(--gl-rule)}
body.page-case--gl .gl-close__grid{display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:start}
body.page-case--gl .gl-h2--note{font-size:clamp(22px,2.4vw,30px);letter-spacing:.01em}
body.page-case--gl .gl-notes{margin-top:var(--sp-2);max-width:58ch;font-family:CaseDM;
  color:var(--gl-ink);text-wrap:pretty}
body.page-case--gl .gl-close .gl-cta{margin-top:var(--sp-3)}
body.page-case--gl .gl-next{padding:clamp(20px,2.4vw,28px);border-color:var(--gl-rule);
  background:var(--gl-plate)}
body.page-case--gl .gl-next:hover{border-color:color-mix(in srgb,var(--gl-ink) 42%,transparent)}
body.page-case--gl .gl-next .link{color:var(--gl-muted)}
body.page-case--gl .gl-next strong{font-family:CaseBaloo;font-weight:700;
  font-size:var(--t-18);color:var(--gl-ink)}
body.page-case--gl .gl-next .copy{color:var(--gl-muted);font-size:var(--t-13)}

/* the section index the rail reveals when its labels will not fit a phone */
body.page-case--gl .gl-index{width:min(560px,calc(100vw - 32px));max-height:80vh;
  padding:clamp(18px,3vw,28px);border-radius:16px;border:1px solid var(--gl-rule);
  background:var(--gl-ground);color:var(--gl-ink)}
body.page-case--gl .gl-index::backdrop{background:rgba(45,27,16,.55)}
body.page-case--gl .gl-index__top{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2)}
body.page-case--gl .gl-index__h{margin:0;font-family:CaseBaloo;font-weight:700;
  font-size:var(--t-20)}
body.page-case--gl .gl-index__close{min-height:44px;min-width:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gl-ink);border:1px solid var(--gl-rule);
  background:transparent}
body.page-case--gl .gl-index__close:hover{border-color:var(--gl-ink)}
body.page-case--gl .gl-index__list{list-style:none;margin:var(--sp-2) 0 0;padding:0;
  display:grid;gap:2px}
body.page-case--gl .gl-index__list a{display:flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-13);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gl-ink);text-decoration:none;
  border-bottom:1px solid var(--gl-rule)}
body.page-case--gl .gl-index__list a:hover{color:var(--gl-ink);border-bottom-color:var(--gl-ink)}

/* focus is visible on every link, button and card on this ground */
body.page-case--gl a:focus-visible,
body.page-case--gl button:focus-visible{outline:2px solid var(--gl-ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  body.page-case--gl *{animation-duration:1ms;animation-iteration-count:1;
    transition-duration:1ms}
  html.has-motion body.page-case--gl .gl-art__card--lead{animation:none;transform:rotate(-3deg)}
}

@media (max-width:1080px){
  body.page-case--gl .gl-open__grid{grid-template-columns:minmax(0,1fr) minmax(0,min(44%,380px))}
  body.page-case--gl .gl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--gl .gl-marks{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--gl .gl-marks .gl-mark:first-child{grid-column:1 / -1}
  body.page-case--gl .gl-close__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  body.page-case--gl .nav-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-1)}
  /* text first, artwork directly after the action, nothing left empty above the fold */
  body.page-case--gl .gl-open__grid{grid-template-columns:minmax(0,1fr);
    gap:clamp(24px,4vw,36px)}
  body.page-case--gl .gl-h1{font-size:clamp(42px,8vw,68px)}
  body.page-case--gl .gl-art{min-height:clamp(280px,58vw,380px)}
  body.page-case--gl .gl-art__card--lead{width:min(72%,320px)}
  body.page-case--gl .gl-art__card--night{width:min(46%,200px);
    transform:translate(-56%,-30%) rotate(6deg)}
  body.page-case--gl .gl-art__card--meadow{width:min(40%,170px);
    transform:translate(32%,30%) rotate(5deg)}
  body.page-case--gl .gl-lines,
  body.page-case--gl .gl-principles,
  body.page-case--gl .gl-type{grid-template-columns:minmax(0,1fr)}
  body.page-case--gl .gl-worlds{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  body.page-case--gl .gl-world:nth-child(2n){margin-top:0}
}
@media (max-width:640px){
  body.page-case--gl .gl-h1{font-size:clamp(38px,11vw,52px)}
  body.page-case--gl .gl-lead{max-width:none;font-size:var(--t-16)}
  body.page-case--gl .gl-facts{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);
    padding-block:var(--sp-3)}
  body.page-case--gl .gl-lines{gap:var(--sp-3)}
  body.page-case--gl .gl-marks{grid-template-columns:minmax(0,1fr)}
  body.page-case--gl .gl-palette .case-swatch{height:64px}
  /* the case's own name is the thing that must survive a phone bar on one line */
  body.page-case--gl .nav-context{font-size:10px;letter-spacing:.1em;line-height:1.35}
  body.page-case--gl .nav-context-k{display:none}
  /* six chapter labels do not fit 390: the rail scrolls sideways under a mask, and the
     index button opens the full list. No label is abbreviated. */
  body.page-case--gl .gl-chapters__list{
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent);
    padding-right:var(--sp-4)}
}

/* ---- /work/neolabcare/ (page cycle 2026-10-30). The approved reference carried this case on
   the project's own near-black: the sand-gold wordmark above a serif headline, the bottle and
   its illuminated landscape as the hero's right half, and off-white type on #0A0A0A below.
   The rejected rebuild opened it on Pulse's navy hero with no wordmark, no product and a
   "back to all work" exit, so this page is the reference's composition and its own palette.
   Measured: off-white on near-black 18.1:1, muted 71% mix 11.2:1, sand gold on near-black
   9.9:1, gold on the off-white plate 8.6:1. Every rule is scoped to body.page-case--nl, so the
   site's tokens are untouched and the shared conversion band and footer keep their colours. ---- */
body.page-case--nl{
  --nl-ground:#0A0A0A;--nl-raised:#111111;--nl-surface:#1A1A1A;--nl-mid:#242424;
  --nl-ink:#F5F5F0;--nl-gold:#C8B89A;--nl-goldlight:#E0D0B0;
  --nl-muted:color-mix(in srgb,var(--nl-ink) 71%,var(--nl-ground));
  --nl-rule:color-mix(in srgb,var(--nl-ink) 16%,var(--nl-ground));
  --surface:var(--nl-ground);--surface-card:var(--nl-surface);
  --text-primary:var(--nl-ink);--text-secondary:var(--nl-muted);
  --border-subtle:var(--nl-rule);--focus-ring:var(--nl-goldlight);
  background:var(--nl-ground);color:var(--nl-ink)}
body.page-case--nl .nl-open,
body.page-case--nl .nl-band,
body.page-case--nl .nl-chapters,
body.page-case--nl .nl-index{--action:var(--nl-ink);--action-hover:#fff}

/* the bar: the case's own ground and name, with no audit button competing with the work */
body.page-case--nl .nav,body.page-case--nl .nav.scrolled{
  background:color-mix(in srgb,var(--nl-ground) 96%,transparent);color:var(--nl-ink);
  border-bottom:1px solid var(--nl-rule)}
body.page-case--nl .nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--nl .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4;color:var(--nl-ink)}
body.page-case--nl .nav-context-k{color:var(--nl-muted)}
body.page-case--nl .nav-context-v{color:var(--nl-ink);font-weight:600}
body.page-case--nl .nav-toggle{border-color:var(--nl-rule);color:var(--nl-ink)}
body.page-case--nl .nav-toggle:hover{border-color:var(--nl-gold);color:var(--nl-ink)}
body.page-case--nl .nav-panel{background:var(--nl-ground);border-bottom:1px solid var(--nl-rule)}
body.page-case--nl .nav-panel a{color:var(--nl-ink)}

/* the opening: wordmark, classification, serif headline, deck and the exploration link in the
   left column; the project's own artwork bleeding to the right edge of the page */
body.page-case--nl .nl-open{background:var(--nl-ground);color:var(--nl-ink);
  overflow:hidden;padding-block:calc(var(--nav-h) + clamp(20px,2.6vw,40px)) 0}
body.page-case--nl .nl-open__grid{display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;
  padding-left:max(var(--gutter),calc((100% - var(--shell)) / 2))}
body.page-case--nl .nl-open__copy{padding-block:clamp(8px,1.6vw,24px) clamp(28px,4vw,56px);
  padding-right:clamp(20px,3vw,56px)}
body.page-case--nl .nl-logo{display:block;width:clamp(150px,15vw,208px);height:auto}
body.page-case--nl .nl-kicker{margin-top:clamp(16px,2vw,26px);color:var(--nl-gold);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-wrap:balance;max-width:30ch}
body.page-case--nl .nl-h1{margin-top:var(--sp-2);font-family:var(--font-serif);
  font-weight:400;font-size:clamp(42px,5.4vw,84px);line-height:1.02;letter-spacing:-.015em;
  text-wrap:balance}
body.page-case--nl .nl-h1 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;color:var(--nl-ink)}
body.page-case--nl .nl-lead{margin-top:clamp(16px,2vw,26px);max-width:36ch;
  font-size:var(--t-18);line-height:1.6;color:var(--nl-muted)}
body.page-case--nl .nl-actions{margin-top:clamp(22px,2.6vw,34px);display:flex;
  flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,24px)}
body.page-case--nl .nl-cta{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nl-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--nl-gold) 58%,transparent);
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
body.page-case--nl .nl-cta:hover{color:var(--nl-goldlight);text-decoration:none;
  border-bottom-color:var(--nl-goldlight)}
body.page-case--nl .nl-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--nl .nl-cta:hover .ico{transform:translateY(2px)}
body.page-case--nl .nl-motion{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--nl-muted);border:1px solid var(--nl-rule);
  background:transparent}
body.page-case--nl .nl-motion:hover{color:var(--nl-ink);border-color:var(--nl-gold)}
body.page-case--nl .nl-motion[aria-pressed="true"]{color:var(--nl-ink);border-color:var(--nl-gold)}

/* the artwork is the hero, not a plate inside a grey band: full-bleed to the page edge, the
   bottle held in the upper half of the frame so a phone crop keeps its focal point */
body.page-case--nl .nl-art{margin:0;position:relative;align-self:stretch;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(340px,58vw,640px)}
body.page-case--nl .nl-art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
body.page-case--nl .nl-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--nl-ground) 0%,rgba(10,10,10,.55) 16%,rgba(10,10,10,0) 46%)}
body.page-case--nl .nl-art figcaption{position:relative;z-index:1;align-self:flex-end;
  margin:0 clamp(16px,2vw,28px) clamp(12px,1.6vw,20px);text-align:right;
  font-size:var(--t-12);letter-spacing:.06em;color:color-mix(in srgb,var(--nl-ink) 72%,transparent)}

/* the four published facts on one hairline row */
body.page-case--nl .nl-open__facts{padding-block:0}
body.page-case--nl .nl-facts{border-top:1px solid var(--nl-rule);margin-top:0;
  padding-block:var(--sp-4)}
body.page-case--nl .nl-facts .fact dt{color:var(--nl-muted)}
body.page-case--nl .nl-facts .fact dd{font-size:var(--t-18);color:var(--nl-ink)}
body.page-case--nl .nl-fact-link{display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;color:var(--nl-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--nl-gold) 50%,transparent)}
body.page-case--nl .nl-fact-link:hover{color:var(--nl-goldlight);text-decoration:none}
body.page-case--nl .nl-fact-link .ico{width:14px;height:14px}

/* the chapter rail: sticky under the bar, the chapter you are in inked and underlined in the
   project's sand gold, the read measured along the bottom edge */
body.page-case--nl [id]{scroll-margin-top:72px}
body.page-case--nl .nl-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--nl-ground) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--nl-rule)}
body.page-case--nl .nl-chapters__inner{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);min-height:56px}
body.page-case--nl .nl-chapters__list{display:flex;gap:clamp(12px,2.2vw,32px);min-width:0;
  overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
body.page-case--nl .nl-chapters__list::-webkit-scrollbar{display:none}
body.page-case--nl .nl-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;font-family:var(--font-display);font-size:var(--t-11);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--nl-muted);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--nl .nl-chapters__list a:hover{color:var(--nl-ink)}
body.page-case--nl .nl-chapters__list a[aria-current]{color:var(--nl-ink);
  border-bottom-color:var(--nl-gold)}
body.page-case--nl .nl-chapters__all{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nl-ink);border:1px solid var(--nl-rule);
  background:transparent}
body.page-case--nl .nl-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--nl-gold);transform:scaleX(0);transform-origin:left;
  transition:transform 120ms linear}

/* the bands */
body.page-case--nl .nl-band{background:var(--nl-ground);color:var(--nl-ink);
  padding-block:clamp(48px,6.4vw,96px)}
body.page-case--nl .nl-band--tight{padding-block:clamp(32px,4.4vw,64px)}
body.page-case--nl .nl-h2{font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
body.page-case--nl .nl-h2 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;font-size:.92em}

/* the thinking: the reference's goal and solution beside the product-family plate */
body.page-case--nl .nl-thinking{display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:center}
body.page-case--nl .nl-lines{display:grid;gap:clamp(18px,2.6vw,32px);
  margin-top:clamp(22px,3vw,36px);max-width:52ch}
body.page-case--nl .nl-lines dt{font-family:var(--font-display);font-size:var(--t-11);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--nl-gold)}
body.page-case--nl .nl-lines dd{margin:8px 0 0;font-size:var(--t-18);line-height:1.6;
  color:var(--nl-muted)}
body.page-case--nl .nl-thinking__plate{margin:0;display:grid;gap:var(--sp-2)}
body.page-case--nl .nl-thinking__frame{display:block;overflow:hidden;border-radius:14px;
  border:1px solid var(--nl-rule);background:var(--nl-raised)}
body.page-case--nl .nl-thinking__frame img{display:block;width:100%;height:auto}
body.page-case--nl .nl-thinking__plate figcaption{font-size:var(--t-12);letter-spacing:.05em;
  color:var(--nl-muted)}

/* what the archive holds: three items, each under a gold rule */
body.page-case--nl .nl-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0}
body.page-case--nl .nl-principles li{display:grid;gap:8px;align-content:start;
  padding-top:var(--sp-3);border-top:2px solid var(--nl-gold)}
body.page-case--nl .nl-num{margin:0;font-family:var(--font-display);font-size:var(--t-12);
  font-weight:600;letter-spacing:.1em;color:var(--nl-muted)}
body.page-case--nl .nl-principles strong{font-family:var(--font-serif);font-weight:400;
  font-size:var(--t-20);line-height:1.25}
body.page-case--nl .nl-principles span{font-size:var(--t-15);line-height:1.6;
  color:var(--nl-muted)}

/* the work: the project's own plates, each at its native ratio and never cropped */
body.page-case--nl .nl-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,44px) clamp(16px,2.6vw,36px);margin-top:clamp(24px,3vw,40px);
  align-items:start}
body.page-case--nl .nl-plate{margin:0;display:grid;gap:10px}
body.page-case--nl .nl-plate__frame{display:block;overflow:hidden;border-radius:12px;
  border:1px solid var(--nl-rule);background:var(--nl-raised)}
body.page-case--nl .nl-plate__frame img{display:block;width:100%;height:auto;
  transition:transform var(--dur-slow) var(--ease)}
html.has-motion body.page-case--nl .nl-plate:hover .nl-plate__frame img{transform:scale(1.015)}
body.page-case--nl .nl-plate figcaption{font-size:var(--t-13);letter-spacing:.04em;
  color:var(--nl-muted)}

/* the mark, each on the ground it was drawn for: gold on the project's near-black, ink on
   the off-white plate */
body.page-case--nl .nl-mark-lead{margin-top:var(--sp-3);max-width:62ch;font-size:var(--t-18);
  line-height:1.6;color:var(--nl-muted)}
body.page-case--nl .nl-marks{display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(14px,2.2vw,28px);
  align-items:stretch;margin-top:clamp(22px,3vw,36px)}
body.page-case--nl .nl-mark{margin:0;display:grid;gap:14px;align-content:space-between;
  padding:clamp(20px,3vw,40px);border-radius:14px;border:1px solid var(--nl-rule)}
body.page-case--nl .nl-mark--ink{background:var(--nl-raised)}
body.page-case--nl .nl-mark--paper{background:var(--nl-ink);border-color:var(--nl-gold)}
body.page-case--nl .nl-mark img{display:block;width:100%;height:auto;object-fit:contain}
body.page-case--nl .nl-mark figcaption{font-size:var(--t-13);letter-spacing:.08em;
  text-transform:uppercase;color:var(--nl-muted)}
body.page-case--nl .nl-mark--paper figcaption{color:color-mix(in srgb,#0A0A0A 72%,#F5F5F0)}

/* the palette: the project's seven published colours, chips with a hairline so the near-blacks
   read as colours rather than as gaps */
body.page-case--nl .nl-palette{margin-top:clamp(22px,3vw,36px)}
body.page-case--nl .nl-palette .case-swatch{height:clamp(72px,8vw,118px);border-radius:8px;
  border:1px solid color-mix(in srgb,var(--nl-ink) 30%,transparent)}
body.page-case--nl .nl-palette li strong{color:var(--nl-ink)}
body.page-case--nl .nl-palette li span{color:var(--nl-muted)}
body.page-case--nl .nl-palette-note{margin-top:var(--sp-3);max-width:64ch;font-size:var(--t-15);
  line-height:1.6;color:var(--nl-muted)}

/* the close: the note, the two commercial doors, and the reference's next case */
body.page-case--nl .nl-close{border-top:1px solid var(--nl-rule);background:var(--nl-raised)}
body.page-case--nl .nl-close__grid{display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:start}
body.page-case--nl .nl-h2--note{font-size:clamp(22px,2.4vw,30px)}
body.page-case--nl .nl-notes{margin-top:var(--sp-2);max-width:58ch;font-size:var(--t-15);
  line-height:1.65;color:var(--nl-muted)}
body.page-case--nl .nl-close__actions{display:flex;flex-wrap:wrap;
  gap:clamp(14px,2vw,26px);margin-top:clamp(20px,2.6vw,32px)}
body.page-case--nl .nl-next{background:var(--nl-ground);border:1px solid var(--nl-rule);
  color:var(--nl-ink)}
body.page-case--nl .nl-next:hover{border-color:var(--nl-gold);text-decoration:none}
body.page-case--nl .nl-next .link{color:var(--nl-gold)}
body.page-case--nl .nl-next strong{color:var(--nl-ink)}
body.page-case--nl .nl-next .copy{color:var(--nl-muted)}

/* the section index on a phone */
body.page-case--nl .nl-index{margin:auto;max-width:min(560px,92vw);padding:clamp(20px,3vw,32px);
  background:var(--nl-surface);color:var(--nl-ink);border:1px solid var(--nl-rule);
  border-radius:14px}
body.page-case--nl .nl-index__top{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2)}
body.page-case--nl .nl-index__h{margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:var(--t-20)}
body.page-case--nl .nl-index__close{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nl-ink);border:1px solid var(--nl-rule);
  background:transparent}
body.page-case--nl .nl-index__list{list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;gap:2px}
body.page-case--nl .nl-index__list a{display:flex;align-items:center;min-height:44px;
  color:var(--nl-ink);text-decoration:none;border-bottom:1px solid var(--nl-rule)}

/* ---- narrower screens ---- */
@media (max-width:1024px){
  body.page-case--nl .nl-open__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.page-case--nl .nl-h1{font-size:clamp(38px,5.6vw,64px)}
  body.page-case--nl .nl-thinking{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  /* one column: the copy, then the artwork continuing underneath it, still to both edges */
  body.page-case--nl .nl-open{padding-block:calc(var(--nav-h) + 16px) 0}
  body.page-case--nl .nl-open__grid{grid-template-columns:minmax(0,1fr);
    padding-left:0}
  body.page-case--nl .nl-open__copy{padding-inline:var(--gutter);padding-right:var(--gutter)}
  body.page-case--nl .nl-logo{width:clamp(132px,34vw,180px)}
  body.page-case--nl .nl-h1{font-size:clamp(34px,10.2vw,52px)}
  body.page-case--nl .nl-lead{font-size:var(--t-16);max-width:none}
  body.page-case--nl .nl-art{margin-top:clamp(22px,5vw,32px);
    min-height:0;height:clamp(300px,72vw,420px)}
  body.page-case--nl .nl-art img{object-position:center 38%}
  body.page-case--nl .nl-art::after{background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,
    rgba(10,10,10,0) 26%)}
  body.page-case--nl .nl-art figcaption{margin-inline:var(--gutter);text-align:left}
  body.page-case--nl .nl-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--nl .nl-principles{grid-template-columns:minmax(0,1fr)}
  body.page-case--nl .nl-plates{grid-template-columns:minmax(0,1fr)}
  body.page-case--nl .nl-marks{grid-template-columns:minmax(0,1fr)}
  body.page-case--nl .nl-close__grid{grid-template-columns:minmax(0,1fr)}
  body.page-case--nl .nl-chapters__list{
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent);
    padding-right:var(--sp-4)}
  body.page-case--nl .nav-context{font-size:10px;letter-spacing:.1em}
  body.page-case--nl .nav-context-k{display:none}
}
@media (prefers-reduced-motion:reduce){
  html body.page-case--nl .nl-plate__frame img{transition:none}
}

/* ---- /work/robotist/ (page cycle 2026-10-30). The approved reference carried this case on
   the project's own deep navy: the reversed wordmark above the headline with its cyan italic,
   the robot artwork as the hero's right half, then the case in the order the reference reads
   (thinking, principles, palette, strategy, work, mark). The rejected rebuild opened it on a
   generic four-link bar with no robot in the first screen and closed on an audit funnel, so
   this page is the reference's composition in the project's own seven colours. Measured:
   off-white #F0F4F8 on #060D18 18.4:1, navy surface 15.2:1, ocean blue 6.1:1, arctic tint
   11.9:1. Every rule is scoped to body.page-case--rb, so the site's tokens are untouched and
   the shared conversion band and footer keep their colours. ---- */
body.page-case--rb{
  --rb-ground:#060D18;--rb-raised:#0C1828;--rb-surface:#142035;--rb-mid:#1E3550;
  --rb-ink:#F0F4F8;--rb-accent:#4AA8C8;--rb-accentlight:#A8DCEF;
  --rb-muted:color-mix(in srgb,var(--rb-ink) 71%,var(--rb-ground));
  --rb-rule:color-mix(in srgb,var(--rb-ink) 16%,var(--rb-ground));
  --surface:var(--rb-ground);--surface-card:var(--rb-surface);
  --text-primary:var(--rb-ink);--text-secondary:var(--rb-muted);
  --border-subtle:var(--rb-rule);--focus-ring:var(--rb-accentlight);
  background:var(--rb-ground);color:var(--rb-ink)}
body.page-case--rb .rb-open,
body.page-case--rb .rb-band,
body.page-case--rb .rb-chapters,
body.page-case--rb .rb-index{--action:var(--rb-ink);--action-hover:#fff}

/* the bar: the case's own ground and name, with no audit button competing with the work */
body.page-case--rb .nav,body.page-case--rb .nav.scrolled{
  background:color-mix(in srgb,var(--rb-ground) 96%,transparent);color:var(--rb-ink);
  border-bottom:1px solid var(--rb-rule)}
body.page-case--rb .nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--rb .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4;color:var(--rb-ink)}
body.page-case--rb .nav-context-k{color:var(--rb-muted)}
body.page-case--rb .nav-context-v{color:var(--rb-ink);font-weight:600}
body.page-case--rb .nav-toggle{border-color:var(--rb-rule);color:var(--rb-ink)}
body.page-case--rb .nav-toggle:hover{border-color:var(--rb-accent);color:var(--rb-ink)}
body.page-case--rb .nav-panel{background:var(--rb-ground);border-bottom:1px solid var(--rb-rule)}
body.page-case--rb .nav-panel a{color:var(--rb-ink)}

/* the opening: wordmark, classification, serif headline, deck and the exploration link in the
   left column; the project's own artwork bleeding to the right edge of the page */
body.page-case--rb .rb-open{background:var(--rb-ground);color:var(--rb-ink);
  overflow:hidden;padding-block:calc(var(--nav-h) + clamp(20px,2.6vw,40px)) 0}
body.page-case--rb .rb-open__grid{display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;
  padding-left:max(var(--gutter),calc((100% - var(--shell)) / 2))}
body.page-case--rb .rb-open__copy{padding-block:clamp(8px,1.6vw,24px) clamp(28px,4vw,56px);
  padding-right:clamp(20px,3vw,56px)}
body.page-case--rb .rb-logo{display:block;width:clamp(150px,15vw,208px);height:auto}
body.page-case--rb .rb-kicker{margin-top:clamp(16px,2vw,26px);color:var(--rb-accent);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-wrap:balance;max-width:30ch}
body.page-case--rb .rb-h1{margin-top:var(--sp-2);font-family:var(--font-serif);
  font-weight:400;font-size:clamp(42px,5.4vw,84px);line-height:1.02;letter-spacing:-.015em;
  text-wrap:balance}
body.page-case--rb .rb-h1 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;color:var(--rb-accent)}
body.page-case--rb .rb-lead{margin-top:clamp(16px,2vw,26px);max-width:36ch;
  font-size:var(--t-18);line-height:1.6;color:var(--rb-muted)}
body.page-case--rb .rb-actions{margin-top:clamp(22px,2.6vw,34px);display:flex;
  flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,24px)}
body.page-case--rb .rb-cta{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rb-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--rb-accent) 58%,transparent);
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
body.page-case--rb .rb-cta:hover{color:var(--rb-accentlight);text-decoration:none;
  border-bottom-color:var(--rb-accentlight)}
body.page-case--rb .rb-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--rb .rb-cta:hover .ico{transform:translateY(2px)}
body.page-case--rb .rb-motion{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rb-muted);border:1px solid var(--rb-rule);
  background:transparent}
body.page-case--rb .rb-motion:hover{color:var(--rb-ink);border-color:var(--rb-accent)}
body.page-case--rb .rb-motion[aria-pressed="true"]{color:var(--rb-ink);border-color:var(--rb-accent)}

/* the artwork is the hero, not a plate inside a grey band: full-bleed to the page edge, the
   robot held in the upper half of the frame so a phone crop keeps its head and torso */
body.page-case--rb .rb-art{margin:0;position:relative;align-self:stretch;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(340px,58vw,640px)}
body.page-case--rb .rb-art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
body.page-case--rb .rb-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,var(--rb-ground) 0%,rgba(6,13,24,.55) 16%,rgba(6,13,24,0) 46%)}
body.page-case--rb .rb-art figcaption{position:relative;z-index:1;align-self:flex-end;
  margin:0 clamp(16px,2vw,28px) clamp(12px,1.6vw,20px);text-align:right;
  font-size:var(--t-12);letter-spacing:.06em;color:color-mix(in srgb,var(--rb-ink) 72%,transparent)}

/* the four published facts on one hairline row */
body.page-case--rb .rb-open__facts{padding-block:0}
body.page-case--rb .rb-facts{border-top:1px solid var(--rb-rule);margin-top:0;
  padding-block:var(--sp-4)}
body.page-case--rb .rb-facts .fact dt{color:var(--rb-muted)}
body.page-case--rb .rb-facts .fact dd{font-size:var(--t-18);color:var(--rb-ink)}
body.page-case--rb .rb-fact-link{display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;color:var(--rb-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--rb-accent) 50%,transparent)}
body.page-case--rb .rb-fact-link:hover{color:var(--rb-accentlight);text-decoration:none}
body.page-case--rb .rb-fact-link .ico{width:14px;height:14px}

/* the chapter rail: sticky under the bar, the chapter you are in inked and underlined in the
   project's sand gold, the read measured along the bottom edge */
body.page-case--rb [id]{scroll-margin-top:72px}
body.page-case--rb .rb-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--rb-ground) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rb-rule)}
body.page-case--rb .rb-chapters__inner{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);min-height:56px}
body.page-case--rb .rb-chapters__list{display:flex;gap:clamp(12px,2.2vw,32px);min-width:0;
  overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
body.page-case--rb .rb-chapters__list::-webkit-scrollbar{display:none}
body.page-case--rb .rb-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;font-family:var(--font-display);font-size:var(--t-11);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rb-muted);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--rb .rb-chapters__list a:hover{color:var(--rb-ink)}
body.page-case--rb .rb-chapters__list a[aria-current]{color:var(--rb-ink);
  border-bottom-color:var(--rb-accent)}
body.page-case--rb .rb-chapters__all{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rb-ink);border:1px solid var(--rb-rule);
  background:transparent}
body.page-case--rb .rb-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--rb-accent);transform:scaleX(0);transform-origin:left;
  transition:transform 120ms linear}

/* the bands */
body.page-case--rb .rb-band{background:var(--rb-ground);color:var(--rb-ink);
  padding-block:clamp(48px,6.4vw,96px)}
body.page-case--rb .rb-band--tight{padding-block:clamp(32px,4.4vw,64px)}
body.page-case--rb .rb-h2{font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
body.page-case--rb .rb-h2 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;font-size:.92em}

/* the thinking: the reference's goal and solution beside the product-family plate */
/* the thinking band carries the copy alone here: the reference puts its strategy plate
   after the palette, so this column is the whole band rather than half of an empty grid */
body.page-case--rb .rb-thinking{display:block}
body.page-case--rb .rb-lines{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px);
  margin-top:clamp(22px,3vw,36px);max-width:76ch}
body.page-case--rb .rb-lines dt{font-family:var(--font-display);font-size:var(--t-11);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rb-accent)}
body.page-case--rb .rb-lines dd{margin:8px 0 0;font-size:var(--t-18);line-height:1.6;
  color:var(--rb-muted)}
body.page-case--rb .rb-thinking__plate{margin:0;display:grid;gap:var(--sp-2)}
body.page-case--rb .rb-thinking__frame{display:block;overflow:hidden;border-radius:14px;
  border:1px solid var(--rb-rule);background:var(--rb-raised)}
body.page-case--rb .rb-thinking__frame img{display:block;width:100%;height:auto}
body.page-case--rb .rb-thinking__plate figcaption{font-size:var(--t-12);letter-spacing:.05em;
  color:var(--rb-muted)}

/* what the archive holds: three items, each under a gold rule */
body.page-case--rb .rb-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0}
body.page-case--rb .rb-principles li{display:grid;gap:8px;align-content:start;
  padding-top:var(--sp-3);border-top:2px solid var(--rb-accent)}
body.page-case--rb .rb-num{margin:0;font-family:var(--font-display);font-size:var(--t-12);
  font-weight:600;letter-spacing:.1em;color:var(--rb-muted)}
body.page-case--rb .rb-principles strong{font-family:var(--font-serif);font-weight:400;
  font-size:var(--t-20);line-height:1.25}
body.page-case--rb .rb-principles span{font-size:var(--t-15);line-height:1.6;
  color:var(--rb-muted)}

/* the work: the project's own plates, each at its native ratio and never cropped */
body.page-case--rb .rb-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,44px) clamp(16px,2.6vw,36px);margin-top:clamp(24px,3vw,40px);
  align-items:start}
body.page-case--rb .rb-plate{margin:0;display:grid;gap:10px}
body.page-case--rb .rb-plate__frame{display:block;overflow:hidden;border-radius:12px;
  border:1px solid var(--rb-rule);background:var(--rb-raised)}
body.page-case--rb .rb-plate__frame img{display:block;width:100%;height:auto;
  transition:transform var(--dur-slow) var(--ease)}
html.has-motion body.page-case--rb .rb-plate:hover .rb-plate__frame img{transform:scale(1.015)}
body.page-case--rb .rb-plate figcaption{font-size:var(--t-13);letter-spacing:.04em;
  color:var(--rb-muted)}

/* the mark, each on the ground it was drawn for: gold on the project's near-black, ink on
   the off-white plate */
body.page-case--rb .rb-mark-lead{margin-top:var(--sp-3);max-width:62ch;font-size:var(--t-18);
  line-height:1.6;color:var(--rb-muted)}
/* both wordmarks are the same 403x58 outline file, so the two cells are equal and the mark
   sits at the same scale on either ground */
body.page-case--rb .rb-marks{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,28px);
  align-items:stretch;margin-top:clamp(22px,3vw,36px)}
body.page-case--rb .rb-mark{margin:0;display:grid;gap:14px;align-content:space-between;
  padding:clamp(20px,3vw,40px);border-radius:14px;border:1px solid var(--rb-rule)}
body.page-case--rb .rb-mark--ink{background:var(--rb-raised)}
body.page-case--rb .rb-mark--paper{background:var(--rb-ink);border-color:var(--rb-accent)}
body.page-case--rb .rb-mark img{display:block;width:100%;height:auto;object-fit:contain}
body.page-case--rb .rb-mark figcaption{font-size:var(--t-13);letter-spacing:.08em;
  text-transform:uppercase;color:var(--rb-muted)}
body.page-case--rb .rb-mark--paper figcaption{color:color-mix(in srgb,#0A0A0A 72%,#F5F5F0)}

/* the palette: the project's seven published colours, chips with a hairline so the near-blacks
   read as colours rather than as gaps */
body.page-case--rb .rb-palette{margin-top:clamp(22px,3vw,36px)}
body.page-case--rb .rb-palette .case-swatch{height:clamp(72px,8vw,118px);border-radius:8px;
  border:1px solid color-mix(in srgb,var(--rb-ink) 30%,transparent)}
body.page-case--rb .rb-palette li strong{color:var(--rb-ink)}
body.page-case--rb .rb-palette li span{color:var(--rb-muted)}
body.page-case--rb .rb-palette-note{margin-top:var(--sp-3);max-width:64ch;font-size:var(--t-15);
  line-height:1.6;color:var(--rb-muted)}

/* the close: the note, the two commercial doors, and the reference's next case */
body.page-case--rb .rb-close{border-top:1px solid var(--rb-rule);background:var(--rb-raised)}
body.page-case--rb .rb-close__grid{display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:start}
body.page-case--rb .rb-h2--note{font-size:clamp(22px,2.4vw,30px)}
body.page-case--rb .rb-notes{margin-top:var(--sp-2);max-width:58ch;font-size:var(--t-15);
  line-height:1.65;color:var(--rb-muted)}
body.page-case--rb .rb-close__actions{display:flex;flex-wrap:wrap;
  gap:clamp(14px,2vw,26px);margin-top:clamp(20px,2.6vw,32px)}
body.page-case--rb .rb-next{background:var(--rb-ground);border:1px solid var(--rb-rule);
  color:var(--rb-ink)}
body.page-case--rb .rb-next:hover{border-color:var(--rb-accent);text-decoration:none}
body.page-case--rb .rb-next .link{color:var(--rb-accent)}
body.page-case--rb .rb-next strong{color:var(--rb-ink)}
body.page-case--rb .rb-next .copy{color:var(--rb-muted)}

/* the section index on a phone */
body.page-case--rb .rb-index{margin:auto;max-width:min(560px,92vw);padding:clamp(20px,3vw,32px);
  background:var(--rb-surface);color:var(--rb-ink);border:1px solid var(--rb-rule);
  border-radius:14px}
body.page-case--rb .rb-index__top{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2)}
body.page-case--rb .rb-index__h{margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:var(--t-20)}
body.page-case--rb .rb-index__close{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rb-ink);border:1px solid var(--rb-rule);
  background:transparent}
body.page-case--rb .rb-index__list{list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;gap:2px}
body.page-case--rb .rb-index__list a{display:flex;align-items:center;min-height:44px;
  color:var(--rb-ink);text-decoration:none;border-bottom:1px solid var(--rb-rule)}

/* ---- narrower screens ---- */
@media (max-width:1024px){
  body.page-case--rb .rb-open__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.page-case--rb .rb-h1{font-size:clamp(38px,5.6vw,64px)}
  body.page-case--rb .rb-lines{grid-template-columns:minmax(0,1fr);max-width:none}
}
@media (max-width:767px){
  /* one column: the copy, then the artwork continuing underneath it, still to both edges */
  body.page-case--rb .rb-open{padding-block:calc(var(--nav-h) + 16px) 0}
  body.page-case--rb .rb-open__grid{grid-template-columns:minmax(0,1fr);
    padding-left:0}
  body.page-case--rb .rb-open__copy{padding-inline:var(--gutter);padding-right:var(--gutter)}
  body.page-case--rb .rb-logo{width:clamp(132px,34vw,180px)}
  body.page-case--rb .rb-h1{font-size:clamp(34px,10.2vw,52px)}
  body.page-case--rb .rb-lead{font-size:var(--t-16);max-width:none}
  body.page-case--rb .rb-art{margin-top:clamp(22px,5vw,32px);
    min-height:0;height:clamp(300px,72vw,420px)}
  body.page-case--rb .rb-art img{object-position:center 38%}
  body.page-case--rb .rb-art::after{background:linear-gradient(180deg,rgba(6,13,24,.35) 0%,
    rgba(10,10,10,0) 26%)}
  body.page-case--rb .rb-art figcaption{margin-inline:var(--gutter);text-align:left}
  body.page-case--rb .rb-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--rb .rb-principles{grid-template-columns:minmax(0,1fr)}
  body.page-case--rb .rb-plates{grid-template-columns:minmax(0,1fr)}
  body.page-case--rb .rb-marks{grid-template-columns:minmax(0,1fr)}
  body.page-case--rb .rb-close__grid{grid-template-columns:minmax(0,1fr)}
  body.page-case--rb .rb-chapters__list{
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent);
    padding-right:var(--sp-4)}
  body.page-case--rb .nav-context{font-size:10px;letter-spacing:.1em}
  body.page-case--rb .nav-context-k{display:none}
}
@media (prefers-reduced-motion:reduce){
  html body.page-case--rb .rb-plate__frame img{transition:none}
}

/* ---- /work/pulse-growth-engine/ (page cycle 2026-10-30). The approved reference carries this
   case on the project's own workspace ground with a violet accent, the product's own artwork
   in the first screen and the interface captures as evidence. The rejected rebuild opened it on
   Pulse's navy hero with no artwork and three generic sections, so this page is the reference's
   composition in that palette. Measured on the dark ground: ink 96% L on 9.5% L ground 17.4:1,
   muted 70% mix 9.6:1, blue #5E6AD2 5.4:1, violet #7C3AED 4.6:1 at display sizes and on fills.
   Every rule is scoped to body.page-case--pg, so the site's tokens are untouched and the shared
   conversion band and footer keep their colours. ---- */
body.page-case--pg{
  --pg-ground:oklch(9.5% .005 280);--pg-raised:oklch(13.5% .008 280);--pg-surface:oklch(17% .01 280);
  --pg-ink:oklch(96% .004 280);--pg-blue:#5E6AD2;--pg-violet:#7C3AED;--pg-violetlight:#A78BFA;
  --pg-muted:color-mix(in srgb,var(--pg-ink) 70%,var(--pg-ground));
  --pg-rule:color-mix(in srgb,var(--pg-ink) 15%,var(--pg-ground));
  --surface:var(--pg-ground);--surface-card:var(--pg-surface);
  --text-primary:var(--pg-ink);--text-secondary:var(--pg-muted);
  --border-subtle:var(--pg-rule);--focus-ring:var(--pg-violetlight);
  background:var(--pg-ground);color:var(--pg-ink)}
body.page-case--pg .pg-open,
body.page-case--pg .pg-band,
body.page-case--pg .pg-chapters,
body.page-case--pg .pg-index{--action:var(--pg-ink);--action-hover:#fff}

/* the bar: the case's own ground and name, no audit button competing with the work */
body.page-case--pg .nav,body.page-case--pg .nav.scrolled{
  background:color-mix(in srgb,var(--pg-ground) 96%,transparent);color:var(--pg-ink);
  border-bottom:1px solid var(--pg-rule)}
body.page-case--pg .nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--pg .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4;color:var(--pg-ink)}
body.page-case--pg .nav-context-k{color:var(--pg-muted)}
body.page-case--pg .nav-context-v{color:var(--pg-ink);font-weight:600}
body.page-case--pg .nav-toggle{border-color:var(--pg-rule);color:var(--pg-ink)}
body.page-case--pg .nav-toggle:hover{border-color:var(--pg-violetlight);color:var(--pg-ink)}
body.page-case--pg .nav-panel{background:var(--pg-ground);border-bottom:1px solid var(--pg-rule)}
body.page-case--pg .nav-panel a{color:var(--pg-ink)}

/* the opening: classification, headline, deck and the exploration link on the left; the
   project's own artwork as a framed plate that ends on the page edge beside them */
body.page-case--pg .pg-open{background:var(--pg-ground);color:var(--pg-ink);
  overflow:hidden;padding-block:calc(var(--nav-h) + clamp(18px,2.4vw,36px)) 0}
body.page-case--pg .pg-open__grid{display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:center;
  padding-left:max(var(--gutter),calc((100% - var(--shell)) / 2))}
body.page-case--pg .pg-open__copy{padding-block:clamp(8px,1.4vw,20px) clamp(26px,3.4vw,48px);
  padding-right:clamp(20px,3vw,56px)}
body.page-case--pg .pg-kicker{margin:0;color:var(--pg-violetlight);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-wrap:balance;max-width:34ch}
body.page-case--pg .pg-h1{margin-top:var(--sp-2);font-family:var(--font-serif);font-weight:400;
  font-size:clamp(40px,5vw,78px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
body.page-case--pg .pg-h1 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;background:linear-gradient(96deg,#8E97F2 0%,#B79BFA 62%,#A78BFA 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--pg-violetlight)}
body.page-case--pg .pg-lead{margin-top:clamp(16px,1.8vw,24px);max-width:38ch;
  font-size:var(--t-18);line-height:1.6;color:var(--pg-muted)}
body.page-case--pg .pg-actions{margin-top:clamp(20px,2.4vw,32px);display:flex;
  flex-wrap:wrap;align-items:center;gap:clamp(12px,1.8vw,22px)}
body.page-case--pg .pg-cta{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pg-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--pg-violet) 62%,transparent);
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
body.page-case--pg .pg-cta:hover{color:#fff;text-decoration:none;
  border-bottom-color:var(--pg-violetlight)}
body.page-case--pg .pg-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--pg .pg-cta:hover .ico{transform:translateY(2px)}
body.page-case--pg .pg-cta--solid{background:var(--pg-violet);border:1px solid var(--pg-violet);
  color:#fff;padding-inline:var(--sp-3);border-radius:var(--radius)}
body.page-case--pg .pg-cta--solid:hover{background:#6D28D9;border-color:#6D28D9;color:#fff}
body.page-case--pg .pg-cta--solid:hover .ico{transform:translate(1px,-1px)}
body.page-case--pg .pg-motion{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pg-muted);border:1px solid var(--pg-rule);
  background:transparent}
body.page-case--pg .pg-motion:hover{color:var(--pg-ink);border-color:var(--pg-violetlight)}
body.page-case--pg .pg-motion[aria-pressed="true"]{color:var(--pg-ink);
  border-color:var(--pg-violetlight)}

/* the artwork is framed, never cropped: the interface has to stay readable, so the plate keeps
   its own 3:2 ratio and runs off the right edge of the page */
body.page-case--pg .pg-art{margin:0;align-self:center;display:grid;gap:10px;
  min-width:0;padding-right:0}
body.page-case--pg .pg-art img{display:block;width:100%;height:auto;
  border-radius:18px 0 0 18px;border:1px solid var(--pg-rule);border-right:0;
  background:var(--pg-raised);
  box-shadow:0 30px 90px -40px color-mix(in srgb,var(--pg-violet) 70%,transparent)}
body.page-case--pg .pg-art figcaption{font-size:var(--t-12);letter-spacing:.05em;
  color:var(--pg-muted);padding-right:clamp(10px,1.2vw,18px)}

/* the three published facts on one hairline row */
body.page-case--pg .pg-open__facts{padding-block:0}
body.page-case--pg .pg-facts{grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--pg-rule);margin-top:0;padding-block:var(--sp-4)}
body.page-case--pg .pg-facts .fact dt{color:var(--pg-muted)}
body.page-case--pg .pg-facts .fact dd{font-size:var(--t-18);color:var(--pg-ink)}
body.page-case--pg .pg-scopes{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;
  margin:0;padding:0;font-family:var(--font-display);font-size:var(--t-13);
  color:var(--pg-muted)}
body.page-case--pg .pg-scopes li{display:inline-flex;align-items:center;gap:10px}
body.page-case--pg .pg-scopes li+li::before{content:"";width:3px;height:3px;
  border-radius:50%;background:color-mix(in srgb,var(--pg-ink) 40%,transparent)}
body.page-case--pg .pg-fact-link{display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;color:var(--pg-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--pg-violet) 55%,transparent)}
body.page-case--pg .pg-fact-link:hover{color:#fff;text-decoration:none}
body.page-case--pg .pg-fact-link .ico{width:14px;height:14px}

/* the chapter rail: sticky under the bar, the chapter you are in inked and underlined in the
   project's violet, the read measured along the bottom edge */
body.page-case--pg [id]{scroll-margin-top:72px}
body.page-case--pg .pg-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--pg-ground) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pg-rule)}
body.page-case--pg .pg-chapters__inner{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);min-height:56px}
body.page-case--pg .pg-chapters__list{display:flex;gap:clamp(12px,2.2vw,32px);min-width:0;
  overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
body.page-case--pg .pg-chapters__list::-webkit-scrollbar{display:none}
body.page-case--pg .pg-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;font-family:var(--font-display);font-size:var(--t-11);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pg-muted);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--pg .pg-chapters__list a:hover{color:var(--pg-ink)}
body.page-case--pg .pg-chapters__list a[aria-current]{color:var(--pg-ink);
  border-bottom-color:var(--pg-violet)}
body.page-case--pg .pg-chapters__all{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pg-ink);border:1px solid var(--pg-rule);
  background:transparent}
body.page-case--pg .pg-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--pg-blue),var(--pg-violet));
  transform:scaleX(0);transform-origin:left;transition:transform 120ms linear}

/* the bands */
body.page-case--pg .pg-band{background:var(--pg-ground);color:var(--pg-ink);
  padding-block:clamp(48px,6.4vw,96px)}
body.page-case--pg .pg-band--tight{padding-block:clamp(32px,4.4vw,64px)}
body.page-case--pg .pg-h2{margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px,3.4vw,50px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
body.page-case--pg .pg-h2 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;font-size:.94em;color:var(--pg-violetlight)}
body.page-case--pg .pg-h2--note{font-size:clamp(20px,2vw,26px);font-style:normal}

/* the thinking: the reference's goal and solution, side by side under the headline */
body.page-case--pg .pg-story{display:grid;gap:clamp(20px,3vw,40px)}
body.page-case--pg .pg-story .pg-h2{max-width:22ch}
body.page-case--pg .pg-story__lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3.4vw,56px);padding-top:clamp(16px,2vw,26px);
  border-top:1px solid var(--pg-rule)}
body.page-case--pg .pg-h3{margin:0;font-family:var(--font-display);font-size:var(--t-11);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pg-violetlight)}
body.page-case--pg .pg-copy{margin:10px 0 0;max-width:46ch;font-size:var(--t-18);
  line-height:1.62;color:var(--pg-muted)}

/* the three principles, each under a violet rule */
body.page-case--pg .pg-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,40px);list-style:none;margin:clamp(22px,3vw,36px) 0 0;padding:0}
body.page-case--pg .pg-principles li{display:grid;gap:8px;align-content:start;
  padding-top:var(--sp-3);border-top:2px solid var(--pg-violet)}
body.page-case--pg .pg-num{margin:0;font-family:var(--font-display);font-size:var(--t-12);
  font-weight:600;letter-spacing:.1em;color:var(--pg-muted)}
body.page-case--pg .pg-principles strong{font-family:var(--font-serif);font-weight:400;
  font-size:var(--t-20);line-height:1.25}
body.page-case--pg .pg-principles span{font-size:var(--t-15);line-height:1.6;
  color:var(--pg-muted)}

/* the direction capture at content width, the interface inside it never cropped */
body.page-case--pg .pg-wide{margin:0;display:grid;gap:12px}
body.page-case--pg .pg-wide__frame{display:block;overflow:hidden;border-radius:16px;
  border:1px solid var(--pg-rule);background:var(--pg-raised)}
body.page-case--pg .pg-wide__frame img{display:block;width:100%;height:auto}
body.page-case--pg .pg-wide figcaption{font-size:var(--t-12);letter-spacing:.05em;
  color:var(--pg-muted)}

/* the work: the two dated archive plates at their native ratio, never cropped */
body.page-case--pg .pg-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,44px) clamp(16px,2.6vw,36px);margin-top:clamp(24px,3vw,40px);
  align-items:start}
body.page-case--pg .pg-plate{margin:0;display:grid;gap:10px}
body.page-case--pg .pg-plate__frame{display:block;overflow:hidden;border-radius:12px;
  border:1px solid var(--pg-rule);background:var(--pg-raised)}
body.page-case--pg .pg-plate__frame img{display:block;width:100%;height:auto;
  transition:transform var(--dur-slow) var(--ease)}
html.has-motion body.page-case--pg .pg-plate:hover .pg-plate__frame img{transform:scale(1.015)}
body.page-case--pg .pg-plate figcaption{font-size:var(--t-13);letter-spacing:.04em;
  color:var(--pg-muted)}

/* the mark on the one ground it was drawn for: the project's blue */
body.page-case--pg .pg-mark-lead{margin:var(--sp-2) 0 0;max-width:56ch;font-size:var(--t-15);
  line-height:1.6;color:var(--pg-muted)}
body.page-case--pg .pg-marks{margin-top:clamp(20px,2.6vw,32px);display:grid;
  grid-template-columns:minmax(0,1fr)}
body.page-case--pg .pg-mark{margin:0;display:grid;gap:10px;justify-items:center;
  padding:clamp(28px,5vw,64px);border-radius:16px;border:1px solid var(--pg-rule)}
body.page-case--pg .pg-mark--blue{background:var(--pg-blue)}
body.page-case--pg .pg-mark img{display:block;width:clamp(96px,12vw,148px);height:auto}
body.page-case--pg .pg-mark figcaption{font-size:var(--t-12);letter-spacing:.05em;
  color:color-mix(in srgb,#fff 82%,var(--pg-blue))}

/* the palette: four documented values, each swatch edged so the near-black one is not a hole */
body.page-case--pg .pg-palette{margin-top:clamp(22px,3vw,36px)}
body.page-case--pg .pg-swatch{border:1px solid color-mix(in srgb,var(--pg-ink) 34%,transparent)}
body.page-case--pg .pg-sw--workspace{background:oklch(9.5% .005 280)}
body.page-case--pg .pg-sw--foreground{background:oklch(96% .004 280)}
body.page-case--pg .pg-sw--blue{background:#5E6AD2}
body.page-case--pg .pg-sw--violet{background:#7C3AED}
body.page-case--pg .pg-palette strong{color:var(--pg-ink)}
body.page-case--pg .pg-palette span:last-child{color:var(--pg-muted)}
body.page-case--pg .pg-palette-note{margin-top:clamp(18px,2.4vw,28px);max-width:64ch;
  font-size:var(--t-13);line-height:1.6;color:var(--pg-muted)}

/* the close: the limitations note, then the invitation with its two routes */
body.page-case--pg .pg-close{border-top:1px solid var(--pg-rule)}
body.page-case--pg .pg-close__grid{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);
  align-items:start}
body.page-case--pg .pg-notes{margin:var(--sp-2) 0 0;max-width:52ch;font-size:var(--t-15);
  line-height:1.62;color:var(--pg-muted)}
body.page-case--pg .pg-ask{display:grid;gap:10px;align-content:start;
  padding-left:clamp(0px,3vw,44px)}
body.page-case--pg .pg-ask .pg-kicker{color:var(--pg-muted)}
body.page-case--pg .pg-ask__lead{margin:0;max-width:44ch;font-size:var(--t-15);
  line-height:1.62;color:var(--pg-muted)}
body.page-case--pg .pg-ask .pg-actions{margin-top:var(--sp-2)}
body.page-case--pg .pg-next-band{border-top:1px solid var(--pg-rule)}
body.page-case--pg .case-next{background:var(--pg-raised);border-color:var(--pg-rule)}
body.page-case--pg .case-next strong{color:var(--pg-ink)}
body.page-case--pg .case-next .link{color:var(--pg-violetlight)}
body.page-case--pg .case-next .copy{color:var(--pg-muted)}

/* the section index, a real dialog */
body.page-case--pg .pg-index{border:1px solid var(--pg-rule);border-radius:16px;
  background:var(--pg-raised);color:var(--pg-ink);padding:0;max-width:min(520px,92vw);
  width:100%}
body.page-case--pg .pg-index::backdrop{background:rgba(4,4,8,.72)}
body.page-case--pg .pg-index__top{display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--pg-rule)}
body.page-case--pg .pg-index__h{margin:0;font-family:var(--font-display);font-size:var(--t-11);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--pg-muted)}
body.page-case--pg .pg-index__close{min-height:44px;padding-inline:var(--sp-2);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pg-ink);border:1px solid var(--pg-rule);
  background:transparent}
body.page-case--pg .pg-index__list{list-style:none;margin:0;padding:var(--sp-2) var(--sp-4)
  var(--sp-4)}
body.page-case--pg .pg-index__list a{display:flex;align-items:center;min-height:44px;
  font-size:var(--t-15);color:var(--pg-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--pg-ink) 8%,transparent)}
body.page-case--pg .pg-index__list a:hover{color:var(--pg-violetlight)}

@media (max-width:960px){
  /* Below this width the case bar stacks three items into two columns, which drops the
     menu below the bar and over the eyebrow. The name is the headline one line down,
     so the bar keeps the mark and the menu and nothing else. */
  body.page-case--pg .nav-context{display:none}
  body.page-case--pg .pg-open__grid{grid-template-columns:minmax(0,1fr);
    padding-inline:var(--gutter)}
  body.page-case--pg .pg-open__copy{padding-right:0;
    padding-block:clamp(8px,2vw,16px) clamp(22px,4vw,32px)}
  body.page-case--pg .pg-art{padding-right:0;margin-top:clamp(4px,1.6vw,12px)}
  body.page-case--pg .pg-art img{border-radius:14px;border-right:1px solid var(--pg-rule)}
  body.page-case--pg .pg-art figcaption{padding-right:0}
  body.page-case--pg .pg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--pg .pg-story__lines{grid-template-columns:minmax(0,1fr)}
  body.page-case--pg .pg-principles{grid-template-columns:minmax(0,1fr)}
  body.page-case--pg .pg-plates{grid-template-columns:minmax(0,1fr)}
  body.page-case--pg .pg-close__grid{grid-template-columns:minmax(0,1fr)}
  body.page-case--pg .pg-ask{padding-left:0;padding-top:var(--sp-4);
    border-top:1px solid var(--pg-rule)}
}
@media (max-width:767px){
  body.page-case--pg .pg-h1{font-size:clamp(34px,9vw,44px)}
  body.page-case--pg .pg-lead{font-size:var(--t-16);max-width:none}
  body.page-case--pg .pg-facts{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  body.page-case--pg .pg-palette{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--pg .pg-swatch{height:72px}
  body.page-case--pg .pg-chapters__list{
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent);
    padding-right:var(--sp-4)}
  body.page-case--pg .nav-context{font-size:10px;letter-spacing:.1em}
  body.page-case--pg .nav-context-k{display:none}
}
@media (prefers-reduced-motion:reduce){
  html body.page-case--pg .pg-plate__frame img{transition:none}
}

/* The opening artwork draws before it wants to be still: a nine-second drift, eight pixels,
   and the pause control in the opening is the thing that stops it. Transform only, so no
   line ever reflows; reduced motion never gets it, and neither does a paused reader. */
body.page-case--pg .pg-art img{animation:pg-drift 9s ease-in-out infinite;will-change:transform}
html[data-motion-off] body.page-case--pg .pg-art img{animation:none;transform:none}
@keyframes pg-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@media (prefers-reduced-motion:reduce){html body.page-case--pg .pg-art img{animation:none}}

/* ---- /work/pulse-instinct/ (page cycle 2026-10-30). The approved reference carried this case
   on the project's own paper: light grey #E2E5EC, blue grey #D5DDEA, navy #022556, blue #0973C3
   and violet #8077FF. The rejected rebuild opened it on the site's navy hero with the words
   "AI and growth", showed no artwork at all and flattened the case into Situation / Build /
   Outcome; a preference-research and identity case never named its own classification. This
   page is therefore the reference's composition: the wordmark, the classification, the
   headline with its serif half, the deck and the exploration link in one column, the original
   artwork beside them, then the four project facts, a chapter rail, the thinking, the identity
   (palette, strategy, mark), the work, and one real preference question the visitor answers.
   Measured: navy on light grey 11.9:1, muted navy 7.4:1, blue on light grey 3.8:1 (large text
   and rules only), violet 2.8:1 so it never carries text -- it fills the principle numerals,
   the chapter underline and the chosen card's ring. Every rule is scoped to
   body.page-case--pi, so the site's tokens are not repainted and the shared conversion band
   and footer keep their own colours. ---- */
body.page-case--pi{
  --pi-ground:#E2E5EC;--pi-surface:#D5DDEA;--pi-ink:#022556;--pi-blue:#0973C3;--pi-violet:#8077FF;
  --pi-muted:color-mix(in srgb,var(--pi-ink) 74%,var(--pi-ground));
  --pi-rule:color-mix(in srgb,var(--pi-ink) 16%,var(--pi-ground));
  --pi-raised:color-mix(in srgb,var(--pi-ground) 46%,#fff);
  --surface:var(--pi-ground);--surface-card:var(--pi-raised);
  --text-primary:var(--pi-ink);--text-secondary:var(--pi-muted);
  --border-subtle:var(--pi-rule);--focus-ring:var(--pi-blue);
  background:var(--pi-ground);color:var(--pi-ink)}
body.page-case--pi .pi-open,
body.page-case--pi .pi-band,
body.page-case--pi .pi-chapters{--action:var(--pi-blue);--action-hover:var(--pi-ink)}
body.page-case--pi .section.on-dark{--action:var(--pulse-blue);--focus-ring:var(--pulse-cyan)}

/* the bar carries the case's own ground and its name, and no audit button competing with it */
body.page-case--pi .nav,
body.page-case--pi .nav.scrolled{background:color-mix(in srgb,var(--pi-ground) 97%,transparent);
  color:var(--pi-ink);border-bottom:1px solid var(--pi-rule)}
body.page-case--pi .nav.scrolled{box-shadow:0 10px 30px rgba(2,37,86,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--pi .nav-mark img{filter:none}
body.page-case--pi .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4;color:var(--pi-ink)}
body.page-case--pi .nav-context-k{color:var(--pi-muted)}
body.page-case--pi .nav-context-v{color:var(--pi-ink);font-weight:600}
body.page-case--pi .nav-toggle{border-color:var(--pi-rule);color:var(--pi-ink)}
body.page-case--pi .nav-toggle:hover{border-color:var(--pi-blue);color:var(--pi-ink)}
body.page-case--pi .nav-panel{background:var(--pi-ground);border-bottom:1px solid var(--pi-rule)}
body.page-case--pi .nav-panel a{color:var(--pi-ink)}

/* the opening: wordmark, classification, headline, deck and exploration link on the left, the
   original artwork on the right, both above the fold on a laptop */
body.page-case--pi .pi-open{background:var(--pi-ground);color:var(--pi-ink);
  padding-block:calc(var(--nav-h) + clamp(22px,3vw,44px)) clamp(28px,3.4vw,52px)}
body.page-case--pi .pi-open__grid{display:grid;
  grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr);
  gap:clamp(28px,4vw,64px);align-items:center}
body.page-case--pi .pi-logo{display:block;width:clamp(150px,16vw,236px);height:auto;
  border-radius:2px}
body.page-case--pi .pi-kicker{margin-top:clamp(18px,2.2vw,28px);color:var(--pi-muted);
  letter-spacing:.15em}
body.page-case--pi .pi-h1{margin-top:var(--sp-2);font-family:var(--font-display);font-weight:500;
  font-size:clamp(44px,6.2vw,94px);line-height:.95;letter-spacing:-.045em;text-wrap:balance}
body.page-case--pi .pi-h1 .serif{display:block;margin-top:.02em;font-family:var(--font-serif);
  font-style:italic;font-weight:300;font-size:.94em;line-height:1.02;letter-spacing:-.012em;
  color:var(--pi-ink)}
body.page-case--pi .pi-lead{margin-top:clamp(16px,2vw,26px);max-width:32ch;
  font-size:var(--t-17);line-height:1.6;color:var(--pi-muted);text-wrap:pretty}
body.page-case--pi .pi-cta{display:inline-flex;align-items:center;gap:6px;margin-top:clamp(20px,2.4vw,32px);
  min-height:44px;font-family:var(--font-display);font-size:var(--t-12);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pi-ink);
  border-bottom:1px solid color-mix(in srgb,var(--pi-ink) 42%,transparent);
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
body.page-case--pi .pi-cta .ico{width:14px;height:14px}
body.page-case--pi .pi-cta:hover{color:var(--pi-blue);text-decoration:none;
  border-bottom-color:var(--pi-blue)}
body.page-case--pi .pi-hero{display:grid;gap:var(--sp-2);margin:0}
body.page-case--pi .pi-hero__frame{display:block;overflow:hidden;aspect-ratio:16 / 9;
  border:1px solid var(--pi-rule);background:var(--pi-surface)}
body.page-case--pi .pi-hero__frame img{display:block;width:100%;height:100%;object-fit:cover}
body.page-case--pi .pi-hero figcaption{font-size:var(--t-13);line-height:1.5;color:var(--pi-muted)}

/* the four project facts, each a label over its own value */
body.page-case--pi .pi-facts-wrap{margin-top:clamp(30px,3.8vw,54px)}
body.page-case--pi .pi-facts{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,28px) clamp(20px,2.4vw,40px);
  padding-block:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--pi-rule);border-bottom:1px solid var(--pi-rule)}
body.page-case--pi .pi-facts .fact dt{color:var(--pi-muted)}
body.page-case--pi .pi-facts .fact dd{font-family:var(--font-display);font-size:var(--t-15);
  font-weight:500;line-height:1.4;color:var(--pi-ink);text-wrap:pretty}
body.page-case--pi .pi-scopes{display:grid;gap:2px;margin:0;padding:0;list-style:none;
  font-family:var(--font-body);font-size:var(--t-14);font-weight:400;line-height:1.5}

/* the chapter rail: four real anchors, the full section list, and the motion control, all on
   one row that scrolls only when a phone cannot hold it */
body.page-case--pi [id]{scroll-margin-top:calc(var(--nav-h) + 60px)}
body.page-case--pi .pi-chapters{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--pi-ground) 94%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pi-rule)}
body.page-case--pi .pi-chapters__inner{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,32px);min-height:56px}
body.page-case--pi .pi-chapters__list{display:flex;gap:clamp(12px,2.2vw,34px);min-width:0;
  overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
body.page-case--pi .pi-chapters__list::-webkit-scrollbar{display:none}
body.page-case--pi .pi-chapters__list li{flex:none}
body.page-case--pi .pi-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-11);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pi-ink);border-bottom:1px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
body.page-case--pi .pi-chapters__list a:hover{color:var(--pi-ink);text-decoration:none;
  border-bottom-color:var(--pi-violet)}
body.page-case--pi .pi-chapters__list a[aria-current="true"]{color:var(--pi-ink);
  border-bottom-color:var(--pi-violet)}
body.page-case--pi .pi-chapters__tools{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);
  flex:none}
body.page-case--pi .pi-tool{display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:0 clamp(10px,1.2vw,14px);border:1px solid var(--pi-rule);background:transparent;
  font-family:var(--font-display);font-size:var(--t-11);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pi-ink);cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
body.page-case--pi .pi-tool:hover{border-color:var(--pi-blue);color:var(--pi-ink)}
body.page-case--pi .pi-tool .ico{width:12px;height:12px}
body.page-case--pi .pi-tool[aria-pressed="true"]{background:var(--pi-ink);color:var(--pi-ground);
  border-color:var(--pi-ink)}

/* the bands */
body.page-case--pi .pi-band{padding-block:clamp(44px,5.6vw,92px);
  border-top:1px solid var(--pi-rule)}
body.page-case--pi .pi-h2{font-family:var(--font-display);font-weight:500;
  font-size:clamp(28px,3.4vw,54px);line-height:1.03;letter-spacing:-.032em;max-width:20ch;
  text-wrap:balance}
body.page-case--pi .pi-h2 .serif{display:block;margin-top:.04em;font-family:var(--font-serif);
  font-style:italic;font-weight:300;font-size:.92em;line-height:1.04;letter-spacing:-.012em}
body.page-case--pi .pi-h2--sub{margin-top:clamp(40px,5vw,76px);font-size:clamp(24px,2.6vw,40px)}

/* the thinking: the heading on the left, Goal and Solution side by side on the right */
body.page-case--pi .pi-thinking{padding-bottom:clamp(44px,5.6vw,92px)}
body.page-case--pi .pi-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(24px,4vw,72px);align-items:start}
body.page-case--pi .pi-story__lines{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px)}
body.page-case--pi .pi-line{padding-top:var(--sp-2);border-top:1px solid var(--pi-rule)}
body.page-case--pi .pi-h3{margin-bottom:var(--sp-1);font-family:var(--font-display);
  font-size:var(--t-12);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pi-ink)}
body.page-case--pi .pi-copy{font-size:var(--t-15);line-height:1.7;color:var(--pi-muted);
  max-width:38ch;text-wrap:pretty}
body.page-case--pi .pi-copy--wide{max-width:52ch}

/* the three principles, numbered in the case's violet */
body.page-case--pi .pi-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);margin-top:clamp(24px,3vw,40px);padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--pi-rule);list-style:none;counter-reset:pi-p}
body.page-case--pi .pi-principles li{display:grid;gap:var(--sp-1);align-content:start;
  counter-increment:pi-p}
body.page-case--pi .pi-principles li::before{content:counter(pi-p,decimal-leading-zero);
  font-family:var(--font-serif);font-style:italic;font-size:var(--t-18);
  color:var(--pi-violet);margin-bottom:var(--sp-0)}
body.page-case--pi .pi-principles strong{font-family:var(--font-display);font-weight:600;
  font-size:var(--t-18);letter-spacing:-.012em;color:var(--pi-ink)}
body.page-case--pi .pi-principles span{font-size:var(--t-15);line-height:1.65;
  color:var(--pi-muted);max-width:32ch;text-wrap:pretty}

/* the palette: five documented values, each a chip over its own name and use */
body.page-case--pi .pi-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);margin-top:clamp(22px,2.8vw,36px);padding:0;list-style:none}
body.page-case--pi .pi-palette li{display:grid;gap:6px;padding-top:var(--sp-1);
  border-top:1px solid var(--pi-rule)}
body.page-case--pi .pi-chip{display:block;height:clamp(48px,5vw,68px);
  border:1px solid color-mix(in srgb,var(--pi-ink) 18%,transparent)}
body.page-case--pi .pi-palette b{font-family:var(--font-display);font-size:var(--t-14);
  font-weight:600;color:var(--pi-ink)}
body.page-case--pi .pi-palette li>span:last-child{font-family:var(--font-body);
  font-size:var(--t-12);line-height:1.5;color:var(--pi-muted)}

/* the strategy plate, the marks and the work: the plate's own ratio, never cropped */
body.page-case--pi .pi-wide{margin:clamp(32px,4vw,56px) 0 0}
body.page-case--pi .pi-wide__frame{display:block;overflow:hidden;
  border:1px solid var(--pi-rule);background:var(--pi-raised)}
body.page-case--pi .pi-wide img{display:block;width:100%;height:auto}
body.page-case--pi .pi-wide figcaption,
body.page-case--pi .pi-plate figcaption,
body.page-case--pi .pi-motion-figure figcaption,
body.page-case--pi .pi-marks figcaption{font-size:var(--t-13);line-height:1.5;
  color:var(--pi-muted);margin-top:var(--sp-1)}
body.page-case--pi .pi-marks{margin-top:clamp(20px,2.6vw,32px);
  gap:clamp(16px,2.2vw,28px)}
body.page-case--pi .pi-plates{margin-top:clamp(20px,2.6vw,36px);
  gap:clamp(24px,3.4vw,48px)}
body.page-case--pi .pi-frame{display:grid;place-items:center;border:1px solid var(--pi-rule);
  border-radius:0;background:var(--pi-raised)}
body.page-case--pi .pi-marks .pi-frame{aspect-ratio:4 / 3;padding:clamp(10px,1.4vw,22px)}
body.page-case--pi .pi-marks .pi-frame img{width:100%;height:100%;object-fit:contain;
  display:block}
body.page-case--pi .pi-plates .pi-frame{aspect-ratio:auto;padding:0;overflow:hidden;
  background:var(--pi-surface)}
body.page-case--pi .pi-plates .pi-frame img{display:block;width:100%;height:auto}

/* the motion piece: its own frames, on the case's navy, controllable and never autoplaying */
body.page-case--pi .pi-motion-figure{margin:clamp(28px,3.4vw,48px) 0 0}
body.page-case--pi .pi-motion-figure__frame{display:block;background:var(--pi-ink);
  border:1px solid var(--pi-rule);overflow:hidden}
body.page-case--pi .pi-video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;
  background:var(--pi-ink)}

/* the response: the case's own one question, answered by the visitor */
body.page-case--pi .pi-response__grid{display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);
  align-items:start}
body.page-case--pi .pi-demo{padding:clamp(18px,2.2vw,32px);border:1px solid var(--pi-rule);
  background:var(--pi-raised)}
body.page-case--pi .pi-demo__q{margin:0 0 clamp(14px,1.8vw,20px);font-family:var(--font-display);
  font-size:var(--t-13);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pi-muted)}
body.page-case--pi .pi-demo__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px)}
body.page-case--pi .pi-choice{display:grid;gap:var(--sp-1);padding:clamp(8px,1vw,12px);
  border:1px solid var(--pi-rule);background:var(--pi-ground);cursor:pointer;text-align:left;
  transition:border-color var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease)}
body.page-case--pi .pi-choice:hover{border-color:var(--pi-blue)}
body.page-case--pi .pi-choice[aria-pressed="true"]{border-color:var(--pi-violet);
  box-shadow:0 0 0 2px var(--pi-violet)}
body.page-case--pi .pi-choice__frame{display:grid;place-items:center;aspect-ratio:2 / 1;
  overflow:hidden;border:1px solid color-mix(in srgb,var(--pi-ink) 14%,transparent)}
body.page-case--pi .pi-choice__frame--navy{background:var(--pi-ink)}
body.page-case--pi .pi-choice__frame--grey{background:var(--pi-surface)}
body.page-case--pi .pi-choice__frame img{display:block;width:100%;height:100%;
  object-fit:contain}
body.page-case--pi .pi-choice__label{display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:var(--t-12);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pi-ink)}
body.page-case--pi .pi-choice__key{display:inline-grid;place-items:center;width:20px;height:20px;
  border:1px solid var(--pi-rule);font-size:10px;letter-spacing:0;color:var(--pi-muted)}
body.page-case--pi .pi-choice[aria-pressed="true"] .pi-choice__key{background:var(--pi-violet);
  border-color:var(--pi-violet);color:#fff}
body.page-case--pi .pi-demo__result{margin:clamp(14px,1.8vw,20px) 0 0;min-height:2.6em;
  font-size:var(--t-15);line-height:1.6;color:var(--pi-ink)}
body.page-case--pi .pi-demo__note{margin:var(--sp-1) 0 0;font-size:var(--t-12);
  line-height:1.55;color:var(--pi-muted);max-width:46ch}

/* the close: the scope note and the next case on one baseline above the shared band */
body.page-case--pi .pi-close{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);
  gap:clamp(24px,3.2vw,48px);align-items:end;margin-top:clamp(36px,4.4vw,64px)}
body.page-case--pi .pi-h2--note{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.022em}
body.page-case--pi .pi-note__copy{margin-top:var(--sp-2);max-width:56ch;color:var(--pi-ink);
  text-wrap:pretty}
body.page-case--pi .case-next{padding:clamp(18px,2.2vw,28px);border-color:var(--pi-rule);
  background:var(--pi-raised)}
body.page-case--pi .case-next:hover{border-color:var(--pi-blue)}
body.page-case--pi .case-next .link{color:var(--pi-muted)}
body.page-case--pi .case-next strong{font-size:var(--t-18);font-weight:600;color:var(--pi-ink)}
body.page-case--pi .case-next .copy{color:var(--pi-muted);font-size:var(--t-13)}

/* the section list, in the site's own dialog shape */
body.page-case--pi .pi-index{width:min(92vw,520px);padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--pi-rule);background:var(--pi-ground);color:var(--pi-ink)}
body.page-case--pi .pi-index::backdrop{background:rgba(2,37,86,.42)}
body.page-case--pi .pi-index__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--pi-rule);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;color:var(--pi-muted)}
body.page-case--pi .pi-index__close{width:40px;height:40px;border:1px solid var(--pi-rule);
  background:transparent;color:var(--pi-ink);font-size:20px;line-height:1;cursor:pointer}
body.page-case--pi .pi-index nav{display:grid;margin-top:var(--sp-1)}
body.page-case--pi .pi-index nav a{display:flex;align-items:center;min-height:48px;
  font-family:var(--font-display);font-size:var(--t-16);color:var(--pi-ink);
  border-bottom:1px solid var(--pi-rule)}
body.page-case--pi .pi-index nav a:last-child{border-bottom:0}
body.page-case--pi .pi-index nav a:hover{color:var(--pi-blue);text-decoration:none}

body.page-case--pi a:focus-visible,
body.page-case--pi button:focus-visible{outline:2px solid var(--pi-blue);outline-offset:3px}
/* a reader who asks for calm gets it, and the pause control says so from the first frame */
@media (prefers-reduced-motion:reduce){
  body.page-case--pi *{transition-duration:1ms;animation-duration:1ms;animation-iteration-count:1}
}
body.pi-calm .pi-choice,
body.pi-calm .pi-tool,
body.pi-calm .pi-cta,
body.pi-calm .pi-chapters__list a{transition:none}

@media (max-width:1080px){
  body.page-case--pi .pi-open__grid{grid-template-columns:minmax(0,1fr) minmax(0,min(48%,420px))}
  body.page-case--pi .pi-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--pi .pi-story,
  body.page-case--pi .pi-response__grid,
  body.page-case--pi .pi-close{grid-template-columns:minmax(0,1fr)}
  body.page-case--pi .pi-palette{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  /* three children in a two-column bar (mark, context, menu) would push the menu onto a second
     row inside the fixed bar */
  body.page-case--pi .nav-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-1)}
  body.page-case--pi .pi-open__grid{grid-template-columns:minmax(0,1fr);
    gap:clamp(24px,4vw,36px)}
  body.page-case--pi .pi-h1{font-size:clamp(40px,8vw,64px)}
  body.page-case--pi .pi-principles{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  body.page-case--pi .pi-marks{grid-template-columns:minmax(0,1fr)}
  body.page-case--pi .pi-chapters__inner{flex-direction:column;align-items:stretch;
    gap:0;padding-bottom:var(--sp-1)}
  body.page-case--pi .pi-chapters__list{order:1}
  body.page-case--pi .pi-chapters__tools{order:2;padding-bottom:var(--sp-1)}
}
@media (max-width:640px){
  body.page-case--pi .pi-h1{font-size:clamp(34px,10.5vw,48px)}
  body.page-case--pi .pi-lead{max-width:none;font-size:var(--t-16)}
  body.page-case--pi .pi-facts{grid-template-columns:minmax(0,1fr);gap:var(--sp-3);
    padding-block:var(--sp-3)}
  body.page-case--pi .pi-story__lines{grid-template-columns:minmax(0,1fr)}
  body.page-case--pi .pi-palette{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--sp-2)}
  /* the pair stays a pair on a phone: two choices seen together is the whole point, so the
     cards keep both columns and the labels lose a little tracking instead of a column */
  body.page-case--pi .pi-choice{padding:6px;gap:6px}
  body.page-case--pi .pi-choice__label{font-size:10px;letter-spacing:.06em}
  body.page-case--pi .pi-choice__key{width:18px;height:18px}
  body.page-case--pi .nav-context{font-size:10px;letter-spacing:.1em;line-height:1.35}
  /* three things share a phone bar; the case's own name is the one that must survive */
  body.page-case--pi .nav-context-k{display:none}
  /* a phone cannot hold four chapter names on one row: a scrolled row would cut the last
     label in half and read as a broken bar, so the rail becomes a two-column contents list
     that sits still under the hero and lets the bar keep its own row */
  body.page-case--pi .pi-chapters{position:static}
  body.page-case--pi .pi-chapters__inner{gap:0}
  body.page-case--pi .pi-chapters__list{display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(12px,4vw,24px);
    overflow:visible;width:100%}
  body.page-case--pi .pi-chapters__list a{white-space:normal;min-height:40px;
    font-size:10px;letter-spacing:.1em}
  body.page-case--pi .pi-chapters__tools{width:100%;padding-bottom:var(--sp-1)}
  body.page-case--pi .pi-tool{flex:1;justify-content:center}
}

/* ---- /work/vodkiss/ (page cycle 2026-10-30). The approved reference carries this case on the
   label's own ivory ground (#F1ECDB), the actual Vodkiss wordmark above an editorial headline,
   and the three bottles inside the opening screen instead of stacked below it. The rejected
   rebuild opened on navy with plain-text "VODKISS", split the composition into a gallery and
   closed on an audit funnel. This page is the reference's system — identity as the experience,
   product imagery multiplied onto the artwork ground so the bottles sit on the page rather than
   in a white box. Measured on #F1ECDB: ink #24271F 12.4:1, brand charcoal #464D48 7.6:1,
   muted 5.4:1. Every rule is scoped to body.page-case--vk, so the shared conversion band and
   footer keep their own colours. ---- */
body.page-case--vk{
  --vk-ground:#F1ECDB;--vk-raised:#F8F4E7;--vk-plate:#FFFDF7;--vk-ink:#24271F;--vk-deep:#464D48;
  --vk-gold:#C9B875;--vk-citrus:#5C6E3F;--vk-pink:#D8817A;--vk-teal:#708D8D;
  --vk-muted:color-mix(in srgb,var(--vk-ink) 76%,var(--vk-ground));
  --vk-rule:color-mix(in srgb,var(--vk-ink) 18%,var(--vk-ground));
  --surface:var(--vk-ground);--surface-card:var(--vk-raised);
  --text-primary:var(--vk-ink);--text-secondary:var(--vk-muted);
  --border-subtle:var(--vk-rule);--focus-ring:var(--vk-citrus);
  --case-mark-plate:var(--vk-plate);
  background:var(--vk-ground);color:var(--vk-ink)}
body.page-case--vk .vk-open,body.page-case--vk .vk-band,body.page-case--vk .vk-chapters,
body.page-case--vk .vk-index{--action:var(--vk-ink);--action-hover:var(--vk-citrus)}

/* the bar: the case's own ground and name, global navigation available but never competing */
body.page-case--vk .nav,body.page-case--vk .nav.scrolled{
  background:color-mix(in srgb,var(--vk-ground) 96%,transparent);color:var(--vk-ink);
  border-bottom:1px solid var(--vk-rule)}
body.page-case--vk .nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--vk .nav-mark img{filter:none}
body.page-case--vk .nav-context{margin:0;text-align:center;min-width:0;
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;line-height:1.4;color:var(--vk-ink)}
body.page-case--vk .nav-context-k{color:var(--vk-muted)}
body.page-case--vk .nav-context-v{color:var(--vk-deep);font-weight:600}
body.page-case--vk .nav-toggle{border-color:var(--vk-rule);color:var(--vk-ink)}
body.page-case--vk .nav-toggle:hover{border-color:var(--vk-citrus)}
body.page-case--vk .nav-panel{background:var(--vk-ground);border-bottom:1px solid var(--vk-rule)}
body.page-case--vk .nav-panel a{color:var(--vk-ink)}

/* the opening: the real wordmark, classification, serif headline, deck and the exploration
   link in the left column; the bottle family multiplied onto the artwork ground, bleeding to
   the right edge, both inside one composition */
body.page-case--vk .vk-open{background:var(--vk-ground);overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(18px,2.4vw,36px)) 0}
body.page-case--vk .vk-open__grid{display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);align-items:center;
  padding-left:max(var(--gutter),calc((100% - var(--shell)) / 2))}
body.page-case--vk .vk-open__copy{padding-block:clamp(8px,1.4vw,22px) clamp(24px,3.4vw,48px);
  padding-right:clamp(18px,2.6vw,48px)}
body.page-case--vk .vk-logo{display:block;width:clamp(150px,16vw,214px);height:auto}
body.page-case--vk .vk-kicker{margin-top:clamp(14px,1.8vw,24px);color:var(--vk-citrus);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;max-width:32ch}
body.page-case--vk .vk-h1{margin-top:var(--sp-2);font-family:var(--font-serif);font-weight:400;
  font-size:clamp(40px,5.6vw,86px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
body.page-case--vk .vk-h1 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;color:var(--vk-citrus)}
body.page-case--vk .vk-lead{margin-top:clamp(14px,1.8vw,24px);max-width:38ch;
  font-size:var(--t-18);line-height:1.6;color:var(--vk-muted);text-wrap:pretty}
body.page-case--vk .vk-actions{margin-top:clamp(20px,2.6vw,34px);display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--sp-3) var(--sp-4)}
body.page-case--vk .vk-cta{display:inline-flex;align-items:center;gap:var(--sp-1);
  min-height:44px;color:var(--vk-ink);font-family:var(--font-display);font-size:var(--t-13);
  font-weight:600;letter-spacing:.06em;text-decoration:underline;text-underline-offset:.35em;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--vk-ink) 45%,transparent)}
body.page-case--vk .vk-cta:hover{color:var(--vk-citrus);text-decoration-color:currentColor}
body.page-case--vk .vk-cta .ico{transition:transform var(--dur-micro,180ms) var(--ease,ease)}
body.page-case--vk .vk-cta:hover .ico{transform:translateY(2px)}
body.page-case--vk .vk-motion{min-height:44px;padding:0;border:0;background:none;
  color:var(--vk-muted);font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  border-bottom:1px solid var(--vk-rule)}
body.page-case--vk .vk-motion:hover{color:var(--vk-ink);border-bottom-color:var(--vk-ink)}
body.page-case--vk .vk-art{margin:0;position:relative;align-self:end}
body.page-case--vk .vk-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
body.page-case--vk .vk-art figcaption{margin-top:var(--sp-1);padding-bottom:var(--sp-2);
  color:var(--vk-muted);font-size:var(--t-13);line-height:1.5}
body.page-case--vk .vk-open__facts{padding-block:0 clamp(8px,1.4vw,20px)}
body.page-case--vk .vk-facts{border-top:1px solid var(--vk-rule);padding-top:var(--sp-3)}

/* the chapter rail: five real ids, a rail that follows the read, an index that is a dialog */
body.page-case--vk .vk-chapters{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--vk-ground) 97%,transparent);
  border-top:1px solid var(--vk-rule);border-bottom:1px solid var(--vk-rule)}
body.page-case--vk .vk-chapters__inner{display:flex;align-items:center;gap:var(--sp-3);
  min-height:52px}
body.page-case--vk .vk-chapters__list{display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  margin:0;padding:0;list-style:none;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
body.page-case--vk .vk-chapters__list::-webkit-scrollbar{display:none}
body.page-case--vk .vk-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  white-space:nowrap;color:var(--vk-muted);font-family:var(--font-display);
  font-size:var(--t-11);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid transparent}
body.page-case--vk .vk-chapters__list a:hover{color:var(--vk-ink)}
body.page-case--vk .vk-chapters__list a[aria-current="location"]{color:var(--vk-ink);
  border-bottom-color:var(--vk-citrus)}
body.page-case--vk .vk-chapters__all{margin-left:auto;flex:none;min-height:44px;
  background:none;border:1px solid var(--vk-rule);color:var(--vk-ink);cursor:pointer;
  padding-inline:var(--sp-2);font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.12em;text-transform:uppercase}
body.page-case--vk .vk-chapters__all:hover{border-color:var(--vk-citrus);color:var(--vk-citrus)}
body.page-case--vk .vk-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--vk-citrus);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 120ms linear}
body.page-case--vk .vk-index{border:1px solid var(--vk-rule);background:var(--vk-raised);
  color:var(--vk-ink);padding:0;max-width:min(560px,calc(100vw - 32px));width:100%}
body.page-case--vk .vk-index::backdrop{background:color-mix(in srgb,#24271F 55%,transparent)}
body.page-case--vk .vk-index__top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--vk-rule);
  font-family:var(--font-display);font-size:var(--t-11);letter-spacing:.13em;
  text-transform:uppercase;color:var(--vk-muted)}
body.page-case--vk .vk-index__close{min-width:44px;min-height:44px;background:none;border:0;
  color:var(--vk-ink);font-size:22px;line-height:1;cursor:pointer}
body.page-case--vk .vk-index__close:hover{color:var(--vk-citrus)}
body.page-case--vk .vk-index__list{list-style:none;margin:0;padding:var(--sp-2) 0}
body.page-case--vk .vk-index__list a{display:flex;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);min-height:44px;color:var(--vk-ink);text-decoration:none;
  font-family:var(--font-display);font-size:var(--t-15)}
body.page-case--vk .vk-index__list a span{color:var(--vk-muted);font-size:var(--t-12)}
body.page-case--vk .vk-index__list a:hover{background:color-mix(in srgb,var(--vk-citrus) 12%,transparent)}

/* the case body: bands on the artwork ground, serif headings, plates multiplied onto the page */
body.page-case--vk .vk-band{padding-block:clamp(48px,6vw,96px);scroll-margin-top:64px}
body.page-case--vk .vk-band--tight{padding-block:clamp(32px,4vw,60px)}
body.page-case--vk .vk-h2{margin:0;font-family:var(--font-serif);font-weight:400;
  font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
body.page-case--vk .vk-h2 .serif{display:block;margin-top:.06em;font-style:italic;
  font-weight:300;color:var(--vk-citrus)}
body.page-case--vk .vk-h3{margin:0 0 var(--sp-2);font-family:var(--font-display);
  font-size:var(--t-11);font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--vk-muted)}
body.page-case--vk .vk-note{margin:var(--sp-2) 0 0;max-width:62ch;color:var(--vk-muted);
  font-size:var(--t-15);line-height:1.65;text-wrap:pretty}
body.page-case--vk .vk-thinking{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center}
body.page-case--vk .vk-lines{margin:clamp(18px,2.4vw,30px) 0 0;display:grid;gap:0}
body.page-case--vk .vk-lines>div{display:grid;gap:var(--sp-0);padding-block:var(--sp-2);
  border-top:1px solid var(--vk-rule)}
body.page-case--vk .vk-lines dt{font-family:var(--font-display);font-size:var(--t-11);
  letter-spacing:.15em;text-transform:uppercase;color:var(--vk-citrus)}
body.page-case--vk .vk-lines dd{margin:0;font-size:var(--t-18);line-height:1.55;max-width:44ch}
body.page-case--vk .vk-plate{margin:0;display:grid;gap:var(--sp-1)}
body.page-case--vk .vk-plate__frame{display:block;background:var(--vk-plate);
  border:1px solid var(--vk-rule);overflow:hidden}
body.page-case--vk .vk-plate__frame img{display:block;width:100%;height:auto}
body.page-case--vk .vk-plate figcaption{font-size:var(--t-13);line-height:1.5;color:var(--vk-muted)}
body.page-case--vk .vk-wide{grid-column:1 / -1}
body.page-case--vk .vk-gallery{display:grid;gap:clamp(14px,2vw,26px);margin-top:var(--sp-2)}
body.page-case--vk .vk-gallery--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.page-case--vk .vk-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.page-case--vk .vk-gallery--4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.page-case--vk .vk-group+.vk-group{margin-top:clamp(28px,4vw,56px)}
body.page-case--vk .vk-principles{list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,40px)}
body.page-case--vk .vk-principles li{padding-top:var(--sp-2);border-top:1px solid var(--vk-rule)}
body.page-case--vk .vk-principles .vk-num{margin:0 0 var(--sp-1);font-family:var(--font-display);
  font-size:var(--t-11);letter-spacing:.16em;color:var(--vk-citrus)}
body.page-case--vk .vk-principles strong{display:block;font-family:var(--font-display);
  font-size:var(--t-18);font-weight:600;letter-spacing:-.005em}
body.page-case--vk .vk-principles span{display:block;margin-top:var(--sp-0);
  color:var(--vk-muted);font-size:var(--t-15);line-height:1.6;text-wrap:pretty}
body.page-case--vk .vk-palette{list-style:none;margin:var(--sp-3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
body.page-case--vk .vk-palette li{display:grid;gap:var(--sp-1);align-content:start}
body.page-case--vk .vk-band-swatch{display:block;height:clamp(84px,9vw,132px);
  border:1px solid color-mix(in srgb,var(--vk-ink) 12%,transparent)}
body.page-case--vk .vk-palette strong{font-family:var(--font-display);font-size:var(--t-12);
  font-weight:600;letter-spacing:.04em}
body.page-case--vk .vk-palette code{font-family:var(--font-body);font-size:var(--t-12);
  color:var(--vk-muted);letter-spacing:.02em}
body.page-case--vk .vk-mark-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);margin-top:var(--sp-3)}
body.page-case--vk .vk-mark-sheet figure{margin:0;display:grid;gap:var(--sp-1)}
body.page-case--vk .vk-mark-sheet .vk-plate__frame{display:grid;place-items:center;
  min-height:clamp(110px,12vw,170px);padding:clamp(10px,1.6vw,22px)}
body.page-case--vk .vk-mark-sheet img{max-width:100%;height:auto}

/* the ending: the case-relevant ask, no checklist and no booking desk on a packaging story */
body.page-case--vk .vk-close{background:var(--vk-deep);color:var(--vk-ground)}
body.page-case--vk .vk-close .vk-h2{color:var(--vk-ground)}
body.page-case--vk .vk-close .vk-h2 .serif{color:var(--vk-gold)}
body.page-case--vk .vk-close__eyebrow{font-family:var(--font-display);font-size:var(--t-11);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vk-gold)}
body.page-case--vk .vk-close__lead{margin:var(--sp-2) 0 0;max-width:52ch;
  color:color-mix(in srgb,var(--vk-ground) 84%,var(--vk-deep));font-size:var(--t-18);line-height:1.6}
body.page-case--vk .vk-close__actions{margin-top:clamp(18px,2.4vw,30px);display:flex;
  flex-wrap:wrap;gap:var(--sp-2)}
body.page-case--vk .vk-close__btn{display:inline-flex;align-items:center;min-height:48px;
  padding-inline:var(--sp-3);font-family:var(--font-display);font-size:var(--t-13);
  font-weight:600;letter-spacing:.06em;text-decoration:none;border:1px solid transparent}
body.page-case--vk .vk-close__btn--solid{background:var(--vk-ground);color:var(--vk-deep)}
body.page-case--vk .vk-close__btn--solid:hover{background:#fff}
body.page-case--vk .vk-close__btn--ghost{color:var(--vk-ground);
  border-color:color-mix(in srgb,var(--vk-ground) 45%,transparent)}
body.page-case--vk .vk-close__btn--ghost:hover{border-color:var(--vk-ground);background:color-mix(in srgb,var(--vk-ground) 10%,transparent)}
body.page-case--vk .vk-foot{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  justify-content:space-between;align-items:baseline;margin-top:0}
body.page-case--vk .vk-foot a{color:var(--vk-ink)}

/* one ambient motion, and the control that governs it (revealed only where motion can run) */
@keyframes vk-breathe{from{transform:scale(1) translateY(0)}to{transform:scale(1.014) translateY(-1.1%)}}
html.has-motion body.page-case--vk .vk-art img{
  animation:vk-breathe 26s ease-in-out infinite alternate;transform-origin:50% 60%}
html[data-motion-off] body.page-case--vk .vk-art img{animation:none}

@media (max-width:960px){
  /* Below this width the case bar stacks its items into two columns, which drops the menu
     below the bar and over the eyebrow; the name is the headline one line down, so the bar
     keeps the mark and the menu and nothing else. */
  body.page-case--vk .nav-context{display:none}
  body.page-case--vk .vk-open__grid{grid-template-columns:minmax(0,1fr);
    padding-left:0}
  body.page-case--vk .vk-open__copy{padding-inline:var(--gutter);padding-block:0 clamp(6px,1vw,10px)}
  body.page-case--vk .vk-art img{width:100%}
  body.page-case--vk .vk-art figcaption{padding-inline:var(--gutter)}
  body.page-case--vk .vk-open__facts{padding-inline:var(--gutter)}
  body.page-case--vk .vk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--vk .vk-thinking{grid-template-columns:minmax(0,1fr)}
  body.page-case--vk .vk-principles{grid-template-columns:minmax(0,1fr)}
  body.page-case--vk .vk-palette{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.page-case--vk .vk-mark-sheet{grid-template-columns:minmax(0,1fr)}
  body.page-case--vk .vk-gallery--3,body.page-case--vk .vk-gallery--4{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  body.page-case--vk .vk-palette{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-case--vk .vk-gallery--2,body.page-case--vk .vk-gallery--3,
  body.page-case--vk .vk-gallery--4{grid-template-columns:minmax(0,1fr)}
  body.page-case--vk .vk-band-swatch{height:76px}
}
@media (prefers-reduced-motion:reduce){
  html body.page-case--vk .vk-art img{animation:none}
  html body.page-case--vk .vk-progress{transition:none}
}

/* ---- /work/wekwikgene/ (page cycle 2026-10-30). The approved reference carries this case on
   a pale scientific ground: the institutional lockup above the headline, the serif "Science,
   shared." with its aqua italic, and the DNA ring as the right half of the first screen. The
   rejected rebuild opened on a generic navy service hero with the artwork pushed into a grey
   band below and an exit in place of the exploration link, so this page is the reference's
   composition in the project's own four published values. Measured: ink #0E2C46 on the
   #F5F6F8 ground 13.2:1, the aqua ink #256C80 5.5:1, scientific blue #144168 9.8:1. The
   published aqua #59A7BE is 2.5:1 and is used for rules and rules only, never for text.
   Every rule is scoped to body.page-case--wk, so the site's tokens are untouched. ---- */
body.page-case--wk{
  --wk-ground:#F5F6F8;--wk-paper:#FFFFFF;--wk-ink:#0E2C46;--wk-blue:#144168;
  --wk-aqua:#256C80;--wk-aqua-line:#59A7BE;--wk-orange:#8A5A00;--wk-dot:#EE8D00;
  --wk-muted:color-mix(in srgb,var(--wk-ink) 74%,var(--wk-ground));
  --wk-rule:color-mix(in srgb,var(--wk-blue) 20%,var(--wk-ground));
  --surface:var(--wk-ground);--surface-card:var(--wk-paper);
  --text-primary:var(--wk-ink);--text-secondary:var(--wk-muted);
  --border-subtle:var(--wk-rule);--focus-ring:var(--wk-blue);
  background:var(--wk-ground);color:var(--wk-ink)}
body.page-case--wk .wk-open,body.page-case--wk .wk-band,
body.page-case--wk .wk-chapters,body.page-case--wk .wk-index{--action:var(--wk-blue);--action-hover:var(--wk-ink)}

/* the bar: the case's own paper and name, no audit button competing with the work */
body.page-case--wk .nav,body.page-case--wk .nav.scrolled{
  background:color-mix(in srgb,var(--wk-paper) 96%,transparent);color:var(--wk-ink);
  border-bottom:1px solid var(--wk-rule)}
body.page-case--wk .nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.page-case--wk .nav-context{color:var(--wk-ink);font-family:var(--font-display);
  font-size:var(--t-11);letter-spacing:.13em;text-transform:uppercase;line-height:1.4}
body.page-case--wk .nav-context-k{color:var(--wk-muted)}
body.page-case--wk .nav-context-v{color:var(--wk-blue);font-weight:600}
body.page-case--wk .nav-toggle{border-color:var(--wk-rule);color:var(--wk-ink)}
body.page-case--wk .nav-panel{background:var(--wk-paper);border-bottom:1px solid var(--wk-rule)}

/* the opening: lockup, classification, serif headline and the exploration link on the left;
   the project's own artwork as the right half, ending exactly on the page edge */
body.page-case--wk .wk-open{background:var(--wk-ground);color:var(--wk-ink);overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(20px,2.6vw,40px)) 0}
body.page-case--wk .wk-open__grid{display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:center;
  padding-left:max(var(--gutter),calc((100% - var(--shell)) / 2))}
body.page-case--wk .wk-open__copy{padding-block:clamp(8px,1.6vw,24px) clamp(28px,4vw,56px);
  padding-right:clamp(20px,3vw,56px)}
body.page-case--wk .wk-lockup{display:block;width:clamp(210px,23vw,320px);height:auto}
body.page-case--wk .wk-kicker{margin-top:clamp(16px,2vw,24px);color:var(--wk-aqua);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-wrap:balance;max-width:34ch}
body.page-case--wk .wk-h1{margin-top:var(--sp-2);font-family:var(--font-serif);font-weight:400;
  font-size:clamp(44px,5.6vw,88px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
body.page-case--wk .wk-h1 .serif{display:block;margin-top:.04em;font-style:italic;
  font-weight:300;color:var(--wk-aqua)}
body.page-case--wk .wk-lead{margin-top:clamp(16px,2vw,26px);max-width:36ch;font-size:var(--t-18);
  line-height:1.6;color:var(--wk-muted)}
body.page-case--wk .wk-actions{margin-top:clamp(22px,2.6vw,32px);display:flex;flex-wrap:wrap;
  align-items:center;gap:clamp(14px,2vw,22px)}
body.page-case--wk .wk-cta{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-12);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--wk-blue);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--wk-aqua-line) 72%,transparent);
  transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
body.page-case--wk .wk-cta:hover{color:var(--wk-ink);text-decoration:none;
  border-bottom-color:var(--wk-ink)}
body.page-case--wk .wk-cta .ico{transition:transform var(--dur-micro) var(--ease)}
body.page-case--wk .wk-cta:hover .ico{transform:translateY(2px)}
body.page-case--wk .wk-cta--solid{color:var(--wk-paper);background:var(--wk-blue);
  border-bottom-color:transparent;padding-inline:var(--sp-4);border-radius:2px}
body.page-case--wk .wk-cta--solid:hover{color:#fff;background:var(--wk-ink)}

/* the artwork is the hero's other half, not a plate in a band below it */
body.page-case--wk .wk-art{margin:0;position:relative;align-self:stretch;display:flex;
  flex-direction:column;justify-content:flex-end;min-height:clamp(320px,46vw,600px);
  background:var(--wk-paper)}
body.page-case--wk .wk-art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 44%}
body.page-case--wk .wk-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,var(--wk-ground) 0%,rgba(245,246,248,.5) 14%,rgba(245,246,248,0) 42%)}
body.page-case--wk .wk-art figcaption{position:relative;z-index:1;align-self:flex-end;
  margin:0 clamp(16px,2vw,28px) clamp(12px,1.6vw,20px);text-align:right;font-size:var(--t-12);
  letter-spacing:.06em;color:color-mix(in srgb,var(--wk-ink) 66%,var(--wk-ground))}

/* the four published facts on one hairline row */
body.page-case--wk .wk-open__facts{padding-block:0}
body.page-case--wk .wk-facts{border-top:1px solid var(--wk-rule);margin-top:0;
  padding-block:var(--sp-4)}
body.page-case--wk .wk-facts .fact dt{color:var(--wk-muted)}
body.page-case--wk .wk-facts .fact dd{font-size:var(--t-18);color:var(--wk-ink)}
body.page-case--wk .wk-fact-link{display:inline-flex;align-items:center;gap:6px;
  color:var(--wk-blue);text-decoration:none;border-bottom:1px solid var(--wk-rule)}
body.page-case--wk .wk-fact-link:hover{border-bottom-color:var(--wk-aqua-line)}
body.page-case--wk .wk-scopes{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  gap:0 10px}
body.page-case--wk .wk-scopes li{font-size:var(--t-18);color:var(--wk-ink)}
body.page-case--wk .wk-scopes li+li::before{content:"·";margin-right:10px;color:var(--wk-aqua-line)}

/* the chapters: pinned under the bar, the line measuring the read */
body.page-case--wk .wk-chapters{position:sticky;top:0;z-index:20;background:var(--wk-paper);
  border-bottom:1px solid var(--wk-rule)}
body.page-case--wk .wk-chapters__inner{display:flex;align-items:center;gap:var(--sp-4);
  min-height:52px}
body.page-case--wk .wk-chapters__list{display:flex;gap:clamp(16px,2.4vw,34px);margin:0;
  padding:0;list-style:none;min-width:0}
body.page-case--wk .wk-chapters__list a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wk-muted);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent}
body.page-case--wk .wk-chapters__list a:hover{color:var(--wk-ink)}
body.page-case--wk .wk-chapters__list a[aria-current="location"]{color:var(--wk-blue);
  border-bottom-color:var(--wk-dot)}
body.page-case--wk .wk-chapters__all{margin-left:auto;min-height:40px;padding-inline:var(--sp-3);
  font-family:var(--font-display);font-size:var(--t-11);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wk-blue);background:transparent;
  border:1px solid var(--wk-rule);border-radius:2px}
body.page-case--wk .wk-chapters__all:hover{border-color:var(--wk-aqua-line)}
body.page-case--wk .wk-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;background:var(--wk-dot)}

/* the bands */
body.page-case--wk .wk-band{padding-block:clamp(48px,6vw,96px);background:var(--wk-ground)}
body.page-case--wk .wk-band--rule{border-top:1px solid var(--wk-rule)}
body.page-case--wk .wk-band--tight{padding-block:clamp(36px,4vw,64px)}
body.page-case--wk .wk-h2{font-family:var(--font-serif);font-weight:400;
  font-size:clamp(28px,3.2vw,44px);line-height:1.14;letter-spacing:-.01em;text-wrap:balance}
body.page-case--wk .wk-h2 .serif{font-style:italic;font-weight:300;color:var(--wk-aqua)}
body.page-case--wk .wk-h2--note{font-size:clamp(22px,2.2vw,28px)}
body.page-case--wk .wk-h3{font-family:var(--font-display);font-size:var(--t-11);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wk-aqua)}
body.page-case--wk .wk-copy{margin-top:var(--sp-2);font-size:var(--t-18);line-height:1.66;
  color:var(--wk-ink);max-width:62ch}
body.page-case--wk .wk-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,72px);align-items:start}
body.page-case--wk .wk-story__lines{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px)}
body.page-case--wk .wk-line{padding-top:var(--sp-3);border-top:1px solid var(--wk-rule)}
body.page-case--wk .wk-principles{margin:clamp(24px,3vw,40px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
body.page-case--wk .wk-principles li{padding-top:var(--sp-3);border-top:1px solid var(--wk-rule)}
body.page-case--wk .wk-num{margin:0 0 var(--sp-2);font-family:var(--font-display);
  font-size:var(--t-11);letter-spacing:.14em;color:var(--wk-aqua)}
body.page-case--wk .wk-principles strong{display:block;font-family:var(--font-serif);
  font-weight:400;font-size:var(--t-22,22px);color:var(--wk-ink)}
body.page-case--wk .wk-principles span{display:block;margin-top:6px;font-size:var(--t-16);
  line-height:1.6;color:var(--wk-muted)}

/* the evidence: one plate at content width, then the two shipped screens at their own ratio */
body.page-case--wk .wk-wide{margin:clamp(24px,3vw,40px) 0 0}
body.page-case--wk .wk-wide__frame{display:block;background:var(--wk-paper);
  border:1px solid var(--wk-rule)}
body.page-case--wk .wk-wide__frame img{display:block;width:100%;height:auto}
body.page-case--wk .wk-wide figcaption,body.page-case--wk .wk-plate figcaption,
body.page-case--wk .wk-mark figcaption{margin-top:10px;font-size:var(--t-12);
  letter-spacing:.06em;color:var(--wk-muted)}
body.page-case--wk .wk-pair{margin-top:clamp(24px,3vw,40px);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start}
body.page-case--wk .wk-plate{margin:0}
body.page-case--wk .wk-plate__frame{display:block;background:var(--wk-paper);
  border:1px solid var(--wk-rule)}
body.page-case--wk .wk-plate__frame img{display:block;width:100%;height:auto}

/* the mark sheet: the institutional lockup at full width, the wordmark and the symbol beneath */
body.page-case--wk .wk-sheet{margin-top:clamp(24px,3vw,40px);display:grid;gap:clamp(16px,2.4vw,32px)}
body.page-case--wk .wk-sheet__pair{display:grid;grid-template-columns:1.6fr 1fr;
  gap:clamp(16px,2.4vw,32px);align-items:stretch}
body.page-case--wk .wk-mark{margin:0;display:flex;flex-direction:column}
body.page-case--wk .wk-mark__frame{display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,3.4vw,48px);background:var(--wk-paper);border:1px solid var(--wk-rule);
  flex:1}
body.page-case--wk .wk-mark__frame img{display:block;width:100%;height:auto;max-height:180px;
  object-fit:contain}
body.page-case--wk .wk-mark--wide .wk-mark__frame img{max-height:110px}

/* the palette: the four values the project publishes, each on its own card */
body.page-case--wk .wk-palette{margin-top:clamp(20px,2.6vw,32px)}
body.page-case--wk .wk-swatch{border:1px solid color-mix(in srgb,var(--wk-blue) 34%,var(--wk-ground))}

/* the close: the scope note and the reference's own ask, then the progression */
body.page-case--wk .wk-close__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start}
body.page-case--wk .wk-ask{padding-top:var(--sp-3);border-top:1px solid var(--wk-rule)}
body.page-case--wk .wk-ask__lead{margin-top:var(--sp-2);font-size:var(--t-18);line-height:1.66;
  color:var(--wk-muted);max-width:44ch}
body.page-case--wk .wk-next-band{border-top:1px solid var(--wk-rule)}
body.page-case--wk .case-next{background:var(--wk-paper);border:1px solid var(--wk-rule)}
body.page-case--wk .case-next:hover{border-color:var(--wk-aqua-line)}

/* the section index, as a real dialog */
body.page-case--wk .wk-index{border:1px solid var(--wk-rule);background:var(--wk-paper);
  color:var(--wk-ink);padding:clamp(20px,3vw,32px);max-width:min(520px,92vw);border-radius:2px}
body.page-case--wk .wk-index::backdrop{background:rgba(14,44,70,.42)}
body.page-case--wk .wk-index__top{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);border-bottom:1px solid var(--wk-rule);padding-bottom:var(--sp-2)}
body.page-case--wk .wk-index__h{font-family:var(--font-serif);font-weight:400;
  font-size:var(--t-22,22px)}
body.page-case--wk .wk-index__close{font-family:var(--font-display);font-size:var(--t-11);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--wk-blue);
  background:transparent;border:0;min-height:44px}
body.page-case--wk .wk-index__list{margin:var(--sp-2) 0 0;padding:0;list-style:none;display:grid}
body.page-case--wk .wk-index__list a{display:flex;align-items:center;min-height:44px;
  font-size:var(--t-16);color:var(--wk-ink);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--wk-blue) 10%,var(--wk-ground))}
body.page-case--wk .wk-index__list a:hover{color:var(--wk-blue)}

@media (max-width:900px){
  body.page-case--wk .wk-open__grid{grid-template-columns:1fr;
    padding-left:0;padding-right:0}
  body.page-case--wk .wk-open__copy{padding-inline:var(--gutter);
    padding-block:calc(8px) clamp(20px,4vw,32px)}
  body.page-case--wk .wk-art{min-height:0;margin-inline:0;border-top:1px solid var(--wk-rule)}
  body.page-case--wk .wk-art img{position:static;width:100%;height:auto}
  body.page-case--wk .wk-art::after{display:none}
  body.page-case--wk .wk-art figcaption{text-align:left;margin:10px var(--gutter)}
  body.page-case--wk .wk-story{grid-template-columns:1fr}
  body.page-case--wk .wk-close__grid{grid-template-columns:1fr}
  body.page-case--wk .wk-principles{grid-template-columns:1fr}
  body.page-case--wk .wk-sheet__pair{grid-template-columns:1fr}
  body.page-case--wk .wk-pair{grid-template-columns:1fr}
}
@media (max-width:767px){
  body.page-case--wk .wk-h1{font-size:clamp(38px,10vw,52px)}
  body.page-case--wk .wk-story__lines{grid-template-columns:1fr}
  body.page-case--wk .wk-chapters__inner{min-height:48px}
  body.page-case--wk .wk-chapters__list{overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  body.page-case--wk .wk-chapters__list::-webkit-scrollbar{display:none}
  body.page-case--wk .wk-palette{grid-template-columns:1fr 1fr}
  body.page-case--wk .wk-mark__frame{padding:clamp(18px,5vw,28px)}
}
@media (prefers-reduced-motion:reduce){
  body.page-case--wk .wk-progress{transition:none}
}

/* ---- /brand/ (brand centre, 2026-11-03). The marks are the content: no plate, no frame, no
   checkerboard behind them. The aurora is the home hero's island, mounted again. */

body.page-brand-center .bc-head .shell{position:relative;z-index:2}

.bc-section{display:grid;gap:clamp(28px,4vw,52px)}
.bc-lede{max-width:64ch}

.bc-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);
  align-items:stretch}
.bc-mark{display:flex;flex-direction:column;gap:var(--sp-2);margin:0}
/* one art height for all three, bottom-aligned, so the rules and labels sit on one line and the
   three PULSE cap heights read as the same size */
/* the art area is a full-width box and the mark sits in the middle of it, with the padding
   that is baked into the preview files keeping it off the rules */
.bc-mark__art{display:flex;align-items:center;justify-content:center;height:170px;padding:0 2%}
.bc-mark__art img{display:block;width:auto;height:auto;max-width:100%;max-height:100%}
.bc-mark:nth-child(1) .bc-mark__art img{max-height:96px}
.bc-mark:nth-child(2) .bc-mark__art img{max-height:150px}
.bc-mark:nth-child(3) .bc-mark__art img{max-height:96px}
.bc-mark figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);
  padding-top:var(--sp-2);border-top:1px solid var(--border-subtle)}
.bc-mark strong{font-family:var(--font-display);font-weight:600;font-size:var(--t-13);letter-spacing:-.01em}
.bc-mark figcaption span span{font-size:var(--t-12);color:var(--text-secondary)}
.on-dark .bc-mark figcaption{border-top-color:var(--border-on-dark)}
.on-dark .bc-mark strong{color:var(--text-on-dark)}
.on-dark .bc-mark figcaption span span{color:rgba(var(--ice-rgb),.66)}
.on-dark .bc-dl a{color:var(--ice)}

.bc-dl{display:flex;gap:var(--sp-2);font-size:var(--t-12);letter-spacing:.06em;text-transform:uppercase}
.bc-dl a{color:var(--action);text-decoration:none;border-bottom:1px solid transparent}
.bc-dl a:hover{border-bottom-color:currentColor}

.bc-bg{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,36px);align-items:start;padding-top:clamp(18px,2.4vw,32px);
  border-top:1px solid rgba(var(--ice-rgb),.14)}
.bc-bg__plate{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(var(--ice-rgb),.12);background:#0a1931}
.bc-bg__plate .rb-island,.bc-bg__plate canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* pulse-branding.com's ground, rebuilt in the browser: five soft colour fields over navy,
   the second pair deep and dark, and the site's own grain plate at 30%. Tuned against the
   live background until the colour reads the same; nothing here is an image except the grain.
   Every field is a percentage of the frame, so it scales with the plate. */
.bc-bg__plate{container-type:inline-size}
.bc-ground{position:absolute;inset:0;overflow:hidden;background:#0a1931;border-radius:var(--radius)}
.bc-ground__field{position:absolute;border-radius:50%;display:block}
.bc-ground__blur{position:absolute;inset:0;filter:blur(8.33cqw)}
.bc-ground__noise{position:absolute;inset:0;opacity:.3;
  background:url(../brand/noise.png) repeat;background-size:27.8cqw 27.8cqw}
.bg-1{left:-14%;top:-55%;width:72%;height:100%;background:#56c4c4;opacity:.9}
.bg-2{left:10%;top:-25%;width:55%;height:80%;background:#2163af;opacity:.6}
.bg-3{left:30%;top:38%;width:95%;height:110%;background:#291c53;opacity:.95}
.bg-4{left:55%;top:25%;width:75%;height:100%;background:#0e1122;opacity:.95}
.bg-5{left:-18%;top:52%;width:60%;height:80%;background:#291c53;opacity:.9}

.bc-bg__meta{display:grid;gap:var(--sp-2)}
.bc-bg__meta b{font-family:var(--font-display);font-weight:600;font-size:var(--t-15);color:var(--text-on-dark)}
.bc-bg__meta > span{font-size:var(--t-13);line-height:1.55;color:rgba(var(--ice-rgb),.66)}
.bc-bg__meta .bc-code{font-size:var(--t-12)}

/* the complete set: one quiet band, small plates on the ground each file belongs on */
.bc-setgroup{display:grid;gap:var(--sp-3);padding-top:clamp(18px,2.4vw,28px);
  border-top:1px solid var(--border-subtle)}
.bc-setgroup:first-of-type{border-top:0;padding-top:0}
.bc-setgroup h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:var(--t-15)}
.bc-setgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.bc-set{display:grid;gap:var(--sp-1);margin:0}
.bc-set__art{display:grid;place-items:center;aspect-ratio:16/7;padding:clamp(10px,1.2vw,16px);
  border:1px solid var(--border-subtle);border-radius:var(--radius);overflow:hidden}
.bc-set__art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bc-set__art--dark{background:var(--ink-navy)}
.bc-set__art--paper{background:var(--paper-2)}
.bc-set__art--checker{background:
  linear-gradient(45deg,rgba(10,25,49,.05) 25%,transparent 25%,transparent 75%,rgba(10,25,49,.05) 75%) 0 0/14px 14px,
  linear-gradient(45deg,rgba(10,25,49,.05) 25%,transparent 25%,transparent 75%,rgba(10,25,49,.05) 75%) 7px 7px/14px 14px,
  var(--paper)}
.bc-set__art--tile{padding:0;border:0}
.bc-set__art--tile img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.bc-set figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-size:var(--t-12);color:var(--text-secondary)}
.bc-set figcaption b{font-family:var(--font-display);font-weight:600;font-size:var(--t-12);color:var(--text-primary)}
.bc-set figcaption .bc-dl{margin-left:auto}

.bc-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.bc-area{display:grid;gap:4px;padding-top:var(--sp-2);border-top:1px solid rgba(var(--ice-rgb),.16)}
.bc-area__chip{display:block;height:44px;border-radius:var(--radius);margin-bottom:8px}
.chip-area-1{background:radial-gradient(circle at 30% 30%,rgba(46,168,174,.95),rgba(46,168,174,.12))}
.chip-area-2{background:radial-gradient(circle at 70% 30%,rgba(33,99,175,.95),rgba(33,99,175,.12))}
.chip-area-3{background:radial-gradient(circle at 30% 70%,rgba(41,28,83,.98),rgba(41,28,83,.2))}
.chip-area-4{background:radial-gradient(circle at 70% 70%,rgba(87,199,194,.75),rgba(87,199,194,.1))}
.bc-area b{font-family:var(--font-display);font-weight:600;font-size:var(--t-13);color:var(--text-on-dark)}
.bc-area span{font-size:var(--t-12);color:rgba(var(--ice-rgb),.62)}

.bc-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(16px,2vw,28px)}
.bc-rule{border-top:1px solid var(--border-subtle);padding-top:var(--sp-2)}
.on-dark .bc-rule{border-top-color:var(--border-on-dark)}
.bc-rule h3{margin:0 0 var(--sp-1);font-family:var(--font-display);font-weight:600;font-size:var(--t-15)}
.bc-rule p{margin:0;font-size:var(--t-14);line-height:1.6;color:var(--text-secondary)}
.on-dark .bc-rule p{color:rgba(var(--ice-rgb),.72)}

.bc-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.bc-swatch{border:1px solid var(--border-subtle);border-radius:var(--radius);overflow:hidden}
.bc-swatch__chip{height:96px}
.bc-swatch__meta{padding:var(--sp-2) var(--sp-3)}
.bc-swatch__meta b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t-14)}
.bc-swatch__meta code{font-size:var(--t-12);color:var(--text-secondary)}
.bc-swatch__meta span{display:block;font-size:var(--t-12);color:var(--text-secondary);margin-top:2px}
.bc-swatch__chip.chip-ink-navy{background:#0a1931}
.bc-swatch__chip.chip-deep-navy{background:#001d2a}
.bc-swatch__chip.chip-pulse-blue{background:#2163af}
.bc-swatch__chip.chip-aqua{background:#2ea8ae}
.bc-swatch__chip.chip-violet{background:#291c53}
.bc-swatch__chip.chip-ice{background:#e1eef0}
.bc-swatch__chip.chip-paper{background:#f0f4f4}
.bc-swatch__chip.chip-ink{background:#111c29}
.bc-swatch__chip{border-bottom:1px solid var(--border-subtle)}

.bc-type{display:grid;gap:clamp(20px,3vw,36px)}
.bc-type__row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(16px,3vw,40px);
  align-items:start;border-top:1px solid var(--border-subtle);padding-top:clamp(16px,2vw,24px)}
.bc-type__row:first-child{border-top:0;padding-top:0}
.bc-type__label b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t-15)}
.bc-type__label span{display:block;font-size:var(--t-12);color:var(--text-secondary);margin-top:4px}
.bc-type__spec{font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em}
.bc-type__spec--display{font-family:var(--font-display);font-weight:600}
.bc-type__spec--body{font-family:var(--font-body);font-weight:400;font-size:clamp(18px,1.6vw,22px);line-height:1.5;letter-spacing:0}
.bc-type__spec--serif{font-family:var(--font-serif);font-style:italic;font-weight:400}

.bc-code{display:block;margin:0;padding:var(--sp-3);overflow-x:auto;white-space:pre-wrap;
  word-break:break-word;border:1px solid rgba(var(--ice-rgb),.14);border-radius:var(--radius);
  background:rgba(var(--ice-rgb),.04);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--t-13);line-height:1.6;color:rgba(var(--ice-rgb),.86)}

.bc-close{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between}
.bc-close p{margin:0;color:var(--text-secondary);font-size:var(--t-14)}

@media (max-width:1020px){
  .bc-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .bc-marks{grid-template-columns:minmax(0,1fr);gap:clamp(24px,6vw,40px)}
  .bc-mark__art{height:150px;padding:0}
  .bc-type__row{grid-template-columns:minmax(0,1fr)}
  .bc-bg{grid-template-columns:minmax(0,1fr)}
  .bc-bg__plate{aspect-ratio:4/3}
  .bc-setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .bc-swatches{grid-template-columns:minmax(0,1fr)}
  .bc-areas{grid-template-columns:minmax(0,1fr)}
  .bc-setgrid{grid-template-columns:minmax(0,1fr)}
}