/* ============================================================
   Groundwork — design system
   Placeholder brand. Swap colors/logo/copy for the real client.
   ============================================================ */

:root {
  --navy-950: #0a1830;
  --navy-900: #0d1f3d;
  --navy-800: #142c52;
  --navy-700: #1e3a66;
  --gold-500: #b98b4e;
  --gold-400: #d2a86a;
  --gold-100: #f2e6d3;
  --white: #ffffff;
  --offwhite: #f7f5f1;
  --ink: #10182b;
  --muted: #5b6478;
  --line: #e4e1da;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --offwhite: #f7f5f1;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Page-flip scrolling, homepage only (the class is added by JS when the
   hero/chooser sections exist). Restricted to touch devices: there,
   native swipe + CSS snap already flips pages nicely. On desktop the JS
   drives the animation instead, and leaving snap on would fight it —
   the browser re-settles the position after the script has landed it. */
@media (hover: none), (pointer: coarse) {
  html.snap-page {
    /* Proximity, not mandatory. Mandatory forces the page to rest on a
       snap point at all times, which breaks in two ways here: the footer
       has no snap point of its own, so scrolling to the bottom got yanked
       back to the chooser; and the chooser is taller than a phone
       viewport (~960px against ~660px), so the bottom of it could never
       be scrolled to either. Proximity keeps the page-flip feel on a
       decisive swipe without ever trapping content off-screen. */
    scroll-snap-type: y proximity;
  }
}

/* ---------- Logo intro (zoom through the letters) ----------
   A full-screen navy layer with the wordmark cut out as a
   transparent mask. Whatever sits behind (hero video/gradient)
   only shows through the letter shapes. Scaling the layer up
   grows those letter-holes past the viewport edges, so it reads
   as the camera pushing straight through the logo into the site.

   The cutout has to be a real hole: CSS masks read the mask
   image's ALPHA, not its luminance, so black-on-white text masks
   nothing — it's opaque either way. The SVG therefore does its own
   <mask> internally and paints a rect through it, which leaves the
   letters genuinely transparent. 'slice' + cover keeps the navy
   filling the viewport at any aspect ratio without stretching the
   wordmark. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--navy-950);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cmask id='c'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ctext x='50' y='56' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-weight='900' font-size='16' letter-spacing='1.5' fill='black'%3EBUILT%3C/text%3E%3C/mask%3E%3C/defs%3E%3Crect width='100' height='100' fill='white' mask='url(%23c)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cmask id='c'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ctext x='50' y='56' text-anchor='middle' font-family='Arial, Helvetica, sans-serif' font-weight='900' font-size='16' letter-spacing='1.5' fill='black'%3EBUILT%3C/text%3E%3C/mask%3E%3C/defs%3E%3Crect width='100' height='100' fill='white' mask='url(%23c)'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  transform: scale(1);
  cursor: pointer;
}
.intro.zoom {
  transform: scale(16);
  transition: transform 1.5s cubic-bezier(.66, 0, .34, 1);
}
/* Fades while the zoom is still running, so the reveal never parks
   on a flat navy screen when the camera passes between two letters. */
.intro.hide {
  opacity: 0;
  transition: opacity .7s ease;
}
body.intro-active { overflow: hidden; }

/* ---------- Background-video pause control ----------
   Deliberately quiet: the looping footage plays for everyone, including
   visitors who have reduced-motion set, so there has to be a way to stop
   it that doesn't shout at the rest of the design. */
.video-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 250;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(10,24,48,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .2s ease, border-color .2s ease;
  display: grid;
  place-items: center;
}
.video-toggle:hover,
.video-toggle:focus-visible { opacity: 1; border-color: var(--gold-500); }
/* Pause glyph: two bars, drawn with a border so there's no extra markup. */
.video-toggle::before {
  content: "";
  width: 8px;
  height: 10px;
  border-left: 3px solid rgba(255,255,255,0.9);
  border-right: 3px solid rgba(255,255,255,0.9);
}
/* Play glyph: one triangle, nudged right to look optically centred. */
.video-toggle.is-paused::before {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 9px solid rgba(255,255,255,0.9);
  border-right: 0;
  margin-left: 4px;
}
@media (max-width: 600px) {
  .video-toggle { right: 12px; bottom: 12px; width: 30px; height: 30px; }
}
@media print { .video-toggle { display: none; } }

