/* ══════════════════════════════════════════════════════════════════════════
   CULTURE FORGED — a Column 13 practice
   Design system modelled on thesalmonconsulting.com
   TO RESKIN: change :root only.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── the one thing to change: the blue ────────────────────────────── */
  --brand-blue: #17509f;
  --blue:     var(--brand-blue);
  --blue-2:   #035ba5;

  --ink:      #1f1d1a;
  --ink-2:    #1f1d1a;
  --paper:    #faf7f2;
  --paper-2:  #f2ece3;
  --rule:     #e8e2d8;
  --muted:    #7a746b;

  --sans: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --header-h: 77px;
  --anvil-size: 0.46em;
  --gutter: clamp(24px, 6vw, 80px);
  --max: 1400px;
  --narrow: 760px;
  --sy: clamp(70px, 10vw, 150px);
  --ease: cubic-bezier(.22,1,.36,1);
}

@media(max-width:1080px){:root{--header-h:70px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.booting body{opacity:0}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;font-weight:400;transition:opacity .45s ease;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
svg{display:block}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.03em;line-height:1.06;color:var(--ink)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--narrow)}
/* A narrow block used as the wrap itself was centring in the viewport, so it
   drifted off the left edge every other block on the page shares. Keep the
   wrap full width and constrain its children instead. */
.wrap.narrow{max-width:var(--max)}
.wrap.narrow > *{max-width:var(--narrow)}
section{position:relative}

/* ── type scale ──────────────────────────────────────────────────────── */
.t-xl{font-size:clamp(40px,5.2vw,68px);line-height:1.05;letter-spacing:-0.03em;font-weight:700}
.t-lg{font-size:clamp(30px,3.9vw,52px);line-height:1.06;letter-spacing:-0.03em;font-weight:700}
.t-md{font-size:clamp(23px,2.6vw,34px);line-height:1.14;letter-spacing:-0.025em;font-weight:700}
.t-sm{font-size:clamp(18px,1.7vw,21px);line-height:1.3;letter-spacing:-0.015em;font-weight:700}
.body{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--muted);max-width:46ch;
  text-wrap:pretty}
.body-mut{color:var(--muted)}
.hook{font-size:clamp(20px,2.3vw,30px);line-height:1.26;letter-spacing:-0.018em;font-weight:400}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin:0 0 18px}

/* ── arrow link ──────────────────────────────────────────────────────── */
.arrow-link{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-size:16px;font-weight:600;color:var(--ink);padding-bottom:6px;
  border-bottom:1px solid var(--ink);transition:gap .3s var(--ease),color .25s}
.arrow-link svg{width:17px;height:12px;flex:none;overflow:visible}
.arrow-link svg path{fill:var(--blue)}
.arrow-link:hover{gap:22px;color:var(--blue)}
.arrow-link.lg{font-size:clamp(17px,1.7vw,20px)}

.round-arw{width:52px;height:52px;border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:transparent;
  cursor:pointer;padding:0;flex:none;transition:background .3s var(--ease),border-color .3s}
.round-arw svg{width:12px;height:18px}
.round-arw.down svg{transform:rotate(180deg)}
.round-arw svg path{fill:var(--ink-2);transition:fill .3s}
.round-arw:hover{background:var(--blue);border-color:var(--blue)}
.round-arw:hover svg path{fill:#fff}


/* ══ SECTION RAIL ═════════════════════════════════════════════════════════
   Fixed at the left edge, vertically centred, homepage only. Ticks are in
   DOCUMENT order, so the marker travels down the rail exactly as far as you
   have travelled down the page. The cue below them points the way on. */
.rail{position:fixed;left:clamp(14px,1.9vw,30px);top:50%;transform:translateY(-50%);
  z-index:50;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;pointer-events:auto}
.rail.at-end .rail-cue{opacity:0}
.rail-cue{display:flex;align-items:center;height:18px;margin-top:8px;opacity:.34;
  transition:opacity .35s;animation:railBob 3s ease-in-out infinite}
.rail-cue svg{width:8px;height:13px;transform:rotate(180deg)}
.rail-cue svg path{fill:var(--ink);transition:fill .3s}
@keyframes railBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.rail-tick{display:block;background:none;border:0;padding:6px 0;cursor:pointer;line-height:0}
.rail-tick i{display:block;width:13px;height:1.5px;border-radius:2px;
  background:var(--ink);opacity:.2;
  transition:width .4s var(--ease),opacity .3s,background .3s}
.rail-tick:hover i{opacity:.5;width:20px}
.rail-tick.on i{width:30px;opacity:1}
/* over the blue section the whole rail inverts */
body.on-band .rail-tick i{background:#fff}
body.on-band .rail-cue svg path{fill:#fff}
body.menu-open .rail{opacity:0;pointer-events:none;transition:opacity .2s}
@media(prefers-reduced-motion:reduce){.rail-cue{animation:none}}
@media(max-width:1080px){.rail{display:none}}

/* ══ HEADER ═══════════════════════════════════════════════════════════════ */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;
  /* Safari needs the prefix; without it the bar was only 92% opaque over
     nothing and body copy stayed legible straight through the nav. */
  background:rgba(252,250,248,.985);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(228,222,216,.9)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--gutter)}
.brand{display:flex;flex-direction:column;gap:3px;text-decoration:none}
.logo{font-weight:700;letter-spacing:-0.02em;text-transform:lowercase;
  color:var(--ink);white-space:nowrap;line-height:1}
.logo .logo-accent{color:var(--brand-blue)}
.logo .anvil{display:inline-block;width:var(--anvil-size);height:auto;
  margin-left:.06em;vertical-align:baseline;fill:currentColor}
.logo-nav{font-size:24px}
.logo-foot{font-size:20px}
.logo-menu{font-size:22px}
.menu-panel .logo,.menu-panel .logo .logo-accent{color:#fff}
.endorse{font-size:11px;letter-spacing:.05em;color:var(--muted);line-height:1}
.bar nav{display:flex;align-items:center;gap:30px}
.bar nav a.nav-link{font-size:15px;text-decoration:none;color:var(--ink);position:relative;padding-block:3px}
.bar nav a.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--blue);transition:right .32s var(--ease)}
.bar nav a.nav-link:hover::after,.bar nav a.nav-link[aria-current="page"]::after{right:0}
.bar-right{display:flex;align-items:center;gap:18px}
@media(max-width:1080px){.bar nav,.bar-right .lang{display:none}}

