/* ============================================================
   CRAIG DAVID PRESENTS TS5 - On The Beach Great Yarmouth, Sat 19 Jun 2027
   /craigdavid/ folder of onthebeach-greatyarmouth.com.

   The sun runs the page. The client's real sky is the ground; sun, Craig and
   lockup sit straight on it, unboxed. The sign-up is a second sun: a yellow panel
   with generous round corners.
   Round everything: pill fields, pill CTA, countdown in little suns.

   Colours sampled from the layers: #10275A top of the sky, #5D82D1 "many more"
   cobalt, #FFCC00 disc.png, #F6F4E4 horizon haze, #AB7471 foot of the plate.
   Archivo variable: condensed heavy caps for headings (the ON THE BEACH logo's
   shape), normal width for reading.

   Motion: the sun rises once, then the outer ring spins for good. Nothing else moves.

   Type over a FIXED plate only stays registered if both are fixed, so on desktop
   the art is position:fixed too and the panel scrolls beside it.
   ============================================================ */
@font-face {
  font-family: "Archivo";
  src: url("/craigdavid/assets/fonts/Archivo-wdth.woff2?v=20261105-17") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
:root {
  --navy: #10275A;
  --cobalt: #5D82D1;
  --sand: #AB7471;
  --haze: #F6F4E4;
  --sun: #FFCC00;
  --panel: #FFCC00;
  --field: #FFFFFF;
  --ink: #10275A;
  --paper: #FFFFFF;
  --mist: #DCE4F4;
  --mist-dim: #B4C2E0;
  --line: rgba(255,255,255,.28);
  --yellow: #FFCC00;
  --yellow-hi: #FFDD4D;
  --peach: #FFCC00;
  --danger: #FFC2B5;
  --whatsapp: #25D366;
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  position: relative;
  min-height: 100svh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }

/* Phones: the poster plate at the top of the stage, full width, so the art sits on the
   light sky, clouds and haze as on the poster. The art scales in vw, so the plate fades
   out in vw too: starts just under "MANY MORE" (foot of the art at 105.8vw), solid navy
   before the panel's middle, and everything under that is navy at any page length.
   .bg (the fixed desktop plate) only exists in the two-up blocks. No fixed backgrounds
   here: fixed stops at Safari's floating toolbar (gotcha 39). */
.bg { display: none; position: absolute; inset: 0; z-index: -1; }
.stage { position: relative; z-index: 0; }
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, transparent 106.5vw, var(--navy) 122vw),
    url("/craigdavid/assets/images/plate.webp?v=20261105-17") center top / 100% auto no-repeat,
    var(--navy);
}
/* Dark blue until the background has loaded (inline script in <head> adds .wait and
   removes it on load). */
html.wait .bg, html.wait .stage::before { background: var(--navy); }
.page { display: flex; flex-direction: column; min-height: 100svh; overflow-x: clip; }  /* the halo must never widen the page */
.stage { flex: 1 0 auto; padding-bottom: 24px; }

/* ---------- the art: a box = PSD x 172-2190, y 119-2500 of the 2362x3150 poster.
   Every layer below is its PSD position as a % of that box. ---------- */
.art {
  position: relative;
  width: 85.44vw;
  margin: 5.04vw auto 0;
  aspect-ratio: 2018 / 2381;
}
.art img { display: block; }
.art > img, .art__lockup { position: absolute; height: auto; margin: 0; }
.art__ring   { left: 9.32%;  top: 13.4%;  width: 79.73%; }
.art__disc   { left: 18.33%; top: 21.92%; width: 61.35%; }
.art__craig  { left: 5.1%;   top: 12.89%; width: 80.27%; }
.art__top    { left: .545%;  top: .42%;   width: 98.6%; }
.art__lockup { left: 17.15%; top: 51.91%; width: 65.31%; }
.art__lockup img { width: 100%; height: auto; }
.art__many   { left: 19.47%; top: 97.06%; width: 60.66%; }

/* Sun rises once, then the ring spins for good. ring-spin MUST name its `from`: after
   ring-settle the underlying value is a three-function list, so a bare `to` falls back
   to matrix interpolation and rotate(360deg) IS the identity matrix: "running", never
   turns. transform-origin = the ring's fitted centre, not its box centre, or it wobbles. */
