/* ============================================================
   WE MAKE TREASURES — PROJECT CASE STUDY TEMPLATE
   Shared components for /projects/[slug].
   Layout variants gated by  [data-cv="a"]  /  [data-cv="b"]
   ============================================================ */

/* ---------- shared section heading (mono index + title) ---------- */
.cs-shead { display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
  align-items: baseline; margin-bottom: var(--s7); }
.cs-shead .ix { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--coral); }
.cs-shead h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(26px, 3.4vw, 50px);
  letter-spacing: -0.02em; line-height: 1.0; text-wrap: balance; }
.cs-shead .aside { grid-column: 2; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin-top: 10px; }
.s--ink .cs-shead .aside { color: var(--graphite-d); }

/* ---------- breadcrumb / back bar ---------- */
.cs-crumb { position: relative; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: clamp(86px,11vh,120px) 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite-d); }
.cs-crumb a { color: var(--graphite-d); transition: color .15s; }
.cs-crumb a:hover { color: var(--paper); }
.cs-crumb .sep { opacity: .5; }
.cs-crumb .cur { color: var(--paper); }
@media (max-width: 760px){ .cs-crumb { padding-bottom: clamp(20px,6vw,36px); } }

/* ============================================================
   HERO — VARIANT A  (split: text left, tall media right)
   ============================================================ */
.cs-hero { position: relative; background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--line-d); overflow: hidden; }
.cs-hero .grid-bg { position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: linear-gradient(180deg,#000,transparent 92%); }

[data-cv="a"] .cs-hero-inner { position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px,4vw,64px);
  align-items: end; padding-bottom: clamp(40px,6vh,72px); padding-top: clamp(20px,3vh,34px); }
[data-cv="a"] .cs-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--coral); display: inline-flex; align-items: center; gap: 10px; }
[data-cv="a"] .cs-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--coral); }
[data-cv="a"] .cs-title { font-family: var(--sans); font-weight: 600; font-stretch: 78%;
  font-size: clamp(40px, 6.6vw, 104px); line-height: 0.92; letter-spacing: -0.02em;
  margin: clamp(18px,2.4vh,28px) 0 0; text-wrap: balance; }
[data-cv="a"] .cs-sub { font-size: clamp(17px,1.4vw,21px); line-height: 1.4; color: rgba(255,255,255,.78);
  max-width: 46ch; margin-top: var(--s5); }
[data-cv="a"] .cs-hero-media { position: relative; aspect-ratio: 4/5; border: 1px solid var(--line-d); }
[data-cv="a"] .cs-hero-media image-slot { display: block; width: 100%; height: 100%; }
[data-cv="a"] .cs-hero-tag { position: absolute; left: 0; bottom: 0; z-index: 3; }

/* hero key-result strip (shared) */
.cs-keyline { position: relative; z-index: 2; display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--line-d); }
.cs-keyline .k { flex: 1 1 0; min-width: 150px; padding: clamp(20px,2.6vh,30px) clamp(16px,2vw,28px);
  border-right: 1px solid var(--line-d); }
.cs-keyline .k:last-child { border-right: 0; }
.cs-keyline .kn { font-family: var(--sans); font-weight: 600; font-size: clamp(26px,3vw,46px);
  line-height: 0.92; letter-spacing: -0.02em; }
.cs-keyline .kn .coral { color: var(--coral); }
.cs-keyline .kl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite-d); margin-top: 10px; }

/* ============================================================
   HERO — VARIANT B  (full-bleed cinematic)
   ============================================================ */
.cs-hero--cine { min-height: min(94vh, 940px); display: flex; flex-direction: column;
  isolation: isolate; border-bottom: 0; }
.cs-hero-bg { position: absolute; inset: 0; z-index: 0; }
.cs-hero-bg image-slot { display: block; width: 100%; height: 100%; }
.cs-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,18,22,.55) 0%, rgba(16,18,22,.30) 38%, rgba(16,18,22,.92) 100%); }
.cs-hero-darken { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--ink); opacity: 0; }
.cs-hero--cine .cs-crumb { padding-top: clamp(86px,11vh,120px); }
.cs-hero--cine .wrap { position: relative; z-index: 3; width: 100%; }
[data-cv="b"] .cs-hero-overlay { position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(30px,4vh,48px); }
[data-cv="b"] .cs-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper); display: inline-flex; align-items: center; gap: 10px; }
[data-cv="b"] .cs-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--coral); }
[data-cv="b"] .cs-title { font-family: var(--sans); font-weight: 600; font-stretch: 80%;
  font-size: clamp(46px, 9vw, 150px); line-height: 0.9; letter-spacing: -0.025em;
  margin: clamp(16px,2vh,24px) 0 0; max-width: 16ch; text-wrap: balance; }
[data-cv="b"] .cs-sub { font-size: clamp(17px,1.5vw,22px); line-height: 1.4; color: rgba(255,255,255,.85);
  max-width: 52ch; margin-top: var(--s5); }
