/* ============================================================
   Simply Red - Summer Funk '27  ·  v2 (indexv2.html only)
   Presale signup. Client: Louder Entertainment.

   DIRECTION
   The client's second artwork set is layered: a dusk sky over the
   London skyline from the park, the band (six duotone strips + Mick)
   as a separate cut-out, and the lineup as a third layer. The flat
   poster only works at one exact registration: the band layer carries
   a baked cloud with a ghost copy of the skyline at its foot.

   So the page does not show the poster. It rebuilds it as a three-deep
   diorama:
     0  the sky plate                       (.scene__sky)
     1  the band, its foot dissolved        (.bill__band)
     2  skyline + tree line, keyed out of   (.scene__fg)
        the SAME plate and laid in front
     4  the lineup                          (.bill__lineup)
     5  the form
   The band therefore stands behind London rather than on top of it,
   and the one piece of motion on the page is it rising up from behind
   the skyline on load.

   ⚠️ The z-order above only holds while .hero and .stage create NO
   stacking context: no z-index, transform, filter or isolation on
   either. Add one and the tree line falls behind the band.

   Sky and foreground register BY CONSTRUCTION: both are painted at
   the same width (--plateW) anchored centre-bottom, and the foreground
   image is the bottom 26.06% (desktop) / 32.02% (mobile) of the same
   plate, keyed. Never size one without the other.

   COLOUR - every value sampled off the supplied layers:
     #00316D  zenith          (sky plate, top rows)
     #0A1F44  dusk navy       (panel, button ink)
     #F96921  stage orange    (the artwork's button) - navy on it 5.15:1;
                              WHITE on it is 3.15:1 and fails, so the
                              label is navy, not the artwork's white
     #FFB27A  peach           (title accent) 9.21:1 on navy
     #C9D3E6  mist            (secondary copy) 10.79:1 on navy
     #D41115  wordmark red    3.0:1 on navy - NEVER carries text
   The six strip colours stay on the step rule.

   TYPE - unchanged from v1 on purpose: Jost (display) + Alte Haas
   (body). Adam pinned Jost on 2026-09-17. The artwork's condensed
   gothic is on the page as the client's own lineup image.
   ============================================================ */

@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/Jost-var.woff2?v=20260908-9") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas";
  src: url("/assets/fonts/altehaas-400.woff2?v=20260908-9") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas";
  src: url("/assets/fonts/altehaas-700.woff2?v=20260908-9") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --zenith:    #00316D;
  --night:     #0A1F44;   /* dusk navy - page ground below the hero, panel */
  --field:     #FFFFFF;   /* form fields - OPAQUE, see the autofill rule */
  --field-ink: #0A1F44;
  --text:      #FFFFFF;
  --mist:      #C9D3E6;   /* secondary copy, 10.79:1 */
  --faint:     #8EA0C2;   /* hints, inactive steps, 6.16:1 */
  --line:      rgba(255,255,255,.18);
  --orange:    #F96921;   /* the one CTA */
  --orange-hi: #FF8546;
  --peach:     #FFB27A;
  --s1: #FF7739;  --s2: #3D8AA4;  --s3: #4CBA49;   /* the six strips, */
  --s4: #DC4749;  --s5: #FFB641;  --s6: #BB5597;   /* in artwork order */
  --danger:   #FF9B8A;    /* 8.0:1 on navy */
  --whatsapp: #25D366;

  --display: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Alte Haas", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* stacked (portrait) geometry - see HERO */
  --bw: min(100vw, 600px);          /* band width; the band is ~square (2697x2656) */
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is only display:none in the UA stylesheet, so ANY
   author rule that sets display beats it. Keep this ABOVE everything that
   sets display, and never remove it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--night);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--mist);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ============================================================
   HERO - stacked layout (portrait phones, tablets, square windows)
   The diorama lives inside the hero and scrolls away with it; no
   fixed layers on phones (iOS repaints fixed backgrounds badly and
   the URL bar resizes them).

   Geometry, all from the mobile plate (1080x1727, so its height is
   1.599x its width): the tree line sits 24.7% up from the plate's
   foot = 0.395 x width. The band's dissolved foot is put at 0.375 x
   width, just under the tree line, so it disappears behind London.
   The lineup overhangs the band's foot by 0.2573 x band width (its
   measured offset in the client's main_artwork_with_lineup), which is
   why the padding subtracts it: the padding follows the lineup in flow.
   ============================================================ */
.hero {
  position: relative;               /* NO z-index: see the header note */
  overflow: hidden;
  padding: 5vw 0 calc(37.5vw - var(--bw) * .2573);
}

