/* ========================================================================== 
   THE OTHER DALO — SITE STYLES

   QUICK UPDATE MAP
   1. Theme colours and global sizing ............ DESIGN TOKENS
   2. Animation speed, distance and easing ........ MOTION PLAYGROUND
   3. Fixed header and navigation ................ HEADER + NAVIGATION
   4. Hero layout and kinetic title .............. HERO
   5. Shared section typography .................. CONTENT SECTIONS
   6. Project layout templates ................... PROJECT TEMPLATES
   7. Tablet and mobile adjustments .............. RESPONSIVE

   Add a project layout by creating a modifier such as `.project--new-name`
   beside the existing cinematic, mosaic and storyboard templates below.
   ========================================================================== */

/* 1. DESIGN TOKENS — update colours, spacing and type ratios here. */
:root {
  color-scheme: dark;
  scroll-behavior: smooth;
  --orange: #ff3b0a;
  --pink: #f4a6d7;
  --blue: #00a6e2;
  --surface: #1b0e08;
  --surface-alt: #3a272a;
  --text: #f2e9e5;
  --line: #6f5550;
  --muted: #9a8982;
  --grid-color: rgba(255, 59, 10, .09);
  --frame-a: #251712;
  --frame-b: #3e2b2e;
  --frame-c: #1c120a;
  --deep: var(--surface);
  --brown: var(--surface-alt);
  --light: var(--text);
  --page-gutter: clamp(24px, 5vw, 84px);
  --header-height: 90px;
  --header-open-height: clamp(150px, 20vh, 205px);
  --floating-control-size: 42px;
  --floating-edge: clamp(24px, 3vw, 36px);
  --section-pad-top: clamp(80px, 7vw, 110px);
  --section-pad-bottom: clamp(96px, 8vw, 128px);
  /* Golden-ratio-inspired hierarchy. Each editorial tier stays visibly below
     the tier above it while fluid values preserve the relationship. */
  --type-section-title: clamp(82px, 7vw, 112px);
  --type-case-title: clamp(36px, 4.33vw, 68px);
  --type-project-kicker: clamp(16px, 1.5vw, 24px);
  --type-body: clamp(20px, 1.4vw, 23px);
  --type-case-copy: clamp(17px, 1.25vw, 20px);
  --type-hero-copy: clamp(20px, 1.35vw, 22px);
  --type-meta: 14px;
  --hero-display-size: clamp(96px, 9.8vw, 148px);
  --hero-bar-size: clamp(12px, 1vw, 16px);
  --hero-logo-size: clamp(190px, 22vw, 269px);
  --hero-composition-height: clamp(383px, calc(33.81vw + 52px), 563px);
  /* Project media can reach 800px on screens with enough vertical space. */
  --project-media-max-height: 800px;
  /* Matching maximum widths preserve each ratio at the 800px height cap. */
  --project-media-max-width-16-9: 1422px;
  --project-media-max-width-9-16: 450px;
  --project-media-max-width-1-1: 800px;
  --project-media-max-width-4-5: 640px;
}

:root[data-theme='light'] {
  color-scheme: light;
  --surface: #f3ece7;
  --surface-alt: #e3d5cf;
  --text: #21120c;
  --line: #bda59b;
  --muted: #77645c;
  --grid-color: rgba(186, 45, 9, .12);
  --frame-a: #e5d5cc;
  --frame-b: #d2bbb0;
  --frame-c: #f1e7e1;
}

/* 2. MOTION PLAYGROUND — safe values to experiment with.

   QUICK EXAMPLES
   - Slower project entrances: change `--motion-reveal-transform` to `1400ms`.
   - More energetic entrances: change `--motion-reveal-distance` to `90px`.
   - Softer entrances: change `--motion-reveal-distance` to `24px`.
   - More delay between frames: change `--motion-reveal-stagger` to `160ms`.
   - Straighter entrances: set both rotation values to `0deg`.
   - A calmer whole site: change `--motion-ui` to `450ms`.

   The scroll-to-letter timing is controlled by HERO_MOTION in script.js.
   Reduced-motion visitors automatically receive a static version. */
:root {
  --motion-fast: 200ms;
  --motion-ui: 280ms;
  --motion-reveal-opacity: 700ms;
  --motion-reveal-transform: 900ms;
  --motion-reveal-stagger: 90ms;
  --motion-reveal-distance: 54px;
  --motion-reveal-distance-soft: 42px;
  --motion-reveal-distance-feature: 68px;
  --motion-reveal-distance-mobile: 46px;
  --motion-reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-fade-ease: cubic-bezier(.2, .7, .2, 1);
  /* Project 003 stays visibly different, but its drift and tilt remain restrained. */
  --motion-storyboard-shift: 7vw;
  --motion-storyboard-shift-negative: -7vw;
  --motion-storyboard-rotation: 1.4deg;
  --motion-storyboard-rotation-soft: .8deg;
  --motion-storyboard-rotation-negative: -1.4deg;
  /* Unitless because JavaScript applies these values for mobile Safari. */
  --motion-hero-travel: 3.4;
  --motion-hero-rotation: 4;
  --motion-mobile-hero-travel: 5.6;
}

