/* ====================================================================
   PAGE-SCOPED STYLES, extracted from style.css on 2026-08-23.
   Auto-loaded by _main.php as css/<template>.css for this template only.

   Every rule here was scoped to .preconsult-page / .kb-intake
   and so could not affect any other page. It was costing every OTHER
   page 50,200 bytes of render-blocking CSS.

   Loaded AFTER style.css, exactly where it sat before, so cascade order
   between these rules and the global sheet is unchanged.

   Mixed rules - where one selector is scoped and another is global -
   deliberately stayed in style.css. Moving them would have changed what
   the global half does everywhere else.
   ==================================================================== */
/* ============================================================
   PRE-CONSULTATION (/hair/wigs/pre-consultation/)
   Five-section editorial intake for the wig studio. Tokens only;
   no hardcoded colors. Both themes resolved via .section--cream
   override block and base [data-theme="dark"] for dark sections.
   ============================================================ *//* Common: oversized section numerals (matches contact/weddings) */

.preconsult-page__hero,
.preconsult-page__expect,
.preconsult-page__pricing,
.preconsult-page__form-section,
.preconsult-page__signoff {
  position: relative;
  /* clip, NOT hidden. Both clip the oversized section numerals identically,
     but `hidden` also makes the section a scroll container, and that breaks
     position:sticky inside it: the sticky element resolves against a box that
     cannot scroll, so it parks at `top` immediately instead of travelling.
     On the questionnaire section that put the aside 173px below the form it
     introduces - the "gap above the form" - and meant it never followed the
     page down. `clip` establishes no scroll container, so sticky behaves. */
  overflow: clip;
  isolation: isolate;
}/* --------------------------------------------
   SECTION 1: HERO (dark dignity statement)
   DOMINANT MOMENT: italic-accent H1 "with care."
   over deep base surface with two radial glows.
   -------------------------------------------- */
.preconsult-page__hero {
  display: flex;
  flex-direction: column;
  /* Substantial but not a full empty screen - the centered content was
     marooned in the lower third under ~55% dead space at 100svh. */
  min-height: clamp(34rem, 82svh, 52rem); /* fold-offset-ok: deliberate proportion - a full fold left the content marooned; see comment above */
  padding-block: clamp(1.25rem, 4vw, 4rem) clamp(2rem, 6vw, 5rem);
  background: var(--color-bg);
  color: var(--color-body);
  box-sizing: border-box;
}
@supports not (height: 100svh) {
  .preconsult-page__hero { min-height: 90vh; }
}


.preconsult-page__hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 12% 30%, color-mix(in srgb, var(--color-accent-glow) 18%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 88% 75%, rgba(212, 160, 160, 0.16) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .preconsult-page__hero-glow {
  background:
    radial-gradient(ellipse 55% 45% at 12% 30%, color-mix(in srgb, var(--color-accent-glow) 20%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 88% 75%, rgba(212, 160, 160, 0.18) 0%, transparent 60%);
}

.preconsult-page__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 940px;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.preconsult-page__breadcrumbs { margin-bottom: clamp(0.75rem, 2vw, 1.5rem); }

.preconsult-page__hero-content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  margin-block: auto;
}

.preconsult-page__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-eyebrow);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.preconsult-page__hero-eyebrow svg { color: var(--color-rose); }

.preconsult-page__hero-title {
  /* Velvet Cinema editorial serif hero (matches .svcs-hero__title). */
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 7.5vw, 5.25rem);
  font-weight: 350;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0;
}
.preconsult-page__hero-title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}

.preconsult-page__hero-lead {
  max-width: 38rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-body);
  margin: 0;
}

.preconsult-page__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

.preconsult-page__hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.55rem 0.25rem;
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.preconsult-page__hero-phone svg { color: var(--color-accent); transition: transform 200ms ease; }
@media (hover: hover) {
  .preconsult-page__hero-phone:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
  .preconsult-page__hero-phone:hover svg { transform: translateX(2px); }
}/* --------------------------------------------
   SECTION 2: WHAT TO EXPECT (cream)
   DOMINANT MOMENT: two consult-tier cards
   with display-size prices anchoring the row.
   -------------------------------------------- */
.preconsult-page__expect {
  padding-block: clamp(3rem, 8vw, 6rem);
}
.preconsult-page__expect .container { position: relative; z-index: 2; }

.preconsult-page__expect-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.preconsult-page__expect-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-eyebrow);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.preconsult-page__expect-head .eyebrow svg { color: var(--color-accent); }

