/* =====================================================================
   SHADOWBAN — site.css

   Structure:
     1. Design tokens        — colours, spacing, type. Edit these first.
     2. Reset and base
     3. Shared components    — buttons, nav, footer, headings
     4. Homepage chapters    — the full-screen scrolling experience
     5. Standalone pages     — gallery, about, prices, privacy
     6. Responsive           — mobile adjustments
     7. Accessibility        — focus, reduced motion
   ===================================================================== */


/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */

:root {
  /* --- Colour ------------------------------------------------------ */
  --bg:            #050507;
  --surface:       #101014;
  --surface-hover: #16161c;
  --text:          #ffffff;
  --text-muted:    rgba(255, 255, 255, 0.72);
  --text-faint:    rgba(255, 255, 255, 0.45);
  --accent:        #ff2587;
  --border:        rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.45);
  --focus:         #ffffff;

  /* --- Spacing scale ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --page-gutter:   clamp(1.25rem, 5vw, 4rem);
  --content-width: 75rem;
  --nav-height:    4.5rem;

  /* --- Typography --------------------------------------------------- */
  --font-text:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-text);
  --font-serif:   Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lead: clamp(1rem, 1.4vw, 1.125rem);
  --text-h3:   clamp(1.25rem, 2vw, 1.75rem);
  --text-h2:   clamp(2rem, 6vw, 4.25rem);
  --text-h1:   clamp(2.5rem, 8vw, 6.5rem);

  /* --- Shape and motion --------------------------------------------- */
  --radius:      0.25rem;
  --radius-lg:   0.75rem;
  --duration:    220ms;
  --ease:        cubic-bezier(0.2, 0.75, 0.2, 1);

  /* --- Fixed on-screen controls ------------------------------------- */
  /* One inset value shared by every corner control, so they line up and
     never sit on top of each other. */
  --control-inset: max(var(--space-5), env(safe-area-inset-bottom));
  --arrow-size:    3rem;
  /* Height kept clear at the bottom of a chapter so the sound control,
     arrows and chapter number never sit on top of the content. */
  --controls-zone: calc(var(--control-inset) + 5rem);
}


/* =====================================================================
   2. RESET AND BASE
   ===================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
}

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul, ol { list-style: none; padding: 0; }

/* Centred content column used on every page. */
.shell {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--text);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }


/* =====================================================================
   3. SHARED COMPONENTS
   ===================================================================== */

/* --- Headings ------------------------------------------------------- */

h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }

h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* The serif italic accent used throughout the brand. */
h1 em, h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Small pink-dotted label above a heading. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.lead {
  font-size: var(--text-lead);
  color: var(--text-muted);
  max-width: 55ch;
}

/* --- Buttons -------------------------------------------------------- */
/* One set of button styles. Every button on the site uses these. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 2.75rem;             /* 44px minimum touch target */
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.button-primary {
  background: var(--text);
  color: var(--bg);
}
.button-primary:hover { transform: translateY(-2px); }

.button-accent {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(255, 37, 135, 0.16);
}
.button-accent:hover {
  transform: translateY(-2px);
  background: #ff3f97;
  border-color: #ff3f97;
}

.button-outline {
  border-color: var(--border-strong);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.button-outline:hover {
  background: var(--text);
  color: var(--bg);
}

.button-quiet {
  border-color: var(--border);
  background: transparent;
  color: var(--text);
}
.button-quiet:hover { border-color: var(--text); }

.button-large {
  min-height: 3.25rem;
  padding-inline: var(--space-6);
  font-size: var(--text-base);
}

/* Small phone-handset mark inside the booking buttons. */
.button-icon {
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 0;
  flex: none;
}

/* --- Navigation ----------------------------------------------------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--nav-height);
  padding-inline: var(--page-gutter);
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0.75), transparent);
}

.site-nav-brand {
  font-size: var(--text-base);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.site-nav-links a {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--duration) var(--ease);
}
.site-nav-links a:hover { color: var(--text); }
.site-nav-links .button { color: var(--text); }

/* Mobile menu button — hidden on wide screens. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.menu-toggle-bars { display: grid; gap: 3px; }
.menu-toggle-bars i {
  display: block;
  width: 1rem;
  height: 2px;
  background: currentColor;
}

/* Cinematic menu: the video is loaded only when the menu is first opened.
   The panel then slides over it, keeping a live strip of film visible. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 29;
  overflow: hidden;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms var(--ease), visibility 0s linear 430ms;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu:not([hidden]) { display: block; }
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.mobile-menu-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.055);
  filter: saturate(1.08) contrast(1.03);
  transition: transform 900ms var(--ease);
}
.mobile-menu.is-open .mobile-menu-film { transform: scale(1); }

.mobile-menu-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,5,7,.99) 0%, rgba(5,5,7,.96) 58%, rgba(5,5,7,.42) 86%, rgba(5,5,7,.14) 100%),
    linear-gradient(0deg, rgba(5,5,7,.72), transparent 48%);
}

.mobile-menu-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background: linear-gradient(115deg, transparent 0 46%, rgba(255,37,135,.24) 49%, rgba(255,255,255,.08) 50%, transparent 54% 100%);
  transform: translateX(-60%);
}
.mobile-menu.is-open .mobile-menu-scan {
  animation: menu-scan 1.25s .15s var(--ease) both;
}
@keyframes menu-scan {
  to { transform: translateX(60%); }
}

.mobile-menu-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(88vw, 34rem);
  height: 100%;
  padding:
    calc(var(--nav-height) + max(var(--space-4), env(safe-area-inset-top)))
    clamp(1.15rem, 5vw, 2rem)
    max(1.25rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: linear-gradient(90deg, rgba(5,5,7,.95) 0%, rgba(5,5,7,.88) 78%, rgba(5,5,7,.28) 100%);
  backdrop-filter: blur(5px);
  transform: translateX(-104%);
  transition: transform 430ms var(--ease);
}
.mobile-menu-content::-webkit-scrollbar { display: none; }
.mobile-menu.is-open .mobile-menu-content { transform: translateX(0); }

.mobile-menu-kicker {
  margin-bottom: clamp(.65rem, 2.2vh, 1.25rem);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mobile-menu-kicker span { color: var(--accent); }

.mobile-menu-links { display: grid; gap: 0; }
.mobile-menu-links a {
  display: flex;
  align-items: baseline;
  gap: clamp(.75rem, 3vw, 1.25rem);
  padding: clamp(.48rem, 1.35vh, .78rem) 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: clamp(1.03rem, 4.65vw, 1.42rem);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 260ms var(--ease), transform 320ms var(--ease), color 180ms ease;
}
.mobile-menu-links a:hover,
.mobile-menu-links a:focus-visible { color: var(--accent); }
.mobile-menu-links span {
  width: 1.45rem;
  flex: none;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-faint);
}
.mobile-menu-links a:first-child,
.mobile-menu-links a[aria-current="page"] { color: var(--accent); }
.mobile-menu.is-open .mobile-menu-links a { opacity: 1; transform: translateX(0); }
.mobile-menu.is-open .mobile-menu-links a:nth-child(1)  { transition-delay: 100ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(2)  { transition-delay: 125ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(3)  { transition-delay: 150ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(4)  { transition-delay: 175ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(5)  { transition-delay: 200ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(6)  { transition-delay: 225ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(7)  { transition-delay: 250ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(8)  { transition-delay: 275ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(9)  { transition-delay: 300ms; }
.mobile-menu.is-open .mobile-menu-links a:nth-child(10) { transition-delay: 325ms; }

.mobile-menu-actions {
  display: grid;
  gap: .8rem;
  margin-top: clamp(.9rem, 2.2vh, 1.35rem);
}
.mobile-menu-cta {
  width: 100%;
  justify-content: center;
  min-height: 3.05rem;
  border-color: var(--accent);
  background: rgba(5,5,7,.52);
}
.mobile-menu-social {
  display: flex;
  gap: .65rem;
}
.mobile-menu-social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.6rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,5,7,.42);
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
}
.mobile-menu-social svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.mobile-menu-social a:nth-child(2) svg { fill: currentColor; stroke: none; }

html.menu-open, html.menu-open body { overscroll-behavior: none; }

/* --- Site footer ---------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-7);
  padding-bottom: max(var(--space-7), env(safe-area-inset-bottom));
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.site-footer-brand strong {
  font-size: var(--text-lead);
  font-weight: 900;
  letter-spacing: 0.1em;
}
.site-footer-brand span { color: var(--accent); }
.site-footer-brand p {
  font-size: var(--text-sm);
  color: var(--text-faint);
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.site-footer-links a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer-links a:hover { color: var(--text); }
.site-footer-meta {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}


/* =====================================================================
   4. HOMEPAGE CHAPTERS

   The scrolling is done by the browser, using CSS scroll-snap.
   JavaScript only reports which chapter is showing and adds the
   desktop wheel step. Touch scrolling is left completely native —
   that is what keeps swiping reliable on iPhone and iPad.
   ===================================================================== */

body.home { overflow: hidden; }

.chapters {
  height: 100vh;                    /* fallback for older browsers */
  height: 100svh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.chapters::-webkit-scrollbar { display: none; }

.chapter {
  position: relative;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Background film. */
.chapter-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Readability layer over the film. Never rely on a lucky frame. */
.chapter-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 5, 7, 0.92) 0%, rgba(5, 5, 7, 0.6) 45%, rgba(5, 5, 7, 0.15) 75%),
    linear-gradient(0deg, rgba(5, 5, 7, 0.85) 0%, transparent 55%);
}
.chapter-shade-bottom {
  background: linear-gradient(0deg, rgba(5, 5, 7, 0.9) 0%, rgba(5, 5, 7, 0.15) 60%, transparent 100%);
}

/* Hero keeps the film almost completely unobscured. A very small edge fade
   and text shadow protect legibility without putting a grey veil over footage. */
.chapter-shade-hero {
  background:
    linear-gradient(0deg, rgba(5, 5, 7, 0.38) 0%, rgba(5, 5, 7, 0.08) 32%, transparent 58%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.22) 0%, transparent 52%);
}
.chapter-hero .chapter-body { text-shadow: 0 2px 22px rgba(0,0,0,.35); }
.chapter-hero .button { text-shadow: none; }


/* Chapters with no film sit on the plain dark stage. */
.chapter-plain { background: var(--bg); }

/* The content block. Bottom-weighted: more film, less interface.
   max-height plus overflow gives a controlled scroll region on very
   short screens instead of shrinking the text to make it fit. */
.chapter-body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-top: calc(var(--nav-height) + var(--space-5));
  padding-bottom: var(--controls-zone);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.chapter-body::-webkit-scrollbar { display: none; }

.chapter-body > * + * { margin-top: var(--space-5); }
.chapter-body .eyebrow { margin-bottom: 0; }

.chapter-intro {
  font-size: var(--text-lead);
  color: var(--text-muted);
  max-width: 52ch;
}

/* Opening chapter keeps the copy narrow so the film stays visible. */
.chapter-hero .chapter-body { max-width: min(var(--content-width), 64rem); }
.chapter-hero h1 { line-height: 0.9; }

/* Chapter number, bottom right. */
.chapter-count {
  position: absolute;
  right: var(--page-gutter);
  bottom: calc(var(--control-inset) + var(--arrow-size) + var(--space-3));
  z-index: 3;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
}
.chapter-count span {
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--text-faint);
}

/* --- Chapter content blocks ----------------------------------------- */

.client-list,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.client-list li,
.tag-list li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.3);
}
.client-list li {
  font-size: var(--text-h3);
  font-weight: 800;
  letter-spacing: -0.02em;
  border: 0;
  background: none;
  padding: 0 var(--space-4) 0 0;
  color: var(--text-muted);
}

.card-grid {
  display: grid;
  gap: var(--space-3);
}
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 6rem;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
}
.card .button { align-self: flex-start; }

.step-list {
  display: grid;
  gap: var(--space-3);
}
.step-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.step-list small {
  min-width: 5rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.step-list strong {
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Pricing -------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.price-card p {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.price-card-figure {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-card .button { width: 100%; }

/* --- Horizontal work reel ------------------------------------------- */

.reel {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-inline: var(--page-gutter);
  padding-bottom: var(--controls-zone);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Without this the first card snaps flush to the edge and swallows
     the page gutter. */
  scroll-padding-inline: var(--page-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }

.reel-item {
  flex: none;
  width: clamp(11rem, 26vw, 17rem);
  scroll-snap-align: start;
}
.reel-item a {
  display: block;
  text-decoration: none;
}
.reel-item img,
.reel-item video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--duration) var(--ease);
}
.reel-item a:hover img,
.reel-item a:hover video { transform: translateY(-4px); }
.reel-item figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The reel sits directly below the heading, so the heading block does not
   also need to reserve room for the controls. */
.chapter-work .chapter-body { padding-bottom: var(--space-4); }

/* --- Free downloads -------------------------------------------------- */

.download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 44rem;
}
.download-item {
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  gap: .45rem;
  min-width: 0;
}
.download-item h3 {
  font-size: var(--text-h3);
  line-height: 1.1;
}
.download-item p {
  min-height: 2.6em;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.download-item .button {
  width: 100%;
  margin-top: .35rem;
}

/* --- Recent projects ------------------------------------------------- */

.project-list { display: grid; gap: var(--space-3); }
.project-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.4);
  text-decoration: none;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.project-card:hover {
  background: var(--surface-hover);
  border-color: var(--text);
}
.project-card > span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}
.project-card div { flex: 1; }
.project-card strong { display: block; font-size: var(--text-lead); }
.project-card small { color: var(--text-faint); font-size: var(--text-sm); }
.project-card b {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- FAQ ------------------------------------------------------------- */

.faq-list { display: grid; gap: 0; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 2.75rem;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary b {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
}
.faq-list summary b::before,
.faq-list summary b::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--accent);
  transition: transform var(--duration) var(--ease);
}
.faq-list summary b::after { transform: rotate(90deg); }
.faq-list details[open] summary b::after { transform: rotate(0deg); }
.faq-list p {
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 60ch;
}

/* --- Closing chapter -------------------------------------------------- */

.contact-note {
  font-size: var(--text-sm);
  color: var(--text-faint);
}
.contact-gallery-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 32rem;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease);
}
.contact-gallery-link:hover { border-color: var(--text); }
.contact-gallery-link strong { display: block; font-size: var(--text-lead); }
.contact-gallery-link small {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-gallery-link b {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chapter-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.chapter-footer nav { display: flex; gap: var(--space-4); }
.chapter-footer a { text-decoration: none; }
.chapter-footer a:hover { color: var(--text); }

/* --- Chapter controls -------------------------------------------------- */

/* The page has no conventional scrollbar, so this always-visible brand rail
   is the visitor's position indicator while they scrub through chapters. */
.progress-rail {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 31;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(0,0,0,.42);
}
.progress-rail i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(.0714286);       /* first of 14 chapters is visible */
  transform-origin: left center;
  will-change: transform;
  background: linear-gradient(90deg, var(--accent) 0%, #ff4ba0 74%, #ffffff 100%);
  box-shadow: 0 0 12px rgba(255,37,135,.45);
}

.chapter-dots {
  position: fixed;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.chapter-dots button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 2.75rem;
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text);
  opacity: 0.4;
  transition: opacity var(--duration) var(--ease);
}
.chapter-dots button::after {
  content: "";
  width: 0;
  height: 1px;
  margin-left: var(--space-2);
  background: var(--accent);
  transition: width var(--duration) var(--ease);
}
.chapter-dots button:hover { opacity: 0.8; }
.chapter-dots button[aria-current="true"] { opacity: 1; }
.chapter-dots button[aria-current="true"]::after { width: 1.25rem; }

.chapter-arrows {
  position: fixed;
  right: var(--page-gutter);
  bottom: var(--control-inset);
  z-index: 25;
  display: flex;
  gap: var(--space-2);
}
.chapter-arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--text-lead);
  backdrop-filter: blur(6px);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.chapter-arrow:hover { background: var(--text); color: var(--bg); }