.lang{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.lang span{font-size:11px;font-weight:600;letter-spacing:.1em;padding:5px 9px;line-height:1;color:var(--muted)}
.lang .on{background:var(--ink);color:#fff}
.lang .pending{opacity:.45}

.burger{display:flex;align-items:center;gap:10px;background:transparent;border:0;
  cursor:pointer;padding:6px 0;font:inherit;color:var(--ink)}
.burger .txt{font-size:14px;font-weight:500}
.burger .ic{display:flex;flex-direction:column;gap:4px;width:16px}
.burger .ic i{display:block;height:1.6px;background:var(--ink);border-radius:2px;
  transition:width .3s var(--ease),transform .3s var(--ease),opacity .2s}
.burger .ic i:nth-child(1){width:16px}
.burger .ic i:nth-child(2){width:11px}
.burger .ic i:nth-child(3){width:14px}
body.menu-open .burger .ic i:nth-child(1){width:16px;transform:translateY(5.6px) rotate(45deg)}
body.menu-open .burger .ic i:nth-child(2){opacity:0}
body.menu-open .burger .ic i:nth-child(3){width:16px;transform:translateY(-5.6px) rotate(-45deg)}

/* ══ MENU PANEL ═══════════════════════════════════════════════════════════
   A vertical tagline rail holds the left edge so the panel reads as a
   designed surface rather than a list on a blue rectangle. Nav items are
   numbered and ruled, and the booking CTA is a real button instead of a
   fifth link at the same size as the sections. */
.menu-scrim{position:fixed;inset:0;z-index:70;background:rgba(45,45,45,.4);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
body.menu-open .menu-scrim{opacity:1;visibility:visible}
.menu-panel{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(500px,100%);
  background:var(--blue);color:#fff;transform:translateX(100%);
  transition:transform .45s var(--ease);
  display:grid;grid-template-columns:clamp(46px,6vw,60px) minmax(0,1fr)}
body.menu-open .menu-panel{transform:none}

.menu-rail{border-right:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;padding-block:28px;
  background:rgba(0,0,0,.07)}
.menu-rail span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}

.menu-in{display:flex;flex-direction:column;overflow-y:auto;min-height:0}
.menu-head{display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter) 20px clamp(18px,2.4vw,30px);flex:none}
.menu-head .logo,.menu-head .logo .logo-accent{color:#fff}
.menu-head .endorse{color:rgba(255,255,255,.75)}
.menu-close{width:42px;height:42px;border:1px solid rgba(255,255,255,.55);background:transparent;
  border-radius:50%;cursor:pointer;position:relative;transition:background .25s,transform .3s}
.menu-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.menu-close::before,.menu-close::after{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:1.6px;background:#fff}
.menu-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

.menu-body{padding:clamp(14px,2.4vw,26px) var(--gutter) clamp(20px,3vw,32px) clamp(18px,2.4vw,30px);
  flex:1;display:flex;flex-direction:column;justify-content:center}
.menu-cta{align-self:flex-start}
.menu-nav{list-style:none;margin:0;padding:0}
.menu-nav li + li{border-top:1px solid rgba(255,255,255,.18)}
/* each row slides in behind the panel itself, top to bottom */
.menu-nav li{opacity:0;transform:translateX(20px);
  transition:opacity .4s var(--ease),transform .45s var(--ease)}
body.menu-open .menu-nav li{opacity:1;transform:none}
.menu-nav li:nth-child(1){transition-delay:.14s}
.menu-nav li:nth-child(2){transition-delay:.20s}
.menu-nav li:nth-child(3){transition-delay:.26s}
.menu-nav li:nth-child(4){transition-delay:.32s}
.menu-nav a{display:flex;align-items:center;gap:clamp(12px,1.6vw,18px);
  padding:clamp(11px,1.5vw,15px) 0;text-decoration:none;color:#fff}
.menu-nav .n{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:rgba(255,255,255,.5);transition:color .25s}
.menu-nav .t{font-size:clamp(25px,3.2vw,33px);font-weight:600;letter-spacing:-0.025em;
  transition:transform .32s var(--ease);transform-origin:left center}
.menu-nav .go{margin-left:auto;display:flex;opacity:0;transform:translateX(-10px);
  transition:opacity .3s,transform .32s var(--ease)}
.menu-nav .go svg{width:20px;height:14px;overflow:visible}
.menu-nav .go svg path{fill:#fff}
.menu-nav a:hover .go{opacity:1;transform:none}
.menu-nav a:hover .t{transform:translateX(6px)}
.menu-nav a:hover .n{color:#fff}

.menu-cta{display:inline-flex;align-items:center;gap:13px;margin-top:clamp(22px,3vw,32px);
  background:#fff;color:var(--blue);border-radius:999px;
  padding:14px 26px;font-size:16px;font-weight:700;text-decoration:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease) .38s,transform .4s var(--ease) .38s,box-shadow .25s}
body.menu-open .menu-cta{opacity:1;transform:none}
.menu-cta svg{width:17px;height:12px;overflow:visible}
.menu-cta svg path{fill:var(--blue)}
.menu-cta:hover{box-shadow:0 10px 26px rgba(0,0,0,.22)}

.menu-foot{padding:22px var(--gutter) 30px clamp(18px,2.4vw,30px);flex:none;
  border-top:1px solid rgba(255,255,255,.28)}
.menu-contact{display:flex;flex-wrap:wrap;gap:6px clamp(24px,4vw,48px);margin-bottom:20px}
.menu-contact .mc{display:flex;flex-direction:column;gap:3px}
.menu-contact a{color:#fff;text-decoration:none;font-size:16px;font-weight:500}
.menu-contact a:hover{opacity:.8}
.menu-contact .lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7)}
.menu-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.menu-panel .lang{border-color:rgba(255,255,255,.55)}
.menu-panel .lang span{color:rgba(255,255,255,.78)}
.menu-panel .lang .on{background:#fff;color:var(--blue)}
@media(prefers-reduced-motion:reduce){
  .menu-nav li,.menu-cta{opacity:1;transform:none;transition:none}
}
@media(max-width:420px){.menu-rail{display:none}
  .menu-panel{grid-template-columns:minmax(0,1fr)}}

.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .25s,border-color .25s,color .25s}
.socials a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.socials svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.menu-panel .socials a{border-color:rgba(255,255,255,.55);color:#fff}
.menu-panel .socials a:hover{background:#fff;color:var(--blue)}


/* ══ 1 · CLOSING BLOCK (top of document, read last) ═══════════════════════ */
.s-closing{background:transparent;padding-block:clamp(84px,11vw,150px);position:relative;z-index:3}
.s-closing .t-xl{max-width:16ch;text-wrap:balance;margin-bottom:20px}
.s-closing .t-xl .ln{display:block}
.s-closing .body{margin-bottom:clamp(28px,3.4vw,44px);font-size:17px;color:var(--muted)}
.closing-links{display:flex;flex-wrap:wrap;align-items:center;gap:26px 46px}

/* Three equal ways in. Different people reach out differently, so booking,
   email and phone get the same weight rather than one CTA and two footnotes. */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px)}
.way{position:relative;display:block;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.5);
  padding:clamp(18px,1.9vw,26px);padding-right:52px;
  transition:border-color .25s,transform .25s var(--ease),background .25s}
.way:hover{border-color:var(--ink);transform:translateY(-3px);background:#fff}
.way-lead{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.way-lead:hover{background:var(--ink);border-color:var(--ink)}
.way-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.way-lead .way-k{color:rgba(255,255,255,.66)}
.way-v{display:block;font-size:clamp(17px,1.5vw,20px);font-weight:700;
  letter-spacing:-0.02em;line-height:1.2;word-break:break-word}
.way-m{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--muted)}
.way-lead .way-m{color:rgba(255,255,255,.68)}
.way-go{position:absolute;right:clamp(16px,1.6vw,22px);top:50%;transform:translateY(-50%);
  display:block;line-height:0;transition:transform .3s var(--ease)}
.way-go svg{width:17px;height:12px;overflow:visible}
.way-go svg path{fill:var(--blue)}
.way-lead .way-go svg path{fill:#fff}
.way:hover .way-go{transform:translateY(-50%) translateX(5px)}

/* End of the road: the mirror of the hero cue, pointing back to the top. */
.closing-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 30px;margin-top:clamp(26px,3.2vw,42px)}
.restart{display:inline-flex;align-items:center;gap:14px;background:none;border:0;
  padding:0;cursor:pointer;font:inherit;color:var(--muted);transition:color .25s}
.restart:hover{color:var(--ink)}
.restart .round-arw{width:44px;height:44px}
.restart .round-arw svg{width:10px;height:15px}
.restart-t{font-size:14px;font-weight:600}
.closing-li{font-size:14px;font-weight:600;text-decoration:none;color:var(--muted)}
.closing-li:hover{color:var(--blue)}

.legal-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;
  margin-top:clamp(24px,3vw,38px);padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--rule);font-size:12.5px;color:var(--muted)}
.legal-bar > *{padding:0 18px;position:relative}
.legal-bar > *:first-child{padding-left:0}
.legal-bar > * + *::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:11px;background:var(--rule)}
.legal-bar a{text-decoration:none}
.legal-bar a:hover{color:var(--blue)}
@media(max-width:820px){
  .ways{grid-template-columns:1fr}
  .way{padding-right:52px}
  /* separators can't survive a wrap without leaving an orphan pipe at the
     start of the second line — below 820 the gap does the separating */
  .legal-bar{gap:6px 16px}
  .legal-bar > *{padding:0}
  .legal-bar > * + *::before{display:none}
}

/* ══ 2 · DISCOVER CARDS ═══════════════════════════════════════════════════ */
/* ══ MEET ALEX ════════════════════════════════════════════════════════════
   Portrait and bio on paper, the live question card in blue so the colour
   marks the part you can actually interact with. */
.s-alex{position:relative;z-index:3;padding-block:clamp(50px,7vw,90px)}
.alex-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;width:100%}
.alex-who{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,36px);align-items:center}
.alex-photo{margin:0;width:clamp(130px,15vw,196px);flex:none}
.alex-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:50%;filter:grayscale(1) contrast(1.04);
  background:var(--paper-2)}
/* The interior bio page uses the same round portrait as the homepage, in the
   page hero rather than in a split. A 4:5 photo beside five paragraphs left a
   column of dead space under it that got taller the more he had to say. */
/* photo, identity, and the statement, so the hero uses the whole page rather
   than trailing off two thirds of the way across it */
.bio-head{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:center}
.alex-photo-lg{width:clamp(148px,21vw,300px)}
.bio-head-t h1{font-size:clamp(38px,5.4vw,76px);line-height:1.0}
.bio-head-t .eyebrow{margin-bottom:14px}
.bio-head-t .body{max-width:34ch;margin-top:16px}
.bio-head-cta{margin-top:clamp(22px,2.6vw,30px)}

/* The statement and the quote hold the left rail; the history runs as one
   uninterrupted column on the right, so no paragraph is ever split across a
   column break and the eye never has to travel back up the page. */
.bio-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,80px) clamp(34px,4.6vw,86px);align-items:start}
.bio-lede{align-self:start}
.bio-stmt{font-size:clamp(21px,2.1vw,28px);line-height:1.34;letter-spacing:-0.018em;
  color:var(--ink);margin:0;max-width:27ch;text-wrap:pretty}
/* these two heads carry no eyebrow, so bottom-aligning the heading against a
   short deck left it floating well below the top of its own section */
.sec-bio .head-2{align-items:start}
.sec-bio .head-2 > div{padding-top:5px}
.bio-q{margin:clamp(26px,3vw,38px) 0 0;font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.5;color:var(--muted);font-style:normal}
.bio-prose{max-width:52ch}
.bio-prose p{font-size:clamp(16px,1.32vw,17.5px);line-height:1.72;color:var(--ink);
  margin:0 0 clamp(16px,1.5vw,20px);text-wrap:pretty}
.bio-prose p:last-child{margin-bottom:0}
.bio-facts{grid-column:1/-1}
.bio-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(24px,3vw,56px);
  margin:clamp(28px,3.2vw,42px) 0 0;border-top:1px solid var(--rule)}
.bio-facts > div{display:grid;grid-template-columns:minmax(0,1fr);
  gap:5px;padding:clamp(13px,1.4vw,17px) 0;align-items:baseline}
.bio-facts dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);white-space:nowrap}
.bio-facts dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}

.bio-split-cta{margin-top:clamp(20px,2.2vw,28px)}

/* THE SEVEN MOVES — a swipeable rail. Cards snap, the rail bleeds off the
   right edge of the wrap so there is always a visible next card, and the
   controls sit under it for anyone not using a trackpad. */
/* the rail deliberately runs past its wrap, so the section contains that
   bleed rather than letting it become a document-wide scroll */
.mv-sec{overflow-x:clip}
.mv-wrap{position:relative;margin-top:clamp(30px,3.2vw,44px)}
/* the rail runs past the right edge of the wrap so the next card always peeks */
.mv-rail{list-style:none;margin:0 calc(-1 * var(--gutter)) 0 0;
  padding:0 var(--gutter) 4px 0;
  display:flex;gap:clamp(14px,1.5vw,22px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.mv-rail::-webkit-scrollbar{display:none}
.mv{flex:0 0 clamp(232px,23vw,304px);scroll-snap-align:start;
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  padding:clamp(22px,2vw,28px) clamp(20px,1.8vw,26px) clamp(24px,2.2vw,30px);
  display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s ease}
.mv:hover{border-color:var(--blue);transform:translateY(-3px)}
.mv-ic{display:block;width:clamp(40px,3.4vw,48px);height:clamp(40px,3.4vw,48px);
  margin-bottom:clamp(20px,2vw,26px)}
.mv-ic svg{width:100%;height:100%;display:block;fill:none;stroke:var(--brand-blue);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mv-n{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--blue);
  display:block;padding-bottom:10px;margin-bottom:12px;position:relative}
.mv-n::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:20px;
  background:var(--blue);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.mv:hover .mv-n::after{width:100%}
.mv strong{display:block;font-size:clamp(16px,1.32vw,18px);line-height:1.24;
  letter-spacing:-0.015em;margin-bottom:10px;color:var(--ink)}
.mv-d{font-size:14px;line-height:1.55;color:var(--muted);text-wrap:pretty}
/* controls */
.mv-ctl{display:flex;align-items:center;justify-content:flex-end;gap:20px;
  margin-top:clamp(18px,2vw,26px)}
.mv-arrows{display:flex;gap:9px}
.mv-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);
  background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:border-color .25s ease,background .25s ease,opacity .25s ease}
