/* ==========================================================================
   Jay Hernandez — site styles
   Headlines: Bebas Neue, all caps
   Text + UI: Poppins (Newsreader serif available in the preview toggle)
   ========================================================================== */

:root {
  /* Colour */
  --screen: #000000;
  --bone: #ece6dc;
  --ash: #948d83;
  --graphite: #4a463f;
  --gold: #e2b062;
  --gold-deep: #b07b2e;
  --gold-gradient: linear-gradient(115deg, #a8752b 0%, #dcaa58 20%, #fbe7b5 42%, #e2b062 58%, #b07b2e 78%, #f0cf8a 100%);
  --line-dark: rgba(236, 230, 220, .16);
  --line-light: rgba(0, 0, 0, .14);

  /* Type */
  --headline: "Bebas Neue", "Arial Narrow", sans-serif;
  --ui: "Poppins", system-ui, sans-serif;
  --text: "Poppins", system-ui, sans-serif;
  --text-weight: 300;
  --text-lh: 1.75;
  --text-scale: 1;

  --step-0: calc(clamp(1rem, .96rem + .2vw, 1.1rem) * var(--text-scale));
  --step-1: calc(clamp(1rem, .94rem + .25vw, 1.15rem) * var(--text-scale));
  --h-xl: clamp(4.5rem, 1.6rem + 13vw, 17rem);   /* panel titles, page titles */
  --h-lg: clamp(2.6rem, 1.6rem + 3.4vw, 5.4rem);  /* section titles inside pages (page heroes use --h-xl) */
  --h-md: clamp(2.1rem, 1.4rem + 2.2vw, 3.8rem); /* about, contact, headings beside text */
  --h-sm: clamp(1.8rem, 1.3rem + 1.6vw, 3rem);   /* capability titles, cards */

  /* Space */
  --gutter: clamp(16px, 4vw, 112px);
  --section: clamp(96px, 11vw, 176px);
  --max: none;   /* every section runs the full width of the screen */

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--screen);
  color: var(--bone);
  font-family: var(--text);
  font-weight: var(--text-weight);
  font-size: var(--step-0);
  line-height: var(--text-lh);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
strong { font-weight: 500; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
::selection { background: var(--gold); color: var(--screen); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 16px; background: var(--bone); color: var(--screen);
  font-family: var(--ui); text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Headlines ---------- */
.h {
  font-family: var(--headline); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; line-height: .9;
  /* Bebas has no descenders in caps: trim the empty space under the baseline */
  text-box: trim-both cap alphabetic;
}
.h-xl { font-size: var(--h-xl); line-height: .84; }
.h-lg { font-size: var(--h-lg); }
.h-md { font-size: var(--h-md); }
.h-sm { font-size: var(--h-sm); line-height: .95; }
.h-balance { text-wrap: balance; }

/* Masked lines for reveal animations; the padding gives commas room without adding visible space */
.line { display: block; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.line__inner { display: block; }
/* Masked lines sit in their own boxes, so the heading's trim can't reach them.
   Trim the first and last line here so the heading is the same height split or whole (no jump). */
.h:has(> .line) { display: flex; flex-direction: column; }   /* no margin collapsing between masked lines */
.h .line:first-child > .line__inner { text-box: trim-start cap alphabetic; }
.h .line:last-child > .line__inner { text-box: trim-end cap alphabetic; }
.h .line:only-child > .line__inner { text-box: trim-both cap alphabetic; }

.gold-text {
  background: var(--gold-gradient); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Eyebrow: a short gold rule and a tracked label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ui); font-weight: 500; font-size: .8rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--gold-gradient); flex-shrink: 0; }
/* letter-spacing leaves a trailing gap after the last letter; pull the right rule in to match */
.eyebrow::after { margin-left: -.32em; }

.lede { font-size: var(--step-1); line-height: 1.6; color: rgba(236,230,220,.78); max-width: 34em; }

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--bone); --btn-bd: rgba(236,230,220,.35);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .7em; min-height: 52px; padding: .8em 1.9em;
  font-family: var(--ui); font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; line-height: 1;
  color: var(--btn-fg); background: transparent;
  border: 1px solid var(--btn-bd); border-radius: 999px;
  overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-position 1.2s var(--ease-out);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .7em; }

/* Ghost: a fill wipes up from the bottom on hover */
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--bone); border-radius: inherit;
  transform: translateY(101%); transition: transform .55s var(--ease-out);
}
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { transform: translateY(0); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--screen); border-color: var(--bone); }

/* Gold: brushed-metal gradient, a light sheen sweeps across on hover */
.btn--gold {
  --btn-fg: #1c1408;
  background: var(--gold-gradient); background-size: 230% 100%; background-position: 0% 50%;
  border-color: rgba(251,231,181,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 14px 34px -16px rgba(226,176,98,.75);
}
.btn--gold::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.btn--gold:hover, .btn--gold:focus-visible {
  background-position: 100% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 22px 48px -16px rgba(226,176,98,.95);
}
.btn--gold:hover::after, .btn--gold:focus-visible::after { animation: sheen .9s var(--ease-out); }
.btn--glint::after { animation: sheen-idle 6s var(--ease-out) 2s infinite; }
@keyframes sheen { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@keyframes sheen-idle {
  0% { transform: translateX(-160%) skewX(-18deg); }
  18%, 100% { transform: translateX(330%) skewX(-18deg); }
}

/* Gold outline: for the second action next to a gold button */
.btn--outline-gold { --btn-fg: var(--gold); --btn-bd: rgba(226,176,98,.55); }
.btn--outline-gold::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gold-gradient); background-size: 230% 100%; border-radius: inherit;
  transform: translateY(101%); transition: transform .55s var(--ease-out);
}
.btn--outline-gold:hover::before, .btn--outline-gold:focus-visible::before { transform: translateY(0); }
.btn--outline-gold:hover, .btn--outline-gold:focus-visible { color: #1c1408; border-color: rgba(251,231,181,.6); }

.btn--sm { min-height: 42px; padding: .7em 1.4em; font-size: .72rem; }
.btn--lg { min-height: 60px; padding: .9em 2.3em; font-size: .82rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.round-btn {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  border: 1px solid rgba(236,230,220,.3); border-radius: 50%;
  transition: background-color .4s var(--ease-out), border-color .4s, color .4s;
}
.round-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:hover { background: var(--bone); border-color: var(--bone); color: var(--screen); }

/* Parallax media: the picture is taller than its frame so it can drift */
.pmedia { position: relative; overflow: hidden; background: #111; }
.pmedia img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; padding: 18px var(--gutter);
  transition: background-color .4s, padding .4s var(--ease-out), box-shadow .4s;
}
.site-header.is-solid {
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-dark);
}
.brand {
  justify-self: start; display: inline-flex; gap: .25em; overflow: hidden;
  font-family: var(--headline); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
}
.brand__word { display: inline-block; }

.nav__list { display: flex; gap: clamp(22px, 3vw, 48px); }
.nav__link {
  position: relative; display: inline-block; padding: 8px 0;
  font-family: var(--ui); font-weight: 500; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: rgba(236, 230, 220, .78); transition: color .3s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-gradient); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current="page"] { color: var(--bone); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header__end { justify-self: end; display: flex; align-items: center; gap: 14px; }

.menu-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  font-family: var(--ui); font-weight: 500; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
}
.menu-toggle__icon { position: relative; width: 22px; height: 10px; }
.menu-toggle__icon i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.menu-toggle__icon i:first-child { top: 0; }
.menu-toggle__icon i:last-child { top: 8.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 120px var(--gutter) 40px;
  background: var(--screen);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .8s var(--ease-in-out), visibility 0s .8s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease-in-out); }
.menu__link {
  display: block; overflow: hidden;
  font-family: var(--headline); text-transform: uppercase;
  font-size: clamp(3.4rem, 15vw, 7rem); line-height: .95; text-decoration: none;
}
.menu__link > span { display: block; transform: translateY(105%); transition: transform .9s var(--ease-out); }
.menu.is-open .menu__link > span { transform: none; }
.menu__foot { display: grid; gap: 20px; color: var(--ash); }
.menu__social { display: flex; gap: 22px; }
.menu__social a { font-family: var(--ui); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--bone); }

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .header__cta { display: none; }
}

