/* ============================================================
   FORWARD MOTION ON THE ROCK - Malta, 23-26 September 2027
   Ticket sign-up. Client: Forward Motion.

   DIRECTION
   The poster is a night photograph: pure black sky, a burning
   sunset line on the horizon, and the Forward Motion sign lit
   beside an infinity pool. The page is that night. The poster
   sits on the left uncropped, its edges feathered so its black
   sky becomes the page's black; the sign-up sits on the right.
   Behind both, a blurred, dimmed extension of the same plate
   carries the horizon and pool glow across the whole viewport.

   COLOUR - literal pixels from the client's layers:
     #000000  the sky (full_artwork.png, whole top third)
     #AFB1AB  lockup, warm stone end of its gradient (logo.png)
     #55B8E2  lockup, sky-blue end of its gradient (logo.png)
     #FFA02E  sunset at the horizon (structure only, never text)
     #4CC6CA  lit pool edge (the panel's lit bottom edge, focus)
     #004959  pool water (field tint)

   TYPE - Archivo variable (OFL): wght 100-900, wdth 62-125.
   The lockup sets MALTA heavy and 2027 in a hairline; titles
   repeat that contrast: Expanded Heavy, then Thin in sky blue.
   Body and form copy stay in the system Helvetica stack.

   SIGNATURE - the button is the lockup's own bar ("ON THE ROCK",
   the date line): a flat stone-to-sky gradient, black heavy type,
   square corners. Nothing else on the page uses that gradient.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2?v=20260930-1") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --night:     #000000;   /* the sky */
  --stone:     #AFB1AB;   /* lockup gradient, warm end */
  --sky:       #55B8E2;   /* lockup gradient, blue end - title hook, links */
  --sunset:    #FFA02E;   /* horizon - structure only */
  --pool:      #4CC6CA;   /* lit pool edge */
  --pool-deep: #004959;   /* pool water */
  --field:     #06141A;   /* form field - OPAQUE on purpose, see autofill note */
  --white:     #EEF3F5;
  --mist:      #B4C3C9;   /* reading copy */
  --mist-dim:  #83979F;   /* placeholders, secondary copy: 6.4:1 on --field */
  --danger:    #FFB39A;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bar: linear-gradient(100deg, var(--stone) 0%, #8FB5C6 30%, var(--sky) 62%);
}

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

/* `hidden` is only display:none in the UA stylesheet, which any author display
   rule beats. Keep this ABOVE everything that sets display. */
[hidden] { display: none !important; }

/* Ground colour lives on html, NOT body: an opaque body paints over the
   z-index:-2 .bg layer and the ambient plate disappears. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--night);
}

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

/* ---------- ambient plate ----------
   The poster's own photograph, extended sideways, blurred and dimmed: only
   the horizon's warmth and the pool's glow survive. Chosen by aspect ratio,
   not width alone, so squarish windows never fall in a gap. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--night);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260930-1");
  background-position: 50% 100%;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260930-1"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260930-1"); }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1281px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260930-1"); }
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(0px, 3vw, 48px) 16px clamp(28px, 4vw, 48px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

/* ---------- the poster ---------- */
.bill {
  justify-self: center;
  width: 100%;
  max-width: 540px;
}
.bill__h1 { margin: 0; line-height: 0; }
.bill__art {
  display: block;
  width: 100%;
  height: auto;
  /* Feather every edge into the page's black. The top is already black in
     the artwork; the sides and foot carry the horizon and the pool, which
     must fade out rather than stop at a hard line. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
          mask-composite: intersect;
  animation: dusk 1.1s ease-out both;
}

/* The one orchestrated moment: the poster comes up out of the dark,
   then the panel settles beside it. */
@keyframes dusk {
  from { opacity: 0; filter: brightness(.4); }
  to   { opacity: 1; filter: none; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL - dark glass with a lit pool edge
   ============================================================ */
.signup {
  justify-self: center;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
}
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above the glass */
  animation: settle .8s .35s cubic-bezier(.16,.84,.36,1) both;
}
/* The glass. Drawn on a pseudo-element (z-index 0) rather than on .panel,
   so nothing here can ever clip or cover the country dropdown. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,10,14,.80) 100%);
  border: 1px solid rgba(85,184,226,.16);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -36px rgba(0,0,0,.95);
}
/* The lit edge: the pool's light strip, with its glow spilling downward
   the way the water carries it in the photograph. */
.panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(76,198,202,.35), var(--pool) 30%, #B8F0F0 55%, var(--pool) 80%, rgba(76,198,202,.35));
  box-shadow: 0 0 14px 1px rgba(76,198,202,.65), 0 10px 34px 4px rgba(0,73,89,.75);
}
.panel__inner {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(26px, 3.2vw, 34px);
}

/* --- 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="success"] .panel__success { display: block; }

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 850;
  font-stretch: 125%;
  font-size: clamp(1.75rem, 3.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
/* House pattern: the second line carries the accent. Here it is the
   lockup's hairline "2027": Thin, normal width, sky blue. <em> keeps the
   emphasis in the markup; reset from italic. */
.panel__title em {
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--sky);
}
.panel__lede {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mist);
  max-width: 42ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--white); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--sky); font-size: 14px; }
