/* The Google Fonts @import that used to sit here has been removed.
   It pulled Cormorant Garamond and Space Grotesk, which were referenced ONLY by
   --footer-smart-font / --footer-production-font — two custom properties that
   were declared and never used anywhere (verified: zero `var(--footer-*-font)`
   occurrences in the repo). It cost a render-blocking stylesheet plus DNS/TLS to
   two extra origins for fonts nothing rendered. Removing it also let
   fonts.googleapis.com and fonts.gstatic.com come out of the CSP. */

/* Faces below are subsetted to Latin and Brotli-compressed by
   scripts/build-fonts.mjs (npm run build:fonts). Sources live in
   assets-src/fonts/; public/Fonts/ is generated output.
   5456 kB of raw TTF -> 162 kB of WOFF2.

   font-weight values are kept exactly as they were. The variable faces declare
   a single weight rather than a range, so `font-weight: 200` on
   .footer-scene-title h3 still resolves to the declared 400 — same rendering as
   before. Declaring a range would newly honour that 200 and visibly lighten the
   footer wordmark, which is a design decision, not a build change. */

@font-face {
  font-family: "Small h Sans";
  src: url("/Fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sans Inter Tight Heavy";
  src: url("/Fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Smart Sans";
  src: url("/Fonts/alfa-slab-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Smart slim sans";
  src: url("/Fonts/google-sans-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Editorial New";
  src:
    local("Editorial New"),
    local("PPEditorialNew-Regular"),
    local("PPEditorial New");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src:
    local("Neue Montreal"),
    local("PPNeueMontreal-Book"),
    local("PP Neue Montreal"),
    local("NeueMontreal-Book");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src:
    local("Neue Montreal Medium"),
    local("PPNeueMontreal-Medium"),
    local("PP Neue Montreal Medium"),
    local("NeueMontreal-Medium");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  
  --bg-size:cover;
  --bg: none;
  --text: #111111;
  --muted: rgba(17, 17, 17, 0.64);
  --accent: #c61818;
  --film-bar-size: 20vh;
  /* Feather happens under the bar so the visible scene is fully opaque at the bar edge — no bleed. */
  --film-bar-feather: 60px;
  --film-bar-mask: linear-gradient(
    to bottom,
    transparent calc(var(--film-bar-size) - var(--film-bar-feather)),
    black var(--film-bar-size),
    black calc(100% - var(--film-bar-size)),
    transparent calc(100% - var(--film-bar-size) + var(--film-bar-feather))
  );
  --serif: "Editorial New", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* --footer-smart-font / --footer-production-font removed: declared here but
     never consumed anywhere, and they were the sole reason for the Google Fonts
     @import. The footer wordmark actually uses "Smart Sans" and "Smart slim
     sans" (see .footer-scene-title h1/h3). */
  --space-1: 0.75rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 5rem;
  --space-6: 5rem;
  --radius: 1rem;
  --archive-width: 72rem;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --speed: 720ms;
  /* Notch / home-indicator safe areas (0px on devices without them). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}


/* =========================
   GLOBAL STACKING SYSTEM
   =========================
   Main page-box order:
   1. About
   2. Portfolio surfaces
   3. Home / Hero
   4. Film bars

   CSS owns the scene order again.
   JS only toggles body classes such as `hero-mode`, `portfolio-active`,
   and `about-active` to decide which scene is visible.

   Supporting global UI:
   5. Split transition layer
   6. Site chrome
   7. Modal

   Each root below creates its own stacking context with `isolation: isolate`,
   so child z-index values stay local to that scene instead of fighting globally.
   The shared `--film-bar-size` value defines the visible window for full-bleed scenes
   and is also the value JS updates when it animates the film bars.
*/
#film-frame {
  z-index: 4;
}

.archive,
.site-footer {
  z-index: 2;
}

.hero {
  z-index: 3;
}

.about-section {
  z-index: 1;
}

.chrome {
  z-index: 6;
}

.modal {
  z-index: 7;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* No pull-to-refresh / overscroll glow: edge drags belong to scene swipes. */
  overscroll-behavior-y: none;
  /* The page must never pan sideways; `clip` avoids creating a scroll
     container (hidden is the fallback for older engines). */
  overflow-x: hidden;
  overflow-x: clip;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Restore a real scrollbar for the long scrollable scenes.
   The hero is a fixed, full-bleed frame with `body.hero-mode { overflow: hidden }`,
   so hiding the scrollbar there costs nothing — the document does not scroll.
   The portfolio archive and the about scene DO scroll, sometimes for several
   screens, and hiding the scrollbar there removes the only cue for how long the
   list is and where you are in it.

   THE PORTFOLIO IS GATED AT 1900px, AND THAT IS LOAD-BEARING.
   The scroll-line (the black corner lines and the red ball) renders ONLY above
   1900px — see `@media (max-width: 1900px) { .scroll-line { display: none } }`
   further down. Above that width it mixes three positioning systems that were
   hand-calibrated against a 1920px viewport with NO scrollbar:

     .li-underline / .li-overline  GSAP transform, x: 97.875em   -> absolute
     .scroll-ball / .scroll-indicator  CSS right: 0 on .archive  -> viewport-relative
     .archive-head                 centred, max-width 72rem      -> half-viewport-relative

   Taking 10px for a scrollbar moves those by 0px, 10px and 5px respectively, so
   they visibly desynchronise. Measured at 1920px: ball 1611 -> 1601 while the
   lines stayed at 1566.

   Gating on the SAME 1900px breakpoint means the scrollbar is only ever restored
   where the scroll-line is not rendering, so the animation keeps the exact
   geometry it was tuned for. Both rules are media queries, which match
   window.innerWidth — that value already includes the scrollbar and does not
   change when one appears, so the two conditions cannot disagree and there is no
   show/hide feedback loop.

   The about scene has no width-critical animation, so it is not gated. */
@media (max-width: 1900px) {
  html:has(body.portfolio-active) {
    -ms-overflow-style: auto;
    scrollbar-width: thin;
  }

  html:has(body.portfolio-active)::-webkit-scrollbar {
    display: block;
    width: 10px;
    height: 10px;
  }
}

html:has(body.about-active) {
  -ms-overflow-style: auto;
  scrollbar-width: thin;
}

html:has(body.about-active)::-webkit-scrollbar {
  display: block;
  width: 10px;
  height: 10px;
}

/* Thumb and track are pure colour — no layout effect — so they need no gating. */
html:has(body.portfolio-active)::-webkit-scrollbar-thumb,
html:has(body.about-active)::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 17, 0.28);
  border-radius: 10px;
}

html:has(body.portfolio-active)::-webkit-scrollbar-track,
html:has(body.about-active)::-webkit-scrollbar-track {
  background: transparent;
}

body {
  margin: 0;
  color: var(--text);
  font: 400 16px/1.45 var(--sans);
}

body.modal-open,
body.about-active {
  overflow: hidden;
}

body.hero-mode {
  overflow: hidden;
}

a,
button {
  color: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

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

[hidden] {
  display: none !important;
}

.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;
}

a:focus-visible,
button:focus-visible {
  /* 2px, not 1px: a hairline indicator is easy to lose against the poster
     artwork in the grid, and WCAG 2.4.13 asks for a 2px minimum thickness. */
  outline: 2px solid var(--accent);
  outline-offset: 0.3rem;
}

/* The accent red measures ~2.3:1 against the black hero, footer scene and modal
   backdrop — under the 3:1 that WCAG 1.4.11 requires of a focus indicator.
   Switch to white on those dark surfaces (~21:1) and keep the red on light ones. */
body[data-scene-state="hero"] .chrome a:focus-visible,
body[data-scene-state="hero"] .hero a:focus-visible,
body[data-scene-state="hero"] .hero button:focus-visible,
.modal a:focus-visible,
.modal button:focus-visible,
.site-footer a:focus-visible,
.footer-scene-social:focus-visible {
  outline-color: #ffffff;
}

/* Shared type */
.section-label,
.project-index,
.project-meta,
.modal-details,
.brand,
.portfolio-link,
.about-link,
.socials a,
.filter-link,
.modal-close,
.site-footer-legal {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

h1,
h2,
h3,
.about-copy {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.95;
}

.section-label,
.project-index,
.project-meta,
.modal-details {
  color: var(--muted);
}

/* Shared text-link underline */
.brand,
.portfolio-link,
.about-link,
.socials a,
.filter-link,
.modal-close {
  position: relative;
  width: fit-content;
  text-decoration: none;
}

.brand::after,
.portfolio-link::after,
.about-link::after,
.socials a::after,
.filter-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.28rem;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.brand:hover::after,
.portfolio-link:hover::after,
.about-link:hover::after,
.socials a:hover::after,
.filter-link:hover::after,
.filter-link.is-active::after {
  transform: scaleX(1);
}

/* Home / Hero Scene */
.hero {
  position: fixed;
  inset: 0;
  isolation: isolate;
  /* Soft mask reveal — scene edges feather into the solid black bars with no visible seam. */
  -webkit-mask-image: var(--film-bar-mask);
  mask-image: var(--film-bar-mask);
  color: #ffffff;
  transition: none;
  /* Nothing scrolls here; declining pan gestures keeps the browser from
     firing pointercancel mid scene-swipe. Pinch zoom stays available. */
  touch-action: pinch-zoom;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.16));
  pointer-events: none;
  transition: none;
}

.hero-video {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  object-fit: cover;
  transition: none;
}

.hero-overlay {
  position: absolute;
  top: var(--film-bar-size);
  bottom: var(--film-bar-size);
  left: clamp(1.5rem, 18vw, 16rem);
  right: clamp(1.5rem, 12vw, 12rem);
  /* Local hero layer: copy sits above the video and gradient, but only inside `.hero`. */
  z-index: 2;
  display: flex;
  align-items: center;
  max-width: 60rem;
  text-align: left;
  transform: none;
  transition: none;
}

.hero-copy {
  max-width: 60rem;
  max-height: 100%;
}

.hero-title {
  font-family: "Sans Inter Tight Heavy", serif;
  margin: 0;
  line-height: 0.95;
  font-weight: 700;
  font-size: clamp(3.4rem, min(10vw, 14vh), 8rem);
  letter-spacing: -1px;
  white-space: pre-line;
}

.hero-phrase {
  margin: clamp(0.4rem, 1.5vh, var(--space-2)) 0 clamp(0.6rem, 2vh, var(--space-3));
  min-height: 1.5em;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.hero-phrase span {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.95;
  transition: transform 260ms ease, opacity 260ms ease;
}

.hero-phrase span.is-out {
  opacity: 0;
  transform: translateX(-1rem);
}

.hero-phrase span.is-in {
  opacity: 0;
  transform: translateX(1rem);
}

.hero-summary {
  max-width: 35rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.7;
}

body.portfolio-active .hero,
body.about-active .hero {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.hero-mode .hero {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 900px) {
  :root {
    --film-bar-size: 10vh;
  }

  .hero-overlay {
    left: var(--space-3);
    right: var(--space-3);
  }

  .hero-copy {
    max-width: 34rem;
  }
}

@media (max-width: 680px) {
  .hero-overlay {
    top: var(--film-bar-size);
    bottom: var(--film-bar-size);
    left: var(--space-2);
    right: var(--space-2);
  }

  .hero-title {
    font-size: clamp(2.8rem, min(11vw, 12vh), 4.2rem);
  }

  .hero-summary {
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Portfolio / Archive Scene */
.archive,
.site-footer {
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.archive {
  position: relative;
  /* Portfolio uses its own stacking context so card/meta z-index values stay local. */
  isolation: isolate;
  padding: 7.5rem var(--space-3) calc(var(--space-6) + var(--safe-bottom));
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.archive-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  width: min(100%, var(--archive-width));
  margin: 0 auto var(--space-5);
}

/* "Selected work" was a <p> and is now an <h2>, to close an h1 -> h3 gap in the
   document outline. That promotion is meant to be purely semantic, but it was
   not: a <p> carries the UA default margin of 1em, while h1-h3 are reset to
   margin:0 globally. Losing those margins shrank .archive-head from 40px to
   17px and pulled the entire card grid up by 23px, desynchronising it from the
   scroll-line rail, which is absolutely positioned at top:15rem and did not
   move. Restoring the original margins keeps the box identical.

   Scoped to .archive-head on purpose: .about-heading is also an h2.section-label
   but was ALWAYS an h2, so it must keep margin:0. */
.archive-head .section-label {
  /* Both properties are needed to reproduce the old <p> box exactly:
     margin  — h1-h3 are reset to 0 globally, a <p> gets the UA default 1em
     line-height — h1-h3 are set to 0.95 globally, a <p> inherits body's 1.45
     Measured: <p> = 40px tall, h2 with margin alone = 34px, h2 with both = 40px. */
  margin: 1em 0;
  line-height: 1.45;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

body.portfolio-active .archive {
  opacity: 1;
  pointer-events: auto;
}

body.hero-mode .archive,
body.about-active .archive {
  opacity: 0;
  pointer-events: none;
}

/* Footer */
.site-footer {
  position: relative;
  /* Footer shares the portfolio layer because it is part of the same visible page state. */
  isolation: isolate;
  padding: 0 var(--space-3) var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.site-footer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  width: min(100%, var(--archive-width));
  margin: 0 auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.site-footer-copy,
.site-footer-meta {
  display: grid;
  gap: 0.5rem;
}

.site-footer-copy {
  max-width: 34rem;
}

.site-footer-meta {
  justify-items: end;
}

.site-footer-text,
.site-footer-services,
.site-footer-contact,
.site-footer-legal {
  margin: 0;
  color: var(--muted);
}

.site-footer-text,
.site-footer-services {
  font-size: 0.82rem;
  line-height: 1.6;
}

.site-footer-contact {
  font-size: 0.78rem;
}

.site-footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: color 220ms ease;
}

.site-footer-contact a:hover,
.site-footer-contact a:focus-visible {
  color: var(--text);
}

body.portfolio-active .site-footer {
  opacity: 1;
  pointer-events: auto;
}

body.hero-mode .site-footer,
body.about-active .site-footer {
  opacity: 0;
  pointer-events: none;
}

/* Project list */
.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
  width: min(100%, var(--archive-width));
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
}

.projects.is-filtering {
  overflow: hidden;
  pointer-events: none;
}

.project-card {
  flex: 0 0 auto;
  transform-origin: center top;
  transition: transform 420ms var(--ease);
}

.project-card[data-aspect="16:9"] {
  width: min(21rem, 24vw);
}

.project-card[data-aspect="reel"] {
  --reel-scale: 1.5;
  --reel-media-width: calc(clamp(6.64rem, 7.59vw, 7.6rem) * var(--reel-scale));
  --reel-title-rail: 1.05rem;
  --reel-title-gap: 0.35rem;
  --reel-card-width: calc(var(--reel-media-width) + var(--reel-title-rail) + var(--reel-title-gap));
  width: var(--reel-card-width);
  flex-basis: var(--reel-card-width);
  min-width: var(--reel-card-width);
}

/* Keep archive cards on a flat baseline with no stagger offset. */
.project-card,
.project-card.is-shifted,
.project-card:nth-child(3n) {
  margin-top: 0;
}

.project-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-2);
  text-align: left;
  /* Cards are <a> elements now (each project has a real page at /work/<slug>/).
     Anchors underline their text by default, which the previous <button> did
     not — without this the card titles and descriptions would gain underlines. */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.project-open--reel {
  grid-template-columns: var(--reel-title-rail) minmax(0, var(--reel-media-width));
  grid-template-areas: "title media";
  column-gap: var(--reel-title-gap);
  row-gap: 0;
}

.project-media {
  --index-space: 1rem;
  position: relative;
  min-width: 0;
  padding-top: var(--index-space);
}

.project-media--reel {
  grid-area: media;
}

.project-frame {
  width: 100%;
  overflow: hidden;
  background: #d7d2cc;
  border-radius: 0;
}

.project-frame {
  aspect-ratio: 16 / 9;
  transition: transform 420ms var(--ease), box-shadow 420ms ease;
}

.project-card[data-aspect="reel"] .project-frame {
  aspect-ratio: 9 / 16;
}

.project-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 420ms var(--ease);
}

.project-index {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Scoped to .project-media: the static SEO placeholder cards in index.html
   have no media wrapper, and an unscoped absolute meta would position
   against .archive and overflow the document horizontally. */
.project-media .project-meta {
  position: absolute;
  top: calc(50% + (var(--index-space) * 0.5));
  right: -0.55rem;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translate(100%, -50%) rotate(180deg);
}

.project-card[data-aspect="reel"] .project-meta {
  right: -0.45rem;
}

.project-copy {
  display: block;
  min-width: 0;
}

.project-copy--reel {
  grid-area: title;
  align-self: center;
  justify-self: center;
  min-width: var(--reel-title-rail);
  padding-top: 1rem;
}

.project-title {
  font-family: var(--sans);
  font-size: clamp(0.68rem, 1.4vw, 1.16rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-title--reel {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: visible;
  text-overflow: clip;
}

.project-description {
  display: none;
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.25;
}

.project-description--reel {
  font-size: 0.68rem;
}

.project-card[data-aspect="reel"] .project-open {
  gap: 0.2rem;
}

.project-index,
.project-meta,
.project-title,
.project-description {
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .project-open:hover .project-frame,
  .project-open:focus-visible .project-frame {
    transform: scaleX(1.06) scaleY(1.015);
    box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, 0.08);
  }

  .project-open:hover .project-poster,
  .project-open:focus-visible .project-poster {
    transform: scale(1.08);
  }

  .project-open:hover .project-index,
  .project-open:focus-visible .project-index,
  .project-open:hover .project-description,
  .project-open:focus-visible .project-description {
    opacity: 1;
  }

  .project-open:hover .project-index,
  .project-open:focus-visible .project-index {
    transform: translate(-0.18rem, -0.18rem);
  }

  .project-card[data-aspect="reel"] .project-open:hover .project-meta,
  .project-card[data-aspect="reel"] .project-open:focus-visible .project-meta {
    transform: translate(calc(100% + 0.14rem), calc(-50% - 0.05rem)) rotate(180deg);
  }

  .project-card[data-aspect="reel"] .project-open:hover .project-title--reel,
  .project-card[data-aspect="reel"] .project-open:focus-visible .project-title--reel {
    transform: translateX(-0.16rem) rotate(180deg);
  }
}

/* Between-state overlay */
.in-between-hero-archive {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Panels taller than a small/landscape viewport scroll instead of clipping
     (the `margin: auto` on the panels keeps them centered when they fit). */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.in-between-hero-archive::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body[data-scene-state="between-hero-portfolio"] .in-between-hero-archive,
body[data-scene-state="between-portfolio-about"] .in-between-hero-archive,
body[data-scene-state="between-about-hero"] .in-between-hero-archive {
  opacity: 1;
  pointer-events: auto;
}




.in-between-hero-archive.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.in-between-hero-archive.is-between-about-hero {
  align-items: stretch;
  padding: 0;
}

/* Desktop only: contain the rocket flight stage. On smaller viewports the
   rocket is not mounted and the overlay must stay scrollable. */
@media (min-width: 901px) {
  .in-between-hero-archive.is-between-hero-portfolio {
    overflow: hidden;
  }
}

/* Base panel — used by simple between states */
.between-state-panel {
  width: min(100%, 52rem);
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
  padding: var(--space-4);
  /* Center in the flex overlay, but stay reachable when taller than it. */
  margin: auto;
}

/* Hero → Portfolio variant: media | divider | text */
.between-state-panel--hero-portfolio {
  width: min(100%, 90rem);
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  text-align: left;
  justify-items: stretch;
  overflow: hidden;
}

.between-state-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  align-self: stretch;
}

.between-state-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-height: clamp(24rem, 52vh, 36rem);
  padding: clamp(2rem, 6vh, 5rem) clamp(2rem, 4vw, 4.5rem) clamp(2rem, 6vh, 5rem) 0;
}

.between-state-panel--hero-portfolio,
.between-state-media > * {
  position: relative;
  z-index: 1;
}

.between-flight-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.between-flight-stars,
.between-flight-trail {
  position: absolute;
  inset: 0;
}

.between-flight-star {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 0.4rem;
  height: 0.4rem;
  transform: translate(-50%, -50%);
  opacity: 0.28;
  animation: between-star-twinkle var(--st, 2.2s) ease-in-out infinite;
  animation-delay: var(--sd, 0s);
}

.between-flight-star::before,
.between-flight-star::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
}

.between-flight-star::before {
  transform: scaleX(0.18);
}

.between-flight-star::after {
  transform: scaleY(0.18);
}

.between-flight-star--sm {
  width: 0.28rem;
  height: 0.28rem;
}

.between-flight-star--md {
  width: 0.42rem;
  height: 0.42rem;
}

.between-flight-star--lg {
  width: 0.7rem;
  height: 0.7rem;
}

.between-flight-trail {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.between-flight-brain,
.between-flight-rocket {
  position: absolute;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.between-flight-brain {
  width: clamp(6rem, 11vw, 9rem);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 2rem rgba(255, 255, 255, 0.08));
}

.between-flight-rocket {
  width: clamp(2.5rem, 5vw, 4rem);
  height: auto;
  opacity: 0;
}

.between-state-logo-count {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}

.between-state-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2.5vh, 1.75rem);
  padding: clamp(2rem, 6vh, 5rem) 0 clamp(2rem, 6vh, 5rem) clamp(2rem, 4vw, 4.5rem);
}

/* Portfolio → About variant: left/right split instead of stacked layout */
.between-state-panel--portfolio-about {
  position: relative;
  width: min(100%, 84rem);
  justify-items: stretch;
}

.between-state-split {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(18rem, 24rem);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.between-state-split-copy {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  text-align: left;
}

.between-state-kicker {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.between-state-kicker::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.between-state-title {
  margin: 0;
  font-family: "Sans Inter Tight Heavy", serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  overflow: hidden;
}

.between-state-title-word {
  display: inline-block;
  transform-origin: left bottom;
  will-change: transform, opacity;
}

.between-state-copy {
  margin: 0;
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.7;
  font-size: 0.875rem;
}

/* Company logo grid — 4 columns, logos stagger in */
.company-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: clamp(1.25rem, 2.5vh, 2rem);
  column-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  width: 100%;
  align-items: center;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Logo flip + staggered text entrance are now driven by GSAP in
   js/between-state.js — JS sets the starting opacity inline and tweens
   the rest, so CSS only needs the visual styling here. */
.company-logo-item {
  width: 100%;
  height: auto;
  max-height: clamp(2.4rem, 3.8vw, 4.5rem);
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes between-star-twinkle {
  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.12); }
}

.between-state-content-slot {
  width: min(100%, 34rem);
  min-height: clamp(8rem, 18vw, 12rem);
  display: grid;
  place-items: center;
  padding: var(--space-3);
}

.between-state-content-slot--portfolio-about {
  width: min(100%, 36rem);
  min-height: clamp(28rem, 44vw, 34rem);
  align-self: stretch;
  justify-self: end;
  padding: clamp(1.1rem, 2vw, 1.35rem);
  place-items: stretch;
}

.between-about-slider {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  align-self: stretch;
  /* Horizontal drags step the slider; vertical pans stay with the page. */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.between-about-slider-media,
.between-about-slider-body {
  will-change: opacity, transform;
}

.between-about-slider-media {
  position: relative;
  max-height: clamp(16rem, 28vw, 22rem);
  overflow: hidden;
  border-radius: calc(var(--radius) - 0.2rem);
  background: rgba(255, 255, 255, 0.04);
}

.between-about-slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.between-about-slider-body {
  display: grid;
  gap: 0.65rem;
}

.between-about-slider-eyebrow,
.between-about-slider-status,
.between-about-slider-arrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.between-about-slider-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
}

.between-about-slider-title {
  margin: 0;
  font-family: "Small h Sans", sans-serif;
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.between-about-slider-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
  line-height: 1.65;
}

.between-about-slider-nav {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.between-about-slider-arrow {
  color: rgba(255, 255, 255, 0.52);
  transition: color 220ms ease, transform 220ms ease;
}

.between-about-slider-arrow:hover,
.between-about-slider-arrow:focus-visible {
  color: #ffffff;
}

.between-about-slider-arrow[data-between-about-prev]:hover,
.between-about-slider-arrow[data-between-about-prev]:focus-visible {
  transform: translateX(-0.08rem);
}

.between-about-slider-arrow[data-between-about-next]:hover,
.between-about-slider-arrow[data-between-about-next]:focus-visible {
  transform: translateX(0.08rem);
}

.between-about-slider-status {
  min-width: 3.8rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
}

/* ── Panel REC indicator ─────────────────────────────────── */
.panel-rec {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 10;
  pointer-events: none;
}

.panel-rec-dot {
  position: relative;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #e02020;
  flex-shrink: 0;
  animation: rec-blink 1.4s ease-in-out infinite;
}

.panel-rec-dot::after {
  content: "";
  position: absolute;
  inset: -0.22rem;
  border-radius: 50%;
  background: rgba(224, 32, 32, 0.4);
  animation: rec-ripple 1.4s ease-out infinite;
  pointer-events: none;
}

@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

@keyframes rec-ripple {
  0%   { transform: scale(1);   opacity: 0.5; }
  60%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.panel-rec-label {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Panel viewfinder corners ────────────────────────────── */
.panel-corner {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  z-index: 10;
  pointer-events: none;
}

.panel-corner--tl {
  top: 0;
  left: 0;
  border-top: 1.5px solid rgba(255, 255, 255, 0.4);
  border-left: 1.5px solid rgba(255, 255, 255, 0.4);
}

.panel-corner--tr {
  top: 0;
  right: 0;
  border-top: 1.5px solid rgba(255, 255, 255, 0.4);
  border-right: 1.5px solid rgba(255, 255, 255, 0.4);
}

.panel-corner--bl {
  bottom: 0;
  left: 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  border-left: 1.5px solid rgba(255, 255, 255, 0.4);
}

.panel-corner--br {
  bottom: 0;
  right: 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
  border-right: 1.5px solid rgba(255, 255, 255, 0.4);
}

.footer-scene {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: #000000;
  color: #ffffff;
}

.footer-scene-shell {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(2rem, 5vw, 5rem);
}

.footer-scene-title {
  position: absolute;
  left: clamp(2rem, 5vw, 5rem);
  bottom: clamp(9.5rem, 17vh, 13rem);
  display: grid;
  gap: 0rem;
  overflow: visible;
}

.footer-scene-title h1,
.footer-scene-title h3 {
  display: block;
  width: fit-content;
  margin: 0;
  color: #ffffff;
  letter-spacing: -7px;
  transform-origin: left center;
  overflow: hidden;
  z-index: 9999;
}

.footer-scene-title h1 {
  font-family: "Smart Sans", serif;
  font-size: clamp(1rem, 10vw, 12rem);
  font-weight: 400;
  line-height: 1;
}

.footer-scene-title h3 {
  font-family: "Smart slim sans", serif;
  font-size: clamp(2.5rem, 7.6vw, 8.8rem);
  font-weight: 200;
  line-height: 1;
  /* margin-left: clamp(0rem, 1vw, 1.2rem); */
  margin-top: clamp(-2.5rem, -2.2vw, -1rem);
  transform: scaleX(0.95);
  white-space: nowrap;
}

.footer-scene-title-word {
  display: inline-block;
  transform-origin: left bottom;
  will-change: transform, opacity;
}

.footer-scene-info {
  position: absolute;
  right: clamp(2rem, 5vw, 5rem);
  bottom: clamp(9.5rem, 17vh, 13rem);
  width: min(34rem, 34vw);
  display: grid;
  gap: 1.1rem;
}

.footer-scene-copy {
  display: grid;
  gap: 0.65rem;
}

.footer-scene-copy-line {
  display: block;
  min-height: 1.35em;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--sans);
  font-size: clamp(0.9rem, 1.05vw, 1.15rem);
  font-weight: 400;
  line-height: 1.35;
}

/* Primary CTA in the footer scene. justify-self:start keeps it to its own width
   inside the info grid instead of stretching the full column. min-height clears
   the 24px minimum target size with room to spare. */
.footer-scene-cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.footer-scene-cta:hover,
.footer-scene-cta:focus-visible {
  background: #e02020;
  border-color: #e02020;
}

/* Withdrawn in one narrow band: wide enough for the desktop absolute layout
   (>900px) but too short for it to fit (<=700px tall) — landscape phones at
   932x430, mainly.
   MEASURED 2026-08-06 at 932x430: .footer-scene-services and
   .footer-scene-info ALREADY overlap by 240px there without this button; it is
   a pre-existing bug in the desktop footer layout, not one introduced here.
   Adding the CTA deepened it to 302px, so it steps aside rather than making an
   existing problem worse. Below 900px the flow-column layout takes over and the
   button shows normally.
   Nothing is lost: /contact/ is still reached from the static footer and from
   the CTA on all 24 generated pages. */
@media (min-width: 901px) and (max-height: 700px) {
  .footer-scene-cta {
    display: none;
  }
}

.footer-scene-copy-line.is-typing::after {
  content: "";
  display: inline-block;
  height: 0.9em;
  margin-left: 0.08em;
  border-right: 1px solid #e02020;
  animation: footer-cursor 0.45s steps(1) infinite;
}

@keyframes footer-cursor {
  50% {
    opacity: 0;
  }
}

.footer-scene-services {
  position: absolute;
  top: clamp(6rem, 11vh, 8rem);
  right: clamp(2rem, 5vw, 5rem);
  width: min(34rem, 34vw);
  z-index: 2;
}

.footer-scene-services-title {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.footer-scene-services-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-scene-services-item {
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--sans);
  font-size: clamp(1.15rem, 1.65vw, 1.85rem);
  font-weight: 600;
  line-height: 1.08;
}

.footer-scene-socials {
  position: absolute;
  left: 50%;
  bottom: clamp(2rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  transform: translateX(-50%);
}

.footer-scene-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.8rem, 3vw, 3.4rem);
  height: clamp(2.8rem, 3vw, 3.4rem);
  color: #ffffff;
  background: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  line-height: 0;
  transition: background-color 0.2s ease;
}

.footer-scene-social:hover,
.footer-scene-social:focus-visible {
  background: #e02020;
}

.footer-scene-social-icon {
  width: clamp(1.55rem, 1.75vw, 2rem);
  height: clamp(1.55rem, 1.75vw, 2rem);
  object-fit: contain;
  filter: none;
}

.footer-scene-legal{
  z-index: 9999;
}

.footer-scene-location-text,
.footer-scene-legal,
.footer-scene-small-label {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.footer-scene-location {
  position: relative;
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 2rem);
  max-width: min(58rem, calc(100vw - 8rem));
  margin: 0;
  text-align: right;
}

.footer-scene-location-item {
  margin: 0;
}

.footer-scene-legal {
  position: absolute;
  left: clamp(2rem, 5vw, 5rem);
  bottom: clamp(2rem, 5vw, 5rem);
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.footer-scene-small-label {
  margin: 0 0 0.35rem;
  color: rgba(255, 255, 255, 0.46);
  text-transform: uppercase;
}

.footer-scene-location-text {
  margin: 0;
  white-space: nowrap;
}


/* Footer scene on tablets/phones: the desktop version places everything with
   absolute offsets; below 900px the shell becomes one centered column so
   every block (title, services, info, socials, location, legal) stays
   visible and reachable at any height — the overlay scrolls if needed. */
@media (max-width: 900px) {
  .footer-scene {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .footer-scene-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.4rem, 3.5vh, 2.5rem);
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--space-4) + var(--safe-top)) var(--space-3)
      calc(var(--space-4) + var(--safe-bottom));
    text-align: center;
  }

  .footer-scene-title,
  .footer-scene-services,
  .footer-scene-info,
  .footer-scene-socials,
  .footer-scene-location,
  .footer-scene-legal {
    position: static;
    width: auto;
    max-width: 32rem;
    transform: none;
    margin: 0;
  }

  .footer-scene-title {
    justify-items: center;
  }

  .footer-scene-title h1 {
    font-size: clamp(3rem, 15vw, 6rem);
    letter-spacing: -3px;
  }

  .footer-scene-title h3 {
    font-size: clamp(2rem, 11vw, 4.4rem);
    letter-spacing: -2px;
    margin-top: -0.4rem;
  }

  .footer-scene-services {
    width: 100%;
  }

  .footer-scene-services-item {
    font-size: clamp(1rem, 4vw, 1.35rem);
  }

  .footer-scene-location {
    justify-content: center;
    max-width: none;
    flex-wrap: wrap;
    gap: 1rem;
    text-align: center;
  }

  .footer-scene-legal {
    color: rgba(255, 255, 255, 0.5);
  }

  /* The decorative 3D rocket renders at a fixed 500px stage; on small
     screens it would overlap the flow column, so it sits out (matching the
     hero->portfolio rocket, which is also desktop-only). !important because
     three.js writes an inline `display: block` on its canvas. */
  .footer-scene-rocket-canvas {
    display: none !important;
  }

  .between-state-panel--hero-portfolio,
  .between-state-split {
    grid-template-columns: 1fr;
  }

  .between-state-panel--hero-portfolio,
  .between-state-split-copy {
    text-align: center;
  }

  .between-state-media {
    min-height: clamp(20rem, 44vh, 28rem);
    padding-right: 0;
  }

  .between-flight-stage {
    inset: 0;
  }

  .between-flight-brain {
    width: clamp(8rem, 30vw, 11rem);
  }

  .between-flight-rocket {
    width: clamp(1.8rem, 6vw, 2.5rem);
  }

  .between-state-content-slot--portfolio-about {
    width: 100%;
    min-height: 0;
    justify-self: stretch;
  }

  .in-between-hero-archive.is-between-about-hero {
    padding: 0;
  }

  .between-about-slider-media {
    min-height: clamp(14rem, 54vw, 18rem);
  }

}

/* Footer scene on small tablets / iPad landscape (901-1200px): still the
   desktop absolute-positioning regime (the flex-column layout above only
   applies at <=900px, and the rocket only hides at <=768px), but at these
   shorter/narrower viewports the bottom-anchored blocks (title, info,
   socials) sit too close to the location/legal band and can visually
   collide with it. Raise title/info/socials to free a dedicated bottom
   band, lower the rocket + services into the space that frees up, and
   open up the gap between the left (title) and right (services/info)
   columns a little. */
@media (min-width: 901px) and (max-width: 1200px) {
  .footer-scene-title,
  .footer-scene-info {
    bottom: clamp(11.5rem, 21vh, 15.5rem);
  }

  .footer-scene-socials {
    bottom: clamp(6rem, 12vh, 8rem);
  }

  .footer-scene-services {
    top: clamp(7.5rem, 14vh, 10rem);
  }

  .footer-scene-info,
  .footer-scene-services {
    width: min(28rem, 30vw);
    right: clamp(2.5rem, 6vw, 5.5rem);
  }

  .footer-scene-title {
    left: clamp(2.5rem, 6vw, 5.5rem);
  }

  /* The rocket canvas gets its top offset from an inline style written by
     three.js (rocket3dstyle.js sets `top: 100px`); !important is required
     to override that inline value from CSS. */
  .footer-scene-rocket-canvas {
    top: 170px !important;
  }
}

/* About Scene */
.about-section {
  background-image: var(--bg);
  background-size: var(--bg-size);
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  inset: 0;
  /* About is the highest page box and keeps its children local with an isolated stack. */
  isolation: isolate;
  -webkit-mask-image: var(--film-bar-mask);
  mask-image: var(--film-bar-mask);
  display: grid;
  align-items: center;
  /* `safe` keeps the top reachable when the content is taller than the
     viewport (otherwise centering pushes it into unreachable overflow). */
  align-items: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  padding: 7.5rem var(--space-3) calc(var(--space-6) + var(--safe-bottom));
  /* background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(247, 243, 237, 0.98)),
    var(--bg); */
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.about-shell {
  display: grid;
  grid-template-columns: minmax(0, 52rem);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: var(--space-4);
  max-width: 92rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  transform: translateY(1.5rem);
  transition: transform 520ms var(--ease), opacity 420ms ease;
}

.about-heading {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.about-rail {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}

.about-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: #050505;
  font-weight: 700;
}

.about-arrow,
.about-status {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-arrow {
  color: #050505;
  transition: color 220ms ease, transform 220ms ease;
}

.about-arrow:hover,
.about-arrow:focus-visible {
  color: #000;
}

.about-arrow[data-about-prev]:hover,
.about-arrow[data-about-prev]:focus-visible {
  transform: translateX(-0.08rem);
}

.about-arrow[data-about-next]:hover,
.about-arrow[data-about-next]:focus-visible {
  transform: translateX(0.08rem);
}

.about-status {
  min-width: 3.5rem;
  color: #050505;
}

.about-photo-wrap {
  overflow: hidden;
  border-radius: 2px;
}

.about-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 360ms var(--ease), opacity 360ms ease;
}

/* Exit: current photo slides out in the direction of travel. */
.about-photo.is-exiting-left  { transform: translateX(-10%); opacity: 0; }
.about-photo.is-exiting-right { transform: translateX(10%);  opacity: 0; }

/* Enter-from: starting offset committed without transition so the slide-in
   animation has a position to move from. The class is removed one frame later. */
.about-photo.is-entering-right { transform: translateX(10%);  opacity: 0; transition: none; }
.about-photo.is-entering-left  { transform: translateX(-10%); opacity: 0; transition: none; }

.about-copy-wrap {
  max-width: 52rem;
  min-height: clamp(11rem, 32vh, 16rem);
  /* Horizontal swipes (touch/stylus) step the about slides. */
  touch-action: pan-y pinch-zoom;
}

.about-copy {
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  white-space: pre-line;
}

.about-copy.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.88em;
  margin-left: 0.12em;
  background: currentColor;
  vertical-align: -0.08em;
  animation: about-caret 850ms step-end infinite;
}

/* LLMO/GEO/AEO quick facts: remove with the matching HTML block if needed. */
.about-machine-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.2rem);
  width: min(100%, 58rem);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  text-align: left;
}

.about-machine-facts-title,
.about-machine-question,
.about-machine-answer {
  margin: 0;
  font-family: var(--sans);
  letter-spacing: 0;
}

.about-machine-facts-title {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-machine-fact {
  display: grid;
  gap: 0.35rem;
}

.about-machine-question {
  color: var(--text);
  font-size: clamp(0.84rem, 1vw, 0.96rem);
  font-weight: 700;
  line-height: 1.25;
}

.about-machine-answer {
  color: var(--muted);
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  line-height: 1.45;
}

@keyframes about-caret {
  50% {
    opacity: 0;
  }
}

body.about-active .about-section {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.about-active .about-shell {
  transform: translateY(0);
}

/* Film Frame Component */
#film-frame {
  position: fixed;
  inset: 0;
  /* Global layer 1: the bars live behind every page box. */
  isolation: isolate;
  pointer-events: none;
}

#top-film-bar,
#bottom-film-bar {
  position: absolute;
  left: 0;
  width: 100%;
  /* Always rendered at max bar size; clip-path reveals only the visible slice.
     This keeps the element box static so height changes never trigger CLS.
     dvh tracks the shrinking/growing mobile browser UI; vh is the fallback. */
  height: 50vh;
  height: 50dvh;
  background: #000000;
  transition: none;
  will-change: clip-path;
}

#top-film-bar {
  top: 0;
  clip-path: inset(0 0 calc(100% - var(--film-bar-size)) 0);
}

#bottom-film-bar {
  right: 0;
  bottom: 0;
  overflow: hidden;
  transition: none;
  clip-path: inset(calc(100% - var(--film-bar-size)) 0 0 0);
}

