/* ==========================================================================
   Lead capture — Percent&Co landing pages
   Loaded after main.css. Section references (§n) are to LEAD-CAPTURE-PLAYBOOK.md.

   Two rules govern everything below:

   §11  The form must not scroll. Every internal vertical measurement inside a
        vh-capped dialog is clamped against vh as well, so a 700px-tall laptop
        compresses instead of overflowing. overflow:auto is a floor for a
        500px window, not a plan.

   §12  Contrast is measured with alpha composited over the real background
        (§8.2). Measured values are recorded beside each token.
   ========================================================================== */

:root {
  /* ---- form ink on WHITE (the dialog card and the lead card) ----
     Ratios measured against the real background, not assumed. */
  --lead-ink:       #1F2A26;   /* input text — 14.82:1 on #fff, near-maximum  */
  --lead-label:     #465350;   /* field labels — 8.04:1                       */
  --lead-qualifier: #5F6E6A;   /* "(OPTIONAL)" inside the label — 5.35:1      */
  --lead-body:      #4C5955;   /* intro and consent copy — 7.32:1             */
  --lead-place:     #6B7873;   /* placeholder — 4.61:1 (exempt, but held)     */
  --lead-line:      #7C8883;   /* input boundary — 3.68:1 on #fff and 3.11:1
                                  on the #ECECEA panel behind the gated form.
                                  Heavier than the design's #D3D6D2 hairline
                                  (1.35:1); the deviation is deliberate and is
                                  recorded in site/README.md §5.              */
  --lead-line-soft: #D8DCD9;   /* decorative rules only, never a boundary     */
  --lead-error:     #8A1F1F;   /* 9.14:1 on #fff, 8.57:1 on the failure panel */

  /* ---- the same set on the dark ground (#26332F), alpha composited ---- */
  --lead-ink-dark:       #FFFFFF;              /* 13.15:1 on #26332F          */
  --lead-label-dark:     rgba(243,241,236,.86);/*  9.05:1                     */
  --lead-qualifier-dark: rgba(243,241,236,.72);/*  6.85:1                     */
  --lead-body-dark:      rgba(243,241,236,.80);/*  8.06:1                     */
  --lead-place-dark:     rgba(243,241,236,.62);/*  5.51:1                     */
  --lead-line-dark:      rgba(243,241,236,.46);/*  3.70:1 — symmetrical with
                                                  --lead-line by measurement,
                                                  not by eye (§12)            */
  --lead-error-dark:     #F0B4B4;              /*  7.45:1                     */

  --lead-messenger: #25D366;
  --lead-bar-h: 0px;
}

/* ==========================================================================
   1. The field set
   One set of rules, rendered by the dialogs, the in-page section and the
   gated block alike.
   ========================================================================== */

.lead-form {
  display: flex;
  flex-direction: column;
  gap: min(clamp(12px, 1.4vw, 18px), 1.6vh);
  color: var(--lead-body);
  text-align: left;
}
.lead-form[hidden] { display: none; }

.lead-field { display: block; }

.lead-label {
  display: block;
  margin-bottom: min(8px, .8vh);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lead-label);
}
/* The qualifier belongs inside the label, in a lighter weight — not as helper
   text and never in the placeholder, where it vanishes the moment typing
   starts (§18.2). */
.lead-label span {
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--lead-qualifier);
}

.lead-input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--lead-line);
  border-radius: var(--r-btn);
  padding: min(13px, 1.35vh) 15px;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.4;
  /* A value someone has typed is the one thing that must never be ambiguous. */
  color: var(--lead-ink);
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.lead-input::placeholder { color: var(--lead-place); opacity: 1; }
.lead-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(38, 51, 47, .12);
}
.lead-field.is-invalid .lead-input { border-color: var(--lead-error); }

.lead-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--lead-error);
}
.lead-error:empty { display: none; }

/* §6.1 — off-screen, NOT display:none. A bot that skips hidden inputs is
   exactly the bot this is meant to catch. */
.lead-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- consent --- */