.art__ring { transform-origin: 49.36% 50.61%; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .art__disc  { animation: sun-rise 1.5s cubic-bezier(.16,.84,.3,1) .15s both; }
  .art__ring  { animation: ring-settle 1.9s cubic-bezier(.16,.84,.3,1) .15s both, ring-spin 26s linear 2.05s infinite; }
  .art__craig { animation: craig-in 1.4s cubic-bezier(.16,.84,.3,1) .4s both; }
  .art__lockup { animation: lift-in .9s ease-out .85s both; }
  .signup { animation: panel-rise 1.1s cubic-bezier(.16,.84,.3,1) .5s both; }
}
@keyframes sun-rise    { from { transform: translateY(34%) scale(.9); opacity: 0; } }
@keyframes ring-settle { from { transform: translateY(14%) rotate(-40deg) scale(.86); opacity: 0; } }
@keyframes ring-spin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes craig-in    { from { transform: translateY(9%) scale(.97); opacity: 0; } }
@keyframes lift-in     { from { transform: translateY(6%); opacity: 0; } }
@keyframes panel-rise  { from { transform: translateY(44px); opacity: 0; } }

/* ---------- the sign-up sun ---------- */
.signup {
  position: relative;
  isolation: isolate;
  width: calc(100% - 2 * var(--gutter));
  max-width: 470px;
  margin: 8vw auto 0;
}
.panel {
  /* everything in the panel is navy on sun; the engine's form block reads these */
  --paper: #10275A;
  --mist: #10275A;
  --mist-dim: #3A4A72;
  --line: rgba(16,39,90,.28);
  --peach: #10275A;
  --yellow: #10275A;      /* primary button + active step */
  --yellow-hi: #1C3A80;
  --ink: #FFCC00;         /* text on those */
  --danger: #7E1900;      /* 6.6:1 on the sun */
  position: relative;
  color: #10275A;
  background: radial-gradient(120% 62% at 50% 0, #FFE14D 0, #FFCC00 58%, #F9BE00 100%);
  border-radius: 44px;
  box-shadow: 0 0 70px rgba(255,204,0,.42);
}
.panel__inner { padding: 24px 22px 24px; }
.panel__state { display: none; text-align: center; }
.panel[data-form-state="idle"]    .panel__idle,
.panel[data-form-state="otp"]     .panel__otp,
.panel[data-form-state="success"] .panel__success { display: block; }
.panel__title {
  margin: 0 0 12px;
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(2.3rem, 12.6vw, 3.5rem);  /* one line: the title is 5.96em wide */
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #10275A;
}
.panel__title em { font-style: normal; }

/* ---------- sale dates + presale clock ---------- */
.sale { margin: 0 0 12px; }
.sale__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sale__dates p { margin: 0; line-height: 1.2; font-size: 14.5px; font-weight: 600; }
.sale__dates strong { display: block; font-stretch: 62%; font-weight: 800; font-size: 19px; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.sale__clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 64px));
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
}
.sale__clock span {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #10275A;
}
.sale__clock b { font-stretch: 75%; font-weight: 800; font-size: 25px; line-height: 1; color: #FFCC00; font-variant-numeric: tabular-nums; }
.sale__clock i { font-style: normal; font-size: 10px; line-height: 1.2; font-weight: 600; color: #FFF; }
.sale__live { display: none; margin: 10px 0 0; font-stretch: 62%; font-weight: 800; font-size: 24px; text-transform: uppercase; }
.is-live .sale__clock { display: none; }
.is-live .sale__live { display: block; }

/* ============================================================
   STEP SPINE - numbered because it IS a sequence:
   form -> SMS code -> email confirm.
   ============================================================ */
.spine {
  display: flex;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.spine__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px 8px;
  font-weight: 700;
  font-size: 12px;
  color: var(--mist-dim);
  transition: color .25s ease, background-color .25s ease;
}
.spine__step + .spine__step { border-left: 1px solid var(--line); }
.spine__n {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}
.spine__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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(--paper);
  background: transparent;
}
.panel[data-form-state="idle"]    .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="otp"]     .spine__step:nth-child(2) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(3) .spine__n {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}
.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(--peach);
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n {
  font-size: 0;                    /* hide the digit, keep the ring */
  border-color: var(--peach);
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n::after {
  content: "";
  width: 7px; height: 4px;
  border: 1.5px solid var(--peach);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
@media (max-width: 400px) {
  .spine__step { font-size: 11px; gap: 5px; padding: 8px 3px 7px; }
  .spine__n { width: 15px; height: 15px; }
}

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__lede {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--mist);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--paper); font-weight: 700; }
.panel__success-note { margin: 0 0 12px; color: var(--peach); 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(--paper);
  background: var(--field);        /* OPAQUE - see the autofill rule below */
  border: 1px solid rgba(194,211,212,.30);
  border-radius: 2px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: var(--mist-dim); opacity: 1; }