.scene__sky,
.scene__fg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
.scene__sky {
  top: 0;
  z-index: 0;
  background-color: var(--zenith);
  background-image: url("/assets/images/v2/sky-mobile-1080.webp?v=20260922-1");
}
.scene__fg {
  z-index: 2;
  height: 51.2vw;                   /* 32.02% of a plate 1.599x its width */
  background-image: url("/assets/images/v2/fg-mobile-1080.webp?v=20260922-1");
}
@media (min-width: 601px) {
  .scene__sky { background-image: url("/assets/images/v2/sky-mobile-1600.webp?v=20260922-1"); }
  .scene__fg  { background-image: url("/assets/images/v2/fg-mobile-1600.webp?v=20260922-1"); }
}

/* Night falls below the park: the tree line fades into the page ground so
   the form sits on clean navy, not on foliage. Above the fg, below the lineup. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24vw;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,31,68,0) 0%, rgba(10,31,68,.72) 55%, var(--night) 100%);
}

.bill { margin: 0; }

.bill__band {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--bw);
  height: auto;
  margin: 0 auto;
  animation: rise 1.8s cubic-bezier(.18,.72,.22,1) both;
}

/* Lineup box, measured 1:1 in the client's composite: x offset 7.23% and
   width 84.95% of the band, top at 71.91% of the band's height. */
.bill__lineup {
  position: relative;
  z-index: 4;
  display: block;
  width: calc(var(--bw) * .8495);
  height: auto;
  margin: calc(var(--bw) * -.2766) auto 0;
  animation: settle .9s 1.05s cubic-bezier(.2,.7,.2,1) both;
}

/* The single orchestrated moment: the band comes up from behind the skyline.
   Starts under the tree line (.scene__fg covers it), so it reads as rising
   out of London, not as sliding in from nowhere. */
@keyframes rise {
  from { opacity: 0; transform: translateY(20%); }
  25%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  position: relative;
  z-index: 5;                       /* over the hero's fade - .stage is a sibling, not an ancestor */
  flex: 1 0 auto;
  width: 100%;
  margin: -6vw auto 0;
  padding: 0 clamp(18px, 5vw, 44px) clamp(28px, 6vw, 56px);
  display: flex;
  justify-content: center;
}
.stage__inner { width: 100%; max-width: 470px; }

.signup { width: 100%; }

.panel {
  width: 100%;
  position: relative;
  isolation: isolate;               /* keeps the country dropdown above everything */
  animation: riseIn .9s .5s cubic-bezier(.16,.84,.36,1) both;
}
.panel__inner { position: relative; z-index: 1; }

/* --- state machine (app.js flips data-form-state on .panel) --- */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="otp"]     .panel__otp     { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

/* ============================================================
   STEP RULE - carried over from v1, recoloured for night
   ============================================================ */
.spine {
  display: flex;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  gap: 6px;
}
.spine__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .3s ease;
}
.spine__step::before {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color .3s ease;
}
.spine__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spine__n { display: none; }

.panel[data-form-state="idle"]    .spine__step:nth-child(1)::before,
.panel[data-form-state="otp"]     .spine__step:nth-child(-n+2)::before,
.panel[data-form-state="success"] .spine__step::before { background: var(--s1); }
.panel[data-form-state="otp"]     .spine__step:nth-child(2)::before,
.panel[data-form-state="success"] .spine__step:nth-child(2)::before { background: var(--s2); }
.panel[data-form-state="success"] .spine__step:nth-child(3)::before { background: var(--s3); }

.panel[data-form-state="idle"]    .spine__step:nth-child(1),
.panel[data-form-state="otp"]     .spine__step:nth-child(2),
.panel[data-form-state="success"] .spine__step:nth-child(3) { color: var(--text); }

.panel[data-form-state="otp"]     .spine__step:nth-child(1),
.panel[data-form-state="success"] .spine__step:nth-child(1),
.panel[data-form-state="success"] .spine__step:nth-child(2) { color: var(--mist); }

@media (max-width: 400px) {
  .spine__step { font-size: 9px; letter-spacing: .06em; }
}

/* No mobile number = no SMS code. Verify keeps its ORDINARY not-yet-reached
   look (Adam, 2026-09-08: no hiding, no dimming). These restate the BASE
   values only to out-rank the data-form-state rules; `.spine` is in the chain
   for specificity, see v1 style.css. */
