/* Case-study building blocks. Every project page uses these; the client's
   brand comes in through the --p-* tokens set on <body> by the project css. */

body {
  --p-bg: #111;
  --p-fg: #fff;
  --p-muted: rgb(255 255 255 / 0.6);
  --p-surface: rgb(255 255 255 / 0.06);
  --p-accent: var(--hl-yellow);
  --p-font: var(--font);
}

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(32px, 4.6vw, 60px); }
.section-head p { color: var(--grey-7); font-size: 17px; max-width: 60ch; }

/* Brand panel: a rounded block in the client's colours */
.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--p-bg);
  color: var(--p-fg);
  font-family: var(--p-font);
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--line);
}

[data-reveal] { opacity: 0; transform: translateY(28px); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.cs-hero { padding-top: clamp(110px, 14vw, 160px); }
.cs-hero__grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
/* The device stage sits level with the headline, not down by the lede */
.cs-hero__grid > .stage { margin-top: -6%; }
@media (max-width: 900px) { .cs-hero__grid > .stage { margin-top: 0; } }
.cs-hero__intro { display: grid; gap: 22px; padding-bottom: 8px; }
.cs-hero h1 { font-size: clamp(50px, 7.2vw, 106px); letter-spacing: -0.055em; line-height: 0.95; }
.cs-hero__lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--grey-7); max-width: 44ch; }
.cs-hero__stage { aspect-ratio: 7 / 6; display: grid; place-items: center; }
.cs-hero__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }

.meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px;
  margin-top: clamp(32px, 5vw, 56px); padding-top: 22px;
  border-top: 1px solid var(--line);
}
.meta div { display: grid; gap: 4px; align-content: start; }
.meta dt { font-size: 13px; color: var(--grey-5); }
.meta dd { margin: 0; font-size: 15px; font-weight: 500; }
@media (max-width: 900px) {
  .cs-hero__grid { grid-template-columns: 1fr; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Credit pill: every project states who designed and built it */
.credit {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--grey-1); border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 500;
}
.credit i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hl-yellow); font-style: normal; font-size: 12px; font-weight: 700;
}
/* still being built: a soft pulsing dot instead of the tick */
.credit--dev i { position: relative; background: none; }
.credit--dev i::before, .credit--dev i::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #f59e0b; }
.credit--dev i::after { animation: credit-pulse 1.8s ease-out infinite; }
@keyframes credit-pulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .credit--dev i::after { animation: none; } }

/* ---------- Brief ---------- */
.brief { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.brief blockquote {
  margin: 0; font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; line-height: 1.3; letter-spacing: -0.025em;
}
.brief__body { display: grid; gap: 16px; color: var(--grey-7); }
@media (max-width: 900px) { .brief { grid-template-columns: 1fr; } }

/* ---------- Journey (concept -> final) ---------- */
.journey { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 18px; position: relative; }
.journey__step { display: grid; gap: 14px; align-content: start; }
.journey__art {
  aspect-ratio: 4 / 3; border-radius: var(--radius-m); overflow: hidden;
  display: grid; place-items: center; padding: 10%;
  background: var(--grey-1); border: 1px solid var(--line);
  transition: transform 0.5s var(--ease-spring);
}
.journey__step:hover .journey__art { transform: translateY(-6px) rotate(-0.6deg); }
.journey__art img, .journey__art svg { width: 100%; height: 100%; object-fit: contain; }
.journey__art[style*="--art-bg"] { background: var(--art-bg); border-color: transparent; }
/* Artwork that carries its own background fills the card edge to edge */
.journey__art.is-bleed { padding: 0; }
.journey__art.is-bleed img { object-fit: cover; }
/* Two lockups stacked, each on its own colour */
.journey__art.is-split { padding: 0; grid-template-rows: 1fr 1fr; place-items: stretch; }
.journey__art.is-split > span { display: grid; place-items: center; padding: 0 16%; background: var(--art-bg); }
.journey__art.is-split svg { height: auto; }
/* Logo with the network bleeding off the bottom-right corner */
.journey__art.is-system { position: relative; padding: 14%; }
.journey__art.is-system svg { height: auto; position: relative; z-index: 1; }
.journey__art.is-system img { position: absolute; right: -12%; bottom: -22%; width: 72%; height: auto; opacity: 0.6; }
.journey__step h3 { font-size: 18px; letter-spacing: -0.02em; display: flex; gap: 10px; align-items: baseline; }
.journey__step h3 span { font-size: 13px; font-weight: 500; color: var(--grey-5); }
.journey__step p { font-size: 15px; color: var(--grey-7); }
.journey__tag {
  justify-self: start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-s);
  background: var(--hl-yellow);
}
@media (max-width: 800px) {
  .journey { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .journey__step { scroll-snap-align: start; }
}

/* ---------- Idea cards ---------- */
.ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.idea { padding: 22px; border-radius: var(--radius-m); background: var(--grey-1); display: grid; gap: 8px; align-content: start; }
.idea b { font-size: 12px; font-weight: 600; color: var(--grey-5); }
.idea h3 { font-size: 19px; letter-spacing: -0.02em; }
.idea p { font-size: 14px; color: var(--grey-7); line-height: 1.6; }
@media (max-width: 900px) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Logo stage with background switcher ---------- */
.logo-stage { padding: clamp(40px, 8vw, 110px) clamp(20px, 6vw, 80px); display: grid; place-items: center; min-height: 460px; transition: background 0.5s var(--ease-out), color 0.5s; }
.logo-stage__mark { width: min(680px, 100%); }
.logo-stage__switch {
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0;
  display: flex; gap: 6px; padding: 6px; border-radius: 999px;
  background: rgb(255 255 255 / 0.9); box-shadow: var(--shadow);
}
.logo-stage__switch button {
  border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--ink); display: flex; gap: 8px; align-items: center;
}
.logo-stage__switch button i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); background: var(--sw); }
.logo-stage__switch button[aria-pressed="true"] { background: var(--ink); color: var(--white); }

