/* ==========================================================================
   Case Study Framework — case-study.css
   Reusable styles for long-form portfolio case studies.
   Structure and motion modeled on fantasy.co/work/* pages.

   Scale: 1rem = 10px at >= 1280px wide. Below that the whole page scales
   proportionally with the viewport (mobile uses its own 430px design width).
   ========================================================================== */

:root {
  --cs-bg: #003057;
  --cs-brand: #002a4d;            /* site navy: nav monogram + halo, favicon disc */
  --cs-text: #fff;
  --cs-heading-accent: #7cc4ff;   /* subheads turn this colour once in view */
  --cs-text-70: rgba(255, 255, 255, 0.7);
  --cs-text-60: rgba(255, 255, 255, 0.6);
  --cs-text-15: rgba(255, 255, 255, 0.15);
  --cs-accent: #fff;              /* override per case study, e.g. brand red */
  --cs-overlay: rgba(0, 0, 0, 0.5);

  --cs-font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cs-font-cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;

  --cs-radius: 1rem;
  --cs-max: 1440px;
  --cs-gutter: 3.2rem;
  --cs-gap: 3rem;
  --cs-pad: 4.8rem;                /* section inner padding */
  --cs-space-l: 16rem;             /* gap between sections */
  --cs-space-xs: 4.8rem;
  --cs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cs-nav-h: 7.2rem;
}