.panel[data-form-state][data-otp="off"] .spine .spine__step--verify { color: var(--faint); }
.panel[data-form-state][data-otp="off"] .spine .spine__step--verify::before { background: var(--line); }

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.4vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
.panel__title em { font-style: normal; color: var(--peach); }

.panel__lede {
  margin: 0 0 12px;
  font-size: 15.5px;
  color: var(--mist);
  max-width: 50ch;                  /* keeps Gunnersbury Park on line one, see v1 */
}
.panel__lede--last { margin-bottom: 24px; }
.panel__lede strong { color: var(--text); font-weight: 700; }

.panel__success-note { margin: 0 0 14px; color: var(--peach); font-size: 14.5px; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 14px; }

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

/* White, opaque fields on night: the highest-contrast thing on the page is
   where people type, which is the point for this audience. */
.form__input {
  width: 100%;
  padding: 14px 15px;
  font-family: var(--body);
  font-size: 16px;                  /* 16px minimum or iOS zooms on focus */
  color: var(--field-ink);
  background: var(--field);
  border: 1px solid transparent;
  border-radius: 3px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: #6B7A96; }
.form__input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,105,33,.35);
}
.form__input--otp {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .42em;
  text-align: center;
  text-indent: .42em;
}

/* Chrome ignores background on :-webkit-autofill; an opaque inset shadow is
   the only override, so the fields stay opaque and the value is --field. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
          box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--field-ink) !important;
  caret-color: var(--field-ink);
  transition: background-color 9999s ease-in-out 0s;
}

.form__hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
}

.form__error { margin: 7px 0 0; font-size: 13px; color: var(--danger); }
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none ONLY - off-screen positioning is an autofill target. */
.hp-row { display: none !important; }

.form__row--check { margin: 20px 0 22px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mist);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--orange);
  cursor: pointer;
}
.form__check a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--peach); }

.form__resend {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--mist);
  text-align: center;
}
.form__resend-btn {
  font: inherit;
  color: var(--peach);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--faint); cursor: default; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.8rem, 2.9vw, .92rem);
  letter-spacing: clamp(.08em, .5vw, .15em);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }

/* The artwork's own button orange. Navy label, 5.15:1 - the artwork sets it
   white, which is 3.15:1 and fails for body-size text. */
.btn--primary { color: var(--night); background: var(--orange); }
.btn--primary:hover:not(:disabled) { background: var(--orange-hi); }

.btn--whatsapp {
  color: #06301A;
  background: var(--whatsapp);
  margin-top: 6px;
}
.btn--whatsapp:hover { filter: brightness(1.05); }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook { margin: 20px 0 12px; font-size: 13.5px; color: var(--mist); }
.wa-hook strong { color: var(--text); font-weight: 700; }

/* Accessibility: first-class control under the CTA, filled amber (client,
   2026-09-09). Ink on amber 10.2:1. */
