/* ============================================================
   5 Years of Modern Funktion · NX Newcastle · Fri 16 Oct 2026

   Direction derived from the client artwork: pigment blooming
   through water — hot magenta and violet diffusing into a deep
   ink core. Every colour below is sampled from the supplied
   PNGs, and the client's own desktop/mobile backgrounds are
   used exactly as delivered.

   Type: Outfit (display) echoes the poster logotype's geometric
   construction; Archivo (body) is the tighter grotesque that
   keeps the consent paragraph compact.

   Signature: the dye bloom. Focus a field and a soft magenta
   bloom diffuses behind it, the way the ink blooms in the
   artwork. It is the one flourish on the page — everything
   else stays quiet so the poster carries the volume.
   ============================================================ */

:root {
  --flare:     #ED1AF4;   /* hot magenta — the accent */
  --flare-lo:  #F78BFB;   /* lifted magenta for text on ink */
  --magenta:   #B317D1;
  --violet:    #6A1BB4;
  --indigo:    #2B178E;
  --ink:       #060B16;   /* page base */
  --ink-2:     #0A1122;   /* panel base */
  --ink-3:     #0D1428;   /* field base */
  --line:      #2E2166;   /* hairline */
  --white:     #FFFFFF;
  --mist:      #B9AEDA;   /* muted body copy */
  --danger:    #FF8577;
  --whatsapp:  #25D366;

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

  --maxw: 1180px;
}

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

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

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

/* ---------- the client's supplied backgrounds, used exactly ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--ink);
  background-image: url("/assets/images/bg-mobile.jpg?v=20260728-1");
  background-image: image-set(
    url("/assets/images/bg-mobile.webp?v=20260728-1") type("image/webp"),
    url("/assets/images/bg-mobile.jpg?v=20260728-1")  type("image/jpeg"));
  background-position: center;
  background-size: cover;
}
@media (min-width: 880px) {
  .bg {
    background-image: url("/assets/images/bg-desktop.jpg?v=20260728-1");
    background-image: image-set(
      url("/assets/images/bg-desktop.webp?v=20260728-1") type("image/webp"),
      url("/assets/images/bg-desktop.jpg?v=20260728-1")  type("image/jpeg"));
  }
}
/* Light scrim only — the client picked these backgrounds, so they should
   still read as theirs. Just enough to sit the poster and panel on. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6,11,22,.30) 0%,
    rgba(6,11,22,.52) 55%,
    rgba(6,11,22,.78) 100%);
}

/* ---------- dither layer ----------
   Functional, not decorative: the backgrounds are large smooth blooms
   and JPEG/WebP banding is visible across them without this. Kept far
   lower than a "film grain" treatment would be — the artwork is liquid,
   not grainy. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   STAGE LAYOUT
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
}

/* ---------- the poster ---------- */
.poster {
  justify-self: center;
  width: 100%;
  max-width: 600px;
}
.poster__frame {
  position: relative;
  box-shadow:
    0 10px 18px rgba(3,5,12,.55),
    0 38px 60px -18px rgba(107,27,180,.45);
  animation: posterIn .9s cubic-bezier(.16,.84,.36,1) both;
}
.poster img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes posterIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.panel {
  justify-self: center;
  width: 100%;
  max-width: 520px;
  position: relative;
  isolation: isolate;                    /* keeps the flag dropdown clickable */
  background: linear-gradient(180deg, rgba(10,17,34,.95), rgba(6,11,22,.97));
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.9);
  animation: panelIn .9s .12s cubic-bezier(.16,.84,.36,1) both;
  overflow: visible;
}
/* the bloom gradient, drawn as the panel's top edge */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--indigo), var(--violet) 38%, var(--flare) 78%, var(--flare-lo));
  z-index: 0;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.panel__inner { position: relative; z-index: 1; padding: clamp(26px, 3.4vw, 40px); }

/* --- 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; }

/* ---------- eyebrow: the poster letterspaces NEWCASTLE under a rule ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--flare-lo);
}
.eyebrow span {
  flex: 0 0 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--magenta));
}
.eyebrow span:last-child { background: linear-gradient(90deg, var(--magenta), transparent); }
/* text span inside the eyebrow must not inherit the hairline styling */
.eyebrow span.eyebrow__text { flex: 0 1 auto; height: auto; background: none; }
/* "NX Newcastle · Fri 16 Oct 2026" is long — tighten before it wraps */
@media (max-width: 460px) {
  .eyebrow { gap: 9px; font-size: 9.5px; letter-spacing: .16em; }
  .eyebrow span { flex: 0 0 16px; }
}