/* ---------- Alert / notice bar ----------
   Sits above the sticky nav in normal document flow. Collapsing
   its max-height (rather than toggling display) is what lets the
   close animate smoothly, with the sticky nav simply following
   along automatically since it's just the next thing in flow. */
.alert-bar {
  background: var(--navy-950);
  overflow: hidden;
  max-height: 60px;
  transition: max-height .45s cubic-bezier(.65, 0, .35, 1), opacity .3s ease .1s;
}
.alert-bar.is-closed {
  max-height: 0;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.65, 0, .35, 1), opacity .2s ease;
}
.alert-bar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 13px 56px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  text-align: center;
}
.alert-bar__inner a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alert-bar__close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .3s ease, color .2s ease;
}
.alert-bar__close:hover {
  color: var(--gold-400);
  transform: translateY(-50%) rotate(90deg);
}

/* ---------- Scroll text reveal (word cascade) ----------
   Each word is wrapped in an overflow-hidden mask with an inner
   span translated below its own baseline; scrolling the heading
   into view slides every word up into place in sequence. */
.tr-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.tr-word-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.text-reveal.is-visible .tr-word-inner {
  transform: translateY(0);
}

/* ---------- Entry gate (persona selector) ---------- */
.gate {
  position: relative;
  overflow: hidden;
  /* Minus the sticky nav: it sits above these sections permanently, so
     a full 100svh section is always taller than the space left to show
     it and gets clipped. */
  min-height: calc(100svh - var(--nav-h, 0px));
  background: radial-gradient(120% 120% at 50% 0%, var(--navy-800) 0%, var(--navy-950) 60%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 64px;
}

/* Full-bleed hero video. The poster carries the visual on its own, so
   phones and save-data connections get the image and never pay for the
   4.7MB download — this site's traffic comes off QR codes on flyers. */
.gate-video,
.gate-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.gate-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gate-video-overlay {
  /* Night footage is already dark, so this stays light — just enough to
     hold the type legible and tie the video to the navy palette. */
  background:
    linear-gradient(180deg,
      rgba(10,24,48,0.45) 0%,
      rgba(10,24,48,0.22) 40%,
      rgba(10,24,48,0.62) 100%);
}
/* Keep the gate's own content above the video layers. */
.gate > *:not(.gate-video):not(.gate-video-overlay):not(.scroll-arrow) {
  position: relative;
  z-index: 1;
}

/* Hero statement + supporting lede */
.gate-statement {
  color: var(--white);
  font-size: clamp(2.2rem, 5.6vw, 4rem);
  max-width: 17ch;
  text-shadow: 0 2px 30px rgba(5, 12, 26, 0.55);
}
.gate-lede {
  margin-top: 26px;
  max-width: 62ch;
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 20px rgba(5, 12, 26, 0.6);
}

/* Down arrow — anchors to the chooser section below */
.gate > .scroll-arrow {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.75);
  transition: color .25s ease;
}
.gate > .scroll-arrow:hover { color: var(--gold-400); }
.scroll-arrow__label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.scroll-arrow__chevron {
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: arrowNudge 2s ease-in-out infinite;
}
@keyframes arrowNudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}

/* Solution section — same footage, heavier scrim since this screen is
   text-and-numbers rather than a single headline. */
.solution {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--nav-h, 0px));
  background: var(--navy-950);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px 64px;
}
/* Same scrim as the hero, so this footage reads just as strongly. It's
   bright daylight rather than a night skyline, so the type below leans
   on its own shadows to stay legible at this lighter setting. */
.solution-overlay {
  background:
    linear-gradient(180deg,
      rgba(10,24,48,0.45) 0%,
      rgba(10,24,48,0.22) 40%,
      rgba(10,24,48,0.62) 100%);
}
.solution-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
}
/* White here too, matching the hero — gold washes out against a bright
   sky at this scrim level. */
