/* ── Home page: 14-column grid (pacers + 12 content cols), 2 type sizes ── */

.page-home {
  --site-bg: #DFD7C5;
  --site-max-w: 1720px;
  --grid-total-cols: 14;
  --grid-content-col: 2;
  --grid-content-span: 12;
  --gutter: 20px;
  --col-gap: 16px;
  --text-display: clamp(24px, 3.4vw, 40px);
  --text-headline: clamp(30px, 4.2vw, 52px);
  --text-body: clamp(15px, 1.75vw, 19px);
  --inset: 20px;
  --radio-fixed-top: var(--inset);
  --radio-pill-bg: #b6d184;
  --radio-scene-gap: 6px;

  /* Button background colors (sampled from the scene buttons) */
  --color-orange: #edb46b;
  --color-green: #baca89;
  --color-blue: #7794e9;

  background: var(--site-bg);
  color: rgba(0, 0, 0, 0.85);
  max-width: none;
  font-family: var(--font-main);
  font-optical-sizing: auto;
  font-size: var(--text-body);
  line-height: 1.4;
}

/* Visible 14-column guide (fixed overlay; cols 1 & 14 are pacers) */
.grid-guide {
  position: fixed;
  inset: 0;
  z-index: 10005;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.page-home--no-grid .grid-guide {
  display: none;
}

.grid-guide .site-grid {
  height: 100%;
  align-content: stretch;
}

.grid-guide__col {
  display: block;
  min-height: 100%;
  background: rgba(180, 50, 50, 0.06);
  outline: 1px solid rgba(180, 50, 50, 0.22);
}

.grid-guide__col:first-child,
.grid-guide__col:last-child {
  background: rgba(180, 50, 50, 0.03);
  outline: 1px dashed rgba(180, 50, 50, 0.18);
}

/* 14-column grid: col 1 + col 14 = pacers; cols 2–13 = 12-column content */
.site-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-total-cols), minmax(0, 1fr));
  column-gap: var(--col-gap);
  width: 100%;
  max-width: var(--site-max-w);
  margin-inline: auto;
  padding-inline: 0;
}

.site-grid > * {
  min-width: 0;
}

.span-12 { grid-column: var(--grid-content-col) / span var(--grid-content-span); }
.span-10 { grid-column: var(--grid-content-col) / span 10; }
.span-8  { grid-column: var(--grid-content-col) / span 8; }
.span-6  { grid-column: var(--grid-content-col) / span 6; }
.span-5  { grid-column: var(--grid-content-col) / span 5; }
.span-4  { grid-column: var(--grid-content-col) / span 4; }

.span-10-center {
  grid-column: calc(var(--grid-content-col) + 1) / span 10;
}

.span-8-center {
  grid-column: calc(var(--grid-content-col) + 2) / span 8;
}

