/* ============================================================
   WORRIED ABOUT HENRY - Document, Bristol - Sat 5 Dec 2026
   Pre-sale signup page.

   Visual language derived from the supplied artwork: a huge
   translucent glass plate carrying the WAH face, engraved into
   it, lit from behind by a cold flare in a dust-flecked void.
   Cryogenic, not warm.

   Layout (Adam, 2026-07-27): the standard fleet arrangement -
   the client's FULL poster shown whole on the left, sign-up
   panel on the right, over a blurred and darkened copy of the
   same scene. The poster carries every announced fact, the
   worriedabouthenry.com pill and the partner lockup, so none of
   those are rebuilt in markup and nothing can drift from the
   artwork.

   Signature: the INTAGLIO GROOVE. Every rule and edge in the UI
   is drawn the way the face is cut into the plate - a dark cut
   above, an ice highlight catching light below. Inputs are
   etched channels, not boxes. Used on eyebrow hairlines, input
   baselines, panel edge, dropdown, app-CTA divider and footer
   rule, and nowhere as decoration.

   No backdrop-blur on the panel - rejected by this client on
   wah-cardiff. Legibility comes from its own opaque ground. The
   background IS blurred here, which is the opposite case: it is
   supporting the poster rather than being the hero itself, the
   same treatment the client signed off on the Drumsheds build.
   ============================================================ */

/* Anton (OFL) - the WAH display face, shared with wah.london,
   wah-cardiff and the Drumsheds build. Brand consistency, not a
   fresh pick. */
@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/Anton-400.woff2?v=20260727-12") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Barlow (OFL) - body, labels, and the wide-tracked "readout" role
   that echoes the poster's own 21:00 - 03:00 caption type */
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-400.woff2?v=20260727-12") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-500.woff2?v=20260727-12") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-600.woff2?v=20260727-12") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/fonts/Barlow-700.woff2?v=20260727-12") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Every value sampled from the client artwork, none invented. */
  --ice:       #549EA6;                    /* DOCUMENT/BRISTOL pill outlines + the sparkle glyph */
  --ice-hi:    #8FCED6;                    /* the flare catching the plate rim */
  --ice-deep:  #2E6B73;
  --ice-line:  rgba(84, 158, 166, 0.44);
  --bone:      #CFCBC7;                    /* the client's own wordmark grey - warm bone, not white */
  --frost:     #EDF3F4;                    /* cool near-white, titles only */
  --void:      #0D1416;                    /* the artwork's own edge pixel - seams are invisible */
  --muted:     rgba(207, 203, 199, 0.66);
  --err:       #FF8A78;

  /* WhatsApp brand green, dark variant - the only colour on the page not taken
     from the artwork, because a WhatsApp button has to look like one */
  --wa:        #0E7A6D;
  --wa-hi:     #12958A;

  /* the panel is opaque, deliberately: no backdrop-blur on this client's work */
  --panel-bg:  rgba(7, 14, 17, 0.90);

  --font:      "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-disp: "Anton", "Barlow", Impact, Haettenschweiler, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--bone);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* html carries the base colour; body stays transparent so it can never
   paint over the z-index:-1 background layer */
html { background: var(--void); }
body {
  position: relative;
  background: transparent;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

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

/* Honeypot - display:none ONLY. Off-screen positioning gets autofilled by
   Chrome/Edge, which silently blocks real signups. */
.hp-row { display: none !important; }

/* ============================================================
   BACKGROUND - the same scene, blurred and dropped back so the
   poster in front of it is unmistakably the hero. Fixed in both
   orientations: it is atmosphere now, not a composition with a
   subject that has to stay in frame, so cover is correct here
   and the height-fit gymnastics are not needed.
   ============================================================ */
/* PORTRAIT: the client's mobile scene SHARP and unblurred (Adam, 2026-07-27).
   The plate is the hero on a phone, so nothing is done to it - the masthead sits
   above it and the panel below, and the only overlay is a bottom fade seating
   the image's end into the page ground. Absolutely positioned, not fixed: the
   plate lives in the top third of this crop and a fixed layer would park it
   under the scrolling panel. */
.bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 112svh;
  z-index: -1;
  background: url("/assets/images/bg-mobile.webp?v=20260727-12") center top / cover no-repeat,
              var(--void);
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 20, 22, 0) 0%,
    rgba(13, 20, 22, 0) 58%,
    rgba(13, 20, 22, 0.55) 82%,
    var(--void) 100%);
}
@media (max-aspect-ratio: 7/10) and (max-width: 500px) {
  .bg { background-image: url("/assets/images/bg-mobile-sm.webp?v=20260727-12"); }
}

