/* =========================================================================
   THE 66TH, CASE STUDIES. The hub and every case page compose from this file,
   loaded after site.css. Behaviour lives in cases.js.

   Built October 24, 2026 from the case studies mock Liam picked ("k i like
   this way mor do htis"), ~/Downloads/projects/html/case-studies-mock/.
   Layouts and their sources are rows in concept 3's docs/DESIGN.md:
   from Retool (retool.com/customers), the featured row of three with a
   progress line under each and the hairline grid of site builds; from Hebbia
   (hebbia.com/customers), one big piece of footage per story, rows of
   picture beside statement, the story's full-width hero, its statement on a
   block, its body beside a facts column, the edge hairlines and the faded
   wordmark at the foot; from Profound (tryprofound.com/customers/plaid),
   product cards running in place inside the story; from Athena, the count per
   assistant; from Retool's DoorDash story, the numbers on a card inside the
   picture. Everything else is concept 3: its grounds, type and one easing.
   ========================================================================= */

/* ---- base ---- */
body.cs{padding-top:0}
.cs-ruled{position:relative;border-top:1px solid var(--line)}
.cs-ruled.no-top{border-top:0}
/* Hebbia's frame: a hairline down each content edge of every section */
.cs-ruled::before,.cs-ruled::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none;z-index:3;
}
.cs-ruled::before{left:max(var(--gutter),calc(50% - var(--shell) / 2 + var(--gutter)))}
.cs-ruled::after{right:max(var(--gutter),calc(50% - var(--shell) / 2 + var(--gutter)))}

.cs-h1,.cs-h2,.cs-h3{font-family:var(--font-display);font-weight:200;color:var(--ink)}
.cs-h1{font-size:var(--t-2);letter-spacing:-.04em;line-height:1}
.cs-h2{font-size:var(--t-3);letter-spacing:-.035em;line-height:1.06}
.cs-h3{font-size:var(--t-4);letter-spacing:-.03em;line-height:1.1}
.cs-lede{font-size:var(--t-6);line-height:1.55;color:var(--quiet);max-width:44ch;margin-top:var(--head)}

/* words rise out of a clip, 70ms apart: the site's heading reveal */
.rw-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.rw-word>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.is-in .rw-word>span,.is-in.rw-word>span{transform:none}
[data-rise]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
[data-rise].is-in{opacity:1;transform:none}

/* the go link, the site's own */
.go-l{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.go-l b{font-weight:500;transition:transform .4s var(--ease)}

/* footage that sleeps grey and wakes in colour, the homepage bento's rule. The
   resting look is never a CSS filter on the footage: Firefox redrew a filter on
   every frame the page scrolled or a panel moved (hub rows 60fps with it, 120
   without, at 1728 wide on 2x, October 24, 2026; the bento found the same on
   October 14). So the featured clips get a baked resting picture laid over
   them by cases.js (.ft-g: the bento's X-grey.webp), and rows and more cases
   sit under a dark layer at the
   filter's brightness. Either fades out to show the colour. Until a baked
   picture has loaded, the filter below holds the look. */
.ft{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 6s linear,opacity 1s var(--ease)}
.ft-g{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transition:opacity 1.3s var(--ease)}
.ft-g.top{object-position:center 18%}
.rw-media::after,.mc-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.28);transition:opacity 1.3s var(--ease)}
.rw.awake .rw-media::after,.mc:hover .mc-media::after{opacity:0}

/* ====================================================================
   HUB
   ==================================================================== */
.hub-head{padding:calc(var(--nav-clear) + var(--s-6)) 0 var(--s-5)}
.hub-head .shell{padding-left:calc(var(--gutter) + var(--s-4))}

/* ---- the featured row (Retool's mechanism, Hebbia's picture) ---- */
.feat-sec{padding:0 0 var(--bay)}
.feat{--fp-grow:2.6;display:flex;gap:var(--s-2);height:clamp(460px,45vw,640px);container-type:inline-size}
.fp{flex:1 1 0;min-width:0;display:flex;flex-direction:column;transition:flex-grow 1.1s var(--ease)}
.fp.is-on{flex-grow:var(--fp-grow)}
.fp-box{position:relative;flex:1;display:block;overflow:hidden;border-radius:var(--r-card);border:1px solid var(--line);background:var(--bg-c);isolation:isolate}
.fp-media{position:absolute;inset:0;z-index:0}
.fp-media.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.fp-media.tri>div{position:relative;overflow:hidden}
.fp-media:not([data-g]) .ft{filter:saturate(.15) brightness(.42);transition:filter 1.3s var(--ease),transform 6s linear}
.fp.is-on .fp-media .ft{filter:none;transform:scale(1.045)}
.fp.is-on .ft-g{opacity:0}
/* the shade is a baked picture of linear-gradient(180deg, .55 at 0, 0 at 26% to
   42%, .9 at 100%): drawn as a gradient over the moving clips, it was the other
   half of the featured row's dropped frames */