#bottom-film-bar::after {
  content: none;
}

.companies-carousel-viewport {
  /* Auto-height; we position the content with `transform` so the box
     itself never resizes — keeps this element out of the CLS budget
     while still tracking the animated `--film-bar-size`. */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(calc(50% - var(--film-bar-size) / 2));
  width: min(100%, 68rem);
  display: grid;
  gap: clamp(0.8rem, 1.2vw, 1rem);
  opacity: 1;
  transition: opacity 0.6s ease;
  will-change: transform;
}

body:not([data-scene-state="hero"]) .companies-carousel-viewport {
  opacity: 0;
  pointer-events: none;
}

.companies-carousel-heading {
  text-align: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--sans);
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.035em;
}

.companies-carousel-rows {
  display: grid;
  gap: clamp(0.8rem, 1.1vw, 1rem);
  justify-items: center;
}

.companies-carousel-lane {
  display: grid;
  /* minmax(0, …) lets the columns shrink instead of overflowing the lane
     when the viewport is narrower than the ideal logo width sum. */
  grid-template-columns: repeat(var(--companies-count), minmax(0, clamp(7rem, 8.2vw, 8.5rem)));
  justify-content: center;
  gap: 0;
  align-items: center;
}

.companies-carousel-logo {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(2rem, 2.3vw, 2.4rem);
  padding: 0 0.25rem;
}

