:root {
  --bg: #050c17;
  --bg-alt: #0a1626;
  --text: #f2ede6;
  --text-dim: #b8b2aa;
  --accent: #f1571a;
  --border: rgba(242, 237, 230, 0.12);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container-width: 1120px;
}

/* Light sections: cream/black/orange, reused from a reference design.
   Every component below is written against var(--bg)/--text/--border, so
   overriding just those four custom properties re-themes the whole section
   without touching component rules. */
.section-light {
  --bg: #f5f0e3;
  --bg-alt: #ece3cd;
  --text: #14120e;
  --text-dim: #6e685c;
  --border: rgba(20, 18, 14, 0.14);
  background: var(--bg);
  color: var(--text);
}
.section-light.section-alt { background: var(--bg-alt); }

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 20px; }
h3 { font-size: 1.5rem; margin-bottom: 12px; color: var(--text); line-height: 1.15; }

p { color: var(--text-dim); }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.section-num {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.section-lead {
  max-width: 640px;
  font-size: 1.05rem;
}

.section-lead-strong {
  color: var(--text);
  font-weight: 500;
}

.btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
}
.btn-primary:hover { opacity: 0.8; }

.btn-secondary {
  border: 1.5px solid var(--text);
  color: var(--text);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(5, 12, 23, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 0.9rem;
}

.site-nav a { color: var(--text-dim); }
.site-nav a:hover { color: var(--accent); }

.nav-cta {
  border-radius: 999px;
  border: 1.5px solid var(--text);
  color: var(--text) !important;
  padding: 8px 18px;
  margin-left: 4px;
}
.nav-cta:hover { border-color: var(--accent); color: var(--accent) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 1px;
  background: var(--text);
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

/* Extra hero-frame images (frame 2..12 of the look-around clip) are only
   created by script.js on desktops with a real mouse - see the
   wantsMotionFlourish guard there. The base frame above always renders on
   its own and needs none of this to look correct. */
.hero-frame { opacity: 0; transition: opacity 0.12s linear; }
.hero-frame.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-frame { transition: none !important; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* The portrait photo already reserves its own dark navy zone on the left
     for text; this just reinforces contrast there and fades out before the
     photos/portrait so their color isn't muddied. */
  background:
    linear-gradient(90deg, rgba(4, 7, 18, 0.68) 0%, rgba(4, 7, 18, 0.4) 32%, rgba(4, 7, 18, 0) 47%),
    linear-gradient(0deg, rgba(4, 7, 18, 0.45) 0%, rgba(4, 7, 18, 0) 20%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 72px 24px 0 clamp(24px, 6vw, 96px);
  max-width: min(44vw, 500px);
}

.hero-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 36px;
}

.hero-ctas { display: flex; gap: 12px; }
.hero-ctas .btn {
  flex: 1 1 0;
  padding: 14px 18px;
  font-size: 0.88rem;
  text-align: center;
  white-space: nowrap;
}

/* Sections */
.section { padding: 120px 0; }
.section-alt { background: var(--bg-alt); }

.case-formula {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--text);
  max-width: 700px;
  margin-bottom: 20px;
}

.work-meta { max-width: 640px; margin-bottom: 64px; }
.work-stat { color: var(--text); font-size: 1.05rem; margin-bottom: 8px; }
.work-note { margin-bottom: 20px; }
.work-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.work-links a { color: var(--accent); font-size: 0.9rem; }
.work-links a:not(.btn) {
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 9px 20px;
  white-space: nowrap;
}
.work-links a:not(.btn):hover { background: var(--accent); color: var(--bg); }
.work-support-btn { padding: 10px 24px; font-size: 0.85rem; white-space: nowrap; }

@media (max-width: 480px) {
  .work-links { gap: 10px; flex-wrap: nowrap; }
  .work-links a:not(.btn) { flex-shrink: 0; font-size: 0.75rem; padding: 8px 14px; }
  .work-support-btn { padding: 8px 14px; font-size: 0.7rem; }
}

/* Stations: one fixed, edge-to-edge window. Desktop: the section is pinned
   (position: sticky) and stays completely still - nothing slides sideways.
   All 8 stations are stacked in the same spot; the vertical scroll distance
   crossfades between them (background + text), so the window itself never
   moves, only what's showing through it. See script.js for the scroll-to-
   opacity math. Below the tablet breakpoint this degrades to a native
   horizontal swipe strip (no scroll-hijacking on touch). */
.stations-pin-wrap {
  position: relative;
}

.stations-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #050c17;
}