/* ---------- title: the poster's rule-under-type, not a label bar ---------- */
.panel__title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--white);
  text-wrap: balance;
}
.panel__title::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 240px;
  height: 1px;
  margin-top: 15px;
  background: linear-gradient(90deg, var(--flare), rgba(106,27,180,0));
}

/* visually hidden but kept for screen readers + SEO */
.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;
}

.panel__lede {
  margin: 0 0 10px;
  font-size: 15.5px;
  color: var(--mist);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 24px; }
.panel__lede strong { color: var(--white); font-weight: 600; }
.panel__success-note {
  margin: 0 0 12px;
  color: var(--flare-lo);
  font-size: 15px;
}

/* ============================================================
   FORM
   ============================================================ */
.form__row { position: relative; margin: 0 0 16px; }

/* --- THE DYE BLOOM ---
   Focus a field and pigment diffuses behind it. Sized and blurred to
   read as ink spreading in water rather than as a glow. */
.form__row:not(.form__row--check)::before {
  content: "";
  position: absolute;
  inset: -16px -20px;
  border-radius: 22px;
  background: radial-gradient(62% 120% at 16% 52%,
    rgba(237,26,244,.30), rgba(106,27,180,.18) 44%, rgba(43,23,142,0) 74%);
  filter: blur(7px);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .4s ease, transform .65s cubic-bezier(.16,.84,.36,1);
  pointer-events: none;
  z-index: 0;
}
.form__row:not(.form__row--check):focus-within::before {
  opacity: 1;
  transform: scale(1);
}
.form__row > * { position: relative; z-index: 1; }
/* the focused row must sit above later rows so the country dropdown
   is not painted over by the consent block or the submit button */
.form__row:focus-within { z-index: 20; }

.form__label {
  display: block;
  margin: 0 0 7px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist);
}
.form__input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;             /* ≥16px stops iOS zoom-on-focus */
  color: var(--white);
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form__input::placeholder { color: #6C63A0; }
.form__input:focus {
  outline: none;
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(237,26,244,.18);
}
.form__input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(255,133,119,.16);
}

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

/* ---------- honeypot (spam trap) ----------
   display:none, NOT left:-9999px: off-screen honeypots get autofilled by
   Chrome/Edge and silently block real signups. */
.hp-row { display: none !important; }

/* ---------- consent ---------- */
.form__row--check { margin-top: 4px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 22px;
  cursor: pointer;
  font-size: 13px;
  color: var(--mist);
  line-height: 1.55;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--flare);
  cursor: pointer;
}
.form__check a { color: var(--flare-lo); text-underline-offset: 2px; }

/* ---------- submit: the bloom, condensed into a bar ---------- */
.btn-signup {
  display: block;
  width: 100%;
  cursor: pointer;
  color: var(--white);
  background: linear-gradient(96deg, var(--indigo) 0%, var(--violet) 42%, var(--flare) 100%);
  background-size: 160% 100%;
  background-position: 0% 50%;
  border: 0;
  border-radius: 5px;
  padding: 0;
  box-shadow: 0 12px 28px -12px rgba(237,26,244,.65);
  transition: background-position .45s cubic-bezier(.16,.84,.36,1),
              transform .12s ease, box-shadow .12s ease;
}
.btn-signup .btn__text {
  display: block;
  padding: 15px 18px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn-signup:hover:not(:disabled) {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -12px rgba(237,26,244,.75);
}
.btn-signup:active { transform: translateY(0); }
.btn-signup:disabled {
  background: #2A2450;
  color: #8F86B8;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ---------- success state ---------- */
.panel__success { text-align: left; }
.panel__success .panel__lede { margin-bottom: 16px; }

/* The WhatsApp incentive: a rule in the group's own green ties the line to
   the button under it, so the "30 minutes early" hook reads as one unit
   with the CTA rather than as more body copy. */
.wa-hook {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--whatsapp);
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
}
.wa-hook strong { color: var(--whatsapp); font-weight: 700; white-space: nowrap; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--whatsapp);
  color: #06130a;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 13px 20px;
  border-radius: 5px;
  box-shadow: 0 10px 24px -10px rgba(37,211,102,.5);
  transition: transform .12s ease, filter .12s ease;
}
.btn-whatsapp:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-whatsapp svg { flex: 0 0 auto; }

/* ============================================================
   intl-tel-input (v25) — dark theme + searchable dropdown
   ============================================================ */