.form__input:focus {
  outline: none;
  border-color: var(--peach);
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
}
.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(--paper) !important;
  caret-color: var(--paper);
  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(--mist);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  accent-color: var(--yellow);
  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(--mist); }
.form__note a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.form__note a:hover { color: var(--peach); }

.form__resend {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--mist-dim);
  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(--mist-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;
  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: 3px;
  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(--ink); background: var(--yellow); }
.btn--primary:hover:not(:disabled) { background: var(--yellow-hi); }
.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(--mist); }
.wa-hook strong { color: var(--paper); font-weight: 700; }

/* ============================================================
   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 rgba(255,255,255,.45);
  border-radius: 3px;
  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(--paper);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.30);
}
.iti__search-input::placeholder { color: var(--mist-dim); }
.iti__search-input:focus { outline: none; background: #0E1A24; }
.iti__country-list { background: var(--panel); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--paper);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(134,231,232,.16); }
.iti__dial-code { color: var(--mist-dim); }
.iti__country-name { color: var(--paper); }
.iti__selected-country { border-radius: 3px 0 0 3px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(134,231,232,.14); }
.iti__selected-dial-code { color: var(--paper); font-family: var(--font); font-size: 15px; }
.iti__arrow { border-top-color: var(--mist-dim); }
.iti__arrow--up { border-bottom-color: var(--mist-dim); }




/* ============================================================
   THIS BUILD: the round form on the sun.
   ============================================================ */
