/* ==========================================================================
   Unit A, Camino Park, Crawley
   Plain CSS. Brand tokens read straight out of the supplied Illustrator
   artwork (see tools/build-logos.sh for the same values).

   The page opens on a scroll-driven descent from the client's aerial to the
   ground-level exterior (see .descent). Below that, light and dark bands
   alternate.
   Red is the Unit A colourway and is used for rules, the chevron and fills,
   never for a run of text.

   Motion is progressive enhancement, scoped to the `.js` class and disabled
   under prefers-reduced-motion.

   Every URL to this file is content-hashed by tools/stamp-versions.mjs. Never
   request a stamped URL on the live domain before the file behind it has been
   uploaded: Cloudflare caches whatever the origin answers (playbook, Hosting
   and caching, rule 3).
   ========================================================================== */

:root {
  /* brand: every value below is taken from the client's own material.
     Red and navy are fills declared in Camino Park Unit A_240926.pdf (red is
     also the logo red); the light grey is the page ground on brochure pages 2
     and 5. Anything else is a tint of these, mixed in CSS, never a new hue. */
  --red:       #E30613;
  --navy:      #262960;   /* brochure navy */
  --grey:      #F4F4F4;   /* brochure page ground */
  --paper:     #FFFFFF;

  --grey-2:        color-mix(in srgb, var(--navy) 7%, var(--grey));
  --navy-deep:     color-mix(in srgb, var(--navy) 88%, #000);

  /* type ----------------------------------------------------------------- */
  --ink:           var(--navy);
  --ink-soft:      color-mix(in srgb, var(--navy) 78%, #fff);
  --on-dark:       #FFFFFF;
  --on-dark-soft:  color-mix(in srgb, #fff 80%, var(--navy));

  --line-light: color-mix(in srgb, var(--navy) 16%, transparent);
  --line-dark:  rgba(255,255,255,0.18);
  --rule:       color-mix(in srgb, var(--navy) 36%, transparent);   /* hairline frames */

  /* PALETTE RULE, measured with tools/contrast-audit.mjs: red is not safe as
     body type on any of these grounds. It is used for rules,
     the chevron, borders and fills only. A word on a red fill is white,
     which clears 4.88:1. */
  --accent: var(--red);
  --accent-ink: #FFFFFF;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type scale: five steps, at least 1.25 apart */
  --fs-label: 0.75rem;
  --fs-body:  1rem;
  --fs-lede:  clamp(1.0625rem, 1.3vw, 1.1875rem);
  --fs-h2:    clamp(1.75rem, 2.9vw, 2.5rem);
  --fs-xl:    clamp(2.5rem, 5.2vw, 4.25rem);

  --wrap: 1280px;
  --gutter: clamp(16px, 4.5vw, 56px);
  --section-y: clamp(64px, 8vw, 112px);
  --radius: 2px;
  --nav-h: clamp(68px, 7vw, 88px);

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--grey);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* An element hidden by the `hidden` attribute stays hidden, whatever display
   value a component rule gives it. */
[hidden] { display: none !important; }

img, svg, picture, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink); padding: 12px 18px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* A photograph that must reach every edge of its frame. <picture> is a box of
   its own, so it needs sizing as well as the <img> inside it. */
.fill { overflow: hidden; border-radius: var(--radius); }
.fill picture, .fill img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- type ---- */
.h2 { font-size: var(--fs-h2); margin-bottom: clamp(20px, 2.4vw, 32px); }
.lede { font-size: var(--fs-lede); color: var(--ink-soft); max-width: 62ch; }
.note { font-size: 0.9375rem; color: var(--ink-soft); max-width: 48ch; }
.label {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* -------------------------------------------------------------- bands ---- */
.band { padding-block: var(--section-y); position: relative; overflow-x: clip; }
.band--grey  { background: var(--grey); }
.band--paper { background: var(--paper); }
.band--dark  { background: var(--navy); color: var(--on-dark); }
.band--dark .h2, .band--dark h3 { color: var(--on-dark); }
.band--dark .lede, .band--dark .note, .band--dark .label { color: var(--on-dark-soft); }

/* ------------------------------------------------------------ buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: var(--radius);
  font-family: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn::after {
  content: ""; width: 10px; height: 10px; flex: none; background: currentColor;
  clip-path: polygon(0 0, 55% 50%, 0 100%, 45% 100%, 100% 50%, 45% 0);
  transition: transform .2s var(--ease);
}
.btn:hover::after { transform: translateX(3px); }
.btn--solid  { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.descent .btn--ghost:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy); }
.btn--solid:hover { background: color-mix(in srgb, var(--accent) 80%, #000); border-color: color-mix(in srgb, var(--accent) 80%, #000); }
.btn--ghost  { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.band--dark .btn--ghost:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------------------------------------------------------------- nav ---- */
/* Seven section links and the CTA need about 1,160px beside the wordmark,
   so the menu button takes over below 1280px. A solid grey bar from the first frame: the page opens on grey, so the
   bar never sits as naked links over a photograph. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--grey); border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.is-stuck, .nav.is-open { border-bottom-color: var(--line-light); box-shadow: 0 6px 18px -14px color-mix(in srgb, var(--navy) 50%, transparent); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.nav__brand { display: flex; align-items: center; margin-right: auto; }
.nav__brand img { height: clamp(30px, 3.2vw, 42px); width: auto; }

.nav__menu { display: flex; align-items: center; gap: clamp(20px, 2vw, 32px); }
.nav__menu ul { display: flex; align-items: center; gap: clamp(18px, 1.7vw, 26px); list-style: none; margin: 0; padding: 0; }
.nav__menu > ul a {
  color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease);
}
.nav__menu > ul a:hover, .nav__menu > ul a[aria-current] { border-bottom-color: var(--accent); }
.nav__cta { min-height: 42px; padding: 9px 18px; }

.nav__toggle {
  display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px;
}
.nav__toggle span { display: block; height: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1279px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: absolute; inset: var(--nav-h) 0 auto 0; background: var(--grey);
    display: none; padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--line-light);
  }
  .nav__menu.is-open { display: block; }
  .nav__menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__menu > ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
  .nav__cta { margin-top: 20px; width: 100%; }
}

/* --------------------------------------------------------------- hero ---- */
/* The descent. By default, which is what visitors without JavaScript or with
   reduced motion get, it is one screen: the ground-level exterior with the
   h1, address, figures and actions over a navy scrim. main.js adds .is-live,
   which makes the section tall, pins the frame and animates from the aerial. */
.descent { position: relative; background: var(--navy); color: var(--on-dark); }
.descent__pin {
  position: relative; overflow: hidden; background: var(--navy);
  height: calc(100svh - var(--nav-h)); min-height: 560px; margin-top: var(--nav-h);
}
.descent.is-live { height: 540vh; }
.descent.is-live .descent__pin { position: sticky; top: var(--nav-h); }

.descent__cam { position: absolute; transform-origin: 0 0; will-change: transform; display: none; }
.descent.is-live .descent__cam { display: block; }
.descent__cam picture, .descent__cam img { position: absolute; inset: 0; width: 100%; height: 100%; }
.descent__outline { opacity: 0; }
/* The client's Unit A outline, drawn over the photo. Stretched to the photo's
   box so its coordinates land on the site. main.js sets the dash from the
   polygon's measured length and the stroke width from the current zoom.
   pathLength and non-scaling-stroke are deliberately not used: Safari does
   not combine them with dashes consistently, and the line draws half at a
   time. Hidden until main.js has measured it. */
.descent__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.descent__line polygon { fill: none; stroke: var(--red); stroke-linejoin: round; stroke-linecap: round; visibility: hidden; }

.descent__land { position: absolute; inset: 0; will-change: opacity, transform; }
.descent__land picture, .descent__land img { width: 100%; height: 100%; object-fit: cover; }

/* the scrims keep white type on navy whatever the photograph does */
.descent__scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--navy) 82%, transparent) 0%, color-mix(in srgb, var(--navy) 35%, transparent) 42%, transparent 62%),
    linear-gradient(0deg, color-mix(in srgb, var(--navy) 55%, transparent) 0%, transparent 30%);
}
.descent__scrim--end {
  opacity: 1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--navy) 95%, transparent) 0%, color-mix(in srgb, var(--navy) 86%, transparent) 36%, transparent 66%);
}