.preconsult-page__expect-title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 350;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0;
}
.preconsult-page__expect-title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}

.preconsult-page__tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 720px) {
  .preconsult-page__tiers { grid-template-columns: 1fr 1fr; }
}

.preconsult-page__tier {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
@media (hover: hover) {
  .preconsult-page__tier:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-hover);
  }
}

.preconsult-page__tier-kicker {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin: 0 0 0.5rem;
}

.preconsult-page__tier-price {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0;
}

.preconsult-page__tier-duration {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-muted);
  margin: 0.25rem 0 1rem;
}

.preconsult-page__tier-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}

.preconsult-page__expect-list {
  max-width: 50rem;
}

.preconsult-page__expect-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0 0 1.25rem;
}

.preconsult-page__expect-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.preconsult-page__expect-list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
}
.preconsult-page__expect-list li svg {
  color: var(--color-accent);
  margin-top: 0.2rem;
}

.preconsult-page__expect-note {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-muted);
}/* --------------------------------------------
   SECTION 3: PRICING TRANSPARENCY (dark)
   DOMINANT MOMENT: middle "Heat-Defiant" card
   visually elevated; rose accent on featured.
   -------------------------------------------- */
.preconsult-page__pricing {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--color-bg);
  color: var(--color-body);
}
.preconsult-page__pricing .container { position: relative; z-index: 2; }

.preconsult-page__pricing-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(212, 160, 160, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, color-mix(in srgb, var(--color-accent-glow) 10%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .preconsult-page__pricing-glow {
  background:
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(212, 160, 160, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, color-mix(in srgb, var(--color-accent-glow) 14%, transparent) 0%, transparent 60%);
}

.preconsult-page__pricing-head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.preconsult-page__pricing-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-eyebrow);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.preconsult-page__pricing-head .eyebrow svg { color: var(--color-accent); }

.preconsult-page__pricing-title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 350;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0 0 1rem;
}
.preconsult-page__pricing-title em {
  font-style: italic;
  font-weight: 480;
  color: var(--color-rose-deep);
}

.preconsult-page__pricing-lead {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
  max-width: 38rem;
}

