/* ════════════════════════════════════════════
   sacré studio — styles
   palette: bordeaux & linen, no pure black
   ════════════════════════════════════════════ */

:root {
  --bordeaux: #451818;
  --bordeaux-deep: #381212;
  --bordeaux-mid: #5C1F1F;
  --bordeaux-soft: #6E2A26;
  --linen: #EDE4D2;
  --sand: #E2D5BC;
  --plaster: #F1EADB;
  --offwhite: #F5EFE6;
  --ink: #33201C;          /* warm dark, never black */
  --ink-soft: #6B5247;
  --terracotta: #B0552F;

  --serif: "Fraunces", "Georgia", serif;
  --grotesque: "Archivo", "Helvetica Neue", sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  font-family: var(--grotesque);
  font-weight: 300;
  background: var(--linen);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

::selection { background: var(--bordeaux-mid); color: var(--offwhite); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ─── grain ─── */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .05;
  pointer-events: none;
  z-index: 9000;
}

/* ─── nav : split menu, centred logo ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.4rem clamp(1.2rem, 4vw, 3.2rem);
  color: var(--offwhite); /* always light — sits on the bordeaux fade below */
}
/* bordeaux fade behind the menu — on over light sections, transparent over dark.
   Just tall enough to back the menu, not a big band. */
.nav__fade {
  position: absolute; left: 0; right: 0; top: 0;
  height: 118%;
  background: linear-gradient(180deg,
    rgba(56, 18, 18, .92) 0%,
    rgba(56, 18, 18, .7) 55%,
    rgba(56, 18, 18, 0) 100%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.nav--over-light .nav__fade { opacity: 1; }
/* no JS toggle (reduced-motion / no-JS) → keep the fade on so the menu stays legible */
@media (prefers-reduced-motion: reduce) { .nav__fade { opacity: 1; } }

.nav__brand {
  grid-column: 2;
  justify-self: center;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.3rem;
  letter-spacing: .01em;
  font-variation-settings: "opsz" 60;
  white-space: nowrap;
}
/* the centred logo only appears once the dolly animation has finished;
   no-JS visitors see it from the start */
.js .nav__brand { opacity: 0; }

.nav__group {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  font-size: .82rem;
  letter-spacing: .14em;
  font-weight: 400;
}
.nav__group--left { grid-column: 1; justify-self: start; }
.nav__group--right { grid-column: 3; justify-self: end; }
.nav__group a { position: relative; padding-block: .2rem; opacity: .85; transition: opacity .3s; }
.nav__group a:hover { opacity: 1; }
.nav__group a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__group a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  border: 1px solid currentColor;
  border-radius: 99px;
  padding: .35rem 1rem !important;
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--offwhite); color: var(--bordeaux); border-color: var(--offwhite); }

/* ════════ HERO ════════ */
.hero { position: relative; }
.hero__stage {
  position: relative;
  height: 100vh; /* stable unit: svh could resolve to 0 mid-navigation and
                    collapse the pin's measurement, so the hero stays on vh */
  overflow: hidden;
  background: var(--bordeaux);
}

.hero__scene {
  position: absolute;
  inset: 0;
  background: #2A0E0E; /* warm dark while frames preload */
}
/* Mobile: the frames are landscape (15:8), so full-height cover crops the sides
   and the closing "sacré studio" chessboard becomes unreadable. Shrink the window
   from the top (bordeaux above, bottom still licking the frame edge) until the
   full wordmark fits: text spans ~440/720 of the frame → height ≈ 88vw. */
