/* ══════════════════════════════════════════════════════════════
   ANTREAS PATSIANTOS — 2026
   Ink black · orange · cream. Condensed display, kinetic type.
   ══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #06070A;
  --ink-2:      #0C0E13;
  --ink-3:      #14171E;
  --cream:      #F2EFE9;
  --mute:       #8B8F99;
  --mute-2:     #5A5F6B;
  --accent:     #FF7A1A;
  --accent-2:   #B8480A;
  --line:       rgba(242, 239, 233, 0.10);
  --line-2:     rgba(242, 239, 233, 0.055);

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Smooth-scroll wrapper: JS translates this; body height is set to match. */
#scroll-content { will-change: transform; }
body.no-smooth #scroll-content { transform: none !important; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ─────────── Grain ─────────── */
#grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

/* ─────────── Nav ─────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: padding 0.4s var(--ease);
  text-shadow: 0 1px 12px rgba(6, 7, 10, 0.85);
}
.nav.stuck {
  /* No bar, no gradient: any background edge — even a fade's end — reads as
     a line across the hero footage. The hero's own scrim darkens the top of
     the frame, and the text-shadow below keeps the links legible elsewhere. */
  padding-top: 14px; padding-bottom: 14px;
}
.nav-mark {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  letter-spacing: 0.06em; line-height: 1;
}
.nav-mark span { color: var(--accent); }
.nav-links { display: flex; gap: clamp(16px, 3vw, 34px); align-items: center; font-size: 13px; }
.nav-links a { color: var(--mute); transition: color 0.3s; letter-spacing: 0.02em; }
.nav-links a:hover { color: var(--cream); }
.nav-links a.cta {
  color: var(--ink); background: var(--accent);
  padding: 9px 18px; border-radius: 100px; font-weight: 600;
}
.nav-links a.cta:hover { background: var(--cream); }
@media (max-width: 640px) { .nav-links .hide-sm { display: none; } }

/* ─────────── Hero ─────────── */
/* ~2.3 viewports tall: the page keeps moving while the orbit plays. The
   title block lives in the first viewport and scrolls away with the page;
   the footage panel is viewport-sized and held in frame by JS until the
   section's height is spent. */
.hero {
  position: relative; z-index: 2;
  min-height: 230svh;
  overflow: hidden;
}
.hero-stage {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--pad) 60px;
  position: relative; z-index: 2;
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; position: relative; z-index: 2; }

/* Second beat of the hero: fills the rotation stretch so the scroll past the
   footage carries a message instead of empty ink. Sits on the left, where
   the scrim keeps type readable while the subject turns on the right. */
.hero-stage2 {
  min-height: 130svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad);
  position: relative; z-index: 2;
}
.hero-statement {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 7.5vw, 110px); line-height: 0.95;
  letter-spacing: -0.01em; max-width: 14em;
  text-shadow: 0 2px 40px rgba(6, 7, 10, 0.95);
}
.hero-statement span { display: block; }
.hero-statement .acc { color: var(--accent); }

/* ─────────── Full-bleed orbit frame sequence ─────────── */
/* The 360° orbit fills the viewport and is scrubbed by scroll. Frames are
   pre-decoded WebP stills drawn to a canvas — no video decoding, so seeking
   costs nothing. The still portrait underneath shows until frames arrive
   (and stays for reduced-motion). */
.hero-media {
  position: absolute; top: 0; left: 0; right: 0; height: 100svh;
  z-index: 0; overflow: hidden; will-change: transform;
}
.hero-media canvas {
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.hero-media.ready canvas { opacity: 1; }
.hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.1) brightness(0.6);
  transition: opacity 0.7s var(--ease);
}
.hero-media.ready .hero-fallback { opacity: 0; }

/* Keeps the display type readable over footage: heavy on the left where the
   name sits, clearing toward the right so the shot is actually visible, and
   sinking to solid ink at the bottom so the hero joins the next section. */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,7,10,0.90) 0%, rgba(6,7,10,0.66) 40%, rgba(6,7,10,0.20) 78%, rgba(6,7,10,0.32) 100%),
    linear-gradient(180deg, rgba(6,7,10,0.78) 0%, rgba(6,7,10,0) 24%, rgba(6,7,10,0) 52%, var(--ink) 100%);
}

