/* The Content Surgeon: home.css (DESIGN-SPEC 6.1; components 3.16-3.18, 3.22-3.25, 3.27, 3.29, 3.30). Owner: WP1. */

/* Title page (6.1.3) */
.hero{padding:var(--title-top) 0 var(--sec)}
.rh--hero{margin-bottom:clamp(20px,2.4vw,36px)}
.hero__title{font:360 var(--fs-display)/.95 var(--serif-display);letter-spacing:-.026em;max-width:11em}
.hero__title em{font-style:italic;font-weight:380;letter-spacing:-.018em}
.hero__dek{margin-top:clamp(24px,2.4vw,36px);color:var(--ink-2)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}
.hero__fig{margin-top:32px}
.hero__bleed{position:relative}
/* Phones: the surgeon opens the page, flush under the bar; the H1 follows (DOM order unchanged) */
@media (max-width:719px){
  .hero{padding-top:0}
  .hero__grid{display:flex;flex-direction:column}
  .hero__text{display:contents}
  .hero__fig{order:-1;margin:0 calc(var(--margin) * -1)}
  .rh--hero{order:1;margin-top:var(--sp-5)}
  .rh--hero .rh__note{display:none}
  .hero__title{order:2}
  .hero__cta{order:3;flex-direction:column;align-items:stretch}
  .hero__cta .link{align-self:flex-start}
  .hero__dek{order:4}
  /* Top-anchored crop: only the waist is trimmed */
  .hero__plate{aspect-ratio:16/11}
  .hero__plate img{object-fit:cover;object-position:50% 8%}
  .hero__fig .cap{margin:var(--sp-3) var(--margin) 0}
}
/* 720-1023: plate in 1-7, caption in 8-12 */
@media (min-width:720px){
  .hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .hero__text{grid-column:1 / -1}
  .hero__fig{grid-column:1 / span 7;grid-row:2}
}
@supports (grid-template-rows:subgrid){
  @media (min-width:720px){
    .hero__fig{grid-column:1 / -1;grid-row:2 / span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
    .hero__bleed{grid-column:1 / span 7;grid-row:1 / span 2}
    .hero__fig .cap{grid-column:8 / -1;grid-row:2;align-self:end;flex-direction:column;gap:4px}
  }
}
@media (min-width:1024px){
  .hero__grid{grid-template-rows:auto}
  .hero__text{grid-column:1 / span 8;grid-row:1}
  .hero__fig{display:block;grid-column:9 / span 4;grid-row:1;margin-top:0}
  .hero__fig .cap{flex-direction:row;gap:14px}
  /* The plate ground bleeds to the viewport edge (fallback: a 4:5 plate and a ground strip) */
  .hero__bleed::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:max(var(--margin),calc((100vw - var(--wrap)) / 2 + var(--margin)));background:var(--plate)}
  /* The strip carries this line from 1024 */
  .rh--hero{display:none}
  /* Cover scale: the plate runs to the viewport edge, as tall as the column allows while its first caption line stays in the first screen */
  @supports (height:1cqw){
    .hero__fig{container-type:inline-size}
    .hero__bleed{margin-right:calc(-1 * max(var(--margin), (100vw - var(--wrap)) / 2 + var(--margin)))}
    .hero__bleed::after{content:none}
    .hero__plate{aspect-ratio:auto;height:min(125cqw, 100svh - 190px)}
    .hero__plate img{object-position:0 100%}
  }
}
/* 1024-1279 the H1 keeps 8 columns; from 1280 the surgeon takes 5 */
@media (min-width:1280px){.hero__text{grid-column:1 / span 7}.hero__fig{grid-column:8 / span 5}}

/* 3.25 Keywords (in 06, above the closer) */
.fit .keywords{margin-top:clamp(36px,3.4vw,48px);max-width:34em;padding-top:11px;border-top:var(--hair-2)}
.keywords__label{font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink)}
.keywords__list{margin-top:8px;font:400 1.1875rem/1.42 var(--serif);color:var(--ink)}
.keywords__note{margin-top:10px;font:400 var(--fs-mono)/1.5 var(--mono);color:var(--ink-3)}

/* Phones: section notes hidden, except Fees and Journal (7.4 T20) */
@media (max-width:719px){.sec:not(.fees):not(.journal) .rh__note,.book .rh__note{display:none}}

/* Section openers in three scales: statement (03), standard, quiet notices (06, 08, 09) */
.sec--quiet{padding-bottom:calc(var(--sec) * .7)}
@media (min-width:1024px){
  .sec-head--statement > .h1{grid-column:1 / span 10}
  .sec-head--statement .sec-head__intro{grid-column:7 / span 6;grid-row:2;margin-top:var(--sp-3)}
  .sec-head--quiet > .h2{grid-column:1 / span 6}
  .sec-head--quiet .sec-head__intro{grid-column:1 / span 5;grid-row:2}
}