/* opening title: only exists in the live version */
.descent__title { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.descent.is-live .descent__title { display: block; }
.descent__name {
  margin: 0; display: flex; align-items: center; gap: 0.12em;
  font-size: clamp(3.5rem, 11vw, 10.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.045em;
}
.descent__name img { width: 0.55em; height: auto; }
.descent__place { margin: 20px 0 0; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; max-width: 32ch; }
.descent__sub { margin: 10px 0 0; font-size: clamp(1.125rem, 1.6vw, 1.4375rem); max-width: 34ch; line-height: 1.45; color: var(--on-dark-soft); }

.descent__cue {
  display: none; position: absolute; left: 50%; bottom: clamp(22px, 4vh, 40px); transform: translateX(-50%); margin: 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  flex-direction: column; align-items: center; gap: 10px;
}
.descent.is-live .descent__cue { display: flex; }
.descent__cue::after {
  content: ""; width: 22px; height: 22px; background: var(--red);
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 45%, 50% 100%, 0 45%);
  animation: cue 1.6s var(--ease) infinite;
}
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* the label that lands on the outlined site */
.descent__mark { display: none; position: absolute; left: 0; top: 0; align-items: flex-end; gap: 10px; opacity: 0; pointer-events: none; }
.descent.is-live .descent__mark { display: flex; }
.descent__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 30%, transparent); translate: -7px 7px; }
.descent__mark.is-stacked { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
.descent__mark.is-stacked .descent__tag { translate: none; }
.descent__tag {
  background: var(--navy); color: var(--on-dark); padding: 8px 12px; border-radius: var(--radius);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; translate: 0 -10px;
}
.descent__tag small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--on-dark-soft); }