.lead-consent {
  display: flex;
  flex-direction: column;
  gap: min(9px, .9vh);
  margin-top: min(4px, .6vh);
}
.lead-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lead-body);
  cursor: pointer;
}
.lead-check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 3px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}
.lead-check a { text-decoration: underline; text-underline-offset: 2px; }
.lead-check a:hover { color: var(--green); }
.lead-consent.is-invalid .lead-check:first-child input { outline: 2px solid var(--lead-error); outline-offset: 2px; }

/* ----------------------------------------------------------------- submit --- */

.lead-submit {
  width: 100%;
  margin-top: min(6px, .6vh);
  padding: min(16px, 1.7vh) 22px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--green);
  color: var(--cream);
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.25;
  cursor: pointer;
  transition: background .3s, opacity .3s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.lead-submit:hover:not(:disabled) { background: var(--green-soft); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(24, 34, 30, .2); }
.lead-submit:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.lead-submit:disabled { opacity: .62; cursor: default; }

/* Directly UNDER the button — under the button is where the hesitation is,
   not above it (§18.3). */
.lead-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lead-qualifier);
}
.lead-shield { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--green); }

.lead-legal {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--lead-qualifier);
}
.lead-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* §6 — LICENSING PAIR, KEEP TOGETHER WITH .lead-legal IN lead-capture.js.
   reCAPTCHA permits showing the badge, or hiding it AND showing the
   attribution — never neither. The badge is hidden here only because it is
   pinned bottom-right, where the messenger widget already sits. */
.grecaptcha-badge { visibility: hidden; }

/* ==========================================================================
   2. The same field set on a dark ground
   Authored as ONE block. Patching individual colours as they are noticed is
   how a shared partial ends up with 1.05:1 input text (§8.3).
   ========================================================================== */

.section--dark .lead-form,
.lead-form--dark {
  color: var(--lead-body-dark);
}
.section--dark .lead-label,
.lead-form--dark .lead-label { color: var(--lead-label-dark); }
.section--dark .lead-label span,
.lead-form--dark .lead-label span { color: var(--lead-qualifier-dark); }

.section--dark .lead-input,
.lead-form--dark .lead-input {
  background: rgba(243, 241, 236, .06);
  border-color: var(--lead-line-dark);
  color: var(--lead-ink-dark);
}
.section--dark .lead-input::placeholder,
.lead-form--dark .lead-input::placeholder { color: var(--lead-place-dark); }
.section--dark .lead-input:focus,
.lead-form--dark .lead-input:focus {
  border-color: var(--cream);
  box-shadow: 0 0 0 3px rgba(243, 241, 236, .16);
}
.section--dark .lead-error,
.lead-form--dark .lead-error { color: var(--lead-error-dark); }
.section--dark .lead-field.is-invalid .lead-input,
.lead-form--dark .lead-field.is-invalid .lead-input { border-color: var(--lead-error-dark); }