.cs-hero-cta { margin-top: var(--s6); }
/* per-line box-wipe reveal: white box sweeps in L→R to cover, then retracts L→R to reveal */
.cs-wipe.reveal { opacity: 1; transform: none; }
.cs-wipe-line { display: block; width: fit-content; max-width: 100%; position: relative; --tw-delay: 0s; }
.cs-wipe-line:nth-child(2){ --tw-delay: .12s; }
.cs-wipe-line:nth-child(3){ --tw-delay: .24s; }
.cs-wipe-line:nth-child(4){ --tw-delay: .36s; }
.cs-wipe-line:nth-child(5){ --tw-delay: .48s; }
.cs-wipe-line:nth-child(6){ --tw-delay: .6s; }
.cs-wipe-line:nth-child(7){ --tw-delay: .72s; }
.cs-wipe-line + .cs-wipe-line { margin-top: 0; }
.cs-wipe-ink { display: inline-block; opacity: 0; }
.cs-wipe-line::after { content: ""; position: absolute; top: -0.06em; bottom: -0.06em; left: 0; right: 0;
  background: var(--ink); clip-path: inset(0 100% 0 0); pointer-events: none; }
/* white box on dark / coral grounds; ink box (default above) on light grounds */
.s--ink .cs-wipe-line::after, .s--coral .cs-wipe-line::after, .cta-band .cs-wipe-line::after,
.hero .cs-wipe-line::after, .beat-sec .cs-wipe-line::after, .cs-hero .cs-wipe-line::after,
.cs-hero--cine .cs-wipe-line::after, .cs-ov-sec--ink .cs-wipe-line::after,
.cs-ov-sec--coral .cs-wipe-line::after, .cs-deliv-sec--ink .cs-wipe-line::after,
.newsroom .cs-wipe-line::after, .wk-statement .cs-wipe-line::after { background: var(--paper); }
.cs-wipe.in .cs-wipe-ink { animation: cs-wipe-ink 1.15s steps(1) forwards; animation-delay: var(--tw-delay, 0s); }
.cs-wipe.in .cs-wipe-line::after { animation: cs-wipe-box 1.15s cubic-bezier(.76,0,.24,1) forwards; animation-delay: var(--tw-delay, 0s); }
@keyframes cs-wipe-box {
  0%   { clip-path: inset(0 100% 0 0); }
  46%  { clip-path: inset(0 0 0 0); }
  54%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes cs-wipe-ink { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } }
[data-motion="off"] .cs-wipe-ink, .no-anim .cs-wipe-ink { opacity: 1 !important; animation: none !important; }
[data-motion="off"] .cs-wipe-line::after, .no-anim .cs-wipe-line::after { display: none; }
@media (prefers-reduced-motion: reduce){ .cs-wipe-ink { opacity: 1; animation: none; } .cs-wipe-line::after { display: none; } }

/* user: no basic fade-in on text — entrance handled only by wipe / typewriter / nothing */
.cs-sub.reveal, .cs-facts.reveal, .cs-eyebrow.reveal,
.cs-ov-head.reveal, .cs-ov-body.reveal, .cs-ov-splitbody.reveal,
.cs-shead.reveal, .cs-deliv-head.reveal, .cs-deliv-list.reveal,
.cs-bigstat.reveal, .cs-bigstat-row.reveal, .cs-results-eyebrow.reveal,
.cs-quote.reveal {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* page-scoped: remove all basic scroll fade-ins (entrance handled by wipe/typewriter) */
[data-nofade] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* typewriter caret for eyebrows/subtitles */
.tw-rest { visibility: hidden; }
.tw-caret { display: inline-block; width: 0.5ch; margin-right: -0.5ch; height: 1.02em;
  background: currentColor; transform: translateY(0.14em); animation: tw-blink .9s steps(1) infinite; }
@keyframes tw-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* bottom stat band */
.cs-hero-band { position: relative; z-index: 3; display: grid;
  grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.22); }
.cs-hero-band .hb { padding: clamp(18px,2.4vh,26px) var(--s5); border-right: 1px solid rgba(255,255,255,.22); }
.cs-hero-band .hb:last-child { border-right: 0; }
.cs-hero-band .hb:first-child { padding-left: var(--s6); }
.cs-hero-band .hb:last-child { padding-right: var(--s6); }
.cs-hero-band .n { font-family: var(--sans); font-weight: 600; font-size: clamp(18px,1.7vw,26px);
  line-height: 0.95; letter-spacing: -0.02em; color: var(--paper); }
.cs-hero-band .n .coral { color: var(--paper); }
.cs-hero-band .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,.66); margin-top: 9px; }

/* play affordance (shared) */
.cs-play { display: inline-flex; align-items: center; justify-content: center;
  width: clamp(64px,7vw,104px); height: clamp(64px,7vw,104px); border-radius: 50%;
  background: var(--coral); color: var(--ink); transition: transform .25s cubic-bezier(.16,.84,.3,1), background .2s; }
.cs-play svg { width: 30%; height: 30%; margin-left: 8%; }
a:hover > .cs-play, .cs-video-frame:hover .cs-play { transform: scale(1.06); background: var(--paper); }

/* ============================================================
   AT-A-GLANCE FACTS
   ============================================================ */