.hero-eyebrow {
  position: relative; z-index: 2;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute-2); margin-bottom: 18px;
}
.hero-title {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(58px, 15.5vw, 240px);
  line-height: 0.82; letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero-title .ln { display: block; }
.hero-title .ln.last { color: var(--mute); }
.hero-title .ch {
  display: inline-block;
  opacity: 0; transform: translateY(0.42em) rotate(3deg);
  animation: chIn 0.85s var(--ease) forwards;
}
@keyframes chIn { to { opacity: 1; transform: none; } }
.hero-title .dot { color: var(--accent); }

.hero-sub {
  position: relative; z-index: 2;
  margin-top: 30px; max-width: 460px;
  font-size: clamp(15px, 1.5vw, 18px); color: var(--mute);
}
.hero-sub strong { color: var(--cream); font-weight: 500; }
.hero-actions {
  position: relative; z-index: 2;
  margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.hero-scroll {
  position: absolute; top: calc(100svh - 70px); left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mute-2); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.hero-scroll .bar {
  width: 1px; height: 42px;
  background: linear-gradient(var(--accent), transparent);
}

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  padding: 13px 24px; border-radius: 100px;
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-solid:hover { background: var(--cream); border-color: var(--cream); }
.btn-ghost { color: var(--cream); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ─────────── Section backdrop video ─────────── */
/* Ambient footage behind a section. Held well back so type stays readable:
   low opacity, desaturated, and veiled top and bottom so it fades into the
   ink rather than ending on a hard edge. */
/* Held: viewport-sized panel pinned in frame by JS while its tall host
   section travels past — the same mechanic as the hero. */
.section-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 100svh;
  overflow: hidden; z-index: -1; pointer-events: none; will-change: transform;
}
.section-bg canvas {
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.7s var(--ease);
  /* tone (grayscale/contrast) is baked into the frames — no per-frame CSS filter */
}
.section-bg.ready canvas { opacity: 0.62; }
/* Only the very top and bottom edges go to solid ink, so the section joins
   its neighbours cleanly while the middle of the footage stays legible. */
.section-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(6,7,10,0.42) 14%, rgba(6,7,10,0.42) 86%, var(--ink) 100%);
}
.has-bg { position: relative; isolation: isolate; }
/* Brighter footage needs the type defended: lift the body greys, and let
   headings carry a soft ink halo so they never sit on a busy frame. */
.has-bg .pillar-b,
.has-bg .lede { color: #B7BBC4; }
.has-bg .h2,
.has-bg .pillar-t,
.has-bg .pillar-n { text-shadow: 0 2px 34px rgba(6, 7, 10, 0.92); }
.has-bg .card {
  background: rgba(12, 14, 19, 0.86);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* ─────────── Section furniture ─────────── */
.section { position: relative; z-index: 2; padding: clamp(80px, 12vh, 150px) 0; }
.section + .section { border-top: 1px solid var(--line-2); }
.label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 26px;
  display: flex; align-items: center; gap: 12px;
}
.label::before {
  content: ""; width: 26px; height: 1px; background: var(--accent); opacity: 0.55;
}
.h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 7vw, 96px); line-height: 0.9; letter-spacing: -0.01em;
}
.lede { color: var(--mute); max-width: 620px; margin-top: 20px; font-size: 17px; }

/* ─────────── Stats ─────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--ink); padding: clamp(24px, 4vw, 44px) clamp(14px, 2vw, 28px); }
.stat-v {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(48px, 7vw, 92px); line-height: 1;
  color: var(--cream); font-variant-numeric: tabular-nums;
}
.stat-l {
  margin-top: 10px; font-size: 12.5px; color: var(--mute);
  letter-spacing: 0.04em;
}

/* ─────────── Pillars ─────────── */
.pillars { display: flex; flex-direction: column; }
.pillar {
  display: grid; grid-template-columns: 90px 1fr 1fr; gap: clamp(18px, 4vw, 56px);
  padding: clamp(30px, 5vw, 54px) 0; border-top: 1px solid var(--line-2);
  transition: background 0.5s var(--ease);
}
.pillar:hover { background: rgba(255, 122, 26, 0.022); }
@media (max-width: 860px) { .pillar { grid-template-columns: 1fr; gap: 12px; } }
.pillar-n {
  font-family: var(--display); font-size: 40px; font-weight: 700;
  color: var(--accent); line-height: 1;
}
.pillar-t {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 0.95;
}
.pillar-b { color: var(--mute); font-size: 15.5px; }
.pillar-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-size: 11px; letter-spacing: 0.05em; color: var(--mute-2);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px;
}

