/* ============================================================
   Passenger · Live at Hove Park · 06 September 2026
   Cinematic coastal editorial — navy sky, mint hut,
   sun-bleached cream card, literary italic voice.
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
@font-face { font-family:"Gobold Lowplus"; src:url("/assets/fonts/gobold-lowplus.woff2")        format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Gobold Lowplus"; src:url("/assets/fonts/gobold-lowplus-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Gobold Lowplus"; src:url("/assets/fonts/gobold-bold.woff2")           format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("/assets/fonts/archivo-v25-latin-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("/assets/fonts/archivo-v25-latin-italic.woff2")  format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("/assets/fonts/archivo-v25-latin-500.woff2")     format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("/assets/fonts/archivo-v25-latin-600.woff2")     format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* --- Tokens (pulled from the artwork itself) --------------- */
:root {
  /* Sky / deepest navy, from the upper reaches of the photograph */
  --ink:        #0A1A2E;
  --navy:       #0F2541;
  --navy-800:   #15304F;

  /* Beach-hut mint + stripe blue — sparse accents, never dominant */
  --mint:       #A7C4B5;
  --mint-soft:  #C7DACD;
  --sea:        #1F4B85;

  /* Sun-bleached paper — the card, the wordmark, the eye */
  --paper:      #F1E9D7;
  --paper-warm: #FBF6EA;
  --paper-ink:  #1A2236;

  /* Supporting greys */
  --fog:        #6D7A92;
  --hair:       rgba(15, 37, 65, 0.18);
  --error:      #B04534;

  --container:  74rem;
  --radius:     12px;

  --font-display: "Gobold Lowplus", "Antonio", "Oswald", Impact, sans-serif;
  --font-display-w: 400;
  --font-body:    "Archivo", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

/* --- Reset / base ----------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video,picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

h1,h2,h3 { margin: 0 0 0.4em; font-weight: 400; line-height: 1.05; }
p { margin: 0 0 1em; }

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================================================
   Hero — the photograph IS the composition.
   Everything else must defer to it.
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--paper);
}

.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Mobile — subject stands at the top of the frame; anchor top. */
  object-position: center top;
}
@media (min-width: 900px) {
  .hero__bg img { object-position: center 40%; }
}

/* Mobile: almost clear at top (subject visible), deepening to navy at bottom
   so the card + wordmark sit on clean ground.  Desktop: old right-hand wash. */
.hero__wash {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg,
      rgba(10,26,46,0.25) 0%,
      rgba(10,26,46,0.05) 18%,
      rgba(10,26,46,0)    32%,
      rgba(10,26,46,0.35) 60%,
      rgba(10,26,46,0.82) 100%);
}
@media (min-width: 900px) {
  .hero__wash {
    background:
      radial-gradient(120% 55% at 50% 0%, rgba(10,26,46,0.45) 0%, rgba(10,26,46,0.10) 55%, transparent 80%),
      linear-gradient(100deg, transparent 0%, transparent 48%, rgba(10,26,46,0.55) 100%),
      linear-gradient(180deg, rgba(10,26,46,0) 0%, rgba(10,26,46,0.35) 100%);
  }
}

/* Subtle film grain, matches the photographic quality of the artwork */
.hero__grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 2.75rem);
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* --- Top kicker -------------------------------------------- */
.hero__mast {
  display: flex; justify-content: center;
  opacity: 0;
  animation: fadeDown 700ms 120ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__kicker {
  margin: 0;
}
.hero__kicker-chip {
  display: inline-block;
  padding: 0.4em 0.9em;
  font-family: var(--font-display); font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent);
  border-radius: 999px;
}

/* --- Wordmark lockup --------------------------------------- */
.hero__lockup {
  align-self: start;
  display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
  opacity: 0; transform: translateY(10px);
  animation: fadeSlideUp 900ms 260ms cubic-bezier(.2,.7,.2,1) forwards;
}

/* Native text lockup — sharp at any size, legible on any photo. */
.wm-title,
.wm-line,
.wm-tag { margin: 0; color: var(--paper); text-align: center; line-height: 1.02; }