/* the landing: h1, address, figures, actions */
.descent__landing { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(20px, 4vh, 44px); }
.descent__h1 {
  display: flex; align-items: center; gap: 0.18em; color: var(--on-dark);
  font-size: clamp(2.5rem, 5.5vw, 4.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95;
}
.descent__h1 img { width: 0.55em; height: auto; }
.descent__addr { margin: 10px 0 0; font-size: clamp(1rem, 1.3vw, 1.1875rem); color: var(--on-dark); }
.descent__figs { display: grid; grid-template-columns: repeat(2, 1fr); margin: clamp(18px, 3vh, 30px) 0 0; border-top: 1px solid var(--line-dark); }
.descent__figs > div { padding: 12px 16px 12px 0; }
.descent__figs > div:first-child { grid-column: 1 / -1; }
.descent__figs dt { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-soft); }
.descent__figs dd { margin: 4px 0 0; font-size: clamp(1.375rem, 2.3vw, 2.125rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.descent__figs small { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--on-dark-soft); }
.descent__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(14px, 2.4vh, 24px); }
@media (min-width: 900px) {
  .descent__figs { grid-template-columns: repeat(5, 1fr); }
  .descent__figs > div:first-child { grid-column: auto; }
  .descent__figs > div + div { padding-left: 20px; border-left: 1px solid var(--line-dark); }
}
@media (max-width: 699px) {
  /* phones: the type spans the width, so the scrims run top to bottom */
  .descent__scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--navy) 78%, transparent) 0%, color-mix(in srgb, var(--navy) 62%, transparent) 55%, color-mix(in srgb, var(--navy) 20%, transparent) 100%); }
  .descent__scrim--end { background: linear-gradient(0deg, color-mix(in srgb, var(--navy) 96%, transparent) 0%, color-mix(in srgb, var(--navy) 90%, transparent) 62%, color-mix(in srgb, var(--navy) 30%, transparent) 88%, transparent 100%); }
}

/* ------------------------------------------------------------ two-col ---- */
.split { display: grid; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 0.9fr 1.1fr; }
  .split--flip { grid-template-columns: 1.1fr 0.9fr; }
  .split--flip > figure { order: -1; }
}
.frame-43 { aspect-ratio: 4 / 3; }
.frame-32 { aspect-ratio: 3 / 2; }

/* ------------------------------------------------------- accommodation --- */
.figure-xl {
  margin: 0 0 14px; font-size: var(--fs-xl); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--navy); padding-top: 18px; border-top: 2px solid var(--accent);
  display: inline-block;
}
/* inline-block so the count-up can reserve the final width and "sq ft" does
   not shuffle sideways while the digits change */
