/* ============================================================
   O'Flynn London - teaser sign-up (Percolate x Louder), 30 Oct 2026.

   Brief: black background, the O'Flynn wordmark, London, sign up for more
   information. Artwork left (NOT boxed), sign-up right.

   Palette is literal: the client supplied a white wordmark on black and
   nothing else, so the page is pure #000 + #FFF with greys for hierarchy.
   No accent colour on purpose: the one bold thing is the lockup's slow
   melt (SVG filter in index.html), and colour would compete with it.
     --black   #000000  ground (true black, as briefed)
     --white   #FFFFFF  wordmark, the titles' hook line, CTA
     --ash     #A3A3A3  body copy          8.4:1 on black
     --ash-dim #8C8C8C  placeholders/meta  6.4:1 on black
     --panel   #181818  sign-up panel, lifted off the black (Adam 30 Oct)
     --line    #262626  footer rule
   Type: Bricolage Grotesque 700/600 (OFL) for LONDON + titles; its ink
   traps sit well beside hand-cut letters. Body = system Helvetica stack.
   Radii follow the wordmark's soft corners: panel 22, fields 12, CTA pill.
   ============================================================ */

@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-grotesque-v9-latin-700.woff2?v=20261030-1") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-grotesque-v9-latin-600.woff2?v=20261030-1") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --white: #FFFFFF;
  --ash: #A3A3A3;
  --ash-dim: #8C8C8C;
  --line: #262626;
  --line-hi: #474747;
  --panel: #181818;          /* lifted off the black (Adam, 30 Oct: near-black box did not stand out) */
  --panel-edge: #363636;
  --field: #242424;          /* OPAQUE: it is also the autofill shadow colour */
  --danger: #FF8F86;
  --whatsapp: #25D366;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --panel-w: 25rem;
}

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

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

/* Ground colour lives on html, NOT body (gotcha 16). */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--black);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  color: var(--ash);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.page { flex: 1 0 auto; display: flex; flex-direction: column; overflow-x: clip; }

/* ============================================================
   STAGE - stacked by default (phones, tablets portrait):
   lockup, then sign-up, then the presenters row.
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(36px, 9vw, 64px) clamp(18px, 5vw, 40px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bill" "signup" "presenters";
  justify-items: center;
  align-content: start;
  row-gap: clamp(30px, 7vw, 48px);
}
.bill { grid-area: bill; width: 100%; max-width: 560px; }
.signup { grid-area: signup; width: 100%; max-width: var(--panel-w); }
.presenters { grid-area: presenters; }

/* ---------- the lockup (h1) ---------- */
.bill__h1 { margin: 0; font-size: 1rem; line-height: 0; }
.lockup {
  display: block;
  width: 100%;
  height: auto;
  color: var(--white);
  overflow: visible;
}

/* ---------- presenters: Percolate x Louder ---------- */
.presenters {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
.presenters picture { display: block; }
.presenters img { display: block; width: auto; }
.presenters__percolate { height: 30px; }
.presenters__louder { height: 15.5px; }   /* optical match to Percolate's taller script */
.presenters__x { color: var(--ash-dim); font-size: 15px; line-height: 1; }

/* ============================================================
   PANEL
   ============================================================ */
.panel {
  position: relative;
  isolation: isolate;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  /* On pure black a dark shadow is invisible, so the lift is a faint pale
     halo plus a lighter top edge. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(255,255,255,.03),
    0 24px 90px -24px rgba(255,255,255,.16);
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3vw, 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="otp"]     .panel__otp     { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

/* House title pattern (Be first / in line.): the first line in ash, the hook
   in white. em is reset from italic: the emphasis is the tone shift. */
.panel__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 7.6vw, 2.55rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ash);
  text-wrap: balance;
}
.panel__title em { font-style: normal; color: var(--white); }
.panel__lede {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ash);
  max-width: 36ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--white); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--white); font-size: 14.5px; }

