/* assets/case-studies.css: loaded by case-studies.html only, AFTER assets/site.css.
   Originally GENERATED by tools/case-studies/build-source.mjs (since removed); edited by
   hand from 2026-09-29, when the cards and the pop-up lost their photos.
   Every rule is copied from git, not retyped: the colleague's rules from
   `git diff 6232648 2d1949c -- assets/site.css`, and one Phase 0 line.
   Decisions applied (migration-plan.md §11.9): no --slate tokens (E2, E3).
   The filter badges were replaced by two rows of pills on 2026-10-04 (see "case-study
   filter" below), which also removed the badges' tablet-column rules. */

/* spotlight */
    .quote-ba[hidden]{display:none}

/* case study detail modal */
.scard-clickable{cursor:pointer}
.scard-clickable:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.case-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.case-modal.open{opacity:1;pointer-events:auto}
.case-modal-backdrop{position:absolute;inset:0;background:rgba(28,24,19,.6);backdrop-filter:blur(3px)}
.case-modal-panel{position:relative;z-index:1;width:min(760px,100%);max-height:calc(100vh - 80px);
  background:var(--ivory);border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden;
  transform:translateY(18px) scale(.98);opacity:0;transition:transform .45s var(--spring),opacity .35s var(--ease)}
.case-modal.open .case-modal-panel{transform:translateY(0) scale(1);opacity:1}
.case-modal-scroll{max-height:calc(100vh - 80px);overflow-y:auto}
.case-modal-close{position:absolute;top:20px;right:20px;z-index:3;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:rgba(247,243,236,.92);color:var(--ink);display:grid;place-items:center;
  cursor:pointer;transition:background .3s,transform .35s var(--spring)}
.case-modal-close:hover{background:#fff;transform:rotate(90deg)}
.case-modal-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.case-modal-panel::before{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:var(--c,var(--gold));z-index:2}
.case-modal-body{padding:44px 40px 46px}
.case-modal-body .eyebrow{color:var(--c,var(--gold))}
.case-modal-body .eyebrow::before{background:var(--c,var(--gold))}
.case-modal-body h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;margin:14px 0 16px}
.case-modal-headline{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--ink-soft);line-height:1.5}
.case-modal-ba{margin-top:26px}
.case-modal-section{margin-top:32px}
.case-modal-section h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:14px}
.case-modal-section p{color:var(--ink-soft);line-height:1.7}
.case-modal-list,.case-modal-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.case-modal-list li,.case-modal-results li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:15px;line-height:1.65}
.case-modal-list li::before,.case-modal-results li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--c,var(--gold))}
.case-modal-stack{display:flex;flex-wrap:wrap;gap:8px}
.case-stack-pill{background:var(--sand);border:1px solid var(--line);border-radius:100px;padding:7px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-soft)}
.case-modal-why p{font-style:italic}
body.case-modal-lock{overflow:hidden}
@media(max-width:640px){
  .case-modal{padding:0}
  .case-modal-panel{width:100%;max-height:100vh;border-radius:0}
  .case-modal-scroll{max-height:100vh}
  .case-modal-body{padding:36px 22px 40px}
}
@media (prefers-reduced-motion:reduce){
  .case-modal,.case-modal-panel,.case-modal-close,.case-mark,.case-card .tlink::after,.case-card .tlink .arrow{transition:none!important}
}

/* case cards without photos (2026-09-29): the sector mark (in its sector colour, also the
   colour of its filter dot), the engagement type under it, then a large result headline.
   --c is the card's colour (top bar); --mark is its sector's colour (mark, label, link). */
.case-card{background:#faf9f7}
.case-card .scard-body{padding:32px 34px 24px}
.case-card .case-top{gap:14px;margin-bottom:22px}
.case-top{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:30px}
.case-mark{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--mark);color:#fff;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--mark) 80%,transparent),0 2px 6px rgba(28,24,19,.06);
  transition:transform .5s var(--spring)}
.case-card:hover .case-mark{transform:translateY(-2px) rotate(-4deg)}
.case-top .eyebrow{margin:0;font-size:11.5px;letter-spacing:.16em;line-height:1.6;color:var(--mark)}
.case-top .eyebrow::before{display:none}
.case-card .scard-body h3{font-size:clamp(1.6rem,2.05vw,1.95rem);line-height:1.14;letter-spacing:-.03em;
  color:var(--espresso);margin-bottom:16px;text-wrap:balance}
.case-card .scard-body p{font-size:15.5px;line-height:1.7;margin-bottom:24px}
/* before → after line under the headline (2026-10-04): "before" struck through and muted,
   the arrow in the sector colour, "after" in the headline colour. */