/* ==========================================================================
   Home 1. Hero
   ========================================================================== */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: var(--screen);
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 32%, rgba(0,0,0,0) 58%);
}
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding: 0 var(--gutter) clamp(28px, 4vw, 52px);
}
.hero__title { display: grid; gap: 0; }
.hero__eyebrow { display: block; overflow: hidden; margin-bottom: clamp(16px, 1.6vw, 24px); }
.hero__eyebrow .eyebrow { font-size: clamp(.72rem, .66rem + .3vw, .9rem); }
.hero__lines { font-size: clamp(3rem, 1.2rem + 5.6vw, 7.6rem); line-height: .88; }
@media (min-width: 701px) { .hero__lines .line__inner { white-space: nowrap; } }

.hero__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hero__clock { font-family: var(--ui); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(236,230,220,.7); }
.hero__clock time { color: var(--bone); margin-left: .5em; font-variant-numeric: tabular-nums; }

.video-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(236,230,220,.35); border-radius: 999px;
  font-family: var(--ui); font-weight: 500; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  transition: border-color .3s, background-color .3s;
}
.video-toggle:hover { border-color: var(--bone); background: rgba(236,230,220,.08); }
.video-toggle__icon { position: relative; width: 10px; height: 12px; }
.video-toggle__icon::before, .video-toggle__icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 100%; background: currentColor; }
.video-toggle__icon::before { left: 0; }
.video-toggle__icon::after { right: 0; }
.video-toggle[aria-pressed="true"] .video-toggle__icon::before {
  width: 0; height: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor;
}
.video-toggle[aria-pressed="true"] .video-toggle__icon::after { display: none; }

/* Hero titles stay hidden until the animation has set its starting positions (no flash of text).
   If the script never runs, they appear anyway after 3.5 seconds. */
.js [data-preload-hide]:not(.is-ready) { visibility: hidden; animation: preload-unhide 0s linear 3.5s forwards; }
@keyframes preload-unhide { to { visibility: visible; } }

/* Inner-page wallpapers rise out of black */
.js .page-hero--full .slides { animation: wallpaper-in 2.2s cubic-bezier(.33, 0, .2, 1) .15s both; }
@keyframes wallpaper-in { from { opacity: 0; } to { opacity: 1; } }

.curtain { position: absolute; inset: 0; background: var(--screen); pointer-events: none; z-index: 2; opacity: 0; }
.js .curtain { opacity: 1; animation: curtain-fallback .8s ease 3.5s forwards; }
@keyframes curtain-fallback { to { opacity: 0; visibility: hidden; } }

@media (max-width: 700px) {
  .hero__lines { font-size: 10.4vw; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero__meta { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   Home 2. About
   ========================================================================== */
.about { padding: var(--section) var(--gutter) clamp(64px, 7vw, 104px); }
.about__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 112px); align-items: center;
}
.about__figure { position: relative; aspect-ratio: 1 / 1; width: min(100%, calc(100svh - 160px)); justify-self: center; }
.about__media { position: absolute; inset: 0; }
.about__caption {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-family: var(--ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,230,220,.85);
}

/* Play button over the portrait: opens the intro film */
.about__play {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; align-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);
}
.play-disc {
  position: relative; display: grid; place-items: center;
  width: clamp(84px, 7vw, 112px); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold-gradient); background-size: 230% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 20px 50px -14px rgba(226,176,98,.8);
  transition: transform .6s var(--ease-out), background-position 1.2s var(--ease-out);
}
.play-disc::before, .play-disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(226,176,98,.7); animation: ring 2.8s var(--ease-out) infinite;
}
.play-disc::after { animation-delay: 1.4s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
.play-disc svg { width: 28%; margin-left: 8%; fill: #1c1408; }
.about__play:hover .play-disc, .about__play:focus-visible .play-disc { transform: scale(1.08); background-position: 100% 50%; }
.about__play-label {
  font-family: var(--ui); font-weight: 500; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.about__title { max-width: 18ch; margin-bottom: clamp(28px, 3vw, 44px); }
.about__body { max-width: 34em; display: grid; gap: 1.2em; color: rgba(236,230,220,.82); font-size: var(--step-1); line-height: 1.7; }

/* Client logos */
.clients { max-width: var(--max); margin: clamp(80px, 9vw, 136px) auto 0; }
.clients__label { font-family: var(--ui); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); margin-bottom: 28px; }
.clients__track {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.clients__list {
  display: flex; align-items: center; flex-shrink: 0; gap: clamp(48px, 6vw, 96px);
  padding-right: clamp(48px, 6vw, 96px);
  animation: marquee 55s linear infinite;
}
.clients__track:hover .clients__list { animation-play-state: paused; }
.clients__list li { flex-shrink: 0; height: 72px; display: flex; align-items: center; }
.clients__list img { height: var(--h); width: auto; max-width: none; opacity: .6; transition: opacity .4s; }
.clients__list li:hover img { opacity: 1; }
@keyframes marquee { to { transform: translateX(-100%); } }

@media (max-width: 900px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__figure { max-width: 560px; width: 100%; }
  .clients__list li { height: 56px; }
  .clients__list img { height: calc(var(--h) * .78); }
}

/* ==========================================================================
   Home 3. Latest work: stacked full-screen panels
   ========================================================================== */
.work { position: relative; background: var(--screen); }
.work__noscript { padding: var(--section) var(--gutter); }

.panel { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--screen); }
.panel__inner { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 0%; will-change: transform; }
.panel__media { position: absolute; inset: -6% 0; }
.panel__media > img { width: 100%; height: 100%; object-fit: cover; }
.panel__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 34%, rgba(0,0,0,0) 62%),
    linear-gradient(to right, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
}
.panel__dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.panel__top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 16px;
  padding: calc(18px + 64px) var(--gutter) 0;
  font-family: var(--ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(236,230,220,.8);
}
.panel__count { font-variant-numeric: tabular-nums; }
.panel__count b { font-weight: 500; color: var(--bone); }
.panel__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 48px;
  padding: 0 var(--gutter) clamp(32px, 5vw, 68px);
}
.panel__meta { grid-column: 1 / -1; }
.panel__title { grid-column: 1 / -1; margin: 0 0 clamp(4px, 1vw, 12px) -.02em; }
.panel__desc { max-width: 36em; font-size: var(--step-1); line-height: 1.6; color: rgba(236,230,220,.9); }
@media (max-width: 800px) {
  .panel__body { grid-template-columns: 1fr; }
  .panel__desc { font-size: var(--step-0); }
}

/* ==========================================================================
   Home 4. Capabilities
   ========================================================================== */
.capabilities { background: var(--bone); color: var(--screen); padding: var(--section) var(--gutter); }
.capabilities__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px);
}
.capabilities__head { align-self: start; position: sticky; top: 120px; }
.capabilities__head .lede { margin-top: 28px; max-width: 24em; color: var(--graphite); }
.cap-list { border-top: 1px solid var(--line-light); }
.cap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px 40px;
  padding: clamp(28px, 3.2vw, 44px) 0; border-bottom: 1px solid var(--line-light);
}
.cap__title { grid-row: span 2; }
.cap__desc { line-height: 1.7; }
.cap__tools { font-family: var(--ui); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); line-height: 1.8; }
@media (max-width: 900px) {
  .capabilities__inner { grid-template-columns: 1fr; }
  .capabilities__head { position: static; }
  .cap { grid-template-columns: 1fr; }
  .cap__title { grid-row: auto; margin-bottom: 6px; }
}

/* ==========================================================================
   Home 5. Awards
   ========================================================================== */
