/* ==========================================================================
   Case Study v2 — editorial, visual-first project detail page.
   Loaded AFTER css/style.css so the nav, footer and brand tokens stay shared.
   Everything here is scoped to .cs3 so it can never leak into other pages.

   Layout rule that matters most: images are never cropped. Every screenshot is
   rendered at its natural aspect ratio (width:100%; height:auto) because the
   source screenshots are the truth — see js/case-v2.js.
   ========================================================================== */

.cs3{
  --cs-accent:#FE7A02;
  --cs-ink:#ffffff;
  --cs-ink-70:rgba(255,255,255,.70);
  --cs-ink-50:rgba(255,255,255,.50);
  --cs-ink-34:rgba(255,255,255,.34);
  --cs-line:rgba(255,255,255,.10);
  --cs-line-soft:rgba(255,255,255,.06);
  --cs-surface:rgba(255,255,255,.026);
  --cs-surface-2:rgba(255,255,255,.045);
  --cs-radius:16px;
  --cs-gutter:clamp(20px,4vw,64px);
  --cs-max:1280px;
  --cs-max-wide:1600px;
  --cs-ease:cubic-bezier(.22,.61,.36,1);
  display:block;
  padding-bottom:0;
  color:var(--cs-ink);
}

/* ONE container width for the whole page. This is deliberately identical to
   .container in css/style.css (max-width 1840 + the shared --gutter), so the hero,
   "Back to work", every section, the images, the nav and the footer all sit on the
   same left and right edge. --cs-max / --cs-max-wide above are kept only so older
   overrides do not break; nothing should reintroduce a second width here. */
.cs3 .cs3-wrap,
.cs3 .cs3-wrap--wide{
  width:auto;max-width:1840px;margin-inline:auto;
  padding-inline:var(--gutter,24px);
}

/* ---------- reveal ---------- */
.cs3 [data-rise]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--cs-ease),transform .7s var(--cs-ease);}
.cs3 [data-rise].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .cs3 [data-rise]{opacity:1;transform:none;transition:none;}
}

/* ---------- reading progress ---------- */
.cs3-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:transparent;pointer-events:none;}
.cs3-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cs-accent),#ffb066);transition:width .12s linear;}

/* ==========================================================================
   HERO
   ========================================================================== */
.cs3-hero{padding:clamp(96px,12vw,160px) 0 0;}
.cs3-back{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink-50);text-decoration:none;transition:color .25s;}
.cs3-back:hover{color:var(--cs-accent);}

.cs3-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:clamp(30px,5vw,54px) 0 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-accent);}
.cs3-eyebrow span:not(:last-child)::after{content:'·';margin-left:10px;color:var(--cs-ink-34);}

.cs3-title{font-size:clamp(40px,7.2vw,92px);line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:0;padding-bottom:.04em;}
.cs3-title em{font-style:normal;color:var(--cs-accent);}

.cs3-lede{max-width:44ch;margin:clamp(18px,2.4vw,28px) 0 0;font-size:clamp(18px,1.7vw,24px);line-height:1.5;color:var(--cs-ink-70);text-wrap:pretty;}

.cs3-facts{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);margin-top:clamp(30px,4.4vw,52px);padding-top:24px;border-top:1px solid var(--cs-line);}
.cs3-facts div{display:flex;flex-direction:column;gap:6px;}
.cs3-facts span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-ink-34);}
.cs3-facts strong{font-size:14.5px;font-weight:500;color:var(--cs-ink);letter-spacing:-.01em;}

.cs3-hero-media{margin-top:clamp(38px,5.5vw,72px);}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.cs3-sec{padding:clamp(80px,11vw,168px) 0 0;}
.cs3-sec--tight{padding-top:clamp(40px,5vw,64px);}

.cs3-label{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(22px,3vw,36px);}
.cs3-label b{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--cs-accent);font-variant-numeric:tabular-nums;}
.cs3-label h2{margin:0;font-size:clamp(22px,2.6vw,34px);line-height:1.15;letter-spacing:-.025em;font-weight:600;color:var(--cs-ink);}
.cs3-label::after{content:'';flex:1;height:1px;background:var(--cs-line-soft);transform:translateY(-4px);}