.a11y-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 15px 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.78rem, 2.7vw, .86rem);
  letter-spacing: clamp(.06em, .4vw, .12em);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: var(--night);
  background: var(--s5);
  border: 0;
  border-radius: 3px;
  transition: background-color .18s ease;
}
.a11y-cta:hover { background: #FFC862; }
.a11y-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
.iti__dropdown-content.iti__hide { display: none !important; }
.iti__dropdown-content {
  background: var(--field);
  border: 1px solid #D5DCE8;
  border-radius: 3px;
  box-shadow: 0 26px 56px -22px rgba(0,10,30,.55);
  overflow: hidden;
}
.iti__search-input {
  /* keep the vendor's horizontal padding: it clears the search icon + clear button */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--field-ink);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid #D5DCE8;
}
.iti__search-input::placeholder { color: #6B7A96; }
.iti__search-input:focus { outline: none; background: #F6F8FB; }
.iti__country-list { background: var(--field); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--field-ink);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(249,105,33,.10); }
.iti__dial-code { color: #4A5A78; }
.iti__country-name { color: var(--field-ink); }
.iti__selected-country { border-radius: 3px 0 0 3px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(249,105,33,.08); }
.iti__selected-dial-code { color: var(--field-ink); font-family: var(--body); font-size: 15px; }
.iti__arrow { border-top-color: #4A5A78; }
.iti__arrow--up { border-bottom-color: #4A5A78; }

/* ============================================================
   FOOTER - standard fleet band, night variant
   ============================================================ */
.foot {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 20px clamp(18px, 4vw, 44px) 28px;
  background: rgba(6,18,40,.86);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--mist); letter-spacing: .02em; }
.foot__legal a { color: var(--mist); text-decoration: none; }
.foot__legal a:hover { color: var(--text); }

.foot__links { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--mist);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { border-color: var(--peach); color: var(--text); }
.site-built { margin: 0; }
/* White wordmark drawn for dark bands: this band IS dark, so no filter
   (v1 had to darken it for the light sheet). */
.site-built img { display: block; }

@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left,
  .foot__links { justify-content: center; }
}
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 12px; padding-bottom: 24px; }
  .foot__left { flex-direction: column; align-items: center; gap: 12px; }
  .panel__title { font-size: clamp(1.6rem, 8vw, 2rem); }
}
@media (max-width: 400px) {
  .stage { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   DIORAMA - wide layouts (landscape: desktop, laptop, landscape
   tablet, rotated phone). One gate, no width/orientation gaps:
   anything at least as wide as it is tall and >= 640px is here,
   everything else is the stacked hero above.

   The scene is fixed; only the form column scrolls. The sky is
   painted at --plateW, which is `cover` re-derived as a length
   (plate is 2560x1255, 2.0398:1), so the band can be positioned off
   the plate's REAL horizon: tree line at 16.7% of plate height from
   the foot, band foot at 19% so it dissolves into the skyline.
   ============================================================ */
@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
  :root {
    --plateW: max(100vw, 100vh * 2.0398);
    --plateH: calc(var(--plateW) * .49023);
    --g:      clamp(20px, 3vw, 56px);
    --panelw: min(460px, 44vw);
    --W:      min(100vw, 1480px);
    --off:    calc((100vw - var(--W)) / 2);
    --area:   calc(var(--W) - var(--panelw) - 3 * var(--g));
    --bw:     min(var(--area), 64vh, 760px);
    --bleft:  calc(var(--off) + var(--g) + (var(--area) - var(--bw)) / 2);
    /* Band + lineup CENTRED in the viewport as one figure (Adam, 2026-09-22:
       pinned to the horizon at 19% of plate height it sat too low). The
       figure is 1.2421 x --bw tall (band 0.9848 + lineup overhang 0.2573);
       --bfoot is the band's foot, so the overhang is added back on. */
    --bfoot:  calc((100vh - var(--bw) * 1.2421) / 2 + var(--bw) * .2573);
  }

  .hero { position: static; overflow: visible; padding: 0; }
  .hero::after { display: none; }

  .scene__sky,
  .scene__fg {
    position: fixed;
    background-size: var(--plateW) auto;
  }
  .scene__sky {
    inset: 0;
    background-image: url("/assets/images/v2/sky-desktop-1600.webp?v=20260922-1");
  }
  .scene__fg {
    height: calc(var(--plateH) * .2606);   /* the fg image is the plate's bottom 26.06% */
    background-image: url("/assets/images/v2/fg-desktop-1600.webp?v=20260922-1");
  }

  .bill__band {
    position: fixed;
    left: var(--bleft);
    bottom: var(--bfoot);
    margin: 0;
  }
  .bill__lineup {
    position: fixed;
    left: calc(var(--bleft) + var(--bw) * .0723);
    bottom: calc(var(--bfoot) - var(--bw) * .2573);
    margin: 0;
  }

  .stage {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: clamp(24px, 5vh, 56px) calc(var(--off) + var(--g));
    justify-content: flex-end;
    align-items: center;
  }
  .stage__inner { max-width: var(--panelw); }

  /* Over a photograph the form needs its own ground. One panel, in the sky's
     own navy, blurred so the dusk still reads through its edges. */
  .panel {
    padding: clamp(24px, 3vw, 36px);
    background: rgba(10,31,68,.80);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 4px;
  }
  .panel__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
}
@media (min-width: 640px) and (min-aspect-ratio: 1/1) and (min-width: 1400px),
       (min-width: 640px) and (min-aspect-ratio: 1/1) and (min-height: 760px) {
  .scene__sky { background-image: url("/assets/images/v2/sky-desktop-2560.webp?v=20260922-1"); }
  .scene__fg  { background-image: url("/assets/images/v2/fg-desktop-2560.webp?v=20260922-1"); }
}

/* --- landscape phones are a first-class layout ---
   844x390 etc. Same diorama, the panel compacted so the form fits in
   one or two thumb-scrolls. After the diorama block so it wins. */
@media (min-width: 640px) and (min-aspect-ratio: 1/1) and (max-height: 520px) {
  :root { --panelw: min(400px, 48vw); --bw: min(var(--area), 60vh, 760px); }
  .stage { padding-top: 12px; padding-bottom: 12px; align-items: flex-start; }
  .panel { padding: 16px 18px; }
  .spine { margin-bottom: 12px; }
  .panel__title { font-size: 1.2rem; margin-bottom: 8px; letter-spacing: .07em; }
  .panel__lede { font-size: 13px; margin-bottom: 7px; }
  .panel__lede--last { margin-bottom: 12px; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 12px 0 14px; }
  .btn, .a11y-cta { padding: 12px 16px; }
  .iti__country-list { max-height: 150px; }
}

/* ============================================================
   DEPTH (Adam, 2026-09-22: "the box on the right is too flat")
   Everything else in the scene is lit - the sun is ON THE HORIZON -
   so the panel and buttons take their light from BELOW: warm spill
   up the panel's foot, a cool rim at its head, lit button faces.
   Contrast checked at the DARKEST gradient stop, not the base:
   navy on #E85A1A 4.57:1, navy on #EC9A26 7.13:1.
   ============================================================ */
.panel__title {
  text-shadow:
    0 0 1px rgba(255,255,255,.30),
    0 0 14px rgba(249,105,33,.26),
    0 0 34px rgba(249,105,33,.16),
    0 0 68px rgba(249,105,33,.10);
}
.panel__title em {
  color: #FFC49A;
  text-shadow: 0 0 1px rgba(255,220,190,.5), 0 0 12px rgba(255,178,122,.50), 0 0 30px rgba(249,105,33,.30);
}

.btn--primary {
  background: linear-gradient(180deg, #FF9A5C 0%, var(--orange) 48%, #E85A1A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),      /* lit top lip */
    inset 0 -2px 0 rgba(120,30,0,.35),        /* shaded foot */
    0 10px 26px -8px rgba(249,105,33,.65),    /* bloom */
    0 2px 6px rgba(0,0,0,.35);
  transition: background-color .18s ease, box-shadow .2s ease, transform .12s ease;
}
.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFAA72 0%, var(--orange-hi) 48%, #EF6120 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(120,30,0,.30),
    0 16px 34px -8px rgba(249,105,33,.80),
    0 3px 8px rgba(0,0,0,.35);
}
.btn--primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(120,30,0,.45), 0 4px 12px -6px rgba(249,105,33,.5);
}