.preconsult-page__pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 720px) {
  .preconsult-page__pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.preconsult-page__price-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  transition: transform 250ms ease, border-color 250ms ease, background 250ms ease;
}
[data-theme="dark"] .preconsult-page__price-card {
  /* Was rgba white 0.03 - nearly invisible against near-black. Give the cards
     a real elevated surface + inner top-light so they read as objects. */
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (hover: hover) {
  .preconsult-page__price-card:hover {
    transform: translateY(-3px);
    border-color: rgba(77, 170, 184, 0.35);
  }
}

.preconsult-page__price-card--featured {
  border-color: rgba(212, 160, 160, 0.32);
  background: rgba(212, 160, 160, 0.04);
}
[data-theme="dark"] .preconsult-page__price-card--featured {
  border-color: rgba(212, 160, 160, 0.42);
  background: rgba(212, 160, 160, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.preconsult-page__price-card-kicker {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
  margin: 0 0 0.5rem;
}
.preconsult-page__price-card--featured .preconsult-page__price-card-kicker {
  color: var(--color-rose);
}

.preconsult-page__price-card-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin: 0 0 0.85rem;
}

.preconsult-page__price-card-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}

.preconsult-page__pricing-policy {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 44rem;
}/* --------------------------------------------
   DIVIDER: hairline scrub-in between sections 3 and 4
   Matches /contact/'s .contact-page__specialty-divider.
   -------------------------------------------- */
.preconsult-page__divider {
  display: block;
  width: clamp(3rem, 12vw, 9rem);
  height: 1px;
  margin: 0 auto;
  background: var(--color-rose);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .preconsult-page__divider {
    transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.preconsult-page__divider.is-revealed { transform: scaleX(1); }/* --------------------------------------------
   SECTION 4: QUESTIONNAIRE (cream + form)
   DOMINANT MOMENT: editorial aside with italic
   accent heading; form fills the right column.
   -------------------------------------------- */
.preconsult-page__form-section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  /* Land the SHELL exactly on the sticky threshold, not the section box.
     The old clamp(4rem, 8vw, 6rem) stacked on top of this section's own
     padding and left 184px of empty screen above the first line at 1440 (the
     "gap above the form"). Subtracting the padding back out means the jump
     puts the form's first row at --sticky-top, which is also where the sticky
     aside pins - so the two columns start level instead of the aside sitting
     ~60px lower than the form it introduces.
     max() keeps it sane if the padding ever exceeds the offset. */
  scroll-margin-top: max(0px, calc(var(--sticky-top) - clamp(3rem, 7vw, 5.5rem)));
}
.preconsult-page__form-section .container { position: relative; z-index: 2; }

.preconsult-page__form-shell {
  display: grid;
  /* minmax(0,...), not a bare `1fr`. A bare `1fr` is `minmax(auto, 1fr)`, so this track was
     floored at the form's min-content - and the form's min-content is set by the 4-step pill
     rail inside it (`.kb-intake__rail`, measured 715-732px). The track resolved to 761px inside
     a 721px box, and `documentElement.scrollWidth == clientWidth`, so the overflow was CLIPPED
     rather than scrollable: the right edge of the form, inputs included, was unreachable.
     Worst below the band (560-767); still live at 768-810.
     The floor also propagated UP - at 960+ the `5fr 7fr` shell handed the form track exactly the
     rail's min-content and starved the aside to 66px. Capping the floor here is only half the
     fix; the rail itself has to be able to shrink (see .kb-intake__rail-label). */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 960px) {
  .preconsult-page__form-shell {
    grid-template-columns: 5fr 7fr;
    align-items: start;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

.preconsult-page__form-aside { display: flex; flex-direction: column; gap: 1.25rem; }/* The aside rides down beside the questionnaire on large screens. The form is
   a tall multi-band accordion, so without this the reassurance ("a short
   questionnaire helps us...") and the phone number scroll away within the
   first band and are gone for the rest of a long form.
   Gated at 960px to match the two-column shell above - below that the aside
   stacks and sticky would pin it over the form it introduces. --sticky-top
   already resolves to header height + 1rem at each breakpoint.
   max-height + overflow is the height guard: a short laptop viewport must not
   clip the phone number off the bottom of a pinned block. */
@media (min-width: 960px) {
  .preconsult-page__form-aside {
    position: sticky;
    top: var(--sticky-top);
    max-height: calc(100svh - var(--sticky-top) - 2rem);
    /* Vertical only - see .post-toc__sticky in inspiration.css. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.preconsult-page__form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-eyebrow);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.preconsult-page__form-eyebrow svg { color: var(--color-accent); }

.preconsult-page__form-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0;
}
.preconsult-page__form-title em {
  font-style: italic;
  color: var(--color-rose);
}

.preconsult-page__form-reassurance {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}

.preconsult-page__form-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  min-height: 48px;
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.preconsult-page__form-phone svg { color: var(--color-accent); flex-shrink: 0; }
.preconsult-page__form-phone-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}
.preconsult-page__form-phone-number {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
}
@media (hover: hover) {
  .preconsult-page__form-phone:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
}

.preconsult-page__form-wrap {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.preconsult-page__form-fb { width: 100%; }/* --------------------------------------------
   SECTION 5: CLOSING SIGNATURE (cream)
   DOMINANT MOMENT: italic "Warmly," opening.
   -------------------------------------------- */
.preconsult-page__signoff {
  padding-block: clamp(3rem, 7vw, 5rem);
  text-align: left;
}
.preconsult-page__signoff .container { position: relative; z-index: 2; }

.preconsult-page__signoff-inner { max-width: 38rem; }

.preconsult-page__signoff .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-eyebrow);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.preconsult-page__signoff .eyebrow svg { color: var(--color-rose); }

.preconsult-page__signoff-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 0 0 1rem;
}
.preconsult-page__signoff-title em {
  font-style: italic;
  color: var(--color-rose);
}

.preconsult-page__signoff-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
  margin: 0 0 1.25rem;
}

.preconsult-page__signoff-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .preconsult-page__hero-content > * {
    animation: preconsult-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .preconsult-page__hero-content > :nth-child(1) { animation-delay: 0.05s; }
  .preconsult-page__hero-content > :nth-child(2) { animation-delay: 0.15s; }
  .preconsult-page__hero-content > :nth-child(3) { animation-delay: 0.25s; }
  .preconsult-page__hero-content > :nth-child(4) { animation-delay: 0.35s; }

  .preconsult-page__tier {
    animation: preconsult-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .preconsult-page__tier:nth-child(2) { animation-delay: 0.12s; }
}
/* ============================================
   KB-INTAKE SYSTEM (banded accordion for FormBuilder intake forms)
   First shipped on: pre-consultation.php  4 (wig + topper consult)
   Designed to be reusable for trichology, PMU, bridal, custom color,
   and curl intakes. Selectors target FB-emitted .Inputfield_<name>
   markup so the form's POST cycle is preserved verbatim.
   DOMINANT MOMENT: rose-deep border + filled index badge on the
   current band, with the giant ghosted 4.1 / 4.2 / 4.3 / 4.4 numeral
   binding the form to the page's section numbering system.
   ============================================ */
.kb-intake {
  --kb-rose: var(--color-rose-deep);
  --kb-rose-soft: rgba(184, 128, 124, 0.12);
  /* Fully opaque rail bg: when the sticky rail covers a band card during
     scroll, a translucent rail let the card border bleed through underneath
     creating a visible "rail overlapping band" effect. Solid color matches
     the section --cream surface so the rail sits flush above the band. */
  --kb-rail-bg: var(--color-bg);

  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
[data-theme="dark"] .kb-intake {
  --kb-rose-soft: rgba(232, 185, 182, 0.10);
  --kb-rail-bg: var(--color-bg);
}/* ── Pill rail (NON-sticky) ────────────────────────────────
       Was previously `position: sticky; top: clamp(96px, 14vw, 132px)` which
       created a CONSTANT 51px overlap with band 1 at every scroll position
       (proven via puppeteer rect measurement: rail.bottom > band1.top by
       exactly 51px across all scrolls). Sticky reserves the rail's STATIC
       space in document flow, then visually offsets the rail down by 91px
       to stick at viewport top:132. The form, sitting in its natural
       position, doesn't know the rail moved -> sticky visual rect overlaps
       form's static space. Five prior iterations chasing scroll-margin /
       opaque bg / band z-index never addressed this root cause.
       Drop sticky entirely. Rail scrolls naturally with the page. Band
       index circles + rose border on the active band still communicate
       progress when the rail has scrolled off screen. ── */
.kb-intake__rail {
  list-style: none;
  position: relative;
  z-index: 2;
  display: grid;
  /* minmax(0,...) for the same reason as the form shell above: with a bare `1fr` each of the
     four tracks floored at its own min-content, the rail floored at 715-732px, and because the
     rail sits inside a `1fr` form column that floor became the WHOLE column's floor. That is
     what pushed the card past its container below ~830px and what starved the 960+ aside.
     The rail is the widest single thing in this form; it has to be the one that yields. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  padding: 0.75rem 1rem;
  max-width: 840px;
  background: var(--kb-rail-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.kb-intake__rail-step {
  display: flex;
  /* The numeral and the label sit side by side when the step has room for it, and the label
     drops to its own line under the numeral when it does not. That is `flex-wrap` doing the
     work intrinsically - no breakpoint, because the constraint here is the width of the FORM
     COLUMN, which is not a function of viewport width: it is 792px at a 900 viewport and 471px
     at 1024, where the page goes two-column. Every viewport-gated version of this rule is
     therefore gated on the wrong number. Measured: side-by-side holds down to ~860, stacks
     below that and again across the 2-col desktop range, which is exactly right. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  /* Grid items default to `min-width: auto`, which re-imposes the min-content floor that
     minmax(0,1fr) just removed from the tracks. Both are needed. */
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
}
.kb-intake__rail-step.is-current {
  background: var(--kb-rose-soft);
  color: var(--color-heading);
}
.kb-intake__rail-step.is-done { color: var(--kb-rose); }

.kb-intake__rail-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* flex-shrink:0, or the 22px circle is squeezed into an oval the moment the step gets
     narrow - which it now can, by design. Caught in the 1024 frame, not by any measurement. */
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  opacity: 0.55;
}
.kb-intake__rail-step.is-current .kb-intake__rail-num {
  background: var(--kb-rose);
  color: var(--color-bg-elevated);
  border-color: var(--kb-rose);
  opacity: 1;
}
[data-theme="dark"] .kb-intake__rail-step.is-current .kb-intake__rail-num {
  color: var(--color-bg);
}

.kb-intake__rail-check {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto; /* same reason as .kb-intake__rail-num - it replaces the numeral when done */
  color: var(--kb-rose);
}
.kb-intake__rail-step.is-done .kb-intake__rail-check { display: inline-flex; }
.kb-intake__rail-step.is-done .kb-intake__rail-num { display: none; }/* The label WRAPS. It used to be `white-space: nowrap`, which is what actually made the rail
   unshrinkable - four un-wrappable uppercase labels at 0.1em tracking demand 715-732px, and the
   rail's column is only ever 670-790px wide, so the component was over-committed at every width
   including 1280. Wrapping is what lets the rail live inside its column instead of forcing the
   column open. `balance` keeps a two-line label split evenly rather than orphaning one word.
   The phone rule below re-declares nowrap inside the visually-hidden clip, where it belongs. */
.kb-intake__rail-label {
  white-space: normal;
  text-wrap: balance;
  text-align: center;
  /* The flex BASIS is what makes the four steps wrap as one. Left to `auto`, each label decides
     independently on its own text width, so at 768 "THE VISION" stayed beside its numeral while
     the other three dropped below theirs - four sibling chips in two different layouts, which
     reads as a bug. A fixed basis means every step asks for the same width and therefore makes
     the same decision. 7rem is the measured hinge: inline at 860-900 where it has always been
     inline, stacked at <=820 and across the 2-col desktop column, where inline does not fit.
     No grow - growing would fill the step and shove the numeral off to the left edge, breaking
     the centred group. */
  flex: 0 1 7rem;
}

@media (prefers-reduced-motion: no-preference) {
  .kb-intake__rail-step,
  .kb-intake__rail-num {
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease;
  }
}
@media (hover: hover) {
  .kb-intake__rail-step:hover { color: var(--color-heading); }
  .kb-intake__rail-step.is-current:hover { color: var(--color-heading); }
}/* Mobile rail: drop label + badge chrome; show bare numerals */
@media (max-width: 559px) {
  .kb-intake__rail { padding: 0.55rem 0.6rem; }
  .kb-intake__rail-step { padding: 0.4rem 0.55rem; }
  /* Visually hidden, NOT display:none. The numeral beside it is aria-hidden, so this
     label is the tab's only accessible name - removing it from the a11y tree left four
     unnamed role=tab buttons on every phone. Same clip pattern as .sr-only (:666). */
  .kb-intake__rail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .kb-intake__rail-num {
    width: auto;
    height: auto;
    border: 0;
    font-size: 15px;
    font-weight: 700;
    opacity: 1;
  }
  .kb-intake__rail-step.is-current .kb-intake__rail-num {
    background: transparent;
    color: var(--color-heading);
  }
  /* Specificity match required. The dark override at :22547 sets color: var(--color-bg)
     for the filled rose pill, and at (0,3,0) it outranks the (0,2,0) rule above - so on
     phones, where the pill is transparent, the active numeral painted background-on-
     background at 1.21:1. Repeating the attribute selector is what makes this win. */
  [data-theme="dark"] .kb-intake__rail-step.is-current .kb-intake__rail-num {
    color: var(--color-heading);
  }
}/* ── Form ─────────────────────────────────────────────────── */
.kb-intake__form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
}/* ── Band ─────────────────────────────────────────────────── */
.kb-intake__band {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
  /* scroll-margin-top must clear: chrome height (~80px) + rail top offset
     (~132px) + rail height (~60px) + breathing room. Otherwise click-to-band
     scroll lands the band header BEHIND the sticky rail. */
  scroll-margin-top: clamp(220px, 22vw, 280px);
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake__band {
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  }
}
.kb-intake__band.is-current {
  border-color: var(--kb-rose);
  box-shadow: var(--shadow-card-hover);
}
.kb-intake__band.is-done { background: var(--color-bg-alt); }/* ── Suppress band-side numbering (band index circle + 4.1/4.2/etc ghost
       numerals + §04 page watermark) per Ben's feedback. Rail step numbers
       1/2/3/4 are KEPT - they're the form-step wayfinding.
       Elements left in the partial so future intake forms can re-show them
       by overriding `display: none` if needed. ── */
.kb-intake__band-numeral,
.kb-intake__band-index { display: none !important; }/* The band head was a 3-col grid: index | text | chevron. With index gone,
       collapse to 2 cols so the text takes the full available space. */
.kb-intake__band-head { grid-template-columns: 1fr auto; gap: 1rem; }/* Also kill the page-section watermark numerals across the WHOLE page
       (01 hero / 02 expect / 03 pricing / 04 form / 05 signoff). Ben asked
       for all of them after seeing the form section was the only one cleaned
       up. The watermark elements stay in the markup so the page can re-enable
       them per-section if ever needed. */

.kb-intake__band-numeral {
  position: absolute;
  top: clamp(0.25rem, 1vw, 0.75rem);
  right: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}
.kb-intake__band.is-current .kb-intake__band-numeral {
  opacity: 0.1;
  color: var(--kb-rose);
}/* Band head (the clickable header) */
.kb-intake__band-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  width: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
@media (hover: hover) {
  .kb-intake__band-head:hover .kb-intake__band-title { color: var(--kb-rose); }
  .kb-intake__band-head:hover .kb-intake__band-chevron { color: var(--color-heading); }
}

.kb-intake__band-index {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-hover);
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-muted);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake__band-index {
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
}
.kb-intake__band.is-current .kb-intake__band-index {
  background: var(--kb-rose);
  color: var(--color-bg-elevated);
  border-color: var(--kb-rose);
}
.kb-intake__band.is-done .kb-intake__band-index {
  background: transparent;
  border-color: var(--kb-rose);
  color: var(--kb-rose);
}
.kb-intake__band-index-check {
  display: none;
  align-items: center;
  justify-content: center;
}
.kb-intake__band.is-done .kb-intake__band-index-num { display: none; }
.kb-intake__band.is-done .kb-intake__band-index-check { display: inline-flex; }

.kb-intake__band-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.kb-intake__band-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kb-rose);
}

