/* ============================================================ TOKENS */
:root{
  --paper:#ffffff;
  --card:#ffffff;
  --placeholder:#f2f2f2;
  --ink:#26251d;               /* every bit of text on the site: no pure black anywhere */
  --ink-soft:#26251d;
  --muted:#696969;
  --caption:#8e8e8e;           /* captions under figures: a step lighter than --muted */
  --caption-faint:#b6b6b6;     /* labels sitting inside a figure, quieter still (Figma 898:83191) */
  --line:#d5d5d5;
  --dark:#121214;
  --case-ink:var(--ink);       /* kept as a name: body copy on the cases and the about page */
  --font:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container:1128px;
  --case-w:900px;
  --col-w:640px;
  --pad:clamp(20px,5vw,40px);
  --case-inset:clamp(0px,3vw,40px);
}

/* ============================================================ BASE */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior-x:none;scroll-padding-top:64px;background:#fff}
/* the bottom overscroll (rubber-band) shows the root background: dark like the footer once the
   footer is reached (case.js sets .at-bottom). Only html turns dark -- body keeps painting white
   behind the content column, its side margins and the gap above the footer. */
html.at-bottom{background:var(--dark)}
body{
  background:#fff;color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior-x:none;
  /* clip, not hidden: hidden would make body its own scroll container, and a sticky element
     inside a container that never scrolls simply never sticks. clip still trims the half
     scrollbar a 100vw full-bleed child overhangs by, without creating that scrollport. */
  overflow-x:clip;
  padding-top:64px;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:rgba(0,0,0,.08)}
:focus-visible{outline:2px solid var(--ink-soft);outline-offset:3px;border-radius:4px}

.container{width:var(--container);max-width:calc(100% - 2*var(--pad));margin-inline:auto}

/* arrow icon */
.arr{width:20px;height:20px;flex:none}
.arr svg{width:100%;height:100%;display:block}

/* pill button */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:6px 20px;border-radius:100px;
  background:#fff;border:.5px solid var(--line);
  font-size:16px;line-height:26px;font-weight:500;color:var(--ink-soft);white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.pill:hover{background:#fafafa;border-color:#b9b9b9;transform:translateY(-1px)}
.pill .arr{transition:transform .18s ease}
.pill:hover .arr{transform:translate(2px,-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ============================================================ HEADER */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--paper);
  border-bottom:.5px solid var(--line);
}
/* While a full-bleed block has taken over the screen, the bar joins it rather than floating as a
   white strip on top. The overlay stops at the padding box, which leaves the hairline border
   showing: an absolutely positioned child is laid out against that box, and the border sits
   outside it. The container is lifted above the overlay so the wordmark and nav stay legible. */
.site-header::after{
  content:"";position:absolute;inset:0;
  background:var(--placeholder);
  opacity:var(--reel-head,0);
  pointer-events:none;
}
.site-header .container{position:relative;z-index:1}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:64px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__avatar{display:none;width:36px;height:36px;border-radius:1000px;object-fit:cover;background:#fff;flex:none}   /* hidden for now: drop display:none to bring the avatar back */
.brand__name{font-size:16px;font-weight:700;line-height:22px;color:var(--ink-soft)}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-size:16px;font-weight:600;line-height:22px;color:var(--ink-soft);transition:opacity .18s ease}
.nav a:hover{opacity:.55}

/* burger + mobile menu */
.burger{display:none}
.menu{display:none}
.menu__close{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center;color:var(--ink-soft);flex:none}

/* ============================================================ CASE PAGE */
.case-page{
  width:var(--case-w);
  max-width:calc(100% - 2*var(--pad));
  margin-inline:auto;
  padding-top:clamp(140px,18vw,300px);   /* big intentional top space (per Figma template) */
}

/* two-column layout shared by intro + sections: flexible label | fixed 640 content */
.case-intro,.case-row{
  display:flex;align-items:flex-start;
  gap:clamp(24px,4vw,56px);
}
.case-intro{padding-inline:var(--case-inset)}   /* rows get their inset from .case-sections */

/* intro: year | title + subtitle */
.case-year{font-size:20px;font-weight:600;line-height:1.4;color:var(--ink);flex:1 1 0;min-width:0;padding-top:6px}
.case-titleblock{flex:0 0 var(--col-w);min-width:0;display:flex;flex-direction:column;gap:12px}
.case-title{font-size:clamp(32px,4.25vw,40px);font-weight:600;line-height:1.32;letter-spacing:-0.005em;color:var(--ink);text-wrap:balance}
.case-subtitle{font-size:20px;font-weight:400;line-height:1.5;color:var(--ink);text-wrap:pretty}

/* hero cover */
.case-cover{
  width:100%;aspect-ratio:3/2;
  background:var(--placeholder);border-radius:24px;overflow:hidden;
  margin-top:clamp(28px,4vw,40px);
  user-select:none;-webkit-user-select:none;
}
.case-cover img,.case-cover video{display:block;width:100%;height:100%;object-fit:cover}
.case-cover--ph{display:grid;place-items:center}
.case-cover--ph span{font-family:var(--font);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a8a8a4}

/* sections: label | content(640) */
.case-sections{
  display:flex;flex-direction:column;gap:clamp(48px,8vw,88px);
  padding-inline:var(--case-inset);
  padding-top:clamp(48px,8vw,88px);
  padding-bottom:clamp(64px,10vw,120px);
}
.case-row{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.case-label{font-size:20px;font-weight:700;line-height:1.35;color:var(--ink);flex:1 1 0;min-width:0;text-wrap:balance}
.case-content{flex:0 0 var(--col-w);min-width:0;display:flex;flex-direction:column;gap:16px;font-size:18px;line-height:29px;color:var(--ink)}
.case-content p{text-wrap:pretty}

/* what-i-did steps */
.case-content--steps{gap:clamp(40px,5vw,56px)}
.case-step{display:flex;flex-direction:column;gap:12px}
.case-step__title{font-size:18px;font-weight:600;line-height:26px;color:var(--ink)}
.case-step__body{display:flex;flex-direction:column;gap:16px;font-size:18px;line-height:29px}

/* image placeholder inside the content column (visuals come later) */
.case-fig{width:100%;display:flex;flex-direction:column;gap:10px}
.case-fig__box{aspect-ratio:16/10;background:var(--placeholder);border-radius:12px;display:grid;place-items:center}
.case-fig__box span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a8a8a4}
.case-fig__cap{font-size:14px;line-height:20px;color:var(--muted)}

/* callout / infographic block (real data / captions) */
.case-note{
  width:100%;
  background:var(--placeholder);border-radius:12px;
  padding:24px 28px;
  font-size:15px;line-height:24px;color:var(--muted);
}
.case-note b{color:var(--ink);font-weight:600}
.case-note ul{margin:8px 0 0;padding-left:18px}
.case-note li{margin-top:4px}
.case-note .case-note__k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a8a8a4;display:block;margin-bottom:10px}