.section--dark .lead-check,
.lead-form--dark .lead-check { color: var(--lead-body-dark); }
.section--dark .lead-check input,
.lead-form--dark .lead-check input { accent-color: var(--cream); }
.section--dark .lead-check a:hover,
.lead-form--dark .lead-check a:hover { color: #fff; }
.section--dark .lead-consent.is-invalid .lead-check:first-child input,
.lead-form--dark .lead-consent.is-invalid .lead-check:first-child input { outline-color: var(--lead-error-dark); }

.section--dark .lead-submit,
.lead-form--dark .lead-submit { background: var(--cream); color: var(--green); }
.section--dark .lead-submit:hover:not(:disabled),
.lead-form--dark .lead-submit:hover:not(:disabled) { background: #fff; }

.section--dark .lead-note,
.lead-form--dark .lead-note,
.section--dark .lead-legal,
.lead-form--dark .lead-legal { color: var(--lead-qualifier-dark); }
.section--dark .lead-shield,
.lead-form--dark .lead-shield { color: var(--cream); }

/* The third-party widget's own colours are part of the same block — it is
   inside the form and it does not inherit. */
.section--dark .iti__selected-country,
.lead-form--dark .iti__selected-country { color: var(--lead-ink-dark); }
.section--dark .iti__selected-dial-code,
.lead-form--dark .iti__selected-dial-code { color: var(--lead-label-dark); }

/* ==========================================================================
   3. Confirmation and failure
   ========================================================================== */

/* Two parts: the agency's mark on its own dark ground at the head of the
   panel, then the message on white under it, closing on one full-width
   control. The mark is what §7.1 is for — a visitor who does not know whose
   number is about to ring does not answer it — and giving it its own ground
   is what makes it read as a letterhead rather than as a line of copy. */
.lead-confirm { text-align: left; }
.lead-confirm__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* 54px inline, not 24px: the dialog's close control sits 12px from the right
     edge and is 38px across, and on a 350px card the licence line runs under
     it at anything narrower. */
  padding: min(28px, 3.4vh) 54px;
  background: var(--footer-green);
  text-align: center;
}
.lead-confirm__wordmark {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .24em;
  /* Letter-spacing appends a trailing space after the last glyph, so centred
     text sits one track-width left of true centre. */
  text-indent: .24em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--cream);
}
.lead-confirm__licence {
  font-size: 11px;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, .62);
}
.lead-confirm__body { padding-top: min(26px, 3.2vh); }
.lead-confirm__h {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: min(clamp(26px, 2.4vw, 36px), 4.4vh);
  line-height: 1.12;
  color: var(--green);
}
.lead-confirm__h:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.lead-confirm__lead {
  margin-top: min(12px, 1.6vh);
  font-size: 17px;
  line-height: 1.55;
  color: var(--lead-body);
}
.lead-confirm__who {
  margin-top: min(14px, 1.8vh);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lead-qualifier);
}
.lead-confirm__who strong { color: var(--lead-body); font-weight: 600; }

/* One control, full width, in the page's own ink — the same shape as the
   submit button the visitor has just pressed, so the panel closes the way it
   opened. */
.lead-confirm__done {
  width: 100%;
  margin-top: min(24px, 3vh);
  padding: min(16px, 1.7vh) 22px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--green);
  color: var(--cream);
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  line-height: 1.25;
  cursor: pointer;
  transition: background .3s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.lead-confirm__done:hover { background: var(--green-soft); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(24, 34, 30, .2); }
.lead-confirm__done:active { transform: translateY(0); box-shadow: none; }

.lead-fail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: min(20px, 2.4vh);
}