.companies-carousel-image {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: invert(1) grayscale(1) brightness(0.92) contrast(1.04);
  transform: scale(var(--company-logo-scale, 1));
  transform-origin: center;
  opacity: 0.92;
  user-select: none;
  -webkit-user-drag: none;
}


/* Chrome */
body[data-scene-state="between-hero-portfolio"] .chrome-left,
body[data-scene-state="between-hero-portfolio"] .socials,
body[data-scene-state="between-hero-portfolio"] .nav-toggle,
body[data-scene-state="between-portfolio-about"] .socials,
body[data-scene-state="between-portfolio-about"] .chrome-left,
body[data-scene-state="between-portfolio-about"] .nav-toggle,
body[data-scene-state="between-about-hero"] .chrome-left,
body[data-scene-state="between-about-hero"] .socials,
body[data-scene-state="between-about-hero"] .nav-toggle {
  color: #ffffff;
}

body[data-scene-state="hero"] .socials,
body[data-scene-state="hero"] .chrome-left,
body[data-scene-state="hero"] .nav-toggle {
  color: #ffffff;
}





.chrome {
  position: fixed;
  inset: calc(var(--space-3) + var(--safe-top))
    calc(var(--space-3) + var(--safe-right))
    calc(var(--space-3) + var(--safe-bottom))
    calc(var(--space-3) + var(--safe-left));
  /* Chrome is global UI above the page boxes, with its own local stack. */
  isolation: isolate;
  /* color: #ffffff; */
  pointer-events: none;
  transition: none;
}