/* 01 Case study (6.1.4) */
.case__title{margin-top:14px;max-width:12em}
.case__who{margin-top:18px;font:500 1.0625rem/1.4 var(--sans)}
.case__body{margin-top:clamp(28px,4.4vw,64px)}
.case__text{margin-top:32px}
.case__standfirst{max-width:24em;padding-bottom:clamp(26px,3vw,40px);color:var(--ink)}
.case__fig .cap .link{display:inline-block;white-space:normal}
.case__foot{display:grid;row-gap:28px;margin-top:clamp(40px,4.4vw,64px)}
/* Phones: Fig. 1 full bleed and square, top-anchored (the head is never cropped) */
@media (max-width:719px){
  .case__fig{margin-inline:calc(var(--margin) * -1)}
  .case__fig .plate{aspect-ratio:1/1}
  .case__fig .plate img{object-fit:cover;object-position:50% 0}
  .case__fig .cap{margin-inline:var(--margin)}
}
@media (min-width:720px){
  .case__body,.case__foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .case__fig{grid-column:1 / span 6}
  .case__text{grid-column:7 / span 6;margin-top:0}
  .case__foot{row-gap:40px}
  .case__foot .quote{grid-column:1 / -1}
  .case__foot .limits{grid-column:1 / span 8}
}
/* 1024 up: the hero mirrored. Fig. 1 beside the head and findings, its ground bleeding left */
@media (min-width:1024px){
  .case > .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .case > .wrap > .rh{grid-column:1 / -1}
  .case__head{position:relative;z-index:var(--z-content);grid-column:7 / -1;grid-row:2}
  .case__body{display:contents}
  .case__fig{grid-column:1 / span 5;grid-row:2 / span 2}
  .case__text{grid-column:7 / -1;grid-row:3;margin-top:clamp(28px,3vw,48px)}
  .case__foot{grid-column:1 / -1;grid-row:4}
  .case__foot .quote{grid-column:1 / span 7}
  .case__foot .limits{grid-column:9 / span 4}
  /* Pinned in a body that ends with the findings, so it releases before the quote (sticky is bounded by the grid container); z-index keeps later content off the compositor */
  @supports (grid-template-rows:subgrid){
    .case__body{display:grid;grid-column:1 / -1;grid-row:2 / span 2;grid-template-columns:subgrid;grid-template-rows:subgrid;margin-top:0}
    .case__fig{grid-row:1 / span 2;position:sticky;top:calc(var(--bar-h) + var(--sp-5));z-index:var(--z-content)}
    .case__text{grid-row:2}
  }
  @supports (height:1cqw){
    .case__fig{container-type:inline-size}
    .case__fig .plate{aspect-ratio:auto;height:min(125cqw, 100svh - var(--bar-h) - 144px);margin-left:calc(-1 * max(var(--margin), (100vw - var(--wrap)) / 2 + var(--margin)))}
  }
}

/* 3.16 Fig. 2 */
.geo{margin-top:clamp(36px,4vw,52px)}
.geo__chart{position:relative;container-type:inline-size}
.geo__tier{position:relative;height:1.875rem}
.geo__bk{position:absolute;bottom:5px;height:9px;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);border:1px solid var(--ink);border-bottom:0}
.geo__bk--us{border-color:var(--red-deep)}
.geo__bk-label{position:absolute;left:-1px;bottom:13px;width:max-content;max-width:100cqw;font:400 var(--fs-mono)/1 var(--mono);color:var(--ink)}
.geo__bk--us .geo__bk-label{color:var(--red-deep)}
.geo__bar{position:relative;height:44px;background:var(--paper-2)}
.geo__seg{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);border-right:2px solid var(--paper);transform-origin:left center}
.geo__seg--us{background:var(--red)}
.geo__seg--intl{background:var(--ink)}
.geo__seg--range{background:repeating-linear-gradient(135deg,var(--ink) 0 1.4px,transparent 1.4px 5.5px)}
.geo__seg--range::after{content:"";position:absolute;inset:0;border:1px solid var(--ink)}
.geo__seg--home{background:var(--paper-3);border-right:0}
.geo__axis{position:relative;height:24px;margin-top:5px;font:400 var(--fs-mono)/1 var(--mono);color:var(--ink-3)}
.geo__axis span{position:absolute;top:9px;left:calc(var(--a) * 1%);transform:translateX(-50%);font-variant-numeric:tabular-nums}
.geo__axis span::before{content:"";position:absolute;left:50%;top:-9px;height:5px;border-left:1px solid var(--rule-2)}
.geo__axis span:first-child{transform:none}
.geo__axis span:first-child::before{left:0}
.geo__axis span:last-child{transform:translateX(-100%)}
.geo__axis span:last-child::before{left:auto;right:0}
.geo__home{position:absolute;right:0;top:1.875rem;height:1.875rem;display:flex;align-items:flex-end;padding-bottom:6px;font:400 var(--fs-mono)/1 var(--mono);color:var(--ink-3)}

/* 02 Work (6.1.5) */
.work .flagships{margin-bottom:clamp(36px,3.4vw,48px)}
.work__voice{display:grid;row-gap:28px;margin-bottom:clamp(36px,3.4vw,48px)}
.work__cta{margin-top:24px;font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink-2)}
.work__cta a{display:inline-block;color:var(--ink);font-weight:500}
@media (min-width:720px){
  .work__voice{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:32px;align-items:start}
  .work__voice .quote{grid-column:1 / -1}
  .work__voice .note{grid-column:1 / span 8}
}
@media (min-width:1024px){
  .work__voice .quote{grid-column:1 / span 7}
  .work__voice .note{grid-column:9 / span 4}
}