html {
  /* Desktop design width 1280 → 1rem = 10px at 1280 and above */
  font-size: clamp(1px, calc(100vw / 128), 10px);
  background: var(--cs-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (max-width: 767px) {
  html {
    /* Mobile design width 430 → 1rem = 10px at 430, scales down below */
    font-size: clamp(1px, calc(100vw / 43), 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cs-bg);
  color: var(--cs-text);
  font-family: var(--cs-font-sans);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.site-max {
  width: 100%;
  max-width: var(--cs-max);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
}

.site-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cs-gap);
}

/* column helpers: .col-{start}-{span} on >=768 */
@media (min-width: 768px) {
  .s\:col-1-6  { grid-column: 1 / span 6; }
  .s\:col-1-8  { grid-column: 1 / span 8; }
  .s\:col-1-9  { grid-column: 1 / span 9; }
  .s\:col-7-5  { grid-column: 7 / span 5; }
  .s\:col-7-6  { grid-column: 7 / span 6; }
  .s\:col-9-3  { grid-column: 9 / span 3; }
  .s\:col-9-4  { grid-column: 9 / span 4; }
}
@media (max-width: 767px) {
  .site-grid > * { grid-column: 1 / -1; }
}

.space-large { height: var(--cs-space-l); }
.space-xs    { height: var(--cs-space-xs); }

.section { position: relative; width: 100%; padding-block: var(--cs-pad); }
.section--clip { overflow: hidden; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.h1 {
  font-size: 14.5rem;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.display {            /* big section headline, e.g. "The Future of Golf Fandom" */
  font-size: 10rem;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.h2-c {               /* condensed uppercase, gallery captions */
  font-family: var(--cs-font-cond);
  font-size: 4.5rem;
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.h3-c {               /* condensed uppercase, cards */
  font-family: var(--cs-font-cond);
  font-size: 2.8rem;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.h3 { font-size: 7rem; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.h4 { font-size: 4.6rem; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.h5 { font-size: 4rem; line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; }
.h6 { font-size: 3.6rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--cs-font-cond);
  font-size: 2rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.body-large { font-size: 2.1rem; line-height: 1.4; }
.body-normal { font-size: 1.8rem; line-height: 1.4; }
.text-light { color: var(--cs-text-70); }
.text-dim   { color: var(--cs-text-60); }

/* Subheads that shift to the accent colour once revealed (pair with data-split) */
.text-accent { transition: color 1.2s ease-out 0.2s; }
.text-accent.is-inview { color: var(--cs-heading-accent); }

.txt p + p { margin-top: 1.2em; }

@media (max-width: 767px) {
  .h1 { font-size: 6.4rem; }
  .display { font-size: 6.4rem; }
  .h2-c { font-size: 4.2rem; }
  .h3 { font-size: 6rem; }
  .h4 { font-size: 3.4rem; }
  .h5 { font-size: 3rem; }
  .h6 { font-size: 2.8rem; }
  .eyebrow { font-size: 1.6rem; }
  .body-large { font-size: 1.9rem; }
  .body-normal { font-size: 1.7rem; }
}

/* --------------------------------------------------------------------------
   Word-split reveal  (JS wraps words in .w > .w__i)
   -------------------------------------------------------------------------- */

[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
[data-split] .w__i {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%);
  transition:
    transform 1s var(--cs-ease),
    opacity 0.6s ease-out;
  transition-delay: calc(var(--i, 0) * 28ms);
  will-change: transform, opacity;
}
[data-split].is-inview .w__i {
  opacity: 1;
  transform: translateY(0);
}

/* Continuous scroll-linked fade: JS drives --sf from 0 → 1 as the element
   rises through the lower part of the viewport (used for objective rows). */
[data-scrollfade] {
  opacity: var(--sf, 0);
  transform: translateY(calc((1 - var(--sf, 0)) * 2rem));
}

/* Block-level fade reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 0.9s ease-out, transform 1.1s var(--cs-ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-split] .w__i, [data-reveal], [data-scrollfade] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Media fills (image / video that covers a box)
   -------------------------------------------------------------------------- */

.media-fill { position: relative; overflow: hidden; background: #0a0a0a; }
.media-fill > img,
.media-fill > video,
.media-fill > picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}
.media-fill__overlay {
  position: absolute; inset: 0;
  background: var(--cs-overlay);
  z-index: 2;
  pointer-events: none;
}
.radius-media { border-radius: var(--cs-radius); }

/* Vimeo / iframe "cover" — JS sizes the iframe to cover the box at 16:9 */
.video-cover { position: absolute; inset: 0; overflow: hidden; }
.video-cover iframe,
.video-cover video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.video-cover.is-playing iframe,
.video-cover.is-playing video { opacity: 1; }
.video-cover__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Sound toggle for films with audio (data-sound) — frosted pill, bottom right */
.video-cover__sound {
  position: absolute; right: 2rem; bottom: 2rem; z-index: 6;
  display: inline-flex; align-items: center; gap: 0.8rem;
  height: 4.4rem; padding: 0 1.6rem 0 1.2rem;
  border-radius: var(--cs-radius);
  background: rgba(20, 20, 20, 0.45); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1;
  opacity: 0; transition: opacity 0.6s ease, background-color 0.3s ease;
}
.video-cover.is-playing .video-cover__sound { opacity: 1; }
.video-cover__sound:hover { background: rgba(20, 20, 20, 0.7); }
.video-cover__sound svg { width: 2rem; height: 2rem; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.video-cover__sound svg path { stroke: none; }
.video-cover__sound svg .wave { fill: none; stroke: currentColor; opacity: 0.35; }
.video-cover__sound.is-on svg .wave { opacity: 1; }
.video-cover__sound.is-on { background: rgba(255, 255, 255, 0.92); color: #000; }
@media (max-width: 600px) { .video-cover__sound { right: 1.4rem; bottom: 1.4rem; } }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

/* Transparent, fixed. At the top: name left, inline links right. Once the
   page scrolls (.is-scrolled) the links fade out and a frosted pill with a
   hamburger takes their place; the pill opens .site-menu. .is-light flips the
   colours for the white end of the page. */
.site-nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  height: var(--cs-nav-h);
  display: flex; align-items: center;
  color: #fff;
  pointer-events: none;
  transition: color 0.6s ease;
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; }
.site-nav__brand {
  pointer-events: auto;
  font-weight: 500; font-size: 1.8rem; letter-spacing: -0.01em;
}
/* Brand pill: a white circle mark + the name (fantasy.co-style). Once the page
   is scrolled the letters fade out left→right, the mark grows and "SC" appears
   inside it; scrolling back to the top reverses it. JS splits the name into
   per-letter spans (each gets --i for the stagger). */
a.site-nav__brand {
  font-weight: 700; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 0;
  height: 5rem; padding: 0;
  background: none;
  transition: color 1.2s ease, gap 0s linear;
}
.brand-mark {
  /* fixed 3.6rem box so growing the circle never reflows the letters; the
     visible circle is a pseudo-element scaled from its left edge */
  position: relative; flex: none;
  width: 3.6rem; height: 3.6rem;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark::before {
  content: ""; position: absolute; left: 0; top: 50%; z-index: 1;
  width: 1.8rem; height: 1.8rem; margin-top: -0.9rem; border-radius: 50%;
  background: currentColor;
  transform-origin: left center;
  /* halo: a 50%-opacity navy ring so the white mark stays legible
     over light content passing under the nav. It is a spread shadow on the
     circle itself, so it is always concentric (0.2rem here = 0.4rem once the
     circle is scaled 2x). It grows out after the monogram has appeared and
     collapses first on the way back. */
  --halo: color-mix(in srgb, var(--cs-brand) 50%, transparent);
  box-shadow: 0 0 0 0 var(--halo);
  transition: transform 0.6s var(--cs-ease), box-shadow 0.45s var(--cs-ease);
}
a.site-nav__brand:hover .brand-mark::before { transform: scale(1.08); }
.brand-mark__initials {
  /* the SC monogram (assets/SC_Icon.svg) as a CSS mask over a page-coloured
     box in the site navy; the text in the
     markup is kept as a fallback but hidden */
  position: relative; z-index: 2;
  width: 1.64rem; height: 2rem;
  font-size: 0; color: transparent; overflow: hidden;
  background: var(--cs-brand);
  -webkit-mask: url(../assets/SC_Icon.svg) no-repeat center / contain;
  mask: url(../assets/SC_Icon.svg) no-repeat center / contain;
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.5s var(--cs-ease);
}
.site-nav.is-light .brand-mark__initials { background: #fff; }
.site-nav.is-light .brand-mark::before { --halo: rgba(255, 255, 255, 0.5); }
/* the name's box never animates: it snaps open before the letters fade in, and snaps shut only after they have all faded out */
.brand-name { display: inline-flex; white-space: pre; overflow: visible; max-width: 20rem; margin-left: -0.8rem; transition: max-width 0s linear 0s, margin 0s linear 0s; }
/* letters: fade only, no movement. Out = right→left on scroll; back in = left→right */
.brand-name span { display: inline-block; opacity: 1;
  transition: opacity 0.28s ease;
  transition-delay: calc(0.2s + var(--i, 0) * 35ms); }
/* scrolled: letters out right→left, name collapses, mark grows, SC in */
.site-nav.is-scrolled .brand-name span { opacity: 0; transition-delay: calc((var(--n, 10) - 1 - var(--i, 0)) * 35ms); }
.site-nav.is-scrolled .brand-name { max-width: 0; margin-left: 0; overflow: hidden; transition-delay: 0.65s; }
.site-nav.is-scrolled .brand-mark::before { transform: scale(2); box-shadow: 0 0 0 0.2rem var(--halo); transition-delay: 0.25s, 0.85s; }
.site-nav.is-scrolled .brand-mark__initials { opacity: 1; transform: none; transition-delay: 0.55s; }
.site-nav.is-scrolled a.site-nav__brand:hover .brand-mark::before { transform: scale(2.08); }
.site-nav__right { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 5rem; }
.site-nav__links {
  pointer-events: auto;
  display: flex; gap: 3.2rem; font-size: 1.6rem;
  transition: opacity 0.35s ease, transform 0.5s var(--cs-ease);
}
.site-nav__links a { opacity: 0.7; transition: opacity 0.3s; }
.site-nav__links a:hover { opacity: 1; }
.site-nav.is-scrolled .site-nav__links,
.menu-open .site-nav__links { opacity: 0; transform: translateY(-0.8rem); pointer-events: none; }

.site-nav__toggle {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%) scale(0.85);
  width: 5.6rem; height: 5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--cs-radius);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s var(--cs-ease), background-color 0.4s ease;
}
.site-nav__toggle,
.site-nav.is-scrolled .site-nav__toggle,
.menu-open .site-nav__toggle {
  opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto;
}
.site-nav__links { display: none; }   /* the pill + project list is the only navigation */
.site-nav__toggle:hover { background: rgba(255, 255, 255, 0.25); }
.site-nav__burger { position: relative; width: 1.6rem; height: 1rem; }
.site-nav__burger i {
  position: absolute; left: 0; right: 0; height: 0.2rem;
  background: currentColor; border-radius: 0.1rem;
  transition: transform 0.45s var(--cs-ease), top 0.3s ease, bottom 0.3s ease;
}
.site-nav__burger i:first-child { top: 0; }
.site-nav__burger i:last-child { bottom: 0; }
.menu-open .site-nav__burger i:first-child { top: 0.4rem; transform: rotate(45deg); }
.menu-open .site-nav__burger i:last-child { bottom: 0.4rem; transform: rotate(-45deg); }

.site-nav.is-light { color: #002a4d; }
.site-nav.is-light .site-nav__toggle { background: rgba(0, 42, 77, 0.1); }
.site-nav.is-light .site-nav__toggle:hover { background: rgba(0, 42, 77, 0.18); }
.menu-open .site-nav { color: #fff; }
.menu-open .site-nav .site-nav__toggle { background: rgba(255, 255, 255, 0.15); }

/* Full-screen menu opened by the pill */
.site-menu {
  position: fixed; inset: 0;
  z-index: 45;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(24px) saturate(0.8);
  -webkit-backdrop-filter: blur(24px) saturate(0.8);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.menu-open .site-menu { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s; }
/* Primary links, left */
.site-menu__links {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
  padding-right: 50rem;
}
.site-menu__links a {
  font-size: 7.2rem; line-height: 1; font-weight: 500; letter-spacing: -0.03em;
  color: #fff; opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.5s ease, transform 0.8s var(--cs-ease), color 0.3s;
}
.menu-open .site-menu__links a { opacity: 1; transform: none; }
.menu-open .site-menu__links a:nth-child(2) { transition-delay: 0.06s; }
.menu-open .site-menu__links a:nth-child(3) { transition-delay: 0.12s; }
.menu-open .site-menu__links a:nth-child(4) { transition-delay: 0.18s; }
.site-menu__links a:hover { color: var(--cs-heading-accent); }
.menu-open { overflow: hidden; }

/* Work list, right (tinywins.com "Latest wins" panel): every case study
   and archive project as a card, in home-page order, so a reader can jump
   between projects from any page. Built by initNav from WORK_ITEMS. */
.site-menu__links { display: none; }   /* the overlay is the project list only */
.site-menu__work {
  position: absolute; bottom: 0;
  top: calc((var(--cs-nav-h) - 5rem) / 2);                       /* level with the top of the close pill */
  right: calc(max(var(--cs-gutter), (100vw - var(--cs-max)) / 2 + var(--cs-gutter)) + 5.6rem + 1.2rem);   /* just left of it */
  width: min(46rem, calc(100vw - 2 * var(--cs-gutter) - 6.8rem));
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: 1rem 0 4rem;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-menu__work::-webkit-scrollbar { display: none; }
.site-menu__heading {
  flex: none; margin: 1.2rem 0 0.2rem 0.4rem;
  font-family: var(--cs-font-cond); font-size: 1.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0; transform: translateY(1.6rem);
  transition: opacity 0.45s ease, transform 0.7s var(--cs-ease);
}
.site-menu__heading:first-child { margin-top: 0; }
.menu-open .site-menu__heading { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--i, 0) * 45ms); }
.work-card {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 10.4rem;
  padding: 1.2rem 1.2rem 1.2rem 1.8rem; border-radius: 0.8rem;   /* same radius as the thumbnail */
  background: rgba(40, 40, 40, 0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #cfcfcf; text-decoration: none;
  opacity: 0; transform: translateY(1.6rem);
  transition: opacity 0.45s ease, transform 0.7s var(--cs-ease), background-color 0.3s ease, color 0.3s ease;
}
.menu-open .work-card { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--i, 0) * 45ms), calc(0.12s + var(--i, 0) * 45ms), 0s, 0s; }
.work-card:hover { background: rgba(60, 60, 60, 0.8); color: #fff; }
.work-card.is-current, .work-card.is-current:hover { background: rgba(255, 255, 255, 0.68); color: #161616; }   /* softer than white, still clearly not a hover (hover is a lighter grey) */
.work-card__body { display: flex; flex-direction: column; min-width: 0; }
.work-card__num { font-size: 1.2rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.8rem; }
.work-card__title {   /* the brief description, set like the screenshot: condensed, bold, uppercase */
  font-family: var(--cs-font-cond); font-weight: 700; text-transform: uppercase;
  font-size: 1.9rem; line-height: 1.08; letter-spacing: 0.005em;   /* ~20% under the first cut */
}
.work-card__kind { display: none; }
.work-card__thumb {
  flex: none; width: 12.8rem; height: 8rem; border-radius: 0.8rem; overflow: hidden; background: #333;
  order: 2;
}
.work-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .site-menu__links { padding-right: 40rem; }
  .site-menu__links a { font-size: 5.6rem; }
}
@media (max-width: 767px) {
  .site-menu__links { top: calc(var(--cs-nav-h) + 1.6rem); transform: none; gap: 0.6rem; padding-right: 0; }
  .site-menu__links a { font-size: 3.6rem; }
  .site-menu__work {
    top: calc(var(--cs-nav-h) + 0.8rem); right: var(--cs-gutter); left: var(--cs-gutter); width: auto;
    padding-bottom: 3rem;
  }
  .work-card { padding: 1rem 1rem 1rem 1.4rem; gap: 1.4rem; min-height: 0; }
  .work-card__title { font-size: 1.8rem; }
  .work-card__thumb { width: 10.4rem; height: 6.5rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.media-hero {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 56rem;
  color: #fff;
}
/* Pinned media: a zero-height sticky shell keeps the full-screen figure fixed
   at the top while the page scrolls over it; JS fades it out (data-hero-fade). */
.media-hero__pin { position: sticky; top: 0; height: 0; z-index: 1; }
.media-hero__media {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  will-change: opacity;
}
.media-hero__media.is-hidden { visibility: hidden; }
/* Everything after the hero paints above the pinned video */
.media-hero ~ * { position: relative; z-index: 1; }
.media-hero__content {
  position: absolute; inset: 0;
  z-index: 3;
  display: flex; align-items: flex-end;
}
.media-hero__title {
  position: relative;
  display: flex; flex-direction: column; gap: 3rem;
  padding-bottom: 4rem;
  width: 100%;
}
.media-hero__crumb { display: flex; align-items: center; gap: 1rem; font-size: 1.8rem; }
.media-hero__crumb a { opacity: 0.6; transition: opacity 0.4s; }
.media-hero__crumb a:hover { opacity: 1; }
.media-hero .h1 { margin-left: -0.05em; }
.media-hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.2rem 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--cs-text-15);
  font-size: 1.5rem;
  color: var(--cs-text-70);
}
.media-hero__meta dd { margin: 0; }   /* kill the UA indent so the meta lines up with the title */
.media-hero__meta b { display: block; color: #fff; font-weight: 500; margin-bottom: 0.4rem; }
.media-hero__meta strong { font-weight: 500; }   /* Inter Medium (500) is the heaviest weight loaded */

/* --------------------------------------------------------------------------
   Intro statement
   -------------------------------------------------------------------------- */

.intro { padding-top: var(--cs-pad); }
.intro__grid { align-items: end; padding-bottom: var(--cs-pad); }
.intro__text {
  font-size: 5.6rem;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.03em;
}
@media (max-width: 767px) { .intro__text { font-size: 3.4rem; } }

/* --------------------------------------------------------------------------
   Media article (large rounded image or video)
   -------------------------------------------------------------------------- */

.media-article figure.media-fill {
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
}
.media-article figure.media-fill.browser-frame { aspect-ratio: auto; }
.media-article .browser-frame__view { aspect-ratio: 16 / 11; }
.media-article--narrow figure.media-fill { width: 87.5%; }
.media-article figure.media-fill > img { object-position: var(--pos, top center); }

/* --------------------------------------------------------------------------
   Pinned scroll-through media ([data-media-scroll])
   The frame grows into place and centres, then sticks while the tall page
   screenshot scrolls inside it; the page resumes once the screenshot has
   been scrolled to its end. JS sets the block's height and drives --ss
   (frame scale) and --sp (screenshot scroll progress).
   -------------------------------------------------------------------------- */
.media-scroll { position: relative; padding: 0; min-height: 200vh; }
.media-scroll__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
}
.media-scroll__sticky > .site-max { width: 100%; }
.media-article.media-scroll figure.media-scroll__frame {
  /* final (pinned) width is 87.5% of the container — what used to be the
     start size; the grow-in below still starts at 87.5% of that */
  width: min(87.5%, calc((100vh - 14rem) * 1.4545 * 0.875));
  width: min(87.5%, calc((100svh - 14rem) * 1.4545 * 0.875));
  aspect-ratio: auto;
  margin-inline: auto;
  transform: scale(calc(0.875 + 0.125 * var(--ss, 0)));
  transform-origin: 50% 50%;
  will-change: transform;
}
.media-article.media-scroll .browser-frame__view { aspect-ratio: 16 / 11; position: relative; overflow: hidden; }
.media-scroll .browser-frame__view img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;
  object-fit: fill;
  transform: translateY(calc(var(--sp, 0) * -1 * var(--scroll-max, 0px)));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .media-scroll__frame { transform: none !important; }
}
@media (max-width: 767px) {
  /* Phones: let the pinned frame fill the viewport height instead of being
     capped by the 16:11 desktop ratio at 87.5% width. Height = viewport minus
     the nav, the browser bar and a little breathing room top and bottom. */
  .media-article.media-scroll figure.media-scroll__frame { width: 100%; }
  .media-article.media-scroll .browser-frame__view {
    aspect-ratio: auto;
    height: calc(100vh - 18rem);
    height: calc(100svh - 18rem);
  }
}

/* Scroll-linked grow: JS drives --ss 0 → 1 as the element rises through the
   viewport; the frame scales from 87.5% to full size (LIV Golf media reveal). */
[data-scrollscale] {
  transform: scale(calc(0.875 + 0.125 * var(--ss, 0)));
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { [data-scrollscale] { transform: none !important; } }
.media-article figcaption {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  color: var(--cs-text-60);
}
@media (max-width: 767px) {
  .media-article figure.media-fill { width: 100%; aspect-ratio: 4 / 3; }
}

/* Browser-window frame around a screenshot */
.browser-frame {
  position: relative;
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: #111;
  box-shadow: 0 4rem 8rem -2rem rgba(0, 0, 0, 0.7);
}
.browser-frame__bar {
  height: 3.2rem;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0 1.4rem;
  background: #1c1c1e;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.browser-frame__bar i { width: 1rem; height: 1rem; border-radius: 50%; background: #3a3a3c; }
.browser-frame__view { position: relative; overflow: hidden; }
.browser-frame__view img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* --------------------------------------------------------------------------
   Two-column text section (eyebrow left, content right)
   -------------------------------------------------------------------------- */

.text-section .site-grid { row-gap: 2.8rem; }
.text-section__content {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4rem;
}
@media (min-width: 1024px) { .text-section__content { gap: 6.4rem; } }
.text-section__content .txt { width: 100%; }

/* --------------------------------------------------------------------------
   Numbered objectives list
   -------------------------------------------------------------------------- */

.objectives .eyebrow { margin-bottom: 6.4rem; }
.objectives li {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cs-gap);
  padding-block: 3rem;
  border-top: 1px solid var(--cs-text-15);
}
.objectives li:last-child { border-bottom: 1px solid var(--cs-text-15); }
.objectives__num { grid-column: 1 / span 1; }
.objectives__text { grid-column: 7 / span 5; }
@media (min-width: 768px)  { .objectives li { padding-block: 3.2rem; } }
@media (min-width: 1024px) { .objectives li { padding-block: 4rem; } }
@media (max-width: 767px) {
  .objectives li { grid-template-columns: 6rem 1fr; }
  .objectives__num { grid-column: 1; }
  .objectives__text { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Sticky gallery ("gallery-vertical")
   Fullscreen media stays pinned while numbered captions scroll past.
   -------------------------------------------------------------------------- */

.gallery { position: relative; width: 100%; }
.gallery__medias { position: absolute; inset: 0; }
.gallery__sticky {
  position: sticky; top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.gallery__item {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease-out, visibility 0s linear 0.7s;
}
.gallery__item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease-out, visibility 0s;
}
/* blurred, dimmed backdrop */
.gallery__bg {
  position: absolute; inset: -4%;
  width: 108%; height: 108%;
  object-fit: cover;
  object-position: var(--pos, top center);
  filter: blur(28px) saturate(1.1);
  opacity: 0.45;
  transform: scale(1.04);
}
.gallery__bg-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }

/* foreground screenshot ("shot") — anchored left, fills the viewport height
   (the tall page screenshot is cropped from the top); captions sit right */
.gallery__shot {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  width: 52%;
  height: calc(100vh - 12rem);
  height: calc(100svh - 12rem);
  transition: transform 1.2s var(--cs-ease);
}
.gallery__item.is-active .gallery__shot { transform: translateY(-50%) scale(1); }
.gallery__shot--tall { aspect-ratio: 16 / 11.5; }
/* --fit: for a screen-sized (16:9 / 16:10) screenshot rather than a tall page —
   the frame wraps the image instead of filling the viewport height */
.gallery__shot--fit { height: auto; }
.gallery__shot--fit .browser-frame { height: auto; }
.gallery__shot--fit .browser-frame__view { height: auto; }
/* in a fit frame the phone is sized like a phone beside a laptop screen: ~85% of the
   screen height, overhanging the frame's bottom-right corner */
.gallery__shot--fit.gallery__shot--pair .gallery__shot-secondary { height: 86%; right: -2%; bottom: -8%; }
.gallery__shot--mobile {
  /* height: auto so the 9:19 aspect ratio actually applies (the base rule sets a
     viewport height, which would stretch the phone and crop the screen's sides);
     width also capped so the phone never exceeds the viewport height */
  width: min(clamp(20rem, 22vw, 30rem), calc((100svh - 12rem) * 9 / 19));
  height: auto;
  left: 20%;
  aspect-ratio: 9 / 19;
  border-radius: 3.6rem;
  border: 0.8rem solid #161616;
  background: #161616;
  overflow: hidden;
  box-shadow: 0 4rem 8rem -2rem rgba(0,0,0,.8);
}
.gallery__shot--mobile .browser-frame { border-radius: 2.8rem; box-shadow: none; }
.gallery__shot--mobile .browser-frame__bar { display: none; }
.gallery__shot--mobile .browser-frame__view { height: 100%; }
/* phone overlay — sits inside the desktop frame's right edge (clear of the
   captions) and arrives a beat after it: fades in while sliding up */
.gallery__shot--pair .gallery__shot-secondary {
  position: absolute; right: 3%; bottom: 5%;
  height: 62%;
  aspect-ratio: 9 / 19;
  border-radius: 2.4rem;
  border: 0.6rem solid #161616;
  background: #161616;
  overflow: hidden;
  box-shadow: 0 3rem 6rem -1.5rem rgba(0,0,0,.8);
  opacity: 0;
  transform: translateY(5rem);
  transition: opacity 0.9s ease-out, transform 1.6s var(--cs-ease);
}
.gallery__item.is-active .gallery__shot--pair .gallery__shot-secondary {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
.gallery__shot .browser-frame { height: 100%; }
.gallery__shot .browser-frame__view { height: calc(100% - 3.2rem); }
.gallery__shot .browser-frame__view img {
  /* desktop shots: always the full page width — a tall page is cropped at the bottom, never at the sides */
  width: 100%; height: auto; object-fit: fill; object-position: top;
}
.gallery__shot--mobile .browser-frame__view img,
.gallery__shot-secondary img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.gallery__captions {
  position: relative;
  display: flex; flex-direction: column;
  gap: 42rem;
  padding-block: 42rem;
  z-index: 2;
}
.gallery__caption { position: relative; z-index: 2; }
.gallery__caption-inner { display: flex; flex-direction: column; align-items: flex-start; }
.gallery__caption .eyebrow { color: var(--cs-text-60); margin-bottom: 2.4rem; }
.gallery__caption .body-normal { margin-top: 4rem; color: var(--cs-text-60); }

@media (max-width: 767px) {
  .gallery__captions { gap: 60rem; padding-block: 60rem; }
  .gallery__shot {
    left: 50%; top: 9%;
    width: 86%;
    height: auto;
    transform: translateX(-50%) scale(0.96);
    aspect-ratio: 3 / 4;   /* tall enough on a phone to show the sections the captions describe */
  }
  .gallery__item.is-active .gallery__shot { transform: translateX(-50%) scale(1); }
  .gallery__shot--mobile { width: 44%; top: 8%; aspect-ratio: 9 / 16; }
  .gallery__shot--fit { aspect-ratio: auto; }   /* screen-sized shots keep their own ratio on phones too */
  .gallery__shot--pair .gallery__shot-secondary { right: 2%; bottom: 4%; height: 70%; }
  .gallery__shot--fit.gallery__shot--pair .gallery__shot-secondary { height: 80%; right: -1%; bottom: -6%; }
  .gallery__caption-inner {
    padding: 2.4rem;
    border-radius: var(--cs-radius);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
@media (orientation: portrait) and (min-width: 768px) {
  .gallery__captions { gap: 60rem; padding-block: 60rem; }
}

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */

.quote__mark { width: 3.9rem; height: 3.2rem; margin-bottom: 3.2rem; fill: currentColor; }
.quote cite { display: block; margin-top: 2rem; color: var(--cs-text-60); font-style: normal; font-size: 3.45rem; }   /* 25% smaller than the .h4 quote it sits under */
@media (max-width: 767px) { .quote cite { font-size: 2.55rem; } }

/* --------------------------------------------------------------------------
   Fullscreen media band (video or image)
   -------------------------------------------------------------------------- */

.media-band { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; }
.media-band__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding-bottom: 4rem;
  color: var(--cs-text-70);
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   Stats carousel
   -------------------------------------------------------------------------- */

.stats { position: relative; overflow: hidden; padding-block: var(--cs-pad); }
.stats__track {
  display: flex; gap: var(--cs-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.2rem;
}
.stats__track::-webkit-scrollbar { display: none; }
.stat {
  position: relative;
  flex: 0 0 34.4rem;
  min-height: 44rem;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4.8rem 3.2rem 4rem;
  border-radius: var(--cs-radius);
  scroll-snap-align: start;
  isolation: isolate;
}
.stat::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cs-text-15); opacity: 0.6;
  border-radius: var(--cs-radius);
}
.stat__value { display: flex; align-items: flex-end; gap: 1.2rem; }
.stat__value small { font-size: 0.45em; line-height: 1.2; padding-bottom: 0.25em; }
.stat__content { display: flex; flex-direction: column; gap: 2rem; }
@media (max-width: 767px) {
  .stat { flex-basis: 78vw; min-height: 36rem; }
  .stats__track {
    padding-inline: var(--cs-gutter);
    margin-inline: calc(var(--cs-gutter) * -1);
    scroll-padding-inline: var(--cs-gutter);
  }
}

/* --------------------------------------------------------------------------
   Image grid (2 / 3 up)
   -------------------------------------------------------------------------- */

.img-grid { display: grid; gap: var(--cs-gap); }
.img-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.img-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.img-grid .media-fill { aspect-ratio: 4 / 5; }
.img-grid--wide .media-fill { aspect-ratio: 16 / 10; }
@media (max-width: 767px) { .img-grid--2, .img-grid--3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Password dialog for gated case studies (see netlify/edge-functions/gate.ts)
   Opened by initGate for any link carrying data-gate="<slug>".
   -------------------------------------------------------------------------- */

.gate {
  position: fixed; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: var(--cs-gutter);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(24px) saturate(0.8);
  -webkit-backdrop-filter: blur(24px) saturate(0.8);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.gate.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
.gate-open { overflow: hidden; }
.gate__panel {
  position: relative;
  width: min(56rem, 100%);
  padding: 4.8rem 4.4rem 4.4rem;
  border-radius: 1.6rem;
  background: rgba(30, 30, 30, 0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #fff;
  transform: translateY(2rem);
  transition: transform 0.7s var(--cs-ease);
}
.gate.is-open .gate__panel { transform: none; }
.gate__close {
  position: absolute; top: 1.6rem; right: 1.6rem;
  width: 4rem; height: 4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  font-size: 2.2rem; line-height: 1;
  transition: background 0.3s ease;
}
.gate__close:hover { background: rgba(255, 255, 255, 0.22); }
.gate__panel .eyebrow { color: rgba(255, 255, 255, 0.55); margin-bottom: 1.6rem; }
.gate__title { font-size: 3.2rem; line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.gate__text { font-size: 1.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.75); margin-bottom: 2.8rem; }
.gate__form { display: flex; gap: 1rem; }
.gate__input {
  flex: 1; min-width: 0; height: 5rem; padding: 0 1.8rem;
  border-radius: var(--cs-radius);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.35); color: #fff;
  font: inherit; font-size: 1.8rem;
  transition: border-color 0.3s ease;
}
.gate__input:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); }
.gate__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.gate__form .btn { padding: 0 2.4rem; }
.gate__form .btn[disabled] { opacity: 0.6; pointer-events: none; }
.gate.is-shaking .gate__form { animation: gate-shake 0.4s ease; }
@keyframes gate-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-0.6rem); } 75% { transform: translateX(0.6rem); } }
.gate__error { margin-top: 1.4rem; font-size: 1.5rem; color: #ffb4a8; }
.gate__error[hidden] { display: none; }
.gate__contact { display: inline-block; margin-top: 2.4rem; font-size: 1.6rem; color: rgba(255, 255, 255, 0.7); text-decoration: underline; text-underline-offset: 0.3em; }
.gate__contact:hover { color: #fff; }
@media (max-width: 600px) {
  .gate__panel { padding: 4rem 2.8rem 3.2rem; }
  .gate__title { font-size: 2.6rem; }
  .gate__form { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 5rem; padding: 0 3.2rem;
  border-radius: var(--cs-radius);
  font-size: 1.8rem; font-weight: 500; line-height: 1;
  white-space: nowrap;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.btn--outline { border: 1px solid var(--cs-text-15); }
.btn--outline:hover { background: #fff; color: #000; border-color: #fff; }
.btn--solid { background: #fff; color: #000; }
.btn--solid:hover { background: var(--cs-text-70); }

/* --------------------------------------------------------------------------
   Up next cards
   -------------------------------------------------------------------------- */

.up-next__row { display: flex; gap: var(--cs-gap); }
.up-next__card { flex: 1; min-width: 0; }
.up-next__card .media-fill { aspect-ratio: 1; }
.up-next__card .media-fill img { transition: transform 1s var(--cs-ease); }
.up-next__card:hover .media-fill img { transform: scale(1.04); }
.up-next__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; margin-top: 3.6rem; }
.up-next__body .btn { margin-top: 1.6rem; }
@media (max-width: 767px) { .up-next__row { flex-direction: column; gap: 6.4rem; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative; overflow: hidden;
  padding-block: 12rem 4rem;
  border-top: 1px solid var(--cs-text-15);
}
.site-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; }
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.6rem;
  margin-top: 12rem;
  font-size: 1.4rem;
  color: var(--cs-text-60);
}
.site-footer__bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Curtain ending
   <main> is an opaque layer above the footer. The footer is a full-screen
   video pinned to the bottom of the viewport (sticky), so when the reader
   scrolls past the end of the page the page itself lifts away like a curtain
   and reveals the video already playing beneath it.
   <main> ends with .page-end; when it scrolls into view JS adds .is-light to
   <main>, which transitions the page background to white (and the text
   tokens to navy) before the curtain rises.
   -------------------------------------------------------------------------- */
main {
  position: relative; z-index: 1;
  background: var(--cs-bg);
  color: var(--cs-text);
  transition: background-color 1.2s ease, color 1.2s ease;
}
main.is-light {
  --cs-text: #002a4d;
  --cs-text-70: rgba(0, 42, 77, 0.75);
  --cs-text-60: rgba(0, 42, 77, 0.62);
  --cs-text-15: rgba(0, 42, 77, 0.12);
  --cs-heading-accent: #0d6fd1;
  background: var(--cs-page-end, #fff);
}
.text-light, .text-dim, .stat::before, .objectives li, .quote cite,
.media-hero__meta, .site-nav__links a { transition: color 1.2s ease, background-color 1.2s ease, border-color 1.2s ease; }
.page-end { height: 28vh; }
.site-footer--media {
  position: sticky;
  bottom: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  min-height: 60rem;
  padding: 0;
  border-top: 0;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.site-footer__media { position: absolute; inset: 0; z-index: 0; }
/* Optional dark veil (data-footer-veil): JS fades it out as the footer is revealed */
.site-footer__veil {
  position: absolute; inset: 0; z-index: 1;
  background: var(--cs-bg);
  opacity: var(--veil, 0.92);
  pointer-events: none;
}
.site-footer--media .site-footer__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-top: 20rem;
  padding-bottom: 4rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
}
.site-footer--media .site-footer__cta { gap: 8rem; }

/* "See it live" callout — link to the shipped site */
.site-footer__live { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.site-footer__live .eyebrow { color: var(--cs-text-70); }
.site-footer__live-link {
  display: inline-flex; align-items: baseline; gap: 1.2rem;
  font-size: 4rem; line-height: 1; font-weight: 500; letter-spacing: -0.02em;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.site-footer__live-link:hover { border-color: #fff; }
.site-footer__live-link span { font-size: 0.6em; transition: transform 0.4s var(--cs-ease); }
.site-footer__live-link:hover span { transform: translate(0.3rem, -0.3rem); }
@media (max-width: 767px) { .site-footer__live-link { font-size: 2.6rem; } }
.site-footer--media .site-footer__bottom { margin-top: 6rem; color: var(--cs-text-70); }

/* --------------------------------------------------------------------------
   White curtain footer (archive pages). Same construction as the home page:
   the footer is white and pinned to the bottom of the viewport *beneath* the
   opaque page (sticky, z-index 0 under main's z-index 1), so as the reader
   scrolls past the end the page lifts away like a curtain and reveals it.
   It stays invisible (JS: .is-revealed) until the page has actually started
   to lift, and the nav turns navy once the page has cleared it.
   -------------------------------------------------------------------------- */
.site-footer--curtain {
  position: sticky; bottom: 0; z-index: 0;
  min-height: 50vh; min-height: 50svh;
  display: flex; align-items: flex-end;
  padding: 6rem 0 0; border-top: 0; overflow: hidden;
  background: #fff; color: var(--cs-brand);
  visibility: hidden;
  --cs-text: #002a4d;
  --cs-text-70: rgba(0, 42, 77, 0.75);
  --cs-text-60: rgba(0, 42, 77, 0.62);
  --cs-text-15: rgba(0, 42, 77, 0.12);
}
.site-footer--curtain.is-revealed { visibility: visible; }
.site-footer--curtain .site-footer__inner { width: 100%; padding-bottom: 3.2rem; }
.site-footer--curtain .site-footer__cta { gap: 3.2rem; }
.site-footer--curtain .btn--solid { background: var(--cs-brand); color: #fff; }
.site-footer--curtain .btn--solid:hover { background: #0d4a7d; }
.site-footer--curtain .site-footer__bottom { margin-top: 5.6rem; color: var(--cs-text-60); }
.site-footer--curtain .site-footer__bottom a:hover { color: var(--cs-brand); }

/* --------------------------------------------------------------------------
   Archive carousel: square title-only cards in a horizontal scroll-snap row.
   The current project is the white card; the edge fades, the peeking cards
   and the arrow buttons all say "this slides". JS (data-carousel) drives the
   arrows, disables them at the ends and starts with the current card in view.
   -------------------------------------------------------------------------- */
.archive-carousel { position: relative; }
.archive-carousel__head { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; margin-bottom: 2.4rem; }
.archive-carousel__controls { display: flex; gap: 0.8rem; }
.archive-carousel__btn {
  width: 4.4rem; height: 4.4rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--cs-text-15); background: rgba(255, 255, 255, 0.1); color: #fff;
  font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.archive-carousel__btn:hover { background: #fff; color: #000; }
.archive-carousel__btn:disabled { opacity: 0.3; cursor: default; background: transparent; color: #fff; }
.archive-carousel__track {
  position: relative; list-style: none; margin: 0; padding: 0.6rem 0 1.2rem;
  display: flex; gap: var(--cs-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8rem, #000 calc(100% - 8rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8rem, #000 calc(100% - 8rem), transparent);
}
.archive-carousel.is-start .archive-carousel__track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 8rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 8rem), transparent); }
.archive-carousel.is-end .archive-carousel__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8rem); mask-image: linear-gradient(90deg, transparent, #000 8rem); }
.archive-carousel.is-start.is-end .archive-carousel__track { -webkit-mask-image: none; mask-image: none; }
.archive-carousel__track::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  /* phones: cards run edge to edge with no fade; the peeking card is signal enough */
  .archive-carousel .archive-carousel__track,
  .archive-carousel.is-start .archive-carousel__track,
  .archive-carousel.is-end .archive-carousel__track { -webkit-mask-image: none; mask-image: none; }
}
.archive-carousel__track li { flex: 0 0 auto; scroll-snap-align: start; }
.archive-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 26rem; height: 26rem; padding: 2.4rem; box-sizing: border-box;
  border-radius: var(--cs-radius); border: 1px solid var(--cs-text-15);
  background: #0a0a0a; color: #fff; text-decoration: none;
  transition: border-color 0.4s ease, transform 0.5s var(--cs-ease);
}
.archive-card__poster {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.4) brightness(0.55);
  transition: filter 0.5s ease, transform 1s var(--cs-ease);
}
.archive-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.7));
}
.archive-card__tag, .archive-card__title { position: relative; z-index: 2; }
a.archive-card:hover { border-color: rgba(255, 255, 255, 0.5); transform: translateY(-0.4rem); }
a.archive-card:hover .archive-card__poster { filter: saturate(0.9) brightness(0.85); transform: scale(1.04); }
.archive-card__tag { margin-bottom: auto; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.archive-card__title { font-size: 2.2rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
/* the current project: wider, full colour, white edge */
.archive-card.is-current { width: 42rem; border: 2px solid #fff; }
.archive-card.is-current .archive-card__poster { filter: none; }
.archive-card.is-current .archive-card__title { font-size: 2.6rem; }
@media (max-width: 767px) {
  .archive-card { width: 19rem; height: 19rem; padding: 1.8rem; }
  .archive-card.is-current { width: 30rem; }
  .archive-card__title, .archive-card.is-current .archive-card__title { font-size: 1.8rem; }
}