.cs3-say{max-width:60ch;font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--cs-ink-70);text-wrap:pretty;margin:0 0 clamp(26px,3vw,40px);}
.cs3-say strong{color:var(--cs-ink);font-weight:500;}
.cs3-say + .cs3-say{margin-top:-18px;}

/* ==========================================================================
   AT A GLANCE — the 30-second read
   ========================================================================== */
.cs3-glance{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--cs-line-soft);border:1px solid var(--cs-line-soft);border-radius:var(--cs-radius);overflow:hidden;}
.cs3-glance > div{background:#0a0a0a;padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;min-height:132px;}
.cs3-glance span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-accent);}
.cs3-glance p{margin:0;font-size:15px;line-height:1.55;color:var(--cs-ink-70);text-wrap:pretty;}
.cs3-glance p b{color:var(--cs-ink);font-weight:500;}

/* ==========================================================================
   CHIPS (responsibilities, system items, AI uses, RTL changes)
   ========================================================================== */
.cs3-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.cs3-chips li{font-size:13px;line-height:1;padding:10px 14px;border:1px solid var(--cs-line);border-radius:999px;color:var(--cs-ink-70);background:var(--cs-surface);transition:border-color .25s,color .25s;}
.cs3-chips li:hover{border-color:rgba(254,122,2,.42);color:var(--cs-ink);}
.cs3-chips--plain li{border-radius:8px;}

/* ==========================================================================
   PROCESS RAIL
   ========================================================================== */
.cs3-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:0;border:1px solid var(--cs-line-soft);border-radius:var(--cs-radius);overflow:hidden;}
.cs3-rail > div{position:relative;padding:clamp(20px,2.2vw,28px);background:#0a0a0a;border-right:1px solid var(--cs-line-soft);display:flex;flex-direction:column;gap:9px;}
.cs3-rail > div:last-child{border-right:0;}
.cs3-rail > div::before{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,var(--cs-accent),transparent);opacity:.5;}
.cs3-rail em{font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--cs-ink-34);font-variant-numeric:tabular-nums;}
.cs3-rail h3{margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--cs-ink);}
.cs3-rail p{margin:0;font-size:13px;line-height:1.5;color:var(--cs-ink-50);}

/* ==========================================================================
   KEY DECISIONS — Problem → Decision → Why
   ========================================================================== */
.cs3-decisions{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:clamp(14px,1.6vw,20px);}
.cs3-dec{border:1px solid var(--cs-line-soft);border-radius:var(--cs-radius);padding:clamp(22px,2.4vw,30px);background:linear-gradient(180deg,var(--cs-surface),transparent 62%);display:flex;flex-direction:column;gap:18px;transition:border-color .3s var(--cs-ease),transform .3s var(--cs-ease);}
.cs3-dec:hover{border-color:rgba(254,122,2,.30);transform:translateY(-3px);}
.cs3-dec > div{display:flex;flex-direction:column;gap:7px;}
.cs3-dec span{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--cs-ink-34);}
.cs3-dec .is-key span{color:var(--cs-accent);}
.cs3-dec p{margin:0;font-size:15px;line-height:1.55;color:var(--cs-ink-70);text-wrap:pretty;}
.cs3-dec .is-key p{font-size:17px;line-height:1.45;color:var(--cs-ink);font-weight:500;letter-spacing:-.012em;}
.cs3-dec hr{border:0;border-top:1px solid var(--cs-line-soft);margin:0;}

/* ==========================================================================
   MEDIA — screenshots are never cropped
   ========================================================================== */
.cs3-media{display:grid;gap:clamp(16px,2vw,28px);align-items:start;}
.cs3-media.is-duo{grid-template-columns:repeat(2,1fr);}
.cs3-media.is-trio{grid-template-columns:repeat(3,1fr);}
.cs3-media + .cs3-media{margin-top:clamp(16px,2vw,28px);}

