/* ==========================================================================
   Glint Development — landing pages (/get-a-quote) and thank-you screens
   1. Tokens, reset & base
   2. Plain header / footer / sticky CTA
   3. Hero + form
   4. Sections, cards, steps, stats
   5. Reviews
   6. Thank-you screen
   7. Responsive

   A self-contained stylesheet, not an extension of main.css. The landing page
   shares no components with the marketing site — no nav, no scrubbed hero, no
   reveal machinery — and pulling main.css in would load all of that for nothing.
   Everything here is a class, so the page carries no inline styles.
   ========================================================================== */

/* 1. Tokens, reset & base ================================================== */
:root {
  --navy:       #1B2A4A;
  --navy-deep:  #101A31;
  --gold:       #B08D2E;
  --gold-hover: #97781F;
  --gold-light: #C9A552;
  --gold-deep:  #7A5F17;
  --gold-soft:  #F7F1E2;
  --paper:      #FAFAF7;
  --white:      #FFFFFF;
  --ink:        #2E3238;
  --ink-2:      #5A626E;
  --muted:      #838C99;
  --line:       rgba(27, 42, 74, .14);
  --line-2:     rgba(27, 42, 74, .08);
  --err:        #B3261E;
  --err-bg:     #FCEEEC;
  --ok:         #1C6238;
  --ok-bg:      #EAF4EE;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(16, 26, 49, .06);
  --shadow-md: 0 14px 36px rgba(16, 26, 49, .10);
  --shadow-lg: 0 30px 70px rgba(16, 26, 49, .22);

  --gutter: clamp(20px, 4vw, 48px);

  /* How far the stats card is pulled up over the hero's bottom edge. The hero
     adds the same amount to its own bottom padding, so the visible gap between
     the form and the card stays the hero's normal padding at every width —
     without this the two cards collide on a phone, where that padding is 36px
     and the overlap alone is 44px. */
  --lp-overlap: 44px;
  /* Header pill: 62px tall plus its 12px of padding above and below. */
  --lp-headroom: 86px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* scroll-padding keeps anchor targets (#quote) clear of the sticky header. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body.lp {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--gold-deep); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.lp-container { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }

.lp-skip { position: absolute; left: -9999px; }
.lp-skip:focus {
  left: 12px; top: 12px; z-index: 200;
  background: var(--navy); color: var(--paper);
  padding: 12px 20px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
}

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

/* Shared type scale. */
.lp-eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-deep);
}
.lp-eyebrow--gold { color: var(--gold-light); }

.lp-h1 {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(33px, 4.6vw, 58px); font-weight: 500; line-height: 1.04;
  letter-spacing: -.03em; text-wrap: balance;
}
.lp-h2 {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(27px, 3.4vw, 42px); font-weight: 500; line-height: 1.1;
  letter-spacing: -.025em; color: var(--navy); text-wrap: balance;
}
.lp-h3 {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(18px, 1.9vw, 21px); font-weight: 500; line-height: 1.25;
  letter-spacing: -.015em; color: var(--navy);
}
.lp-lead { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: var(--ink-2); }
.lp-body { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }

.on-dark .lp-h1, .on-dark .lp-h2, .on-dark .lp-h3 { color: var(--paper); }
.on-dark .lp-lead, .on-dark .lp-body { color: rgba(250, 250, 247, .78); }

/* Buttons. */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 16px 32px;
  border: 2px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lp-btn--primary { background: var(--gold); color: #141F38; }
.lp-btn--primary:hover { background: var(--gold-hover); color: var(--paper); }
.lp-btn--ghost { border-color: rgba(250, 250, 247, .4); color: var(--paper); }
.lp-btn--ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }
.lp-btn--block { width: 100%; }
.lp-btn--sm { min-height: 42px; padding: 11px 20px; font-size: 11.5px; letter-spacing: .12em; }
.lp-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* 2. Header / footer / sticky CTA ========================================== */
/* Same rounded frosted pill as the main site's nav bar, but still no
   navigation — only the brand, the locality tag and the one CTA. The bar sits
   in normal flow (sticky, not fixed), so the hero below it does not move. */