.kb-intake__band-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--color-heading);
  text-wrap: balance;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake__band-title { transition: color 180ms ease; }
}
.kb-intake__band-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--kb-rose);
}

.kb-intake__band-prompt,
.kb-intake__band-summary {
  display: none;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: 1.4;
}
.kb-intake__band:not(.is-current):not(.is-done) .kb-intake__band-prompt { display: block; }
.kb-intake__band.is-done:not(.is-current) .kb-intake__band-summary {
  display: block;
  color: var(--kb-rose);
}

.kb-intake__band-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-muted);
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake__band-chevron { transition: transform 240ms ease, color 180ms ease; }
}
.kb-intake__band.is-current .kb-intake__band-chevron {
  transform: rotate(180deg);
  color: var(--kb-rose);
}/* Band panel (expanding via grid-template-rows trick) */
.kb-intake__band-panel {
  display: grid;
  grid-template-rows: 0fr;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake__band-panel {
    transition: grid-template-rows 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.kb-intake__band.is-current .kb-intake__band-panel { grid-template-rows: 1fr; }

.kb-intake__band-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.kb-intake__band-panel-body {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border);
}

.kb-intake__band-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-body);
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
  max-width: 32rem;
}/* ── Fields layout: honor FB's native column system + use real flex gap
       (not inner padding) so paired underlines have parity widths. ── */