/* ---------- Palette ---------- */
.palette { display: flex; gap: 10px; height: clamp(240px, 30vw, 380px); }
.swatch {
  flex: var(--share, 1); min-width: 0;
  border-radius: var(--radius-m); padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  background: var(--c); color: var(--on, #fff);
  border: 1px solid var(--line);
  transition: flex 0.6s var(--ease-out);
  cursor: pointer; text-align: left;
}
.swatch:hover, .swatch:focus-visible { flex: calc(var(--share, 1) * 1.8); }
.swatch b { font-size: 15px; font-weight: 600; }
.swatch code { font-size: 13px; opacity: 0.75; font-family: inherit; }
.swatch .copied { font-size: 12px; opacity: 0; transition: opacity 0.2s; }
.swatch.is-copied .copied { opacity: 1; }
@media (max-width: 700px) {
  /* Phones: a tidy two-column chip grid, the lead colour across the top */
  .palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; }
  .swatch { min-height: 84px; padding: 14px 16px; }
  .palette:not(.vsl-pastels):not(.np-accents):not(.bb-seasons) > .swatch:first-child { grid-column: 1 / -1; min-height: 132px; }
  .palette:not(.vsl-pastels):not(.np-accents):not(.bb-seasons) > .swatch:last-child:nth-child(even),
  .np-accents > .swatch:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Type specimen ---------- */
.specimen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding: clamp(28px, 5vw, 64px); }
.specimen__aa { font-size: clamp(120px, 20vw, 280px); line-height: 0.8; font-weight: 800; letter-spacing: -0.04em; }
.specimen__weights { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 24px; }
.specimen__weights span { padding: 14px 0; text-align: center; border-radius: var(--radius-s); background: var(--p-surface); font-size: 22px; }
.specimen__weights small { display: block; font-size: 11px; opacity: 0.55; margin-top: 4px; }
@media (max-width: 800px) { .specimen { grid-template-columns: 1fr; } }