/* B: horizontal spec band */
.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.s--ink .cs-facts { border-top-color: var(--line-d); }
.cs-fact { padding: var(--s5) var(--s5) var(--s6); border-right: 1px solid var(--line); }
.s--ink .cs-fact { border-right-color: var(--line-d); }
.cs-fact:last-child { border-right: 0; }
.cs-fact .fl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite); }
.s--ink .cs-fact .fl { color: var(--graphite-d); }
.cs-fact .fv { font-size: clamp(15px,1.2vw,18px); font-weight: 500; line-height: 1.32; margin-top: 10px; letter-spacing: -0.01em; }
.cs-fact .fv span { display: block; }
/* facts folded into the dark cinematic hero */
.cs-hero--cine .cs-facts { position: relative; z-index: 3; border-top-color: rgba(255,255,255,.22); }
.cs-hero--cine .cs-fact { border-right-color: rgba(255,255,255,.22); padding: clamp(18px,2.4vh,26px) var(--s5);
  display: flex; flex-direction: column; gap: 9px; }
.cs-hero--cine .cs-fact .fv { font-family: var(--sans); font-weight: 600; font-size: clamp(18px,1.7vw,26px);
  line-height: 1.02; letter-spacing: -0.01em; color: var(--paper); margin: 0; }
.cs-hero--cine .cs-fact .fl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
.cs-hero--cine .cs-facts .cs-fact:first-child { padding-left: var(--s6); }
.cs-hero--cine .cs-facts .cs-fact:last-child { padding-right: var(--s6); }

/* ============================================================
   READ BLOCK — brief / approach
   ============================================================ */
/* A: sticky facts rail + narrative */
.cs-readgrid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px,5vw,90px); align-items: start; }
.cs-rail { position: sticky; top: 96px; align-self: start; }
.cs-rail-panel { border: 1px solid var(--line); }
.s--ink .cs-rail-panel { border-color: var(--line-d); }
.cs-rail-row { padding: 15px var(--s5); border-bottom: 1px solid var(--line); }
.s--ink .cs-rail-row { border-bottom-color: var(--line-d); }
.cs-rail-row:last-child { border-bottom: 0; }
.cs-rail-row .fl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite); }
.s--ink .cs-rail-row .fl { color: var(--graphite-d); }
.cs-rail-row .fv { font-size: 15px; font-weight: 500; line-height: 1.34; margin-top: 7px; }

.cs-narr { max-width: 58ch; }
.cs-narr .cs-lead { font-size: clamp(22px,2.4vw,34px); line-height: 1.22; font-weight: 500;
  letter-spacing: -0.015em; text-wrap: pretty; }
.cs-narr p { font-size: clamp(16px,1.15vw,18px); line-height: 1.6; color: var(--graphite);
  margin-top: var(--s5); text-wrap: pretty; }
.s--ink .cs-narr p { color: rgba(255,255,255,.74); }
.cs-narr p + p { margin-top: var(--s4); }
.cs-narr .cs-lead + p { margin-top: var(--s6); }

/* B: centred measured column */
.cs-readcol { max-width: 760px; margin: 0 auto; text-align: center; }
.cs-readcol .cs-lead { font-size: clamp(26px,3.2vw,46px); line-height: 1.12; font-weight: 600;
  letter-spacing: -0.02em; text-wrap: balance; }
.cs-readcol .cs-body { max-width: 60ch; margin: var(--s7) auto 0; text-align: left;
  column-count: 2; column-gap: var(--s7); }
.cs-readcol .cs-body p { font-size: 16px; line-height: 1.62; color: var(--graphite); text-wrap: pretty; break-inside: avoid; }
.cs-readcol .cs-body p + p { margin-top: var(--s4); }
@media (max-width: 760px){ .cs-readcol .cs-body { column-count: 1; } }

/* editorial "Project Overview" block (matches reference: eyebrow + big left
   headline, body in a lower-left measured column, vertical rule + marker) */
.s.cs-ov-sec { padding-top: 0; padding-bottom: 0; }
.s.cs-pb0 { padding-bottom: 0; }
.s.cs-pad-sm { padding-top: clamp(40px,5vw,72px); padding-bottom: clamp(40px,5vw,72px); }
.s.cs-deliv-sec { padding-top: 0; padding-bottom: 0; }
.cs-ov { display: grid; grid-template-columns: 1fr clamp(40px, 7vw, 110px); align-items: stretch; }
.cs-ov-main { padding: clamp(64px,9vw,128px) clamp(28px,3vw,56px) clamp(64px,9vw,128px) 0; min-width: 0; }
.cs-ov-rail { border-left: 1px solid var(--line-strong); }
/* remix: mirrored — rule on the left, statement + body side-by-side */
.cs-ov--mirror { grid-template-columns: clamp(40px,7vw,110px) 1fr; }
.cs-ov--mirror .cs-ov-rail { border-left: 0; border-right: 1px solid var(--line-strong); }
.cs-ov--mirror .cs-ov-main { padding: clamp(64px,9vw,128px) 0 clamp(64px,9vw,128px) clamp(28px,3vw,56px); }
.cs-ov-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,90px);
  align-items: start; margin-top: clamp(28px,3.5vw,52px); }