.solution .hero-eyebrow {
  color: var(--white);
  font-weight: 500;
  text-shadow: 0 1px 14px rgba(5, 12, 26, 0.85);
}
.solution-statement {
  color: var(--white);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  max-width: 22ch;
  margin: 0 auto;
  text-shadow: 0 2px 10px rgba(5, 12, 26, 0.75), 0 2px 34px rgba(5, 12, 26, 0.6);
}
.solution-lede {
  margin: 24px auto 0;
  max-width: 62ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(5, 12, 26, 0.85);
}
.solution .stat-num {
  text-shadow: 0 2px 14px rgba(5, 12, 26, 0.8);
}
.solution .stat-label {
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 10px rgba(5, 12, 26, 0.85);
}
.stat-row {
  margin-top: 68px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.stat-block {
  padding: 30px 20px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; gap: 6px; }
  .solution { padding-top: 96px; }
}

/* Chooser section — one full screen below the hero */
.gate-choose {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--nav-h, 0px));
  background:
    radial-gradient(120% 120% at 50% 0%, var(--navy-800) 0%, var(--navy-950) 60%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 64px;
}
/* Street-scene backdrop. A pseudo-element rather than a plain
   background-image so the photo and its scrim can be layered without
   touching the markup. */
.gate-choose::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg,
      rgba(10,24,48,0.74) 0%,
      rgba(10,24,48,0.58) 30%,
      rgba(10,24,48,0.88) 58%,
      rgba(10,24,48,0.93) 100%),
    url("../assets/img/chooser-bg.jpg");
  background-size: cover, cover;
  background-position: center, center;
}
.gate-choose > * {
  position: relative;
  z-index: 1;
}
.gate-choose h2 {
  color: var(--white);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  max-width: 18ch;
  margin-top: 6px;
}
.gate-choose__lede {
  margin-top: 18px;
  max-width: 46ch;
  color: rgba(255,255,255,0.68);
  font-size: 1.05rem;
}

/* Snap points: one scroll commits to the next full section. The hero's
   scroll-margin is set from JS to its own offset, so it snaps to a true
   zero scroll position instead of yanking the alert bar out of view.
   The footer is a snap point too — without one, mandatory snapping
   would refuse to let the page rest down there at all. */
@media (hover: none), (pointer: coarse) {
  /* Same reasoning as the desktop flip targets: offset by the nav so a
     snapped section sits below it instead of partly behind it. */
  html.snap-page .gate,
  html.snap-page .solution,
  html.snap-page .gate-choose {
    scroll-snap-align: start;
    scroll-margin-top: var(--nav-h, 0px);
  }
  /* The footer aligns to the BOTTOM of the viewport. Aligning it to the
     top would ask the page to scroll further than it can (the footer
     starts below the maximum scroll offset), leaving it unreachable —
     which is the state this section was previously in. */
  html.snap-page .footer {
    scroll-snap-align: end;
  }
  /* A section taller than the viewport must never become a hard stop, or
     its lower half is unreachable. */
  html.snap-page .gate,
  html.snap-page .solution,
  html.snap-page .gate-choose,
  html.snap-page .footer {
    scroll-snap-stop: normal;
  }
}
/* White rather than gold here — the gold tone gets lost against the
   lit windows in the video behind it. */
.gate .hero-eyebrow {
  margin-bottom: 22px;
  color: var(--white);
  font-weight: 500;
  text-shadow: 0 1px 16px rgba(5, 12, 26, 0.75);
}
.gate h1 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.4rem);
  max-width: 18ch;
}
.gate > p {
  margin-top: 20px;
  color: rgba(255,255,255,0.68);
  max-width: 46ch;
  font-size: 1.05rem;
}
.gate-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  width: 100%;
  max-width: var(--container);
}
/* No panel, no border box. Boxed cards over a busy street photo read as
   cluttered stripes, with the scene showing through every gap. A rule
   above each column does the separating instead — same treatment as the
   stat blocks a section earlier. */