.mv-arrows button:hover:not(:disabled){border-color:var(--ink);background:var(--paper)}
.mv-arrows button:disabled{opacity:.32;cursor:default}
.mv-arrows svg{width:16px;height:16px;display:block}
.mv-prev svg{transform:rotate(180deg)}

/* who's in the room: three claims */
.room{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,44px)}
.room > div{border-top:2px solid var(--ink);padding-top:clamp(14px,1.5vw,19px)}
.room-k{font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-0.02em;
  font-weight:700;color:var(--ink);margin:0 0 9px}
.room p:last-child{font-size:15px;line-height:1.55;color:var(--muted);margin:0;
  text-wrap:pretty}

/* THE RECORD — the number leads, the explanation follows */
.record{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3vw,52px) clamp(26px,3.2vw,58px)}
.record > div{border-top:1px solid var(--rule);padding-top:clamp(15px,1.6vw,20px)}
.rec-n{font-size:clamp(20px,1.85vw,26px);line-height:1.15;letter-spacing:-0.028em;
  font-weight:700;color:var(--ink);margin:0 0 10px;text-wrap:pretty}
.rec-d{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty}

@media(max-width:1080px){
  .record{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .bio-body{grid-template-columns:minmax(0,1fr);gap:26px}
  .bio-stmt{max-width:26ch}
  .bio-prose{max-width:62ch}
  .bio-facts{grid-template-columns:minmax(0,1fr)}
  .bio-facts > div + div{border-top:1px solid var(--rule)}
  .room{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media(max-width:620px){
  .record{grid-template-columns:minmax(0,1fr)}
  .mv{flex-basis:min(78vw,300px)}
  .mv-ctl{margin-top:20px}
}
.lead-p{font-size:clamp(18px,1.65vw,21px);color:var(--ink)}
@media(max-width:720px){.bio-head{grid-template-columns:1fr;gap:24px}}
.alex-bio .t-lg{margin-bottom:14px}
.alex-bio .body{font-size:16px;max-width:38ch}

/* the ask card */
.ask{background:var(--brand-blue);color:#fff;border-radius:20px;
  padding:clamp(24px,2.8vw,38px)}
.ask-label{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0 0 12px}
.ask-q{transition:opacity .16s ease;font-size:clamp(19px,1.95vw,26px);line-height:1.28;letter-spacing:-0.018em;
  font-weight:600;margin:0 0 16px;min-height:2.6em}
.ask-another{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  padding:0;margin:0 0 20px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.72);transition:color .2s}
.ask-another:hover{color:#fff}
.ask-another svg{width:14px;height:10px;overflow:visible}
.ask-another svg path{fill:currentColor}
.ask-form{display:block}
.ask textarea,.ask input[type=text],.ask input[type=email]{
  width:100%;font:inherit;font-size:15px;color:#fff;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:11px 13px;
  transition:border-color .2s,background .2s}
.ask textarea{resize:vertical;min-height:74px;margin-bottom:10px}
.ask ::placeholder{color:rgba(255,255,255,.55)}
.ask textarea:focus,.ask input:focus{outline:0;border-color:#fff;background:rgba(255,255,255,.16)}
.ask-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ask-ok{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.4;
  color:rgba(255,255,255,.78);margin-bottom:16px;cursor:pointer}
.ask-ok input{margin:2px 0 0;accent-color:#fff;flex:none}
.ask-send{background:#fff;color:var(--brand-blue);border:0;border-radius:999px;
  font:inherit;font-size:15px;font-weight:600;padding:12px 26px;cursor:pointer;
  transition:transform .2s,box-shadow .2s}
.ask-send:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.ask-thanks{margin:14px 0 0;font-size:14px;color:#fff;font-weight:600}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:980px){
  .alex-grid{grid-template-columns:1fr;gap:26px}
}
@media(max-width:560px){
  .alex-who{grid-template-columns:1fr;gap:16px;justify-items:start}
  .ask-row{grid-template-columns:1fr}
}

/* ══ 3 · APPROACH (expandable rows) ═══════════════════════════════════════ */
.s-approach{position:relative;z-index:3;padding-block:clamp(50px,7vw,90px)}
/* The question carries the section; the capability names sit under it in the
   same register as the .hook copy elsewhere — light weight, not display. */
.prac-intro{display:flex;flex-wrap:wrap;align-items:center;
  gap:8px clamp(20px,2.6vw,40px);margin-bottom:clamp(18px,2.2vw,30px)}
.prac-intro h2{font-size:clamp(30px,3.6vw,48px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.06}
.prac-intro .body{margin:0;max-width:34ch;font-size:clamp(15px,1.25vw,17px);
  line-height:1.45}

/* Four practice rows. Each row is one link — one tap target on a phone,
   and no expanding panel to fight the section snap. */
.prac-list{border-top:1px solid var(--rule)}
.prac{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.68fr) auto;
  gap:clamp(16px,2.4vw,40px);align-items:center;
  padding:clamp(14px,1.6vw,20px) 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;position:relative}
.prac:last-child{border-bottom:0}
.prac-name{font-size:clamp(20px,2.3vw,30px);font-weight:400;letter-spacing:-0.018em;
  line-height:1.26;transition:color .25s}
.prac:hover .prac-name{color:var(--brand-blue)}
.prac-prov{display:block;font-size:16px;line-height:1.45;color:var(--ink);
  font-weight:600;margin-top:7px}
/* Case material is demoted so the description carries the row: the sector
   sits back, the path drops to regular weight and muted ink. */
.prac-sector{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(23,80,159,.62);margin:0}
.prac-out{display:block;font-size:14px;line-height:1.4;font-weight:400;
  color:var(--muted);margin-top:4px}
.prac-btn{display:inline-flex;align-items:center;gap:9px;flex:none;white-space:nowrap;
  font-size:14.5px;font-weight:600;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:999px;padding:10px 21px;
  transition:background .25s,color .25s,border-color .25s}
.prac-btn svg{width:15px;height:11px;overflow:visible}
.prac-btn svg path{fill:var(--blue);transition:fill .25s}
.prac:hover .prac-btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.prac:hover .prac-btn svg path{fill:#fff}
@media(max-width:900px){
  /* name + a round control on one line, copy beneath — the whole row is the
     link anyway, so a full pill per row was just vertical cost */
  .prac{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;
    grid-template-areas:"name btn" "body body";padding:clamp(20px,3.6vw,26px) 0}
  .prac-name{grid-area:name}
  .prac-body{grid-area:body}
  .prac-btn{grid-area:btn;align-self:center;padding:0;width:38px;height:38px;
    border-radius:50%;justify-content:center;gap:0}
  .prac-btn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .prac-intro{display:block}
  .prac-intro .body{margin-top:10px;max-width:none}
}

/* ══ THE BLUE BREAK ═══════════════════════════════════════════════════════
   A full-screen sales beat: the line as a creative callout, the balancing
   figure in white beside it. */
/* The drawing deliberately bleeds 14% past its column. Between about 900 and
   1080 the gutter stops absorbing that and 9px escaped the viewport, which is
   enough to make the whole page scroll sideways. Clip rather than un-bleed. */
.s-band{background:var(--brand-blue);color:#fff;overflow-x:clip}
.band-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);
  gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.band-huge{color:#fff;font-size:clamp(46px,6.6vw,96px);line-height:.98;
  letter-spacing:-0.04em;font-weight:700;margin:0 0 clamp(18px,2.2vw,30px);max-width:11ch}
.band-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:44ch;
  color:rgba(255,255,255,.85);margin:0 0 clamp(24px,3vw,36px)}
.btn-onblue{display:inline-block;background:#fff;color:var(--brand-blue);
  text-decoration:none;font-size:16px;font-weight:600;padding:15px 32px;
  border-radius:999px;transition:transform .2s,box-shadow .2s}
.btn-onblue:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.18)}

/* the drawing, in white — the swing waits for the trace to land */
.s-band .line-art .s{stroke:#fff}
.band-art{width:114%;margin-right:-14%}
.band-art .swing{transform-box:view-box}
.band-art.draw .swing-l{transform-origin:500px 208px;
  animation:swingL 3.6s ease-in-out 1.7s infinite}
.band-art.draw .swing-r{transform-origin:548px 200px;
  animation:swingR 3.6s ease-in-out 1.7s infinite}
@keyframes swingL{0%,100%{transform:rotate(0deg)}30%{transform:rotate(14deg)}
  75%{transform:rotate(-40deg)}}
@keyframes swingR{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-14deg)}
  75%{transform:rotate(40deg)}}
@media(prefers-reduced-motion:reduce){.band-art .swing{animation:none!important}}
@media(max-width:900px){
  .band-in{grid-template-columns:1fr;gap:22px}
  .band-art{order:-1;max-width:520px;margin:0 auto;width:100%}
  .band-huge{max-width:none}.band-lead{max-width:none}
}

/* ══ 4 · PRINCIPLES ═══════════════════════════════════════════════════════ */
.s-principles{position:relative;z-index:3;background:transparent;
  padding-block:clamp(70px,9vw,130px)}
.prin-intro{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(28px,4vw,64px);margin-bottom:clamp(34px,4vw,54px)}
.prin-intro h2{white-space:nowrap}
.prin-intro .body{margin-top:16px;max-width:64ch}
.prin-cta{flex:none}
.prin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);align-items:stretch}
.prin{display:flex;flex-direction:column;gap:0;padding:clamp(18px,1.6vw,24px);
  border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.5);
  transition:border-color .25s,transform .25s var(--ease)}
.prin:hover{border-color:var(--brand-blue);transform:translateY(-3px)}
.prin .num{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--blue);
  display:block;margin-bottom:8px}
.prin h3{font-size:clamp(16px,1.3vw,18px);margin-bottom:10px;letter-spacing:-0.02em;
  line-height:1.2}
.prin p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
@media(max-width:1080px){.prin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.prin-intro{flex-direction:column;align-items:flex-start;
    gap:24px;margin-bottom:32px}
  .prin-intro .body{max-width:none}}
@media(max-width:860px){.prin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prin-intro h2{white-space:normal}}
@media(max-width:540px){.prin-grid{grid-template-columns:1fr}}

/* ══ 5 · CONVICTION ═══════════════════════════════════════════════════════ */
.s-conviction{position:relative;z-index:3;padding-block:clamp(70px,9vw,130px)}
.conv{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(30px,5vw,80px);align-items:center}
.conv .hook{margin:18px 0;max-width:22ch}
.conv .line-art{width:112%;margin-left:-10%}
@media(max-width:900px){.conv{grid-template-columns:1fr;gap:32px}
  .conv .line-art{width:100%;margin-left:0}}
