/* ============================================================
   CASE STUDY pages (work/*.html)
   Builds on styles.css. One accent colour, taken from the case decks.
   ============================================================ */

:root {
  --oxblood: #6b0f14;
  --oxblood-dk: #4d0a0e;
  --night: #0d0b0b;
}

.case-label {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 1.6rem;
}
.case-label--light { color: rgba(255,255,255,0.62); }

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

/* ---------- HERO (split: title panel + photo) ---------- */
.case-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--night); color: var(--paper); }
.case-hero__text { display: flex; flex-direction: column; justify-content: flex-end; padding: 9rem var(--pad) clamp(3rem, 6vw, 5rem); }
.case-hero__title { font-size: clamp(3.4rem, 8vw, 7.6rem); line-height: 0.98; margin-bottom: 1.8rem; }
.case-hero__title em { font-style: italic; font-weight: 400; }
.case-hero__sub { font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: rgba(255,255,255,0.82); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.8rem; }
.case-facts dt { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.4rem; }
.case-facts dd { font-family: var(--serif); font-size: 1.05rem; }
.case-hero__media { position: relative; overflow: hidden; }
.case-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.case-hero__media::after { content: ""; position: absolute; inset: 0 0 auto; height: 9rem; background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); pointer-events: none; }

/* ---------- BREADCRUMB ---------- */
.crumbs { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-2); padding-top: 2rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; color: var(--line-dk); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- BRIEF ---------- */
.case-brief { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; padding: clamp(4.5rem, 10vw, 8rem) 0; }
.case-brief__lede { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 2.4rem; }
.case-quote { font-family: var(--display); font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.35; border-left: 2px solid var(--oxblood); padding-left: 1.6rem; margin: 0 0 1.8rem; }
.case-body { font-family: var(--serif); font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.7; color: #2b2b2b; max-width: 36rem; }
.case-body + .case-body { margin-top: 1.1rem; }

/* ---------- FIGURES ---------- */
.case-fig { position: relative; }
.case-fig img { width: 100%; height: 100%; object-fit: cover; }
.case-fig figcaption { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray-2); margin-top: 0.9rem; }
.case-fig--portrait { aspect-ratio: 4 / 5.4; }
.case-fig--portrait img { height: auto; aspect-ratio: inherit; }
.case-bleed { margin: 0; }
.case-bleed img { width: 100%; height: clamp(22rem, 62vw, 52rem); object-fit: cover; }
.case-bleed figcaption { max-width: var(--maxw); margin: 0.9rem auto 0; padding: 0 var(--pad); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray-2); }

/* ---------- SCOPE (what we handled) ---------- */
.case-scope { padding: clamp(4.5rem, 8vw, 6.5rem) 0; }
.case-scope__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.2rem, 4vw, 3rem); }
.case-scope__title { font-size: clamp(1.9rem, 3vw, 2.6rem); text-wrap: balance; }
.scope-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.scope-tile { display: flex; flex-direction: column; background: #f5f5f7; border-radius: 20px; padding: 1.8rem; }
.scope-tile ul { margin-bottom: 1.4rem; }
.scope-tile__img { margin-top: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.scope-tile h3 { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oxblood); margin-bottom: 0.6rem; }
.scope-tile li { font-size: 1.02rem; font-weight: 400; line-height: 1.45; color: #1d1d1f; padding: 0.9rem 0; border-top: 1px solid #e3e3e8; }
.scope-tile li:first-child { border-top: none; }

/* ---------- PROCESS ---------- */
.case-process { background: #f5f5f7; padding: clamp(4.5rem, 8vw, 6.5rem) 0; }
.case-process__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.2rem, 4vw, 3rem); }
.case-process__title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 1.2rem; }
.case-process__sub { max-width: 34rem; margin: 0 auto; text-wrap: balance; font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 300; line-height: 1.6; color: #6e6e73; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.tile { background: var(--paper); border-radius: 24px; padding: clamp(2rem, 3vw, 2.8rem); }
.tile__eyebrow { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--oxblood); margin-bottom: 0.8rem; }
.tile__title { font-size: clamp(1.5rem, 2vw, 1.75rem); margin-bottom: 0.6rem; }
.tile__lede { font-size: 0.98rem; font-weight: 300; line-height: 1.55; color: #6e6e73; margin-bottom: 2rem; }
.tile__steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); padding: 1.15rem 0; border-top: 1px solid #e8e8ed; }
.tile__steps span { font-size: 0.78rem; font-weight: 400; color: #86868b; padding-top: 0.15rem; font-variant-numeric: tabular-nums; }
.tile__steps h4 { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; margin-bottom: 0.3rem; }
.tile__steps p { font-size: 0.9rem; font-weight: 300; line-height: 1.6; color: #6e6e73; }

/* ---------- SHOOT DAY (dark) ---------- */
.case-shoot { background: var(--night); color: var(--paper); padding: clamp(5rem, 10vw, 8rem) 0; }
.case-shoot__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.case-shoot__title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.case-shoot .case-body { color: rgba(255,255,255,0.78); }
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 0; margin-bottom: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid rgba(255,255,255,0.16); padding: 1.4rem 0; }
.route li { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; display: flex; align-items: center; }
.route li + li::before { content: ""; width: clamp(1.4rem, 4vw, 3.4rem); height: 1px; background: rgba(255,255,255,0.35); margin: 0 1rem; }
.shoot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.shoot-grid .case-fig img { height: auto; aspect-ratio: 2 / 3; }
.shoot-grid .case-fig:nth-child(3n + 2) { margin-top: clamp(2rem, 6vw, 5rem); }
.case-shoot .case-fig figcaption { color: rgba(255,255,255,0.5); }

/* ---------- DELIVERY ---------- */
.case-delivery { padding: clamp(5rem, 10vw, 8rem) 0; }
.case-delivery__title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.number { padding: 2.2rem 1.6rem 2.2rem 0; }
.number + .number { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.number .stat__num { display: block; color: var(--oxblood); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; margin-bottom: 1rem; }
.number p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--gray); }
.timeline-row { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin-top: 1.4rem; }
.timeline-row div { padding: 1.5rem 1.8rem; }
.timeline-row div + div { border-left: 1px solid var(--line); }
.timeline-row strong { display: block; font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; margin-bottom: 0.4rem; }
.timeline-row span { font-family: var(--serif); font-size: 1.1rem; }