.lead-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  background: none;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.lead-btn:hover { transform: translateY(-2px); }
.lead-btn--messenger { background: var(--lead-messenger); color: #0B2E17; border-color: var(--lead-messenger); }
.lead-btn--messenger:hover { background: #1DBE59; border-color: #1DBE59; }
.lead-btn--messenger svg { width: 18px; height: 18px; }
.lead-btn--ghost { border-color: var(--lead-line); color: var(--lead-body); }
.lead-btn--ghost:hover { border-color: var(--green); color: var(--green); }

.lead-fail {
  margin-top: min(16px, 2vh);
  padding: min(16px, 2vh) 18px;
  border: 1px solid var(--lead-error);
  border-radius: var(--r-sm);
  background: #FDF6F6;
}
.lead-fail p { font-size: 15px; line-height: 1.55; color: var(--lead-error); }

/* ==========================================================================
   4. Dialogs (§11)
   ========================================================================== */

.lead-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--lead-ink);
  box-shadow: 0 40px 120px rgba(18, 26, 22, .45);
  overflow: visible;
}
.lead-dialog::backdrop {
  background: rgba(20, 28, 25, .78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lead-dialog:not([open]) { display: none; }

.lead-dialog__card {
  /* Named so the confirmation's mark can bleed back out to the card's edges.
     Restating the two values inside a negative margin is how they drift. */
  --lead-card-pad-y: min(clamp(26px, 3vw, 42px), 3.2vh);
  --lead-card-pad-x: min(clamp(22px, 3vw, 42px), 5vw);
  position: relative;
  max-height: 94vh;
  /* A floor, not a plan: a 500px-tall window exists and content must never
     become unreachable. It should not engage at any realistic height. */
  overflow: auto;
  padding: var(--lead-card-pad-y) var(--lead-card-pad-x);
  border-radius: 20px;
}
.lead-dialog__close {
  position: absolute;
  top: 12px; right: 12px;
  /* Above the confirmation's dark band, which comes later in the DOM. */
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--lead-line-soft);
  background: #fff;
  color: var(--green);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.lead-dialog__close:hover { background: var(--green); color: var(--cream); }

/* ---- the answered state -------------------------------------------------
   The ask is over. Leaving "Request a Callback" and its intro sitting above
   "Request received" makes the visitor read the question and the answer at
   the same time, and the panel then says nothing clearly. The heading and the
   intro go, the mark takes the head of the card, and the close control
   inverts onto it. */
.lead-dialog__card[data-confirmed] > .lead-dialog__h,
.lead-dialog__card[data-confirmed] > .lead-dialog__intro { display: none; }
/* …and with them the gap that separated the form from the heading, or the
   mark bleeds to the card's width but starts 28px down from its top edge. */
.lead-dialog__card[data-confirmed] > .lead-dialog__body { margin-top: 0; }
.lead-dialog__card[data-confirmed] .lead-confirm__mark {
  margin: calc(var(--lead-card-pad-y) * -1) calc(var(--lead-card-pad-x) * -1) 0;
  border-radius: 20px 20px 0 0;
}
.lead-dialog__card[data-confirmed] .lead-dialog__close {
  background: rgba(243, 241, 236, .12);
  border-color: rgba(243, 241, 236, .3);
  color: var(--cream);
}
.lead-dialog__card[data-confirmed] .lead-dialog__close:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }

/* The messenger glyph sits inside the sentence that asks for the number,
   immediately before the messenger's name — see mountDialog(). Sized in `em`
   so it tracks the intro's type, and nudged onto the baseline. */
.lead-inline-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: -.2em;
  margin-right: .3em;
  color: var(--lead-messenger);
}
.lead-inline-glyph svg { width: 1.2em; height: 1.2em; }

.lead-dialog__h {
  margin: 0;
  padding-right: 44px;
  font-family: var(--display);
  font-weight: 300;
  font-size: min(clamp(26px, 2.6vw, 38px), 3.9vh);
  line-height: 1.1;
  max-width: 18ch;
  color: var(--green);
}
.lead-dialog__intro {
  margin-top: min(12px, 1.2vh);
  font-size: 16px;
  line-height: 1.55;
  color: var(--lead-body);
}
.lead-dialog__body { margin-top: min(clamp(18px, 2vw, 28px), 2.2vh); }

/* §11 — the second squeeze. A 390px-wide phone rewraps the heading, the intro
   and both consent lines onto more lines than a desktop card, so the base
   clamps above are not enough on a short-and-narrow viewport (a phone with
   browser chrome, or a 1280x700 laptop). Nothing is removed and no type size
   drops below 15px — only the vertical rhythm compresses further.
   Verified at 1280x700, 1280x812, 1280x900, 390x844 and 360x640. */
@media (max-height: 760px) {
  .lead-dialog__card {
    padding-top:    min(clamp(26px, 3vw, 42px), 2.6vh);
    padding-bottom: min(clamp(26px, 3vw, 42px), 2.6vh);
  }
  .lead-dialog__h      { font-size: min(clamp(24px, 2.6vw, 38px), 3.4vh); }
  .lead-dialog__intro  { margin-top: min(12px, 1vh); font-size: 15px; }
  .lead-dialog__body   { margin-top: min(clamp(18px, 2vw, 28px), 1.8vh); }
  .lead-form   { gap: min(clamp(12px, 1.4vw, 18px), 1.25vh); }
  .lead-input  { padding: min(13px, 1.1vh) 15px; }
  .lead-label  { margin-bottom: min(8px, .55vh); }
  .lead-submit { padding: min(16px, 1.45vh) 22px; }
  .lead-consent { gap: min(9px, .7vh); }
}

/* ==========================================================================
   5. Call-to-action system (§9)
   ========================================================================== */

/* Two buttons, not one, on every substantial block: a reader still gathering
   information and a reader ready to buy need different next steps. */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(20px, 2.2vw, 32px);
}
.cta-pair--center { justify-content: center; }