/* LANDSCAPE / DESKTOP: here the framed poster is the hero, so the scene behind
   it is blurred and dropped back to atmosphere. Fixed + cover is right for that
   - there is no subject that has to stay in frame. */
@media (min-aspect-ratio: 7/10) {
  .bg {
    position: fixed;
    inset: 0;
    height: auto;
    background: url("/assets/images/bg-blur-desktop.webp?v=20260727-12") center center / cover no-repeat,
                var(--void);
  }
  /* a cold vignette so the framed poster edge separates from the scene */
  .bg::after {
    background: radial-gradient(125% 95% at 50% 42%,
      rgba(13, 20, 22, 0) 0%,
      rgba(13, 20, 22, 0.20) 62%,
      rgba(13, 20, 22, 0.60) 100%);
  }
}

/* ============================================================
   SHEET - structural wrapper only (the artwork is the frame)
   ============================================================ */
.sheet {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* ============================================================
   STAGE - poster left, sign-up right
   ============================================================ */
.stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.stage__inner {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) clamp(18px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.4vw, 32px);
}

/* --- Poster: the client's artwork, whole and unmodified. Framed with the same
       intaglio cut used everywhere else - a dark edge with an ice highlight
       catching along the top, as if the poster were another pane of the same
       glass - rather than a plain border. --- */
/* --- Portrait masthead: the wide lockup, 95% of the frame. Hidden by default;
       the portrait block below turns it on and turns the poster off. Exactly one
       of the two is ever in the flow. --- */
.brand { display: none; }
.brand__lockup {
  display: block;
  width: 95%;
  max-width: 955px;
  height: auto;
  margin: 0 auto;
}

.poster {
  display: flex;
  justify-content: center;
}
.poster__img {
  display: block;
  width: min(92vw, 430px);
  height: auto;
  /* No border or ring (Adam, 2026-07-27) - the poster lifts off the page on
     depth alone. Three stacked shadows read as one light source rather than a
     drop-shadow preset: a tight contact shadow that anchors the bottom edge, a
     mid falloff, and a wide ambient one. The last layer is a barely-there cold
     halo picking up the plate's own flare, which is what separates the artwork
     from a background of near-identical value without drawing a line round it. */
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.55),
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 44px 96px rgba(0, 0, 0, 0.68),
    0 0 72px 12px rgba(84, 158, 166, 0.11);
}

/* ============================================================
   PANEL - an opaque plate of its own, edges cut not drawn.
   Square corners: the chamfer belongs to other builds.
   ============================================================ */
.panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--panel-bg);
  box-shadow:
    /* the cut edge, all four sides */
    inset 0 1px 0 rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    /* the highlight catching along the top, as if lit by the plate's flare */
    inset 0 2px 0 -1px rgba(143, 206, 214, 0.30),
    0 26px 60px rgba(0, 0, 0, 0.55);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, 34px) clamp(20px, 3.4vw, 30px) clamp(26px, 4vw, 34px);
}

/* --- state machine: exactly one state visible --- */
.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; }

/* --- panel type --- */
.panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ice);
}
/* the eyebrow rules are grooves, same cut as everything else */
.panel__eyebrow-hair {
  flex: 1;
  height: 2px;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.78) 0 1px,
      rgba(143, 206, 214, 0.34) 1px 2px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
          mask-image: linear-gradient(90deg, #000, transparent);
}
.panel__eyebrow-hair:first-child {
  -webkit-mask-image: linear-gradient(270deg, #000, transparent);
          mask-image: linear-gradient(270deg, #000, transparent);
}
.panel__title {
  margin: 0 0 12px;
  font-family: var(--font-disp);
  font-size: clamp(31px, 4.4vw, 44px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--frost);
  text-wrap: balance;
}
.panel__title em {
  font-style: normal;         /* the ice IS the emphasis */
  color: var(--ice);
}
/* Class-based only. A state-scoped element rule (.panel__success p {...})
   would out-specify .panel__eyebrow and silently restyle it. */
.panel__lede {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
}
.panel__lede strong { color: var(--bone); font-weight: 600; }
.panel__success-note {
  margin: 0 0 12px;
  color: var(--ice);
  font-size: 15px;
}

/* ============================================================
   FORM - inputs are etched channels, not boxes. No outline
   rectangle; a cut across the top and an ice baseline that
   lights up on focus.
   ============================================================ */
.form { margin: 0; }
.form__row { margin: 0 0 16px; }
.form__label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ice);
}
.form__input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.85),                 /* the cut */
    inset 1px 0 0 rgba(0, 0, 0, 0.45),
    inset -1px 0 0 rgba(0, 0, 0, 0.45),
    inset 0 -2px 0 rgba(143, 206, 214, 0.22);          /* the lit baseline */
  color: var(--frost);
  font-family: var(--font);
  font-size: 16px;            /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.form__input::placeholder { color: rgba(207, 203, 199, 0.34); }