.awards { padding: var(--section) var(--gutter); overflow: clip; }  /* clip, not hidden: hidden breaks the sticky column */
.awards__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px);
}
/* The heading and trophy hold still while the list of awards scrolls past */
.awards__head { position: sticky; top: 110px; align-self: start; }
.awards__head .lede { margin-top: 28px; max-width: 22em; }
.awards__trophy {
  /* sized to the screen so the whole column fits while it holds still */
  width: auto; height: min(38vh, 380px); margin-top: clamp(24px, 4vh, 48px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.award-list { border-top: 1px solid var(--line-dark); }
.award { border-bottom: 1px solid var(--line-dark); }
.award__link {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, .9fr);
  align-items: center; gap: 8px 24px; padding: 24px 0; text-decoration: none; isolation: isolate;
}
.award__link::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -0.5); z-index: -1;
  background: rgba(236,230,220,.06); opacity: 0; transition: opacity .4s;
}
.award__link:hover::before, .award__link:focus-visible::before { opacity: 1; }
.award__year { font-family: var(--ui); font-size: .8rem; letter-spacing: .12em; color: var(--ash); font-variant-numeric: tabular-nums; }
.award__project { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.3rem); transition: transform .5s var(--ease-out), color .3s; }
.award__project em {
  display: block; margin-top: 10px;
  font-family: var(--text); font-style: normal; font-weight: var(--text-weight); text-transform: none; letter-spacing: 0;
  font-size: .9rem; line-height: 1.3; color: rgba(236,230,220,.65); text-box: none;
}
.award__name { font-size: .92rem; color: rgba(236,230,220,.75); }
.award__link:hover .award__project { transform: translateX(10px); color: var(--gold); }
@media (max-width: 900px) {
  .awards__inner { grid-template-columns: 1fr; }
  .awards__head { position: static; }
  .awards__trophy { display: none; }
}
@media (max-width: 600px) {
  .award__link { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .award__name { grid-column: 2; }
}

/* ==========================================================================
   Home 6. Quotes
   ========================================================================== */
.quotes { padding: var(--section) var(--gutter); border-top: 1px solid var(--line-dark); }
.quotes__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px);
}
.quotes__head { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.quotes__arrows { display: flex; align-items: center; gap: 18px; }
.quotes__count { font-family: var(--ui); font-size: .8rem; letter-spacing: .12em; color: var(--ash); font-variant-numeric: tabular-nums; min-width: 3.6em; text-align: center; }
.quotes__count b { font-weight: 500; color: var(--bone); }
.quotes__main { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(44px, 5vw, 80px); }
.quotes__stage { position: relative; display: grid; }
.quotes__stage::before {
  content: "\201C"; position: absolute; left: -.06em; top: -.08em;
  font-family: Georgia, serif; font-size: clamp(9rem, 5rem + 12vw, 19rem); line-height: 1;
  color: var(--gold); opacity: .2; pointer-events: none;
}
.quote { position: relative; grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .9s var(--ease-out), visibility 0s .9s; }
.quote.is-active { visibility: visible; opacity: 1; transition: opacity .9s var(--ease-out); }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--text); font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.4rem); line-height: 1.22; letter-spacing: -.015em;
  max-width: 24ch; padding-top: clamp(40px, 5vw, 84px);
}
.quote .word { display: inline-block; }
.quotes__people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.person { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 4px; text-align: left; }
.person__bar { position: relative; display: block; width: 100%; height: 2px; margin-bottom: 18px; background: var(--line-dark); overflow: hidden; }
.person__bar::after { content: ""; position: absolute; inset: 0; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left; }
.person.is-active .person__bar::after { animation: quote-progress var(--quote-ms, 7000ms) linear forwards; }
.quotes.is-paused .person.is-active .person__bar::after { animation-play-state: paused; }
.person__name { font-family: var(--headline); font-weight: 400; font-size: 1.6rem; letter-spacing: .02em; line-height: 1; color: var(--ash); transition: color .4s; }
.person__role { font-size: .86rem; line-height: 1.4; color: rgba(148,141,131,.8); transition: color .4s; }
.person.is-active .person__name, .person:hover .person__name { color: var(--bone); }
.person.is-active .person__role, .person:hover .person__role { color: rgba(236,230,220,.7); }
@keyframes quote-progress { to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .quotes__inner { grid-template-columns: 1fr; }
  .quotes__head { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .quotes__people { grid-template-columns: 1fr; gap: 16px; }
  .person__bar { margin-bottom: 12px; }
  .round-btn { width: 48px; height: 48px; }
}

/* ==========================================================================
   Elevate: client call to action over a drifting wall of past work
   ========================================================================== */
.elevate { position: relative; overflow: hidden; min-height: min(100vh, 980px); display: grid; place-items: center; background: #050403; }
.elevate__wall {
  position: absolute; inset: -10% -6%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  transform: rotate(-6deg); opacity: .5;
}
.elevate__col { display: grid; gap: 16px; align-content: start; }
.elevate__col:nth-child(even) { margin-top: -18%; }
.elevate__col img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.elevate__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 100%),
    radial-gradient(ellipse 50% 40% at 50% 62%, rgba(226,176,98,.18), rgba(226,176,98,0));
}
.elevate__inner {
  position: relative; z-index: 1; max-width: 1360px;
  padding: var(--section) var(--gutter); text-align: center;
  display: grid; justify-items: center; gap: clamp(24px, 2.6vw, 36px);
}
.elevate__title { font-size: min(8.2vw, 8.4rem); line-height: .9; }
.elevate__title [data-line], .elevate__title .line__inner { display: block; white-space: nowrap; }
@media (max-width: 700px) {
  .elevate__title { font-size: 13vw; }
  .elevate__title [data-line], .elevate__title .line__inner { white-space: normal; }
}
.elevate .lede { margin: 0 auto; max-width: 36em; }
.elevate .btn-row { justify-content: center; margin-top: 8px; }

/* ==========================================================================
   Contact section (home) and contact form card
   ========================================================================== */
.contact { position: relative; padding: var(--section) var(--gutter); border-top: 1px solid var(--line-dark); }
.contact__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: start;
}
.contact__copy { display: grid; gap: clamp(24px, 2.6vw, 36px); align-content: start; }
.contact__title { max-width: 13ch; }
.contact__note { font-size: .9rem; color: var(--ash); }

.form-card {
  position: relative; padding: clamp(10px, 1.2vw, 16px);
  background: var(--bone); border-radius: 8px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(226,176,98,.25);
}
.form-card::before {
  /* thin gold rim along the top edge */
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: var(--gold-gradient); border-radius: 2px;
}
.form-card iframe { display: block; width: 100%; min-height: 431px; border: 0; }
@media (max-width: 960px) {
  .contact__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding: clamp(56px, 6vw, 88px) var(--gutter) 28px; border-top: 1px solid var(--line-dark); color: var(--ash); }
.site-footer__top {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start;
}
.site-footer__name { font-family: var(--headline); text-transform: uppercase; font-size: clamp(2.6rem, 2rem + 2.4vw, 4.4rem); line-height: .9; color: var(--bone); text-decoration: none; }
.site-footer__tag { margin-top: 14px; font-size: .9rem; }
.site-footer__heading { font-family: var(--ui); font-weight: 500; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); margin-bottom: 16px; }
.site-footer__links { display: grid; gap: 8px; }
.site-footer__links a { text-decoration: none; font-size: .95rem; color: rgba(236,230,220,.72); transition: color .3s; }
.site-footer__links a:hover { color: var(--gold); }
.site-footer__legal {
  max-width: var(--max); margin: clamp(48px, 5vw, 72px) auto 0; padding-top: 22px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem;
}
@media (max-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   Film player
   ========================================================================== */
.player { width: min(92vw, 1400px); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--bone); overflow: visible; }
.player::backdrop { background: rgba(0,0,0,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.player[open] { animation: player-in .6s var(--ease-out); }
@keyframes player-in { from { opacity: 0; transform: scale(.96); } }
.player__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player__frame iframe, .player__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__close {
  position: absolute; right: 0; top: -52px; min-height: 44px; padding: 0 4px;
  font-family: var(--ui); font-weight: 500; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
}
.player__close:hover { color: var(--gold); }

/* ==========================================================================
   Inner pages: shared page hero
   ========================================================================== */
.page-hero {
  position: relative; padding: clamp(150px, 16vw, 230px) var(--gutter) clamp(56px, 6vw, 96px);
  overflow: hidden;
}
/* Same layout as the homepage hero: full width, title bottom-left, description bottom-right */
.page-hero__inner {
  position: relative; z-index: 1; width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px clamp(40px, 6vw, 120px);
}
.page-hero__title { display: grid; gap: clamp(16px, 1.6vw, 24px); justify-items: start; }
.page-hero__title { flex: 1 1 auto; min-width: 0; }
.page-hero__title .h-xl { font-size: clamp(4.5rem, 1.6rem + 11vw, 15rem); }
.page-hero__aside { display: grid; gap: 22px; justify-items: start; width: min(26em, 36%); flex-shrink: 0; padding-bottom: .4em; }
.page-hero__aside .lede { font-size: var(--step-0); }
.page-hero__aside .btn-row { margin-top: 4px; }
.page-hero__count { font-family: var(--ui); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }
.page-hero__count b { font-weight: 500; color: var(--gold); }
@media (max-width: 900px) {
  .page-hero__inner { flex-direction: column; align-items: flex-start; }
  .page-hero__aside { width: auto; max-width: 34em; }
}

/* Full-screen variant with a background */
.page-hero--full {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 0 var(--gutter) clamp(28px, 4vw, 52px);
}
.slides { position: absolute; inset: 0; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.8s ease, transform 8s linear; }
.slides img.is-active { opacity: 1; transform: scale(1); }
.page-hero--full::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.35) 100%);
}

/* ==========================================================================
   Work page
   ========================================================================== */