.fp-box::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(/case-studies/assets/fp-shade.png) 0 0/100% 100% no-repeat}
.fp-box .logo{position:absolute;z-index:2;top:var(--s-4);left:var(--s-4);height:24px;width:132px}
/* The headline used to grow its size with the panel, and rewrapped on every frame of a switch
   (Liam, October 25, 2026: the text shrinking looked "kinda glitchy"). Now the copy is set at
   the width its panel ends at, the three panels sharing the row as 1 + 1 + --fp-grow, so its
   lines are final from the first frame, and it fades up once the panel has nearly arrived.
   The second keyframe name restarts the fade on both panels that change. */
.fp-copy{position:absolute;z-index:2;left:var(--s-4);bottom:var(--s-4);
  width:calc((100cqw - 2 * var(--s-2)) / (2 + var(--fp-grow)) - 2px - 2 * var(--s-4))}
.fp.is-on .fp-copy{width:calc((100cqw - 2 * var(--s-2)) * var(--fp-grow) / (2 + var(--fp-grow)) - 2px - 2 * var(--s-4))}
.fp-h{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.03em;line-height:1.08;max-width:15ch;
  animation:fp-in .6s var(--ease) .28s backwards}
.fp.is-on .fp-h{font-size:var(--t-3);animation-name:fp-in-on}
@keyframes fp-in{from{opacity:0}}
@keyframes fp-in-on{from{opacity:0}}
.fp-btn{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);height:42px;padding:0 20px;border-radius:var(--r-sm);
  border:1px solid rgba(237,233,225,.4);font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease),background .3s,color .3s}
.fp.is-on .fp-btn{opacity:1;transform:none;transition-delay:.35s}
.fp-box:hover .fp-btn{background:var(--ink);color:var(--bg-a)}
.fp-meta{padding-top:var(--s-3);min-height:96px}
.fp-meta b{display:block;font-size:var(--t-7);font-weight:500}
.fp-meta span{display:block;font-size:var(--t-7);color:var(--quiet);line-height:1.45;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:fp-in .6s var(--ease) .28s backwards}
.fp.is-on .fp-meta span{white-space:normal;animation-name:fp-in-on}
.fp-bar{position:relative;display:block;height:1px;background:var(--line);margin-top:var(--s-3);overflow:hidden}
.fp-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.fp.is-on .fp-bar i{animation:fpbar var(--fp-dur,7s) linear forwards}
.feat.is-held .fp.is-on .fp-bar i{animation:none;transform:scaleX(1)}
@keyframes fpbar{to{transform:scaleX(1)}}

/* ---- rows: picture beside statement (Hebbia's "Power to the people") ---- */
.rows-sec{padding:var(--bay) 0}
.rows-head{text-align:center;margin:0 auto var(--stack)}
.rows-head .cs-h2{max-width:13em;margin:0 auto}
.rows-head .cs-lede{margin-left:auto;margin-right:auto;max-width:46ch}
.rw{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);color:inherit}
.rw:last-child{border-bottom:1px solid var(--line)}
.rw-media{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--bg-b);border-radius:var(--r-sm);margin:1px 0}
.rw-media.r43{aspect-ratio:4/3}
.rw.awake .ft{transform:scale(1.035)}
.rw-copy{display:flex;flex-direction:column;padding:var(--s-5) var(--s-4) var(--s-4) var(--s-5)}
.rw-copy .logo{margin-bottom:var(--s-4);opacity:.92}
.rw-h{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.03em;line-height:1.1;max-width:17ch;transition:color .3s}
.rw-p{font-size:var(--t-7);line-height:1.6;color:var(--quiet);margin-top:var(--s-3);max-width:40ch}
.rw-foot{margin-top:auto;padding-top:var(--s-4);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);flex-wrap:wrap}
.rw-foot>span:first-child{font-size:var(--t-7);color:var(--quiet)}
.rw:hover .rw-h{color:var(--ink-hi)}
.rw:hover .go-l b,.mc:hover .go-l b{transform:translateX(6px)}
/* Butcher's Hook: four product photographs taking turns while awake */
.ft.flip{opacity:0}
.ft.flip.on{opacity:1}

