/* ============================================================
   getWorth Live Auction

   All five sections are built:
     1 Hero            dark, split field
     2 Campaign scenes dark, two snap scenes
     3 Event Details   white editorial poster, ink arc into Application
     4 Application     ink arc into a white field
     5 Footer          dark, three columns

   Value rhythm is deliberate: dark, dark, dark, white, white, dark.
   ============================================================ */


/* ------------------------------------------------------------
   Tokens

   COLOUR: campaign-extracted WORKING values, sampled directly from
   files in source-assets/. These are NOT official getWorth brand
   colours. Replace immediately if a brand guide is supplied.

   TYPEFACE: Figtree is a TEMPORARY development stand-in. The real
   getWorth faces are unconfirmed (open client question 1). Swapping
   --font here changes the whole site in one edit.
   ------------------------------------------------------------ */
:root {
  --ink:        #1C1E2A;   /* flat field, sampled from Carousel 2 - Landscape 4 */
  --studio:     #121218;   /* dark studio, measured mean of the four plate top rows */
  --studio-lift: #1A1C26;  /* the cropped campaign ellipse, one step off studio */
  --lime:       #DEF22B;   /* CTA + single-word emphasis on DARK; do not change */
  --lime-press: #E5FF00;          /* dark CTA hover/press, one step brighter than --lime */
  --lime-on-light: #EAFF00;       /* lime for white surfaces: Event Details 200, the "\", and the Submit button */
  --lime-on-light-press: #F4FF45; /* Submit button hover/press: brighter still, not darker */
  --paper:      #FFFFFF;
  --off-white:  #EEEEEE;   /* the campaign's light field, sampled from the closing cards */
  --muted:      #C9CCD6;   /* 10.1:1 on --ink */

  --font: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Campaign scenes snap; the application form deliberately does not.
   `proximity` rather than `mandatory`: the form below carries no snap area,
   and a mandatory scroller pulls back to the last scene instead of letting
   the user reach it. `scroll-snap-stop: always` on each scene still gives the
   one-gesture-one-scene feel without trapping anyone. */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

/* `hidden` first as the fallback, then `clip`, on both html and body.
   Verified in Chrome that this still scrolls vertically. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 16px/1.5 var(--font);
  color: #1a1a1a;
  background: #fafafa;
}

/* Visually hidden, still read aloud. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
}

.skip:focus {
  left: 0;
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--lime);
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}


/* ------------------------------------------------------------
   1. HERO

   Wide  : photographic paddle zone left, flat ink field right.
   Tall  : photographic paddle zone above, flat ink field below,
           joined by the campaign's downward-opening arc.

   The live copy never sits over the photograph. That is the
   campaign's own rule (subject one region, copy the other) and it
   is also why no scrim or gradient is needed anywhere here.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 58fr 42fr;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font);
  color: var(--paper);
  background: var(--ink);
  /* Structural only. The hero is the opening scene; no visual change. */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero__media {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);   /* own layer; also fixes clipping of the scaled child */
}

/* The image is taken out of flow so it can never size its own container.
   In the split layout the grid row is auto-sized, so `height: 100%` had
   nothing definite to resolve against and the image fell back to its
   intrinsic height (531.74 / 1.2222 = 435.05px), pushing the row past
   100svh on landscape phones. Absolutely filling the media box removes the
   image from layout entirely, so the row is driven only by the hero's
   min-height, at every breakpoint. This also kills the inline <picture>
   baseline gap. */
.hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;   /* protects the paddle: cropping only ever eats the arm */
}

.hero__field {
  display: flex;
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3.2vw, 3.25rem);
}

.hero__copy {
  width: 100%;
  max-width: 40rem;
}

/* Emphasis is by colour, never weight. One lime word per line, maximum. */
.lime {
  color: var(--lime);
}

/* The backslash is a brand glyph, not punctuation. Kerned deliberately,
   hidden from screen readers (a comma is announced in its place). */
.bs {
  color: var(--lime);
  font-weight: 600;
  padding-inline: 0.14em;
}