.cta-pair .btn { cursor: pointer; }
.cta-pair__secondary { border-color: var(--lead-line); color: var(--green); background: none; }
.cta-pair__secondary:hover { border-color: var(--green); background: var(--green); color: var(--cream); }

/* Over imagery and on dark sections the secondary goes ghost. */
.section--dark .cta-pair__secondary,
.cta-pair--over .cta-pair__secondary {
  border-color: rgba(243, 241, 236, .45);
  color: var(--cream);
}
.section--dark .cta-pair__secondary:hover,
.cta-pair--over .cta-pair__secondary:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }
.section--dark .cta-pair__primary,
.cta-pair--over .cta-pair__primary { background: var(--cream); color: var(--green); }
.section--dark .cta-pair__primary:hover,
.cta-pair--over .cta-pair__primary:hover { background: #fff; }

/* The persistent header CTA, at EVERY width. On the narrowest phones the full
   label will not fit beside the wordmark, so the label shortens — the button
   is never dropped (§9). */
@media (max-width: 640px) {
  .site-header .btn--pill { display: inline-block; padding: 10px 16px; font-size: 14px; }
}
.cta-short { display: none; }
@media (max-width: 480px) {
  .cta-full  { display: none; }
  .cta-short { display: inline; }
  .site-header .btn--pill { padding: 9px 13px; font-size: 13px; }
}

/* Full width is an OPT-IN modifier on section CTAs, not a blanket rule — the
   header CTA and the paired dialog buttons must keep their intrinsic width. */
@media (max-width: 560px) {
  .cta-pair { flex-direction: column; align-items: stretch; }
  .cta-pair .btn {
    display: block;
    width: 100%;
    text-align: center;
    /* A full-width button is wide enough that a two-line label is no longer
       the failure that nowrap guards against. */
    white-space: normal;
  }
}

/* The document chips open the presentation form rather than serving a file
   (§1.2), so they are buttons now and need the anchor's dressing. */
/* The chip's box, type and hover live in main.css alongside the anchor version
   of the same control — this file used to restate them a size larger, which is
   how the two drifted apart. Only the affordance arrow is set here. */
.doc-links button::before { content: "↓"; font-size: 12px; }

/* ==========================================================================
   5b. Split lead block — form beside the contents of what is being offered
   The ask and the answer to "what do I actually get?" sit side by side, so the
   decision is made without scrolling away from the field set (§18.6).
   ========================================================================== */

.lead-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
  box-shadow: 0 26px 70px rgba(24, 34, 30, .12);
}
.lead-split__form {
  background: #fff;
  padding: clamp(28px, 3.2vw, 56px);
}
.lead-split__aside {
  background: var(--grey-alt);
  padding: clamp(28px, 3.2vw, 56px);
  display: flex;
  flex-direction: column;
}
.lead-split__form > .h-section { color: var(--green); }
.lead-split__intro {
  margin-top: clamp(14px, 1.4vw, 20px);
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
}
.lead-split__mount { margin-top: clamp(22px, 2.4vw, 36px); }

/* Phone and email share a row here, as they do in the contact section; name,
   consent, submit and the note run the full width. */
.lead-split__mount .lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}
.lead-split__mount .lead-form > .lead-field:first-of-type,
.lead-split__mount .lead-form > .lead-trap,
.lead-split__mount .lead-form > .lead-consent,
.lead-split__mount .lead-form > .lead-submit,
.lead-split__mount .lead-form > .lead-note,
.lead-split__mount .lead-form > .lead-legal,
.lead-split__mount .lead-confirm { grid-column: 1 / -1; }
.lead-split__mount .lead-note { justify-content: center; text-align: center; }

.lead-split__h {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
}
.lead-split__list {
  list-style: none;
  margin: clamp(18px, 2vw, 28px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lead-split__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.lead-split__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--burgundy);
}
.lead-split__doc {
  margin-top: auto;
  padding-top: clamp(24px, 2.6vw, 40px);
}
.lead-split__doc b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: .04em;
  color: var(--green);
}
.lead-split__doc span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--lead-qualifier);
}
/* Eight real spreads from the document being offered. Decorative — the list
   above is what states the contents — so they carry no alt text and are not
   announced twice. */