/* ---- site builds: the homepage's work wall, full bleed, its heading laid
   over the top of the room as on the homepage (wall.css owns the room) ---- */
.sites-sec{position:relative;border-top:1px solid var(--line)}
.sites-sec .wall{background:var(--bg-a)}
/* the room sinks into the ground at the top, under the heading, and at the
   foot, into the clients. A baked picture, never a gradient over moving panels */
.sites-sec .wall::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(/case-studies/assets/wall-shade.png) 0 0/100% 100% no-repeat}
/* the homepage's rest and hover light (.42, .86) as opacity over black, not
   a filter: Firefox redraws a filter on every frame a panel moves */
.sites-sec .wall-tile{background:var(--device-black);border-radius:var(--r-inner)}
.sites-sec .wall-tile img{filter:none;opacity:.42;transition:opacity .3s var(--ease)}
.sites-sec .wall-tile:hover img,.sites-sec .wall-tile:focus-visible img{opacity:.86}
/* a site with a case page opens it, so its pill points on, not out (cases.js) */
.sites-sec .wall-pill[data-case]::after{content:"\2192"}
/* clear of the fixed nav even where --bay is shorter than the bar, as on a phone */
.sites-head{position:absolute;top:0;left:0;right:0;z-index:3;padding-top:max(var(--bay),calc(var(--nav-clear) + var(--s-3)));pointer-events:none}
.sites-head .shell{padding-left:calc(var(--gutter) + var(--s-4))}

/* ---- clients: the hub's frame for the shared client grid (assets/clients.css) ---- */
.logos-sec{padding:var(--bay) 0}
.logos-head{margin-bottom:var(--stack);padding-left:var(--s-4)}

/* ---- the closing panel sits in its own bay ---- */
.close-sec{padding:var(--bay) 0 0}
.close-sec .note-cta{margin:0}

/* ---- footer: the giant faded wordmark both references end on ---- */
.site-foot{margin-top:var(--bay)}
.foot-mark{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);overflow:hidden;user-select:none}
.foot-mark span{display:inline-block;font-family:var(--font-mono);font-weight:500;letter-spacing:-.06em;line-height:.78;color:var(--edge-1);white-space:nowrap;
  font-size:var(--t-display);padding-top:.06em}
.foot-mark i{font-style:italic}

/* ====================================================================
   CASE
   ==================================================================== */
/* ---- hero: Hebbia's full-width picture with the headline laid on it ---- */
.ch{position:relative;height:min(94svh,900px);min-height:560px;overflow:hidden;background:var(--bg-b)}
.ch-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;will-change:transform}
.ch-wall.one{grid-template-columns:minmax(0,1fr)}
.ch-wall.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.ch-col{position:relative;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.ch-col .ft{transform:scale(1.14);transition:transform 2.8s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.ch.is-in .ch-col{clip-path:inset(0 0 0 0)}
.ch.is-in .ch-col .ft{transform:scale(1)}
/* The shade is one baked picture (case-studies/assets/hero-shade.png) of what was
   two gradients, linear-gradient(90deg, .62 at 0, .25 at 46%, 0 at 70%) over
   linear-gradient(180deg, .7 at 0, 0 at 22% to 38%, .94 at 92%, --bg-a at 100%),
   in rgb(12,11,10), with the clips' old brightness(.78) as a flat 22% black under
   them. As gradients and a filter over five moving clips, the hero scrolled at
   24fps in Firefox; as one picture, at 120 (October 24, 2026). */
.ch-shade{position:absolute;inset:0;pointer-events:none;
  background:url(/case-studies/assets/hero-shade.png) 0 0/100% 100% no-repeat}
.ch-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-top:var(--nav-clear);padding-bottom:var(--s-5)}
.ch-back{align-self:flex-start;font-size:var(--t-7);color:var(--ink-2);transition:color .2s}
.ch-back:hover{color:var(--ink)}
.ch-copy .logo{height:30px;width:170px;margin-bottom:var(--s-4)}
.ch-name{font-size:var(--t-6);font-weight:500;color:var(--ink);margin-bottom:var(--s-3)}
.ch-copy .cs-h1{max-width:14ch;text-wrap:balance}
/* a headline past about 48 characters steps down one size so it keeps to four lines */
.ch-copy .cs-h1.long{font-size:var(--t-3);max-width:20ch}
/* a case with no footage shows its site framed in the hero's top right, sized
   to end above the results card, over that site baked to a dark blur; under 900px it sits in the flow above the
   copy, and between the two it is left out so the fixed-height hero holds */
.ch-site{position:absolute;top:calc(var(--nav-clear) + var(--s-6));right:var(--gutter);width:min(46%,640px,calc((min(94svh,900px) - 420px) * 1.6));aspect-ratio:16 / 10;margin:0;border:1px solid var(--line);border-radius:var(--r-inner);overflow:hidden;background:var(--bg-b)}
.ch-site img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:1100px) and (min-width:901px){.ch-site{display:none}}
/* beside the frame the headline wraps narrower, so its lines stop short of it */
@media (min-width:1101px){.ch.framed .cs-h1{max-width:12ch}.ch.framed .cs-h1.long{max-width:16ch}}
@media (max-width:900px){.ch-site{position:static;width:100%;margin:var(--s-5) 0}}
.ch-sub{font-size:var(--t-6);color:var(--ink-2);margin-top:var(--s-4);max-width:44ch}
/* the three results on paper, inside the picture (Retool's DoorDash card,
   Profound's three stats under the film) */