.conv .body{color:var(--muted)}

/* ══ 6 · HERO ═════════════════════════════════════════════════════════════ */
.s-hero .wrap{width:100%}
/* The header is fixed and overlays the top of this section, so the top
   padding carries it — that centres the block in the space you actually see. */
/* The headline block is centred in the band between the header and the cue,
   not in the section box — otherwise the cue's footprint drags it low.
   --cue-h is the cue's own height; the two paddings mirror each other around
   it so the gap above the content equals the gap below it. */
.s-hero{position:relative;z-index:3;
  --cue-h:68px;--cue-b:clamp(20px,3.6vh,42px);--hero-gap:clamp(24px,5vh,60px)}
.js-home > section.s-hero{padding-block:calc(var(--header-h) + var(--hero-gap))
  calc(var(--cue-h) + var(--cue-b) + var(--hero-gap))}
.s-hero .t-xl{max-width:13ch;margin-bottom:28px}
.s-hero .body{max-width:46ch}
/* The cue is anchored to the foot of the hero rather than stacked above the
   headline: it reads as "there is more below" instead of competing with the H1,
   and taking it out of flow lets the headline block sit higher. */
.hero-cue{position:absolute;left:0;right:0;bottom:var(--cue-b);
  display:flex;justify-content:center;z-index:4}
.up-cue{display:inline-flex;align-items:center;gap:16px;margin:0;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:#B4ADA6;text-align:left}
.hero-cue .up-cue{flex-direction:column-reverse;align-items:center;gap:11px;text-align:center}
.hero-cue .up-cue .round-arw{width:38px;height:38px}
.hero-cue .up-cue .round-arw svg{width:9px;height:14px}
.hero-cue .up-cue .cue-script{margin-left:9px}
.up-cue .t{font-size:15px;font-weight:700;letter-spacing:.015em;line-height:1.25;
  color:var(--ink)}
.up-cue .cue-script{font-family:inherit;font-style:normal;font-weight:400;font-size:15px;
  letter-spacing:.01em;color:#B4ADA6;margin-left:10px;white-space:nowrap}
.up-cue .round-arw{border-color:#DCD5CE}
.up-cue .round-arw svg path{fill:#B4ADA6}
.up-cue:hover .t{color:var(--blue)}
.up-cue:hover .cue-script{color:var(--muted)}
.up-cue:hover .round-arw{background:var(--blue);border-color:var(--blue)}
.up-cue:hover .round-arw svg path{fill:#fff}
.up-cue .round-arw{animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.up-cue .round-arw{animation:none}}


/* ══ BUTTONS ══════════════════════════════════════════════════════════════
   Primary is ink-on-light, not blue — the blue stays reserved for brand
   accents, and shows up on the ghost hover. */
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:36px}
.btn-primary{background:var(--ink);color:var(--paper);text-decoration:none;
  font-size:16px;font-weight:600;padding:15px 32px;border-radius:999px;
  display:inline-block;transition:transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(31,29,26,.18)}
.btn-ghost{color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;
  padding:15px 10px;border-bottom:2px solid transparent;transition:border-color .2s}
.btn-ghost:hover{border-color:var(--brand-blue)}
.nav-cta,.btn-outline{font-size:15px;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:999px;padding:9px 22px;transition:all .2s}
.nav-cta:hover,.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-outline{display:inline-block;font-size:16px;font-weight:600;padding:13px 30px}
/* the one place the personal profile is offered, on Alex's own page */
.btn-li{display:inline-flex;align-items:center;gap:11px;padding-inline:24px}
.btn-li svg{width:19px;height:19px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
@media(max-width:1080px){.nav-cta{display:none}}

/* ══ HERO ═════════════════════════════════════════════════════════════════ */
.hero-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  align-items:center;gap:clamp(24px,4vw,64px);width:100%}
.hero-art{position:relative}
.hero-art svg{width:100%;height:auto;display:block}

/* ══ LINE-DRAWING DRAW-ON ═════════════════════════════════════════════════
   Each path is pathLength="100" with an inline animation-delay taken from
   its x-position, so the strokes flow in as a left-to-right wave.
   dasharray gap (300) must exceed length+offset or the pattern wraps and
   shows a dot at the far end; offset is 101, not 100, to hide the end cap. */
.line-art svg{width:100%;height:auto;display:block}
.line-icon svg{width:100%;height:auto;display:block}
.line-art .s,.line-icon .s{fill:none;stroke:var(--ink);stroke-width:var(--stroke,1.5);
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100 300;stroke-dashoffset:101;
  animation-name:none;animation-timing-function:cubic-bezier(0.65,0,0.35,1);
  animation-fill-mode:forwards}
/* the wave holds until the drawing is actually on screen */
.line-icon .s{stroke:var(--brand-blue)}
.line-art.draw .s,.line-icon.draw .s{animation-name:draw}
@keyframes draw{to{stroke-dashoffset:0}}
html:not(.js) .line-art .s,html:not(.js) .line-icon .s{stroke-dashoffset:0;animation:none}
@media(prefers-reduced-motion:reduce){
  .line-art .s,.line-icon .s{animation:none!important;stroke-dashoffset:0!important}
}
@media(max-width:860px){
  .js-home > section.s-hero{min-height:0;align-items:flex-start;
    padding-block:clamp(96px,24vw,124px) clamp(48px,10vw,72px)}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .s-hero .t-xl{margin-inline:auto}
  .hero-copy .body{margin-inline:auto}
  /* no room to float it on a phone — put it back in flow under the buttons */
  .hero-cue{position:static;margin-top:clamp(30px,6vw,42px)}
  .hero-cue .up-cue .cue-script{display:block;margin-left:0;margin-top:3px}
  .cta-row{justify-content:center}
  .hero-art{order:-1;max-width:520px;margin:0 auto}

}


/* ══ SECTION SNAP ═════════════════════════════════════════════════════════
   Each homepage section fills the viewport and the scroll settles onto it.
   'proximity', not 'mandatory': mandatory traps a section that grows past
   100vh (the approach accordion when open) because the browser refuses to
   rest anywhere between snap points. Proximity only pulls when you stop
   near one, so long sections stay freely scrollable.
   Scoped with html.snap so interior pages and articles scroll normally. */
html.snap{scroll-snap-type:y proximity}
html{scroll-behavior:smooth}
.js-home > section{min-height:100vh;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--header-h) + clamp(24px,5vh,60px)) clamp(24px,5vh,60px)}
.js-home > section > .wrap{width:100%}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.snap{scroll-snap-type:none}
}
@media(max-width:860px){
  html.snap{scroll-snap-type:none}
  .js-home > section{min-height:0}
}

/* ══ interior pages ═══════════════════════════════════════════════════════ */
.phero{padding-block:clamp(135px,15vw,195px) clamp(30px,3.4vw,48px);position:relative;z-index:3}
/* The page intro and the first block after it are one thought — the full
   section rhythm between them left ~250px of dead air on every page. */
.phero + .sec:not(.alt){padding-top:clamp(28px,3.2vw,50px)}
.phero + .sec .hlist{margin-top:0}
.phero + .sec .article > *:first-child{margin-top:0}
.phero + .sec > .wrap > .head:first-child,
.phero + .sec > .wrap > .narrow.head:first-child{margin-top:0}
.phero .t-lg{max-width:20ch;margin-bottom:18px}
.phero .body{font-size:17px;max-width:60ch;color:var(--muted)}
.crumb{font-size:12.5px;letter-spacing:.04em;color:var(--muted);margin-bottom:16px}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--blue)}
.sec{padding-block:var(--sy);position:relative;z-index:3}
.sec.alt{background:var(--paper-2)}
.head{margin-bottom:clamp(32px,4vw,56px)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,5vw,72px);align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(24px,3vw,40px)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:clamp(22px,2.6vw,36px)}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}
.ticks{margin:16px 0 0;padding:0;list-style:none}
.ticks li{font-size:16px;padding-left:18px;position:relative;margin-bottom:8px}
.ticks li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--blue)}
.pullquote{font-size:clamp(20px,2.4vw,28px);line-height:1.28;letter-spacing:-0.02em;
  border-left:2px solid var(--blue);padding-left:clamp(18px,3vw,30px);margin:30px 0;font-weight:400}

.case{background:#fff;border:1px solid var(--rule);border-radius:3px;padding:clamp(22px,2.5vw,30px);
  transition:border-color .25s,transform .25s var(--ease)}
.case:hover{border-color:var(--blue);transform:translateY(-3px)}
.case .sector{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:12px}
.case h3{font-size:19px;margin-bottom:12px;line-height:1.2}
.case p{font-size:15px;margin-bottom:.7em;color:var(--muted)}
.case .result{color:var(--ink);font-weight:500}
.case .tag{margin-top:15px;padding-top:12px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--muted)}
.case .tag a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(222,149,132,.5)}
.case.live{border-color:var(--blue)}
.live-flag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.live-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}

.shape{border-top:1px solid var(--ink);padding-top:20px}
.shape .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  font-weight:700;margin-bottom:10px}
.shape p{font-size:15px;color:var(--muted)}
.shape .who{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--muted)}

.method{counter-reset:m;margin:26px 0 0;padding:0;list-style:none}
.method li{counter-increment:m;position:relative;padding-left:46px;margin-bottom:15px;font-size:16px}
.method li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-size:12px;font-weight:700;color:var(--blue)}
.method strong{font-weight:700}
/* the full seven moves live on the leadership page; here they are a summary */
.method-tight{columns:2;column-gap:40px;margin-top:22px}
.method-tight li{margin-bottom:11px;break-inside:avoid}
@media(max-width:640px){.method-tight{columns:1}}

/* ══ NEXT STEP ════════════════════════════════════════════════════════════
   Every interior page used to end on the same generic contact block. This
   is the one forward move that page should make, offered before the ask. */
.s-next{position:relative;z-index:3;
  margin-top:calc(var(--sy) * -0.45);padding-bottom:clamp(30px,4vw,54px)}
.s-cta{padding-top:clamp(52px,6vw,88px)}
.nextstep{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"k go" "t go" "d go";align-items:center;
  column-gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,42px);
  border:1px solid var(--rule);border-radius:20px;background:var(--paper-2);
  text-decoration:none;color:inherit;
  transition:background .32s var(--ease),border-color .32s,color .32s,transform .32s var(--ease)}
.nextstep:hover{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;
  transform:translateY(-3px)}