.hero__lead {
  margin: 0;
  font-size: clamp(1.85rem, 3.1vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.024em;
  max-width: 22ch;
}

.hero__range {
  margin: 0.6rem 0 0;
  font-size: clamp(1.05rem, 1.42vw, 1.55rem);
  font-weight: 400;
  line-height: 1.3;
  max-width: 24ch;
}

/* Date and venue stay full white, as they are in the campaign's own banner. */
.hero__when {
  margin: 1.8rem 0 0;
  font-size: clamp(0.92rem, 1.12vw, 1.22rem);
  font-weight: 400;
  line-height: 1.45;
  max-width: 32ch;
}

.hero__seats {
  margin: 1.9rem 0 0;
  font-size: clamp(1.05rem, 1.38vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  max-width: 24ch;
}

.hero__deposit {
  margin: 1.05rem 0 0;
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
  max-width: 38ch;
}

/* Lime pill. No border, no shadow, no gradient, no icon. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 1.05rem 2.35rem;
  font-family: inherit;
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--lime);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}

.cta:hover {
  background: var(--lime-press);
}

/* The pill is already lime, so its focus ring is paper for separation. */
.cta:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
}


/* --- Tall formats: paddle above, flat field below, arc between --- */
@media (orientation: portrait), (max-width: 599px) {
  .hero {
    display: block;
    min-height: 0;
  }

  .hero__media {
    height: 56vh;
    height: 56svh;
    min-height: 320px;
    border-bottom-left-radius: 50% 14%;
    border-bottom-right-radius: 50% 14%;
  }

  .hero__img {
    object-position: center top;
  }

  .hero__field {
    padding: clamp(1.5rem, 5.5vw, 2.25rem) 1.25rem clamp(2rem, 7vw, 3rem);
    text-align: center;
  }

  .hero__when {
    margin-top: 1.35rem;
  }

  .hero__seats {
    margin-top: 1.45rem;
  }

  .hero__copy {
    max-width: 32rem;
    margin-inline: auto;
  }

  .hero__lead,
  .hero__range,
  .hero__when,
  .hero__seats,
  .hero__deposit {
    margin-inline: auto;
  }

  .cta {
    width: 100%;
    max-width: 21rem;
  }
}

/* Portrait tablets are wide relative to their height, so cover crops the
   photograph vertically. The zone is given extra height because the paddle
   is the mark and is never cropped. 66svh is the measured minimum at 768px. */
@media (orientation: portrait) and (min-width: 600px) {
  .hero__media {
    height: 66vh;
    height: 66svh;
  }
}

/* Landscape phones: keep the split, just recover vertical room. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero__field {
    padding-block: 1.25rem;
  }

  .hero__when {
    margin-top: 1rem;
  }

  .hero__seats {
    margin-top: 1.1rem;
  }
}

@media (pointer: coarse) {
  .cta {
    min-height: 44px;
  }
}


/* --- Motion. One load entrance, one paddle settle. Nothing on scroll. --- */
@keyframes gwRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes gwSettle {
  from { transform: scale(1.025); }
  to   { transform: none; }
}

.hero__copy > * {
  animation: gwRise 0.72s var(--ease) backwards;
}

.hero__copy > *:nth-child(1) { animation-delay: 0.08s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.16s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.26s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.36s; }
.hero__copy > *:nth-child(5) { animation-delay: 0.44s; }
.hero__copy > *:nth-child(6) { animation-delay: 0.52s; }

.hero__img {
  animation: gwSettle 1.15s var(--ease) backwards;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}


/* ------------------------------------------------------------
   2. AUCTION COLLECTION  ("Campaign Scenes")

   Two full-height sections. Native scroll snap advances them; each animates
   when active, then rests. Car leads at 0ms, headline 150ms, support 220ms.

   The scenes carry emotional campaign copy only. The oversized cropped
   ellipse is now the sole compositional anchor, lifted enough to read as
   deliberate geometry rather than faint decoration. No border, no gradient,
   no card. Text overlaps it on purpose.
   ------------------------------------------------------------ */
.scene {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: start;
  overflow: hidden;
  background: var(--studio);
  color: var(--paper);
  font-family: var(--font);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Scene stack, at every width:
   photograph (0) under the ellipse (1) under the text (2).

   DESKTOP/TABLET:
   The photograph now fills the entire scene container instead of starting at
   36% / 39%. This removes the rectangular image-start seam completely.
   The wide desktop artwork uses object-fit: cover so the 16:9 composition
   fills the scene cleanly without horizontal letterboxing.

   The desktop assets should be composed like this:
     Scene A: vehicle on the RIGHT, text / ellipse on the LEFT.
     Scene B: vehicle on the LEFT, text / ellipse on the RIGHT.

   MOBILE:
   The approved full-scene photo layering remains in place and switches back to
   object-fit: cover for the dedicated 9:16 assets. */
.scene__anchor {
  position: absolute;
  z-index: 1;
  width: 80%;
  height: 68%;
  top: -20%;
  left: -25%;
  border-radius: 50%;
  background: var(--studio-lift);
}

.scene--b .scene__anchor {
  left: auto;
  right: -18%;
}

/* Full-scene photograph layer.
   There is deliberately NO top:36% / top:39% start line and NO border-radius
   mask. The image itself now fills the scene continuously. */
.scene__plate {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--studio);
}

/* Desktop / tablet: the new 16:9 artwork fills the entire scene.
   `cover` removes the horizontal letterbox gap that `contain` created on
   wide laptop viewports. The artwork has deliberate dark headroom, so a small
   top/bottom crop is acceptable and keeps the vehicle composition intact. */
.scene__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Match the supplied desktop compositions:
   Scene A vehicle on the right, Scene B vehicle on the left. */
.scene--a .scene__img { object-position: right center; }
.scene--b .scene__img { object-position: left center; }

.scene__content {
  position: relative;
  z-index: 2;
  width: min(92%, 78rem);
  margin-inline: auto;
  padding-top: clamp(3.5rem, 11vh, 8rem);
}

.scene--a .scene__content { text-align: left; }
.scene--b .scene__content { text-align: right; }

/* Desktop Scene B carries the largest display figure. Give that copy a little
   more breathing room from the top/right without changing Scene A or mobile. */
@media (min-width: 900px) and (orientation: landscape) {
  .scene--b .scene__content {
    padding-top: clamp(4.25rem, 13vh, 8rem);
    padding-right: clamp(1rem, 3vw, 3rem);
  }
}

.scene__title {
  margin: 0;
  display: grid;
  gap: 0.18em;
  justify-items: start;
}

.scene--b .scene__title { justify-items: end; }

.scene__kicker {
  display: block;
  font-size: clamp(0.78rem, 1.35vw, 1.05rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.scene__lead {
  display: block;
  font-size: clamp(2.1rem, 5.6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.scene__figure {
  display: block;
  font-size: clamp(3.2rem, 11.5vw, 9.5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.038em;
}

.scene__support {
  margin: clamp(0.9rem, 2vh, 1.5rem) 0 0;
  font-size: clamp(0.98rem, 1.45vw, 1.3rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  max-width: 34ch;
}


/* ---- Entrance. Enabled only once JS confirms motion is wanted. ---- */
.js-scenes .scene__img {
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1) 0ms,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
}

.js-scenes .scene__title {
  transition:
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) 150ms,
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;
}

.js-scenes .scene__support {
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1) 220ms,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}

.js-scenes .scene__anchor {
  transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1) 60ms;
}

.js-scenes .scene:not(.is-active) .scene__title,
.js-scenes .scene:not(.is-active) .scene__support,
.js-scenes .scene:not(.is-active) .scene__img {
  will-change: transform, opacity;
}

.js-scenes .scene:not(.is-active) .scene__title,
.js-scenes .scene:not(.is-active) .scene__support {
  opacity: 0;
  transform: translateY(24px);
}

.js-scenes .scene:not(.is-active) .scene__anchor { opacity: 0; }

.js-scenes .scene:not(.is-active) .scene__img {
  opacity: 0.88;
  transform: translateX(var(--from-x, -16%)) scale(1.04);
}

.scene--b { --from-x: 16%; }

.js-scenes .scene.is-active .scene__title,
.js-scenes .scene.is-active .scene__support {
  opacity: 1;
  transform: translateY(0);
}

.js-scenes .scene.is-active .scene__anchor { opacity: 1; }

.js-scenes .scene.is-active .scene__img {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (orientation: portrait), (max-width: 599px) {
  /* --- Mobile geometry ---
     The stack order (photo, curve, text) is now the shared one set above; only
     the geometry changes here. The photographic plate fills the whole scene and
     sits BEHIND the curved anchor, so there is no rectangular image-start edge.
     The dark anchor paints over the top of the photo; its curved lower edge is
     the only boundary. Text sits above both. Structural layering, no spacer /
     gradient / second curve. The z-index values are repeated for clarity and
     match the base rules exactly. */
  .scene__plate,
  .scene--b .scene__plate {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }

  .scene__anchor {
    width: 170%;
    height: 50%;
    top: -20%;
    left: -35%;
    right: auto;
    z-index: 1;   /* curved graphic paints over the photograph beneath it */
  }

  .scene--b .scene__anchor { left: -35%; right: auto; }

  .scene__content {
    padding-top: clamp(2.5rem, 8vh, 4.5rem);
    z-index: 2;   /* text above the anchor and the photo */
  }

  .scene--a .scene__content,
  .scene--b .scene__content { text-align: center; }

  .scene__title,
  .scene--b .scene__title { justify-items: center; }

  .scene__lead {
    font-size: clamp(1.95rem, 9.2vw, 3.2rem);
    max-width: none;
  }

  .scene__figure { font-size: clamp(3rem, 18.5vw, 5rem); }

  .scene__support { margin-inline: auto; }

  /* Mobile uses dedicated 9:16 artwork, so fill the full scene again.
     This intentionally overrides desktop `contain`; the approved mobile
     compositions already include the required dark headroom around the cars. */
  .scene__img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .scene--a .scene__img { object-position: 48% center; }
  .scene--b .scene__img { object-position: 70% center; }

  .js-scenes .scene:not(.is-active) .scene__img {
    transform: translateX(var(--from-x, -12%)) scale(1.03);
  }

  .scene--b { --from-x: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }

  .js-scenes .scene .scene__title,
  .js-scenes .scene .scene__support,
  .js-scenes .scene .scene__anchor,
  .js-scenes .scene .scene__img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}


/* ============================================================
   3. EVENT DETAILS

   The bridge, built as an editorial poster. White field (getWorth design
   correction, for stronger contrast), ordinary document flow, no snap, no
   immersive entrance. The five confirmed campaign facts are set at strong
   display scale and placed on a 12-column grid so the internal division shifts
   between rows (7/5, then 6/5). No isolated circle. One broad ink ellipse
   (.event::after) is full-bleed along the base and arcs a short way up into the
   field; the ink Application cap begins at the same edge, so the white to ink
   change is a single curved transition. Confirmed facts only.
   ============================================================ */
.event {
  position: relative;
  background: var(--paper);   /* #FFFFFF - getWorth design: stronger contrast, esp. around STRICTLY 200 SEATS */
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
}

.event__inner {
  position: relative;
  z-index: 1;
  width: min(90%, 68rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(3rem, 7vh, 4.5rem) clamp(5rem, 11vh, 7rem);
}

/* Each fact is one unit: a large statement, then a lighter qualifier. The two
   rows both split 7/5 at column 8; --fleet and --seats drop a controlled step
   so the four blocks read as an editorial spread, not a 2x2 table. */
.event__block {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.event__block--date  { grid-column: 1 / 8; }
.event__block--fleet { grid-column: 8 / 13; margin-top: clamp(0.75rem, 3vw, 2rem); text-align: right; align-items: flex-end; }
.event__block--value { grid-column: 1 / 8; }
.event__block--seats { grid-column: 8 / 13; margin-top: clamp(0.75rem, 3vw, 2rem); text-align: right; align-items: flex-end; }

.event__big {
  font-size: clamp(3.5rem, 10.5vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* The large 200 is the only lime on the white Event field; the deeper on-light
   lime (shared with the Submit button) holds its presence here. STRICTLY /
   SEATS stay ink. Flat colour, no shadow/glow. */
.event__block--seats .lime {
  color: var(--lime-on-light);
}

.event__mid {
  margin-top: 0.32em;
  font-size: clamp(1.05rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.event__pair {
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.event__conj {
  margin: 0.12em 0;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 600;
  text-transform: lowercase;
  color: #565C6C;          /* 6.5:1 on white */
}

.event__lead {
  margin-bottom: 0.55em;
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #565C6C;
}

.event__sub {
  margin-top: 0.7em;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  font-weight: 500;
  color: #363C4C;
}

.event__block--date .bs {
  color: var(--lime-on-light);   /* on the white Event field, not the dark-background --lime */
  font-weight: 800;
  padding-inline: 0 0.12em;
}

/* Count-up (event-count.js), progressive enhancement. The four animated
   metrics stack the live value over a hidden width-reserver in one grid cell,
   so the digits change without moving anything around them. Text alignment is
   inherited from the block, so each counter follows the section's responsive
   layout. With no JS the live value shipped in the HTML is simply what shows. */
.event .count {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
}

.event .count__w,
.event .count__v {
  grid-area: 1 / 1;
}

.event .count__w { visibility: hidden; }

/* One broad ink sweep: full-bleed along the base, a shallow centred arc up into
   the field, visually continuous with the ink Application cap immediately
   below. Not a decorative circle: it exists only to carry the transition. */
.event::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(3rem, 7vh, 5rem);
  background: var(--ink);
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

@media (max-width: 899px), (orientation: portrait) {
  .event__inner {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 8vw, 3.5rem);
    text-align: center;
    padding-block: clamp(3rem, 7vh, 4rem) clamp(7rem, 17vh, 9rem);
  }

  .event__block--date,
  .event__block--fleet,
  .event__block--value,
  .event__block--seats {
    grid-column: 1 / -1;
    margin-top: 0;
    text-align: center;
    align-items: center;
  }

  .event__big { font-size: clamp(3.25rem, 19vw, 5.5rem); }
  .event__pair { font-size: clamp(1.5rem, 7.5vw, 2.4rem); }
  .event__mid { font-size: clamp(1rem, 4.6vw, 1.5rem); }
}


/* ============================================================
   4. APPLICATION

   Value inverts here. The downward-opening arc is the campaign circle used as
   the transition. No snap alignment: this is an ordinary document section and
   must never trap the scroll.
   ============================================================ */
.apply {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  scroll-margin-top: 1rem;
}

/* Honeypot. Removed from the accessible tree in markup and pushed off-canvas
   here. It must never become visible: live spam protection, not decoration. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apply__cap {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3rem, 8vh, 5.5rem) 1.25rem clamp(3.5rem, 9vh, 6rem);
  border-bottom-left-radius: 50% 16%;
  border-bottom-right-radius: 50% 16%;
}

.apply__head {
  width: min(92%, 34rem);
  margin-inline: auto;
  text-align: center;
}

.apply__title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.apply__note {
  margin: 0.9rem 0 0;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.5;
  color: var(--muted);
}

/* Mobile: centre the Apply to Attend heading + note as one visual group inside
   the dark curved cap. Desktop/tablet geometry remains unchanged. */
@media (orientation: portrait), (max-width: 599px) {
  .apply__cap {
    display: grid;
    place-items: center;
    min-height: 29rem;
    padding:
      clamp(2.25rem, 6vh, 3rem)
      1.25rem
      clamp(2.75rem, 7vh, 3.75rem);
  }

  .apply__head {
    width: min(88%, 31rem);
    margin: 0 auto;
    text-align: center;
  }

  .apply__title,
  .apply__note {
    text-align: center;
  }
}

.apply__field {
  width: min(92%, 30rem);
  margin-inline: auto;
  padding: clamp(2.25rem, 6vh, 3.5rem) 0 clamp(3rem, 9vh, 5rem);
}

.apply .field { margin-bottom: 1.15rem; }

.apply label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.apply input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #767C8C;   /* 3:1 minimum for interface borders on paper */
  border-radius: 10px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.apply input:hover { border-color: #4E5464; }

.apply input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(28, 30, 42, 0.14);
}

.apply input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.apply .error {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #9E1B14;
}

/* Required acknowledgement. A real checkbox, native accent colour, its own
   visible focus ring; the label is the hit area and is fully clickable. */
.apply__ack {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
}

.apply__ack input {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.12rem 0 0;
  accent-color: var(--lime);
  cursor: pointer;
}

.apply__ack input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.apply__ack label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: #4A5060;          /* 7.4:1 on paper */
  cursor: pointer;
}

@media (pointer: coarse) {
  .apply__ack input { width: 1.4rem; height: 1.4rem; }
}

.apply button {
  width: 100%;
  margin-top: 1rem;
  padding: 1.05rem 2rem;
  font: inherit;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--lime-on-light);   /* white surface: matches the Event Details 200 */
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.22s var(--ease);
}

.apply button:hover { background: var(--lime-on-light-press); }

.apply button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.apply button[disabled] { opacity: 0.62; cursor: progress; }

.apply .status {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.apply .status.bad {
  color: #6E1710;
  background: #FBEAE8;
  border: 1px solid #E0A9A3;
}

/* ---- The finished state. The editable form is gone by this point; this is
        a confirmation composition, not a message strip. ---- */
.done {
  margin-top: 0.5rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: #F2F4F6;
  border: 1px solid #C9CFD8;
  border-radius: 16px;
  text-align: center;
}

.done:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.done__eyebrow {
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.done__reflabel,
.done__nextlabel {
  margin: 1.6rem 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4A5060;
}

/* Large, spaced and selectable in one click: this is the number the applicant
   will quote on their EFT. */
.done__ref {
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: #fff;
  border: 1px solid #C9CFD8;
  border-radius: 10px;
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;
}

.done__ref:empty { display: none; }

.done__body,
.done__next {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333A49;
}

/* The Next step block can carry two short lines (contact, then the deposit
   condition); a single newline in the server message separates them. */
.done__next { margin-top: 0.35rem; white-space: pre-line; }

.js-scenes .done {
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-scenes .done[hidden] { display: none; }

.done--enter { opacity: 0; transform: translateY(10px); }

@media (pointer: coarse) {
  .apply input,
  .apply button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-scenes .done { transition: none !important; }
  .done--enter { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   5. FOOTER
   ============================================================ */
.foot {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  padding: clamp(2.75rem, 7vh, 4rem) 1.25rem clamp(1.75rem, 4vh, 2.5rem);
}

.foot__grid {
  width: min(92%, 62rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* The official getWorth wordmark, on the dark field it was drawn for. */
.foot__logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 0 0.9rem;
}

.foot__line {
  margin: 0.4rem 0 0;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  line-height: 1.55;
  color: var(--muted);
}

.foot__line--strong {
  font-weight: 700;
  color: var(--paper);
}

.foot__line a {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.foot__line a:hover { color: var(--lime); }

.foot__line a:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

/* Venue address as a Maps link, kept in the footer's own voice: no underline,
   no link blue, just a quiet lift on hover and a real focus ring. */
.foot__addr {
  display: block;
  margin: 0.4rem 0 0;
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  line-height: 1.55;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.foot__addr:hover { color: var(--paper); }

.foot__addr:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  color: var(--paper);
}

/* Social: three restrained glyphs, muted until hover/focus. */
.foot__social {
  display: flex;
  gap: 0.9rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.foot__social a {
  display: inline-flex;
  color: var(--muted);
  transition: color 0.18s var(--ease);
}

.foot__social a:hover { color: var(--lime); }

.foot__social a:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
  border-radius: 4px;
  color: var(--paper);
}

@media (pointer: coarse) {
  .foot__social a { padding: 0.4rem; }
}

.foot__legal {
  width: min(92%, 62rem);
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 767px) {
  .foot__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    text-align: center;
  }

  .foot__logo { margin-inline: auto; width: 125px; }
  .foot__social { justify-content: center; }
  .foot__legal { text-align: center; }
}