.filters {
  position: sticky; top: 66px; z-index: 20;
  padding: 14px var(--gutter); background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.filters__list { max-width: var(--max); margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filters__list::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--line-dark); border-radius: 999px;
  font-family: var(--ui); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(236,230,220,.75);
  transition: color .3s, border-color .3s, background-color .3s;
}
.chip sup { font-size: .62rem; letter-spacing: 0; color: var(--ash); top: -.4em; }
.chip:hover { color: var(--bone); border-color: rgba(236,230,220,.45); }
.chip[aria-pressed="true"] { color: #1c1408; background: var(--gold-gradient); background-size: 230% 100%; border-color: transparent; }
.chip[aria-pressed="true"] sup { color: rgba(28,20,8,.7); }

.grid-section { padding: clamp(48px, 5vw, 80px) var(--gutter) var(--section); }
.project-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(20px, 3vw, 48px);
}
/* Large screens: three columns */
@media (min-width: 1500px) {
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(56px, 5vw, 88px) clamp(20px, 2vw, 36px); }
  .project-grid .card__title { font-size: clamp(2.2rem, 1rem + 1.4vw, 3.2rem); }
  .project-grid .card__blurb { font-size: .9rem; }
}
.card { display: grid; gap: 16px; text-decoration: none; }
.card__media { aspect-ratio: 16 / 10; border-radius: 4px; isolation: isolate; }
/* Hover: the still pushes in and warms up, and a soft band of gold light sweeps across */
.pmedia__zoom { position: absolute; inset: 0; transition: transform 1.4s var(--ease-out), filter .9s var(--ease-out); filter: saturate(.92) brightness(.92); }
.card:hover .pmedia__zoom, .card:focus-visible .pmedia__zoom { transform: scale(1.08); filter: saturate(1.15) brightness(1.05); }
.card__media::after {
  content: ""; position: absolute; inset: -10% -40%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(251,231,181,.14) 50%, transparent 62%);
  transform: translateX(-70%); opacity: 0;
}
.card:hover .card__media::after { animation: card-sheen 1.2s var(--ease-out); }
@keyframes card-sheen { 0%, 100% { opacity: 1; } 0% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(226,176,98,0); transition: box-shadow .6s var(--ease-out);
}
.card:hover .card__media::before { box-shadow: inset 0 0 0 1px rgba(226,176,98,.7), inset 0 -80px 80px -40px rgba(0,0,0,.5); }
.card__badge {
  position: absolute; left: 50%; top: 50%; z-index: 4; display: grid; place-items: center;
  width: 96px; aspect-ratio: 1; border-radius: 50%;
  background: var(--gold-gradient); background-size: 230% 100%; color: #1c1408;
  font-family: var(--ui); font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 20px 40px -12px rgba(0,0,0,.6);
  transform: translate(-50%, -50%) scale(0); transition: transform .6s var(--ease-out);
}
.card:hover .card__badge, .card:focus-visible .card__badge { transform: translate(-50%, -50%) scale(1); }
.card__blurb { color: rgba(236,230,220,.72); font-size: .95rem; line-height: 1.6; max-width: 34em; }
.card__meta { display: flex; justify-content: space-between; gap: 16px; font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); }
.card__title { font-size: clamp(2rem, 1.4rem + 2vw, 3.6rem); line-height: .92; transition: color .3s; }
.card:hover .card__title { color: var(--gold); }
.card__view {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-weight: 500; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.card__view::before { content: ""; width: 24px; height: 1px; background: var(--gold-gradient); transition: width .5s var(--ease-out); }
.card:hover .card__view::before { width: 48px; }
.empty { grid-column: 1 / -1; padding: 40px 0; color: var(--ash); }
@media (max-width: 760px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog page
   ========================================================================== */
.post-feature {
  max-width: var(--max); margin: 0 auto clamp(64px, 7vw, 112px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center;
  text-decoration: none;
}
.post-feature .card__media { aspect-ratio: 16 / 9; }
.post-feature__body { display: grid; gap: 22px; }
.post-feature__title { font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4.6rem); line-height: .92; transition: color .3s; }
.post-feature:hover .post-feature__title { color: var(--gold); }
.post-feature:hover .pmedia__zoom { transform: scale(1.08); filter: saturate(1.15) brightness(1.05); }
.post-feature:hover .card__badge { transform: translate(-50%, -50%) scale(1); }
.post-feature:hover .card__media::after { animation: card-sheen 1.2s var(--ease-out); }
.post-feature__excerpt { color: rgba(236,230,220,.75); max-width: 32em; }
.post-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(20px, 2.4vw, 40px); }
.post-grid .card__title { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.3rem); }
.post-grid .card__excerpt { font-size: .92rem; color: rgba(236,230,220,.65); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 960px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Inline video: plays inside its own frame (portrait intro, Inspo films)
   ========================================================================== */
.inline-player { position: absolute; inset: 0; z-index: 3; background: #000; animation: player-in .6s var(--ease-out); }
.inline-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-inline-stage].is-playing .about__play,
[data-inline-stage].is-playing .about__caption,
[data-inline-stage].is-playing .inspo__play { opacity: 0; pointer-events: none; }

/* ==========================================================================
   Inspo page: films as large as the screen allows, words underneath
   ========================================================================== */
.inspo-list { padding: var(--section) var(--gutter); display: grid; gap: clamp(96px, 11vw, 176px); }
.inspo { display: grid; gap: clamp(28px, 3vw, 44px); }
.inspo__stage {
  position: relative; width: min(100%, calc((100svh - 150px) * 16 / 9)); margin-inline: auto;
  aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000;
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.9);
}
.inspo__poster { position: absolute; inset: 0; }
.inspo__play {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.2), rgba(0,0,0,.45));
  transition: opacity .4s;
}
.inspo__play .play-disc { width: clamp(84px, 7vw, 120px); }
.inspo__stage:hover .play-disc { transform: scale(1.08); background-position: 100% 50%; }
.inspo__body {
  width: min(100%, calc((100svh - 150px) * 16 / 9)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(32px, 5vw, 96px); align-items: start;
}
.inspo__source { font-family: var(--ui); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); margin-bottom: 18px; }
.inspo__desc { color: rgba(236,230,220,.78); font-size: var(--step-1); line-height: 1.65; max-width: 40em; }
@media (max-width: 860px) { .inspo__body { grid-template-columns: 1fr; } }

/* ==========================================================================
   Contact page
   ========================================================================== */
.page-hero--contact .slides img { object-position: 50% 50%; }
.page-hero--contact .btn-row { margin-top: 8px; }

.booking { padding: var(--section) var(--gutter); border-top: 1px solid var(--line-dark); }
.booking__head { max-width: 900px; margin: 0 auto clamp(40px, 4vw, 64px); text-align: center; display: grid; justify-items: center; gap: 24px; }
.booking__card {
  max-width: 1240px; margin: 0 auto; padding: clamp(12px, 1.6vw, 24px);
  background: var(--bone); border-radius: 8px; position: relative;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(226,176,98,.25);
}
.booking__card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: var(--gold-gradient); border-radius: 2px; }
.booking__frame { display: block; width: 100%; min-height: 760px; border: 0; }

