/* ============================================================
   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:        #12304A;   /* Harbour Navy — primary ink and dark ground */
  --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:      #FCFAF7;   /* lightest */
  --sand-pale:  #F7F4EF;
  --sand:       #EDE7DD;
  --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 --- */
  --amber:      #D98E3E;   /* fills and marks only — NEVER text on light */
  --amber-deep: #A0621F;   /* hover fill AND the border that gives the
                              amber button a legal boundary on light
                              grounds: 4.01:1 on --sand (WCAG 1.4.11) */
  --amber-text: #8A5518;   /* the only amber legal as text on light */

  /* --- 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:      #D98E3E;

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

  /* Type — no external fonts. Treatment carries the identity. */
  --sans: ui-sans-serif, system-ui, -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;
  font-family: var(--sans);
  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. */
.section--ink, .section--forest, .hero, .drawer, .footer, .draftbar {
  color: var(--sand-pale);
  --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. */
.btn--primary {
  background: var(--amber);
  color: var(--ink-deep);
  border-color: var(--amber-deep);
}
.btn--primary:hover {
  background: var(--amber-deep);
  border-color: var(--amber-deep);
  color: #FFFFFF;              /* 4.93:1 on --amber-deep. --sand-pale
                                  measured 3.54:1 here and failed. */
}
.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 Fraunces 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; }
@media (min-width: 1200px) {
  /* The Bodoni lockup is wider than the previous sans one. Between 1024
     and 1200 the nav needs a tighter gap or it wraps to two lines. */
  .nav { display: flex; align-items: center; gap: var(--s3); }
}
@media (min-width: 1200px) {
  .nav__link {
    position: relative;
    text-decoration: none;
    font-size: var(--t-small);
    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);
}
.masthead[data-cta="subdued"] .btn--primary {
  background: transparent;
  color: var(--ink);
  border-color: var(--waterline);
}
.masthead[data-cta="subdued"] .btn--primary:hover {
  background: var(--sand); border-color: var(--ink); color: var(--ink);
}

.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; } }
body { 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-deep); }  /* 4.73:1 on --paper */

/* 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); }