.ns-k{grid-area:k;display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px;transition:color .32s}
.ns-t{grid-area:t;display:block;font-size:clamp(25px,2.9vw,40px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.06}
.ns-d{grid-area:d;display:block;margin-top:10px;font-size:15px;line-height:1.45;
  color:var(--muted);max-width:56ch;transition:color .32s}
.nextstep:hover .ns-k{color:rgba(255,255,255,.72)}
.nextstep:hover .ns-d{color:rgba(255,255,255,.82)}
.ns-go{grid-area:go;align-self:center;display:flex;align-items:center;justify-content:center;
  width:clamp(50px,4.4vw,64px);height:clamp(50px,4.4vw,64px);flex:none;
  border-radius:50%;border:1px solid var(--rule);background:#fff;
  transition:transform .32s var(--ease),border-color .32s}
.ns-go svg{width:19px;height:14px;overflow:visible}
.ns-go svg path{fill:var(--blue)}
.nextstep:hover .ns-go{transform:translateX(6px);border-color:#fff}
@media(max-width:640px){
  .nextstep{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"k" "t" "d" "go";row-gap:0}
  .ns-go{margin-top:22px;width:50px;height:50px}
}

.photo{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--rule);
  overflow:hidden}
/* black and white applied in CSS, so the source file stays colour and the
   treatment is one line to change or undo */
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:grayscale(1) contrast(1.04)}
.team-photo img{filter:grayscale(1) contrast(1.04)}
@media(max-width:860px){.photo{aspect-ratio:3/2}}

.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:clamp(18px,2.2vw,30px);max-width:300px}
.team-card{position:relative;cursor:pointer;background:none;border:0;padding:0;
  text-align:left;font:inherit;color:inherit;display:block;width:100%}
.team-photo{position:relative;aspect-ratio:1;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--rule)}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.team-card:hover .team-photo img{transform:scale(1.04)}
.team-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.team-veil{position:absolute;inset:0;background:rgba(222,149,132,.9);opacity:0;
  display:flex;align-items:center;justify-content:center;transition:opacity .3s var(--ease)}
.team-card:hover .team-veil,.team-card:focus-visible .team-veil{opacity:1}
.team-veil span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.team-meta{padding-top:14px}
.team-meta .role{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:5px}
.team-meta .name{font-size:19px;font-weight:600;letter-spacing:-0.02em;line-height:1.15}
.team-card.open-slot{cursor:default}
.team-card.open-slot .team-veil{display:none}

.bio-scrim{position:fixed;inset:0;z-index:90;background:rgba(45,45,45,.5);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
body.bio-open .bio-scrim{opacity:1;visibility:visible}
.bio-modal{position:fixed;inset:0;z-index:95;display:flex;align-items:center;
  justify-content:center;padding:var(--gutter);pointer-events:none}
.bio-inner{background:var(--paper);max-width:820px;width:100%;max-height:86vh;overflow-y:auto;
  padding:clamp(26px,4vw,52px);position:relative;transform:translateY(18px);opacity:0;
  pointer-events:none;transition:transform .38s var(--ease),opacity .3s var(--ease);
  border:1px solid var(--rule)}
body.bio-open .bio-inner{transform:none;opacity:1;pointer-events:auto}
.bio-inner h3{font-size:clamp(26px,3vw,36px);margin-bottom:6px}
.bio-inner .role{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:22px}
.bio-inner p{font-size:16px;line-height:1.66;color:var(--muted)}
.bio-close{position:absolute;top:16px;right:16px;width:40px;height:40px;background:transparent;
  border:1px solid var(--rule);border-radius:50%;cursor:pointer}
.bio-close:hover{background:var(--blue);border-color:var(--blue)}
.bio-close::before,.bio-close::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1.6px;background:var(--ink)}
.bio-close:hover::before,.bio-close:hover::after{background:#fff}
.bio-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.bio-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

.post{border-top:1px solid var(--rule);padding-top:22px}
.post .meta{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:11px}
.post h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:12px;line-height:1.16}
.post h3 a{text-decoration:none}
.post h3 a:hover{color:var(--blue)}
.post p{font-size:15.5px;color:var(--muted)}
/* The essay body was centring itself while the page hero and the cards below
   it were left-aligned, so one page had three different left edges. */
.article{max-width:680px}
.article p{font-size:18px;line-height:1.72;margin-bottom:1.2em}
.article h2{font-size:clamp(24px,2.8vw,32px);margin-top:1.7em;margin-bottom:.5em}
.article .kicker{font-size:21px;line-height:1.5;margin-bottom:1.4em}
.meta-line{font-size:13px;color:var(--muted);letter-spacing:.04em;margin:16px 0 0}

.strip{display:flex;flex-wrap:wrap;gap:9px 30px;font-size:13.5px;color:var(--muted);
  border-top:1px solid var(--rule);margin-top:clamp(36px,5vw,56px);padding-top:22px}
.strip span{display:flex;align-items:center;gap:9px}
.strip span::before{content:"";width:4px;height:4px;background:var(--blue);border-radius:50%;flex:none}

.hlist{margin-top:clamp(24px,3vw,38px);border-top:1px solid var(--rule)}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--rule);padding:clamp(18px,2vw,26px) 0;
  text-decoration:none;color:inherit;transition:padding-left .35s var(--ease)}
.hrow:hover{padding-left:18px}
.hrow-t{font-size:clamp(19px,2.1vw,25px);font-weight:600;letter-spacing:-0.02em;transition:color .25s}
.hrow:hover .hrow-t{color:var(--blue)}
.hrow-a{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);white-space:nowrap}

.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:14px 28px;
  border-radius:2px;text-decoration:none;font-size:14.5px;font-weight:600;
  transition:background .25s var(--ease)}
.btn:hover{background:var(--blue)}

footer.site{background:var(--paper-2);padding-block:clamp(56px,7vw,84px) 0;
  font-size:14px;position:relative;z-index:3;border-top:1px solid var(--rule)}
footer.site a{color:var(--ink);text-decoration:none}
footer.site a:hover{color:var(--blue)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.5vw,48px);padding-bottom:clamp(32px,4vw,50px)}
@media(max-width:940px){.foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-brand p{margin-top:14px;max-width:34ch;font-size:13.5px;color:var(--muted)}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col .h{font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue);margin-bottom:4px}
.foot-col .h-2{margin-top:14px}
footer.site .legal-bar{margin-top:0;padding-bottom:clamp(20px,2.4vw,28px)}
footer.site .lang{align-self:flex-start;width:-moz-fit-content;width:fit-content}

.rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.ph{background:rgba(222,149,132,.18);border-bottom:1px dashed var(--blue);
  padding:0 3px;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  *{transition-duration:.01ms!important;animation:none!important}
}

.s-closing .wrap,.s-discover .wrap,.s-approach .wrap,.s-principles .wrap,
.s-conviction .wrap,.s-hero .wrap{position:relative;z-index:3}

/* hero art accent */
.hero-copy{max-width:none}
.s-hero .t-xl{font-size:clamp(36px,3.7vw,54px);max-width:16ch;margin-bottom:24px}
.s-hero .t-xl em{font-style:normal;color:var(--brand-blue);white-space:nowrap}
@media(max-width:900px){  .s-hero .t-xl{font-size:clamp(40px,9vw,58px);max-width:14ch}}


/* ══ NEWSLETTER CAPTURE ═══════════════════════════════════════════════════
   Two dresses, one component: a block at the end of an essay and on the
   Insights hub (the two moments of highest intent), and a compact line in
   the footer for everyone who never gets that far. */
.s-sub{position:relative;z-index:3;padding-bottom:clamp(30px,4vw,54px);
  margin-top:calc(var(--sy) * -0.45)}
/* Both of these pull themselves up against a preceding section's bottom
   padding. When they run back to back the second pull eats the first, and
   the cards overlap — so only the first block in a run gets the pull. */
.s-sub + .s-next{margin-top:0}
/* the -0.45 pull is calibrated against a full --sy section; on the tighter
   bio rhythm it swallowed the whole gap and the card collided with the copy */
.sec-bio + .s-next{margin-top:0}
/* matches the next-step card it sits above, so the two read as one rhythm */
.sub-block{background:var(--paper-2);border:1px solid var(--rule);border-radius:20px;
  padding:clamp(26px,3.2vw,44px) clamp(24px,3vw,42px)}
.sub-block .eyebrow{margin-bottom:10px}
.sub-block .t-sm{font-size:clamp(22px,2.3vw,29px);font-weight:700;letter-spacing:-0.03em;
  line-height:1.1}
.sub-note{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:9px;max-width:52ch}
.sub-row{display:flex;gap:10px;margin-top:20px;max-width:520px}
.sub input{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:999px;
  padding:13px 20px;transition:border-color .25s}
.sub input:focus{outline:0;border-color:var(--brand-blue)}
.sub input::placeholder{color:#b4ada6}
.sub button{display:inline-flex;align-items:center;gap:10px;flex:none;cursor:pointer;
  font:inherit;font-size:15px;font-weight:700;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);border-radius:999px;padding:13px 24px;
  transition:background .25s,transform .25s var(--ease)}
.sub button:hover{background:var(--brand-blue);border-color:var(--brand-blue)}
.sub button svg{width:16px;height:11px;overflow:visible}
.sub button svg path{fill:currentColor}
.sub-done{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--brand-blue)}
/* never silently swallow a failed subscribe — offer the manual route */
.sub-fail{margin-top:12px;font-size:14px;color:var(--muted)}
.sub-fail a{color:var(--brand-blue)}
.sub button[disabled]{opacity:.6;cursor:default}

/* footer variant */
.sub-foot{margin-top:18px;max-width:330px}
.sub-lab{display:block;font-size:10px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.sub-foot .sub-row{margin-top:0;gap:8px}
.sub-foot input{padding:11px 16px;font-size:14px}
.sub-foot button{padding:11px 15px}
.sub-foot .sub-note{margin-top:9px;font-size:12.5px}

/* Section intros used a single 760px column inside a 1400px wrap, so every
   one of them left ~640px of empty page to its right. Splitting the heading
   from its deck uses the width and takes height out at the same time. */
.head-2{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,64px);align-items:end;margin-bottom:clamp(24px,3vw,38px)}
.head-2 h2{max-width:18ch}
.head-2 .eyebrow{margin-bottom:10px}
.head-2 .body{max-width:46ch;margin:0}
.phero-2{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,64px);align-items:end}
.phero-2 h1{max-width:15ch}
.phero-2-r .body{max-width:44ch;margin:0}
.phero-2-r .arrow-link{margin-top:clamp(18px,2vw,24px)}
@media(max-width:860px){
  .head-2,.phero-2{grid-template-columns:minmax(0,1fr);gap:14px}
  .head-2 h2,.phero-2 h1{max-width:none;order:2}
  .head-2 > div{order:1}
  .head-2 .body,.phero-2-r .body{max-width:none}
}