@media (max-width: 880px) {
  .hero__scene {
    top: auto;
    height: min(80vw, 100%);
  }
}
.hero__canvas,
.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__canvas { z-index: 2; }
/* the still is shown until the canvas player has painted its first frame */
.hero__fallback { z-index: 1; transition: opacity .6s var(--ease-out); }
/* the canvas is opaque (alpha:false) — keep it hidden until frame 0 is drawn */
.js .hero__canvas { opacity: 0; transition: opacity .6s var(--ease-out); }
.js .hero__scene--ready .hero__canvas { opacity: 1; }
.js .hero__scene--ready .hero__fallback { opacity: 0; }
/* legibility veil so the caption text holds over the bright interior */
.hero__scene-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(42,14,14,.30) 0%, rgba(42,14,14,0) 26%),
    linear-gradient(0deg, rgba(42,14,14,.46) 0%, rgba(42,14,14,0) 42%);
}
.hero__caption {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4.5rem);
  bottom: clamp(4.5rem, 9vh, 7rem);
  max-width: 620px;
  color: var(--offwhite);
  z-index: 6;
}
.hero__eyebrow {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1rem;
  font-weight: 400;
  text-shadow: 0 1px 16px rgba(42, 14, 14, .5);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__title { text-shadow: 0 2px 30px rgba(42, 14, 14, .45); }
.hero__title em { font-style: italic; color: #E9C7A0; }
.hero__title span, .hero__title em { display: inline-block; }
.hero__sub {
  margin-top: 1.2rem;
  font-size: .92rem;
  color: var(--sand);
  max-width: 46ch;
  text-shadow: 0 1px 18px rgba(42, 14, 14, .5);
}

.hero__scroll-hint {
  position: absolute;
  right: clamp(1.2rem, 4vw, 3.2rem);
  bottom: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sand);
  writing-mode: vertical-rl;
  z-index: 6;
  text-shadow: 0 1px 16px rgba(42, 14, 14, .5);
  /* it's a button: it plays the hero ride on click */
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.hero__scroll-hint:hover span { opacity: 1; }
.hero__scroll-hint span {
  width: 1px;
  height: 52px;
  background: currentColor;
  opacity: .5;
  transition: opacity .3s;
}

/* bordeaux gradient at the top — keeps the menu legible over the bright scene */
.hero__topfade {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--bordeaux-deep) 0%,
    rgba(56, 18, 18, .72) 28%,
    rgba(56, 18, 18, 0) 100%);
}

/* the wordmark, centered over the interior */
.hero__intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* a soft bordeaux breath behind the wordmark so it always reads */
  background: radial-gradient(60% 46% at 50% 48%,
    rgba(42, 14, 14, .52) 0%,
    rgba(42, 14, 14, .26) 42%,
    rgba(42, 14, 14, 0) 78%);
  will-change: opacity, transform;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.6rem, 8.5vw, 7.5rem);
  letter-spacing: .005em;
  color: var(--offwhite);
  line-height: 1;
  text-shadow: 0 4px 40px rgba(20, 6, 6, .55);
}
.wordmark .wm-char { display: inline-block; white-space: pre; }
/* prominent ride CTA under the wordmark */
.hero__discover {
  margin-top: 2.6rem;
  pointer-events: auto;
  font-family: var(--grotesque);
  font-size: .8rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bordeaux);
  background: var(--offwhite);
  border: 1px solid var(--offwhite);
  border-radius: 999px;
  padding: 1.05rem 2.6rem;
  cursor: pointer;
  box-shadow: 0 10px 34px rgba(20, 6, 6, .35);
  transition: background .3s, color .3s, transform .3s var(--ease-out);
}
.hero__discover:hover {
  background: transparent;
  color: var(--offwhite);
  transform: translateY(-2px);
}
.hero__intro-foot {
  margin-top: 1.6rem;
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--offwhite);
  opacity: .55;
  text-shadow: 0 2px 20px rgba(20, 6, 6, .6);
}

/* ════════ MANIFESTO ════════ */
.manifesto {
  background: var(--linen);
  padding: clamp(7rem, 16vh, 12rem) clamp(1.4rem, 8vw, 9rem);
  text-align: center;
}
.manifesto__line {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.7rem, 3.8vw, 3.3rem);
  line-height: 1.22;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.manifesto__line .mw {
  display: inline-block;
  white-space: pre-wrap;
}
.manifesto__foot {
  margin-top: 2.6rem;
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--ink-soft);
}

/* ════════ PROJECTS ════════ */
.projects {
  background: var(--linen);
  padding: 0 clamp(1.2rem, 4vw, 3.5rem) clamp(5rem, 10vh, 9rem);
}
.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}
.section-title sup {
  font-size: .32em;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--grotesque);
  font-weight: 400;
  color: var(--bordeaux-mid);
  vertical-align: super;
  margin-left: .6em;
}
.section-title--light { color: var(--offwhite); }
.section-title--light sup { color: var(--sand); }
.section-note { margin-top: .9rem; font-size: .9rem; color: var(--ink-soft); }
.section-note--light { color: var(--sand); opacity: .85; }

.projects__head {
  padding: clamp(2rem, 6vh, 4rem) clamp(.4rem, 1.5vw, 1.4rem) clamp(3rem, 8vh, 5.5rem);
}

.projects__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  max-width: 1320px;
  margin-inline: auto;
}
.project { margin: 0; }

.project__media {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--sand);
}
.project__media-inner {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
}
.project__media-inner svg {
  width: 100%;
  height: 100%;
}
.project__media-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project__link { display: block; color: inherit; }