.cs-ov-split .cs-ov-lead { max-width: 18ch; margin: 0; }
.cs-ov-splitbody { max-width: 46ch; }
.cs-ov-splitbody p { font-size: clamp(16px,1.2vw,18px); line-height: 1.55; color: var(--graphite); text-wrap: pretty; }
.cs-ov-splitbody p + p { margin-top: var(--s4); }
@media (max-width: 760px){
  .cs-ov--mirror { grid-template-columns: 1fr; }
  .cs-ov--mirror .cs-ov-rail { display: none; }
  .cs-ov--mirror .cs-ov-main { padding: var(--s8) 0; }
  .cs-ov-split { grid-template-columns: 1fr; gap: var(--s5); }
}
.cs-ov-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); margin-bottom: clamp(26px,3.6vw,52px); }
.cs-ov-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500; color: var(--ink); }
.cs-ov-marker { flex: 0 0 auto; width: 9px; height: 9px; background: var(--ink); margin-top: 3px; }
.cs-ov-lead { font-family: var(--sans); font-weight: 600; font-stretch: 100%;
  font-size: clamp(30px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -0.02em;
  max-width: 26ch; text-wrap: pretty; }
.cs-ov-body { max-width: none; margin-top: clamp(28px, 3.5vw, 60px);
  column-count: 2; column-gap: clamp(40px, 6vw, 110px); }
.cs-ov-body p { font-size: clamp(16px,1.2vw,18px); line-height: 1.55; color: var(--graphite); text-wrap: pretty;
  margin-bottom: var(--s5); break-inside: avoid; }
@media (max-width: 760px){
  .cs-ov { grid-template-columns: 1fr; }
  .cs-ov-rail { display: none; }
  .cs-ov-main { padding: var(--s8) 0; }
  .cs-ov-marker { margin-right: 0; }
  .cs-ov-body { margin-top: var(--s7); max-width: none; column-count: 1; }
}

/* overview tone modifiers */
.cs-ov-sec--coral { background: var(--coral); color: var(--ink); }
.cs-ov-sec--coral .cs-ov-rail { border-left-color: rgba(16,18,22,.28); }
.cs-ov-sec--coral .cs-ov--mirror .cs-ov-rail { border-left: 0; border-right-color: rgba(16,18,22,.28); }
.cs-ov-sec--coral .cs-ov-body p,
.cs-ov-sec--coral .cs-ov-splitbody p { color: rgba(16,18,22,.78); }

.cs-ov-sec--ink { background: var(--ink); color: var(--paper); }
.cs-ov-sec--ink .cs-ov-eyebrow,
.cs-ov-sec--ink .cs-ov-lead { color: var(--paper); }
.cs-ov-sec--ink .cs-ov-marker { background: var(--coral); }
.cs-ov-sec--ink .cs-ov-rail { border-left-color: var(--line-d); }
.cs-ov-sec--ink .cs-ov--mirror .cs-ov-rail { border-left: 0; border-right-color: var(--line-d); }
.cs-ov-sec--ink .cs-ov-body p,
.cs-ov-sec--ink .cs-ov-splitbody p { color: rgba(255,255,255,.74); }

/* ============================================================
   FEATURED VIDEO
   ============================================================ */
.cs-video-frame { position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line-d); background: #15181d;
  width: 100%; appearance: none; -webkit-appearance: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.cs-video-frame image-slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* looping Vimeo background fills the frame; oversized for parallax headroom, behind play */
.cs-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; pointer-events: none; }
.cs-video-frame.cs-parallax .cs-video-bg { transform-origin: center; transform: scale(1.12); will-change: transform; }
/* once playing: reveal native controls, hide the play affordance */
.cs-video-frame.is-playing { cursor: default; }
.cs-video-frame.is-playing .cs-video-bg { pointer-events: auto; z-index: 1; }
.cs-video-frame.is-playing .cs-play { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
/* CTA closing headline: centered per-line wipe */
.cs-wipe--center { text-align: center; }
.cs-wipe--center .cs-wipe-line { margin-inline: auto; }
/* large footer brand mark above the legal bar */
.foot-bigmark { display: flex; justify-content: center; padding: clamp(48px,7vw,104px) var(--s6); border-top: 1px solid rgba(16,18,22,.12); }
.foot-bigmark svg { width: clamp(64px,9vw,120px); height: auto; display: block; }
.foot-morph { transform-origin: center; }
.foot-morph path { fill: #101216; }
@keyframes foot-mark-pop { 0% { transform: scale(.62); opacity: .25; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.foot-morph.pop { animation: foot-mark-pop .42s cubic-bezier(.2,1.3,.4,1); }
@media (prefers-reduced-motion: reduce){ .foot-morph.pop { animation: none; } }

/* sticky footer drawer: logo + legal slide out from under the footer top */
.foot { position: relative; }
.foot-top { position: relative; z-index: 2; background: var(--coral); border-bottom: 1px solid rgba(16,18,22,.2); }
.foot-reveal { position: relative; z-index: 1; overflow: hidden; }
.foot-reveal-inner { will-change: transform; }
.foot-overlay { position: absolute; inset: 0; background: var(--coral); opacity: .5; pointer-events: none; z-index: 3; }
@media (prefers-reduced-motion: reduce){ .foot-reveal-inner { transform: none !important; } .foot-overlay { opacity: 0 !important; } }
/* slight vertical parallax: oversize slot for headroom, stays behind play/scrim */
.cs-video-frame.cs-parallax image-slot { top: -11%; height: 122%; z-index: 0; will-change: transform; }
.cs-video-frame .cs-play { position: relative; z-index: 2; }
.cs-video-frame .cs-play { position: relative; z-index: 2; }
.cs-video-cap { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s4); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite-d); }
[data-cv="b"] .cs-video-bleed { padding-left: 0; padding-right: 0; }
.cs-video-sec { padding: 0; }
.cs-video-sec .cs-video-frame { border: 0; }

/* ============================================================
   STILLS GALLERY
   ============================================================ */
.cs-shot { position: relative; overflow: hidden; background: var(--mist-deep); }
.cs-shot image-slot { display: block; width: 100%; height: 100%; }
.cs-shot-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite); margin-top: 10px; }
.s--ink .cs-shot-cap { color: var(--graphite-d); }
.cs-shot-fig { display: flex; flex-direction: column; }