.figure-xl b { display: inline-block; font-weight: inherit; }
.figure-xl span { font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }

/* ------------------------------------------------------ accommodation --- */
/* The schedule under the headline area: ruled rows, figures right-aligned in
   tabular numerals, the total closed with an accent rule. */
.sched { width: 100%; max-width: 460px; border-collapse: collapse; margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.sched th, .sched td { padding: 11px 0; border-bottom: 1px solid var(--line-light); text-align: left; font-size: 0.9375rem; }
.sched td { text-align: right; padding-left: 20px; white-space: nowrap; color: var(--ink-soft); }
.sched thead th { padding-top: 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.sched thead th + th { text-align: right; }
.sched tbody th { font-weight: 500; }
.sched tfoot th, .sched tfoot td { font-weight: 600; color: var(--ink); border-bottom: 0; border-top: 2px solid var(--accent); }

/* ---------------------------------------------------------- spec sheet --- */
/* Ruled rows, like a data sheet: icon, then the brochure's own wording with
   its figure set bold. Two columns from tablet up. */
.specs {
  display: grid; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line-dark); column-gap: clamp(28px, 4vw, 64px);
}
@media (min-width: 760px)  { .specs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .specs { grid-template-columns: 1fr 1fr 1fr; } }
.spec {
  display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line-dark);
}
.spec img { width: 48px; height: 48px; }
.spec span { font-size: 1rem; line-height: 1.4; color: var(--on-dark-soft); }
.spec b { color: var(--on-dark); font-weight: 600; }

/* ------------------------------------------------------------- travel ---- */
.travel { display: grid; gap: clamp(28px, 4vw, 52px); margin-top: clamp(36px, 5vw, 64px); }
@media (min-width: 820px) { .travel { grid-template-columns: 1fr 1fr; } }
.travel h3 {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 12px; margin-bottom: 6px; border-top: 2px solid var(--accent);
}
.band--dark .travel h3 { color: var(--on-dark-soft); }
.travel table { width: 100%; border-collapse: collapse; }
.travel th, .travel td { padding: 11px 0; border-bottom: 1px solid var(--line-light); text-align: left; font-size: 0.9375rem; }
.travel td { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-soft); padding-left: 16px; white-space: nowrap; }
.travel tbody th { font-weight: 500; }
.band--dark .travel th, .band--dark .travel td { border-bottom-color: var(--line-dark); }
.band--dark .travel td { color: var(--on-dark-soft); }

/* -------------------------------------------------------------- stats ---- */
.stats { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 700px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { border-top: 2px solid var(--accent); padding-top: 16px; }
.stat b { display: block; font-size: clamp(2.25rem, 3.8vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--navy); }
.stat span { display: block; margin-top: 12px; font-size: 0.9375rem; color: var(--ink-soft); max-width: 32ch; }
.band--dark .stat b { color: var(--on-dark); }
.band--dark .stat span { color: var(--on-dark-soft); }

/* ---------------------------------------------------------- occupiers ---- */
/* Plain names in ruled columns: they are a list to read, not controls. */
.occ__label { margin-top: clamp(48px, 6vw, 80px); padding-bottom: 12px; border-bottom: 1px solid var(--line-light); }
.occ { columns: 2 150px; column-gap: 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .occ { columns: 4; } }
.occ li { padding: 12px 0; border-bottom: 1px solid var(--line-light); break-inside: avoid; font-weight: 500; }
.band--dark .occ__label, .band--dark .occ li { border-bottom-color: var(--line-dark); }

/* ----------------------------------------------------------- location ---- */
.band--dark a { text-underline-offset: 4px; text-decoration-color: var(--accent); }
.loc-media { display: grid; gap: 16px; margin-top: clamp(28px, 3.5vw, 44px); }
@media (min-width: 960px) { .loc-media { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.loc-media__aerial { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .loc-media__aerial { aspect-ratio: auto; height: clamp(320px, 52vh, 560px); } }

.map {
  height: clamp(320px, 52vh, 560px);
  border-radius: var(--radius);
  overflow: hidden;
  /* If Mapbox never draws, this is what is left: an empty container that is
     visibly a map slot rather than a section that has silently vanished. */
  background: var(--grey-2);
}
.map canvas { outline: none; }
.map__note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.band--dark .map__note { color: var(--on-dark-soft); }
.mapboxgl-ctrl-group { border-radius: var(--radius) !important; }

/* -------------------------------------------------------------- media ---- */
.media__tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.media__tab {
  background: none; border: 1px solid var(--line-light); color: var(--ink);
  padding: 10px 18px; border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; font-weight: 500;
}
.media__tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.band--dark .media__tab { border-color: var(--line-dark); color: var(--on-dark); }
.band--dark .media__tab.is-active { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy); }
.band--dark .media__frame { border-color: var(--line-dark); background: var(--navy-deep); }
.media__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--grey-2); border: 1px solid var(--rule); }
.media__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.js .media__panel { display: none; }
.js .media__panel.is-active { display: block; }