.stations-window {
  position: relative;
  width: 100%;
  height: 100%;
}

.station-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.station-layer:first-child .station-panel-media,
.station-layer:first-child .station-scene,
.station-layer:first-child .station-panel-overlay,
.station-layer:first-child .station-panel-index {
  opacity: 1;
}

.station-layer:not(:first-child) .station-panel-media,
.station-layer:not(:first-child) .station-scene,
.station-layer:not(:first-child) .station-panel-overlay,
.station-layer:not(:first-child) .station-panel-index {
  opacity: 0;
}

/* Stations with real footage (currently 01-02; more land here as clips are
   cut) use a plain full-bleed looping video instead of the procedural scene. */
.station-panel-media {
  position: absolute;
  inset: 0;
  will-change: opacity;
}

.station-panel-media video,
.station-panel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stations without footage yet (currently 03-08) fall back to a hand-drawn
   skyline that can actually be driven. Two tileable SVG layers (far/near)
   sit on a per-station gradient sky; script.js shifts their
   background-position horizontally from two inputs combined - how far the
   visitor has scrolled (constant forward motion, shared across every scene)
   and where the mouse sits over the pinned viewport (a steering offset,
   eased back to center on mouse-leave). Near moves faster than far for
   parallax depth. */
.station-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.scene-far,
.scene-near {
  position: absolute;
  left: 0;
  right: -200px;
  bottom: 0;
  background-repeat: repeat-x;
  will-change: background-position;
}

.scene-far {
  height: 52%;
  background-image: url('assets/skyline-far.svg');
  background-size: auto 100%;
  opacity: 0.75;
}

.scene-near {
  height: 68%;
  background-image: url('assets/skyline-near.svg');
  background-size: auto 100%;
}