.wm-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.6rem, 11vw, 8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(10,26,46,0.35), 0 10px 30px rgba(10,26,46,0.55);
}
.wm-line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(0.95rem, 1.5vw + 0.5rem, 1.4rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.55em;
  color: color-mix(in srgb, var(--paper) 95%, transparent);
  text-shadow: 0 1px 0 rgba(10,26,46,0.45), 0 4px 14px rgba(10,26,46,0.55);
}
.wm-tag {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(0.95rem, 0.5vw + 0.78rem, 1.2rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 0.85em;
  color: var(--paper);
  text-shadow:
    0 1px 0 rgba(10,26,46,0.65),
    0 4px 14px rgba(10,26,46,0.6);
}
.wm-tag::before,
.wm-tag::after {
  content: "✦";
  display: inline-block;
  margin: 0 0.6em;
  font-size: 0.78em;
  color: var(--mint);
  text-shadow: 0 0 6px rgba(167,196,181,0.4);
  vertical-align: 0.08em;
}

/* Narrow phones: the uppercase display lockup runs out of room because
   of its wide letter-spacing, which pushes the ✦ sparkles (and tail of
   the line) onto a second row. Tighten tracking + shrink a touch so
   both lines — and their flourishes — stay on one row. */
@media (max-width: 599px) {
  .wm-line {
    font-size: clamp(0.8rem, 3.2vw, 0.95rem);
    letter-spacing: 0.08em;
  }
  .wm-tag {
    font-size: clamp(0.78rem, 2.8vw, 0.92rem);
    letter-spacing: 0.12em;
  }
  .wm-tag::before,
  .wm-tag::after { margin: 0 0.4em; }
}

/* --- Card (sits below the lockup on mobile, right-centre on desktop) --- */
.hero__card {
  justify-self: center;
  width: min(100%, 30rem);
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 26rem);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .hero__mast   { grid-column: 1 / -1; justify-content: flex-start; }
  .hero__lockup {
    grid-column: 1 / 2;
    align-self: center;
    justify-self: start;     /* shrink lockup to the PASSENGER title width */
    align-items: stretch;    /* secondary lines span that width */
  }
  .hero__lockup .wm-title { text-align: left; }
  .hero__lockup .wm-line,
  .hero__lockup .wm-tag   { text-align: center; }
  .hero__card   { grid-column: 2 / 3; grid-row: 2 / 3; align-self: center; }
  .hero__footer { grid-column: 1 / -1; }
}

/* --- Footer meta line -------------------------------------- */
.hero__footer {
  align-self: end;
  text-align: center;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  opacity: 0;
  animation: fadeUp 700ms 900ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
}
.hero__meta-sep {
  color: var(--mint);
  font-family: var(--font-body); font-style: normal;
  letter-spacing: 0;
  font-size: 0.75em;
}

/* Stack cleanly on mobile / tablet — the stars read as dividers
   only on desktop where everything fits on a single row. */
@media (max-width: 899px) {
  .hero__meta { flex-direction: column; gap: 0.1rem; font-size: 0.92rem; letter-spacing: 0.14em; }
  .hero__meta-sep { display: none; }
}
.hero__meta--small {
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(241, 233, 215, 0.68);
}

/* Accessibility note — quiet editorial aside that sits above the
   address meta. Same italic register as .hero__meta--small but a
   touch wider for readable inline links. Hairline mint divider
   below ties it back to the ✦ separators in the address line. */