.chapter-arrow[disabled] { opacity: 0.3; cursor: default; }
.chapter-arrow[disabled]:hover { background: rgba(0, 0, 0, 0.35); color: var(--text); }

.sound-control {
  position: fixed;
  left: var(--page-gutter);
  bottom: var(--control-inset);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sound-control button {
  min-width: 2.75rem;
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.sound-control button.is-active {
  border-color: var(--text);
  color: var(--text);
}

.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: var(--control-inset);
  transform: translateX(-50%);
  z-index: 24;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: opacity var(--duration) var(--ease);
}
.scroll-cue span { margin-left: var(--space-2); }
/* The cue is only useful on the first chapter. */
body.is-scrolled .scroll-cue { opacity: 0; }


/* =====================================================================
   5. STANDALONE PAGES
   ===================================================================== */

.page-main { padding-top: var(--nav-height); }

/* --- Page hero ------------------------------------------------------- */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 68svh;
  padding-block: var(--space-8) var(--space-7);
  overflow: hidden;
}
.page-hero video,
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(5, 5, 7, 0.95) 0%, rgba(5, 5, 7, 0.55) 55%, rgba(5, 5, 7, 0.3) 100%);
}
.page-hero-copy {
  position: relative;
  z-index: 2;
}
.page-hero-copy > * + * { margin-top: var(--space-4); }

/* --- Generic page section -------------------------------------------- */

.page-section { padding-block: var(--space-8); }
.page-section > * + * { margin-top: var(--space-5); }
.page-section-head { max-width: 46rem; }
.page-section-head > * + * { margin-top: var(--space-4); }

/* --- Gallery grid ----------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.gallery-item img,
.gallery-item video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--duration) var(--ease);
}
.gallery-item:hover img,
.gallery-item:hover video { transform: translateY(-4px); }
.gallery-item figcaption { margin-top: var(--space-3); }
.gallery-item-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}
.gallery-item-title {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
}
.gallery-item-action {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.pagination a {
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.pagination span[aria-disabled] { opacity: 0.3; }
.pagination p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* --- Lightbox --------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  background: rgba(5, 5, 7, 0.96);
}
.lightbox[hidden] { display: none; }
.lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  flex: 1;
}
.lightbox-media img,
.lightbox-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-info { text-align: center; }
.lightbox-info h2 { font-size: var(--text-h3); }
.lightbox-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}
.lightbox-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.5);
}
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }

/* --- Prices page ------------------------------------------------------ */

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.package {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.package-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}
.package-figure {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.package-summary { font-size: var(--text-sm); color: var(--text-muted); }
.package ul {
  flex: 1;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.package li { display: flex; gap: var(--space-3); }
.package li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.package .button { width: 100%; }

/* --- About page ------------------------------------------------------- */

.stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.stat-list li {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.stat-list strong {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text);
}

.prose { max-width: 60ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose p { color: var(--text-muted); }

.numbered-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}
.numbered-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.numbered-card > span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}
.numbered-card p { font-size: var(--text-sm); color: var(--text-muted); }
.numbered-card .tag-list li {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

.pull-quote {
  padding: var(--space-6) 0;
  border-block: 1px solid var(--border);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
  line-height: 1.4;
  max-width: 48rem;
}

.media-pair {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4);
}
.media-pair figure { position: relative; }
.media-pair img,
.media-pair video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.media-pair figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.media-pair figcaption span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Privacy page ------------------------------------------------------ */

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-5);
}
.privacy-grid article > * + * { margin-top: var(--space-3); }
.privacy-grid h2 { font-size: var(--text-h3); letter-spacing: -0.02em; }
.privacy-grid p { font-size: var(--text-sm); color: var(--text-muted); }
.privacy-grid span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
}

/* --- Closing call to action on standalone pages ------------------------ */

.page-cta {
  padding-block: var(--space-8);
  border-top: 1px solid var(--border);
}
.page-cta > * + * { margin-top: var(--space-4); }
.page-cta a.email-link {
  display: inline-block;
  font-size: var(--text-h3);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}


/* =====================================================================
   6. RESPONSIVE
   Content-driven breakpoints, narrow layout first.
   ===================================================================== */

@media (max-width: 62rem) {
  .card-grid-4  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-pair   { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  :root { --nav-height: 4rem; }

  /* Swap the desktop links for the menu button. */
  .site-nav-links { display: none; }
  .menu-toggle    { display: inline-flex; }

  /* Swiping is the navigation on touch screens, so the dots and arrows
     would only crowd the screen. The menu and links all still work. */
  .chapter-dots,
  .chapter-arrows { display: none; }

  .chapter-body { padding-top: calc(var(--nav-height) + var(--space-4)); }
  .chapter-body > * + * { margin-top: var(--space-4); }

  .chapter-count {
    right: var(--page-gutter);
    bottom: calc(var(--control-inset) + var(--space-6));
    font-size: 1.5rem;
  }

  .client-list li { font-size: var(--text-lead); }
  .step-list li { flex-direction: column; gap: var(--space-1); }
  .step-list small { min-width: 0; }

  .project-card { flex-wrap: wrap; }

  .site-footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 30rem) {
  /* Two compact columns keeps every card and every price visible
     without shrinking the text or hiding an option. */
  .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card        { min-height: 0; }

  .price-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .price-card  { gap: var(--space-2); padding: var(--space-4); }
  .price-card p { font-size: var(--text-xs); }
  /* At this width these labels are meant to run to two lines. */
  .price-card .button {
    padding-inline: var(--space-3);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .lightbox-prev, .lightbox-next { display: none; }
}


/* ---------------------------------------------------------------------
   CHAPTER COPY REVEAL

   A new full-screen film gets a brief unobstructed beat before the copy
   arrives. This is intentionally quick so the site still feels immediate.
   JavaScript adds .has-copy-reveal, so content remains visible if JS fails.
   --------------------------------------------------------------------- */

.chapters.has-copy-reveal .chapter-body {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 520ms var(--ease);
  will-change: opacity, transform;
}

.chapters.has-copy-reveal .chapter.is-copy-visible .chapter-body {
  opacity: 1;
  transform: translateY(0);
}

/* Recent Projects: the entire row is the link, so no extra CTA label is
   needed. Keep the copy deliberately terse to let the film stay visible. */
#ch-10 .chapter-intro { max-width: 18ch; }
#ch-10 .project-card { padding-block: .72rem; }
#ch-10 .project-card small { display: block; margin-top: .08rem; }

/* =====================================================================
   7. ACCESSIBILITY
   ===================================================================== */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  .mobile-menu, .mobile-menu-content, .mobile-menu-film, .mobile-menu-links a { transition: none !important; }
  .mobile-menu-scan { animation: none !important; }
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   MOBILE CHAPTER SAFETY
   Keeps every chapter readable on real phone viewports, including Safari's
   dynamic toolbar and short landscape-height screens.
   ===================================================================== */
@supports (height: 100dvh) {
  .chapters,
  .chapter { height: 100dvh; }
}

@media (max-width: 48rem) {
  :root {
    --page-gutter: clamp(1rem, 5vw, 1.5rem);
    --controls-zone: calc(max(1rem, env(safe-area-inset-bottom)) + 3.6rem);
    --text-h1: clamp(2.55rem, 13vw, 4.8rem);
    --text-h2: clamp(2rem, 10.5vw, 3.5rem);
    --text-h3: clamp(1.05rem, 5.5vw, 1.45rem);
    --text-lead: clamp(.95rem, 4vw, 1.08rem);
  }

  .chapter {
    min-height: 100svh;
    min-height: 100dvh;
  }

  .chapter-body {
    padding-top: calc(var(--nav-height) + max(.85rem, env(safe-area-inset-top)));
    padding-bottom: var(--controls-zone);
    max-height: 100%;
    line-height: 1.45;
  }

  .chapter-body > * + * { margin-top: .85rem; }
  .chapter-intro { max-width: 34ch; }

  /* Let the opening film do the selling on phones. */
  .chapter-hero .chapter-body {
    padding-bottom: calc(var(--controls-zone) + .25rem);
    max-width: 100%;
  }
  .chapter-hero h1 {
    max-width: 8.5ch;
    font-size: clamp(2.75rem, 14vw, 4.5rem);
  }
  .chapter-hero .hero-intro {
    max-width: 26ch;
    font-size: .94rem;
    line-height: 1.35;
  }
  .chapter-hero .chapter-shade-hero {
    background: linear-gradient(0deg, rgba(5,5,7,.44) 0%, rgba(5,5,7,.06) 38%, transparent 64%);
  }

  .chapter h1,
  .chapter h2 { max-width: 12ch; }

  /* Approved mobile capability screen: keep the copy high so the film has
     room to breathe, then anchor the four service cards lower down. */
  #ch-05 { justify-content: flex-start; }
  #ch-05 .chapter-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: calc(var(--nav-height) + max(2.35rem, env(safe-area-inset-top)));
  }
  #ch-05 .card-grid { margin-top: auto; }

  /* Approved downloads screen: no card boxes, just clean labels and the
     two strong pink download buttons. */
  #ch-13 .download-grid { gap: .75rem; }
  #ch-13 .download-item {
    padding: 0;
    border: 0;
    background: transparent;
  }
  #ch-13 .download-item h3 { font-size: clamp(1rem, 5.2vw, 1.32rem); }
  #ch-13 .download-item p {
    min-height: 0;
    font-size: .78rem;
    line-height: 1.3;
  }
  #ch-13 .download-item .button {
    min-height: 3rem;
    padding-inline: .7rem;
    font-size: .82rem;
  }

  .client-list { gap: .4rem .8rem; }
  .client-list li { padding-right: .35rem; }

  .card-grid,
  .price-grid,
  .project-list { gap: .55rem; }

  .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-card { padding: .8rem; gap: .45rem; min-width: 0; }
  .price-card h3 { font-size: .94rem; }
  .price-card-figure { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  .price-card p { font-size: .72rem; line-height: 1.35; }
  .price-card .button {
    min-height: 2.55rem;
    padding: .55rem .45rem;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    font-size: .7rem;
  }

  .project-card {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    gap: .7rem;
    padding: .75rem;
  }
  .project-card strong { font-size: .98rem; line-height: 1.2; }
  .project-card small { display: block; margin-top: .15rem; font-size: .72rem; line-height: 1.3; }
  .project-card b { font-size: .62rem; }

  .faq-list summary { min-height: 2.35rem; padding-block: .5rem; font-size: .9rem; line-height: 1.25; }
  .faq-list p { padding-bottom: .7rem; font-size: .78rem; line-height: 1.4; }

  .sound-control { bottom: max(1rem, env(safe-area-inset-bottom)); }
  .chapter-count { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 2.35rem); }
  .scroll-cue { display: none; }
}