.kb-intake__band-fields {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0;
  padding: 0;
  list-style: none;
  --kb-col-gap: clamp(1.25rem, 2vw, 1.75rem);
  row-gap: clamp(1.25rem, 2.5vw, 1.5rem);
  column-gap: var(--kb-col-gap);
}
.kb-intake .Inputfield { margin: 0; padding: 0; list-style: none; }
.kb-intake__band-fields > .Inputfield {
  width: 100%;
  flex: 0 0 100%;
}
@media (min-width: 720px) {
  /* Honor FB's InputfieldColumnWidth pairing (first_name + last_name, etc).
       Use calc(50% - half-gap) so both columns are exactly equal width and
       paired underlines line up end-to-end. */
  .kb-intake__band-fields > .Inputfield.InputfieldColumnWidth {
    flex: 0 0 calc(50% - (var(--kb-col-gap) / 2));
    max-width: calc(50% - (var(--kb-col-gap) / 2));
    width: auto;
  }
}/* ── Honeypot field: visually hidden but in the DOM. Off-screen positioning
       (not display:none - sophisticated bots skip display:none) so bots that
       auto-fill all text fields trip the server-side check in
       pre-consultation.php. ── */
.kb-intake__honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}/* ── Labels: refined uppercase eyebrow that color-shifts on focus-within.
       padding: 0 !important is mandatory: bootstrap5's `.form-label` class
       adds `padding-left: 1.08rem` (~17.28px) ONLY to input-field labels
       (not selects), so the text INSIDE the label was shifted 17px right
       on text inputs vs 0 on selects -- a visible misalignment between
       paired labels in the right column that getBoundingClientRect on the
       label BOX did not catch (boxes were aligned; text inside wasn't). ── */