.lead-split__pages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* start, not the grid default of stretch: a stretched item takes the row's
     height, which overrides the tile's aspect-ratio and lets the tallest
     spread set the height of every tile in its row. */
  align-items: start;
  gap: 8px;
  margin-top: clamp(14px, 1.6vw, 22px);
}
.lead-split__pages img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--lead-line-soft);
  transition: transform .4s var(--ease);
}
.lead-split__pages img:hover { transform: translateY(-3px); }

@media (max-width: 1000px) {
  .lead-split { grid-template-columns: minmax(0, 1fr); }
  .lead-split__aside { border-top: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .lead-split__mount .lead-form { grid-template-columns: 1fr; }
  .lead-split__mount .lead-form > .lead-field { grid-column: 1 / -1; }
}

/* ==========================================================================
   6. Sticky bottom bar (§9)
   ========================================================================== */

.lead-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 78;
  display: none;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(30, 42, 38, .97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(243, 241, 236, .14);
}
.lead-bar__btn {
  flex: 1 1 0;
  padding: 13px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.lead-bar__btn--ghost { border-color: rgba(243, 241, 236, .45); color: var(--cream); background: none; }
.lead-bar__btn--ghost:hover { background: rgba(243, 241, 236, .12); }
.lead-bar__btn--solid { background: var(--cream); color: var(--green); }
.lead-bar__btn--solid:hover { background: #fff; }
.lead-bar__btn:active { transform: scale(.98); }

/* Height is set in JS from the bar's measured height — see initStickyBar().
   It collapses to 0 on its own above the breakpoint, because the bar is
   display:none there and therefore measures 0. No height here: the inline
   value is the only source of truth. */
.lead-bar__spacer { flex: none; pointer-events: none; }

@media (max-width: 1000px) {
  .lead-bar { display: flex; }
}
/* Above the breakpoint there is no bar, so nothing is reserved and nothing is
   lifted — asserted in CSS rather than left to a resize event firing, because
   a stale --lead-bar-h leaves a 66px hole under the footer on desktop. */
@media (min-width: 1001px) {
  .lead-bar__spacer { height: 0 !important; }
}

/* ==========================================================================
   7. Messenger widget (§10) — REMOVED
   The floating corner button is gone at the client's request; see the note in
   lead-capture.js where initMessengerWidget() used to be. --lead-messenger is
   still live: .lead-btn--messenger uses it inside the confirmation and on a
   failed send.
   ========================================================================== */

/* ==========================================================================
   8. Gated content block (§2, §18.6)
   ========================================================================== */

.gated {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.8vw, 46px);
  display: grid;
  gap: clamp(20px, 2.4vw, 40px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
}
.gated__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--grey);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lead-body);
}
.gated__list { list-style: none; margin: clamp(18px, 2vw, 28px) 0 0; padding: 0; display: grid; gap: 12px; }
.gated__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.55;
  color: var(--lead-body);
}
.gated__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: .58em;
  border-radius: 50%;
  background: var(--burgundy);
}
.gated__form {
  background: var(--grey);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 32px);
}
.gated__form .lead-input { background: #fff; }
.gated__form-h {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.2;
  color: var(--green);
}
@media (max-width: 1000px) { .gated { grid-template-columns: 1fr; } }

/* The locked state of a floor-plan card. The moment a real drawing arrives the
   card renders normally with no other change — this is a fallback, not a
   separate component. */
.plan-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--r-sm);
  background: #F5F5F3;
  min-height: clamp(220px, 26vw, 380px);
}
.plan-locked p { max-width: 40ch; color: var(--lead-body); }

/* ==========================================================================
   9. In-page section fallback
   ========================================================================== */

.lead-noscript {
  border: 1px solid var(--lead-line-soft);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 32px);
  color: var(--lead-body);
}
.lead-noscript a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   9b. Legal pages
   privacy-policy.html is part of the form's test surface (§5, §8.7) — it is a
   factual description of the field set, not boilerplate.
   ========================================================================== */