/* ------------------------------------------------------------ gallery ---- */
/* Four columns: the first frame takes 2x2 and the seventh spans two columns,
   which fills exactly four rows with twelve images. Three columns on tablet
   and two on phones, with no spans, also divide twelve evenly. */
.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; grid-auto-flow: dense; }
@media (min-width: 760px)  { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) {
  .gal { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 210px); }
  .gal button:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gal button:nth-child(7) { grid-column: span 2; }
}
.gal button {
  padding: 0; border: 0; background: var(--navy-deep); cursor: zoom-in; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 4 / 3; display: block; width: 100%;
}
@media (min-width: 1040px) { .gal button { aspect-ratio: auto; height: 100%; } }
.gal picture, .gal img { width: 100%; height: 100%; object-fit: cover; }
.gal img { transition: transform .6s var(--ease), opacity .3s var(--ease); }
.gal button:hover img { transform: scale(1.04); }

/* ----------------------------------------------------------- lightbox ---- */
.lb { position: fixed; inset: 0; z-index: 300; background: color-mix(in srgb, var(--navy-deep) 96%, transparent); display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lb__pic { max-width: min(1400px, 100%); max-height: 100%; }
.lb__pic img { max-height: 84vh; width: auto; margin-inline: auto; border-radius: var(--radius); }
.lb__close, .lb__nav {
  position: absolute; background: rgba(255,255,255,0.1); border: 1px solid var(--line-dark);
  color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1;
}
.lb__close { top: 20px; right: 20px; }
.lb__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--on-dark-soft); font-size: 0.875rem; }

/* ------------------------------------------------------------ contact ---- */
.contact { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
@media (min-width: 820px) { .contact { grid-template-columns: 1fr 1fr; } }
.agent { border-top: 2px solid var(--accent); padding-top: 22px; }
/* FTD Johns' lockup sets its phone number and website as artwork, so it is
   sized to be readable rather than to a plain wordmark's height. */
.agent__logo { height: clamp(72px, 9vw, 88px); width: auto; margin-bottom: 24px; }
.agent__people { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.agent__person b { display: block; font-size: 1.0625rem; font-weight: 600; }
.agent__person a { display: block; color: var(--ink-soft); text-decoration: none; margin-top: 2px; }
.agent__person a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.band--dark .agent__person a { color: var(--on-dark-soft); }
.band--dark .agent__person a:hover { color: var(--on-dark); }
.band--dark .agent__switch { color: var(--on-dark-soft); }
.agent__switch { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* ------------------------------------------------------------- footer ---- */
.footer { background: var(--navy-deep); color: var(--on-dark-soft); padding-block: clamp(40px, 5vw, 64px); font-size: 0.875rem; }
.footer__top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); }
.footer__brand img { height: clamp(30px, 3vw, 40px); width: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.footer__legal { margin: 26px 0 0; max-width: 90ch; color: var(--on-dark-soft); font-size: 0.8125rem; line-height: 1.7; }
.footer__legal p { margin: 0 0 10px; }

/* ------------------------------------------------------------- motion ---- */
.js .reveal, .js [data-stagger] > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-stagger] > * { transition-delay: calc(var(--stagger-i, 0) * 50ms); }
.js .reveal.is-visible, .js [data-stagger].is-visible > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js [data-stagger] > * { opacity: 1; transform: none; transition: none; }
  .gal button:hover img, .btn:hover::after { transform: none; }
  .descent__cue::after { animation: none; }
}