/* For the Love of LA: the section pins and the strip travels sideways */
.la { border-top: 1px solid var(--line-dark); overflow: hidden; }
.la__pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(96px, 10vh, 140px) 0 clamp(48px, 6vh, 80px); }
.la__head { width: 100%; max-width: var(--max); margin: 0 auto clamp(36px, 5vh, 64px); padding: 0 var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.la__head .eyebrow { margin-bottom: clamp(18px, 2vw, 28px); }
.la__track { display: flex; gap: clamp(14px, 1.6vw, 24px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.la__item { width: min(26vw, 52vh, 420px); min-width: 240px; aspect-ratio: 1; border-radius: 4px; flex-shrink: 0; }
.la__item figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-family: var(--ui); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

/* Closing banner: edge to edge, fading into the page at top and bottom */
.banner { padding: clamp(40px, 5vw, 80px) 0 0; }
.banner__media {
  aspect-ratio: 1600 / 364; min-height: 200px; background: #000;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* ==========================================================================
   Project pages (tools/cases.py)
   ========================================================================== */
.cs-sec { padding: var(--section) var(--gutter); }
.cs-sec + .cs-sec { padding-top: 0; }
.cs-sec--alt { background: #0a0908; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.cs-sec--alt + .cs-sec, .cs-sec + .cs-sec--alt { padding-top: var(--section); }
.cs-inner { display: grid; gap: clamp(48px, 5vw, 88px); }

.cs-head { display: grid; gap: clamp(16px, 1.6vw, 24px); justify-items: start; }
.cs-head .h { max-width: 20ch; }   /* measured in headline letters, so roughly two lines */
.cs-head--full .h { max-width: none; }
.cs-sub { max-width: 40em; }
/* Headings beside body copy sit in a narrower column, so they step down a size */
.cs-split__head .h { font-size: var(--h-md); max-width: 14ch; }

/* Two columns: heading (or credits) on the left, writing on the right */
.cs-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 120px); align-items: start; }
.cs-split__head { position: sticky; top: 120px; }
.cs-prose { display: grid; gap: 1.2em; max-width: 40em; color: rgba(236,230,220,.82); font-size: var(--step-1); line-height: 1.7; }
.cs-lead { color: var(--bone); }

.cs-facts { display: grid; gap: 28px; align-content: start; }
.cs-facts dt { font-family: var(--ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cs-facts dd { margin: 0; font-family: var(--headline); text-transform: uppercase; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); line-height: 1; }
.cs-split--intro { padding-top: 8px; }

/* The film: as large as the screen allows, plays in place */
.cs-film {
  position: relative; width: min(100%, calc((100svh - 140px) * 16 / 9)); margin-inline: auto;
  aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000;
  box-shadow: 0 60px 120px -60px rgba(0,0,0,.95), 0 0 0 1px rgba(226,176,98,.18);
}
.cs-film__poster { position: absolute; inset: 0; }
.cs-film__play {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.5));
}
.cs-film__play .play-disc { width: clamp(88px, 8vw, 128px); }
.cs-film__label { font-family: var(--ui); font-weight: 500; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.cs-film:hover .play-disc { transform: scale(1.08); background-position: 100% 50%; }
[data-inline-stage].is-playing .cs-film__play,
[data-inline-stage].is-playing > .cs-tile__sound { opacity: 0; pointer-events: none; }
.cs-tagline { text-align: center; font-size: clamp(1.15rem, .95rem + .6vw, 1.5rem); font-weight: 300; color: rgba(236,230,220,.8); }

/* Full-width stills between chapters */
.cs-wall { position: relative; }
.cs-wall__media { position: relative; height: clamp(420px, 56vw, 100svh); overflow: hidden; clip-path: inset(0); background: #000; }
.cs-wall__media img { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; object-fit: cover; pointer-events: none; }
.cs-wall__caption { position: absolute; left: var(--gutter); bottom: clamp(20px, 3vw, 40px); z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.cs-wall::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); pointer-events: none; }

/* Script beats */
.cs-beats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(36px, 3.6vw, 56px) clamp(20px, 2vw, 32px); }
.cs-beat { display: grid; gap: 12px; align-content: start; }
.cs-beat__img { aspect-ratio: 16 / 9; border-radius: 4px; margin-bottom: 6px; }
.cs-beat__time { font-family: var(--ui); font-weight: 500; font-size: .74rem; letter-spacing: .18em; color: var(--gold); font-variant-numeric: tabular-nums; }
.cs-beat p, .cs-card p { color: rgba(236,230,220,.72); font-size: .98rem; line-height: 1.65; }

/* Previs and final side by side */
.cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); }
.cs-compare__item { position: relative; }
.cs-compare__item video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #111; }
.cs-compare__item figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; font-size: .9rem; color: var(--ash); }
.cs-compare__controls { display: flex; justify-content: center; }
@media (max-width: 760px) { .cs-compare { grid-template-columns: 1fr; } }

/* Cards: process steps and takeaways */
.cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px); }
.cs-card { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line-dark); position: relative; }
.cs-card::before { content: ""; position: absolute; top: -1px; left: 0; width: 56px; height: 1px; background: var(--gold-gradient); }
.cs-card__num { font-family: var(--ui); font-weight: 500; font-size: .76rem; letter-spacing: .18em; color: var(--gold); }

/* Look-dev sheets */
.cs-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 2vw, 32px); }
.cs-preview { display: grid; gap: 12px; text-decoration: none; }
.cs-preview__img { aspect-ratio: 16 / 9; border-radius: 4px; }
.cs-preview__img img { transition: transform 1.2s var(--ease-out); }
.cs-preview:hover .cs-preview__img img { transform: scale(1.06); }
.cs-preview .h { transition: color .3s; }
.cs-preview:hover .h { color: var(--gold); }
.cs-sheet { display: grid; gap: clamp(32px, 3.6vw, 56px); padding-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--line-dark); scroll-margin-top: 100px; }
.cs-sheet__img { position: relative; display: block; width: 100%; border-radius: 6px; overflow: hidden; background: #fff; }
.cs-sheet__img img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.cs-sheet__img:hover img { transform: scale(1.02); }
.cs-zoom {
  position: absolute; right: 16px; bottom: 16px; padding: 10px 16px; border-radius: 999px;
  background: rgba(0,0,0,.7); color: var(--bone);
  font-family: var(--ui); font-weight: 500; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease-out);
}
.cs-sheet__img:hover .cs-zoom, .cs-sheet__img:focus-visible .cs-zoom { opacity: 1; transform: none; }
.cs-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px clamp(20px, 2.4vw, 40px); }
.cs-spec dt { font-family: var(--ui); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cs-spec dd { margin: 0; color: rgba(236,230,220,.8); font-size: .95rem; line-height: 1.6; }

/* Stills gallery: wide frames take two columns and two rows, so every frame keeps 16:9 */
.cs-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); grid-auto-flow: dense; }
.cs-gallery__item { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #111; }
.cs-gallery__item.is-wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.cs-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .8s; filter: brightness(.92); }
.cs-gallery__item:hover img { transform: scale(1.05); filter: brightness(1.05); }
@media (max-width: 760px) {
  .cs-gallery { grid-template-columns: 1fr 1fr; }
  .cs-gallery__item.is-wide { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
}

/* Video and image walls (Film Work): justified rows. Each tile grows by its own
   width-to-height ratio, so vertical, square and wide pieces share a row at one height. */
.cs-media { --base: clamp(240px, 24vw, 480px); --row: calc(var(--base) * var(--scale, 1)); display: flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 16px); }
.cs-media--tall { --base: clamp(320px, 34vw, 680px); }
.cs-media--wide { --base: clamp(200px, 19vw, 400px); }
.cs-media::after { content: ""; flex-grow: 999999; }   /* keeps the last row from stretching */
.cs-tile {
  position: relative; display: block; overflow: hidden; border-radius: 4px; background: #111;
  flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--row));
  max-width: calc(var(--r) * var(--row) * 1.6);
}
.cs-tile video, .cs-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-tile--image img { transition: transform 1.2s var(--ease-out); }
.cs-tile--image:hover img { transform: scale(1.04); }
.cs-tile__sound {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 45%);
  transition: opacity .4s;
}
.cs-tile__sound .play-disc { width: clamp(52px, 4vw, 72px); opacity: 0; transform: scale(.8); transition: opacity .4s, transform .5s var(--ease-out); }
.cs-tile__sound .play-disc::before, .cs-tile__sound .play-disc::after { display: none; }
.cs-tile:hover .play-disc, .cs-tile__sound:focus-visible .play-disc, .cs-tile--youtube .play-disc { opacity: 1; transform: none; }
.cs-tile.is-sound .cs-tile__sound { opacity: 0; pointer-events: none; }
.cs-tile__dur {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 4px 8px; border-radius: 4px;
  background: rgba(0,0,0,.6); font-family: var(--ui); font-size: .68rem; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  transition: opacity .3s;
}
.cs-tile.is-sound .cs-tile__dur { opacity: 0; }
@media (max-width: 600px) {
  .cs-media { --row: 200px; }
  .cs-tile { max-width: none; }
}


