/* =====================================================================
   Case study template (first one: Naked Smoothies).
   Same system as the homepage — see site.css for tokens.
   ===================================================================== */

/* ---------- short cobalt header with a torn bottom edge ---------- */
.cs-head { position: relative; isolation: isolate; height: max(176px, calc(200 * var(--u))); color: var(--paper); }
.cs-head .cobalt, .cs-head .grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, #000), url("header-cobalt-mask@2x.png");
          mask-image: linear-gradient(#000, #000), url("header-cobalt-mask@2x.png");
  -webkit-mask-size: 100% calc(100% - 99 * var(--u)), 100% calc(100 * var(--u));
          mask-size: 100% calc(100% - 99 * var(--u)), 100% calc(100 * var(--u));
  -webkit-mask-position: top, bottom;  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
}
.cs-head .cobalt { background: var(--cobalt); }
.cs-head .grain {
  background: url("paper-grain-overlay.webp") 50% 50% / calc(900 * var(--u)) calc(600 * var(--u)) repeat;
  mix-blend-mode: overlay; z-index: 2;
}
.cs-head .fringe {
  position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100 * var(--u)); z-index: 1; pointer-events: none;
  background: url("header-edge-shadow-fringe@2x.png") center / 100% 100% no-repeat;
}
.cs-head .nav { position: relative; z-index: 3; padding: 28px var(--gutter); }
.cs-sub {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 96px;
  display: flex; justify-content: flex-end; gap: 16px;
  font: 400 13px/16px var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
}
.cs-sub a { text-decoration: none; }
.cs-sub a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cs-sub span { color: rgba(236, 234, 227, .75); }

/* Work / AI Art Direction / About pills above the title (11 Oct) — same spot as on the homepage: 19 below the header, 40 above the title */
.cs-menu { padding: max(16px, calc(19 * var(--u))) var(--gutter) 0; }

/* ---------- title + at a glance ---------- */
.cs-intro { display: flex; flex-direction: column; gap: max(20px, calc(32 * var(--u))); padding: max(24px, calc(40 * var(--u))) var(--gutter) 0; }
.cs-title { display: flex; flex-direction: column; gap: 20px; border-top: 1px solid var(--ink); padding-top: max(20px, calc(32 * var(--u))); }   /* rule sits above the title (11 Oct), separating it from the pills */
.cs-title h1 {
  margin: 0; color: var(--cobalt);
  font: 400 max(48px, calc(128 * var(--u))) / .913 var(--f-display); letter-spacing: -.01em; text-transform: uppercase;
}
.cs-summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.cs-story { width: calc(620 * var(--u)); min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cs-story p { margin: 0; color: var(--graphite); font: 400 max(16px, calc(17 * var(--u))) / 1.53 var(--f-body); }
.cs-story .lede { color: var(--ink); font: 500 max(21px, calc(30 * var(--u))) / 1.23 var(--f-body); letter-spacing: -.01em; }
.glance { width: calc(560 * var(--u)); min-width: 0; }

/* ---------- hero film ---------- */
.cs-film { padding: max(20px, calc(27 * var(--u))) var(--gutter) 0; }
.cs-film .shot { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.cs-film .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
/* the whole frame is the play button; a yellow circle sits in the centre */
.play-area {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit;
}
.play-area:focus-visible { outline: 3px solid var(--chrome); outline-offset: -3px; }
.play {
  width: max(64px, calc(104 * var(--u))); height: max(64px, calc(104 * var(--u))); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--chrome); color: var(--ink);
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.play svg { width: 27%; height: auto; margin-left: 6%; fill: currentColor; }
/* hover: flips to ink with a yellow triangle, like the "See the work" buttons */
.play-area:hover .play, .play-area:focus-visible .play { transform: scale(1.06); background: var(--ink); color: var(--chrome); }
.cs-film .shot:hover img { transform: scale(1.015); }
.cs-film .shot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.cs-film .shot.playing img, .cs-film .shot.playing .play-area { display: none; }

/* ---------- stills ---------- */
.cs-stills { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: max(32px, calc(56 * var(--u))) var(--gutter) 0; }
.cs-label { display: flex; justify-content: space-between; gap: 16px; }
.cs-label span:first-child { font-weight: 500; }
.stills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: max(10px, calc(24 * var(--u))); }

/* gallery tiles (stills + OOH): click to enlarge */
.stills-grid > div, .ooh-grid > div {
  display: block; background: var(--ink); overflow: hidden; position: relative;
}
.stills-grid > div { aspect-ratio: 16 / 9; }
.stills-grid img, .ooh-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

/* ---------- out of home ---------- */
.cs-ooh { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: max(32px, calc(52 * var(--u))) var(--gutter) 0; }
.cs-ooh .sec-head h2 { font-size: max(32px, calc(64 * var(--u))); }
.ooh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)) calc(24 * var(--u)); padding-top: calc(8 * var(--u)); }
.ooh-grid .land { aspect-ratio: 660 / 413; }
.ooh-grid .port { aspect-ratio: 660 / 880; }

