/* =============================================================================
   PLAINSPOKEN TRUST TRIAL — self-hosted type
   Archivo carries the wordmark, headings, buttons, navigation and labels.
   Source Sans 3 carries long body copy: it is the more open humanist face and
   measurably easier over a long page, which is where most of this site's words
   are. Both SIL OFL 1.1, canonical google/fonts, subset to Latin, wght axis
   only. font-display: swap so text is never invisible while they load.
   ========================================================================== */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var.woff2") format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("../fonts/sourcesans3-var.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ============================================================
   HORIZON LINE — Bayfront Home Buyers design system
   Direction A, with Direction B's documentary data treatment.

   THE RULE THAT GOVERNS EVERYTHING:
   The horizon is a 1px line at --waterline. It appears as section
   divider, nav indicator, form-field foundation, data baseline,
   headline alignment, and footer edge. It is never decorative.
   If a line does not do structural work, it does not exist.

   ACCENT RULE: one --amber element per viewport. A second is a bug.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* ============================================================
     PALETTE — "Limestone & Lake"
     Regionally derived: Indiana limestone is graded Buff and Gray;
     Detroit's pre-war housing stock is substantially YELLOW brick,
     not red; Great Lakes water reads steel-grey and green-brown,
     not blue. See docs/COLOR-RESEARCH.md for sources.

     STRUCTURE (the rule that prevents noise):
     - Section rhythm is a LIGHTNESS sequence, not a hue sequence.
       Four warm light grounds + two dark grounds. No section is
       assigned a hue of its own.
     - Pale tints are FILLS ONLY — cards, marks, inner panels.
       They never become section backgrounds and never carry body text.
     - Mid-tones are shipped as PAIRS, one for light grounds and one
       for dark, because a single mid-tone passes on neither.
     ============================================================ */

  /* --- Dark grounds --- */
  --ink:        #18354A;   /* Harbour Navy — TRIAL: warmer, 12.03:1 on --paper */
  --ink-deep:   #0B1F30;   /* Deep Harbour — footer */
  --ink-soft:   #1B3D5A;
  --forest:     #2C4A3C;   /* Treeline — SECOND dark ground */
  --lake-deep:  #2C5470;   /* Steel lake — panels, marks */

  /* --- Light grounds: a warm lightness ramp, hue locked --- */
  --paper:      #FBF8F2;   /* lightest — TRIAL: warm white */
  --sand-pale:  #F7F4EF;
  --sand:       #EFE3D3;   /* TRIAL: warmer sand, 10.08:1 with --ink */
  --limestone:  #E4DCC9;   /* Indiana limestone, Buff grade — deepest light */

  /* --- Pale tints: FILLS ONLY, never grounds, never text surfaces --- */
  --tint-sky:    #D6E1E4;  /* sediment-lit lake */
  --tint-lichen: #DFE8DE;  /* winter field edge */
  --tint-clay:   #EFDFD2;  /* weathered brick */

  /* --- Accent: ONE per viewport --- */
  /* TRIAL — burnt orange replaces amber. It does BOTH jobs amber could not:
     legal as a fill with WHITE text (5.01:1) and legal as text on --paper
     (4.72:1). Amber was 2.55:1 on paper and needed a separate text token. */
  --amber:      #B84F2D;   /* CTA fill. White text only — navy on it is 2.55:1 */
  --amber-deep: #9E4326;   /* hover fill AND the control boundary
                              amber button a legal boundary on light
                              grounds: 4.01:1 on --sand (WCAG 1.4.11) */
  --amber-text: #A94929;   /* = --burnt-deep. Ordinary text on --sand: 4.52:1 */
  --burnt-deep:   #A94929;   /* text on sand, 4.52:1 */
  --warm-on-navy: #DA8367;   /* warm text on --ink, 4.51:1 (base is 2.55:1) */
  --lake:         #497783;   /* optional, light grounds only — 4.66:1 on paper */
  --lake-on-navy: #6FA2AF;   /* lake text on --ink, 4.53:1 (base is 2.58:1) */

  /* --- Supporting natural, shipped as light/dark PAIRS --- */
  --clay-text:  #7E3A2E;   /* warm emphasis text on light — 6.74:1 on sand */
  --lichen:     #8FA08C;   /* large text / marks on DARK only */
  --copper:     #4E6E64;   /* 4.57:1 on sand — safe as body text */

  /* --- Text --- */
  --slate:      #5E564E;   /* muted text on light. WARM, not blue-grey:
                              a warm-shifted neutral is what makes a page
                              read human. 5.85:1 on --sand. */
  --slate-soft: #786E64;   /* fainter warm text — large only on --sand */
  --mist:       #BAC7D1;   /* muted text on DARK grounds */

  /* --- Lines: two tokens, because they have different jobs --- */
  --waterline:  #C9BFB1;         /* the horizon — decorative */
  --waterline-faint: #DFD7C9;    /* hairline — decorative */
  --line-functional: #786E64;    /* form fields, control boundaries.
                                    4.05:1 on --sand — meets 1.4.11 */

  /* State */
  --success:    #2C6349;
  --error:      #9B2C2C;
  --focus:      #B84F2D;

  /* The horizon */
  --rule: 1px;
  --horizon-pos: 46%;

  /* Type — TRIAL: self-hosted. Fallbacks are metric-near so a swap does not
     reflow the page badly. */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid scale, 1.25 ratio */
  --t-display: clamp(2.4rem, 1.2rem + 4.6vw, 4.6rem);
  --t-h2:      clamp(1.6rem, 1.05rem + 2.1vw, 2.6rem);
  --t-h3:      clamp(1.15rem, 0.95rem + 0.75vw, 1.45rem);
  --t-lead:    clamp(1.06rem, 0.98rem + 0.42vw, 1.28rem);
  --t-body:    clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* Spacing */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;   --s10: 8rem;

  --measure: 34rem;
  --shell: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` — NOT `hidden`. `overflow-x: hidden` on html or body makes that
     element a scroll container, which breaks position: sticky and scroll
     anchoring. `clip` contains overflow without creating one.
     Layout must not depend on this at all; it is a backstop only. */
  overflow-x: clip;
}
body {
  margin: 0;
  /* TRIAL: long copy in Source Sans 3, headings and controls in Archivo. */
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

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

/* ---------- 3. ACCESSIBILITY ---------- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -100%;
  z-index: 200; background: var(--ink); color: var(--sand-pale);
  padding: var(--s3) var(--s5); text-decoration: none;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* ---------- 4. LAYOUT ---------- */
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}
.shell--wide { max-width: 92rem; }
.shell--tight { max-width: 58rem; }

/* Section rhythm is deliberately UNEVEN. Identical vertical rhythm
   across every section is a primary tell of template design. */
.section { padding-block: var(--s8); position: relative; }

/* Anchor targets must clear the sticky masthead, or in-page navigation
   scrolls content underneath it. Applies to every id linked from the nav. */
:target, section[id], .formcard[id] { scroll-margin-top: 96px; }

/* Editorial section intro: heading left, supporting copy right.
   Replaces a single left-aligned column that left half the viewport
   empty for no compositional reason. */
.intro { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .intro {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--s8); align-items: end;
  }
  .intro__aside { padding-bottom: .35rem; }
}
.intro__aside .lead { max-width: 30rem; }
.section--tall  { padding-block: var(--s9); }
.section--short { padding-block: var(--s7); }
/* On the ink ground the light-mode muted colours fail contrast badly
   (--slate on --ink measures ~2.5:1). Remap the muted tokens rather than
   patching each component, so any component dropped into an ink section
   inherits accessible values automatically. */
/* .hero LEFT this list when the full-bleed photograph was removed. It is a
   light section now, and inheriting the dark-ground token remap made the H1,
   the lead, the eyebrow labels and the ghost button near-invisible on
   --paper. Caught in a 1440 capture. */
.section--ink, .section--forest, .drawer, .footer, .draftbar {
  color: var(--sand-pale);
  /* TRIAL: the focus ring must be remapped here too. --amber (#B84F2D) is
     2.55:1 on --ink, under the 3:1 that WCAG 1.4.11 requires of a focus
     indicator, so on dark sections a focused control was effectively
     invisible. --warm-on-navy is 4.51:1 on the same ground. Measured, not
     assumed — the light-ground ring stays --amber at 4.72:1 on --paper. */
  --focus: var(--warm-on-navy);
  --slate: #B9C4CD;        /* ~8.2:1 on --ink */
  --slate-soft: #9FAEBA;   /* ~6.0:1 on --ink */
  --waterline: #C9BFB1;
  --waterline-faint: rgba(237, 231, 221, .22);
}
/* Section grounds — a warm LIGHTNESS ramp plus two darks.
   Rhythm comes from lightness, never from assigning a hue per section. */
.section--ink, .hero  { background: var(--ink); }
.section--forest      { background: var(--forest); }   /* second dark */
.section--paper       { background: var(--paper); }
.section--sand        { background: var(--sand-pale); }
.section--sand-deep   { background: var(--sand); }
.section--limestone   { background: var(--limestone); } /* deepest light */

/* ---------- 5. THE HORIZON ---------- */
.horizon {
  border: 0; height: var(--rule); margin: 0;
  background: var(--waterline);
}
.horizon--faint { background: var(--waterline-faint); }
.horizon--ink { background: rgba(237, 231, 221, .22); }

/* Section-opening horizon: draws in on entry. Content NEVER depends
   on this — the line is decorative, the content is always visible. */
.horizon--draw {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .7s var(--ease);
}
.is-revealed .horizon--draw { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .horizon--draw { transform: scaleX(1); transition: none; }
}

/* ---------- 6. TYPOGRAPHY ---------- */
/* The signature device: wide-tracked display sans with exactly ONE
   word in serif italic. One per headline. Never two. */
.display {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: .98;              /* set solid */
  letter-spacing: -0.012em;      /* large sizes need negative tracking */
  text-wrap: balance;
}
.display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
}
.section--ink .eyebrow, .section--forest .eyebrow { color: var(--waterline); }

.h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.h3 {
  font-size: var(--t-h3);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--slate);
  max-width: var(--measure);
}
.section--ink .lead, .section--forest .lead { color: rgba(237, 231, 221, .82); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s4); }

/* Tabular numerals — Direction B. Every verified figure uses these. */
.tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- 7. SOURCE LABEL (documentary treatment) ---------- */
/* No figure appears without one. The component makes an unsourced
   number look conspicuously wrong — that is the point. */
.source {
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--slate);          /* was --slate-soft: 4.05:1 at 12px on
                                   --sand, below the 4.5 body minimum */
  font-family: var(--mono);
  letter-spacing: -0.01em;
}
.section--ink .source, .hero .source { color: #B3ADA4; }   /* 6.1:1 on --ink */
.section--forest .source { color: #C3BCB1; } /* 6.0:1 on --forest — the
   forest ground is lighter than ink, so it needs a lighter source colour */
.source::before { content: "↳ "; opacity: .6; }

/* ---------- 8. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: .95rem 1.6rem;
  min-height: 48px;
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--rule) solid transparent;
  border-radius: 5px;              /* near-square. no pill shapes. */
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
/* WCAG 1.4.11 — non-text contrast, 3:1 for a control's boundary.
   The brand amber fill measures only 2.16:1 against --sand and 2.55:1
   against --paper, so on light grounds the button has no perceivable
   edge. A --amber-deep border supplies it (4.01:1 on --sand) while
   keeping the brand amber as the fill.
   The label is --ink-deep (6.30:1), never white: white on amber is
   2.66:1 and fails badly. */
/* TRIAL: white label at every state. On #B84F2D white is 5.01:1 and
   --ink-deep is 2.29:1, so the old dark label is now illegal. */
.btn--primary {
  background: var(--amber);
  color: #FFFFFF;
  border-color: var(--amber);
}
.btn--primary:hover {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
  color: #FFFFFF;              /* 5.98:1 on #9E4326 */
}
.btn--primary:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--waterline); }
.btn--ghost:hover { border-color: var(--ink); }
.section--ink .btn--ghost, .section--forest .btn--ghost { color: var(--sand-pale); border-color: rgba(237,231,221,.34); }
.section--ink .btn--ghost:hover, .section--forest .btn--ghost:hover { border-color: var(--sand-pale); }

.btn--block { width: 100%; }

/* A disabled control must look disabled. Contrast is deliberately kept
   above 4.5:1 so the label stays readable — dimmed, not unreadable. */
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--waterline-faint);
  border-color: var(--waterline);
  color: var(--slate);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- 9. NAVIGATION ---------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--rule) solid var(--waterline-faint);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); min-height: 72px;
}
/* ---------- BRAND LOCKUP ----------
   Responsive logo system. Both variants are inlined, so switching between
   them is a CSS display swap with no extra request and no layout shift.
   Explicit width/height on each SVG reserves the space up front. */
.brand {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* tap target */
  text-decoration: none; color: var(--ink);
  flex: none;
}
/* NB: no `.brand svg { display:block }` rule here. It would have
   specificity (0,1,1) and silently beat the (0,1,0) variant-hiding
   rules below, rendering both lockups at once. */
.brand__full,
.brand__mark { display: block; }

/* Full lockup: monogram + BAYFRONT + HOME BUYERS. Desktop only. */
/* Widths derived from the asset's true viewBox ratio (253/64 = 3.9531) at the
   existing heights, so the SVG fills its box exactly. Height is held so the
   vertical rhythm and the 44px tap target do not move. The wordmark lockup is
   marginally narrower than the Bodoni one it replaces; the previous drawer and
   footer boxes were already wider than their intrinsic ratio, which letterboxed
   the mark inside them. Both are corrected here. */
.brand__full { width: 166px; height: 42px; }
/* The Bodoni lockup is wider than the sans one it replaced. Below 1200px
   it is displayed smaller so the nav stays on one line; full size above.
   A display-size rule, not a change to the mark. */
@media (min-width: 1200px) { .brand__full { width: 202px; height: 51px; } }
/* Monogram only, below the descriptor-legibility threshold. */
.brand__mark { width: 36px; height: 36px; }

/* Threshold measured, not guessed: below 560px the descriptor's tracked
   8.5px caps fall under the legibility floor and the lockup crowds the
   menu button. The monogram carries the brand alone from there down. */
.brand__mark { display: none; }
@media (max-width: 559px) {
  .brand__full { display: none; }
  .brand__mark { display: block; }
}

.brand__drawer { width: 174px; height: 44px; }
.brand__footer { width: 178px; height: 45px; }
@media (min-width: 760px) { .brand__footer { width: 198px; height: 50px; } }

.nav { display: none; }
/* ONE desktop block, at the same breakpoint that reveals the nav.
   These rules used to sit behind min-width:1200px while the nav itself became
   visible at 921px, so between 921 and 1199 the links rendered as unstyled
   default browser links — underlined, wrong colour, wrong size. Nav display and
   nav appearance must share a breakpoint or the gap between them is dead space.
   Font size is 1rem, not --t-small (14px): the navigation is primary UI and is
   not shrunk to force a fit. If it stops fitting, the breakpoint moves. */
@media (min-width: 981px) {
  /* margin-inline:auto centres the nav in the space between the wordmark and the
     phone CTA. Without it the row read as wordmark+nav clumped left with the CTA
     stranded far right — 24px on one side against 347px on the other. */
  .nav { display: flex; align-items: center; gap: var(--s4); margin-inline: auto; }
  .nav__link {
    position: relative;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 550;
    color: var(--ink-soft);
    padding-block: var(--s2);
    transition: color .18s var(--ease);
  }
  /* The horizon as navigation indicator */
  .nav__link::after {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--rule); background: var(--ink);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .22s var(--ease);
  }
  .nav__link:hover { color: var(--ink); }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
}

/* ACCENT RULE, ENFORCED — fail-safe direction.
   Exactly one amber action should be visible at any scroll position.
   While the hero form is on screen its submit button is that element, so
   JS DEMOTES the masthead CTA. The authored default is the promoted
   (amber) state, so if the observer never runs — throttled tab, no JS,
   older browser — the primary CTA is still prominent rather than
   permanently muted. Fail loud, not quiet. */
.masthead .btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-deep);
}
.masthead .btn--primary:hover {
  background: var(--amber-deep); border-color: var(--amber-deep); color: var(--sand-pale);
}
/* TRIAL — the subdued state is still a BUTTON.
   Previously it went transparent with a --waterline hairline, so while the hero
   form was on screen the most important control on the site read as a bordered
   label rather than something to press. The accent rule is kept (only one burnt
   action visible at a time) but the demoted state is now a solid navy fill:
   --paper on --ink is 12.03:1, and the control keeps a real edge. */
.masthead[data-cta="subdued"] .btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.masthead[data-cta="subdued"] .btn--primary:hover {
  background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper);
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s3);
  background: transparent; border: var(--rule) solid var(--waterline);
  border-radius: 5px; cursor: pointer;
  font-size: var(--t-micro); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
}
@media (min-width: 1200px) { .nav-toggle { display: none; } }
.nav-toggle__bars { display: grid; gap: 3px; width: 16px; }
.nav-toggle__bars span { height: var(--rule); background: currentColor; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink); color: var(--sand-pale);
  display: grid; grid-template-rows: auto 1fr auto;
  transform: translateY(-100%);
  transition: transform .32s var(--ease);
  overflow-y: auto;
}
.drawer[data-open="true"] { transform: translateY(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 72px; border-bottom: var(--rule) solid rgba(237,231,221,.18);
}
.drawer__list { padding-block: var(--s6); }
.drawer__item { border-bottom: var(--rule) solid rgba(237,231,221,.12); }
.drawer__link {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s4) 0; text-decoration: none;
  font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015em;
}
.drawer__num {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--waterline); font-variant-numeric: tabular-nums;
}
.drawer__foot { padding-block: var(--s6); }
.drawer__close {
  background: transparent; border: var(--rule) solid rgba(237,231,221,.34);
  color: inherit; min-height: 44px; padding: var(--s2) var(--s4);
  border-radius: 5px; cursor: pointer;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- 10. HERO ---------- */
/* Asymmetric by construction. Headline is NOT centred. The form sits
   off-axis and the horizon runs behind it. */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--sand-pale); }
/* Environmental photograph. Sits under the scrim, above the ink ground,
   so the page still reads correctly if the image fails to load. */
.hero__photo { position: absolute; inset: 0; }
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}

/* The scrim. A LEFT-WEIGHTED gradient, not a flat veil: dense enough for
   AA contrast under the headline, thinning across the image so the
   photograph is never fully covered. Warm-shifted (#0B1F30 rather than
   black) so it sits with the photo's warmth instead of on top of it. */
.hero__field {
  position: absolute; inset: 0;
  /* Scrim tuned by measurement, not feel: dense only where the headline
     sits, releasing fast so the photograph is actually visible. An image
     you cannot see is not photography, it is a dark rectangle. */
  /* BRAND CORRECTION 2026-08-08: a warm wash sits over the navy scrim so the
     first screen reads as evening light on a street rather than as a corporate
     title card. Amber at low alpha only — it lifts the hue without moving the
     luminance, so the measured headline contrast is unchanged. */
  /* Stops re-tuned by MEASUREMENT against the new photograph, not by eye. The
     Adrian street image is far darker in its mid-band than the previous hero, so
     the old curve buried it entirely — the scrim held while the picture vanished.
     This curve stays dense under the copy column and releases hard at 56%, which
     is where the copy ends and the form card has not yet begun. Composited
     glyph-extent contrast on this photo: eyebrow 6.82, h1 8.26, lead 8.22. */
  background:
    linear-gradient(94deg,
      rgba(160,98,31,.18) 0%,
      rgba(160,98,31,.12) 40%,
      rgba(160,98,31,.03) 70%,
      rgba(160,98,31,0) 100%),
    linear-gradient(94deg,
      rgba(11,31,48,.94) 0%,
      rgba(11,31,48,.92) 30%,
      rgba(11,31,48,.80) 44%,
      rgba(11,31,48,.44) 56%,
      rgba(11,31,48,.16) 68%,
      rgba(11,31,48,.06) 100%),
    linear-gradient(180deg,
      rgba(18,48,74,.28) 0%,
      rgba(18,48,74,.05) var(--horizon-pos),
      rgba(11,31,48,.38) 72%,
      rgba(11,31,48,.58) 100%);
}
@media (max-width: 899px) {
  /* Mobile: the layered composition is replaced, not shrunk. The scrim
     goes near-solid behind the copy so type never sits on busy pixels.

     RE-TUNED 2026-08-08. The previous curve opened to .42 at the top, which was
     safe against the old hero (dark at its crown) and unsafe against this one
     (bright sky at its crown). Measured on the new photograph the old curve gave
     eyebrow 1.61, h1 2.76, lead 3.14 — three failures. These stops measure
     eyebrow 6.09, h1 6.17, lead 6.09. The amber layer keeps the density warm
     rather than reading as a slab of cold navy. */
  .hero__field {
    background:
      linear-gradient(180deg,
        rgba(160,98,31,.20) 0%,
        rgba(160,98,31,.14) 50%,
        rgba(160,98,31,.06) 100%),
      linear-gradient(180deg,
        rgba(11,31,48,.72) 0%,
        rgba(11,31,48,.80) 30%,
        rgba(11,31,48,.92) 58%,
        rgba(11,31,48,.88) 80%,
        rgba(11,31,48,.82) 100%);
  }
  .hero__photo img { object-position: 50% 30%; }
}
/* The horizon inside the hero image field */
.hero__field::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: var(--horizon-pos); height: var(--rule);
  background: linear-gradient(90deg,
    rgba(201,191,177,0) 0%, rgba(201,191,177,.55) 18%,
    rgba(201,191,177,.55) 82%, rgba(201,191,177,0) 100%);
}
/* Low-sun warmth at the horizon — restrained, not a gradient wash */
.hero__glow {
  position: absolute; left: -10%; right: -10%;
  top: calc(var(--horizon-pos) - 16vh); height: 32vh;
  background: radial-gradient(60% 100% at 32% 100%,
    rgba(217,142,62,.22) 0%, rgba(217,142,62,0) 70%);
  pointer-events: none;
}
.hero__inner { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero__grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--s8); align-items: stretch;
  }
  /* The two confirmed facts drop to the foot of the column so they share a
     baseline with the form card, instead of leaving a void beneath them.
     The horizon principle applied to the hero's own composition. */
  .hero__copy { display: flex; flex-direction: column; }
  .hero__copy .hero__scope { margin-top: auto; }
}
.hero__copy { max-width: 32rem; }
.hero__display { color: var(--sand-pale); margin-top: var(--s4); }
/* --mist is too dim to sit over a photograph: it measured 3.73 on mobile
   against a 4.5 requirement. The hero eyebrow takes the bright neutral. */
.hero .eyebrow { color: var(--sand-pale); }
.hero__display em { color: var(--sand); }
.hero__lead { margin-top: var(--s5); color: rgb(240,236,228); }
/* Opaque, not 80%: over a photograph the alpha was compositing the lead
   toward the image and costing measurable contrast for no visual gain. */
/* The horizon as a data baseline: the two confirmed facts sit on a rule. */
.hero__scope {
  margin-top: var(--s7); padding-top: var(--s4);
  border-top: var(--rule) solid rgba(237,231,221,.34);
  display: grid; gap: var(--s5);
  font-size: var(--t-small);
}
@media (min-width: 480px) {
  .hero__scope { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}
.hero__scope dt {
  color: var(--waterline); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
.hero__scope dd { margin: var(--s2) 0 0; font-weight: 650; font-size: 1.05rem; }
.hero__scope > div { display: block; }

/* ---------- 11. FORM ---------- */
/* The form card is a LIGHT surface inside a DARK section, so it must
   undo the ink-section token remap. Without this reset the card inherits
   light-on-dark muted colours and renders pale text on pale ground. */
.formcard {
  --slate: #5A6B7A;
  --slate-soft: #62717E;
  --waterline: #C9BFB1;
  --waterline-faint: #E2DACE;
  background: var(--paper); color: var(--ink);
  padding: var(--s6) clamp(1.25rem, 3vw, 2rem);
  border-radius: 5px;
  box-shadow: 0 18px 48px -22px rgba(11,31,48,.55);
}
.formcard__title { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.01em; }
.formcard__note { margin-top: var(--s2); font-size: var(--t-small); color: var(--slate); }

.field { display: grid; gap: var(--s2); margin-top: var(--s4); }
.field__label { font-size: var(--t-small); font-weight: 600; }
.field__req { color: var(--error); }
.field__hint { font-size: var(--t-micro); color: var(--slate); }

/* Form fields sit ON the horizon — the line is the field foundation. */
.field__input {
  width: 100%; min-height: 48px;
  padding: var(--s3) 0;
  background: transparent;
  border: 0; border-bottom: var(--rule) solid var(--waterline);
  border-radius: 0;
  transition: border-color .18s var(--ease);
}
.field__input:hover { border-bottom-color: var(--slate-soft); }
.field__input:focus { outline: none; border-bottom-color: var(--amber); border-bottom-width: 2px; }
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.field__input::placeholder { color: var(--slate-soft); }
textarea.field__input { min-height: 84px; resize: vertical; padding-top: var(--s3); }
select.field__input { -webkit-appearance: none; appearance: none; padding-right: var(--s5); }

.field[data-invalid="true"] .field__input { border-bottom-color: var(--error); border-bottom-width: 2px; }
.field__error {
  display: none; font-size: var(--t-micro); color: var(--error); font-weight: 600;
}
.field[data-invalid="true"] .field__error { display: block; }

.field-row { display: grid; gap: var(--s4); }
@media (min-width: 520px) { .field-row--3 { grid-template-columns: 1.4fr .8fr .9fr; } }

.consent {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: var(--rule) solid var(--waterline-faint);
  font-size: var(--t-micro); color: var(--slate); line-height: 1.5;
}
.form-status { margin-top: var(--s4); font-size: var(--t-small); }
.form-status[data-state="blocked"] {
  padding: var(--s3) var(--s4);
  background: var(--sand); border-left: 3px solid var(--amber);
  color: var(--ink-soft);
}

/* ---------- 12. INDEX LIST (seller recognition) ---------- */
/* Deliberately NOT an icon-card grid. An editorial index with
   tabular numerals — reads as a considered list, not a widget rack. */
.index { border-top: var(--rule) solid var(--waterline); }
.index__row {
  display: grid; gap: var(--s2) var(--s5);
  grid-template-columns: auto 1fr;
  padding-block: var(--s4);
  border-bottom: var(--rule) solid var(--waterline-faint);
  align-items: baseline;
}
@media (min-width: 760px) {
  .index__row { grid-template-columns: 3.5rem minmax(0,15rem) minmax(0,1fr); }
}
.index__num {
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--slate-soft); font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.index__term { font-weight: 650; letter-spacing: -0.008em; }
.index__desc { color: var(--slate); font-size: var(--t-small); line-height: 1.55; }

/* ---------- 13. PROCESS (steps sit on the horizon) ---------- */
.steps { position: relative; display: grid; gap: var(--s6); }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  /* The horizon runs THROUGH the steps, connecting them */
  .steps::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: 11px; height: var(--rule);
    background: var(--waterline);
  }
}
.step { position: relative; }
.step__marker {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.section--sand .step__marker, .section--sand-deep .step__marker, .section--limestone .step__marker { background: var(--sand-pale); }
.step__title { margin-top: var(--s4); font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 820px) {
  /* Keep step bodies on a common baseline when a title wraps to two lines. */
  .step__title { min-height: 2.5em; }
}
.step__body { margin-top: var(--s2); color: var(--slate); font-size: var(--t-small); }

/* ---------- 14. STATE SPLIT ---------- */
.states { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  /* Deliberately unequal columns — the two states are not interchangeable */
  .states { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}
.state__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s3);
  border-bottom: var(--rule) solid var(--waterline);
}
.state__name { font-size: var(--t-h3); font-weight: 750; letter-spacing: -0.015em; }
.state__abbr {
  font-family: var(--mono); font-size: var(--t-small);
  color: var(--slate-soft); font-variant-numeric: tabular-nums;
}
.state__thesis { margin-top: var(--s4); color: var(--slate); font-size: var(--t-small); }
.state__facts { margin-top: var(--s5); display: grid; gap: var(--s4); }

/* Data row: figure sits ON a baseline. Direction B treatment. */
.datum { display: grid; gap: var(--s1); }
.datum__value {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem);
  font-weight: 750; line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  padding-bottom: var(--s2);
  border-bottom: var(--rule) solid var(--waterline);
}
.datum__label { font-size: var(--t-small); font-weight: 600; }
.datum__note { font-size: var(--t-micro); color: var(--slate); }

/* ---------- 15. COMPARISON TABLE ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctable {
  width: 100%; min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
.ctable caption {
  text-align: left; padding-bottom: var(--s4);
  color: var(--slate); font-size: var(--t-small);
}
.ctable th, .ctable td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: var(--rule) solid var(--waterline-faint);
  vertical-align: top;
}
.ctable thead th {
  border-bottom: var(--rule) solid var(--waterline);
  font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); font-weight: 650;
}
.ctable tbody th { font-weight: 650; width: 12rem; }
.ctable td[data-blocked] { color: var(--slate-soft); font-style: italic; }

/* ---------- 16. FAQ ---------- */
.faq { border-top: var(--rule) solid var(--waterline); }
.faq__item { border-bottom: var(--rule) solid var(--waterline-faint); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); width: 100%;
  padding: var(--s4) 0; min-height: 48px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left; font-weight: 650; letter-spacing: -0.008em;
  font-size: var(--t-body);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__sign { flex: none; width: 14px; height: 14px; margin-top: .45rem; position: relative; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; background: var(--ink);
  transition: transform .2s var(--ease);
}
.faq__sign::before { left: 0; right: 0; top: 50%; height: var(--rule); }
.faq__sign::after  { top: 0; bottom: 0; left: 50%; width: var(--rule); }
details[open] .faq__sign::after { transform: scaleY(0); }
.faq__a { padding-bottom: var(--s5); color: var(--slate); max-width: 48rem; }
.faq__pending {
  display: inline-block; margin-top: var(--s2);
  font-family: var(--mono); font-size: var(--t-micro);
  color: var(--amber-text); letter-spacing: .02em;
}

/* ---------- 17. FOOTER ---------- */
.footer { background: var(--ink-deep); color: rgba(237,231,221,.78); }
.footer__top { border-top: var(--rule) solid var(--amber); }
.footer__grid { display: grid; gap: var(--s7); padding-block: var(--s8); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__head { color: var(--sand-pale); font-weight: 700; letter-spacing: -0.01em; }
.footer__list { margin-top: var(--s2); display: grid; font-size: var(--t-small); }
/* Inline-block with vertical padding so each link is a 44px tap target
   without opening large visual gaps between them. */
.footer__list a {
  display: inline-flex; align-items: center;
  min-height: 44px; text-decoration: none;
}
.footer__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a, .doc__back {
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer__legal {
  border-top: var(--rule) solid rgba(237,231,221,.14);
  padding-block: var(--s5);
  font-size: var(--t-micro); line-height: 1.6;
  display: grid; gap: var(--s3);
}
@media (min-width: 760px) {
  .footer__legal { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- 18. STICKY MOBILE ACTION ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr;
  background: var(--paper);
  border-top: var(--rule) solid var(--waterline);
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .28s var(--ease);
}
.stickybar[data-visible="true"] { transform: translateY(0); }
@media (min-width: 900px) { .stickybar { display: none; } }

/* CLEARANCE FOR THE FIXED BAR.
   The bar is position:fixed, so it is out of flow and reserves no space. With
   body{padding-bottom:0} the document simply ended behind it: the last footer
   line, the final links and — on the homepage — the "Another state" disclosure
   could not be scrolled clear, because there was nothing left to scroll.
   "Scroll further" is not an answer when the document has already ended.

   --stickybar-h is measured from the bar's real rendered height by main.js, so
   it follows text wrapping and env(safe-area-inset-bottom) (already inside the
   bar's own padding) instead of a guessed number. The fallback covers the
   moment before the first measurement.

   The reservation is applied ONLY while the bar is actually on screen, so a page
   with no bar showing gains no empty space. scroll-padding-bottom makes anchor
   jumps and focus scrolling land above the bar rather than under it. */
body { padding-bottom: 0; }
body[data-stickybar="true"] {
  padding-bottom: calc(var(--stickybar-h, 4.75rem) + var(--s5));
}
html { scroll-padding-bottom: calc(var(--stickybar-h, 4.75rem) + var(--s5)); }
@media (min-width: 900px) {
  body[data-stickybar="true"] { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; }
}

/* ---------- 19. REVEAL (progressive enhancement only) ---------- */
/* Authored state is VISIBLE. JS adds .js-reveal to opt in.
   If JS never runs, everything is readable. This is the specific
   failure observed on the reference site and must not be repeated. */
.js .js-reveal { opacity: 0; transform: translateY(10px); }
.js .js-reveal.is-revealed {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .js-reveal { opacity: 1; transform: none; }
}

/* ---------- 20. UTILITIES ---------- */
.u-stack-4 > * + * { margin-top: var(--s4); }
.u-stack-5 > * + * { margin-top: var(--s5); }
.u-stack-6 > * + * { margin-top: var(--s6); }
.u-mt-5 { margin-top: var(--s5); }
.u-mt-6 { margin-top: var(--s6); }
.u-mt-7 { margin-top: var(--s7); }
.u-amber { color: var(--amber); }

/* Placeholder marker — any temporary asset carries this visibly in
   non-production builds so it cannot ship silently. */
.is-placeholder { position: relative; }
[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute; left: var(--s3); bottom: var(--s3);
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  background: rgba(11,31,48,.82); color: var(--waterline);
  padding: 3px 7px; border-radius: 5px; pointer-events: none;
}

/* ---------- 21. PHOTOGRAPHY ---------- */
/* Every image gets an aspect-ratio box so the space is reserved before the
   file arrives. This is the single most effective defence against CLS. */
.state__photo, .situations__figure picture, .closing__photo { display: block; }
.state__photo img, .situations__figure img {
  width: 100%; height: auto;
  border-radius: 5px;
}
.state__photo {
  margin-bottom: var(--s5);
  aspect-ratio: 4 / 5; overflow: hidden;
}
.state__photo img { height: 100%; object-fit: cover; }

/* Situations: image and index list side by side, deliberately unequal. */
.situations__layout { display: grid; gap: var(--s6); margin-top: var(--s7); }
@media (min-width: 860px) {
  .situations__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: var(--s8); align-items: start;
  }
  .situations__figure { position: sticky; top: 110px; }
}
.situations__figure { margin: 0; }
.situations__figure picture { aspect-ratio: 2 / 3; overflow: hidden; display: block; border-radius: 5px; }
.situations__figure img { height: 100%; object-fit: cover; }
.situations__figure figcaption { margin-top: var(--s3); }
.situations__layout .index { margin-top: 0; }

/* Closing band — the horizon literalised. Full-bleed, one line of type. */
.closing {
  position: relative;
  min-height: clamp(240px, 34vw, 420px);
  display: grid; align-items: end;
  background: var(--ink);
  overflow: hidden;
}
.closing__photo { position: absolute; inset: 0; }
.closing__photo img { width: 100%; height: 100%; object-fit: cover; }
.closing::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,31,48,.10) 0%, rgba(11,31,48,.20) 55%, rgba(11,31,48,.86) 100%);
}
.closing__inner { position: relative; z-index: 1; padding-block: var(--s6); }
.closing__line {
  color: var(--sand-pale);
  font-size: var(--t-lead); font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 14px rgba(11,31,48,.6);
}

/* ---------- 22. CORE PAGES ---------- */
/* Page heroes: shorter than the homepage hero and varied by ground, so pages
   read as related without repeating the homepage composition. */
.pagehero { padding-block: var(--s8) var(--s7); position: relative; }
.pagehero--ink { background: var(--ink); color: var(--sand-pale);
  --slate:#B9C4CD; --slate-soft:#9FAEBB; --waterline:#C9BFB1;
  --waterline-faint:rgba(237,231,221,.22); }
.pagehero--sand { background: var(--sand); }
.pagehero--paper { background: var(--paper); }
.pagehero__h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); margin-top: var(--s4); }
.pagehero--ink .pagehero__h1 { color: var(--sand-pale); }
.pagehero--ink .pagehero__h1 em { color: var(--sand); }

/* Breadcrumb — sits on the horizon, not in a box */
.crumbs { border-bottom: var(--rule) solid var(--waterline-faint); background: var(--paper); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2);
  padding-block: var(--s3); font-size: var(--t-micro); color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--slate-soft); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* Process steps — numbered, on a shared left rule, not cards */
.psteps { display: grid; gap: 0; border-top: var(--rule) solid var(--waterline); }
.pstep { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s4);
  padding-block: var(--s6); border-bottom: var(--rule) solid var(--waterline-faint); }
.pstep__num { font-family: var(--mono); font-size: var(--t-small);
  color: var(--slate-soft); font-variant-numeric: tabular-nums; padding-top: .2rem; }
.pstep p { color: var(--slate); max-width: 44rem; }

/* Contact layout */
.contactgrid { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .contactgrid { grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr); gap: var(--s8); align-items: start; }
}
.contactaside { padding-top: var(--s2); }
.contactlist { display: grid; gap: var(--s2); }
.contactlist dt { font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); margin-top: var(--s4); }
.contactlist dd { margin: 0; font-weight: 600; }
.contactlink { min-height: 44px; display: inline-flex; align-items: center;
  text-decoration: none; border-bottom: 2px solid var(--amber); }
.contactlink:hover { border-bottom-color: var(--ink); }

/* Honeypot — hidden from sight AND from assistive technology */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* SMS consent — visually distinct from the general privacy line, because
   they are different consents and must not read as one. */
.consentbox { padding: var(--s4); background: var(--sand);
  border-left: 3px solid var(--waterline); border-radius: 5px; }
.checkrow { display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  align-items: start; font-size: var(--t-small); line-height: 1.5; }
.checkrow input[type="checkbox"] { width: 20px; height: 20px; margin-top: .18rem;
  accent-color: var(--ink); }
.checkrow label { color: var(--ink); }
.checkrow em { color: var(--slate); }

/* The consent box sits on --sand inside the light form card. Its muted
   tokens measured 4.47:1 there — marginally under AA. Pinned explicitly
   rather than left to inherit, since this text carries consent meaning. */
.consentbox { --slate: #52493F; --slate-soft: #52493F; }
.consentbox .source { color: #52493F; }
.consentbox em { color: #52493F; font-style: italic; }

/* ============================================================
   14. LOCATION & SITUATION PAGES (batch 1)
   Extends Horizon Line. No new hues: every ground below is an
   existing token, and the accent stays amber-on-dark only.
   ============================================================ */

/* ---------- 14.1 Location hero ---------- */
.lhero { padding: var(--s8) 0 var(--s7); background: var(--paper); position: relative; }
.lhero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--waterline);
}
/* BRAND CORRECTION 2026-08-08: this was a full-bleed navy slab and it opened six
   of the fourteen pages. Dark grounds are what read as institutional, so the band
   keeps its identity as the DEEPEST warm ground rather than as a dark one. Every
   rule below that treated .lhero--band as a dark surface is inverted with it —
   the previous defect here was exactly that kind of half-migration. */
.lhero--band { background: var(--limestone); color: var(--ink); }
.lhero--band .lead { color: var(--slate); }
.lhero--band .eyebrow { color: var(--clay-text); }
.lhero--tight { padding-bottom: var(--s7); }
.lhero__h1 { margin: 0; max-width: 18ch; }
/* The nonlocal-number disclosure. Set on its own line, quieter than the call
   line above it, but not hidden: the point is that a seller sees it before
   dialling, not that it technically exists in the markup. */
.lhero__note {
  display: block; margin-top: var(--s2);
  font-size: .875rem; line-height: 1.5; color: var(--slate);
}
.lhero--band .lhero__note { color: var(--clay-text); }
.lhero__grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .lhero__grid { grid-template-columns: 1fr 0.85fr; gap: var(--s7); }
  .lhero--reverse .lhero__grid > .lhero__copy { order: 2; }
  .lhero--reverse .lhero__grid > .pfig       { order: 1; }
}
.lhero__copy { min-width: 0; }

/* ---------- 14.2 Figures + the honest asset gap ---------- */
.pfig { margin: 0; min-width: 0; }
.pfig img {
  display: block; width: 100%; height: auto; border-radius: 5px;
  background: var(--sand);
}
.pfig--wide img, .pfig--wide .assetgap { width: 100%; }
.figcap {
  margin-top: var(--s3); font-size: var(--t-sm); color: var(--slate);
  border-left: 1px solid var(--waterline); padding-left: var(--s3);
}
/* An unlicensed image is never shipped. This is the deliberate stand-in:
   a typographic panel that reads as designed, not as a broken asset. */
.assetgap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4); width: 100%; padding: var(--s6);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 22px, rgba(18,48,74,.035) 22px 23px),
    var(--sand);
  border: 1px solid rgba(18,48,74,.14); border-radius: 5px;
}
.assetgap__rule { display: block; width: 56px; height: 1px; background: var(--amber-deep); }
.assetgap__note {
  font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase;
  color: #5C5346; text-align: center; max-width: 22ch; line-height: 1.5;
}
.section--ink .assetgap, .section--forest .assetgap {
  background: repeating-linear-gradient(135deg,
      transparent 0 22px, rgba(255,255,255,.04) 22px 23px), var(--ink-soft);
  border-color: rgba(255,255,255,.16);
}
.section--ink .assetgap__note { color: #C3CDD6; }

/* ---------- 14.3 Source notes ---------- */
.srcnote {
  margin-top: var(--s5); padding-left: var(--s4);
  border-left: 1px solid var(--waterline);
  font-size: var(--t-sm); line-height: 1.6; color: #5C5346; max-width: 62ch;
}
.srcnote__k {
  display: inline-block; margin-right: .5em;
  font-size: .78em; letter-spacing: .1em; text-transform: uppercase;
  color: var(--clay-text);
}
.section--ink .srcnote, .section--forest .srcnote { color: #B9C4CD; }
.section--ink .srcnote__k, .section--forest .srcnote__k { color: var(--amber); }

/* ---------- 14.4 Data row ---------- */
.data { display: grid; gap: var(--s5); }
@media (min-width: 720px) { .data { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.data .datum { border-top: 1px solid var(--waterline); padding-top: var(--s4); }

/* ---------- 14.5 Transparency grid ---------- */
.tgrid { display: grid; gap: var(--s5); }
@media (min-width: 700px)  { .tgrid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (min-width: 1100px) { .tgrid { grid-template-columns: repeat(3, 1fr); } }
.tgrid__item { border-top: 1px solid var(--waterline); padding-top: var(--s4); }
.tgrid__item h3 { margin: 0 0 var(--s3); }
.tgrid__item p { margin: 0; }

/* ---------- 14.6 Counselling ---------- */
.counsel {
  background: var(--tint-lichen); border: 1px solid rgba(44,74,60,.22);
  border-left: 3px solid var(--forest); border-radius: 5px;
  padding: var(--s6); color: #34302A;
}
.counsel .eyebrow { color: var(--forest); }
.counsel h2 { margin: var(--s3) 0 var(--s4); }
.counsel__list { margin: var(--s5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s4); }
.counsel__list li { padding-left: var(--s5); position: relative; line-height: 1.65; }
.counsel__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--forest);
}
.counsel__caveat {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid rgba(44,74,60,.22); line-height: 1.65;
}
.counsel a { color: #1F4A63; }

/* ---------- 14.7 Callout + fact list ---------- */
.callout {
  margin-top: var(--s5); padding: var(--s5);
  background: var(--sand); border-left: 3px solid var(--amber-deep);
  border-radius: 5px; line-height: 1.7;
}
.section--ink .callout, .section--forest .callout {
  background: var(--ink-soft); border-left-color: var(--amber);
}
.factlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s5); }
.factlist li {
  border-top: 1px solid var(--waterline); padding-top: var(--s4);
  line-height: 1.7; max-width: 72ch;
}
.factlist__k { display: block; font-weight: 600; color: var(--ink); margin-bottom: .35em; }
.section--ink .factlist__k, .section--forest .factlist__k { color: var(--sand-pale); }

/* ---------- 14.8 Pull quote ---------- */
.pullgrid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .pullgrid { grid-template-columns: 0.8fr 1.2fr; gap: var(--s7); } }
.pull {
  margin: 0; font-family: var(--f-display); font-size: var(--t-h3);
  line-height: 1.28; color: var(--ink); border-top: 2px solid var(--amber-deep);
  padding-top: var(--s4); max-width: 22ch;
}
.section--ink .pull, .section--forest .pull { color: var(--sand-pale); border-top-color: var(--amber); }
.pullgrid__body { min-width: 0; }

/* ---------- 14.9 Split ---------- */
.split { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.split__col { border-top: 1px solid var(--waterline); padding-top: var(--s4); }
.split__col h3 { margin: 0 0 var(--s3); }
.split__col p  { margin: 0; }

/* ---------- 14.10 Link cards ---------- */
.linkcards { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s4); }
@media (min-width: 700px) { .linkcards { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.linkcards a {
  display: block; padding: var(--s5); text-decoration: none; color: inherit;
  background: var(--sand-pale); border: 1px solid rgba(18,48,74,.14);
  border-left: 3px solid var(--lake-deep); border-radius: 5px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.linkcards a:hover { background: var(--sand); border-left-color: var(--amber-deep); }
.linkcards a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.linkcards__t {
  display: block; font-weight: 600; color: var(--ink); margin-bottom: .4em;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(18,48,74,.3);
}
.linkcards__d { display: block; font-size: var(--t-sm); color: #5C5346; line-height: 1.6; }

/* ---------- 14.10b Selling paths ----------
   Replaces the former Bayfront-vs-Realtor comparison table. Three peer routes
   presented as warm cards rather than a scored grid: a table invites the reader
   to tally wins and losses, which is exactly the framing we do not want. The
   Bayfront card is distinguished by warmth (clay tint + amber edge), not by
   claiming superiority. */
.paths { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s4); }
@media (min-width: 860px) { .paths { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.path {
  padding: var(--s5); border-radius: 3px;
  background: var(--sand-pale); border: 1px solid rgba(18,48,74,.12);
  border-top: 3px solid var(--waterline);
  display: flex; flex-direction: column;
}
.path--feature {
  background: var(--tint-clay); border-top-color: var(--amber-deep);
  border-color: rgba(160,98,31,.28);
}
.path__title { font-size: var(--t-h3); color: var(--ink); line-height: 1.25; }
.path__for {
  margin-top: .6em; font-size: var(--t-sm); font-weight: 600;
  color: var(--clay-text); line-height: 1.5;
}
.path__body { margin-top: .8em; color: #5C5346; line-height: 1.65; }
.path__cta { margin-top: auto; padding-top: var(--s4); }
.path__cta .btn { width: 100%; text-align: center; }

/* ---------- 14.11 CTA row ---------- */
.ctarow { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.ctarow .btn { min-height: 44px; }
.cta .lead { max-width: 56ch; }
.tlink { color: var(--ink); text-underline-offset: 3px; }
.section--ink .tlink { color: var(--sand-pale); }

/* ---------- 14.12 Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .linkcards a { transition: none; }
}

/* ---------- 14.13 Refinement pass (post-screenshot critique) ---------- */

/* DEFECT: .shell--tight (58rem) wrapping .prose (34rem) double-constrains the
   measure and dumps ~40% of the section width into an empty right column, which
   reads as unfinished rather than as considered whitespace. .shell--read sets a
   single readable column so heading and body align and the section looks
   deliberate. */
.shell--read { max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); }
.shell--read .prose,
.shell--read .factlist li,
.shell--read .callout { max-width: none; }
.shell--read .srcnote { max-width: none; }

/* DEFECT: .source uses the monospace documentary face, which is right on a data
   module and wrong inside the counselling box, where it read as broken text. */
.counsel .source {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  letter-spacing: normal;
  color: #4A443C;                 /* 7.9:1 on --tint-lichen */
}
.counsel .source::before { content: none; }

/* The counselling aside earns a little more presence on the foreclosure page,
   where it is deliberately the first thing after the hero. */
.counsel--lead { padding: var(--s7) var(--s6); }
@media (min-width: 760px) { .counsel--lead { padding: var(--s7); } }

/* Figure inside a reading column */
.pfig--inset { margin-top: var(--s6); }
.pfig--inset .assetgap { min-height: 220px; }

/* ---------- 14.14 WCAG 1.4.11 button-boundary corrections ----------
   Measured on the built pages, not assumed. Three genuine failures:

   1. .btn--ghost on a light ground: border --waterline vs --paper = 1.74:1.
      A ghost button has no fill, so its border IS the control boundary and
      must reach 3:1 on its own.
   2. .btn--primary on a DARK ground: the --amber-deep border is darker than
      both the amber fill and the navy ground, so the outermost edge measured
      2.75:1. The amber fill itself is 5.10:1 on navy, so the correct fix is
      to stop drawing a darker ring and let the fill be the boundary.
   3. .masthead .btn--primary carries its own border-color, which reverted the
      amber-deep boundary to plain amber (2.55:1) on light grounds. */

.btn--ghost { border-color: #8C8172; }        /* 3.35:1 on --paper, 3.09:1 on --sand */
.btn--ghost:hover { border-color: var(--ink); }

.section--ink .btn--primary,
.section--forest .btn--primary,
.hero .btn--primary {
  border-color: var(--amber);                  /* fill is the boundary: 5.10:1 on --ink */
}
.section--ink .btn--primary:hover,
.section--forest .btn--primary:hover,
.hero .btn--primary:hover { border-color: var(--amber-deep); background: var(--amber-deep); }
/* The band is a light ground now, so the amber fill needs its legal boundary
   (WCAG 1.4.11) exactly as it does on --sand and --paper. */
.lhero--band .btn--primary { border-color: var(--amber-deep); }
/* --limestone is darker than --paper/--sand, so the default .btn--ghost border
   (#8C8172) drops to 2.80:1 on it and misses WCAG 1.4.11. --line-functional
   measures 3.71:1 on this ground. */
.lhero--band .btn--ghost { border-color: var(--line-functional); }
.lhero--band .btn--ghost:hover { border-color: var(--ink); }

/* #markets moved from --ink to --limestone (2026-08-08 community pass). Its
   children were measured rather than assumed: 31 text nodes, 2 failures. The
   state abbreviation used --slate-soft, which is documented as large-text-only
   on --sand and lands at 3.65:1 on the deeper limestone ground at 14px. */
.section--limestone .state__abbr { color: var(--slate); }

.masthead .btn--primary { border-color: var(--amber); }  /* fill and edge match; 5.01:1 label */

/* HISTORY: .lhero--band used to be a dark ground that was not .section--ink, so
   the light-ground .btn--ghost rule applied and rendered navy on navy at 1.00 —
   invisible. The band is a LIGHT ground as of 2026-08-08, so the correct fix is
   to drop the dark override entirely and let the default light-ground .btn--ghost
   apply, rather than to keep a reversed rule that would now reproduce the very
   same defect in mirror image. */

/* The two hero CTAs were stacking with mismatched widths inside the narrower
   hero copy column, which read as accidental rather than as a pair. */
@media (max-width: 899px) { .lhero .ctarow .btn { flex: 1 1 auto; justify-content: center; } }
@media (min-width: 900px) { .lhero .ctarow { flex-wrap: nowrap; } }

/* ---------- 14.15 Licence attribution ----------
   CC BY requires VISIBLE credit — creator, source, licence name and licence
   link — so this renders in the page, not in metadata. Kept quiet enough that
   it does not compete with the conversion path, but not hidden. */
.attrib {
  margin-top: var(--s3);
  font-size: 12px; line-height: 1.5; color: #6B6357;
  border-left: 1px solid var(--waterline); padding-left: var(--s3);
}
.attrib a { color: #4A5A66; text-underline-offset: 2px; }
.attrib a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.section--ink .attrib, .section--forest .attrib { color: #A8B4BE; }
.section--ink .attrib a { color: #C7D2DA; }

/* ---------- 14.16 Horizon field — the approved image fallback ----------
   Owner-approved: where no image meets the licensing and provenance standard,
   use the established Horizon device rather than an apologetic placeholder.
   This is brand structure doing the work of a photograph, not a grey box, and
   it removes any incentive to lower the sourcing standard to fill space. */
.hfield {
  position: relative; width: 100%; overflow: hidden; border-radius: 5px;
  background: linear-gradient(180deg, var(--sand-pale) 0%, var(--sand) 58%, var(--limestone) 100%);
  border: 1px solid rgba(18, 48, 74, .10);
  display: flex; align-items: flex-end;
}
.hfield__lines { position: absolute; inset: 0; }
/* Stacked waterlines — the section rhythm of the site expressed as a landscape */
.hfield__lines span {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--waterline); opacity: .55;
}
.hfield__lines span:nth-child(1) { top: 30%; opacity: .34; }
.hfield__lines span:nth-child(2) { top: 44%; opacity: .52; }
.hfield__lines span:nth-child(3) { top: 62%; opacity: 1; background: var(--ink); height: 1px; }
.hfield__lines span:nth-child(4) { top: 72%; opacity: .38; }
/* The single amber mark — one accent per viewport, same rule as everywhere else */
.hfield__mark {
  position: absolute; left: 14%; top: 62%; width: 2px; height: 52px;
  background: var(--amber-deep); transform: translateY(-100%);
}
.hfield__mark::after {
  content: ""; position: absolute; left: -4px; bottom: -4px;
  width: 10px; height: 8px; background: var(--amber-deep);
}
/* A weighted lower field, not a literal roofline. The first attempt drew a
   repeating sawtooth that read as a rendering glitch rather than as buildings,
   so this leans on the brand's own structure instead of illustrating housing. */
.hfield__roof {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(18,48,74,.02) 0, rgba(18,48,74,.09) 100%);
}
.hfield__cap {
  position: relative; z-index: 1; padding: var(--s6);
  font-size: var(--t-sm); line-height: 1.5; color: #5C5346; max-width: 34ch;
}
.hfield__cap strong { display: block; color: var(--ink); margin-bottom: .25em; }

/* ---------- 14.17 Location directory (Areas We Serve) ---------- */
.dirgrid { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .dirgrid { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.dirgrid__col { border-top: 1px solid var(--waterline); padding-top: var(--s4); }
.dirgrid__col h3 { margin: 0 0 var(--s4); }
.dirgrid__col h3 a { color: var(--ink); text-underline-offset: 3px; }
.dirlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.dirlist a {
  display: block; padding: .45rem 0; color: var(--ink);
  text-underline-offset: 3px; text-decoration-color: rgba(18,48,74,.35);
  min-height: 44px; display: flex; align-items: center;
}
.dirlist a:hover { text-decoration-color: var(--amber-deep); }
.dirlist a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* two-column county-vs-city table */
.ctable--two th[scope="row"] { width: 34%; }

/* The fallback caption sat across the dark waterline and read as cramped.
   Give it its own ground so the horizon reads behind it, not through it. */
.hfield__cap {
  background: linear-gradient(180deg, rgba(247,244,239,0) 0, rgba(247,244,239,.94) 18%);
  padding-top: var(--s7);
}
.hfield { align-items: stretch; }
.hfield__cap { margin-top: auto; }

/* ---------- 14.18 Seller-facing evaluation framework ----------
   Deliberately NOT styled as a calculator widget: no inputs, no live result,
   no currency. It is a printed formula, so it reads as an explanation of method
   rather than as an instant valuation or a promise to buy. */
.formula {
  background: var(--sand); border-left: 3px solid var(--amber-deep);
  border-radius: 5px; padding: var(--s6); overflow-x: auto;
}
.formula__line {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s4); font-family: var(--f-display);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.3; color: var(--ink);
}
.formula__t { display: inline-block; }
.formula__t--out {
  border-bottom: 2px solid var(--amber-deep); padding-bottom: 2px;
}
.formula__op { color: var(--clay-text); font-weight: 600; }
.formula__op--eq { color: var(--ink); }
.section--ink .formula, .section--forest .formula { background: var(--ink-soft); border-left-color: var(--amber); }
.section--ink .formula__line { color: var(--sand-pale); }

/* ---------- 24. CONVERSION LAYER (2026-08-13) ----------
   Phone as a first-class alternative to the form, a two-step lead form, and the
   company-led trust section. Everything here is additive: no existing rule is
   modified, so the approved Horizon Line system is untouched. */

/* Header phone. Deliberately NOT a filled button — one amber action at a time,
   so the primary CTA stays primary and the call reads as the calm alternative. */
.nav__tel {
  display: inline-flex; align-items: baseline; gap: .4ch;
  font-weight: 600; color: var(--ink); text-decoration: none;
  white-space: nowrap; margin-right: var(--s4);
}
.nav__tel:hover, .nav__tel:focus-visible { color: var(--amber-text); text-decoration: underline; }
.nav__tel-label { color: var(--ink-soft); font-weight: 500; }
@media (max-width: 899px) { .nav__tel { display: none; } }

/* Hero: the warm alternative, directly under the lead. */
.hero__talk { margin-top: var(--s4); color: rgb(226,221,210); }
.hero__talk a {
  color: var(--sand); font-weight: 700; white-space: nowrap;
  border-bottom: 2px solid var(--amber); padding-bottom: 1px; text-decoration: none;
}
.hero__talk a:hover, .hero__talk a:focus-visible { color: #fff; }
.hero__local {
  /* The hero sits over a photograph. --ink-soft is a light-background token and
     rendered near-invisible here; this matches the opaque treatment .hero__lead
     already uses for the same reason. */
  margin-top: var(--s3); max-width: 34rem;
  color: rgb(226,221,210); font-size: .9375rem; line-height: 1.6;
}

/* Two-step lead form. `hidden` is honoured explicitly because the element also
   carries a display rule. */
.formstep[hidden] { display: none; }
.formstep__next { margin-top: var(--s5); }
/* .btn sets display:inline-flex, which outranks the user-agent [hidden] rule —
   so the Continue button stayed on screen after advancing to step 2 even though
   its hidden attribute was set. Any element that carries both .btn and [hidden]
   needs this, so it is written against the attribute rather than the one id. */
.btn[hidden], [hidden] { display: none !important; }

/* Trust section. The grid is authored for an optional figure that does not exist
   yet: with one child the body simply fills the row, so adding .expect__figure
   later needs no restructuring and leaves no empty box today. */
.expect { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) {
  .expect:has(.expect__figure) { grid-template-columns: 14rem 1fr; }
}
.expect__body { max-width: 44rem; }
.expect__list { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.expect__list li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); }
.expect__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--amber);
}
.expect__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }

/* Low-commitment inline action. */
.link-arrow {
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--amber); padding-bottom: 1px;
}
.link-arrow:hover, .link-arrow:focus-visible { color: var(--amber-text); }
.link-arrow::after { content: " \2192"; }

.paths__talk { color: var(--ink-soft); }
.paths__talk a { color: var(--ink); font-weight: 600; }
.path__cta { margin-top: var(--s4); }

.footer__contact a { color: var(--cream, #F7F4EF); font-weight: 600; text-decoration: none; }
.footer__contact a:hover, .footer__contact a:focus-visible { text-decoration: underline; }

/* Sticky bar: two distinct actions on mobile, Call and Start here. */
.stickybar { grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; }
.stickybar__call { white-space: nowrap; }

.u-mt-3 { margin-top: var(--s3); }
.u-ml-4 { margin-left: var(--s4); }


/* =============================================================================
   PLAINSPOKEN TRUST TRIAL — role assignments
   Archivo for anything a reader scans; Source Sans 3 for anything a reader
   reads. Set after the base rules so it wins without !important.
   ========================================================================== */
h1, h2, h3, h4, .btn, .nav a, .nav-toggle, .eyebrow, .brand__word,
label, legend, th, .stat__k, .step__n, .crumbs {
  font-family: var(--sans);
}

/* The literary treatment is removed everywhere, not only on the H1. The earlier
   pass covered h1/.display and missed .h2 em, so section headings such as
   "Two states we know <em>well</em>" were still rendering serif italic on every
   page that used one. Balanced Direct bans serif and italic display treatments
   outright, so every heading emphasis now sets in the roman face. */
h1 em, h1 i, .display em, .display i,
h2 em, h2 i, .h2 em, .h2 i,
h3 em, h3 i, .h3 em, .h3 i {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

/* The phone is a control, not body text. */
.telnum {
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.telnum__lab {
  display: block;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 1px;
}
.masthead .telnum { text-decoration: none; color: var(--ink); }
.masthead .telnum:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Focus: 3:1 against both grounds it can appear on. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* The trust box, imported from the Warm Local concept. */
.trustbox {
  background: var(--sand);
  border-radius: 12px;
  padding: var(--s5) var(--s5);
}
.trustbox h3 { margin: 0 0 var(--s3); font-size: var(--t-h3); }
.trustbox ul { margin: 0; padding-left: 1.15rem; }
.trustbox li { margin-bottom: .55rem; line-height: 1.5; }
.trustbox li::marker { color: var(--burnt-deep); }

/* --- Logo Direction A (TRIAL) ------------------------------------------------
   Monogram in currentColor + live Archivo wordmark. HOME BUYERS is a readable
   descriptor rather than a hairline: .72rem at .13em, not 8px at .22em. */
.brand { display: flex; align-items: center; gap: .62rem; text-decoration: none; color: var(--ink); }
.brand__mono { display: block; flex: none; color: currentColor; }
.brand__word {
  font-family: var(--sans);
  font-size: 1.32rem; font-weight: 700; letter-spacing: -.012em; line-height: 1;
  color: currentColor;
}
.brand__desc {
  display: block;
  font-size: .66rem; font-weight: 650; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate); margin-top: .22em; line-height: 1;
}
.masthead .brand:hover .brand__word { text-decoration: underline; text-underline-offset: 5px; }
/* Reversed grounds — drawer and footer sit on --ink. */
.drawer .brand, .footer .brand { color: var(--paper); }
.drawer .brand__desc, .footer .brand__desc { color: var(--lake-on-navy); }
@media (max-width: 560px) {
  .brand__word { font-size: 1.15rem; }
  .brand__desc { font-size: .6rem; }
}

/* --- Plainspoken hero actions ------------------------------------------------ */
.hero__acts { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }
.btn--lg { font-size: var(--t-base); padding: 1.05rem 1.9rem; min-height: 56px; }
.hero__talk { margin-top: var(--s4); color: var(--slate); }
@media (max-width: 640px) {
  .hero__acts { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .hero__acts .btn { width: 100%; }
}

/* =============================================================================
   FUTURE MARKETING AVATAR — RESERVATION ONLY. NOT IMPLEMENTED.
   No element is rendered and no gap is left. This records the constraints a
   later implementation must satisfy, so they are not rediscovered by breaking
   the layout.

   BREAKPOINT: >= 1180px. Evidence, not preference — measured on the integrated
   pages. Below 1180px .shell runs edge-to-edge with roughly 20-40px of gutter,
   so a 190px-wide element at lower-left overlaps body copy. At 1180px the
   gutter reaches ~150px and a docked element clears the text column. The board
   showed the failure directly: at 390x844 the reserve overlapped the hero fact
   row and the trust list. Mobile therefore gets no avatar at all.

   MAXIMUM FOOTPRINT: 190px wide x 210px tall, docked bottom-left with a 16px
   margin, never exceeding 22vh.

   MUST NEVER COVER: the phone CTA, any form control, the consent paragraph,
   the masthead or drawer navigation, the skip link or any accessibility
   control, and the mobile sticky bar (which is why it is desktop-only).

   When it is built it must not be presented as a customer, a testimonial, or
   evidence of any transaction.
   ========================================================================== */
@media (max-width: 1179.98px) {
  .avatar-dock { display: none !important; }
}

/* --- Sticky-header offset for in-page anchors --------------------------------
   The masthead is sticky, so an element scrolled to by an anchor link landed
   underneath it: #start, #process and #beforecall all put their first control
   under the header. Found by the capture harness, which asserts that no
   reachable control is covered at the moment a screenshot is taken.
   scroll-margin-top pushes the anchor target clear of the header instead.
   Applied to every section, not only those carrying an id: .closing has no id
   and was still landing under the header when scrolled to programmatically. */
:root { --masthead-h: 84px; }
@media (max-width: 860px) { :root { --masthead-h: 72px; } }
section, .closing, .formcard, main [id]:target {
  scroll-margin-top: calc(var(--masthead-h) + 12px);
}

/* --- Ghost button on dark grounds --------------------------------------------
   .btn--ghost sets color:var(--ink), which is correct on paper and illegible on
   the hero photograph and the ink sections — navy on a dark ground. The token
   remap above fixes muted TEXT on dark but not a component that names --ink
   explicitly. Caught in a 390x844 capture, where the hero's secondary action was
   effectively invisible. --paper on --ink is 12.03:1. */
.section--ink .btn--ghost,
.section--forest .btn--ghost,
.closing .btn--ghost,
.drawer .btn--ghost,
.footer .btn--ghost {
  color: var(--paper);
  border-color: var(--lake-on-navy);
  background: transparent;
}
.section--ink .btn--ghost:hover,
.closing .btn--ghost:hover,
.footer .btn--ghost:hover {
  background: rgba(251, 248, 242, .12);
  border-color: var(--paper);
  color: var(--paper);
}

/* =============================================================================
   BALANCED DIRECT — approved sitewide surface system (owner-approved 2026-08-28)
   Source of truth: review/balanced-direct-2026-08/ (final borderless version).

   The palette and the two typefaces were already in place from the previous
   integration. What this layer changes is the SURFACE treatment: informational
   panels stop being ruled or outlined and become borderless surfaces separated
   by tonal ground, spacing and one soft diffuse shadow. Controls keep their
   full-strength borders, because WCAG 1.4.11 governs controls, not ornament.
   ========================================================================== */

:root {
  /* Two shadow levels, both light and diffuse. --lift for surfaces that sit on
     the page; --lift-2 only for the few elements that genuinely lead. */
  --lift:   0 1px 2px rgba(24,53,74,.05), 0 6px 16px rgba(24,53,74,.07);
  --lift-2: 0 2px 4px rgba(24,53,74,.06), 0 12px 30px rgba(24,53,74,.09);
  /* Hairline used only for horizontal separators between stacked sections and
     inside open lists. Never as a frame around an object. */
  --divider: rgba(24,53,74,.13);
  --radius:  16px;
}

/* ---- informational grids become borderless cards ------------------------- */
.tgrid { gap: var(--s4); }
@media (min-width: 700px) { .tgrid { gap: var(--s4); } }
.tgrid__item {
  border-top: 0;
  background: #FFFFFF;
  border-radius: var(--radius);
  padding: var(--s5) var(--s5);
  box-shadow: var(--lift);
}
.section--ink .tgrid__item, .section--forest .tgrid__item {
  background: rgba(255,255,255,.06);
  box-shadow: none;
}

/* ---- open fact presentation: a light rule, never a box ------------------- */
.factlist li { border-top: 1px solid var(--divider); }
.section--ink .factlist li, .section--forest .factlist li {
  border-top-color: rgba(237,231,221,.22);
}

/* ---- softer, modern radii on the remaining surfaces ---------------------- */
.formcard          { border-radius: var(--radius); box-shadow: var(--lift-2); }
.consentbox        { border-radius: 12px; border-left-width: 4px; border-left-color: var(--ink); }
.situations__figure{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift); }
.counsel           { border-radius: 12px; border-width: 0; border-left-width: 4px; }
.faq               { border-top-color: var(--divider); }
.faq__item         { border-bottom-color: var(--divider); }

/* ---- controls keep full-strength borders and focus ----------------------- */
.btn        { border-radius: 8px; }
.nav-toggle { border-radius: 8px; border-color: var(--ink); }
.btn--primary { box-shadow: var(--lift); }

/* ---- the homepage hero photograph sits in the page, not in a frame ------- */
.hero__fig, .hero__photo { border: 0; }

/* ---- Balanced Direct header CTA ------------------------------------------ */
.masthead__cta { margin-left: auto; white-space: nowrap; flex: none; }
.masthead__cta-short { display: none; }
@media (max-width: 980px) {
  .masthead__cta-full  { display: none; }
  .masthead__cta-short { display: inline; }
  .masthead__cta { padding: .75rem 1.1rem; min-height: 44px; }
}
.nav__link { white-space: nowrap; }
.brand__word, .brand__desc { white-space: nowrap; }

/* ---- Balanced Direct buttons: sentence case, untracked -------------------
   The original .btn set uppercase with .06em tracking. That is the luxury
   control treatment the approved direction rejects, and it also forces long
   labels like "Call (269) 389-9961" to shrink. Sentence case at a readable
   size, no tracking. Applies to every button on every page. */
.btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.btn--sm { font-size: 1rem; }

/* ---- Balanced Direct nav breakpoint --------------------------------------
   The old header needed >=1200px because it carried six long labels, a phone
   text block and a wide CTA. The nav now carries SIX labels at 1rem, and the
   changeover is measured rather than assumed: stepping the viewport in 20px
   increments, the row stays on one line with comfortable gaps down to 1000px
   and tightens below it, so the hamburger takes over at 980px. Raising the
   breakpoint is the correct response to a tight row — shrinking the type is
   not. */
@media (min-width: 981px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
}
@media (max-width: 980px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---- Balanced Direct: hero without the full-bleed photograph -------------
   The dark scrimmed hero was the single largest dark field on the site and the
   thing the owner called upscale. The hero now sits on --paper and the
   photograph appears below it as a medium captioned band. */
.hero { background: var(--paper); color: var(--ink); }
.hero::before, .hero::after { display: none; }
/* The header CTA is the phone number now, so the 'one accent action' rule no
   longer needs to demote it while the form is on screen — the form's submit
   and the header phone are different actions. */
.masthead[data-cta="subdued"] .masthead__cta {
  background: var(--amber); border-color: var(--amber); color: #FFFFFF;
}

.photoband { padding: 0 0 var(--s7); background: var(--paper); }
.photoband__fig { margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--lift-2); max-width: 1040px; }
.photoband__fig img { display: block; width: 100%; height: clamp(200px, 30vw, 380px);
  object-fit: cover; }
.photoband__fig figcaption { font-size: var(--t-small); color: var(--slate);
  background: var(--sand-pale); padding: var(--s3) var(--s4); line-height: 1.45; }

/* ---- Hero text colours for a LIGHT hero ----------------------------------
   The hero was authored for a dark photographic ground: the display, eyebrow,
   lead, talk line and scope labels were all set to --sand-pale or near-white.
   With the photograph removed those sit on --paper and measure about 1.1:1 —
   the headline was effectively invisible. Caught in a 1440 capture, not by a
   token audit, because the tokens themselves were never wrong. */
.hero__display,
.hero .eyebrow,
.hero__display em { color: var(--ink); }
.hero__lead,
.hero__talk,
.hero__local { color: var(--slate); }
.hero__talk a { color: var(--amber-text); }
.hero__talk a:hover, .hero__talk a:focus-visible { color: var(--ink); }
.hero__scope dt { color: var(--slate); }
.hero__scope dd { color: var(--ink); }

/* Service-area block in the mobile drawer, and the full-width Florida card in
   the .states grid. Florida spans both columns rather than sitting as an orphan
   third cell: it carries no statistics panel, so a wide card reads as deliberate
   rather than short. */
.drawer__areas { padding-block: var(--s5); border-top: var(--rule) solid rgba(237,231,221,.12); }
.drawer__areas-head { color: var(--sand-pale); font-weight: 700; font-size: var(--t-small); }
.drawer__areas-list { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s4); }
.drawer__areas-list a {
  color: var(--sand); text-decoration: none; font-weight: 600; font-size: 1.0625rem;
  border-bottom: 2px solid var(--amber); padding-bottom: 1px;
}
.drawer__areas-list a:hover, .drawer__areas-list a:focus-visible { color: var(--amber); }
@media (min-width: 900px) { .state--wide { grid-column: 1 / -1; } }

/* ---- Hero state choice ----------------------------------------------------
   Warm and light rather than form-like: a hairline chip, sand on hover, no card
   and no heavy outline. Sits directly under the H1 and its one supporting
   sentence, so the visitor chooses before reading anything long. */
.statepick { margin-top: var(--s6); }
.statepick__ask { font-weight: 650; color: var(--ink); margin-bottom: var(--s4); }
.statepick__row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.statechoice {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1.1rem;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
  text-decoration: none; background: transparent; cursor: pointer;
  border: 1px solid var(--waterline); border-radius: 999px;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.statechoice:hover, .statechoice:focus-visible {
  background: var(--sand); border-color: var(--ink);
}
.statechoice--other { border-style: dashed; color: var(--slate); }
.statepick__note {
  margin-top: var(--s5); max-width: 34rem;
  font-size: var(--t-small); color: var(--ink-soft);
}
.statepick__note p + p { margin-top: var(--s3); }
.statepick__memo {
  margin-top: var(--s5); font-size: var(--t-small); color: var(--ink-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
}
.statepick__memo a, .statepick__memo button {
  color: var(--ink); font: inherit; font-weight: 600; background: none;
  border: 0; padding: 0; cursor: pointer; border-bottom: 2px solid var(--amber);
}
.statepick__memo a:hover, .statepick__memo button:hover { color: var(--amber-text); }

/* ---- Very narrow phones (iPhone SE class, 320px) --------------------------
   The masthead row needs about 369px at its minimum — brand 123 + phone CTA 67
   + MENU 91, plus 48px of gaps and 40px of gutter. Below that the layout
   viewport expands to fit it and the right edge of the row is clipped: at 320px
   the MENU button was cut in half. This tightens only spacing — no element is
   resized, relabelled or removed, and the six-link nav is untouched. */
@media (max-width: 379px) {
  .masthead__inner { gap: 10px; }
  .masthead .shell, .stickybar { padding-inline: 12px; }
  .masthead__cta { padding-inline: .8rem; }
  .nav-toggle { padding-inline: .7rem; gap: .4rem; }
}