.chrome-left,
.socials {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  pointer-events: auto;
}

.chrome-left {
  left: 0;
  gap: 0;
}

.portfolio-group,
.about-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  max-width: 10rem;
  overflow: hidden;
  padding-bottom: 0.4rem;
  margin-bottom: -0.4rem;
  white-space: nowrap;
  opacity: 1;
  transform: translateX(0) scale(1);
  transform-origin: left center;
  transition: none;
}

.portfolio-group .nav-separator,
.about-group .nav-separator {
  margin-left: 0.65rem;
  margin-right: 0.65rem;
  transition: none;
}

.socials {
  right: 0;
}

.socials a {
  pointer-events: auto;
}

.nav-separator {
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
}

/* Mobile nav — classic three-line toggle + black dropdown.
   Desktop never shows it, and without JavaScript it stays [hidden]: the
   inline links remain the navigation. js/nav-menu.js reveals the toggle and
   adds body.has-nav-menu, which collapses the inline links at phone widths. */
.nav-toggle,
.nav-menu {
  display: none;
}

@media (max-width: 680px) {
  body.has-nav-menu .portfolio-group,
  body.has-nav-menu .about-group,
  body.has-nav-menu .socials {
    display: none;
  }

  body.has-nav-menu .nav-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.4rem;
    height: 2rem;
    padding: 0.35rem 0.45rem;
    pointer-events: auto;
  }

  .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 240ms var(--ease), opacity 180ms var(--ease);
  }

  /* Three lines fold into an X while the menu is open. Bar pitch is
     2px bar + 4px gap = 6px, which is what the translateY values match. */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-menu {
    position: absolute;
    top: calc(2rem + 0.6rem);
    right: 0;
    min-width: 11rem;
    padding: 0.5rem 0;
    background: #000000;
    color: #ffffff;
    pointer-events: auto;
  }

  .nav-menu:not([hidden]) {
    display: grid;
  }

  .nav-menu a {
    padding: 0.8rem 1.25rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .nav-menu a:hover,
  .nav-menu a:focus-visible {
    background: rgba(255, 255, 255, 0.14);
  }
}