/* 3. RESET + GLOBAL ELEMENTS */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--header-height); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--deep);
  color: var(--light);
  font-family: 'Space Grotesk', Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}

/* 4. HEADER + NAVIGATION
   Update desktop links in `.desktop-nav`; keep matching links in `#mobile-menu`. */
.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  height: var(--header-height);
  padding: 18px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--deep);
  border: 0;
  box-shadow: none;
  transition: none;
}

.wordmark {
  color: var(--orange);
  font-family: 'Unbounded', Arial, sans-serif;
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 800;
  letter-spacing: -.06em;
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.wordmark-expanded { display: none; }
.wordmark-compact {
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.wordmark-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
}
.wordmark-copy { white-space: nowrap; }
.header-actions, .desktop-nav { display: flex; align-items: center; gap: 8px; }
.wordmark { transition: none; }
.desktop-nav a {
  padding: 11px 22px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .11em;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.desktop-nav a:hover, .desktop-nav a.active {
  background: var(--orange);
  color: var(--deep);
  transform: translateY(-2px);
}

/* Borderless theme button; only the internal switch icon is outlined. */
.theme-toggle {
  width: 38px;
  min-width: 38px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle:hover .theme-toggle-icon,
.theme-toggle:focus-visible .theme-toggle-icon { opacity: .65; }
.theme-toggle-icon {
  position: relative;
  width: 26px;
  height: 40px;
  border: 1px solid currentColor;
  pointer-events: none;
  box-shadow: 0 0 0 transparent;
  transform: translate(0, 0);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.theme-toggle-icon::before {
  content: 'I';
  position: absolute;
  inset: 0 0 50%;
  display: grid;
  place-items: center;
  border-bottom: 1px solid currentColor;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.theme-toggle-icon::after {
  content: 'O';
  position: absolute;
  inset: 50% 0 0;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--deep);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}

/* Simple rocker state: O is solid in dark mode; I is solid in light mode.
   The short shadow makes the ON position feel physically pressed/lifted. */
.theme-toggle[aria-pressed='true'] .theme-toggle-icon {
  box-shadow: 0 3px 0 var(--orange);
  transform: translateY(-2px);
}
.theme-toggle[aria-pressed='true'] .theme-toggle-icon::before {
  background: var(--orange);
  color: var(--deep);
}
.theme-toggle[aria-pressed='true'] .theme-toggle-icon::after {
  background: transparent;
  color: var(--orange);
}
.theme-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu-toggle, .mobile-menu { display: none; }

/* 5. FIXED PAGE CONTROLS
   Keep the four indicator links aligned with the four main sections. */
.section-rail {
  position: fixed;
  z-index: 8;
  top: 50%;
  right: var(--floating-edge);
  display: grid;
  gap: 13px;
  font-size: 12px;
  letter-spacing: .12em;
  transform: translateY(-50%);
}
.section-rail a { color: var(--muted); }
.section-rail a.current { color: var(--light); }
.section-rail a.current::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 35px;
  background: var(--orange);
  transform: translate(-15px, -8px);
}

.scroll-arrow, .scroll-down-arrow {
  z-index: 9;
  right: var(--page-gutter);
  bottom: var(--floating-edge);
  width: var(--floating-control-size);
  height: var(--floating-control-size);
  border: 1px solid var(--orange);
  display: grid;
  place-items: center;
  color: var(--orange);
  transition: opacity var(--motion-ui) ease, transform var(--motion-ui) ease, visibility 0s;
}
.scroll-arrow {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
}
.scroll-arrow.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.scroll-down-arrow { position: absolute; }
.scroll-arrow::before, .scroll-down-arrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.scroll-arrow::before { transform: rotate(225deg); }
.scroll-down-arrow::before { transform: rotate(45deg) translate(-2px, -2px); }
.scroll-arrow:hover, .scroll-arrow:focus-visible,
.scroll-down-arrow:hover, .scroll-down-arrow:focus-visible {
  background: var(--orange);
  color: var(--deep);
}
.scroll-down-arrow.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

/* 6. HERO
   Update hero words/copy in index.html (and its HOLDindex.html safety copy);
   timing lives in script.js. */
.hero { --hero-progress: 1; --bar-progress: 1; height: 210vh; }
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  padding: calc(var(--header-height) + 10px) var(--page-gutter) 28px;
  display: flex;
  flex-direction: column;
  background: var(--deep);
}
.hero-main {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}
.hero-visual > span { display: none; }
.visual-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 42%, transparent 92%);
  mask-image: linear-gradient(90deg, transparent, black 42%, transparent 92%);
}
.hero-identity {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--hero-composition-height);
  display: flex;
  align-items: flex-start;
  text-align: left;
}
.hero-graphic-lockup {
  --hero-type-size: var(--hero-display-size);
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-lockup {
  position: absolute;
  z-index: 4;
  top: clamp(288px, 29.4vw, 444px);
  left: 0;
  width: 100%;
  height: var(--hero-bar-size);
}
.hero-shape {
  position: absolute;
  inset: 0;
  height: var(--hero-bar-size);
  overflow: hidden;
  background: rgba(255, 59, 10, .16);
}
.hero-bar-fill {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--orange);
  transform: scaleX(1);
  transform-origin: left center;
  will-change: transform;
}
.hero-logo { position: absolute; top: 32px; right: 0; width: var(--hero-logo-size); }
.hero-logo img { display: block; width: 100%; height: auto; }