.ch-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5)}
.ch-res{flex:none;width:min(560px,44%);border-radius:var(--r-inner);overflow:hidden;background:var(--paper);color:var(--paper-ink)}
.ch-res-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.ch-res-row>div{padding:var(--s-3);border-right:1px solid var(--paper-line)}
.ch-res-row>div:last-child{border-right:0}
.ch-res b{display:block;font-family:var(--font-display);font-weight:200;font-size:var(--t-3);letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap}
.ch-res span{display:block;margin-top:var(--s-2);font-size:var(--t-7);line-height:1.35;color:var(--paper-ink-2)}
.ch-res-src{padding:var(--s-2) var(--s-3);border-top:1px solid var(--paper-line);background:var(--stone);font-size:var(--t-label);line-height:1.45;color:var(--paper-ink-2)}
/* figures that read as a range (40 → 4,800) sit one to a row, as on a phone */
.ch-res.list .ch-res-row{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
.ch-res.list .ch-res-row>div{display:flex;align-items:baseline;gap:var(--s-4);padding:12px var(--s-3);border-right:0;border-bottom:1px solid var(--paper-line)}
.ch-res.list b{flex:none;font-size:var(--t-4)}
.ch-res.list span{margin-top:0}
/* a figure past five characters (+1,150%) steps the row down one size */
.ch-res.tight b{font-size:var(--t-4)}

/* ---- the week-by-week scene: the revenue curve draws as you scroll ---- */
.wk{position:relative;height:300vh;background:var(--bg-a)}
.wk-pin{position:sticky;top:0;height:100svh;display:flex;align-items:stretch;overflow:hidden}
.wk-in{width:100%;display:grid;grid-template-rows:auto 1fr auto auto;padding-top:calc(var(--nav-clear) + var(--s-3));padding-bottom:var(--s-5);gap:var(--s-4)}
.wk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-5)}
.wk-top .cs-h3{max-width:24ch;text-wrap:balance}
.wk-sum{font-size:var(--t-7);line-height:1.55;color:var(--ink-2);max-width:52ch;margin-top:var(--s-2)}
.wk-read{text-align:right;flex:none}
.wk-num{display:block;font-family:var(--font-display);font-weight:200;font-size:var(--t-figure);letter-spacing:-.05em;line-height:.86;font-variant-numeric:tabular-nums}
.wk-cap{display:block;font-size:var(--t-7);color:var(--quiet);margin-top:var(--s-2)}
.wk-chart{position:relative;min-height:220px}
.wk-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wk-chart .ax{stroke:var(--line);stroke-width:1}
.wk-chart .base{stroke:var(--quiet-2);stroke-width:1;stroke-dasharray:2 6}
.wk-chart .term{stroke:var(--quiet);stroke-width:1;stroke-dasharray:3 5;opacity:0;transition:opacity .6s var(--ease)}
.wk-chart.past-term .term{opacity:1}
.wk-lb{position:absolute;font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);white-space:nowrap}
.wk-lb.y{right:0;transform:translateY(-50%)}
.wk-lb.x{bottom:-26px;transform:translateX(-50%)}
.wk-lb.term-lb{opacity:0;transition:opacity .6s var(--ease)}
.wk-chart.past-term .term-lb{opacity:1}
.wk-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5)}
/* the summary in three dated beats, each under its own weeks: the beat lights,
   and its hairline inks, once the columns reach it (cases.js sets the side
   margins to the columns' own, --x0 and --x1) */