/* ============================================================ SINGLE-COLUMN CASE
   The case format from Figma 705:76947 (a 1728 frame), used by every case page: no year and no
   side labels -- the title, the 900 cover and a centred 600 text column, section headings
   sitting above their copy, all text in one warm near-black. A modifier over the two-column
   classes above. */
.case-page--single{padding-top:clamp(140px,18.06vw,312px)}   /* 312 under the header at 1728, scaled down on smaller screens */
.case-page--single .case-titleblock{width:var(--col-w);max-width:100%;margin-inline:auto}
.case-page--single .case-title{line-height:1.3;color:var(--case-ink)}   /* 52 at the full 40 */
.case-page--single .case-subtitle{line-height:30px;color:var(--case-ink)}
.case-page--single .case-cover{margin-top:72px}
.case-page--single .case-sections{
  width:600px;max-width:100%;margin-inline:auto;
  padding-inline:0;padding-top:152px;gap:120px;
}
.case-page--single .case-row{flex-direction:column;gap:24px}
.case-page--single .case-label{flex:none;font-size:22px;line-height:27px;color:var(--case-ink)}
.case-page--single .case-heading{display:flex;flex-direction:column;gap:4px}             /* an overline over a section heading (Figma 708:77001) */
.case-page--single .case-kicker{font-size:16px;font-weight:700;line-height:25px;color:#adadad}
.case-page--single .case-content{flex:none;width:100%;gap:25px;font-size:16px;line-height:25px;color:var(--case-ink)}   /* 25 between paragraphs: one empty 25px line in Figma */
.case-page--single .case-content strong{font-weight:700}
/* bulleted list inside the copy (Figma 728:24630): 24 in from the column, 12 between items,
   each opening on a bold phrase -- everything else reads like the rest of the column */
.case-page--single .case-list{padding-left:24px;list-style:disc}
.case-page--single .case-list li+li{margin-top:12px}
/* steps inside a section (One Interface): a sub-heading over copy that reads exactly like the
   rest of the column -- same size, colour and paragraph rhythm */
.case-page--single .case-content--steps{gap:40px}
.case-page--single .case-step{gap:8px}
.case-page--single .case-step__title{font-size:18px;font-weight:700;line-height:25px;color:var(--case-ink)}
.case-page--single .case-step__body{gap:25px;font-size:inherit;line-height:inherit}

/* pull quote inside the copy (Figma 705:76986): a thin bar in the text colour that runs the
   height of the line, inset 4px top and bottom, then the line in Bold 20. It repeats a sentence
   from the copy, so it is aria-hidden in the markup. 48 above and below = the 25 gap + 23. */
.case-pullquote{display:flex;gap:20px;padding-inline:8px;margin-block:23px}
.case-pullquote::before{content:"";flex:none;width:4px;margin-block:4px;background:currentColor;border-radius:1px}
.case-pullquote p{max-width:566px;font-size:20px;font-weight:700;line-height:normal;text-wrap:balance}

/* ============================================================ ABOUT PAGE
   Figma 789:24620: one 600 column pinned to the left edge of the container (where the header
   name starts), 120 between blocks, the same type, colour and rhythm as the cases. */
.about-page{
  width:var(--container);max-width:calc(100% - 2*var(--pad));margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:120px;
  padding-top:clamp(72px,12vw,178px);        /* 178 under the header at 1728, as on the home page */
  padding-bottom:clamp(80px,10vw,120px);
  color:var(--case-ink);
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.about-block{width:600px;max-width:100%;display:flex;flex-direction:column;gap:24px}
.about-label{font-size:22px;font-weight:700;line-height:27px;color:var(--case-ink)}
.about-content{display:flex;flex-direction:column;gap:25px;font-size:16px;line-height:25px}
.about-content p{text-wrap:pretty}
.about-photo{width:600px;max-width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--placeholder);
  margin-top:-48px}   /* the photo sits 72 under the first block, the rest of the column keeps its 120 */
.about-photo img{width:100%;height:100%;object-fit:cover}

/* experience: the company and the years on one line, the role under them */
.about-block--exp{gap:32px}
.exp{list-style:none;display:flex;flex-direction:column;gap:24px}
.exp__item{display:flex;flex-direction:column;gap:4px}
.exp__row{display:flex;justify-content:space-between;gap:24px;font-size:18px;font-weight:600;line-height:25px}
.exp__years{white-space:nowrap}
.exp__role{font-size:16px;line-height:25px;color:#7d7d7d}

/* ============================================================ FOOTER */
.footer{background:var(--dark);color:#fff;margin-top:clamp(40px,7vw,72px)}
.footer .container{
  display:flex;flex-direction:column;gap:40px;align-items:flex-start;
  padding-top:clamp(72px,9.18vw,158.5px);padding-bottom:clamp(72px,9.18vw,158.5px);   /* Figma 1171:180188, squeezed to 600 */
}
.footer__title{font-size:clamp(30px,5vw,48px);font-weight:600;line-height:normal;letter-spacing:-0.01em;color:#fff}

/* ============================================================ RESPONSIVE */
@media (max-width:820px){
  .nav{display:none}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:44px;height:44px;margin-right:-10px;flex:none;
  }
  .burger span{display:block;width:22px;height:1.5px;background:var(--ink-soft);margin-left:auto;border-radius:2px}

  .menu{
    display:flex;flex-direction:column;
    position:fixed;inset:0;z-index:100;background:var(--paper);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .menu[hidden]{display:none}
  .menu.is-open{opacity:1;visibility:visible;transform:none}
  .menu__bar{display:flex;align-items:center;justify-content:space-between;height:64px;flex:none}
  .menu__nav{display:flex;flex-direction:column;padding-top:24px}
  .menu__nav a{
    font-size:32px;font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:var(--ink-soft);
    padding:16px 0;border-bottom:.5px solid var(--line);
  }
  .menu__nav a:first-child{border-top:.5px solid var(--line)}

  /* smaller top space on mobile */
  .case-page{padding-top:clamp(36px,9vw,64px)}
  /* stack the two-column rows into one column */
  .case-intro,.case-row{flex-direction:column;gap:14px}
  .case-year{padding-top:0}
  .case-year,.case-label,.case-titleblock,.case-content,.case-note{flex:none;width:100%}
  .case-title{font-size:clamp(28px,7vw,34px)}
  .case-subtitle{font-size:18px;line-height:1.5}

  /* single-column case: the desktop spacing, tightened for a phone (copy stays 16/25) */
  .case-page--single .case-cover{margin-top:clamp(28px,6vw,40px)}
  .case-page--single .case-sections{padding-top:72px;gap:72px}
  .case-page--single .case-row{gap:16px}
  .case-page--single .case-label{font-size:20px;line-height:26px}
  .case-page--single .case-content{gap:20px}
  .case-page--single .case-content--steps{gap:32px}
  .case-page--single .case-step__body{gap:20px}
  .case-pullquote{gap:14px;padding-inline:0;margin-block:12px}
  .case-pullquote p{font-size:18px}
  .pq-br{display:none}                                              /* the designed break only fits the 566 desktop line */

  /* about page: same blocks, tighter rhythm */
  .about-page{gap:72px}
  .about-photo{margin-top:-24px}   /* 48 under the first block on a phone */
  .about-label{font-size:20px;line-height:26px}
  .about-content{gap:20px}
  .about-block--exp{gap:24px}
  .exp{gap:20px}
  .exp__row{flex-wrap:wrap;gap:2px 16px;font-size:17px}

  /* footer */
  .footer__title{font-size:clamp(32px,8.5vw,42px);line-height:1.15;letter-spacing:-0.02em}
  .footer .container{padding-top:72px;padding-bottom:72px}
  .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pill{width:100%}
}

/* ============================================================ WEB / APP PAIR
   Two screenshots set against each other in a placeholder box, with a not-equal between them
   (Figma 952:225956). The block runs 900 wide -- half again the 600 text column -- so it reaches
   past the text on both sides and is pulled back onto its centre with a negative margin.
   At 900 that holds two 277 columns 24 apart either side of a 32 badge, 635 of content centred
   in the box; the side padding is there to keep it breathing on a phone, not to place it. */
/* The result in two cards (Figma 1035:242481): a number over what it measures at the top, the
   line that qualifies it pinned to the bottom. Two of them fill the 600 column 12 apart, which
   is the 294 the mock draws. The basis is what makes them stack on a phone -- below ~490 of
   column there is no honest way to set 40px figures side by side -- so no breakpoint is
   needed for it. */
.case-stats{display:flex;flex-wrap:wrap;gap:12px}
.case-stat{
  flex:1 1 240px;min-width:0;min-height:210px;
  display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  padding:16px 24px;border-radius:16px;background:#f2f2f2;
}
.case-stat__num{font-size:40px;font-weight:700;line-height:55px}
.case-stat__of{font-size:16px;font-weight:700;line-height:25px}
.case-stat__note{font-size:16px;font-weight:500;line-height:25px}
/* stacked on a phone, the 210 the mock gives a card is mostly air, and the 48 that keeps the
   qualifier at the foot of a tall card has nothing left to push against */
@media (max-width:820px){
  .case-stat{min-height:0;gap:24px}
}

/* the banner builder: 900 x 652 in the mock, so it breaks out of the 600 text column the same
   way .case-pair does. It is interactive, so unlike the cover its iframe keeps its pointers. */
.case-builder{
  --cb-w:min(900px, calc(100vw - 32px));
  width:var(--cb-w);
  margin-inline:calc((100% - var(--cb-w)) / 2);
  margin-top:-48px;                   /* the column hands out 120; the design wants 72 */
  aspect-ratio:900/652;
  border-radius:16px;overflow:hidden;background:#f2f2f2;
}
.case-builder iframe{display:block;width:100%;height:100%;border:0}

/* THE SCREEN AS IT STOOD (Figma 1117:181923)
   One production screenshot on a grey card the width of the text column: 350 of screen centred
   in 600, 64 of grey above and below. Unlike the concept's band this one stays inside the
   column, so it needs no bleed -- only the card.
   Named .case-frame, not .case-shot or .case-screen: the first is the before/after box further
   up this file, and the second is one letter from .case-screens right below. */
.case-frame{
  margin-top:23px;                      /* the column hands out 25 between blocks; this is 48 */
  padding-block:64px;
  display:flex;justify-content:center;
  border-radius:16px;background:var(--placeholder);
}
.case-frame img{
  display:block;width:min(350px, calc(100% - 32px));height:auto;
  aspect-ratio:350/757;object-fit:cover;
  border-radius:5.334% / 2.466%;        /* the mock's 18.67, kept true at any width */
}
@media (max-width:820px){
  /* the column hands out 20 on a phone, and a narrower card does not need 64 of grey */
  .case-frame{margin-top:28px;padding-block:32px}
}

/* THE CONCEPT IN THREE SCREENS (Figma 1109:178989 / 1107:243509)
   A full-bleed grey band with the three home screens standing in a row. Every measure is a share
   of one screen -- the same 350 the reel uses -- so the band scales as one thing: 56 between the
   screens, 92 above and below. The divisor is what the row needs of the page: three screens, two
   gaps of .16, and 16 to spare either side. */
.case-screens{
  --scr:min(350px, calc((100vw - 32px) / 3.32));
  flex:none;
  position:relative;left:calc(50% - 50vw);width:100vw;   /* out of the 600 column, edge to edge */
  margin-top:-64px;                                      /* the column hands out 120: this is 56 */
  display:flex;justify-content:center;align-items:flex-start;
  gap:calc(var(--scr) * .16);
  padding-block:calc(var(--scr) * .2629);
  background:var(--placeholder);
  overflow:hidden;
}
.case-screens img{
  flex:none;display:block;width:var(--scr);height:auto;
  aspect-ratio:375/812;object-fit:cover;
  /* exported with the device corner already cut against the band's grey; the same two
     percentages the reel uses keep it a true 18.67 at whatever width the screen lands on */
  border-radius:5.333% / 2.463%;
}
@media (max-width:820px){
  /* three abreast on a phone would be 108 wide, which is nothing to look at. The band becomes a
     strip that can be pushed sideways instead, the screens kept at a size worth reading. */
  .case-screens{
    --scr:min(350px, 62vw);
    margin-top:-16px;                                    /* the column hands out 72: still 56 */
    justify-content:flex-start;
    padding-inline:16px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .case-screens::-webkit-scrollbar{display:none}
  .case-screens img{scroll-snap-align:center}
}

.case-pair{
  --pair-w:min(900px, calc(100vw - 32px));
  width:var(--pair-w);
  margin-inline:calc((100% - var(--pair-w)) / 2);   /* 100% is the text column, so this is -150 */
  margin-top:-72px;                   /* the column hands out 120 between blocks; the design wants 48 */
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.case-pair__box{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:24px;
  padding:7.111% clamp(16px,4%,40px); /* 7.111% of the 900 block is the designed 64 above and below */
  background:var(--placeholder);border-radius:24px;overflow:hidden;
}
.case-pair__col{
  flex:1 1 0;min-width:0;max-width:277px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
/* centred on the pair as a whole, label included, not on the shots. Drawn in a 48 viewBox, so
   at 32 the strokes come down with it rather than staying heavy. */
.case-pair__eq{flex:none;display:block;width:32px;height:32px}
.case-pair__label{
  display:flex;align-items:center;gap:12px;
  font-size:16px;font-weight:500;line-height:normal;color:#939393;white-space:nowrap;
}
.case-pair__label img{width:32px;height:32px;flex:none}
.case-pair__icons{display:flex;align-items:center;gap:4px}
/* one ratio for both shots: their own differ by a hair (750/1624 against 284/614) and that
   would leave the two columns ending a pixel apart */
/* height:auto is load-bearing: the markup carries width/height attributes so the browser can
   reserve the space before the file arrives, and that height becomes a real CSS height, which
   aspect-ratio cannot override -- the shots came out 1624 tall until this line existed */
.case-pair__shot{
  display:block;width:100%;height:auto;
  aspect-ratio:277/600;object-fit:cover;
  /* 6.5 on a 277-wide shot. Two percentages, horizontal / vertical: one alone resolves against
     width and height separately and would bend the corner into an ellipse. */
  border-radius:2.347% / 1.083%;
}
.case-pair__cap{
  width:100%;
  font-size:16px;line-height:25px;text-align:center;text-wrap:pretty;
  color:var(--caption);
}
/* this section sits after the phone block above, so its own override has to live here */
@media (max-width:820px){
  .case-pair{margin-top:-24px}        /* the phone column hands out 72, so this lands on 48 too */
  .case-pair__box{gap:12px}
  .case-pair__eq{width:24px;height:24px}
  .case-pair__label{font-size:14px;gap:8px}
  .case-pair__label img{width:24px;height:24px}
}

/* ============================================================ BEFORE / AFTER SHOT
   A pair of screenshots compared inside a placeholder box (Figma 844:128186): a 600x834 grey
   box, a 341x738 shot centred in it, the divider running 48 past the shot top and bottom.
   The slider's percentages have to run in the SAME box as the images, or the divider and the
   cut would drift apart towards the ends -- so .compare is sized to the shot itself, and the
   divider is the thing that overflows. Percentages keep all of it scaling with the column. */
.case-shot{
  width:100%;
  margin-top:-72px;                   /* the column hands out 120 between blocks; the design wants 48 here */
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
/* An illustration between two paragraphs: the column hands out 25, the design wants 40 above
   and 48 below, so the difference rides on the figure itself. The mark ships flattened
   (Figma 859:54177) at 2x for its 291 slot.
   Named .case-mark, not .case-fig: that name is already taken further up by the old image
   placeholder component, and two rules under one name in one file is a trap. */
.case-mark{
  align-self:center;
  width:291px;max-width:100%;
  margin-top:15px;margin-bottom:23px;
}
.case-mark img{display:block;width:100%;height:auto}

/* Metric cards in the Result block (Figma 860:54204): two across, then one full width.
   The column hands out 25 around it, the design wants 40, so the difference rides on the group.
   Figma pins the first card's inner column to 176 and its number to 101; those are hand-set
   widths in the mock, so here every card just shares the row instead. */
.case-metrics{
  display:flex;flex-direction:column;gap:12px;
  margin-top:15px;margin-bottom:15px;
}
.case-metrics__row{display:flex;gap:12px}
.metric{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:48px;
  padding:16px 24px;
  background:var(--placeholder);border-radius:16px;
}
.metric__head{display:flex;flex-direction:column}      /* number and its label sit tight together */
.metric__value{font-size:40px;font-weight:700;line-height:normal}
.metric__label{font-size:16px;font-weight:700;line-height:25px}
.metric__note{font-size:16px;font-weight:500;line-height:25px}

/* this section sits after the phone block above, so its own override has to live here */
@media (max-width:820px){
  .case-metrics__row{flex-direction:column}            /* two cards side by side get too narrow for the labels */
  .metric{gap:32px}
}

.case-shot__cap{
  width:100%;
  font-size:16px;line-height:25px;text-align:center;text-wrap:pretty;
  color:var(--caption);
}
.case-shot .compare{
  --compare-ratio:600/710;            /* the slider IS the grey box, so the divider can reach its edges */
  --compare-radius:16px;
  background:var(--placeholder);
}
/* the shots sit inset in the box: 48 above and below, centred across. The divider spans the box,
   so its overhang past the shots comes out of the geometry instead of an override. */
.case-shot .compare__img{
  top:6.761%;height:86.479%;          /* 48 and 614 of the 710 box */
  left:50%;transform:translateX(-50%);
  right:auto;bottom:auto;
  width:auto;aspect-ratio:283.559/614;
  border-radius:6.65px;
}
/* this section sits after the phone block above, so its own override has to live here */
@media (max-width:820px){
  .case-shot{margin-top:-24px}        /* the phone column hands out 72, so this lands on 48 too */
}

/* ============================================================ SCREEN COMPARE (Figma 898:83193)
   The before/after slider again, now with a chip row choosing which pair of screens it holds.
   Same box treatment as .case-shot above, at the larger 600x834 the mock came back to.
   The chips only swap the two <img> sources; they never touch compare.js. That is what keeps the
   intro honest -- compare.js plays it once when the block scrolls in, then disconnects, so no
   chip switch can replay it. */
.case-slider{
  width:100%;
  margin-top:-64px;                   /* the column hands out 120 between blocks; the design wants 56 above */
  margin-bottom:-72px;                /* and 48 below */
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
/* Standing inside a text block instead of between sections, it is spaced like the other figures
   there: that column hands out 25, and the difference rides on the figure to reach 40. */
.case-content > .case-slider{margin-top:15px;margin-bottom:15px}
.case-slider__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.case-slider__chip{
  flex:none;height:40px;padding:4px 16px;
  display:flex;align-items:center;
  font:inherit;font-size:16px;font-weight:600;line-height:22px;letter-spacing:-.16px;
  color:#1d1d1d;white-space:nowrap;cursor:pointer;
  background:var(--placeholder);
  border:0;border-radius:100px;
  -webkit-tap-highlight-color:transparent;
}
/* An inset shadow, not a border: it paints on the same edge but takes no layout width, so a
   chip is the same size selected or not -- and the row measures what the mock measures. */
.case-slider__chip[aria-selected="true"]{box-shadow:inset 0 0 0 2px #1d1d1d}
.case-slider .compare{
  --compare-ratio:600/789;            /* the slider IS the grey box, so the divider can reach its edges */
  --compare-radius:16px;
  background:var(--placeholder);
}
/* The shots sit inset in the box: 48 above and below, centred across. The divider spans the box,
   so its overhang past the shots falls out of the geometry instead of needing an override. */
.case-slider .compare__img{
  top:6.084%;height:87.776%;          /* 48 and 692.55 of the 789 box */
  left:50%;transform:translateX(-50%);
  right:auto;bottom:auto;
  width:auto;aspect-ratio:320/692.55;
  /* The shots export square, so the device corner is ours to draw -- 7.507 on a 320-wide shot.
     Given as two percentages, horizontal / vertical, because a single percentage would resolve
     against width and height separately and bend the corner into an ellipse. These two track the
     same aspect-ratio, so the corner stays circular at every size the column hands out. */
  border-radius:2.346% / 1.084%;
}
/* BEFORE / AFTER, one in each gutter beside the shot (Figma 898:83191).
   Each label belongs to the layer it names, so the divider has to wipe it exactly as it wipes
   that shot -- including cutting through the word mid-sweep. To make the percentages line up
   with the divider, the label spans the whole box and its own clip-path mirrors .compare__clip;
   the word is then parked in the gutter by the inner span. */
.case-slider .compare__side{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;
  font-size:16px;font-weight:600;line-height:22px;letter-spacing:-.16px;
  text-transform:uppercase;           /* set in caps in the mock; done here so the word stays a word
                                         for a screen reader rather than six spelled-out letters */
  color:var(--caption-faint);
  pointer-events:none;                /* never in the way of a drag */
}
.case-slider .compare__side>span{
  width:23.333%;                      /* (600 - 320) / 2 of the box: the gutter beside the shot */
  text-align:center;
}
.case-slider .compare__side--before{justify-content:flex-start;clip-path:inset(0 calc(100% - var(--compare-pos)) 0 0)}
.case-slider .compare__side--after {justify-content:flex-end;  clip-path:inset(0 0 0 var(--compare-pos))}
/* the same easing .compare__clip gets, so label and shot travel as one */
.case-slider .compare:not(.is-dragging):not(.is-playing) .compare__side{transition:clip-path .18s ease}

/* this section sits after the phone block above, so its own override has to live here */
@media (max-width:820px){
  .case-slider{margin-top:-16px;margin-bottom:-40px}   /* the phone column hands out 72: 56 above, 32 below */
  .case-slider__chips{gap:8px}
  .case-slider__chip{height:36px;padding:4px 12px;font-size:14px;letter-spacing:-.14px}
  .case-slider .compare__side{font-size:13px;letter-spacing:-.13px}   /* the gutter narrows with the box */
}

/* ============================================================ SCREEN REEL (Figma 919:167110)
   A full-bleed ribbon of phone screens that travels sideways while the block is pinned to the
   screen. The band sticks once it reaches the middle of the viewport, the ribbon runs for
   --reel-run of scrolling, then the band lets go and the page carries on. Pinning is what makes
   the pace ours to choose: without it the run is stuck at one viewport height, which on a laptop
   is far less than the ribbon has to travel. case-reel.js reads the position; it listens for no
   wheel or touch, so the ribbon can never be dragged by hand.

   Every measurement comes off one screen width, so the whole block scales as a single thing. */
.case-reel{
  /* The screens run just under their own size, 350 wide, wherever there is room for them. The two
     other terms are guards, not a scale: the band is two and a half screen widths tall, so
     38vh is what keeps it inside a short window, and 80vw what keeps it inside a narrow one.
     At 350 the band stands 893 tall, which on a 1000-tall window still leaves the grey about
     53px to open into at each end -- tight, but two and a half times what 375 left it. */
  --reel-screen:min(350px,38vh,80vw);
  --reel-gap:calc(var(--reel-screen)*.0987);  /* 24.48 of 248.15 */
  --reel-pad:calc(var(--reel-screen)*.1934);  /* 48 above and below the screens */
  --reel-lead:clamp(24px,32.64vw,564px);      /* 564 of 1728: the lead-in, mirrored at the far end,
                                                 which is what centres the ribbon at half travel */
  --reel-band:calc(var(--reel-screen)*2.5522);/* one screen tall plus both paddings: 634 at 1728 */

  /* Pace, and the cap on it. Pace sets the pinned stretch to the ribbon's travel times itself;
     --reel-hold is the most scrolling the page may ever spend pinned. The cap is the important
     one: a pinned block is scrolling the reader cannot steer, and past about a screenful that
     stops reading as a flourish and starts reading as a barrier between two paragraphs.
     The ribbon also starts before the pin -- as soon as the whole block is in view -- so part of
     its travel is spent while the page still moves normally. */
  --reel-pace:1.25;
  --reel-hold:100vh;
  /* The ribbon's travel, in CSS: eight screens, seven gaps, both end insets, less the page.
     Kept here rather than in script so the block reserves its height before anything runs. */
  --reel-run:clamp(0px, calc(var(--reel-pace) *
             (var(--reel-screen)*8.6909 + var(--reel-lead)*2 - 100vw)), var(--reel-hold));

  flex:none;                                  /* a column flex item must not shrink its own height */
  margin-top:-8px;margin-bottom:-24px;        /* the column hands out 120; this lands on 112 / 96 */
  height:calc(var(--reel-band) + var(--reel-run));
}
.case-reel__pin{
  position:sticky;
  top:calc(50vh - var(--reel-band)/2);        /* the band rides centred while it is pinned */
  top:calc(50svh - var(--reel-band)/2);       /* svh where it exists: steady under a mobile URL bar */
  height:var(--reel-band);
}
/* The grey is its own layer so it can reach past the band without moving anything. While the
   block is pinned the text has left the screen above and below, so the grey stretches to fill
   the whole viewport and lets go again on the way out. It grows at exactly the scroll rate --
   see --reel-grow in case-reel.js -- so its edge holds still against the text as that text
   leaves, rather than racing it or covering it. */
.case-reel__bg{
  position:absolute;z-index:0;
  top:calc(-1 * var(--reel-grow,0px));
  bottom:calc(-1 * var(--reel-grow,0px));
  /* Full bleed out of the 600 column. 100vw counts the scrollbar where 50% does not, so this
     overhangs by half a scrollbar each side; body clips it, and because the overhang is
     symmetric the two end insets stay equal. */
  left:calc(50% - 50vw);width:100vw;
  background:var(--placeholder);
}
.case-reel__win{
  position:relative;z-index:1;              /* the ribbon rides over the grey */
  height:100%;
  left:calc(50% - 50vw);width:100vw;
  padding-block:var(--reel-pad);
  overflow:hidden;                            /* the track is wider than the page, by design */
}
.case-reel__track{
  display:flex;align-items:flex-start;gap:var(--reel-gap);
  width:max-content;
  padding-inline:var(--reel-lead);            /* both end insets ride on the track, so the travel
                                                 is simply trackWidth - pageWidth */
  will-change:transform;
}
.case-reel__shot{
  flex:none;display:block;
  width:var(--reel-screen);height:auto;
  aspect-ratio:375/812;object-fit:cover;
  /* The screens export square-cornered -- their corner pixels come back fully opaque -- so the
     device corner is ours to draw. Two percentages, horizontal / vertical: a single one resolves
     against width and height separately and would bend the corner into an ellipse. */
  border-radius:5.333% / 2.463%;
  -webkit-user-drag:none;user-select:none;
}
/* Reduced motion: no pinned run at all. The block collapses to the band and the ribbon sits at
   half travel, which is the composition the mock centres on. */
.case-reel.is-static{height:auto}
.case-reel.is-static .case-reel__pin{position:static}

/* this section sits after the phone block above, so its own override has to live here */
@media (max-width:820px){
  .case-reel{margin-top:40px;margin-bottom:-8px}     /* the phone column hands out 72: 112 / 64 */
}

/* ============================================================ WHERE TO NEXT (Figma 1201:207714)
   The two cases either side of this one, at the foot of every case page: the cover, then the
   label and the case's own title under it. Two 422 cards with 56 between them -- the 900 the
   cover at the top of the page uses -- and each card carries the same live cover the home page
   gives it, so the pair reads as the work rather than as navigation. */
.case-more{
  display:flex;align-items:flex-start;gap:56px;
  /* 200 of air either side. The text column above ends with a padding of its own, so what is
     added here is the rest of the 200 -- the same expression, so the two stay in step. */
  margin-top:calc(200px - clamp(64px,10vw,120px));
  /* 200 clear of the footer, the same as the last case card on the home page. The footer's own
     top margin is adjacent to this one, so the two collapse to the larger rather than adding up:
     200 is the whole gap, at every width. */
  margin-bottom:200px;
}
.case-more__card{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:24px;
}
.case-more__media{
  width:100%;aspect-ratio:3/2;
  background:var(--placeholder);border-radius:16px;overflow:hidden;
  user-select:none;-webkit-user-select:none;
  transition:box-shadow .25s ease,transform .25s ease;
}
/* whatever the cover is -- an iframe, a video, an svg -- it fills the card and lets the click
   through to the link wrapped around it */
.case-more__media>*{display:block;width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}
.case-more__text{display:flex;flex-direction:column;gap:4px;padding-inline:12px}
.case-more__kicker{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;line-height:25px;color:#adadad;
}
.case-more__arr{flex:none;width:20px;height:20px;fill:currentColor;transition:transform .25s ease}
/* the card that points back is set from the left edge, the one that points on from the right,
   so the two arrows sit at the outer ends of the pair and face the way they lead */
.case-more__card--next .case-more__text{align-items:flex-end;text-align:right}
a.case-more__card:hover .case-more__arr{transform:translateX(-3px)}
a.case-more__card--next:hover .case-more__arr{transform:translateX(3px)}
.case-more__title{font-size:22px;font-weight:700;line-height:27px;color:var(--case-ink);word-break:break-word}
/* the same lift the case cards on the home page answer a pointer with */
a.case-more__card:hover .case-more__media{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.16)}
@media (max-width:620px){
  /* side by side the cards would be 150 wide, which is no cover and no title. Stacked, the
     cross axis is the width, so they take the column rather than their own content's width. */
  .case-more{flex-direction:column;align-items:stretch;gap:40px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}