/* ---------- next project ---------- */
.cs-next { padding: max(48px, calc(90 * var(--u))) var(--gutter) max(32px, calc(48 * var(--u))); }
.next {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  color: inherit; text-decoration: none;
}
.next-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.next-title { display: flex; align-items: center; gap: calc(28 * var(--u)); }
@media (max-width: 640px) { .next-title { flex-wrap: wrap; } }
.next-title strong { color: var(--cobalt); font: 400 max(34px, calc(96 * var(--u))) / .958 var(--f-display); text-transform: uppercase; }
.next-arrow {
  width: max(52px, calc(88 * var(--u))); height: max(52px, calc(88 * var(--u))); border-radius: 50%;
  background: var(--cobalt); display: grid; place-items: center; flex-shrink: 0; transition: transform .2s ease;
}
.next-arrow svg { width: 38.6%; height: auto; }
.next:hover .next-arrow { transform: translateX(6px); }
.next-thumb { width: calc(420 * var(--u)); min-width: 180px; aspect-ratio: 420 / 236; background: var(--ink); overflow: hidden; flex-shrink: 0; position: relative; }
.next-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }

/* =====================================================================
   Generic case-study sections (all 8 projects) — added 6 Oct
   ===================================================================== */
.cs-sec { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: max(32px, calc(56 * var(--u))) var(--gutter) 0; }
.cs-sec .sec-head h2 { font-size: max(32px, calc(64 * var(--u))); }
.cs-sec.no-head { padding-top: max(16px, calc(24 * var(--u))); }