/* ══ SERVICES ═════════════════════════════════════════════════════════════
   One headline over the page, the offer under it, the build as a blue band,
   then the shapes and the subjects. */

/* the page's one big statement */
.svc-hero{padding-block:clamp(135px,15vw,200px) clamp(26px,3vw,42px);
  position:relative;z-index:3}
.t-hero{font-size:clamp(42px,6.6vw,92px);line-height:1.0;letter-spacing:-0.04em;
  font-weight:700;max-width:15ch}
/* the read sits right under the page headline and runs straight into the
   blue band, so it does not need a full section's worth of air either side */
.sec-tight{padding-block:clamp(20px,2.4vw,34px) clamp(38px,4.6vw,66px)}
/* the forms answer the steps directly above them; the standard --sy gap read
   as three unrelated blocks rather than one argument */
.sec-forms{padding-block:clamp(40px,5vw,72px) clamp(44px,5.4vw,78px)}
/* the bio page runs on the same rhythm as this one. Declared here because it
   has to outrank the generic .sec padding above it in the cascade. */
.sec-bio{padding-block:clamp(38px,4.6vw,66px)}
.sec-bio + .sec-bio{padding-top:clamp(38px,4.6vw,66px)}

/* the offer */
/* the spec column gets the extra width, so its answers stay on one line */
.read-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.2fr);
  gap:clamp(28px,3.8vw,66px);align-items:start}
.read-copy .t-lg{margin:0}
.read-copy .body{margin-top:16px;max-width:46ch}
.read-copy .btn-primary{margin-top:clamp(24px,2.8vw,32px)}
.read-spec{margin:0}
/* A narrow, fixed label column and a tight gap, so every answer sits on one
   line instead of wrapping under a half-empty label. */
.read-spec{border-top:1px solid var(--rule)}
/* the label column sizes to its longest label so none of them wrap either */
.spec{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:5px clamp(12px,1vw,15px);padding:clamp(13px,1.4vw,17px) 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
/* small caps sit high in their line box, so the first row needs more clearance
   under the top rule than the optical gap between the rows below it */
.spec:first-child{padding-top:clamp(18px,2vw,25px)}
.spec dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);white-space:nowrap}
.spec dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}

/* ── the build, as the page's blue moment ─────────────────────────────────
   Everything in here is pure white: h1..h4 carry color:var(--ink) globally,
   which would otherwise leave the headline near-black on blue. */
.s-build{background:var(--brand-blue);position:relative;z-index:3;
  padding-block:clamp(48px,5.6vw,78px)}
.s-build,.s-build h2,.s-build h3,.s-build p{color:#fff}
.s-build .t-xl{font-size:clamp(32px,4.2vw,58px);max-width:17ch;margin:0}
.step-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,56px);margin-top:clamp(26px,2.8vw,38px)}
.step{border-top:1px solid rgba(255,255,255,.42);padding-top:clamp(18px,1.9vw,24px)}
.step-ic{display:block;width:clamp(40px,3.6vw,50px);height:clamp(40px,3.6vw,50px)}
.step-ic svg{width:100%;height:100%;display:block;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.step-n{display:block;margin-top:clamp(13px,1.4vw,18px);font-size:12px;font-weight:700;
  letter-spacing:.14em;color:rgba(255,255,255,.75)}
.step h3{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-0.028em;margin:9px 0 0}
.step p{margin:11px 0 0;font-size:15.5px;line-height:1.6;max-width:36ch}

/* ── the shapes, styled to answer the steps ───────────────────────────── */
.form-head{max-width:20ch}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.3vw,18px);margin-top:clamp(22px,2.4vw,34px);align-items:start}
.form-card{background:var(--paper-2);border:1px solid var(--rule);border-radius:18px;
  transition:border-color .25s,background .25s}
.form-card:hover,.form-card[open]{border-color:var(--brand-blue)}
.form-card summary{display:block;position:relative;cursor:pointer;list-style:none;
  padding:clamp(20px,2.1vw,26px);padding-right:clamp(40px,3.6vw,50px)}
.form-card summary::-webkit-details-marker{display:none}
.form-w{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin:0}
/* the bar reads relative commitment at a glance: a 12-week cohort against
   an open-ended monthly retainer, without a chart */
.form-bar{display:block;height:3px;border-radius:2px;background:rgba(23,80,159,.16);
  margin:12px 0 14px}
.form-bar i{display:block;height:100%;border-radius:2px;background:var(--brand-blue)}
.form-t{display:block;font-size:clamp(17px,1.6vw,21px);font-weight:700;
  letter-spacing:-0.025em;line-height:1.2}
.form-k{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:9px}
.form-more{position:absolute;right:clamp(18px,1.7vw,22px);top:clamp(20px,2.1vw,26px);
  display:block;line-height:0}
.form-more svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.form-more svg path{fill:var(--blue)}
.form-card[open] .form-more svg{transform:rotate(45deg)}
.form-card ul{list-style:none;margin:0;padding:0 clamp(20px,2.1vw,26px) clamp(20px,2.1vw,26px)}
.form-card li{position:relative;padding-left:18px;margin-top:10px;font-size:14.5px;
  line-height:1.5;color:var(--muted);text-wrap:pretty}
.form-card li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1.5px;
  background:var(--blue);border-radius:2px}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;list-style:none;padding:clamp(18px,2vw,24px) 0;
  font-size:clamp(17px,1.6vw,20px);font-weight:600;letter-spacing:-0.02em;
  transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-blue)}
.faq summary svg{width:14px;height:14px;flex:none;transition:transform .3s var(--ease)}
.faq summary svg path{fill:var(--blue)}
.faq[open] summary svg{transform:rotate(45deg)}
.faq p{margin:0;padding:0 0 clamp(20px,2.2vw,26px);max-width:62ch;
  font-size:15.5px;line-height:1.65;color:var(--muted)}
.faq-page{display:grid;gap:clamp(34px,4vw,56px)}
.faq-group{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.35fr);
  gap:clamp(18px,3vw,56px);align-items:start}
.faq-group .t-sm{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-0.028em;
  margin:0;position:sticky;top:calc(var(--header-h) + 28px)}
.faq-set{border-top:1px solid var(--rule)}

@media(max-width:1080px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .read-in{grid-template-columns:minmax(0,1fr)}
  .step-row{grid-template-columns:minmax(0,1fr);gap:0}
  .step{border-top:1px solid rgba(255,255,255,.4);padding-block:clamp(22px,5vw,28px) 0}
  .step:last-child{padding-bottom:0}
  .step p{max-width:none}
  .cap{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"t a" "d d";gap:6px 16px}
  .cap-t{grid-area:t}.cap-d{grid-area:d}.cap svg{grid-area:a}
  .faq-group{grid-template-columns:minmax(0,1fr);gap:12px}
  .faq-group .t-sm{position:static}
}
@media(max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}


/* ══ THE FOUR CAPABILITIES ════════════════════════════════════════════════
   One template, four fills. Each of these is shared on its own as a selling
   document, so the headline gets the same weight it has on Services and the
   sections underneath run tight rather than opening with a band of nothing. */

/* the headline carries the page, same as /services/ */
.cap-hero{padding-block:clamp(118px,13vw,178px) clamp(22px,2.6vw,36px)}
.cap-hero .crumb{margin-bottom:clamp(16px,1.8vw,24px)}
.cap-hero .t-hero{font-size:clamp(38px,5.6vw,78px);max-width:17ch}

/* the offer: a standing lede on the left, the five things on the right */
.cap-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.16fr);
  gap:clamp(28px,4vw,76px);align-items:start}
.cap-lede h2{margin:12px 0 0}
.t-md{font-size:clamp(24px,2.6vw,36px);line-height:1.08;letter-spacing:-0.032em;
  font-weight:700;color:var(--ink);text-wrap:pretty}
.cap-lede .body{margin-top:16px;max-width:42ch}
.cap-note{font-size:15px!important;color:var(--muted);
  margin-top:clamp(18px,2vw,24px)!important;padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid var(--rule);max-width:40ch}
.cap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,3vw,52px)}
.cap-item{padding:clamp(15px,1.6vw,20px) 0;border-top:1px solid var(--rule)}
.cap-item:nth-child(-n+2){border-top:2px solid var(--ink)}
.cap-item:last-child:nth-child(odd){grid-column:1/-1}
.cap-k{font-size:clamp(16.5px,1.4vw,19px);line-height:1.2;letter-spacing:-0.02em;
  font-weight:700;color:var(--ink);margin:0 0 7px}
.cap-d{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;text-wrap:pretty}

/* the one argument only this capability makes, in the house blue */
.cap-band{overflow-x:clip}
.cap-band .head-2{align-items:start;margin-bottom:clamp(26px,3vw,38px)}
/* the eyebrow leads the headline rather than the deck, so the mobile stack
   reads eyebrow, headline, body in source order with no reordering */
.cap-band .head-2 > div + div,.sec-cases .head-2 > div + div{padding-top:6px}
.cap-band-h .eyebrow{margin-bottom:12px}
.cap-band .eyebrow{color:rgba(255,255,255,.66)}
.cap-band .body{color:rgba(255,255,255,.86);max-width:48ch}
.cap-band .body + .body{margin-top:14px}
.cap-band-foot{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,64px);align-items:center;
  padding-top:clamp(24px,2.8vw,36px);border-top:1px solid rgba(255,255,255,.28)}
