/* ================================================================
   css/pages/contacts.css — /contacts page-specific sections.
   menu-line, help, footer are shared partials (css/sections/*.css).
   This file owns:  .her (hero, "Herо")  and  .form (contact form).

   SOURCE: research/fragments/contacts/{her,form}.html (structure) +
   research/raw/{desktop,tablet,phone}/contacts.html inline <style> blocks,
   extracted via a pagecss helper (SHARED-NOTES.md landmine #1 — the home
   page's research/_stylesheet.css does NOT cover this page).
   Tablet and phone raw captures produced byte-identical CSS to desktop, so
   one extraction covers all four breakpoints; only DOM presence differs
   (verified per-element against raw/{tablet,phone}/contacts.html).

   HEIGHT MATH — her (desktop 1440x900):
     .her__main   50vh (min 400px)         -> 450
     .her__hr      1px                     ->   1
     .her__desc   20vh (min 200px)         -> 200
                                            -----
                                              651  == reference-heights.json ✔
   laptop (1280x832, tablet-layout range but NOT vh-overridden on .her__main):
     .her__main   50vh (min 400)  = 416
     .her__hr                     =   1
     .her__desc   12vh (min unset)= 99.84
                                    ------
                                    516.84 ≈ 517 ✔
   tablet (810x1080, same layout range):
     .her__main   50vh = 540
     .her__hr           =   1
     .her__desc   12vh  = 129.6
                          ------
                          670.6 ≈ 671 ✔
   phone (390x844): .her__main 40vh(min300)=337.6, hr=1, .her__desc is
     height:min-content (content-driven) — verified in browser, not vh math.

   HEIGHT MATH — form: root is height:min-content everywhere (content-driven,
   dominated by the 42px-gap form stack + the 14vh button row on desktop/
   laptop/tablet, min-content on phone). Verified in browser against
   reference: 447 / 474 / 521 / 487.
   ================================================================ */

/* ----------------------------------------------------------------
   shared local primitives (vline sizing + border painter), scoped to
   .her/.form the same way help.css scopes to .help/.faq.
   ---------------------------------------------------------------- */
.her .vline,
.form .vline {
  height: 100%;
  width: 1px;
  flex: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.her .vline--solid,
.form .vline--solid {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone-cool-50);   /* #cfcecc80 */
}
.her .vline--dashed,
.form .vline--dashed {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-stone-85);        /* #d2cecad9 */
}
.her .vline--dashed-peach,
.form .vline--dashed-peach {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-peach);           /* #e68c55 */
}
.her .vline::after,
.form .vline::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  border-width: var(--border-top-width, 0) var(--border-right-width, 0)
                var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, transparent);
  border-style: var(--border-style, solid);
}

/* horizontal hairline used inside .her (absolute, dashed) */
.her__hor-line {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-stone-85);
  height: 1px;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 8;
  flex: none;
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
}
.her__hor-line::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  border-width: var(--border-top-width, 0) var(--border-right-width, 0)
                var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, transparent);
  border-style: var(--border-style, solid);
}
.her__hor-line--half { width: 50%; right: auto; }

/* ================================================================
   1. HER  (data-section="her", id="home")
   ================================================================ */
.her {
  background-color: var(--c-cream);
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}

.her__gradient-top {
  z-index: 3;
  background: linear-gradient(var(--c-cream) 39%, rgba(242, 240, 238, 0) 100%);
  flex: none;
  height: 449px;
  position: absolute;
  top: 0; left: 0; right: 0;
}

.her__main {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 50vh;
  min-height: 400px;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}