.cs-sec.headless > :first-child { margin-top: calc(8 * var(--u)); }
/* empty 16:9 slots for stills Dan hasn't added yet */
.still-ph { aspect-ratio: 16 / 9; background: #D8D4CA; display: grid; place-items: center; }
.still-ph span { color: var(--graphite); }

/* justified rows: every tile in a row shares one height, widths follow each image's shape */
.jrows { display: flex; flex-direction: column; gap: max(10px, calc(24 * var(--u))); }
.cs-sec .sec-head + .jrows, .cs-sec .sec-head + .films { margin-top: calc(8 * var(--u)); }
.jrow { display: flex; gap: max(10px, calc(24 * var(--u))); }
.jrow > .tile { flex: var(--a) 1 0; min-width: 0; aspect-ratio: var(--a); }
.tile {
  display: block; position: relative; padding: 0; border: 0; overflow: hidden;
  background: var(--ink); font: inherit; color: inherit;
}
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tile.loop.outline { outline: 1px solid var(--ink); outline-offset: -1px; }

/* vertical films with sound */
.tile.vfilm { cursor: pointer; display: grid; place-items: center; }
.tile.vfilm .play { position: relative; z-index: 1; }
.tile.vfilm:hover .play { transform: scale(1.06); background: var(--ink); color: var(--chrome); }
.tile.vfilm.on .play, .tile.vfilm.on img { display: none; }
.tile.vfilm video { object-fit: contain; background: #000; }

/* hero image (instead of a film) */
.cs-film .shot.still .tile { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-hero video { pointer-events: none; }
.loop-hero video::-webkit-media-controls, .loop-hero video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* extra films, two to a row (one = full width) */
.films { display: grid; grid-template-columns: 1fr 1fr; gap: max(10px, calc(24 * var(--u))); }
.films.one { grid-template-columns: 1fr; }
.films .shot { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.films .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.films .shot:hover img { transform: scale(1.015); }
.films .shot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.films .shot.playing img, .films .shot.playing .play-area { display: none; }
.films:not(.one) .play { width: max(56px, calc(80 * var(--u))); height: max(56px, calc(80 * var(--u))); }

/* results (press sticker + numbers) */
.results { display: grid; grid-template-columns: 1fr 1fr; gap: max(24px, calc(24 * var(--u))); align-items: center; margin-top: max(10px, calc(24 * var(--u))); }
.results .jrow > .tile { flex: none; width: 100%; }
.stats { display: flex; flex-direction: column; gap: calc(28 * var(--u)); padding-left: calc(48 * var(--u)); }
.stat { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ink); padding-top: calc(16 * var(--u)); }
.stat b { color: var(--cobalt); font: 400 max(48px, calc(96 * var(--u))) / .95 var(--f-display); }
/* v94: numbers-only results (no press image): stats side by side, short note underneath */
.results--solo { display: block; }
.results--solo .stats { padding-left: 0; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: max(24px, calc(24 * var(--u))); }
.stat-note { margin: 0; color: var(--graphite); font: 400 max(16px, calc(17 * var(--u))) / 1.53 var(--f-body); }
/* v95: press quotes (left) + stacked numbers (right), Lloyds */
.results--press { align-items: start; }
.pquotes { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.pq { margin: 0; display: flex; flex-direction: column; gap: max(16px, calc(20 * var(--u))); border-top: 1px solid var(--ink); padding-top: calc(16 * var(--u)); }
.pq blockquote { margin: 0; color: var(--ink); font: 500 max(21px, calc(30 * var(--u))) / 1.23 var(--f-body); letter-spacing: -.01em; }
.pq-pub { font-weight: 600; color: var(--ink); }
.pq figcaption img { display: block; height: max(16px, calc(22 * var(--u))); width: auto; }
.pq figcaption img.tall { height: max(19px, calc(26 * var(--u))); }   /* wordmarks with descenders (Creativepool) */
/* v106: a row of tiles at one-third width each (e.g. 2 portrait social loops), left aligned */
@media (min-width: 641px) { .jrow.thirds > .tile { flex: none; width: calc((100% - 2 * max(10px, calc(24 * var(--u)))) / 3); } }

/* v99: concept -> final pairs on case studies (reuses the AI-page .ai-steps grid) */
/* full-bleed artwork at its own shape, all pieces in a row share one height (like .jrow) */
.cs-steps { display: flex; gap: max(10px, calc(24 * var(--u))); }
.cs-steps .ai-step { flex: var(--a) 1 0; }
.cs-steps .ai-ph { aspect-ratio: var(--a); }
@media (max-width: 640px) { .cs-steps { flex-direction: column; gap: 24px; } .cs-steps .ai-step { flex: none; } }
.cs-sec .sec-head + .cs-steps { margin-top: calc(8 * var(--u)); }

/* v97: results at a glance, in the intro under the role pills */
.glance-stats { display: flex; flex-direction: column; gap: 16px; padding-top: max(28px, calc(40 * var(--u))); }
.gstats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.gstat { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ink); padding-top: 12px; }
.gstat b { color: var(--cobalt); font: 400 max(28px, calc(44 * var(--u))) / 1 var(--f-display); white-space: nowrap; }
.gstats-note { margin: 0; color: var(--graphite); font: 400 15px / 1.47 var(--f-body); }
.pq-row { display: grid; grid-template-columns: 1fr 1fr; gap: max(24px, calc(24 * var(--u))); }
.pquotes--row { margin-top: max(10px, calc(24 * var(--u))); }
/* v94: small link under a case-study write-up */
.cs-story .cs-link a { color: var(--ink); font: 500 12px/16px var(--f-mono, "IBM Plex Mono", monospace); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .cs-story .cs-link a:hover { color: var(--cobalt); } }

@media (max-width: 640px) {
  .jrow { flex-direction: column; }
  .jrow > .tile { flex: none; width: 100%; }
  .films, .results { grid-template-columns: 1fr; }
  .stats { padding-left: 0; }
  .stat-row { grid-template-columns: 1fr; }
  .results--press { gap: 48px; }
  .pq-row { grid-template-columns: 1fr; gap: 28px; }
  .gstat b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile img, .tile video, .films .shot img { transition: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .cs-summary { flex-direction: column; }
  .cs-story, .glance { width: 100%; }
  .stills-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-left span { display: none; }
  .stills-grid, .ooh-grid { grid-template-columns: 1fr; }
  .next { flex-direction: column; align-items: flex-start; }
  .next-thumb { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .play, .cs-film .shot img, .next-arrow, .stills-grid img, .ooh-grid img { transition: none; }
}

/* =====================================================================
   AI project pages (11 Oct) — first one: Lloyds Horses
   Each creative: heading, 3 process boxes (4:5) with captions, then the final video (16:9)
   ===================================================================== */
.ai-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: max(10px, calc(24 * var(--u))); margin-top: calc(8 * var(--u)); }
.ai-step { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ai-step figcaption { font-size: 13px; line-height: 18px; color: var(--ink); }
.ai-ph { background: #D8D4CA; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; position: relative; overflow: hidden; }
.ai-ph > .mono { color: var(--graphite); }
.ai-ph--45 { aspect-ratio: 4 / 5; }
.ai-ph--169 { aspect-ratio: 16 / 9; }
.ai-ph--34 { aspect-ratio: 3 / 4; }
/* Buzzbox Coffee (v75): dashed "More films on the way" slot in the films grid — same tape as the AI tab's soon-card */
.ai-soon-frame { background: transparent; border: 1.5px dashed rgba(18, 18, 18, .35); }
.ai-soon .soon-tape {
  position: relative; margin: 0; width: max(200px, calc(360 * var(--u))); max-width: 84%; aspect-ratio: 360 / 69;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-2.5deg); filter: drop-shadow(0 2px 3px rgba(18, 18, 18, .28));
}
.ai-soon .soon-tape img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ai-soon .soon-tape span { position: relative; padding-top: 3px; font: 400 max(15px, calc(24 * var(--u))) / 1.17 "Permanent Marker", var(--f-body); letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.ai-ph img, .ai-ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-ph video { pointer-events: none; }
.ai-ph video::-webkit-media-controls, .ai-ph video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.ai-end { height: max(48px, calc(96 * var(--u))); }
/* Lloyds Gift Horse (14 Oct, v86): print-ratio stills (19719 x 13861), hero full width + 2-up grid */
.ai-ph--print { aspect-ratio: 19719 / 13861; }
.ai-steps--2 { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (max-width: 640px) {
  .ai-steps { grid-template-columns: 1fr; gap: 24px; }
  .ai-soon-frame { aspect-ratio: 16 / 9; }
  .ai-gallery { gap: 24px; }
}

/* Lloyds Summer (17 Oct, v115): justified rows — every tile in a row shares one height, widths follow --a (tile aspect).
   Phones: images one per line; the 4 social ads wrap two per line (still equal heights). */
.ai-jrow { display: flex; gap: max(10px, calc(24 * var(--u))); }
.ai-jrow > .ai-ph { flex: var(--a) 1 0; min-width: 0; aspect-ratio: var(--a); }
@media (max-width: 640px) {
  .ai-jrow { flex-direction: column; gap: 24px; }
  .ai-jrow > .ai-ph { flex: none; width: 100%; }
  .ai-jrow--social { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .ai-jrow--social > .ai-ph { flex: var(--a) 1 calc(var(--a) * 40%); width: auto; }
}

/* v115: tap-to-play. When the phone blocks autoplay (iOS Low Power Mode, data saver), silent loops show
   the yellow play button over their poster; one tap starts them (and lets every other loop on the page play). */
.tap-play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tap-play .play { width: max(56px, calc(88 * var(--u))); height: max(56px, calc(88 * var(--u))); }
.tap-play:focus-visible { outline: 3px solid var(--chrome); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .tap-play:hover .play { transform: scale(1.06); background: var(--ink); color: var(--chrome); } }