/* 03 The reality (6.1.6) */
.pains{display:grid;gap:0 var(--gutter)}
.pains li{padding:16px 0 20px;border-top:var(--rule-ink)}
.pains__n{display:block;font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3);margin-bottom:10px}
.pains p{margin-top:8px;font:400 var(--fs-small)/1.55 var(--sans);color:var(--ink-2)}
@media (max-width:719px){
  .pains li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
  .pains__n{margin-bottom:0}
  .pains li > p{grid-column:1 / -1}
}
@media (min-width:720px){.pains{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pains{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* 720 up: subgrid rows, so every body starts level */
@supports (grid-template-rows:subgrid){
  @media (min-width:720px){.pains li{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}}
}

/* 04 Services (6.1.7), 3.24 Masthead */
.diff{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:6px;padding:16px 0 20px;border-bottom:var(--hair)}
.diff__tag{grid-column:1 / span 3;font:400 var(--fs-mono)/1.5 var(--mono);color:var(--ink-3)}
.diff__title{grid-column:4 / span 4}
.diff__body{grid-column:8 / span 5;font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink-2)}
.diff__body .link{display:inline-block;font-weight:500;color:var(--ink)}
.diff__body .nw,.role dd .nw,.also__spec .nw{display:inline-block;white-space:normal}
@media (max-width:1023px){.diff__tag,.diff__title,.diff__body{grid-column:1 / -1}}
@media (max-width:719px){.diff{row-gap:4px;padding:14px 0 16px}}
.masthead{margin-top:clamp(48px,4vw,56px)}
.roles{display:grid;grid-template-columns:minmax(0,1fr);container-type:inline-size}
@container (width < 11.5rem){.roles .role__tag{white-space:normal}}
.role{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:14px 0 16px;border-bottom:var(--hair)}
.role dt{grid-column:1 / span 4;text-align:right;font:400 1.3125rem/1.25 var(--serif);letter-spacing:-.005em}
.role dd{grid-column:5 / span 7;max-width:var(--measure-ui);font:400 var(--fs-small)/1.55 var(--sans);color:var(--ink-2)}
.role__tag{display:block;margin-top:4px;font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
.role__tag--red{color:var(--red-deep)}
.role--founder a{display:inline-block}
@media (max-width:1023px){.role dt{grid-column:1 / -1;text-align:left}.role dd{grid-column:1 / -1;margin-top:6px}}
/* Phones: run-in glossary entries (3.24, R1) */
@media (max-width:719px){
  .role{display:block;padding:11px 0 13px}
  .role dt,.role dd{display:inline}
  .role dt{font-size:1.1875rem;line-height:1.3}
  .role dd{margin:0 0 0 .4em}
  .role__tag{display:inline;margin:0;white-space:nowrap}
}
@media (min-width:1280px){
  .roles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:calc(var(--gutter) * 2)}
  .role{grid-template-columns:repeat(6,minmax(0,1fr))}
  .role dt{grid-column:1 / span 2}
  .role dd{grid-column:3 / span 4}
}

/* 05 Process (6.1.8) */
/* 3.17 Fig. 3 */
.tl__chart{position:relative;display:grid;grid-template-columns:repeat(60,minmax(0,1fr));grid-template-rows:22px 8px 44px 48px 9px 24px}
.tl__lane{grid-column:1 / -1;font:400 var(--fs-mono)/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.tl__lane--us{grid-row:1}
.tl__lane--you{grid-row:3;align-self:end;padding-bottom:8px;color:var(--red-deep)}
.tl__us{grid-column:1 / -1;grid-row:2;background:var(--ink);transform-origin:left center}
.tl__mark{grid-row:4;align-self:end}
/* The calls: two short ticks (R16) */
.tl__mark--call{grid-column:var(--d) / span 1;justify-self:center;width:max(100%,8px);height:16px;border:1px solid var(--red);background:repeating-linear-gradient(135deg,var(--red) 0 1.4px,transparent 1.4px 5.5px);transform-origin:center bottom}
.tl__mark--shoot{grid-column:20 / 21;justify-self:center;width:max(100%,8px);height:48px;background:var(--red);transform-origin:center bottom}
.tl__mark--async{grid-column:21 / 61;height:6px;margin-bottom:8px;background:radial-gradient(circle,var(--red) 0 2px,transparent 2.6px) 0 50% / calc(100% / 20) 6px repeat-x;transform-origin:left center}
.tl__axis{grid-column:1 / -1;grid-row:5;border-top:1px solid var(--ink)}
.tl__day{position:relative;grid-row:6;grid-column:var(--d);justify-self:center;padding-top:6px;font:400 var(--fs-mono)/1 var(--mono);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tl__day::before{content:"";position:absolute;left:50%;top:-9px;height:5px;border-left:1px solid var(--rule-2)}
.tl__day--first{justify-self:start}
.tl__day--first::before{left:0}
.tl__day--last{justify-self:end}
.tl__day--last::before{left:auto;right:0}
.tl__day--hi{color:var(--red-deep);font-weight:500}
.tl__day--mid,.tl__day--wide{display:none}
.tl .cap{margin-top:18px}
.tl__key{display:grid;row-gap:14px;margin-top:16px}
.tl__key li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;align-content:start;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink-2)}
.tl__key-head{display:contents}
.tl__key-when{font:500 var(--fs-mono)/1.5 var(--mono);color:var(--ink)}
.tl__key-desc{grid-column:2;max-width:24em}
@media (max-width:719px){
  .tl__key{row-gap:10px}
  .tl__key li{display:block;position:relative;padding-left:34px}
  .tl__key-head{display:inline}
  .tl__key .sw{position:absolute;left:0;top:.45em}
  .tl__key-when{margin-right:.45em}
  .tl__key-desc{display:inline}
}
.sw{flex:none;width:24px;height:10px}
.sw--calls{border:1px solid var(--red);background:repeating-linear-gradient(135deg,var(--red) 0 1.2px,transparent 1.2px 4.5px)}
.sw--shoot{background:var(--red)}
.sw--async{background:radial-gradient(circle,var(--red) 0 1.6px,transparent 2px) 0 50% / 6px 6px repeat-x}
@media (min-width:720px){
  .tl__chart{margin-left:7.25rem;grid-template-rows:8px 44px 48px 9px 24px}
  .tl__lane{position:absolute;right:calc(100% + 18px);grid-column:auto;grid-row:auto;padding:0}
  .tl__lane--us{top:-2px}
  .tl__lane--you{top:86px}
  .tl__us{grid-row:1}
  .tl__mark{grid-row:3}
  .tl__axis{grid-row:4}
  .tl__day{grid-row:5}
  .tl__day--mid{display:block}
  .tl__key{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
}
@media (min-width:1024px){.tl__day--wide{display:block}}
/* Fig. 3 head and hint (fx.css): phones run the hint under the label; 1024 up, readout and controls share a row */
@media (max-width:719px){.tl .tl__head{row-gap:8px;margin-bottom:14px}.tl .cap{display:grid;grid-template-columns:auto 1fr;row-gap:0}.js .tl .cap .cap__text{display:contents}.js .tl .tl__cap{grid-area:1/2}.tl .tl__hint{grid-column:1/-1}}
@media (min-width:1024px){.tl .tl__head{grid-template-columns:1fr auto;column-gap:24px;min-height:46px}.tl .tl__read{grid-row:1}}
@media (min-width:1280px){.js .tl .cap__text{grid-template-columns:minmax(0,1fr) auto}.tl .tl__hint{justify-self:end;padding-left:24px;white-space:nowrap}}
/* Paint isolation: each section, each Process block and the parts of Fig. 3 and Plate I stack on their own,
   so a figure that moves repaints only itself (CPU x4: the Fig. 3 loop 12.4% to 8.8% net, Plate I's plot
   and isolations 26% to 18%). The page has no blend modes, so nothing looks different */
main>section,.process>.wrap>*,.tl>*,.plate-i>*{isolation:isolate}

/* 3.18 The count */
.count{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-top:clamp(48px,4vw,56px);padding-top:22px;border-top:var(--rule-ink)}
.count__sheet{display:grid;grid-auto-flow:column;align-items:start;column-gap:clamp(14px,2.2vw,36px)}
.count__row{display:grid;grid-template-columns:auto auto;grid-template-areas:"op n" ". l";column-gap:clamp(8px,1vw,16px);row-gap:10px}
.count__op{grid-area:op;align-self:center;font:300 clamp(2rem,1.4rem + 2.4vw,4.25rem)/1 var(--serif);color:var(--ink-3)}
.count__n{grid-area:n;font:340 var(--fs-num-xl)/.86 var(--serif-display);letter-spacing:-.035em;font-variant-numeric:lining-nums}
.count__n small{font:400 var(--fs-mono)/1 var(--mono);letter-spacing:0;color:var(--ink-3);margin-left:.25em}
.count__l{grid-area:l;max-width:16ch;font:400 var(--fs-mono)/1.35 var(--mono);color:var(--ink-3);text-wrap:balance}
.count__row--total .count__n{color:var(--red)}
.count__row--total .count__l{color:var(--ink)}
.count__note{max-width:15em;padding-bottom:4px;font:400 var(--fs-dek)/1.3 var(--serif);color:var(--ink-2)}
@media (min-width:720px){
  .count__row:first-child{grid-template-columns:auto;grid-template-areas:"n" "l"}
  .count__row:first-child .count__op{display:none}
}
/* 1024 up: the signature number set as one sum (a fixed measure between terms, not spread
   across the page), the unit scaled with the figure, the note from column 7 beneath */
@media (min-width:1024px){
  .process .count{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .process .count__sheet{grid-column:1 / -1;justify-content:start;column-gap:clamp(24px,2.6vw,44px)}
  .process .count__op{font-size:clamp(2.5rem,1rem + 3.4vw,5.5rem)}
  .process .count__n small{font-size:max(var(--fs-mono),calc(var(--fs-num-xl) * .125));margin-left:.3em}
  .process .count__note{grid-column:7 / -1;margin-top:var(--sp-6);max-width:none}
}
/* 1280 up: the sum holds columns 1-9 and the note answers it in 10-12, on the labels' line */
@media (min-width:1280px){
  .process .count__sheet{grid-column:1 / 10}
  .process .count__note{grid-column:10 / -1;grid-row:1;align-self:end;margin-top:0}
}
/* Phones: a vertical count sheet; the total's ink rule draws across once revealed */
@media (max-width:719px){
  .count{display:block}
  .count__sheet{grid-auto-flow:row;row-gap:0}
  .count__row{grid-template-columns:2ch auto 1fr;grid-template-areas:"op n l";align-items:baseline;padding:8px 0;border-bottom:var(--hair)}
  .count__row--total{position:relative;border-bottom:0}
  .count__row--total::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform-origin:left center}
  .count__op{font-size:1.75rem}
  .count__l{max-width:none;padding-left:12px}
  .count__note{max-width:none;margin-top:18px;font-size:1.1875rem}
}
/* Phones: one subgrid, so figures, units and labels align */
@supports (grid-template-columns:subgrid){
  @media (max-width:719px){
    .count__sheet{grid-template-columns:auto auto minmax(0,1fr);column-gap:12px}
    .count__row{grid-column:1 / -1;grid-template-columns:subgrid;grid-template-areas:none;column-gap:normal}
    .count__op{grid-area:1 / 1}
    .count__n{grid-area:1 / 2;justify-self:end}
    .count__l{grid-area:1 / 3;padding-left:4px}
    /* Table 3: each label under its figure */
    .permin .count__n{justify-self:start}
    .permin .count__l{grid-area:2 / 2 / 3 / 4;margin-top:4px;padding-left:0}
  }
}
/* Enlarged text on a phone (the sheet under 16rem wide, never at 100% from 320 px): each label
   drops under its figure, as in Table 3, so no word is pushed past the edge (WCAG 1.4.4) */
@media (max-width:719px){
  .count{container:count / inline-size}
  @container count (width < 16rem){
    .count__row{grid-template-columns:2ch minmax(0,1fr);grid-template-areas:"op n" ". l"}
    .count__l{padding-left:0;margin-top:4px;overflow-wrap:anywhere}
    @supports (grid-template-columns:subgrid){
      .count__row{grid-template-columns:subgrid;grid-template-areas:none}
      .count__l{grid-area:2 / 2 / 3 / 4}
    }
  }
}

/* 3.22 Process steps */
.steps{margin-top:clamp(48px,4vw,56px);border-bottom:var(--hair)}
.step{padding:12px 0 16px;border-top:var(--hair)}
.step__n{margin-right:10px;font:500 var(--fs-mono)/1.6 var(--mono);color:var(--ink-3)}
.step--key .step__n{color:var(--red-deep)}
.step__n,.step__when{display:inline}
.step__when{font:400 var(--fs-mono)/1.6 var(--mono);color:var(--ink-3)}
.step__title{margin-top:6px;font:400 clamp(1.3125rem,1.2rem + .55vw,1.75rem)/1.15 var(--serif);letter-spacing:-.01em}
.step__body{margin-top:8px;font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink-2)}
.step__you{margin-top:12px;font:500 var(--fs-mono)/1.45 var(--mono);color:var(--ink);text-wrap:balance}
.step__you span{display:block;margin:0 0 2px;font-weight:400;color:var(--ink-3)}
@media (max-width:719px){
  .step__you{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9em;align-items:baseline}
  .step__you span{margin:0}
}
@media (min-width:720px){
  .step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:20px 0 26px}
  .step__n,.step__when{display:block;margin:0;grid-row:1 / span 2}
  .step__n{grid-column:1}
  .step__when{grid-column:2 / span 4}
  .step__title,.step__body{grid-column:6 / span 7}
  .step__title{margin-top:0}
}
@media (min-width:1024px){
  .step{grid-template-rows:auto 1fr;align-items:start}
  .step__when{grid-column:2 / span 3}
  .step__title{grid-column:5 / span 4;grid-row:1}
  .step__body{display:contents}
  .step__body > p:first-child{grid-column:9 / span 4;grid-row:1 / span 2}
  .step__you{grid-column:5 / span 4;grid-row:2;margin-top:10px}
}

/* 06 Before you apply (6.1.9) */
.fit__cols{display:grid;row-gap:40px}
.fit__list li{padding:14px 0 15px;border-bottom:var(--hair);font:400 var(--fs-small)/1.55 var(--sans);color:var(--ink-2)}
@media (max-width:719px){.fit__list li{padding:11px 0 12px}}
.fit__list strong{font-weight:500;color:var(--ink)}
.fit__closer{margin-top:clamp(36px,3.4vw,48px)}
@media (min-width:1024px){
  .fit__cols{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .fit__col{grid-column:span 6}
}

/* 07 Fees (6.1.10), 3.27 terms and brief */
.fees{padding-top:var(--gap-rh);background:var(--paper-2)}
.fees + .sec{padding-top:var(--gap-rh)}
.fees__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px}
.terms{container-type:inline-size}
.terms div{display:grid;grid-template-columns:minmax(8rem,34%) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:var(--hair)}
@container (width < 17rem){.terms div{grid-template-columns:minmax(0,1fr);gap:2px}}
.terms div:first-child{border-top:var(--rule-ink)}
.terms dt{font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
.terms dd{font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink)}
.brief{background:var(--paper);border-top:2px solid var(--ink);padding:clamp(20px,2.6vw,36px)}
.brief__label{font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
.brief__lead{margin-top:10px;font:400 var(--fs-h3)/1.2 var(--serif);letter-spacing:-.01em}
.brief .btn{margin-top:24px;width:100%}
.brief__noscript,.brief__next{margin-top:16px;font:400 var(--fs-cap)/1.5 var(--sans);color:var(--ink-2)}
/* Hidden from first paint when scripts run (script.js also sets hidden): hiding it late moved the
   page under a reader who arrived at #book (CLS 0.0072 at 1440) */
.js .brief__noscript{display:none}
.brief-form{display:grid;gap:20px}
.brief-form__sub{margin-top:-14px;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink-2)}
.brief-form .btn{justify-self:start;margin-top:4px}
/* The status line stays live outside the form (R2) */
.brief > .form-status{margin-top:12px}
.brief > .form-status:empty{min-height:0;margin-top:0}
.brief > .form-status[data-state="warn"]{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.retainer__warn{margin-top:16px;max-width:var(--measure-ui)}
@media (min-width:720px){.brief .btn,.brief-form .btn{width:auto}}
@media (min-width:1024px){
  .fees__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .terms{grid-column:1 / span 5}
  .brief{grid-column:7 / span 6}
}

/* Revealed: Table 2, the department, Table 3 */
.retainer,.justify{margin-top:clamp(48px,5.4vw,80px)}
.retainer__explainer{margin-top:14px;max-width:40em;font:400 var(--fs-small)/1.55 var(--sans);color:var(--ink-2);min-height:var(--mh,0)}
.retainer .seg{margin-top:20px}
.pkgs{display:grid;margin-top:24px;border-top:var(--hair)}
.pkg{padding:22px 0 24px;border-bottom:var(--hair)}
.pkg__tier{font:400 var(--fs-h3)/1.15 var(--serif);letter-spacing:-.01em}
.pkg__rec{margin-left:.5em;font:500 var(--fs-mono)/1 var(--mono);letter-spacing:0;color:var(--ink);white-space:nowrap}
.pkg__price{margin-top:16px;white-space:nowrap;font:360 var(--fs-num)/1 var(--serif-display);letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums}
.pkg__price .currency{margin-right:.06em;font-size:.6em;color:var(--ink-2)}
.pkg__unit{font:400 var(--fs-small)/1 var(--sans);letter-spacing:0;color:var(--ink-2)}
.reveal-pkg__gst{margin-top:10px;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink-2)}
.reveal-pkg__gst strong{font-weight:500;color:var(--ink)}
.reveal-pkg__summary{margin-top:6px;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink);min-height:var(--mh,0)}
.pkg .link-btn{margin-top:6px;font:500 var(--fs-small)/1.3 var(--sans);color:var(--ink)}
.pkg__foot{margin-top:4px;font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
.retainer > .btn,.justify > .btn{margin-top:28px;width:100%}
.justify .h3{margin-top:8px}
.justify__lead{margin-top:16px;max-width:var(--measure-ui);font:400 var(--fs-body)/1.6 var(--sans);color:var(--ink-2)}
.justify__roles{margin-top:14px;max-width:var(--measure-ui);font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink-2)}
.permin{margin-top:clamp(36px,4vw,56px)}
.permin__eq{margin-top:18px;justify-content:start}
.permin .count__n{font-size:var(--fs-num);letter-spacing:-.025em}
.permin .count__op{font-size:calc(var(--fs-num) * .78)}
@media (min-width:720px){.permin .count__row{grid-template-rows:calc(var(--fs-num) * .86) auto}.permin .count__l{max-width:22ch}}
@media (min-width:1024px){.permin .count__l{max-width:28ch}}
.permin__note{margin-top:18px;max-width:var(--measure-ui);font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink-2)}
.permin__note strong{font-weight:500;color:var(--ink)}
@media (min-width:720px){
  .retainer > .btn,.justify > .btn{width:auto}
  .pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pkg:first-child{padding-right:24px}
  .pkg + .pkg{padding-left:24px;border-left:var(--hair)}
}