.spine { justify-content: center; gap: 12px; margin: 0 auto 8px; border: 0; border-radius: 0; overflow: visible; }
.spine__step { flex: 0 0 auto; padding: 0; gap: 4px; font-size: 12px; font-weight: 700; color: var(--mist-dim); }
.spine__step + .spine__step { border-left: 0; }
.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) { background: none; color: #10275A; }

/* Done steps: a tick drawn ON the circle, so it is centred by background-position and
   nothing in the engine's ::after tick can move it. Path bbox centred on 8,8 of 16. */
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n {
  background: #10275A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.1 6.5 11.4 12.8 4.6' fill='none' stroke='%23FFCC00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  border-color: #10275A;
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n::after { display: none; }

.panel__lede { max-width: 38ch; margin: 0 auto 12px; font-size: 15px; font-weight: 500; line-height: 1.4; color: #10275A; }
.panel__lede--last { margin-bottom: 16px; }
.panel__lede strong { color: #10275A; }
.form { text-align: left; }
.form__row { margin-bottom: 9px; }
.form__label {
  position: static;
  display: block;
  width: auto; height: auto;
  margin: 0 0 3px 18px;
  overflow: visible;
  clip: auto;
  font-size: 13px;
  font-weight: 700;
  color: #10275A;
}
.form__input {
  padding: 12px 20px;
  color: #10275A;
  background: #FFF;
  border: 2px solid #10275A;
  border-radius: 999px;
}
.form__input::placeholder { color: #5C6B8C; }
.form__input:focus { border-color: #10275A; box-shadow: 0 0 0 3px rgba(16,39,90,.3); }
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-text-fill-color: #10275A !important;
  caret-color: #10275A;
}
.form__input--otp { text-align: center; }
.form__error { margin-left: 18px; font-weight: 600; }
.form__row--check { margin: 12px 0; }
.form__check { font-size: 13px; line-height: 1.4; font-weight: 500; color: #10275A; }
.form__check input { accent-color: #10275A; }
.form__note { margin: 6px 0 0 29px; font-size: 12.5px; line-height: 1.4; color: #10275A; }
.form__note a { color: #10275A; font-weight: 600; }
.form__resend { color: #10275A; }
.panel__success-note { color: #10275A; font-weight: 600; }
.wa-hook { color: #10275A; margin: 12px 0 10px; }

.btn { border-radius: 999px; font-stretch: 75%; font-weight: 800; font-size: 21px; letter-spacing: .03em; text-transform: uppercase; }
.btn:focus-visible { outline: 3px solid #10275A; outline-offset: 3px; }

/* intl-tel-input, navy on white to match the field */
.iti__dropdown-content { background: #FFF; border: 2px solid #10275A; border-radius: 18px; box-shadow: 0 18px 40px -14px rgba(5,14,40,.7); }
.iti__search-input { color: #10275A; background: #EEF2FA; border-bottom: 1px solid #C9D3E8; }
.iti__search-input::placeholder { color: #5C6B8C; }
.iti__search-input:focus { background: #E3E9F6; }
.iti__country-list { background: #FFF; }
.iti__country, .iti__country-name { color: #10275A; }
.iti__dial-code { color: #4F5D7C; }
.iti__country:hover, .iti__country.iti__highlight { background: rgba(255,204,0,.32); }
.iti__selected-country { border-radius: 999px 0 0 999px; padding-left: 6px; }
.iti__selected-country:hover, .iti__selected-country-primary:hover { background: rgba(255,204,0,.28); }
.iti__selected-dial-code { color: #10275A; }
.iti__arrow { border-top-color: #10275A; }
.iti__arrow--up { border-bottom-color: #10275A; }

/* WhatsApp: a green sun in a navy pill */
.btn--whatsapp {
  justify-content: flex-start;
  gap: 12px;
  margin-top: 4px;
  padding: 6px 18px 6px 6px;
  min-height: 56px;
  color: #FFF;
  background: #10275A;
  font-size: clamp(1.02rem, 4.6vw, 1.22rem);
  letter-spacing: .02em;
}
.btn--whatsapp .btn__icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; color: #06301A; background: var(--whatsapp); }
.btn--whatsapp .btn__text { flex: 1 1 auto; text-align: center; }
.btn--whatsapp:hover { filter: none; background: #1C3A80; }

/* Organisers: the poster's own block, white, on the beach in every layout. */
.orgs { display: block; width: 136px; margin: 22px auto 0; }
.orgs { height: auto; filter: drop-shadow(0 0 6px rgba(11,28,68,.9)) drop-shadow(0 1px 14px rgba(11,28,68,.75)); }

/* ---------- footer: the house format ---------- */
.foot {
  flex-shrink: 0;
  width: 100%;
  padding: 14px 24px 18px;
  background: var(--navy);
  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(--mist); }
.foot__legal a { color: var(--mist); text-decoration: none; }
.foot__legal a:hover { color: var(--sun); }
.foot__links a + a,
.foot__legal [data-louder-consent-open] { margin-left: .75em; padding-left: .85em; border-left: 1px solid var(--line); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--mist);
  text-decoration: none;
  transition: border-color .18s ease;
}
.site-built a:hover { border-color: var(--sun); }
.site-built img { display: block; opacity: .9; }
.foot a:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__right { justify-content: center; }
}
@media (max-width: 480px) {
  .foot { flex-direction: column; gap: 10px; padding-bottom: 22px; }
  .foot__right { flex-direction: column; gap: 10px; }
}

/* ---------- two-up: the full desktop plate, art + panel side by side ----------
   The plate is cover + bottom anchored, so its height is --bgh and the haze band
   sits a fixed fraction up from the bottom. --b stands the art's foot ("MANY MORE
   TO BE ANNOUNCED") on that band at every window shape, as on the poster. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  :root {
    --bgh: max(100vh, 65.65vw);
    --b: calc(var(--bgh) * .212);
    --pw: clamp(390px, 30vw, 440px);
    --gap: clamp(36px, 5vw, 96px);
    --art-h: min(calc(100vh - var(--b) - 14px), calc((100vw - var(--pw) - var(--gap) - 60px) / .8476));
    --art-w: calc(var(--art-h) * .8476);
    --left: calc((100vw - var(--art-w) - var(--gap) - var(--pw)) / 2);
  }
  .stage::before { display: none; }
  .bg {
    display: block;
    position: fixed;
    background: var(--navy) url("/craigdavid/assets/images/bg-desktop.webp?v=20261105-17") center bottom / cover no-repeat;
  }
  .art {
    position: fixed;
    left: var(--left);
    bottom: var(--b);
    width: var(--art-w);
    margin: 0;
  }
  /* centred on the beach between the art's foot and the footer */
  .orgs {
    position: fixed;
    left: calc(var(--left) + var(--art-w) / 2 - 66px);
    bottom: calc(52px + (var(--b) - 52px - 73px) / 2);
    width: 132px;
    margin: 0;
  }
  .stage {
    display: flex;
    align-items: center;
    padding: 34px 0 18px calc(var(--left) + var(--art-w) + var(--gap));
  }
  .signup { width: var(--pw); max-width: none; margin: 0; }
  .panel__inner { padding: 26px 26px 24px; }
  .panel__title { font-size: 3.6rem; }
}
/* Laptops: keep the whole panel on one screen. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) and (max-height: 780px) {
  .stage { padding-top: 24px; padding-bottom: 10px; }
  .panel__inner { padding: 16px 24px 16px; }
  .spine { margin-bottom: 4px; }
  .panel__title { font-size: 2.8rem; margin-bottom: 8px; }
  .sale__clock { grid-template-columns: repeat(4, minmax(0, 50px)); margin-top: 8px; }
  .sale__clock b { font-size: 20px; }
  .sale__clock i { font-size: 9px; }
  .form__row { margin-bottom: 6px; }
  .form__input { padding: 8px 18px; }
  .panel__lede { font-size: 14px; margin-bottom: 8px; }
  .btn { padding: 11px 16px; font-size: 19px; }
}

/* ---------- landscape phones (gotcha 27): same fixed pairing, plate slid down
   65px so the haze band sits lower and the art can stand taller. ---------- */
@media (min-width: 560px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  :root {
    --pw: 330px;
    --gap: 34px;
    --b: 56px;
    --art-h: calc(100svh - 64px);
    --art-w: calc(var(--art-h) * .8476);
    --left: max(14px, calc((100vw - var(--art-w) - var(--gap) - var(--pw)) / 2));
  }
  .stage::before { display: none; }
  .bg {
    display: block;
    position: fixed;
    background: var(--navy) url("/craigdavid/assets/images/bg-desktop.webp?v=20261105-17") center calc(100% + 65px) / cover no-repeat;
  }
  .art { position: fixed; left: var(--left); bottom: var(--b); width: var(--art-w); margin: 0; }
  .orgs { position: fixed; left: calc(var(--left) + var(--art-w) / 2 - 40px); bottom: 4px; width: 80px; margin: 0; }
  .stage { display: block; padding: 24px 0 10px calc(var(--left) + var(--art-w) + var(--gap)); }
  .signup { width: var(--pw); max-width: none; margin: 0; }
  .panel__inner { padding: 14px 18px 16px; }
  .panel__title { font-size: 2.4rem; margin-bottom: 6px; }
  .sale__clock { grid-template-columns: repeat(4, minmax(0, 46px)); margin-top: 6px; }
  .sale__clock b { font-size: 18px; }
  .sale__clock i { font-size: 8.5px; }
  .form__row { margin-bottom: 6px; }
  .form__input { padding: 8px 16px; }
  .btn:not(.btn--whatsapp) { padding: 10px 16px; font-size: 18px; }
  .foot { padding: 8px 14px 10px calc(var(--left) + var(--art-w) + var(--gap)); background: var(--navy); justify-content: flex-start; }
}