/* ============================================================
   CASE STUDY — shared stylesheet for /work/*.html
   Tokens intentionally mirror index.html so the two feel identical.
   ============================================================ */
:root{
  --bg:            #ececea;
  --ink:           #101010;
  --ink-2:         #8f8f8d;
  --ink-3:         #b4b4b1;
  --rule:          #d6d6d3;

  --font: "Figtree", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --r-md: 16px;
  --r-lg: 24px;

  --gutter: clamp(20px, 4.2vw, 104px);
  --sec:    clamp(64px, 9vw, 140px);
  --maxw:   2800px;

  --t-hero:  clamp(2.5rem, 7.2vw, 9.4rem);
  --t-stat:  clamp(2rem, 3.7vw, 4.6rem);
  --t-body:  clamp(0.95rem, 1.12vw, 1.42rem);
  --t-micro: clamp(0.82rem, 0.92vw, 1.12rem);

  /* shared gridline — mirrors index.html so both page types align */
  --col-gap:    clamp(28px, 5vw, 90px);
  --bio-w:      1640px;
  --bio-block:  min(100%, var(--bio-w));
  --bio-inset:  calc((100% - var(--bio-block)) / 2);
  --bio-label:  calc((var(--bio-block) - var(--col-gap)) / 3.35);
  --bio-content:calc(var(--bio-label) * 2.35);
  --rail:       calc(var(--bio-inset) + var(--bio-label));

  /* coverflow */
  --cf-w:     clamp(160px, 18vw, 340px);
  --cf-gap:   clamp(20px, 3vw, 48px);
  --cf-scale: 1.5;
}
@media (max-width:760px){ :root{ --cf-scale:1.32; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.22'/></svg>");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.02; }
p{ margin:0; }

/* ============================================================
   TOP GLASS FADE
   Stacked backdrop-filters, each masked to a shorter band than the
   last, so blur ramps smoothly from strong at the very top to none —
   content dissolves under the nav instead of hitting a hard edge.
   ============================================================ */
.glassfade{
  position:fixed; top:0; left:0; right:0;
  height:clamp(110px, 13vh, 190px);
  z-index:40; pointer-events:none;
}
.glassfade span{ position:absolute; inset:0; display:block; }
.glassfade span:nth-child(1){
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 60%,transparent 100%);
}
.glassfade span:nth-child(2){
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 76%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 76%);
}
.glassfade span:nth-child(3){
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 26%,transparent 54%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 26%,transparent 54%);
}
.glassfade span:nth-child(4){
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 12%,transparent 34%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 12%,transparent 34%);
}
@media (prefers-reduced-motion:reduce){ .glassfade{ height:clamp(70px,8vh,110px); } }

.topnav{
  position:sticky; top:0; z-index:50;
  background:transparent;   /* .glassfade paints the band behind it */
}
.topnav-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:clamp(4px, 1.2vw, 22px);
  padding-block:clamp(12px, 1.1vw, 18px);
}
.navlinks{ display:flex; align-items:center; gap:clamp(4px, 1.2vw, 22px); }
/* brand mark — needs .topnav prefix to outrank the .topnav a link styles */
.topnav .brand{
  width:clamp(36px, 2.6vw, 46px); aspect-ratio:1/1;
  padding:0; border-radius:50%;
  background:var(--ink); color:var(--bg);
  display:grid; place-items:center;
  font-weight:800; font-size:clamp(0.95rem, 1.15vw, 1.24rem);
  letter-spacing:-.04em; line-height:1;
  transition:transform .2s ease, opacity .2s ease;
}
.topnav .brand:hover{ transform:translateY(-1px); opacity:.88; color:var(--bg); }
.topnav a{
  font-weight:700;
  font-size:clamp(0.92rem, 1.02vw, 1.18rem);
  letter-spacing:-.015em;
  color:var(--ink-2);
  padding:.52em 1.15em;
  border-radius:999px;
  white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.topnav a:hover{ color:var(--ink); }
.topnav a.is-active{ background:rgba(16,16,16,.10); color:var(--ink); }
.topnav a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:520px){
  .navlinks{ gap:0; }
  .topnav a{ padding:.5em .62em; }
}