.cs3-fig{margin:0;display:flex;flex-direction:column;gap:12px;}
.cs3-frame{position:relative;min-height:110px;border-radius:var(--cs-radius);overflow:hidden;border:1px solid var(--cs-line-soft);background:#070707;line-height:0;}
.cs3-frame img{display:block;width:100%;height:auto;}
.cs3-frame > :not(img){line-height:normal;}
.cs3-fig figcaption{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5;color:var(--cs-ink-50);}
.cs3-fig figcaption b{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-accent);}

/* zoomable */
.cs3-frame[data-zoom]{cursor:zoom-in;}
.cs3-frame[data-zoom]::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .3s;pointer-events:none;}
.cs3-frame[data-zoom]:hover::after{background:rgba(255,255,255,.04);}

/* empty drop slot — tells Mohamed exactly which file goes here */
.cs3-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;line-height:1.5;text-align:center;padding:clamp(34px,7vw,84px) 24px;border:1px dashed color-mix(in srgb,var(--cs-accent) 34%,transparent);border-radius:var(--cs-radius);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--cs-accent) 7%,transparent),transparent 62%),#080808;min-height:180px;}
.cs3-slot::before{content:'+';display:grid;place-items:center;flex:none;width:42px;height:42px;margin:0 0 4px;border:1px solid color-mix(in srgb,var(--cs-accent) 45%,transparent);border-radius:50%;font-size:22px;font-weight:300;color:var(--cs-accent);line-height:1;}
.cs3-slot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--cs-ink);word-break:break-all;}
.cs3-slot small{font-size:11px;letter-spacing:.05em;color:var(--cs-ink-34);}

/* ==========================================================================
   COMPARE — Desktop→Tablet→Mobile, EN→AR, Before→After
   ========================================================================== */
.cs3-compare{display:grid;gap:clamp(16px,2vw,26px);align-items:end;}
.cs3-compare.is-2{grid-template-columns:repeat(2,1fr);}
.cs3-compare.is-3{grid-template-columns:1.35fr .8fr .5fr;}
.cs3-compare .cs3-fig figcaption{justify-content:flex-start;}
.cs3-tag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cs-ink-50);}
.cs3-tag i{width:6px;height:6px;border-radius:50%;background:var(--cs-accent);flex:none;}

.cs3-arrowrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,30px);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--cs-ink-50);}
.cs3-arrowrow b{font-weight:500;color:var(--cs-ink);}
.cs3-arrowrow s{text-decoration:none;color:var(--cs-accent);}

/* ==========================================================================
   FULL-BLEED FINAL
   ========================================================================== */
.cs3-final{padding:clamp(64px,9vw,124px) 0 clamp(40px,6vw,80px);}
.cs3-final .cs3-frame{border-radius:clamp(12px,1.6vw,22px);}

/* ==========================================================================
   FOOTER CTA — read the long version
   ========================================================================== */