.case-ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;column-gap:16px;margin-bottom:18px;
  padding:14px 18px;border:1px solid #E3DACA;border-radius:16px}
.case-ba-was,.case-ba-now{display:flex;flex-direction:column;gap:6px;min-width:0}
.case-ba-val{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.case-ba-was .case-ba-val{color:var(--soft);text-decoration:line-through;text-decoration-thickness:2px}
.case-ba-now .case-ba-val{color:var(--espresso)}
.case-ba-lab{font-size:13.5px;line-height:1.4;color:var(--muted)}
.case-ba-was .case-ba-lab{text-decoration:line-through}
.case-ba-arrow{color:var(--mark);font-size:1.3rem;line-height:1;padding-top:.1em}
@media(max-width:640px){.case-ba{column-gap:12px;padding:14px}.case-ba-val{font-size:1.2rem}}
.case-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid var(--line)}
.case-card .case-foot{padding-top:18px}
.case-client{font-size:13.5px;line-height:1.4;color:var(--muted)}
.case-foot .tlink{flex:none;font-size:14px;color:var(--mark)}.case-foot .tlink::after{background:var(--mark)}
.scard-clickable:hover .tlink::after,.scard-clickable:focus-visible .tlink::after{transform:scaleX(1)}
.scard-clickable:hover .tlink .arrow,.scard-clickable:focus-visible .tlink .arrow{transform:translateX(5px)}
.scard-clickable:active{transform:translateY(-4px);transition-duration:.15s}
.case-modal-body .case-top{padding-right:56px;margin-bottom:22px}

/* spotlight without its photo (2026-09-29): the card pattern above at feature size. The
   before/after boxes stack in the column the photo filled; .solo has neither. */
.case-spot{grid-template-columns:1.25fr .75fr}
.case-spot.solo{grid-template-columns:1fr}
.case-spot::before{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:var(--c);z-index:4}
.case-spot .quote-main{padding:76px 58px 48px;display:flex;flex-direction:column}
.case-spot .case-top{margin-bottom:32px}
.case-spot .quote-main .q{font-weight:700;font-size:clamp(2rem,3.4vw,3rem);line-height:1.08;color:var(--espresso);
  margin-bottom:24px;text-wrap:balance}