.hero__access {
  max-width: 40rem;
  margin: 0 auto clamp(1.1rem, 2.6vw, 1.7rem);
  padding: clamp(0.95rem, 2vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.6rem);
  background: linear-gradient(180deg,
              rgba(15, 37, 65, 0.62),
              rgba(10, 26, 46, 0.72));
  border: 1px solid rgba(167, 196, 181, 0.38);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(241, 233, 215, 0.06) inset,
    0 10px 30px -18px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: rgba(241, 233, 215, 0.94);
  text-wrap: balance;
}
.hero__access-line { margin: 0; }
.hero__access-line + .hero__access-line { margin-top: 0.55rem; }
.hero__access-link {
  color: var(--mint-soft);
  text-decoration: none;
  border-bottom: 1.5px solid var(--mint);
  padding-bottom: 1px;
  font-weight: 500;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.hero__access-link:hover,
.hero__access-link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
@media (max-width: 599px) {
  .hero__access { font-size: 0.9rem; }
}

/* "Website built by Furiosa" credit pill — sibling of .hero, so it
   sits after the 100svh hero on desktop (scroll-only) and at the
   natural end of the already-overflowing content stack on mobile. */
.site-built {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1rem clamp(2rem, 5vw, 3rem);
  display: flex; justify-content: center;
  background: var(--ink);
}
.site-built a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(241, 233, 215, 0.55);
  text-decoration: none;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 200ms, background 200ms, border-color 200ms;
}
.site-built a:hover,
.site-built a:focus-visible {
  color: var(--paper);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  border-color: color-mix(in srgb, var(--mint) 38%, transparent);
  outline: none;
}
.site-built img {
  height: 14px; width: auto;
  display: block;
  opacity: 0.85;
  filter: grayscale(1) brightness(1.5);
  transition: opacity 200ms, filter 200ms;
}
.site-built a:hover img,
.site-built a:focus-visible img {
  opacity: 1;
  filter: none;
}

/* ============================================================
   The Card — a seaside postcard; the paper the light falls on.
   ============================================================ */
.card {
  position: relative;
  background: var(--paper-warm);
  color: var(--paper-ink);
  padding: clamp(1.75rem, 2.5vw + 1rem, 2.6rem) clamp(1.5rem, 2vw + 0.9rem, 2.25rem) clamp(1.5rem, 2vw + 0.9rem, 2.1rem);
  border-radius: var(--radius);
  text-align: left;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 60px -24px rgba(0,0,0,0.55),
    0 2px 0 rgba(10,26,46,0.15);
  opacity: 0; transform: translateY(14px);
  animation: fadeSlideUp 900ms 520ms cubic-bezier(.2,.7,.2,1) forwards;
}

/* Deckle edge — a thin mint rule inside the card, like a printed border */
.card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--mint) 65%, transparent);
  border-radius: 5px;
  pointer-events: none;
}
/* Top tick — two little bars evoking the beach-hut roofline */
.card::after {
  content: "";
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 12px;
  background:
    linear-gradient(90deg, var(--sea) 0 25%, transparent 25% 33%, var(--paper-warm) 33% 67%, transparent 67% 75%, var(--sea) 75% 100%);
  border-radius: 1px;
}

.card__eyebrow {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}
.card__eyebrow-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.25rem; letter-spacing: 0;
  color: var(--sea);
  line-height: 1;
}
.card__eyebrow-lead { font-style: italic; letter-spacing: 0.06em; text-transform: none; font-size: 0.95rem; color: var(--paper-ink); opacity: 0.8; }

.card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 1.4vw + 1rem, 2rem);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.55rem;
  white-space: nowrap;
}
.card__title em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sea);
  margin-left: 0.2em;
  line-height: 1;
}

.card__lede {
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-size: 0.97rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--paper-ink) 80%, transparent);
}

/* --- Form -------------------------------------------------- */
.form { display: grid; gap: 1rem; position: relative; }
.form__honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }

.form__row { display: grid; gap: 0.3rem; }
.form__label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--fog);
  letter-spacing: 0.02em;
}
.form__input {
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  padding: 0.8rem 0.9rem 0.75rem;
  color: var(--paper-ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-bottom: 2px solid var(--navy);
  border-radius: 8px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.form__input::placeholder { color: color-mix(in srgb, var(--fog) 70%, transparent); font-style: italic; }
.form__input:hover { background: #fffef9; }
.form__input:focus {
  outline: none;
  border-color: var(--sea);
  border-bottom-color: var(--sea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 15%, transparent);
}

/* Privacy check */
.form__row--check { gap: 0.4rem; }
.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--paper-ink) 72%, transparent);
  font-family: var(--font-body);
  cursor: pointer;
}
.form__check input[type="checkbox"] {
  appearance: none;
  width: 1.05rem; height: 1.05rem;
  margin-top: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--navy) 55%, transparent);
  border-radius: 1px;
  background: #fff;
  display: grid; place-content: center;
  transition: background 160ms, border-color 160ms;
  cursor: pointer;
  flex: none;
}
.form__check input[type="checkbox"]:checked {
  background: var(--navy);
  border-color: var(--navy);
}
.form__check input[type="checkbox"]:checked::after {
  content: "";
  width: 0.55rem; height: 0.35rem;
  border-left: 2px solid var(--paper-warm);
  border-bottom: 2px solid var(--paper-warm);
  transform: rotate(-45deg) translate(1px, -1px);
}
.form__check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
}
.form__check a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.form__check a:hover { color: var(--sea); }