/* Break out of the 14-col content width; still spans the full viewport */
.full-viewport-width {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.section-stack {
  row-gap: clamp(32px, 5vw, 64px);
  padding-block: 0;
}

.text-display,
.hero-intro-headline,
.hero-pre-caption-right {
  font-family: var(--font-title);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-display {
  font-size: var(--text-display);
  line-height: 1.15;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.82);
  margin: 0;
}

.hero-intro-headline {
  font-size: 64px;
  line-height: 1;
  color: #000;
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}

.hero-intro-copy > .text-body:first-child {
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}

@supports not (text-box-trim: trim-start) {
  .hero-intro-headline {
    margin-top: -0.06em;
  }
}

/* Section title: Meera Inimai Regular, large, tight tracking, solid black */
.text-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #000;
  margin: 0;
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@supports not (text-box-trim: trim-start) {
  .text-title {
    margin-top: -0.06em;
  }
}

.text-body {
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
}

.text-body + .text-body {
  margin-top: 1.25em;
}

/* Lead body copy: Geist Light, larger, tight tracking, solid black */
.text-lead {
  font-family: "Geist", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: #000;
  margin: 0;
  /* Grayscale AA so Geist Light isn't fattened by macOS subpixel rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Caption: same Geist Light treatment as .text-lead, one step smaller */
.text-caption {
  font-family: "Geist", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 1.8vw, 18px);
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: #000;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════════════════════════════
   Video hero (full width)
   ════════════════════════════════════════════════════════════════════════ */

.hero-pre {
  width: 100%;
  height: 100vh;
}

.hero-pre-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-pre-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-pre-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
  background: var(--radio-pill-bg);
  border-radius: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: background 0.25s ease;
  overflow: visible;
  --hero-bar-height: 40px;
  --hero-bar-font-size: 30px;
  --hero-bar-pad-top: 0;
  --hero-bar-pad-bottom: 0;
  --hero-logo-frame: 4px;
}

.hero-pre-caption-left {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  align-self: stretch;
  height: var(--hero-bar-height);
  max-height: var(--hero-bar-height);
}

.hero-pre-caption-logo {
  display: block;
  height: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

@media (min-width: 641px) {
  .hero-pre-caption-left {
    padding: var(--hero-logo-frame);
    border: var(--hero-logo-frame) solid #000;
    background: #000;
    box-sizing: border-box;
  }
}

.hero-pre-caption-right {
  flex: 1 1 auto;
  min-width: auto;
  margin: 0;
  border-radius: 0;
  font-size: var(--hero-bar-font-size);
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 1em;
  height: var(--hero-bar-height);
  max-height: var(--hero-bar-height);
  min-height: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.82);
  text-align: left;
  padding: var(--hero-bar-pad-top) 0 var(--hero-bar-pad-bottom) 0.35em;
  box-sizing: border-box;
  overflow: visible;
}

/* Trim Meera Inimai's oversized metrics down to the cap/baseline box so the
   flex centering lands on the visible glyphs, not the font's tall line box. */
.hero-pre-caption-tag,
.hero-pre-caption-credit {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-bottom: 0.15em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.hero-pre-caption-credit {
  margin-left: auto;
  padding-right: var(--inset);
  text-align: right;
}

/* Desktop: the marquee wrappers are transparent (tag/credit lay out directly in
   the bar); the duplicate copy is hidden. Under 900px they become a marquee. */
.hero-pre-caption-track,
.hero-pre-caption-group {
  display: contents;
}

.hero-pre-caption-group[aria-hidden="true"] {
  display: none;
}

@supports not (text-box-trim: trim-both) {
  .hero-pre-caption-right {
    padding: var(--hero-bar-pad-top) 0 var(--hero-bar-pad-bottom) 0.35em;
  }
}

@media (max-width: 640px) {
  .hero-pre-caption {
    flex-direction: column;
    background: transparent;
  }

  .hero-pre-caption-right {
    order: 1;
    width: auto;
    min-width: 100%;
    background: var(--radio-pill-bg);
    --hero-bar-font-size: 24px;
    font-size: var(--hero-bar-font-size);
    height: var(--hero-bar-height);
    max-height: var(--hero-bar-height);
    padding: 0 0 0 var(--inset);
    overflow: visible;
    flex-wrap: nowrap;
    text-align: left;
    justify-content: flex-start;
    gap: 0.75em;
  }

  .hero-pre-caption-left {
    order: 2;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 0;
    border: none;
    background: transparent;
    justify-content: center;
  }

  .hero-pre-caption-logo {
    width: 100%;
    height: auto;
    max-height: none;
  }
}

/* ── Under 900px the caption text would overflow, so scroll it as a marquee ── */
@media (max-width: 899px) {
  .hero-pre-caption-right {
    overflow: hidden;
  }

  .hero-pre-caption-right .hero-pre-caption-track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
    align-items: center;
    animation: pill-marquee 18s linear infinite;
    will-change: transform;
  }

  .hero-pre-caption-right .hero-pre-caption-group {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.75em;
    padding-right: 2.5em; /* trailing gap so the loop seam keeps the rhythm */
  }

  .hero-pre-caption-right .hero-pre-caption-group[aria-hidden="true"] {
    display: inline-flex; /* show the duplicate to make the loop seamless */
  }

  .hero-pre-caption-right .hero-pre-caption-credit {
    margin-left: 0;
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pre-caption-track {
    animation: none;
  }
}

/* ── Geometric creatures (scroll with page, behind content) ── */
.page-home-shift {
  position: relative;
  z-index: 1;
  transition: margin-right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.creatures-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.creature {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}

.creature svg {
  display: block;
  overflow: visible;
}

/* ── Radio pill: fixed at top ── */
.hero-radio-sticky {
  position: fixed;
  top: var(--radio-fixed-top);
  left: 0;
  right: 0;
  z-index: 10010;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 var(--gutter);
  background: transparent;
  pointer-events: none;
}

.hero-radio-cluster {
  display: flex;
  align-items: center;
  gap: var(--radio-scene-gap);
  pointer-events: all;
}

@keyframes hero-radio-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.hero-radio-cluster.is-shaking {
  animation: hero-radio-shake 0.1s ease-in-out 8;
}

.hero-radio-sticky .hero-radio-pill {
  pointer-events: all;
}

.page-home.scene-water {
  --radio-pill-bg: #aacdff;
  --color-selected: var(--color-blue);
}

.page-home.scene-land {
  --radio-pill-bg: #b6d184;
  --color-selected: var(--color-green);
}

.page-home.scene-city {
  --radio-pill-bg: #fab75e;
  --color-selected: var(--color-orange);
}

.page-home .hero-radio-sticky .hero-radio-pill {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  margin-inline: 0;
  transform: none;
  transform-origin: center top;
  height: 50px;
  background: var(--radio-pill-bg);
  border-radius: 12px;
  gap: 18px;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  /* Collapsed by default; opens once scrolled past first viewport */
  max-width: 0;
  margin-right: calc(-1 * var(--radio-scene-gap));
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-width 0.6s cubic-bezier(0.33, 1, 0.68, 1),
    padding 0.6s cubic-bezier(0.33, 1, 0.68, 1),
    margin-right 0.6s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.35s ease;
}

.page-home .hero-radio-sticky.is-radio-open .hero-radio-pill {
  max-width: min(520px, calc(100vw - var(--gutter) * 2 - 200px));
  margin-right: 0;
  padding: 0 16px 0 6px;
  opacity: 1;
  overflow: visible;
  pointer-events: all;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-radio-sticky .hero-radio-pill {
    transition: none;
  }
}

.page-home .hero-radio-sticky .hero-radio-pill .radio-pill-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #000;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
  flex-shrink: 0;
  position: relative;
}

.page-home .hero-radio-sticky .hero-radio-pill .radio-pill-circle:focus,
.page-home .hero-radio-sticky .hero-radio-pill .radio-pill-circle:focus-visible {
  outline: none;
  box-shadow: none;
}

.radio-pill-circle-scenes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.radio-pill-circle-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.radio-pill-circle-scene[hidden] {
  display: none;
}

.pill-creature {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}

.pill-creature svg {
  display: block;
  overflow: visible;
}

.radio-pill-circle-playback {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.radio-pill-circle-play-btn,
.radio-pill-circle-pause-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  border: none;
  background: transparent;
  padding: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--radio-pill-bg);
}

.radio-pill-circle-play-btn {
  transform: translate(calc(-50% + 2px), -50%);
}

.radio-pill-circle-pause-btn {
  transform: translate(-50%, -50%);
}

.radio-pill-circle-play-btn:hover,
.radio-pill-circle-pause-btn:hover {
  color: color-mix(in srgb, var(--radio-pill-bg) 72%, #000);
}

.radio-pill-circle-pause-btn {
  display: none;
  pointer-events: none;
}

.radio-pill-circle--playing .radio-pill-circle-play-btn {
  display: none;
  pointer-events: none;
}

.radio-pill-circle--playing:hover .radio-pill-circle-pause-btn {
  display: flex;
  pointer-events: auto;
}

.radio-pill-circle--paused .radio-pill-circle-play-btn {
  display: flex;
  pointer-events: auto;
}

.page-home .hero-radio-sticky .radio-pill-ticker-wrap {
  flex: 0 0 200px;
  width: 200px;
  min-width: 0;
  max-width: 200px;
  align-self: center;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
  mask-image: none;
  -webkit-mask-image: none;
}

.page-home .hero-radio-sticky .radio-pill-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: pill-marquee 24s linear infinite;
  will-change: transform;
}

.page-home .hero-radio-sticky .radio-pill-ticker {
  font-family: 'Datatype', var(--font-radio);
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #000;
}

.page-home .hero-radio-sticky .radio-pill-audio {
  --pill-control-gap: 16px;
  padding: 0;
  gap: var(--pill-control-gap);
  align-self: center;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.page-home .hero-radio-sticky .radio-pill-volume {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.page-home .hero-radio-sticky .radio-pill-volume-popover {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--radio-pill-bg);
}

.page-home .hero-radio-sticky .radio-pill-volume:hover .radio-pill-volume-popover,
.page-home .hero-radio-sticky .radio-pill-volume.is-dragging .radio-pill-volume-popover,
.page-home .hero-radio-sticky .radio-pill-volume-popover:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.page-home .hero-radio-sticky .radio-pill-volume-track {
  position: relative;
  width: 3px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
  cursor: ns-resize;
  touch-action: none;
}

.page-home .hero-radio-sticky .radio-pill-volume-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  border-radius: inherit;
  background: #000;
  pointer-events: none;
}

.page-home .hero-radio-sticky .radio-pill-volume-thumb {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, 50%);
  pointer-events: none;
}