@media (max-width: 30rem) {
  .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-card { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .project-card b { grid-column: 2; }
}

@media (max-height: 42rem) and (max-width: 56rem) {
  .chapter-body {
    padding-top: calc(var(--nav-height) + .45rem);
    padding-bottom: 3.25rem;
  }
  .chapter-body > * + * { margin-top: .55rem; }
  .eyebrow { font-size: .65rem; }
  .chapter-intro { font-size: .88rem; line-height: 1.35; }
  .client-list li { font-size: 1rem; }
  .tag-list { gap: .35rem; }
  .tag-list li { padding: .35rem .65rem; font-size: .72rem; }
  .chapter-count,
  .sound-control { display: none; }
}

@media (max-width: 48rem) {
  #ch-10 .chapter-body > * + * { margin-top: .65rem; }
  #ch-10 .chapter-intro { font-size: .86rem; line-height: 1.3; max-width: 32ch; }
  #ch-10 .project-list { gap: .38rem; }
  #ch-10 .project-card { padding: .58rem .68rem; min-height: 0; }
  #ch-10 .project-card strong { font-size: .9rem; }
  #ch-10 .project-card small { font-size: .66rem; }
  #ch-10 .project-card b { font-size: .58rem; }
}


/* =====================================================================
   FINAL POLISH — video-first choreography and micro-interactions
   ===================================================================== */

/* Give every film an almost imperceptible settling movement as its chapter
   becomes current. The transform stays on the compositor and does not affect
   layout or scroll-snap geometry. */
.chapter-film {
  transform: scale(1.025);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.chapter.is-current .chapter-film { transform: scale(1); }

/* The progress rail is deliberately tiny but visually alive. */
.progress-rail {
  overflow: visible;
  background: rgba(255,255,255,.12);
}
.progress-rail i {
  background: linear-gradient(90deg, #ff168f 0%, #ff4daf 72%, #ffffff 100%);
  box-shadow: 0 0 10px rgba(255,22,143,.45);
  transition: transform 90ms linear;
}

/* Recent Projects remains text-light: the whole row is the link. A small
   motion-only arrow gives touch/hover feedback without adding CTA copy. */
#ch-10 .project-card::after {
  content: '↗';
  align-self: center;
  color: var(--accent);
  font-size: .9rem;
  opacity: .7;
  transform: translate(0, 0);
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
#ch-10 .project-card:hover::after,
#ch-10 .project-card:focus-visible::after {
  opacity: 1;
  transform: translate(.18rem, -.18rem);
}
#ch-10 .project-card:hover,
#ch-10 .project-card:focus-visible {
  border-color: rgba(255,22,143,.7);
}

/* Last screen: a discreet cue appears only when 14/14 is actually current,
   making the reverse scrub discoverable without adding a permanent block. */
.return-cue {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem !important;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.return-cue span {
  color: var(--accent);
  display: inline-block;
  animation: return-cue-pulse 1.25s ease-in-out infinite;
}
body.is-last-chapter .return-cue {
  opacity: 1;
  transform: translateY(0);
}
@keyframes return-cue-pulse {
  0%, 100% { transform: translateY(.12rem); }
  50% { transform: translateY(-.18rem); }
}

/* Keep the social/menu film cinematic but protect navigation contrast. */
.mobile-menu-film { filter: saturate(1.05) contrast(1.03); }

@media (max-width: 48rem) {
  /* The project arrow owns the third grid column; titles get maximum room. */
  #ch-10 .project-card {
    grid-template-columns: 1.4rem minmax(0, 1fr) 1rem;
  }
  #ch-10 .project-card::after { grid-column: 3; grid-row: 1; }
  .return-cue { font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-film { transform: none !important; transition: none !important; }
  .return-cue span { animation: none !important; }
  .progress-rail i { transition: none !important; }
}

/* =====================================================================
   FINAL ART DIRECTION — per-chapter copy placement and motion

   The layout remains the same system, but each film gets its own framing.
   This keeps copy away from the main subject and prevents the experience
   feeling like one repeated template. All movement is compositor-only.
   ===================================================================== */

/* Explicit vertical art direction. The classes are on the section so a
   junior developer can change a chapter by editing one readable class. */
.chapter-copy-top { justify-content: flex-start; }
.chapter-copy-center { justify-content: center; }
.chapter-copy-bottom { justify-content: flex-end; }

.chapter-copy-center .chapter-body {
  padding-top: calc(var(--nav-height) + var(--space-5));
  padding-bottom: var(--controls-zone);
}

/* Each chapter gets a slightly different entrance vector and film origin.
   Values are deliberately tiny: this should feel cinematic, not animated. */
#ch-01 { --copy-x: 0px;   --copy-y: 12px; --film-rest-x: 0px;   --film-rest-y: 0px;  --film-rest-scale: 1.018; --film-origin: 50% 52%; }
#ch-02 { --copy-x: -10px; --copy-y: 0px;  --film-rest-x: 5px;   --film-rest-y: 0px;  --film-rest-scale: 1.022; --film-origin: 52% 44%; }
#ch-03 { --copy-x: 8px;   --copy-y: 10px; --film-rest-x: -4px;  --film-rest-y: 0px;  --film-rest-scale: 1.020; --film-origin: 48% 50%; }
#ch-04 { --copy-x: -8px;  --copy-y: 0px;  --film-rest-x: 4px;   --film-rest-y: 2px;  --film-rest-scale: 1.024; --film-origin: 54% 48%; }
#ch-05 { --copy-x: 0px;   --copy-y: -8px; --film-rest-x: -4px;  --film-rest-y: 0px;  --film-rest-scale: 1.021; --film-origin: 46% 52%; }
#ch-06 { --copy-x: 10px;  --copy-y: 8px;  --film-rest-x: 3px;   --film-rest-y: -2px; --film-rest-scale: 1.020; --film-origin: 52% 52%; }
#ch-07 { --copy-x: 0px;   --copy-y: 8px;  --film-rest-x: 0px;   --film-rest-y: 0px;  --film-rest-scale: 1;     --film-origin: 50% 50%; }
#ch-08 { --copy-x: -8px;  --copy-y: 0px;  --film-rest-x: 0px;   --film-rest-y: 0px;  --film-rest-scale: 1;     --film-origin: 50% 50%; }
#ch-09 { --copy-x: -10px; --copy-y: 0px;  --film-rest-x: 5px;   --film-rest-y: 0px;  --film-rest-scale: 1.023; --film-origin: 54% 48%; }
#ch-10 { --copy-x: 8px;   --copy-y: 0px;  --film-rest-x: -5px;  --film-rest-y: 0px;  --film-rest-scale: 1.020; --film-origin: 46% 48%; }
#ch-11 { --copy-x: -8px;  --copy-y: 10px; --film-rest-x: 4px;   --film-rest-y: 0px;  --film-rest-scale: 1.020; --film-origin: 54% 52%; }
#ch-12 { --copy-x: 0px;   --copy-y: -8px; --film-rest-x: -3px;  --film-rest-y: 2px;  --film-rest-scale: 1.019; --film-origin: 48% 46%; }
#ch-13 { --copy-x: -8px;  --copy-y: 0px;  --film-rest-x: 4px;   --film-rest-y: 0px;  --film-rest-scale: 1.021; --film-origin: 54% 48%; }
#ch-14 { --copy-x: 8px;   --copy-y: 10px; --film-rest-x: -4px;  --film-rest-y: -2px; --film-rest-scale: 1.022; --film-origin: 48% 54%; }

.chapters.has-copy-reveal .chapter-body {
  transform: translate3d(var(--copy-x, 0px), var(--copy-y, 14px), 0);
}
.chapters.has-copy-reveal .chapter.is-copy-visible .chapter-body {
  transform: translate3d(0, 0, 0);
}

.chapter-film {
  transform-origin: var(--film-origin, 50% 50%);
  transform: translate3d(var(--film-rest-x, 0px), var(--film-rest-y, 0px), 0)
             scale(var(--film-rest-scale, 1.02));
  transition: transform 1050ms cubic-bezier(.18,.72,.2,1);
}
.chapter.is-current .chapter-film { transform: translate3d(0,0,0) scale(1); }

/* Top-positioned copy needs a little more breathing room under the fixed nav,
   especially on iPhones with a dynamic browser toolbar. */
.chapter-copy-top .chapter-body {
  padding-top: calc(var(--nav-height) + max(var(--space-5), env(safe-area-inset-top)));
}

@media (max-width: 48rem) {
  .chapter-copy-top .chapter-body {
    padding-top: calc(var(--nav-height) + max(1.15rem, env(safe-area-inset-top)));
  }
  .chapter-copy-center .chapter-body {
    padding-top: calc(var(--nav-height) + .8rem);
  }
  /* Keep the previously approved service composition exactly as designed. */
  #ch-05 .chapter-body {
    padding-top: calc(var(--nav-height) + max(2.35rem, env(safe-area-inset-top)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapters.has-copy-reveal .chapter-body,
  .chapters.has-copy-reveal .chapter.is-copy-visible .chapter-body,
  .chapter-film,
  .chapter.is-current .chapter-film {
    transform: none !important;
  }
}


/* FINAL CTA CONSISTENCY — all sales/download CTAs */
.button-primary, .button-accent, .button-quiet, .button-outline {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(255,37,135,.16);
}
.button-primary:hover, .button-accent:hover, .button-quiet:hover, .button-outline:hover {
  background: #ff3f97; color:#fff; border-color:#ff3f97; transform:translateY(-2px);
}

/* CH05 MOBILE — keep ALL copy high and the car unobstructed. */
@media (max-width:48rem) {
  #ch-05 .chapter-body {
    display:block; height:auto;
    padding-top: calc(var(--nav-height) + max(.75rem, env(safe-area-inset-top)));
    padding-bottom: var(--controls-zone);
  }
  #ch-05 .chapter-body > * + * { margin-top:.42rem; }
  #ch-05 h2 { max-width:none; white-space:nowrap; font-size:clamp(2rem,9.4vw,3.15rem); line-height:.95; }
  #ch-05 .chapter-intro { max-width:30ch; font-size:.86rem; line-height:1.25; }
  #ch-05 .card-grid {
    margin-top:.7rem;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem;
  }
  #ch-05 .card { min-height:0; padding:.48rem .35rem; border-radius:.35rem; }
  #ch-05 .card h3 { font-size:clamp(.58rem,2.55vw,.75rem); line-height:1.12; }
}


/* =====================================================================
   AWARD PASS — typography, bespoke transitions, interaction, gallery
   ===================================================================== */

/* Typography is tuned by both width and height so titles remain intentional
   on compact phones, tall phones, tablets and large desktop displays. */
:root {
  --tracking-tight: -0.048em;
  --tracking-display: -0.055em;
}

.chapter-body h1,
.chapter-body h2 {
  max-width: min(12.8ch, 100%);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.chapter-body h3,
.project-card strong,
.gallery-item-title { text-wrap: pretty; }
.chapter-intro,
.lead { text-wrap: pretty; }

@media (max-width: 26rem) {
  :root {
    --text-h1: clamp(2.2rem, 11vw, 3.15rem);
    --text-h2: clamp(1.9rem, 9.6vw, 2.85rem);
    --text-h3: clamp(1.08rem, 5.2vw, 1.35rem);
    --text-lead: clamp(.92rem, 4vw, 1.02rem);
  }
  .chapter-body h1,
  .chapter-body h2 { max-width: 11.6ch; line-height: .98; }
  .eyebrow { letter-spacing: .13em; }
}

@media (min-width: 48.01rem) and (max-width: 78rem) {
  .chapter-body h1,
  .chapter-body h2 { max-width: 11.5ch; }
}

@media (min-width: 90rem) {
  :root {
    --content-width: 82rem;
    --text-h1: clamp(5rem, 6.25vw, 7.25rem);
    --text-h2: clamp(3.75rem, 4.6vw, 5.6rem);
  }
  .chapter-body { max-width: 82rem; }
}

@media (max-height: 46rem) {
  .chapter-body h1,
  .chapter-body h2 { font-size: clamp(1.9rem, 7.4vh, 3.4rem); }
  .chapter-intro { max-width: 42ch; }
}

/* Each chapter now has its own transition signature. They use only opacity,
   transform, clip-path and filter, so they remain GPU/compositor friendly. */
.chapter {
  --copy-rot: 0deg;
  --copy-blur: 3px;
  --film-enter-x: 0px;
  --film-enter-y: 0px;
  --film-enter-scale: 1.035;
  --film-enter-clip: inset(0 0 0 0);
  --transition-time: 760ms;
}
#ch-01 { --copy-rot:-.35deg; --copy-blur:2px; --film-enter-scale:1.045; --transition-time:900ms; }
#ch-02 { --copy-rot:.25deg; --film-enter-x:-14px; --film-enter-clip:inset(0 0 0 7%); --transition-time:720ms; }
#ch-03 { --copy-rot:-.2deg; --film-enter-y:10px; --film-enter-scale:1.055; --transition-time:820ms; }
#ch-04 { --copy-rot:.18deg; --film-enter-x:12px; --film-enter-clip:inset(0 6% 0 0); --transition-time:700ms; }
#ch-05 { --copy-rot:-.18deg; --film-enter-y:-10px; --film-enter-scale:1.042; --transition-time:860ms; }
#ch-06 { --copy-rot:.3deg; --film-enter-x:-10px; --film-enter-y:4px; --transition-time:740ms; }
#ch-07 { --copy-rot:0deg; --copy-blur:5px; --film-enter-scale:1; --transition-time:620ms; }
#ch-08 { --copy-rot:-.16deg; --film-enter-x:8px; --film-enter-scale:1; --transition-time:680ms; }
#ch-09 { --copy-rot:.2deg; --film-enter-x:-12px; --film-enter-clip:inset(4% 0 0 0); --transition-time:800ms; }
#ch-10 { --copy-rot:-.22deg; --film-enter-y:8px; --film-enter-clip:inset(0 0 5% 0); --transition-time:760ms; }
#ch-11 { --copy-rot:.14deg; --film-enter-x:10px; --film-enter-scale:1.05; --transition-time:840ms; }
#ch-12 { --copy-rot:-.12deg; --film-enter-y:-8px; --copy-blur:4px; --transition-time:720ms; }
#ch-13 { --copy-rot:.2deg; --film-enter-x:-8px; --film-enter-clip:inset(0 5% 0 0); --transition-time:780ms; }
#ch-14 { --copy-rot:-.25deg; --film-enter-y:10px; --film-enter-scale:1.048; --transition-time:900ms; }

.chapters.has-copy-reveal .chapter-body {
  opacity: 0;
  filter: blur(var(--copy-blur));
  transform: translate3d(var(--copy-x,0), var(--copy-y,12px), 0) rotate(var(--copy-rot));
  transition: opacity 420ms var(--ease), transform 520ms var(--ease), filter 520ms var(--ease);
}
.chapters.has-copy-reveal .chapter.is-copy-visible .chapter-body {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,0,0) rotate(0);
}
.chapter-film {
  clip-path: var(--film-enter-clip);
  transform: translate3d(var(--film-enter-x), var(--film-enter-y), 0) scale(var(--film-enter-scale));
  transition: transform var(--transition-time) cubic-bezier(.16,.78,.2,1),
              clip-path var(--transition-time) cubic-bezier(.16,.78,.2,1),
              filter 700ms ease;
}
.chapter.is-current .chapter-film {
  clip-path: inset(0 0 0 0);
  transform: translate3d(var(--film-rest-x,0),var(--film-rest-y,0),0) scale(var(--film-rest-scale,1));
}

/* Menu: more tactile but no heavier. */
.mobile-menu-links a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mobile-menu-links a::before {
  content:"";
  position:absolute;
  left:0; top:50%;
  width:2px; height:0;
  background:var(--accent);
  transform:translateY(-50%);
  transition:height 260ms var(--ease), box-shadow 260ms var(--ease);
}
.mobile-menu-links a:hover::before,
.mobile-menu-links a:focus-visible::before { height:58%; box-shadow:0 0 18px rgba(255,37,135,.7); }
.mobile-menu-links a span { transition:transform 260ms var(--ease), color 260ms var(--ease); }
.mobile-menu-links a:hover span,
.mobile-menu-links a:focus-visible span { transform:translateX(.25rem); color:var(--accent); }
.mobile-menu-cta { position:relative; overflow:hidden; }
.mobile-menu-cta::after {
  content:"";
  position:absolute;
  inset:-40% auto -40% -45%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-16deg);
  transition:left 520ms var(--ease);
}
.mobile-menu-cta:hover::after,
.mobile-menu-cta:focus-visible::after { left:115%; }

/* Project rows get a subtle depth response without covering the film. */
.project-card {
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition:transform 260ms var(--ease), background 260ms var(--ease), border-color 260ms var(--ease);
}
.project-card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 12%, rgba(255,37,135,.12) 48%, transparent 82%);
  transform:translateX(-110%);
  transition:transform 520ms var(--ease);
}
.project-card:hover::before,
.project-card:focus-visible::before { transform:translateX(110%); }
.project-card:hover,
.project-card:focus-visible { transform:translateY(-2px); }