.kinetic-title {
  position: relative;
  width: 100%;
  height: clamp(259px, 26.46vw, 400px);
  margin: 0;
  overflow: hidden;
  color: var(--orange);
  font-family: 'Unbounded', Arial, sans-serif;
  font-size: var(--hero-type-size);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.095em;
  text-align: left;
  white-space: nowrap;
}
.kinetic-title > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  text-align: left;
}
.kinetic-title .title-first { width: 5.4em; white-space: normal; }
.kinetic-title .title-second { visibility: hidden; white-space: nowrap; }
.motion-ready .kinetic-title .title-second { visibility: visible; }
.kinetic-title .title-word {
  position: relative;
  display: inline-block;
  width: auto;
  margin-right: .22em;
  white-space: nowrap;
}
.kinetic-title .title-word:last-child { margin-right: 0; }
.kinetic-title .glyph {
  position: relative;
  display: inline-block;
  width: auto;
  transform-origin: center;
  will-change: transform;
}
.kinetic-title .title-first .glyph {
  transform: none;
}
.kinetic-title .title-second .glyph {
  transform: translateY(3.4em) rotate(4deg);
}
.mobile-title-break { display: none; }
.hero-copy {
  position: absolute;
  z-index: 5;
  top: clamp(104px, 10.584vw, 160px);
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--light);
  font-size: var(--type-hero-copy);
  line-height: 1.4;
  letter-spacing: .035em;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(10px);
}

/* 7. SHARED CONTENT SECTIONS */
.content-section {
  min-height: 90vh;
  padding: var(--section-pad-top) var(--page-gutter) var(--section-pad-bottom);
  border-top: 1px solid var(--line);
}
.section-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--pink);
  font-size: var(--type-meta);
  letter-spacing: .18em;
}
.project h2, .section-content h2 {
  margin: 12px 0 22px;
  font-family: 'Unbounded', Arial, sans-serif;
  font-size: var(--type-section-title);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.09em;
}
.project-intro p, .section-content p {
  max-width: 420px;
  font-size: var(--type-body);
  line-height: 1.4;
}

/* 8. PROJECT TEMPLATES
   Shared structure: .project > .project-intro + gallery/art + .project-footer.
   Duplicate a complete article in index.html (and its HOLDindex.html safety
   copy), then reuse or add a modifier. */