.cap-quote{font-size:clamp(19px,1.9vw,26px);line-height:1.22;letter-spacing:-0.024em;
  font-weight:700;color:#fff;margin:0;max-width:24ch;text-wrap:pretty}
/* inline-flex stretches to fill a grid cell, which ran the underline the
   whole width of the band. Shrink it back to its own content. */
.cap-band-foot .arrow-link{justify-self:start}
.arrow-link.on-band{color:#fff;border-bottom-color:rgba(255,255,255,.42)}
.arrow-link.on-band svg path{fill:#fff}
.arrow-link.on-band:hover{color:#fff;border-bottom-color:#fff}

/* the case story the page is sold on */
.sec-cases{padding-block:clamp(44px,5vw,74px) clamp(46px,5.4vw,80px)}
/* .s-next pulls up 0.45 of a full section; this one is shorter than that */
.sec-cases + .s-next{margin-top:0}

@media(max-width:860px){
  .cap-band .head-2 > div,.sec-cases .head-2 > div{order:0;padding-top:0}
  .cap-band .head-2 h2,.sec-cases .head-2 h2{order:0;max-width:none}
}
@media(max-width:900px){
  .cap-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .cap-lede .body,.cap-note{max-width:none}
  .cap-band-foot{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  .cap-quote{max-width:none}
}
@media(max-width:620px){
  .cap-grid{grid-template-columns:minmax(0,1fr)}
  .cap-item:nth-child(-n+2){border-top:1px solid var(--rule)}
  .cap-item:first-child{border-top:2px solid var(--ink)}
}

/* ══ INSIGHTS: THE NEWSROOM ═══════════════════════════════════════════════
   A front page rather than a list. Everything here is scoped under .sec-jn,
   the article head, or .jn-*, so it cannot reach the rest of the site.

   Article art is the brand's own line drawing on a paper panel. House ads use
   the one secondary colour in the system: a burnt clay that reads warm against
   the cream and never competes with the blue for meaning. Ads are the only
   thing on the page wearing it, which is what makes them read as ads. */
:root{
  --clay:      #b0512b;
  --clay-deep: #93411f;
  --clay-ink:  #fdf4ee;
}

.sec-jn{padding-block:clamp(30px,3.4vw,48px) clamp(52px,6vw,86px)}
.phero + .sec-jn{padding-top:clamp(20px,2.4vw,34px)}

/* ── the line-art panel every card and ad carries ───────────────────────── */
.jn-art{display:block;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;position:relative;aspect-ratio:3/2}
.jn-art svg{position:absolute;inset:12% 14%;width:72%;height:76%}
.jn-art .s{fill:none;stroke:var(--ink);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  opacity:.86}

/* ── cards ──────────────────────────────────────────────────────────────── */
.jn-kicker{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue)}
.jn-meta{display:block;font-size:12.5px;letter-spacing:.02em;color:var(--muted)}

.jn-card{display:block;text-decoration:none;color:inherit;
  transition:transform .4s var(--ease)}
.jn-card:hover{transform:translateY(-3px)}
.jn-card:hover .jn-card-title{color:var(--blue)}
.jn-card:hover .jn-card-art{border-color:var(--blue)}
.jn-card-art{transition:border-color .35s ease}
.jn-card-body{display:block;padding-top:clamp(14px,1.4vw,18px)}
.jn-card-title{display:block;margin-top:9px;font-weight:700;letter-spacing:-0.022em;
  font-size:clamp(18px,1.55vw,21px);line-height:1.2;color:var(--ink);
  transition:color .25s ease;text-wrap:pretty}
.jn-card-dek{display:block;margin-top:10px;font-size:14.5px;line-height:1.55;
  color:var(--muted);text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.jn-card .jn-meta{margin-top:12px}

/* ── the lead ───────────────────────────────────────────────────────────── */
.jn-top{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,64px);align-items:start}
.jn-lead .jn-card-art{aspect-ratio:16/9}
.jn-lead .jn-art svg{inset:9% 16%;width:68%;height:82%}
.jn-lead .jn-card-title{font-size:clamp(26px,3vw,42px);line-height:1.06;
  letter-spacing:-0.034em;margin-top:12px;max-width:20ch}
.jn-lead .jn-card-dek{font-size:clamp(15.5px,1.35vw,18px);line-height:1.5;
  max-width:56ch;-webkit-line-clamp:3}

/* ── the right column: latest, then a house ad ──────────────────────────── */
.jn-side{display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)}
.jn-rail-head{font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);margin:0 0 2px;
  padding-bottom:10px;border-bottom:2px solid var(--ink)}
.jn-item{display:block;padding:16px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:padding-left .3s var(--ease)}
.jn-item:hover{padding-left:7px}
.jn-item:hover .jn-item-title{color:var(--blue)}
.jn-item-title{display:block;margin-top:8px;font-weight:700;letter-spacing:-0.018em;
  font-size:16.5px;line-height:1.24;color:var(--ink);transition:color .25s ease;
  text-wrap:pretty}
.jn-item .jn-meta{margin-top:8px;font-size:12px}

/* ── house ads ──────────────────────────────────────────────────────────── */
.jn-ad{display:block;background:var(--clay);color:var(--clay-ink);
  border-radius:3px;overflow:hidden;text-decoration:none;
  transition:background .35s ease,transform .4s var(--ease)}
.jn-ad:hover{background:var(--clay-deep);transform:translateY(-3px)}
.jn-ad-body{display:block;padding:clamp(24px,2.4vw,34px)}
.jn-ad-kicker{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(253,244,238,.72)}
.jn-ad-title{display:block;margin-top:13px;font-weight:700;letter-spacing:-0.028em;
  font-size:clamp(22px,2vw,29px);line-height:1.08;color:var(--clay-ink)}
.jn-ad-text{display:block;margin-top:13px;font-size:14.5px;line-height:1.55;
  color:rgba(253,244,238,.8);max-width:40ch;text-wrap:pretty}
.jn-ad-cue{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(18px,2vw,24px);
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--clay-ink);border-bottom:1px solid rgba(253,244,238,.42);padding-bottom:5px}
.jn-ad-cue svg{width:15px;height:11px;fill:currentColor;
  transition:transform .35s var(--ease)}
.jn-ad:hover .jn-ad-cue svg{transform:translateX(5px)}
/* the drawing inside an ad is the loud part: bigger, cream, no panel */
.jn-ad .jn-art{background:none;border:0;border-radius:0}
.jn-ad .jn-art .s{stroke:var(--clay-ink);stroke-width:2.4;opacity:.5}
.jn-ad-v .jn-ad-art{aspect-ratio:2/1;margin-top:-4px}
.jn-ad-v .jn-art svg{inset:0 12% 10%;width:76%;height:90%}
.jn-ad-band{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:center;margin-block:clamp(48px,5.4vw,82px)}
.jn-ad-band .jn-ad-art{aspect-ratio:auto;height:100%;min-height:190px}
.jn-ad-band .jn-art svg{inset:12% 12%;width:76%;height:76%}
.jn-ad-band .jn-ad-title{max-width:16ch}

/* ── category rows ──────────────────────────────────────────────────────── */
.jn-sec{margin-top:clamp(48px,5.4vw,82px)}
.jn-ad-band + .jn-sec,.jn-duo + .jn-ad-band{margin-top:0}
.jn-top + .jn-sec{margin-top:clamp(52px,5.8vw,88px)}
.jn-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  text-decoration:none;color:inherit;border-bottom:2px solid var(--ink);
  padding-bottom:12px;margin-bottom:clamp(22px,2.4vw,32px)}
.jn-sec-head h2{font-size:clamp(19px,1.75vw,24px);font-weight:700;
  letter-spacing:-0.024em;color:var(--ink)}
.jn-more{display:inline-flex;align-items:center;gap:8px;flex:none;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);transition:color .25s ease}
.jn-more svg{width:14px;height:10px;fill:currentColor;transition:transform .3s var(--ease)}
.jn-sec-head:hover .jn-more{color:var(--blue)}
.jn-sec-head:hover .jn-more svg{transform:translateX(4px)}
.jn-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,38px)}
.jn-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── the two-column duo ─────────────────────────────────────────────────── */
.jn-duo{display:grid;grid-template-columns:1fr 1fr;
  margin-top:clamp(48px,5.4vw,82px)}
.jn-duo .jn-col:first-child{padding-right:clamp(28px,3.4vw,56px);
  border-right:1px solid var(--rule)}
.jn-duo .jn-col:last-child{padding-left:clamp(28px,3.4vw,56px)}
.jn-list .jn-item:last-child{border-bottom:0}

/* ── the article head ───────────────────────────────────────────────────── */
.art-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:center}
.art-head h1{max-width:19ch}
.art-dek{margin-top:16px;max-width:46ch;font-size:clamp(16px,1.4vw,18.5px)}
.art-head .meta-line{margin-top:clamp(18px,2vw,26px)}
.art-head-art{aspect-ratio:4/3}
.art-head-art svg{inset:12% 12%;width:76%;height:76%}

/* ── the article page: reading column plus its own inventory ────────────── */
.sec-art{padding-block:clamp(38px,4.4vw,64px) clamp(44px,5vw,72px)}
.art-grid{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);
  gap:clamp(34px,4.6vw,86px);align-items:start}
.art-grid .article{max-width:none}
.art-rail{display:flex;flex-direction:column;gap:clamp(26px,3vw,40px);
  position:sticky;top:calc(var(--header-h) + 30px);align-self:start}
.art-rail .jn-ad-title{font-size:clamp(20px,1.7vw,25px)}

/* ── keep reading ───────────────────────────────────────────────────────── */
/* .s-sub pulls itself up by 0.45 of a full section; this one is short, so the
   pull landed the newsletter block on top of the last card's byline. */
.sec-more{padding-block:0 clamp(46px,5.4vw,80px)}
.sec-more + .s-sub{margin-top:calc(var(--sy) * -0.3)}
.sec-more .jn-rail-head{margin-bottom:clamp(20px,2.2vw,30px)}