.case-spot .case-ba{max-width:460px;margin-bottom:28px}
.case-spot-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:600px;margin-bottom:40px;flex:1}
.case-spot .case-foot{padding-top:24px}
.case-spot .case-client{font-size:14.5px}
.case-spot .case-foot .tlink{font-size:15px;background:none;border:0;padding:0 0 2px;cursor:pointer}
.case-spot .case-foot .tlink:hover::after,.case-spot .case-foot .tlink:focus-visible::after{transform:scaleX(1)}
.case-spot .case-foot .tlink:hover .arrow,.case-spot .case-foot .tlink:focus-visible .arrow{transform:translateX(5px)}
.case-spot .case-foot .tlink:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.case-spot .case-foot .tlink:active .arrow{transform:translateX(8px)}
.case-spot:hover .case-mark{transform:translateY(-2px) rotate(-4deg)}
.case-spot-side{background:var(--sand);border-left:1px solid var(--line);padding:96px 44px 48px;display:flex;align-items:center}
.case-spot-side .quote-ba{margin:0;flex-direction:column;gap:18px;width:100%}
.case-spot-side .ba{min-width:0;padding:22px 24px}
.case-spot-side .ba p{font-size:15px;line-height:1.65}
@media(max-width:1080px){
  .case-spot{grid-template-columns:1fr}
  .case-spot-side{border-left:0;border-top:1px solid var(--line);padding:36px 58px 48px}
  .case-spot-side .quote-ba{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:640px){
  .case-spot .quote-main{padding:92px 26px 36px}
  .case-spot .case-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .case-spot-side{padding:28px 26px 36px}
  .case-spot-side .quote-ba{flex-direction:column}
}

/* case-study filter (2026-10-04): two rows. The type of work is a segmented control (the
   chosen one dark); the sector is a row of outlined pills, each with its sector's colour
   dot (--fc, the colour of the mark on its cards), the chosen one white with a dark
   outline. Every button shows its card count. On wide screens the bar sticks under the
   site header while the grid scrolls (2026-09-29); the frosted backdrop is a
   pseudo-element faded in with opacity once the bar is .stuck. */
.cs-filters{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.work-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:6px;border-radius:100px;background:var(--sand)}
.work-tab{display:inline-flex;align-items:baseline;justify-content:center;gap:7px;padding:11px 20px;border:0;border-radius:100px;
  background:transparent;font-family:var(--body);font-size:16px;font-weight:500;line-height:1.5;color:var(--ink-soft);cursor:pointer;
  transition:transform .35s var(--spring)}
.work-tab .count{color:var(--soft)}
.work-tab:hover{background:rgba(28,24,19,.06);color:var(--ink)}
.work-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.work-tab:active{transform:scale(.96)}
.work-tab.on{background:var(--ink);color:var(--ivory);font-weight:600}
.work-tab.on .count{color:rgba(247,243,236,.55);font-weight:500}
.sector-pills{display:flex;flex-wrap:wrap;gap:10px}
.sector-pill{display:inline-flex;align-items:center;gap:8px;padding:12px 20px 12px 16px;border:1px solid rgba(28,24,19,.13);
  border-radius:100px;background:rgba(255,255,255,.3);font-family:var(--body);font-size:16px;font-weight:400;line-height:1.5;
  color:var(--ink-soft);cursor:pointer;transition:transform .35s var(--spring)}
.sector-pill .dot{flex:none;width:9px;height:9px;margin-right:2px;border-radius:50%;background:var(--fc,color-mix(in srgb,var(--soft) 55%,var(--ivory)))}
.sector-pill .count{color:var(--soft)}
.sector-pill:hover{transform:translateY(-2px);background:rgba(255,255,255,.7);border-color:color-mix(in srgb,var(--fc,var(--ink)) 45%,var(--line))}
.sector-pill:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sector-pill:active{transform:translateY(0) scale(.97)}
.sector-pill.on{background:#fff;border-color:var(--ink);box-shadow:inset 0 0 0 .5px var(--ink)}
@media(max-width:640px){
  .cs-filters{gap:14px}
  .work-tabs{display:flex;width:100%;border-radius:24px}
  .work-tab{flex:1 1 auto;padding:9px 14px;font-size:15px}
  .sector-pills{gap:8px}
  .sector-pill{gap:8px;padding:9px 16px 9px 13px;font-size:15px}
}
.filter-sentinel{height:0}
@media(min-width:1081px){
  .filter-bar{position:sticky;top:var(--header-h);z-index:50;margin-inline:-16px;padding:12px 16px 14px;border-radius:0 0 22px 22px}
  .filter-bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:rgba(247,243,236,.95);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
    border-bottom:1px solid var(--line);box-shadow:0 20px 40px -28px rgba(28,24,19,.4);opacity:0;transition:opacity .35s var(--ease)}
  .filter-bar.stuck::before{opacity:1}
  /* stuck: the same two rows, more compact; full size again when the bar is back in place */
  .filter-bar.stuck{padding-block:10px}
  .filter-bar.stuck .cs-filters{gap:10px}
  .filter-bar.stuck .work-tabs{padding:4px}
  .filter-bar.stuck .work-tab{padding:6px 18px;font-size:15px}
  .filter-bar.stuck .sector-pill{padding:6px 18px 6px 14px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .work-tab,.sector-pill,.filter-bar::before{transition:none!important}
}

/* =========================================================================================
   2026-10-16: the redesign from the manager's mockup ("Train. Advise. Implement.").
   Her structure, the site's look: every value below is one of the site's tokens, and the
   new parts copy the patterns of the cards, pills and boxes above. The spotlight and card
   rules above stay: the home page still shows the spotlight card. */

#what,#index,#work,#teaching,#team{scroll-margin-top:calc(var(--header-h) + 24px)}

/* hero: the mockup's second paragraph, under the lead */

/* the four numbers under the hero (the site's numbers band, four across) */
.metrics-grid--four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.metrics-grid--four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.metrics-grid--four{grid-template-columns:1fr}}

/* "What we actually do": feature cards; "See it with" links open a case */
.cs-caps .feature{display:flex;flex-direction:column}
.cs-caps .feature .cs-see{margin-top:auto;padding-top:18px;font-size:14px;line-height:1.6;color:var(--soft)}
.cs-see-link{background:none;border:0;padding:0;text-align:left;font-family:var(--display);font-weight:600;font-size:14px;color:var(--gold-lo);
  cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 45%,transparent);text-underline-offset:4px;
  transition:transform .35s var(--spring)}
.cs-see-link:hover{color:var(--terra);text-decoration-color:currentColor}
.cs-see-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.cs-see-link:active{transform:translateY(1px)}
@media(max-width:640px){.cs-caps{grid-template-columns:1fr}}

