/* =====================================================================
   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); }

@media (max-width: 640px) {
  .jrow { flex-direction: column; }
  .jrow > .tile { flex: none; width: 100%; }
  .films, .results { grid-template-columns: 1fr; }
  .stats { padding-left: 0; }
}
@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 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))); }
@media (max-width: 640px) {
  .ai-steps { grid-template-columns: 1fr; gap: 24px; }
}