/*
 * The values below are lifted verbatim from the site header in
 * includes/navbar.php, which tints itself from --nb/--nl/--ni/--na/--np. Same
 * names, same colours — the white pill the site wears by default, kept that
 * way the whole page long. (The site swaps to a dark glass variant over dark
 * sections; this page deliberately does not, so the bar reads identically
 * everywhere and stands out against the navy banner.)
 */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 130;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
  /* Pull the hero up underneath, so the pill floats on the banner instead of
     sitting on a bare strip where it is nearly invisible. */
  margin-bottom: calc(-86px - env(safe-area-inset-top, 0px));

  /* White, transparent, blurred — the site header's material. The site uses
     .72 alpha because it floats over a light hero; over this page's navy
     banner that much dark shows through to read grey, so the alpha is raised
     until it looks the way the site's bar looks. Still see-through: the grid
     and the gold hatch stay visible through it. */
  --nb: rgba(250, 250, 247, .88);
  --nl: rgba(27, 42, 74, .12);
  --ni: #1B2A4A;
  --na: #8F6F1C;
  --np: rgba(27, 42, 74, .4);
}
.lp-header__inner {
  min-height: 62px;
  padding-inline: clamp(18px, 2.4vw, 28px);
  border-radius: 999px;
  background: var(--nb);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--nl);
  box-shadow: 0 12px 40px rgba(16, 26, 49, .10);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lp-header__right { display: flex; align-items: center; gap: 20px; min-width: 0; }
.lp-header__tag {
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--np);
  white-space: nowrap;
}
.lp-header__cta { white-space: nowrap; flex-shrink: 0; }
/* Pill-shaped navy CTA, matching the site header's Contact Us button. */
.lp-header .lp-header__cta {
  border-radius: 999px;
  border-color: transparent;
  background: var(--navy); color: var(--paper);
  min-height: 44px; padding: 12px 24px;
  font-size: 12px; letter-spacing: .1em;
}
.lp-header .lp-header__cta:hover { background: var(--gold); color: #141F38; }

/* Base wordmark colours are for dark backgrounds (thank-you screens). */
.lp-brand { display: flex; flex-direction: column; line-height: 1; }
.lp-brand__name {
  font-family: 'Archivo', sans-serif;
  font-size: 20px; font-weight: 600; letter-spacing: .09em; color: var(--paper);
}
.lp-brand__sub {
  margin-top: 5px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold-light);
}
/* In the pill the wordmark takes the header's own ink and accent, so it flips
   with the background exactly as the site's does. */
.lp-header .lp-brand__name { font-size: 17.5px; letter-spacing: .08em; color: var(--ni); }
.lp-header .lp-brand__sub { margin-top: 3px; font-size: 8px; color: var(--na); }

/* The badge carries its own wordmark, so it needs no colour flip. */
.lp-brand__mark { display: block; width: 84px; height: 84px; }
.lp-header .lp-brand__mark { width: 56px; height: 56px; }
.lp-brand--bare .lp-brand__mark { width: clamp(84px, 12vh, 116px); height: clamp(84px, 12vh, 116px); }