.gate-card {
  border-top: 1px solid rgba(255,255,255,0.28);
  padding: 26px 4px 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s ease, border-color .35s ease;
  text-shadow: 0 1px 14px rgba(5, 12, 26, 0.9);
}
.gate-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
}
.gate-card h3 { color: var(--white); font-size: 1.3rem; }
.gate-card p { color: rgba(255,255,255,0.65); font-size: 0.92rem; }
.gate-card__cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.gate-skip {
  margin-top: 44px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.gate-skip:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }

@media (max-width: 860px) {
  .gate-grid { grid-template-columns: 1fr; }
}

/* ---------- Persona form pages ---------- */
.form-hero {
  background: var(--navy-950);
  color: var(--white);
  padding: 110px 0 70px;
  text-align: center;
}
.form-hero h1 { color: var(--white); font-size: clamp(2rem, 4.4vw, 3rem); }
.form-hero p { max-width: 50ch; margin: 18px auto 0; color: rgba(255,255,255,0.68); }

.form-followup {
  display: none;
  text-align: center;
  padding: 50px 40px;
  border: 1px solid var(--line);
  background: var(--white);
}
.form-followup.is-visible { display: block; }
.form-followup h3 { margin-bottom: 14px; font-size: 1.4rem; }
.form-followup p { max-width: 42ch; margin: 0 auto 28px; }