.form__input:focus {
  outline: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.9),
    inset 1px 0 0 rgba(0, 0, 0, 0.5),
    inset -1px 0 0 rgba(0, 0, 0, 0.5),
    inset 0 -2px 0 var(--ice);
}
/* Chrome autofill repaints the field bright blue and kills the etch */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--frost);
  -webkit-box-shadow:
    inset 0 0 0 40px #0A1417,
    inset 0 1px 0 rgba(0, 0, 0, 0.85),
    inset 0 -2px 0 rgba(143, 206, 214, 0.22);
  caret-color: var(--frost);
}
.form__input--otp {
  letter-spacing: 0.42em;
  font-family: var(--font-disp);
  font-size: 24px;
  text-align: center;
  text-indent: 0.42em;        /* recentre: tracking adds a trailing gap */
}

.form__row--check { margin-top: 18px; }
.form__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 2px 0 0;
  accent-color: var(--ice);
  cursor: pointer;
}
.form__check a { color: var(--ice); text-decoration: underline; }
.form__check a:hover { color: var(--ice-hi); }

.form__error {
  margin: 6px 0 0;
  color: var(--err);
  font-size: 13px;
}
.form__error--global { margin-top: 12px; }

.form__resend {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.form__resend-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--ice);
  font-family: var(--font);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.form__resend-btn:disabled { opacity: 0.5; cursor: default; }

/* --- buttons: square, no chamfer, no radius --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-disp);
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  background: var(--ice);
  color: #04100F;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 24px rgba(84, 158, 166, 0.22);
  /* shrink type before it can wrap - never let a CTA break to two lines */
  white-space: nowrap;
  font-size: clamp(0.92rem, 3.6vw, 1.15rem);
  letter-spacing: clamp(0.06em, 0.5vw, 0.14em);
  text-transform: uppercase;
}
.btn--primary:hover:not(:disabled) { background: var(--ice-hi); }
.btn--primary:disabled { opacity: 0.62; cursor: wait; }
/* On the success state this is the ONLY action on the page, so it carries full
   primary weight - the old ghost/outline treatment read as secondary and
   half-disabled. Ground is WhatsApp's own teal-green rather than their brighter
   #25D366: still unmistakably WhatsApp next to the glyph, sits in the same
   blue-green family as the ice accent instead of fighting it, and white on it
   clears 4.5:1 where white on #25D366 lands near 2:1. Square corners and the
   same intaglio top highlight as every other button, so it reads as part of the
   page rather than a pasted-in share widget. */
.btn--whatsapp {
  background: var(--wa);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(0, 0, 0, 0.34),
    0 10px 26px rgba(14, 122, 109, 0.36);
  white-space: nowrap;
  font-size: clamp(0.92rem, 3.6vw, 1.15rem);
  letter-spacing: clamp(0.05em, 0.45vw, 0.11em);
  text-transform: uppercase;
}
.btn--whatsapp:hover { background: var(--wa-hi); }
.btn--whatsapp:focus-visible { outline-color: var(--wa-hi); }
.btn__icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* ============================================================
   WAH APP CTA - appears twice per page: under the sign-up form
   (idle) and on the thank-you state (success). Separated from
   what precedes it by the intaglio groove, same cut as
   everywhere else.
   ============================================================ */
.appcta {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.78) 0 1px,
    rgba(143, 206, 214, 0.30) 1px 2px) 2;
}
.appcta__hook {
  margin: 0 0 8px;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.04;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--frost);
  text-wrap: balance;
}
.appcta__hook em { font-style: normal; color: var(--ice); }
.appcta__copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.appcta__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}
.appcta__badge { display: inline-flex; line-height: 0; }
.appcta__badge img {
  height: 44px;
  width: auto;
  display: block;
  transition: transform 0.15s ease;
}
.appcta__badge:hover img { transform: translateY(-2px); }
.appcta__badge:focus-visible { outline: 2px solid var(--ice-hi); outline-offset: 3px; }