/* A: even 3-col grid w/ hairlines */
[data-cv="a"] .cs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
[data-cv="a"] .cs-gallery .cs-shot { aspect-ratio: 4/3; }
[data-cv="a"] .cs-gallery .span2 { grid-column: span 2; }
[data-cv="a"] .cs-gallery .span2 .cs-shot { aspect-ratio: 16/9; }

/* B: staggered offset masonry */
[data-cv="b"] .cs-gallery { display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px,1.6vw,26px); align-items: start; }
[data-cv="b"] .cs-gallery .g { grid-column: span 6; }
[data-cv="b"] .cs-gallery .g .cs-shot { aspect-ratio: 16/10; }
[data-cv="b"] .cs-gallery .g--tall { grid-column: span 6; margin-top: clamp(28px,5vw,72px); }
[data-cv="b"] .cs-gallery .g--tall .cs-shot { aspect-ratio: 4/5; }
[data-cv="b"] .cs-gallery .g--wide { grid-column: span 8; }
[data-cv="b"] .cs-gallery .g--narrow { grid-column: span 4; margin-top: clamp(28px,5vw,72px); }
[data-cv="b"] .cs-gallery .g--narrow .cs-shot { aspect-ratio: 3/4; }
/* stills — full-bleed editorial grid (full / 60-40 / 25-75 over 25-25-50,
   left image of the lower block spans both rows). Borders via 1px gaps. */
.s.cs-stills-sec { padding: 0; border-top: 0; }
.cs-stills > * + * { border-top: 1px solid var(--line-d); }
.cs-stills-row, .cs-stills-grid { display: grid; gap: 1px; background: var(--line-d); }
.cs-stills-row--full { grid-template-columns: 1fr; }
.cs-stills-row--6040 { grid-template-columns: 3fr 2fr; height: auto; }
.cs-stills-row--6040 .cs-still:first-child .cs-still-media { aspect-ratio: 16/9; height: auto; }
.cs-stills-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(460px, 54vw, 780px); }
.cs-stills-grid > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.cs-stills-grid > :nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.cs-stills-grid > :nth-child(3) { grid-column: 2; grid-row: 2; }
.cs-stills-grid > :nth-child(4) { grid-column: 3; grid-row: 2; }
.cs-still { background: var(--ink); min-height: 0; min-width: 0; }
.cs-still-media { overflow: hidden; height: 100%; }
.cs-stills-row--full .cs-still-media { height: auto; aspect-ratio: 16/9; }
.cs-still-media image-slot { display: block; width: 100%; height: 100%; }
@media (max-width: 760px){
  .cs-stills-row--6040, .cs-stills-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .cs-stills-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  .cs-still-media, .cs-stills-row--full .cs-still-media { height: auto; aspect-ratio: 16/10; }
}

/* ============================================================
   PROCESS / STEPS
   ============================================================ */
/* A: numbered rows */
[data-cv="a"] .cs-steps { border-top: 1px solid var(--line); }
[data-cv="a"][data-x] .cs-steps { } /* noop */
.s--mist .cs-step { border-bottom: 1px solid var(--line); }
[data-cv="a"] .cs-step { display: grid; grid-template-columns: 72px 1.1fr 1.4fr; gap: var(--s6);
  padding: var(--s6) 0; border-bottom: 1px solid var(--line); align-items: start; }
[data-cv="a"] .cs-step .sn { font-family: var(--mono); font-size: 13px; color: var(--coral); padding-top: 6px; }
[data-cv="a"] .cs-step h4 { font-weight: 600; font-size: clamp(20px,1.9vw,27px); letter-spacing: -0.015em; line-height: 1.06; }
[data-cv="a"] .cs-step p { font-size: 15.5px; line-height: 1.55; color: var(--graphite); max-width: 50ch; }

/* B: horizontal flow */
[data-cv="b"] .cs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
[data-cv="b"] .cs-step { background: var(--paper); padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: 14px; }
[data-cv="b"] .cs-step .sn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--coral); }
[data-cv="b"] .cs-step h4 { font-weight: 600; font-size: clamp(18px,1.5vw,23px); letter-spacing: -0.015em; line-height: 1.08; }
[data-cv="b"] .cs-step p { font-size: 14.5px; line-height: 1.5; color: var(--graphite); }
@media (max-width: 860px){ [data-cv="b"] .cs-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ [data-cv="b"] .cs-steps { grid-template-columns: 1fr; } }