/* ---------- Custom cursor ---------- */
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button {
  cursor: none;
}
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--white);
  transition: transform .05s linear;
}
.cursor-ring {
  width: 34px; height: 34px;
  margin-left: -17px;
  margin-top: -17px;
  border: 1px solid var(--white);
  transition: width .25s ease, height .25s ease, margin .25s ease, opacity .25s ease, border-color .25s ease;
}
.cursor-active .cursor-ring {
  width: 56px; height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border-color: var(--gold-400);
}
.cursor-active .cursor-dot { opacity: 0; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  color: var(--navy-950);
}
p { margin: 0; line-height: 1.65; color: var(--muted); }

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

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 300;
  /* Grid, not space-between: with three items of unequal width the
     middle one centers in the leftover space rather than the viewport,
     which pushed the CTA off-centre by half the logo/toggle difference.
     A 1fr auto 1fr track centres it regardless of the sides. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 40px;
  background: var(--navy-950);
  /* Only box-shadow animates. Transitioning padding would relayout the
     page on every frame, and that fires exactly as a page flip starts —
     it was the main source of the stutter. Height stays constant now. */
  transition: box-shadow .35s ease;
}
.nav.is-scrolled {
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.nav-logo {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}
.nav-logo__icon {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}
.nav-cta {
  justify-self: center;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 20px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  transition: all .2s ease;
}
.nav-cta:hover { background: var(--gold-500); border-color: var(--gold-500); }

/* Phone nav. At 390px the desktop sizing overruns the bar and the logo and
   CTA print on top of each other, so everything tightens up. The CTA stays
   — most traffic arrives here by QR code from a flyer, so the primary
   action has to be reachable without opening the drawer first. */
@media (max-width: 600px) {
  .nav { padding: 14px 16px; gap: 8px; }
  .nav-logo { font-size: 1.05rem; gap: 7px; }
  .nav-logo__icon { height: 24px; }
  .nav-cta {
    padding: 8px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  /* Nothing left to trim: drop the wordmark and keep the icon. */
  .nav-logo { font-size: 0; }
}

/* Hamburger icon: three bars that morph into an X. This is the
   site's only nav trigger at every viewport width — there's no
   separate always-visible desktop link row. */
.nav-toggle {
  display: block;
  justify-self: end;
  position: relative;
  width: 26px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle__bar {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--white);
  transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .2s ease, top .35s cubic-bezier(.65,0,.35,1);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 7px; }
.nav-toggle__bar:nth-child(3) { top: 14px; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Left-side sliding nav drawer, matching the reference site: a
   panel over roughly a third of the screen, background dimmed but
   still visible behind it, left-aligned uppercase link list that
   staggers in bottom-to-top with a slight diagonal settle. */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(5, 12, 26, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.menu-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease;
}

.mobile-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(440px, 86vw);
  z-index: 250;
  background: var(--navy-950);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 48px;
  box-shadow: 40px 0 90px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease;
}
.mobile-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.mobile-menu__links a {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translate(26px, 16px);
  transition: opacity .6s cubic-bezier(.4,0,1,1), transform .6s cubic-bezier(.4,0,1,1);
}
.mobile-menu.is-open .mobile-menu__links a {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.mobile-menu__divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 34px 0;
}
.mobile-menu__cta {
  align-self: flex-start;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: none;
  opacity: 0;
  transform: translate(26px, 16px);
  transition: opacity .6s cubic-bezier(.4,0,1,1), transform .6s cubic-bezier(.4,0,1,1), background .2s ease, border-color .2s ease;
}
.mobile-menu.is-open .mobile-menu__cta {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1), background .2s ease, border-color .2s ease;
}
.mobile-menu__cta:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
}
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  background: radial-gradient(120% 120% at 50% 0%, var(--navy-800) 0%, var(--navy-950) 60%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 24px 80px;
  position: relative;
  overflow: hidden;
}
/* Bow River / Centre Street Bridge backdrop. The old faint grid texture
   is gone — a grid laid over a photograph just reads as noise. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg,
      rgba(10,24,48,0.72) 0%,
      rgba(10,24,48,0.52) 38%,
      rgba(10,24,48,0.82) 100%),
    url("../assets/img/explore-hero.jpg");
  background-size: cover, cover;
  background-position: center, center;
  pointer-events: none;
}
.hero > * {
  position: relative;
  z-index: 1;
}
.hero h1,
.hero .hero-eyebrow {
  text-shadow: 0 2px 22px rgba(5, 12, 26, 0.7);
}
.hero > p {
  text-shadow: 0 1px 16px rgba(5, 12, 26, 0.8);
}
.hero-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 26px;
  opacity: 0;
  animation: rise .8s ease forwards .1s;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--white);
  max-width: 16ch;
  opacity: 0;
  animation: rise .9s ease forwards .25s;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-400);
}
.hero p {
  margin-top: 26px;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.72);
  max-width: 44ch;
  opacity: 0;
  animation: rise .9s ease forwards .4s;
}
.hero-actions {
  margin-top: 44px;
  display: flex;
  gap: 18px;
  opacity: 0;
  animation: rise .9s ease forwards .55s;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-102%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}
.btn:hover::before { transform: translateX(0); }
.btn-gold { background: var(--gold-500); color: var(--white); }
.btn-gold::before { background: var(--gold-400); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,0.35); color: var(--white); }
.btn-ghost::before { background: rgba(255,255,255,0.12); }
.btn-ghost:hover { border-color: var(--white); }
.btn-navy { background: var(--navy-950); color: var(--white); }
.btn-navy::before { background: var(--navy-800); }
.btn-navy:hover { transform: translateY(-2px); }

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 40px;
  background: linear-gradient(rgba(255,255,255,0.6), transparent);
  animation: scrollpulse 1.8s ease infinite;
}
@keyframes scrollpulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Section basics ---------- */
.section {
  padding: 130px 0;
}
.section-tight { padding: 90px 0; }
.section-dark {
  background: var(--navy-950);
  color: var(--white);
}
.section-dark p { color: rgba(255,255,255,0.65); }
.section-dark h2, .section-dark h3 { color: var(--white); }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 18px;
  display: block;
}

/* ---------- Step sections (the "step by step" narrative) ---------- */
.step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 48px;
  align-items: start;
  padding: 70px 0;
  border-top: 1px solid var(--line);
}
.step:first-of-type { border-top: none; }
.step-number {
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--gold-500);
  line-height: 1;
}
.step-content h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 18px;
  max-width: 20ch;
}
.step-content p {
  max-width: 56ch;
  font-size: 1.05rem;
}
@media (max-width: 720px) {
  .step { grid-template-columns: 1fr; gap: 16px; }
  .step-number { font-size: 2.6rem; }
}