.cs3-more{margin-top:clamp(56px,8vw,104px);padding:clamp(28px,3.4vw,44px);border:1px solid var(--cs-line-soft);border-radius:var(--cs-radius);background:linear-gradient(140deg,rgba(254,122,2,.07),transparent 58%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.cs3-more p{margin:0;max-width:52ch;font-size:15.5px;line-height:1.6;color:var(--cs-ink-70);}
.cs3-more p b{display:block;color:var(--cs-ink);font-size:18px;font-weight:500;letter-spacing:-.015em;margin-bottom:6px;}
.cs3-more a{flex:none;display:inline-flex;align-items:center;gap:9px;padding:14px 22px;border-radius:999px;border:1px solid rgba(254,122,2,.42);color:var(--cs-ink);text-decoration:none;font-size:14px;transition:background .25s,border-color .25s;}
.cs3-more a:hover{background:rgba(254,122,2,.14);border-color:var(--cs-accent);}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.cs3-lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(4,4,4,.93);backdrop-filter:blur(6px);}
.cs3-lb.is-open{display:grid;}
.cs3-lb img{max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:10px;box-shadow:0 40px 120px rgba(0,0,0,.7);}
.cs3-lb button{position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);width:42px;height:42px;border-radius:50%;border:1px solid var(--cs-line);background:rgba(255,255,255,.05);color:#fff;font-size:16px;cursor:pointer;transition:background .25s;}
.cs3-lb button:hover{background:rgba(255,255,255,.13);}
.cs3-lb figcaption{position:absolute;left:0;right:0;bottom:clamp(14px,2.4vw,26px);text-align:center;font-size:13px;color:var(--cs-ink-50);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .cs3-glance{grid-template-columns:repeat(2,1fr);}
  .cs3-rail{grid-auto-flow:row;grid-auto-columns:auto;}
  .cs3-rail > div{border-right:0;border-bottom:1px solid var(--cs-line-soft);}
  .cs3-rail > div:last-child{border-bottom:0;}
  .cs3-compare.is-3{grid-template-columns:1fr;}
  .cs3-compare.is-3 .cs3-fig:nth-child(2) .cs3-frame{max-width:70%;}
  .cs3-compare.is-3 .cs3-fig:nth-child(3) .cs3-frame{max-width:40%;}
}
@media (max-width:760px){
  .cs3-glance{grid-template-columns:1fr;}
  .cs3-media.is-duo,.cs3-media.is-trio,.cs3-compare.is-2{grid-template-columns:1fr;}
  .cs3-facts{gap:18px 30px;}
  .cs3-label::after{display:none;}
  .cs3-more{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   HERO WITH BACKGROUND IMAGE
   The hero image sits behind the title as a full-bleed background, darkened by a
   black overlay so the type stays readable. Drop hero/hero.webp in and it appears;
   with no image the hero falls back to the plain dark treatment above.
   ========================================================================== */
.cs3-hero{position:relative;isolation:isolate;}
.cs3-hero--bg{padding-block:clamp(120px,15vw,220px) clamp(56px,7vw,96px);}

.cs3-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.cs3-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
/* black overlay — heavier at the edges so the headline never fights the picture */
.cs3-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,6,7,.82) 0%,rgba(6,6,7,.62) 38%,rgba(6,6,7,.90) 88%,#060607 100%),
    linear-gradient(90deg,rgba(6,6,7,.78) 0%,rgba(6,6,7,.30) 55%,rgba(6,6,7,.55) 100%);
}
.cs3-hero--bg .cs3-title,
.cs3-hero--bg .cs3-lede{text-shadow:0 2px 30px rgba(0,0,0,.55);}
.cs3-hero--bg .cs3-facts{border-top-color:rgba(255,255,255,.18);}

/* ==========================================================================
   SHOWCASE — the UI section. A full-width screen opens it, then 2-up pairs.
   Static, no horizontal scrolling. Images fill their frame and are never
   distorted; one short caption names each screen, nothing else.
   ========================================================================== */
.cs3-showcase{display:flex;flex-direction:column;gap:clamp(18px,2.1vw,30px);}
.cs3-shot-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);}
.cs3-shot-row.is-solo{grid-template-columns:1fr;}

.cs3-shot{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0;}
.cs3-shot .cs3-frame{
  flex:1;display:flex;overflow:hidden;
  border-radius:clamp(12px,1.1vw,18px);
  aspect-ratio:4/3;
}
.cs3-shot.is-solo .cs3-frame{aspect-ratio:16/9;}
.cs3-shot .cs3-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.cs3-shot .cs3-slot{width:100%;}
.cs3-shot figcaption{
  margin:0;font-size:13.5px;line-height:1.45;color:var(--cs-ink-50);
  letter-spacing:-.005em;
}

@media (max-width:760px){
  .cs3-shot-row{grid-template-columns:1fr;}
  .cs3-shot .cs3-frame,
  .cs3-shot.is-solo .cs3-frame{aspect-ratio:16/10;}
}

/* ==========================================================================
   WHAT I DID — a short numbered list of contributions, no long prose
   ========================================================================== */
