/* ==========================================================================
   Electric Elf LLC — main.css
   Design system: premium on white through restraint and rhythm.
   Every value below comes from the spec. If a choice was not specified,
   the quieter option was taken.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   Self-hosted latin-subset variable woff2 (pulled from Google Fonts, OFL).
   Metric-adjusted fallbacks below are computed from the real font tables
   (see README) so there is zero layout shift while the webfont loads.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-adjusted fallback: Source Sans 3 vs Arial.
   size-adjust 85.92% measured; ascent/descent = hhea (1024 / -400) / size-adjust. */
@font-face {
  font-family: "Source Sans 3 Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 85.92%;
  ascent-override: 119.18%;
  descent-override: 46.55%;
  line-gap-override: 0%;
}
/* Metric-adjusted fallback: JetBrains Mono vs Consolas. */
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono");
  size-adjust: 109.13%;
  ascent-override: 93.47%;
  descent-override: 27.49%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* colour ---------------------------------------------------------------- */
  --white: #ffffff;
  --tint: #f7f6f9;              /* alternate section background */
  --plum: #210d2c;              /* darkest value on the page. no pure black. */
  --ink: #210d2c;
  --ink-2: #6a6275;             /* secondary text on light */
  --on-dark: #f3eff7;           /* warm off-white. never pure white on plum. */
  --on-dark-2: rgba(243, 239, 247, 0.64);
  --red: #d0303c;               /* buttons only */
  --red-hover: #b9242f;
  --red-border: #e8636c;
  --purple: #693e98;            /* structure, in small doses */
  --yellow: #fadb43;
  --green: #41ad49;
  --gold: #e3ad49;
  --warm-white: #fff1d0;        /* bulb string only */
  /* Non-text contrast (WCAG 1.4.11, 3:1). All page TEXT passes AA.
     Gold stars (2.03:1) and green checks (2.88:1) stay as they are — decided.
     TODO(Brandon): the input border moved from #D8D5DE to #B9B3C2, which
     measures 2.04:1 on white, not 3:1. #96919D is the first value on the same
     hue that clears it (3.07:1); #948DA0 gives a little headroom at 3.19:1.
     Say the word and it changes. */
  --input-border: #b9b3c2;
  --hairline: rgba(33, 13, 44, 0.1);        /* plum at 10% */
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --tint-4: rgba(33, 13, 44, 0.04);         /* placeholder ground */

  /* spacing scale — the ONLY layout spacing values used anywhere ----------- */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-128: 128px;

  /* grid ------------------------------------------------------------------ */
  --maxw: 1140px;
  --pad-x: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 10vw, 136px);    /* identical for every section */

  /* radii — three tiers, never mixed -------------------------------------- */
  --r-control: 6px;   /* buttons, inputs, chips */
  --r-card: 12px;     /* cards */
  --r-frame: 20px;    /* dark before/after module, photo containers */

  /* shadow — exactly two tokens, both plum-tinted ------------------------- */
  --shadow-card: 0 1px 2px rgba(33, 13, 44, 0.06),
                 0 12px 32px -16px rgba(33, 13, 44, 0.14);
  --shadow-pop: 0 2px 4px rgba(33, 13, 44, 0.08),
                0 24px 56px -20px rgba(33, 13, 44, 0.22);

  /* type ------------------------------------------------------------------ */
  --sans: "Source Sans 3", "Source Sans 3 Fallback", Arial, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Consolas,
    monospace;
  --f-display: clamp(2.6rem, 6vw, 4.25rem);
  --f-h2: clamp(1.9rem, 3.5vw, 2.75rem);
  --f-h3: 1.25rem;
  --f-lede: clamp(1.1rem, 2vw, 1.3rem);
  --f-body: 1.0625rem;
  --f-small: 0.875rem;
  --f-eyebrow: 0.72rem;
  --f-mono: 1rem;
  --f-mono-sm: 0.95rem;

  /* motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--f-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--purple);
  color: #ffffff;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
}
/* Balance applies to anything set at a heading scale, including the pull
   quotes and FAQ summaries, so no heading ends on an orphaned word. */