.wk-beats{display:grid;grid-template-columns:repeat(var(--n,17),minmax(0,1fr));column-gap:clamp(2px,.8vw,12px);margin:0 var(--x1,0) 0 var(--x0,0);padding:var(--s-4) 0 0;list-style:none}
.wk-beat{position:relative;padding:var(--s-3) var(--s-3) 0 0;opacity:.4;transition:opacity .6s var(--ease)}
.wk-beat::before,.wk-beat::after{content:"";position:absolute;left:0;right:var(--s-3);top:0;height:1px;background:var(--line)}
.wk-beat::after{background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.wk-beat.on{opacity:1}
.wk-beat.on::after{transform:none}
.wk-beat b{display:block;font-size:var(--t-7);font-weight:500;color:var(--ink)}
.wk-beat p{font-size:var(--t-7);line-height:1.5;color:var(--quiet);margin-top:var(--s-1);max-width:46ch}
.wk-beat{grid-column:var(--a,auto) / var(--z,auto)}
.wk-note{font-size:var(--t-6);line-height:1.5;max-width:46ch;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.wk.is-done .wk-note{opacity:1;transform:none}
.wk-src{font-size:var(--t-7);line-height:1.55;color:var(--quiet);max-width:62ch;text-align:right}

/* ---- body beside a facts column (Hebbia) ---- */
.bd-sec{padding:var(--bay) 0}
.bd-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-6);padding-left:calc(var(--gutter) + var(--s-4));padding-right:calc(var(--gutter) + var(--s-4))}
.bd-main{max-width:680px;min-width:0}
.bd-main .bd-lede{font-size:var(--t-5);line-height:1.5;letter-spacing:-.012em;color:var(--ink-2);margin-bottom:var(--s-5)}
.bd-main h2{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.03em;line-height:1.1;margin:var(--s-6) 0 var(--s-4)}
.bd-main p{font-size:var(--t-6);line-height:1.65;color:var(--ink-2);margin-bottom:var(--s-4)}
.bd-main p b{font-weight:500;color:var(--ink)}
.bd-main p a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--quiet)}
.bd-side{position:sticky;top:var(--nav-clear);align-self:start}
.bd-side dl{border-top:1px solid var(--line)}
.bd-side dt{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);padding-top:var(--s-3)}
.bd-side dd{font-size:var(--t-7);line-height:1.55;color:var(--ink-2);padding:6px 0 var(--s-3);border-bottom:1px solid var(--line)}
.bd-side dd b{font-weight:500;color:var(--ink)}

/* the two answers (Profound's product cards, running in place): the
   question types, the answer streams, the client's name is marked as it
   arrives, and the squares fill one answer at a time (Athena's per-assistant count) */