/* ─────────── Showcase ─────────── */
/* The gallery clip gets a full viewport of its own. Behind the work grid it
   was invisible — a two-column card grid leaves almost no gaps to see
   through, so the footage was doing nothing. Here it carries the section
   title on its own and the grid follows on clean ink. */
.showcase {
  position: relative; z-index: 2;
  min-height: 230svh;
  overflow: hidden;
  border-top: 1px solid var(--line-2);
}
.showcase-stage,
.showcase-stage2 {
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 2;
}
.showcase-stage { min-height: 100svh; }
.showcase-stage2 { min-height: 130svh; }
.showcase-media {
  position: absolute; top: 0; left: 0; right: 0; height: 100svh;
  z-index: 0; overflow: hidden; will-change: transform;
}
.showcase-media canvas {
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.8s var(--ease);
}
.showcase-media.ready canvas { opacity: 1; }
.showcase-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,7,10,0.88) 0%, rgba(6,7,10,0.60) 46%, rgba(6,7,10,0.14) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(6,7,10,0) 26%, rgba(6,7,10,0) 62%, var(--ink) 100%);
}
.showcase-inner { position: relative; z-index: 2; width: 100%; }
.showcase-inner .h2 { text-shadow: 0 2px 40px rgba(6, 7, 10, 0.95); }
.showcase-inner .lede { color: #C2C6CE; }

/* ─────────── Work grid ─────────── */
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 26px);
}
@media (max-width: 820px) { .work-grid { grid-template-columns: 1fr; } }
.card {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--ink-2);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.card:hover { border-color: rgba(255, 122, 26, 0.4); transform: translateY(-4px); }
.card-media {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  aspect-ratio: 16 / 9; overflow: hidden; text-align: center; padding: 22px;
  background: var(--bg, var(--ink-3));
}
.card-logo {
  height: 40%; max-width: 56%; width: auto; object-fit: contain;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,0.6));
  transition: transform 0.6s var(--ease);
}
.card-logo.wide { height: auto; max-height: 34%; max-width: 72%; }
.card:hover .card-logo { transform: scale(1.07); }
.card-wordmark {
  font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 58px);
  line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 75%, var(--cream));
}
.card-punch {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(19px, 1.75vw, 23px); line-height: 1.16; letter-spacing: 0.05em;
  color: rgba(242, 239, 233, 0.96); max-width: 86%;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
/* Photo-backdrop variant: full-bleed photo behind the logo + punchline,
   with a scrim so both stay legible over it. */
.card-bgimg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.card:hover .card-bgimg { transform: scale(1.05); }
.card-media.has-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6, 7, 10, 0.30), rgba(6, 7, 10, 0.78) 82%);
}
.card-media.has-bg .card-logo, .card-media.has-bg .card-punch {
  position: relative; z-index: 2;
}
.card-media.has-bg .card-logo { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.75)); }
/* Over a photo, square icon artwork fills its rounded box edge-to-edge —
   the translucent frame reads as a muddy frosted square there. */
.card-media.has-bg .card-logo.icon { padding: 0; background: none; object-fit: cover; }