.wrap{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.rule{ height:1px; background:var(--rule); border:0; margin-block:var(--sec); }
/* body-section dividers span only the text column, matching the home page */
.cs-block > .rule{
  margin-left:calc(var(--rail) + var(--col-gap));
  width:var(--bio-content);
}
@media (max-width:900px){ .cs-block > .rule{ margin-left:0; width:auto; } }

/* ------------------------------------------------------------
   TOP BAR
   ------------------------------------------------------------ */
.topbar{ padding-block:clamp(24px, 3.4vw, 44px); }
.back{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-micro); font-weight:700;
  transition:gap .2s ease, opacity .2s ease;
}
.back svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.back:hover{ gap:15px; opacity:.62; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.cs-hero{ padding-top:clamp(28px, 4.6vw, 68px); }
.cs-title{
  font-size:var(--t-hero);
  letter-spacing:-.045em;
  line-height:1.0;
  max-width:22ch;
}
.cs-title .client{ color:var(--ink-2); display:block; }

/* ------------------------------------------------------------
   STATS ROW  — 4 up, hairline dividers between
   ------------------------------------------------------------ */
.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-top:clamp(40px, 6vw, 92px);
  max-width:none;
}
.stat{ padding-inline:clamp(14px, 2.4vw, 42px); }
.stat:first-child{ padding-left:0; }
.stat + .stat{ border-left:1px solid var(--rule); }
.stat .n{
  font-size:var(--t-stat);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
  display:block;
}
.stat .cap{
  display:block;
  margin-top:.6em;
  font-size:var(--t-micro);
  color:var(--ink-2);
  line-height:1.35;
}
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 0; }
  .stat:nth-child(odd){ padding-left:0; border-left:0; }
}

/* ------------------------------------------------------------
   CONTEXT GRID (2 × 2)
   ------------------------------------------------------------ */
.context{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(38px, 6.4vw, 108px) clamp(30px, 6vw, 110px);
  margin-top:clamp(56px, 9vw, 150px);
}
@media (max-width:760px){ .context{ grid-template-columns:1fr; } }
.context h4{ font-size:.98rem; font-weight:700; margin-bottom:12px; }
.context p{ color:var(--ink-2); max-width:66ch; }


/* ------------------------------------------------------------
   LONG-FORM BODY  (label left / content right — matches home page)
   ------------------------------------------------------------ */
.cs-meta{
  margin-top:clamp(18px,2.4vw,30px);
  font-size:var(--t-micro); font-weight:700; color:var(--ink-2);
}
.split{
  display:grid;
  grid-template-columns:var(--rail) var(--bio-content);
  gap:var(--col-gap);
  align-items:start;
}
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:24px; } }
.sec-title{ font-size:clamp(1.9rem, 3.4vw, 3.1rem); letter-spacing:-.035em; }
.cs-block{ padding-block:0; }

.prose{ max-width:74ch; }
.prose p + p{ margin-top:1.15em; }
.prose p{ color:var(--ink-2); }

.ticks{ list-style:none; margin:0; padding:0; max-width:74ch; }
.ticks li{
  position:relative;
  padding-left:26px;
  color:var(--ink-2);
}
.ticks li + li{ margin-top:1.05em; }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--ink); opacity:.55;
}
.ticks strong{ color:var(--ink); font-weight:700; }

/* stat deltas */
.stat .delta{
  display:block; margin-top:.35em;
  font-size:var(--t-micro); font-weight:700;
  color:var(--ink);
}

/* ------------------------------------------------------------
   COVERFLOW CAROUSEL — full bleed, centre slide reads "in colour"
   ------------------------------------------------------------ */