/* ============================================================
   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: 13px 14px;
  font-family: var(--font);
  font-size: 16px;                 /* 16px minimum or iOS zooms on focus */
  color: var(--white);
  background: var(--field);        /* OPAQUE - see the autofill rule below */
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--ash-dim); opacity: 1; }
.form__input:focus {
  outline: none;
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.form__input--otp {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .42em;
  text-align: center;
  text-indent: .42em;              /* re-centres text that tracking pushes left */
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background on
   :-webkit-autofill - a huge inset box-shadow is the only reliable override.
   It must be the flattened OPAQUE colour of the field, which is simply --field
   because the field is opaque on purpose. Keep it opaque. */
.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;   /* stops the lavender flashing in */
}

.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 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 18px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ash);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--white);
  cursor: pointer;
}
/* Privacy line under the marketing tick box (kept out of the consent box itself). */
.form__note { margin: 10px 0 0 29px; font-size: 12px; line-height: 1.5; color: var(--ash); }
.form__note a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.form__note a:hover { color: var(--white); }

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

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1rem, 3.6vw, 1.06rem);
  white-space: nowrap;             /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;           /* <a class="btn"> needs this */
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
.btn--primary { color: var(--black); background: var(--white); }
.btn--primary:hover:not(:disabled) { background: #D9D9D9; }
.btn--whatsapp {
  color: #06301A;                  /* 7.33:1 on the WhatsApp green */
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook { margin: 18px 0 12px; font-size: 13.5px; color: var(--ash); }
.wa-hook strong { color: var(--white); font-weight: 600; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; 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: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.94);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation (30px left for the search
     icon, 28px right for the clear button). A padding SHORTHAND that drops them
     puts the magnifier on top of the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--white);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--line-hi);
}
.iti__search-input::placeholder { color: var(--ash-dim); }
.iti__search-input:focus { outline: none; background: #303030; }
.iti__country-list { background: var(--panel); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--white);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(255,255,255,.10); }
.iti__dial-code { color: var(--ash-dim); }
.iti__country-name { color: var(--white); }
.iti__selected-country { border-radius: 12px 0 0 12px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(255,255,255,.08); }
.iti__selected-dial-code { color: var(--white); font-family: var(--font); font-size: 15px; }
.iti__arrow { border-top-color: var(--ash-dim); }
.iti__arrow--up { border-bottom-color: var(--ash-dim); }

/* ============================================================
   FOOTER - standard fleet band (basslayerz pattern), credit in a pill.
   position + z-index keep it above the fixed plate.
   ============================================================ */
.foot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: var(--black);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--ash-dim); }
.foot__legal a { color: var(--ash-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--white); }
/* louder-consent.js drops "Cookie settings" in right after the privacy link
   with only a text space between them; give it a real gap and a divider. */
.foot__legal [data-louder-consent-open] {
  margin-left: .75em;
  padding-left: .85em;
  border-left: 1px solid var(--line-hi);
}
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ash-dim);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.site-built a:hover { color: var(--white); border-color: var(--white); }
/* the credit logo is teal-on-dark artwork: dark band, so a bare opacity only */
.site-built img { display: block; opacity: .9; }

/* Phones: stack the footer rather than relying on the row wrapping. */
@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__right { justify-content: center; }
}
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 10px; padding-bottom: 22px; }
  .foot__right { flex-direction: column; align-items: center; gap: 10px; }
}
/* ============================================================
   TWO COLUMNS - artwork left (unboxed), sign-up right.
   Aspect-ratio gate (7/10), not orientation, so squarish desktop windows get
   it too (gotcha 20); plus landscape phones, tuned in the block after.
   The sign-up spans every row; the lockup + presenters sit centred as one
   block beside it via the empty 1fr rows.
   ============================================================ */
@media (min-width: 900px) and (min-aspect-ratio: 7/10),
       (min-width: 560px) and (min-aspect-ratio: 13/10) and (max-height: 520px) {
  .stage {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".          signup"
      "bill       signup"
      "presenters signup"
      ".          signup";
    column-gap: clamp(40px, 6vw, 112px);
    row-gap: clamp(28px, 4vh, 44px);
    align-items: center;
    justify-items: start;
    padding-top: clamp(40px, 6vh, 72px);
    padding-bottom: clamp(40px, 6vh, 72px);
    min-height: calc(100svh - 64px);
  }
  .bill { max-width: 820px; }
  .signup { align-self: center; }
  .presenters { gap: 18px; }
}

/* --- landscape phones are a first-class layout (gotcha 27) ---
   844x390 / 932x430 / 667x375: almost no height. Compact everything, start
   at the top, let the page scroll rather than squash. AFTER the block above
   so it wins at equal specificity. */
@media (min-width: 560px) and (min-aspect-ratio: 13/10) and (max-height: 520px) {
  .stage {
    --panel-w: 21rem;
    min-height: 0;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "bill       signup"
      "presenters signup"
      ".          signup";
    align-items: start;
    padding-top: 22px;
    padding-bottom: 22px;
    column-gap: 32px;
    row-gap: 18px;
  }
  .bill { max-width: none; }
  .signup { align-self: start; }
  .panel__inner { padding: 18px 20px; }
  .panel__title { font-size: 1.7rem; margin-bottom: 8px; }
  .panel__lede { font-size: 14px; margin-bottom: 14px; }
  .form__row { margin-bottom: 9px; }
  .form__row--check { margin: 12px 0 14px; }
  .btn { padding: 12px 16px; }
  .presenters__percolate { height: 24px; }
  .presenters__louder { height: 12.5px; }
}

@media (max-width: 400px) {
  .panel__inner { padding: 22px 18px; }
}

/* Reduced motion: the SVG melt is handled in app.js (SMIL ignores this
   query); everything CSS-driven stops here. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}