.kb-intake .Inputfield > .InputfieldHeader,
.kb-intake .InputfieldHeader,
.kb-intake .form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
  padding: 0 !important;
  border: 0;
  background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake .Inputfield > .InputfieldHeader,
  .kb-intake .InputfieldHeader,
  .kb-intake .form-label { transition: color 220ms ease; }
}/* FB's bootstrap5 framework adds `padding-left: 26.4px` to InputfieldContent
       on non-first-column wrappers (its own column-pair gutter). That eats 26px
       of the right-column input width and is the root cause of the
       left-underline-longer-than-right misalignment Ben surfaced. Nuke it. */
.kb-intake .InputfieldContent {
  margin: 0 !important;
  padding: 0 !important;
}/* Focus-within label color shift (svc-form pattern: muted -> rose). */
.kb-intake .Inputfield:focus-within > .InputfieldHeader,
.kb-intake .Inputfield:focus-within .InputfieldHeader {
  color: var(--kb-rose);
}/* ── Underline-only inputs (svc-form aesthetic). The width: 100% + max-width
       overrides are required to defeat FB's `.form-control` + `InputfieldMaxWidth`
       classes (Bootstrap5 framework) which otherwise leave the right-column
       input visibly shorter than the left. ── */
.kb-intake input[type="text"],
.kb-intake input[type="email"],
.kb-intake input[type="tel"],
.kb-intake input[type="number"],
.kb-intake input[type="url"],
.kb-intake input[type="date"],
.kb-intake select,
.kb-intake textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-hover);
  border-radius: 0;
  padding: 0.5rem 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-heading);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake input,
  .kb-intake select,
  .kb-intake textarea {
    transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                color 220ms ease;
  }
}
.kb-intake input:focus,
.kb-intake select:focus,
.kb-intake textarea:focus {
  border-bottom-color: var(--kb-rose);
  box-shadow: 0 1px 0 var(--kb-rose),
              0 8px 18px color-mix(in srgb, var(--kb-rose) 12%, transparent);
}
[data-theme="dark"] .kb-intake input:focus,
[data-theme="dark"] .kb-intake select:focus,
[data-theme="dark"] .kb-intake textarea:focus {
  box-shadow: 0 1px 0 var(--kb-rose),
              0 8px 18px color-mix(in srgb, var(--kb-rose) 22%, transparent);
}