h1,
h2,
h3,
.display,
.h2,
.h3,
.faq summary {
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
  max-width: 66ch;              /* body text never exceeds 66 characters */
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure,
blockquote {
  margin: 0;
}

/* Focus rings — red on light sections, yellow on dark.
   Red is invisible against plum, so this is an accessibility requirement. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.on-dark :focus-visible,
.on-dark:focus-visible {
  outline-color: var(--yellow);
}

.skip-link {
  position: absolute;
  left: var(--s-8);
  top: var(--s-8);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--white);
  color: var(--ink);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-control);
  font-size: var(--f-small);
  font-weight: 600;
}
.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   -------------------------------------------------------------------------- */
.display {
  font-size: var(--f-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.h2 {
  font-size: var(--f-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.h3 {
  font-size: var(--f-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.lede {
  font-size: var(--f-lede);
  font-weight: 400;
  line-height: 1.5;
  max-width: 45ch;
  color: var(--ink-2);
}

.small {
  font-size: var(--f-small);
  font-weight: 400;
  line-height: 1.5;
}
.small-strong {
  font-size: var(--f-small);
  font-weight: 600;
  line-height: 1.5;
}

.eyebrow {
  font-size: var(--f-eyebrow);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--purple);
  margin: 0;
  max-width: none;
}

.mono {
  font-family: var(--mono);
  font-size: var(--f-mono);
  font-weight: 600;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.mono-sm {
  font-size: var(--f-mono-sm);
}

.muted {
  color: var(--ink-2);
}
.on-dark .muted {
  color: var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Every section carries exactly the same vertical padding. */
.section {
  padding-block: var(--section-y);
}
.section--tint {
  background: var(--tint);
}

/* eyebrow -> h2 is 16px, h2 -> lede is 12px. Margins, not gap, so that only
   scale values ever appear. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.section-head .h2 {
  margin-top: var(--s-16);
}
.section-head .lede {
  margin-top: var(--s-12);
}
.section-head--icon {
  flex-direction: row;
  align-items: center;
  gap: var(--s-16);
  flex-wrap: wrap;
}
.section-head--icon .head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.split {
  display: grid;
  gap: var(--s-64);
  align-items: start;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 55fr 45fr;
  }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  height: 56px;
  padding-inline: 28px;
  border-radius: var(--r-control);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease),
    box-shadow 160ms var(--ease), border-color 160ms var(--ease),
    color 160ms var(--ease);
}
@media (max-width: 767px) {
  .btn {
    height: 52px;
  }
}

.btn-primary {
  background: var(--red);
  color: #ffffff;
  border-color: var(--red-border);
}
.btn-primary:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
  /* the one specced component glow; not part of the elevation system */
  box-shadow: 0 8px 24px -8px rgba(208, 48, 60, 0.45);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: rgba(33, 13, 44, 0.04);
}
.on-dark .btn-outline {
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.on-dark .btn-outline:hover {
  background: rgba(243, 239, 247, 0.08);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-16);
}

.btn .icon {
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   7. ICONS — Lucide only, 20px, 1.75 stroke, round caps
   -------------------------------------------------------------------------- */
.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-check {
  color: var(--green);
}
/* Rating stars: same Lucide `star`, filled so five of them read as a rating
   rather than as five empty outlines. */
.icon-star {
  width: 14px;
  height: 14px;
  fill: var(--gold);
  stroke: var(--gold);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stars {
  display: inline-flex;
  gap: var(--s-4);
  vertical-align: -2px;
}


/* --------------------------------------------------------------------------
   8. HEADER + BULB STRING
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--plum);
  color: var(--on-dark);
  transition: box-shadow 200ms var(--ease);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-card);
}
.header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
}
.header-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.header-logo img {
  height: 48px;
  width: auto;
  display: block;
}
.header-right {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}
.header-hours {
  color: var(--on-dark-2);
  font-size: var(--f-small);
}
@media (max-width: 767px) {
  .header-hours {
    display: none;
  }
}
.header-phone {
  color: var(--on-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 44px;
  padding-inline: var(--s-8);
  border-radius: var(--r-control);
}
.header-phone:hover {
  color: var(--yellow);
}

/* The bulb string hangs off the bottom edge of the plum band. */
/* Four hues, and for each: the flat body, the darker rim that lifts it off a
   light ground, and the two-stop halo. Kept as custom properties so the header
   string and the hero swag share one definition and differ only in geometry. */
.bulbs i:nth-child(4n + 1) {
  --bulb: #fadb43;
  --bulb-rim: rgba(150, 122, 0, 0.3);
  --bulb-glow-1: rgba(250, 219, 67, 0.45);
  --bulb-glow-2: rgba(250, 219, 67, 0.2);
}
.bulbs i:nth-child(4n + 2) {
  --bulb: #41ad49;
  --bulb-rim: rgba(30, 92, 34, 0.3);
  --bulb-glow-1: rgba(65, 173, 73, 0.45);
  --bulb-glow-2: rgba(65, 173, 73, 0.2);
}
.bulbs i:nth-child(4n + 3) {
  --bulb: #fff1d0;
  --bulb-rim: rgba(166, 143, 88, 0.3);
  --bulb-glow-1: rgba(255, 241, 208, 0.45);
  --bulb-glow-2: rgba(255, 241, 208, 0.2);
}
.bulbs i:nth-child(4n + 4) {
  --bulb: #693e98;
  --bulb-rim: rgba(46, 26, 70, 0.3);
  --bulb-glow-1: rgba(105, 62, 152, 0.45);
  --bulb-glow-2: rgba(105, 62, 152, 0.2);
}

.bulbs {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  height: 18px;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.bulbs i {
  position: relative;
  flex: 0 0 26px;
  height: 18px;
}
/* The wire. A real 1.5px line across the whole strip, not a per-bulb stub.
   NOTE: the string hangs off the BOTTOM edge of the plum band, so this line
   is drawn on the white page, not on plum — white at .22 would be invisible
   here. Plum at .22 is the same weight against the ground it actually sits
   on. */
.bulbs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: 1.5px;
  background: rgba(33, 13, 44, 0.22);
}
/* Each bulb's short drop wire from that line. */
.bulbs i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 1.5px;
  height: 4px;
  margin-left: -0.75px;
  background: rgba(33, 13, 44, 0.22);
}
/* The bulb: flat body, glass highlight at the top left, rim, two-stop halo. */
.bulbs i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(
      circle at 32% 30%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 40%
    ),
    var(--bulb);
  box-shadow: 0 0 6px 2px var(--bulb-glow-1), 0 0 14px 4px var(--bulb-glow-2);
  animation: bulb-twinkle 3.2s ease-in-out infinite;
}
/* Seven duration/delay pairs against a four-colour cycle, so neighbours never
   share a pair and the string never pulses as one. Delays are negative so the
   strip is already mid-twinkle on first paint instead of lighting in a wave. */
.bulbs i:nth-child(7n + 1)::after { animation-duration: 2.2s; animation-delay: -0.4s; }
.bulbs i:nth-child(7n + 2)::after { animation-duration: 3.6s; animation-delay: -2.1s; }
.bulbs i:nth-child(7n + 3)::after { animation-duration: 2.9s; animation-delay: -1.2s; }
.bulbs i:nth-child(7n + 4)::after { animation-duration: 4.5s; animation-delay: -3s;   }
.bulbs i:nth-child(7n + 5)::after { animation-duration: 3.1s; animation-delay: -0.9s; }
.bulbs i:nth-child(7n + 6)::after { animation-duration: 4.1s; animation-delay: -2.6s; }
.bulbs i:nth-child(7n + 7)::after { animation-duration: 2.6s; animation-delay: -1.7s; }

@keyframes bulb-twinkle {
  0%,
  100% {
    opacity: 0.5;
    filter: brightness(0.85);
  }
  50% {
    opacity: 1;
    filter: brightness(1.15);
  }
}
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-copy > * {
  margin: 0;
}
/* Rhythm, deliberately per-step rather than one flex gap:
   eyebrow →16→ H1 →24→ sub →32→ button →12→ phone line. */
.hero-h1 {
  margin-top: var(--s-16);
}
/* The H1's first sentence carries a short bulb swag. It reuses .bulbs, so the
   colour cycle (yellow → green → warm white → purple) and the glow/stagger
   animation are the header's, unchanged — only the geometry and the cord
   colour differ, because this one hangs on a light ground. */
/* The hero swag. Same bulbs, light-ground wire, and a shallow arc. Its left
   and width are set by sizeHeroSwag() from the last rendered line of the H1,
   so it hugs the text instead of the H1's box. */
.hero-h1 {
  position: relative;
  /* The swag hangs from the last line and is 18px tall, so the H1 carries
     that much padding itself. Without it the swag would cross the kicker's
     glyphs; the 12px H1→kicker gap below is measured from this padded box. */
  padding-bottom: 20px;
}
.kicker {
  margin-top: var(--s-12);
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--purple);
}
.bulbs--swag {
  position: absolute;
  left: 0;
  right: auto;
  top: 100%;
  width: 60%;
  height: 18px;
  justify-content: space-between;
  overflow: visible;
}
.bulbs--swag i {
  flex: 0 0 10px;
}
/* Light ground: the straight wire is replaced by the arc below, and the drop
   wires and rim switch to plum. */
.bulbs--swag::after {
  display: none;
}
.bulbs--swag i::before {
  background: rgba(33, 13, 44, 0.35);
  height: 3px;
}
.bulbs--swag i::after {
  box-shadow: 0 0 0 1px var(--bulb-rim), 0 0 6px 2px var(--bulb-glow-1),
    0 0 14px 4px var(--bulb-glow-2);
}
/* The cord: a shallow droop, drawn as the low arc of an over-wide ellipse. */
.bulbs--swag::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  border-bottom: 1.5px solid rgba(33, 13, 44, 0.35);
  border-radius: 0 0 48% 48% / 0 0 100% 100%;
}
/* Bulbs ride the droop. */
.bulbs--swag i:nth-child(1),
.bulbs--swag i:nth-child(6) {
  transform: translateY(0);
}
.bulbs--swag i:nth-child(2),
.bulbs--swag i:nth-child(5) {
  transform: translateY(3px);
}
.bulbs--swag i:nth-child(3),
.bulbs--swag i:nth-child(4) {
  transform: translateY(4px);
}

.hero-sub {
  margin-top: var(--s-24);
  font-size: var(--f-lede);
  line-height: 1.5;
  max-width: 45ch;
  color: var(--ink-2);
}
.hero-cta {
  margin-top: var(--s-32);
}
.phone-line {
  margin-top: var(--s-12);
  font-family: var(--mono);
  font-size: var(--f-mono-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* The checklist moved to the lease section; same check-row treatment, set
   two-up on desktop so it reads as supporting detail under the cards. */
.lease-list {
  display: grid;
  gap: var(--s-12);
  margin-top: var(--s-32);
}
.lease-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  font-size: var(--f-body);
  max-width: 62ch;
}
.lease-list .icon {
  /* optically centres the 20px icon against a 1.0625rem/1.6 line */
  margin-top: var(--s-4);
}
@media (min-width: 900px) {
  .lease-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-32);
  }
}

/* Mobile: one column, DOM order is eyebrow, H1, sub, button, phone line,
   then the form card — nothing else sits above the card. Desktop: copy left,
   form card right. */
.hero-grid {
  display: grid;
  gap: var(--s-48);
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 55fr 45fr;
    grid-template-areas: "copy form";
    column-gap: var(--s-64);
    align-items: start;
  }
  .hero-copy {
    grid-area: copy;
  }
  .form-card {
    grid-area: form;
  }
}

/* --------------------------------------------------------------------------
   9b. TRUST STRIP
   One line under the hero. Middots are drawn by CSS so they never end up in
   the accessibility tree or in a copied selection.
   -------------------------------------------------------------------------- */
.trust-strip {
  background: var(--tint);
  padding-block: var(--s-16);
}
.trust-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-12);
  font-size: var(--f-small);
  font-weight: 600;
  color: var(--plum);
}
.trust-items li {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.trust-items li:not(:last-child)::after {
  content: "·";
  margin-left: var(--s-12);
  color: var(--ink-2);
  font-weight: 400;
}
.icon-trust {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--green);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Mobile: three short lines, left aligned, no middots. */
@media (max-width: 767px) {
  .trust-items {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--s-8);
  }
  .trust-items li:not(:last-child)::after {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   10. FORM CARD
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
  /* Compact: the card should read as a short form, not a long one. */
  gap: var(--s-16);
}
@media (max-width: 767px) {
  .form-card {
    padding: var(--s-24);
  }
}
.form-card .h3 {
  margin: 0;
}
.form-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.field-wrap {
  display: flex;
  flex-direction: column;
}
.field-wrap label {
  font-size: var(--f-small);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
}
.field {
  height: 52px;
  width: 100%;
  border-radius: var(--r-control);
  border: 1px solid var(--input-border);
  padding-inline: 14px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
}
.field::placeholder {
  color: var(--ink-2);
  opacity: 0.75;
}
.field:focus {
  border-color: var(--plum);
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
/* The address field leads and is visually the largest. */
.field--lead {
  height: 56px;
  font-size: 1.0625rem;
  font-weight: 600;
}
select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 24px, calc(100% - 13px) 24px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s-32);
}
/* Call/text segmented control. Two native radios with the input visually
   hidden but still focusable, so arrow-key navigation and the RadioNodeList
   the payload reads both come for free. */
.field-legend {
  font-size: var(--f-small);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
}
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}
.seg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.seg-option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--s-12);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.seg-input:checked + .seg-option {
  border-color: var(--plum);
  background: var(--tint);
  font-weight: 600;
}
.seg-input:focus-visible + .seg-option {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Error state is plum, never red — red means click. */
.field-wrap.has-error .field {
  border: 1.5px solid var(--plum);
}
.field-error {
  font-size: var(--f-small);
  line-height: 1.5;
  color: var(--ink);
  margin-top: var(--s-8);
}
.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-submit {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-top: var(--s-16);
}
.form-submit .btn {
  width: 100%;
}
.price-anchor {
  font-size: var(--f-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.fine-print {
  font-size: var(--f-small);
  line-height: 1.5;
  color: var(--ink-2);
}
.fine-print a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fine-print a:hover {
  color: var(--purple);
}
.form-success {
  display: none;
  flex-direction: column;
  gap: var(--s-12);
}
.form-card.is-sent .form-head,
.form-card.is-sent .form-body {
  display: none;
}
.form-card.is-sent .form-success {
  display: flex;
}

/* --------------------------------------------------------------------------
   12. DARK FRAME + BEFORE/AFTER SLIDER
   -------------------------------------------------------------------------- */
.frame {
  background: var(--plum);
  color: var(--on-dark);
  border-radius: var(--r-frame);
  box-shadow: var(--shadow-pop);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
}
@media (max-width: 767px) {
  .frame {
    padding: 20px;
  }
}
.frame .eyebrow {
  color: var(--yellow);
}
.frame-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.frame-head .h2 {
  margin-top: var(--s-16);
}
.frame-head p {
  margin-top: var(--s-12);
  color: var(--on-dark-2);
  max-width: 60ch;
}

.ba {
  position: relative;
  border-radius: var(--r-frame);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--plum);
  --p: 0.5;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba .ba-before {
  clip-path: inset(0 calc(100% - (19px + (100% - 38px) * var(--p))) 0 0);
}
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
  left: calc(19px + (100% - 38px) * var(--p));
  transform: translateX(-1px);
  pointer-events: none;
}
.ba-grip {
  position: absolute;
  top: 50%;
  left: calc(19px + (100% - 38px) * var(--p));
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--plum);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ba-label {
  position: absolute;
  bottom: var(--s-12);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-dark);
  background: rgba(33, 13, 44, 0.55);
  padding: var(--s-4) var(--s-8);
  border-radius: var(--r-control);
  pointer-events: none;
}
.ba-label--before {
  left: var(--s-12);
}
.ba-label--after {
  right: var(--s-12);
}
/* The range input is the control; it sits over the frame and is fully
   keyboard operable. Its thumb is invisible because the gold grip draws it. */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.ba-range::-webkit-slider-thumb {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 0;
}
.ba-range::-moz-range-thumb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 0;
}
.ba-range:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   13. CARDS
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--s-24);
  margin-top: var(--s-48);
}
@media (min-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  height: 100%;
  transition: box-shadow 200ms var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-pop);
}
.card-label {
  color: var(--purple);
  font-size: var(--f-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.card p {
  color: var(--ink-2);
}

.guarantee {
  margin-top: var(--s-24);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-24);
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-weight: 600;
}
.guarantee .icon {
  color: var(--purple);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   14. TIMELINE
   -------------------------------------------------------------------------- */
.timeline {
  margin-top: var(--s-48);
  border-top: 1px solid var(--hairline);
}
.timeline li {
  display: grid;
  gap: var(--s-16);
  padding-block: var(--s-32);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .timeline li {
    grid-template-columns: 220px 1fr;
    gap: var(--s-32);
  }
}
.timeline-date {
  font-family: var(--mono);
  font-size: var(--f-mono-sm);
  font-weight: 600;
  color: var(--purple);
  font-variant-ligatures: none;
}
.timeline-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.timeline-body p {
  color: var(--ink-2);
}
.timeline-figure {
  margin: var(--s-8) 0 0;
  max-width: 520px;
}
.timeline-figure img {
  border-radius: var(--r-card);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   15. PRICE
   -------------------------------------------------------------------------- */
.price-display {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-top: var(--s-48);
}
.price-label {
  font-family: var(--mono);
  font-size: var(--f-mono-sm);
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.price-range {
  font-size: var(--f-h2);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.price-min {
  font-size: var(--f-body);
  color: var(--ink-2);
}
.drivers {
  margin-top: var(--s-48);
  border-top: 1px solid var(--hairline);
}
.drivers li {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-24);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .drivers li {
    grid-template-columns: 220px 1fr;
    gap: var(--s-32);
    align-items: baseline;
  }
}
.driver-label {
  font-family: var(--mono);
  font-size: var(--f-mono-sm);
  font-weight: 600;
  color: var(--purple);
  font-variant-ligatures: none;
}
.drivers p {
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   16. PROOF
   -------------------------------------------------------------------------- */
.quote-card .h3 {
  margin-bottom: var(--s-4);
}
.quote-card blockquote {
  color: var(--ink-2);
  max-width: 66ch;
}
.quote-card figcaption {
  font-size: var(--f-small);
  line-height: 1.5;
  color: var(--ink);
  margin-top: var(--s-8);
}
.quote-card figcaption span {
  color: var(--ink-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-top: var(--s-48);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-16);
  border-radius: var(--r-control);
  border: 1px solid var(--hairline);
  font-size: var(--f-small);
  color: var(--ink-2);
  background: var(--white);
}
.chip--lead {
  border-color: var(--purple);
  color: var(--ink);
  font-weight: 600;
}
.chips-note {
  margin-top: var(--s-24);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq {
  margin-top: var(--s-48);
  border-top: 1px solid var(--hairline);
  max-width: 820px;
}
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  padding-block: var(--s-24);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--f-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--purple);
}
.faq .faq-icon {
  flex: 0 0 auto;
  color: var(--purple);
}
.faq details[open] .icon-plus,
.faq details:not([open]) .icon-minus {
  display: none;
}
.faq-answer {
  padding-bottom: var(--s-24);
  color: var(--ink-2);
}
.faq-mark {
  width: 40px;
  height: auto;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   18. MICRO CTA
   -------------------------------------------------------------------------- */
.micro-cta {
  margin-top: var(--s-64);
  margin-inline: auto;
  text-align: center;
  font-size: var(--f-small);
  color: var(--ink-2);
}
.micro-cta a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
}
.micro-cta a:hover {
  color: var(--purple);
}
.micro-cta .mono {
  font-size: var(--f-mono-sm);
}

/* --------------------------------------------------------------------------
   19. CLOSER
   -------------------------------------------------------------------------- */
.closer {
  background: var(--plum);
  color: var(--on-dark);
}
/* The one place on the page that is centre-aligned. */
.closer .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-24);
}
.closer .h2 {
  max-width: 24ch;
}
.closer p {
  color: var(--on-dark-2);
  margin-inline: auto;
}
.closer .btn-row {
  justify-content: center;
  margin-top: var(--s-8);
}

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--plum);
  color: var(--on-dark-2);
  border-top: 1px solid var(--hairline-dark);
  padding-block: var(--s-64);
  font-size: 0.875rem;
  line-height: 1.5;
}
.footer-grid {
  display: grid;
  gap: var(--s-48);
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-32);
  }
}
.footer-col h2 {
  font-size: var(--f-small);
  font-weight: 600;
  color: var(--on-dark);
  margin-bottom: var(--s-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-logo img {
  height: 40px;
  width: auto;
  margin-bottom: var(--s-16);
}
.footer-col p {
  max-width: 34ch;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-dark-2);
}
.footer-col a:hover {
  color: var(--on-dark);
}
.footer-legal {
  max-width: none;
  margin-top: var(--s-48);
  padding-top: var(--s-24);
  border-top: 1px solid var(--hairline-dark);
}

/* --------------------------------------------------------------------------
   21. MOBILE STICKY BAR
   -------------------------------------------------------------------------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  padding-bottom: calc(var(--s-12) + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--hairline);
}
.mobile-bar .btn {
  width: 100%;
  padding-inline: var(--s-16);
}
@media (min-width: 768px) {
  .mobile-bar {
    display: none;
  }
}
@media (max-width: 767px) {
  body {
      /* 52px mobile button + 12px of bar padding, top and bottom */
    padding-bottom: calc(52px + var(--s-12) * 2 + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   22. IMAGE PLACEHOLDERS / PHOTO TREATMENT
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--tint-4);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-24) var(--s-16) var(--s-12);
  background: linear-gradient(
    to top,
    rgba(33, 13, 44, 0.55),
    rgba(33, 13, 44, 0)
  );
  color: var(--on-dark);
  font-size: var(--f-small);
}

/* --------------------------------------------------------------------------
   23. MOTION — one pattern, everywhere
   -------------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease) calc(var(--i, 0) * 60ms),
    transform 500ms var(--ease) calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js .reveal {
    opacity: 1;
    transform: none;
  }
  .bulbs i::after {
    opacity: 1;
    filter: none;
  }
}