.her__content {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* row of gap+vline decorative slots at the top of the content area */
.her__gaps {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.her__gap {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
.her__gap--wide { gap: 8px; }

.her__header-part {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* generic "flex-start cell" — subheader wrapper + the three gap cells that
   share it (reference groups these four selectors under one rule). */
.her__cell {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
.her__cell--between { place-content: flex-start; }

.her__subheader-inner {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 1px;
  padding: 62px 0 0;
  position: relative;
}

/* the lone orange "Contact us" tag (same box model as .badge__num, but a
   variable-width pill instead of a fixed 31x31 numeral) */
.her__tag-wrap {
  display: flex;
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  flex-flow: row;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: min-content;
  padding: 0;
  position: relative;
}
.her__tag {
  height: 31px;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0 10px;
  position: relative;
  background-color: var(--c-orange);
  white-space: pre;
}

.her__title {
  --framer-paragraph-spacing: 0px;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  z-index: 1;
  flex: none;
  width: 100%;
  max-width: 540px;
  height: auto;
  position: absolute;
  bottom: -8px;
  left: -1px;
}

/* scrolling grain-pattern backdrop behind the hero copy (reuses the shared
   .marquee mechanic — SHARED-NOTES.md landmine "the footer background is a
   marquee": same image asset, same loop, different container). */
.her__bg {
  opacity: .9;
  z-index: 0;
  flex: none;
  position: absolute;
  inset: -216px -759px -59px -758px;
}
.her__bg-scale {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  transform: scale(1.05638);
}

.her__hr {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone);
  z-index: 4;
  flex: none;
  width: 100%;
  height: 1px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.her__hr::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid var(--c-stone);
  pointer-events: none;
}

.her__desc {
  background-color: var(--c-cream);
  z-index: 4;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 20vh;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}

.her__desc-inner {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--page-max);
  height: 1px;
  padding: 0;
  position: relative;
  overflow: visible;
}

.her__desc-gaps {
  z-index: 2;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.her__desc-gap-line {
  height: 1px;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  position: relative;
}

.her__info {
  z-index: 2;
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.her__buttons {
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 0;
}
.her__num-slot {
  height: min-content;
  min-height: 47px;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  padding: 0 0 4px;
  position: relative;
}

.her__text {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  height: min-content;
  padding: 36px 0 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}
.her__lede {
  --framer-paragraph-spacing: 0px;
  text-wrap: balance;
  z-index: 1;
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
}

/* the tall accent line — height:80vh, reference ships a static
   transform:translateY(-400px) inline (not in any stylesheet rule); it is a
   position:relative flex item so the translate never affects layout height,
   only paint position. Reproduced verbatim per SHARED-NOTES landmine on
   unexplained inline transforms. */
.her__vline--tall { height: 80vh; }

.her__desc-info-gaps {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  padding: 0;
  position: relative;
}

/* the tablet+phone-only decorative pair inside "Info part" — Framer swaps in a
   DIFFERENT pair of dividers here below 1440px (not just hiding the desktop
   ones): a peach dashed rule and a solid rule whose explicit height is what
   actually drives .her__desc's content-driven height at phone. Absent from
   the DOM entirely at desktop (verified against raw/desktop/contacts.html). */
/* NOT using the shared `.her .vline` class here on purpose: that selector's
   specificity (.her .vline, two classes) would beat a single-class
   `.her__vline-info-b { height:140px }`, silently forcing height back to
   100% and undoing the explicit height these two need. Self-contained. */
.her__vline-info-a,
.her__vline-info-b {
  flex: none;
  width: 1px;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.her__vline-info-a::after,
.her__vline-info-b::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  border-width: var(--border-top-width, 0) var(--border-right-width, 0)
                var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, transparent);
  border-style: var(--border-style, solid);
}
.her__vline-info-a {
  --border-top-width: 2px;  --border-right-width: 2px;
  --border-bottom-width: 2px; --border-left-width: 2px;
  --border-style: dashed;
  --border-color: var(--c-peach-95);
  height: 100%;
}
.her__vline-info-b {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone-40);
  height: 140px;
}

/* ---------------- her: tablet + laptop (810 .. 1439.98) ---------------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .her__cell--between { gap: unset; justify-content: space-between; }
  .her__title { max-width: 440px; bottom: -6px; }
  .her__desc { height: 12vh; min-height: unset; }
  .her__buttons { flex-direction: column; gap: 22px; }
  .her__num-slot { flex: none; width: 100%; }
  .her__text { max-width: 420px; }
}

/* ---------------- her: phone (<= 809.98px) ---------------- */
@media (max-width: 809.98px) {
  .her__main { height: 40vh; min-height: 300px; padding: 0 26px; }
  .her__cell--between { gap: unset; justify-content: space-between; }
  .her__vline-gap3 { --border-top-width: 2px; --border-right-width: 2px; --border-bottom-width: 2px; --border-left-width: 2px; --border-color: var(--c-peach); --border-style: dashed; }
  .her__title { width: 90%; max-width: 440px; bottom: -6px; left: 0; }
  .her__desc { height: min-content; min-height: unset; padding: 0 26px; }
  .her__desc-inner { height: min-content; max-width: unset; flex: none; }
  .her__info { gap: unset; flex: 1 0 0; justify-content: space-between; height: min-content; }
  .her__text { left: unset; max-width: unset; top: unset; flex: 1 0 0; order: 2; width: 1px; position: relative; }
  .her__lede { flex: 1 0 0; width: 1px; }
  .her__vline-info-a { order: 0; align-self: stretch; height: auto; }
  .her__vline-info-b { order: 6; height: 160px; }
}

/* ================================================================
   2. FORM  (data-section="form", id="process")
   ================================================================ */
.form {
  background-color: var(--c-cream);
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.form__top-gap {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 5vh;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}
.form__top-gap-inner {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.form__top-gap-cell {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 1px;
  padding: 0;
  position: relative;
}
.form__top-gap-cell--wide {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.form__wrap {
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}

.form__panel {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: var(--page-max);
  height: min-content;
  min-height: 400px;
  padding: 0;
  position: relative;
  overflow: visible;
}

.form__header {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-self: stretch;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: auto;
  padding: 0;
  position: relative;
  overflow: visible;
}
.form__eyebrow {
  --framer-paragraph-spacing: 0px;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
}

.form__body {
  height: auto;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start;
  align-self: stretch;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}

.form__fields-form {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 42px;
  width: 1px;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.form__row {
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-end center;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  padding: 0;
  position: relative;
}

.form__field {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  width: 1px;
  height: min-content;
  padding: 0;
  position: relative;
}
.form__field-label {
  white-space: pre;
  flex: none;
  width: auto;
  height: auto;
  position: relative;
}

/* Framer's text-input box model, values verbatim from --framer-input-* */
.form__input-wrap {
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0 12px 0;
  overflow: hidden;
}
.form__input-wrap::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: var(--c-stone);
  /* NO transition: measured on the LIVE reference (2026-08-19, Playwright,
     rest/hover/focus computed-style diff on the Name input's wrapper
     ::after): rest 1px rgb(210,206,202), focus 1px rgb(237,79,0), hover
     unchanged, and the wrapper computes transition-duration 0s — the
     orange underline is a HARD CUT, not a fade. The clone's previous
     `.2s linear` was a guess. */
}
.form__input-wrap:focus-within::after { border-color: var(--c-orange); }
/* reference textarea fills its 120px wrapper (no own min-height), which puts
   the resize grip on the wrapper's bottom edge rather than 25px above it */
.form__input-wrap--textarea { align-items: stretch; min-height: 120px; }

.form__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  height: auto;
  background: none;
  border: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -.02em;
  line-height: 1.2em;
  color: var(--c-black);
}
.form__input:focus-visible { outline: none; }
.form__input::placeholder { color: var(--c-black); opacity: 1; }
textarea.form__input {
  resize: vertical;
  white-space: pre-wrap;
}

.form__button-row {
  height: 14vh;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  position: relative;
}

.form__blurb-wrap {
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
.form__blurb-inner {
  max-width: 320px;
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  width: 1px;
  padding: 10px 0 0;
  position: relative;
}
.form__blurb {
  /* reference uses styles-preset-1f8fpc2 (14px / -.05em), not the 16px t-body-sm preset */
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -.05em;
  --framer-paragraph-spacing: 0px;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  flex: none;
  width: 314px;
  height: auto;
  position: relative;
}

.form__submit-wrap {
  height: 50%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 10px;
  width: 1px;
  padding: 0;
  position: relative;
}
.form__submit-slot {
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
}

/* the "+" glyph pinned to the top-left corner of the submit button */
.form__plus {
  z-index: 3;
  flex: none;
  width: 15px;
  height: 15px;
  position: absolute;
  top: -8px;
  left: -7px;
}
.form__plus svg { width: 100%; height: 100%; }

/* submit button — same visual component as .btn-dark (help.css) but its own
   class here since it lives in a different shared file's scope */
.btn-submit-2 {
  cursor: pointer;
  height: 57px;
  display: flex;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 0;
  /* the reference <button> carries an inline style="width:100%" which beats the
     240px in its class rule; the 240px only ever applies in the 65go9p variant. */
  width: 100%;
  max-width: 100%;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
  background-color: transparent;
  border: 0;
}
.btn-submit-2__edge {
  z-index: 1;
  flex: none;
  width: 1px;
  position: absolute;
  top: 0; bottom: 0; left: -1px;
  background-color: var(--c-orange);
}
.btn-submit-2__all {
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
  background-color: var(--c-graphite);
}
.btn-submit-2__text {
  height: min-content;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.btn-submit-2__text .t-mono { color: var(--c-white); white-space: pre; user-select: none; }
.btn-submit-2__icon { width: 12px; height: 12px; position: absolute; top: 4px; left: -23px; }
.btn-submit-2__icon svg { width: 100%; height: 100%; }
/* ---- hover (mouse only) — identical to .btn-submit (footer.css); see the
   note there for the geometry and base.css § 5b for the measured spring. */
@media (hover: hover) and (pointer: fine) {
  .btn-submit-2__edge {
    width: calc(100% + 1px);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-submit-2:hover .btn-submit-2__edge,
  .btn-submit-2:focus-visible .btn-submit-2__edge {
    transform: scaleX(1);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  .btn-submit-2__text {
    z-index: 1;
    transition: padding-left var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-submit-2:hover .btn-submit-2__text,
  .btn-submit-2:focus-visible .btn-submit-2__text {
    padding-left: 23px;
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }

  .btn-submit-2__icon {
    transition: transform var(--hov-cta-dur-out) var(--hov-cta-ease-out);
  }
  .btn-submit-2:hover .btn-submit-2__icon,
  .btn-submit-2:focus-visible .btn-submit-2__icon {
    transform: translateX(24px);
    transition-duration: var(--hov-cta-dur-in);
    transition-timing-function: var(--hov-cta-ease-in);
  }
}

/* ---------------- form: tablet + laptop (810 .. 1439.98) ---------------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .form__panel { min-height: unset; }
  .form__body { align-self: unset; height: min-content; }
  .form__fields-form { gap: 24px; }
  .form__row { flex-direction: column; gap: 24px; }
  .form__field { flex: none; width: 100%; }
}

/* ---------------- form: phone (<= 809.98px) ---------------- */
@media (max-width: 809.98px) {
  .form { overflow: visible; }
  .form__wrap { padding: 0; }
  .form__panel { flex-direction: column; padding: 0 26px; }
  .form__header {
    align-self: unset; gap: unset; flex: none;
    justify-content: space-between; width: 100%; height: min-content;
  }
  .form__body { align-self: unset; flex: none; width: 100%; height: min-content; }
  .form__fields-form { gap: 24px; padding: 42px 0 0; }
  .form__row { flex-direction: column; gap: 24px; }
  .form__field { flex: none; width: 100%; }
  .form__button-row { height: min-content; min-height: 110px; }
  .form__submit-wrap { height: 55px; }
  .form__plus { top: -6px; left: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-submit-2__edge { transition: none !important; }
}

/* ================================================================
   3. NUMBERS  ("Result numbers", id="numbers")

   Not one of the page's 5 header/footer/nav/section elements — it is a
   plain <div>, so the capture pipeline's sectionSelector
   ("header[data-framer-name], footer[data-framer-name], nav[data-framer-name],
   section[data-framer-name]") never isolated it into its own fragment or
   reference-heights.json key. It is still real, visible page content (a
   dark contact-info band between Form and Help) and its height is exactly
   the gap between the sum of the five named sections and "_page" in
   reference-heights.json (200 / 200 / 216 desktop/laptop/tablet — the same
   20vh-min-200px formula as .her__desc). Reconstructed from the inline
   <style> blocks in research/raw/&lt;bp&gt;/contacts.html. See docs/KNOWN-DIFFERENCES.md.
   ================================================================ */
.numbers {
  background-color: var(--c-graphite);
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 20vh;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
  overflow: visible;
}
.numbers__inner {
  z-index: 10;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.numbers .vline {
  height: 100%;
  width: 1px;
  flex: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.numbers .vline--graphite {
  --border-top-width: 1px;  --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-graphite-lt);
}
.numbers .vline--peach-75 {
  --border-top-width: 3px;  --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-peach-75);
}
.numbers .vline::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  border-width: var(--border-top-width, 0) var(--border-right-width, 0)
                var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, transparent);
  border-style: var(--border-style, solid);
}

/* "Result 1" — the always-visible phone-number column */
.numbers__result1 {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* "Results 2 and 3" wrapper + each "Number" column inside it */
.numbers__group23 {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  padding: 0;
  position: relative;
}
.numbers__num {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}

.numbers__info {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start flex-end;
  align-items: flex-start;
  gap: 10px;
  width: 1px;
  padding: 0 0 36px;
  position: relative;
}
.numbers__text-row {
  max-width: 180px;
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  position: relative;
}
.numbers__link {
  cursor: pointer;
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: column;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 10px;
  width: min-content;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: opacity .2s linear;
}
/* Animation-QA pass (2026-08-18): hovered the LIVE contacts hero links
   (phone / e-mail / "book a free call", reference .framer-1Sibi) with a real
   Playwright mouse and diffed computed style. They do NOT fade — the label
   colour goes straight to rgb(237,79,0) (`--c-orange`) from whatever it rests
   at (white in this dark hero, black in the light sections). The clone's
   `opacity: .7` was a guess; replaced with the measured colour swap. Colour is
   also what every other plain link on the reference does (.link-plain,
   .credit-link), so this brings the hero in line with them. */
.numbers__link:hover .t-mono,
.numbers__link:focus-visible .t-mono { color: var(--c-orange); }
.numbers__link .t-mono { white-space: pre; }

/* decorative grain texture, absolutely positioned, contributes 0 height */
.numbers__grain {
  user-select: none;
  pointer-events: none;
  z-index: 7;
  flex: none;
  position: absolute;
  inset: 0;
}
.numbers__grain-clip {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
/* The geometry here was already right (400% box at inset -200% over the
   clipped 1440x200 cell == the 5760x800 layer measured live). What was
   missing is that the reference never holds it still: it walks the shared
   90-step / 8000ms film-grain path. Keyframes + full measurement notes in
   sections/footer.css. Absolutely positioned, so height-neutral. */
.numbers__grain-img {
  position: absolute;
  inset: -200%;
  width: 400%;
  height: 400%;
  background: url("/assets/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png");
  opacity: .05;
  will-change: transform;
  animation: grain-drift 8s step-end infinite;
}
/* must live here, not in footer.css: this stylesheet loads later and would
   otherwise win the cascade over a reduced-motion rule declared there */
@media (prefers-reduced-motion: reduce) {
  .numbers__grain-img { animation: none; }
}

/* ---------------- numbers: tablet + laptop (810 .. 1439.98) ---------------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .numbers__num:nth-child(3) { gap: unset; justify-content: space-between; }
}

/* ---------------- numbers: phone (<= 809.98px) ---------------- */
@media (max-width: 809.98px) {
  .numbers { height: min-content; min-height: unset; flex-direction: column; padding: 0 26px; }
  .numbers__inner { height: min-content; max-width: unset; flex-direction: column; flex: none; justify-content: flex-start; width: 100%; }
  .numbers__result1 { flex: none; width: 100%; height: min-content; }
  .numbers .vline--graphite { --border-top-width: 2px; --border-right-width: 2px; --border-bottom-width: 2px; --border-left-width: 2px; --border-color: var(--c-peach-75); --border-style: dashed; align-self: stretch; height: auto; }
  .numbers .vline--peach-75 { --border-top-width: 2px; --border-right-width: 2px; --border-bottom-width: 2px; --border-left-width: 2px; align-self: stretch; height: auto; }
  .numbers__group23 { flex-direction: column; flex: none; justify-content: flex-start; gap: 0; width: 100%; height: min-content; }
  .numbers__info { justify-content: center; gap: 24px; height: min-content; padding: 32px 0; }
  .numbers__group23 .numbers__info { padding: 0 0 32px; }
  .numbers__num { gap: unset; flex: none; justify-content: space-between; width: 100%; height: min-content; }
}

/* ================================================================
   HER INTRO BUILD  (measured on the LIVE reference, 2026-08-19)
   ----------------------------------------------------------------
   Probed with a style-MutationObserver from DOMContentLoaded plus
   200ms viewport frames (site-clone-kit hero-frames pattern):
   - H1 letters + lede words + form eyebrow/labels all start together
     at hydration (t0); the clone's IntersectionObserver reveal already
     reproduces that ordering (the hydration delay itself is the
     documented deliberate deviation).
   - The orange "Contact us" tag joins ~0.4-0.5s after the letters
     begin: Framer springs the pill's WIDTH from ~59% to 100%
     (outer scaleX .59 -> 1, translate keeping the LEFT edge fixed,
     children counter-scaled so the label never squashes; the label is
     clipped by the pill while it grows). Absent from the frame before,
     fully settled ~350-400ms later, slight spring. Reproduced as a
     left-anchored clip-path wipe — same left-edge-fixed reveal, no
     glyph distortion, zero layout impact (clip-path only paints).
   - Word-fade staggers measured per element (last-mutation deltas):
     lede ~48ms/word (16 words over ~830ms), form blurb ~33ms/word,
     eyebrow ~150ms/word (the shared "words" preset's 120ms is kept
     for the eyebrow — same preset, comparable param).
   Armed by html.js-appear (js/main.js): with JS off nothing here
   applies and the tag renders at rest, fully visible.
   ================================================================ */
html.js-appear .her__tag {
  animation: her-tag-wipe .4s cubic-bezier(.3, 1.2, .5, 1) .45s both;
}
@keyframes her-tag-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  /* js-appear is armed even under reduced motion — never hide the tag */
  html.js-appear .her__tag { animation: none !important; }
}

/* per-element word-fade staggers (see measurement block above); the
   shared words preset in text-reveal.css stays at 120ms for everything
   else on this page. */
.her__lede[data-split-text]   { --sr-stagger: .05s; }
.form__blurb[data-split-text] { --sr-stagger: .035s; }