.kb-intake textarea {
  min-height: 6rem;
  max-height: 18rem;
  resize: vertical;
  line-height: 1.55;
}/* ── Select fallback: when JS hasn't initialized yet OR the user has JS off,
       the native select renders with the project's custom chevron SVG so it
       doesn't look like a bare OS-default dropdown. Once main.js's
       initCustomSelects() runs, the native select gets .kb-select-hidden
       (display: none) and the kb-custom-select component renders instead
       with the rose-bordered portaled dropdown. ── */
.kb-intake select {
  padding-right: 1.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23685850' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px 12px;
}
[data-theme="dark"] .kb-intake select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236a9aa8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.kb-intake select option {
  background: var(--color-bg-elevated);
  color: var(--color-heading);
}/* ── kb-custom-select trigger - inherits the underline aesthetic so the
       wrapped select reads identically to a text input. The dropdown
       (portaled to body) uses the global .kb-custom-select__dropdown rules
       above. ── */
.kb-intake .kb-custom-select { width: 100%; }
.kb-intake .kb-custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-hover);
  border-radius: 0;
  padding: 0.5rem 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-heading);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  min-height: 44px;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake .kb-custom-select__trigger {
    transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                color 220ms ease;
  }
}
.kb-intake .kb-custom-select__trigger[data-has-value="false"] {
  color: var(--color-muted);
}
@media (hover: hover) {
  .kb-intake .kb-custom-select__trigger:hover {
    border-bottom-color: var(--kb-rose);
  }
}
.kb-intake .kb-custom-select__trigger[aria-expanded="true"],
.kb-intake .kb-custom-select__trigger:focus-visible {
  border-bottom-color: var(--kb-rose);
  box-shadow: 0 1px 0 var(--kb-rose),
              0 8px 18px color-mix(in srgb, var(--kb-rose) 12%, transparent);
}
[data-theme="dark"] .kb-intake .kb-custom-select__trigger[aria-expanded="true"],
[data-theme="dark"] .kb-intake .kb-custom-select__trigger:focus-visible {
  box-shadow: 0 1px 0 var(--kb-rose),
              0 8px 18px color-mix(in srgb, var(--kb-rose) 22%, transparent);
}
.kb-intake .kb-custom-select__chevron {
  width: 12px;
  height: 12px;
  color: var(--color-muted);
  flex-shrink: 0;
  margin-left: 0.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake .kb-custom-select__chevron { transition: transform 240ms ease, color 220ms ease; }
}
.kb-intake .kb-custom-select__trigger[aria-expanded="true"] .kb-custom-select__chevron {
  transform: rotate(180deg);
  color: var(--kb-rose);
}/* Focus-within (now on the trigger, not the native select) shifts the label */
.kb-intake .Inputfield:has(.kb-custom-select__trigger[aria-expanded="true"]) > .InputfieldHeader,
.kb-intake .Inputfield:has(.kb-custom-select__trigger:focus-visible) > .InputfieldHeader {
  color: var(--kb-rose);
}