/* ---------- Expandable step rows ----------
   Full-width bars stacked vertically: image backdrop, title left,
   chevron right. Clicking one opens its copy; one open at a time. */
.step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.step-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--navy-900);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* Height is set in px by JS so it can actually animate. Because each
     card's ratio matches its image, "cover" lands on the whole photo at
     the open height — no contain swap, so nothing pops mid-roll. */
  min-height: 190px;
  transition: min-height .55s cubic-bezier(.16,1,.3,1);
}
/* Scrim over the photo, deepening while open so the body copy reads. */
.step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(10,24,48,0.78) 0%,
      rgba(10,24,48,0.46) 42%,
      rgba(10,24,48,0.22) 100%);
  transition: background .45s ease;
}
.step-card.is-open::before {
  background:
    linear-gradient(90deg,
      rgba(10,24,48,0.88) 0%,
      rgba(10,24,48,0.68) 45%,
      rgba(10,24,48,0.44) 100%);
}

.step-card__toggle {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  /* Tall enough to actually show the photograph rather than a sliver of
     it; the title centres itself in that band. */
  min-height: 190px;
  padding: 22px 30px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  font: inherit;
}
.step-card__num {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--gold-400);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.step-card__title {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(5,12,26,0.85);
}
/* Chevron that flips when the row opens. */
.step-card__icon {
  margin-left: auto;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.step-card.is-open .step-card__icon {
  transform: rotate(225deg) translate(-2px, -2px);
}

.step-card__body {
  padding: 0 30px;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1),
              opacity .35s ease,
              padding-bottom .45s ease;
}
.step-card.is-open .step-card__body {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 30px;
}
/* grid-template-rows 0fr -> 1fr animates height without a fixed max. */
.step-card__body > * { min-height: 0; }
.step-card__body p {
  max-width: 62ch;
  color: rgba(255,255,255,0.9);
  font-size: 0.97rem;
  text-shadow: 0 1px 12px rgba(5,12,26,0.85);
  overflow: hidden;
}
.step-card__link {
  display: inline-block;
  /* Grid items stretch by default, which ran the underline the whole
     width of the row instead of just under the words. */
  justify-self: start;
  margin-top: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-400);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.step-card__link:hover { color: var(--white); }

@media (max-width: 860px) {
  .step-card__toggle { min-height: 140px; padding: 20px 22px; gap: 14px; }
  .step-card__title { font-size: 1.1rem; }
  .step-card__body { padding: 0 22px; }
  .step-card.is-open .step-card__body { padding-bottom: 24px; }
}

/* ---------- Stats ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
}
.stat {
  background: var(--navy-950);
  padding: 46px 30px;
  text-align: center;
  transition: background .3s ease, transform .3s ease;
}
.stat:hover {
  background: var(--navy-900);
  transform: translateY(-4px);
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--gold-400);
}
.stat-label {
  margin-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Map / locations ---------- */
.map-wrap {
  position: relative;
  height: 460px;
  background: var(--navy-900);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  z-index: 0; /* keep Leaflet's panes under the sticky nav */
}

/* Leaflet overrides — the default chrome is light and fights the section */
.map-wrap .leaflet-container {
  height: 100%;
  width: 100%;
  background: var(--navy-900);
  font-family: var(--sans);
}
.map-marker__dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 0 rgba(210,168,106,0.6);
  animation: pulse 2.4s ease infinite;
}
.map-wrap .leaflet-popup-content-wrapper,
.map-wrap .leaflet-popup-tip {
  background: var(--navy-950);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}
.map-wrap .leaflet-popup-content {
  margin: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.map-wrap .leaflet-popup-content strong { color: var(--gold-400); }
.map-wrap .leaflet-popup-close-button { color: rgba(255,255,255,0.6) !important; }
.map-wrap .leaflet-control-zoom a {
  background: var(--navy-950);
  color: var(--white);
  border-color: rgba(255,255,255,0.14);
}
.map-wrap .leaflet-control-zoom a:hover { background: var(--navy-800); }
.map-wrap .leaflet-control-attribution {
  background: rgba(10,24,48,0.8);
  color: rgba(255,255,255,0.55);
  font-size: 0.65rem;
}
.map-wrap .leaflet-control-attribution a { color: var(--gold-400); }
.map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}
.map-pin .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 0 rgba(210,168,106,0.6);
  animation: pulse 2.4s ease infinite;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.map-pin:hover .dot { transform: scale(1.6); }