body.portfolio-active .chrome {
  color: var(--text);
}

body.about-active .chrome {
  color: var(--text);
}

body.portfolio-active .portfolio-group,
body.about-active .portfolio-group,
body.about-active .about-group {
  max-width: 10rem;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

body.hero-mode .brand::after,
body.portfolio-active .portfolio-link::after,
body.about-active .about-link::after {
  transform: scaleX(1);
}

@media (max-width: 900px) {


  .between-flight-rocket, 
  .between-flight-brain,
  .between-flight-trail {
    display: none;
  }
  .archive-head {
    display: grid;
  }


  .about-shell {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: center;
  }

  .about-machine-facts {
    grid-template-columns: 1fr;
    max-width: 34rem;
    text-align: center;
  }

  .about-photo {
    aspect-ratio: 16/9;
  }

  .projects {
    gap: var(--space-4);
  }

  .project-card[data-aspect] {
    width: min(20rem, calc(50vw - 3rem));
    margin-top: 0;
  }

  .project-card[data-aspect="reel"] {
    --reel-media-width: clamp(9rem, 24vw, 12rem);
  }
}

/* iPad / small-tablet landscape: the desktop card grid is still active here
   (the 2-up compact grid above only kicks in at <=900px), but the desktop
   row-gap clamp (up to 5rem) leaves too much dead space between rows at
   these widths. Tighten just the row-gap; column-gap stays as the default. */
@media (min-width: 901px) and (max-width: 1200px) {
  .projects {
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
  }
}

.home-play-button {
  color: #000000;
  width: clamp(4.5rem, 10vh, 7rem);
  height: clamp(4.5rem, 10vh, 7rem);
  background-color: #ffffff;
  z-index: 1;
  border-radius: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.72rem;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: clamp(0.5rem, 2vh, var(--space-3));
  transition: 0.3s ease;
  text-decoration: none;

}
.home-play-button:hover{

  transition: 0.3s ease;
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  font-weight: 800;
}

/* Opt-in hero video playback for reduce-motion visitors.
   Hidden for everyone else, so the default hero composition is unchanged —
   it only ever appears for someone who has asked the OS to reduce motion and
   therefore does not get the autoplaying background video. */
.hero-video-play {
  display: none;
  margin-top: clamp(0.5rem, 2vh, var(--space-3));
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.hero-video-play:hover {
  border-color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
}

@media (max-width: 680px) {
  .project-title--wide {
    font-size: 0.75rem;
    font-weight: 600;
  }

  .project-open.project-open--wide {
    position: relative;
    padding-top: calc(var(--space-1) + 0.5rem);
    gap: var(--space-1) var(--space-2);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "media media"
      "meta title";
  }

  .project-media--wide {
    display: contents;
  }

  .project-card[data-aspect="16:9"] .project-frame {
    grid-area: media;
  }

  .project-copy--wide {
    grid-area: title;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    padding-top: 0;
    text-align: right;
  }



  .chrome {
    inset: calc(var(--space-2) + var(--safe-top))
      calc(var(--space-2) + var(--safe-right))
      calc(var(--space-2) + var(--safe-bottom))
      calc(var(--space-2) + var(--safe-left));
  }

  .socials {
    gap: 0.45rem;
  }

  .archive,
  .about-section,
  .site-footer {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
  }

  .site-footer-shell {
    grid-template-columns: 1fr;
  }

  .site-footer-meta {
    justify-items: start;
  }

  .about-copy-wrap {
    min-height: 9rem;
  }

  .projects {
    display: grid;
    grid-template-columns: 1fr;
  }

  .project-card[data-aspect] {
    width: 100%;
  }

  .project-card[data-aspect="reel"] {
    min-width: 0;
  }

  .project-open--reel {
    position: relative;
    padding-top: calc(var(--space-1) + 0.5rem);
    gap: var(--space-1) var(--space-2);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "media media"
      "meta title";
  }

  .project-media--reel {
    display: contents;
  }

  .project-card[data-aspect="reel"] .project-frame {
    grid-area: media;
  }

  .project-meta,
  .project-media .project-meta {
    grid-area: meta;
    position: static;
    display: block;
    margin-top: 0;
    align-self: start;
    justify-self: start;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .project-copy--reel {
    grid-area: title;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    padding-top: 0;
    text-align: right;
  }

  .project-title--reel {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .companies-carousel-viewport {
    display: none;
  }

  .home-play-button {
    width: clamp(4rem, 10vh, 5rem);
    height: clamp(4rem, 10vh, 5rem);
    margin-top: clamp(0.5rem, 1.5vh, var(--space-2));
  }
}

@media (max-width: 480px) {
  .socials {
    display: none;
  }

  .chrome-left {
    width: 100%;
    justify-content: space-between;
  }

  .portfolio-group {
    margin-left: auto;
  }

  /* Keep brand + portfolio + about on one uncut line on narrow phones. */
  .brand,
  .portfolio-link,
  .about-link {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }

  .portfolio-group .nav-separator,
  .about-group .nav-separator {
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }

  .between-state-copy {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .between-about-slider-copy {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .between-state-panel {
    padding: var(--space-3);
  }

  .between-state-media {
    min-height: clamp(13rem, 32vh, 20rem);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .between-state-content-slot--portfolio-about {
    padding: var(--space-2) 0;
  }

  .between-about-slider-media {
    min-height: clamp(11rem, 46vw, 16rem);
  }

  .between-state-title {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
    line-height: 0.96;
  }

  .company-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-section,
  .archive {
    padding-top: 5.5rem;
  }

  .about-copy-wrap {
    min-height: 6rem;
  }

  .about-copy {
    line-height: 1.15;
  }

  .about-machine-facts {
    gap: 0.7rem;
  }

}

@media (max-height: 700px) {
  .about-section {
    align-items: start;
    padding-top: 4.25rem;
    padding-bottom: 2rem;
  }

  .about-shell {
    gap: var(--space-2);
  }

  .about-heading {
    font-size: clamp(2.35rem, 9vh, 4.5rem);
  }

  .about-copy-wrap {
    min-height: auto;
  }

  .about-copy {
    font-size: clamp(1rem, 2.3vh, 1.25rem);
    line-height: 1.15;
  }

  .about-machine-facts {
    gap: 0.5rem;
    padding-top: 0.65rem;
  }

  .about-machine-question {
    font-size: 0.78rem;
  }

  .about-machine-answer {
    font-size: 0.72rem;
    line-height: 1.3;
  }
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 0;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
}

.modal-panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.modal-close {
  position: fixed;
  top: calc(var(--space-3) + var(--safe-top));
  right: calc(var(--space-3) + var(--safe-right));
  z-index: 1;
  color: #ffffff;
  font-size: 0.82rem;
  /* Small glyph, big target. */
  padding: 0.75rem;
  margin: -0.75rem;
}

.modal-embed,
.modal-video {
  width: min(92vw, 92rem);
  max-height: 88vh;
  max-height: 88dvh;
  border: 0;
  aspect-ratio: 16 / 9;
  background: #000000;
}

/* Vertical reels keep their own frame instead of the 16:9 letterbox. */
.modal--reel .modal-embed,
.modal--reel .modal-video {
  aspect-ratio: 9 / 16;
  width: auto;
  height: 88vh;
  height: 88dvh;
  max-width: 92vw;
}

.modal-video {
  object-fit: contain;
}

.modal-meta {
  display: none;
}


.scroll-line {
  display: contents;
  /* position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh; */
}
.scroll-indicator {
  position: absolute;
  top: 15rem;
  bottom: 0;
  right: 0;
  padding: 2px;
  height: auto;
  background-color: #000000;
  transform: translateX(-300px);
}
.scroll-ball,.scroll-circle,.scroll-circle-2 {
  position: absolute;
  right: 0;
  padding: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ff0000;
}




.li-underline, .li-overline{
  display: none;
  background-color: #000000;
}
.li-underline{
  position: absolute;
  padding: 1px;
  left:0
}

.li-overline{
  position: absolute;
  padding: 1px;
}

@media (max-width: 1900px) {
  .scroll-line {
    display: none;
  }
}

@media (max-width: 680px) {
  .modal {
    padding-right: var(--space-2);
    padding-left: var(--space-2);
  }

  .modal-close {
    top: var(--space-2);
    right: var(--space-2);
  }
}

/* Cross-browser support layer */
@supports (height: 100dvh) {
  .hero,
  .about-section,
  .modal,
  .modal-panel,
  .in-between-hero-archive,
  #film-frame {
    min-height: 100dvh;
  }
}

@supports not ((-webkit-mask-image: linear-gradient(#000000, #000000)) or (mask-image: linear-gradient(#000000, #000000))) {
  .hero,
  .about-section {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@supports not (clip-path: inset(0)) {
  #top-film-bar,
  #bottom-film-bar {
    height: var(--film-bar-size);
    clip-path: none;
  }
}

@supports not (aspect-ratio: 16 / 9) {
  .project-frame,
  .about-photo-wrap,
  .between-about-slider-media {
    position: relative;
  }

  .project-frame::before,
  .about-photo-wrap::before,
  .between-about-slider-media::before {
    content: "";
    display: block;
  }

  .project-frame::before,
  .between-about-slider-media::before {
    padding-top: 56.25%;
  }

  .project-card[data-aspect="reel"] .project-frame::before {
    padding-top: 177.78%;
  }

  .about-photo-wrap::before {
    padding-top: 133.33%;
  }

  .project-poster,
  .about-photo,
  .between-about-slider-image {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  @media (max-width: 900px) {
    .about-photo-wrap::before {
      padding-top: 56.25%;
    }
  }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .archive,
  .site-footer {
    background-attachment: scroll;
  }
}

@supports (-webkit-touch-callout: none) {
  .archive,
  .site-footer {
    background-attachment: scroll;
  }
}

@media (hover: none) {
  .project-open:hover .project-frame,
  .project-open:hover .project-poster,
  .home-play-button:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Service links inside the footer services sentence. They must read as running
   text, not as a row of buttons — hence colour inherited from the paragraph and
   a hairline underline that only strengthens on hover/focus. */
.site-footer-services a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  border-bottom-color: rgba(17, 17, 17, 0.28);
  transition: border-bottom-color 220ms var(--ease);
}

.site-footer-services a:hover,
.site-footer-services a:focus-visible {
  border-bottom-color: currentColor;
}

/* Primary conversion CTA in the footer. Deliberately restrained: a pill in the
   existing ink colour, using the type scale already defined for nav labels, so
   it reads as part of the set rather than a bolted-on marketing button. */
.site-footer-cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: var(--text);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 300ms var(--ease);
}

.site-footer-cta:hover {
  transform: translateY(-2px);
}

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

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

  /* Reveal the explicit hero-video control. Without an autoplaying background
     video there must still be a way to watch it — the requirement is to stop
     motion happening unbidden, not to withhold the content. */
  .hero-video-play {
    display: inline-flex;
  }

  /* The hero poster is the still frame the video would have shown, so the
     scene still reads as intended while holding completely still. */
  .hero-video {
    object-fit: cover;
  }
}