/* Equal-size grid: every tile the same shape; a short last row sits centred */
.cs-grid { --gap: clamp(10px, 1vw, 16px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cs-grid > .cs-tile { flex: none; max-width: none; aspect-ratio: var(--tile); width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (max-width: 1100px) { .cs-grid { --cols: var(--cols-md) !important; } }
@media (max-width: 600px)  { .cs-grid { --cols: var(--cols-sm) !important; } }

/* Still -> animation pairs, two pairs per row, an arrow between each still and its animation */
.cs-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 56px) clamp(24px, 3vw, 64px); }
.cs-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 1.2vw, 20px); }
.cs-pair > .cs-tile { flex: none; max-width: none; width: 100%; aspect-ratio: var(--tile); }
.cs-pair__arrow { display: grid; place-items: center; width: clamp(40px, 3.4vw, 56px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(226,176,98,.5); color: var(--gold); }
.cs-pair__arrow svg { width: 45%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .cs-pairs { grid-template-columns: 1fr; } }

/* Pieces far from their tile's shape are shown whole rather than cropped */
.cs-tile.is-contain video, .cs-tile.is-contain img { object-fit: contain; }

/* White sections */
.cs-sec--light { background: #fff; color: #111; border: 0; }
.cs-sec--light + .cs-sec, .cs-sec + .cs-sec--light, .cs-sec--light + .cs-sec--light { padding-top: var(--section); }
.cs-sec--light .eyebrow { color: #9a6a24; }
.cs-sec--light .eyebrow::before, .cs-sec--light .eyebrow::after { background: #b8873a; }
.cs-sec--light .cs-tile { background: #f2f0ec; }
.cs-sec--light .lede { color: #4a463f; }

/* Project call to action, over the project's own wallpaper */
.cs-cta { position: relative; overflow: hidden; display: grid; place-items: center; min-height: min(100vh, 960px); text-align: center; }
.cs-cta__media { position: absolute; inset: 0; }
.cs-cta__media img { filter: brightness(.32) saturate(.9); }
.cs-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 40% at 50% 60%, rgba(226,176,98,.16), rgba(226,176,98,0)); }
.cs-cta__inner { position: relative; z-index: 1; max-width: 1360px; padding: var(--section) var(--gutter); display: grid; justify-items: center; gap: clamp(24px, 2.6vw, 36px); }
.cs-cta__title { font-size: min(8.2vw, 8rem); line-height: .9; }
.cs-cta__title [data-line], .cs-cta__title .line__inner { display: block; }
.cs-cta .lede { max-width: 38em; margin: 0 auto; }
.cs-cta .btn-row { justify-content: center; }
@media (max-width: 700px) { .cs-cta__title { font-size: 13vw; } }

/* More projects */
.cs-more { padding: var(--section) var(--gutter); border-top: 1px solid var(--line-dark); }
.cs-more__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(40px, 4vw, 64px); }
.cs-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(20px, 2vw, 36px); }
.cs-more .card__title { font-size: clamp(2rem, 1.2rem + 1.4vw, 3rem); }
@media (max-width: 900px) { .cs-more__grid { grid-template-columns: 1fr; } }

/* Jump menu (Film Work) */
.cs-jump { top: 66px; }
.cs-jump .chip { text-decoration: none; }
.cs-sec[id] { scroll-margin-top: 140px; }

@media (max-width: 900px) {
  .cs-split { grid-template-columns: 1fr; }
  .cs-split__head { position: static; }
}

/* Lightbox images in the shared player */
.player__frame.is-image { aspect-ratio: auto; background: transparent; display: grid; place-items: center; }
.player__frame.is-image img { max-width: 100%; max-height: calc(100svh - 140px); width: auto; height: auto; border-radius: 4px; }

/* ==========================================================================
   Reveal states (only when JS + GSAP are running)
   ========================================================================== */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .curtain { opacity: 0; }
  .clients__list { animation: none; }
  .clients__track { overflow-x: auto; }
  .la { overflow-x: auto; }
}

.contact--flush { border-top: 0; padding-top: 0; }

/* White sections: no dark shading on tiles; the section menu stays solid black over them */
.cs-sec--light .cs-tile__sound { background: none; }
.cs-sec--light .cs-tile__dur { background: rgba(0,0,0,.55); color: #fff; }
.cs-jump { background: rgba(0,0,0,.94); }

/* Text inside a media section, and captions on tiles */
.cs-prose--solo { max-width: 44em; }
.cs-tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 36px 14px 12px; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  font-family: var(--ui); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  transition: opacity .3s;
}
.cs-tile.is-sound .cs-tile__cap { opacity: 0; }
.cs-tile:has(.cs-tile__cap) .cs-tile__dur { bottom: auto; top: 10px; }
.cs-card__list { display: grid; gap: 6px; color: rgba(236,230,220,.75); font-size: .95rem; }
.cs-card__list li { position: relative; padding-left: 16px; }
.cs-card__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--gold); }

/* ==========================================================================
   Project pages: round 3
   ========================================================================== */