.page-home .hero-radio-sticky .radio-pill-volume-track:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 3px;
}

.page-home .hero-radio-sticky .radio-pill-speaker-btn {
  margin: 0;
  padding: 0;
  color: #000;
}

.page-home .hero-radio-sticky .radio-pill-speaker-svg {
  width: 22px;
  height: 22px;
}

.page-home .hero-radio-sticky .radio-pill-speaker-btn:hover {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.06);
}

.page-home .hero-radio-sticky .hero-pill-shake-btn {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #000;
}

.page-home .hero-radio-sticky .hero-pill-shake-btn:hover {
  color: rgba(0, 0, 0, 0.65);
}

.page-home .hero-radio-sticky .hero-pill-shake-svg {
  display: block;
  width: 27px;
  height: 15px;
}

.page-home .hero-radio-sticky .hero-pill-shake-svg .hero-pill-shake-waves {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.35;
}

.page-home .hero-radio-sticky .radio-pill-bars {
  margin: 0;
  height: 14px;
  gap: 3px;
  align-items: flex-end;
}

@keyframes pill-bar-bounce-home {
  0%, 100% { height: 2px; }
  50%       { height: var(--bar-peak, 12px); }
}

.page-home .hero-radio-sticky .pill-bar {
  width: 2px;
  border-radius: 0;
  background: #000;
  transform-origin: bottom center;
  align-self: flex-end;
  animation-name: pill-bar-bounce-home;
}