.scene-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 45% at 50% 28%, var(--glow, rgba(241,87,26,0.25)) 0%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.station-scene-1 { background: linear-gradient(180deg, #f3c99a 0%, #8a4a4e 100%); --glow: rgba(255, 200, 140, 0.4); }
.station-scene-2 { background: linear-gradient(180deg, #8fb2cf 0%, #d3944f 100%); --glow: rgba(255, 190, 120, 0.35); }
.station-scene-3 { background: linear-gradient(180deg, #a9895f 0%, #33251a 100%); --glow: rgba(220, 160, 90, 0.3); }
.station-scene-4 { background: linear-gradient(180deg, #3f5f7d 0%, #171a26 100%); --glow: rgba(120, 180, 220, 0.28); }
.station-scene-5 { background: linear-gradient(180deg, #5b4a7a 0%, #1c1526 100%); --glow: rgba(180, 140, 230, 0.3); }
.station-scene-6 { background: linear-gradient(180deg, #7a5330 0%, #1c130c 100%); --glow: rgba(241, 140, 60, 0.32); }
.station-scene-7 { background: linear-gradient(180deg, #7a3f5e 0%, #190f18 100%); --glow: rgba(230, 100, 150, 0.3); }
.station-scene-8 { background: linear-gradient(180deg, #202c47 0%, #05070d 100%); --glow: rgba(140, 170, 240, 0.3); }

.station-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5,12,23,0.97) 0%, rgba(5,12,23,0.78) 48%, rgba(5,12,23,0.15) 82%);
  will-change: opacity;
}

.station-panel-index {
  position: absolute;
  top: 40px;
  right: 48px;
  z-index: 1;
  will-change: opacity;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.station-panel-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 56px 64px;
  max-width: 640px;
  will-change: opacity, transform;
}

.station-panel-content h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 16px;
}

.station-panel-content p { color: var(--text); max-width: 560px; }

.station-marker-inline {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(242, 237, 230, 0.3);
  padding: 6px 12px;
  margin-bottom: 18px;
}

.station-insight {
  margin-top: 16px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

.station-support-note {
  margin-top: 20px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.station-support-btn {
  padding: 10px 24px;
  font-size: 0.85rem;
}

.stations-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(242, 237, 230, 0.75);
  background: rgba(5, 12, 23, 0.4);
  border: 1px solid rgba(242, 237, 230, 0.25);
  border-radius: 999px;
  padding: 8px 18px;
  pointer-events: none;
  animation: stationsHintFade 6s ease forwards;
}

@keyframes stationsHintFade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.stations-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(242, 237, 230, 0.12);
  z-index: 2;
}

.stations-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.four-grid { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px;
}

.section-alt .card { background: var(--bg-alt); }

.card-highlight {
  border-color: var(--accent);
}

.card-tag {
  font-size: 0.9rem;
  margin-bottom: 20px;
}

/* Work section: featured film + categories of video cards, rendered from
   the WORK_VIDEOS data array in script.js. Markup for #work-featured and
   #work-categories is built at runtime - adding a video means editing that
   array, not this HTML/CSS. */
.work-featured {
  margin-top: 48px;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}
.work-featured-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.work-featured-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-featured-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-featured-play span {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(20, 18, 14, 0.55);
  border: 1.5px solid rgba(242, 237, 230, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.work-featured:hover .work-featured-play span { transform: scale(1.08); background: var(--accent); border-color: var(--accent); }
.work-featured-body { padding: 24px 28px; background: var(--bg); }
.section-alt .work-featured-body { background: var(--bg-alt); }
.work-featured-kicker { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 8px; }
.work-featured-body h3 { font-size: 1.4rem; margin-bottom: 8px; }
.work-featured-body p { max-width: 640px; }

.work-category { margin-top: 64px; }
.work-category-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.work-category-head h3 { font-size: 1.3rem; }
.work-category-note { font-size: 0.85rem; color: var(--text-dim); }
.work-category-note a { color: var(--accent); }

.work-subfilters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.work-subfilter {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.82rem;
  color: var(--text-dim);
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.work-subfilter:hover { border-color: var(--accent); color: var(--accent); }
.work-subfilter.is-active { border-color: var(--accent); color: var(--accent); }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.work-grid + .work-grid { margin-top: 20px; }
.work-grid.vertical { grid-template-columns: repeat(4, 1fr); }

.work-card {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
}
.section-alt .work-card { background: var(--bg-alt); }
.work-featured { font: inherit; }

.work-card-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.work-grid.vertical .work-card-media { aspect-ratio: 9 / 16; }
.work-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.work-card:hover .work-card-media img { transform: scale(1.04); }
.work-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.work-card-play span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(20, 18, 14, 0.55);
  border: 1.5px solid rgba(242, 237, 230, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.work-card:hover .work-card-play span { transform: scale(1.08); background: var(--accent); border-color: var(--accent); }
.work-card-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.work-card-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(5, 12, 23, 0.75);
  color: var(--text);
  border: 1px solid rgba(242, 237, 230, 0.35);
}
.work-card-format {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(5, 12, 23, 0.75);
  color: var(--text);
}
.work-card-body { padding: 16px 18px; }
.work-card-body h4 { font-size: 1rem; margin-bottom: 6px; }
.work-card-meta { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 4px; }
.work-card-role { font-size: 0.78rem; color: var(--text-dim); }

.work-show-more, .work-external-link { margin-top: 24px; display: inline-block; }

.work-3d-line { margin-top: 56px; font-size: 0.95rem; }
.work-3d-line a { color: var(--accent); }

/* Lightbox: hidden by default, no YouTube iframe exists until a card is
   clicked (facade pattern) - keeps ~30 embeds from loading on page load. */
.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.work-lightbox[hidden] { display: none; }
.work-lightbox-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 14, 0.92); }
.work-lightbox-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  max-height: 100%;
  overflow-y: auto;
  background: #0b0f16;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.work-lightbox-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.work-lightbox-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.work-lightbox-info { padding: 20px 28px 28px; color: var(--text); }
.work-lightbox-meta { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.work-lightbox-info h3 { font-size: 1.3rem; margin-bottom: 10px; }
.work-lightbox-info p:not(.work-lightbox-meta) { margin-bottom: 20px; max-width: 640px; }
.work-lightbox-close, .work-lightbox-nav {
  /* Fixed to the viewport, not the panel - the panel scrolls its own
     overflow (overflow-y: auto), which also clips horizontal overflow
     per spec, so anything positioned outside the panel's own box (like
     these used to be, with negative offsets) was invisible/unreachable. */
  position: fixed;
  z-index: 201;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(242, 237, 230, 0.35);
  background: rgba(5, 8, 14, 0.7);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.work-lightbox-close:hover, .work-lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.work-lightbox-close { top: 20px; right: 20px; }
.work-lightbox-prev { left: 20px; top: calc(50% - 20px); }
.work-lightbox-next { right: 20px; top: calc(50% - 20px); }

.card ul { display: flex; flex-direction: column; gap: 8px; }
.card li {
  font-size: 0.9rem;
  color: var(--text-dim);
  padding-left: 16px;
  position: relative;
}
.card li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Tag list */
.tag-list {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag-list li {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.who-its-for-note {
  margin-top: 32px;
  font-size: 1.05rem;
  color: var(--text);
}

.who-its-for-cta { display: inline-block; margin-top: 40px; }

/* POV360 (as a sub-block inside About, not a standalone section) */
.pov360-box {
  max-width: 640px;
  margin: 64px auto 0;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center;
}
.pov360-box p:not(.eyebrow):not(:last-child) { margin-bottom: 20px; }

.founder-box {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: left;
}
.founder-title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.founder-title span { color: var(--accent); margin: 0 4px; }
.founder-role {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 18px;
}
.founder-box p:not(.founder-title):not(.founder-role):not(:last-child) { margin-bottom: 16px; }

/* About */
.about-split { display: flex; gap: 48px; align-items: flex-start; }
.about-photo { flex: 0 0 260px; position: sticky; top: 100px; }
.about-photo img { display: block; width: 100%; border-radius: 16px; }
.about-layout { flex: 1; max-width: 720px; }
.about-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--accent);
  margin: 28px 0 32px;
}
.about-bio { margin-bottom: 40px; }
.about-bio p:not(:last-child) { margin-bottom: 20px; }
.about-explore-btn { margin-top: 24px; }

/* Contact */
.contact-inner { max-width: 900px; }
.contact-inner h2 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  max-width: 820px;
  margin-bottom: 40px;
}
.contact-form-embed {
  display: block;
  width: 100%;
  max-width: 640px;
  height: 950px;
  border: none;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 16px;
}
.contact-hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 480px;
}
.contact-hint a { color: var(--accent); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}
.site-footer p { font-size: 0.8rem; text-align: center; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page-wide scroll progress, a thin bar under the header nav. Separate from
   the stations-only progress bar inside the ride. */
.page-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.page-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
}

/* Cards: subtle cursor-follow tilt (desktop, fine pointer only - see
   script.js). transform is set inline per-card on mousemove; this just
   supplies the perspective/transition/reduced-motion opt-out. */
@media (hover: hover) and (pointer: fine) {
  .card {
    transition: transform 0.15s ease;
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none !important; }
  .work-card-media img, .work-featured-play span, .work-card-play span { transition: none !important; }
}

/* Custom cursor: a small ring that grows over links/buttons, becomes a
   viewfinder (four corner brackets) over the stations ride, and carries a
   text label ("Explore" / "Scroll") in a couple of specific contexts.
   Desktop with a real mouse only - see the pointer:fine guard in script.js,
   which also skips all of this under prefers-reduced-motion. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  will-change: transform;
  /* Hidden until script.js confirms a fine-pointer, motion-ok visitor and
     flags <html class="custom-cursor"> - otherwise the ring's negative
     margins would still peek out at the unset (0,0) origin on touch. */
  opacity: 0;
}

html.custom-cursor .cursor {
  opacity: 1;
}

/* The ring is the only cursor mode shown over both light and dark sections
   (it's the default, everywhere-hover state), so it uses mix-blend-mode:
   difference against a solid white base instead of var(--text) - that way
   it stays visible with no JS section-detection needed: difference against
   a dark bg reads white, against a light bg it reads dark. The viewfinder
   corners and the text label are only ever shown over the stations ride /
   hero photo, both always-dark, so they can just hardcode light colors. */
.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 1.5px solid #f1571a;
  border-radius: 50%;
  transition: width 0.18s ease, height 0.18s ease, margin 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.cursor.is-hover .cursor-ring {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  background: rgba(241, 87, 26, 0.18);
}

.cursor-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  opacity: 0;
  border-color: rgba(255, 255, 255, 0.9);
  transition: opacity 0.15s ease;
}
.cursor-corner-tl { margin: -30px 0 0 -30px; border-top: 1.5px solid; border-left: 1.5px solid; }
.cursor-corner-tr { margin: -30px 0 0 16px; border-top: 1.5px solid; border-right: 1.5px solid; }
.cursor-corner-bl { margin: 16px 0 0 -30px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.cursor-corner-br { margin: 16px 0 0 16px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

.cursor.is-viewfinder .cursor-ring { opacity: 0; }
.cursor.is-viewfinder .cursor-corner { opacity: 1; }

.cursor-label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 14px 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f2ede6;
  color: #0b0b0c;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The station "swipe" cue is an icon, not text - a compact round badge
   instead of the wider text pill. */
.cursor-label.is-icon {
  padding: 9px;
  border-radius: 50%;
}
.cursor-label svg { display: block; }
.cursor.is-label .cursor-label { opacity: 1; transform: scale(1); }
.cursor.is-label .cursor-ring { opacity: 0; }

/* Hide the real cursor and enable the custom one - only when script.js has
   confirmed a fine pointer and no reduced-motion preference. */
html.custom-cursor,
html.custom-cursor a,
html.custom-cursor button,
html.custom-cursor .btn {
  cursor: none;
}

/* Responsive */
@media (max-width: 900px) {
  .card-grid { grid-template-columns: 1fr; }
  .four-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid, .work-grid.vertical { grid-template-columns: repeat(2, 1fr); }
  .about-split { flex-direction: column; gap: 24px; }
  .about-photo { flex: none; width: 120px; position: static; }
  .about-photo img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }

  /* Below this width, scroll-hijacking a fixed window from vertical touch
     scroll is unreliable and fights the browser's own gestures. Fall back to
     a native horizontally-swipeable, scroll-snapped strip - every station
     gets its own card again instead of crossfading in one fixed spot. */
  .stations-pin-wrap { height: auto !important; }
  .stations-pin {
    position: static;
    height: auto;
  }
  .stations-window {
    display: flex;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 24px 20px;
  }
  .station-layer {
    position: relative;
    flex: 0 0 88vw;
    height: auto;
    min-height: 580px;
    scroll-snap-align: start;
    border: 1px solid var(--border);
    /* Every station gets the same treatment as station 08's card: the text
       plate floats centered over the photo with equal breathing room on
       every side, instead of being pinned flush to the bottom edge. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .station-layer .station-panel-media,
  .station-layer .station-scene,
  .station-layer .station-panel-overlay,
  .station-layer .station-panel-index,
  .station-layer .station-panel-content {
    opacity: 1 !important;
    transform: none !important;
  }
  .station-layer .station-panel-content {
    position: static;
    max-width: none;
    width: 100%;
    /* Fixed to the tallest station's content (station 08, with its extra
       support note + button) so every plate reads as the same size -
       shorter stations center their text inside this same height instead
       of shrink-wrapping to a shorter box. */
    height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 20px;
    /* The diagonal train-window overlay alone isn't always dark enough
       against a bright/busy photo (sky, snow, water) at phone sizes - back
       the text with its own solid panel so legibility never depends on
       which photo happens to be behind it. */
    background: rgba(5, 12, 23, 0.6);
    border-radius: 14px;
    margin: 0;
  }
  /* Redundant with the "STATION 0X" marker already inside the content, and
     it's what was overlapping the text above - simplest to drop it here. */
  .station-layer .station-panel-index {
    display: none;
  }
  .stations-progress { display: none; }
  .stations-hint { display: none; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .four-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid.vertical { grid-template-columns: repeat(2, 1fr); }
  .work-lightbox-prev, .work-lightbox-next { display: none; }
  .work-lightbox { padding: 0; }
  .work-lightbox-panel { max-width: none; height: 100%; border-radius: 0; }
  .work-lightbox-close { top: 12px; right: 12px; background: rgba(5, 8, 14, 0.85); }
  .site-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .nav-cta { margin-top: 8px; border: 1px solid var(--border); text-align: center; }
  .section { padding: 80px 0; }

  /* On a narrow, tall viewport, cover only crops horizontally (the image's
     full height already fits), so this just needs to center on the face -
     which sits at roughly 68% across the source photo, not the middle. */
  .hero-media { object-position: 68% center; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(4, 7, 18, 0.55) 0%, rgba(4, 7, 18, 0.7) 55%, rgba(4, 7, 18, 0.92) 100%);
  }
  .hero-content { max-width: none; padding: 72px 24px 0; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { white-space: normal; font-size: 0.95rem; padding: 14px 22px; }
}