.project__caption { padding-top: 1.3rem; }
.project__name {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 120;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.05;
  margin-top: .5rem;
}
.project__meta {
  margin-top: .55rem;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.project__desc {
  margin-top: 1.1rem;
  font-size: .94rem;
  color: var(--ink-soft);
  max-width: 38ch;
}

/* ════════ MÉTIERS (a row of 4 engraved chess-piece illustrations) ════════ */
.types { background: var(--linen); padding: clamp(4rem, 10vh, 8rem) clamp(1.2rem, 4vw, 3.5rem); }
.types__head { max-width: 1320px; margin: 0 auto clamp(2.6rem, 6vh, 4.5rem); }
.types__head--center { text-align: center; }
.types__head--center .section-note { margin-inline: auto; }
.types__row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2.4rem);
  max-width: 1320px; margin-inline: auto; align-items: end;
  /* reserve headroom so the lifted lid can rise above its tile on hover */
  padding-top: clamp(28px, 5vw, 64px);
}
.type { margin: 0; text-align: center; }
/* the box footprint = the closed (rest) illustration; width drives sizing */
.type__img {
  position: relative; display: block;
  width: clamp(118px, 14vw, 152px); margin-inline: auto;
  aspect-ratio: 700 / 1337;
}
.type__illu {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  display: block; transition: opacity .5s var(--ease-out);
}
/* lid-lifted version: same width, bottom-aligned, taller — spills upward */
.type__illu--hover {
  inset: auto; left: 0; bottom: 0;
  width: 100%; height: auto; opacity: 0;
}
/* hover (fine pointers) OR scroll-activation (touch) lifts the lid */
.type:hover .type__illu,
.type.is-active .type__illu { opacity: 0; }
.type:hover .type__illu--hover,
.type.is-active .type__illu--hover { opacity: 1; }
.type__name {
  margin-top: 1.2rem; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1;
}
.type__blurb {
  margin-top: .55rem; margin-inline: auto; max-width: 26ch;
  font-size: .86rem; color: var(--ink-soft);
}
@media (max-width: 760px) {
  /* keep the 2x2 block; lids lift one after another as the block scrolls through (see main.js) */
  .types__row {
    grid-template-columns: 1fr 1fr;
    gap: 6px clamp(.8rem, 4vw, 1.6rem);
    padding-top: 0; max-width: 420px;
  }
  /* reserve the lifted height (taller aspect) so a rising lid never overlaps another tile;
     the empty top of each box doubles as the row spacing */
  .type__img { width: clamp(140px, 42vw, 175px); aspect-ratio: 700 / 1767; }
}

/* hint cue on the home project card — on its own line below the description */
.project__cue {
  display: block; margin-top: .9rem;
  font-family: var(--grotesque); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bordeaux-mid);
}

/* ════════ SUR MESURE — du croquis à l'objet ════════ */
.surmesure {
  background: linear-gradient(180deg, var(--bordeaux-deep), var(--bordeaux) 34%, var(--bordeaux));
  color: var(--offwhite);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.2rem, 4vw, 3.5rem);
}
.surmesure__head { max-width: 1200px; margin: 0 auto clamp(2.6rem, 6vh, 4.5rem); }
.surmesure__pairs {
  max-width: 1100px; margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(2.4rem, 6vh, 4.5rem);
}
.sm-pair {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.sm-pair__cell { margin: 0; text-align: center; }
/* detoured / transparent objects float on the bordeaux ground */
.sm-pair__cell img {
  width: 100%; height: auto; max-height: 56vh; object-fit: contain; display: block;
  margin-inline: auto;
}
.sm-pair__cell--object img { filter: drop-shadow(0 32px 38px rgba(20, 6, 6, .45)); }
/* a small opposite tilt on each so the pair feels less static */
.sm-pair__cell--sketch img { transform: rotate(-5deg); transform-origin: center bottom; }
.sm-pair__cell--object img { transform: rotate(4deg); transform-origin: center bottom; }
.sm-pair__cell figcaption {
  margin-top: 1rem; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sand);
}
/* big white oil-pastel arrow between croquis and object */
.sm-arrow { display: flex; align-items: center; justify-content: center; }
.sm-arrow svg { width: clamp(70px, 11vw, 150px); height: auto; overflow: visible; }

/* ════════ STUDIO / CHESS ════════ */
.studio {
  background: var(--sand);
  padding: clamp(6rem, 14vh, 10rem) clamp(1.2rem, 4vw, 3.5rem);
}
.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1320px;
  margin-inline: auto;
}
.studio__portrait { margin: 0; }
.studio__portrait img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 3px; filter: grayscale(1) contrast(1.02);
}
/* the atelier illustration is a detoured colour engraving — show it in full,
   straight on the linen, no desaturation */