.page-home .hero-radio-sticky .hero-pill-scenes {
  display: flex;
  align-items: center;
  gap: var(--radio-scene-gap);
  padding: 0;
  flex-shrink: 0;
}

.page-home .hero-radio-sticky .hero-pill-dot {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
  transition: background 0.15s, border-radius 0.15s, backdrop-filter 0.15s;
}

.page-home .hero-radio-sticky .hero-pill-dot--water {
  --pill-dot-scene-bg: #aacdff;
}

.page-home .hero-radio-sticky .hero-pill-dot--land {
  --pill-dot-scene-bg: #b6d184;
}

.page-home .hero-radio-sticky .hero-pill-dot--city {
  --pill-dot-scene-bg: #fab75e;
}

.page-home .hero-radio-sticky .hero-pill-dot--water:hover,
.page-home .hero-radio-sticky .hero-pill-dot--land:hover,
.page-home .hero-radio-sticky .hero-pill-dot--city:hover,
.page-home .hero-radio-sticky .hero-pill-dot--active {
  opacity: 1;
  transform: none;
  border-radius: 50%;
  background: var(--pill-dot-scene-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-home .hero-radio-sticky .hero-pill-dot img {
  width: 22px;
  height: 22px;
  filter: none;
  transition: filter 0.15s;
}

.page-home .hero-radio-sticky .hero-pill-dot:hover img,
.page-home .hero-radio-sticky .hero-pill-dot--active img {
  filter: brightness(0);
}

.page-home .hero-radio-sticky .hero-radio-pill .pill-bar:nth-child(1) { --bar-dur: 1.6s; --bar-delay: 0s;    --bar-peak: 11px; }
.page-home .hero-radio-sticky .hero-radio-pill .pill-bar:nth-child(2) { --bar-dur: 1.3s; --bar-delay: 0.2s;  --bar-peak: 8px; }
.page-home .hero-radio-sticky .hero-radio-pill .pill-bar:nth-child(3) { --bar-dur: 1.8s; --bar-delay: 0.45s; --bar-peak: 12px; }
.page-home .hero-radio-sticky .hero-radio-pill .pill-bar:nth-child(4) { --bar-dur: 1.4s; --bar-delay: 0.1s;  --bar-peak: 9px; }

/* ── Main content sections ── */
.page-home .hero,
.page-home .content {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  background: transparent;
}

.hero-top-view-wrap {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
}

@media (min-width: 641px) {
  .hero-top-view-wrap {
    grid-column: 1 / -1;
    overflow: visible;
  }

  .hero-top-view-stage {
    width: min(96vw, var(--site-max-w));
    max-width: none;
    margin-inline: auto;
  }
}

.hero-top-view-stage {
  position: relative;
  width: 100%;
  cursor: pointer;
  transform-origin: center center;
  --top-view-base-rotate: 0deg;
  transform: rotate(var(--top-view-base-rotate));
}

@keyframes hero-top-view-shake {
  0%, 100% { transform: rotate(var(--top-view-base-rotate)); }
  25% { transform: rotate(calc(var(--top-view-base-rotate) + -3deg)); }
  75% { transform: rotate(calc(var(--top-view-base-rotate) + 3deg)); }
}

.hero-top-view-stage.is-shaking {
  animation: hero-top-view-shake 0.1s ease-in-out 8;
}

@media (prefers-reduced-motion: reduce) {
  .hero-top-view-stage {
    cursor: default;
  }

  .hero-top-view-stage.is-shaking {
    animation: none;
  }
}

.hero-top-view-stack {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-top-view-stack .hero-top-view {
  display: block;
  width: 100%;
  height: auto;
}

.hero-top-view-stack .hero-top-view[hidden] {
  display: none;
}

.hero-top-view {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.hero-top-view-marker {
  --marker-parallax-y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 24%;
  aspect-ratio: 1;
  background: #000;
  overflow: hidden;
  transform: translate(-50%, calc(-50% + var(--marker-parallax-y)));
  pointer-events: none;
  will-change: transform;
}

.hero-top-view-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(2);
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-top-view-marker {
    will-change: auto;
  }
}

.hero-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.hero-intro.span-10-center {
  grid-column: var(--grid-content-col) / span var(--grid-content-span);
}

.hero-intro-headline {
  grid-column: 1 / span 6;
}

.hero-intro-copy {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

.hero-sim-banner {
  display: block;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
}

.hero-sim-banner,
.content-triptic-images,
.content-handling-figure,
.content-detail-pond-figure {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

.hero-sim-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-canvas-wrap--static #three-canvas,
.hero-canvas-wrap--static .hero-viewer-fade {
  display: none;
}

/* ── Content ── */
.page-home .content {
  padding-block: 0 clamp(80px, 12vw, 160px);
  padding-inline: 0;
}

.page-home .content .site-grid {
  padding-top: clamp(24px, 4vw, 48px);
}


.content-desk-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  margin-top: clamp(24px, 4vw, 48px);
}

/* ≥1200px: inset the peek image by 2 columns per side (cols 3–12) instead of 1 */
@media (min-width: 1200px) {
  .content-desk-group {
    grid-column: calc(var(--grid-content-col) + 1) / span 10;
  }
}

/* ≥1500px: inset by 3 columns per side (cols 4–11) */
@media (min-width: 1500px) {
  .content-desk-group {
    grid-column: calc(var(--grid-content-col) + 2) / span 8;
  }
}

.content-desk-figure {
  margin: 0;
  width: 100%;
  max-height: clamp(420px, 62vh, 680px);
  overflow: hidden;
  border-radius: 20px;
}

.content-desk-caption {
  width: 80%;
  margin: 0;
  text-align: left;
}

.content-desk-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: clamp(420px, 62vh, 680px);
  object-fit: cover;
  object-position: center 30%;
  border-radius: 20px;
}

.page-home .content-world {
  padding-block: clamp(48px, 8vw, 120px) clamp(12px, 2vw, 24px);
}

.content-real .site-grid,
.content-world .site-grid {
  align-items: center;
}

.content-real-figure {
  margin: 0;
  grid-column: var(--grid-content-col) / span 5;
  align-self: center;
}

.content-real-stack {
  --exploded-offset: clamp(72px, 14vw, 140px);
  --layer-1-y: var(--exploded-offset);
  --layer-3-y: calc(-1 * var(--exploded-offset));
  --layer-2-y: 0px;
  --layer-2-scale-min: 0.88;
  --layer-2-scale: var(--layer-2-scale-min);
  position: relative;
  width: 100%;
}

.content-real-layer {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.content-real-layer--2 {
  position: relative;
  z-index: 2;
  transform: translateY(var(--layer-2-y)) scale(var(--layer-2-scale));
  transform-origin: center center;
}

.content-real-layer--1,
.content-real-layer--3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.content-real-layer--1 {
  z-index: 3;
  transform: translateY(var(--layer-1-y));
}

.content-real-layer--3 {
  z-index: 1;
  transform: translateY(var(--layer-3-y));
}

@media (prefers-reduced-motion: reduce) {
  .content-real-stack {
    --layer-1-y: 0px;
    --layer-3-y: 0px;
    --layer-2-scale: 1;
  }

  .content-real-layer {
    will-change: auto;
  }
}

.content-real-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
  grid-column: calc(var(--grid-content-col) + 6) / span 6;
}

.content-real-title {
  margin: 0;
}

.content-real-body {
  margin: 0;
  max-width: calc(100% * 5 / 6);
}

.page-home .content-real {
  padding-block: clamp(48px, 8vw, 120px) clamp(64px, 10vw, 128px);
}

/* ── Fullscreen handling image (page end) ── */
.content-handling {
  margin: 0;
  padding: 0;
}

.content-handling-figure {
  display: block;
  margin: 0;
  height: 80vh;
  height: 80dvh;
  overflow: hidden;
}

.content-handling-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Fullscreen pond detail (page end) ── */
.content-detail-pond {
  margin: 0;
  padding: 0;
}

.content-detail-pond-figure {
  display: block;
  margin: 0;
  height: 80vh;
  height: 80dvh;
  overflow: hidden;
}

.content-detail-pond-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Plugin: text left, image right ── */
.page-home .content-plugin {
  padding-block: clamp(48px, 8vw, 120px) clamp(72px, 12vw, 160px);
}

.content-plugin .site-grid {
  align-items: center;
}

.content-plugin-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
}

.content-plugin-title {
  margin: 0;
  max-width: calc(100% * 5 / 6);
}

.content-plugin-body {
  margin: 0;
  max-width: calc(100% * 5 / 6);
}

.content-plugin-figure {
  margin: 0;
  grid-column: calc(var(--grid-content-col) + 6) / span 6;
  align-self: center;
}

.content-plugin-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* ── Agents: title left, copy right ── */
.page-home .content-agents {
  padding-block: clamp(32px, 5vw, 72px) clamp(48px, 8vw, 96px);
}

.content-agents .site-grid {
  align-items: start;
  padding-top: 0;
}

.content-agents-title-wrap {
  align-self: start;
}

.content-agents-title {
  margin: 0;
  max-width: calc(100% * 5 / 6);
}

.content-agents-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  grid-column: calc(var(--grid-content-col) + 6) / span 6;
}

.content-agents-copy .text-body {
  margin: 0;
  max-width: none;
}

/* ── Button image (grid-width) ── */
.page-home .content-button {
  padding-block: 0;
}

.content-button-figure {
  margin: 0;
  min-width: 0;
  /* Crop the image to 90% of its height (1201 → ~1081): the bottom tenth
     overflows the page end and is clipped, so the shake can't reveal it. */
  aspect-ratio: 1797 / 1081;
  overflow: hidden;
}

@media (min-width: 641px) {
  .content-button-figure {
    grid-column: 1 / -1;
    width: min(96vw, var(--site-max-w));
    max-width: none;
    margin-inline: auto;
  }
}

.content-button-stack {
  position: relative;
  width: 100%;
  cursor: pointer;
  transform-origin: center center;
  --top-view-base-rotate: 0deg;
}

/* Shake on tap, like the hero top view (reuses its keyframes) */
.content-button-stack.is-shaking {
  animation: hero-top-view-shake 0.1s ease-in-out 8;
}

@media (prefers-reduced-motion: reduce) {
  .content-button-stack {
    cursor: default;
  }

  .content-button-stack.is-shaking {
    animation: none;
  }
}

.content-button-stack .content-button-image {
  display: block;
  width: 100%;
  height: auto;
}

.content-button-stack .content-button-image[hidden] {
  display: none;
}

.content-button-image {
  display: block;
  width: 100%;
  height: auto;
}

.content-world-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
}