.project-case-study {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 48px);
  padding-top: clamp(24px, 2.2vw, 36px);
  border-top: 1px solid var(--line);
}
.project-case-study h3,
.project-case-study-title {
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: var(--type-case-title);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.055em;
}
.project-case-study-title { align-self: end; }
.project-case-study-copy {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  max-width: 720px;
  justify-self: end;
}
.project-case-study p {
  margin: 0;
  font-size: var(--type-case-copy);
  line-height: 1.52;
  letter-spacing: 0;
}
.project-case-study-lead {
  color: var(--light);
  font-weight: 700;
}
.project-case-study-lead strong { font-weight: inherit; }
.project--case-grid {
  --case-grid-gap: clamp(32px, 4vw, 72px);
}
.project--case-grid .project-intro,
.project--case-grid .project-case-study-copy {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--case-grid-gap);
}
.project--case-grid .project-intro {
  align-items: end;
  align-items: last baseline;
}
.project--case-grid .project-intro h2 {
  /* Remove the generic heading tail so the two title blocks share a baseline. */
  margin-bottom: 0;
}
.project--case-grid .project-case-study {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.project--case-grid .project-case-study-copy {
  max-width: none;
  justify-self: stretch;
}
.project-case-study + .project-art,
.project-case-study + .project-gallery {
  margin-top: clamp(36px, 4vw, 64px);
}
.projects { overflow: hidden; overflow: clip; }
.project { position: relative; margin-top: 75px; }
.project + .project {
  margin-top: clamp(120px, 14vw, 230px);
  padding-top: clamp(72px, 7vw, 110px);
  border-top: 1px solid var(--line);
}
.project-intro {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
.project-intro > div { min-width: 0; }
.project-intro p { margin: 0; }
.project-number {
  color: var(--orange);
  font-family: 'Unbounded', Arial, sans-serif;
  font-size: var(--type-project-kicker);
  font-weight: 700;
  letter-spacing: -.06em;
}
.project-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(36px, 4vw, 58px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: var(--type-meta);
  line-height: 1.7;
  letter-spacing: .16em;
}

/* Template 01: single cinematic landscape frame. */
.project-art {
  position: relative;
  width: 100%;
  max-height: var(--project-media-max-height);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: transparent;
}
.project-intro + .project-art {
  /* Keep Project 001 on the same intro-to-gallery rhythm as other templates. */
  margin-top: clamp(18px, 2.5vw, 34px);
}

/* Project 001 preview */
.project--cinematic .project-art.project-preview-frame {
  width: calc(100% + (2 * var(--page-gutter)));
  max-height: none;
  margin-left: 0;
  aspect-ratio: 16 / 9;
  background: transparent;
}
.project-preview-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.project-preview-action {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(18px, 2.5vw, 34px);
}
.project-preview-cta {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 10px 12px;
  border: 1px solid var(--light);
  color: var(--light);
  background: rgba(27, 14, 8, .78);
  background: color-mix(in srgb, var(--deep) 78%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-decoration: none;
  transition: color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}
.link-arrow {
  display: block;
  flex: 0 0 auto;
  width: clamp(16px, 1.45em, 26px);
  height: auto;
  transition: transform var(--motion-fast) ease;
}
.project-preview-frame > picture,
.project-preview-image {
  display: block;
  width: 100%;
  height: 100%;
}
.project-preview-image { object-fit: cover; }
.project-preview-cta:hover,
.project-preview-cta:focus-visible {
  color: var(--orange);
  border-color: var(--orange);
  transform: translateX(6px);
}
.project-preview-cta:hover .link-arrow,
.project-preview-cta:focus-visible .link-arrow {
  transform: translate(2px, -2px);
}
.project-art > span, .project-frame > span {
  color: var(--light);
  font-size: 11px;
  letter-spacing: .15em;
}

/* Shared gallery frame appearance. */
.project-gallery {
  position: relative;
  width: 100%;
  /* PROJECT RHYTHM: space between the intro copy and its gallery. */
  margin-top: clamp(18px, 2.5vw, 34px);
}
.project-frame {
  position: relative;
  min-width: 0;
  max-height: var(--project-media-max-height);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: transparent;
}
.project-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.project-frame > span { position: absolute; z-index: 1; top: 18px; left: 20px; }

/* GALLERY VIDEO CONTROLS
   These styles only affect videos inside project galleries, not a future hero video. */
.gallery-video-control {
  position: absolute;
  z-index: 2;
  right: clamp(10px, 1.2vw, 18px);
  bottom: clamp(10px, 1.2vw, 18px);
  min-width: 88px;
  padding: 10px 14px 9px;
  border: 0;
  background: var(--surface);
  color: var(--orange);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  cursor: pointer;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.gallery-video-control:hover,
.gallery-video-control:focus-visible {
  background: var(--orange);
  color: var(--surface);
}

/* Apply this same corner anchor to videos in Projects 002 and 003. */
.gallery-video-control--corner {
  top: auto;
  right: clamp(10px, 1.2vw, 18px);
  bottom: clamp(10px, 1.2vw, 18px);
  left: auto;
}

/* MEDIA SIZE CONTROLS
   Add one ratio class to `.project-art` or `.project-frame` in index.html.
   `fit--contain` shows the whole asset; `fit--cover` fills and crops it. */
.ratio--16-9 { aspect-ratio: 16 / 9; }
.ratio--9-16 { aspect-ratio: 9 / 16; }
.ratio--1-1 { aspect-ratio: 1 / 1; }
.ratio--4-5 { aspect-ratio: 4 / 5; }
.ratio--auto { aspect-ratio: auto; }

/* Keep the chosen ratio while respecting the responsive media-height cap. */
.project-frame.ratio--16-9,
.project-art.ratio--16-9 {
  width: min(100%, var(--project-media-max-width-16-9));
  justify-self: center;
}
.project-frame.ratio--9-16 {
  width: min(100%, var(--project-media-max-width-9-16));
  justify-self: center;
}
.project-frame.ratio--1-1 {
  width: min(100%, var(--project-media-max-width-1-1));
  justify-self: center;
}
.project-frame.ratio--4-5 {
  width: min(100%, var(--project-media-max-width-4-5));
  justify-self: center;
}
.ratio--auto > .project-media { position: relative; height: auto; }
.fit--contain > .project-media { object-fit: contain; }
.fit--cover > .project-media { object-fit: cover; }
.position--top > .project-media { object-position: center top; }
.position--bottom > .project-media { object-position: center bottom; }
.position--left > .project-media { object-position: left center; }
.position--right > .project-media { object-position: right center; }

/* OPTIONAL FRAME STYLING — uncomment only when a project needs decoration.
.project-frame.is-decorated,
.project-art.is-decorated {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--frame-a), var(--frame-b), var(--frame-c));
}
*/

/* Template 02: portrait frame plus two stacked landscape frames. */
.project-gallery--mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: clamp(16px, 2vw, 30px);
}
.project-gallery--mosaic .project-frame--portrait {
  grid-row: 1 / 3;
  align-self: start;
}

/* PROJECT 002 IMAGE SIZE
   Edit `--project-002-image-width` on the image frame in index.html.
   `min(100%, ...)` prevents the chosen size overflowing its responsive column.
   The responsive rules below make it full-width at 900px and below. */
.project-gallery--mosaic .project-frame--landscape {
  width: min(100%, var(--project-002-image-width, 720px));
  justify-self: end;
}

/* Project 002 borrows the reference site's layered rhythm while keeping our palette.
   The background video is scrubbed by scroll in script.js; it never autoplays. */
.project--mosaic {
  isolation: isolate;
}
.project-scroll-backdrop {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(0px - var(--page-gutter));
  right: calc(0px - var(--page-gutter));
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .16;
  filter: saturate(.72) contrast(1.08);
  transform: translate3d(0, var(--project-video-shift, 0px), 0) scale(1.035);
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.project--mosaic::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 19%;
  right: calc(0px - var(--page-gutter));
  width: min(72vw, 1040px);
  height: 56%;
  /* background: var(--surface-alt);
  opacity: .9; */
}
.project--mosaic > :not(.project-scroll-backdrop) {
  position: relative;
  z-index: 2;
}

/* Template 03: three motion studies followed by smaller application previews. */
.project-gallery--storyboard {
  display: grid;
  gap: clamp(42px, 6vw, 92px);
}

/* PROJECT 003 DESKTOP GRID GUIDE
   Change either variable to choose the number of columns on desktop.
   Example: set `--project-003-video-columns: 4` after adding a fourth video.
   Additional items automatically continue onto a new row.
   The responsive rules below reset both galleries to one stacked column. */
.project-003-screens {
  --project-003-screen-columns: 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--project-003-screen-columns), minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 2vw, 30px);
}
.project-003-screen { margin: 0; width: 100%; }
.project-003-screen:nth-child(even) { margin-top: clamp(28px, 4vw, 64px); }

.project-003-videos {
  --project-003-video-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--project-003-video-columns), minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 2vw, 30px);
}
.project-003-videos .project-frame { width: 100%; }