/* 3.29 Segmented control */
.seg{border:0;padding:0;margin:0}
.seg__legend{padding:0;margin-bottom:8px;font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
.seg__opts{display:inline-flex;border:1px solid var(--ink-3)}
.seg__opt{position:relative}
.seg__opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg__opt span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font:500 .9375rem/1 var(--sans);color:var(--ink-2);border-left:1px solid var(--ink-3);transition:background-color var(--t-fast),color var(--t-fast)}
.seg__opt:first-child span{border-left:0}
.seg__opt:hover input:not(:checked) + span{color:var(--ink);background:var(--paper)}
.seg__opt:active input:not(:checked) + span{background:var(--paper-3)}
.seg__opt input:checked + span{background:var(--ink);color:var(--paper)}
.seg__opt input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:719px){.seg__opts{display:flex;width:100%}.seg__opt{flex:1}.seg__opt span{padding:0 6px}}
/* Production mode (script.js): an ink block moves to the checked mode, its label turning paper after it;
   changed digits cross over, up for a higher price and down for a lower one */
.seg--live .seg__opts{position:relative}
.seg--live .seg__fill{position:absolute;inset:0 auto 0 0;width:100px;background:var(--ink);transform-origin:0 0;transition:transform var(--t) var(--ease)}
.seg--live .seg__opt input:checked+span{background:none}
@media (prefers-reduced-motion:no-preference){.seg--live .seg__opt input:checked+span{transition-delay:90ms}}
.is-intl :is(.retainer__explainer,.reveal-pkg__summary){min-height:0}
.dg{position:relative;display:inline-block}
.dg>*{display:inline-block;animation:dg-in 240ms var(--ease) both}
.dg::before{content:attr(data-from);content:attr(data-from)/"";position:absolute;left:0;top:0;animation:dg-out 240ms var(--ease) both}
[data-roll=down]{--dy:-.32em}
@keyframes dg-in{from{opacity:0;transform:translateY(var(--dy,.32em))}}
@keyframes dg-out{to{opacity:0;transform:translateY(calc(var(--dy,.32em)*-1))}}