.content-world-title {
  margin: 0;
}

.content-world-body {
  margin: 0;
  max-width: calc(100% * 5 / 6);
}

.content-world-figure {
  margin: 0;
  grid-column: calc(var(--grid-content-col) + 6) / span 6;
  align-self: center;
}

.content-world-diagram {
  display: block;
  width: 100%;
  height: auto;
}

.content-heading {
  text-align: center;
  margin-top: clamp(48px, 8vw, 100px);
}

.content-image {
  border-radius: 12px;
  overflow: hidden;
}

.content-image img {
  display: block;
  width: 100%;
  height: auto;
}

.content-columns {
  display: contents;
}

.content-columns .text-body {
  grid-column: var(--grid-content-col) / span 4;
}

.content-cta {
  justify-self: center;
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  color: rgba(0, 0, 0, 0.8);
  font-size: var(--text-body);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.content-cta:hover {
  border-color: rgba(0, 0, 0, 0.45);
  color: #000;
}

.content-gap-lg {
  margin-top: clamp(64px, 10vw, 100px);
}

/* ── Triptych: full-bleed 3-col, caption under each image ── */
.page-home .content-triptic {
  padding-block: 0;
}

.content-triptic-images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.content-triptic-figure {
  margin: 0;
  min-width: 0;
}

.content-triptic-figure > img:not(.content-triptic-caption-icon) {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) and (min-width: 641px) {
  .content-triptic-figure > img:not(.content-triptic-caption-icon) {
    cursor: none;
  }
}

.content-triptic-tooltip {
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  margin: 0;
  padding: 10px 14px 6px;
  pointer-events: none;
  background: var(--radio-pill-bg);
  border-radius: 0;
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #000;
  transform: translate(-50%, calc(-100% - 14px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.content-triptic-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.content-triptic-caption-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 14px);
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 28px) 0;
  min-width: 0;
}

.content-triptic-caption-icon {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  margin-top: 0.2em;
  filter: brightness(0);
}

.content-triptic-caption {
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1;
}

.content-triptic-combined {
  display: none;
}

.content-triptic-mobile {
  display: none;
  margin: 0;
}

.content-triptic-mobile img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .span-6,
  .span-5,
  .span-8,
  .span-10,
  .span-4,
  .content-real-figure,
  .content-real-copy,
  .content-world-copy,
  .content-world-figure,
  .content-plugin-copy,
  .content-plugin-figure,
  .content-agents-title-wrap,
  .content-agents-copy {
    grid-column: var(--grid-content-col) / span var(--grid-content-span);
    grid-row: auto;
  }

  .content-real-body,
  .content-world-body,
  .content-plugin-body {
    max-width: none;
  }

  .content-plugin-title,
  .content-agents-title {
    max-width: calc(100% * 5 / 12);
  }

  .span-8-center,
  .span-10-center,
  .hero-intro.span-10-center {
    grid-column: var(--grid-content-col) / span var(--grid-content-span);
  }

  .hero-intro {
    grid-template-columns: 1fr;
    row-gap: clamp(24px, 4vw, 40px);
  }

  .hero-intro-headline,
  .hero-intro-copy {
    grid-column: 1 / -1;
  }

  .page-home {
    overflow-x: hidden;
  }

  .hero-top-view-wrap {
    --top-view-mobile-size: 150vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding-block: clamp(16px, 4vw, 32px);
    min-height: var(--top-view-mobile-size);
  }

  .hero-top-view-stage {
    width: var(--top-view-mobile-size);
    max-width: none;
    flex-shrink: 0;
    --top-view-base-rotate: 90deg;
  }

  /* Stage is rotated 90° on mobile; counter-rotate the marker video to upright */
  .hero-top-view-marker .hero-top-view-video {
    transform: scale(2) rotate(-90deg);
  }

  .content-columns .text-body {
    grid-column: var(--grid-content-col) / span var(--grid-content-span);
    text-align: left;
  }
}