/* Exceptional gallery: editorial rhythm + lightweight filters. */
.gallery-filter {
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  padding:.15rem 0 .6rem;
  margin-bottom:var(--space-5);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gallery-filter::-webkit-scrollbar { display:none; }
.gallery-filter button {
  flex:none;
  min-height:2.75rem;
  padding:.6rem .9rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.gallery-filter button:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.5); }
.gallery-filter button.is-active { background:var(--accent); border-color:var(--accent); color:#fff; }

.gallery-grid {
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.35rem);
}
.gallery-item { grid-column:span 4; contain:layout paint style; }
.gallery-item:nth-child(7n + 1) { grid-column:span 8; }
.gallery-item:nth-child(11n + 5) { grid-column:span 6; }
.gallery-item:nth-child(11n + 6) { grid-column:span 6; }
.gallery-item[hidden] { display:none !important; }
.gallery-item figure { position:relative; overflow:hidden; border-radius:var(--radius-lg); }
.gallery-item img,
.gallery-item video {
  border-radius:var(--radius-lg);
  transform:scale(1.001);
  transition:transform 520ms cubic-bezier(.2,.75,.2,1), filter 360ms ease;
}
.gallery-item:nth-child(7n + 1) img,
.gallery-item:nth-child(7n + 1) video { aspect-ratio:16/10; }
.gallery-item figcaption {
  position:absolute;
  inset:auto 0 0;
  margin:0;
  padding:clamp(.85rem,2vw,1.3rem);
  background:linear-gradient(0deg,rgba(5,5,7,.96) 0%,rgba(5,5,7,.62) 55%,transparent 100%);
  transform:translateY(.25rem);
  transition:transform 320ms var(--ease);
}
.gallery-item:hover img,
.gallery-item:hover video,
.gallery-item:focus-visible img,
.gallery-item:focus-visible video { transform:scale(1.035); filter:saturate(1.08) contrast(1.03); }
.gallery-item:hover figcaption,
.gallery-item:focus-visible figcaption { transform:translateY(0); }
.gallery-item-action { color:#fff; opacity:.78; }
.gallery-item::after {
  content:"↗";
  position:absolute;
  top:.8rem; right:.8rem;
  width:2.35rem; height:2.35rem;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  background:rgba(5,5,7,.38);
  backdrop-filter:blur(8px);
  opacity:0;
  transform:translate(-.2rem,.2rem);
  transition:opacity 240ms var(--ease),transform 240ms var(--ease),background 240ms var(--ease);
}
.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity:1; transform:none; background:var(--accent); }

.gallery-experience-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:var(--space-5);
  color:var(--text-faint);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.gallery-experience-note b { color:var(--accent); font-weight:800; }

.lightbox {
  background:rgba(2,2,4,.985);
  backdrop-filter:blur(18px);
}
.lightbox-media { padding:2.5rem 3.5rem 6.25rem; }
.lightbox-media img,
.lightbox-media video {
  border-radius:var(--radius-lg);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.lightbox-info {
  position:absolute;
  left:max(1rem,env(safe-area-inset-left));
  bottom:max(1rem,env(safe-area-inset-bottom));
  text-align:left;
  z-index:2;
  max-width:min(50vw,32rem);
}
.lightbox-thumbs {
  position:absolute;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  display:flex;
  gap:.45rem;
  max-width:48vw;
  overflow-x:auto;
  padding:.3rem;
  scrollbar-width:none;
}
.lightbox-thumbs::-webkit-scrollbar { display:none; }
.lightbox-thumb {
  flex:0 0 3.1rem;
  width:3.1rem;height:3.8rem;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.35rem;
  overflow:hidden;
  background:#111;
  opacity:.5;
  transition:opacity 180ms ease,border-color 180ms ease,transform 180ms ease;
}
.lightbox-thumb img { width:100%;height:100%;object-fit:cover; }
.lightbox-thumb.is-active { opacity:1;border-color:var(--accent);transform:translateY(-2px); }
.lightbox-progress {
  position:absolute;inset:0 0 auto;height:2px;background:rgba(255,255,255,.12);
}
.lightbox-progress i { display:block;height:100%;background:var(--accent);transform-origin:left; }

@media (max-width: 64rem) {
  .gallery-item { grid-column:span 6; }
  .gallery-item:nth-child(7n + 1) { grid-column:span 12; }
}
@media (max-width: 40rem) {
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .gallery-item,
  .gallery-item:nth-child(7n + 1),
  .gallery-item:nth-child(11n + 5),
  .gallery-item:nth-child(11n + 6) { grid-column:span 1; }
  .gallery-item:nth-child(5n + 1) { grid-column:span 2; }
  .gallery-item:nth-child(5n + 1) img,
  .gallery-item:nth-child(5n + 1) video { aspect-ratio:16/10; }
  .gallery-item figcaption { padding:.7rem; }
  .gallery-item-title { font-size:.86rem; line-height:1.15; }
  .gallery-item-meta,.gallery-item-action { font-size:.6rem; }
  .gallery-item::after { display:none; }
  .lightbox { padding:.75rem; }
  .lightbox-media { padding:3.5rem .25rem 8.4rem; }
  .lightbox-info { max-width:calc(100% - 2rem); bottom:5.8rem; }
  .lightbox-thumbs { left:.75rem; right:.75rem; bottom:.7rem; max-width:none; }
  .lightbox-prev { left:.5rem; }
  .lightbox-next { right:.5rem; }
}

@media (hover:none) {
  .gallery-item::after { opacity:.82; transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  .chapter-film,
  .chapters.has-copy-reveal .chapter-body,
  .gallery-item img,
  .gallery-item video,
  .project-card,
  .mobile-menu-links a span { transition:none !important; transform:none !important; filter:none !important; clip-path:none !important; }
}


/* Performance guardrails: browser can skip layout/paint for page sections far
   below the viewport. This does not apply to the homepage scrub chapters. */
.page .page-section,
.page .page-cta { content-visibility:auto; contain-intrinsic-size:1px 760px; }

/* Preserve the approved car composition after the global typography pass. */
@media (max-width:48rem) {
  #ch-05 h2 {
    max-width:none;
    white-space:nowrap;
    font-size:clamp(1.92rem,9.15vw,3.05rem);
    line-height:.95;
    letter-spacing:-.05em;
  }
}

/* ========================================================================
   GALLERY FINAL PASS
   The PHP gallery is folder-driven; these rules create an editorial rhythm
   regardless of how many images/videos are uploaded.
   ======================================================================== */
.gallery-section { position:relative; }
.gallery-filter { margin-bottom:.65rem; }
.gallery-filter button span {
  display:inline-grid;
  place-items:center;
  min-width:1.55rem;
  height:1.55rem;
  margin-left:.35rem;
  padding:0 .35rem;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  font-size:.62rem;
  line-height:1;
}
.gallery-filter button.is-active span { background:rgba(0,0,0,.18); }
.gallery-filter-status {
  margin:0 0 clamp(1rem,2vw,1.6rem);
  color:var(--text-faint);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.gallery-filter-status span { color:#fff; }

.gallery-grid {
  align-items:start;
  grid-auto-flow:dense;
}
.gallery-item {
  opacity:0;
  transform:translateY(18px) scale(.992);
  transition:opacity 520ms ease, transform 680ms cubic-bezier(.16,.8,.22,1);
  transition-delay:min(calc((var(--gallery-order, 1) - 1) * 28ms), 220ms);
}
.gallery-item.is-revealed { opacity:1; transform:none; }
.gallery-item.is-featured { grid-column:span 8; }
.gallery-item.is-featured img,
.gallery-item.is-featured video { aspect-ratio:16/10; }
.gallery-item figure {
  background:#09090b;
  isolation:isolate;
}
.gallery-item figure::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  border-radius:inherit;
}
.gallery-item[data-type="video"] figure::after {
  content:"PLAY";
  position:absolute;
  top:.8rem;
  left:.8rem;
  z-index:3;
  padding:.45rem .58rem;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(5,5,7,.45);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.14em;
  opacity:.82;
  transition:background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.gallery-item[data-type="video"]:hover figure::after,
.gallery-item[data-type="video"]:focus-visible figure::after {
  background:var(--accent);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.gallery-item-title {
  display:block;
  max-width:90%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gallery-item-action { transition:color 180ms ease, opacity 180ms ease; }
.gallery-item:hover .gallery-item-action,
.gallery-item:focus-visible .gallery-item-action { color:var(--accent); opacity:1; }

.lightbox-media { display:grid; place-items:center; }
.lightbox-media img,
.lightbox-media video {
  max-width:min(92vw,1400px);
  max-height:calc(100dvh - 10rem);
  width:auto;
  height:auto;
  object-fit:contain;
}
.lightbox-info h2 {
  margin:.15rem 0 .15rem;
  font-size:clamp(1.35rem,2.5vw,2.35rem);
  line-height:.95;
}
.lightbox-category,
.lightbox-count {
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

@media (max-width:64rem) {
  .gallery-item.is-featured { grid-column:span 12; }
}

@media (max-width:40rem) {
  .gallery-section { padding-left:.8rem; padding-right:.8rem; }
  .gallery-grid { gap:.62rem; }
  .gallery-item.is-featured { grid-column:span 2; }
  .gallery-item figcaption { min-height:4.65rem; display:flex; flex-direction:column; justify-content:flex-end; }
  .gallery-item-title { max-width:100%; font-size:.82rem; }
  .gallery-item-action { display:none; }
  .gallery-item[data-type="video"] figure::after {
    top:.55rem; left:.55rem; padding:.38rem .48rem; font-size:.5rem;
  }
  .gallery-experience-note { align-items:flex-start; flex-direction:column; gap:.35rem; }
  .lightbox-media img,
  .lightbox-media video { max-width:100%; max-height:calc(100dvh - 12rem); }
}

@media (prefers-reduced-motion:reduce) {
  .gallery-item { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ========================================================================
   GALLERY SIGNATURE MOTION PASS
   Dynamic showreel + tactile editorial grid. No third-party runtime.
   ======================================================================== */
.gallery-showreel {
  position:relative;
  overflow:hidden;
  padding:clamp(1rem,2vw,1.75rem) 0 clamp(3rem,7vw,6rem);
  background:linear-gradient(180deg,#050506 0%,#09090b 52%,#050506 100%);
}
.gallery-showreel::before,
.gallery-showreel::after {
  content:"";
  position:absolute;
  top:0; bottom:0;
  z-index:4;
  width:min(10vw,9rem);
  pointer-events:none;
}
.gallery-showreel::before { left:0; background:linear-gradient(90deg,#050506,transparent); }
.gallery-showreel::after { right:0; background:linear-gradient(-90deg,#050506,transparent); }
.gallery-showreel-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.1rem;
}
.gallery-showreel-head .eyebrow { margin:0; }
.gallery-showreel-head > span {
  color:var(--text-faint);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.gallery-showreel-viewport { overflow:hidden; touch-action:pan-y; }
.gallery-showreel-track {
  --rail-gap:clamp(.65rem,1.35vw,1.2rem);
  display:flex;
  width:max-content;
  gap:var(--rail-gap);
  padding-inline:var(--rail-gap);
  will-change:transform;
  animation:galleryRail 42s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-showreel:hover .gallery-showreel-track { animation-play-state:paused; }
}
.gallery-showreel:has(.gallery-rail-card:focus-visible) .gallery-showreel-track { animation-play-state:paused; }
@keyframes galleryRail { to { transform:translateX(calc(-50% + (var(--rail-gap) / 2))); } }
.gallery-rail-card {
  position:relative;
  width:clamp(18rem,30vw,30rem);
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.gallery-rail-media {
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:16/10;
  border-radius:clamp(.8rem,1.4vw,1.35rem);
  background:#0b0b0d;
  transform:translateZ(0);
}
.gallery-rail-media::after {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:inherit;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.26));
  pointer-events:none;
}
.gallery-rail-media img {
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.015);
  transition:transform 700ms cubic-bezier(.16,.8,.22,1),filter 500ms ease;
}
.gallery-rail-card:hover .gallery-rail-media img,
.gallery-rail-card:focus-visible .gallery-rail-media img {
  transform:scale(1.075);
  filter:saturate(1.08) contrast(1.04);
}
.gallery-rail-media b {
  position:absolute;
  top:.75rem; right:.75rem; z-index:2;
  padding:.42rem .55rem;
  border-radius:999px;
  background:var(--accent);
  font-size:.52rem;
  letter-spacing:.14em;
}
.gallery-rail-copy { display:grid; gap:.18rem; padding:.7rem .1rem 0; }
.gallery-rail-copy small {
  color:var(--text-faint);
  font-size:.57rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.gallery-rail-copy strong {
  max-width:95%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(.95rem,1.2vw,1.15rem);
  line-height:1.1;
}
.gallery-rail-card:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:1rem; }

/* Give the dynamic grid more fashion-editorial rhythm without hardcoding media. */
.gallery-grid { perspective:1200px; }
.gallery-item figure { transition:transform 520ms cubic-bezier(.16,.8,.22,1), box-shadow 520ms ease; }
.gallery-item:hover figure,
.gallery-item:focus-visible figure {
  transform:translate3d(var(--gallery-x,0),var(--gallery-y,0),0) rotateX(var(--gallery-rx,0deg)) rotateY(var(--gallery-ry,0deg));
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.gallery-item figcaption {
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 22%,rgba(0,0,0,.82) 100%);
}
.gallery-item.is-featured .gallery-item-title { font-size:clamp(1rem,1.5vw,1.35rem); }
.gallery-item.is-featured .gallery-item-action { color:var(--accent); }
.gallery-filter {
  position:sticky;
  top:calc(env(safe-area-inset-top) + .65rem);
  z-index:8;
  width:max-content;
  max-width:100%;
  padding:.32rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(5,5,7,.66);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.gallery-filter button { border-color:transparent; }
.gallery-filter button.is-active { box-shadow:0 0 28px rgba(255,21,121,.22); }

/* Lightbox feels like a presentation, not a modal. */
.lightbox { background:rgba(2,2,3,.97); }
.lightbox-media { overflow:hidden; }
.lightbox-media > * { transition:transform 260ms cubic-bezier(.2,.8,.2,1),opacity 220ms ease; }
.lightbox-media.is-dragging > * { transition:none; cursor:grabbing; }
.lightbox-close,.lightbox-prev,.lightbox-next { backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.lightbox-progress i { background:linear-gradient(90deg,var(--accent),#ff62ad,#fff); box-shadow:0 0 18px rgba(255,21,121,.32); }

@media (max-width:40rem) {
  .gallery-showreel { padding-bottom:2.7rem; }
  .gallery-showreel-head { align-items:flex-start; padding-inline:.8rem; }
  .gallery-showreel-head > span { display:none; }
  .gallery-showreel-track { animation-duration:34s; }
  .gallery-rail-card { width:74vw; max-width:20rem; }
  .gallery-rail-copy { padding-top:.55rem; }
  .gallery-filter { top:calc(env(safe-area-inset-top) + .35rem); }
  .gallery-item:hover figure,.gallery-item:focus-visible figure { transform:none; box-shadow:none; }
}

@media (prefers-reduced-motion:reduce) {
  .gallery-showreel-track { animation:none; }
  .gallery-showreel-viewport { overflow-x:auto; scrollbar-width:none; }
  .gallery-showreel-viewport::-webkit-scrollbar { display:none; }
  .gallery-rail-card,.gallery-rail-media img,.gallery-item figure { transition:none !important; }
}

/* Final gallery QA: touch-first presentation */
@media (max-width:40rem) {
  .gallery-item figcaption { transform:none; }
  .gallery-item:nth-child(5n + 1) figcaption { padding:.85rem; }
  .gallery-showreel-viewport { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); }
  .gallery-filter button { min-height:44px; }
  .lightbox-close { min-width:44px; min-height:44px; }
}

/* FINAL CH05 PHONE COMPOSITION — copy high, car clear below */
@media (max-width:48rem) {
  #ch-05 {
    justify-content:flex-start;
  }
  #ch-05 .chapter-body {
    display:block;
    height:auto;
    padding-top:calc(var(--nav-height) + max(.6rem, env(safe-area-inset-top)));
    padding-bottom:var(--controls-zone);
  }
  #ch-05 .chapter-body > * + * {
    margin-top:.42rem;
  }
  #ch-05 h2 {
    max-width:none;
    white-space:nowrap;
    font-size:clamp(2rem,9vw,3rem);
    line-height:.96;
  }
  #ch-05 .chapter-intro {
    max-width:30ch;
    font-size:.86rem;
    line-height:1.24;
  }
  #ch-05 .card-grid {
    margin-top:.65rem;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.42rem;
    max-width:100%;
  }
  #ch-05 .card {
    min-height:0;
    padding:.62rem .68rem;
    border-radius:.45rem;
    background:rgba(6,6,8,.34);
    backdrop-filter:blur(4px);
  }
  #ch-05 .card h3 {
    font-size:clamp(.78rem,3.7vw,1rem);
    line-height:1.12;
  }
  #ch-05 .chapter-shade {
    background:linear-gradient(
      180deg,
      rgba(5,5,7,.56) 0%,
      rgba(5,5,7,.30) 28%,
      rgba(5,5,7,.08) 52%,
      rgba(5,5,7,0) 72%
    );
  }
}

/* FINAL BRAND TUNING */
.site-nav-brand {
  letter-spacing: .055em;
}

/* SECTION 06 — approved minimal composition.
   Only the short headline remains and sits low so the film stays visible. */
#ch-06 {
  justify-content: flex-end;
}
#ch-06 .chapter-body {
  padding-bottom: calc(var(--controls-zone) + 3.8rem);
}
#ch-06 .chapter-intro {
  margin-top: .45rem;
  font-size: clamp(1.35rem, 5vw, 2rem);
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}
#ch-06 .chapter-shade {
  background: linear-gradient(
    180deg,
    rgba(5,5,7,.08) 0%,
    rgba(5,5,7,0) 44%,
    rgba(5,5,7,.18) 65%,
    rgba(5,5,7,.62) 100%
  );
}

/* SECTION 07 — pricing now has a premium moving background.
   Keep the cards readable without hiding the film. */
#ch-07 .chapter-shade {
  background:
    linear-gradient(180deg, rgba(5,5,7,.26) 0%, rgba(5,5,7,.12) 32%, rgba(5,5,7,.38) 100%);
}
#ch-07 .price-card {
  background: rgba(5,5,7,.48);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#ch-07 .chapter-film {
  object-position: 50% 50%;
}