/* Full-bleed artwork variant: the illustration is the tile, punchline on a scrim. */
.card-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.card:hover .card-art { transform: scale(1.05); }
.card-punch-art {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: none;
  padding: 34px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 10, 0.88) 55%);
}
.card-body { padding: clamp(18px, 2.4vw, 28px); }
.card-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.card-kicker {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 70%, var(--cream)); margin-bottom: 10px;
}
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pill {
  font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--cream);
  transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.pill:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.pill-solid { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.pill-solid:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.card-n { font-size: 12px; color: var(--mute-2); font-variant-numeric: tabular-nums; }
.card-name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 38px); line-height: 1;
  transition: color 0.3s;
}
.card:hover .card-name { color: var(--accent); }
.card-tag { color: var(--mute); font-size: 14.5px; margin-bottom: 14px; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.chip {
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; border: 1px solid var(--line);
  color: var(--mute);
}
.chip.live { color: var(--accent); border-color: rgba(255, 122, 26, 0.38); }
.chip.live::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
.chip.wip { color: #7FA6D0; border-color: rgba(127, 166, 208, 0.34); }

/* ─────────── About ─────────── */
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 6vw, 80px); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-grid p { color: var(--mute); font-size: 16.5px; }
.about-grid p + p { margin-top: 16px; }
.facts { display: flex; flex-direction: column; }
.fact {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line-2); font-size: 14px;
}
.fact .k { color: var(--mute-2); white-space: nowrap; }
.fact .v { text-align: right; }

/* ─────────── Experience ─────────── */
.exp { display: grid; grid-template-columns: 150px 1fr; gap: clamp(16px, 3vw, 40px); padding: 26px 0; border-top: 1px solid var(--line-2); }
@media (max-width: 700px) { .exp { grid-template-columns: 1fr; gap: 6px; } }
.exp-date { font-size: 12.5px; color: var(--mute-2); letter-spacing: 0.05em; padding-top: 4px; }
.exp-role { font-family: var(--display); font-size: 26px; font-weight: 700; text-transform: uppercase; line-height: 1; }
.exp-org { font-size: 13.5px; color: var(--accent); margin: 7px 0 9px; }
.exp-body { font-size: 15px; color: var(--mute); max-width: 620px; }

/* ─────────── Finale ─────────── */
.finale { text-align: center; padding: clamp(90px, 16vh, 190px) 0; }
.finale .h2 { font-size: clamp(44px, 11vw, 168px); }
.finale .h2 em { font-style: normal; color: var(--accent); }
.finale-actions { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─────────── Footer ─────────── */
.footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-2);
  padding: 34px 0;
  font-size: 13px; color: var(--mute-2);
}
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--mute); transition: color 0.3s; }
.footer-links a:hover { color: var(--accent); }

/* ─────────── Reveal ─────────── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }

/* ══════════════ Case study pages ══════════════ */
.cs-hero { padding: 170px var(--pad) 60px; position: relative; z-index: 2; }
.cs-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.cs-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--mute); margin-bottom: 34px;
  transition: color 0.3s, gap 0.3s;
}
.cs-back:hover { color: var(--accent); gap: 13px; }
.cs-n { font-size: 12px; color: var(--mute-2); letter-spacing: 0.18em; margin-bottom: 14px; }
.cs-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 11vw, 170px); line-height: 0.85; letter-spacing: -0.015em;
}
.cs-tagline { margin-top: 24px; font-size: clamp(17px, 2vw, 23px); color: var(--mute); max-width: 720px; }
.cs-chips { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }

.cs-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-2); margin-top: 56px;
}
@media (max-width: 760px) { .cs-meta { grid-template-columns: repeat(2, 1fr); } }
.cs-meta-cell { background: var(--ink); padding: 22px 20px; }
.cs-meta-k { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 9px; }
.cs-meta-v { font-size: 14px; line-height: 1.45; }

.cs-body { max-width: 760px; }
.cs-body p { color: var(--mute); font-size: 17px; }
.cs-body p + p { margin-top: 18px; }
.cs-list { list-style: none; margin-top: 10px; }
.cs-list li {
  position: relative; padding: 17px 0 17px 30px;
  border-bottom: 1px solid var(--line-2); color: var(--cream); font-size: 15.5px;
}
.cs-list li::before {
  content: ""; position: absolute; left: 3px; top: 26px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.cs-note {
  margin-top: 26px; padding: 15px 18px; font-size: 13.5px; color: var(--mute);
  border-left: 2px solid var(--accent); background: rgba(255, 122, 26, 0.035);
}
.cs-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2vw, 22px); }
@media (max-width: 700px) { .cs-gallery { grid-template-columns: 1fr; } }
.cs-shot { border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.cs-shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(0.35) brightness(0.88); transition: filter 0.5s; }
.cs-shot:hover img { filter: none; }
.cs-shot figcaption { padding: 12px 15px; font-size: 12.5px; color: var(--mute-2); }