@media(max-width:1080px){
  .art-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .art-rail{position:static;flex-direction:row;flex-wrap:wrap}
  .art-rail > *{flex:1 1 300px}
}
@media(max-width:1000px){
  .jn-top{grid-template-columns:minmax(0,1fr);gap:38px}
  .jn-ad-band{grid-template-columns:minmax(0,1fr)}
  .jn-ad-band .jn-ad-art{order:-1;min-height:170px}
  .art-head{grid-template-columns:minmax(0,1fr);gap:26px}
  .art-head-art{order:-1;aspect-ratio:16/7}
  .art-head h1,.art-dek{max-width:none}
}
@media(max-width:820px){
  .jn-row,.jn-row-2,.jn-sec:last-child .jn-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jn-duo{grid-template-columns:minmax(0,1fr);row-gap:38px}
  .jn-duo .jn-col:first-child{padding-right:0;border-right:0}
  .jn-duo .jn-col:last-child{padding-left:0}
}
@media(max-width:640px){
  /* the category name needs the whole line at this width, so the section link
     drops to its arrow rather than wrapping the heading under it */
  .jn-more-t{display:none}
  .jn-more{width:34px;height:34px;justify-content:flex-end}
}
@media(max-width:560px){
  .jn-row,.jn-row-2{grid-template-columns:minmax(0,1fr)}
  .jn-lead .jn-card-art{aspect-ratio:3/2}
  .jn-ad-v .jn-ad-art{aspect-ratio:5/2}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PASS
   Everything below this line lives inside a max-width query, so no desktop
   rule is touched. Verified by pixel-diffing every desktop screenshot
   against a baseline captured before this block existed.
   ══════════════════════════════════════════════════════════════════════════ */

@media(max-width:860px){

  /* ── vertical rhythm ────────────────────────────────────────────────────
     --sy is the interior section padding. 150px above and below every block
     is a desktop measure; on a 844px-tall phone it spent most of a screen
     on nothing between every two ideas. */
  :root{--sy:clamp(54px,11vw,74px)}

  /* Homepage sections carried the fixed header's height in their top padding
     so a snapped section would clear it. Snap is off on mobile, so that was
     ~70px of dead space repeated at every one of six section boundaries. */
  .js-home > section{padding-block:clamp(48px,11vw,70px)}
  /* The hero cue sits outside .wrap so it can be pinned to the foot of the
     section on desktop. Back in normal flow on mobile that left it with no
     gutter, and against align-items:flex-start it ran off the left edge. */
  .hero-cue{align-self:stretch;padding-inline:var(--gutter)}
  /* ...but a shared /#section link still has to clear the fixed header, so
     the offset moves from padding (always there) to scroll-margin (only
     applied when something actually scrolls to the anchor). */
  .js-home > section{scroll-margin-top:var(--header-h)}
  .s-band .band-in{padding-block:clamp(6px,2vw,14px)}

  /* The next-step card was pulled up by a negative margin sized for the
     desktop rhythm; against the smaller mobile one it nearly collided with
     whatever it followed. */
  .s-next{margin-top:0;padding-bottom:clamp(26px,6vw,42px)}

  /* ── measure ────────────────────────────────────────────────────────────
     The conviction hook was capped at 22ch, so it broke into a 245px column
     next to a 342px body: two different left-to-right rags, stacked. */
  .conv .hook{max-width:none}
  .conv .body{max-width:none}

  /* Both closing blocks put the headline directly on top of the body. */
  .s-closing h2{margin-bottom:13px}
  .s-closing .body{margin-bottom:clamp(24px,6vw,32px)}

  /* ── forms ──────────────────────────────────────────────────────────────
     iOS Safari zooms the whole page when a field under 16px takes focus,
     and does not zoom back out. */
  .ask textarea,.ask input[type=text],.ask input[type=email]{font-size:16px}
  /* capture: field and button side by side overflow a phone, and anything
     under 16px makes iOS zoom the page on focus and never zoom back */
  .sub-row{flex-direction:column;gap:10px;max-width:none}
  .sub input,.sub button{width:100%;font-size:16px}
  .sub input{padding:14px 20px}
  .sub button{justify-content:center;min-height:50px}
  .sub-foot{max-width:none}
  .sub-foot input{padding:13px 18px}
  .s-sub{margin-top:0;padding-bottom:clamp(26px,6vw,40px)}
  .ask textarea{min-height:104px}
  .ask-send{min-height:50px;width:100%}

  /* ── tap targets ────────────────────────────────────────────────────────
     Negative margins hold each element's visual position while the hit area
     grows around it, so nothing moves but everything is thumb-sized.
     Links inside running prose are deliberately left alone: padding them
     would break the line spacing of the paragraph they sit in. */
  .foot-col{gap:0}
  .foot-col a{padding-block:11px}
  .socials a{width:44px;height:44px}
  .socials{gap:12px}
  .arrow-link{padding-top:12px;padding-bottom:12px;margin-top:-12px}
  .crumb a{display:inline-block;padding:12px 2px 12px 0;margin:-12px 0}
  .ask-another{padding-block:12px;margin-top:-6px}
  .ask-ok{padding-block:9px}
  .ask-ok input{width:20px;height:20px;flex:none}
  .tag a{display:inline-block;padding-block:15px;margin-block:-13px}
  .legal-bar a{display:inline-block;padding-block:12px;margin-block:-12px}
  .closing-li{display:inline-block;padding-block:11px;margin-block:-11px}
  .hrow{padding-block:clamp(16px,4vw,22px)}
  .lang span{padding:9px 11px}

  /* ── services page ──────────────────────────────────────────────────────
     Three column-collapses land on one narrow screen in a row, so each one
     needs its own internal rhythm rather than the desktop gap it inherited. */
  .svc{gap:13px;padding-block:clamp(22px,5.5vw,28px)}
  .svc-go{margin-top:3px}
  .phase{gap:16px;padding-block:clamp(22px,5.5vw,28px)}
  .phase-n{padding-top:3px}
  .phase-b{gap:5px}
  .phase-b > p:last-child{margin-top:11px}
  .shape-card{padding:clamp(24px,6vw,30px)}
  .shape-card ul{margin-top:20px}
  .shape-card li{margin-bottom:13px}
  .shape-m{margin-top:11px;line-height:1.45}
  .faq summary{padding-block:clamp(17px,4.5vw,22px)}
  /* the read spec: label over value, so neither column has to wrap */
  .spec{grid-template-columns:minmax(0,1fr);gap:5px;padding-block:15px}
  .spec dt{padding-top:0}
  .read-card{padding:clamp(26px,6.5vw,34px);border-radius:18px}
  .read-copy .body{max-width:none}
  .proof{padding-top:14px}
  .proof-row{gap:22px}
  .beat{padding-block:clamp(18px,4.5vw,24px)}
  .form-row{padding-block:clamp(15px,4vw,20px)}
  .cap{padding-block:clamp(16px,4vw,20px)}
  .faq p{padding-bottom:clamp(18px,5vw,24px)}

  /* the bio hero: portrait over the name, with the name group breathing */
  .bio-head{gap:22px}
  .bio-head-t .eyebrow{margin-bottom:12px}
  .bio-head-t .body{margin-top:12px}
  .bio-head-cta{margin-top:22px}
  .bio-head-cta .btn-li{width:100%;justify-content:center}
  /* The most-tapped control on the site was 34px tall. A pseudo-element
     grows the hit area to 48x48 without changing the header's layout or
     the --header-h token that section scroll offsets depend on. */
  .brand{position:relative}
  .brand::after{content:"";position:absolute;inset:-4px -6px}
  .menu-contact a{display:inline-block;padding-block:10px}
  .menu-close{width:46px;height:46px}
  .menu-contact .mc{gap:0}
  .burger{position:relative}
  .burger::after{content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:calc(100% + 26px);height:48px}
}

@media(max-width:600px){
  /* Stacked, so the portrait no longer has to share the row with the bio
     and can carry the section the way it does on desktop. */
  .alex-photo{width:min(172px,46vw)}

  /* ── breathing room inside a section ─────────────────────────────────
     The pass before this one tightened everything uniformly, which read as
     cramped. Space between unrelated blocks stays tight; space *inside* a
     block opens up, so the hierarchy is carried by the gaps. */
  .split{gap:30px}
  .sec .narrow.head,.sec .head{margin-bottom:26px}
  /* headline directly on top of its deck reads as one crushed block */
  .head h2 + .body,.narrow h2 + .body,.phero h1 + .body,.sec h2 + .body{margin-top:15px}
  .eyebrow{margin-bottom:14px}
  .case{padding:clamp(24px,6vw,30px)}
  .case p{margin-top:12px}
  .pullquote{margin-block:clamp(30px,8vw,42px);padding-left:20px}
  .ticks li{margin-bottom:15px}
  .method li{margin-bottom:18px}
  .shape{padding-block:20px}
  .shape .who{margin-top:14px}
  .grid-2,.grid-3,.grid-4{gap:clamp(18px,5vw,26px)}
  .prin{padding:24px 22px}
  .prin-grid{gap:16px}
  .prac{padding-block:26px}
  .prac-prov{margin-top:12px}
  .prac-out{margin-top:8px}
  .ways{gap:14px}
  .article p{margin-bottom:20px}
  .article h2{margin-top:44px;margin-bottom:16px}
  .post{padding-block:8px}

  /* ── footer ──────────────────────────────────────────────────────────
     It ran 891px on a phone against 358px on desktop: a full screen of
     stacked single-column links before the legal line. Two columns of
     links, and Follow + Language share a row. */
  footer.site{padding-block:clamp(40px,9vw,58px) 0}
  /* ── footer links as ruled rows ───────────────────────────────────────
     The 44px pitch has to stay for thumbs, but as bare text with nothing
     between the labels it read as loose, randomly spaced words. A hairline
     at every boundary turns the same space into a list: the eye reads rows
     instead of gaps, and the heading gets a baseline to sit on. Height is
     unchanged. */
  .foot-col a{border-top:1px solid var(--rule);display:flex;align-items:center;
    min-height:44px;padding-block:9px;line-height:1.3}
  .foot-col .h{margin-bottom:0;padding-bottom:9px}
  .foot-meta a{border-top:0;padding-block:0}
  .foot-meta .h{padding-bottom:9px}

  /* the Practice column carries the longest labels, so it gets the slack */
  .foot-top{grid-template-columns:1.34fr 1fr;gap:clamp(26px,7vw,34px) 30px;
    padding-bottom:clamp(24px,6vw,34px)}
  .foot-brand{grid-column:1 / -1}
  .foot-brand p{margin-top:11px;font-size:13px;line-height:1.5}
  .foot-meta{grid-column:1 / -1;display:grid;grid-template-rows:auto auto;
    grid-auto-flow:column;justify-content:start;align-items:start;gap:0 clamp(28px,9vw,44px)}
  .foot-meta .h-2{margin-top:0}
}

@media(max-width:380px){
  /* At 360 "Onboarding & Enablement" wrapped, which knocked the two columns'
     hairlines out of alignment with each other. A half-point smaller keeps
     every label on one line and the rules in register. */
  .foot-col a{font-size:13.5px}
  .foot-top{grid-template-columns:1.4fr 1fr;column-gap:24px}
}



@media(max-width:470px){
  /* Adding Facebook made the icon row wide enough that Follow and Language
     no longer fit side by side, and the language toggle was pushing 17px past
     the right edge. Below this width they stack. */
  .foot-meta{grid-auto-flow:row;grid-template-rows:none;gap:16px 0}
  .foot-meta .h-2{margin-top:6px}
}

/* The full-width LinkedIn button was written for the stacked phone hero; at
   tablet widths the hero is still two columns and it read as a banner. */
@media(min-width:721px) and (max-width:860px){
  .bio-head-cta .btn-li{width:auto}
}

/* The head-2 mobile stack was written for eyebrow-over-heading; the two bio
   heads carry no eyebrow, so the reorder dropped the headline below its own
   deck. Keep source order for those. */
@media(max-width:860px){
  .sec-bio .head-2 h2{order:0}
  .sec-bio .head-2 > div{order:1;padding-top:0}
}