/* 08 FAQ (6.1.11) */
.faq__grid{display:grid;row-gap:32px}
.faq__intro .h2{max-width:10.5em}
.faq__ask{margin-top:20px;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink-2)}
@media (min-width:1024px){
  .faq__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .faq__intro{grid-column:1 / span 5;position:sticky;top:calc(var(--bar-h) + 32px)}
  .faq__list{grid-column:7 / span 6}
}

/* 09 Founder (6.1.12) */
.founder__fig{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;align-items:end;margin-bottom:32px}
.founder__fig .cap{margin-top:0}
.founder__fig .cap__text > span{display:block}
.founder__fig .cap__text > span:first-child{font-weight:500;color:var(--ink)}
.founder__fig .cap__text > .cap__sep{display:none}
.founder__fig .cap__text{overflow-wrap:anywhere}
.founder__fig .cap__text > .nw{white-space:normal}
.founder__lead{margin-top:clamp(24px,3vw,36px)}
.founder__lead p{font:400 var(--fs-dek)/1.38 var(--serif);color:var(--ink);text-indent:-.42em}
.founder__note{margin-top:28px;padding-top:12px;border-top:var(--hair)}
.founder__note .meta{margin-bottom:8px}
.founder__note p:not(.meta){font:400 var(--fs-dek)/1.38 var(--serif);color:var(--ink-2)}
.timeline{width:100%;margin-top:32px;border-collapse:collapse;border-top:var(--rule-ink)}
.timeline tr{border-bottom:var(--hair)}
.timeline th{width:6.5rem;padding:12px 12px 12px 0;text-align:left;vertical-align:baseline;white-space:nowrap;font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
.timeline td{padding:12px 0;vertical-align:baseline;font:400 var(--fs-small)/1.5 var(--sans);color:var(--ink)}
.founder__close{margin-top:28px;max-width:var(--measure-ui);color:var(--ink-2)}
.founder__sign{margin-top:16px;font:italic 380 1.75rem/1 var(--serif)}
@media (min-width:720px){.timeline th{width:8.5rem;padding-right:16px}}
/* 200% text (11.8): these reflow instead of scrolling; never at 100% */
.founder__text{container-type:inline-size}
@container (width < 18rem){
  .timeline th,.timeline td{display:block;width:auto}
  .timeline th{padding-bottom:2px}
  .timeline td{padding-top:0}
}
@media (min-width:1024px){
  .founder__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .founder__rh{grid-column:1 / -1}
  .founder__fig{display:block;grid-column:1 / span 3;max-width:200px;margin:0}
  .founder__fig .cap{margin-top:12px}
  .founder__text{grid-column:5 / span 8;max-width:44em}
}

/* 10 Journal (6.1.13) */
.journal__grid{display:grid;row-gap:44px}
.lead{border-top:var(--rule-ink);padding-top:12px}
.lead__title{margin-top:14px;font:380 clamp(1.875rem,1.25rem + 2.2vw,3.25rem)/1.04 var(--serif-display);letter-spacing:-.018em}
.lead__title a{text-decoration:none}
.lead__title a:hover,.lead__title a:active{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--red);text-underline-offset:.12em}
.lead__title a:active{text-decoration-color:var(--red-deep)}
.lead__dek{margin-top:16px;max-width:32em;font:italic 400 var(--fs-dek)/1.36 var(--serif);color:var(--ink-2)}
.lead__body{display:none;margin-top:24px;max-width:var(--measure-read);font:400 var(--fs-read)/1.6 var(--serif);color:var(--ink)}
.lead__more,.index__all{display:inline-block;margin-top:20px;font:500 var(--fs-small)/1.5 var(--sans)}
.index__list li{border-bottom:var(--hair)}
.index__list a{display:block;padding:14px 0 16px;text-decoration:none}
.index__meta{display:block;font:400 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
.index__title{display:block;margin-top:6px;font:400 1.375rem/1.22 var(--serif);letter-spacing:-.005em}
.index__list a:hover .index__title,.index__list a:active .index__title{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.14em}
.index__list a:active .index__title{text-decoration-color:var(--red-deep)}
.index__extra,.pullnote{display:none}
.pullnote{margin-top:36px;padding-top:14px;border-top:var(--rule-ink);font:italic 380 1.625rem/1.24 var(--serif);text-indent:-.4em}
.pullnote__src{display:block;margin-top:10px;text-indent:0;font:400 var(--fs-mono)/1.5 var(--mono);color:var(--ink-3)}
@media (min-width:720px){
  .lead__body,.index__extra{display:block}
}
@media (min-width:1024px){
  .journal__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .lead{grid-column:1 / span 7}
  .index{grid-column:9 / span 4}
  .pullnote{display:block}
}

/* 11 Book a call (6.1.14) */
.book{padding-block:clamp(56px,7vw,104px) clamp(48px,5vw,72px)}
.book__grid{display:grid;row-gap:36px}
.book__sub{margin-top:24px;max-width:29em}
.book__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:12px var(--gutter);margin-top:clamp(32px,4vw,56px);padding-top:14px;border-top:var(--rule-on-ink)}
.book__meta dt{font:400 var(--fs-mono)/1.45 var(--mono);color:var(--on-ink-2)}
.book__meta dd{margin-top:2px;font:400 var(--fs-small)/1.5 var(--sans);color:var(--on-ink)}
@media (min-width:720px){
  .book__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .book__main{grid-column:1 / -1}
  .book .appt{grid-column:1 / span 8}
}
@media (min-width:1024px){
  .book__grid{align-items:start}
  .book__main{grid-column:1 / span 6}
  .book .appt{grid-column:8 / span 5}
}