.cs-next {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(40px, 8vw, 90px) 0; border-top: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.cs-next-k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 10px; }
.cs-next-n {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 6vw, 72px); line-height: 0.95; transition: color 0.3s;
}
.cs-next:hover .cs-next-n { color: var(--accent); }

/* ─────────── Reduced motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-title .ch { opacity: 1; transform: none; }
  .rv { opacity: 1; transform: none; }
  #grain { animation: none; }
}

/* ─────────── Pacing ─────────── */
/* The builder clip needs room to breathe: extra vertical padding gives the
   pillars section roughly two scrolls of travel, and the clip is mapped
   across all of it. */
#pillars { min-height: 230svh; display: flex; align-items: center; padding: clamp(140px, 20vh, 240px) 0; }
#pillars > .wrap { width: 100%; }

/* Reduced motion collapses the tall hero back to a single quiet viewport. */
@media (prefers-reduced-motion: reduce) {
  .hero { min-height: 100svh; }
  .hero-stage2 { display: none; }
  #pillars, .showcase { min-height: 0; }
  .showcase-stage, .showcase-stage2 { min-height: 0; padding: clamp(60px, 10vh, 120px) 0; }
}

/* ─────────── Case study: under the hood ─────────── */
.cs-plumb { display: flex; flex-direction: column; }
.cs-plumb-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line-2);
}
@media (max-width: 600px) { .cs-plumb-row { grid-template-columns: 1fr; gap: 4px; } }
.cs-plumb-k {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); padding-top: 3px;
}
.cs-plumb-v { font-size: 15px; color: var(--mute); }

/* Phone-screenshot galleries: tall store shots shown whole, never cropped. */
.cs-gallery.phones { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cs-gallery.phones .cs-shot img {
  aspect-ratio: 600 / 1300; object-fit: contain; background: var(--ink-2);
}

/* ─────────── Case study: audience toggle ─────────── */
.cs-toggle { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.cs-tab {
  font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 12px 22px; border-radius: 100px; border: 1px solid var(--line);
  background: transparent; color: var(--mute);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.cs-tab:hover { color: var(--cream); border-color: var(--line); }
.cs-tab.active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.cs-biz-block { max-width: 760px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.cs-biz-block:first-child { padding-top: 0; }
.cs-biz-k {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1; margin-bottom: 10px;
}
.cs-biz-v { color: var(--mute); font-size: 16.5px; }

/* ─────────── Stats finale ─────────── */
/* The last stat is the punchline: it lands after the others, in the accent,
   with a pop — "1 person behind all of it". */
.stat:last-child .stat-v { color: var(--mute-2); transition: color 0.4s; }
.stat-final:last-child .stat-v { color: var(--accent); animation: statPop 0.6s var(--ease); }
.stat-final:last-child .stat-l { color: var(--cream); }
@keyframes statPop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ?flat — screenshot/test mode: native scroll, everything revealed. */
.flat .rv { opacity: 1 !important; transform: none !important; }
.flat .hero-title .ch { opacity: 1; transform: none; animation: none; }
.flat #grain { display: none; }
.flat .card-media canvas, .flat .hero-media canvas { opacity: 1; }

/* App-icon-style logos: rounded square with a ring, so dark icons still
   read against the ink and square store icons look like app icons. */
.card-logo.icon {
  height: 54%; aspect-ratio: 1; width: auto; object-fit: contain; padding: 5%;
  border-radius: 22%;
  background: rgba(242, 239, 233, 0.04);
  box-shadow: 0 0 0 1px var(--line), 0 12px 38px rgba(0, 0, 0, 0.6);
}
/* Icons whose rounded-square shape is baked into the image (with alpha)
   sit directly on the tile — no box, or its corners show as a frame. */
.card-logo.self { height: 54%; aspect-ratio: 1; width: auto; object-fit: contain; }