.panel__note { margin: 14px 0 0; font-size: 13px; color: var(--mist); }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 12px; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.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;
}
.form__input {
  width: 100%;
  padding: 14px 14px;
  font-family: var(--text);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--white);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1px solid rgba(85,184,226,.30);
  border-radius: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--mist-dim); opacity: 1; }
.form__input:hover { border-color: rgba(85,184,226,.55); }
.form__input:focus {
  outline: none;
  border-color: var(--pool);
  box-shadow: 0 0 0 3px rgba(76,198,202,.22);
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background on
   :-webkit-autofill; a huge inset box-shadow is the only reliable override.
   A box-shadow cannot be translucent, so it must be the flattened opaque
   colour of the field - trivially --field, because the field is opaque on
   purpose. Keep it opaque or recompute this. The 9999s transition stops the
   lavender flashing in first. */
.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(--white) !important;
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}

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

/* Honeypot. display:none ONLY - off-screen positioning stays an autofill
   target in Chrome/Edge, which fills it and silently blocks real signups. */
.hp-row { display: none !important; }

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

/* ---------- button: the lockup's bar ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 18px 14px;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1rem, 3.4vw, 1.12rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;            /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;
  color: #000;                    /* black on the bar, as in the artwork: 9.6:1 at the stone end */
  background: var(--bar);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline (sanity-gated); this is the
   sane default before it runs. Anything >= 80px breaks 320-390px viewports. */
.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; }
/* Until the vendor stylesheet loads the hidden state does not exist and the
   whole list plus search box flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti__dropdown-content {
  background: #03090C;
  border: 1px solid rgba(76,198,202,.5);
  border-radius: 0;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.94);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal reservation (icon left, clear button right).
     A padding shorthand that drops it puts the magnifier on the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--text);
  font-size: 15px;
  color: var(--white);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid rgba(85,184,226,.3);
}
.iti__search-input::placeholder { color: var(--mist-dim); }
.iti__search-input:focus { outline: none; background: #0A1E26; }
.iti__country-list { background: #03090C; max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--mist);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(85,184,226,.14); }
.iti__dial-code { color: var(--mist-dim); }
.iti__country-name { color: var(--mist); }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(85,184,226,.1); }
.iti__selected-dial-code { color: var(--white); font-size: 15px; }
.iti__arrow { border-top-color: var(--mist-dim); }
.iti__arrow--up { border-bottom-color: var(--mist-dim); }

/* ============================================================
   FOOTER - fleet band (basslayerz pattern), credit in a pill
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 22px;
  background: rgba(0,0,0,.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(76,198,202,.22);
  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-dim); letter-spacing: .02em; }
.foot__legal a { color: var(--mist-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--sky); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--mist-dim);
  text-decoration: none;
  border: 1px solid rgba(180,195,201,.22);
  border-radius: 999px;
  transition: border-color .16s ease, color .16s ease;
}
.site-built a:hover { border-color: var(--sky); color: var(--white); }
.site-built img { display: block; opacity: .9; }

/* ============================================================
   RESPONSIVE - aspect-ratio thresholds, not width alone
   ============================================================ */

/* --- stacked (phones, tablets, tall windows) ---
   The poster runs edge to edge and the panel rises onto its pool, so the
   lit edge of the panel sits where the water's light is. */