/* ============================================================
   RESULTS
   ============================================================ */
/* A: stat grid on ink (reuses .stats/.stat from home.css) */
.cs-result-note { font-size: clamp(16px,1.2vw,19px); line-height: 1.5; color: rgba(255,255,255,.74);
  max-width: 60ch; margin-top: var(--s7); }

/* B: monumental coral stat band */
.cs-results-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: clamp(28px,3.5vw,52px); }
.cs-results-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--ink); }
.cs-bigstat { text-align: center; }
.cs-bigstat .huge { font-family: var(--sans); font-weight: 600; font-stretch: 80%;
  font-size: clamp(72px, 17vw, 280px); line-height: 0.82; letter-spacing: -0.03em; }
.cs-bigstat .cap { font-family: var(--mono); font-size: clamp(12px,1.1vw,15px); letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: var(--s5); }
.cs-bigstat-row { display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(16,18,22,.24); margin-top: var(--s8); }
.cs-bigstat-row .b { padding: var(--s6) var(--s5); border-right: 1px solid rgba(16,18,22,.24); }
.cs-bigstat-row .b:last-child { border-right: 0; }
.cs-bigstat-row .bn { font-family: var(--sans); font-weight: 600; font-size: clamp(26px,3vw,46px);
  line-height: 0.92; letter-spacing: -0.02em; }
.cs-bigstat-row .bl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(16,18,22,.66); margin-top: 10px; }
.cs-bigstat-row--bleed { margin-top: clamp(64px, 9vw, 128px); }
.cs-bigstat-row--bleed .b:first-child { padding-left: var(--s6); }
.cs-bigstat-row--bleed .b:last-child { padding-right: var(--s6); }

/* ============================================================
   TESTIMONIAL / QUOTE
   ============================================================ */
.cs-quote-mark { font-family: var(--sans); font-weight: 600; font-size: clamp(70px,8vw,130px);
  line-height: 0.6; color: var(--coral); display: block; }
[data-cv="a"] .cs-quote { max-width: 22ch; }
[data-cv="a"] .cs-quote blockquote { font-family: var(--sans); font-weight: 500;
  font-size: clamp(28px,3.6vw,54px); line-height: 1.06; letter-spacing: -0.02em;
  margin: var(--s5) 0 0; text-wrap: balance; }
[data-cv="a"] .cs-quote-cite { display: flex; align-items: center; gap: 14px; margin-top: var(--s7);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-d); }
[data-cv="a"] .cs-quote-cite .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
[data-cv="a"] .cs-quote-cite .av image-slot { width: 100%; height: 100%; display: block; }
[data-cv="a"] .cs-quote-cite b { color: var(--paper); font-weight: 600; }

[data-cv="b"] .cs-quote { max-width: min(900px, 92%); margin: 0 auto; text-align: center; }
[data-cv="b"] .cs-quote blockquote .cs-wipe-line { margin-inline: auto; }
[data-cv="b"] .cs-quote blockquote { font-family: var(--sans); font-weight: 600;
  font-size: clamp(30px,4.4vw,68px); line-height: 1.04; letter-spacing: -0.02em; margin: var(--s4) 0 0; text-wrap: balance; }
[data-cv="b"] .cs-quote-cite { margin-top: var(--s7); font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-d); }
[data-cv="b"] .cs-quote-cite b { color: var(--paper); font-weight: 600; }
[data-cv="b"] .cs-quote-av { width: 64px; height: 64px; margin: var(--s7) auto 0; border-radius: 50%; overflow: hidden; }
[data-cv="b"] .cs-quote-av image-slot { display: block; width: 100%; height: 100%; }
[data-cv="b"] .cs-quote-av + .cs-quote-cite { margin-top: var(--s5); }

/* ============================================================
   DELIVERABLES
   ============================================================ */
/* A: two-column checklist with hairlines */
[data-cv="a"] .cs-delv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px,5vw,90px);
  border-top: 1px solid var(--line); }
[data-cv="a"] .cs-delv .d { display: flex; align-items: baseline; gap: 14px; padding: 15px 0;
  border-bottom: 1px solid var(--line); }
[data-cv="a"] .cs-delv .d .dx { color: var(--coral); font-family: var(--mono); font-size: 13px; flex: 0 0 auto; }
[data-cv="a"] .cs-delv .d .dt { font-size: clamp(16px,1.3vw,19px); font-weight: 500; letter-spacing: -0.01em; }
[data-cv="a"] .cs-delv .d .dn { margin-left: auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
@media (max-width: 720px){ [data-cv="a"] .cs-delv { grid-template-columns: 1fr; } }

/* B: tag chips */
[data-cv="b"] .cs-delv { display: flex; flex-wrap: wrap; gap: 12px; }
[data-cv="b"] .cs-delv .d { display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong); padding: 12px 18px; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; }
[data-cv="b"] .cs-delv .d .dx { width: 7px; height: 7px; background: var(--coral); }
[data-cv="b"] .cs-delv .d .dn { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite); }
/* deliverables — stacked heading left, bordered list right */
.cs-deliv-2 { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px,5vw,90px); align-items: stretch; }
.cs-deliv-head { padding: clamp(40px,5vw,72px) 0; }
.cs-deliv-head h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(26px,3.2vw,46px);
  letter-spacing: -0.02em; line-height: 1.0; text-wrap: balance; }