.form__error {
  margin: 0;
  color: var(--error);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8rem;
}
.form__error--global { margin-top: 0.25rem; }

/* --- CTA — sea-deep, confident, with a tide-line fill --- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.65em;
  padding: 0.95rem 1.4rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.08rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-warm);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 10px;
  overflow: hidden;
  transition: letter-spacing 280ms ease, color 180ms ease, border-color 180ms ease;
  margin-top: 0.4rem;
  isolation: isolate;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sea) 0%, var(--navy-800) 100%);
  transform: translateY(100%);
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
  z-index: -1;
}
.btn::after {
  content: "→";
  font-family: var(--font-body);
  font-style: italic;
  letter-spacing: 0;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.btn:hover,
.btn:focus-visible {
  letter-spacing: 0.18em;
  border-color: var(--sea);
  outline: none;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(5px); }
.btn:active { transform: translateY(1px); }
.btn[disabled] {
  opacity: 0.6; cursor: progress; letter-spacing: 0.14em;
}
.btn[disabled]::after { display: none; }
.btn[disabled]::before { transform: translateY(100%); }

/* --- Card state machine ----------------------------------- */
/* idle → form visible; otp → OTP panel; success → thank you */
.card[data-form-state="otp"]     > .card__title,
.card[data-form-state="otp"]     > .card__lede,
.card[data-form-state="otp"]     > #signup-form,
.card[data-form-state="success"] > .card__title,
.card[data-form-state="success"] > .card__lede,
.card[data-form-state="success"] > #signup-form,
.card[data-form-state="success"] .card__otp { display: none; }

.card[data-form-state="otp"]     .card__otp     { display: block; animation: fadeUp 500ms cubic-bezier(.2,.7,.2,1) both; }
.card[data-form-state="success"] .card__success { display: block; animation: fadeUp 600ms cubic-bezier(.2,.7,.2,1) both; }

/* --- OTP panel -------------------------------------------- */
.form__input--otp {
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  padding-left: 0.5em; /* compensate for tracking */
  color: var(--navy);
}
.form__input--otp::placeholder {
  letter-spacing: 0.5em;
  font-style: normal;
  color: color-mix(in srgb, var(--fog) 40%, transparent);
}

.form__resend {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--paper-ink) 70%, transparent);
  text-align: center;
}
.form__resend-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  cursor: pointer;
}
.form__resend-btn:hover { color: var(--sea); }
.form__resend-btn[disabled] { opacity: 0.5; cursor: default; text-decoration: none; }

.card__success h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 1.4vw + 1rem, 2rem);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.4rem;
  white-space: nowrap;
}
.card__success h2 em {
  font-family: var(--font-body);
  font-style: italic; font-weight: 400;
  font-size: 0.78em; letter-spacing: -0.01em;
  text-transform: none; color: var(--sea);
}
.card__success p {
  color: color-mix(in srgb, var(--paper-ink) 78%, transparent);
  font-size: 0.95rem;
}

/* --- WhatsApp CTA (success state) ------------------------ */
.btn--whatsapp {
  width: 100%;
  margin-top: 0.5rem;
  background: #1FA855;
  border-color: rgba(0, 0, 0, 0.08);
  color: #FFFFFF;
}
.btn--whatsapp::before {
  background: linear-gradient(180deg, #25D366 0%, #128C7E 100%);
}
.btn--whatsapp::after { content: none; }
.btn--whatsapp:hover,
.btn--whatsapp:focus-visible {
  border-color: #128C7E;
}
.btn__icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
}