.ans{margin:var(--s-5) 0 var(--s-5)}
.ans-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.ans-card{display:flex;flex-direction:column;min-width:0;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg-c)}
.ans-top{display:flex;justify-content:space-between;gap:var(--s-2);font-size:var(--t-7);color:var(--quiet)}
.ans-q{position:relative;margin-top:var(--s-3);padding:var(--s-2) 12px;border:1px solid var(--edge-2);border-radius:var(--r-inner);background:var(--bg-b);font-size:var(--t-7);line-height:1.4;color:var(--ink)}
.ans-a{flex:1;margin-top:var(--s-3);font-size:var(--t-7);line-height:1.6;color:var(--ink-2)}
.ans-a b{font-weight:500;color:var(--ink)}
.ans-a mark{font-weight:500;color:var(--bg-b);background:var(--ink);border-radius:var(--r-sm);padding:0 2px;transition:background-size .5s var(--ease),color .3s var(--ease)}
.ans-miss{margin-top:var(--s-2);font-size:var(--t-7);font-weight:500;color:var(--ink)}
.ans-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.ans-n b{display:block;font-family:var(--font-display);font-weight:200;font-size:var(--t-3);letter-spacing:-.04em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.ans-n span{display:block;max-width:13ch;margin-top:6px;font-size:var(--t-label);line-height:1.4;color:var(--quiet)}
.ans-tab{display:grid;gap:var(--s-1);flex:none}
.ans-tab>div{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.ans-tab dt{font-size:var(--t-label);color:var(--quiet)}
.ans-tab dd{display:flex;gap:2px}
.ans-tab i{display:block;width:9px;height:9px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--edge-4);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.ans-tab i.hit{background:var(--ink);box-shadow:none}
/* Profound's cards sit on a faint dot grid; it is what makes them read as product */
.ans-card,.pr{background-image:radial-gradient(rgba(237,233,225,.07) 1px,transparent 1.2px);background-size:14px 14px;background-position:7px 7px}
.ans figcaption{margin-top:var(--s-3);font-size:var(--t-7);line-height:1.5;color:var(--quiet)}
/* armed by the script: everything waits to be typed */
.ans-card.armed .ans-q .c,.ans-card.armed .ans-a .w{opacity:0;transition:opacity .22s var(--ease)}
.ans-card.armed .ans-q .c.on,.ans-card.armed .ans-a .w.on{opacity:1}
.ans-card.armed .ans-a mark{color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 0/0% 100%}
.ans-card.armed .ans-a mark.hit{color:var(--bg-b);background-size:100% 100%}
.ans-card.armed .ans-miss{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ans-card.armed.done .ans-miss{opacity:1;transform:none}
.ans-card.typing .ans-q::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--ink);animation:anscaret .9s steps(1) infinite}
@keyframes anscaret{50%{opacity:0}}

/* the press card (Profound's agent card): each step spins, then ticks; the
   blog step is still to come, so it keeps turning while it is on screen */
.pr{margin:var(--s-5) 0;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg-c);overflow:hidden}
.pr-find{padding:var(--s-4) var(--s-4) 0;max-width:24ch;font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.pr-steps{list-style:none;display:grid;gap:8px;margin:var(--s-4) 0 0;padding:0 var(--s-4) var(--s-4)}
.pr-steps li{display:flex;align-items:center;gap:12px;padding:var(--s-2) 12px;border:1px solid var(--edge-2);border-radius:var(--r-inner);background:var(--bg-b);font-size:var(--t-7);line-height:1.4;color:var(--ink-2)}
.pr-steps li::before{content:'';flex:none;box-sizing:border-box;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--edge-4)}
.pr-steps li.ok::before{border:0;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230C0B0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.pr-steps li.run::before{border-color:var(--edge-3);border-top-color:var(--ink);animation:prspin .8s linear infinite;animation-play-state:paused}
.pr.vis .pr-steps li.run::before{animation-play-state:running}
.pr-steps li.ok,.pr-steps li.run{color:var(--ink)}
.pr.armed .pr-steps li{opacity:.3;transition:opacity .4s var(--ease),color .4s var(--ease)}
.pr.armed .pr-steps li.on{opacity:1}
@keyframes prspin{to{transform:rotate(360deg)}}
.pr figcaption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);font-size:var(--t-7);color:var(--quiet)}
.pr figcaption b{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}

/* the lede brightens word by word as it scrolls through (Profound's quotes) */
.bd-lede.armed .bw{color:var(--quiet-2);transition:color .35s var(--ease)}
.bd-lede.armed .bw.lit{color:var(--ink)}

/* ---- more case studies (Hebbia's "Don't miss these") ---- */
.mc-sec{padding:var(--bay) 0 0}
.mc-head{margin-bottom:var(--stack);padding-left:var(--s-4)}
.mc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.mc{display:block}
.mc-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-inner);background:var(--bg-b)}
.mc:hover .ft{transform:scale(1.03)}
.mc-k{display:block;font-size:var(--t-7);color:var(--quiet);margin-top:var(--s-3)}
.mc-h{font-family:var(--font-display);font-weight:200;font-size:var(--t-4);letter-spacing:-.03em;line-height:1.12;margin-top:6px;max-width:22ch;transition:color .3s}
.mc:hover .mc-h{color:var(--ink-hi)}

/* ====================================================================
   PHONES AND NARROW WINDOWS (declared per section)
   ==================================================================== */