/* ============================================================
   intl-tel-input - dark ice theme, styled searchable dropdown,
   no full-screen takeover on mobile
   ============================================================ */
.iti { width: 100%; }
.iti input.form__input { padding-left: calc(52px + 0.7rem); } /* repadPhone() re-measures */

.iti__selected-country { background: transparent; color: var(--frost); }
.iti__selected-country:hover { background: rgba(84, 158, 166, 0.10); }
.iti__selected-dial-code { color: var(--muted); font-size: 15px; }
.iti__arrow { border-top-color: var(--ice); }
.iti__arrow--up { border-bottom-color: var(--ice); }

.iti__dropdown-content {
  background: #0A1417;
  border: 0;
  border-radius: 0;
  color: var(--frost);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 -1px rgba(143, 206, 214, 0.32),
    0 26px 56px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
/* the search box sits in its own etched channel, grooved off the list below */
.iti__search-input {
  width: 100%;
  padding: 13px 14px;
  background: rgba(0, 0, 0, 0.34);
  border: 0;
  box-shadow: inset 0 -2px 0 rgba(143, 206, 214, 0.22);
  color: var(--frost);
  font-family: var(--font);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.iti__search-input::placeholder { color: rgba(207, 203, 199, 0.36); }
.iti__search-input:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--ice);
}
.iti__country-list {
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--ice-deep) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 8px; }
.iti__country-list::-webkit-scrollbar-track { background: transparent; }
.iti__country-list::-webkit-scrollbar-thumb { background: var(--ice-deep); }
.iti__country {
  padding: 10px 14px;
  font-size: 14.5px;
  border-left: 2px solid transparent;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.iti__country.iti__highlight { background: rgba(84, 158, 166, 0.18); border-left-color: var(--ice); }
.iti__country:hover { background: rgba(84, 158, 166, 0.12); border-left-color: var(--ice-line); }
.iti__country-name { color: var(--frost); }
.iti__dial-code { color: var(--muted); }
/* dropdown must clear the panel */
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* hidden state must not wait on the vendor stylesheet, or the country list
   flashes open on first paint */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   FOOTER - basslayerz pattern, full width
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 20px;
  border: 0;
  border-top: 2px solid transparent;
  border-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.78) 0 1px,
    rgba(143, 206, 214, 0.30) 1px 2px) 2;
  background: rgba(7, 12, 14, 0.72);
  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(--muted); letter-spacing: 0.02em; }
.foot__legal a { color: var(--muted); text-decoration: none; }
.foot__legal a:hover { color: var(--ice); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(207, 203, 199, 0.16);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--ice); color: var(--frost); }
.site-built img { display: block; opacity: 0.9; }
@media (max-width: 640px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* ============================================================
   LAYOUT
   Aspect-ratio thresholds, not width alone: width-only
   breakpoints leave gaps at squarish window shapes where
   neither treatment applies.
   ============================================================ */

/* LANDSCAPE / DESKTOP: poster left, panel right, both centred on one axis.
   The poster is capped by viewport HEIGHT as well as width - it is 3:4, so a
   width-only cap overflows any window shorter than about 620px. */
/* 640px, not 768px: windows in the 640-767 band with a landscape shape are too
   short for the stacked portrait flow and too wide for the phone one. Dropping
   the threshold hands them the two-column poster layout rather than leaving
   them in the gap between treatments. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    max-width: 1180px;
    gap: clamp(26px, 4vw, 64px);
    padding-top: clamp(18px, 3vh, 40px);
    /* the footer supplies its own top padding, so the stage needs less here */
    padding-bottom: clamp(14px, 2.2vh, 28px);
  }
  .poster { justify-content: flex-end; }
  .poster__img {
    /* 0.75 = the poster's 1080/1440 aspect, so the height cap converts cleanly
       into a width cap and the image never overflows a short window */
    width: min(42vw, 460px, (100svh - 130px) * 0.75);
  }
  /* margin-left stays 0 and margin-right auto - never `margin: 0`, which is
     what left-shifts a centred panel at a single breakpoint */
  .panel { margin-left: 0; margin-right: auto; max-width: 470px; }
  .panel__inner { padding: clamp(22px, 3vh, 30px) clamp(20px, 3.4vw, 30px); }
}