.lp-footer { background: var(--navy-deep); color: rgba(250, 250, 247, .72); }
.lp-footer__inner {
  padding-block: clamp(44px, 6vw, 68px);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.lp-footer__blurb { max-width: 60ch; font-size: 14.5px; line-height: 1.75; color: rgba(250, 250, 247, .6); }
.lp-footer__contact {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  font-size: 14.5px; color: rgba(250, 250, 247, .68);
}
.lp-footer__contact a { color: var(--gold-light); text-decoration: none; }
.lp-footer__contact a:hover { text-decoration: underline; }
.lp-footer__legal {
  margin-top: 8px; padding-top: 20px;
  border-top: 1px solid rgba(250, 250, 247, .12);
  width: 100%;
  font-size: 12.5px; color: rgba(250, 250, 247, .42);
}
.lp-footer__credit { font-size: 12.5px; color: rgba(250, 250, 247, .42); }
.lp-footer__credit a { color: var(--gold-light); text-decoration: none; }
.lp-footer__credit a:hover { text-decoration: underline; }

/* Fixed CTA on phones — the hero form scrolls out of sight quickly. */
.lp-stickybar { display: none; }

/* 3. Hero + form =========================================================== */
/*
 * A drawn hero, not a photographed one — and a dark one.
 *
 * The marketing site opens light, on a building photo; this page opens on deep
 * navy with gold light breaking across it, so the two are unmistakably
 * different and the white form card becomes the brightest thing on screen —
 * which on a lead page is exactly right. All of it is CSS: layered glows over
 * a navy gradient, a faint drafting grid, a gold hatched corner and one drawn
 * arc. Nothing to download, nothing competing with the headline.
 */
.lp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(54% 60% at 86% 6%, rgba(176, 141, 46, .42), transparent 62%),
    radial-gradient(38% 42% at 62% 86%, rgba(201, 165, 82, .16), transparent 70%),
    radial-gradient(72% 84% at 0% 104%, rgba(43, 66, 118, .60), transparent 72%),
    linear-gradient(158deg, #17233F 0%, #101A31 55%, #0B1324 100%);
}

.lp-hero__art { position: absolute; inset: 0; pointer-events: none; }

/* The grid. Hairlines on a 64px module — a drawing sheet, not graph paper —
   masked back to nothing before it reaches the copy on the left. */
.lp-hero__art {
  background-image:
    linear-gradient(to right, rgba(250, 250, 247, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(250, 250, 247, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(110% 120% at 100% 0%, #000 22%, rgba(0, 0, 0, .45) 55%, transparent 82%);
  mask-image: radial-gradient(110% 120% at 100% 0%, #000 22%, rgba(0, 0, 0, .45) 55%, transparent 82%);
}

/* Hatched corner — the gold 45° rule set from a title block, sitting inside
   the brightest glow so it reads as texture caught in the light. */
.lp-hero__art::before {
  content: '';
  position: absolute; top: -90px; right: -70px;
  width: 420px; height: 420px;
  transform: rotate(-12deg);
  background: repeating-linear-gradient(
    45deg,
    rgba(201, 165, 82, .33) 0 2px,
    transparent 2px 13px
  );
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 42%, transparent 100%);
}

/* One drawn arc, bottom left, to stop the field reading as a flat panel. */
.lp-hero__art::after {
  content: '';
  position: absolute; left: -140px; bottom: -190px;
  width: 460px; height: 460px;
  border: 1.5px solid rgba(250, 250, 247, .10);
  border-radius: 50%;
}
/*
 * The form column is the wider of the two now that its fields are paired: two
 * inputs side by side need the room, and the copy reads better in a narrower
 * measure anyway. The previous 1.05/.95 split squeezed the form and forced the
 * headline into a five-line stack.
 */
.lp-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
  /* Top clears the header pill floating over the photo; bottom carries the
     stats card's overlap so the card never eats into the form above it. */
  padding-block:
    calc(clamp(52px, 7vw, 92px) + var(--lp-headroom))
    calc(clamp(52px, 7vw, 92px) + var(--lp-overlap));
}
/* 20ch is about three lines for this headline. Any narrower and it breaks into
   the ladder of two-word lines the earlier 34ch column produced. */
.lp-hero__copy { display: flex; flex-direction: column; gap: 18px; max-width: 46ch; }
.lp-hero__copy .lp-h1 { max-width: 20ch; }
.lp-hero__copy .lp-lead { max-width: 42ch; }

/* Light copy on the navy field, with the key phrase picked out in gold. */
.lp-hero__copy .lp-h1 { color: var(--paper); }
.lp-h1__gold {
  font-style: normal;
  background: linear-gradient(94deg, var(--gold-light) 0%, #EBCD85 52%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-hero__copy .lp-lead { color: rgba(250, 250, 247, .82); }
/* Chip-style eyebrow — glassy on the dark field, gold-ringed. */
.lp-hero__copy .lp-eyebrow--gold {
  align-self: flex-start;
  background: rgba(250, 250, 247, .07);
  border: 1px solid rgba(201, 165, 82, .38);
  color: var(--gold-light);
  padding: 8px 14px;
  border-radius: 999px;
}

.lp-ticks { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.lp-ticks li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px; line-height: 1.55;
  color: rgba(250, 250, 247, .84);
}
.lp-ticks li::before {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 17px; height: 9px;
  border-left: 2px solid var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
  transform: rotate(-45deg);
}
.lp-hero .lp-ticks li { color: rgba(250, 250, 247, .88); font-weight: 500; }
.lp-hero .lp-ticks li::before { border-left-color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* The form card. */
/* The card is deliberately compact.
   At its first sizing it ran 1222px tall — 322px past a 900px viewport — so it
   dwarfed the hero copy it is meant to sit beside and pushed its own submit
   button below the fold, which is the one thing a lead form must never do.
   Every value below is tightened toward that: the fields keep their 16px text
   (see .lp-input) and their 44px tap target, and the height comes out of
   padding, gaps and label size instead. */
.lp-form {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 2.2vw, 26px);
}
.lp-form__head { margin-bottom: 14px; }
.lp-form__title {
  font-family: 'Archivo', sans-serif;
  font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--navy);
}
.lp-form__sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.lp-field { display: flex; flex-direction: column; gap: 4px; }
.lp-field + .lp-field { margin-top: 11px; }

/* Two fields per row. Halves the card's height, which is what lets it sit
   beside the hero copy instead of dwarfing it. */
.lp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.lp-form__row + .lp-form__row,
.lp-form__row + .lp-field,
.lp-field + .lp-form__row { margin-top: 11px; }
/* Inside a row the fields are siblings, so the stacking margin must not apply. */
.lp-form__row .lp-field + .lp-field { margin-top: 0; }
.lp-field__label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.lp-field__opt { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.lp-field__hint { font-size: 12px; line-height: 1.45; color: var(--muted); }
.lp-field__error { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--err); }

.lp-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid rgba(27, 42, 74, .24);
  border-radius: var(--r-sm);
  font-family: inherit;
  /* 16px, not smaller: iOS Safari zooms the page in on a focused field below
     16px and never zooms back out. This one does not shrink with the rest. */
  font-size: 16px;
  color: var(--navy);
  background: var(--white);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lp-input::placeholder { color: var(--muted); }
.lp-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 46, .18); }
.lp-input[aria-invalid="true"] { border-color: var(--err); background: #FEF8F7; }
textarea.lp-input { min-height: 74px; resize: vertical; line-height: 1.5; }
select.lp-input { appearance: none; cursor: pointer; }

.lp-form__actions { margin-top: 15px; }
.lp-form__note {
  margin-top: 10px;
  font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center;
}
.lp-form__note a { color: var(--gold-deep); }

.lp-alert {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: 14.5px; line-height: 1.55; font-weight: 600;
  margin-bottom: 18px;
}
.lp-alert--error { background: var(--err-bg); border: 1px solid rgba(179, 38, 30, .3); color: #7A1C15; }

/* --------------------------------------------------- card on the drawn field
 * Solid white on the dark navy field — the brightest object on the screen,
 * which is exactly what the one conversion element should be. Blur-glass here
 * would only dim it. The gold rule along the top ties it to the step cards
 * further down the page.
 */
.lp-form {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(27, 42, 74, .07);
  box-shadow: 0 34px 80px rgba(4, 9, 20, .55);
}
.lp-form::before {
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 55%, rgba(201, 165, 82, .25) 100%);
}

/* Honeypot: off-screen for people, present for bots. The font-size is set only
   so an audit of "inputs under 16px" comes back clean — the field is never
   focused by a person, so it could never trigger the iOS zoom that rule guards
   against, and nobody should have to re-derive that when the flag shows up. */
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-hp input { font-size: 16px; }

/* 4. Sections, cards, steps, stats ========================================= */
.lp-section { padding-block: clamp(56px, 7vw, 104px); }
/* Warm band for the steps — white fading into the brand's soft gold. */
.lp-section--light { background: linear-gradient(180deg, var(--white) 0%, var(--gold-soft) 100%); }
.lp-section--navy { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.lp-section--rule { background: transparent; }

.lp-head { display: flex; flex-direction: column; gap: 14px; max-width: 58ch; }
.lp-head--center { align-items: center; text-align: center; margin-inline: auto; }
/* Keeps a centred one-liner from dropping its last word alone onto line two. */
.lp-head .lp-body { text-wrap: balance; }

/* Section eyebrows echo the hero chip — a soft-gold pill instead of bare text. */
.lp-head .lp-eyebrow {
  background: var(--gold-soft);
  color: var(--gold-deep);
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: .22em;
}
.lp-close .lp-eyebrow {
  background: rgba(250, 250, 247, .12);
  color: var(--gold-light);
  padding: 8px 14px;
  border-radius: 999px;
  letter-spacing: .22em;
}

/* The stat row is a white card that floats up over the hero's bottom edge,
   bridging the photo and the first section. */
.lp-stats {
  position: relative; z-index: 2;
  margin-top: calc(var(--lp-overlap) * -1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 3.4vw, 44px) clamp(20px, 3vw, 44px);
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.lp-stat { text-align: center; }
.lp-stat__num {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(32px, 4vw, 46px); font-weight: 500; line-height: 1;
  letter-spacing: -.03em; color: var(--navy);
}
.lp-stat__num em { font-style: normal; color: var(--gold); }
.lp-stat__label {
  display: block; margin-top: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

.lp-grid { display: grid; gap: clamp(20px, 2.6vw, 30px); margin-top: clamp(32px, 4vw, 52px); }
.lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lp-card {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 6px 24px rgba(16, 26, 49, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-section--light .lp-card { background: var(--paper); }
.lp-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #ECEAE1; }
.lp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.21,1); }
.lp-card:hover .lp-card__media img { transform: scale(1.05); }
.lp-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; }
.lp-card__body .lp-body { font-size: 14.5px; }

.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 34px); margin-top: clamp(32px, 4vw, 52px); }
.lp-step {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px 30px;
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 6px 24px rgba(16, 26, 49, .06);
}
.lp-step__num {
  align-self: flex-start;
  font-family: 'Archivo', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--gold-deep);
  background: var(--gold-soft);
  padding: 6px 12px;
  border-radius: 999px;
}

/* Mid-page CTA strip — a rounded navy banner set into the page rather than a
   full-bleed block. */
.lp-strip { background: transparent; padding-inline: 12px; color: var(--paper); }
.lp-strip__inner {
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-deep) 80%);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  padding: clamp(36px, 5vw, 60px) clamp(26px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
}
.lp-strip__title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(24px, 2.8vw, 34px); font-weight: 500; line-height: 1.15;
  letter-spacing: -.02em; color: var(--paper); max-width: 22ch;
}
.lp-strip__text { margin-top: 10px; font-size: 15px; line-height: 1.65; color: rgba(250, 250, 247, .7); max-width: 46ch; }

/* Closing block. */
.lp-close { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.lp-close__text { max-width: 52ch; }
.lp-close__cta { margin-top: 10px; }
.lp-areas { margin-top: clamp(30px, 4vw, 48px); padding-top: 26px; border-top: 1px solid rgba(250, 250, 247, .16); width: 100%; }
.lp-areas__title { font-size: 11.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); }
.lp-areas__list { margin-top: 12px; font-size: 15px; line-height: 1.8; color: rgba(250, 250, 247, .7); }
.lp-hours { margin-top: 18px; font-size: 14px; color: rgba(250, 250, 247, .55); }

/* 5. Reviews =============================================================== */
.lp-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 30px); margin-top: clamp(32px, 4vw, 52px); }
.lp-review {
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 6px 24px rgba(16, 26, 49, .05);
}
.lp-section--light .lp-review { background: var(--paper); }
.lp-review__stars { color: var(--gold); letter-spacing: 3px; font-size: 15px; }
.lp-review__quote {
  font-size: 16px; line-height: 1.65; color: var(--ink);
  flex: 1;
}
.lp-review__name { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* 6. Thank-you screen ====================================================== */
/*
 * ONE SCREEN, NO SCROLLING — that is the whole brief for this page.
 *
 * Which means the content has to shrink to the viewport rather than the viewport
 * growing to the content. Every vertical measurement below is clamped against
 * `vh` as well as a floor and ceiling, so the same markup fits a 390px-tall
 * landscape phone and a 1180px tablet without a separate layout for each.
 *
 * `overflow: hidden` is the guarantee, but it is deliberately the LAST line of
 * defence: clipping is worse than scrolling, so the sizing above it is tuned to
 * fit every viewport we test (360x640 through 1440x900, including landscape)
 * with room to spare. If you add content here, re-check those sizes.
 */
.lp-bare {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--navy-deep);
}
.lp-bare__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-bare__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10, 17, 33, .90) 0%, rgba(10, 17, 33, .70) 50%, rgba(10, 17, 33, .78) 100%),
    linear-gradient(150deg, rgba(16, 26, 49, .80) 0%, rgba(122, 95, 23, .34) 100%);
}
.lp-bare__main {
  position: relative;
  height: 100%;
  display: grid; place-items: center;
  padding: clamp(14px, 2.5vh, 40px) var(--gutter);
}
.lp-bare__stack {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 2vh, 22px);
  width: 100%;
}
.lp-brand--bare { align-items: center; text-align: center; }
.lp-brand--bare .lp-brand__name { font-size: clamp(17px, 2.6vh, 23px); }
.lp-brand--bare .lp-brand__sub { margin-top: clamp(3px, .5vh, 5px); font-size: clamp(7px, 1vh, 8.5px); }