.legal {
  max-width: 74ch;
  margin-inline: auto;
  color: var(--lead-body);
}
.legal__meta {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--lead-qualifier);
}
.legal h2 {
  margin-top: clamp(34px, 3.6vw, 56px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 29px);
  line-height: 1.2;
  color: var(--green);
}
.legal h2 + p, .legal h2 + ul { margin-top: clamp(12px, 1.4vw, 18px); }
.legal p { font-size: 17px; line-height: 1.72; }
.legal p + p { margin-top: clamp(12px, 1.4vw, 18px); }
.legal strong { color: var(--lead-ink); font-weight: 600; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--green); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: #E4E6E3;
  border-radius: 4px;
  padding: 1px 5px;
}
.legal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.legal__list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.65;
}
.legal__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: .68em;
  border-radius: 50%;
  background: var(--burgundy);
}
.legal__foot {
  margin-top: clamp(40px, 4.4vw, 70px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--lead-line-soft);
  font-size: 15px;
}

/* ==========================================================================
   10. intl-tel-input, dressed to match the design system
   ========================================================================== */

.iti { width: 100%; display: block; }
.iti__tel-input { padding-left: 12px; }
.iti__country-container { padding: 1px; }
.iti__selected-country {
  border-radius: var(--r-btn) 0 0 var(--r-btn);
  background: transparent;
  color: var(--lead-ink);
}
.iti__selected-country:hover { background: rgba(38, 51, 47, .05); }
.iti__selected-dial-code { font-size: 16px; color: var(--lead-label); }
.iti__country-list {
  border-radius: var(--r-sm);
  border: 1px solid var(--lead-line-soft);
  box-shadow: 0 24px 60px rgba(18, 26, 22, .22);
  font-family: var(--body);
  font-size: 16px;
  color: var(--lead-ink);
}
.iti__country { padding: 9px 12px; }
.iti__search-input { font-family: var(--body); font-size: 16px; color: var(--lead-ink); }
/* v29 detaches the dropdown to the element given as dropdownParent, so it
   escapes the card's scroll container. Inside a dialog that parent is the
   <dialog> itself — see the comment on dropdownParent in lead-capture.js.
   The library positions the detached node itself: do not set position or
   inset here, or the list lands in the top-left corner of the screen. */
.iti--detached-country-selector { z-index: 2000; }

/* ==========================================================================
   11. Motion and print
   ========================================================================== */

/* The dialog arrives rather than appearing. `allow-discrete` is what lets a
   display:none → block change be transitioned at all; browsers without it fall
   back to the instant open the dialog has always had. */
@media (prefers-reduced-motion: no-preference) {
  .lead-dialog {
    opacity: 0;
    transition: opacity .3s var(--ease), overlay .35s allow-discrete, display .35s allow-discrete;
  }
  .lead-dialog[open] { opacity: 1; }
  @starting-style { .lead-dialog[open] { opacity: 0; } }

  /* The travel is on the CARD, not on the <dialog>. A transformed ancestor
     becomes the containing block for fixed-position descendants, and the phone
     field's country dropdown is detached to the <dialog> itself precisely so it
     can escape this card — transforming the dialog would drag the dropdown's
     coordinates with it. The card is not one of its ancestors. */
  .lead-dialog__card { transform: translateY(14px) scale(.985); transition: transform .35s var(--ease); }
  .lead-dialog[open] .lead-dialog__card { transform: none; }
  @starting-style { .lead-dialog[open] .lead-dialog__card { transform: translateY(14px) scale(.985); } }

  .lead-dialog::backdrop { opacity: 0; transition: opacity .3s ease, overlay .3s allow-discrete, display .3s allow-discrete; }
  .lead-dialog[open]::backdrop { opacity: 1; }
  @starting-style { .lead-dialog[open]::backdrop { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .lead-messenger:hover { transform: none; }
  .lead-btn:hover,
  .lead-submit:hover:not(:disabled),
  .lead-bar__btn:active { transform: none; box-shadow: none; }
}
@media print {
  .lead-messenger, .lead-bar, .lead-dialog, .lead-bar__spacer { display: none !important; }
}