/* SECTION 08 — moving reel over cinematic full-screen film */
#ch-08 .chapter-shade {
  background:
    linear-gradient(180deg,
      rgba(5,5,7,.34) 0%,
      rgba(5,5,7,.18) 34%,
      rgba(5,5,7,.24) 68%,
      rgba(5,5,7,.42) 100%);
}

#ch-08 .chapter-film {
  object-position: 50% 50%;
}

#ch-08 .work-reel,
#ch-08 .reel,
#ch-08 [class*="reel"] {
  position: relative;
  z-index: 2;
}

#ch-08 .reel-card,
#ch-08 .work-card,
#ch-08 [class*="reel"] > * {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (max-width:48rem) {
  #ch-08 .chapter-shade {
    background:
      linear-gradient(180deg,
        rgba(5,5,7,.30) 0%,
        rgba(5,5,7,.10) 40%,
        rgba(5,5,7,.24) 100%);
  }
}


/* FINAL CH10 POSITIONING — keep the project film visible first, then anchor the project UI low. */
#ch-10 {
  justify-content: flex-end;
}
#ch-10 .chapter-body {
  padding-bottom: calc(var(--controls-zone) + 3.2rem);
}
#ch-10 .chapter-shade {
  background: linear-gradient(
    180deg,
    rgba(5,5,7,.06) 0%,
    rgba(5,5,7,.02) 42%,
    rgba(5,5,7,.22) 62%,
    rgba(5,5,7,.68) 100%
  );
}

@media (max-width:48rem) {
  #ch-10 .chapter-body {
    padding-top: var(--nav-height);
    padding-bottom: calc(var(--controls-zone) + 2.65rem);
  }
  #ch-10 .chapter-body > * + * { margin-top: .38rem; }
  #ch-10 .chapter-intro { display:none; }
  #ch-10 .project-list { gap:.34rem; }
  #ch-10 .project-card {
    padding:.5rem .62rem;
    min-height:0;
    background:rgba(5,5,7,.52);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
  #ch-10 .project-card strong { font-size:.86rem; }
  #ch-10 .project-card small { font-size:.62rem; }
}

/* Tighter wordmark tracking — closer to the approved mockups. */
.site-nav-brand { letter-spacing:.025em; }


/* =====================================================================
   FINAL MOBILE VIDEO-FIRST POSITIONING — SECTIONS 12 + 13
   Keep the lower-screen UI compact so the background films remain visible.
   ===================================================================== */
@media (max-width:48rem) {
  /* FAQ — anchor low, keep panels transparent and compact. */
  #ch-12 {
    justify-content:flex-end;
  }
  #ch-12 .chapter-body {
    height:auto;
    padding-top:var(--nav-height);
    padding-bottom:calc(var(--controls-zone) + 2.5rem);
  }
  #ch-12 .chapter-body > * + * {
    margin-top:.38rem;
  }
  #ch-12 .faq-list {
    gap:.28rem;
  }
  #ch-12 .faq-list details {
    border:1px solid rgba(255,255,255,.16);
    border-radius:.5rem;
    padding-inline:.62rem;
    background:rgba(5,5,7,.16);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  #ch-12 .faq-list summary {
    min-height:2.42rem;
    padding-block:.42rem;
    font-size:.82rem;
    line-height:1.15;
  }
  #ch-12 .faq-list p {
    padding-bottom:.55rem;
    font-size:.72rem;
    line-height:1.3;
  }
  #ch-12 .chapter-shade {
    background:linear-gradient(
      180deg,
      rgba(5,5,7,.02) 0%,
      rgba(5,5,7,.00) 44%,
      rgba(5,5,7,.12) 66%,
      rgba(5,5,7,.46) 100%
    );
  }

  /* Free PDFs — two buttons side-by-side at the bottom, no middle cards. */
  #ch-13 {
    justify-content:flex-end;
  }
  #ch-13 .chapter-body {
    height:auto;
    padding-top:var(--nav-height);
    padding-bottom:calc(var(--controls-zone) + 2.7rem);
  }
  #ch-13 .chapter-intro {
    max-width:27ch;
    margin-top:.35rem;
    font-size:.78rem;
    line-height:1.25;
  }
  #ch-13 .download-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.55rem;
    width:100%;
    max-width:none;
    margin-top:.72rem;
  }
  #ch-13 .download-item {
    display:block;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
  }
  #ch-13 .download-item h3,
  #ch-13 .download-item p {
    display:none;
  }
  #ch-13 .download-item .button {
    width:100%;
    min-height:3.15rem;
    margin:0;
    padding:.72rem .55rem;
    border-radius:.62rem;
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    font-size:.82rem;
    font-weight:800;
    text-align:center;
    white-space:nowrap;
  }
  #ch-13 .chapter-shade {
    background:linear-gradient(
      180deg,
      rgba(5,5,7,.02) 0%,
      rgba(5,5,7,.00) 48%,
      rgba(5,5,7,.10) 70%,
      rgba(5,5,7,.46) 100%
    );
  }
}


/* ========================================================================
   GALLERY — FINAL SALES-FIRST UI
   The gallery is a key selling page: strong heading, visible motion, then
   a continuously growing dynamic grid populated from selected-work/.
   ======================================================================== */
.gallery-section {
  padding-top: clamp(2.8rem, 6vw, 5.5rem);
}
.gallery-grid-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:1.4rem;
}
.gallery-grid-head h2 {
  margin-top:.5rem;
  font-size:clamp(2.25rem,5vw,5rem);
  line-height:.92;
  letter-spacing:-.045em;
}
.gallery-grid-head h2 em { color:var(--accent); font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.gallery-grid-head > p {
  max-width:32rem;
  margin:0;
  color:var(--text-faint);
  font-size:clamp(.78rem,1.2vw,.95rem);
  line-height:1.5;
}
.gallery-grid-head code { color:#fff; font:inherit; }

/* Make the gallery hero unmistakable, while keeping the film visible. */
body.page .page-hero-copy h1 {
  max-width:10ch;
  font-size:clamp(3.4rem,9vw,8.5rem);
  line-height:.84;
  letter-spacing:-.055em;
}
body.page .page-hero-copy h1 em {
  color:var(--accent);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.gallery-showreel { border-block:1px solid rgba(255,255,255,.055); }
.gallery-showreel-head .eyebrow { font-size:.7rem; }

@media (max-width:40rem) {
  .page-hero { min-height:62svh; padding-bottom:2.2rem; }
  body.page .page-hero-copy h1 { font-size:clamp(3.1rem,16vw,4.8rem); max-width:8ch; }
  .page-hero-copy .tag-list { gap:.4rem; }
  .gallery-grid-head { display:block; margin-bottom:1rem; }
  .gallery-grid-head h2 { font-size:2.55rem; }
  .gallery-grid-head > p { margin-top:.65rem; max-width:30ch; }
  .gallery-showreel { padding-top:1.2rem; }
  .gallery-rail-card { width:78vw; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.62rem; }
}


/* ========================================================================
   2026 FINAL CONSOLIDATED ART-DIRECTION PASS
   These rules reflect the approved mobile layouts and keep the source
   readable without changing the underlying chapter structure.
   ======================================================================== */

/* All primary commercial CTAs: Shadowban pink + white. */
.button-primary,
.button-accent,
.site-footer-cta,
.price-card .button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.button-primary:hover,
.button-accent:hover,
.site-footer-cta:hover,
.price-card .button:hover {
  background: #ff3b98;
  border-color: #ff3b98;
  color: #fff;
}

/* Brand mark: tighter, cleaner tracking. */
.site-nav-brand,
.site-footer-brand strong {
  letter-spacing: .018em;
}

/* Scrub surface: native touch physics + strict one-screen landing. */
.chapters {
  touch-action: pan-y;
  scroll-snap-type: y mandatory;
  scroll-padding: 0;
  -webkit-overflow-scrolling: touch;
}
.chapter {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Hero: approved right-aligned composition. */
#ch-01 .chapter-body {
  align-self: flex-end;
  text-align: right;
  align-items: flex-end;
}
#ch-01 .chapter-intro {
  margin-left: auto;
}
#ch-01 .button {
  margin-left: auto;
}

/* Section 02: film first, centered copy after the short reveal beat. */
#ch-02 {
  justify-content: center;
}
#ch-02 .chapter-body {
  text-align: center;
  align-items: center;
}
#ch-02 .chapter-intro {
  margin-inline: auto;
}
#ch-02 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,.04),rgba(5,5,7,.10) 48%,rgba(5,5,7,.28));
}