.lp-bare__credit { font-size: clamp(11px, 1.5vh, 12.5px); color: rgba(250, 250, 247, .5); text-align: center; }
.lp-bare__credit a { color: var(--gold-light); text-decoration: none; }
.lp-bare__credit a:hover { text-decoration: underline; }

.lp-ty {
  width: 100%; max-width: 560px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(18px, 3.2vh, 46px) clamp(20px, 4vw, 48px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.5vh, 15px);
}
.lp-ty__check {
  width: clamp(40px, 7vh, 64px); height: clamp(40px, 7vh, 64px);
  border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(19px, 3.4vh, 30px); line-height: 1;
  flex-shrink: 0;
}
.lp-ty__rule { width: 46px; height: 2px; background: var(--gold); flex-shrink: 0; }
.lp-ty__title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(21px, 4vh, 36px); font-weight: 500; line-height: 1.12;
  letter-spacing: -.025em; color: var(--navy);
}
.lp-ty__text {
  font-size: clamp(13.5px, 1.95vh, 16px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}
.lp-ty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: clamp(2px, .8vh, 6px); }
.lp-ty__actions .lp-btn {
  min-height: clamp(42px, 6vh, 54px);
  padding-block: clamp(11px, 1.8vh, 16px);
  font-size: clamp(11.5px, 1.6vh, 13px);
}
.lp-ty__meta {
  margin-top: clamp(4px, 1vh, 10px); padding-top: clamp(10px, 1.8vh, 20px);
  border-top: 1px solid var(--line-2); width: 100%;
  font-size: clamp(12px, 1.7vh, 13.5px); line-height: 1.55; color: var(--muted);
}
.lp-ty__redirect { font-size: clamp(11px, 1.5vh, 13px); color: var(--muted); }