@media (max-width:900px){
  /* featured row becomes a swipe row; the panel in view is the awake one */
  .feat{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);scrollbar-width:none}
  .feat::-webkit-scrollbar{display:none}
  .fp,.fp.is-on{flex:0 0 84%;scroll-snap-align:start}
  .fp-box{flex:none;height:min(118vw,520px)}
  .fp-h,.fp.is-on .fp-h{font-size:var(--t-4)}
  .fp-copy,.fp.is-on .fp-copy{right:var(--s-4);width:auto}
  .fp-h,.fp.is-on .fp-h,.fp-meta span,.fp.is-on .fp-meta span{animation:none}
  .fp-btn{opacity:1;transform:none}
  .fp-bar{display:none}
  .fp-meta{min-height:0}
  .fp-meta span{white-space:normal}
  .rw{grid-template-columns:1fr}
  .cs-ruled::before,.cs-ruled::after{display:none}
  .rw-copy{padding:var(--s-4) var(--s-3) var(--s-5)}
  .bd-grid{grid-template-columns:minmax(0,1fr);padding-left:var(--gutter);padding-right:var(--gutter)}
  .bd-side{position:static}
  .mc-grid{grid-template-columns:1fr}
  .hub-head .shell,.sites-head .shell,.logos-head,.mc-head{padding-left:var(--gutter)}
  /* .four named too, or its four tracks outrank this and the hidden fourth clip leaves a black strip */
  .ch-wall,.ch-wall.four{grid-template-columns:repeat(3,1fr)}
  .ch-col:nth-child(n+4){display:none}
  .wk{height:auto}
  .wk-pin{position:relative;height:auto;min-height:0}
  .wk-in{padding-top:var(--bay);padding-bottom:var(--bay)}
  .wk-top{flex-direction:column;gap:var(--s-4)}
  .wk-read{text-align:left}
  .wk-chart{height:260px;margin-bottom:var(--s-4)}
  .wk-beats{grid-template-columns:minmax(0,1fr);row-gap:var(--s-4);margin:0;padding-top:var(--s-3)}
  .wk-beat{grid-column:auto}
  .wk-foot{flex-direction:column;align-items:flex-start}
  .wk-src{text-align:left}
  .wk-note{opacity:1;transform:none}
  .ch{height:auto;min-height:min(94svh,900px)}
  /* gap: on a phone turned sideways the copy outgrows the screen and the back link sat on the client's logo */
  .ch-in{min-height:min(94svh,900px);gap:var(--s-5)}
  .ch-foot{flex-direction:column;align-items:stretch;gap:var(--s-4)}
  .ch-res{width:100%}
  .ans-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ch-res-row{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  .ch-res-row>div{display:flex;align-items:baseline;gap:var(--s-3);padding:12px var(--s-3);border-right:0;border-bottom:1px solid var(--paper-line)}
  .ch-res-row>div:last-child{border-bottom:0}
  .ch-res b{flex:none;min-width:3.2em}
  .ch-res.tight b{min-width:4.4em}
  .ch-res span{margin-top:0}
  .pr-find,.pr-steps,.pr figcaption{padding-left:var(--s-3);padding-right:var(--s-3)}
}
/* reduced motion: the complete page, nothing travelling */
@media (prefers-reduced-motion:reduce){
  .rw-word>span,[data-rise]{transform:none!important;opacity:1!important}
  .ch-col{clip-path:none}
  .ch-col .ft{transform:none}
  .fp-h,.fp.is-on .fp-h,.fp-meta span,.fp.is-on .fp-meta span{animation:none}
}

/* row client name: plain text, as Hebbia names the speaker */
.rw-n{display:block;font-size:var(--t-7);font-weight:500;color:var(--ink);margin-bottom:var(--s-4)}

/* the scene's weekly columns: outlines before the term, solid during it,
   the week being read in full ink. Each rises as the scroll reaches it. */
.wk-bars{position:absolute;top:0;bottom:0;display:grid;grid-template-columns:repeat(var(--n,17),minmax(0,1fr));gap:clamp(2px,.8vw,12px);align-items:end;z-index:1}
.wk-bar{display:block;height:calc(var(--v) * 100%);border-radius:var(--r-sm) var(--r-sm) 0 0;background:rgba(237,233,225,.34);
  transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease),background .5s var(--ease)}