/* "Ten engagements, one table": client × service */
.cs-matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--ivory);border:1px solid var(--line);border-radius:24px;padding:6px 26px}
.cs-matrix{width:100%;min-width:760px;border-collapse:collapse}
.cs-matrix th,.cs-matrix td{padding:0;text-align:left;border-bottom:1px solid var(--line)}
.cs-matrix tbody tr:last-child th,.cs-matrix tbody tr:last-child td{border-bottom:0}
.cs-matrix thead th{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.04em;color:var(--muted);padding:20px 8px 16px;vertical-align:bottom}
.cs-matrix thead th.col{text-align:center;width:11%}
.cs-matrix td{text-align:center}
.cs-matrix tbody th{font-weight:400}
.cs-matrix-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;width:100%;padding:18px 8px;
  background:none;border:0;text-align:left;cursor:pointer;transition:transform .35s var(--spring)}
.cs-matrix-row .nm{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.cs-matrix-row .ind{font-size:13.5px;color:var(--muted);white-space:nowrap}
.cs-matrix-row:hover .nm{color:var(--terra)}
.cs-matrix-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:10px}
.cs-matrix-row:active{transform:translateX(3px)}
.cs-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(28,24,19,.18)}
.cs-dot.on{background:var(--gold);border-color:var(--gold)}
.cs-matrix-note{margin-top:20px;font-size:14px;color:var(--muted)}

/* "The case studies": the filter's visible group labels */
.cs-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.cs-filter-lab{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--soft);min-width:92px}
@media(min-width:1081px){.filter-bar.stuck .cs-filter-lab{display:none}}

/* one row per case: client | title, summary, tags, link | before and after.
   --c is the industry's colour (the bar on top, the industry line, the link). */
.cs-rows{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.cs-row{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:32px;padding:38px 34px 34px;
  background:#faf9f7;border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cs-row[hidden]{display:none}
.cs-row::before{content:"";position:absolute;left:0;top:0;height:6px;width:100%;background:var(--c)}
.cs-row:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cs-row-who strong{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;line-height:1.3;color:var(--espresso);margin-bottom:8px}
.cs-row-who span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.6;color:var(--c)}
.cs-row-main h3{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.15;letter-spacing:-.03em;color:var(--espresso);margin-bottom:12px;text-wrap:balance}
.cs-row-main p{font-size:15.5px;line-height:1.7;color:var(--muted);margin-bottom:18px;max-width:38em}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.cs-tag{background:var(--sand);border:1px solid var(--line);border-radius:100px;padding:5px 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-soft)}
.cs-row-main .tlink{background:none;border:0;padding:0 0 2px;cursor:pointer;color:var(--c)}
.cs-row-main .tlink::after{background:var(--c)}
.cs-row-main .tlink:hover::after,.cs-row-main .tlink:focus-visible::after{transform:scaleX(1)}
.cs-row-main .tlink:hover .arrow,.cs-row-main .tlink:focus-visible .arrow{transform:translateX(5px)}
.cs-row-main .tlink:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.cs-row-main .tlink:active .arrow{transform:translateX(8px)}
.cs-row-ba{display:flex;flex-direction:column;gap:12px;align-self:start}
.cs-row-ba .ba{min-width:0;padding:16px 18px}
.cs-row-ba .ba .val{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.15;letter-spacing:-.03em;color:var(--espresso);margin-bottom:4px}
@media(max-width:1080px){.cs-row{grid-template-columns:minmax(0,1fr) 240px}.cs-row-who{grid-column:1/-1}}
@media(max-width:640px){.cs-row{grid-template-columns:1fr;gap:20px;padding:32px 22px 26px}}

/* "We also teach where we train" */
.cs-schools{grid-template-columns:repeat(2,1fr)}
.cs-schools .feature h3{font-size:1.35rem}
@media(max-width:640px){.cs-schools{grid-template-columns:1fr}}
.cs-events{margin-top:40px;font-family:var(--display);font-weight:500;font-size:1.25rem;line-height:1.55;letter-spacing:-.01em;color:var(--ink-soft);max-width:46em}

/* "Every person on our team is an AI engineer" */
.cs-big-claim{font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;letter-spacing:-.045em;line-height:1.04;color:var(--ink)}
.cs-team-points{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cs-team-points li{padding:20px 0;border-bottom:1px solid var(--line)}
.cs-team-points h3{font-size:1.05rem;letter-spacing:-.02em;margin-bottom:6px}
.cs-team-points p{font-size:15.5px;line-height:1.7;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .cs-row,.cs-see-link,.cs-matrix-row{transition:none!important}
}

/* A client's quote in the case pop-up (2026-10-19), after Before / After. */
.case-modal-quote{margin:28px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--c,var(--gold))}
.case-modal-quote blockquote{margin:0}
.case-modal-quote p{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.45;letter-spacing:-.02em;color:var(--ink)}
.case-modal-quote figcaption{margin-top:12px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.case-modal-quote figcaption span{display:block;margin-top:2px;font-weight:400;font-size:14px;color:var(--muted)}