/*
 * Landscape phones and other very short viewports. The proportional scaling
 * above gets most of the way; this drops the decorative rule and tightens the
 * remaining rhythm rather than hiding anything the visitor needs.
 */
@media (max-height: 460px) {
  .lp-ty__rule { display: none; }
  .lp-ty { max-width: 620px; padding-block: 12px; gap: 6px; }
  .lp-ty__text { max-width: 62ch; }
  .lp-ty__check { width: 34px; height: 34px; font-size: 17px; }
  .lp-ty__meta { margin-top: 2px; padding-top: 8px; }
  .lp-bare__stack { gap: 5px; }
  /* The clamp floors above stop shrinking below ~390px tall; these override them
     so the build credit clears the bottom edge instead of being clipped away. */
  .lp-bare__main { padding-block: 6px; }
}

/* 7. Responsive ============================================================ */
/* Between the two-column hero and the phone layout, the hero stacks. The form
   has to be constrained when it does: left to fill the column it becomes a
   ~700px-wide single-column form, and a text input that long is unreadable and
   looks broken. Same reason the copy is capped. */
@media (max-width: 1024px) {
  .lp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: center; }
  .lp-hero__copy { max-width: 56ch; width: 100%; }
  .lp-hero__copy .lp-h1 { max-width: none; }
  .lp-hero__copy .lp-lead { max-width: none; }
  /* Wider than the one-column version, because the paired rows still fit here. */
  .lp-form { max-width: 620px; width: 100%; }
  .lp-grid--3, .lp-steps, .lp-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Stacked, the hero is much taller than it is wide: the corner hatch would
     sit marooned above the headline and the grid module reads too coarse, so
     both scale down and the arc moves out of the copy's way. */
  .lp-hero__art { background-size: 46px 46px; }
  .lp-hero__art::before {
    top: -70px; right: -110px;
    width: 300px; height: 300px;
  }
  .lp-hero__art::after {
    left: auto; right: -220px; bottom: -120px;
    width: 380px; height: 380px;
  }
}