/* PORTRAIT: masthead at the top over the sharp scene, plate in the middle,
   form beneath. The framed poster is landscape-only - on a portrait phone it
   would just be a small duplicate of the background it is sitting on.

   Keyed on aspect ratio ALONE, not max-width: a 700x600 desktop window is under
   767px but landscape-shaped, and would otherwise be handed the phone masthead
   instead of the poster layout. Real portrait phones and tablets are all below
   7/10 anyway, so nothing is lost. */
@media (max-aspect-ratio: 7/10) {
  .stage__inner {
    /* the scene is scaled and re-anchored below so the face lands behind the
       panel's headline block; this spacer is what puts it there */
    padding-top: 14px;
    gap: clamp(18px, 3.5vw, 26px);
  }
  .brand  { display: block; margin-bottom: 24svh; }
  .poster { display: none; }

  /* Adam, 2026-07-27 - "make the face more visible but still have the sign up
     box overlaid". The plate is scaled up and pulled up so the eyes and mouth
     sit behind the panel's headline rather than behind the input fields, and
     the panel fades from near-clear at its top edge to solid by the time the
     first field starts. Net effect: the face reads through the headline zone,
     and nothing anyone has to read or type loses contrast.
     NO backdrop-blur - this client rejected that treatment on wah-cardiff - so
     legibility over the artwork is carried by text-shadow instead. */
  .bg {
    height: 100svh;
    background-size: 128% auto;
    background-position: center -2svh;
  }
  /* inset off the frame edges so the scene runs down both sides of the panel
     rather than the box going wall-to-wall */
  .stage__inner { padding-left: 20px; padding-right: 20px; }
  .panel {
    background: linear-gradient(180deg,
      rgba(7, 14, 17, 0.40) 0%,
      rgba(7, 14, 17, 0.60) 20%,
      rgba(7, 14, 17, 0.90) 40%,
      rgba(7, 14, 17, 0.95) 100%);
  }
  .panel__title,
  .panel__eyebrow { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 34px rgba(0, 0, 0, 0.7); }
  .panel__lede    { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
}

/* Portrait tablets: same masthead treatment, panel scaled up */
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .panel { max-width: 540px; }
}

/* Phones: panel runs the full frame width */
@media (max-width: 767px) {
  .panel { max-width: none; }
}

/* Landscape phones are a first-class layout, not an afterthought: a rotated
   phone satisfies the desktop width/aspect conditions but has almost no
   height. Placed AFTER the desktop blocks so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* start, not center: the panel column is taller than the frame here, so
       centring the poster inside that row pushes its bottom off-screen */
    align-items: start;
    gap: clamp(14px, 2.6vw, 28px);
    padding: 10px clamp(14px, 3vw, 28px);
    min-height: 0;
    max-width: 1100px;
  }
  .brand  { display: none; }          /* landscape keeps the framed poster */
  .poster { display: flex; justify-content: flex-start; min-width: 0; }
  .poster__img { width: min(30vw, (100svh - 34px) * 0.75); }
  .panel    { max-width: none; margin: 0; }
  .panel__inner { padding: 11px 14px 13px; }
  .panel__title { font-size: clamp(17px, 2.4vw, 22px); margin-bottom: 5px; }
  /* every line the lede costs here is a form field pushed under the fold, and
     the poster beside it already carries the venue, date and times */
  .panel__lede { margin-bottom: 8px; font-size: 12px; line-height: 1.35; }
  .panel__eyebrow { margin-bottom: 6px; font-size: 9.5px; letter-spacing: 0.22em; }
  .form__row { margin-bottom: 7px; }
  .form__label { font-size: 9.5px; margin-bottom: 2px; }
  .form__input { padding: 7px 12px; font-size: 15px; }
  .form__input--otp { font-size: 19px; }
  .form__check { font-size: 11px; line-height: 1.3; }
  .form__check input { width: 15px; height: 15px; }
  .form__row--check { margin-top: 8px; }
  .btn { margin-top: 8px; padding: 9px 14px; }
  .appcta { margin-top: 12px; padding-top: 11px; }
  .appcta__hook { font-size: 15px; margin-bottom: 5px; }
  .appcta__copy { font-size: 11.5px; line-height: 1.35; }
  .appcta__badges { margin-top: 9px; gap: 8px; }
  .appcta__badge img { height: 34px; }
  .foot { padding: 7px 20px 9px; }
}

/* ============================================================
   MOTION - one orchestrated page-load reveal, nothing else
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.brand,
.poster { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.signup { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.iti__selected-country:focus-visible {
  outline: 2px solid var(--ice-hi);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}