.iti { width: 100%; display: block; }
.iti input.form__input { padding-left: calc(52px + 0.7rem); } /* re-measured by repadPhone() */
.iti__selected-country {
  background: #0A0F1E;
  border-radius: 5px 0 0 5px;
  color: var(--white);
}
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: #151C38; }
.iti--separate-dial-code .iti__selected-dial-code { color: var(--white); }
.iti__selected-dial-code { color: var(--mist); font-size: 15px; }
.iti__arrow { border-top-color: var(--flare); }
.iti__arrow--up { border-bottom-color: var(--flare); }
.iti__dropdown-content {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 26px 54px -16px rgba(0,0,0,.9), 0 0 0 1px rgba(237,26,244,.10);
  color: var(--white);
  overflow: hidden;
}
.iti__search-input {
  width: 100%;
  background: var(--ink-3);
  color: var(--white);
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 15px;
}
.iti__search-input::placeholder { color: #6C63A0; }
.iti__search-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--flare); }
.iti__search-icon { display: none; }              /* remove magnifying-glass icon */
.iti__search-input { padding-left: 14px; }        /* reclaim the space it left */
.iti__country-list { background: var(--ink-2); }
.iti__country { color: var(--white); padding: 9px 12px; }
.iti__country:hover,
.iti__country.iti__highlight { background: linear-gradient(90deg, rgba(237,26,244,.20), rgba(43,23,142,.30)); }
.iti__dial-code { color: var(--mist); }
.iti__country-name { color: var(--white); }
/* the dropdown must sit above the panel */
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Hidden state must not depend on the vendor stylesheet having loaded */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   FOOTER (full width, basslayerz design)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(6,11,22,.66);
  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(--flare-lo); }
.site-built { margin: 0; }
.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;
}
.site-built a:hover { border-color: var(--flare); color: var(--white); }
.site-built img { display: block; opacity: .9; }

/* ============================================================
   RESPONSIVE — two columns on wider screens
   ============================================================ */
@media (min-width: 880px) {
  .stage__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
  .poster { justify-self: end; max-width: 540px; }
  .panel  { justify-self: start; }
  .foot { justify-content: space-between; }
}

@media (max-width: 879px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* very narrow screens: keep the success title off two awkward lines */
@media (max-width: 360px) {
  .panel__title { font-size: 1.75rem; }
}

/* ============================================================
   PHONE LANDSCAPE / SHORT VIEWPORTS
   A sideways phone is only ~360-430px tall, and several of them
   (667x375, 844x390) sit BELOW the 880px two-column breakpoint,
   so they would get the stacked layout: poster filling the screen
   and the form pushed under the fold. Force the split here and
   size the poster off the viewport HEIGHT instead of its width,
   then compress the panel so eyebrow through Sign Up clears the
   fold. Placed after the desktop block so it wins at equal
   specificity.
   ============================================================ */
@media (orientation: landscape) and (max-height: 540px) {
  .stage { padding: 14px clamp(14px, 3vw, 28px); align-items: center; }
  .stage__inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
  }

  /* width:auto + max-height lets the browser scale the poster
     proportionally to whichever constraint bites first */
  .poster { justify-self: end; width: auto; max-width: none; }
  .poster img {
    width: auto;
    height: auto;
    max-width: 38vw;
    max-height: calc(100svh - 96px);
  }

  .panel { justify-self: start; max-width: 560px; }
  .panel__inner { padding: 16px 18px; }

  .eyebrow { margin-bottom: 10px; gap: 8px; font-size: 9.5px; letter-spacing: .16em; }
  .eyebrow span { flex: 0 0 16px; }
  .panel__lede { margin-bottom: 7px; font-size: 12.5px; max-width: none; }
  .panel__lede--last { margin-bottom: 13px; }
  .form__row { margin-bottom: 10px; }
  .form__label { margin-bottom: 4px; font-size: 10px; }
  .form__input { padding: 9px 12px; }   /* font-size stays 16px: iOS zoom-on-focus guard */
  .form__check { margin-bottom: 12px; gap: 9px; font-size: 11.5px; line-height: 1.45; }
  .form__check input { width: 16px; height: 16px; }
  .btn-signup .btn__text { padding: 11px 16px; font-size: 1.02rem; }

  /* success state has to clear the fold too */
  .panel__title { font-size: 1.55rem; }
  .panel__title::after { margin-top: 10px; }
  .panel__success-note { margin-bottom: 8px; font-size: 13px; }
  .wa-hook { margin-bottom: 9px; padding-left: 10px; font-size: 12px; }
  .btn-whatsapp { padding: 10px 16px; font-size: 14px; }

  .foot { padding: 10px clamp(14px, 3vw, 28px) 12px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .poster__frame, .panel { animation: none; }
  .form__row::before { transition: opacity .01ms; transform: none; }
  .btn-signup { transition: none; }
  * { scroll-behavior: auto; }
}