.map-pin:nth-child(2n) .dot { animation-delay: .6s; }
.map-pin:nth-child(3n) .dot { animation-delay: 1.1s; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(210,168,106,0.55); }
  70% { box-shadow: 0 0 0 16px rgba(210,168,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(210,168,106,0); }
}
.map-tooltip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--white);
  color: var(--navy-950);
  padding: 8px 14px;
  font-size: 0.78rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, bottom .2s ease;
}
.map-pin:hover .map-tooltip { opacity: 1; bottom: 24px; }
.map-tooltip strong { color: var(--gold-500); }

.locations-list {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.08);
}
.location-item {
  background: var(--navy-950);
  padding: 18px 20px;
  transition: background .3s ease, transform .3s ease;
}
.location-item:hover {
  background: var(--navy-900);
  transform: translateY(-3px);
}
.location-item .city { color: var(--white); font-size: 0.95rem; }
.location-item .figure { color: var(--gold-400); font-size: 0.8rem; margin-top: 4px; }

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.testimonial-card:hover { box-shadow: 0 24px 48px rgba(10,24,48,0.12); }
.testimonial-card .quote-mark {
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--gold-500);
  line-height: 1;
}
.testimonial-card p.quote {
  color: var(--ink);
  font-size: 1rem;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-400), var(--navy-700));
  flex-shrink: 0;
}
.testimonial-author .name { font-weight: 600; font-size: 0.9rem; color: var(--navy-950); }
.testimonial-author .role { font-size: 0.8rem; color: var(--muted); }

@media (max-width: 960px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ---------- Cards / grid (services / process pages) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 38px 32px;
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.card:hover { box-shadow: 0 24px 48px rgba(10,24,48,0.12); }
.card .icon {
  width: 44px; height: 44px;
  border: 1px solid var(--gold-500);
  margin-bottom: 24px;
  position: relative;
}
.card .icon::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--gold-500);
}
.card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.card p { font-size: 0.95rem; }

@media (max-width: 960px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--navy-950);
  color: var(--white);
  padding: 100px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); max-width: 24ch; margin: 0 auto 28px; }
.cta-band .btn-row { display: flex; gap: 18px; justify-content: center; margin-top: 36px; }

/* Photo-backed CTA band. Scoped with a modifier so the plain navy CTAs
   on Explore and About are untouched. */
.cta-band--image {
  position: relative;
  overflow: hidden;
}
.cta-band--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg,
      rgba(10,24,48,0.78) 0%,
      rgba(10,24,48,0.66) 45%,
      rgba(10,24,48,0.88) 100%),
    url("../assets/img/chooser-bg.jpg");
  background-size: cover, cover;
  background-position: center, center;
}
.cta-band--image > * {
  position: relative;
  z-index: 1;
}
.cta-band--image h2,
.cta-band--image .eyebrow,
.cta-band--image p {
  text-shadow: 0 2px 18px rgba(5,12,26,0.85);
}
/* The muted body colour that reads fine on flat navy disappears against a
   busy photo, so the supporting line goes near-white here. */
.cta-band--image p {
  color: rgba(255,255,255,0.92);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-950);
  color: rgba(255,255,255,0.6);
  padding: 70px 0 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p { max-width: 34ch; font-size: 0.9rem; }
.footer h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer a {
  position: relative;
  display: inline-block;
  font-size: 0.9rem;
  transition: color .2s ease;
}
.footer a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.footer a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer a:hover { color: var(--white); }
.footer-bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background: var(--navy-950);
  color: var(--white);
  padding: 110px 0 90px;
  text-align: center;
}

/* Video-backed variant — scoped with a modifier so the plain page heroes
   on About and Contact are untouched. */