.cf-wrap{ position:relative; z-index:1; }
.cf{
  position:relative; z-index:1;
  margin-top:var(--sec);
  overflow:hidden;
  padding-block:clamp(46px, 7vw, 104px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cf-track{
  display:flex;
  gap:var(--cf-gap);
  margin-left:calc(50% - (var(--cf-w) / 2));
  transform:translate3d(calc(-1 * var(--i, 0) * (var(--cf-w) + var(--cf-gap))), 0, 0);
  transition:transform .62s cubic-bezier(.22,.72,.24,1);
  will-change:transform;
}
.cf-slide{
  flex:0 0 var(--cf-w);
  width:var(--cf-w);
  aspect-ratio:4/5;
  border-radius:var(--r-md);
  border:0; padding:0;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 12px, rgba(0,0,0,0) 12px 24px),
    linear-gradient(150deg, #dcdcd8 0%, #d2d2ce 48%, #cacac6 100%);
  cursor:pointer;
  opacity:.34;
  filter:grayscale(1);
  transform:scale(.86);
  transition:transform .62s cubic-bezier(.22,.72,.24,1), opacity .5s ease, filter .5s ease;
  will-change:transform;
}
/* the active slide: full size, "in colour", sits above its neighbours */
.cf-slide.is-active{
  opacity:1;
  filter:none;
  transform:scale(var(--cf-scale));
  position:relative; z-index:3;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.045) 0 12px, rgba(0,0,0,0) 12px 24px),
    linear-gradient(150deg, #d9d2c6 0%, #cdc6b9 46%, #c3bcaf 100%);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.42);
}
.cf-slide:focus-visible{ outline:2px solid var(--ink); outline-offset:5px; }
@media (prefers-reduced-motion:reduce){
  .cf-track,.cf-slide{ transition:none; }
}

/* controls */
.cf-ui{
  padding-bottom:0;
  display:flex; align-items:center; justify-content:center;
  gap:18px;
  margin-top:clamp(26px, 3.6vw, 46px);
}
.cf-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--rule); background:transparent;
  color:var(--ink); cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease, opacity .2s ease;
}
.cf-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.cf-btn:hover:not(:disabled){ background:rgba(16,16,16,.07); transform:translateY(-2px); }
.cf-btn:disabled{ opacity:.28; cursor:default; }
.cf-count{ font-size:var(--t-micro); font-weight:700; color:var(--ink-2); min-width:5.5ch; text-align:center; }

/* ------------------------------------------------------------
   NEXT CASE STUDY
   ------------------------------------------------------------ */
.next{ padding-block:0; }
.next-link{ display:block; }
.next-eyebrow{ font-size:var(--t-micro); font-weight:700; color:var(--ink-2); margin-bottom:14px; }
.next-title{
  font-size:clamp(2rem, 4.4vw, 4rem);
  letter-spacing:-.04em;
  display:inline-flex; align-items:center; gap:.34em;
  transition:gap .26s ease;
}
.next-title svg{ width:.52em; height:.52em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.next-link:hover .next-title{ gap:.6em; }

.colophon{ color:var(--ink-2); font-size:var(--t-micro); padding-bottom:clamp(40px,6vw,80px); }

/* ------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

.cf-wrap:focus{ outline:none; }
.cf-wrap:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }

/* ------------------------------------------------------------
   PHONE HERO — full-page device mockup, video looping in-screen
   ------------------------------------------------------------ */
.phone-hero{
  display:flex; flex-direction:column; align-items:center;
  padding-block:clamp(40px, 7vw, 96px) clamp(56px, 9vw, 130px);
  min-height:min(94vh, 1080px);
  justify-content:center;
}
.phone-hero-tag{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(16,16,16,.4);
  padding:.5em .9em;
  border:1px dashed rgba(16,16,16,.22);
  border-radius:999px;
  background:rgba(255,255,255,.35);
  margin-bottom:clamp(22px, 3.4vw, 38px);
}
.phone{
  position:relative;
  width:clamp(240px, 25vw, 400px);
  aspect-ratio:402/874;
  padding:clamp(11px, 1.5vw, 17px);
  border-radius:clamp(48px, 6.4vw, 68px);
  background:linear-gradient(155deg, #f6f6f4 0%, #dcdcd9 20%, #8d8d8a 44%, #d2d2cf 60%, #f2f2ef 76%, #b6b6b3 100%);
  box-shadow:
    0 70px 130px -55px rgba(16,16,16,.48),
    0 22px 46px -24px rgba(16,16,16,.32),
    inset 0 0 0 1px rgba(255,255,255,.55);
}
.phone-btn{
  position:absolute;
  background:linear-gradient(180deg,#f0f0ed,#b9b9b6 45%,#8d8d8a);
}
.phone-btn--power{ right:-3px; top:24%; width:3px; height:11%; border-radius:0 4px 4px 0; }
.phone-btn--vol-up{ left:-3px; top:19%; width:3px; height:6%; border-radius:4px 0 0 4px; }
.phone-btn--vol-down{ left:-3px; top:27%; width:3px; height:6%; border-radius:4px 0 0 4px; }
.phone-screen{
  position:relative;
  width:100%; height:100%;
  border-radius:clamp(38px, 5.2vw, 56px);
  overflow:hidden;
  background:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7);
}
.phone-screen video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.phone-island{
  position:absolute; z-index:3;
  top:clamp(9px, 1.4vw, 14px); left:50%; transform:translateX(-50%);
  width:34%; aspect-ratio:108/30;
  background:#000; border-radius:999px;
}
@media (max-width:520px){ .phone-hero{ min-height:auto; } }