.a11y-cta {
  background: linear-gradient(180deg, #FFC862 0%, var(--s5) 50%, #EC9A26 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -2px 0 rgba(120,70,0,.28),
    0 8px 20px -10px rgba(255,182,65,.55),
    0 2px 6px rgba(0,0,0,.30);
  transition: box-shadow .2s ease, transform .12s ease;
}
.a11y-cta:hover {
  background: linear-gradient(180deg, #FFD37F 0%, #FFC455 50%, #F2A532 100%);
  transform: translateY(-1px);
}
.a11y-cta:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(120,70,0,.4); }

@media (min-width: 640px) and (min-aspect-ratio: 1/1) {
  .panel {
    background:
      radial-gradient(120% 55% at 50% 118%, rgba(249,105,33,.30) 0%, rgba(249,105,33,0) 62%),
      linear-gradient(180deg, rgba(6,20,50,.88) 0%, rgba(12,34,76,.80) 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 6px;
    box-shadow:
      0 44px 90px -30px rgba(0,6,22,.80),
      0 14px 30px -14px rgba(0,6,22,.55);
  }
  /* Rim lights as pseudo gradients, brightest at the centre and gone by the
     corners, so they read as light catching the edge, not as a border.
     z-index 0 under .panel__inner (z 1). */
  .panel::before,
  .panel::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    z-index: 0;
    pointer-events: none;
  }
  .panel::before {
    top: -1px;
    background: linear-gradient(90deg, rgba(201,211,230,0), rgba(201,211,230,.55), rgba(201,211,230,0));
  }
  .panel::after {
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,178,122,0), rgba(255,178,122,.95), rgba(255,178,122,0));
    box-shadow: 0 0 18px 2px rgba(249,105,33,.45);
  }
}

/* Louder logo under the panel (Adam, 2026-09-22). */
.presenter {
  margin: 26px 0 0;
  text-align: center;
  animation: riseIn .9s .7s cubic-bezier(.16,.84,.36,1) both;
}
.presenter img {
  display: inline-block;
  width: 68px;
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 2px 10px rgba(0,6,22,.55));   /* holds it off the tree line */
}
@media (min-width: 640px) and (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .presenter { margin-top: 14px; }
  .presenter img { width: 52px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--peach);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}