/* --- Tickets CTA — full-width, horizontal tide-sweep on hover --- */
.btn--tickets {
  display: flex;
  width: 100%;
  padding: 1.15rem 1.6rem;
  font-size: 1.18rem;
  letter-spacing: 0.18em;
  margin-top: 0.75rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--navy) 35%, transparent);
  transition: letter-spacing 320ms ease,
              color 200ms ease,
              border-color 200ms ease,
              transform 240ms cubic-bezier(.2,.7,.2,1),
              box-shadow 260ms ease;
}
.btn--tickets::before {
  background: linear-gradient(90deg,
    var(--sea) 0%,
    var(--navy-800) 55%,
    var(--navy) 100%);
  transform: translateX(-101%);
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}
.btn--tickets:hover::before,
.btn--tickets:focus-visible::before {
  transform: translateX(0);
}
.btn--tickets:hover,
.btn--tickets:focus-visible {
  letter-spacing: 0.22em;
  border-color: var(--sea);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--navy) 70%, transparent),
              0 1px 0 var(--navy);
}
.btn--tickets:hover::after,
.btn--tickets:focus-visible::after {
  transform: translateX(8px);
}
.btn--tickets:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--navy) 35%, transparent);
}

/* --- intl-tel-input skin --------------------------------- */
.iti { width: 100%; }
.iti__selected-flag {
  background: transparent;
  border-right: 1px solid var(--hair);
  padding-left: 10px;
}
.iti__selected-flag:hover,
.iti.iti--container:focus-within .iti__selected-flag,
.iti input.form__input:focus + .iti__flag-container .iti__selected-flag {
  background: color-mix(in srgb, var(--mint) 18%, transparent);
}
.iti input.form__input { padding-left: calc(52px + 0.6rem); }
.iti__country-list {
  font-family: var(--font-body);
  color: var(--paper-ink);
  border-radius: 8px;
  border: 1px solid var(--hair);
}

/* ============================================================
   Keyframes + motion preferences
   ============================================================ */
@keyframes fadeUp       { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown     { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideUp  { to   { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero__mast,
  .hero__lockup,
  .hero__footer,
  .card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .btn:hover,
  .btn:focus-visible { letter-spacing: 0.14em; }
  .btn:hover::after,
  .btn:focus-visible::after { transform: none; }
  .btn--tickets,
  .btn--tickets::before,
  .btn--tickets::after { transition-duration: 1ms !important; }
  .btn--tickets:hover,
  .btn--tickets:focus-visible { transform: none; letter-spacing: 0.18em; }
}

/* ============================================================
   Small-screen polish
   ============================================================ */
/* ============================================================
   Mobile layout — subject sits at the TOP of the photograph,
   wordmark + card ride the staircase in the bottom half.

   Reserve ≥ 48svh for the subject/photo area so the wordmark
   never creeps up into his face.
   ============================================================ */
@media (max-width: 899px) {
  .hero__inner {
    grid-template-rows: auto minmax(48svh, 1fr) auto auto;
    gap: clamp(0.85rem, 2vw, 1.25rem);
  }
  .hero__lockup {
    align-self: end;
    padding: 1.1rem 1.25rem 1.2rem;
    align-items: center;
    /* Dark glass panel so the lockup reads on any photo detail
       (stripes, stairs, concrete). Photo shows through via blur. */
    background: color-mix(in srgb, var(--ink) 58%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,0.45);
  }
  .hero__lockup .wm-title,
  .hero__lockup .wm-line,
  .hero__lockup .wm-tag { text-align: center; }
  /* Panel handles contrast — lighten the text shadows so they
     don't muddy the glass effect. */
  .hero__lockup .wm-title { text-shadow: 0 1px 0 rgba(10,26,46,0.35); }
  .hero__lockup .wm-line,
  .hero__lockup .wm-tag   { text-shadow: none; }
  /* Stronger card read against the bright staircase / stripes */
  .card {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.08) inset,
      0 24px 48px -16px rgba(0,0,0,0.55),
      0 6px 18px -6px rgba(10,26,46,0.35),
      0 2px 0 rgba(10,26,46,0.18);
  }
}

@media (max-width: 540px) {
  .card { padding: 1.5rem 1.25rem 1.4rem; }
  .hero__inner { grid-template-rows: auto minmax(44svh, 1fr) auto auto; }
}