.studio__portrait--illu img {
  object-fit: contain; border-radius: 0; filter: none;
}
.studio__portrait-note {
  margin-top: 1rem; text-align: center;
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.studio__lead {
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.4;
}
.studio__body {
  margin-top: 1.4rem;
  color: var(--ink-soft);
  font-size: .98rem;
  max-width: 52ch;
}
.studio__body em { font-family: var(--serif); font-style: italic; color: var(--bordeaux-mid); }
.studio__body a {
  color: var(--bordeaux-mid);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.studio__body a:hover { color: var(--bordeaux); }
.studio__facts {
  margin-top: 2.4rem;
  list-style: none;
  display: flex;
  gap: clamp(1.4rem, 3.5vw, 3rem);
  flex-wrap: wrap;
}
.studio__facts li {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.studio__facts span {
  display: block;
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--bordeaux-mid);
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}

/* ════════ CONTACT ════════ */
.contact {
  background: linear-gradient(180deg, var(--bordeaux) 0%, var(--bordeaux-deep) 100%);
  color: var(--offwhite);
  text-align: center;
  padding: clamp(7rem, 18vh, 12rem) clamp(1.2rem, 4vw, 3.5rem) 0;
}
.contact__kicker {
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sand);
  opacity: .8;
}
.contact__mail {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.9rem, 6.4vw, 5.6rem);
  line-height: 1.1;
  position: relative;
}
.contact__mail span { position: relative; }
.contact__mail span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: 2px;
  background: var(--sand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-out);
}
.contact__mail:hover span::after { transform: scaleX(1); transform-origin: left; }
.contact__meta {
  margin-top: 1.8rem;
  font-size: .84rem;
  color: var(--sand);
  opacity: .75;
}

.footer {
  margin-top: clamp(5rem, 12vh, 9rem);
  border-top: 1px solid rgba(245, 239, 230, .18);
  padding: 2.2rem 0 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
}
.footer__brand {
  font-family: var(--serif);
  font-size: 1.2rem;
}
.footer__cols {
  display: flex;
  gap: 2rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer__cols a { opacity: .7; transition: opacity .3s; }
.footer__cols a:hover { opacity: 1; }
.footer__legal { font-size: .72rem; color: var(--sand); opacity: .55; }

/* ════════ CTA band (shared: home + project pages) ════════ */
.cta {
  background: var(--plaster);
  text-align: center;
  padding: clamp(4rem, 11vh, 8rem) clamp(1.2rem, 4vw, 3.5rem);
}
.cta__line {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.15; color: var(--ink);
  margin-bottom: 1.8rem; text-wrap: balance;
}
.cta__btn {
  display: inline-block;
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--offwhite); background: var(--bordeaux);
  padding: 1rem 2.4rem; border-radius: 99px;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out);
}
.cta__btn:hover { background: var(--bordeaux-deep); transform: translateY(-2px); }

/* ════════ reveal helpers (JS adds .is-anim) ════════ */
.js .reveal-y { opacity: 0; transform: translateY(40px); }

/* ════════ responsive ════════ */
@media (max-width: 880px) {
  .nav__group a:not(.nav__cta) { display: none; }

  /* the caption sits ABOVE the shrunken video window, on the bordeaux field,
     so the walk stays clean inside the small frame */
  .hero__caption { bottom: calc(100% + 1.6rem); right: 1.2rem; }
  .hero__scroll-hint { display: none; }

  .projects__grid { grid-template-columns: 1fr; gap: clamp(2.4rem, 7vw, 3rem); }

  .sm-pair { grid-template-columns: 1fr; gap: 1rem; justify-items: center; }
  .sm-arrow svg { width: 64px; transform: rotate(90deg); margin: .2rem auto; }
  .sm-pair__cell img { max-height: 48vh; }

  .studio__grid { grid-template-columns: 1fr; }
  .studio__portrait { margin-top: 1.5rem; }
  .studio__portrait img { aspect-ratio: 4 / 5; }
  /* the atelier engraving is square and composed edge-to-edge — never crop it */
  .studio__portrait--illu img { aspect-ratio: 1 / 1; }

  .footer__cols { gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
}

/* ════════ reduced motion / static fallback ════════ */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* the hero is a single full-height still with the wordmark centred over it */
.static-fallback .hero__stage { height: 100vh; }
.static-fallback .hero__canvas { display: none; }       /* no player without JS */
.static-fallback .hero__fallback { opacity: 1; }        /* show the poster still */
.static-fallback .hero__scroll-hint { display: none; }
.static-fallback .hero__discover { display: none; }   /* no ride without the scrub */
/* without the JS colour-toggle, keep the nav legible: it rides the bordeaux
   masthead and scrolls away rather than floating over light content */
.static-fallback .nav { position: absolute; }
/* nothing animates here — remove the compositor-layer hints entirely */
.static-fallback .hero__intro,
.static-fallback .project__media-inner { will-change: auto; }