/* PROJECT GALLERY MOTION
   JavaScript adds `.is-in-view` once, then leaves each item settled.
   Change distance/duration variables in the MOTION PLAYGROUND at the top;
   avoid adding transforms to the gallery container itself. */
.motion-ready [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--motion-reveal-opacity) var(--motion-fade-ease),
    transform var(--motion-reveal-transform) var(--motion-reveal-ease);
  transition-delay: 0ms;
}
.motion-ready .project--cinematic [data-reveal] {
  transform: translateY(var(--motion-reveal-distance)) scale(.985);
}
.motion-ready .project--mosaic .project-intro[data-reveal],
.motion-ready .project--mosaic .project-footer[data-reveal],
.motion-ready .project--storyboard .project-intro[data-reveal],
.motion-ready .project--storyboard .project-footer[data-reveal] {
  transform: translateY(var(--motion-reveal-distance-soft));
}
/* Project 002: one restrained rise. Keeping motion on the frame alone avoids
   overlap/jitter caused by animating the frame, media and gallery together. */
.motion-ready .project--mosaic .project-frame {
  transform: translateY(var(--motion-reveal-distance-soft)) scale(.99);
}
.motion-ready .project--mosaic .project-frame .project-media {
  transform: none;
}
.motion-ready .project--storyboard .project-frame {
  transform: translateX(var(--motion-storyboard-shift)) rotate(var(--motion-storyboard-rotation-soft));
}
.motion-ready .project--storyboard .project-frame:nth-child(1) {
  transform: translateX(var(--motion-storyboard-shift-negative)) rotate(var(--motion-storyboard-rotation-negative));
}
.motion-ready .project--storyboard .project-frame:nth-child(2) {
  transform: translateY(var(--motion-reveal-distance-feature)) scale(.96);
}
.motion-ready .project [data-reveal].is-in-view {
  opacity: 1;
  transform: none;
}

/* 9. INFO, CONTACT + FOOTER */
.section-content {
  margin-top: clamp(110px, 14vw, 220px);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: end;
  gap: 40px;
}
.section-content h2 { margin: 0; }
.info { background: var(--orange); }
.contact { min-height: 65vh; }
.asterisk { color: var(--orange); font-size: .45em; vertical-align: top; }
.contact-actions {
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.contact-cta {
  padding: 14px 16px;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 800;
}
footer {
  /* FOOTER BACKGROUND EDITING NOTE:
     - Change the four canvas colours in FOOTER_PIXEL_PALETTE in script.js.
     - Change the veil below if the animation should appear brighter or darker.
     - The canvas is decorative and always stays behind the footer content. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(300px, 42svh, 460px);
  padding: clamp(34px, 5vw, 72px) var(--page-gutter) 28px;
  border-top: 1px solid #5b1d0c;
  display: grid;
  align-content: space-between;
  gap: 60px;
  color: #f2e9e5;
  background: #140805;
}
.footer-pixel-field {
  position: absolute;
  z-index: 0;
  inset: -3%;
  width: 106%;
  height: 106%;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: saturate(1.2) contrast(1.08) brightness(1.04);
  transform: scale(1.02);
}
footer::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 42%, transparent 0 15%, rgba(20, 8, 5, .14) 43%, rgba(20, 8, 5, .5) 100%),
    linear-gradient(180deg, rgba(20, 8, 5, .18), transparent 38%, rgba(20, 8, 5, .25));
}
.footer-brand {
  position: relative;
  z-index: 2;
  color: #eb3300;
  font-family: 'Unbounded', Arial, sans-serif;
  font-size: clamp(50px, 8.5vw, 136px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.095em;
}
.footer-brand > img {
  width: 100%;
  /* max-width: 1400px;  Optional: limit maximum size */
  margin: 0%;
  padding:0%;
  /*aspect-ratio: 16 / 9;  Maintains a 16:9 widescreen proportion */}
.footer-brand > p
{font-size: clamp(26px, 4vw, 26px);
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing:0;
}

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--type-meta);
  letter-spacing: .13em;
}