/* ---------- RESULT (oxblood) ---------- */
.case-result { display: grid; grid-template-columns: 0.9fr 1.1fr; background: var(--oxblood); color: var(--paper); }
.case-result__media { position: relative; min-height: 34rem; }
.case-result__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-result__text { padding: clamp(4rem, 9vw, 7.5rem) var(--pad); align-self: center; }
.case-result__title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 2.4rem; }
.press { border-top: 1px solid rgba(255,255,255,0.22); }
.press li { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2rem); padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.22); }
.case-result__note { font-family: var(--serif); font-size: 1.05rem; color: rgba(255,255,255,0.75); margin-top: 1.6rem; }

/* ---------- CTA ---------- */
.case-cta { text-align: center; padding: clamp(5.5rem, 12vw, 9.5rem) var(--pad); border-bottom: 1px solid var(--line); }
.case-cta__title { font-size: clamp(2.2rem, 3.8vw, 3.2rem); margin-bottom: 1.4rem; }
.case-cta__sub { font-family: var(--serif); font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--gray); max-width: 38rem; margin: 0 auto 2.6rem; }
.case-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.case-cta .btn--ghost { border-color: var(--ink); color: var(--ink); }
.case-cta .btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- THE FILM (dark, two vertical films) ---------- */
.case-film { background: var(--night); color: var(--paper); padding: clamp(5rem, 10vw, 8rem) 0; }
.case-film__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(1rem, 2.4vw, 2rem); align-items: end; }
.case-film__text { align-self: center; padding-right: clamp(0rem, 3vw, 3rem); }
.case-film__title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 1.4rem; }
.case-film .case-body { color: rgba(255,255,255,0.78); }
.case-video { position: relative; margin: 0; }
.case-video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #1a1717; }
.case-video figcaption { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 0.9rem; }
.case-video__sound { position: absolute; right: 0.9rem; top: 0.9rem; font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.55); padding: 0.55rem 0.8rem; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.case-video__sound::before { content: "♪ "; }
.case-video__sound:hover, .case-video__sound.is-on { background: var(--paper); color: var(--ink); }

/* ---------- CREATIVE DECK (scrolling strip) ---------- */
.case-deck { padding: clamp(5rem, 10vw, 8rem) 0; }
.case-deck__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.case-deck__title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.deck-strip { display: flex; gap: clamp(0.9rem, 1.8vw, 1.4rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 1.4rem; scroll-padding: 0 var(--pad); scrollbar-width: thin; scrollbar-color: var(--line-dk) transparent; }
.deck-slide { flex: 0 0 min(72vw, 46rem); scroll-snap-align: start; margin: 0; }
.deck-slide img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(0,0,0,0.35); }
.deck-slide figcaption { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray-2); margin-top: 0.9rem; }

.deck-nav { display: flex; justify-content: flex-end; gap: 0.6rem; margin: -1rem 0 1.4rem; }
.deck-nav__btn { width: 3rem; height: 3rem; border: 1px solid var(--line-dk); background: var(--paper); font-size: 1rem; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.deck-nav__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: none) { .deck-nav { display: none; } }

/* route with look numbers */
.route li span { color: rgba(255,255,255,0.45); margin-right: 0.7rem; }