.page-hero--video {
  position: relative;
  overflow: hidden;
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 24px;
}
.page-hero--video > *:not(.gate-video):not(.gate-video-overlay) {
  position: relative;
  z-index: 1;
}
/* Bright daylight footage, so this carries more weight than the hero's
   night-skyline scrim does. */
.page-hero__overlay {
  background:
    linear-gradient(180deg,
      rgba(10,24,48,0.72) 0%,
      rgba(10,24,48,0.56) 45%,
      rgba(10,24,48,0.80) 100%);
}
.page-hero--video h1,
.page-hero--video .eyebrow {
  text-shadow: 0 2px 20px rgba(5,12,26,0.75);
}
.page-hero--video p {
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 14px rgba(5,12,26,0.85);
}
.page-hero h1 { color: var(--white); font-size: clamp(2rem, 5vw, 3.2rem); }
.page-hero p { max-width: 50ch; margin: 20px auto 0; color: rgba(255,255,255,0.68); }

/* Image-backed page hero (About). Shares the video variant's layout,
   just with a still behind it. */
.page-hero--image {
  position: relative;
  overflow: hidden;
  min-height: 56svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 24px;
  background-size: cover;
  background-position: center;
}
.page-hero--image > *:not(.gate-video-overlay) {
  position: relative;
  z-index: 1;
}
.page-hero--image h1,
.page-hero--image .eyebrow {
  text-shadow: 0 2px 20px rgba(5,12,26,0.8);
}
.page-hero--image p {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 14px rgba(5,12,26,0.85);
}

/* ---------- Beliefs (About) ----------
   Street-scene backdrop with the copy in plain columns — no panels, same
   treatment as the chooser on the homepage. */
.beliefs {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  color: var(--white);
}
.beliefs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg,
      rgba(10,24,48,0.76) 0%,
      rgba(10,24,48,0.62) 32%,
      rgba(10,24,48,0.90) 62%,
      rgba(10,24,48,0.94) 100%),
    url("../assets/img/chooser-bg.jpg");
  background-size: cover, cover;
  background-position: center, center;
}
.beliefs > * {
  position: relative;
  z-index: 1;
}
.beliefs .eyebrow { color: var(--gold-400); }
.belief-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.belief {
  border-top: 1px solid rgba(255,255,255,0.28);
  padding-top: 26px;
  text-shadow: 0 1px 14px rgba(5,12,26,0.9);
}
.belief h3 {
  color: var(--white);
  font-size: 1.25rem;
  margin-bottom: 12px;
}
.belief p {
  color: rgba(255,255,255,0.86);
  font-size: 0.95rem;
}
@media (max-width: 860px) {
  .belief-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Two column ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.split .media {
  /* Was 4/5 portrait while this held a placeholder. Now it holds a wide
     skyline aerial, so a taller box would crop most of the city out. */
  aspect-ratio: 3/2;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  position: relative;
  overflow: hidden;
}
.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Contact form ---------- */
.contact-form {
  display: grid;
  gap: 20px;
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--gold-500);
}
@media (max-width: 640px) {
  .contact-form .row { grid-template-columns: 1fr; }
}
/* Inline submit feedback. Only one is ever shown at a time and both stay
   [hidden] until the fetch resolves. */
.form-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  padding-left: 14px;
  border-left: 2px solid currentColor;
}
.form-note--ok { color: var(--gold-500); }
.form-note--err { color: #b3402f; }
.form-note a { color: inherit; text-decoration: underline; }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }

.qr-note {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border: 1px dashed var(--line);
  background: var(--white);
}
.qr-note .qr-box {
  width: 56px; height: 56px;
  background: var(--navy-950);
  flex-shrink: 0;
  position: relative;
}
.qr-note .qr-box::after {
  content: "";
  position: absolute; inset: 8px;
  background-image: linear-gradient(var(--gold-400) 2px, transparent 2px), linear-gradient(90deg, var(--gold-400) 2px, transparent 2px);
  background-size: 8px 8px;
}
.qr-note p { font-size: 0.85rem; }