/* ==========================================================================
   WHAT I DID — a timeline, not a plain card grid. A hairline runs through the
   dots so the six contributions read as one sequence; on narrow screens the
   track scrolls sideways with snap, one card at a time, and the line goes with
   it. Markup: .cs3-track > ol.cs3-did > li.cs3-did-card (js/case-v2.js).
   ========================================================================== */
.cs3-track{margin-inline:calc(var(--gutter,24px) * -1);padding-inline:var(--gutter,24px);}
.cs3-did{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(14px,1.5vw,22px);
}
.cs3-did-card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(26px,2.4vw,34px) clamp(20px,1.9vw,28px) clamp(24px,2.2vw,30px);
  border:1px solid var(--cs-line-soft);border-radius:16px;
  background:linear-gradient(180deg,var(--cs-surface),transparent 78%);
  transition:border-color .35s var(--cs-ease),background .35s var(--cs-ease),transform .35s var(--cs-ease);
}
/* the connecting line: a hairline across the top of every card, and a dot on it */
.cs3-did-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;
  background:var(--cs-line);
}
.cs3-did-card:first-child::before{left:50%;}
.cs3-did-card:last-child::before{right:50%;}
.cs3-did-dot{
  position:absolute;top:-4px;left:clamp(20px,1.9vw,28px);
  width:9px;height:9px;border-radius:50%;
  background:var(--cs-accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--cs-accent) 16%,transparent);
  transition:box-shadow .35s var(--cs-ease);
}
.cs3-did-card:hover{
  border-color:color-mix(in srgb,var(--cs-accent) 34%,var(--cs-line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--cs-accent) 7%,var(--cs-surface)),transparent 78%);
  transform:translateY(-3px);
}
.cs3-did-card:hover .cs3-did-dot{box-shadow:0 0 0 8px color-mix(in srgb,var(--cs-accent) 22%,transparent);}
.cs3-did em{font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--cs-accent);font-variant-numeric:tabular-nums;}
.cs3-did h3{margin:0;font-size:clamp(17px,1.4vw,20px);font-weight:600;letter-spacing:-.02em;color:var(--cs-ink);}
.cs3-did p{margin:0;font-size:14.5px;line-height:1.6;color:var(--cs-ink-50);}

/* narrow screens: one horizontal track you swipe through, card by card */
@media (max-width:820px){
  .cs3-track{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter,24px);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:6px;
  }
  .cs3-track::-webkit-scrollbar{display:none;}
  .cs3-did{
    display:flex;grid-template-columns:none;
    gap:12px;width:max-content;padding-right:var(--gutter,24px);
  }
  .cs3-did-card{
    flex:0 0 min(78vw,320px);scroll-snap-align:start;
  }
  .cs3-did-card:first-child::before,
  .cs3-did-card:last-child::before{left:0;right:0;}
}


/* ==========================================================================
   The Halo Lab two-column pass (split row + process accordion) was built and
   removed. Do not reintroduce it — it read as a consultancy deck. What follows
   is the replacement: oversized headings, few words, images that break the
   container, and each project carrying its own colour.
   ========================================================================== */

/* ---------- oversized section headings ---------- */
.cs3 .cs3-label{
  display:block;
  margin-bottom:clamp(26px,3.2vw,48px);
}
.cs3 .cs3-label::after{display:none;}
/* the section number sits on its own line above the heading, not beside it —
   at 78px a heading has no room for a chip on its baseline */
.cs3 .cs3-label b{
  display:block;margin-bottom:clamp(10px,1.2vw,16px);
  font-size:clamp(11px,1vw,13px);line-height:1;letter-spacing:.18em;
  color:var(--cs-accent);
}
.cs3 .cs3-label h2{
  font-size:clamp(34px,5.6vw,78px);
  /* .98 clipped the box shorter than the glyphs, so g/y/p hung into the copy
     below. 1.04 plus the label's own margin keeps them clear. */
  line-height:1.04;letter-spacing:-.038em;font-weight:600;
  max-width:16ch;text-wrap:balance;
  padding-bottom:.06em;
}
/* the copy under a heading stays short and set large */
.cs3-lead{max-width:54ch;margin-bottom:clamp(44px,5.4vw,84px);}
.cs3-lead .cs3-say{
  font-size:clamp(17px,1.5vw,21px);line-height:1.68;
  color:var(--cs-ink-70);margin-bottom:clamp(16px,1.8vw,24px);
}
.cs3-lead > :last-child{margin-bottom:0;}