.cs-deliv-eyebrow { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: 14px; }
.cs-deliv-svc { margin-top: clamp(28px,3.2vw,46px); }
.cs-deliv-svc-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--graphite); }
.cs-deliv-svc-parent { display: block; font-family: var(--sans); font-weight: 600;
  font-size: clamp(20px,1.8vw,27px); letter-spacing: -0.015em; margin-top: 8px; }
.cs-deliv-svc-subs { list-style: none; margin-top: 14px; }
.cs-deliv-svc-subs li { display: flex; align-items: center; gap: 11px; font-size: 15px;
  color: var(--graphite); padding: 7px 0; }
.cs-deliv-svc-subs li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; background: var(--coral); }
.cs-deliv-list { border-left: 1px solid var(--line);
  padding: clamp(40px,5vw,72px) 0 clamp(40px,5vw,72px) clamp(28px,3vw,56px); }
.cs-deliv-item { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.cs-deliv-item:last-child { border-bottom: 0; }
.cs-deliv-item .dx { flex: 0 0 auto; width: 7px; height: 7px; background: var(--coral); }
.cs-deliv-item .nm { font-size: clamp(16px,1.3vw,19px); font-weight: 500; letter-spacing: -0.01em; }
.cs-deliv-item .dn { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
@media (max-width: 760px){
  .cs-deliv-2 { grid-template-columns: 1fr; gap: var(--s5); }
  .cs-deliv-head { padding: clamp(40px,10vw,64px) 0 0; }
  .cs-deliv-list { border-left: 0; padding: var(--s5) 0 clamp(40px,10vw,64px); }
}

/* deliverables — white on black */
.cs-deliv-sec--ink { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-d); }
.cs-deliv-sec--ink .cs-deliv-head h2,
.cs-deliv-sec--ink .cs-deliv-svc-parent,
.cs-deliv-sec--ink .cs-deliv-item .nm { color: var(--paper); }
.cs-deliv-sec--ink .cs-deliv-eyebrow,
.cs-deliv-sec--ink .cs-deliv-svc-label,
.cs-deliv-sec--ink .cs-deliv-item .dn { color: var(--graphite-d); }
.cs-deliv-sec--ink .cs-deliv-svc-subs li { color: rgba(255,255,255,.74); }
.cs-deliv-sec--ink .cs-deliv-list,
.cs-deliv-sec--ink .cs-deliv-item { border-color: var(--line-d); }
/* each deliverable row masks in behind a white box, left→right, staggered */
.cs-deliv-sec--ink .cs-deliv-item { position: relative; overflow: hidden; --di: 0s; }
.cs-deliv-sec--ink .cs-deliv-item > * { opacity: 0; }
.cs-deliv-sec--ink .cs-deliv-item::after { content: ""; position: absolute; inset: 0; background: var(--paper);
  clip-path: inset(0 100% 0 0); pointer-events: none; z-index: 2; }
.cs-deliv-sec--ink .cs-deliv-item:nth-child(2){ --di: .1s; }
.cs-deliv-sec--ink .cs-deliv-item:nth-child(3){ --di: .2s; }
.cs-deliv-sec--ink .cs-deliv-item:nth-child(4){ --di: .3s; }
.cs-deliv-sec--ink .cs-deliv-item:nth-child(5){ --di: .4s; }
.cs-deliv-sec--ink .cs-deliv-item:nth-child(6){ --di: .5s; }
.cs-deliv-list.in .cs-deliv-item::after { animation: cs-wipe-box .9s cubic-bezier(.76,0,.24,1) forwards; animation-delay: var(--di,0s); }
.cs-deliv-list.in .cs-deliv-item > * { animation: cs-wipe-ink .9s steps(1) forwards; animation-delay: var(--di,0s); }
[data-motion="off"] .cs-deliv-sec--ink .cs-deliv-item > *, .no-anim .cs-deliv-sec--ink .cs-deliv-item > * { opacity: 1 !important; animation: none !important; }
[data-motion="off"] .cs-deliv-sec--ink .cs-deliv-item::after, .no-anim .cs-deliv-sec--ink .cs-deliv-item::after { display: none; }
@media (prefers-reduced-motion: reduce){ .cs-deliv-sec--ink .cs-deliv-item > * { opacity: 1; animation: none; } .cs-deliv-sec--ink .cs-deliv-item::after { display: none; } }

/* ============================================================
   CREDITS
   ============================================================ */
.cs-credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s6);
  border-top: 1px solid var(--line); }
.s--ink .cs-credits { border-top-color: var(--line-d); }
.cs-credit { display: flex; flex-direction: column; gap: 5px; padding: var(--s5) 0;
  border-bottom: 1px solid var(--line); }