/* press links */
.press a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; transition: opacity 0.3s var(--ease); }
.press a span { font-family: var(--sans); font-size: 0.9rem; opacity: 0.6; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.press a:hover span { opacity: 1; transform: translate(3px, -3px); }

/* ---------- extras used by the remote-production case ---------- */
.case-bleed--video video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #e9e7e6; }
.case-quote--light { border-left-color: rgba(255,255,255,0.5); color: var(--paper); margin-top: 1.6rem; }
.case-fittings { padding: clamp(4.5rem, 8vw, 6.5rem) 0 0; }
.case-fittings .case-fig img { height: auto; border-radius: 14px; }
.live-grid { display: grid; grid-template-columns: 1.15fr 0.9fr 0.95fr 1fr; gap: clamp(0.6rem, 1.2vw, 1rem); align-items: stretch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.live-grid > img, .live-grid video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 12px; }
.live-grid .case-video { margin: 0; }
.live-grid .case-video video { aspect-ratio: auto; }
.case-film__grid--4 { grid-template-columns: 1.1fr 1fr 1fr 1fr; }
.case-film__grid--4 .case-video video { aspect-ratio: 2 / 3; }
.timeline-row--3 { grid-template-columns: repeat(3, 1fr); }
.case-film__grid--more { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- SERVICE PAGES (services/*.html) ---------- */
.case-hero--svc { min-height: clamp(560px, 82vh, 780px); }
.case-hero--svc .case-hero__title { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.svc-hero__media { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 7.5rem var(--pad) 2.5rem 0; }
.svc-hero__media img, .svc-hero__media video { position: static; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 25%; border-radius: 14px; background: #1a1717; }
.svc-hero__cta { margin-top: 2rem; }
.svc-hero__cta .btn--solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.svc-hero__cta .btn--solid:hover { background: transparent; color: var(--paper); }
.svc-detail { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(0.9rem, 1.6vw, 1.4rem); align-items: start; }
.svc-detail .scope-tile, .svc-packs__grid .scope-tile { padding: clamp(1.6rem, 2.4vw, 2.2rem); }
.svc-detail__delivery { margin-top: 1.4rem; font-size: 0.95rem; }
.svc-detail__delivery span { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #86868b; margin-right: 0.8rem; }
.svc-packs { padding-top: 0; }
.svc-packs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.svc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem); }
.svc-gallery__item { margin: 0; }
.svc-gallery__item img, .svc-gallery__item video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; border-radius: 14px; background: #f5f5f7; }
.case-teasers--one { grid-template-columns: minmax(0, 36rem); justify-content: center; }
.svc-others { margin-top: 2.4rem; font-size: 0.88rem; color: #6e6e73; }
.svc-others a { color: var(--ink); border-bottom: 1px solid var(--line-dk); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .case-hero { grid-template-columns: 1fr; min-height: 0; }
  .case-hero__media { height: 78vh; order: -1; }
  .case-hero__text { padding-top: 3rem; }
  .case-brief, .case-shoot__head { grid-template-columns: 1fr; }
  .scope-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: 1fr; max-width: 36rem; margin: 0 auto; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number:nth-child(3) { padding-left: 0; border-left: none; }
  .number:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .case-result { grid-template-columns: 1fr; }
  .case-result__media { min-height: 0; height: 80vh; }
  .svc-hero__media { height: auto !important; padding: 6rem var(--pad) 0; grid-auto-rows: 52vh; }
  .svc-detail, .svc-packs__grid { grid-template-columns: 1fr; }
  .case-film__grid { grid-template-columns: 1fr 1fr; }
  .case-film__text { grid-column: 1 / -1; padding-right: 0; margin-bottom: 1.5rem; }
  .case-film__grid--4 { grid-template-columns: repeat(3, 1fr); }
  .live-grid { grid-template-columns: 1fr 1fr; }
  .timeline-row--3 { grid-template-columns: 1fr; }
  .timeline-row--3 div + div { border-left: none; border-top: 1px solid var(--line); }
  .case-deck__head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scope-tiles { grid-template-columns: 1fr; }

  .shoot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shoot-grid .case-fig:nth-child(3n + 2) { margin-top: 0; }
  .shoot-grid .case-fig:nth-child(even) { margin-top: 2.5rem; }
  .timeline-row { grid-template-columns: 1fr; }
  .timeline-row div + div { border-left: none; border-top: 1px solid var(--line); }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .route { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .route li + li::before { display: none; }
  .case-film__grid { gap: 0.7rem; }
  .case-video__sound { right: 0.5rem; top: 0.5rem; padding: 0.45rem 0.6rem; }
  .deck-slide { flex-basis: 84vw; }
  .svc-gallery { grid-template-columns: 1fr 1fr; }
}