/* ---------- Asset board (Figma-style canvas) ---------- */
.board {
  position: relative;
  border-radius: var(--radius-l);
  background-color: var(--grey-1);
  background-image: radial-gradient(circle, var(--grey-3) 1px, transparent 1.4px);
  background-size: 22px 22px;
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
}
.board__bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--grey-5); margin-bottom: 18px;
}
.board__bar span:first-child { font-weight: 600; color: var(--ink); }
.board__grid {
  display: grid; gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
.frame { position: relative; grid-column: span var(--span, 4); margin-top: var(--drop, 0); }
.frame__name {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--grey-5); margin-bottom: 6px; padding-inline: 2px;
}
.frame__body {
  position: relative; border-radius: 4px; overflow: hidden; background: var(--white);
  box-shadow: var(--shadow);
  outline: 1.5px solid transparent; outline-offset: 0;
  transition: outline-color 0.15s;
  cursor: zoom-in;
}
.frame__body img { width: 100%; }
/* Figma selection handles on hover */
.frame__body::before, .frame__body::after {
  content: ""; position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #0d99ff;
  opacity: 0; transition: opacity 0.15s; z-index: 2;
}
.frame__body::before { top: -1px; left: -1px; }
.frame__body::after { bottom: -1px; right: -1px; }
.frame:hover .frame__body { outline-color: #0d99ff; }
.frame:hover .frame__body::before, .frame:hover .frame__body::after { opacity: 1; }
.frame:hover .frame__name { color: #0d99ff; }

.board__timeline {
  position: relative; margin-top: clamp(24px, 4vw, 40px); height: 40px;
  border-top: 1px solid var(--grey-3);
  display: flex; justify-content: space-between; font-size: 10px; color: var(--grey-5);
  font-variant-numeric: tabular-nums;
}
.board__timeline span { padding-top: 8px; position: relative; }
.board__timeline span::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 6px; background: var(--grey-3); }
.board__playhead {
  position: absolute; top: -10px; left: 0; width: 2px; height: 30px; background: #0d99ff; border-radius: 2px;
}
.board__playhead::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 3px 3px 6px 6px; background: #0d99ff; }
@media (max-width: 800px) {
  .board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame { grid-column: span var(--span-sm, 1); margin-top: 0; }
}

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.gallery figure { margin: 0; grid-column: span var(--span, 2); border-radius: var(--radius-m); overflow: hidden; background: var(--grey-1); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 800px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery figure { grid-column: span var(--span-sm, 1); } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: clamp(32px, 6vw, 72px); }
.stats div { display: grid; gap: 6px; border-top: 3px solid currentColor; padding-top: 16px; }
.stats strong { font-size: clamp(44px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Device stage ---------- */
.devices { position: relative; }
.devices__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 44px);
  align-items: end; padding: clamp(28px, 5vw, 64px);
}
.laptop { width: 100%; }
.laptop__lid {
  position: relative; aspect-ratio: 16 / 10;
  padding: 2.2% 2.2% 3%;
  background: #1c1c1e; border-radius: 18px 18px 6px 6px;
  box-shadow: inset 0 0 0 1px #3a3a3c;
}
.laptop__lid::before { content: ""; position: absolute; top: 1%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #333; }
.laptop__base {
  height: 14px; margin: 0 -6%; border-radius: 0 0 16px 16px;
  background: linear-gradient(#d4d4d6, #a8a8aa);
}
.laptop__base::before { content: ""; display: block; width: 16%; height: 6px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #9a9a9c; }
.screen { position: relative; height: 100%; overflow: hidden; border-radius: 4px; background: var(--grey-1); }
.screen img { width: 100%; will-change: transform; }
/* Journey video: a recorded walk through the site, pinned to the top */
.screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Modern iPhone: metal edge, thin black bezel, side buttons, rounded display
   with the status bar and dynamic island inside it. Everything is sized in cqw
   (the phone's own width) so it stays in proportion at any size. case.js wraps
   the screen in .phone__display and adds the status bar. */
.phone {
  --edge: 2px;
  position: relative;
  container-type: inline-size;
  width: clamp(150px, 19vw, 250px); aspect-ratio: 71.6 / 147.6; /* a real iPhone body, bezel included */
  border: var(--edge) solid transparent;
  border-radius: 17% / 7.9%;
  background:
    linear-gradient(#0a0a0b, #0a0a0b) padding-box,
    linear-gradient(140deg, #c4c4c8 0%, #55555a 26%, #a6a6ab 50%, #3d3d40 76%, #b2b2b6 100%) border-box;
  box-shadow: 0 40px 60px -28px rgb(17 17 17 / 0.5), 0 12px 24px -12px rgb(17 17 17 / 0.3);
}
/* Side buttons */
.phone::before, .phone::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #6e6e73, #a1a1a6);
}
.phone::before { right: calc(-1 * var(--edge) - 3px); top: 27%; height: 13%; }
.phone::after { left: calc(-1 * var(--edge) - 3px); top: 21%; height: 6.5%; box-shadow: 0 9cqw 0 #8e8e93; }
.phone__display {
  position: absolute; inset: 3.4cqw;
  overflow: hidden;
  border-radius: 13cqw;
  display: flex; flex-direction: column;
  background: var(--status-bg, #fff);
}
/* Dynamic island sits inside the display, over the status bar */
.phone__display::before {
  content: ""; position: absolute; z-index: 3; top: 2.6cqw; left: 50%; width: 28cqw; height: 8cqw;
  translate: -50% 0; border-radius: 999px; background: #000;
}
/* Status bar, coloured to match the top of the site (case.js samples it) */
.phone__status {
  flex: 0 0 auto; height: 13cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6cqw 7.5cqw 0 9.5cqw;
  background: var(--status-bg, #fff); color: var(--status-fg, #111);
  font: 600 4cqw / 1 var(--font); letter-spacing: -0.01em;
}
.phone__status svg { height: 3.6cqw; width: auto; }
.phone .screen { flex: 1; border-radius: 0; }
@media (max-width: 800px) {
  .devices__inner { grid-template-columns: 1fr; justify-items: center; }
  .phone { width: 58%; }
}

/* ---------- Close-ups with a magnifier lens ---------- */
.closeups { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.closeup { grid-column: span var(--span, 6); margin: 0; display: grid; gap: 12px; align-content: start; }
.closeup__view {
  position: relative; border-radius: var(--radius-m); overflow: hidden; background: var(--grey-1);
  border: 1px solid var(--line); cursor: zoom-in;
}
.closeup__view img { width: 100%; }
.closeup p { font-size: 14px; color: var(--grey-7); }
.closeup p b { color: var(--ink); font-weight: 600; }
.lens {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  pointer-events: none; opacity: 0; scale: 0.6;
  border: 4px solid var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--line);
  background-repeat: no-repeat;
  transition: opacity 0.2s, scale 0.3s var(--ease-spring);
  translate: -50% -50%;
}
.closeup__view:hover .lens { opacity: 1; scale: 1; }
@media (hover: none) { .lens { display: none; } }
@media (max-width: 800px) { .closeup { grid-column: span 12; } }

/* ---------- Phone parade: several phones, each scrolling a page, with live
   features popping out over the screens ---------- */
.parade { position: relative; padding: clamp(48px, 8vw, 110px) clamp(16px, 3vw, 48px); perspective: 1800px; }
.parade__row {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.6vw, 40px);
  transform-style: preserve-3d; will-change: transform;
}
.parade .phone { width: clamp(150px, 15.5vw, 228px); flex: none; }
.parade .phone:nth-child(even) { margin-top: clamp(40px, 6vw, 90px); }
.parade__caption {
  display: flex; justify-content: center; gap: clamp(14px, 2.6vw, 40px); margin-top: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted);
}
.parade__caption span { width: clamp(150px, 15.5vw, 228px); text-align: center; }
.pop {
  position: absolute; z-index: 5; left: var(--x); top: var(--y); width: var(--w, auto);
  filter: drop-shadow(0 24px 30px rgb(17 17 17 / 0.22));
  pointer-events: auto;
}
.pop > * { rotate: var(--r, 0deg); }
@media (max-width: 800px) {
  .parade { padding-inline: 0; }
  .parade__row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 16px 48px; margin-bottom: -24px; transform: none !important; }
  .parade .phone { width: 62vw; scroll-snap-align: center; }
  .parade .phone:nth-child(even) { margin-top: 0; }
  .parade__caption { display: none; }
  .pop { zoom: 0.66; } /* zoom, not scale: GSAP resets the scale property when it animates the pop in */
  .pop { left: var(--x-sm, var(--x)); top: var(--y-sm, var(--y)); } /* a pop can sit elsewhere on phones (--x-sm / --y-sm) */
  .pop[data-pop-sm="hide"] { display: none; }
}

/* Phones: the parade as a deck (case.js). One phone at a time, centred; the rest wait hidden
   in the same spot, and a caption pill with arrows sits underneath. Pop-outs stay on desktop. */
.parade__deck { display: none; }
@media (max-width: 800px) {
  .parade.is-deck { padding-block: 36px 30px; }
  .parade.is-deck .parade__row { display: grid; justify-content: center; overflow: visible; scroll-snap-type: none; padding: 8px 0 0; margin: 0; }
  .parade.is-deck .phone { grid-area: 1 / 1; width: min(66vw, 300px); margin: 0 !important; }
  .parade.is-deck .phone:not(.is-on):not(.is-leaving) { visibility: hidden; }
  .parade.is-deck .phone.is-on { z-index: 2; }
  .parade.is-deck .pop { display: none; }
  .parade.is-deck .parade__deck { font-family: var(--font); letter-spacing: -0.01em; position: relative; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
  .parade__nav { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #18181a; cursor: pointer;
    box-shadow: 0 10px 24px -12px rgb(24 24 40 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.06); -webkit-tap-highlight-color: transparent; transition: scale 0.2s var(--ease-out); }
  .parade__nav:active { scale: 0.9; }
  .parade__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .parade__now { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 62vw; padding: 6px 16px 8px 6px; border-radius: 999px; background: #fff; overflow: hidden;
    box-shadow: 0 14px 34px -14px rgb(24 24 40 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.06); }
  .parade__now b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pen, var(--hl-yellow)); color: #18181a; font-size: 11px; font-weight: 700; }
  .parade__now strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: #18181a; }
  .parade__now i { position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 2px; background: rgb(0 0 0 / 0.1); overflow: hidden; }
  .parade__now em { position: absolute; inset: 0; background: #18181a; transform-origin: 0 50%; transform: scaleX(0); }
}

/* Solo parade (one-page sites): one larger phone between a short side
   column and the brand pieces, instead of a row of four */
.parade--solo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding-block: clamp(48px, 6vw, 84px);
}
.parade--solo .parade__row { grid-column: 2; }
.parade--solo .phone { width: clamp(220px, 21vw, 290px); }
.parade--solo .parade__side { grid-column: 1; justify-self: end; max-width: 300px; }
@media (max-width: 800px) {
  .parade--solo { grid-template-columns: 1fr; gap: 8px; padding-block: 40px 32px; }
  .parade--solo .parade__row { grid-column: 1; justify-content: center; overflow: visible; padding-bottom: 32px; }
  .parade--solo .phone { width: min(66vw, 280px); }
  .parade--solo .parade__side { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; padding-inline: 20px; }
}

/* ---------- Next project ---------- */
.next {
  display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
  padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-l); background: var(--grey-1);
  text-decoration: none; transition: background 0.3s;
}
.next:hover { background: var(--grey-2); }
.next small { display: block; font-size: 13px; color: var(--grey-5); margin-bottom: 8px; }
.next strong { font-size: clamp(36px, 6vw, 80px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.next__arrow {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--white); transition: transform 0.4s var(--ease-spring);
}
.next:hover .next__arrow { transform: rotate(-45deg) scale(1.08); }

/* ---------- Hero stage (standard hero for web work) ----------
   Mac + phone overlapping on the right, both screens playing the site, a
   highlighter squiggle behind in the brand colour, brand pieces around.
   Set --stage-hl on the stage for the squiggle colour. */
.stage { position: relative; aspect-ratio: 1 / 0.84; isolation: isolate; }
.stage__hl { position: absolute; inset: -8% -6% -6%; width: 112%; height: 114%; z-index: -1; overflow: visible; pointer-events: none; }
.stage__hl path { fill: none; stroke: var(--stage-hl, var(--hl-yellow)); stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: multiply; }
.stage__hl .thick { stroke-width: 74; opacity: 0.85; }
.stage__hl .thin { stroke-width: 26; opacity: 0.7; }
.stage .laptop { position: absolute; left: 0; top: 12%; width: 84%; z-index: 1; filter: drop-shadow(0 30px 40px rgb(24 24 26 / 0.22)); }
.stage .phone { position: absolute; right: 2%; bottom: 0; width: 25%; z-index: 3; }
.stage .pop { z-index: 4; }
@media (max-width: 900px) {
  /* Phones: Mac centred, phone bigger so it overlaps more */
  .stage { margin-top: 12px; aspect-ratio: 1 / 0.92; }
  .stage .laptop { left: 6%; width: 88%; top: 10%; }
  .stage .phone { width: 34%; right: -1%; bottom: 0; }
}

/* Project pages: every highlighter pen uses the project's brand colour.
   Set --project-pen on <body data-pen> in the project css. */
body[data-pen] .hl { --pen: var(--project-pen); }

/* Soft brand-coloured glow behind the hero devices (replaces the squiggle).
   Uses --stage-hl on the .stage. */
.stage__glow { position: absolute; inset: 2% 4% -2%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--stage-hl, var(--hl-yellow)) 70%, transparent), color-mix(in srgb, var(--stage-hl, var(--hl-yellow)) 22%, transparent) 62%, transparent); filter: blur(12px); pointer-events: none; }

/* Highlighter scribble behind the hero devices: thick, see-through marker strokes */
.stage__scribble { position: absolute; inset: 0 -2% 2% -4%; width: 106%; height: 98%; z-index: -1; overflow: visible; pointer-events: none; }
.stage__scribble path { fill: none; stroke: var(--stage-hl, var(--hl-yellow)); stroke-width: 74; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; mix-blend-mode: multiply; }
.stage .stage__glow { opacity: 0.6; }

/* ---------- Brief + what I did (compact, under the hero) ----------
   <section class="cs-brief wrap"><div class="cs-brief__grid">
     <div><span class="label">The brief</span><p class="cs-brief__text">…</p></div>
     <div><span class="label">What I did</span><ul class="cs-brief__list"><li>…</li></ul></div>
   </div></section> */
.cs-brief { padding-block: clamp(36px, 5vw, 64px) 0; }
.cs-brief__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.cs-brief__grid > div { display: grid; gap: 14px; align-content: start; }
.cs-brief__text { font-size: clamp(21px, 2.1vw, 28px); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; max-width: 30ch; }
.cs-brief__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.cs-brief__list li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; counter-increment: brief; }
.cs-brief__list { counter-reset: brief; }
.cs-brief__list li::before { content: counter(brief, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--grey-5); padding-top: 3px; }
@media (max-width: 800px) { .cs-brief__grid { grid-template-columns: 1fr; } }
/* Phones: "What I did" folds away behind a bar with a count (case.js adds the button) */
.cs-brief__toggle { display: none; }
@media (max-width: 800px) {
  .cs-brief__label:has(+ .cs-brief__toggle) { display: none; }
  .cs-brief__toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--grey-1); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background 0.3s, scale 0.2s var(--ease-out);
  }
  .cs-brief__toggle:active { scale: 0.98; }
  .cs-brief__toggle em { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--white); font-style: normal; font-size: 11px; font-weight: 700; }
  .cs-brief__toggle i { position: relative; width: 14px; height: 14px; margin-left: auto; }
  .cs-brief__toggle i::before, .cs-brief__toggle i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: rotate 0.4s var(--ease-spring); }
  .cs-brief__toggle i::after { rotate: 90deg; }
  .cs-brief__toggle[aria-expanded="true"] i::after { rotate: 0deg; }
  .cs-brief__list { display: grid; max-height: 0; overflow: hidden; opacity: 0; border-top-color: transparent; transition: max-height 0.5s var(--ease-out), opacity 0.35s; }
  .is-open > .cs-brief__list { max-height: 1200px; opacity: 1; }
  .is-open > .cs-brief__list li { animation: cs-brief-in 0.45s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 50ms); }
  @keyframes cs-brief-in { from { opacity: 0; translate: 0 8px; } }
}