/* 3.30 Dialog */
.modal{width:min(640px,calc(100vw - 32px));max-height:min(86vh,760px);padding:0;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.modal::backdrop{background:var(--scrim)}
.modal__panel{padding:clamp(20px,3vw,36px)}
.modal__close{float:right;display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;margin:-8px -4px 0 16px;font:500 var(--fs-mono)/1 var(--mono);color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.25em}
.modal__price{margin-top:14px;padding:12px 0;border-top:var(--rule-ink);border-bottom:var(--hair);font:400 var(--fs-small)/1.5 var(--sans)}
.modal__price span{font:360 1.75rem/1 var(--serif-display);font-variant-numeric:tabular-nums;margin-right:.3em}
.modal__list div{padding:12px 0;border-bottom:var(--hair)}
.modal__list dt{font:500 var(--fs-small)/1.4 var(--sans)}
.modal__list dd{margin-top:2px;font:400 var(--fs-cap)/1.5 var(--sans);color:var(--ink-2)}
.modal__note{margin-top:16px;font:400 var(--fs-cap)/1.55 var(--sans);color:var(--ink-2)}
.modal__note strong{font-weight:500;color:var(--ink)}
.modal__foot{margin-top:14px;font:400 var(--fs-mono)/1.5 var(--mono);color:var(--ink-3)}
html:has(dialog[open]){overflow:hidden}
/* Opens in 260 ms, closes as it opened in 160 ms, backdrop included (without allow-discrete it closes at once) */
@media (prefers-reduced-motion:no-preference){
  .modal{opacity:0;transform:translateY(8px);transition:opacity 160ms var(--ease-in),transform 160ms var(--ease-in),overlay 160ms var(--ease-in) allow-discrete,display 160ms var(--ease-in) allow-discrete}
  .modal[open]{opacity:1;transform:none;transition-duration:var(--t);transition-timing-function:var(--ease)}
  @starting-style{.modal[open]{opacity:0;transform:translateY(8px)}}
  .modal::backdrop{opacity:0;transition:opacity 160ms var(--ease-in),overlay 160ms var(--ease-in) allow-discrete,display 160ms var(--ease-in) allow-discrete}
  .modal[open]::backdrop{opacity:1;transition-duration:var(--t);transition-timing-function:var(--ease)}
  @starting-style{.modal[open]::backdrop{opacity:0}}
}

/* Tap targets: 44 px bands (WP0 pattern) */
@media (max-width:719px),(pointer:coarse){
  .work__cta a,.faq__ask a,.lead__more,.index__all,.justify__roles a,.role--founder a,.case__fig .cap a,.brief__noscript a,.diff__body a,.retainer__warn a{position:relative}
  .work__cta a::after,.faq__ask a::after,.lead__more::after,.index__all::after,.justify__roles a::after,.role--founder a::after,.case__fig .cap a::after,.brief__noscript a::after,.diff__body a::after,.retainer__warn a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* Figures draw once, in an order that states their meaning (4.2, 4.5); all within 800 ms */
@media (prefers-reduced-motion:no-preference){
  .js .geo__seg[data-animate]:not(.is-in),
  .js .tl__us[data-animate]:not(.is-in),
  .js .tl__mark--async[data-animate]:not(.is-in){transform:scaleX(0)}
  .js .tl__mark--call[data-animate]:not(.is-in),
  .js .tl__mark--shoot[data-animate]:not(.is-in){transform:scaleY(0)}
  /* Fig. 3: the team line sweeps day 1 to 60 at constant speed; each of your marks rises as the sweep reaches its day */
  .is-loaded .tl__us{transition:transform 800ms linear}
  .is-loaded .tl__mark--call{transition:transform 180ms var(--ease) calc(var(--d) / 60 * 800ms)}
  .is-loaded .tl__mark--shoot{transition:transform 220ms var(--ease) 267ms}
  .is-loaded .tl__mark--async{transition:transform 520ms linear 280ms}
  /* Fig. 2: the stated 0-70% as one stroke, then the 70-80% band appears as a range, not a measured bar */
  .is-loaded .geo__seg--us{transition:transform 260ms cubic-bezier(.3,0,1,1)}
  .is-loaded .geo__seg--intl{transition:transform 360ms cubic-bezier(0,0,.2,1) 260ms}
  .js .geo__seg--range[data-animate]:not(.is-in){transform:none;opacity:0}
  .is-loaded .geo__seg--range{transition:opacity 200ms var(--ease) 600ms}
  /* The count's total rule (phones) draws after the sheet arrives; screen only, so print shows it */
  @media screen{.js .count:not(.is-in) .count__row--total::before{transform:scaleX(0)}}
  .is-loaded .count__row--total::before{transition:transform 420ms var(--ease) 260ms}
}