/* Explicit 2×2 from tablet down. auto-fit fits only three of the four across a
   tablet, which strands the fourth stat alone on a second row looking like a
   mistake. */
@media (max-width: 900px) {
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
}

/* Two fields per row stop being usable once each is under ~200px wide. */
@media (max-width: 640px) {
  .lp-form__row { grid-template-columns: minmax(0, 1fr); }
  .lp-form__row .lp-field + .lp-field { margin-top: 15px; }
}

@media (max-width: 760px) {
  .lp-grid--3, .lp-steps, .lp-reviews { grid-template-columns: minmax(0, 1fr); }

  .lp-strip__inner { flex-direction: column; align-items: flex-start; }
  .lp-strip__btn { width: 100%; }
  .lp-header__tag { display: none; }
  .lp-hero__inner {
    padding-block:
      calc(clamp(36px, 6vw, 56px) + var(--lp-headroom))
      calc(clamp(36px, 6vw, 56px) + var(--lp-overlap));
  }

  /* The form is above the fold on desktop but a long scroll away on a phone, so
     the bar keeps the one action permanently reachable. */
  .lp-stickybar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    min-height: 58px; padding: 16px 20px;
    background: var(--gold); color: #141F38;
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 -6px 24px rgba(16, 26, 49, .2);
  }
  /* Clear the bar so it never covers the footer's last line. */
  .lp-footer__inner { padding-bottom: calc(clamp(44px, 6vw, 68px) + 58px); }
}