@media (max-width: 899px), (max-aspect-ratio: 7/10) {
  .stage { padding-top: 0; align-items: flex-start; }
  .bill { margin: 0 -16px; width: calc(100% + 32px); max-width: 572px; }
  .signup { margin-top: clamp(-84px, -14vw, -40px); }
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* --- two columns: poster left, sign-up right ---
   The poster is height-capped so the whole bill fits the fold; width auto
   needs max-width 100% beside it or a tall window runs it under the panel. */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    column-gap: clamp(28px, 5vw, 80px);
  }
  .bill { justify-self: end; max-width: 560px; }
  .bill__art { max-height: calc(100svh - 150px); width: auto; max-width: 100%; margin-left: auto; }
  .signup { justify-self: start; }
}

/* Phones: stack the footer rather than relying on the flex row wrapping. */
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 10px; padding-bottom: 22px; }
  .foot__left { flex-direction: column; align-items: center; gap: 10px; }
}

/* --- landscape phones are a first-class layout ---
   844x390 / 932x430 / 667x375 satisfy the desktop conditions with almost no
   height. Compact side-by-side, placed AFTER the desktop block so it wins at
   equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 12px clamp(12px, 3vw, 26px); align-items: flex-start; }
  .stage__inner {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 22px;
    align-items: start;
  }
  .bill { margin: 0; width: auto; justify-self: center; max-width: none; }
  .bill__art { max-height: calc(100svh - 40px); width: auto; max-width: 100%; }
  .signup { margin-top: 0; justify-self: stretch; max-width: 460px; }
  .panel__inner { padding: 16px 18px 18px; }
  .panel__title { font-size: 1.3rem; margin-bottom: 8px; }
  .panel__idle .panel__lede { display: none; }   /* the poster beside it states place + dates */
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 11px 0 12px; }
  .form__check { font-size: 11px; line-height: 1.45; }
  .btn { padding: 12px 16px 11px; }
  .iti__country-list { max-height: 150px; }
  .foot { padding-top: 11px; padding-bottom: 13px; }
}

/* --- small phones --- */
@media (max-width: 380px) {
  .panel__inner { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--pool);
  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;
  }
}

/* ============================================================
   LEGAL PAGE (privacy.html) - flat ground, comfortable measure
   ============================================================ */
body.legal-wrap {
  display: block;
  min-height: 0;
  background: var(--night);
  color: var(--mist);
  line-height: 1.65;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}
.legal { max-width: 720px; margin: 0 auto; }
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 2.5rem;
  padding: .4rem 1.05rem .4rem .4rem;
  border: 1px solid rgba(85,184,226,.4);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease;
}
.legal__back:hover { border-color: var(--sky); background: rgba(85,184,226,.08); }
.legal__back-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bar);
  color: #000;
  transition: transform .18s ease;
}
.legal__back:hover .legal__back-arrow { transform: translateX(-3px); }
.legal__back-arrow svg { width: 13px; height: 13px; display: block; }
.legal__back-label { display: inline-flex; flex-direction: column; line-height: 1.15; }
.legal__back-text { font-size: 10px; letter-spacing: .06em; color: var(--mist-dim); }
.legal__back-brand { font-size: 13px; color: var(--white); }
.legal h1 {
  font-family: var(--display);
  font-weight: 850;
  font-stretch: 125%;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0 0 2rem;
  color: var(--white);
  text-wrap: balance;
}
.legal h2 {
  font-family: var(--display);
  font-weight: 750;
  font-stretch: 112%;
  font-size: 16px;
  color: var(--sky);
  margin: 2.2rem 0 .7rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(85,184,226,.22);
}
.legal h3 { font-weight: 600; font-size: 14px; color: var(--white); margin: 1.8rem 0 .4rem; }
.legal p, .legal li { font-size: 15px; color: var(--mist); }
.legal ul { padding-left: 1.1rem; margin: .5rem 0 1rem; }
.legal li { margin-bottom: .45rem; }
.legal a:not(.legal__back) { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--white); font-weight: 600; }
.legal__meta {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(85,184,226,.22);
  font-size: 12px;
  color: var(--mist-dim);
}