/* Shaun Michel portfolio: final imagery and font licensing can be added later. */
:root {
  --ink: #11110f;
  --paper: #f1f0ea;
  --muted: #77766f;
  --line: #c9c7bf;
  --light: #e2e0d8;
  /* A restrained trust blue: authoritative, memorable and used only as a signal. */
  --signal: #2252d6;
  --signal-light: #aebff5;
  --max: 1600px;
  --pad: clamp(1rem, 3vw, 3rem);
  --section: clamp(7rem, 14vw, 14rem);
  --sans: Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

/* Homepage project covers use one consistent portrait frame. */
.home-page .project-index-list .project-card-media,
.home-page .project-index-list li:nth-child(n) .project-card-media {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
}

/* Project index: contained editorial grid. This is deliberately scoped to
   the work lists only, preserving the rest of the approved scroll page. */
.home-page .project-index-list.project-grid-2up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.75rem, 6vw, 6rem) clamp(1.5rem, 3.5vw, 3.5rem);
  width: min(100%, 76rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 4vw, 4rem);
  background: none;
  border: 0;
}

.home-page .project-mobile-intro { display: none; }
.home-page .project-index-list.project-grid-2up li,
.home-page .project-index-list.project-grid-2up li:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  justify-self: stretch;
  align-self: start;
  width: 100%;
  margin: 0;
  transform: none !important;
  filter: none !important;
}
.home-page .project-index-list.project-grid-2up li:first-child {
  grid-column: 1 / -1;
}
.home-page .project-index-list.project-grid-2up a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: .45rem 1rem;
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.home-page .project-index-list.project-grid-2up a::before,
.home-page .project-index-list.project-grid-2up a::after {
  display: none;
}
.home-page .project-index-list.project-grid-2up .project-card-media {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-height: 0;
  aspect-ratio: 5 / 4;
  margin: 0;
  overflow: hidden;
  background: #d8cec4;
}
.home-page .project-index-list.project-grid-2up li:first-child .project-card-media {
  aspect-ratio: 16 / 9;
}
.home-page .project-index-list.project-grid-2up .project-card-media::before,
.home-page .project-index-list.project-grid-2up .project-card-media::after {
  display: none;
}
.home-page .project-index-list.project-grid-2up .project-card-media img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}
.home-page .project-index-list.project-grid-2up strong {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
}
.home-page .project-index-list.project-grid-2up i {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  color: var(--signal);
  font-size: 1.05rem;
  font-style: normal;
}
.home-page .project-index-list.project-grid-2up span,
.home-page .project-index-list.project-grid-2up small {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.4;
}
.home-page .project-index-list.project-grid-2up span {
  grid-column: 1;
  grid-row: 3;
  color: var(--signal);
  font-family: "DM Mono", monospace;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.home-page .project-index-list.project-grid-2up small {
  grid-column: 1 / -1;
  grid-row: 4;
  max-width: 34rem;
  color: var(--muted);
  font-size: .82rem;
}
.home-page .project-index-list.project-grid-2up a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 7px;
  transform: none;
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .home-page .project-index-list.project-grid-2up a:hover {
    transform: none;
    box-shadow: none;
  }
  .home-page .project-index-list.project-grid-2up a:hover .project-card-media img {
    transform: scale(1.018);
  }
}
@media (max-width: 700px) {
  html,
  body.home-page {
    min-height: 100%;
    overflow-y: visible;
    touch-action: pan-y;
    overscroll-behavior-y: auto;
  }

  body.home-page { background-attachment: scroll; }

  .home-page .project-index-list.project-grid-2up {
    display: block;
    width: min(100%, 26rem);
    padding-block: 1.5rem;
  }
  .home-page .project-index-list.project-grid-2up li,
  .home-page .project-index-list.project-grid-2up li:nth-child(n) {
    margin-bottom: 3.25rem;
  }
  .home-page .project-index-list.project-grid-2up li:first-child .project-card-media,
  .home-page .project-index-list.project-grid-2up .project-card-media {
    aspect-ratio: 5 / 4;
  }
}

/* Homepage typography role contract. Paragraphs return to sentence case and a
   comfortable reading size; compact uppercase remains a metadata treatment. */
.home-page .fall-editorial-copy__lead,
.home-page .work-index-summary p,
.home-page .project-group-head > p,
.home-page .project-editorial-hook__inner > p:not(:first-child),
.home-page .hero-copy p,
.home-page .working-principles > p,
.home-page .working-principles dd,
.home-page .ideas-intro,
.home-page .ideas-body,
.home-page .ideas-steps dd {
  font: 300 clamp(.9375rem, 1vw, 1rem)/1.58 "DM Mono", monospace;
  letter-spacing: 0;
  text-transform: none;
}

.home-page .bmw-hub-hero h1,
.home-page .f1-page-hero h1,
.home-page .f1-case-copy h2,
.home-page .project-copy h3,
.home-page .scroll-chapter-card > strong,
.home-page .stream-head h3,
.home-page .footer-availability {
  letter-spacing: -.04em;
}

/* Typography role refinement: paragraph-length DM Mono copy uses the regular
   weight. Navigation, labels, indices and metadata headings remain medium. */
.home-page .hero-manifesto-body,
.home-page .fall-editorial-copy__lead,
.home-page .project-mobile-intro > p:nth-of-type(2),
.home-page .project-editorial-hook__inner > p:nth-of-type(2),
.home-page .ideas-body,
.home-page .ideas-steps dd,
.home-page .working-principles > p,
.home-page .working-principles dd,
.home-page .footer-availability--left::before {
  font-weight: 400;
}

/* Exact Figma component-layer mount. This overrides the discarded HTML
   approximation above without affecting the scroll-story layout. */
.home-page svg.micrographic-lockup[data-figma-micrographic] {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: #241814;
  opacity: 0;
  transition: opacity .16s ease-out;
}

.home-page svg.micrographic-lockup[data-figma-micrographic].is-ready {
  opacity: 1;
}

.home-page .identity-stamp--end svg.micrographic-lockup[data-figma-micrographic] {
  color: #fffaf0;
}

.home-page .hero-title--micrographic {
  width: clamp(14rem, 20vw, 18rem);
}

@media (max-width: 800px) {
  .home-page .hero-title--micrographic {
    width: min(68vw, 16.5rem);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.95rem, 1vw, 1.05rem);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.home-page {
  --ink: #241814;
  --paper: #f2ede4;
  --muted: #74645b;
  --line: #cbbdb2;
  --light: #e5d8cc;
  --signal: #a74627;
  --signal-light: #efad7d;
  --signal-blue: #2252d6;
  --aberration-clay: rgba(198, 109, 72, .5);
  --aberration-blue: rgba(73, 119, 133, .46);
  --journey-background:
    radial-gradient(circle at 86% 8%, rgba(117, 41, 25, .7) 0%, rgba(177, 69, 37, .5) 24%, transparent 51%),
    radial-gradient(ellipse at 47% 40%, rgba(255, 239, 211, .9) 0%, rgba(239, 190, 144, .42) 39%, transparent 68%),
    linear-gradient(145deg, #f3dfc5 0%, #d98a58 55%, #803622 100%);
  overflow-x: clip;
  background: var(--journey-background);
  background-attachment: fixed;
}
.home-page::after {
  content: "";
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  background-image: var(--analog-grain-image, none);
  background-size: 72px 72px;
  mix-blend-mode: soft-light;
  opacity: .06;
}
.home-page .hero {
  position: relative;
  z-index: 7;
  overflow: hidden;
  min-height: 100svh;
  background: transparent;
}
.home-page .hero::before,
.home-page .hero::after {
  content: none;
}
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { color: #fff; background: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem var(--pad);
  mix-blend-mode: difference;
  color: #fff;
  transition: transform .2s cubic-bezier(.23, 1, .32, 1);
}
.home-page .site-header.is-on-hero {
  color: var(--ink);
  mix-blend-mode: normal;
}
.home-page .site-header.is-on-hero .nav-list,
.home-page .site-header.is-on-hero .sfx-toggle {
  color: #241814;
}
.home-page .site-header.is-on-hero a,
.home-page .site-header.is-on-hero button {
  text-shadow: none;
}
.site-header a,
.site-header button {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .42),
    0 0 1px rgba(255, 255, 255, .35);
}
.site-header.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; gap: .45rem; font-weight: 700; letter-spacing: -.03em; }
.brand-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--signal-light); }
.nav-list { display: flex; gap: clamp(1.25rem, 3vw, 3rem); }
.nav-list a,
.sfx-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}
.sfx-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sfx-toggle::before { content: ""; display: inline-block; width: .38rem; height: .38rem; margin-right: .42rem; border: 1px solid currentColor; border-radius: 50%; vertical-align: .08em; }
.sfx-toggle[aria-pressed="true"]::before { background: currentColor; }
.sfx-toggle:focus-visible { outline-color: currentColor; }
.nav-list a, .footer-links a { position: relative; }
.nav-list a::after, .footer-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .18s ease;
}
.nav-list a:hover::after, .nav-list a:focus-visible::after,
.footer-links a:hover::after, .footer-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hero {
  min-height: 100svh;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(5.5rem, 9vh, 7.5rem) var(--pad) clamp(1.5rem, 3vh, 2.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(.8rem, 1.6vh, 1.4rem);
}
.hero-kicker { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; color: rgba(36, 24, 20, .72); font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; }
.hero-film-meta { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 7rem); align-self: start; padding: .65rem 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; font-family: "DM Mono", monospace; font-size: clamp(.78rem, .78vw, .84rem); font-weight: 500; line-height: 1.35; letter-spacing: .075em; text-transform: uppercase; }
.hero-meta-group { display: flex; align-items: baseline; gap: clamp(1.5rem, 4vw, 5rem); }
.hero-meta-group:last-child { justify-content: flex-end; text-align: right; }
.hero-title { grid-column: 1 / -1; grid-row: 3; align-self: center; letter-spacing: -.04em; line-height: .82; text-transform: uppercase; font-size: clamp(4rem, 10.25vw, 11rem); font-weight: 700; }
.hero-title > span { display: block; }
.home-page .hero-title > span:first-child,
.home-page .section-heading h2,
.home-page .directory-card b,
.home-page .more-teaser h2 {
  transition: filter .2s ease, opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .home-page .hero-title > span:first-child:hover,
  .home-page .section-heading h2:hover,
  .home-page .directory-card:hover b,
  .home-page .more-teaser h2:hover {
    filter: blur(2.2px);
    opacity: .78;
  }
}
.hero-role { max-width: 11ch; margin-top: .3em; margin-left: 16.66%; font-family: var(--serif); font-weight: 400; font-style: italic; text-transform: none; font-size: .4em; line-height: .94; letter-spacing: -.04em; }
.hero-copy {
  grid-column: 2 / 9;
  grid-row: 4;
  align-self: end;
  max-width: 68ch;
  padding-top: .9rem;
  border-top: 1px solid rgba(36,24,20,.62);
  position: relative;
  top: clamp(-3.5rem, -5vh, -2.25rem);
}
.hero-copy p {
  color: rgba(36, 24, 20, .88);
  font-family: var(--sans);
  max-width: 65ch;
  font-size: clamp(.9rem, .86vw, 1rem);
  line-height: 1.55;
  letter-spacing: .025em;
  white-space: normal;
}
.hero-copy strong { color: var(--ink); font-size: .86rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }

.scroll-cinema {
  --cinema-presence: 0;
  --world-presence: 0;
  --palette-clay: 0;
  --palette-blue: 0;
  --palette-night: 0;
  --story-progress: 0;
  --story-shade: .18;
  --character-y: 0px;
  --character-rotate: -6deg;
  --cloud-y: 0px;
  --streak-y: 0px;
  --debris-y: 0vh;
  --debris-y-fast: 0vh;
  --debris-spin: 0deg;
  --debris-counter-spin: 0deg;
  --debris-opacity: 1;
  --orbit-spin: 0deg;
  --orbit-counter: 0deg;
  --counter-y: 0px;
  --f1-shift: -18vw;
  --bmw-shift: 18vw;
  --f1-opacity: 0;
  --bmw-opacity: 0;
  --stage-opacity: 1;
  --fall-copy-scroll-y: 18vh;
  --journey-opacity: 1;
  --environment-opacity: 1;
  --footer-reveal: 0;
  --footer-backdrop-opacity: 1;
  --footer-shade-opacity: .18;
  --character-scale: 1;
  --journey-x: 0vw;
  --footer-table-y: -110vh;
  --footer-table-rotate: -3deg;
  --footer-table-opacity: 0;
  --chair-y: 110vh;
  --chair-opacity: 0;
  --chair-rotate: 8deg;
  --workstation-opacity: 0;
  --workstation-x: 0vw;
  --workstation-y: 0vh;
  --workstation-scale: 1;
  --desk-y: -110vh;
  --mac-y: -130vh;
  --mac-rotate: -18deg;
  position: relative;
  height: 100svh;
  pointer-events: none;
  /* The page already owns this fixed gradient. Keeping the story container
     transparent prevents a second copy of the gradient forming a visible
     horizontal seam at the hero-to-fall boundary. */
  background: transparent;
}
.scroll-cinema-sticky {
  position: fixed;
  z-index: 4 !important;
  inset: 0;
  overflow: hidden;
  height: 100svh;
  isolation: isolate;
  opacity: 1;
  pointer-events: none;
  background: transparent;
}

.home-page #more > .scroll-proof {
  position: absolute;
  z-index: 30;
  top: calc((clamp(22rem, 42vh, 30rem) - 6rem) / 2 - 14rem);
  right: clamp(2.25rem, 6vw, 7rem);
  left: clamp(2.25rem, 6vw, 7rem);
  height: 6rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  color: #fff8ec;
  pointer-events: none;
}

.scroll-proof__column {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr);
  align-items: end;
  gap: clamp(1rem, 2vw, 2rem);
  width: min(25rem, 36vw);
}
.scroll-proof__column--left { text-align: left; }
.scroll-proof__column--right {
  grid-template-columns: minmax(9rem, 1fr) auto;
  text-align: right;
}
.scroll-proof__column p {
  margin: 0;
  padding-bottom: .15rem;
  color: rgba(255, 248, 236, .82);
  font: 500 clamp(.65rem, .76vw, .76rem)/1.45 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scroll-proof__column p span { color: #5f85ff; }
.scroll-proof__column strong {
  display: block;
  font: 400 clamp(4rem, 7vw, 6.5rem)/.68 var(--serif);
  letter-spacing: -.035em;
}
.scroll-proof__column--right p { grid-column: 1; grid-row: 1; }
.scroll-proof__column--right strong { grid-column: 2; grid-row: 1; }

@media (max-width: 800px) {
  .home-page #more > .scroll-proof {
    top: calc((clamp(11rem, 27vh, 14.5rem) - 5.75rem) / 2 - 2rem);
    right: 1.25rem;
    left: 1.25rem;
    height: 5.75rem;
    align-items: flex-end;
    gap: 1rem;
  }
  .scroll-proof__column,
  .scroll-proof__column--right {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: .5rem;
    width: calc(50% - .5rem);
  }
  .scroll-proof__column--right { align-items: flex-end; }
  .scroll-proof__column strong { font-size: clamp(2.5rem, 11vw, 3.5rem); }
}

/* The opening and the fall share one fixed canvas. Only the foreground world
   changes ownership at the handoff, so two complete scenes never dissolve
   over one another. */
.scroll-cinema:not(.is-world-active) .scroll-character {
  visibility: hidden;
}
.scroll-cinema.is-camera-impact .scroll-cinema-sticky {
  z-index: 6;
}
.scroll-cinema.is-camera-impact .scroll-character-frame.is-active {
  filter:
    brightness(.92)
    saturate(.94)
    drop-shadow(1.5px 0 var(--aberration-clay))
    drop-shadow(-1.5px 0 var(--aberration-blue));
}
.impact-contact-points,
.impact-surface-reflection {
  pointer-events: none;
  opacity: 0;
}
.impact-contact-points {
  position: absolute;
  z-index: 3;
  inset: 0;
}
.impact-contact {
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  border: .25px solid rgba(255, 246, 235, .17);
  border-radius: 46% 54% 48% 52%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 251, 246, .09) 0 2%, transparent 3% 56%, rgba(255, 248, 238, .055) 57% 58%, transparent 60%),
    radial-gradient(circle, transparent 60%, rgba(28, 16, 14, .055) 61% 62%, transparent 64%);
  box-shadow:
    inset .25rem .15rem .6rem rgba(255, 248, 239, .045),
    inset -.2rem -.15rem .55rem rgba(29, 17, 15, .08);
}
.impact-contact::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: .25px solid rgba(255, 248, 240, .08);
  border-radius: 52% 48% 55% 45%;
}
.impact-contact-left {
  top: 38%;
  left: 18%;
  transform: rotate(-18deg) scaleX(1.18);
}
.impact-contact-face {
  top: 23%;
  left: 46%;
  width: 9%;
  opacity: .38;
  transform: rotate(8deg) scaleY(.82);
}
.impact-contact-right {
  top: 37%;
  right: 16%;
  transform: rotate(16deg) scaleX(1.16);
}
.impact-surface-reflection {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 17%, rgba(255, 249, 241, .055) 27%, rgba(255, 255, 255, .09) 31%, transparent 39%),
    linear-gradient(112deg, transparent 61%, rgba(255, 249, 241, .035) 67%, transparent 72%);
  mix-blend-mode: screen;
}
.scroll-cinema.is-camera-impact .impact-contact-points,
.scroll-cinema.is-camera-impact .impact-surface-reflection {
  opacity: 1;
}
.home-page:has(.scroll-cinema.is-camera-impact) .more-teaser-content {
  text-shadow: 0 1px 12px rgba(19, 10, 8, .55);
}
@media (prefers-reduced-transparency: reduce) {
  .impact-contact-points,
  .impact-surface-reflection {
    display: none;
  }
}
.scroll-cinema-sticky::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: var(--footer-backdrop-opacity);
  background:
    linear-gradient(145deg, rgb(25 76 92 / calc(var(--palette-blue) * .92)), rgb(73 119 133 / calc(var(--palette-blue) * .88))),
    radial-gradient(circle at 78% 24%, rgb(122 172 189 / calc(var(--palette-blue) * .38)), transparent 38%),
    radial-gradient(circle at 24% 74%, rgb(12 48 61 / calc(var(--palette-blue) * .72)), transparent 52%),
    linear-gradient(145deg, rgb(35 20 19 / var(--palette-night)), rgb(68 34 30 / var(--palette-night))),
    radial-gradient(circle at 72% 68%, rgb(111 48 34 / calc(var(--palette-clay) * .72)), transparent 46%),
    var(--journey-background);
}
.scroll-cinema-sticky::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: calc(var(--footer-shade-opacity) * var(--world-presence));
  background: linear-gradient(180deg, transparent, rgba(36, 24, 20, .72));
}
.scroll-ambient-lighting {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s cubic-bezier(.23, 1, .32, 1);
}
.scroll-cinema.has-dynamic-lighting .scroll-ambient-lighting {
  opacity: 1;
}
.scroll-ambient-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(28rem, 50vmax, 62rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.scroll-ambient-light--warm {
  background:
    radial-gradient(circle, rgba(255, 247, 216, .58) 0 7%, rgba(255, 205, 138, .32) 26%, transparent 58%),
    radial-gradient(circle, rgba(255, 137, 67, .3) 0, rgba(210, 75, 39, .14) 42%, transparent 72%);
}
.scroll-ambient-light--cool {
  width: clamp(26rem, 46vmax, 56rem);
  background:
    radial-gradient(ellipse at center, rgba(213, 250, 255, .48) 0 8%, rgba(112, 218, 234, .3) 31%, transparent 62%),
    radial-gradient(ellipse at center, rgba(29, 151, 186, .28) 0, rgba(18, 92, 127, .13) 44%, transparent 74%);
}
.scroll-ambient-light--landing {
  top: 60%;
  width: clamp(24rem, 42vmax, 52rem);
  background:
    radial-gradient(ellipse at center, rgba(255, 225, 163, .5) 0 9%, rgba(238, 140, 68, .3) 34%, transparent 64%),
    radial-gradient(ellipse at center, rgba(163, 61, 35, .25) 0, rgba(92, 35, 28, .12) 48%, transparent 76%);
}
.scroll-cinema-atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 1;
  perspective: 1000px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.scroll-cinema-atmosphere::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 3% 42%, rgba(255, 158, 94, .23), transparent 21%),
    radial-gradient(circle at 98% 66%, rgba(44, 188, 205, .16), transparent 22%),
    var(--analog-grain-image, none);
  background-size: auto, auto, 72px 72px;
  mix-blend-mode: soft-light;
  opacity: .3;
}
@media (max-width: 699px) {
  .scroll-ambient-light {
    width: 76vmax;
  }
  .scroll-ambient-light--cool {
    width: 70vmax;
  }
  .scroll-ambient-light--landing {
    width: 66vmax;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cinema.has-dynamic-lighting .scroll-ambient-light--warm {
    opacity: .08;
    transform: translate3d(-50%, -48%, 0);
  }
  .scroll-cinema.has-dynamic-lighting .scroll-ambient-light--cool,
  .scroll-cinema.has-dynamic-lighting .scroll-ambient-light--landing {
    opacity: 0;
  }
}

/* Approved header direction: Compact Editorial.
   Uses the standalone Frame 31 wordmark and keeps the character layer sharp. */
.home-page .site-header--compact-editorial {
  --header-progress: 0;
  --header-journey-progress: 0;
  --header-logo-scale: 1;
  --header-lift: 0px;
  --header-icon-opacity: .62;
  min-height: 4.5rem;
  padding-top: .48rem;
  padding-bottom: .48rem;
  overflow: visible;
  isolation: isolate;
  color: var(--paper);
  background: transparent;
  mix-blend-mode: normal;
  transform: translate3d(0, var(--header-lift), 0);
  transition: color 180ms cubic-bezier(.23, 1, .32, 1);
}

.home-page .site-header--compact-editorial.is-on-hero { color: var(--ink); }

.home-page .site-header--single-lockup {
  min-height: 5.15rem;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

.home-page .site-header--compact-editorial a,
.home-page .site-header--compact-editorial button {
  text-shadow: 0 1px 1px rgba(36, 24, 20, .14);
}

.home-page .brand--shaun-word {
  position: relative;
  z-index: 2;
  width: clamp(5.5rem, 7vw, 7rem);
  min-height: 2.75rem;
  color: var(--paper);
  transform: scale(var(--header-logo-scale));
  transform-origin: left center;
  will-change: transform;
}

.home-page .site-header--compact-editorial.is-on-hero .brand--shaun-word { color: var(--signal-blue); }

.home-page .brand--selected-lockup {
  position: relative;
  z-index: 2;
  width: clamp(9rem, 12vw, 12rem);
  color: var(--paper);
  transform: scale(var(--header-logo-scale));
  transform-origin: left center;
  will-change: transform;
}

.home-page .site-header--compact-editorial.is-on-hero .brand--selected-lockup {
  color: var(--signal-blue);
}

.figma31-lockup--selected-header {
  width: 100%;
}

.figma31-lockup--selected-header .figma31-layer--word {
  top: 20%;
  left: 33.56%;
}

.header-shaun-word {
  display: block;
  width: 100%;
  aspect-ratio: 846 / 327;
  background: currentColor;
  -webkit-mask: url("assets/images/identity/frame31-shaun-word.svg") center / contain no-repeat;
  mask: url("assets/images/identity/frame31-shaun-word.svg") center / contain no-repeat;
}

.compact-header-rail {
  display: none;
}

.compact-header-rail > span {
  position: absolute;
  inset: 0;
  background: var(--signal-blue);
  transform: scaleX(var(--header-journey-progress));
  transform-origin: left center;
  will-change: transform;
}

.home-page .site-header--compact-editorial:not(.is-on-hero) .compact-header-rail > span { background: var(--paper); }

.home-page .site-header--compact-editorial .nav-list {
  position: relative;
  z-index: 2;
  align-items: center;
}

.home-page .site-header--compact-editorial .nav-list a {
  gap: .42rem;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), opacity 140ms ease;
}

.home-page .site-header--compact-editorial .nav-list a:active,
.home-page .site-header--compact-editorial .sfx-toggle:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .home-page .site-header--compact-editorial .nav-list a:hover .frame32-icon { opacity: 1; }
}

@media (max-width: 700px) {
  .home-page .site-header--compact-editorial {
    min-height: 4.15rem;
    padding-top: .42rem;
    padding-bottom: .42rem;
  }
  .home-page .brand--shaun-word { width: 5.2rem; }
  .home-page .site-header--single-lockup {
    min-height: 4.5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
  }
  .home-page .brand--selected-lockup { width: 7.65rem; }
  .home-page .site-header--compact-editorial .nav-list { gap: .42rem; }
  .home-page .site-header--compact-editorial .nav-list a {
    width: 1.75rem;
    min-height: 2rem;
    justify-content: center;
  }
  .home-page .site-header--compact-editorial .nav-list a > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .home-page .site-header--compact-editorial .sfx-toggle {
    white-space: nowrap;
    font-size: .66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .site-header--compact-editorial {
    --header-logo-scale: .9 !important;
    --header-lift: 0px !important;
    --header-icon-opacity: 1 !important;
  }
  .compact-header-rail > span { transform: scaleX(1); }
}
.scroll-story-elements { position: absolute; z-index: 2; inset: 0; overflow: hidden; opacity: var(--stage-opacity); pointer-events: none; }
.fall-editorial-copy {
  position: absolute;
  z-index: 1;
  top: 0;
  left: clamp(3.75rem, 6vw, 7rem);
  width: clamp(18rem, 25vw, 27rem);
  color: var(--ink);
  opacity: 1;
  clip-path: none;
  transform: translateY(var(--fall-copy-scroll-y));
  pointer-events: none;
}
.fall-editorial-copy::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 1px;
  margin-bottom: .9rem;
  background: currentColor;
  opacity: .55;
}
.fall-editorial-copy p { margin: 0; }
.fall-editorial-copy__lead {
  max-width: 38ch;
  font: 500 clamp(.78rem, .82vw, .9rem)/1.55 var(--mono);
}
.fall-editorial-copy__landing {
  max-width: none;
  margin-top: 1.1rem !important;
  font: 400 clamp(1.92rem, 2.35vw, 2.8rem)/.96 var(--serif);
  letter-spacing: -.03em;
}
.fall-editorial-copy__landing > span,
.fall-editorial-copy__landing > strong { display: block; }
.fall-editorial-copy__landing > span,
.fall-editorial-copy__landing > strong { white-space: nowrap; }
.fall-editorial-copy__eye {
  display: inline-block;
  width: .82em;
  height: .76em;
  margin-right: .22em;
  background: var(--paper);
  vertical-align: -.03em;
  -webkit-mask: url("assets/images/identity/frame32-orbit.svg") center / contain no-repeat;
  mask: url("assets/images/identity/frame32-orbit.svg") center / contain no-repeat;
}
.fall-editorial-copy__landing strong {
  color: var(--signal-blue);
  font-weight: inherit;
}