@media (max-width: 480px) {
  .lp-btn { width: 100%; }
  .lp-ty__actions .lp-btn { width: 100%; }

  /* Two stats per row on a phone leaves each label about 150px. At the desktop
     size and tracking, "Projects delivered" and "Work won by referral" both
     wrap to two or three ragged lines and the four cells stop lining up, so the
     label type tightens here and the numbers give back the space. */
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; padding-inline: 16px; }
  .lp-stat__num { font-size: 34px; }
  .lp-stat__label { margin-top: 7px; font-size: 10px; letter-spacing: .09em; text-wrap: balance; }

  /* The header CTA is the exception to the full-width rule above — it sits
     beside the wordmark on one line and must stay compact. */
  .lp-header .lp-header__cta { width: auto; padding-inline: 16px; font-size: 11px; letter-spacing: .08em; }
  .lp-header__inner { gap: 12px; }
  .lp-form { padding: 22px 18px; }
  .lp-footer__contact { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --------------------------------------------------------- button spinner
   Shared with the site and admin stylesheets. currentColor, so one rule works
   on the gold primary and the ghost outline without a variant each. */
.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  animation: btnSpin .6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

.lp-btn.is-loading { cursor: progress; opacity: .85; }
.lp-btn[disabled] { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  /* Still show it is busy, without a spinning element. */
  .btn-spinner { animation: none; border-right-color: currentColor; opacity: .55; }
}

/* ----------------------------------------------------- consent & legal line */
/* The consent paragraph is the single tallest block in the card — four lines of
   carrier-mandated wording. Its text shrinks but the box does not: the checkbox
   stays 18px and keeps its own hit area, since this is the control the form
   refuses to submit without. */
.lp-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 13px; cursor: pointer;
}
.lp-consent input {
  width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--gold); flex-shrink: 0;
}
.lp-consent span { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }

.lp-legal { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.lp-legal a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.lp-legal a:hover { color: var(--gold-deep); }

.lp-footer__legal a { color: rgba(250, 250, 247, .6); text-decoration: none; margin-left: 14px; }
.lp-footer__legal a:hover { color: var(--gold-light); text-decoration: underline; }

/* Same reasoning as the honeypot rule above: not a zoom risk, just a clean audit. */
.lp-consent input[type="checkbox"] { font-size: 16px; }

/* 8. Motion ================================================================ */
/* Entrance: the hero copy and the form card rise in once on load, staggered
   top to bottom, while the photo settles from a slight zoom. Pure CSS — no JS
   required, and the reduced-motion block below switches all of it off. */
@keyframes lpRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
/* The drawn background eases in rather than snapping on with the first paint. */
@keyframes lpArtIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
.lp--page .lp-hero__art { animation: lpArtIn 1.6s cubic-bezier(.22, .61, .21, 1) both; }
.lp--page .lp-hero__copy > * { animation: lpRise .65s cubic-bezier(.22, .61, .21, 1) backwards; }
.lp--page .lp-hero__copy > *:nth-child(1) { animation-delay: .1s; }
.lp--page .lp-hero__copy > *:nth-child(2) { animation-delay: .2s; }
.lp--page .lp-hero__copy > *:nth-child(3) { animation-delay: .3s; }
.lp--page .lp-hero__copy > *:nth-child(4) { animation-delay: .4s; }
.lp--page .lp-hero .lp-form { animation: lpRise .75s cubic-bezier(.22, .61, .21, 1) .35s backwards; }

/* Scroll reveal. landing.js tags the elements below the fold with .lp-reveal
   and flips .is-in as each enters the viewport; --lp-rd staggers siblings in a
   grid. Without JS the class is never added, so nothing is ever hidden. */
.lp-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .21, 1);
  transition-delay: var(--lp-rd, 0s);
}
.lp-reveal.is-in { opacity: 1; transform: none; }

/* The site header carries this transition for its own tint changes; kept so
   the two bars behave the same if the palette is ever animated again. */
.lp-header .lp-header__inner {
  transition: background-color .3s ease, border-color .3s ease;
}

/* The phone CTA slides out of the way while the form itself is on screen
   (class from landing.js); it covers the form's submit button otherwise. */
.lp-stickybar { transition: transform .28s cubic-bezier(.22, .61, .21, 1); }
.lp-stickybar.is-hidden { transform: translateY(100%); }

/* CTA lift on hover. */
.lp-btn {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.lp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(151, 120, 31, .32); }

@media (prefers-reduced-motion: reduce) {
  .lp--page .lp-hero__art,
  .lp--page .lp-hero__copy > *,
  .lp--page .lp-hero .lp-form { animation: none; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-btn--primary:hover { transform: none; }
}