/* ---------- images sit on the page's own edges ----------
   They run the full width of the container — the same left and right edge as the
   nav bar, the hero and every heading. An earlier version broke them out to near
   100vw; that left the images and the header on two different verticals. Do not
   reintroduce a breakout here. */
.cs3 .cs3-wrap--wide > .cs3-showcase{width:100%;max-width:none;margin-left:0;}
.cs3-shot-row{gap:clamp(12px,1.3vw,22px);}
.cs3-showcase{gap:clamp(18px,2.2vw,38px);}
.cs3-shot{gap:14px;}
.cs3-shot .cs3-frame{border-radius:clamp(10px,0.9vw,16px);}
.cs3-shot.is-solo .cs3-frame{aspect-ratio:2.1/1;}
.cs3-shot figcaption{padding-inline:2px;}
@media (max-width:760px){
  .cs3 .cs3-wrap--wide > .cs3-showcase{
    width:auto;margin-left:0;
  }
  .cs3-shot.is-solo .cs3-frame{aspect-ratio:16/10;}
}

/* ---------- motion: images arrive rather than appear ---------- */
.cs3 .cs3-shot[data-rise]{
  opacity:0;transform:translate3d(0,40px,0) scale(.965);
  transition:opacity .9s var(--cs-ease),transform 1.05s var(--cs-ease);
}
.cs3 .cs3-shot[data-rise].is-in{opacity:1;transform:none;}
/* headings lift a little further than body copy, so the page has a hierarchy of motion.
   The .is-in rule MUST be repeated here: this block sits later in the file than the
   generic `.cs3 [data-rise].is-in`, and at equal specificity the later rule wins —
   without it the heading stays 34px low for good. */
.cs3 .cs3-label[data-rise]{transform:translate3d(0,34px,0);transition-duration:.85s;}
.cs3 .cs3-label[data-rise].is-in{transform:none;}
@media (prefers-reduced-motion:reduce){
  .cs3 .cs3-shot[data-rise],
  .cs3 .cs3-label[data-rise]{opacity:1;transform:none;transition:none;}
}

/* ---------- each project carries its own colour ----------
   --cs-accent is set per page from the project's `accent` in js/projects-data.js
   (see js/case-v2.js). Everything accent-coloured on the page follows it. */
.cs3-hero .cs3-title::after{
  content:'';display:block;width:clamp(64px,7vw,116px);height:5px;border-radius:3px;
  margin-top:clamp(22px,2.6vw,36px);
  background:var(--cs-accent);
}

/* ---------- caption: quieter, and clear of the image ---------- */
.cs3-shot figcaption{
  font-size:13px;line-height:1.5;letter-spacing:.01em;
  color:var(--cs-ink-50);
}
/* the number above a heading reads as a marker, not a label */
.cs3 .cs3-label b{opacity:.9;}

/* the hero rule is the project's colour; keep it clear of the lede */
.cs3-hero .cs3-title::after{margin-bottom:clamp(6px,1vw,14px);}
.cs3-lede{margin-top:clamp(14px,1.8vw,24px);line-height:1.6;}

/* ==========================================================================
   THE CHALLENGE — a full-width statement, not a narrow column. The copy runs
   the whole page width and is set large, so the problem lands before anything
   else on the page does.
   ========================================================================== */
.cs3-sec--statement .cs3-lead{max-width:none;}
.cs3-sec--statement .cs3-lead .cs3-say{
  max-width:none;   /* .cs3-say caps at 60ch by default; the statement runs edge to edge */
  font-size:clamp(20px,2.3vw,34px);
  line-height:1.42;
  letter-spacing:-.018em;
  color:var(--cs-ink-70);
  text-wrap:pretty;
}
.cs3-sec--statement .cs3-lead .cs3-say strong{
  color:var(--cs-ink);font-weight:600;
}
.cs3-sec--statement .cs3-label h2{max-width:none;}