@media (min-width: 701px) {
  /* DESKTOP HEADER / CLS NOTE:
     The outer header always reserves the expanded footprint. The background,
     wordmark lockups and action row only use transforms and opacity when the
     compact state is selected. Do not animate height, padding, flex direction,
     font-size, top/left/right or width here: those properties trigger layout
     and can bring CLS back on restored-scroll and in-app browser loads. */
  .site-header {
    height: var(--header-open-height);
    padding: 0;
    display: block;
    background: transparent;
    pointer-events: none;
  }
  .site-header::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--deep);
    transform: translateY(calc(var(--header-height) - var(--header-open-height)));
    transition: transform var(--motion-ui) var(--motion-reveal-ease);
  }
  .site-header.is-expanded::before { transform: none; }

  .wordmark {
    position: absolute;
    top: clamp(18px, 3vh, 34px);
    left: var(--page-gutter);
    width: calc(100vw - var(--page-gutter) - var(--page-gutter));
    height: clamp(36px, 5.8vw, 88px);
    display: block;
    pointer-events: auto;
  }
  .wordmark-expanded,
  .wordmark-compact {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    transition: opacity var(--motion-fast) ease, transform var(--motion-ui) var(--motion-reveal-ease);
  }
  .wordmark-expanded {
    display: block;
    font-size: clamp(36px, 5.8vw, 88px);
    line-height: .82;
    opacity: 0;
    transform: translateY(calc(18px - clamp(18px, 3vh, 34px))) scale(.985);
    transform-origin: left top;
  }
  .wordmark-compact {
    font-size: clamp(14px, 1.35vw, 20px);
    line-height: 1;
    opacity: 1;
    transform: translateY(calc(18px - clamp(18px, 3vh, 34px)));
  }
  .site-header.is-expanded .wordmark-expanded { opacity: 1; transform: none; }
  .site-header.is-expanded .wordmark-compact { opacity: 0; transform: translateY(-8px); }

  .header-actions {
    position: absolute;
    top: calc(var(--header-open-height) - 60px);
    left: var(--page-gutter);
    width: calc(100vw - var(--page-gutter) - var(--page-gutter));
    min-height: 42px;
    justify-content: space-between;
    pointer-events: auto;
    transform: translateY(calc(var(--header-height) - var(--header-open-height)));
    transition: transform var(--motion-ui) var(--motion-reveal-ease);
  }
  .header-actions::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    border-top: 1px solid var(--line);
    opacity: 0;
    transition: opacity var(--motion-fast) ease;
  }
  .header-actions .desktop-nav {
    transform: translateX(calc(100vw - var(--page-gutter) - var(--page-gutter) - 100% - 46px));
    transition: transform var(--motion-ui) var(--motion-reveal-ease);
  }
  .site-header.is-expanded .header-actions { transform: none; }
  .site-header.is-expanded .header-actions::before { opacity: 1; }
  .site-header.is-expanded .header-actions .desktop-nav { transform: none; }
}

/* Large screens have more horizontal room, so the case-study title can be
   quieter without changing the established phone and tablet scale. */
@media (min-width: 901px) {
  :root { --type-case-title: clamp(32px, 3.5vw, 56px); }
}

/* 10. RESPONSIVE — TABLET
   iPad Pro can report just over 1024px. Hero type stays fluid through 1280px. */
@media (max-height: 900px) and (min-width: 701px) {
  :root {
    --project-media-max-height: 600px;
    --project-media-max-width-16-9: 1067px;
    --project-media-max-width-9-16: 338px;
    --project-media-max-width-1-1: 600px;
    --project-media-max-width-4-5: 480px;
  }
}

@media (min-width: 701px) and (max-width: 1280px) {
  :root { --hero-display-size: clamp(82px, 10vw, 124px); }
}

@media (min-width: 701px) and (max-width: 1024px) {
  :root {
    --page-gutter: clamp(28px, 5vw, 52px);
    --header-height: 82px;
    --floating-control-size: 40px;
    --hero-logo-size: clamp(190px, 26vw, 250px);
    --hero-composition-height: clamp(331px, calc(34.5vw + 48px), 476px);
    --section-pad-top: clamp(76px, 8vw, 92px);
    --section-pad-bottom: clamp(88px, 9vw, 108px);
    --type-body: clamp(18px, 2.1vw, 21px);
    --type-hero-copy: clamp(16px, 2vw, 20px);
    --type-section-title: clamp(64px, 8vw, 82px);
    --type-meta: 12px;
  }
  .desktop-nav a { padding: 10px 16px; font-size: 12px; }
  .hero-copy { width: min(86%, 700px); white-space: normal; }
}