/* ---------- Feature reel: every live feature in one pinned section ----------
   <section class="reel wrap" data-reel style="--reel-bg:#e5f1fb">
     <div class="reel__pin">
       <div class="reel__side"><header class="section-head">…</header>
         <ol class="reel__list"><li><button type="button"><span>01</span><b>Title</b><em>One line</em><i></i></button></li>…</ol></div>
       <div class="reel__stage"><div class="reel__slide"><div class="reel__fit">…live feature…</div></div>…</div>
     </div>
   </section>
   case.js pins it, steps through slides on scroll and scales each feature to fit. */
.reel { padding-block: clamp(40px, 6vw, 80px); }
.reel__pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: min(100svh, 900px); }
.reel__side .section-head { margin-bottom: 22px; }
.reel__side .section-head h2 { font-size: clamp(30px, 3.6vw, 50px); }
.reel__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reel__list button { position: relative; width: 100%; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; text-align: left; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; color: var(--grey-5); font: inherit; }
.reel__list span { font-size: 12px; font-weight: 700; padding-top: 5px; }
.reel__list b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.02em; transition: color 0.3s; }
.reel__list em { grid-column: 2; font-style: normal; font-size: 14px; color: var(--grey-7); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; }
.reel__list i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.reel__list li.is-on button { color: var(--ink); }
.reel__list li.is-on em { max-height: 60px; opacity: 1; margin-top: 4px; }
.reel__list button:hover b { color: var(--ink); }
.reel__stage {
  position: relative; display: grid; height: min(76svh, 700px); border-radius: var(--radius-l); overflow: hidden;
  background: var(--reel-bg, var(--grey-1)); box-shadow: inset 0 0 0 1px var(--line);
}
.reel__slide { grid-area: 1 / 1; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.98); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), visibility 0.5s; }
.reel__slide.is-on { opacity: 1; visibility: visible; transform: none; }
.reel__fit { transform-origin: center; width: max-content; flex: none; }
.reel__fit > * { margin: 0 !important; }
.reel__label { display: none; }
@media (max-width: 900px) {
  .reel__pin { grid-template-columns: 1fr; min-height: 0; }
  .reel__list { display: none; }
  .reel__stage { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 12px; background: none; box-shadow: none; border-radius: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .reel__slide { flex: 0 0 86%; opacity: 1; visibility: visible; transform: none; scroll-snap-align: center; border-radius: var(--radius-l); background: var(--reel-bg, var(--grey-1)); box-shadow: inset 0 0 0 1px var(--line); height: min(72svh, 560px); align-content: start; gap: 12px; padding: 18px; overflow: hidden; }
  .reel__label { display: block; justify-self: start; font-size: 14px; font-weight: 600; }
  .reel__label small { display: none; }
  .reel .reel__label { color: #18181a; }
  .reel__slide { grid-template-rows: auto 1fr; place-items: stretch; }
  .reel__slide .reel__fit { align-self: center; justify-self: center; }
}
/* Reel stage: keep slides to the stage box so features scale to fit */
.reel__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.reel__slide { min-width: 0; min-height: 0; overflow: hidden; }
@media (min-width: 901px) {
  .reel__slide { position: relative; }
  .reel__fit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
}
@media (max-width: 900px) {
  /* phones: features use their own responsive layout at full card width */
  .reel__stage { align-items: flex-start; }
  .reel__slide { display: block; height: auto; overflow: visible; }
  .reel__label { margin-bottom: 14px; }
  .reel__fit { width: 100% !important; transform: none !important; }
}

/* ---------- Device finish (applies to every laptop and phone on the site) ----------
   Laptop: black glass bezel inside a thin aluminium rim, camera dot, a soft sheen across
   the screen, brushed-aluminium base with a bright top edge. Phone: titanium-style edge
   and a faint glass reflection over the display. Sizes still come from each section. */
.laptop__lid {
  background: linear-gradient(180deg, #161618, #0a0a0b);
  box-shadow: 0 0 0 1px #b9b9be, 0 0 0 2px #6d6d72, inset 0 0 0 1px #2a2a2d;
}
.laptop__lid::before { background: radial-gradient(circle at 40% 40%, #3a4a5a, #0d1117 60%); box-shadow: 0 0 0 1px #222; }
.laptop__lid::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.13) 0%, rgb(255 255 255 / 0.04) 26%, transparent 42%);
}
.laptop__base {
  position: relative;
  background: linear-gradient(180deg, #f4f4f6 0%, #d9d9dc 22%, #bdbdc1 70%, #9d9da2 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgb(0 0 0 / 0.18), 0 1px 0 rgb(0 0 0 / 0.08);
}
.laptop__base::before { background: linear-gradient(180deg, #a9a9ae, #cfcfd3); box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.18); }
.phone {
  background:
    linear-gradient(#060607, #060607) padding-box,
    linear-gradient(140deg, #e2e2e6 0%, #6a6a70 20%, #d2d2d7 46%, #505055 72%, #d6d6db 100%) border-box;
  box-shadow: 0 40px 60px -28px rgb(17 17 17 / 0.5), 0 12px 24px -12px rgb(17 17 17 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.phone__display::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(122deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.05) 24%, transparent 42%);
}
/* performance: the glow is already a soft radial gradient; the blur filter only added repaints */
.stage__glow { filter: none !important; }