@media (max-width: 640px) {
  .content-triptic-images {
    display: none;
  }

  .content-triptic-mobile {
    display: block;
  }

  .content-triptic-combined {
    display: block;
    margin: 0;
    padding: clamp(16px, 5vw, 24px) var(--gutter) 0;
  }
}

/* ── Behind-the-scenes carousel (full-bleed strip, layered over the button) ── */
.page-home .content-archive {
  position: relative;
  z-index: 2;
  /* Sits below the agents copy, above the button image — no overlap */
  padding-block: clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px);
  overflow: visible;
}

/* JS auto-advances scrollLeft; the strip stays natively (manually) scrollable */
.archive-carousel {
  --archive-img-h: clamp(200px, 24vw, 340px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* Headroom for the ×1.5 hover: a centered scale overflows by 25% top & bottom,
     so the padding must be ≥ 0.25·image-height or the rounded corners get clipped. */
  padding-block: calc(var(--archive-img-h) * 0.26);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.archive-carousel::-webkit-scrollbar {
  display: none;
}

.archive-carousel.is-dragging {
  cursor: grabbing;
}

.archive-carousel:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.4);
  outline-offset: 4px;
}

.archive-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative; /* offsetParent for items → stable layout hit-testing */
}

.archive-item {
  flex: 0 0 auto;
  margin-right: clamp(12px, 1.4vw, 20px);
  transform: scale(1);
  transform-origin: center center;
  /* easeOut so rapid hover changes blend smoothly (ease-in stutters when
     each transition is interrupted before it gets going) */
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.archive-item img {
  display: block;
  height: var(--archive-img-h);
  width: auto;
  aspect-ratio: 9 / 16;   /* uniform portrait frame; crop overflow */
  object-fit: cover;
  border-radius: 14px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Hover magnify (scale + neighbor push) is driven by JS in initArchiveCarousel
   so it can transform siblings symmetrically and keep the gaps constant. */

/* Bigger screens: enlarge the frames so fewer fit on-screen at once,
   avoiding two copies of the same image being visible together */
@media (min-width: 1200px) {
  .archive-carousel {
    --archive-img-h: clamp(340px, 30vw, 520px);
  }
}

/* ── Credits under the carousel ───────────────────────────────────────────── */
.archive-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  max-width: 640px;
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding-inline: 24px;
  text-align: center;
  font-family: "Geist", sans-serif;
}

.archive-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}

