@layer components {
 .full-case-page{background:var(--background);color:var(--foreground)}
 .full-case-page .identity-text>span{color:var(--muted-foreground)}
 html:has(.masthead-menu[open]) .full-case-page .identity-text>span{color:#c0c5cf}
 .case-container{width:var(--content-width);max-width:1280px;margin-inline:auto}
 .case-hero{padding-block:48px}.case-hero h1{font-size:clamp(36px,4.2vw,60px);max-width:1100px;line-height:1.12}
 .case-section{padding-block:64px}.case-section h2{font-size:clamp(28px,2.5vw,36px);font-weight:500;line-height:1.2}
 .case-section p{max-width:78ch}.case-section h3{font-weight:500}
 .case-section [data-slot=card-title]{line-height:1.4}
 .case-image img{max-height:none;object-fit:contain}.case-image .image-link{background:var(--card)}
 .case-image figcaption{max-width:90ch}.case-footer{padding-block:64px}
 .case-section a:not([data-slot]):not(.image-link){text-decoration:underline;text-underline-offset:4px}
 .case-section [data-ui=comparison]{max-width:100%}.case-section .wipe{height:clamp(420px,65vh,720px)}
 .case-section video{width:100%;border-radius:var(--radius)}
 .case-section video:focus-visible{outline:2px solid var(--ring);outline-offset:4px}
 .case-section [id],.case-body [id]{scroll-margin-top:calc(var(--header-h,96px) + 16px)}
 .case-team-grid{align-items:start}.case-team-grid>figure{height:100%}.case-team-grid>figure .image-link{height:calc(100% - 40px)}
 @media(max-width:860px){.case-hero{padding-block:32px}.case-section{padding-block:40px}.case-footer{padding-block:40px}}
 @media(max-width:600px){.full-case-page .masthead{gap:16px}.case-hero h1{font-size:36px}.case-section .wipe{height:420px}.case-team-grid{display:flex;flex-direction:column}.case-team-grid>figure .image-link{height:auto}.case-section h2{font-size:28px}}
}

@layer components {
 /* ── Case page shell ──────────────────────────────────────────────────────
    One meta block at the top, a contents list that follows the reader, and a
    pager at the bottom. Clickable things are a button or an underlined link. */
 .case-back{padding-block:24px 8px;font-size:15px}
 .case-hero{display:grid;gap:32px;padding-block:40px 48px}
 .case-hero-copy{display:grid;gap:16px;justify-items:start}
 .case-hero h1{font-size:clamp(36px,4.2vw,60px);max-width:16ch;line-height:1.1}
 .case-hero-subtitle{max-width:60ch;font-size:19px;line-height:1.6;color:var(--muted-foreground)}
 .case-meta-block{display:flex;flex-wrap:wrap;gap:16px 48px;margin:0;padding-block:24px;border-block:1px solid var(--border)}
 .case-meta-block>div{display:grid;gap:4px}
 .case-meta-block dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
 .case-meta-block dd{margin:0;font-size:15px}
 .case-metrics [data-slot=card-content]{display:flex;flex-wrap:wrap;align-items:stretch;gap:24px 40px}
 .case-metrics .metric strong{display:block;font-size:40px;font-weight:500;line-height:1.1;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums}
 .case-metrics .metric-label{display:block;margin-top:6px;font-size:14px;color:var(--muted-foreground)}
 /* Too narrow for one row: the figures stack in a grid and the vertical rules go,
    otherwise a full-height rule stretches the wrapped rows past the card. */
 @media(max-width:640px){
  .case-metrics [data-slot=card-content]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .case-metrics [data-slot=separator]{display:none}
 }

 /* Stage marker inside one case. It carries an anchor, never a second meta block. */
 .case-stage{padding-block:56px 8px}
 .case-stage-number{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);cursor:default}
 .case-stage-number>i{font-style:normal;padding:3px 8px;border:1px solid currentColor;border-radius:6px}
 .case-stage-title{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.03em}
 .case-stage-summary{margin-top:12px;max-width:60ch;color:var(--muted-foreground)}

 /* Contents: a sticky column on desktop, a scrolling chip row on mobile. */
 .case-layout{width:var(--content-width);max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:minmax(200px,244px) minmax(0,1fr);gap:64px;align-items:start}
 .case-layout>.case-body{min-width:0}
 .case-layout>.case-body>.case-section,.case-layout>.case-body>.case-stage{padding-inline:0}
 .case-layout .case-container{width:auto;max-width:none;margin-inline:0}
 .case-toc{position:sticky;top:calc(var(--masthead-h,96px) + 16px);padding-block:56px 24px}
 .case-toc-title{margin:0 0 16px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);cursor:default}
 .case-toc ol{display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:none}
 .case-toc-item>a{display:block;padding:8px 0 8px 14px;border-left:2px solid var(--border);font-size:14px;line-height:1.45;color:var(--muted-foreground);text-decoration:none}
 .case-toc-item>a:hover{color:var(--foreground);text-decoration:underline;text-underline-offset:5px}
 .case-toc-item>a.is-current{color:var(--foreground);border-left-color:var(--foreground)}
 .case-toc-item--stage>a{margin-top:16px;font-weight:500;color:var(--foreground)}
 .case-toc-item>a:focus-visible{outline:3px solid var(--ring,currentColor);outline-offset:3px;border-radius:4px}

 /* Pager and closing. */
 .case-footer{border-top:1px solid var(--border);margin-top:64px}
 .case-pager{display:flex;flex-wrap:wrap;gap:24px;padding-block:48px}
 .case-pager-link{flex:1 1 min(100%,340px)}
 .case-pager-link--next{margin-left:auto}
 .case-pager-link{display:grid;gap:8px;padding:24px;border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:border-color 160ms ease,translate 160ms ease}
 .case-pager-link:hover{border-color:var(--foreground);translate:0 -2px}
 .case-pager-link--next{text-align:right}
 .case-pager-role{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-foreground)}
 .case-pager-link--next .case-pager-role{justify-content:flex-end}
 .case-pager-role>i{font-style:normal}
 .case-pager-link strong{font-size:22px;font-weight:500;letter-spacing:-.02em}
 .case-footer-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:40px;border-top:1px solid var(--border)}
 .case-footer-contact h2{font-size:26px;font-weight:500}
 .case-footer-contact p{margin-top:8px;font-size:14px;color:var(--muted-foreground)}
 .case-footer-back{padding-bottom:48px;font-size:15px}
 .full-case-page .case-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:10px;background:var(--foreground);color:var(--background);font-size:15px;font-weight:500;text-decoration:none}
 .full-case-page .case-cta:hover{translate:0 -2px}
 .full-case-page .case-cta::after{content:'↗'}

 /* Demonstration video: our own four controls, no native bar. */
 .case-video{position:relative;display:grid;gap:12px}
 .case-video video{width:100%;border-radius:var(--radius);cursor:pointer}
 .case-video video:focus-visible{outline:2px solid var(--ring);outline-offset:4px}
 .case-video-controls{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
 .case-video-button{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--foreground)}
 .case-video-button:hover{border-color:var(--foreground)}
 .case-video-button:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
 .case-video-icon{width:20px;height:20px}
 .case-video-icon--pause,.case-video-icon--sound-on{display:none}
 .case-video[data-playing=true] .case-video-icon--play{display:none}
 .case-video[data-playing=true] .case-video-icon--pause{display:block}
 .case-video[data-muted=false] .case-video-icon--sound-off{display:none}
 .case-video[data-muted=false] .case-video-icon--sound-on{display:block}
 .case-video-seek{flex:1;min-width:0;height:40px;accent-color:var(--foreground);cursor:ew-resize}
 .case-video-time{flex:none;font-size:13px;color:var(--muted-foreground);font-variant-numeric:lining-nums tabular-nums}

 /* Comparison and gallery hints: one handle, one chevron, said once. */
 .case-section .wipe{cursor:ew-resize}
 .case-image .image-link{position:relative}
 .case-image .image-link::after{content:'⤢';position:absolute;right:10px;bottom:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--background);color:var(--foreground);font-size:14px;opacity:0;transition:opacity 160ms ease}
 .case-image .image-link:hover::after,.case-image .image-link:focus-visible::after{opacity:.92}

 @media(max-width:1000px){
  .case-layout{display:block}
  .case-toc{position:sticky;top:var(--header-h,80px);z-index:30;margin-inline:calc(var(--page-inset)*-1);padding:12px var(--page-inset);background:var(--background);border-bottom:1px solid var(--border);overflow-x:auto;overscroll-behavior-x:contain}
  .case-toc-title{display:none}
  .case-toc ol{display:flex;gap:8px;width:max-content}
  .case-toc-item>a{padding:8px 14px;border:1px solid var(--border);border-left-width:1px;border-radius:999px;white-space:nowrap;min-height:40px;display:flex;align-items:center}
  .case-toc-item>a.is-current{border-color:var(--foreground);background:var(--foreground);color:var(--background)}
  .case-toc-item--stage>a{margin-top:0}
  .case-pager-link--next{text-align:left}
  .case-pager-link--next .case-pager-role{justify-content:flex-start}
 }
}

@layer components {
 /* Two confirmed results, side by side, both read from the config. */
 .case-headline-metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:32px 64px}
 .case-headline-metric{display:grid;gap:8px;justify-items:center}
 @media(max-width:600px){.case-headline-metrics{gap:24px 32px}}
}