/* Section 03: protect the client film by stripping non-essential copy. */
#ch-03 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,.04),rgba(5,5,7,.08) 52%,rgba(5,5,7,.56));
}

/* Section 04: shorter copy, cleaner film view. */
#ch-04 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,.26),rgba(5,5,7,.05) 48%,rgba(5,5,7,.18));
}

/* Section 05: everything high so the car owns the lower half. */
#ch-05 {
  justify-content: flex-start;
}
#ch-05 .chapter-body {
  padding-top: calc(var(--nav-height) + 1rem);
}
#ch-05 .card-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
#ch-05 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,.52),rgba(5,5,7,.18) 34%,rgba(5,5,7,0) 72%);
}

/* Section 06: approved minimal bottom-aligned message. */
#ch-06 {
  justify-content: flex-end;
}
#ch-06 .chapter-body {
  padding-bottom: calc(var(--controls-zone) + 3.5rem);
}
#ch-06 .chapter-intro {
  color: var(--accent);
  font-family: Georgia,"Times New Roman",serif;
  font-style: italic;
  font-size: clamp(1.25rem,5vw,2rem);
}
#ch-06 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,.02),rgba(5,5,7,0) 52%,rgba(5,5,7,.55));
}

/* Section 07/08: moving backgrounds visible beneath UI. */
#ch-07 .chapter-shade,
#ch-08 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,.20),rgba(5,5,7,.08) 48%,rgba(5,5,7,.34));
}
#ch-07 .price-card {
  background: rgba(5,5,7,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Section 10: recent work lives low so the film has an opening beat. */
#ch-10 {
  justify-content: flex-end;
}
#ch-10 .chapter-body {
  padding-bottom: calc(var(--controls-zone) + 2.7rem);
}
#ch-10 .project-card {
  background: rgba(5,5,7,.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Section 12: FAQ low + translucent. */
#ch-12 {
  justify-content: flex-end;
}
#ch-12 .chapter-body {
  padding-bottom: calc(var(--controls-zone) + 2.5rem);
}
#ch-12 .faq-list details {
  background: rgba(5,5,7,.13);
  border-color: rgba(255,255,255,.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#ch-12 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,0),rgba(5,5,7,.05) 60%,rgba(5,5,7,.42));
}

/* Section 13: two equal download buttons at the bottom. */
#ch-13 {
  justify-content: flex-end;
}
#ch-13 .chapter-body {
  padding-bottom: calc(var(--controls-zone) + 2.7rem);
}
#ch-13 .download-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .55rem;
  width: 100%;
}
#ch-13 .download-item {
  border: 0;
  padding: 0;
  background: transparent;
}
#ch-13 .download-item .button {
  width: 100%;
  min-height: 3.1rem;
  margin: 0;
  border-radius: .65rem;
  white-space: nowrap;
}
#ch-13 .chapter-shade {
  background: linear-gradient(180deg,rgba(5,5,7,0),rgba(5,5,7,.05) 62%,rgba(5,5,7,.42));
}

/* About page: the rejected visual-proof block is removed; approved sections
   are cinematic full-height panels with translucent information cards. */
.page-section-film {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
}
.page-section-bg,
.page-section-film-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-section-bg {
  object-fit: cover;
}
.page-section-film-shade {
  background: linear-gradient(180deg,rgba(5,5,7,.04),rgba(5,5,7,.12) 48%,rgba(5,5,7,.58));
}
.page-section-film-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 8rem;
  padding-bottom: clamp(3rem,7vw,6rem);
}
.page-section-film .numbered-grid {
  margin-top: 1.25rem;
}
.page-section-film .numbered-card {
  background: rgba(5,5,7,.24);
  border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.page-section-film .numbered-card p {
  color: rgba(255,255,255,.82);
}

/* Premium footer approved in the visual review. */
.site-footer-premium {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,37,135,.12),transparent 30rem),
    linear-gradient(180deg,#050507 0%,#030305 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer-premium::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -7rem;
  height: 15rem;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,37,135,.20),transparent 48%),
    linear-gradient(178deg,transparent 0 48%,rgba(255,255,255,.025) 49%,transparent 56%);
  transform: rotate(-2deg);
  pointer-events: none;
}
.site-footer-glow {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow: 0 0 15px rgba(255,37,135,.75);
}
.site-footer-premium .site-footer-inner {
  position: relative;
  z-index: 2;
  min-height: min(920px,92svh);
  padding-block: clamp(4rem,9vw,8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.site-footer-premium .site-footer-brand strong {
  font-size: clamp(1.3rem,3vw,2rem);
  letter-spacing: .34em;
}
.site-footer-premium .site-footer-brand span,
.site-footer-callout h2 span {
  color: var(--accent);
}
.site-footer-premium .site-footer-brand p {
  margin-top: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-size: .72rem;
}
.site-footer-callout {
  margin-top: clamp(3rem,7vw,6rem);
}
.site-footer-callout h2 {
  margin: 0 auto;
  max-width: 15ch;
  font-size: clamp(2.6rem,7vw,6.5rem);
  line-height: .94;
  letter-spacing: -.045em;
}
.site-footer-callout > p {
  margin: 1.4rem auto 0;
  color: var(--text-faint);
  font-size: clamp(.95rem,1.5vw,1.2rem);
}
.site-footer-cta {
  margin-top: 2.1rem;
  min-width: min(100%,24rem);
  justify-content: center;
  box-shadow: 0 0 24px rgba(255,37,135,.22);
}
.site-footer-email {
  display: table;
  margin: 1.7rem auto 0;
  color: var(--text);
  text-underline-offset: .35em;
}
.site-footer-premium .site-footer-links {
  margin-top: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem 1.8rem;
}
.site-footer-premium .site-footer-social {
  margin-top: 2.5rem;
  display: flex;
  gap: 2rem;
}
.site-footer-premium .site-footer-social a {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
}
.site-footer-premium .site-footer-meta {
  width: 100%;
  margin-top: 3.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .68rem;
}

@media (max-width:48rem) {
  #ch-01 .chapter-body {
    width: min(88%,30rem);
    margin-left: auto;
    text-align: right;
  }
  #ch-01 .eyebrow {
    justify-content: flex-end;
  }
  #ch-01 h1 {
    max-width: 9ch;
    margin-left: auto;
    font-size: clamp(2.9rem,14vw,4.65rem);
  }
  #ch-01 .hero-intro {
    max-width: 23ch;
  }

  #ch-02 .chapter-body {
    max-width: 30rem;
    padding-inline: 1.25rem;
  }
  #ch-02 h2 {
    max-width: 10ch;
    margin-inline: auto;
  }

  #ch-03 .chapter-body {
    padding-bottom: calc(var(--controls-zone) + 2.5rem);
  }
  #ch-03 h2 em {
    display: block;
    font-size: .92em;
  }

  #ch-04 .chapter-body {
    padding-top: calc(var(--nav-height) + .8rem);
  }

  #ch-05 .chapter-body {
    padding-top: calc(var(--nav-height) + .65rem);
  }
  #ch-05 .chapter-intro {
    font-size: .82rem;
    max-width: 28ch;
  }
  #ch-05 .card {
    min-height: 0;
    padding: .58rem .62rem;
    background: rgba(5,5,7,.25);
  }

  #ch-07 .price-grid {
    gap: .42rem;
  }
  #ch-07 .price-card {
    padding: .65rem;
  }

  #ch-10 .project-list {
    gap: .34rem;
  }
  #ch-10 .project-card {
    min-height: 0;
    padding: .5rem .62rem;
  }

  #ch-12 .faq-list {
    gap: .25rem;
  }
  #ch-12 .faq-list summary {
    min-height: 2.35rem;
    padding-block: .4rem;
    font-size: .8rem;
  }

  #ch-13 .chapter-intro {
    font-size: .78rem;
    max-width: 28ch;
  }

  .page-section-film-content {
    padding-bottom: 2.25rem;
  }
  .page-section-film .page-section-head {
    margin-bottom: 1rem;
  }
  .page-section-film .numbered-grid {
    gap: .55rem;
  }
  .page-section-film .numbered-card {
    padding: .85rem;
  }

  .site-footer-premium .site-footer-inner {
    min-height: 88svh;
    padding-block: 4rem 3rem;
  }
  .site-footer-premium .site-footer-brand strong {
    letter-spacing: .26em;
  }
  .site-footer-callout h2 {
    font-size: clamp(2.55rem,12vw,4.4rem);
  }
  .site-footer-premium .site-footer-links {
    gap: .7rem 1rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  .site-footer-glow {
    box-shadow: none;
  }
}


/* =====================================================================
   SECONDARY SCRUB PROGRESS — RIGHT EDGE
   Mirrors the top progress rail on the conventional scrollbar edge.
   Visual only: pointer-events are disabled so it never blocks touch/swipe.
   ===================================================================== */
.progress-rail-side {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(4px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 30;
  width: 7px;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,255,255,.13);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22),
    0 0 18px rgba(0,0,0,.24);
}
.progress-rail-side i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(.0714286);
  transform-origin: center top;
  will-change: transform;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--accent) 0%, #ff4ba0 74%, #ffffff 100%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 58%, transparent);
}