.archive-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 100px;
  font-family: var(--font-radio);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.archive-credit-pill img {
  width: 24px;
  height: 24px;
  display: block;
}

.archive-credit-text {
  text-wrap: balance;
}

/* Pill: one self-contained text class (Datatype mono, scene-colored).
   Drop straight onto any text/link (credits, CTAs, link series). */
.pill {
  display: inline-block;
  font-family: 'Datatype', var(--font-radio);
  font-size: clamp(18px, 1.7vw, 20px);
  text-transform: uppercase;
  letter-spacing: -0.06em;
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
  /* Tracks the currently selected scene color (orange/green/blue) */
  background: var(--color-selected, var(--color-green));
  padding: 2px 8px;
  border-radius: 6px;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.pill:hover,
.pill:focus-visible {
  filter: brightness(0.94);
}

.pill:active {
  transform: translateY(1px);
}

/* ── Newsletter signup (next to the "interested in making it real?" pill) ── */
.newsletter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* On success the form is hidden via [hidden]; the class sets display:flex, so the
   UA [hidden] rule needs to be re-asserted or the form stays visible. */
.newsletter[hidden] {
  display: none;
}

.newsletter-input {
  flex: 1 1 220px;
  min-width: 0;
  font-family: "Geist", sans-serif;
  font-size: clamp(14px, 1.4vw, 18px);
  color: #000;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px 16px;
  outline: none;
}

.newsletter-input:focus-visible {
  border-color: var(--color-selected, var(--color-green));
}

.newsletter-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.newsletter-submit {
  border: none;
  cursor: pointer;
}

.newsletter-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.newsletter-msg {
  margin: 0;
  font-family: "Geist", sans-serif;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.4;
}

.newsletter-msg.is-error {
  color: #b3261e;
}

.newsletter-msg.is-success {
  color: #000;
}