.kb-intake ::placeholder {
  color: var(--color-muted);
  opacity: 0.55;
  font-weight: 300;
}/* ── Required marker: override FB module CSS so we render the rose dot,
       not its red asterisk. FB rule lives in site/modules/FormBuilder/
       FormBuilder.css:154 with content "*" color red. Our scope adds the
       .kb-intake parent for higher specificity + forces content/color/
       font-size 0 so the "*" character cannot leak through. ── */
.kb-intake .FormBuilder .InputfieldStateRequired > .InputfieldHeader:first-child::after,
.kb-intake .FormBuilder .InputfieldStateRequired > .InputfieldHeader:first-child:after,
.kb-intake .InputfieldStateRequired > .InputfieldHeader::after {
  content: '' !important;
  color: transparent !important;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kb-rose);
  margin-left: 0.45rem;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}/* ── Checkbox / radio: chip-pill list (Mockup E signature, refined) ── */
.kb-intake .InputfieldCheckboxesStacked,
.kb-intake .InputfieldRadiosStacked,
.kb-intake .InputfieldContent > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kb-intake .form-check {
  display: block;
  padding: 0;
  margin: 0;
}
.kb-intake .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  background: transparent;
  border: 1px solid var(--color-border-hover);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-body);
  cursor: pointer;
  min-height: 40px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .kb-intake .form-check-label {
    transition: border-color 220ms ease, background 220ms ease, color 220ms ease,
                box-shadow 220ms ease, transform 220ms ease;
  }
}
@media (hover: hover) {
  .kb-intake .form-check-label:hover {
    border-color: var(--kb-rose);
    color: var(--color-heading);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--kb-rose) 10%, transparent);
    transform: translateY(-1px);
  }
}
.kb-intake .form-check-input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--kb-rose);
  flex-shrink: 0;
}
.kb-intake .form-check-label:has(input:checked) {
  background: var(--kb-rose-soft);
  border-color: var(--kb-rose);
  color: var(--color-heading);
}/* ── Error / notes from FB framework ── */
.kb-intake .InputfieldErrors,
.kb-intake .notes {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-error, #c0392b);
  margin-top: 0.35rem;
  padding: 0;
  list-style: none;
}
.kb-intake .description {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}
.kb-intake .InputfieldStateError input,
.kb-intake .InputfieldStateError textarea,
.kb-intake .InputfieldStateError select {
  border-bottom-color: var(--color-error, #c0392b);
  box-shadow: 0 1px 0 var(--color-error, #c0392b);
}
.kb-intake .InputfieldStateError .InputfieldHeader { color: var(--color-error, #c0392b); }/* ── Band actions (Continue button row) ──────────────────── */
.kb-intake__band-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.25rem, 2vw, 1.5rem);
  border-top: 1px solid var(--color-border);
}
.kb-intake__step-meta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-left: auto;
}/* ── Final band submit row ──────────────────────────────── */
.kb-intake__final {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.25rem, 2vw, 1.5rem);
  border-top: 1px solid var(--color-border);
}
.kb-intake__final .Inputfield.InputfieldSubmit {
  margin: 0;
  padding: 0;
}/* Carried-over cf-turnstile-response token + website honeypot: present in the
   DOM so they POST, but off-screen (not display:none, so honeypot bots still
   see the website field). The Turnstile widget itself renders visibly, outside
   this wrapper. */
.kb-intake__carryover {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.kb-intake__final .InputfieldSubmit .InputfieldHeader { display: none; }
.kb-intake__final-micro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-left: auto;
  max-width: 24rem;
}