@media (max-width: 48rem) {
  .progress-rail-side {
    right: max(3px, env(safe-area-inset-right));
    width: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-rail-side i { transition: none !important; }
}


/* =====================================================================
   MENU MINI CONTROL PANEL — live colour, video and sound preferences
   ===================================================================== */
.menu-control-panel {
  margin-top: 1.15rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .9rem;
  background: rgba(5,5,7,.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.menu-control-head,
.menu-control-row,
.menu-colour-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.menu-control-eyebrow {
  display:block;
  color:var(--text-faint);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.menu-control-head h2 {
  margin-top:.12rem;
  font-size:1.15rem;
  letter-spacing:-.025em;
}
.menu-control-live {
  display:flex;
  align-items:center;
  gap:.38rem;
  color:var(--text-muted);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.menu-control-live i {
  width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.menu-control-preview {
  position:relative;
  height:5.5rem;
  margin:.85rem 0;
  overflow:hidden;
  border-radius:.65rem;
  background:#0b0b0e;
}
.menu-control-preview video { width:100%;height:100%;object-fit:cover; }
.menu-control-preview span {
  position:absolute;left:.6rem;bottom:.5rem;
  padding:.2rem .42rem;border-radius:999px;
  background:rgba(0,0,0,.56);font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.menu-control-row { padding:.55rem 0;border-top:1px solid rgba(255,255,255,.08);font-size:.76rem;font-weight:700; }
.menu-toggle-pair { display:grid;grid-template-columns:1fr 1fr;gap:.22rem;padding:.18rem;background:rgba(255,255,255,.06);border-radius:.55rem; }
.menu-toggle-pair button {
  min-width:3rem;min-height:2.25rem;border:0;border-radius:.4rem;background:transparent;color:var(--text-faint);font-size:.7rem;font-weight:800;
}
.menu-toggle-pair button.is-active { background:var(--accent);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 34%, transparent); }
.menu-colour-control { padding-top:.55rem;border-top:1px solid rgba(255,255,255,.08); }
.menu-colour-label { font-size:.72rem;font-weight:700; }
.menu-colour-label output { font-family:var(--font-mono);font-size:.64rem;color:var(--text-faint); }
.menu-colour-swatches { display:flex;gap:.5rem;align-items:center;margin-top:.65rem; }
.colour-swatch,
.colour-picker {
  width:2rem;height:2rem;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:var(--swatch,transparent);position:relative;display:grid;place-items:center;
}
.colour-swatch.is-active { border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 18px var(--swatch); }
.colour-picker { overflow:hidden;background:conic-gradient(#f33,#ff3,#3f3,#3ff,#33f,#f3f,#f33);cursor:pointer;color:#fff;font-weight:900; }
.colour-picker input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer; }
.colour-picker span { pointer-events:none;text-shadow:0 1px 4px #000; }

/* Video Off freezes the current/poster imagery and prevents new films loading. */
html.videos-off .chapter-film,
html.videos-off .page-section-bg,
html.videos-off [data-visible-play],
html.videos-off .mobile-menu-film,
html.videos-off .menu-preview-film { animation:none!important; }

/* Every primary CTA is Shadowban colour + white copy. */
.button-accent,
.button-primary,
.site-nav .button-outline,
.site-footer-cta { background:var(--accent);border-color:var(--accent);color:#fff; }
.site-nav .button-outline:hover { background:color-mix(in srgb,var(--accent) 84%,#fff);border-color:transparent;color:#fff; }

@media (max-width:48rem) {
  .menu-control-panel { padding:.82rem; }
  .menu-control-preview { height:4.6rem; }
  .colour-swatch,.colour-picker { width:1.85rem;height:1.85rem; }
}


/* =====================================================================
   FINAL MOBILE ART DIRECTION — approved section placements
   ===================================================================== */
@media (max-width:48rem) {
  /* Section 2: centred, brief copy after the film beat. */
  #ch-02 .chapter-body { text-align:center; align-items:center; }
  #ch-02 h2 { margin-inline:auto; }
  #ch-02 .chapter-intro { max-width:24ch; margin-inline:auto; }

  /* Section 12: FAQ stays low and translucent so the film remains visible. */
  #ch-12 { justify-content:flex-end; }
  #ch-12 .chapter-body {
    padding-top:var(--nav-height);
    padding-bottom:calc(var(--controls-zone) + .75rem);
  }
  #ch-12 .faq-list details {
    background:rgba(5,5,7,.20);
    border-color:rgba(255,255,255,.14);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  #ch-12 .chapter-shade {
    background:linear-gradient(180deg,rgba(5,5,7,.02) 0%,rgba(5,5,7,.04) 45%,rgba(5,5,7,.44) 100%);
  }

  /* Section 13: two clean pink download buttons side-by-side at the bottom. */
  #ch-13 { justify-content:flex-end; }
  #ch-13 .chapter-body { padding-bottom:calc(var(--controls-zone) + .8rem); }
  #ch-13 .download-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%; }
  #ch-13 .download-item { padding:0;background:transparent;border:0;min-width:0; }
  #ch-13 .download-item h3,
  #ch-13 .download-item p { display:none; }
  #ch-13 .download-item .button { width:100%;min-width:0;padding-inline:.45rem;white-space:nowrap; }
  #ch-13 .chapter-shade {
    background:linear-gradient(180deg,rgba(5,5,7,.02),rgba(5,5,7,.05) 52%,rgba(5,5,7,.50) 100%);
  }

  /* Section 10: keep projects compact and low; the background film gets the stage. */
  #ch-10 .chapter-body { padding-bottom:calc(var(--controls-zone) + .6rem); }

  /* Price CTAs are primary actions too. */
  #ch-07 .button-quiet { background:var(--accent);border-color:var(--accent);color:#fff; }
}


/* =====================================================================
   PRODUCTION MOBILE-FIRST QA PASS
   Every homepage chapter gets its own phone layout so copy never competes
   with the fixed controls or the important subject in the film.
   ===================================================================== */
@media (max-width:48rem) {
  :root {
    --page-gutter: clamp(1rem, 4.8vw, 1.35rem);
    --nav-height: 4.35rem;
    --controls-zone: calc(max(1rem, env(safe-area-inset-bottom)) + 4.65rem);
  }

  .site-nav { padding-inline:var(--page-gutter); }
  .site-nav-brand { font-size:.98rem; letter-spacing:.015em; }
  .menu-toggle { min-height:2.8rem; padding:.55rem .7rem; }

  .chapter { height:100svh; min-height:100svh; }
  @supports (height:100dvh) {
    .chapter { height:100dvh; min-height:100dvh; }
  }
  .chapter-body {
    max-height:calc(100dvh - var(--nav-height) - var(--controls-zone));
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
  }
  .chapter-body::-webkit-scrollbar { display:none; }
  .chapter-count { right:max(1.3rem,env(safe-area-inset-right)); bottom:max(1.25rem,env(safe-area-inset-bottom)); }

  /* Per-film framing. */
  #ch-01 .chapter-film { object-position:48% 50%; }
  #ch-02 .chapter-film { object-position:50% 50%; }
  #ch-03 .chapter-film { object-position:50% 48%; }
  #ch-04 .chapter-film { object-position:50% 48%; }
  #ch-05 .chapter-film { object-position:50% 54%; }
  #ch-06 .chapter-film { object-position:48% 46%; }
  #ch-07 .chapter-film { object-position:50% 48%; }
  #ch-08 .chapter-film { object-position:50% 54%; }
  #ch-09 .chapter-film { object-position:50% 54%; }
  #ch-10 .chapter-film { object-position:50% 42%; }
  #ch-11 .chapter-film { object-position:49% 44%; }
  #ch-12 .chapter-film { object-position:52% 48%; }
  #ch-13 .chapter-film { object-position:52% 46%; }
  #ch-14 .chapter-film { object-position:55% 50%; }

  /* 01 — right-aligned hero, concise and video-led. */
  #ch-01 .chapter-body { width:min(88%,27rem); margin-left:auto; padding-bottom:calc(var(--controls-zone) + .65rem); }
  #ch-01 h1 { font-size:clamp(2.7rem,13vw,4.25rem); max-width:8.8ch; }
  #ch-01 .hero-intro { max-width:21ch; font-size:.88rem; }

  /* 02 — centre copy, brief. */
  #ch-02 .chapter-body { max-width:24rem; padding-inline:1rem; }
  #ch-02 h2 { font-size:clamp(2.45rem,12.5vw,4rem); max-width:9ch; }
  #ch-02 .chapter-intro { font-size:.82rem; }

  /* 03 — keep the client list compact and avoid italic wrapping. */
  #ch-03 .chapter-body { padding-bottom:calc(var(--controls-zone) + 1rem); }
  #ch-03 h2 { font-size:clamp(2.1rem,10.8vw,3.4rem); max-width:9.4ch; }
  #ch-03 h2 em { display:block; font-size:.83em; line-height:.95; }
  #ch-03 .client-list { gap:.42rem .65rem; }
  #ch-03 .client-list li { font-size:.78rem; }

  /* 04 — deliberately short, CTA stays clear. */
  #ch-04 .chapter-body { padding-top:calc(var(--nav-height) + .7rem); }
  #ch-04 h2 { font-size:clamp(2rem,10.5vw,3.25rem); max-width:9.8ch; }
  #ch-04 .button { margin-top:.8rem; }

  /* 05 — copy/cards high, car completely readable below. */
  #ch-05 .chapter-body { max-height:none; overflow:visible; padding-top:calc(var(--nav-height) + .4rem); padding-bottom:0; }
  #ch-05 h2 { font-size:clamp(2rem,9.5vw,3rem); }
  #ch-05 .chapter-intro { margin-top:.28rem; font-size:.78rem; }
  #ch-05 .card-grid { margin-top:.55rem; gap:.4rem; }
  #ch-05 .card { min-height:3.35rem; padding:.52rem .58rem; background:rgba(5,5,7,.20); backdrop-filter:blur(3px); }
  #ch-05 .card h3 { font-size:.83rem; line-height:1.08; }

  /* 06 — only the approved message at the bottom. */
  #ch-06 .chapter-body { max-height:none; overflow:visible; padding-bottom:calc(var(--controls-zone) + 2.2rem); }
  #ch-06 h2 { font-size:clamp(2.25rem,11vw,3.6rem); max-width:10ch; }
  #ch-06 .chapter-intro { font-size:clamp(1.2rem,5.4vw,1.75rem); }

  /* 07 — three compact price columns/cards on phone, no vertical sprawl. */
  #ch-07 .chapter-body { max-height:none; overflow:visible; padding-top:calc(var(--nav-height) + .55rem); padding-bottom:var(--controls-zone); }
  #ch-07 h2 { font-size:clamp(2.1rem,10vw,3.2rem); }
  #ch-07 .chapter-intro { font-size:.78rem; }
  #ch-07 .price-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
  #ch-07 .price-card { min-width:0; padding:.55rem .4rem; border-radius:.55rem; }
  #ch-07 .price-card h3 { font-size:.78rem; }
  #ch-07 .price-card-figure { font-size:clamp(1.15rem,5vw,1.55rem); }
  #ch-07 .price-card p { display:none; }
  #ch-07 .price-card .button { min-height:2.55rem; padding:.45rem .25rem; font-size:.58rem; letter-spacing:0; white-space:normal; line-height:1.05; }

  /* 08 — heading high, reel takes the lower stage. */
  #ch-08 .chapter-body { padding-top:calc(var(--nav-height) + .55rem); padding-bottom:.4rem; max-height:none; overflow:visible; }
  #ch-08 h2 { font-size:clamp(2rem,9.8vw,3.2rem); }
  #ch-08 .chapter-intro { max-width:27ch; font-size:.78rem; }
  #ch-08 .reel { bottom:calc(var(--controls-zone) + .35rem); }

  /* 09 — short services block high. */
  #ch-09 .chapter-body { padding-top:calc(var(--nav-height) + .55rem); }
  #ch-09 h2 { font-size:clamp(2rem,10vw,3.25rem); }
  #ch-09 .chapter-intro { font-size:.78rem; line-height:1.35; max-width:30ch; }
  #ch-09 .tag-list { gap:.35rem; }
  #ch-09 .tag-list li { font-size:.65rem; padding:.35rem .55rem; }

  /* 10 — recent projects low and translucent, leaving the film open above. */
  #ch-10 .chapter-body { max-height:none; overflow:visible; padding-bottom:calc(var(--controls-zone) + 1.4rem); }
  #ch-10 .eyebrow { margin-bottom:.25rem; }
  #ch-10 h2 { font-size:clamp(2rem,10vw,3.25rem); }
  #ch-10 .project-list { margin-top:.55rem; gap:.3rem; }
  #ch-10 .project-card { padding:.46rem .58rem; min-height:3.45rem; background:rgba(5,5,7,.30); border-color:rgba(255,255,255,.24); }
  #ch-10 .project-card strong { font-size:.79rem; }
  #ch-10 .project-card small { font-size:.62rem; }

  /* 11 — skills low but tags remain readable. */
  #ch-11 .chapter-body { padding-bottom:calc(var(--controls-zone) + 1rem); }
  #ch-11 h2 { font-size:clamp(2rem,10vw,3.2rem); }
  #ch-11 .chapter-intro { font-size:.76rem; }
  #ch-11 .tag-list { gap:.3rem; }
  #ch-11 .tag-list li { padding:.3rem .48rem; font-size:.61rem; }

  /* 12 — FAQ at bottom, maximum film visibility. */
  #ch-12 .chapter-body { max-height:none; overflow:visible; padding-bottom:calc(var(--controls-zone) + .95rem); }
  #ch-12 h2 { font-size:2.45rem; }
  #ch-12 .faq-list { margin-top:.5rem; gap:.22rem; }
  #ch-12 .faq-list details { background:rgba(5,5,7,.10); border-color:rgba(255,255,255,.13); }
  #ch-12 .faq-list summary { min-height:2.15rem; padding:.32rem .48rem; font-size:.72rem; line-height:1.15; }
  #ch-12 .faq-list details p { font-size:.68rem; line-height:1.3; padding:.2rem .5rem .5rem; }

  /* 13 — two pink buttons side by side at the bottom. */
  #ch-13 .chapter-body { max-height:none; overflow:visible; padding-bottom:calc(var(--controls-zone) + 1.25rem); }
  #ch-13 h2 { font-size:clamp(2.1rem,10.5vw,3.35rem); }
  #ch-13 .chapter-intro { font-size:.75rem; }
  #ch-13 .download-grid { margin-top:.75rem; gap:.42rem; }
  #ch-13 .download-item .button { min-height:3rem; font-size:.72rem; padding-inline:.2rem; border-radius:.58rem; }

  /* 14 — final CTA low, footer-link card does not collide with sound/count. */
  #ch-14 .chapter-body { padding-bottom:calc(var(--controls-zone) + 1.2rem); }
  #ch-14 h2 { font-size:clamp(2.15rem,10.8vw,3.4rem); }
  #ch-14 .chapter-intro { font-size:.78rem; max-width:28ch; }
  #ch-14 .button-large { min-height:3rem; padding:.6rem 1rem; }
  #ch-14 .contact-note { font-size:.67rem; }
  #ch-14 .contact-gallery-link { margin-top:.55rem; padding:.55rem .65rem; }
  #ch-14 .chapter-footer { display:none; }

  /* Fixed controls never cover interactive content. */
  .site-sound-control { bottom:max(1rem,env(safe-area-inset-bottom)); }
  .chapter-arrows { bottom:max(1rem,env(safe-area-inset-bottom)); }
  .progress-rail-side { width:6px; }

  /* Standalone pages prioritise video then content. */
  .page-hero-copy { padding-bottom:max(2.25rem,env(safe-area-inset-bottom)); }
  .page-section-film-content { padding:calc(var(--nav-height) + 1rem) var(--page-gutter) 2rem; }
  .page-section-film .numbered-card { background:rgba(5,5,7,.18); backdrop-filter:blur(3px); }

  /* Gallery: visible heading first, moving rail second, touch-friendly filters. */
  .gallery-showreel-head { padding-inline:var(--page-gutter); }
  .gallery-filter { display:flex; overflow-x:auto; gap:.45rem; padding-bottom:.35rem; scrollbar-width:none; }
  .gallery-filter::-webkit-scrollbar { display:none; }
  .gallery-filter button { flex:0 0 auto; min-height:44px; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  .gallery-item, .gallery-item.is-featured { grid-column:auto; }
  .gallery-item figcaption { padding:.55rem; }
  .gallery-item-title { font-size:.78rem; }
  .gallery-item-action { font-size:.56rem; }

  /* Cinematic footer: compact enough for phone, still feels like a final scene. */
  .site-footer-premium .site-footer-inner { min-height:auto; padding:4rem 1rem calc(3rem + env(safe-area-inset-bottom)); }
  .site-footer-callout { margin-top:2.6rem; }
  .site-footer-callout h2 { font-size:clamp(2.35rem,11.5vw,4rem); max-width:10ch; }
  .site-footer-callout > p { max-width:28ch; font-size:.85rem; }
  .site-footer-cta { width:min(100%,22rem); min-height:3.2rem; }
  .site-footer-email { font-size:.88rem; }
  .site-footer-premium .site-footer-links { margin-top:2.5rem; gap:.75rem 1rem; font-size:.82rem; }
  .site-footer-premium .site-footer-social { margin-top:2rem; }
  .site-footer-premium .site-footer-meta { margin-top:2.4rem; font-size:.56rem; letter-spacing:.11em; }
}

/* =====================================================================
   MADNESS / RANDOM MODE
   A deliberately different experience: no snap, shuffled middle chapters,
   vertical headlines and angled cinematic entrances. The default site is
   untouched until the visitor explicitly enables it from the menu.
   ===================================================================== */
.menu-control-madness > span { display:flex; flex-direction:column; align-items:flex-start; gap:.05rem; }
.menu-control-madness small { color:var(--text-faint); font-size:.56rem; font-weight:600; letter-spacing:.04em; }
.madness-switch { position:relative; width:3.3rem; height:1.85rem; flex:none; }
.madness-switch input { position:absolute; inset:0; opacity:0; }
.madness-switch span { position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.18); transition:background 240ms var(--ease); }
.madness-switch span::after { content:""; position:absolute; width:1.35rem; height:1.35rem; left:.2rem; top:.19rem; border-radius:50%; background:#fff; transition:transform 240ms var(--ease); box-shadow:0 3px 12px rgba(0,0,0,.35); }
.madness-switch input:checked + span { background:#ff6a00; border-color:#ff6a00; }
.madness-switch input:checked + span::after { transform:translateX(1.43rem); }
.madness-switch input:focus-visible + span { outline:2px solid #fff; outline-offset:3px; }

.random-mode-bar {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  min-height:3.45rem;
  padding:.62rem max(1rem,env(safe-area-inset-left)) calc(.62rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:#ff6a00;
  color:#090909;
  box-shadow:0 -10px 35px rgba(0,0,0,.28);
  transform:translateY(110%);
  transition:transform 360ms cubic-bezier(.16,.8,.22,1);
}
.random-mode-bar[hidden] { display:none; }
html.madness-mode .random-mode-bar { transform:translateY(0); }
.random-mode-bar strong { display:flex; align-items:center; gap:.55rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; }
.random-mode-bar strong i { width:.6rem; height:.6rem; border-radius:50%; background:#090909; animation:madnessPulse 1.2s ease-in-out infinite; }
.random-mode-bar button { min-height:2.2rem; padding:.35rem .7rem; border:1px solid rgba(0,0,0,.45); border-radius:.4rem; background:rgba(255,255,255,.20); color:#090909; font-size:.65rem; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
@keyframes madnessPulse { 50% { transform:scale(.6); opacity:.5; } }

html.madness-mode { --accent:#ff6a00; }
html.madness-mode body { overflow:hidden; }
html.madness-mode .chapters { scroll-snap-type:none; scroll-behavior:auto; }
html.madness-mode .chapter { height:auto; min-height:100svh; scroll-snap-align:none; scroll-snap-stop:normal; overflow:visible; transform:translate3d(0,5rem,0) rotate(-3deg) scale(.985); transform-origin:50% 70%; opacity:.62; transition:transform 760ms cubic-bezier(.16,.8,.22,1),opacity 520ms ease; }
html.madness-mode .chapter:nth-child(even) { transform:translate3d(0,5rem,0) rotate(3deg) scale(.985); }
html.madness-mode .chapter.is-madness-visible { transform:none; opacity:1; }
html.madness-mode .chapter-body { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(.8rem,4vw,2.5rem); align-items:end; max-height:none; overflow:visible; padding-top:calc(var(--nav-height) + 1.5rem); padding-bottom:7rem; text-align:left!important; }
html.madness-mode .chapter-body > h1,
html.madness-mode .chapter-body > h2 { grid-column:1; grid-row:1 / span 8; writing-mode:vertical-rl; transform:rotate(180deg); align-self:center; max-width:none!important; max-height:68svh; font-size:clamp(2.25rem,8vw,5rem); line-height:.9; text-align:left!important; }
html.madness-mode .chapter-body > :not(h1):not(h2) { grid-column:2; }
html.madness-mode .chapter-body > .eyebrow { align-self:end; }
html.madness-mode .chapter-shade { background:linear-gradient(110deg,rgba(5,5,7,.58),rgba(5,5,7,.02) 58%,rgba(5,5,7,.34)); }
html.madness-mode .chapter-body > *:not(h1):not(h2) { opacity:0; transform:translateY(1.4rem); transition:opacity 460ms ease 160ms,transform 620ms cubic-bezier(.16,.8,.22,1) 140ms; }
html.madness-mode .chapter.is-madness-visible .chapter-body > *:not(h1):not(h2) { opacity:1; transform:none; }
html.madness-mode .progress-rail,
html.madness-mode .progress-rail-side,
html.madness-mode .chapter-dots,
html.madness-mode .chapter-arrows,
html.madness-mode .scroll-cue { opacity:0!important; pointer-events:none!important; }
html.madness-mode .site-sound-control { bottom:calc(4.2rem + env(safe-area-inset-bottom)); }
html.madness-mode .chapter-count { color:#ff6a00; bottom:calc(4.5rem + env(safe-area-inset-bottom)); }
html.madness-mode .button-primary,
html.madness-mode .button-accent,
html.madness-mode .price-card .button { background:#ff6a00; border-color:#ff6a00; color:#090909; }

@media (max-width:48rem) {
  html.madness-mode .chapter-body { grid-template-columns:3.25rem minmax(0,1fr); column-gap:.65rem; padding-inline:1rem; padding-bottom:8rem; }
  html.madness-mode .chapter-body > h1,
  html.madness-mode .chapter-body > h2 { font-size:clamp(2rem,9vw,3.3rem); max-height:62svh; }
  html.madness-mode #ch-07 .price-grid { grid-template-columns:1fr; }
  html.madness-mode #ch-13 .download-grid { grid-template-columns:1fr 1fr; }
  html.madness-mode .random-mode-bar { min-height:3.8rem; }
  .random-mode-bar strong { font-size:.62rem; }
  .random-mode-bar button { font-size:.58rem; }
}

@media (prefers-reduced-motion:reduce) {
  html.madness-mode .chapter,
  html.madness-mode .chapter-body > *,
  .random-mode-bar { transition:none!important; transform:none!important; opacity:1!important; }
  .random-mode-bar strong i { animation:none; }
}

/* =====================================================================
   FINAL PHONE SAFETY + PERFORMANCE PASS
   Production guard rails for compact iPhones and short landscape-like
   browser heights. Visual design is unchanged; only fit/readability changes.
   ===================================================================== */
@media (max-width:48rem) {
  .chapters { overscroll-behavior-y:contain; }
  .chapter { overflow:hidden; }
  .chapter-body { min-width:0; }
  .chapter-body h1,
  .chapter-body h2,
  .chapter-intro,
  .eyebrow { overflow-wrap:normal; word-break:normal; }

  /* Commercial actions use one consistent treatment everywhere. */
  .button-primary,
  .button-accent,
  .button-quiet,
  .button-outline,
  .price-card .button,
  .site-footer-cta {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }

  /* Keep the content cards translucent enough that the film still sells. */
  #ch-05 .card,
  #ch-10 .project-card,
  #ch-12 .faq-list details { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

  /* About: approved video-first treatment, no pill/tag clutter. */
  .page-section-film-content { min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; }
  .page-section-film .numbered-grid { gap:.55rem; }
  .page-section-film .numbered-card { background:rgba(5,5,7,.16); border-color:rgba(255,255,255,.18); }
  .page-section-film .numbered-card p { color:rgba(255,255,255,.82); }
}

@media (max-width:22.5rem) {
  /* 320–360px phones: preserve intentional typography rather than wrapping
     emphasis words in awkward places. */
  #ch-01 h1 { font-size:2.55rem; }
  #ch-02 h2 { font-size:2.3rem; }
  #ch-03 h2 { font-size:2rem; }
  #ch-05 h2,
  #ch-07 h2,
  #ch-08 h2,
  #ch-09 h2,
  #ch-10 h2,
  #ch-11 h2,
  #ch-13 h2,
  #ch-14 h2 { font-size:2rem; }
  #ch-13 .download-item .button { font-size:.65rem; }
  .site-sound-control { transform:scale(.92); transform-origin:left bottom; }
}

@media (max-width:48rem) and (max-height:44rem) {
  /* Short phone viewport: cut non-essential explanatory copy before ever
     allowing content to collide with sound/counter controls. */
  #ch-01 .hero-intro,
  #ch-07 .chapter-intro,
  #ch-08 .chapter-intro,
  #ch-09 .chapter-intro,
  #ch-11 .chapter-intro,
  #ch-13 .chapter-intro,
  #ch-14 .contact-note { display:none; }
  #ch-10 .project-card small { display:none; }
  #ch-12 .faq-list details:nth-child(n+5) { display:none; }
  #ch-05 .card { min-height:2.8rem; }
}


/* =====================================================================
   SAFARI / MOBILE MASTER PASS
   Mobile is the reference layout. Desktop expands from it; it does not
   redefine the interaction. These rules deliberately sit last.
   ===================================================================== */

/* Stable, inline media rendering on WebKit. */
.chapter-film,
.page-hero-film,
.page-section-bg,
.mobile-menu-film,
.menu-preview-film {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (max-width:48rem) {
  html,
  body {
    width:100%;
    max-width:100%;
    overscroll-behavior:none;
  }

  body.home { position:fixed; inset:0; }

  /* Native vertical pan + mandatory full-screen snap is the master gesture.
     Pinch zoom remains available for accessibility. */
  .chapters {
    position:absolute;
    inset:0;
    width:100%;
    height:100vh;
    height:100svh;
    overflow-y:scroll;
    overflow-x:hidden;
    scroll-snap-type:y mandatory;
    scroll-behavior:auto;
    scroll-padding:0;
    overscroll-behavior-y:none;
    touch-action:pan-y pinch-zoom;
    -webkit-overflow-scrolling:touch;
    -webkit-scroll-snap-type:mandatory;
  }

  @supports (height:100dvh) {
    .chapters { height:100dvh; }
  }

  .chapter {
    width:100%;
    height:100vh;
    min-height:100vh;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    touch-action:pan-y pinch-zoom;
  }

  @supports (height:100svh) {
    .chapter { height:100svh; min-height:100svh; }
  }
  @supports (height:100dvh) {
    .chapter { height:100dvh; min-height:100dvh; }
  }

  /* All fourteen phone layouts are already individually tuned. Prevent a
     nested content scroller from stealing a vertical swipe from the chapter
     scrub; short-screen rules below remove non-essential copy instead. */
  .chapter-body {
    overflow:visible!important;
    overscroll-behavior:initial;
    touch-action:pan-y pinch-zoom;
    -webkit-overflow-scrolling:auto;
  }

  .chapter-film {
    width:100.1%;
    height:100.1%;
    max-width:none;
    object-fit:cover;
  }

  /* Interactive UI gets finger-sized targets without changing appearance. */
  a,
  button,
  summary,
  input[type="checkbox"],
  input[type="color"] {
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .menu-toggle,
  .site-sound-control button,
  .menu-toggle-pair button,
  .colour-swatch,
  .madness-switch,
  .chapter-arrow,
  .gallery-filter button,
  .lightbox-close,
  .button {
    min-height:44px;
  }

  /* Keep fixed UI inside the physical iPhone safe areas. */
  .site-nav {
    padding-left:max(var(--page-gutter),env(safe-area-inset-left));
    padding-right:max(var(--page-gutter),env(safe-area-inset-right));
  }
  .progress-rail-side {
    right:max(0px,env(safe-area-inset-right));
  }
  .site-sound-control {
    left:max(var(--page-gutter),env(safe-area-inset-left));
    bottom:max(1rem,env(safe-area-inset-bottom));
  }
  .chapter-count {
    right:max(var(--page-gutter),env(safe-area-inset-right));
    bottom:max(1.1rem,env(safe-area-inset-bottom));
  }

  /* No accidental text selection during repeated scrubbing. */
  .site-nav,
  .site-sound-control,
  .chapter-count,
  .progress-rail,
  .progress-rail-side,
  .chapter-dots,
  .chapter-arrows {
    -webkit-user-select:none;
    user-select:none;
  }
}

/* WebKit fallback for older iPhones that predate dynamic viewport units. */
@supports (-webkit-touch-callout:none) and (not (height:100dvh)) {
  @media (max-width:48rem) {
    html,
    body,
    .chapters,
    .chapter {
      min-height:-webkit-fill-available;
    }
  }
}

/* Compact/short iPhones: never introduce an inner scrollbar. Instead remove
   the least valuable supporting copy while preserving the headline, action,
   film subject, sound control and chapter count. */
@media (max-width:48rem) and (max-height:42rem) {
  #ch-03 .client-list li:nth-child(n+5),
  #ch-07 .chapter-intro,
  #ch-08 .chapter-intro,
  #ch-09 .chapter-intro,
  #ch-11 .chapter-intro,
  #ch-12 .faq-list details:nth-child(n+5),
  #ch-13 .chapter-intro,
  #ch-14 .contact-note { display:none!important; }

  #ch-10 .project-card small { display:none!important; }
  #ch-10 .project-card { min-height:3rem; }
  #ch-12 .faq-list summary { min-height:2rem; }
}

/* iPhone landscape: preserve one-screen scrub and keep controls out of copy. */
@media (max-width:58rem) and (orientation:landscape) and (max-height:31rem) {
  :root { --controls-zone:3.35rem; --nav-height:3.6rem; }
  .site-nav-brand { font-size:.8rem; }
  .menu-toggle { min-height:2.55rem; }
  .chapter-body { padding-top:calc(var(--nav-height) + .35rem); padding-bottom:calc(var(--controls-zone) + .2rem); }
  .eyebrow { font-size:.56rem; }
  .chapter-intro { display:none; }
  .site-sound-control { transform:scale(.82); transform-origin:left bottom; }
  .chapter-count { font-size:1.35rem; }
  #ch-05 .card-grid,
  #ch-07 .price-grid,
  #ch-13 .download-grid { gap:.3rem; }
  #ch-12 .faq-list details:nth-child(n+4) { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .chapters { scroll-behavior:auto!important; }
  .chapter-film { transform:none!important; }
}