.s--ink .cs-credit { border-bottom-color: var(--line-d); }
.cs-credit .cr-role { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite); }
.s--ink .cs-credit .cr-role { color: var(--graphite-d); }
.cs-credit .cr-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 720px){ .cs-credits { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   NEXT PROJECT
   ============================================================ */
/* A: editorial wide row */
.cs-next-row { display: grid; grid-template-columns: 64px 1.6fr 1fr; gap: var(--s6);
  align-items: center; padding: var(--s7) 0; border-top: 1px solid var(--line-d); }
.cs-next-row .nx-idx { font-family: var(--mono); font-size: 13px; color: var(--coral); }
.cs-next-row .nx-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite-d); }
.cs-next-row .nx-title { font-family: var(--sans); font-weight: 600; font-size: clamp(28px,4vw,60px);
  letter-spacing: -0.02em; line-height: 0.98; margin-top: 12px; text-wrap: balance; }
.cs-next-row .nx-media { aspect-ratio: 16/10; overflow: hidden; }
.cs-next-row .nx-media image-slot { width: 100%; height: 100%; display: block; }
.cs-next-row:hover .nx-title { color: var(--coral); }
@media (max-width: 760px){ .cs-next-row { grid-template-columns: 1fr; gap: var(--s5); } .cs-next-row .nx-idx { display: none; } }

/* B: full-bleed image w/ overlay */
.cs-next-bleed { position: relative; min-height: clamp(360px,52vh,560px); display: flex;
  align-items: flex-end; overflow: hidden; isolation: isolate; }
.cs-next-bleed image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.cs-next-bleed .nb-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16,18,22,.2), rgba(16,18,22,.86)); }
.cs-next-bleed .nb-inner { position: relative; z-index: 2; padding: clamp(28px,4vw,56px); width: 100%; color: var(--paper);
  display: flex; flex-direction: column; align-items: flex-start; }
.cs-next-bleed .nb-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,.7); }
.cs-next-bleed .nb-title { font-family: var(--sans); font-weight: 600; font-stretch: 80%;
  font-size: clamp(34px,6vw,92px); letter-spacing: -0.02em; line-height: 0.95; margin-top: 14px; }
.cs-next-bleed:hover .nb-title { color: var(--coral); }
.cs-next-bleed image-slot { transition: transform 1.1s cubic-bezier(.16,.84,.3,1); transform-origin: center; }
.cs-next-bleed:hover image-slot { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce){ .cs-next-bleed image-slot { transition: none; } .cs-next-bleed:hover image-slot { transform: none; } }

/* ============================================================
   RESPONSIVE FALLBACKS
   ============================================================ */
@media (max-width: 920px){
  [data-cv="a"] .cs-hero-inner { grid-template-columns: 1fr; }
  [data-cv="a"] .cs-hero-media { aspect-ratio: 16/10; }
  .cs-readgrid { grid-template-columns: 1fr; gap: var(--s7); }
  .cs-rail { position: static; }
  [data-cv="a"] .cs-step { grid-template-columns: 56px 1fr; }
  [data-cv="a"] .cs-step p { grid-column: 2; }
}
@media (max-width: 720px){
  /* hero stat band → 2-col: vertical divider only between columns, row divider between rows, gutters at edges */
  .cs-hero-band { grid-template-columns: 1fr 1fr; }
  .cs-hero-band .hb { border-right: 0; padding-left: clamp(16px,5vw,28px); padding-right: clamp(16px,5vw,28px); }
  .cs-hero-band .hb:nth-child(odd){ border-right: 1px solid rgba(255,255,255,.22); padding-left: var(--s6); }
  .cs-hero-band .hb:nth-child(even){ padding-right: var(--s6); }
  .cs-hero-band .hb:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,.22); }

  /* hero at-a-glance facts → same 2-col treatment */
  .cs-facts { grid-template-columns: 1fr 1fr; }
  .cs-facts .cs-fact { border-right: 0; }
  .cs-facts .cs-fact:nth-child(odd){ border-right: 1px solid var(--line); }
  .cs-facts .cs-fact:nth-child(n+3){ border-top: 1px solid var(--line); }
  .s--ink .cs-facts .cs-fact:nth-child(odd), .cs-hero--cine .cs-facts .cs-fact:nth-child(odd){ border-right-color: var(--line-d); }
  .s--ink .cs-facts .cs-fact:nth-child(n+3), .cs-hero--cine .cs-facts .cs-fact:nth-child(n+3){ border-top-color: var(--line-d); }
  .cs-hero--cine .cs-facts .cs-fact:nth-child(odd){ padding-left: var(--s6); }
  .cs-hero--cine .cs-facts .cs-fact:nth-child(even){ padding-right: var(--s6); }

  /* results stat row → stack: horizontal dividers only, gutters both sides, no edge borders */
  .cs-bigstat-row { grid-template-columns: 1fr; }
  .cs-bigstat-row .b { border-right: 0; border-bottom: 1px solid rgba(16,18,22,.24); padding-left: var(--s6); padding-right: var(--s6); }
  .cs-bigstat-row .b:last-child { border-bottom: 0; }

  .cs-credits { grid-template-columns: 1fr; }
  [data-cv="b"] .cs-gallery .g, [data-cv="b"] .cs-gallery .g--tall,
  [data-cv="b"] .cs-gallery .g--wide, [data-cv="b"] .cs-gallery .g--narrow { grid-column: span 12; margin-top: 0; }
  [data-cv="a"] .cs-gallery { grid-template-columns: 1fr 1fr; }
  [data-cv="a"] .cs-gallery .span2 { grid-column: span 2; }
}