@media (min-width: 701px) {
  .fall-editorial-copy {
    top: 0;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1rem, 1.5vw, 1.5rem);
    width: min(58rem, 76vw);
    transform: translate(-50%, var(--fall-copy-scroll-y));
  }

  .fall-editorial-copy::before {
    display: none;
  }

  .fall-editorial-copy__landing {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin-top: 0 !important;
    text-align: center;
  }

  .fall-editorial-copy__lead {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: left;
  }
}
.story-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vw, 62rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 239, 217, .27);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--orbit-spin));
  will-change: transform;
}
.story-orbit::before,
.story-orbit::after { content: ""; position: absolute; width: .4rem; height: .4rem; border: 1px solid #fff0dc; }
.story-orbit::before { top: 12%; left: 12%; }
.story-orbit::after { right: 8%; bottom: 22%; }
.story-orbit-two { width: min(44vw, 38rem); transform: translate(-50%, -50%) rotate(var(--orbit-counter)); opacity: .7; }
.story-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgba(255, 240, 220, .35);
  transform: translate(-50%, -50%) rotate(var(--orbit-spin));
}
.story-crosshair::before,
.story-crosshair::after { content: ""; position: absolute; background: rgba(255, 240, 220, .5); }
.story-crosshair::before { top: 50%; left: -1.5rem; width: 8rem; height: 1px; }
.story-crosshair::after { top: -1.5rem; left: 50%; width: 1px; height: 8rem; }
.story-coordinate {
  position: absolute;
  color: rgba(255, 240, 220, .72);
  font: 500 .75rem var(--mono, "DM Mono", monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-coordinate-one { top: 23%; left: 7%; transform: translateY(var(--streak-y)); }
.story-coordinate-two { right: 7%; bottom: 19%; transform: translateY(var(--counter-y)); }
.story-project {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: clamp(10rem, 19vw, 17rem);
  padding: .9rem;
  border-top: 1px solid rgba(255, 240, 220, .72);
  border-bottom: 1px solid rgba(255, 240, 220, .35);
  color: #fff0dc;
  background: rgba(74, 30, 23, .42);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  will-change: transform, opacity;
}
.story-project b { color: #ffc08a; font: 500 .75rem "DM Mono", monospace; text-transform: uppercase; }
.story-project strong { margin-top: .7rem; font-size: clamp(1rem, 1.8vw, 1.6rem); letter-spacing: -.03em; }
.story-project small { margin-top: .2rem; color: rgba(255, 240, 220, .84); font-size: .75rem; line-height: 1.4; }
.story-project-f1 { left: 5%; opacity: var(--f1-opacity); transform: translate3d(var(--f1-shift), -76%, 0); }
.story-project-bmw { right: 5%; opacity: var(--bmw-opacity); transform: translate3d(var(--bmw-shift), 34%, 0); }
.scroll-chapter-cards { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.scroll-chapter-card {
  position: absolute;
  top: 50%;
  display: grid;
  width: clamp(15rem, 24vw, 22rem);
  min-height: clamp(20rem, 54vh, 30rem);
  overflow: hidden;
  border: 1px solid rgba(255, 240, 220, .42);
  color: #fff5e8;
  background: #221c1a;
  box-shadow: 0 1.5rem 4rem rgba(37, 19, 15, .2);
  opacity: var(--card-presence, 0);
  text-decoration: none;
  transform: translate3d(var(--card-shift, 0), -50%, 0);
  visibility: hidden;
  transition: box-shadow .25s ease;
  will-change: transform, opacity;
}
.scroll-chapter-card.is-visible { visibility: visible; pointer-events: auto; }
.scroll-chapter-card:hover { box-shadow: 0 2rem 5rem rgba(37, 19, 15, .34); }
.scroll-chapter-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,23,21,.05) 22%, rgba(28,23,21,.92) 88%); }
.scroll-chapter-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.06); transform: scale(1.02); transition: transform .7s cubic-bezier(.16,1,.3,1); }
.scroll-chapter-card:hover img { transform: scale(1.055); }
.scroll-chapter-meta,
.scroll-chapter-card > strong,
.scroll-chapter-action { position: relative; z-index: 1; }
.scroll-chapter-meta { display: flex; justify-content: space-between; align-self: start; padding: 1rem; font: 500 .75rem "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.scroll-chapter-meta b { color: #ffc08a; font-weight: 400; }
.scroll-chapter-meta small { font-size: inherit; }
.scroll-chapter-card > strong { align-self: end; padding: 1rem 1rem .6rem; font-size: clamp(2rem, 3.6vw, 3.75rem); line-height: .82; letter-spacing: -.065em; text-transform: uppercase; }
.scroll-chapter-action { display: flex; justify-content: space-between; align-items: center; margin: 0 1rem 1rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.5); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.scroll-chapter-action i { color: #ffc08a; font-size: 1rem; font-style: normal; }
.scroll-chapter-card-f1 { left: var(--pad); }
.scroll-chapter-card-bmw { right: var(--pad); }
.fall-cloud {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  width: clamp(11rem, 24vw, 26rem);
  object-fit: contain;
  transform: translate3d(var(--cloud-x, 0), var(--cloud-y-local, 0), var(--cloud-z, 0)) scale(var(--cloud-scale, 1));
  filter: drop-shadow(0 1.5rem 2rem rgba(77, 35, 27, .15));
  opacity: var(--environment-opacity);
  will-change: transform;
}
.fall-cloud-one { top: 5%; left: -7%; }
.fall-cloud-two { top: 48%; right: -8%; width: clamp(14rem, 28vw, 29rem); opacity: calc(var(--environment-opacity) * .86); }
.fall-cloud-three { top: 76%; left: 16%; width: clamp(8rem, 17vw, 17rem); opacity: calc(var(--environment-opacity) * .72); }
.fall-bird {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: clamp(3.5rem, 7vw, 7rem);
  height: auto;
  object-fit: contain;
  opacity: var(--environment-opacity);
  filter: drop-shadow(0 .8rem 1rem rgba(55, 25, 19, .22));
  transform: translate3d(var(--bird-x, -20vw), var(--bird-y, 20vh), var(--bird-z, 0)) rotate(var(--bird-rotate, 0deg)) scale(var(--bird-scale, 1));
  will-change: transform;
}
.fall-bird-two { width: clamp(3rem, 6vw, 6rem); }
.fall-bird-three { width: clamp(2.8rem, 5vw, 5rem); }
.fall-debris {
  position: absolute;
  z-index: 2;
  top: 0;
  display: block;
  will-change: transform;
  opacity: calc(var(--object-opacity, 0) * var(--debris-opacity));
  filter:
    drop-shadow(0 .8rem .8rem rgba(65, 27, 21, .22))
    saturate(1.06)
    contrast(1.08);
  transform:
    translate3d(var(--object-x, 0), var(--object-y, -24vh), var(--object-z, 0))
    rotateX(var(--object-rotate-x, 0deg))
    rotateY(var(--object-rotate-y, 0deg))
    rotateZ(var(--object-rotate, 0deg))
    scale(var(--object-scale, 1));
  transform-style: preserve-3d;
}
.debris-macbook {
  right: 16%;
  width: clamp(4.8rem, 9vw, 8.5rem);
  aspect-ratio: 1.42;
  border: .35rem solid #c8c2b8;
  border-radius: .25rem;
  background: linear-gradient(145deg, #302c2b, #a9573f);
}
.debris-macbook::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -16%;
  width: 132%;
  height: 18%;
  background: #aaa49b;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.debris-headphones {
  left: 13%;
  width: clamp(4rem, 8vw, 7rem);
  aspect-ratio: 1;
  border: .55rem solid #211e1d;
  border-bottom-color: transparent;
  border-radius: 50% 50% 44% 44%;
}
.debris-headphones::before,
.debris-headphones::after { content: ""; position: absolute; top: 58%; width: 22%; height: 38%; background: #211e1d; border: 2px solid #a9573f; }
.debris-headphones::before { left: -14%; }
.debris-headphones::after { right: -14%; }
.debris-backpack {
  right: 5%;
  width: clamp(4rem, 8vw, 7rem);
  aspect-ratio: .78;
  border: 1px solid #57504d;
  border-radius: 42% 42% 20% 20%;
  background: #171616;
}
.debris-backpack::before { content: ""; position: absolute; inset: 52% 10% 9%; border: 1px solid #57504d; border-radius: 24%; }
.debris-backpack::after { content: ""; position: absolute; top: -12%; left: 31%; width: 38%; height: 18%; border: 2px solid #242120; border-bottom: 0; border-radius: 50% 50% 0 0; }
.debris-phone {
  left: 34%;
  width: clamp(2.2rem, 4vw, 3.4rem);
  aspect-ratio: .52;
  border: .18rem solid #171616;
  border-radius: .45rem;
  background: linear-gradient(165deg, #4b2721, #d17b59);
}
.debris-phone::after { content: ""; position: absolute; top: 4%; left: 50%; width: 25%; height: 2px; border-radius: 1rem; background: #171616; transform: translateX(-50%); }
.debris-lemon {
  width: clamp(2.2rem, 4vw, 3.8rem);
  aspect-ratio: 1.25;
  border-radius: 58% 42% 58% 42%;
  background: #e8b932;
  box-shadow: inset -.5rem -.25rem 0 rgba(133, 86, 20, .18);
}
.debris-lemon::after { content: ""; position: absolute; top: -15%; left: 48%; width: 20%; height: 24%; border-radius: 100% 0; background: #536b3f; transform: rotate(28deg); }
.debris-lemon-one { left: 6%; }
.debris-lemon-two { right: 34%; }
.fall-debris {
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  aspect-ratio: auto;
  object-fit: contain;
}
.scroll-character {
  position: fixed;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: clamp(16rem, 34vw, 32rem);
  aspect-ratio: 1;
  opacity: 1;
  transform: translate3d(calc(-50% + var(--journey-x)), calc(-50% + var(--character-y)), 0) rotate(var(--character-rotate)) scale(var(--character-scale));
  transform-origin: center;
  filter: drop-shadow(0 1.8rem 1.8rem rgba(38, 23, 22, .22));
  transition: filter .32s ease;
  will-change: transform;
}
.scroll-cinema.is-hero-entry .scroll-character {
  pointer-events: auto;
  cursor: crosshair;
  filter:
    blur(clamp(7px, .75vw, 13px))
    drop-shadow(0 1.2rem 1.5rem rgba(49, 24, 18, .18));
}
.scroll-cinema.is-hero-entry .scroll-character:hover {
  filter:
    blur(0)
    drop-shadow(0 1.2rem 1.5rem rgba(49, 24, 18, .26));
}
.scroll-character-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .16s cubic-bezier(.23, 1, .32, 1);
  backface-visibility: hidden;
  will-change: opacity, filter;
}
.scroll-character-frame.is-active { opacity: 1; transform: scale(1); }
.home-page .scroll-character-frame.is-active {
  filter:
    drop-shadow(1.5px 0 var(--aberration-clay))
    drop-shadow(-1.5px 0 var(--aberration-blue));
}
.scroll-footer-table {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: clamp(16rem, 34vw, 32rem);
  height: auto;
  pointer-events: none;
  opacity: var(--footer-table-opacity);
  transform:
    translate3d(-50%, calc(-50% + var(--footer-table-y)), 0)
    rotate(var(--footer-table-rotate))
    scale(1.1);
  transform-origin: center;
  filter: drop-shadow(0 1.8rem 1.8rem rgba(38, 23, 22, .22));
  will-change: transform, opacity;
}
.scroll-cinema.is-impact .scroll-character { animation: chair-impact .24s ease-out both; }
.journey-chair {
  position: absolute;
  z-index: 1;
  top: 54%;
  left: 50%;
  width: clamp(13rem, 27vw, 24rem);
  height: auto;
  opacity: var(--chair-opacity);
  transform: translate3d(-50%, calc(-50% + var(--chair-y)), 0) rotate(var(--chair-rotate));
  transform-origin: center bottom;
  filter: drop-shadow(0 1.5rem 1.5rem rgba(47, 23, 17, .25));
  will-change: transform;
}
.journey-workstation {
  position: absolute;
  z-index: 3;
  top: 56%;
  left: 50%;
  width: min(42vw, 34rem);
  aspect-ratio: 1.35;
  opacity: var(--workstation-opacity);
  transform: translate(calc(-50% + var(--workstation-x)), calc(-50% + var(--workstation-y))) scale(var(--workstation-scale));
  transform-origin: center;
  pointer-events: none;
}
.journey-desk {
  position: absolute;
  z-index: 1;
  inset: 14% 0 auto;
  width: 100%;
  transform: translateY(var(--desk-y)) perspective(70rem) rotateX(4deg) rotateZ(-1.4deg);
  filter: drop-shadow(0 1.5rem 1.5rem rgba(47, 23, 17, .22));
  will-change: transform;
}
.journey-macbook {
  position: absolute;
  z-index: 2;
  top: 17%;
  right: 13%;
  width: 24%;
  transform: translateY(var(--mac-y)) perspective(45rem) rotateX(-4deg) rotateY(-10deg) rotate(var(--mac-rotate));
  filter: drop-shadow(0 1rem 1rem rgba(47, 23, 17, .2));
  will-change: transform;
}
.scroll-cinema-index {
  position: absolute;
  z-index: 4;
  top: clamp(5rem, 9vh, 7rem);
  right: var(--pad);
  left: var(--pad);
  display: flex;
  justify-content: space-between;
  padding-bottom: .55rem;
  color: #fff0dc;
  font: 500 .75rem "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: var(--stage-opacity);
}
.scroll-cinema-prompt,
.scroll-cinema-release {
  position: absolute;
  z-index: 4;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: var(--pad);
  color: #fff0dc;
  font-size: .75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.scroll-cinema-prompt { opacity: var(--stage-opacity); }
.scroll-cinema-prompt span { display: inline-block; margin-left: .7rem; }
.scroll-cinema-release {
  right: var(--pad);
  left: auto;
  max-width: 12ch;
  color: #fff6e9;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 3.4rem);
  font-style: italic;
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: none;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.scroll-cinema.is-settled .scroll-cinema-release { opacity: var(--stage-opacity); transform: translateY(0); }
.scroll-cinema.is-settled .scroll-cinema-prompt { opacity: 0; }
@keyframes chair-impact {
  0% { transform: translate3d(calc(-50% + var(--journey-x)), calc(-50% + var(--character-y)), 0) rotate(var(--character-rotate)) scale(var(--character-scale)); }
  45% { transform: translate3d(calc(-50% + var(--journey-x)), calc(-47% + var(--character-y)), 0) rotate(var(--character-rotate)) scale(var(--character-scale)) scaleY(.94); }
  100% { transform: translate3d(calc(-50% + var(--journey-x)), calc(-50% + var(--character-y)), 0) rotate(var(--character-rotate)) scale(var(--character-scale)); }
}

.section-pad { max-width: var(--max); margin-inline: auto; padding: var(--section) var(--pad); }
.section-heading { display: grid; grid-template-columns: 1fr 3fr; gap: 1rem; align-items: start; margin-bottom: clamp(4rem, 9vw, 9rem); }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .075em; }
.section-heading h2, .about-content h2 { font-family: var(--serif); font-size: clamp(3.2rem, 8vw, 8.5rem); line-height: .88; font-weight: 400; letter-spacing: -.055em; }
.work-heading-compact { display: grid; grid-template-columns: 1fr 3fr; gap: 1rem; align-items: baseline; margin-bottom: clamp(2.25rem, 4vw, 4rem); padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.work-heading-compact h2 { font-size: clamp(1.15rem, 2vw, 2rem); line-height: 1; font-weight: 600; letter-spacing: -.035em; text-align: right; }

.work { border-top: 1px solid var(--line); }
.case-section, .chapter-section { border-top: 1px solid var(--line); }
.chapter-marker { margin-bottom: clamp(2rem, 5vw, 5rem); color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.project { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; padding: clamp(4rem, 8vw, 8rem) 0; border-top: 1px solid var(--line); }
.project-meta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2fr 1fr; padding-bottom: 1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.project-client { text-align: center; }
.project-year { text-align: right; }
.project-index { color: var(--signal); font-weight: 700; }
.project-copy h3 { font-size: clamp(2.6rem, 5.4vw, 6rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.project-discipline { margin-top: 1.5rem; font-weight: 700; }
.project-description { max-width: 25rem; margin-top: .35rem; color: var(--muted); }
.project-visual { position: relative; display: block; overflow: hidden; min-height: clamp(25rem, 56vw, 53rem); isolation: isolate; }
.project-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.project-visual::before, .project-visual::after { content: ""; position: absolute; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.project-visual::before { inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(17,17,15,.13) 25%); }
.project-visual::after { width: 40%; aspect-ratio: 1; border: 1px solid rgba(17,17,15,.45); border-radius: 50%; top: 18%; left: 30%; }
.project-visual:hover::before { transform: scale(1.06); }
.project-visual:hover::after { transform: scale(1.2) rotate(12deg); }
.visual-label { position: absolute; z-index: 2; inset: 50% auto auto 50%; transform: translate(-50%, -50%); font-size: clamp(3.8rem, 10vw, 10rem); font-weight: 700; line-height: .8; letter-spacing: -.08em; white-space: nowrap; }
.visual-caption { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; color: var(--signal); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.visual-arrow { position: absolute; z-index: 2; right: 1rem; top: 1rem; font-size: 1.5rem; transform: translate(-.25rem, .25rem); transition: transform .3s ease; }
.project-visual:hover .visual-arrow { transform: translate(0, 0); }
.project-visual.has-image::before, .project-visual.has-image::after { display: none; }
.project-visual.has-image { min-height: 0; aspect-ratio: 16 / 9; background: #d7d5cd; }
.project-visual.has-image img { object-fit: contain; }
.project-visual.has-image:hover img { transform: scale(1.025); }
.project-visual.has-image .visual-label { inset: 1rem auto auto 1rem; transform: none; padding: .35rem .5rem; background: var(--paper); font-size: .75rem; line-height: 1; letter-spacing: .06em; }
.project-visual.has-image .visual-caption { padding: .35rem .5rem; background: var(--paper); }
.project-visual.has-image .visual-arrow { padding: .1rem .35rem; background: var(--paper); }
.visual-f1 { grid-column: 1 / -1; background: #c8c5ba; }
.visual-bmw { grid-column: 1 / 8; min-height: clamp(28rem, 55vw, 50rem); background: #a7aaa7; }
.project-split .project-copy { grid-column: 9 / -1; align-self: end; padding-bottom: 2rem; }
.project-wide .project-copy { grid-column: 2 / 8; margin-bottom: 2rem; }
.home-page .project-wide .project-copy {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  column-gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}
.home-page .project-wide .project-copy h3 { grid-column: 1; }
.home-page .project-wide .project-summary { grid-column: 2; display: grid; gap: .4rem; align-self: end; padding-bottom: .2rem; }
.home-page .project-wide .project-discipline,
.home-page .project-wide .project-description { margin-top: 0; }
.project-offset .project-copy { grid-column: 1 / 6; align-self: end; padding-bottom: 2rem; }
.visual-goodwood { grid-column: 6 / -1; background: #d2cec1; min-height: clamp(28rem, 54vw, 51rem); }
.visual-goodwood::after { border-radius: 0; transform: rotate(45deg); }
.visual-bmw::after { width: 55%; left: 23%; top: 22%; }
.project-story { grid-column: 3 / 12; display: grid; grid-template-columns: repeat(9, 1fr); gap: clamp(2rem, 5vw, 5rem) 1rem; margin-top: clamp(3rem, 7vw, 7rem); padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.story-intro { grid-column: 1 / 7; font-size: clamp(1.45rem, 2.8vw, 2.8rem); line-height: 1.1; letter-spacing: -.04em; }
.story-facts, .story-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.home-page .story-facts { grid-template-columns: repeat(3, 1fr); }
.story-facts div, .story-stats div { min-width: 0; padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.story-facts dt, .story-stats dd, .story-label { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.story-facts dd { margin: .75rem 0 0; max-width: 14rem; }
.story-stats dt { color: var(--signal); font-size: clamp(2.5rem, 5vw, 5.25rem); line-height: .85; letter-spacing: -.06em; }
.story-stats dd { margin: .75rem 0 0; max-width: 9rem; }
.story-detail { grid-column: 4 / -1; display: grid; grid-template-columns: 1fr 3fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.story-detail p:last-child { max-width: 38rem; color: var(--muted); }
.project-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: start; margin-top: clamp(3rem, 6vw, 6rem); }
.project-gallery figure { margin: 0; min-width: 0; }
.project-gallery img { display: block; width: 100%; height: auto; object-fit: contain; background: #d7d5cd; }
.project-gallery figure:nth-child(2) { align-self: center; }
.project-gallery figcaption { padding-top: .6rem; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.project-media { grid-column: 3 / 11; display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 6fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(3rem, 6vw, 6rem); padding-top: 1rem; border-top: 1px solid var(--ink); }
.project-media .video-item { grid-column: 2; }
.project-media-grid { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem) 1rem; }
.project-media-grid .story-label { grid-column: 1 / -1; }
.project-media-grid .video-item { grid-column: span 1; }
.project-media-grid .video-landscape { grid-column: span 2; }
.project-media-grid.pga-media { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.goodwood-media .video-portrait { width: min(100%, 19rem); justify-self: center; }
.content-board { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.65rem, 1.5vw, 1.35rem); align-items: start; margin-top: clamp(3rem, 6vw, 6rem); padding-top: 1rem; border-top: 1px solid var(--ink); }
.content-board-label { grid-column: 1 / -1; margin-bottom: clamp(1rem, 2vw, 2rem); color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.content-board figure { min-width: 0; margin: 0; }
.content-board img { display: block; width: 100%; height: auto; background: #d7d5cd; transition: opacity .3s ease; }
.content-board figure:hover img { opacity: .86; }
.content-board .media-wide { grid-column: span 6; }
.content-board .media-portrait, .content-board .media-square { grid-column: span 3; }
.stream-content-board { grid-column: 5 / -1; }

.supporting-work { border-top: 1px solid var(--line); }
.work-streams { border-top: 1px solid var(--ink); }
.work-stream { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; padding: clamp(4rem, 8vw, 8rem) 0; border-bottom: 1px solid var(--line); }
.stream-head { grid-column: 1 / 5; display: grid; align-content: start; gap: 1.25rem; }
.stream-head h3, .stream-head h1 { font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: .9; letter-spacing: -.06em; text-transform: uppercase; }
.stream-head > p:last-child { max-width: 23rem; color: var(--muted); }
.stream-image { grid-column: 5 / -1; display: block; width: 100%; height: auto; object-fit: contain; background: #d7d5cd; }
.series-stack { grid-column: 5 / -1; margin-top: clamp(4rem, 7vw, 7rem); }
.portfolio-series { padding: clamp(3rem, 6vw, 6rem) 0; border-top: 1px solid var(--ink); }
.series-copy { display: grid; grid-template-columns: 3rem minmax(12rem, 1fr) minmax(16rem, 1.35fr); gap: 1rem; align-items: start; margin-bottom: clamp(2rem, 4vw, 4rem); }
.series-copy > p:first-child { color: var(--signal); font-size: .72rem; font-weight: 700; }
.series-copy h4 { font-size: clamp(1.6rem, 3vw, 3.2rem); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.series-copy > p:last-child { color: var(--muted); max-width: 34rem; }
.series-media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.7rem, 1.5vw, 1.35rem); align-items: start; }
.series-media > * { grid-column: span 4; min-width: 0; }
.series-media figure { margin: 0; }
.series-media img { display: block; width: 100%; height: auto; background: #d7d5cd; }
.series-media .wide { grid-column: span 8; }
.series-media .span-full { grid-column: 1 / -1; }
.series-media.three-up > * { grid-column: span 4; }
.series-media.pga-talent-grid > * { grid-column: span 3; }
.pga-talent-grid img { aspect-ratio: 4 / 7; object-fit: cover; }
.series-media.pga-talent-grid > .pga-henni-film { grid-column: 4 / 10; }
.series-media.four-up > * { grid-column: span 6; }
.series-media.single-portrait > * { grid-column: 5 / 9; }
.series-media .video-portrait { width: 100%; max-width: none; justify-self: stretch; }
.series-media.pga-five > * { grid-column: span 4; }
.series-media.pga-five > *:nth-child(n+4) { grid-column: span 4; }
.series-media.pga-max-stories > * { grid-column: span 3; }
.series-media.goodwood-six > * { grid-column: span 4; }
.case-content #bmw-pga.standalone-case.section-pad { padding-top: clamp(3.5rem, 6vw, 6rem); }
#bmw-pga .pga-edition-line { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin-bottom: clamp(1.5rem, 3vw, 3rem); padding-bottom: .75rem; border-bottom: 1px solid var(--ink); color: var(--ink); font: 500 .64rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
#bmw-pga .pga-edition-line::after { display: none; }
.pga-case { padding-top: 0; }
.pga-case-head { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 3rem minmax(0, 2fr) minmax(18rem, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(2rem, 4vw, 4rem); border-bottom: 1px solid var(--ink); }
.pga-case-head h3, .pga-case-head h1 { max-width: 10ch; font-size: clamp(3.8rem, 7.8vw, 8rem); line-height: .8; }
.pga-case-head > p:last-child { max-width: 31rem; padding-bottom: .35rem; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 2.1rem); line-height: 1.08; letter-spacing: -.025em; }
.pga-project-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(2rem, 4vw, 4rem); border-bottom: 1px solid var(--line); }
.pga-project-meta div { min-width: 0; padding: 0 1rem 1rem 0; }
.pga-project-meta dt { color: var(--signal); font: 500 .62rem "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.pga-project-meta dd { margin: .55rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.pga-case > .stream-image { grid-column: 1 / -1; width: calc(100% + 2 * var(--pad)); max-width: none; margin: 0 calc(-1 * var(--pad)); aspect-ratio: 16 / 7; object-fit: cover; }
.pga-case > .pga-hero-video { height: auto; background: #050806; }
.pga-impact-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pga-impact-rail div { min-width: 0; padding: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--line); }
.pga-impact-rail div:first-child { padding-left: 0; border-left: 0; }
.pga-impact-rail dt { color: var(--signal); font-size: clamp(1.45rem, 2.6vw, 2.8rem); line-height: .95; letter-spacing: -.045em; }
.pga-impact-rail dd { margin: .65rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.35; letter-spacing: .09em; text-transform: uppercase; }
.pga-narrative { grid-column: 3 / 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(5rem, 9vw, 9rem); }
.pga-narrative section { padding-top: 1rem; border-top: 1px solid var(--ink); }
.pga-narrative h4 { margin-top: clamp(1.2rem, 2vw, 2rem); font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3.3rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.pga-narrative section > p:last-child { margin-top: 1.25rem; color: var(--muted); line-height: 1.55; }
.pga-opening-story {
  grid-column: 2 / -1;
  display: grid;
  margin-top: clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid var(--ink);
}
.pga-opening-story section {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(15rem, 2fr) minmax(18rem, 2.2fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.75rem) 0;
  border-top: 0;
}
.pga-opening-story .story-label {
  padding-top: .35rem;
  color: var(--signal);
  font-family: "DM Mono", monospace;
}
.pga-opening-story h4 {
  max-width: 13ch;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.pga-opening-story section > p:last-child {
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(.98rem, 1.2vw, 1.12rem);
  line-height: 1.6;
}
.pga-establishing .span-full img { aspect-ratio: 16 / 5; object-fit: cover; }
.pga-establishing > figure:not(.span-full) img {
  width: 100%;
  height: clamp(19rem, 36vw, 38rem);
  object-fit: cover;
}
.pga-establishing .wide img { object-position: center; }
.pga-establishing .pga-establishing-portrait img { object-position: center bottom; }
.pga-world-films { margin-top: clamp(.65rem, 1.2vw, 1rem); gap: clamp(.65rem, 1.2vw, 1rem); }
.series-media.pga-world-films > * { grid-column: span 4; }
.pga-world-still img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: center bottom; }
.pga-results { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: clamp(3rem, 7vw, 7rem); padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--ink); }
.pga-results-copy h4 { max-width: 12ch; margin-top: 1.25rem; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 5.5rem); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.pga-results-copy > p:last-child { max-width: 36rem; margin-top: 1.5rem; color: var(--muted); line-height: 1.55; }
.pga-results dl { display: grid; align-content: start; }
.pga-results dl div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.pga-results dt { color: var(--signal); font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .85; letter-spacing: -.065em; }
.pga-results dd { color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.stream-media { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); align-items: start; margin-top: clamp(3rem, 5vw, 5rem); padding-top: 1rem; border-top: 1px solid var(--ink); }
.media-group-label { grid-column: 1 / -1; margin-bottom: clamp(1rem, 2vw, 2rem); color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.media-series-label { grid-column: 1 / -1; margin-top: clamp(1rem, 3vw, 3rem); padding-top: .65rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.stream-media.single-media { grid-template-columns: repeat(3, 1fr); }
.stream-media.single-media .video-item { grid-column: 2; }
.stream-media.partnership-media { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stream-media.partnership-media .video-landscape { grid-column: 1 / -1; width: min(100%, 58rem); justify-self: center; }
.stream-media.partnership-media .video-portrait { grid-column: span 2; }
.stream-media.campaign-media { grid-template-columns: repeat(4, 1fr); align-items: start; }
.stream-media.campaign-media .video-landscape { grid-column: 1 / -1; width: min(100%, 58rem); justify-self: center; }
.stream-media.campaign-media .video-portrait { grid-column: span 1; }
.stream-media.organic-media { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stream-media.organic-media .video-portrait { grid-column: span 1; }
.stream-media.organic-media .video-landscape { grid-column: 1 / -1; width: min(100%, 58rem); justify-self: center; }
.video-grid { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(2rem, 5vw, 5rem) 1rem; }
.video-item { min-width: 0; }
.video-landscape { grid-column: span 3; }
.video-portrait { grid-column: span 2; }
.stream-media .video-portrait { width: min(100%, 20rem); justify-self: center; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.video-portrait .video-frame { aspect-ratio: 9 / 16; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050806; }
.video-poster { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; overflow: hidden; cursor: pointer; background: var(--ink); color: #fff; font: inherit; text-align: left; }
.video-poster::before { content: ""; position: absolute; inset: 0; background: var(--poster) center / cover no-repeat; opacity: .82; transform: scale(1.01); transition: opacity .35s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.video-poster::after { content: ""; position: absolute; inset: 0; background: rgba(17,17,15,.14); }
.video-poster:hover::before { opacity: .68; transform: scale(1.035); }
.custom-play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 0; height: 0; color: #2252d6; border-top: .55rem solid transparent; border-bottom: .55rem solid transparent; border-left: .9rem solid currentColor; transform: translate(-42%, -50%); transition: transform .3s ease, color .3s ease; }
.custom-play::before { content: none; }
.video-poster:hover .custom-play { color: #173ca5; transform: translate(-42%, -50%) scale(1.12); }
.video-poster:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.poster-label { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.video-item > a { display: flex; justify-content: space-between; padding-top: .65rem; border-top: 1px solid var(--line); margin-top: .65rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.video-item > a span { color: var(--signal); font-size: 1rem; }

.about { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; border-top: 1px solid var(--line); }
.about-label { grid-column: 1 / 4; display: flex; flex-direction: column; justify-content: space-between; min-height: 12rem; color: var(--muted); }
.about-label .eyebrow { color: var(--ink); }
.about-content { grid-column: 4 / -1; }
.about-copy { margin: clamp(3rem, 7vw, 7rem) 0 0 25%; max-width: 45rem; display: grid; gap: 1.25rem; font-size: clamp(1.2rem, 2vw, 1.9rem); line-height: 1.3; letter-spacing: -.025em; }
.about-copy p:last-child { color: var(--muted); }
.experience-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--ink); }
.experience-stats div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
.experience-stats dt { color: var(--signal); font-size: clamp(2.5rem, 5vw, 5rem); line-height: .9; letter-spacing: -.06em; }
.experience-stats dd { margin: .75rem 0 0; max-width: 12rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.experience-snapshot { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.snapshot-heading { display: grid; grid-template-columns: 1fr 2fr 1.2fr; gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.snapshot-heading h2 { font: 400 clamp(3.8rem, 8vw, 8rem)/.8 var(--serif); letter-spacing: -.065em; }
.snapshot-heading > p:last-child { max-width: 28rem; color: var(--muted); }
.experience-stats.experience-stats-four { grid-template-columns: repeat(4, 1fr); }
.project-cta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: clamp(1.5rem, 3vw, 3rem); padding: 1.1rem 1.25rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: clamp(.9rem, 1.3vw, 1.1rem); text-transform: uppercase; letter-spacing: .07em; transition: background .3s ease, color .3s ease; }
.project-cta strong { font-weight: 600; }
.project-cta span { color: var(--signal-light); font-size: 1.35em; transition: transform .3s ease; }
.project-cta:hover { background: var(--signal); color: #fff; }
.project-cta:hover span { transform: translate(.25rem, -.25rem); }

.capabilities { border-top: 1px solid var(--line); }
.capability-list { margin-left: 25%; border-top: 1px solid var(--ink); }
.capability-list li { display: flex; justify-content: space-between; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--line); transition: color .3s ease; }
.capability-list li span:first-child { display: inline-block; font-size: clamp(1.8rem, 4.5vw, 4.75rem); letter-spacing: -.055em; transition: transform .3s ease; }
.capability-list li span:last-child { font-size: .7rem; }
.capability-list li:hover { color: var(--signal); }
.capability-list li:hover span:first-child { transform: translateX(1rem); }

.site-footer { position: relative; z-index: 7; overflow: hidden; background: var(--ink); color: var(--paper); min-height: 90svh; padding: var(--section) var(--pad) 2rem; display: flex; flex-direction: column; justify-content: space-between; }
.footer-main, .footer-bottom { width: 100%; max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; }
.footer-main { position: relative; min-height: 92svh; }
.footer-main .eyebrow { color: var(--signal-light); }
.footer-availability { position: relative; z-index: 5; margin-top: clamp(2rem, 5vw, 5rem); max-width: 76%; font-size: clamp(3.5rem, 7.5vw, 8.5rem); line-height: .84; letter-spacing: -.065em; text-transform: uppercase; }
.footer-landing {
  position: absolute;
  z-index: 4;
  right: -2%;
  bottom: -3%;
  width: min(58vw, 53rem);
  aspect-ratio: 1.18;
  pointer-events: none;
}
.footer-landing img {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 1.2rem 1.4rem rgba(0, 0, 0, .28));
  will-change: transform;
}
.footer-landing-character {
  z-index: 1;
  left: 42%;
  bottom: 8%;
  width: 58%;
  transform-origin: center bottom;
}
.footer-landing-impact {
  opacity: 0;
  transform: translateY(-95vh) rotate(-7deg);
}
.footer-landing-settle {
  opacity: 0;
  transform: translateY(1.5rem) scale(.96);
}
.footer-landing-table {
  z-index: 3;
  left: 0;
  bottom: -17%;
  width: 72%;
  opacity: 0;
  transform: translateY(-125vh) rotate(-4deg);
}
.footer-landing-laptop {
  z-index: 4;
  left: 28%;
  bottom: 34%;
  width: 14%;
  opacity: 0;
  transform: translateY(-135vh) rotate(-16deg);
}
.footer-landing-lemon {
  z-index: 5;
  left: 57%;
  bottom: 35%;
  width: 4.5%;
  opacity: 0;
  transform: translateY(-145vh) rotate(-55deg);
}
.footer-main.is-visible .footer-landing-impact {
  animation: footer-character-impact 1.05s cubic-bezier(.16, 1, .3, 1) both;
}
.footer-main.is-visible .footer-landing-settle {
  animation: footer-character-settle .42s .78s cubic-bezier(.16, 1, .3, 1) both;
}
.footer-main.is-visible .footer-landing-table {
  animation: footer-prop-drop .72s 1.12s cubic-bezier(.18, .82, .24, 1) both;
}
.footer-main.is-visible .footer-landing-laptop {
  animation: footer-laptop-drop .62s 1.82s cubic-bezier(.18, .82, .24, 1) both;
}
.footer-main.is-visible .footer-landing-lemon {
  animation: footer-lemon-drop .74s 2.42s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes footer-character-impact {
  0% { opacity: 1; transform: translateY(-95vh) rotate(-7deg); }
  72% { opacity: 1; transform: translateY(1.5rem) rotate(1deg) scaleY(.92); }
  88% { opacity: 1; transform: translateY(-.5rem) rotate(-.5deg) scaleY(1.02); }
  99% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0) rotate(0); }
}
@keyframes footer-character-settle {
  0% { opacity: 0; transform: translateY(1.5rem) scale(.96); }
  1% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes footer-prop-drop {
  0% { opacity: 1; transform: translateY(-125vh) rotate(-4deg); }
  78% { opacity: 1; transform: translateY(1.2rem) rotate(.5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes footer-laptop-drop {
  0% { opacity: 1; transform: translateY(-135vh) rotate(-16deg); }
  78% { opacity: 1; transform: translateY(.8rem) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes footer-lemon-drop {
  0% { opacity: 1; transform: translateY(-145vh) rotate(-55deg); }
  68% { opacity: 1; transform: translateY(.7rem) rotate(12deg); }
  82% { opacity: 1; transform: translateY(-1.15rem) rotate(-8deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

/* The ending is a true scroll-scrubbed image sequence. Each frame already
   contains Shaun, the chair and arriving props on one locked canvas, so no
   independent layer can clip or drift out of perspective. */
.home-page .site-footer {
  --footer-copy-opacity: 1;
  display: block;
  z-index: auto;
  overflow: clip;
  min-height: 118svh;
  padding-top: 0;
  background:
    linear-gradient(
      180deg,
      rgba(36, 24, 20, 0) 0,
      rgba(36, 24, 20, .5) 38svh,
      var(--ink) 88svh
    ),
    linear-gradient(145deg, #231413 0, #44221e 88svh, var(--ink) 120svh);
}
.home-page .footer-main {
  position: sticky;
  top: 0;
  z-index: 7;
  height: 100svh;
  min-height: 100svh;
  padding-top: 0;
}
.footer-contact-label {
  position: absolute;
  z-index: 3;
  top: clamp(2.75rem, 5vh, 4rem);
  left: 0;
}
.footer-copy-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 42vw) minmax(0, 1fr);
  align-items: start;
  min-height: 100svh;
  padding-top: clamp(10rem, 22vh, 15rem);
  gap: clamp(1rem, 2vw, 2.5rem);
  opacity: 1;
  transform: translate3d(0, var(--footer-copy-y, 0), 0);
  will-change: transform;
}
.footer-character-landing { min-height: 1px; }
.footer-copy-grid .footer-availability {
  z-index: auto;
  max-width: none;
  margin: 0;
  font-size: clamp(2.5rem, 3.65vw, 4.6rem);
  line-height: .86;
}
.footer-availability--left {
  padding-top: clamp(5rem, 12vh, 9rem);
  text-align: right;
}
.footer-availability--right {
  padding-top: clamp(1rem, 4vh, 3rem);
  text-align: left;
}
.footer-availability--right span {
  display: block;
  color: var(--signal-light);
  font-family: var(--serif);
  font-size: .72em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.055em;
  text-transform: none;
}
.scroll-cinema.is-footer-landing .scroll-character {
  filter: drop-shadow(0 2rem 2.2rem rgba(0, 0, 0, .3));
}
.scroll-cinema.is-footer-landing .scroll-cinema-index,
.scroll-cinema.is-footer-landing .scroll-cinema-prompt,
.scroll-cinema.is-footer-landing .scroll-cinema-release {
  opacity: 0;
}
.home-page .footer-bottom {
  position: absolute;
  z-index: 5;
  right: var(--pad);
  bottom: 2rem;
  left: var(--pad);
  width: auto;
}
.contact-end-anchor {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.footer-workstation {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -8%;
  width: min(48vw, 42rem);
  aspect-ratio: 1.15;
  opacity: 1;
  transform: translate3d(-50%, 110%, 0);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.footer-main.is-visible .footer-workstation { opacity: 1; transform: translate3d(-50%, 0, 0) rotate(0); }
.footer-workstation img {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 4%;
  width: 68%;
  transform: translateX(-50%);
  filter: drop-shadow(0 1.5rem 1.5rem rgba(0,0,0,.3));
}
.footer-desk {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 13%;
  width: 58%;
  height: 3.5%;
  background: #bd6849;
  box-shadow: 0 .55rem 0 #713326;
  transform: translateX(-50%) skewX(-12deg);
}
.footer-mac {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 18%;
  width: 39%;
  aspect-ratio: 1.25;
  border: .4rem solid #d7d0c3;
  border-radius: .4rem;
  background: linear-gradient(145deg, #48241f, #bd6849);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.25);
  transform: translateX(-50%);
}
.footer-mac::after { content: ""; position: absolute; top: 100%; left: 45%; width: 10%; height: 24%; background: #b6afa4; }
.footer-mac span { position: absolute; top: 48%; left: 50%; width: 1rem; height: 1.2rem; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; transform: translate(-50%, -50%); }
.footer-bottom { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1rem; align-items: end; padding-top: 4rem; border-top: 1px solid #3b3a36; }
.footer-links { display: flex; gap: clamp(1rem, 3vw, 3rem); }
.footer-links a span { color: var(--signal-light); }
.footer-credit { text-align: right; color: #8a8982; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(.5rem); transition: opacity .32s ease, transform .32s cubic-bezier(.23,1,.32,1); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.parallax-node {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  will-change: transform;
}
.project-index-list strong {
  transform: translate3d(0, var(--row-depth, 0), 0);
}
.project-index-list span,
.project-index-list small {
  transform: translate3d(0, var(--row-counter-depth, 0), 0);
}
.project-index-list strong,
.project-index-list span,
.project-index-list small {
  transition: color .25s ease;
}
.js .project-index-list li.reveal {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition:
    opacity .24s ease,
    clip-path .4s cubic-bezier(.23,1,.32,1);
}
.js .project-index-list li.reveal.is-visible {
  opacity: 1;
  clip-path: inset(0);
  transform: none;
}
.js .project-index-list li:nth-child(2).reveal { transition-delay: .03s; }
.js .project-index-list li:nth-child(3).reveal { transition-delay: .06s; }
.js .project-index-list li:nth-child(4).reveal { transition-delay: .09s; }
.js .project-index-list li:nth-child(5).reveal { transition-delay: .12s; }

/* Editorial portfolio flow: keep every asset, but give each PDF project a clear visual hierarchy. */
.chapter-section { background: #f5f4ef; }
.chapter-section:nth-of-type(even) { background: var(--paper); }
.chapter-marker { display: flex; align-items: center; gap: 1rem; }
.chapter-marker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.work-stream { padding-top: clamp(3rem, 6vw, 6rem); }
.stream-head { position: sticky; top: 5rem; z-index: 1; height: max-content; padding-right: clamp(1rem, 3vw, 3rem); }
.stream-head.pga-case-head { position: static; top: auto; z-index: auto; }
.stream-image { margin-bottom: clamp(3rem, 6vw, 6rem); }
.series-stack { grid-column: 1 / -1; margin-top: 0; }
.portfolio-series { display: block; padding: clamp(4rem, 8vw, 8rem) 0; }
.series-copy { display: grid; grid-template-columns: 3rem minmax(12rem, 1fr) minmax(16rem, 1.35fr); gap: 1rem; align-items: start; margin: 0 0 clamp(2.5rem, 5vw, 5rem); padding: 0; }
.series-copy > p:first-child { margin: 0; }
.series-copy h4 { margin: 0; text-wrap: balance; }
.series-copy > p:last-child { line-height: 1.55; }
.series-media { width: 100%; }
.portfolio-series[aria-labelledby="ix2-title"] .series-media > *,
.portfolio-series[aria-labelledby="mpp-title"] .series-media > * { grid-column: span 6; }
.portfolio-series.supplementary-series { padding-top: 3rem; border-top-color: var(--line); }
.portfolio-series.supplementary-series .series-copy h4 { font-size: clamp(1.25rem, 2vw, 2rem); }
.portfolio-series.supplementary-series .series-media { opacity: .92; }
.content-board { gap: clamp(.75rem, 1.4vw, 1.25rem); }
.content-board-label { display: flex; align-items: center; gap: 1rem; }
.content-board-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.video-poster::before { opacity: 1; }
.video-poster::after { background: rgba(17,17,15,.06); }
.video-poster:hover::before { opacity: .82; }
.poster-label { display: none; }
.video-item > a { color: var(--muted); }
.video-item > a:hover { color: var(--ink); }
.custom-play { filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); }

/* Curated homepage and dedicated case-study routes. */
.home-page .case-section, .home-page .chapter-section { display: none; }
.home-page .work-index {
  position: relative;
  z-index: 6;
  border-top: 1px solid var(--ink);
  background: transparent;
}
.work-index-head {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 2.1fr) minmax(16rem, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(3rem, 7vw, 7rem);
}
.work-index-head > p:first-child,
.project-group-head > div > p {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.work-index-head h2 {
  max-width: 9ch;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 7rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.04em;
}
.work-index-head > p:last-child,
.work-index-summary {
  max-width: 30rem;
  color: var(--muted);
  line-height: 1.5;
}
.work-index-summary {
  display: grid;
  gap: 1rem;
}
.work-index-summary > div + div {
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}
.work-index-summary span {
  display: block;
  margin-bottom: .35rem;
  color: var(--ink);
  font-family: "DM Mono", monospace;
  font-weight: 500;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.work-index-summary p {
  margin: 0;
  font-family: "DM Mono", monospace;
  font-weight: 300;
  text-transform: uppercase;
}
.project-group {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-inline: calc(var(--pad) * -1);
  padding: clamp(3.5rem, 7vw, 7rem) var(--pad);
  border-top: 1px solid var(--ink);
}
.home-page .project-group {
  /* Cards travel beyond their chapter before settling into the grid. */
  overflow: visible;
}
.project-group::before {
  content: none;
}
.project-group::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(86vw, 76rem);
  height: min(86vw, 76rem);
  border: 1px solid rgba(73, 31, 24, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--chapter-orbit, .78));
  pointer-events: none;
}
.project-group--f1 {
  background: transparent;
}
.project-group--bmw {
  background: transparent;
}
.home-page .work-index-head > p:last-child,
.home-page .work-index-summary,
.home-page .project-group-head > p { color: rgba(36, 24, 20, .88); }
.project-group-head {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(16rem, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.project-group-head > div {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: end;
}
.project-group-head h3 {
  font-size: clamp(3.8rem, 9vw, 9rem);
  font-weight: 600;
  line-height: .78;
  letter-spacing: -.04em;
}
.project-group-head > p {
  color: var(--muted);
  line-height: 1.45;
}
.project-group-head > p span { color: var(--ink); }
.project-index-list {
  position: relative;
  z-index: 7;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.project-index-list li { border-top: 1px solid var(--line); }
.project-index-list a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5.5rem, .75fr) minmax(14rem, 2fr) minmax(14rem, 1.2fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: clamp(6rem, 9vw, 8.75rem);
  padding-block: 1.25rem;
}
.project-index-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #eadfd4;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .2s cubic-bezier(.23,1,.32,1);
}
.project-index-list a:focus-visible::before { transform: scaleY(1); }
.project-index-list a:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.project-index-list span {
  color: var(--signal);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.project-index-list strong {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.03em;
}
.project-index-list small {
  max-width: 24rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.project-index-list i {
  font-size: 1.35rem;
  font-style: normal;
  transition: transform .18s ease;
}
.project-index-list a:focus-visible i { transform: translate(.3rem, -.3rem); }
@media (hover: hover) and (pointer: fine) {
  .project-index-list a:hover::before { transform: scaleY(1); }
  .project-index-list a:hover i { transform: translate(.3rem, -.3rem); }
}
.project-group--f1 .project-index-list strong { font-family: var(--sans); font-weight: 650; }
.project-group--f1 .project-index-list a::before { background: #e5ded5; }

/* Project trading cards: long-format work previews within the existing constellation. */
.home-page .project-index-list {
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(10rem, 14rem) minmax(15rem, 18rem);
  grid-auto-rows: auto;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vw, 5rem);
  width: min(100%, 76rem);
  min-height: 0;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 3rem);
  border: 0;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(176, 69, 42, .18) 14%,
      rgba(176, 69, 42, .18) 86%,
      transparent
    ) center / 1px 100% no-repeat;
}
.home-page .project-index-list li {
  position: relative;
  align-self: center;
  width: min(100%, 18rem);
  border: 0;
  transform-origin: center top;
  transform-style: preserve-3d;
  will-change: transform;
  perspective: 1100px;
}
.js .home-page .project-index-list li.reveal,
.js .home-page .project-index-list li.reveal.is-visible {
  opacity: 1;
  clip-path: none;
  transition: none;
}
.home-page .project-index-list a.vox-project-card {
  --vox-tilt-x: 0deg;
  --vox-tilt-y: 0deg;
  --vox-foil-x: 50%;
  --vox-foil-y: 42%;
  --vox-accent: #a74627;
  --vox-foil-a: rgba(245, 178, 113, .38);
  --vox-foil-b: rgba(114, 157, 167, .24);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto minmax(12rem, 1fr) auto auto;
  gap: .52rem .68rem;
  width: 100%;
  min-height: 0;
  /* A long-format project card suspended inside a separate clear sleeve. */
  aspect-ratio: 9 / 16;
  padding: clamp(.78rem, 1.15vw, 1rem);
  border: 1px solid rgba(242, 235, 225, .72);
  border-radius: .72rem;
  overflow: visible;
  isolation: isolate;
  cursor: pointer;
  color: #291c17;
  background: rgba(235, 228, 217, .08);
  box-shadow:
    0 .12rem .3rem rgba(255, 255, 255, .36) inset,
    0 1.4rem 2.65rem rgba(30, 20, 16, .18),
    0 .24rem .48rem rgba(52, 35, 28, .13);
  transform: translate3d(0, 0, 0) rotateX(var(--vox-tilt-x)) rotateY(var(--vox-tilt-y));
  transform-style: preserve-3d;
  transition:
    transform .3s cubic-bezier(.16, 1, .3, 1),
    box-shadow .3s cubic-bezier(.16, 1, .3, 1),
    border-color .2s ease;
}
.home-page .project-index-list a.vox-project-card::before,
.home-page .project-index-list a.vox-project-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.home-page .project-index-list a.vox-project-card::before {
  z-index: 0;
  inset: .56rem;
  border: 1px solid rgba(57, 40, 32, .5);
  border-radius: .26rem;
  opacity: 1;
  background:
    linear-gradient(142deg, rgba(255, 255, 255, .56), transparent 19%, transparent 76%, rgba(122, 81, 56, .1)),
    #eee4d7;
  box-shadow: 0 .12rem .25rem rgba(255, 255, 255, .72) inset;
}
.home-page .project-index-list a.vox-project-card::after {
  z-index: 6;
  inset: -.28rem;
  border: 1px solid rgba(255, 249, 240, .76);
  border-radius: .96rem;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .2), transparent 22%, transparent 71%, rgba(255, 236, 214, .12));
  box-shadow:
    inset 0 0 0 1px rgba(85, 60, 46, .2),
    0 .48rem 1rem rgba(24, 15, 12, .12);
}
.home-page .project-index-list a.vox-project-card:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
  border-color: rgba(255, 250, 243, .98);
  box-shadow:
    0 .18rem .5rem rgba(255, 250, 241, .52) inset,
    0 1.8rem 3rem rgba(52, 35, 28, .2),
    0 0 0 4px rgba(167, 70, 39, .16);
}
.home-page .project-index-list a.vox-project-card:active {
  transform: translate3d(0, .12rem, 0) scale(.985) rotateX(var(--vox-tilt-x)) rotateY(var(--vox-tilt-y));
}
.home-page .project-index-list a.vox-project-card > span:not(.vox-grade-label, .project-name-mark) {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  align-self: center;
  color: transparent;
  font-family: "DM Mono", monospace;
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.home-page .project-index-list a.vox-project-card > i {
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  display: grid;
  width: 2rem;
  min-height: 2rem;
  place-items: center;
  justify-self: end;
  border: 1px solid rgba(255, 243, 226, .42);
  border-radius: 50%;
  color: var(--vox-accent);
  font-size: 1rem;
  line-height: 1;
}
.home-page .project-index-list .vox-grade-label {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 2.55rem;
  padding: .42rem .5rem .35rem;
  border: 1px solid rgba(52, 36, 29, .42);
  border-radius: .25rem;
  color: #251c18;
  background:
    linear-gradient(140deg, rgba(255, 253, 244, .94), rgba(219, 207, 192, .78)),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(93, 72, 57, .045) 5px 6px);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 245, .72);
  font-family: "DM Mono", monospace;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.05;
  text-transform: uppercase;
}
.home-page .project-index-list .vox-grade-label b { font: inherit; }
.home-page .project-index-list .vox-grade-label em {
  color: var(--vox-accent);
  font-size: 1.1rem;
  letter-spacing: -.02em;
  font-style: normal;
  text-align: right;
}
.project-name-mark {
  position: absolute;
  z-index: 4;
  right: 1.15rem;
  bottom: 1.1rem;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgba(57, 40, 32, .58);
  border-radius: 50%;
  color: #2b1d17;
  background: rgba(242, 234, 221, .76);
  box-shadow: inset 0 0 0 .18rem rgba(242, 234, 221, .75), inset 0 0 0 .23rem rgba(57, 40, 32, .24);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
}
.project-name-mark::before,
.project-name-mark::after {
  position: absolute;
  left: 50%;
  color: #7a5039;
  font-family: "DM Mono", monospace;
  font-size: .28rem;
  font-weight: 500;
  letter-spacing: .05em;
  transform: translateX(-50%);
  white-space: nowrap;
  content: "SHAUN · MICHEL";
}
.project-name-mark::before { top: .23rem; }
.project-name-mark::after { bottom: .23rem; transform: translateX(-50%) rotate(180deg); }
.project-name-mark b,
.project-name-mark i {
  position: absolute;
  font-size: 1.18rem;
  font-style: normal;
  font-weight: 700;
}
.project-name-mark b { transform: translateX(-.28rem); }
.project-name-mark i { transform: translateX(.28rem); color: var(--vox-accent); }
.project-card-media {
  --media-image: none;
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  z-index: 2;
  border: 1px solid rgba(57, 40, 32, .68);
  border-radius: .2rem;
  background: #2b1e1a;
  isolation: isolate;
  min-height: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.project-card-media::before,
.project-card-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.project-card-media::before {
  background-image: var(--media-image);
  background-position: center;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: .08;
  transform: translateX(0);
}
.project-card-media::after {
  background:
    radial-gradient(circle at var(--vox-foil-x) var(--vox-foil-y), var(--vox-foil-a), transparent 31%),
    linear-gradient(117deg, transparent 25%, rgba(255, 255, 255, .2) 42%, transparent 53%, var(--vox-foil-b)),
    var(--analog-grain-image, none);
  background-size: auto, auto, 72px 72px;
  mix-blend-mode: soft-light;
  opacity: .47;
  transition: opacity .25s ease;
}
.project-card-media img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transform: translate3d(calc(var(--vox-image-x, 0px)), calc(var(--media-parallax, 0px) + var(--vox-image-y, 0px)), 0) scale(1.07);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .home-page .project-index-list a.vox-project-card:hover {
    border-color: rgba(255, 250, 243, .98);
    box-shadow:
      0 .18rem .5rem rgba(255, 250, 241, .52) inset,
      0 2rem 3.3rem rgba(52, 35, 28, .24),
      0 .35rem .6rem rgba(52, 35, 28, .13);
  }
  .home-page .project-index-list a.vox-project-card:hover::before { opacity: 1; }
  .home-page .project-index-list a.vox-project-card:hover .project-card-media::after { opacity: .68; }
  .home-page .project-index-list a.vox-project-card:hover > i { background: rgba(255, 247, 236, .55); }
  .home-page .project-index-list a.vox-project-card:hover .vox-grade-label {
    box-shadow: inset 0 1px rgba(255, 240, 220, .22), 0 .28rem .55rem rgba(52, 35, 28, .2);
  }
}
.home-page .project-index-list strong {
  grid-column: 1 / -1;
  grid-row: 3;
  z-index: 2;
  align-self: end;
  max-width: 100%;
  color: #2a1c16;
  font-size: clamp(1.32rem, 1.9vw, 2rem);
  line-height: .92;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.home-page .project-index-list strong,
.home-page .project-index-list span,
.home-page .project-index-list small {
  transform: none;
}
.home-page .project-index-list small {
  grid-column: 1 / -1;
  grid-row: 4;
  z-index: 2;
  align-self: end;
  min-height: 0;
  color: #624d40;
  font-size: .76rem;
  line-height: 1.38;
  text-wrap: balance;
}
.home-page .project-index-list a.vox-project-card[data-vox-variant="blue"] {
  --vox-accent: #27687a;
  --vox-foil-a: rgba(161, 205, 207, .38);
  --vox-foil-b: rgba(212, 149, 88, .26);
}
.home-page .project-index-list a.vox-project-card[data-vox-variant="clay"] {
  --vox-accent: #9f4029;
  --vox-foil-a: rgba(238, 158, 101, .36);
  --vox-foil-b: rgba(121, 147, 158, .22);
}

/* Review-only project editions. These sit in the existing homepage scene as
   image sheets with a caption rail, rather than as collectible-card objects. */
.home-page.project-editions-preview .project-index-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  width: min(100%, 76rem);
  gap: clamp(2.5rem, 6vw, 6.5rem) clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(2rem, 5vw, 5rem);
  background: none;
}
.home-page.project-editions-preview .project-index-list li,
.home-page.project-editions-preview .project-index-list li:nth-child(n) {
  width: auto;
  perspective: none;
  will-change: auto;
}
.home-page.project-editions-preview .project-group--f1 .project-index-list li:nth-child(1) { grid-column: span 7; }
.home-page.project-editions-preview .project-group--f1 .project-index-list li:nth-child(2) { grid-column: span 5; margin-top: clamp(4rem, 11vw, 10rem); }
.home-page.project-editions-preview .project-group--f1 .project-index-list li:nth-child(3) { grid-column: 8 / span 4; margin-top: clamp(-2rem, -4vw, -4rem); }
.home-page.project-editions-preview .project-group--bmw .project-index-list li { grid-column: span 4; }
.home-page.project-editions-preview .project-group--bmw .project-index-list li:nth-child(2) { grid-column: span 8; margin-top: clamp(2rem, 7vw, 7rem); }
.home-page.project-editions-preview .project-group--bmw .project-index-list li:nth-child(3) { margin-top: clamp(-4rem, -7vw, -7rem); }
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .42rem .72rem;
  width: 100%;
  min-height: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card::before { display: none; }
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card > span {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  color: var(--signal);
  font-family: "DM Mono", monospace;
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .08em;
  white-space: nowrap;
}
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card > i {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  color: var(--signal);
  font-size: 1.2rem;
}
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card .project-card-media {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(60, 34, 23, .18);
}
.home-page.project-editions-preview .project-group--f1 .project-index-list li:nth-child(1) .project-card-media { aspect-ratio: 4 / 5; }
.home-page.project-editions-preview .project-group--bmw .project-index-list li:nth-child(2) .project-card-media { aspect-ratio: 16 / 10; }
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card .project-card-media::before { display: none; }
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card .project-card-media::after { opacity: 0; background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 36%); mix-blend-mode: normal; }
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card .project-card-media img { transform: none; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card > strong {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: .2rem 0 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card > small {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: .63rem;
  letter-spacing: .02em;
  line-height: 1.35;
  text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) {
  .home-page.project-editions-preview .project-index-list a.project-edition-preview-card:hover .project-card-media::after { opacity: 1; }
  .home-page.project-editions-preview .project-index-list a.project-edition-preview-card:hover .project-card-media img { transform: scale(1.028); }
  .home-page.project-editions-preview .project-index-list a.project-edition-preview-card:hover > i { transform: translate(.22rem, -.22rem); }
}
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 7px; }
@media (max-width: 700px) {
  .home-page.project-editions-preview .project-index-list { display: block; width: min(100%, 26rem); padding-block: 2rem 4rem; }
  .home-page.project-editions-preview .project-index-list li,
  .home-page.project-editions-preview .project-group--f1 .project-index-list li:nth-child(n),
  .home-page.project-editions-preview .project-group--bmw .project-index-list li:nth-child(n) { margin-top: 3.75rem; }
  .home-page.project-editions-preview .project-index-list li:first-child { margin-top: 0; }
  .home-page.project-editions-preview .project-index-list a.project-edition-preview-card .project-card-media,
  .home-page.project-editions-preview .project-group--f1 .project-index-list li:nth-child(1) .project-card-media,
  .home-page.project-editions-preview .project-group--bmw .project-index-list li:nth-child(2) .project-card-media { aspect-ratio: 4 / 5; }
  .home-page.project-editions-preview .project-index-list a.project-edition-preview-card > small { grid-column: 1 / -1; grid-row: 4; }
}

/* Review-only project grid. The images remain the work; the captions sit in a
   dedicated reading rail below each image rather than being printed over it. */
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .scroll-character,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .scroll-cinema-atmosphere,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .scroll-ambient-lighting,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .scroll-workstation,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .journey-chair,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .journey-card,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .falling-object,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .scroll-cinema-index,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .scroll-cinema-prompt,
.home-page.project-grid-preview .scroll-cinema.is-project-grid-work .scroll-cinema-release {
  opacity: 0 !important;
  transition: opacity .2s ease-out;
}
.home-page.project-grid-preview .work-index {
  z-index: 8;
  overflow: hidden;
  border-top-color: rgba(47, 25, 19, .5);
  background:
    radial-gradient(circle at 83% 12%, rgba(229, 182, 143, .4), transparent 30%),
    linear-gradient(135deg, #e8be99 0%, #d98c64 54%, #b45a3f 100%);
}
.home-page.project-grid-preview .work-index::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .18;
  background-image: var(--analog-grain-image);
  background-size: 96px 96px;
  pointer-events: none;
}
.home-page.project-grid-preview .work-index-head {
  max-width: 82rem;
  margin-inline: auto;
  grid-template-columns: minmax(7rem, .8fr) minmax(0, 2fr) minmax(16rem, 1fr);
}
.home-page.project-grid-preview .work-index-head > p:last-child,
.home-page.project-grid-preview .project-group-head > p {
  color: rgba(47, 25, 19, .8);
}
.home-page.project-grid-preview .project-group {
  overflow: visible;
  padding-block: clamp(3rem, 7vw, 6.5rem);
  border-top-color: rgba(47, 25, 19, .4);
}
.home-page.project-grid-preview .project-group::after { display: none; }
.home-page.project-grid-preview .project-index-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  width: min(100%, 82rem);
  margin-inline: auto;
  padding-block: clamp(1rem, 3vw, 2rem) clamp(3.5rem, 7vw, 7rem);
  gap: clamp(3rem, 7vw, 7rem) clamp(1rem, 2.3vw, 2.5rem);
  border: 0;
}
.home-page.project-grid-preview .project-index-list li,
.home-page.project-grid-preview .project-index-list li:nth-child(n) {
  width: auto;
  margin: 0;
  border: 0;
  perspective: none;
  will-change: auto;
}
.home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(1) { grid-column: 1 / span 7; }
.home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(4rem, 12vw, 11rem); }
.home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(3) { grid-column: 4 / span 5; }
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(1) { grid-column: 1 / span 5; }
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(2) { grid-column: 7 / span 6; margin-top: clamp(2rem, 6vw, 6rem); }
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(3) { grid-column: 2 / span 4; }
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(4) { grid-column: 7 / span 6; }
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(5) { grid-column: 4 / span 6; }
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: .5rem;
  width: 100%;
  min-height: 0;
  padding: 0;
  color: #2f1913;
  cursor: pointer;
}
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card::before { display: none; }
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card .project-card-media {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(82, 41, 27, .18);
}
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card .project-card-media::before,
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card .project-card-media::after { display: none; }
.home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(1) .project-card-media,
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(2) .project-card-media,
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(4) .project-card-media { aspect-ratio: 16 / 10; }
.home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(2) .project-card-media,
.home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(3) .project-card-media,
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(3) .project-card-media { aspect-ratio: 4 / 5; }
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(1) .project-card-media,
.home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(5) .project-card-media { aspect-ratio: 3 / 2; }
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card .project-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card > strong {
  grid-column: 1;
  grid-row: 2;
  margin: .2rem 0 0;
  color: #2f1913;
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card > i {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  color: #9f4029;
  font-size: 1.45rem;
  font-style: normal;
  line-height: 1;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card > span {
  grid-column: 1;
  grid-row: 3;
  color: #9f4029;
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card > small {
  grid-column: 1 / -1;
  grid-row: 4;
  max-width: 34ch;
  margin: .25rem 0 0;
  color: rgba(47, 25, 19, .86);
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.35;
}
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card:focus-visible {
  outline: 2px solid #9f4029;
  outline-offset: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .home-page.project-grid-preview .project-index-list a.project-grid-preview-card:hover .project-card-media img { transform: scale(1.018); }
  .home-page.project-grid-preview .project-index-list a.project-grid-preview-card:hover > i { transform: translate(.2rem, -.2rem); }
}
@media (max-width: 700px) {
  .home-page.project-grid-preview .work-index-head,
  .home-page.project-grid-preview .project-group-head { display: block; }
  .home-page.project-grid-preview .work-index-head > p:first-child,
  .home-page.project-grid-preview .project-group-head > div > p { margin-bottom: .8rem; }
  .home-page.project-grid-preview .work-index-head > p:last-child,
  .home-page.project-grid-preview .project-group-head > p { margin-top: 1.25rem; }
  .home-page.project-grid-preview .project-index-list { display: block; width: min(100%, 31rem); padding-block: 2rem 4rem; }
  .home-page.project-grid-preview .project-index-list li,
  .home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(n),
  .home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(n) { margin-top: 3.5rem; }
  .home-page.project-grid-preview .project-index-list li:first-child { margin-top: 0; }
  .home-page.project-grid-preview .project-index-list a.project-grid-preview-card .project-card-media,
  .home-page.project-grid-preview .project-group--f1 .project-index-list li:nth-child(n) .project-card-media,
  .home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(n) .project-card-media { aspect-ratio: 4 / 5; }
  .home-page.project-grid-preview .project-group--bmw .project-index-list li:nth-child(4) .project-card-media { aspect-ratio: 16 / 10; }
  .home-page.project-grid-preview .project-index-list a.project-grid-preview-card > strong { font-size: clamp(1.45rem, 6vw, 2rem); }
  .home-page.project-grid-preview .project-index-list a.project-grid-preview-card > small { font-size: .92rem; }
}

/* Collectible master study: three independent layers: clear container,
   micrographic label, then the image-led collectible card. */
.home-page .project-index-list a.collectible-container.is-collectible-master {
  --collectible-tilt-x: 0deg;
  --collectible-tilt-y: 0deg;
  --collectible-glint-x: 52%;
  --collectible-glint-y: 18%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: .72rem;
  width: 100%;
  min-height: 0;
  aspect-ratio: 9 / 16;
  padding: .68rem;
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(243, 234, 221, .74);
  border-radius: .82rem;
  color: #211713;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .25), transparent 19% 72%, rgba(247, 179, 123, .12)),
    rgba(224, 210, 193, .08);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .56),
    inset 0 0 0 1px rgba(58, 40, 31, .22),
    0 1.3rem 2.7rem rgba(28, 17, 13, .23),
    0 .26rem .52rem rgba(28, 17, 13, .12);
  cursor: pointer;
  transform: translate3d(0, 0, 0) rotateX(var(--collectible-tilt-x)) rotateY(var(--collectible-tilt-y));
  transform-style: preserve-3d;
  transition: transform .24s cubic-bezier(.23, 1, .32, 1), box-shadow .24s cubic-bezier(.23, 1, .32, 1), border-color .18s ease;
}
.home-page .project-index-list a.collectible-container.is-collectible-master::before,
.home-page .project-index-list a.collectible-container.is-collectible-master::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.home-page .project-index-list a.collectible-container.is-collectible-master::before {
  inset: -.26rem;
  border: 1px solid rgba(255, 249, 239, .78);
  border-radius: 1.05rem;
  background: linear-gradient(126deg, rgba(255, 255, 255, .2), transparent 18% 77%, rgba(245, 183, 125, .12));
  box-shadow: inset 0 0 0 1px rgba(63, 43, 33, .25), 0 .54rem 1rem rgba(24, 15, 12, .13);
}
.home-page .project-index-list a.collectible-container.is-collectible-master::after {
  inset: .16rem;
  border-radius: .65rem;
  opacity: .46;
  background: radial-gradient(15rem 10rem at var(--collectible-glint-x) var(--collectible-glint-y), rgba(255, 255, 255, .35), transparent 47%);
  mix-blend-mode: screen;
  transition: opacity .2s ease;
}
.collectible-label {
  position: relative;
  z-index: 3;
  display: grid;
  gap: .2rem;
  min-height: 4.45rem;
  padding: .42rem .52rem .38rem;
  overflow: hidden;
  border: 1px solid rgba(56, 38, 29, .55);
  border-radius: .28rem;
  color: #2a1c16;
  background:
    linear-gradient(130deg, rgba(255, 253, 246, .97), rgba(219, 205, 188, .9)),
    #eee4d7;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 245, .64), 0 .14rem .28rem rgba(37, 24, 18, .14);
  font-family: "DM Mono", monospace;
  font-size: .48rem;
  font-weight: 500;
  letter-spacing: .055em;
  line-height: 1.08;
  text-transform: uppercase;
}
.collectible-label-top,
.collectible-label-bottom { display: flex; align-items: center; min-width: 0; gap: .34rem; }
.collectible-label-top b {
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #9f4029;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .59rem;
  letter-spacing: -.08em;
}
.collectible-label-top i,
.collectible-label-top em,
.collectible-label-bottom b,
.collectible-label-bottom em { font: inherit; font-style: normal; }
.collectible-label-top em { margin-left: auto; color: #9f4029; font-size: .6rem; letter-spacing: .015em; }
.collectible-label-title { max-width: 100%; overflow: hidden; font-size: .59rem; font-weight: 700; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.collectible-label-meta { overflow: hidden; color: #705545; text-overflow: ellipsis; white-space: nowrap; }
.collectible-label-bottom { margin-top: auto; padding-top: .22rem; border-top: 1px solid rgba(56, 38, 29, .28); }
.collectible-label-bottom b { margin-left: auto; font-size: .42rem; }
.collectible-label-bottom em { color: #9f4029; font-size: .42rem; }
.collectible-barcode {
  display: block;
  width: 3.25rem;
  height: .52rem;
  opacity: .85;
  background: repeating-linear-gradient(90deg, #2a1c16 0 1px, transparent 1px 2px, #2a1c16 2px 4px, transparent 4px 5px, #2a1c16 5px 6px, transparent 6px 8px);
}
.collectible-card {
  position: relative;
  z-index: 2;
  display: block;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(50, 33, 26, .72);
  border-radius: .42rem;
  background: #2b1e1a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 .42rem .85rem rgba(32, 18, 12, .2);
  transform: translateZ(1px);
}
.collectible-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(31, 17, 11, .9), rgba(31, 17, 11, .1) 45%, transparent 69%),
    radial-gradient(12rem 8rem at var(--collectible-glint-x) var(--collectible-glint-y), rgba(255, 219, 181, .25), transparent 52%);
}
.collectible-card .project-card-media {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.collectible-card .project-card-media::before { display: none; }
.collectible-card .project-card-media::after {
  opacity: .34;
  background: linear-gradient(122deg, transparent 32%, rgba(255, 233, 199, .25) 48%, transparent 55%);
}
.collectible-card .project-card-media img {
  transform: translate3d(var(--collectible-card-x, 0px), calc(var(--media-parallax, 0px) + var(--collectible-card-y, 0px)), 0) scale(1.08);
  transition: transform .24s cubic-bezier(.23, 1, .32, 1);
}
.collectible-card > strong,
.collectible-card > small,
.collectible-card > i,
.collectible-card-mark { position: absolute; z-index: 3; transform: none; }
.home-page .project-index-list .collectible-card > strong {
  right: .78rem;
  bottom: 1.9rem;
  left: .78rem;
  max-width: none;
  color: #fff9f1;
  font-family: var(--sans);
  font-size: clamp(1.24rem, 1.8vw, 1.72rem);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.035em;
}
.home-page .project-index-list .collectible-card > small {
  right: .78rem;
  bottom: .72rem;
  left: .78rem;
  color: rgba(255, 247, 237, .83);
  font-family: "DM Mono", monospace;
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-page .project-index-list .collectible-card > i {
  top: .68rem;
  right: .68rem;
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 1px solid rgba(255, 247, 236, .55);
  border-radius: 50%;
  color: #fff7ed;
  background: rgba(40, 23, 16, .18);
  font-size: .9rem;
  font-style: normal;
}
.collectible-card-mark {
  top: .72rem;
  left: .7rem;
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid rgba(255, 247, 236, .56);
  border-radius: .22rem;
  color: #fff7ed;
  background: rgba(40, 23, 16, .22);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: -.08em;
}
.home-page .project-index-list a.collectible-container.is-collectible-master:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
  border-color: rgba(255, 250, 243, .98);
}
.home-page .project-index-list a.collectible-container.is-collectible-master:active {
  transform: translate3d(0, .1rem, 0) scale(.985) rotateX(var(--collectible-tilt-x)) rotateY(var(--collectible-tilt-y));
}
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .home-page .project-index-list a.collectible-container.is-collectible-master:hover {
    border-color: rgba(255, 250, 243, .98);
    box-shadow: inset 0 1px rgba(255, 255, 255, .66), inset 0 0 0 1px rgba(58, 40, 31, .18), 0 1.85rem 3rem rgba(28, 17, 13, .26), 0 .3rem .6rem rgba(28, 17, 13, .1);
  }
  .home-page .project-index-list a.collectible-container.is-collectible-master:hover::after { opacity: .72; }
  .home-page .project-index-list a.collectible-container.is-collectible-master:hover .collectible-card .project-card-media::after { opacity: .52; }
}
.home-page .project-index-list a.vox-project-card.is-image-missing .project-card-media::after {
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #f5e8db;
  background: #422b23;
  font-family: "DM Mono", monospace;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.4;
  text-align: center;
  content: "ARCHIVE IMAGE UNAVAILABLE";
  mix-blend-mode: normal;
  opacity: 1;
}
/* Measured size changes make the archive feel collected, not mechanically tiled. */
@media (min-width: 701px) {
  .project-group--f1 .project-index-list li:nth-child(1) a.vox-project-card,
  .project-group--bmw .project-index-list li:nth-child(1) a.vox-project-card { width: 100%; }
  .project-group--f1 .project-index-list li:nth-child(2) a.vox-project-card,
  .project-group--bmw .project-index-list li:nth-child(2) a.vox-project-card {
    width: 90%;
    justify-self: end;
    aspect-ratio: 9 / 15.4;
  }
  .project-group--f1 .project-index-list li:nth-child(3) a.vox-project-card,
  .project-group--bmw .project-index-list li:nth-child(3) a.vox-project-card { width: 94%; }
  .project-group--bmw .project-index-list li:nth-child(4) a.vox-project-card {
    width: 88%;
    justify-self: end;
    aspect-ratio: 9 / 16.3;
  }
  .project-group--bmw .project-index-list li:nth-child(5) a.vox-project-card { width: 96%; }
  .home-page .project-index-list li:has(a.vox-project-card:hover),
  .home-page .project-index-list li:has(a.vox-project-card:focus-visible) { z-index: 20; }
}
.project-group--f1 .project-index-list li:nth-child(1),
.project-group--bmw .project-index-list li:nth-child(1) { grid-column: 1; }
.project-group--f1 .project-index-list li:nth-child(2),
.project-group--bmw .project-index-list li:nth-child(2) { grid-column: 3; justify-self: end; }
.project-group--f1 .project-index-list li:nth-child(3) { grid-column: 3; grid-row: 2; justify-self: end; }
.project-group--bmw .project-index-list li:nth-child(3) { grid-column: 1; grid-row: 2; }
.project-group--bmw .project-index-list li:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; }
.project-group--bmw .project-index-list li:nth-child(5) { grid-column: 1; grid-row: 3; }
.project-group--bmw .project-index-list { min-height: 0; }
.home-page .work { padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(4rem, 7vw, 7rem); }

/* Restored project presentation: the pre-card image constellation. */
.home-page .project-index-list {
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(10rem, 14rem) minmax(15rem, 18rem);
  grid-auto-rows: auto;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vw, 5rem);
  width: min(100%, 76rem);
  min-height: 0;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 3rem);
  border: 0;
  background: linear-gradient(to bottom, transparent, rgba(176, 69, 42, .18) 14%, rgba(176, 69, 42, .18) 86%, transparent) center / 1px 100% no-repeat;
}
.home-page .project-index-list li {
  position: relative;
  align-self: center;
  width: min(100%, 18rem);
  border: 0;
  transform-origin: center top;
  transform-style: preserve-3d;
  will-change: transform;
}
.js .home-page .project-index-list li.reveal,
.js .home-page .project-index-list li.reveal.is-visible { opacity: 1; clip-path: none; transition: none; }
.home-page .project-index-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto minmax(6.75rem, 1fr) auto auto;
  gap: .45rem .8rem;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  padding: clamp(.75rem, 1.05vw, .95rem);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: clip;
  background: rgba(247, 242, 235, .96);
  box-shadow: 0 1.4rem 3rem rgba(52, 35, 28, .1);
  transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s cubic-bezier(.23, 1, .32, 1);
}
.home-page .project-index-list a::after,
.home-page .project-index-list a::before { content: none; }
.home-page .project-index-list a:focus-visible { transform: translateY(-.45rem); box-shadow: 0 2rem 4rem rgba(52, 35, 28, .14); }
.home-page .project-index-list span { grid-column: 1; grid-row: 1; }
.home-page .project-index-list i { grid-column: 2; grid-row: 1; justify-self: end; }
.project-card-media {
  --media-image: none;
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #d8cec4;
  isolation: isolate;
  min-height: clamp(6.75rem, 10vw, 8rem);
}
.project-card-media::before,
.project-card-media::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.project-card-media::before { background-image: var(--media-image); background-position: center; background-size: cover; mix-blend-mode: screen; opacity: 0; transform: translateX(0); }
.project-card-media::after { background: linear-gradient(110deg, rgba(255, 136, 76, .16), transparent 31%, transparent 72%, rgba(27, 170, 191, .13)), var(--analog-grain-image, none); background-size: auto, 72px 72px; mix-blend-mode: soft-light; opacity: .24; }
.project-card-media img { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; transform: translate3d(0, var(--media-parallax, 0px), 0) scale(1.08); transition: transform .24s cubic-bezier(.23, 1, .32, 1); will-change: transform; }
.home-page .project-index-list a:focus-visible .project-card-media img { transform: translate3d(0, var(--media-parallax, 0px), 0) scale(1.13); }
@media (hover: hover) and (pointer: fine) {
  .home-page .project-index-list a:hover { transform: translateY(-.45rem); box-shadow: 0 2rem 4rem rgba(52, 35, 28, .14); }
  .home-page .project-index-list a:hover .project-card-media img { transform: translate3d(0, var(--media-parallax, 0px), 0) scale(1.13); }
  .home-page .project-index-list a:hover .project-card-media::before,
  .home-page .project-index-list a:focus-visible .project-card-media::before { opacity: .18; transform: translateX(2px); filter: hue-rotate(145deg) saturate(1.8) contrast(1.08); animation: analog-channel-jump .22s steps(2, end) both; }
}
.home-page .project-index-list strong { grid-column: 1 / -1; grid-row: 3; align-self: end; max-width: 100%; font-size: clamp(1.22rem, 1.72vw, 1.82rem); line-height: .94; overflow-wrap: break-word; text-wrap: balance; }
.home-page .project-index-list strong,
.home-page .project-index-list span,
.home-page .project-index-list small { transform: none; }
.home-page .project-index-list small { grid-column: 1 / -1; grid-row: 4; align-self: end; min-height: 0; font-size: clamp(.6rem, .72vw, .72rem); line-height: 1.28; text-wrap: balance; }
.project-group--f1 .project-index-list li:nth-child(1),
.project-group--bmw .project-index-list li:nth-child(1) { grid-column: 1; }
.project-group--f1 .project-index-list li:nth-child(2),
.project-group--bmw .project-index-list li:nth-child(2) { grid-column: 3; justify-self: end; }
.project-group--f1 .project-index-list li:nth-child(3) { grid-column: 3; grid-row: 2; justify-self: end; }
.project-group--bmw .project-index-list li:nth-child(3) { grid-column: 1; grid-row: 2; }
.project-group--bmw .project-index-list li:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; }
.project-group--bmw .project-index-list li:nth-child(5) { grid-column: 1; grid-row: 3; }
.project-group--bmw .project-index-list { min-height: 0; }
@media (max-width: 700px) {
  .home-page .project-index-list { display: block; width: min(100%, 22rem); }
  .home-page .project-index-list li,
  .project-group--f1 .project-index-list li:nth-child(n),
  .project-group--bmw .project-index-list li:nth-child(n) { width: 100%; margin-top: 1.5rem; }
  .home-page .project-index-list li:first-child { margin-top: 0; }
}
.home-page .more-teaser {
  position: relative;
  z-index: 7;
  isolation: isolate;
  min-height: auto;
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: 0;
  background: transparent;
  color: #f8f3ec;
}
.home-page .more-teaser::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 -12rem;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(27, 17, 15, .82) 0%,
    rgba(31, 19, 16, .72) 42%,
    rgba(32, 20, 17, .38) 64%,
    transparent 82%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 calc(100% - 12rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 calc(100% - 12rem),
    transparent 100%
  );
}
.home-page .more-teaser > * {
  position: relative;
  z-index: 1;
}
.home-page .more-teaser .eyebrow,
.home-page .more-teaser .working-principles,
.home-page .more-teaser .working-principles dd { color: rgba(248, 243, 236, .9); }
.home-page .more-teaser h2,
.home-page .more-teaser .working-principles dt,
.home-page .more-teaser .working-principles a { color: #f8f3ec; }
.home-page .more-teaser .working-principles,
.home-page .more-teaser .working-principles dl,
.home-page .more-teaser .working-principles dl div { border-color: rgba(248, 243, 236, .28); }
.home-page .project-wide { padding-bottom: 0; }
.home-page .project { padding-top: clamp(3rem, 6vw, 6rem); }
.home-page .project-story { gap: clamp(1.5rem, 3vw, 3rem) 1rem; margin-top: clamp(2rem, 4vw, 4rem); }
.home-page .project-story {
  grid-column: 2 / -1;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  align-items: start;
}
.home-page .project-story .story-intro {
  grid-column: 1;
  max-width: 24ch;
  font-size: clamp(1.45rem, 2.35vw, 2.45rem);
}
.home-page .project-story .story-facts {
  grid-column: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top-color: var(--ink);
}
.home-page .project-story .story-facts div { padding: 1rem clamp(.75rem, 1.5vw, 1.5rem) 1rem 0; }
.home-page .project-story .story-facts dt { color: var(--signal); }
.home-page .project-story .story-facts dd { max-width: 18rem; line-height: 1.45; }
.home-page .project-cta { grid-column: 1 / -1; margin-top: 0; }
.home-page .project--f1 .project-story { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.85fr); }
.home-page .project--bmw .project-story { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.home-page .project--bmw .story-intro { font-family: var(--serif); font-weight: 400; }
.home-page .visual-f1 { min-height: clamp(32rem, 62vw, 62rem); background: #0c1715; color: var(--paper); }
.home-page .visual-f1::before { inset: auto var(--pad) var(--pad); width: auto; height: 1px; background: rgba(241,240,234,.35); }
.home-page .visual-f1::after { display: block; inset: 0; z-index: 1; width: auto; aspect-ratio: auto; border: 0; border-radius: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: screen; pointer-events: none; }
.home-page .visual-f1 .visual-label { inset: auto auto 13% 4%; transform: none; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(5rem, 16vw, 16rem); line-height: .72; letter-spacing: -.085em; }
.home-page .visual-f1 .visual-caption { top: 1.25rem; bottom: auto; color: var(--signal-light); }
.f1-film-top { position: absolute; z-index: 3; top: 4rem; left: 4%; right: 4%; display: flex; justify-content: space-between; padding-top: .65rem; border-top: 1px solid rgba(242,237,228,.55); font: 500 .62rem "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.f1-film-top i { font-style: normal; }
.f1-timecode { position: absolute; z-index: 3; right: 2rem; top: 50%; font: 500 .62rem "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; }
.f1-film-bottom { position: absolute; z-index: 3; left: 4%; right: 4%; bottom: 3rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; padding-top: .65rem; border-top: 1px solid rgba(242,237,228,.55); font: 500 .56rem "DM Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
.f1-film-bottom i { font-style: normal; }
.f1-film-bottom i:nth-child(2) { text-align: center; }
.f1-film-bottom i:last-child { text-align: right; }
.f1-film-edge { position: absolute; z-index: 3; top: 18%; bottom: 18%; left: 1.1rem; display: flex; flex-direction: column; justify-content: space-between; padding-left: 1rem; border-left: 1px solid rgba(242,237,228,.55); color: var(--signal-light); font: 500 .5rem "DM Mono", monospace; text-transform: uppercase; }
.f1-film-edge::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1rem; width: .42rem; background: repeating-linear-gradient(to bottom, var(--signal-light) 0 .72rem, transparent .72rem 1.45rem); opacity: .72; }
.f1-film-edge i { font-style: normal; }
.frame-mark { position: absolute; z-index: 3; width: 1.2rem; height: 1.2rem; border-color: var(--signal-light); opacity: .85; }
.frame-mark-tl { top: 1.25rem; left: 1.25rem; border-top: 1px solid; border-left: 1px solid; }
.frame-mark-tr { top: 1.25rem; right: 1.25rem; border-top: 1px solid; border-right: 1px solid; }
.frame-mark-bl { bottom: 1.25rem; left: 1.25rem; border-bottom: 1px solid; border-left: 1px solid; }
.frame-mark-br { right: 1.25rem; bottom: 1.25rem; border-right: 1px solid; border-bottom: 1px solid; }
.project-directory { border-top: 1px solid var(--line); }
.bmw-overview { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; margin: calc(-1 * clamp(2rem, 4vw, 4rem)) 0 clamp(4rem, 8vw, 8rem) 25%; padding-top: 1rem; border-top: 1px solid var(--ink); }
.bmw-overview p:first-child { max-width: 20rem; font-weight: 700; letter-spacing: -.025em; }
.bmw-overview p:last-child { max-width: 35rem; color: var(--muted); }
.bmw-signal { position: relative; width: 100%; min-height: 0; aspect-ratio: 16 / 9; margin-bottom: 0; overflow: hidden; border: 0; background: #38231c; color: #fff8ed; }
.project > .bmw-signal { grid-column: 1 / -1; width: 100%; }
.bmw-signal::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255,248,237,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,248,237,.22) 1px, transparent 1px); background-size: 10% 10%; pointer-events: none; }
.bmw-signal::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(35,20,15,.42), rgba(35,20,15,.08) 48%, rgba(35,20,15,.3)); pointer-events: none; }
.bmw-signal-media { position: absolute; inset: 0; z-index: 0; }
.bmw-signal-media span { position: absolute; inset: 0; display: block; background-color: #2b1b16; background-image: var(--tile-image); background-position: left center; background-repeat: repeat-x; background-size: 50% auto; opacity: 0; filter: blur(0) saturate(.92) contrast(1.04); transform: scale(1.001); transition: opacity .5s ease, filter .24s ease, transform .8s cubic-bezier(.2,.75,.25,1); }
.bmw-signal-media span.fill-frame { background-position: center; background-repeat: no-repeat; background-size: cover; }
.bmw-signal-media span.two-up-frame { background-position: left center; background-repeat: repeat-x; background-size: 50% auto; }
.bmw-signal-media span.is-active { opacity: 1; }
.bmw-signal-media span.is-blurring { filter: blur(14px) saturate(.78); transform: scale(1.035); }
.panel-hit { position: absolute; inset: 0; z-index: 5; }
.panel-hit:focus-visible { outline: 3px solid var(--signal); outline-offset: -6px; }
.panel-action {
  position: absolute;
  z-index: 6;
  right: clamp(1rem, 2.5vw, 2.25rem);
  bottom: clamp(1rem, 2.5vw, 2.25rem);
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: .7rem .85rem;
  background: rgba(36, 24, 20, .88);
  color: #fff8ed;
  font-size: clamp(.72rem, .9vw, .86rem);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  pointer-events: none;
  transition: background .3s ease, transform .3s ease;
}
.panel-action i { color: var(--signal-light); font-size: 1.25em; font-style: normal; }
.bmw-signal:hover .panel-action,
.bmw-signal:focus-within .panel-action { background: var(--signal); transform: translate(-.2rem, -.2rem); }
.bmw-signal-axis { position: absolute; z-index: 2; inset: 1rem 1rem auto; display: flex; justify-content: space-between; font: 500 .58rem "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.bmw-signal-code { position: absolute; z-index: 2; top: 9%; left: 5%; display: grid; gap: .4rem; }
.bmw-signal-code b { font-size: clamp(3.5rem, 9vw, 9rem); line-height: .75; letter-spacing: -.07em; }
.bmw-signal-code span { font: 500 .62rem "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.bmw-signal-title { position: absolute; z-index: 2; left: 5%; bottom: 8%; font: 400 clamp(3rem, 7vw, 7rem)/.82 var(--serif); letter-spacing: -.06em; }
.f1-signal { background: #0c1715; }
.f1-signal::before { opacity: .55; }
.f1-signal::after { background: linear-gradient(90deg, rgba(5,14,12,.55), rgba(5,14,12,.08) 55%, rgba(5,14,12,.38)); }
.f1-signal .bmw-signal-media span { filter: saturate(.78) contrast(1.06); }
.f1-signal .bmw-signal-code b { font-family: var(--serif); font-style: italic; font-weight: 400; }
.bmw-signal-key { position: absolute; z-index: 2; right: 3%; bottom: 3%; display: flex; gap: 1.25rem; font: 500 .58rem "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.bmw-signal-key span::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; background: var(--signal-light); }
.bmw-home-teaser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.bmw-home-teaser figure { min-width: 0; margin: 0; overflow: hidden; }
.bmw-home-teaser figure:nth-child(1) { grid-column: 1 / 5; }
.bmw-home-teaser figure:nth-child(2) { grid-column: 5 / 9; margin-top: clamp(3rem, 7vw, 7rem); }
.bmw-home-teaser figure:nth-child(3) { grid-column: 9 / -1; }
.bmw-home-teaser img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s cubic-bezier(.2,.75,.25,1); }
.bmw-home-teaser figure:hover img { transform: scale(1.025); }
.bmw-home-teaser > a { grid-column: 5 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: baseline; margin-top: clamp(2rem, 5vw, 5rem); padding: 1rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bmw-home-teaser > a:only-child { grid-column: 1 / -1; }
.bmw-home-teaser > a span { font: 400 clamp(1.8rem, 4vw, 4rem)/.95 var(--serif); letter-spacing: -.045em; }
.bmw-home-teaser > a small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.bmw-home-teaser > a i { color: var(--signal); font-size: 1.4rem; font-style: normal; transition: transform .3s ease; }
.bmw-home-teaser > a:hover i { transform: translate(.25rem, -.25rem); }
.directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem) 1rem; }
.directory-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.directory-card-wide { grid-column: auto; }
.directory-card img { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; background: var(--light); transition: opacity .35s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.directory-card-wide img { aspect-ratio: 4 / 5; }
.directory-card:hover img { opacity: .84; transform: scale(.992); }
.directory-card span { display: grid; gap: .3rem; }
.directory-card b { font-size: clamp(1.45rem, 2.8vw, 3rem); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.directory-card small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.directory-card em { margin-top: .8rem; color: var(--ink); font-size: clamp(.9rem, 1.2vw, 1.15rem); font-style: normal; letter-spacing: -.015em; }
.directory-card i { color: var(--signal); font-size: .72rem; font-style: normal; }
.more-teaser { border-top: 1px solid var(--line); }
.more-teaser-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: clamp(2.5rem, 5vw, 5rem) 1rem;
  align-items: start;
  margin-top: clamp(3rem, 7vw, 7rem);
}
.more-teaser-content > h2 { grid-column: 1 / span 8; grid-row: 1; max-width: 8ch; }
.more-teaser-content > .working-principles { grid-column: 1 / span 7; grid-row: 2; }
.more-teaser h2 { font-family: var(--serif); font-size: clamp(3.5rem, 9vw, 9.5rem); font-weight: 400; line-height: .84; letter-spacing: -.04em; }
.more-teaser-content > div { display: grid; gap: 2rem; max-width: none; padding-top: 1.25rem; border-top: 1px solid var(--ink); color: var(--muted); }
.more-teaser-content a { display: flex; justify-content: space-between; color: var(--ink); font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; }
.more-teaser-content a span { color: var(--signal); font-size: 1rem; }
.working-principles { width: min(100%, 46rem); max-width: none !important; }
.working-principles > p,
.working-principles dd {
  font-size: 1rem;
  line-height: 1.55;
}
.working-principles > p { max-width: 52ch; }
.working-principles dl { display: grid; gap: 0; border-top: 1px solid var(--line); }
.working-principles dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.working-principles dt { color: var(--ink); font-size: .75rem; text-transform: uppercase; letter-spacing: .075em; }
.working-principles dd { color: var(--muted); }
.bmw-project-story { margin-bottom: 0; }
.case-page { background: #f5f4ef; }
.case-page[data-project="bmw-pga"] { --ink:#241814; --paper:#f2ede4; --muted:#74645b; --line:#cbbdb2; --light:#e5d8cc; --signal:#a74627; --signal-light:#efad7d; background:var(--paper); }
.case-page[data-project="bmw-pga"] #bmw-pga { position:relative; isolation:isolate; overflow:hidden; background:var(--paper); }
.case-page[data-project="bmw-pga"] #bmw-pga::before { content:""; position:absolute; z-index:0; inset:0 0 auto; height:clamp(46rem,92svh,64rem); background:
  linear-gradient(90deg, transparent 0 66%, rgba(24,56,45,.12) 66% 67%, transparent 67%),
  radial-gradient(circle at 78% 14%, rgba(224,159,89,.58) 0%, rgba(185,132,73,.24) 23%, transparent 49%),
  radial-gradient(ellipse at 18% 42%, rgba(255,244,219,.82) 0%, rgba(226,211,173,.34) 44%, transparent 69%),
  linear-gradient(135deg,#f0dfbf 0%,#b9aa78 45%,#55735b 70%,#173c32 100%); pointer-events:none; }
.case-page[data-project="bmw-pga"] #bmw-pga::after { content:""; position:absolute; z-index:0; inset:0 0 auto; height:clamp(46rem,92svh,64rem); opacity:.1; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:multiply; pointer-events:none; }
.case-page[data-project="bmw-pga"] #bmw-pga > * { position:relative; z-index:1; }
.case-page[data-project="bmw-pga"] #bmw-pga .pga-edition-line { border-color:rgba(36,24,20,.66); }
.case-page[data-project="bmw-pga"] .pga-case-head { border-color:rgba(36,24,20,.66); }
.case-page[data-project="bmw-pga"] .pga-case-head > p:last-child { color:#fff8ed; text-shadow:0 1px 18px rgba(72,29,20,.12); }
.case-page[data-project="bmw-pga"] .pga-project-meta { border-color:rgba(36,24,20,.4); }
.case-page[data-project="bmw-pga"] .pga-project-meta dt { color:#6e2d1d; }
.case-page[data-project="bmw-pga"] .pga-project-meta dd { color:rgba(36,24,20,.78); }
.case-page[data-project="bmw-pga"] #bmw-pga .portfolio-series { padding:clamp(2.75rem,5vw,5rem) 0; }
.case-page[data-project="bmw-pga"] .pga-results { position:relative; left:50%; width:100vw; margin-left:-50vw; padding:clamp(3.5rem,6vw,6rem) max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad))); border-top:0; background:var(--ink); color:var(--paper); }
.case-page[data-project="bmw-pga"] .pga-results-copy > p:last-child,
.case-page[data-project="bmw-pga"] .pga-results dd { color:#bcaea5; }
.case-page[data-project="bmw-pga"] .pga-results .story-label,
.case-page[data-project="bmw-pga"] .pga-results dt { color:var(--signal-light); }
.case-page[data-project="bmw-pga"] .pga-results dl div { border-color:#514039; }
.bmw-hub-page { --ink:#241814; --paper:#f2ede4; --muted:#74645b; --line:#cbbdb2; --light:#e5d8cc; --signal:#a74627; --signal-light:#efad7d; background:var(--paper); }
.bmw-hub-hero { min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; gap: 1rem; padding: 6rem var(--pad) 3rem; background: radial-gradient(circle at 85% 10%, rgba(167,70,39,.68), transparent 42%), linear-gradient(145deg,#f2dfc8,#d58a5d); }
.bmw-hub-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-bottom: .65rem; border-bottom: 1px solid currentColor; font: 500 .62rem "DM Mono",monospace; letter-spacing: .12em; text-transform: uppercase; }
.bmw-hub-hero h1 { grid-column: 1 / -1; align-self: center; font-size: clamp(5rem, 17vw, 17rem); line-height: .68; letter-spacing: -.085em; text-transform: uppercase; }
.bmw-hub-hero h1 em { margin-left: 12%; font-family: var(--serif); font-weight: 400; text-transform: none; }
.bmw-hub-intro { grid-column: 5 / 11; display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; }
.bmw-hub-intro p:first-child { font-weight: 700; letter-spacing: -.025em; }
.bmw-hub-intro p:last-child { color: #fff8ed; }
.bmw-hub-work { border-top: 1px solid var(--line); }
.f1-page { --ink:#241814; --paper:#f2ede4; --muted:#74645b; --line:#cbbdb2; --signal:#a74627; --signal-light:#efad7d; background:var(--paper); }
.f1-page-hero { min-height:100svh; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto 1fr auto; gap:1rem; padding:6rem var(--pad) 3rem; background:#0c1715; color:#f8f0e4; }
.f1-page-meta { grid-column:1/-1; display:flex; justify-content:space-between; padding-bottom:.65rem; border-bottom:1px solid currentColor; font:500 .62rem "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.f1-page-hero h1 { grid-column:1/-1; align-self:center; font-size:clamp(4.5rem,13vw,13rem); line-height:.72; letter-spacing:-.08em; text-transform:uppercase; }
.f1-page-hero h1 em { display:block; margin-left:12%; color:var(--signal-light); font-family:var(--serif); font-weight:400; text-transform:none; }
.f1-page-intro { grid-column:5/11; display:grid; grid-template-columns:1fr 1.5fr; gap:2rem; }
.f1-page-intro p:last-child { color:#b9c0bc; }
.f1-page-summary { border-top:1px solid var(--line); }
.f1-summary-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(3rem,8vw,8rem); margin-top:3rem; }
.f1-summary-grid h2 { font:italic 400 clamp(4rem,10vw,10rem)/.75 var(--serif); letter-spacing:-.07em; }
.f1-summary-grid dl { margin:0; border-top:1px solid var(--ink); }
.f1-summary-grid dl div { padding:1rem 0; border-bottom:1px solid var(--line); }
.f1-summary-grid dt { color:var(--signal); font:500 .62rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }
.f1-case-spine { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:clamp(3rem,6vw,6rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.f1-case-spine > div { padding:clamp(1.25rem,2.5vw,2.25rem) clamp(1rem,2vw,2rem); border-left:1px solid var(--line); }
.f1-case-spine > div:first-child { padding-left:0; border-left:0; }
.f1-case-spine dt { color:var(--signal); font:500 .62rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }
.f1-case-spine dd { margin:.8rem 0 0; max-width:26rem; color:var(--muted); font-size:clamp(.9rem,1.15vw,1.05rem); line-height:1.45; }
.f1-summary-grid dd { margin:.6rem 0 0; }
.f1-summary-grid > p { grid-column:2; color:var(--muted); }
.f1-work-index { border-top:1px solid var(--line); }
.f1-work-index-grid { display:grid; grid-template-columns:2fr 1fr; gap:clamp(3rem,8vw,8rem); align-items:end; margin-top:clamp(3rem,7vw,7rem); }
.f1-work-index h2 { font:400 clamp(4rem,10vw,10rem)/.78 var(--serif); letter-spacing:-.07em; }
.f1-work-index-grid > p { max-width:32rem; padding-top:1rem; border-top:1px solid var(--ink); color:var(--muted); }
.f1-case { border-top:1px solid var(--line); }
.f1-case-dark { background:#0c1715; color:#f8f0e4; }
.f1-case-copy { display:grid; grid-template-columns:3rem 1.35fr 1fr; gap:1rem; align-items:start; margin-bottom:clamp(3rem,7vw,7rem); }
.f1-case-copy > p:first-child { color:var(--signal-light); font:500 .62rem "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.f1-case-copy h2 { font-size:clamp(3.2rem,7vw,7.5rem); line-height:.82; letter-spacing:-.065em; text-transform:uppercase; }
.f1-case-copy > p:last-child { max-width:34rem; color:var(--muted); }
.f1-case-dark .f1-case-copy > p:last-child { color:#b9c0bc; }
.f1-feature-film { width:100%; aspect-ratio:16/9; }
.f1-case-media { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(.75rem,1.5vw,1.5rem); margin-top:clamp(1rem,3vw,3rem); }
.f1-case-media figure,.f1-case-media article { margin:0; min-width:0; }
.f1-case-media figcaption,.f1-case-media article > p,.f1-audience-grid figcaption { padding-top:.65rem; border-top:1px solid currentColor; margin-top:.65rem; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.f1-race-media > * { grid-column:span 6; }
.f1-race-media figure img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.f1-race-media .video-frame { aspect-ratio:1/1; }
.f1-culture-media > * { grid-column:span 3; }
.f1-culture-media .video-portrait .video-frame,.f1-food-tile img { aspect-ratio:9/16; }
.f1-food-tile img { width:100%; object-fit:cover; }
.f1-families { background:#e7dcd2; }
.f1-audience-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(.75rem,1.5vw,1.5rem); align-items:start; }
.f1-audience-grid figure { grid-column:span 6; margin:0; }
.f1-audience-grid .f1-audience-main { grid-column:1/-1; }
.f1-audience-grid img { width:100%; height:auto; }
.f1-audience-main img { aspect-ratio:16/9; object-fit:cover; }
.f1-role-strip { display:grid; grid-template-columns:repeat(5,1fr); margin:clamp(4rem,8vw,8rem) 0 0; border-top:1px solid var(--ink); }
.f1-role-strip div { padding:1rem 1rem 1rem 0; border-bottom:1px solid var(--line); }
.f1-role-strip dt { color:var(--signal); font:500 .62rem "DM Mono",monospace; text-transform:uppercase; }
.f1-role-strip dd { margin:.6rem 0 0; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.f1-case-takeaway { display:grid; grid-template-columns:1fr 3fr; gap:clamp(1rem,3vw,3rem); margin-top:clamp(3rem,7vw,7rem); padding-top:clamp(1.5rem,3vw,3rem); border-top:1px solid var(--line); }
.f1-case-takeaway > p:last-child { max-width:52rem; font-size:clamp(1.4rem,2.6vw,2.7rem); line-height:1.08; letter-spacing:-.025em; }
.case-page .site-header { mix-blend-mode: difference; }
.case-content { min-height: 85svh; padding-top: 5rem; }
.case-content .standalone-case { display: block; border-top: 0; }
.case-content .standalone-case.section-pad { padding-top: clamp(5rem, 9vw, 9rem); }
.case-loading { padding: 20svh var(--pad); color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .1em; }
.case-error { min-height: 80svh; display: grid; place-content: center; gap: 1.5rem; padding: var(--pad); text-align: center; }
.case-error h1 { font-size: clamp(3rem, 8vw, 8rem); line-height: .85; letter-spacing: -.06em; text-transform: uppercase; }
.case-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem var(--pad); border-top: 1px solid var(--line); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 900px) {
  .home-page .project-index-list {
    grid-template-columns: minmax(12rem, 16rem) minmax(8rem, 11rem) minmax(12rem, 16rem);
  }
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .home-page .project-index-list {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, .75fr) minmax(0, 1fr);
    gap: 1rem;
    min-height: 0;
  }
  .home-page .project-index-list a {
    min-height: 0;
    padding: .85rem;
  }
  .home-page .project-index-list strong { font-size: clamp(1.35rem, 4.5vw, 2rem); }
  .home-page .project-index-list small { font-size: .875rem; }
  .site-header { padding-top: 1rem; }
  .nav-list { gap: 1rem; font-size: .8rem; }
  .home-page .hero { min-height: 90svh; }
  .hero { padding-top: 7rem; grid-template-rows: auto auto auto auto; }
  .hero-title { align-self: start; margin-top: clamp(1.5rem, 5vh, 3rem); font-size: clamp(3.6rem, 15.5vw, 7rem); line-height: .84; }
  .home-page .hero-title > span:first-child:hover { filter: none; opacity: 1; letter-spacing: inherit; }
  .hero-film-meta { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .hero-meta-group { display: grid; gap: .3rem; }
  .hero-meta-group:last-child { justify-content: stretch; }
  .hero-role { margin-left: 0; margin-top: .38em; font-size: .46em; }
  .hero-copy { grid-column: 1 / -1; max-width: 34rem; top: 0; margin-top: .75rem; }
  .hero-copy p { max-width: 54ch; font-size: .88rem; white-space: normal; }
  .work-index-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .work-index-head h2 { max-width: 11ch; }
  .work-index-head > p:last-child,
  .work-index-summary { max-width: 38rem; }
  .project-group-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .project-group-head > div { grid-template-columns: minmax(6rem, .7fr) minmax(0, 2fr); }
  .project-group-head > p { padding-left: calc(30% + .5rem); }
  .project-index-list a {
    grid-template-columns: minmax(4.5rem, .65fr) minmax(0, 2fr) auto;
    gap: 1rem;
    min-height: 7rem;
  }
  .project-index-list small { grid-column: 2; }
  .project-index-list i { grid-column: 3; grid-row: 1 / span 2; }
  .work-heading-compact { grid-template-columns: 1fr auto; margin-bottom: 2rem; }
  .section-heading { grid-template-columns: 1fr; gap: 2rem; }
  .section-heading h2, .about-content h2 { font-size: clamp(3.4rem, 16vw, 6rem); }
  .project { display: flex; flex-direction: column; }
  .project-meta { order: 0; }
  .project-copy { order: 1; padding: 1.5rem 0 1rem !important; margin: 0 !important; }
  .home-page .project-wide .project-copy { display: block; }
  .home-page .project-wide .project-summary { display: grid; gap: .35rem; margin-top: 1.25rem; padding-bottom: 0; }
  .project > .bmw-signal { order: 2; }
  .project-visual { order: 2; min-height: 75vw; }
  .project-visual.has-image { min-height: 0; aspect-ratio: 16 / 9; }
  .project-split .project-visual { order: 2; }
  .project-story { order: 3; display: block; margin-top: 2rem; }
  .home-page .project-story { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .home-page .project-story .story-intro,
  .home-page .project-story .story-facts,
  .home-page .project-cta { grid-column: 1; }
  .home-page .project-story .story-intro { max-width: 30ch; margin-bottom: .5rem; }
  .home-page .project-story .story-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .5rem; }
  .project-gallery { order: 4; grid-template-columns: 1fr; margin-top: 3rem; }
  .project-gallery figure:nth-child(2) { align-self: auto; }
  .project-media { order: 5; display: block; margin-top: 3rem; }
  .project-media .story-label { margin-bottom: 1rem; }
  .project-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-media-grid.pga-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-media-grid .story-label { grid-column: 1 / -1; }
  .project-media-grid .video-item { grid-column: span 1; }
  .project-media-grid .video-landscape { grid-column: 1 / -1; }
  .content-board { order: 6; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
  .content-board .media-wide { grid-column: span 4; }
  .content-board .media-portrait, .content-board .media-square { grid-column: span 2; }
  .story-intro { margin-bottom: 3rem; }
  .home-page .story-intro,
  .home-page .story-detail,
  .home-page .story-facts { margin-bottom: 1.75rem; }
  .story-facts, .story-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 3rem; }
  .home-page .story-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-detail { display: grid; grid-template-columns: 1fr 2fr; }
  .work-stream { display: block; }
  .stream-head { position: static; margin-bottom: 2rem; padding-right: 0; }
  .stream-image { height: auto; }
  .series-stack { margin-top: 4rem; }
  .portfolio-series { display: block; padding: 4rem 0; }
  .series-copy, .portfolio-series:nth-child(even) .series-copy { display: grid; grid-template-columns: 2rem 1fr; row-gap: 1rem; padding: 0; margin-bottom: 2.5rem; }
  .series-copy h4 { margin: 0; }
  .series-copy > p:first-child { margin: 0; }
  .series-copy > p:last-child { grid-column: 2; }
  .series-media, .series-media.three-up, .series-media.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem .65rem; }
  .series-media > *, .series-media.three-up > *, .series-media.four-up > *, .series-media.pga-talent-grid > * { grid-column: span 1; }
  .series-media.pga-talent-grid > .pga-henni-film { grid-column: 1 / -1; }
  .series-media.pga-five > *, .series-media.pga-five > *:nth-child(n+4), .series-media.pga-max-stories > *, .series-media.goodwood-six > * { grid-column: span 1; }
  .series-media .wide, .series-media .span-full, .series-media .video-landscape { grid-column: 1 / -1; }
  .series-media.single-portrait > * { grid-column: 1; }
  .pga-establishing > figure:not(.span-full) { grid-column: 1 / -1; }
  .pga-establishing > figure:not(.span-full) img { height: auto; aspect-ratio: auto; object-fit: contain; }
  .series-media.pga-world-films > * { grid-column: span 1; }
  .series-media.pga-world-films { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .pga-impact-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pga-case-head { display: grid; grid-template-columns: 2rem 1fr; align-items: start; margin-bottom: 2.5rem; }
  .pga-case-head h3, .pga-case-head h1 { grid-column: 2; font-size: clamp(3rem, 12vw, 5.5rem); }
  .pga-case-head > p:last-child { grid-column: 2; }
  .pga-project-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
  .pga-impact-rail div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pga-impact-rail div:nth-child(4) { border-top: 1px solid var(--line); }
  .pga-narrative { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .pga-opening-story { grid-column: 1 / -1; }
  .pga-opening-story section { grid-template-columns: 7rem minmax(0, 1fr); }
  .pga-opening-story h4 { max-width: 16ch; }
  .pga-opening-story section > p:last-child { grid-column: 2; }
  .pga-results { grid-template-columns: 1fr; }
  .pga-results dl div { grid-template-columns: 1fr auto; }
  .stream-media, .stream-media.single-media, .stream-media.campaign-media, .stream-media.organic-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem .65rem; }
  .stream-media.partnership-media { grid-template-columns: repeat(2, 1fr); }
  .stream-media.partnership-media .video-landscape { grid-column: 1 / -1; }
  .stream-media.partnership-media .video-portrait { grid-column: span 1; }
  .stream-media.single-media .video-item { grid-column: 1; }
  .stream-media.campaign-media .video-landscape { grid-column: 1 / -1; }
  .stream-media.campaign-media .video-portrait { grid-column: span 1; }
  .stream-media .video-portrait { width: 100%; max-width: 19rem; }
  .stream-content-board { margin-top: 4rem; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .video-landscape { grid-column: 1 / -1; }
  .video-portrait { grid-column: span 1; }
  .about { display: block; }
  .about-label { min-height: auto; flex-direction: row; margin-bottom: 4rem; }
  .about-label p:last-child { display: none; }
  .about-copy { margin-left: 0; }
  .experience-stats { grid-template-columns: 1fr; }
  .experience-stats dd { max-width: none; }
  .snapshot-heading { grid-template-columns: 1fr; }
  .snapshot-heading h2 { margin: 1.5rem 0; }
  .experience-stats.experience-stats-four { grid-template-columns: repeat(2, 1fr); }
  .capability-list { margin-left: 0; }
  .footer-bottom { grid-template-columns: 1fr auto; row-gap: 2.5rem; }
  .footer-links { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
  .footer-credit { grid-column: 2; }
  .directory-grid { grid-template-columns: 1fr; }
  .directory-card-wide { grid-column: auto; }
  .directory-card img, .directory-card-wide img { aspect-ratio: 4 / 5; }
  .bmw-overview { grid-template-columns: 1fr; margin-left: 0; }
  .bmw-signal { min-height: 0; }
  .bmw-signal-media span.two-up-frame { background-position: center; background-repeat: no-repeat; background-size: cover; }
  .bmw-signal-title { bottom: 10%; }
  .bmw-signal-key { left: 5%; right: auto; bottom: 4%; flex-wrap: wrap; max-width: 16rem; }
  .bmw-home-teaser figure:nth-child(1) { grid-column: 1 / 7; }
  .bmw-home-teaser figure:nth-child(2) { grid-column: 7 / -1; margin-top: 3rem; }
  .bmw-home-teaser figure:nth-child(3) { grid-column: 1 / 7; }
  .bmw-home-teaser > a { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
  .bmw-home-teaser > a small { grid-column: 1; }
  .bmw-hub-hero { display: flex; flex-direction: column; justify-content: space-between; }
  .bmw-hub-hero h1 { margin-block: auto; font-size: 22vw; }
  .bmw-hub-hero h1 em { margin-left: 0; }
  .bmw-hub-intro { grid-template-columns: 1fr; }
  .f1-page-hero { display:flex; flex-direction:column; justify-content:space-between; }
  .f1-page-hero h1 { margin-block:auto; font-size:18vw; }
  .f1-page-hero h1 em { margin-left:0; }
  .f1-page-intro,.f1-summary-grid { display:grid; grid-template-columns:1fr; }
  .f1-summary-grid > p { grid-column:1; }
  .f1-work-index-grid { grid-template-columns:1fr; }
  .f1-case-copy { grid-template-columns:2.5rem 1fr; }
  .f1-case-copy > p:last-child { grid-column:2; }
  .f1-case-spine { grid-template-columns:1fr 1fr; }
  .f1-case-spine > div:nth-child(3) { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .f1-case-spine > div:nth-child(4) { border-top:1px solid var(--line); }
  .f1-case-takeaway { grid-template-columns:1fr; }
  .f1-race-media > * { grid-column:1/-1; }
  .f1-culture-media { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .f1-culture-media > * { grid-column:span 1; }
  .f1-role-strip { grid-template-columns:repeat(2,1fr); }
  .f1-film-top { left: 2rem; right: 2rem; }
  .f1-film-top i:nth-child(2) { display: none; }
  .f1-film-bottom { left: 2rem; right: 2rem; grid-template-columns: 1fr auto; }
  .f1-film-bottom i:nth-child(2) { display: none; }
  .more-teaser-content { grid-template-columns: 1fr; align-items: start; }
  .more-teaser-content > h2,
  .more-teaser-content > .working-principles { grid-column: 1; }
  .more-teaser-content > div { margin-left: 0; }
  .home-page .more-teaser::before {
    background: linear-gradient(
      90deg,
      rgba(27, 17, 15, .8) 0%,
      rgba(31, 19, 16, .68) 62%,
      rgba(32, 20, 17, .28) 100%
    );
  }
  .case-content { padding-top: 3rem; }
}

@media (max-width: 460px) {
  .home-page .hero {
    min-height: 100svh;
    padding-top: 5.75rem;
    padding-bottom: 1.25rem;
  }
  .hero-film-meta {
    grid-template-columns: 1fr;
    gap: .6rem;
    line-height: 1.35;
  }
  .hero-meta-group,
  .hero-meta-group:last-child {
    grid-template-columns: 1fr 1fr;
    gap: .45rem 1rem;
    text-align: left;
  }
  .hero-meta-group > span:last-child { text-align: right; }
  .hero-title {
    margin-top: clamp(1.5rem, 5vh, 3rem);
    font-size: 13.5vw;
  }
  .hero-role { font-size: .46em; }
  .hero-copy { margin-top: 1.5rem; }
  .hero-copy p { max-width: 38ch; font-size: .9rem; line-height: 1.5; }
  .project-group::after { width: 105vw; height: 105vw; opacity: .45; }
  .home-page .work-index { overflow: hidden; }
  .work-index-head { padding-bottom: 2.5rem; }
  .work-index-head > p:last-child { max-width: 34ch; }
  .project-group { padding-block: 4rem; }
  .project-group-head { gap: .75rem; }
  .project-group-head h3 { margin-top: .65rem; }
  .project-group-head > p { max-width: 22ch; line-height: 1.45; }
  .home-page .project-index-list {
    display: flex;
    justify-content: flex-start;
    gap: .85rem;
    width: calc(100% + 2 * var(--pad));
    margin-inline: calc(-1 * var(--pad));
    padding: 1.5rem var(--pad) 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    background: none;
  }
  .home-page .project-index-list::-webkit-scrollbar { display: none; }
  .home-page .project-index-list li,
  .project-group--f1 .project-index-list li:nth-child(n),
  .project-group--bmw .project-index-list li:nth-child(n) {
    flex: 0 0 min(78vw, 19rem);
    width: min(78vw, 19rem);
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    scroll-snap-align: start;
    transform: none !important;
  }
  .home-page .project-index-list a {
    min-height: auto;
    padding: 1rem;
  }
  .project-card-media { min-height: 9.5rem; }
  .home-page .project-index-list strong { font-size: clamp(1.65rem, 7.4vw, 2.1rem); }
  .home-page .project-index-list small { display: block; font-size: .875rem; line-height: 1.45; }
  .home-page .project-index-list span { font-size: .75rem; }
  .home-page .project-index-list i { font-size: 1rem; }
  .project-group--bmw .project-index-list { min-height: 0; }
  .brand { font-size: .85rem; }
  .nav-list { gap: .7rem; font-size: .78rem; }
  .sfx-toggle { width: 2.75rem; font-size: 0; text-align: center; }
  .sfx-toggle::before { display: none; }
  .sfx-toggle::after { content: "♪"; font-size: .9rem; line-height: 1; }
  .sfx-toggle[aria-pressed="true"]::after { color: var(--signal-light); }
  .hero-kicker { justify-content: flex-start; }
  .hero-title { font-size: 13.5vw; }
  .scroll-cinema { height: 94svh; }
  .scroll-character {
    top: 48%;
    width: min(78vw, 22rem);
  }
  .scroll-footer-table {
    top: 48%;
    left: 55%;
    width: min(78vw, 22rem);
  }
  .scroll-cinema-atmosphere { opacity: .82; }
  .fall-debris { max-width: 15vw; }
  .journey-workstation { top: 67%; width: 78vw; }
  .journey-macbook { top: 17%; right: 11%; width: 25%; }
  .story-orbit { width: 135vw; }
  .story-orbit-two { width: 88vw; }
  .story-project { top: auto; width: 9.5rem; padding: .65rem; }
  .story-project strong { margin-top: .45rem; font-size: .85rem; }
  .story-project-f1 { top: 22%; left: 1rem; }
  .story-project-bmw { right: 1rem; bottom: 17%; }
  .story-coordinate { display: none; }
  .scroll-chapter-card {
    top: auto;
    bottom: 1rem;
    width: min(76vw, 19rem);
    min-height: 16.5rem;
    transform: translate3d(var(--card-shift, 0), 0, 0);
  }
  .scroll-chapter-card-f1 { left: 1rem; }
  .scroll-chapter-card-bmw { right: 1rem; }
  .scroll-chapter-card > strong { font-size: clamp(1.9rem, 10vw, 2.7rem); }
  .scroll-cinema-index { top: 4.75rem; }
  .scroll-cinema-release { bottom: 1.5rem; font-size: clamp(1.5rem, 8vw, 2.5rem); }
  .work-index-head h2 { font-size: 13vw; line-height: .88; }
  .project-group-head > div { display: block; }
  .project-group-head h3 { font-size: 18vw; }
  .project-group-head > p { padding-left: 0; }
  .project-index-list a {
    grid-template-columns: 3.8rem minmax(0, 1fr) auto;
    min-height: 7.5rem;
  }
  .project-index-list strong { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .project-index-list small { font-size: .76rem; }
  .video-grid { gap: 2.5rem .65rem; }
  .project-copy h3 { font-size: 12vw; }
  .home-page .visual-f1 { min-height: 78vw; }
  .home-page .visual-f1 .visual-label { font-size: 25vw; }
  .project-meta { grid-template-columns: .5fr 1.5fr .5fr; }
  .home-page .project-story .story-facts { grid-template-columns: 1fr; }
  .home-page .project-story .story-facts div { padding-right: 0; }
  .panel-action { right: .75rem; bottom: .75rem; padding: .65rem .75rem; font-size: .7rem; }
  .home-page .more-teaser {
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 0;
  }
  .home-page .more-teaser::before {
    background:
      linear-gradient(
        180deg,
        rgba(27, 17, 15, .22) 0%,
        rgba(29, 18, 15, .42) 28%,
        rgba(29, 18, 15, .64) 43%,
        rgba(29, 18, 15, .68) 78%,
        rgba(29, 18, 15, .2) 100%
      ),
      linear-gradient(90deg, rgba(24, 15, 13, .34), rgba(24, 15, 13, .18));
  }
  .more-teaser h2 { font-size: 17vw; line-height: .82; }
  .more-teaser-content > div { margin-left: 0; }
  .working-principles { margin-top: 0; }
  .footer-main { min-height: 100svh; }
  .footer-copy-grid {
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: 100svh;
    padding: 20svh 0 17svh;
  }
  .footer-character-landing {
    position: absolute;
    inset: 23% 0 16%;
  }
  .footer-copy-grid .footer-availability {
    max-width: 72%;
    font-size: clamp(2.6rem, 12vw, 4.2rem);
  }
  .footer-availability--left { justify-self: start; padding-top: 0; text-align: left; }
  .footer-availability--right { justify-self: end; align-self: end; padding-top: 0; text-align: right; }
  .footer-availability span { display: block; }
  .footer-landing { right: -25%; bottom: 1%; width: 116vw; }
  .footer-landing-character { left: 42%; bottom: 9%; width: 58%; }
  .footer-landing-laptop { left: 31%; bottom: 35%; }
  .footer-landing-lemon { left: 58%; bottom: 37%; }
  .home-page .site-footer { min-height: 118svh; }
  .home-page .footer-main { padding-top: clamp(4.5rem, 14vw, 7rem); }
  .home-page .footer-bottom { bottom: 1.25rem; }
  .footer-workstation { left: 50%; bottom: -3%; width: 105vw; opacity: .92; }
  .f1-case-spine { grid-template-columns: 1fr; }
  .f1-case-spine > div,
  .f1-case-spine > div:nth-child(4) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .f1-case-spine > div:first-child { border-top: 0; }
  .pga-impact-rail { grid-template-columns: 1fr; }
  #bmw-pga .pga-edition-line { grid-template-columns: 1fr; gap: .35rem; }
  .pga-case-head { display: block; }
  .pga-case-head h3, .pga-case-head h1 { margin-top: 1.25rem; font-size: clamp(2.8rem, 15vw, 4.2rem); line-height: .86; }
  .pga-case-head > p:last-child { margin-top: 1.5rem; }
  .pga-project-meta { grid-template-columns: 1fr; }
  .pga-impact-rail div,
  .pga-impact-rail div:nth-child(4) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pga-impact-rail div:first-child { border-top: 0; }
  .pga-narrative { gap: 2.5rem; margin-top: 4rem; }
  .case-page[data-project="bmw-pga"] #bmw-pga .portfolio-series { padding: 2.75rem 0; }
  .case-page[data-project="bmw-pga"] .site-header .brand,
  .case-page[data-project="bmw-pga"] .nav-list a,
  .case-page[data-project="bmw-pga"] .video-item > a,
  .case-page[data-project="bmw-pga"] .case-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .series-media.pga-world-films { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .pga-world-films .pga-world-still { display: none; }
  .pga-opening-story { margin-top: 2.75rem; }
  .pga-opening-story section { grid-template-columns: 1fr; gap: 1rem; padding: 1.65rem 0; }
  .pga-opening-story section > p:last-child { grid-column: 1; margin-top: .5rem; }
  .pga-results dl div { padding: .85rem 0; }
  .site-footer { min-height: 80svh; }
  .footer-links { justify-content: space-between; width: 100%; gap: .75rem; font-size: .88rem; }

  /* Keep the touch rail in normal document flow; desktop flight transforms
     are deliberately disabled by script at this breakpoint. */
  .home-page .project-index-list li,
  .home-page .project-index-list li.reveal,
  .home-page .project-index-list li.reveal.is-visible {
    translate: none !important;
    transform: none !important;
    filter: none !important;
    clip-path: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .parallax-node,
  .project-index-list strong,
  .project-index-list span,
  .project-index-list small { transform: none !important; will-change: auto; }
  .project-index-list li.reveal { clip-path: none; }
  .scroll-cinema { display: none; }
  .home-page::after,
  .project-card-media::before,
  .scroll-cinema-atmosphere::after { display: none; }
  .footer-character-landing {
    min-height: 58svh;
    background: url("assets/images/illustrations/scroll-frames/approved-v2/frame-34.webp") center / contain no-repeat;
  }
  .footer-landing-impact { display: none; }
  .footer-landing-settle,
  .footer-landing-table,
  .footer-landing-laptop,
  .footer-landing-lemon {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .home-page .hero-title > span:first-child:hover,
  .home-page .section-heading h2:hover,
  .home-page .directory-card:hover b,
  .home-page .more-teaser h2:hover { filter: none; opacity: 1; transform: none; }
}

/* Retained only as an inactive review experiment; the original project
   constellation above is the live presentation. */
@media (max-width: 0px) {
/* Project index: full-bleed image moments with a single reading rail. */
.scroll-cinema.is-project-index .scroll-character,
.scroll-cinema.is-project-index .scroll-cinema-atmosphere,
.scroll-cinema.is-project-index .journey-chair,
.scroll-cinema.is-project-index .journey-card,
.scroll-cinema.is-project-index .scroll-workstation,
.scroll-cinema.is-project-index .scroll-cinema-index,
.scroll-cinema.is-project-index .scroll-cinema-prompt,
.scroll-cinema.is-project-index .scroll-cinema-release {
  opacity: 0 !important;
  transition: opacity .18s ease-out;
}
.home-page .project-index-list {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(10rem, 14rem) minmax(15rem, 18rem);
  grid-auto-rows: auto;
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
  width: min(100%, 76rem);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 3rem);
  background: none;
}
.home-page .project-index-list li,
.home-page .project-index-list li:nth-child(n) {
  align-self: start;
  width: min(100%, 18rem);
  margin: 0;
  transform: none !important;
  filter: none !important;
  clip-path: none;
}
.project-group--f1 .project-index-list li:nth-child(1),
.project-group--bmw .project-index-list li:nth-child(1) { grid-column: 1; }
.project-group--f1 .project-index-list li:nth-child(2),
.project-group--bmw .project-index-list li:nth-child(2) { grid-column: 3; justify-self: end; }
.project-group--f1 .project-index-list li:nth-child(3) { grid-column: 3; grid-row: 2; justify-self: end; }
.project-group--bmw .project-index-list li:nth-child(3) { grid-column: 1; grid-row: 2; }
.project-group--bmw .project-index-list li:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: end; }
.project-group--bmw .project-index-list li:nth-child(5) { grid-column: 1; grid-row: 3; }
.home-page .project-index-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  gap: .38rem 1rem;
  width: 100%;
  aspect-ratio: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-page .project-index-list a::before,
.home-page .project-index-list a::after { display: none; }
.home-page .project-index-list a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 8px;
  transform: none;
  box-shadow: none;
}
.home-page .project-card-media {
  grid-column: 1 / -1;
  grid-row: 1;
  /* Full-bleed within the portfolio container, never the browser edge. */
  width: 100%;
  height: clamp(12rem, 19vw, 17rem);
  min-height: 0;
  margin-inline: 0;
  overflow: hidden;
  background: #d8cec4;
}
.home-page .project-card-media::before,
.home-page .project-card-media::after { display: none; }
.home-page .project-card-media img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.home-page .project-index-list a > strong {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding-left: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.88rem, 1.2vw, 1.05rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}
.home-page .project-index-list a > i {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
  padding-right: 0;
  color: var(--signal);
  font-size: 1.1rem;
}
.home-page .project-index-list a > span,
.home-page .project-index-list a > small {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: clamp(.72rem, .92vw, .84rem);
  line-height: 1.35;
}
.home-page .project-index-list a > span {
  grid-column: 1;
  grid-row: 3;
  padding-left: 0;
  color: var(--signal);
  font-family: "DM Mono", monospace;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.home-page .project-index-list a > small {
  grid-column: 1 / -1;
  grid-row: 4;
  max-width: 42rem;
  padding: .05rem 0 0;
}
@media (hover: hover) and (pointer: fine) {
  .home-page .project-index-list a:hover { transform: none; box-shadow: none; }
  .home-page .project-index-list a:hover .project-card-media img { transform: scale(1.015); }
}
@media (max-width: 700px) {
  .home-page .project-index-list {
    display: block;
    width: min(100%, 22rem);
    padding-block: 0;
  }
  .home-page .project-index-list li,
  .home-page .project-index-list li:nth-child(n) { margin-bottom: 3.5rem; }
  .home-page .project-card-media { height: min(62vw, 17rem); min-height: 0; }
  .home-page .project-index-list a > strong { font-size: .92rem; }
  .home-page .project-index-list a > small { font-size: .8rem; }
}
}

/* When the work is visible, the character remains the foreground layer.
   The project covers stay interactive underneath; only supporting cinema
   scenery is cleared so nothing competes with the character. */
.scroll-cinema.is-project-grid .scroll-cinema-sticky {
  z-index: 7;
}
.scroll-cinema.is-project-grid .scroll-cinema-atmosphere,
.scroll-cinema.is-project-grid .scroll-footer-table,
.scroll-cinema.is-project-grid .impact-contact-points,
.scroll-cinema.is-project-grid .impact-surface-reflection,
.scroll-cinema.is-project-grid .scroll-cinema-index,
.scroll-cinema.is-project-grid .scroll-cinema-prompt,
.scroll-cinema.is-project-grid .scroll-cinema-release {
  opacity: 0 !important;
}

/* Project covers: edge-to-edge imagery with a restrained tape label. */
.home-page .project-index-list a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0;
  aspect-ratio: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .project-index-list a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: .55rem;
  box-shadow: none;
}

.home-page .project-card-media {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .project-card-media::before,
.home-page .project-card-media::after {
  display: none;
}

.home-page .project-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.01);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}

.home-page .project-index-list a > i,
.home-page .project-index-list a > small {
  display: none;
}

.home-page .project-index-list a > span {
  display: block;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  margin: 0;
  padding: .46rem .75rem .42rem .35rem;
  color: var(--paper);
  background: var(--signal-blue);
  font-family: "DM Mono", monospace;
  font-size: clamp(.58rem, .66vw, .66rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .07em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-page .project-index-list a > strong {
  position: static;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: .46rem .75rem .42rem;
  overflow: hidden;
  color: var(--paper);
  background: var(--signal-blue);
  box-shadow: none;
  font-family: var(--sans);
  font-size: clamp(.64rem, .72vw, .72rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .055em;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform: none;
  pointer-events: none;
}

.home-page .project-index-list li:nth-child(even) a > strong {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .home-page .project-index-list a:hover {
    transform: translateY(-.25rem);
    box-shadow: none;
  }

  .home-page .project-index-list a:hover .project-card-media img {
    transform: scale(1.035);
  }
}

@media (max-width: 700px) {
  .home-page .project-index-list a {
    padding: 0;
  }

  .home-page .project-card-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .home-page .project-index-list a > strong {
    max-width: none;
    padding: .42rem .72rem .38rem;
    font-size: .68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .project-index-list a,
  .home-page .project-card-media img {
    transition: none;
  }
}

/* Stage 2: a quiet film-chapter signal. It floats above the layout without
   occupying page space or competing with the character. */
.chapter-signal {
  position: fixed;
  z-index: 85;
  left: clamp(1.25rem, 3vw, 3rem);
  bottom: clamp(1.15rem, 3vw, 2.5rem);
  width: clamp(11.5rem, 17vw, 14rem);
  padding: .55rem .7rem .45rem;
  color: var(--paper);
  background: linear-gradient(90deg, rgba(36, 24, 20, .68), rgba(36, 24, 20, .2) 76%, transparent);
  opacity: 0;
  transform: translate3d(0, .45rem, 0);
  transition: opacity .18s cubic-bezier(.23, 1, .32, 1), transform .18s cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
  filter: drop-shadow(0 .25rem .55rem rgba(18, 12, 10, .14));
}

.chapter-signal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.chapter-signal-current {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .18rem;
  font-family: "DM Mono", monospace;
  font-size: .59rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34);
}

.chapter-signal-current span {
  color: var(--signal-blue);
  font-weight: 700;
}

.chapter-signal-current strong {
  overflow: hidden;
  font: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity .16s cubic-bezier(.23, 1, .32, 1), transform .16s cubic-bezier(.23, 1, .32, 1);
}

.chapter-signal.is-changing .chapter-signal-current strong {
  opacity: 0;
  transform: translate3d(0, .2rem, 0);
}

.chapter-signal ol {
  display: flex;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-signal li {
  flex: 1;
}

.chapter-signal a {
  display: flex;
  align-items: center;
  height: 1rem;
}

.chapter-signal a span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  color: rgba(255, 244, 229, .3);
  transform-origin: left center;
  transition: color .16s cubic-bezier(.23, 1, .32, 1), transform .16s cubic-bezier(.23, 1, .32, 1);
}

.chapter-signal li.is-past a span {
  color: rgba(36, 83, 242, .62);
}

.chapter-signal li.is-active a span {
  color: var(--signal-blue);
  transform: scaleY(2);
}

@media (hover: hover) and (pointer: fine) {
  .chapter-signal a:hover span {
    color: var(--paper);
    transform: scaleY(2);
  }
}

@media (max-width: 700px) {
  .chapter-signal {
    left: .75rem;
    bottom: .75rem;
    width: 9.75rem;
    padding: .45rem .55rem .35rem;
  }

  .chapter-signal-current {
    font-size: .54rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-signal,
  .chapter-signal-current strong,
  .chapter-signal a span {
    transition: none;
  }
}

/* Stage 3: one F1 Arcade living-cover prototype. The label and card geometry
   stay fixed; only the approved imagery changes on deliberate interaction. */
.home-page .project-card-media--living .project-cover-base,
.home-page .project-card-media--living .project-cover-preview {
  transition:
    opacity .22s cubic-bezier(.23, 1, .32, 1),
    transform .32s cubic-bezier(.23, 1, .32, 1),
    filter .18s cubic-bezier(.23, 1, .32, 1);
}

.home-page .project-card-media--living .project-cover-base {
  z-index: 1;
  opacity: 1;
  transform: scale(1.01);
}

.home-page .project-card-media--living .project-cover-preview {
  z-index: 2;
  opacity: 0;
  transform: scale(1.045);
  filter: blur(1.5px);
}

@media (hover: hover) and (pointer: fine) {
  .home-page .project-index-list a:hover .project-card-media--living .project-cover-base,
  .home-page .project-index-list a:focus-visible .project-card-media--living .project-cover-base {
    opacity: 0;
    transform: scale(1.018);
    filter: blur(1px);
  }

  .home-page .project-index-list a:hover .project-card-media--living .project-cover-preview,
  .home-page .project-index-list a:focus-visible .project-card-media--living .project-cover-preview {
    opacity: 1;
    transform: scale(1.01);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .project-card-media--living .project-cover-base,
  .home-page .project-card-media--living .project-cover-preview {
    transition: none;
  }
}

/* Identity micrographic: one opening stamp and one closing signature per page. */
.identity-stamp {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #2252d6;
  box-shadow: 0 .9rem 2.4rem rgba(20, 11, 8, .2);
}

.identity-stamp img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(3.2) brightness(.92);
}

.identity-stamp--start {
  position: absolute;
  z-index: 8;
  top: clamp(6rem, 10vh, 8rem);
  right: var(--pad);
  width: clamp(7.5rem, 11vw, 10.5rem);
}

.case-page > .identity-stamp--start {
  top: clamp(13rem, 30vh, 16rem);
  width: clamp(6.5rem, 9vw, 8.5rem);
}

.home-page .hero > .identity-stamp--start,
.f1-page .f1-page-hero > .identity-stamp--start,
.bmw-hub-page .bmw-hub-hero > .identity-stamp--start {
  position: static;
  grid-column: 11 / -1;
  align-self: end;
  justify-self: end;
  width: clamp(7.5rem, 11vw, 10.5rem);
}

.home-page .hero > .identity-stamp--start { grid-row: 4; }
.f1-page .f1-page-hero > .identity-stamp--start,
.bmw-hub-page .bmw-hub-hero > .identity-stamp--start { grid-row: 3; }

.identity-stamp--end {
  width: clamp(15rem, 22vw, 21rem);
  margin: clamp(4rem, 7vw, 7rem) var(--pad) clamp(2.5rem, 5vw, 5rem) auto;
}

.home-page .identity-stamp--end {
  position: absolute;
  z-index: 8;
  right: var(--pad);
  bottom: 5.25rem;
  width: clamp(7.5rem, 10vw, 9.5rem);
  margin: 0;
}

@media (max-width: 700px) {
  .identity-stamp--start {
    top: 5.25rem;
    width: 6.25rem;
  }

  .case-page > .identity-stamp--start {
    top: 10.5rem;
    width: 5.5rem;
  }

  .home-page .hero > .identity-stamp--start,
  .f1-page .f1-page-hero > .identity-stamp--start,
  .bmw-hub-page .bmw-hub-hero > .identity-stamp--start {
    grid-column: 9 / -1;
    width: 6.25rem;
  }

  .home-page .hero > .identity-stamp--start {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .f1-page .f1-page-hero > .identity-stamp--start,
  .bmw-hub-page .bmw-hub-hero > .identity-stamp--start {
    grid-row: 4;
  }

  .identity-stamp--end {
    width: min(15rem, calc(100vw - 2 * var(--pad)));
    margin-top: 3rem;
  }

  .home-page .identity-stamp--end {
    right: var(--pad);
    bottom: 8.5rem;
    width: 6.25rem;
  }
}

/* Art direction, header preview r1.
   The scroll story and its geometry are deliberately untouched. */
.home-page .site-header .brand--identity {
  display: inline-flex;
  align-items: center;
  width: clamp(5.75rem, 6.5vw, 6.5rem);
  min-width: 0;
  min-height: 2.75rem;
  overflow: visible;
}

.home-page .site-header .brand-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 402 / 154;
  flex: none;
  overflow: visible;
  fill: currentColor;
  transition: color .16s cubic-bezier(.23, 1, .32, 1), opacity .16s cubic-bezier(.23, 1, .32, 1);
}

.home-page .site-header.is-on-hero .brand-logo {
  color: #241814;
}

.home-page .site-header .nav-list,
.home-page .site-header .sfx-toggle {
  font-family: var(--mono, "DM Mono", monospace);
  font-size: max(.75rem, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.home-page .hero > .identity-stamp--start {
  display: none;
}

@media (max-width: 700px) {
  .home-page .site-header {
    gap: .75rem;
  }

  .home-page .site-header .brand--identity {
    width: 5.25rem;
    min-width: 0;
  }

  .home-page .site-header .nav-list,
  .home-page .site-header .sfx-toggle {
    font-size: max(.75rem, 12px);
    letter-spacing: .025em;
  }
}

/* Art direction, hero micrographic preview r1.
   Replaces only the opening type lock-up; scroll-story geometry is unchanged. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-page .hero-title--micrographic {
  grid-column: 1 / 8;
  grid-row: 3;
  align-self: center;
  justify-self: start;
  width: clamp(16rem, 24vw, 22rem);
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
}

.home-page .hero-title--micrographic .hero-micrographic-art {
  display: block;
  width: 100%;
  overflow: visible;
  background: transparent;
}

/* Figma 2045:49 rebuilt as responsive page layers rather than a flattened PNG. */
.home-page .micrographic-lockup {
  container-type: inline-size;
  display: grid;
  width: 100%;
  gap: 2.4cqw;
  color: #241814;
  font-family: var(--mono, "DM Mono", monospace);
  font-size: 4.6cqw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.home-page .micrographic-lockup__ident {
  position: relative;
  display: block;
  height: 27cqw;
}

.home-page .micrographic-lockup__ident > i {
  position: absolute;
  inset: 0 auto auto 0;
  width: 40cqw;
  height: 27cqw;
  background: currentColor;
  clip-path: polygon(48% 0, 53% 31%, 61% 43%, 100% 48%, 61% 53%, 53% 64%, 48% 100%, 43% 64%, 35% 53%, 0 48%, 35% 43%, 43% 31%);
}

.home-page .micrographic-lockup__ident > i::after {
  content: "";
  position: absolute;
  left: 39cqw;
  top: calc(50% - .7cqw);
  width: 49cqw;
  height: 1.4cqw;
  border-radius: 99px;
  background: currentColor;
}

.home-page .micrographic-lockup__ident > b {
  position: absolute;
  z-index: 1;
  left: 31cqw;
  top: 2cqw;
  font-family: var(--sans, Arial, sans-serif);
  font-size: 25cqw;
  font-stretch: condensed;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.055em;
}

.home-page .micrographic-lockup__ident > sup {
  position: absolute;
  z-index: 2;
  left: 84cqw;
  top: 1cqw;
  font: 800 7cqw/1 Arial, sans-serif;
}

.home-page .micrographic-lockup__role,
.home-page .micrographic-lockup__experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10cqw;
}

.home-page .micrographic-lockup__role {
  font-size: 6.3cqw;
  letter-spacing: -.065em;
}

.home-page .micrographic-lockup__experience {
  font-size: 5.3cqw;
  white-space: nowrap;
}

.home-page .micrographic-lockup__pill {
  justify-self: start;
  margin-top: 2.4cqw;
  padding: 1.7cqw 5.2cqw;
  border: .35cqw solid currentColor;
  border-radius: 999px;
  font-size: 4.25cqw;
  white-space: nowrap;
}

.home-page .micrographic-lockup__detail {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: center;
  margin-top: 4cqw;
}

.home-page .micrographic-lockup__detail > strong {
  font: 500 3.15cqw/.95 var(--mono, monospace);
  letter-spacing: .04em;
}

.home-page .micrographic-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqw;
}

.home-page .micrographic-icons > i { position: relative; display: block; flex: none; }
.home-page .micrographic-eye { width: 16cqw; height: 8cqw; border-radius: 70% 0 70% 0; background: currentColor; transform: rotate(-45deg); }
.home-page .micrographic-eye::after { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: var(--hero-bg, #efaa78); }
.home-page .micrographic-globe { width: 13cqw; height: 8cqw; border: .45cqw solid currentColor; border-radius: 50%; }
.home-page .micrographic-globe::before { content: ""; position: absolute; inset: -.45cqw 34%; border: .4cqw solid currentColor; border-top: 0; border-bottom: 0; border-radius: 50%; }
.home-page .micrographic-globe::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .2cqw); height: .4cqw; background: currentColor; }
.home-page .micrographic-triad { width: 8cqw; height: 8cqw; background: radial-gradient(circle at 50% 20%, currentColor 0 20%, transparent 21%), radial-gradient(circle at 25% 72%, currentColor 0 20%, transparent 21%), radial-gradient(circle at 75% 72%, currentColor 0 20%, transparent 21%); }

.home-page .micrographic-lockup__story {
  margin-top: 3cqw;
  font-size: 5.25cqw;
  white-space: nowrap;
}

.home-page .micrographic-lockup__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8cqw;
  margin-top: 3cqw;
}

.home-page .micrographic-lockup__bottom > b {
  font-family: var(--sans, Arial, sans-serif);
  font-size: 11cqw;
  letter-spacing: -.06em;
}

.home-page .micrographic-barcode {
  display: block;
  height: 3cqw;
  background: repeating-linear-gradient(90deg, currentColor 0 .7cqw, transparent .7cqw 1.3cqw);
}

.home-page .identity-stamp {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.home-page .identity-stamp--end .micrographic-lockup { color: #fffaf0; }

.home-page .hero-title--micrographic .hero-micrographic-art img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  mix-blend-mode: normal;
}

.home-page .hero-film-meta--availability {
  justify-content: flex-end;
  text-align: right;
}

@media (max-width: 800px) {
  .home-page .hero-title--micrographic {
    grid-column: 1 / -1;
    width: min(72vw, 18rem);
    margin-top: clamp(.75rem, 2.5vh, 1.25rem);
  }
}

/* Homepage typography system r1. Scoped to the homepage and removable as one
   block; the scroll-story geometry and character sequence are unchanged. */
.home-page {
  --sans: Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

.home-page .site-header .nav-list,
.home-page .site-header .sfx-toggle {
  font-family: var(--mono);
  font-size: clamp(.76rem, .78vw, .84rem);
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.home-page .site-header--compact-editorial.is-on-hero .nav-list,
.home-page .site-header--compact-editorial.is-on-hero .sfx-toggle {
  color: var(--signal-blue);
}

.home-page .site-header--compact-editorial.is-on-hero .nav-list a,
.home-page .site-header--compact-editorial.is-on-hero .sfx-toggle {
  text-shadow: none;
}

.home-page .site-header--compact-editorial.is-on-hero .frame32-icon {
  opacity: .86;
}

/* Selected project-space direction: editorial hooks occupy the final open
   grid cell in each chapter. They remain part of the document flow and never
   alter the centred character or the approved scroll-frame sequence. */
.home-page .project-index-list .project-editorial-hook,
.js .home-page .project-index-list .project-editorial-hook.reveal,
.js .home-page .project-index-list .project-editorial-hook.reveal.is-visible {
  position: relative;
  z-index: 5;
  align-self: center;
  width: min(100%, 27rem);
  margin: 0;
  border: 0;
  opacity: 1;
  clip-path: none;
  transform: none !important;
  filter: none !important;
}

.home-page .project-group--f1 .project-editorial-hook {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  color: var(--paper);
}

.home-page .project-group--bmw .project-editorial-hook {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  color: var(--ink);
}

.project-editorial-hook__inner > p:first-child {
  margin: 0 0 .8rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(.66rem, .72vw, .78rem);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-editorial-hook__inner h4 {
  max-width: 8.5ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -.07em;
  line-height: .84;
}

.project-editorial-hook__inner > p:nth-of-type(2) {
  max-width: 28rem;
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  padding-top: clamp(.8rem, 1.4vw, 1.1rem);
  border-top: 1px solid currentColor;
  font-family: var(--mono);
  font-size: clamp(.72rem, .84vw, .86rem);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.55;
}

.project-editorial-hook__inner > a {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  margin-top: clamp(1rem, 2vw, 1.45rem);
  color: inherit;
  font-family: var(--mono);
  font-size: clamp(.66rem, .72vw, .78rem);
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
}

.project-editorial-hook__inner > a span {
  color: var(--signal);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.project-editorial-hook__inner > a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: .45rem;
}

@media (hover: hover) and (pointer: fine) {
  .project-editorial-hook__inner > a:hover span { transform: translate(.18rem, -.18rem); }
}

@media (max-width: 700px) {
  .home-page .project-group--f1 .project-editorial-hook,
  .home-page .project-group--bmw .project-editorial-hook {
    display: block;
    width: min(100%, 22rem);
    margin: clamp(1rem, 4vw, 2rem) auto clamp(3.5rem, 12vw, 5rem);
    color: var(--ink);
  }

  .project-editorial-hook__inner h4 { font-size: clamp(2.8rem, 14vw, 4.2rem); }
}

.home-page .hero-kicker,
.home-page .eyebrow,
.home-page .working-principles dt,
.home-page .footer-links {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
}

.home-page .project-index-list a > strong {
  font-family: var(--sans);
  font-weight: 500;
}

.home-page .more-teaser-content a {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
}

.home-page .hero-film-meta,
.home-page .scroll-cinema-index,
.home-page .chapter-signal-current,
.home-page .project-index-list a > span,
.home-page .footer-contact-label,
.home-page .footer-bottom > p {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .045em;
}

.home-page .chapter-signal-current span,
.home-page .chapter-signal-current strong { font-weight: 500; }

.home-page .hero-copy p,
.home-page .working-principles > p,
.home-page .working-principles dd {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
}

.home-page .work-index-head > p:last-child,
.home-page .project-group-head > p {
  font-family: var(--mono);
  font-weight: 500;
}

.home-page .hero-copy strong {
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .055em;
}

.home-page .more-teaser h2,
.home-page .footer-availability--right span {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.035em;
}

@media (max-width: 700px) {
  .home-page .site-header .nav-list,
  .home-page .site-header .sfx-toggle {
    font-size: .68rem;
    letter-spacing: .015em;
  }
}

/* Stable homepage rollback r8.
   Neutralises the rejected full Figma-frame mount without changing the
   approved header, scroll story, project work or responsive geometry. */
.home-page .hero-title--micrographic {
  width: clamp(24rem, 42vw, 40rem);
}

.home-page .identity-stamp {
  overflow: hidden;
  background: #2252d6;
  box-shadow: 0 .9rem 2.4rem rgba(20, 11, 8, .2);
}

@media (max-width: 800px) {
  .home-page .hero-title--micrographic {
    width: min(88vw, 23rem);
  }
}

/* Header identity r10: approved Figma layers at their original header size,
   assigned the established Signal blue. No other micrographic is affected. */
.home-page .site-header .brand--identity {
  width: clamp(5.75rem, 6.5vw, 6.5rem);
  color: var(--signal-blue);
}

.home-page .site-header .brand-logo,
.home-page .site-header.is-on-hero .brand-logo {
  color: var(--signal-blue);
}

@media (max-width: 700px) {
  .home-page .site-header .brand--identity {
    width: 5.25rem;
  }
}

/* Hero micrographic r11: 20% smaller than the approved r8 composition.
   The source artwork becomes an alpha mask so Signal blue is exact rather
   than approximated with a colour filter. */
.home-page .hero-title--micrographic {
  width: min(clamp(19.2rem, 33.6vw, 32rem), 42svh);
}

.home-page .hero-title--micrographic .hero-micrographic-art {
  aspect-ratio: 1;
  background-color: var(--signal-blue);
  -webkit-mask: url("assets/images/identity/shaun-micrographic-transparent.png") center / contain no-repeat;
  mask: url("assets/images/identity/shaun-micrographic-transparent.png") center / contain no-repeat;
}

/* Homepage header + footer r13.
   The full micrographic is intentionally paused here. The header borrows only
   the quiet name-and-signal logic of Figma frame 31, leaving the scroll scene
   and its character sequence completely independent. */
.home-page .site-header .brand--name {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  width: auto;
  min-height: 2.75rem;
  color: currentColor;
  font-family: var(--sans);
  font-size: clamp(.9rem, 1.05vw, 1.05rem);
  font-weight: 600;
  letter-spacing: -.035em;
  text-transform: none;
}

.home-page .site-header.is-on-hero .brand--name { color: var(--ink); }

.home-page .brand-name { white-space: nowrap; }

.home-page .brand-signal {
  position: relative;
  display: inline-block;
  width: .56rem;
  height: .56rem;
  flex: none;
  color: var(--signal-blue);
}

.home-page .brand-signal::before,
.home-page .brand-signal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.home-page .brand-signal::before { width: 100%; height: .16rem; }
.home-page .brand-signal::after { width: .16rem; height: 100%; }

.home-page .footer-bottom {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 250, 240, .28);
  color: rgba(255, 250, 240, .9);
}

.home-page .footer-bottom > p {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(.62rem, .66vw, .72rem);
  line-height: 1.45;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.home-page .footer-location span { color: var(--signal-light); }

.home-page .footer-links {
  justify-content: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  font-size: clamp(.76rem, .78vw, .84rem);
}

.home-page .footer-credit { text-align: right; }
.home-page .footer-credit__name { color: var(--paper); font-family: var(--sans); font-weight: 500; letter-spacing: 0; text-transform: none; }

@media (max-width: 700px) {
  .home-page .site-header .brand--name { font-size: .9rem; }
  .home-page .footer-bottom {
    grid-template-columns: 1fr auto;
    row-gap: 1.5rem;
    padding-top: 1rem;
  }
  .home-page .footer-links {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .home-page .footer-location { grid-column: 1; grid-row: 2; }
  .home-page .footer-credit { grid-column: 2; grid-row: 2; }
}

.home-page .hero-title--micrographic .hero-micrographic-art img {
  opacity: 0;
}

@media (max-width: 800px) {
  .home-page .hero-title--micrographic {
    width: min(70.4vw, 18.4rem);
  }
}

/* Frame 31 opening identity r14. The full micrographic is removed from the
   opening composition; this name-only signal occupies the same hero grid row
   and does not modify any scroll-story dimensions or timings. */
.home-page .hero-title--name-lockup {
  grid-column: 1 / 11;
  grid-row: 3;
  align-self: center;
  width: min(100%, 72rem);
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

.home-page .hero-name-lockup {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(8rem, 20vw, 18rem);
  color: var(--signal-blue);
}

.home-page .hero-name-lockup b {
  position: relative;
  z-index: 2;
  margin-left: clamp(4.75rem, 10.5vw, 10rem);
  font-family: var(--sans, Arial, sans-serif);
  font-size: clamp(7rem, 18vw, 17rem);
  font-stretch: condensed;
  font-weight: 800;
  line-height: .72;
  letter-spacing: -.05em;
  text-transform: uppercase;
  transform: scaleX(.78);
  transform-origin: left center;
}

/* Site-wide project typography contract. Editorial serif headings and Arial
   structural displays keep their existing rules; reading copy moves to the
   lighter DM Mono cut, while labels and data stay Medium. */
.case-page p,
.case-page dd,
.case-page figcaption,
.bmw-hub-page p,
.bmw-hub-page dd,
.bmw-hub-page figcaption,
.f1-page p,
.f1-page dd,
.f1-page figcaption {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-size: clamp(.9375rem, 1vw, 1rem);
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.case-page dt,
.case-page .story-label,
.case-page .pga-edition-line,
.case-page .case-footer,
.bmw-hub-page dt,
.bmw-hub-page .bmw-hub-meta,
.f1-page dt,
.f1-page .f1-page-meta {
  font-family: "DM Mono", monospace;
  font-size: max(.75rem, 12px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-page .hero-name-signal {
  position: absolute;
  left: .4rem;
  top: 50%;
  width: clamp(8rem, 18vw, 17rem);
  height: clamp(8rem, 18vw, 17rem);
  transform: translateY(-50%);
}

.home-page .hero-name-signal::before,
.home-page .hero-name-signal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.home-page .hero-name-signal::before { width: 100%; height: 5.5%; }
.home-page .hero-name-signal::after { width: 5.5%; height: 100%; }

@media (max-width: 800px) {
  .home-page .hero-title--name-lockup { grid-column: 1 / -1; width: 100%; }
  .home-page .hero-name-lockup { min-height: 7rem; }
  .home-page .hero-name-lockup b {
    margin-left: clamp(3.8rem, 14vw, 5.25rem);
    font-size: clamp(5.4rem, 27vw, 8.5rem);
  }
  .home-page .hero-name-signal {
    width: clamp(6.5rem, 25vw, 8rem);
    height: clamp(6.5rem, 25vw, 8rem);
  }
}

/* Exact Figma Frame 31 + Frame 32 identity rail r15.
   Every glyph below uses a downloaded Figma vector as its mask. The header is
   transparent so the approved character stays sharp and visible beneath it. */
.figma31-lockup {
  position: relative;
  display: block;
  aspect-ratio: 1466 / 545;
  color: currentColor;
}

.figma31-layer {
  position: absolute;
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.figma31-layer--signal {
  inset: 0;
  -webkit-mask-image: url("assets/images/identity/frame31-signal.svg");
  mask-image: url("assets/images/identity/frame31-signal.svg");
}

.figma31-layer--word {
  top: 13.58%;
  left: 33.08%;
  width: 57.71%;
  height: 60%;
  -webkit-mask-image: url("assets/images/identity/frame31-shaun-word.svg");
  mask-image: url("assets/images/identity/frame31-shaun-word.svg");
}

.home-page .site-header--identity-rail {
  --header-progress: 0;
  --header-journey-progress: 0;
  --header-logo-scale: 1;
  --header-lift: 0px;
  --header-icon-opacity: .58;
  --header-aperture-scale: .28;
  min-height: 4.75rem;
  padding-top: .85rem;
  padding-bottom: .85rem;
  overflow: visible;
  isolation: isolate;
  color: var(--paper);
  background: transparent;
  mix-blend-mode: normal;
  transform: translate3d(0, var(--header-lift), 0);
  transition: color 180ms cubic-bezier(.23, 1, .32, 1);
}

.home-page .site-header--identity-rail.is-on-hero { color: var(--ink); }

.home-page .site-header--identity-rail a,
.home-page .site-header--identity-rail button {
  text-shadow: 0 1px 1px rgba(36, 24, 20, .14);
}

.home-page .brand--figma31 {
  position: relative;
  z-index: 3;
  width: clamp(7.25rem, 9vw, 9.25rem);
  min-height: 2.75rem;
  color: var(--paper);
  transform: scale(var(--header-logo-scale));
  transform-origin: left center;
  will-change: transform;
}

.home-page .site-header--identity-rail.is-on-hero .brand--figma31 { color: var(--signal-blue); }
.figma31-lockup--header { width: 100%; }

.header-identity-track {
  position: absolute;
  z-index: 0;
  right: var(--pad);
  bottom: 0;
  left: var(--pad);
  height: 1px;
  opacity: calc(.18 + var(--header-progress) * .22);
  background:
    linear-gradient(90deg,
      currentColor 0,
      currentColor calc(50% - 7.5rem),
      transparent calc(50% - 7.5rem),
      transparent calc(50% + 7.5rem),
      currentColor calc(50% + 7.5rem),
      currentColor 100%);
  pointer-events: none;
}

.header-character-aperture {
  position: absolute;
  z-index: 1;
  bottom: -.36rem;
  left: 50%;
  width: clamp(9rem, 19vw, 17rem);
  height: .72rem;
  border: 1px solid currentColor;
  border-bottom: 0;
  opacity: calc(.22 + var(--header-progress) * .46);
  transform: translateX(-50%) scaleX(var(--header-aperture-scale));
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;
}

.header-scroll-barcode {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: -.16rem;
  width: clamp(5.5rem, 9vw, 8rem);
  height: .32rem;
  background: currentColor;
  opacity: .68;
  transform: scaleX(var(--header-journey-progress));
  transform-origin: left center;
  -webkit-mask: url("assets/images/identity/frame32-barcode.svg") left center / 100% 100% no-repeat;
  mask: url("assets/images/identity/frame32-barcode.svg") left center / 100% 100% no-repeat;
  will-change: transform;
  pointer-events: none;
}

.home-page .site-header--identity-rail .nav-list {
  position: relative;
  z-index: 3;
  align-items: center;
}

.home-page .site-header--identity-rail .nav-list a {
  gap: .42rem;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), opacity 140ms ease;
}

.home-page .site-header--identity-rail .nav-list a:active,
.home-page .site-header--identity-rail .sfx-toggle:active { transform: scale(.97); }

.frame32-icon {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  background: currentColor;
  opacity: var(--header-icon-opacity);
  transform: translate3d(0, calc((1 - var(--header-progress)) * 3px), 0);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  will-change: transform, opacity;
}

.frame32-icon--eye {
  -webkit-mask-image: url("assets/images/identity/frame32-eye.svg");
  mask-image: url("assets/images/identity/frame32-eye.svg");
}
.frame32-icon--globe {
  -webkit-mask-image: url("assets/images/identity/frame32-globe.svg");
  mask-image: url("assets/images/identity/frame32-globe.svg");
}
.frame32-icon--cluster {
  -webkit-mask-image: url("assets/images/identity/frame32-cluster.svg");
  mask-image: url("assets/images/identity/frame32-cluster.svg");
}

.home-page .hero-title--figma31 {
  grid-column: 1 / 11;
  grid-row: 3;
  align-self: center;
  width: min(72vw, 64rem);
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

.figma31-lockup--hero {
  width: 100%;
  color: var(--signal-blue);
}

.scroll-cinema.is-hero-entry .scroll-character,
.scroll-cinema.is-hero-entry .scroll-character:hover {
  filter: drop-shadow(0 1.2rem 1.5rem rgba(49, 24, 18, .22));
}

@media (hover: hover) and (pointer: fine) {
  .home-page .site-header--identity-rail .nav-list a:hover .frame32-icon { opacity: 1; }
}

@media (max-width: 700px) {
  .home-page .site-header--identity-rail {
    min-height: 4.15rem;
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
  .home-page .brand--figma31 { width: 6.2rem; }
  .home-page .site-header--identity-rail .nav-list { gap: .42rem; }
  .frame32-icon { width: 1rem; height: 1rem; }
  .home-page .site-header--identity-rail .nav-list a {
    width: 1.75rem;
    min-height: 2rem;
    justify-content: center;
  }
  .home-page .site-header--identity-rail .nav-list a > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .home-page .site-header--identity-rail .sfx-toggle {
    white-space: nowrap;
    font-size: .66rem;
  }
  .header-identity-track { right: var(--pad); left: var(--pad); }
  .header-character-aperture { width: 8rem; }
  .header-scroll-barcode { display: none; }
  .home-page .hero-title--figma31 { grid-column: 1 / -1; width: min(94vw, 34rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .site-header--identity-rail {
    --header-logo-scale: .9 !important;
    --header-lift: 0px !important;
    --header-icon-opacity: 1 !important;
    --header-aperture-scale: 1 !important;
  }
  .header-scroll-barcode { transform: scaleX(1); }
}

/* Selected opening direction: Split Signal.
   This is deliberately limited to the first viewport; the approved scroll
   story begins beneath it with its existing timing and frame sequence. */
.home-page .hero--split-opening {
  --hero-opening-progress: 0;
  position: relative;
  min-height: 100svh;
  padding-top: clamp(6rem, 10vh, 7.5rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(1rem, 2.4vh, 2rem);
}

.home-page .hero--single-lockup {
  padding-top: clamp(6.75rem, 11vh, 8rem);
}

.home-page .hero--single-lockup .hero-split-meta {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  width: 100%;
  padding: .65rem 0 .75rem;
  text-align: left;
}

.home-page .hero--single-lockup .hero-meta-cta {
  justify-self: end;
  color: inherit;
  text-align: right;
}

.home-page .hero--single-lockup .hero-meta-cta:hover,
.home-page .hero--single-lockup .hero-meta-cta:focus-visible {
  text-decoration: underline;
  text-underline-offset: .28em;
}

.home-page .hero--split-opening::after {
  display: none;
}

.hero-split-ident {
  position: relative;
  z-index: 5;
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: start;
}

.opening-figma31-lockup {
  width: clamp(12rem, 20vw, 19rem);
  color: var(--signal-blue);
}

.opening-figma31-lockup .figma31-layer--word {
  top: 20%;
  left: 33.56%;
}

.hero-split-meta {
  position: relative;
  z-index: 5;
  grid-column: 8 / 13;
  grid-row: 1;
  display: grid;
  justify-items: end;
  align-self: start;
  gap: .25rem;
  color: rgba(36, 24, 20, .82);
  font-family: var(--mono);
  font-size: clamp(.7rem, .76vw, .82rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .07em;
  text-align: right;
  text-transform: uppercase;
}

.home-page .hero-title--split {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 4fr 8fr;
  column-gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  width: 100%;
  margin: 0;
  font-size: clamp(4rem, 9.8vw, 9.5rem);
  line-height: .8;
  letter-spacing: -.04em;
}

.hero-split-role {
  align-self: center;
  max-width: 6ch;
  font-family: var(--serif);
  font-size: .5em;
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.03em;
  text-transform: none;
}

.hero-split-statement {
  align-self: center;
  line-height: .78;
}

.hero-split-statement em {
  color: var(--signal-blue);
  font: inherit;
  font-style: normal;
}

.hero-opening-character {
  position: absolute;
  z-index: 4;
  /* Match the scroll character's existing entry offset. This keeps the frame-one
     handoff continuous while starting Shaun above the headline. */
  top: 14%;
  left: 50%;
  width: clamp(16rem, 34vw, 32rem);
  aspect-ratio: 1;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) rotate(-6deg);
  transform-origin: center;
  filter: drop-shadow(0 1.2rem 1.5rem rgba(49, 24, 18, .22));
  pointer-events: none;
}

.home-page .hero.has-handed-off-character .hero-opening-character {
  opacity: 0;
  visibility: hidden;
}

/* During the opening handoff, lift the transparent scroll foreground above
   the hero while suppressing its full-screen colour layers. This lets only
   the character pass over the copy instead of hiding the copy beneath the
   scroll scene. */
.scroll-cinema.is-world-active.is-hero-overlap .scroll-cinema-sticky {
  z-index: 8;
}
.scroll-cinema.is-world-active.is-hero-overlap .scroll-cinema-sticky::before,
.scroll-cinema.is-world-active.is-hero-overlap .scroll-cinema-sticky::after {
  opacity: 0;
}

.hero-opening-character img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-page .hero-copy--split {
  position: relative;
  z-index: 5;
  top: auto;
  grid-column: 4 / 13;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  column-gap: clamp(1.5rem, 2.6vw, 2.75rem);
  row-gap: .55rem;
  align-items: start;
  width: 100%;
  max-width: none;
  padding-top: .75rem;
  border-top: 0;
}

.home-page .hero-manifesto p { margin: 0; }

.home-page .hero-copy.hero-manifesto .hero-manifesto-stack {
  grid-column: 1;
  max-width: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.65rem, 2.6vw, 2.75rem);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.home-page .hero-manifesto-stack span { display: block; white-space: nowrap; }
.home-page .hero-manifesto-stack span:nth-child(2) { margin-left: 8%; color: var(--signal-blue); }
.home-page .hero-manifesto-stack span:nth-child(3) { margin-left: 18%; }

.home-page .hero-copy.hero-manifesto .hero-manifesto-body {
  grid-column: 2;
  max-width: 58ch;
  margin-top: .15rem;
  padding-top: .55rem;
  color: rgba(36, 24, 20, .82);
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(.9375rem, 1vw, 1rem);
  line-height: 1.6;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .home-page .hero--split-opening {
    min-height: 100svh;
    padding-top: 5.75rem;
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: .85rem;
  }

  .home-page .hero--single-lockup {
    padding-top: 5.25rem;
  }

  .hero-split-ident { grid-column: 1 / 7; }
  .opening-figma31-lockup { width: min(42vw, 10.75rem); }

  .hero-split-meta {
    grid-column: 7 / 13;
    font-size: .58rem;
    letter-spacing: .045em;
  }

  .home-page .hero--single-lockup .hero-split-meta {
    grid-column: 1 / -1;
    grid-template-columns: auto auto 1fr;
    gap: .7rem;
    padding: .5rem 0 .6rem;
  }

  .home-page .hero-title--split {
    grid-column: 1 / -1;
    display: block;
    align-self: center;
    font-size: clamp(3.2rem, 16.4vw, 5.4rem);
    line-height: .78;
  }

  .hero-split-role {
    width: 6ch;
    margin-bottom: .55em;
    font-size: .58em;
    line-height: .76;
  }

  .hero-split-statement { display: block; }

  .hero-opening-character {
    top: 32%;
    width: min(78vw, 22rem);
  }

  .home-page .hero-copy--split {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    row-gap: .65rem;
    padding-bottom: 1.25rem;
  }

  .home-page .hero-copy.hero-manifesto .hero-manifesto-stack { grid-column: 1; max-width: 13ch; font-size: clamp(1.55rem, 7.2vw, 2.15rem); }
  .home-page .hero-manifesto-stack span:nth-child(2) { margin-left: 4%; }
  .home-page .hero-manifesto-stack span:nth-child(3) { margin-left: 8%; }
  .home-page .hero-copy.hero-manifesto .hero-manifesto-body { grid-column: 1; max-width: 54ch; margin-top: 0; padding-top: .25rem; font-size: .72rem; line-height: 1.45; }

  .fall-editorial-copy {
    top: 0;
    left: 1rem;
    width: min(46vw, 15rem);
  }

  .fall-editorial-copy::before {
    width: 2.25rem;
    margin-bottom: .65rem;
  }

  .fall-editorial-copy__lead {
    font-size: .7rem;
    line-height: 1.42;
  }

  .fall-editorial-copy__landing {
    margin-top: .75rem !important;
    font-size: clamp(1.38rem, 6.72vw, 1.98rem);
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .fall-editorial-copy {
    top: 0;
    left: 50%;
    width: min(48rem, 82vw);
  }

  .fall-editorial-copy__lead { font-size: .76rem; }
  .fall-editorial-copy__landing { font-size: clamp(1.74rem, 3.6vw, 2.4rem); }
}

@media (max-width: 700px) {
  .fall-editorial-copy__landing > span,
  .fall-editorial-copy__landing > strong { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-opening-character { opacity: 1; will-change: auto; }
}

/* Approved Signal Blue footer.
   The band is anchored to the footer in document space so the page scrolls
   into it while the approved character sequence remains untouched above it. */
.home-page .site-footer {
  position: relative;
  z-index: auto;
  display: block;
  overflow: clip;
  min-height: 118svh;
  padding: 0;
  color: #fff8ec;
  background:
    linear-gradient(180deg, rgba(36, 24, 20, 0) 0, rgba(36, 24, 20, .5) 38svh, #241814 88svh),
    linear-gradient(145deg, #231413 0, #44221e 88svh, #241814 120svh);
}

.home-page .footer-signal-strip {
  position: absolute;
  z-index: 3;
  top: 50svh;
  bottom: auto;
  right: 0;
  left: 0;
  height: 38svh;
  border-top: 1px solid rgba(255, 248, 236, .34);
  border-bottom: 1px solid rgba(255, 248, 236, .34);
  background: #2252d6;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .16);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.home-page .site-footer.is-contact-active .footer-signal-strip {
  visibility: visible;
  opacity: 1;
}

.home-page .site-footer:not(.is-contact-active) .footer-copy-grid {
  visibility: hidden;
  opacity: 0;
}

.home-page .footer-main {
  position: sticky;
  top: 0;
  z-index: 7;
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  padding: 0 var(--pad);
}

.home-page .footer-main.reveal,
.home-page .footer-bottom.reveal {
  opacity: 1;
  transform: none;
}

.home-page .footer-main::after {
  content: "LONDON · 12 YEARS+";
  position: absolute;
  z-index: 8;
  top: clamp(4.75rem, 9vh, 6rem);
  right: var(--pad);
  color: #fff8ec;
  font: 500 clamp(.68rem, .78vw, .82rem) / 1.2 var(--mono);
  letter-spacing: .08em;
}

.home-page .footer-contact-label {
  position: absolute;
  z-index: 8;
  top: clamp(4.75rem, 9vh, 6rem);
  margin: 0;
  color: #fff8ec;
  font: 500 clamp(.68rem, .78vw, .82rem) / 1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-page .footer-contact-label { left: var(--pad); }

.home-page .footer-future-index {
  position: absolute;
  z-index: 8;
  top: clamp(9rem, 18vh, 12rem);
  right: var(--pad);
  left: var(--pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(19rem, 38vw) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 4.5rem);
  width: auto;
  margin: 0;
  padding: 0;
  color: #fff8ec;
  font-family: var(--mono);
  font-size: clamp(.62rem, .7vw, .74rem);
  font-weight: 500;
  letter-spacing: .075em;
  list-style: none;
  text-align: right;
  text-transform: uppercase;
}

.home-page .footer-future-index[hidden] { display: none !important; }

.home-page .footer-future-index li:nth-child(1) { grid-column: 1; justify-content: center; }
.home-page .footer-future-index li:nth-child(2) { grid-column: 2; justify-content: center; }
.home-page .footer-future-index li:nth-child(3) { grid-column: 4; justify-content: center; }
.home-page .footer-future-index li:nth-child(4) { grid-column: 5; justify-content: center; }

.home-page .footer-future-index li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  padding: .42rem 0;
  border-bottom: 1px solid rgba(255, 248, 236, .2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}

.home-page .footer-future-index li > a { display: contents; color: inherit; text-decoration: none; }

.home-page .footer-future-index span { color: rgba(255, 248, 236, .58); }
.home-page .footer-future-index strong { font: inherit; }
.home-page .footer-future-index i {
  font: inherit;
  font-style: normal;
  transition: transform .2s ease;
}
.home-page .footer-future-index li:hover {
  color: #ffc08a;
  border-color: currentColor;
}
.home-page .footer-future-index li:hover i { transform: none; }

@media (max-width: 900px) {
  .home-page .footer-future-index {
    right: 1rem;
    left: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 1rem;
    font-size: .54rem;
  }
  .home-page .footer-future-index li:nth-child(n) { grid-column: auto; }
}

.home-page .footer-copy-grid {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 38vw) minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  padding: clamp(8rem, 16vh, 11rem) 0 clamp(6rem, 11vh, 8rem);
  gap: clamp(1rem, 2.5vw, 3.5rem);
  opacity: 1;
  transform: none;
  will-change: auto;
}

.home-page .footer-character-landing {
  grid-column: 2;
  grid-row: 1;
  min-height: 1px;
}

.home-page .footer-copy-grid .footer-availability {
  position: relative;
  z-index: 4;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #fff8ec;
  font-family: var(--sans);
  font-size: clamp(3.1rem, 5vw, 6rem);
  font-weight: 500;
  line-height: .82;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.home-page .footer-copy-grid .footer-availability--left {
  grid-column: 1;
  grid-row: 1;
  margin-left: calc(var(--pad) + clamp(1.25rem, 2vw, 2rem));
  text-align: left;
}

.home-page .footer-availability--left::before {
  content: "CURRENTLY AT F1 ARCADE. ALWAYS CURIOUS ABOUT WHAT COMES NEXT.";
  display: block;
  max-width: 32ch;
  margin-bottom: 1.2rem;
  color: #fff8ec;
  font: 500 clamp(.64rem, .72vw, .76rem) / 1.35 var(--mono);
  letter-spacing: .08em;
}

.home-page .footer-copy-grid .footer-availability--right {
  grid-column: 3;
  grid-row: 1;
  margin-right: calc(var(--pad) + clamp(1.25rem, 2vw, 2rem));
  font-family: var(--serif);
  font-size: clamp(2.65rem, 4.25vw, 5rem);
  font-weight: 400;
  line-height: .83;
  letter-spacing: -.035em;
  text-align: right;
  text-transform: none;
  white-space: nowrap;
}

.home-page .footer-availability--right span {
  display: inline;
  color: #fff8ec;
  font: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: inherit;
}

.home-page .scroll-cinema.is-footer-landing .scroll-cinema-sticky::before,
.home-page .scroll-cinema.is-footer-landing .scroll-cinema-sticky::after {
  opacity: 0;
  background: transparent;
}

.home-page .scroll-cinema.is-contact-band-active .scroll-cinema-sticky::before,
.home-page .scroll-cinema.is-contact-band-active .scroll-cinema-sticky::after {
  opacity: 0;
  background: transparent;
}

/* Once the approved desk-and-lemons frame arrives, its existing scroll canvas
   sits in front of the signal strip. The strip and copy remain behind it; no
   character sizing, positioning, artwork or scroll timing changes here. */
.home-page .scroll-cinema.is-contact-band-active .scroll-cinema-sticky,
.home-page .scroll-cinema.is-footer-landing .scroll-cinema-sticky,
.home-page .scroll-cinema.is-footer-composed .scroll-cinema-sticky {
  z-index: 20;
}

/* The footer is a later document stacking context, so raising only the fixed
   canvas is not sufficient: its blue band can still paint over Shaun. Lift
   the whole transparent story layer while he lands, keeping every visible
   character frame above the band without moving or resizing it. */
.home-page .footer-bottom {
  position: absolute;
  z-index: 8;
  right: var(--pad);
  bottom: 1.8rem;
  left: var(--pad);
  width: auto;
  max-width: none;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 248, 236, .28);
  color: #fff8ec;
}

.home-page .footer-bottom,
.home-page .footer-bottom a {
  font: 500 clamp(.64rem, .72vw, .76rem) / 1.25 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The approved contact composition is the desk-and-lemons frame. Keep its
   blue strip and copy together, so the strip never appears behind the earlier
   chair-only landing frame. This changes only footer layering, not the scroll
   sequence or character artwork. */
.home-page .site-footer.is-awaiting-composition .footer-contact-label,
.home-page .site-footer.is-awaiting-composition .footer-main::after,
.home-page .site-footer.is-awaiting-composition .footer-bottom {
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 701px) and (max-width: 1100px) {
  .home-page .footer-copy-grid {
    grid-template-columns: minmax(0, 28%) minmax(17rem, 44%) minmax(0, 28%);
    gap: 1rem;
  }

  .home-page .footer-copy-grid .footer-availability {
    font-size: clamp(2.05rem, 4.4vw, 3rem);
  }

  .home-page .footer-copy-grid .footer-availability--right {
    font-size: clamp(2rem, 4.1vw, 2.8rem);
  }
}

@media (max-width: 700px) {
  .home-page .footer-signal-strip {
    top: 42svh;
    bottom: auto;
    height: 52svh;
  }

  .home-page .footer-main {
    height: 100svh;
    min-height: 100svh;
    padding: 0 var(--pad);
  }

  .home-page .footer-main::after { display: none; }
  .home-page .footer-contact-label { top: 5.5rem; }

  .home-page .footer-copy-grid {
    display: block;
    padding: 0;
  }

  .home-page .footer-character-landing {
    position: absolute;
    inset: 25% 0 22%;
  }

  .home-page .footer-copy-grid .footer-availability {
    position: absolute;
    font-size: clamp(2.2rem, 10.5vw, 2.75rem);
  }

  .home-page .footer-copy-grid .footer-availability--left {
    top: 24%;
    left: 0;
    max-width: 68%;
    margin-left: 1rem;
    text-align: left;
  }

  .home-page .footer-copy-grid .footer-availability--right {
    right: 0;
    bottom: 26%;
    max-width: 82%;
    margin-right: 1rem;
    font-size: clamp(2rem, 9.6vw, 2.5rem);
    text-align: right;
  }

  .home-page .footer-availability--left::before {
    max-width: 30ch;
    margin-bottom: .65rem;
    font-size: .52rem;
  }

  .home-page .footer-bottom {
    right: var(--pad);
    bottom: 1.25rem;
    left: var(--pad);
  }
}

/* Approved Ideas chapter: Editorial Lens liquid glass.
   The original layout stays in flow (but hidden) so the approved scroll
   timing, impact frame, character scale and About landing remain unchanged. */
.home-page #more {
  position: relative;
  isolation: auto;
  scroll-margin-top: 0;
}

.home-page .more-teaser {
  z-index: auto;
  isolation: auto;
}

.home-page #more::before,
.home-page #more::after {
  display: none;
}

/* Blend the final clay scene into the contact surface inside the Ideas
   section. Ending on the footer's exact brown removes the hard horizontal
   colour cut without moving either section or changing scroll timing. */
.home-page #more::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: clamp(20rem, 58svh, 38rem);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(35, 20, 19, 0) 0%,
    rgba(35, 20, 19, .72) 34%,
    #231413 68%,
    #231413 100%
  );
}

/* Hold the same brown on both sides of the Ideas → Contact boundary. The
   footer's tonal movement starts lower down, after the join has passed, so
   there is no visible horizontal colour change at the section edge. */
.home-page .site-footer {
  background:
    linear-gradient(180deg, rgba(36, 24, 20, 0) 0, rgba(36, 24, 20, .5) 38svh, #241814 88svh),
    linear-gradient(180deg, #231413 0, #231413 22svh, #44221e 88svh, #241814 120svh);
}

.home-page #more > .eyebrow,
.home-page #more > .more-teaser-content {
  visibility: hidden;
}

.home-page .site-header {
  z-index: 40;
}

/* While the Ideas section is visible, its scroll canvas stays below the
   liquid-glass panel and a brown layer softly replaces the outgoing clay
   palette. The presence value fades at both section edges, preserving the
   later Contact composition. */
.home-page #fall.is-ideas-active:not(.is-footer-landing) .scroll-cinema-sticky::before {
  opacity: var(--ideas-presence);
  background: #231413;
}

.ideas-glass-filter-defs {
  position: absolute;
  overflow: hidden;
}

.home-page .ideas-review-glass {
  position: absolute;
  z-index: 8;
  top: clamp(22rem, 42vh, 30rem);
  left: 50%;
  width: min(80vw, 76rem);
  height: min(62svh, 38rem);
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: clamp(1.4rem, 2.2vw, 2.35rem);
  background: rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(3.5px) saturate(1.12) contrast(1.04) url(#ideasReviewDisplacement);
  backdrop-filter: blur(3.5px) saturate(1.12) contrast(1.04) url(#ideasReviewDisplacement);
  box-shadow:
    0 24px 64px rgba(19, 8, 7, .24),
    inset 0 1px 0 rgba(255, 255, 255, .68),
    inset 0 -1px 0 rgba(255, 255, 255, .16);
  pointer-events: none;
}

.home-page .ideas-review-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(82% 48% at 15% -8%, rgba(255, 255, 255, .38), transparent 52%),
    linear-gradient(140deg, rgba(255, 255, 255, .2), transparent 22% 78%, rgba(255, 255, 255, .1));
  box-shadow:
    inset 2px 2px 1px rgba(255, 255, 255, .7),
    inset -2px -2px 1px rgba(255, 255, 255, .2);
  pointer-events: none;
}

.home-page .ideas-review-glass::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: calc(clamp(1.4rem, 2.2vw, 2.35rem) - 7px);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .055);
  pointer-events: none;
}

.home-page .ideas-review-copy {
  position: absolute;
  z-index: 9;
  inset: 0;
  color: #fff8ec;
  text-shadow: 0 1px 18px rgba(25, 8, 6, .2);
}

.home-page .ideas-review-copy *,
.home-page .ideas-review-copy *::before,
.home-page .ideas-review-copy *::after {
  box-sizing: border-box;
}

.home-page .ideas-review-copy h2,
.home-page .ideas-review-copy p,
.home-page .ideas-review-copy dl,
.home-page .ideas-review-copy dt,
.home-page .ideas-review-copy dd {
  margin: 0;
}

.home-page .ideas-editorial-lens {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(2rem, 5vw, 6rem);
  row-gap: 1rem;
  padding: clamp(1.5rem, 3vw, 3.1rem);
  background: linear-gradient(90deg, rgba(31, 15, 13, .38), transparent 62%);
}

.home-page .ideas-label {
  grid-column: 1 / -1;
  font: 500 max(.75rem, 12px) / 1.2 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.home-page .ideas-editorial-lens h2 {
  align-self: start;
  max-width: none;
  color: #fff8ec;
  font: 400 clamp(3.6rem, 7vw, 6rem) / .83 var(--serif);
  letter-spacing: -.04em;
  white-space: nowrap;
}

.home-page .ideas-editorial-lens h2 em {
  display: block;
  color: #2252d6;
  font-style: italic;
}

.home-page .ideas-body {
  align-self: center;
  justify-self: end;
  max-width: 42ch;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 248, 236, .36);
  font: 300 clamp(.9375rem, 1vw, 1rem) / 1.6 var(--mono);
  text-wrap: pretty;
}

.home-page .ideas-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 248, 236, .28);
}

.home-page .ideas-steps > div {
  padding: .9rem 1.2rem 0 0;
}

.home-page .ideas-steps > div + div {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(255, 248, 236, .16);
}

.home-page .ideas-steps dt {
  color: #2252d6;
  font: 500 max(.75rem, 12px) / 1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-page .ideas-steps dd {
  max-width: 30ch;
  margin-top: .45rem;
  font: 300 clamp(.9375rem, 1vw, 1rem) / 1.6 var(--mono);
}

@media (max-width: 720px) {
  .home-page .ideas-review-glass {
    top: clamp(11rem, 27vh, 14.5rem);
    width: calc(100vw - 1.25rem);
    height: min(76svh, 42rem);
    border-radius: 1.5rem;
  }

  .home-page .ideas-editorial-lens {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    padding: 1.15rem;
  }

  .home-page .ideas-label,
  .home-page .ideas-editorial-lens h2,
  .home-page .ideas-body,
  .home-page .ideas-steps {
    grid-column: 1;
  }

  .home-page .ideas-editorial-lens h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .home-page .ideas-body {
    align-self: start;
    justify-self: start;
  }

  .home-page .ideas-steps {
    align-self: end;
    grid-template-columns: 1fr;
  }

  .home-page .ideas-steps > div {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .5rem;
    padding: .45rem 0;
  }

  .home-page .ideas-steps > div + div {
    padding-left: 0;
    border-top: 1px solid rgba(255, 248, 236, .14);
    border-left: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .home-page .ideas-review-glass {
    background: rgba(36, 24, 20, .78);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Locked metadata role: DM Mono Medium, always uppercase. */
.home-page .work-index-summary span,
.home-page .work-index-head > p:first-child,
.home-page .project-group-head > div > p,
.home-page .project-index-list.project-grid-2up span,
.home-page .project-index-list a > span,
.home-page .project-index-list a.vox-project-card > span:not(.vox-grade-label, .project-name-mark) {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  text-transform: uppercase;
}

/* Mono body copy uses the lighter cut; labels and navigation stay Medium. */
.home-page .fall-editorial-copy__lead,
.home-page .work-index-summary p,
.home-page .project-group-head > p,
.home-page .project-editorial-hook__inner > p:not(:first-child),
.home-page .hero-copy p,
.home-page .working-principles > p,
.home-page .working-principles dd,
.home-page .ideas-intro,
.home-page .ideas-steps dd {
  font-family: "DM Mono", monospace;
  font-weight: 300;
}

/* Locked DM Mono Medium treatment site-wide. */
.home-page .project-index-list.project-grid-2up span,
.home-page .project-index-list a.vox-project-card > span:not(.vox-grade-label, .project-name-mark),
.home-page .project-index-list .vox-grade-label,
.home-page .project-index-list .project-name-mark::before,
.home-page .project-index-list .project-name-mark::after,
.home-page.project-editions-preview .project-index-list a.project-edition-preview-card > span,
.home-page.project-grid-preview .project-index-list a.project-grid-preview-card > span,
.home-page .project-index-list .collectible-label,
.home-page .project-index-list .collectible-card > small,
.home-page .project-index-list a.vox-project-card.is-image-missing .project-card-media::after,
.home-page .project-index-list a > span {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  text-transform: uppercase;
}

/* Narrative roles remain sentence case. Uppercase DM Mono is reserved for
   navigation, labels, roles and data. */
.home-page .fall-editorial-copy__lead,
.home-page .work-index-summary p,
.home-page .project-group-head > p,
.home-page .project-editorial-hook__inner > p,
.home-page .hero-copy p,
.home-page .working-principles > p,
.home-page .working-principles dd,
.home-page .ideas-body,
.home-page .ideas-steps dd {
  font-family: "DM Mono", monospace;
  font-size: clamp(.9375rem, 1vw, 1rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.home-page .project-editorial-hook__inner > a,
.home-page .project-index-list a > small,
.home-page .ideas-label,
.home-page .ideas-steps dt {
  font-family: "DM Mono", monospace;
  font-size: max(.75rem, 12px);
  font-weight: 500;
  text-transform: uppercase;
}

/* Responsive composition pass. Desktop scroll geometry and animation logic
   remain untouched; these rules only adapt layout below the desktop range. */
@media (max-width: 1100px) {
  html,
  body.home-page {
    max-width: 100%;
    overflow-x: clip;
  }

  .home-page .footer-future-index {
    right: max(1rem, env(safe-area-inset-right));
    left: max(1rem, env(safe-area-inset-left));
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(12rem, 28vw) repeat(2, minmax(0, 1fr));
    gap: clamp(.5rem, 1.2vw, 1rem);
    font-size: clamp(.52rem, .7vw, .64rem);
  }

  .home-page .footer-future-index li {
    min-width: 0;
    gap: .4rem;
  }

  .home-page .ideas-editorial-lens h2 {
    font-size: clamp(3rem, 5.5vw, 4rem);
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .home-page .site-header {
    padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));
  }

  .home-page .nav-list {
    gap: clamp(.8rem, 2vw, 1.5rem);
  }

  .home-page .project-index-list.project-grid-2up {
    gap-inline: clamp(1rem, 2.5vw, 2rem);
  }
}

@media (max-width: 700px) {
  .home-page .site-header {
    padding-top: max(.75rem, env(safe-area-inset-top));
    padding-right: max(.75rem, env(safe-area-inset-right));
    padding-left: max(.75rem, env(safe-area-inset-left));
  }

  .home-page .site-header--compact-editorial .nav-list a,
  .home-page .site-header--compact-editorial .sfx-toggle {
    width: 2.75rem;
    min-height: 2.75rem;
  }

  .home-page .work-index-summary {
    width: 100%;
    max-width: none;
  }

  .home-page .project-editorial-hook__inner {
    width: 100%;
  }

  .home-page .footer-future-index {
    top: clamp(7.5rem, 16vh, 9rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1rem;
    font-size: .56rem;
  }

  .home-page .footer-future-index li:nth-child(n) {
    grid-column: auto;
    min-height: 2.75rem;
  }

  .home-page .footer-future-index li:nth-child(odd) { justify-content: flex-start; }
  .home-page .footer-future-index li:nth-child(even) { justify-content: flex-end; }

  .home-page .ideas-editorial-lens h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .home-page .footer-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (pointer: coarse) {
  .home-page .nav-list a,
  .home-page .sfx-toggle,
  .home-page .footer-links a,
  .home-page .project-editorial-hook__inner > a {
    min-height: 2.75rem;
  }

  .home-page .footer-future-index li:hover {
    color: inherit;
    border-color: rgba(255, 248, 236, .2);
  }
}

/* Legibility pass: strengthen body copy without changing its placement,
   dimensions, headings, labels or navigation hierarchy. */
.home-page .hero-manifesto-body,
.home-page .fall-editorial-copy__lead,
.home-page .project-mobile-intro > p:nth-of-type(2),
.home-page .project-editorial-hook__inner > p:nth-of-type(2),
.home-page .ideas-body,
.home-page .ideas-steps dd,
.home-page .working-principles > p,
.home-page .working-principles dd {
  font-weight: 400;
}

.home-page .hero-manifesto-body,
.home-page .fall-editorial-copy__lead,
.home-page .project-mobile-intro > p:nth-of-type(2),
.home-page .project-editorial-hook__inner > p:nth-of-type(2) {
  color: rgba(36, 24, 20, .94);
}

.home-page .ideas-body,
.home-page .ideas-steps dd,
.home-page .working-principles > p,
.home-page .working-principles dd,
.home-page .footer-availability--left::before {
  color: rgba(255, 248, 236, .96);
}

/* Editorial highlight: a deliberate palette device for concise project
   descriptions, replacing the discarded body-copy shadow treatment. */
.home-page .project-editorial-hook__inner > p:nth-of-type(2),
.home-page .project-mobile-intro > p:nth-of-type(2) {
  color: #fff8ec;
  line-height: 1.75;
}

.home-page .project-editorial-hook__inner > p:nth-of-type(2) > span,
.home-page .project-mobile-intro > p:nth-of-type(2) > span {
  padding: .12em .28em;
  color: #fff8ec;
  background: var(--signal-blue);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 700px) {
  .home-page .hero-manifesto-body,
  .home-page .fall-editorial-copy__lead,
  .home-page .project-mobile-intro > p:nth-of-type(2),
  .home-page .ideas-body,
  .home-page .ideas-steps dd,
  .home-page .working-principles > p,
  .home-page .working-principles dd {
    font-size: max(.78rem, 12px);
    line-height: 1.55;
  }
}

/* Phone composition: preserve the desktop art direction, but give its three
   narrative beats enough room to read instead of shrinking them together. */
@media (max-width: 700px) {
  .home-page .site-header--compact-editorial {
    min-height: 4.35rem;
    align-items: center;
  }

  .home-page .brand--selected-lockup {
    width: clamp(5.4rem, 25vw, 6.5rem);
  }

  .home-page .site-header--compact-editorial .nav-list {
    gap: .2rem;
  }

  .home-page .site-header--compact-editorial .nav-list a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    padding: 0;
  }

  .home-page .site-header--compact-editorial .nav-list a > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .home-page .site-header--compact-editorial .sfx-toggle {
    width: 2.75rem;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .home-page .site-header--compact-editorial .sfx-toggle::after {
    content: "SFX";
    font: 500 max(.75rem, 12px)/1 var(--mono);
    letter-spacing: .04em;
  }

  .home-page .hero--split-opening,
  .home-page .hero--single-lockup {
    min-height: 1000px;
    padding-top: 5.15rem;
    padding-bottom: 1.75rem;
    grid-template-rows: auto minmax(28rem, 1fr) auto;
    row-gap: 1.15rem;
  }

  .home-page .hero--single-lockup .hero-split-meta {
    grid-template-columns: 1fr auto;
    gap: .35rem 1rem;
    padding: .45rem 0 .7rem;
    font-size: max(.75rem, 12px);
    line-height: 1.35;
  }

  .home-page .hero--single-lockup .hero-meta-experience {
    justify-self: end;
  }

  .home-page .hero--single-lockup .hero-meta-cta {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: .15rem;
  }

  .home-page .hero-title--split {
    align-self: stretch;
    padding-top: clamp(2.8rem, 11vh, 5rem);
    font-size: clamp(3.6rem, 17.8vw, 4.85rem);
  }

  .home-page .hero-title--split .hero-split-role {
    margin-bottom: 1.05em;
    font-size: .5em;
    line-height: .78;
  }

  .home-page .hero-title--split .hero-split-statement {
    position: relative;
    z-index: 2;
  }

  .home-page .hero-opening-character {
    top: 32%;
    left: 56%;
    width: min(84vw, 21rem);
  }

  .home-page .hero-copy--split {
    row-gap: 1rem;
    padding: 1rem 0 0;
  }

  .home-page .hero-copy.hero-manifesto .hero-manifesto-stack {
    max-width: 12ch;
    font-size: clamp(1.75rem, 7.8vw, 2.2rem);
    line-height: .86;
  }

  .home-page .hero-manifesto-stack span:nth-child(2) { margin-left: 0; }
  .home-page .hero-manifesto-stack span:nth-child(3) { margin-left: 9%; }

  .home-page .hero-copy.hero-manifesto .hero-manifesto-body {
    max-width: 42ch;
    padding-top: .75rem;
    border-top: 1px solid rgba(36, 24, 20, .36);
    font-size: .9375rem;
    line-height: 1.6;
  }

  .home-page .scroll-cinema {
    height: 120svh;
    min-height: 44rem;
  }

  .home-page .fall-editorial-copy {
    z-index: 3;
    left: var(--pad);
    width: calc(100vw - (2 * var(--pad)));
    padding: .8rem 0 1rem;
    background: none;
  }

  .home-page .fall-editorial-copy__lead {
    max-width: 34ch;
    font-size: .9375rem;
    line-height: 1.6;
  }

  .home-page .fall-editorial-copy__landing {
    max-width: 11ch;
    margin-top: .85rem !important;
    font-size: clamp(1.72rem, 8vw, 2.15rem);
    line-height: .92;
  }

  .home-page .work-index-head {
    padding-bottom: 1.25rem;
  }

  .home-page .work-index-head h2 {
    max-width: 8ch;
    margin-bottom: 0;
  }

  .home-page .work-index-summary { display: none; }

  .home-page .project-group-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    padding-bottom: 0;
  }

  .home-page .project-group-head > div,
  .home-page .project-group-head > p {
    grid-column: 1;
    max-width: none;
    padding-left: 0;
  }

  .home-page .project-group-head > p:not(.project-group-intro) {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(36, 24, 20, .38);
  }

  .home-page .project-mobile-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    margin-top: 1rem;
    padding: 1.2rem 0 1.4rem;
    border-top: 1px solid rgba(36, 24, 20, .4);
    border-bottom: 1px solid rgba(36, 24, 20, .4);
  }

  .home-page .project-mobile-intro > * {
    grid-column: 1;
    width: 100%;
  }

  .home-page .project-mobile-intro p,
  .home-page .project-mobile-intro h4 { margin: 0; }

  .home-page .project-mobile-intro > p:first-child,
  .home-page .project-mobile-intro > a {
    font: 500 max(.75rem, 12px)/1.3 var(--mono);
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .home-page .project-mobile-intro h4 {
    max-width: 9ch;
    font: 400 clamp(2.4rem, 11vw, 3.15rem)/.88 var(--serif);
    letter-spacing: -.045em;
  }

  .home-page .project-mobile-intro > p:nth-of-type(2) {
    max-width: 38ch;
    font: 300 .9375rem/1.65 var(--mono);
    text-transform: none;
  }

  .home-page .project-mobile-intro > a {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    min-height: 2.75rem;
    color: inherit;
  }

  .home-page .project-index-list .project-editorial-hook {
    display: none !important;
  }

  .home-page .project-index-list {
    margin-top: .75rem;
  }

  .home-page .footer-future-index {
    top: 7rem;
    gap: .75rem 1.25rem;
  }

  .home-page .footer-copy-grid .footer-availability--left {
    top: 63%;
  }

  .home-page .footer-copy-grid .footer-availability--right {
    bottom: 23%;
  }

  .home-page .hero-copy.hero-manifesto .hero-manifesto-body,
  .home-page .fall-editorial-copy__lead,
  .home-page .project-mobile-intro > p:nth-of-type(2),
  .home-page .ideas-body,
  .home-page .ideas-steps dd,
  .home-page .working-principles > p,
  .home-page .working-principles dd {
    font-size: .9375rem;
    font-weight: 300;
    line-height: 1.6;
  }

  .home-page .project-mobile-intro > p:nth-of-type(2) {
    justify-self: start;
    width: auto;
    line-height: 1.75;
  }
}

/* Final homepage ratio rule: all project covers share a 3:4 portrait frame. */
.home-page .project-index-list .project-card-media,
.home-page .project-index-list li:nth-child(n) .project-card-media {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
}

/* Mobile copy composition: preserve the open art direction and scroll story,
   while making reading order and spacing explicit at phone widths. */
@media (max-width: 700px) {
  .home-page .hero-copy--split {
    z-index: 8;
    grid-template-columns: 1fr;
    gap: .9rem;
    width: 100%;
    margin: 0;
    padding: 1rem 0 1.5rem;
    border: 0;
    background: none;
  }

  .home-page .hero-copy.hero-manifesto .hero-manifesto-stack {
    max-width: 13ch;
    font-size: clamp(1.55rem, 7vw, 1.95rem);
    line-height: .88;
  }

  .home-page .hero-manifesto-stack span:nth-child(1),
  .home-page .hero-manifesto-stack span:nth-child(2),
  .home-page .hero-manifesto-stack span:nth-child(3) {
    margin-left: 0;
    white-space: normal;
  }

  .home-page .hero-copy.hero-manifesto .hero-manifesto-body {
    max-width: 36ch;
    margin: 0;
    padding-top: .85rem;
    border-top: 1px solid rgba(36, 24, 20, .42);
    font-size: .9375rem;
    line-height: 1.6;
  }

  .home-page .fall-editorial-copy {
    z-index: 8;
    left: var(--pad);
    display: flex;
    flex-direction: column;
    width: min(74vw, 18rem);
    padding: 0;
    background: none;
  }

  .home-page .fall-editorial-copy::before {
    display: block;
    width: 2.75rem;
    height: 1px;
    margin-bottom: .85rem;
    background: var(--signal-blue);
    opacity: 1;
  }

  .home-page .fall-editorial-copy__landing {
    order: 1;
    max-width: 9ch;
    margin: 0 !important;
    font-size: clamp(2rem, 9vw, 2.4rem);
    line-height: .9;
  }

  .home-page .fall-editorial-copy__lead {
    order: 2;
    max-width: 30ch;
    margin-top: 1rem !important;
    padding-top: .8rem;
    border-top: 1px solid rgba(36, 24, 20, .42);
    font-size: .9375rem;
    line-height: 1.6;
  }
}

/* Responsive build: final additive safeguards for the approved homepage.
   The desktop composition and 40-frame sequence remain unchanged. */
@media (min-width: 701px) and (max-width: 1024px) {
  .home-page { --pad: clamp(1.5rem, 4vw, 2.75rem); }
  .home-page .hero--split-opening,
  .home-page .hero--single-lockup { min-height: max(52rem, 100svh); }
  .home-page .hero-title--split { font-size: clamp(5.5rem, 12vw, 8rem); }
  .home-page .hero-opening-character { width: min(46vw, 27rem); }
  .home-page .hero-copy--split { grid-template-columns: minmax(0, .9fr) minmax(17rem, 1.1fr); }
  .home-page .project-index-list.project-grid-2up { gap: clamp(2rem, 5vw, 4rem) clamp(1rem, 2.5vw, 2rem); }
  .home-page .ideas-editorial-lens,
  .home-page .working-principles { max-width: min(100%, 48rem); }
  .home-page .footer-copy-grid { padding-inline: var(--pad); }
}

@media (max-width: 700px) {
  .home-page { --pad: clamp(1rem, 5vw, 1.5rem); }
  .home-page section[id] { scroll-margin-top: 4.75rem; }
  .home-page .hero--split-opening,
  .home-page .hero--single-lockup { min-height: max(48rem, 100svh); }
  .home-page .hero-title--split { max-width: 100%; overflow-wrap: normal; }
  .home-page .scroll-cinema { height: 112svh; min-height: 42rem; }
  .home-page .scroll-cinema-prompt { display: none; }
  .home-page .work-index,
  .home-page .project-group,
  .home-page .more-teaser { padding-inline: var(--pad); }
  .home-page .project-index-list.project-grid-2up {
    display: block;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding-block: 1.25rem;
    overflow: visible;
  }
  .home-page .project-index-list.project-grid-2up li,
  .home-page .project-index-list.project-grid-2up li:nth-child(n) {
    width: 100%;
    margin: 0 0 3rem;
  }
  .home-page .project-index-list.project-grid-2up a { min-height: 2.75rem; }
  .home-page .project-index-list.project-grid-2up .project-card-media { aspect-ratio: 3 / 4; }
  .home-page .project-index-list.project-grid-2up strong { font-size: clamp(1.15rem, 5vw, 1.45rem); }
  .home-page .project-index-list.project-grid-2up small { font-size: .875rem; }
  .home-page .more-teaser-content { gap: 2rem; }
  .home-page .ideas-editorial-lens,
  .home-page .working-principles { width: 100%; max-width: none; }
  .home-page .footer-links { gap: .75rem 1.25rem; }
  .home-page .footer-bottom { align-items: start; }
}

@media (max-width: 360px) {
  .home-page .site-header--compact-editorial .nav-list { gap: 0; }
  .home-page .site-header--compact-editorial .nav-list a,
  .home-page .site-header--compact-editorial .sfx-toggle { width: 2.5rem; min-height: 2.75rem; }
  .home-page .brand--selected-lockup { width: 5.2rem; }
  .home-page .hero-title--split { font-size: clamp(3.15rem, 17vw, 3.8rem); }
  .home-page .project-mobile-intro h4 { font-size: clamp(2.1rem, 10.5vw, 2.6rem); }
  .home-page .footer-future-index { grid-template-columns: 1fr; }
  .home-page .footer-future-index li:nth-child(n) { justify-content: flex-start; }
}

/* Phone contact composition: keep both statements and the supporting line
   inside the blue contact field without changing the footer sequence. */
@media (max-width: 430px) {
  .home-page .footer-signal-strip {
    top: 38svh;
    height: 58svh;
  }

  .home-page .footer-copy-grid .footer-availability--left {
    top: 45svh;
    left: var(--pad);
    max-width: calc(100% - (2 * var(--pad)));
    margin-left: 0;
    font-size: clamp(1.9rem, 10vw, 2.55rem);
  }

  .home-page .footer-availability--left::before {
    max-width: 28ch;
    margin-bottom: .55rem;
    font-size: max(.5rem, 8px);
    line-height: 1.35;
  }

  .home-page .footer-copy-grid .footer-availability--right {
    top: 70svh;
    right: var(--pad);
    bottom: auto;
    max-width: calc(100% - (2 * var(--pad)));
    margin-right: 0;
    font-size: clamp(1.85rem, 9.5vw, 2.4rem);
    white-space: normal;
  }
}

/* Phone About card: keep the artwork visible while giving the editorial copy
   a quieter glass surface and a full-width reading hierarchy. */
@media (max-width: 430px) {
  /* The homepage chapters already share one continuous mobile canvas. Remove
     desktop section rules that read as hard seams while that canvas scrolls. */
  .home-page .work-index,
  .home-page .project-group,
  .home-page .more-teaser {
    border-top: 0;
  }

  .home-page .ideas-review-glass {
    height: min(88svh, 44rem);
    background: rgba(35, 20, 19, .78);
    -webkit-backdrop-filter: blur(22px) saturate(1.04) contrast(1.02) url(#ideasReviewDisplacement);
    backdrop-filter: blur(22px) saturate(1.04) contrast(1.02) url(#ideasReviewDisplacement);
  }

  .home-page .ideas-editorial-lens {
    row-gap: .8rem;
    padding: clamp(1.2rem, 5.5vw, 1.5rem);
    background: linear-gradient(145deg, rgba(31, 15, 13, .68), rgba(31, 15, 13, .34));
  }

  .home-page .ideas-body {
    width: 100%;
    max-width: 32ch;
    padding-top: .8rem;
    line-height: 1.65;
  }

  .home-page .ideas-steps > div {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: .7rem 0;
  }

  .home-page .ideas-steps dd {
    justify-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
    line-height: 1.55;
    text-align: left;
  }
}