/* Credits take a quarter, the story three quarters */
.cs-split--intro { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.cs-split--intro .cs-prose { max-width: 62em; }

/* Smaller headings throughout a page (e.g. step-by-step pages) */
.case--compact .cs-head .h, .case--compact .cs-split__head .h { font-size: var(--h-md); max-width: none; }

/* Arrows, plus and equals between pieces */
.cs-op { flex: none; display: grid; place-items: center; width: clamp(40px, 3.4vw, 56px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(226,176,98,.5); color: var(--gold); }
.cs-op svg { width: 45%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cs-pair__arrow { display: none; }
.cs-pair > .cs-op { justify-self: center; }

/* Sequence: piece  op  piece  op  piece, in one row; stacked with the operators turned on phones */
.cs-seq { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); }
.cs-seq > .cs-tile { flex: 1 1 0; max-width: none; aspect-ratio: var(--tile); }

/* Phones: still on top, arrow pointing down, animation below */
@media (max-width: 700px) {
  .cs-pair { grid-template-columns: 1fr; justify-items: center; }
  .cs-pair > .cs-tile { width: min(100%, 420px); }
  .cs-seq { flex-direction: column; }
  .cs-seq > .cs-tile { flex: none; width: min(100%, 420px); }
  .cs-op--arrow svg { transform: rotate(90deg); }
}

/* Fixed-column grid with hairline gaps (triptychs read as one picture) */
.cs-grid--tight { --gap: 3px; }

/* Feature: words left, vertical film right */
.cs-feature { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px clamp(40px, 6vw, 120px); align-items: center; }
.cs-feature--flip { grid-template-columns: auto minmax(0, 1fr); }
.cs-feature--flip .cs-feature__media { order: -1; }
.cs-feature__text { display: grid; gap: clamp(24px, 2.6vw, 40px); align-content: center; }
.cs-feature__media { width: min(calc((100svh - 160px) * var(--r)), 46vw); }
.cs-feature__media > .cs-tile { width: 100%; max-width: none; aspect-ratio: var(--r); }
.cs-feature__strip .cs-grid { justify-content: flex-start; }
@media (max-width: 900px) {
  .cs-feature, .cs-feature--flip { grid-template-columns: 1fr; }
  .cs-feature--flip .cs-feature__media { order: 0; }
  .cs-feature__media { width: min(100%, 420px); justify-self: center; }
}

/* Rotating strip of stills */
.cs-strip { display: flex; overflow: hidden; margin-inline: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.cs-strip__list { display: flex; flex-shrink: 0; gap: clamp(10px, 1vw, 16px); padding-right: clamp(10px, 1vw, 16px); animation: marquee 70s linear infinite; }
.cs-strip:hover .cs-strip__list { animation-play-state: paused; }
.cs-strip__item { display: block; height: clamp(200px, 22vw, 420px); overflow: hidden; border-radius: 4px; background: #111; }
.cs-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.cs-strip__item:hover img { transform: scale(1.05); }

/* Wallpaper pairs */
.cs-walls { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; }
.cs-walls__item { height: clamp(320px, 42vw, 820px); }
@media (max-width: 700px) { .cs-walls { grid-template-columns: 1fr; } .cs-walls__item { height: 60vw; } }
.cs-stack { display: grid; gap: clamp(12px, 1.4vw, 24px); }
.cs-stack > .cs-tile { width: 100%; max-width: none; aspect-ratio: auto; }
.cs-stack > .cs-tile > img, .cs-stack > .cs-tile > video { position: static; height: auto; }
/* A single still -> animation pair uses the full width */
.cs-pairs:has(> .cs-pair:only-child) { grid-template-columns: minmax(0, 1fr); width: min(100%, 1400px); justify-self: center; }

/* Film + rotating stills in one row */
.cs-reel { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 3.4vw, 56px); }
.cs-reel__row { min-width: 0; }
.cs-reel__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(40px, 6vw, 120px); align-items: start; }
.cs-reel__text .cs-prose { max-width: 44em; }
.cs-reel__row { --rh: min(78svh, 760px); display: flex; gap: clamp(10px, 1vw, 16px); align-items: stretch; }
.cs-reel__film { flex: none; height: var(--rh); aspect-ratio: var(--r); }
.cs-reel__film > .cs-tile { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
.cs-reel__strip { flex: 1 1 auto; min-width: 0; margin: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 88%, transparent); }
.cs-reel__strip .cs-strip__item { height: var(--rh); }
@media (max-width: 900px) {
  .cs-reel__text { grid-template-columns: 1fr; }
  .cs-reel__row { --rh: min(70svh, 560px); flex-direction: column; align-items: center; }
  .cs-reel__strip { width: 100%; }
  .cs-reel__strip .cs-strip__item { height: 260px; }
}

/* Password-protected projects */
.lock .lock__bg { filter: blur(18px) brightness(.45); transform: scale(1.1); }
.lock__inner { align-items: flex-end; }
.lock__form { display: grid; gap: 16px; width: min(100%, 520px); }
.lock__label { color: rgba(236,230,220,.8); font-size: .98rem; }
.lock__row { display: flex; gap: 10px; flex-wrap: wrap; }
.lock__input {
  flex: 1 1 220px; min-height: 60px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(226,176,98,.5); background: rgba(0,0,0,.55); color: var(--bone);
  font: inherit; font-size: 1rem; letter-spacing: .08em;
}
.lock__input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.lock__error { color: #f1a487; font-size: .92rem; }
/* Tall tiles never grow taller than the screen */
.cs-grid > .cs-tile { width: min(calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc(86svh * var(--tile-r, 10))); }
/* One large pair per row */
.cs-pairs--single { grid-template-columns: minmax(0, 1fr); width: min(100%, 1600px); justify-self: center; }

/* Article-style blocks: stats, lists, links, image cards, narrow media */
.cs-stats-wrap { display: grid; gap: 20px; }
.cs-stats__note { font-family: var(--ui); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.cs-stats { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 6px; overflow: hidden; }
.cs-stat { background: #050505; padding: clamp(22px, 2.4vw, 40px) clamp(16px, 1.6vw, 28px); display: flex; flex-direction: column-reverse; gap: 10px; }
.cs-stat dd { margin: 0; font-family: var(--headline); font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4.6rem); line-height: .9; background: var(--gold-gradient); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-stat dt { font-family: var(--ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(236,230,220,.7); }
@media (max-width: 800px) { .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-list { display: grid; gap: 12px; margin: 4px 0; padding: 0; }
.cs-list li { position: relative; padding-left: 26px; }
.cs-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--gold); }
.cs-list--check li::before { top: .35em; width: 14px; height: 8px; background: none; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.cs-list strong { color: var(--bone); font-weight: 500; }
.cs-link { margin-top: 8px; }

.cs-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 4px; margin-bottom: 6px; }
.cs-card__img img { transition: transform 1.2s var(--ease-out); }
.cs-card:hover .cs-card__img img { transform: scale(1.05); }

.cs-narrow { width: min(100%, var(--mw)); margin-inline: auto; }

/* Arrow from the rotating stills to the film */
.cs-reel__row { gap: clamp(18px, 2vw, 36px); align-items: center; }
.cs-reel__film { align-self: stretch; }
@media (max-width: 900px) { .cs-op--to-film svg { transform: rotate(-90deg); } .cs-reel__row { flex-direction: column-reverse; } }

/* Every play button pulses, everywhere */
.cs-tile__sound .play-disc { opacity: 1; transform: none; }
.cs-tile__sound .play-disc::before, .cs-tile__sound .play-disc::after { display: block; }
/* (The glow stays still: animating a shadow repaints every frame and makes phone scrolling stutter; the rings carry the pulse) */
@keyframes disc-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 0 rgba(226,176,98,.55), 0 20px 50px -14px rgba(226,176,98,.8); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 10px rgba(226,176,98,0), 0 20px 50px -14px rgba(226,176,98,.8); } }
.cs-tile:hover .play-disc { transform: scale(1.08); }

/* Section menus: wrap onto extra lines on wide screens so every button is reachable;
   on phones the row swipes sideways and follows the section you're reading */
@media (min-width: 901px) {
  .cs-jump .filters__list, .filters .filters__list { flex-wrap: wrap; overflow: visible; }
}
.cs-jump .chip[aria-current="true"] { color: #1c1408; background: var(--gold-gradient); background-size: 230% 100%; border-color: transparent; }
.cs-jump .chip[aria-current="true"] sup { color: rgba(28,20,8,.7); }
.cs-grid--free > .cs-tile { width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (min-width: 901px) and (max-width: 1700px) {
  .cs-jump .chip { padding: 0 12px; font-size: .64rem; letter-spacing: .12em; min-height: 36px; }
  .cs-jump .filters__list { gap: 6px; }
}

/* ==========================================================================
   Phones
   ========================================================================== */
/* Nothing may push the page sideways */
main, .site-footer { overflow-x: clip; }

/* Closing banner: a fixed minimum height without stretching the page wider than the screen */
.banner__media { aspect-ratio: auto; height: max(200px, 22.75vw); }

/* Strips swipe with a thumb (and scroll with a trackpad); main.js keeps them drifting */
.cs-strip, .clients__track { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cs-strip::-webkit-scrollbar, .clients__track::-webkit-scrollbar { display: none; }
.cs-strip.is-swipe .cs-strip__list, .clients__track.is-swipe .clients__list { animation: none; }

@media (max-width: 900px) {
  /* Credits first, then the story at full width */
  .cs-split--intro { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* Client and Agency side by side, Services on its own line underneath */
  .cs-split--intro .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
  .cs-split--intro .cs-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cs-split--intro .cs-facts dd { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: 1.05; }
  /* Headings run the full width of the screen instead of stacking into a narrow column */
  .cs-head .h, .cs-split__head .h { max-width: none; }
  .cs-split__head { position: static; }
  .cs-split--intro .cs-prose { max-width: none; }

  /* No section menu on small screens */
  .cs-jump { display: none; }

  /* The film beside the strip keeps its own shape */
  .cs-reel__film { align-self: center; height: auto; width: min(100%, calc(var(--rh) * var(--r))); }
}

@media (max-width: 700px) {
  /* Still above, arrow pointing down, animation below: each at full width */
  .cs-pairs, .cs-pairs--single { width: 100%; }
  .cs-pair { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 14px; }
  .cs-pair > .cs-tile, .cs-seq > .cs-tile { width: 100%; }
  .cs-pair > .cs-op { justify-self: center; }
  .cs-op--arrow svg { transform: rotate(90deg); }
  /* Every film, and every still -> animation pair, at its true shape (a 9:16 piece stays 9:16) */
  .cs-pair > .cs-tile, .cs-grid > .cs-tile--video, .cs-grid > .cs-tile--youtube { aspect-ratio: var(--own, var(--tile)); }
  .cs-grid { align-items: center; }
}
@media (max-width: 700px) {
  /* The whole "Jay Hernandez" banner, letters uncropped */
  .banner__media { height: auto; min-height: 0; aspect-ratio: 1600 / 364; }
  .banner__media img { object-fit: contain; }
}

/* No section menu on any project page */
.cs-jump { display: none; }

/* Full-screen heroes (projects, Work, Journal, Inspo, Contact): the picture in full colour,
   darkened only along the bottom where the title sits */
.page-hero--full::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 16%),
    linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,0) 46%);
}

/* Home hero on phones: a 4:3 film under the header, the title card underneath it */
@media (max-width: 700px) {
  .hero { height: auto; min-height: 0; padding-top: 80px; overflow: visible; }
  .hero__video { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .hero__shade { top: 80px; bottom: auto; aspect-ratio: 4 / 3; height: auto; background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%); }
  .hero__foot { position: relative; padding-top: 28px; padding-bottom: 8px; }
}

/* Latest work: as the next project slides in, only the picture dims; the words stay bright */
.panel__top, .panel__body { z-index: 2; }

/* Inspo: a short note before the first film */
.inspo-intro { display: grid; gap: clamp(16px, 1.6vw, 24px); justify-items: start; padding: var(--section) var(--gutter) 0; }
.inspo-intro__text { max-width: 34em; font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); line-height: 1.5; color: var(--bone); }
/* Work page: every project picture at 16:9 */
.page-work .card__media { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Journal posts
   ========================================================================== */
.post__title { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 6.4rem); line-height: .92; max-width: 18ch; }
.post__body {
  width: 100%; max-width: calc(46rem + var(--gutter) * 2); margin: 0 auto; padding: var(--section) var(--gutter); color: rgba(236,230,220,.84); font-size: var(--step-1); line-height: 1.75;
}
.post__body > * + * { margin-top: 1.1em; }
.post__body h2, .post__body h3, .post__body h4 { font-family: var(--headline); text-transform: uppercase; font-weight: 400; color: var(--bone); line-height: 1; letter-spacing: .01em; margin-top: 1.8em; }
.post__body h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.post__body h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.post__body h4 { font-size: 1.3rem; }
.post__body h2 + *, .post__body h3 + *, .post__body h4 + * { margin-top: .6em; }
.post__body a { color: var(--gold); text-underline-offset: .2em; }
.post__body strong, .post__body b { color: var(--bone); font-weight: 500; }
.post__body ul, .post__body ol { padding-left: 1.3em; display: grid; gap: .45em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li::marker { color: var(--gold); }
.post__body blockquote { margin-inline: 0; padding: .2em 0 .2em 1.2em; border-left: 2px solid var(--gold); color: var(--bone); font-size: 1.08em; }
.post__body img { width: 100%; height: auto; border-radius: 4px; }
.post__body figure { margin-inline: 0; }
.post__body figcaption { margin-top: 10px; font-family: var(--ui); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.post__film { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #111; }
.post__film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post__table { overflow-x: auto; border: 1px solid var(--line-dark); border-radius: 6px; }
.post__body table { width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.5; }
.post__body th, .post__body td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-dark); }
.post__body th { font-family: var(--ui); font-weight: 500; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: #0a0908; }
.post__body tr:last-child td { border-bottom: 0; }

/* Journal posts on white: title, cover, story on the left; sign-up and related posts on the right */
body[class*="page-journal-"] { background: #fff; }
body[class*="page-journal-"] .site-header { background: rgba(0,0,0,.9); }
.post { --ink: #141416; --ink-soft: #3d3d42; --rule: #e6e3dd; --gold-ink: #9a6a24; background: #fff; color: var(--ink); }
.post__head { padding: calc(80px + clamp(40px, 6vw, 96px)) var(--gutter) clamp(28px, 3vw, 44px); max-width: calc(1240px + var(--gutter) * 2); margin: 0 auto; }
.post__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; font-family: var(--ui); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.post__meta span + span::before { content: "·"; margin-right: 18px; color: #b9b3a8; }
.post .post__title { color: var(--ink); max-width: 22ch; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.6rem); }
.post__layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px); gap: clamp(40px, 5vw, 80px); align-items: start; max-width: calc(1240px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.post__cover { margin: 0 0 clamp(32px, 3.6vw, 52px); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #eee; }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }
.post .post__body { max-width: 46rem; padding: 0; margin: 0; color: var(--ink-soft); font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); }
.post .post__body h2, .post .post__body h3, .post .post__body h4, .post .post__body strong, .post .post__body b { color: var(--ink); }
.post .post__body a { color: var(--gold-ink); }
.post .post__body li::marker { color: var(--gold-ink); }
.post .post__body blockquote { color: var(--ink); border-left-color: var(--gold-ink); }
.post .post__body figcaption { color: #77736b; }
.post .post__table { border-color: var(--rule); }
.post .post__body th { background: #f6f4f0; color: var(--gold-ink); }
.post .post__body th, .post .post__body td { border-bottom-color: var(--rule); }

.post-author { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 46rem; margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(32px, 3vw, 44px); border-top: 1px solid var(--rule); color: var(--ink-soft); line-height: 1.7; }
.post-author__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.post-author__name { color: var(--ink); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 8px; }
.post-author a { color: var(--gold-ink); }
.post-author__link { display: inline-block; margin-top: 12px; font-family: var(--ui); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }

.post__side { position: sticky; top: 104px; display: grid; gap: 28px; }
.post-signup { padding: 24px 22px 14px; border: 1px solid var(--rule); border-radius: 8px; background: #faf9f6; position: relative; }
.post-signup::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; background: var(--gold-gradient); border-radius: 2px; }
.post-signup__title { color: var(--ink); font-size: 1.9rem; margin-bottom: 6px; }
.post-signup p { color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.post-signup__form iframe { display: block; width: 100%; min-height: 401px; border: 0; margin-top: 8px; }
.post-related__title { color: var(--ink); font-size: 1.6rem; margin-bottom: 14px; }
.post-related ul { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.post-rel { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 14px; text-decoration: none; color: var(--ink); }
.post-rel__img { grid-row: span 2; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: #eee; }
.post-rel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post-rel:hover .post-rel__img img { transform: scale(1.06); }
.post-rel__date { font-family: var(--ui); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.post-rel__title { font-family: var(--headline); text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; }
.post-rel:hover .post-rel__title { color: var(--gold-ink); }

@media (max-width: 960px) {
  .post__layout { grid-template-columns: minmax(0, 1fr); }
  .post__side { position: static; }
}
@media (max-width: 560px) {
  .post-author { grid-template-columns: 1fr; }
}

/* Journal: before/after pairs (wide shots stack; phone shots sit side by side) */
.post .post__compare { display: grid; gap: 22px; margin: 1.6em 0; }
.post .post__compare figure { margin: 0; }
.post .post__compare img { border-radius: 6px; box-shadow: 0 18px 50px -24px rgba(0,0,0,.45), 0 0 0 1px var(--rule); }
.post .post__compare--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 34rem; }
.post .post__compare--phones img { border-radius: 14px; }
body[class*="page-journal-"] .site-footer { background: var(--screen); }

/* ==========================================================================
   Before/after slider, tour films, captioned plans (tools/cases.py)
   ========================================================================== */
.cs-slider { display: grid; gap: 14px; }
.cs-slider__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111; user-select: none; }
.cs-slider__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-slider__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cs-slider__tag { position: absolute; top: 14px; z-index: 2; padding: 6px 10px; border-radius: 4px; background: rgba(0,0,0,.6); font-family: var(--ui); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.cs-slider__tag--before { left: 14px; }
.cs-slider__tag--after { right: 14px; color: #1c1408; background: var(--gold-gradient); }
.cs-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; margin-left: -1px; background: var(--gold-gradient); pointer-events: none; }
.cs-slider__handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--gold-gradient); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.cs-slider__handle span::before { content: "\2194"; position: absolute; inset: 0; display: grid; place-items: center; color: #1c1408; font-size: 1.2rem; }
.cs-slider__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cs-slider__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cs-slider__label { font-family: var(--ui); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash); }
.cs-slider__count { color: var(--gold); margin-right: 10px; font-variant-numeric: tabular-nums; }
.cs-slider__name { color: var(--bone); }
.cs-slider__nav { display: flex; gap: 8px; }
.cs-slider__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(226,176,98,.5); color: var(--gold); font-size: 1.1rem; }
.cs-slider__nav button:hover { background: rgba(226,176,98,.12); }
.cs-slider__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(96px, 9vw, 140px); gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cs-slider__thumbs::-webkit-scrollbar { display: none; }
.cs-slider__thumb { aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; opacity: .5; outline: 2px solid transparent; outline-offset: -2px; transition: opacity .3s; }
.cs-slider__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-slider__thumb:hover, .cs-slider__thumb.is-active { opacity: 1; }
.cs-slider__thumb.is-active { outline-color: var(--gold); }

.cs-tours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px) clamp(20px, 3vw, 48px); }
.cs-tour { display: grid; gap: 12px; align-content: start; }
.cs-tour__film { margin-bottom: 8px; }
.cs-tour .cs-film__play .play-disc { width: clamp(64px, 5vw, 88px); }
.cs-tour p { color: rgba(236,230,220,.78); line-height: 1.65; }
.cs-script summary { cursor: pointer; font-family: var(--ui); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.cs-script blockquote { margin: 14px 0 0; padding-left: 16px; border-left: 2px solid var(--gold); display: grid; gap: .8em; color: rgba(236,230,220,.78); font-style: italic; }

.cs-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.cs-plan { margin: 0; display: grid; gap: 12px; }
.cs-plan button { display: block; border-radius: 6px; overflow: hidden; background: #f4f1ea; }
.cs-plan img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.cs-plan button:hover img { transform: scale(1.03); }
.cs-plan figcaption { color: rgba(236,230,220,.7); font-size: .95rem; line-height: 1.6; }
.cs-plan figcaption strong { display: block; margin-bottom: 2px; font-family: var(--headline); font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: var(--bone); }

@media (max-width: 760px) {
  .cs-tours, .cs-plans { grid-template-columns: minmax(0, 1fr); }
  .cs-slider__tag { top: 10px; font-size: .58rem; }
}
.cs-stats--many .cs-stat dd { font-size: clamp(1.7rem, .9rem + 1.5vw, 2.8rem); }
@media (min-width: 801px) and (max-width: 1100px) { .cs-stats--many { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Lines a heading sets itself ([data-line]) stay on their own lines after the reveal animation */
.h [data-line] { display: block; }

/* No seam between a full-width wallpaper and the band next to it */
.cs-wall + .cs-sec { border-top: 0; }
.cs-sec:has(+ .cs-wall) { border-bottom: 0; }
.cs-wall { margin-bottom: -1px; }

/* Card titles on project pages: small and tidy */
.cs-card .h, .cs-beat .h { font-size: clamp(1.3rem, 1.1rem + .55vw, 1.7rem); line-height: 1; }