@media (max-width: 900px) {
  .project-intro, .section-content { grid-template-columns: 1fr; }
  .project-intro { gap: 8px; }
  .project-intro p { margin: 0; max-width: 720px; }
  .section-content { gap: 20px; }
  .section-content p { max-width: 700px; }
  .project-case-study {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 44px);
  }
  .project-case-study-copy { justify-self: start; }
  .project--case-grid .project-intro,
  .project--case-grid .project-case-study-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 4vw, 34px);
  }
  .project--case-grid .project-case-study-copy {
    max-width: 720px;
  }

  /* Phones + small tablets: every project asset uses the available page width.
     Frames stack vertically and retain their chosen aspect ratio without cropping. */
  .project-gallery--mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    width: 100%;
  }
  .project-gallery--mosaic .project-frame {
    width: 100%;
    max-height: none;
    justify-self: stretch;
  }
  .project-gallery--mosaic .project-frame--portrait { grid-row: auto; }
  .project-gallery--mosaic .project-frame--landscape { justify-self: stretch; }

  /* PROJECT 003 COMPACT LAYOUT
     One source of truth for phone and tablet spacing. Full-width media is
     stacked without offsets, so portrait videos cannot overlap or escape the
     page gutter while their reveal animation is running. */
  .project--storyboard {
    --project-003-media-gap: clamp(28px, 5vw, 40px);
    --project-003-group-gap: clamp(48px, 8vw, 68px);
  }
  .project-gallery--storyboard {
    width: 100%;
    min-width: 0;
    gap: var(--project-003-group-gap);
  }
  .project-003-screens,
  .project-003-videos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    width: 100%;
    min-width: 0;
    gap: var(--project-003-media-gap);
  }
  .project-003-screens .project-frame,
  .project-003-videos .project-frame {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: none;
    margin: 0;
    justify-self: stretch;
  }
  .project-003-screen:nth-child(n) {
    grid-column: auto;
    margin-top: 0;
  }

  /* Compact screens use opacity for the reveal. Horizontal starting poses on
     a full-width frame create overflow and make adjacent videos look layered. */
  .motion-ready .project--storyboard .project-frame:nth-child(n) {
    transform: none;
  }
}

/* 11. RESPONSIVE — COMPACT / MOBILE
   700px is shared with script.js. Keep both values together if it changes.
   This covers large phones, narrow tablets and the 652px edge case. */