/* ==========================================================================
   THE DESIGN, IN STEPS — a project can split the section into named stages
   (wireframe → website → mobile) via `design.groups` in js/case-content.js.
   Each step gets a numbered heading on a hairline, then its own screenshots.
   ========================================================================== */
.cs3-step-block + .cs3-step-block{margin-top:clamp(56px,7vw,110px);}
.cs3-step-head{
  display:flex;align-items:baseline;gap:clamp(12px,1.3vw,18px);
  padding-bottom:clamp(14px,1.5vw,20px);
  margin-bottom:clamp(20px,2.4vw,34px);
  border-bottom:1px solid var(--cs-line-soft);
}
.cs3-step-head em{
  font-style:normal;flex:none;
  font-size:clamp(11px,1vw,13px);letter-spacing:.18em;
  color:var(--cs-accent);font-variant-numeric:tabular-nums;
}
.cs3-step-head h3{
  margin:0;font-size:clamp(21px,2.2vw,30px);font-weight:600;
  letter-spacing:-.026em;color:var(--cs-ink);
}
.cs3-step-note{
  max-width:54ch;margin:0 0 clamp(24px,2.8vw,40px);
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.62;color:var(--cs-ink-50);
}

/* ---------- a tile that is a screen recording ----------
   Sits in the same frame as a screenshot and fills it the same way, so a video
   and an image can share a row without one of them jumping. */
.cs3-shot .cs3-video{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;background:#080808;
}

/* ---------- video and phone-shaped tiles ----------
   A recording already carries its own device mockup and its own backdrop, so the
   tile paints nothing behind it and shows the whole frame rather than cropping to
   the row's aspect ratio. `is-portrait` does the same for a phone screen, and
   centres it so it is not stranded against the left edge of its column. */
.cs3-shot.is-video .cs3-frame,
.cs3-shot.is-portrait .cs3-frame{
  background:transparent;border:0;
  align-items:center;justify-content:center;
}
.cs3-shot.is-video .cs3-video{
  object-fit:contain;object-position:center;
  background:transparent;
  border-radius:inherit;
}
/* A phone tile is sized by height, not by the row's width: a solo row is the
   full container, and a 3/4 box there would render a phone almost 1800px tall. */
.cs3-shot.is-portrait .cs3-frame{
  aspect-ratio:auto;
  /* .cs3-frame carries flex:1, whose flex-basis:0 beats `height` in a column
     flex container — the frame grew to the video's natural 1184px. */
  flex:none;
  height:clamp(430px,58vh,700px);
}
.cs3-shot.is-portrait .cs3-frame img,
.cs3-shot.is-portrait .cs3-frame video{
  width:auto;max-width:100%;height:100%;
  object-fit:contain;object-position:center;
  margin-inline:auto;
}
.cs3-shot.is-portrait .cs3-slot{max-width:340px;margin-inline:auto;}

/* ==========================================================================
   THE CALL I MADE — one decision per project. Three labelled rows on a hairline
   grid; the middle one is the decision itself and carries the project's colour,
   so the eye lands on the choice rather than the setup.
   ========================================================================== */
.cs3-call{
  display:grid;gap:0;
  border-top:1px solid var(--cs-line-soft);
  max-width:96ch;
}
.cs3-call-row{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--cs-line-soft);
}
.cs3-call-row span{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cs-ink-34);line-height:1.9;
}
.cs3-call-row p{
  margin:0;font-size:clamp(16px,1.45vw,20px);line-height:1.6;
  color:var(--cs-ink-70);text-wrap:pretty;
}
.cs3-call-row.is-key span{color:var(--cs-accent);}
.cs3-call-row.is-key p{color:var(--cs-ink);font-weight:500;}
@media (max-width:760px){
  .cs3-call-row{grid-template-columns:1fr;gap:8px;}
  .cs3-call-row span{line-height:1.4;}
}