.wk-bar.pre{background:transparent;box-shadow:inset 0 0 0 1px var(--edge-4)}
.wk-bar.up{transform:scaleY(1)}
.wk-bar.cur{background:var(--ink)}
.wk-bar.pre.cur{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.wk-chart .base{z-index:2}
.wk-chart svg{z-index:2;pointer-events:none}

/* AetherHaus's film is portrait; hold the face in the landscape crop */
.ft.top{object-position:center 18%}
/* a screenshot of a client's site holds its top edge, as the site grid does */
.ft.shot{object-position:top}

/* ---- staggers, so pages carry no inline style ---- */
[data-rise="1"]{--d:1}[data-rise="2"]{--d:2}[data-rise="3"]{--d:3}[data-rise="4"]{--d:4}
[data-rise="5"]{--d:5}[data-rise="6"]{--d:6}[data-rise="7"]{--d:7}[data-rise="8"]{--d:8}
.ch-col:nth-child(1){--i:0}.ch-col:nth-child(2){--i:1}.ch-col:nth-child(3){--i:2}.ch-col:nth-child(4){--i:3}.ch-col:nth-child(5){--i:4}

/* ---- the hero's meta line: sector, date, byline, read time ---- */
.ch-meta{display:flex;flex-wrap:wrap;gap:6px var(--s-3);margin-top:var(--s-3);font-size:var(--t-7);color:var(--quiet)}

/* ---- the case body: the live page's headings and its table ---- */
.bd-main h3{font-size:var(--t-6);font-weight:500;line-height:1.35;color:var(--ink);margin:var(--s-5) 0 var(--s-2)}
.bd-main h2{scroll-margin-top:var(--nav-clear)}
.bd-main .note-table{margin:var(--s-4) 0 var(--s-5)}
.bd-main figure{margin:var(--s-5) 0}
.bd-main figcaption{font-size:var(--t-7);line-height:1.5;color:var(--quiet);padding-top:var(--s-3)}
.bd-main figure video{display:block;width:100%;height:auto;background:var(--bg-b);border:1px solid var(--line);border-radius:var(--r-inner)}
.bd-main .plate{border-radius:var(--r-inner)}
.bd-main .fig-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);align-items:start;margin:var(--s-5) 0}
.bd-main .fig-row figure{margin:0}
@media (max-width:560px){.bd-main .fig-row{grid-template-columns:1fr}}
/* the month chart: a stacked column per month, drawn by cases.js from its JSON block */
.mchart-t{font-size:var(--t-6);font-weight:500;line-height:1.35;color:var(--ink)}
.mchart-key{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin:var(--s-2) 0 var(--s-3);font-size:var(--t-7);color:var(--quiet)}
.mchart-key span{display:inline-flex;align-items:center;gap:var(--s-1)}
.mchart-key i{display:inline-block;width:12px;height:12px;border-radius:var(--r)}
.mchart-key .k-a i{background:var(--ink)}
.mchart-key .k-b i{background:var(--quiet)}
.mchart-key .k-w i{background:var(--edge-2);box-shadow:inset 0 0 0 1px var(--quiet-2)}
.mchart-plot{position:relative;min-height:240px}
.mchart-plot svg{display:block;overflow:visible}
.mchart-plot text{font-family:var(--font-mono);font-size:var(--t-label);fill:var(--quiet)}
.mchart-plot .ax{stroke:var(--line);stroke-width:1}
.mchart-plot .base{stroke:var(--quiet-2);stroke-width:1}
.mchart-plot .win{fill:var(--edge-2)}
.mchart-plot .win-edge{stroke:var(--quiet-2);stroke-width:1;stroke-dasharray:3 5}
.mchart-plot .s-a{fill:var(--ink)}
.mchart-plot .s-b{fill:var(--quiet)}
.mchart-plot text.v{fill:var(--ink)}
.mchart-plot text.v-in{fill:var(--bg-b)}
.mchart-plot .col{transition:opacity .25s var(--ease)}
.mchart-plot.hov .col{opacity:.35}
.mchart-plot.hov .col.on{opacity:1}
.mchart-tip{position:absolute;left:0;top:0;padding:var(--s-1) var(--s-2);border:1px solid var(--edge-3);border-radius:var(--r-inner);background:var(--edge-1);font-size:var(--t-7);line-height:1.45;color:var(--quiet);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s var(--ease)}
.mchart-tip.on{opacity:1}
.mchart-tip b{display:block;font-weight:500;color:var(--ink)}
.mchart-more summary{margin-top:var(--s-3);font-size:var(--t-7);color:var(--quiet);cursor:pointer}
.bd-main>table{display:block;max-width:100%;overflow-x:auto;margin:var(--s-5) 0;border-collapse:collapse}
.bd-main .bd-lede a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--quiet)}
/* the contents rail sits at the top of the facts column */
.bd-side .note-rail{position:static;padding-top:0;margin-bottom:var(--s-5)}

/* the results tiles sit in the shell; their heading is the case heading (.cs-h2, as More case
   studies), and it, its date line and its source note start where the text inside a tile does
   (site.css .tile padding) */
.tiles .shell>.cs-h2{margin:0 0 var(--s-3)}
.tiles .shell>.cs-h2,.tiles .shell>.about-lede,.tiles .note-source{padding-left:clamp(20px,1.9vw,26px)}
/* a list in the story reads like its paragraphs, and three result tiles fill
   the row on a wide screen (Collabstr, October 24, 2026) */
.bd-main ul{margin:0 0 var(--s-4);padding-left:1.2em}
.bd-main li{font-size:var(--t-6);line-height:1.65;color:var(--ink-2);margin:0 0 var(--s-1)}
.bd-main li::marker{color:var(--quiet)}
@media (min-width:901px){.cs .tiles-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .cs .tiles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

}
@media (max-width:560px){.cs .tiles-grid{grid-template-columns:1fr}}