@media (max-width: 700px) {
  :root {
    --page-gutter: 20px;
    --header-height: 72px;
    --floating-control-size: 40px;
    --floating-edge: 20px;
    /* HERO TITLE SIZE: fills a 440px phone while the min/max guardrails keep
       small phones and narrow tablets predictable. */
    --hero-display-size: clamp(54px, 14.7vw, 72px);
    --hero-bar-size: 12px;
    --hero-logo-size: min(69vw, 269px);
    --hero-composition-height: clamp(282px, calc(42vw + 112px), 406px);
    --section-pad-top: 70px;
    --section-pad-bottom: 90px;
    --type-body: clamp(16px, 4.3vw, 19px);
    --type-case-copy: clamp(16px, 4.2vw, 17px);
    --type-hero-copy: clamp(14px, 3.8vw, 16px);
    /* Project title : case title follows roughly 1.618 : 1 on phones. */
    --type-section-title: clamp(25px, 9vw, 52px);
    --type-case-title: clamp(20px, 5.56vw, 32px);
    --type-project-kicker: 14px;
    --type-meta: 12px;
    --project-media-max-height: 500px;
    --project-media-max-width-16-9: 889px;
    --project-media-max-width-9-16: 281px;
    --project-media-max-width-1-1: 500px;
    --project-media-max-width-4-5: 400px;
  }

  .site-header { padding: 16px var(--page-gutter); }
  .wordmark-expanded { display: none; }
  .wordmark-compact { position: static; }
  .wordmark { font-size: 13px; }
  .desktop-nav { display: none; }
  .header-actions { gap: 7px; }

  .menu-toggle {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 38px;
    padding: 8px;
    border: 1px solid var(--orange);
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
  }
  .menu-toggle span {
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform-origin: center;
    transition: transform var(--motion-ui) ease, background var(--motion-fast) ease;
  }
  .menu-toggle:hover, .menu-toggle[aria-expanded='true'] { background: var(--orange); }
  .menu-toggle:hover span, .menu-toggle[aria-expanded='true'] span { background: var(--deep); }
  .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    z-index: 19;
    top: var(--header-height);
    left: 0;
    right: 0;
    padding: 12px var(--page-gutter) 22px;
    border-bottom: 1px solid var(--orange);
    background: var(--deep);
    display: grid;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity var(--motion-ui) ease, transform var(--motion-ui) ease, visibility 0s linear var(--motion-ui);
  }
  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .mobile-menu a {
    padding: 14px 16px;
    border: 1px solid var(--orange);
    background: var(--orange);
    color: var(--deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .11em;
    transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
  }
  .mobile-menu a:hover, .mobile-menu a:focus-visible {
    background: var(--light);
    color: var(--deep);
    transform: translateX(4px);
  }

  .section-rail { right: 10px; gap: 8px; font-size: 8px; }
  .section-rail a.current::before {
    width: 2px;
    height: 24px;
    transform: translate(-9px, -6px);
  }

  .hero { height: 170vh; height: 170svh; }
  .hero-sticky {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: calc(var(--header-height) + 18px) var(--page-gutter) 25px;
  }
  .hero-identity, .hero-graphic-lockup { height: var(--hero-composition-height); }
  .hero-lockup { top: clamp(188px, calc(38vw + 28px), 270px); }
  .hero-logo { top: 30px; width: var(--hero-logo-size); }
  .kinetic-title {
    height: clamp(162px, 42vw, 210px);
    font-size: var(--hero-display-size);
    line-height: .84;
  }
  .kinetic-title .title-second { width: 100%; line-height: .84; white-space: normal; }
  .kinetic-title .title-second .title-word {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .mobile-title-break { display: block; }
  .kinetic-title .title-second .glyph {
    transform: translateY(5.6em) rotate(4deg);
  }
  .hero-copy {
    top: clamp(112px, 27vw, 156px);
    width: min(88%, 430px);
    font-size: var(--type-hero-copy);
    white-space: normal;
    opacity: 1;
  }
  .scroll-arrow, .scroll-down-arrow {
    right: var(--floating-edge);
    bottom: var(--floating-edge);
  }

  .project { margin-top: 60px; }
  .project + .project { margin-top: 96px; padding-top: 70px; }
  .project h2 { margin: 8px 0 0; }
  .project h2, .section-content h2 {
    overflow-wrap: normal;
    word-break: normal;
  }
  .project-intro p, .section-content p {
    /* Keep body copy clear of the fixed section indicator on phones. */
    max-width: calc(100% - 34px);
  }
  .project-case-study {
    margin-top: 30px;
    padding-top: 28px;
    gap: 24px;
  }
  .project-case-study h3,
  .project-case-study-title {
    width: 100%;
  }
  .project-case-study-copy {
    max-width: calc(100% - 34px);
  }
  .project-gallery--mosaic {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 14px;
    padding-block: 0;
  }
  .project-gallery--mosaic .project-frame--portrait {
    grid-row: auto;
  }
  .project-scroll-backdrop {
    /* Mobile keeps the same scroll-video idea as desktop, but as a quieter frame. */
    display: block;
    top: 13%;
    bottom: auto;
    left: calc(0px - var(--page-gutter));
    right: auto;
    width: calc(100% + var(--page-gutter));
    height: min(54svh, 430px);
    opacity: .14;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent);
  }
  .project--mosaic::before {
    /* The solid panel passes over the moving video frame as the section scrolls. */
    top: 16%;
    right: calc(0px - var(--page-gutter));
    width: 78%;
    height: 62%;
    opacity: .72;
  }
  .motion-ready .project--mosaic .project-frame:nth-child(n) { transform: none; }
  .project-footer {
    margin-top: 26px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .section-content { margin-top: 95px; }
  footer {
    min-height: 280px;
    padding-block: 34px 26px;
  }
  .footer-brand { font-size: clamp(42px, 13vw, 62px); }
  .footer-bottom { flex-wrap: wrap; }
}

/* Extra-small phones: protect the complete wordmark and both header controls. */
@media (max-width: 360px) {
  :root {
    --page-gutter: 16px;
  }

  .site-header { padding-inline: var(--page-gutter); }
  .wordmark { font-size: 11px; gap: .42em; }
  .header-actions { gap: 5px; }
  .theme-toggle { width: 34px; min-width: 34px; }
  .menu-toggle { width: 40px; }
}
@media (max-width: 380px) {
  .section-top span:last-child { display:inline; }
}

/* Small-phone layout fixes
   - Keep Project 001 inside the same centred content width as other projects.
   - Slightly reduce the kinetic hero title on narrow iPhones so no glyph clips. */
@media (max-width: 700px) {
  .project--cinematic .project-art.project-preview-frame {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
  }

  .project-preview-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 390px) {
  :root {
    --hero-display-size: clamp(48px, 13.4vw, 54px);
  }
}

/* Short phone landscape
   A 667 x 375 viewport has desktop-like width but very little vertical room.
   Pin the hero composition below the header instead of vertically centring an
   oversized portrait layout, which would crop the title behind the header. */
@media (max-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  :root {
    --hero-display-size: clamp(52px, 10.5vw, 64px);
    --hero-composition-height: calc(100svh - var(--header-height) - 43px);
    --hero-logo-size: min(38vw, 230px);
  }

  .hero-sticky {
    padding-top: calc(var(--header-height) + 18px);
    padding-bottom: 12px;
  }

  .hero-main {
    align-items: flex-start;
  }

  .hero-identity,
  .hero-graphic-lockup {
    height: var(--hero-composition-height);
  }

  .kinetic-title {
    height: 145px;
  }

  .hero-copy {
    top: 130px;
    width: min(68%, 430px);
  }

  .hero-lockup {
    top: calc(var(--hero-composition-height) - 72px);
  }

  .hero-logo {
    top: 24px;
  }

  .scroll-down-arrow {
    right: auto;
    left: var(--floating-edge);
    bottom: 12px;
  }
}

/* 12. BROWSER + ACCESSIBILITY FALLBACKS */
@supports not (height: 100svh) {
  @media (max-width: 700px) {
    .hero { height: 170vh; }
    .hero-sticky { height: 100vh; }
  }
}

@supports not (aspect-ratio: 1 / 1) {
  .project-frame { min-height: 320px; }
  .project-gallery--storyboard .project-frame--feature,
  .project-gallery--mosaic .project-frame--portrait { min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-bar-fill { transform: scaleX(1) !important; will-change: auto; }
  .footer-pixel-field { transform: none; }
  .motion-ready .project [data-reveal] { opacity: 1; transform: none; }
}