/* ============================================================
   HousingRx block theme — hrx-build.css

   Concatenation of the static site-build's token files + site.css,
   in the EXACT order the static HTML linked them (order matters:
   later files win same-specificity ties on shared properties, e.g.
   body{} appears in both base.css and site.css). Nothing here is
   redesigned — this is the static build's cascade, ported verbatim
   and merged into one file to match the block-theme enqueue
   convention (see clients/Forging Tomorrow/block-build/forging-tomorrow).

   Source order (was 6 linked token files + site.css):
     1. tokens/colors.css
     2. tokens/typography.css
     3. tokens/spacing.css
     4. tokens/radius.css
     5. tokens/base.css
     6. site.css
   (tokens/fonts.css is ported separately as hrx-fonts.css, enqueued
   as its own stylesheet, same split FT uses for ft-fonts.css.)
   ============================================================ */


/* ============================================================
   1. tokens/colors.css — HousingRx Color tokens (APPROVED brand: Pine & Coral, 1a)
   Client-approved 2026-07-09. Source of truth:
     Primary — Pine  #183838  (pine-800)
     Accent  — Coral #C85838  (coral-500)
     Ground  — Cream #FAF8F5  (cream-50)
   Pine carries authority and calm clinical credibility; Coral is
   the compassionate, human "home" accent (the Rx in the logo) —
   used sparingly, always intentional. Cream neutrals keep the
   system warm, never cold.
   ============================================================ */
:root {
  /* ---- Pine (primary) ---- */
  --pine-50:  #edf3f3;
  --pine-100: #d7e6e5;
  --pine-200: #b0cccb;
  --pine-300: #84acab;
  --pine-400: #598b8a;
  --pine-500: #3e6e6d;
  --pine-600: #2c5555;
  --pine-700: #214546;
  --pine-800: #183838;  /* ← brand Pine, logo exact */
  --pine-900: #112626;

  /* ---- Coral (accent) ---- */
  --coral-50:  #fbf1ec;
  --coral-100: #f7ded2;
  --coral-200: #efbca5;
  --coral-300: #e39678;
  --coral-400: #d67551;
  --coral-500: #c85838;  /* ← brand Coral, logo exact */
  --coral-600: #a8462b;
  --coral-700: #863823;
  --coral-800: #652b1c;
  --coral-900: #4b2015;

  /* ---- Cream (warm neutral ramp) ---- */
  --cream-0:   #ffffff;
  --cream-50:  #faf8f5;  /* ← brand Cream, logo exact */
  --cream-100: #f1ede7;
  --cream-200: #e3ddd3;
  --cream-300: #cdc5b8;
  --cream-400: #a89f90;
  --cream-500: #837a6c;
  --cream-600: #635c50;
  --cream-700: #4a443b;
  --cream-800: #332f29;
  --cream-900: #1f1c18;

  /* ---- Wheat (warm gold highlight) ---- */
  --wheat-100: #f7ecd2;
  --wheat-300: #e9c878;
  --wheat-400: #e0a23c;
  --wheat-500: #c9842a;

  /* ---- Sky (calm informational blue) ---- */
  --sky-100: #dcebf1;
  --sky-300: #8fbdd1;
  --sky-500: #2f6f8f;
  --sky-700: #234f66;

  /* ---- Status hues ---- */
  --green-100: #d8ecdf;
  --green-500: #2f8a5b;
  --green-700: #1f5d3d;
  --red-100:   #f6dcd8;
  --red-500:   #c0392b;
  --red-700:   #8c281e;

  /* ============================================================
     Semantic aliases — reference these in components, not raw ramps
     ============================================================ */
  /* surfaces */
  --color-bg:            var(--cream-50);
  --color-bg-warm:       var(--cream-100);
  --surface-card:        var(--cream-0);
  --surface-sunken:      var(--cream-100);
  --surface-inverse:     var(--pine-800);
  --surface-brand-soft:  var(--pine-50);
  --surface-accent-soft: var(--coral-50);

  /* text */
  --text-strong:  var(--cream-900);
  --text-body:    var(--cream-800);
  --text-muted:   var(--cream-500);
  --text-faint:   var(--cream-400);
  --text-on-brand:    #ffffff;
  --text-on-accent:   #ffffff;
  --text-inverse:     var(--cream-50);
  --text-link:    var(--pine-600);

  /* brand */
  --brand:        var(--pine-800);
  --brand-strong: var(--pine-900);
  --brand-hover:  var(--pine-700);
  --brand-press:  var(--pine-900);
  --accent:       var(--coral-500);
  --accent-hover: var(--coral-600);
  --accent-press: var(--coral-700);

  /* lines */
  --border:        var(--cream-200);
  --border-strong: var(--cream-300);
  --border-brand:  var(--pine-200);
  --ring:          color-mix(in srgb, var(--pine-500) 45%, transparent);

  /* status */
  --success:      var(--green-500);
  --success-soft: var(--green-100);
  --warning:      var(--wheat-500);
  --warning-soft: var(--wheat-100);
  --danger:       var(--red-500);
  --danger-soft:  var(--red-100);
  --info:         var(--sky-500);
  --info-soft:    var(--sky-100);
}


/* ============================================================
   2. tokens/typography.css — Poppins (display + text/UI) · Spline Sans Mono (data)
   One geometric humanist sans carries the whole voice: clear and
   authoritative for clinical readers, warm and approachable for
   small nonprofits. Mono is reserved for codes, labels, eyebrows.
   ============================================================ */
:root {
  /* families */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale (16px base) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  1.875rem;  /* 30 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  3.75rem;   /* 60 */
  --text-6xl:  4.5rem;    /* 72 */

  /* fluid display sizes for hero/marketing */
  --display-1: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); /* @kind other */
  --display-2: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); /* @kind other */

  /* weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* line-heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.14em;  /* uppercase mono eyebrows */

  /* semantic roles */
  --role-display-font: var(--font-display);   /* Poppins */
  --role-display-weight: var(--weight-semibold);
  --role-heading-font: var(--font-display);   /* Poppins */
  --role-body-font: var(--font-sans);         /* Poppins */
  --role-eyebrow-font: var(--font-mono);      /* Spline Sans Mono */
}


/* ============================================================
   3. tokens/spacing.css — Spacing & sizing (4px base grid)
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --section-y: clamp(3.5rem, 8vw, 7rem); /* @kind spacing */
}


/* ============================================================
   4. tokens/radius.css — Radius & elevation
   Friendly but grounded: medium rounding, soft warm-tinted shadows.
   Shadows tint toward ink/pine, never neutral gray-black.
   ============================================================ */
:root {
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(31, 28, 24, 0.06);
  --shadow-sm: 0 1px 3px rgba(31, 28, 24, 0.08), 0 1px 2px rgba(31, 28, 24, 0.05);
  --shadow-md: 0 4px 12px rgba(31, 28, 24, 0.08), 0 2px 4px rgba(31, 28, 24, 0.05);
  --shadow-lg: 0 12px 28px rgba(31, 28, 24, 0.10), 0 4px 10px rgba(31, 28, 24, 0.06);
  --shadow-xl: 0 24px 56px rgba(16, 46, 42, 0.16), 0 8px 20px rgba(31, 28, 24, 0.08);

  /* focus ring */
  --focus-ring: 0 0 0 3px var(--ring);

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-mid: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}


/* ============================================================
   5. tokens/base.css — base element styles & utility helpers.
   Lightweight resets + role classes consumers can use directly.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* headings default to display serif */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---- role utility classes ---- */
.hrx-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.hrx-display {
  font-family: var(--font-display);
  font-size: var(--display-1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.hrx-lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.hrx-kicker { font-style: italic; font-family: var(--font-display); color: var(--accent); }

/* selection */
::selection { background: var(--coral-200); color: var(--pine-900); }


/* ============================================================
   6. site.css — structural CSS for the clinical-chart /
   prescription-pad concept. The concept lives in STRUCTURE (grid,
   rules, the pad shadow, section rhythm) — not in invented clinical
   copy. Poppins carries the voice; Spline Sans Mono is a precise
   accent used sparingly (nav, form field labels). Square corners
   throughout (brand decision, product-UI radius tokens are unused
   on the marketing site).
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream-50);
  color: var(--pine-800);
}

a { color: var(--pine-700); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--coral-600); }

img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--coral-600);
  color: #fff;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
  /* establishes a block-formatting context so a first child's margin
     can never collapse through and escape into the previous section
     (root cause of the pine/pine seam gap — fixed 2026-07-16) */
  display: flow-root;
}

/* ---- pine band base (dark-ground sections) ----
   Single mechanism for any section flagged data-band="pine": .hero and
   .page-banner already set identical background/color via their own
   chrome classes (no-op here for them); this covers sections that have
   no dedicated class of their own, so nothing needs an inline style. */
[data-band="pine"] {
  background: var(--pine-800);
  color: var(--cream-50);
}

h2.rx {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  margin: 0;
  color: var(--pine-800);
}
[data-band="pine"] h2.rx { color: #fff; }

.lede {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--cream-600);
  max-width: 38em;
  margin: 26px 0 0 0;
}

/* ---- chart section grid (margin note + content) ---- */
.sect {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 52px;
  padding: clamp(56px, 8vw, 100px) 0;
}
/* top must clear the sticky header (85px) + keep the original 24px gap;
   before v1.0.11 the header scrolled away so 24px alone was enough. */
.margin-note { position: sticky; top: 109px; align-self: start; }
.margin-note .section-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--coral-600);
  margin: 0;
}
[data-band="pine"] .margin-note .section-name { color: var(--coral-300); }

/* rx-glyph rhythm: the brand's Rx ligature recurs as a small margin
   accent on one anchor section per page (never the Unicode ℞ — always
   the wordmark's own artwork). Pulses a bounded 3 cycles at the
   moment it's scrolled into view (the vital-sign read, at the moment
   of discovery), then settles — keyframe 100% already matches the
   resting opacity/scale below, so nothing snaps when it stops.
   Triggered by the shared reveal observer's .in-view class (same
   hook as .chart-rule/.reveal, set in site.js), not a standalone
   infinite loop. */
@keyframes rx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .75; transform: scale(1.05); }
}
.margin-note .rx-mark {
  width: 68px;
  margin-top: 9px;
  display: block;
  opacity: 1;
}
.margin-note .rx-mark.in-view {
  animation-name: rx-pulse;
  animation-duration: 5s;
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: 3;
  animation-fill-mode: forwards;
}

@media (max-width: 880px) {
  .sect { grid-template-columns: 1fr; gap: 20px; }
  .margin-note { position: static; }
  /* mobile keeps the mark small — the tighter column doesn't have
     the desktop isolation problem, and a bigger mark here would
     compete with the body copy directly below it */
  .margin-note .rx-mark { width: 50px; margin-bottom: 4px; }
}

/* ---- chart rule — the signature motion ----
   A ruled line draws itself in (0 -> 100% width) as each section
   enters view: the chart-paper concept, structural, no copy.
   Same device also opens the hero and every page banner, so the
   site's one signature moment reads consistently on first paint,
   not just deeper down the page. */
.chart-rule {
  height: 1.5px;
  width: 0;
  background: var(--pine-800);
  margin-bottom: 30px;
  transition: width .95s var(--ease-out);
}
[data-band="pine"] .chart-rule { background: var(--cream-50); }
.chart-rule.in-view { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .chart-rule { width: 100%; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- reveal — fade + rise entrance for the hero, headings, ledes, and
   row/card groups (extends the chart-rule signature motion above to the
   rest of the page's content; one shared observer in site.js drives both).
   Visible by default; only hidden-then-revealed once JS confirms it's
   actually running (html.reveal-ready), so nothing is ever stuck
   invisible if a script is slow to init or fails outright. Stagger
   between related elements comes from an inline transition-delay set in
   site.js, not from CSS, so it can follow each element's DOM order
   within its data-reveal-group. */
.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.reveal-ready .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* anchor targets land clear of the sticky header instead of tucking
   the section heading underneath it */
main section[id] { scroll-margin-top: 100px; }

/* ---- buttons (Poppins voice, coral accent) ---- */
.btn-rx {
  display: inline-block;
  background: var(--coral-600); /* coral-500 fails WCAG AA (4.28:1) for white text; coral-600 passes at 5.87:1 */
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  border-radius: 0;
  box-shadow: var(--shadow-xs);
  transition: background-color .15s ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-rx:hover, .btn-rx:focus-visible {
  background: var(--coral-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-rx:active {
  box-shadow: var(--shadow-sm);
}
/* .btn-rx doubles as a .reveal target once scrolled into view, and the
   settled state (.reveal-ready .reveal.in-view, 3 classes) outranks a
   plain .btn-rx:hover (2). Repeating the class ties specificity and
   lets source order (this comes later) win, without !important. */
.btn-rx.btn-rx:hover, .btn-rx.btn-rx:focus-visible { transform: translateY(-3px); }
.btn-rx.btn-rx:active { transform: translateY(-1px); }

:focus-visible { outline: 2px solid var(--coral-600); outline-offset: 2px; }

/* ---- site header (every page) ----
   position: sticky only sticks within its containing block, i.e. its
   nearest block-formatting-context ancestor's box — here the header
   template-part wrapper WP core renders (<header class="wp-block-
   template-part">), which is a direct child of .wp-site-blocks (the
   full ~4200px page). .site-header itself is nested one level inside
   that wrapper, so putting position:sticky on .site-header made it
   sticky only within its own 85px-tall parent: it stuck for 85px of
   scroll then scrolled away with that tiny box. Moving the sticky
   declaration onto the wrapper (a direct .wp-site-blocks child, full
   page height) fixes that. .site-header keeps its background/no
   sticky of its own so the two don't double-offset. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header {
  background: var(--pine-800);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom: 1px solid rgba(250, 248, 245, 0.12); /* cream-50 hairline — reads against both pine hero and cream sections the sticky header floats over */
  box-shadow: 0 4px 16px rgba(15, 15, 16, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.site-header .logo img { height: 40px; display: block; }
.site-nav {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-nav a {
  position: relative;
  color: var(--cream-100);
  transition: color .15s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1.5px;
  width: 100%;
  background: var(--coral-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.current::after { transform: scaleX(1); }
.site-nav a:hover { color: var(--coral-300); }
.site-nav a.current { color: var(--coral-300); }
.site-nav a.contact-link { color: var(--coral-300); }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--pine-500);
  color: var(--cream-50);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--coral-300); color: var(--coral-300); }
.nav-toggle:active { transform: scale(0.96); }
@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 84px;
    background: var(--pine-800);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px var(--gutter) 28px;
    border-bottom: 1px solid var(--pine-600);
    gap: 18px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: var(--space-3) 0; } /* WCAG 2.5.8: 24px min tap target; unpadded anchor measured 17.25px clickable height */
}

/* Desktop/tablet WCAG 2.5.8 companion fix (owner-flagged 2026-07-18 QA):
   same 17.25px-tall anchor (11.5px font * 1.5 line-height, no padding) is
   below the 24px minimum here too, but the header is a fixed 84px bar with
   its nav vertically centered — real padding would grow .site-nav's own
   height and, since .site-nav a::after's underline is bottom-offset from
   the anchor's own box, would also drag the hover underline away from the
   text. Neither is worth risking for a pre-existing, non-regression gap.
   Instead: an invisible ::before sized to the 24px minimum, centered on the
   same midpoint as the text via top:50%/translateY(-50%), position:absolute
   so it never enters layout flow — .site-nav's height, .site-header .wrap's
   84px, and the ::after underline position are all completely untouched.
   content:"" with no fill/border paints nothing; a link's pseudo-elements
   are part of its own hit area, so this only enlarges what's clickable/
   tappable, a standard WCAG 2.5.8 technique. Scoped to ≥721px so it doesn't
   interact with the mobile stacked nav's own (already-sufficient) padding
   fix above. */
@media (min-width: 721px) {
  .site-nav a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 24px;
    transform: translateY(-50%);
  }
}

/* ---- hero (home only, full chart) ----
   Sized to content (fixed padding), not to viewport height. A prior
   `min-height: 78svh` + flex-centered `.hero-body` forced the section
   to 78% of viewport height regardless of content and split the
   leftover space evenly above/below — ~322px of empty pine at a
   900px-tall viewport, worse on shorter/wider screens. Fixed padding
   keeps the hero proportioned to its own content at every viewport
   height instead of ballooning on tall monitors. */
.hero {
  background: var(--pine-800);
  color: var(--cream-50);
  position: relative;
  overflow: hidden;
}
.hero .ghost-mark {
  position: absolute;
  right: -7vw;
  bottom: -14vh;
  width: 52vw;
  min-width: 340px;
  opacity: .14;
  pointer-events: none;
}
.hero-body {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 64px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(42px, 6.4vw, 78px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  color: #fff;
}
.hero-subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--pine-200);
  margin: 14px 0 0 0;
}
.hero .chart-rule { margin: 30px 0 0 0; }
.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.hero-foot p {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
  max-width: 34em;
  margin: 0;
  color: var(--cream-100);
}

/* ---- page banner (About / Services / Contact chart header) ---- */
.page-banner {
  background: var(--pine-800);
  color: var(--cream-50);
  padding: 56px 0 56px;
}
.page-banner h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 62px);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  color: #fff;
}
.page-banner p.lede { color: var(--cream-100); margin-top: 18px; }
.page-banner .chart-rule { margin: 30px 0 0 0; }

/* ---- who-we-serve list ----
   Ruled, numbered intake-list treatment (mirrors the course-list
   numeral convention below) instead of a 2-col grid: count-agnostic,
   so an odd total (7) never leaves an orphaned full-width cell. Reads
   like a chart checklist, on-concept for the clinical-chart language. */
.serve-list {
  list-style: none;
  counter-reset: serve;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--cream-200);
}
.serve-list li {
  counter-increment: serve;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--cream-200);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--pine-800);
  transition: background-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.serve-list li::before {
  content: counter(serve, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--coral-600); /* coral-600 on cream-50 = 5.54:1, passes AA */
  flex-shrink: 0;
  width: 24px;
  transition: color var(--dur-mid) var(--ease-out);
}
.serve-list li:hover { background: var(--cream-100); }
/* specificity tie-break vs .reveal-ready .reveal.in-view — see .btn-rx above */
.serve-list.serve-list li:hover { transform: translateX(4px); }
.serve-list li:hover::before { color: var(--coral-700); }
@media (max-width: 640px) {
  .serve-list li { padding: 16px 2px; gap: 14px; font-size: 15px; }
}

/* ---- service / rx rows (cream ground; mirrors the course-row/
   course-list divider + numeral convention below) ---- */
.rx-row {
  display: flex;
  align-items: baseline;
  padding: 26px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--cream-200);
  gap: 22px;
  transition: background-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.rx-row:hover { background: var(--cream-100); }
/* specificity tie-break vs .reveal-ready .reveal.in-view — see .btn-rx above */
.rx-row.rx-row:hover { transform: translateX(4px); }
.rx-row:hover .rx-num { color: var(--coral-700); }
.rx-row:last-of-type { border-bottom: 1.5px solid var(--pine-800); }
.rx-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--coral-600); /* coral-600 on cream-50 = 5.54:1, passes AA */
  white-space: nowrap;
  transition: color .15s;
}
.rx-row strong { font-size: 18px; font-weight: 600; color: var(--pine-800); display: block; }
.rx-row p { margin: 6px 0 0 0; font-size: 14.5px; line-height: 1.6; color: var(--cream-600); }

/* ---- pull quote ---- */
.pull-quote { background: var(--coral-600); color: #fff; } /* coral-500 fails AA at small sizes; coral-600 passes */
.pull-quote .wrap { padding: clamp(52px, 8vw, 80px) var(--gutter); }
.pull-quote p.quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0;
  max-width: 24em;
}

/* ---- training / course rows ---- */
.course-group-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--pine-800);
  margin: 40px 0 4px 0;
  border-bottom: 1.5px solid var(--pine-800);
  padding-bottom: 10px;
}
.course-group-label:first-of-type { margin-top: 0; }
.course-row {
  display: flex;
  align-items: baseline;
  padding: 17px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--cream-200);
  gap: 10px;
  flex-wrap: wrap;
  transition: background-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.course-row span:first-child { font-size: 16px; }
ol.course-list { list-style: none; counter-reset: course; margin: 0; padding: 0; }
ol.course-list li {
  counter-increment: course;
  display: flex;
  align-items: baseline;
  padding: 17px 14px;
  margin: 0 -14px;
  border-bottom: 1px solid var(--cream-200);
  gap: 14px;
  transition: background-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
ol.course-list li::before {
  content: counter(course) ".";
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--coral-600);
  flex-shrink: 0;
  transition: color var(--dur-mid) var(--ease-out);
}
.course-row:hover, ol.course-list li:hover { background: var(--cream-100); }
/* specificity tie-break vs .reveal-ready .reveal.in-view — see .btn-rx above */
.course-row.course-row:hover, ol.course-list.course-list li:hover { transform: translateX(4px); }
ol.course-list li:hover::before { color: var(--coral-700); }

/* ---- training delivery pills ---- */
.delivery-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0 0; padding: 0; list-style: none; }
.delivery-list li {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  border: 1px solid var(--pine-300);
  color: var(--pine-700);
  padding: 8px 16px;
  transition: border-color .15s ease, color .15s ease;
}
.delivery-list li:hover { border-color: var(--coral-500); color: var(--coral-600); }

/* ---- provider (about) ---- */
.provider-grid { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.provider-photo { padding: 0 8px 8px 0; }
.provider-photo .frame {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--pine-700); /* fallback fill if the image fails to load */
  border: 1.5px solid var(--pine-500);
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--coral-500); /* same hard-offset device as the intake pad, repeated for rhythm */
  box-sizing: border-box;
}
.provider-photo .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .provider-grid { grid-template-columns: 1fr; }
  .provider-photo .frame { width: 180px; height: 180px; }
}

/* ---- why-work-with-us word chips (her own words, no invented copy) ---- */
.word-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.word-chips span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: var(--pine-600); /* pine-700 measured 1.21:1 against the pine-800 band, pine-600 improves to 1.53:1 while keeping white text at 8.28:1 */
  border: 1px solid var(--pine-300); /* pine-500 measured 2.2:1 against the pine-800 band, fails WCAG 1.4.11; pine-300 passes at 5.1:1 and is the boundary that carries the 3:1 requirement */
  padding: 12px 20px;
}

/* ---- contact CTA band (home) ---- */
.cta-band { background: var(--pine-800); color: var(--cream-50); }
.cta-band .wrap { padding: clamp(52px, 8vw, 88px) var(--gutter); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p.lede { color: var(--cream-100); margin-left: auto; margin-right: auto; }
.cta-band .btn-rx { margin-top: 30px; }

/* ---- intake / prescription pad form ---- */
.intake-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.intake-grid > div:first-child { min-width: 0; }
.email-link {
  display: inline-block;
  margin: 20px 0 0 0;
  color: var(--pine-700);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1.5px solid var(--cream-300);
}
.email-link:hover { color: var(--coral-600); border-bottom-color: var(--coral-500); }
.rx-pad {
  background: #fff;
  border: 1.5px solid var(--pine-800);
  padding: 34px 36px;
  position: relative;
  box-shadow: 8px 8px 0 var(--coral-500);
  min-width: 0;
  box-sizing: border-box;
}
.rx-pad-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1.5px solid var(--pine-800);
  padding-bottom: 16px;
  margin-bottom: 26px;
}
.rx-pad-head img { height: 36px; }
.rx-watermark {
  position: absolute;
  bottom: 90px;
  right: 26px;
  width: clamp(60px, 8vw, 100px);
  opacity: .08;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 880px) {
  .intake-grid { grid-template-columns: 1fr; }
}

/* ---- Forminator "intake" form, restyled to match the prescription-pad
   design (mirrors clients/Forging Tomorrow/block-build/forging-tomorrow
   assets/css/ft-build.css "Forminator 'Start a project' form" precedent —
   same target classes: .forminator-ui.forminator-custom-form, .forminator-row,
   .forminator-col, .forminator-label, .forminator-input/-textarea/-select,
   .forminator-button-submit).

   Specificity note (2026-07-18): Forminator's own default[design] CSS scopes
   label/input rules as `.forminator-ui.forminator-custom-form[data-design=
   "default"] .forminator-label` etc — that's 4 class-level selectors
   (0,4,0), tying or beating a plain `.rx-pad .forminator-custom-form
   .forminator-label` chain (0,3,0) and winning on source order since
   Forminator's own stylesheet enqueues after ours. Every rule below repeats
   `.rx-pad` and/or `.forminator-ui.forminator-custom-form` to land at
   (0,5,0)+, clearing Forminator's default chain outright — no !important
   needed, same non-!important discipline as the button workaround already
   in place here. */
.rx-pad.rx-pad .forminator-ui.forminator-custom-form { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; font-family: var(--font-sans); }
.rx-pad .forminator-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 22px; }
.rx-pad .forminator-row.forminator-row-single,
.rx-pad .forminator-row.forminator-row-last { grid-template-columns: 1fr; }
.rx-pad .forminator-col { padding: 0; }
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-600); /* cream-500 fails WCAG AA on white rx-pad bg (4.23:1); cream-600 passes at 6.61:1 */
  display: block;
  margin: 0 0 4px 0;
}
.rx-pad .forminator-required { color: var(--coral-600); }
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-input,
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-textarea,
.rx-pad.rx-pad .forminator-ui.forminator-custom-form select.forminator-select {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--pine-800);
  background-color: transparent;
  background-image: linear-gradient(var(--coral-500), var(--coral-500));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px; /* grows on focus — draws in like .chart-rule, left to right */
  border: none;
  border-bottom: 1.5px solid var(--cream-500); /* cream-300 measured 1.71:1 on white, fails WCAG 1.4.11 (3:1 floor); cream-500 passes at 4.23:1 */
  padding: 8px 2px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  transition: border-bottom-color var(--dur-mid) var(--ease-out), background-size var(--dur-mid) var(--ease-out);
}
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-textarea { min-height: 90px; resize: none; }
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-input:focus,
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-textarea:focus,
.rx-pad.rx-pad .forminator-ui.forminator-custom-form select.forminator-select:focus {
  outline: none;
  border-bottom-color: var(--coral-500);
  background-size: 100% 2px;
}
/* ID-SPECIFICITY OVERRIDE (Vera, 2026-07-18, verified live on staging).
   The specificity note above was WRONG about the source of the collision:
   Forminator scopes its real field styling with an ID —
   `.forminator-ui#forminator-module-N.forminator-design--default
   .forminator-input { background:#ededed }` — an ID (1,x,x) beats ANY number
   of the class selectors above, and N is form-specific (differs per site/env)
   so it can't be matched from committed CSS. That's why inputs rendered as
   Forminator's default grey filled boxes despite the transparent-underline
   rules above. Overriding only the handful of properties Forminator sets via
   that ID rule is the one genuinely-unavoidable !important case here (same
   class as the documented select2 width exception). background-COLOR only —
   leaves the background-image coral underline-grow above intact. */
.rx-pad .forminator-ui .forminator-input,
.rx-pad .forminator-ui .forminator-textarea,
.rx-pad .forminator-ui select.forminator-select,
.rx-pad .forminator-ui .select2-container .select2-selection--single,
.rx-pad .forminator-ui .select2-container .select2-selection--multiple {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--cream-500) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.rx-pad .forminator-ui .forminator-input:focus,
.rx-pad .forminator-ui .forminator-textarea:focus,
.rx-pad .forminator-ui select.forminator-select:focus,
.rx-pad .forminator-ui .select2-container--open .select2-selection,
.rx-pad .forminator-ui .select2-container--focus .select2-selection {
  border-bottom-color: var(--coral-500) !important;
}
/* Same ID-specificity override, extended to the row/column layout (Brent,
   2026-07-18, verified live on prod). Forminator's own per-form generated
   stylesheet ID-scopes `.forminator-row` to `display: flex` and
   `.forminator-col` to `flex: 0 1 auto`, which sizes each column to its
   content instead of filling its track — on prod this collapsed the input
   to ~147px (38% of the pad's content width) instead of stretching the full
   underline across the pad's content width. Staging's per-form stylesheet
   happens to differ and doesn't hit this, but the layout can't depend on
   which generated stylesheet a given environment has, so it's forced here
   deterministically. Re-asserts the grid layout already established above
   (958-960) under !important rather than dropping it. Correction (Vera,
   staging, 2026-07-18): this form's rows render as plain `.forminator-row`
   with no `-single` class (only the last row carries `-last`), so the
   `-single`/`-last` override alone only fixed that one row — the other 5
   single fields still landed in one half of the 1fr/1fr track. Fix is
   `grid-column: 1 / -1` on `.forminator-col`, forcing every column to span
   the full row regardless of the row's track count; a genuine two-field row
   would still work, it'd just span-and-stack (fine at this pad width).
   Confirmed live on staging: all 5 single fields now render at 81% (full
   pad content width), matching the earlier prod measurement. */
.rx-pad .forminator-ui .forminator-row { display: grid !important; grid-template-columns: 1fr 1fr !important; margin: 0 0 22px !important; }
.rx-pad .forminator-ui .forminator-row.forminator-row-single,
.rx-pad .forminator-ui .forminator-row.forminator-row-last { grid-template-columns: 1fr !important; }
.rx-pad .forminator-ui .forminator-col { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; grid-column: 1 / -1 !important; }
/* Same ID-specificity override, extended to the label + submit button + the
   validation banner (Iris QA, 2026-07-18): Forminator's per-form generated
   stylesheet (uploads/forminator/<id>_.../css/style-<id>.css) also ID-scopes
   the label font (was rendering Poppins, not mono) and the submit button
   (was Forminator's default blue #097BAA, not coral). Same reason the class
   rules above couldn't win. Button uses coral-600 (white text passes WCAG AA
   at 5.87:1; coral-500 fails at 4.28:1). The error banner's native inset
   left-border stripe (off-brand red, and the forbidden accent-stripe pattern)
   is replaced with a clean coral outline on cream. */
.rx-pad .forminator-ui .forminator-label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--cream-600) !important;
}
.rx-pad .forminator-ui .forminator-button-submit {
  background-color: var(--coral-600) !important;
  color: #fff !important;
  border-radius: 0 !important;
}
.rx-pad .forminator-ui .forminator-button-submit:hover,
.rx-pad .forminator-ui .forminator-button-submit:focus-visible {
  background-color: var(--coral-700) !important;
}
.rx-pad .forminator-response-message.forminator-error {
  box-shadow: none !important;
  border: 1.5px solid var(--coral-600) !important;
  background-color: var(--cream-50) !important;
  color: var(--pine-800) !important;
}
.rx-pad .forminator-custom-form .forminator-row-last { display: flex; justify-content: flex-end; margin-top: 8px; }
/* .forminator-button-submit.forminator-button-submit: specificity workaround —
   Forminator's own `.forminator-ui.forminator-custom-form[data-design="default"]
   .forminator-button{border-radius:2px}` is (0,4,0), the SAME count as the
   original single-repeat override here, which ties rather than wins and
   falls back to source order — unsafe if Forminator's stylesheet ever
   enqueues after ours. Doubling `.rx-pad` + adding `.forminator-ui` lands
   this at (0,6,0), a real win instead of a tie, still no !important;
   verified against a worst-case simulated Forminator default in
   _qa-forminator-verify.html (deleted post-verification). */
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-button-submit.forminator-button-submit {
  display: inline-block;
  background: var(--coral-600); /* coral-500 fails WCAG AA (4.28:1) for white text; coral-600 passes at 5.87:1 */
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 30px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color .15s ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-button-submit.forminator-button-submit:hover,
.rx-pad.rx-pad .forminator-ui.forminator-custom-form .forminator-button-submit.forminator-button-submit:focus-visible {
  background: var(--coral-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}
@media (max-width: 880px) {
  .rx-pad .forminator-row { grid-template-columns: 1fr; }
  .rx-pad .forminator-ui .forminator-row { grid-template-columns: 1fr !important; }
}

/* ---- Forminator "Seeking" field renders as a Select2 widget, not a plain
   <select> — the visible control is `.select2-container` / `.select2-
   selection`, generated client-side, so it needs its own restyle to match
   the underline-input look above. Select2 appends its open dropdown
   (`.select2-dropdown` + `.select2-results`) to <body>, outside `.rx-pad`'s
   DOM subtree, so plain descendant scoping can't reach it; `:has()` scopes
   the dropdown rules to "a page that contains the rx-pad form" without a
   global, unscoped `.select2-dropdown` rule bleeding into any other
   Select2 instance the site might add later. */
.rx-pad .select2-container {
  width: 100% !important; /* Select2 sets this via inline style; documented,
    unavoidable exception to the no-!important rule — there is no selector
    that beats an inline style short of !important. */
  font-family: var(--font-sans);
  font-size: 15px;
}
.rx-pad .select2-container .select2-selection--single,
.rx-pad .select2-container .select2-selection--multiple {
  background-color: transparent;
  background-image: linear-gradient(var(--coral-500), var(--coral-500));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  border: none;
  border-bottom: 1.5px solid var(--cream-500);
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 8px 22px 8px 2px;
  transition: border-bottom-color var(--dur-mid) var(--ease-out), background-size var(--dur-mid) var(--ease-out);
}
.rx-pad .select2-container--open .select2-selection--single,
.rx-pad .select2-container--open .select2-selection--multiple,
.rx-pad .select2-container--focus .select2-selection--single,
.rx-pad .select2-container--focus .select2-selection--multiple {
  border-bottom-color: var(--coral-500);
  background-size: 100% 2px;
}
.rx-pad .select2-selection__rendered {
  color: var(--pine-800);
  line-height: 1.4;
  padding: 0;
}
.rx-pad .select2-selection__placeholder { color: var(--cream-500); }
.rx-pad .select2-selection__arrow { height: 100%; top: 0; right: 0; }
.rx-pad .select2-selection__arrow b {
  border-color: var(--pine-700) transparent transparent transparent;
}
.rx-pad .select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--pine-700) transparent;
}
.rx-pad .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rx-pad .select2-selection__choice {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pine-800);
  background: var(--pine-50);
  border: 1px solid var(--pine-200);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rx-pad .select2-selection__choice__remove {
  color: var(--coral-600);
  border: none;
  background: none;
  margin: 0;
  font-size: 13px;
}
.rx-pad .select2-selection__choice__remove:hover { color: var(--coral-700); }
.rx-pad .select2-search--inline .select2-search__field {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--pine-800);
  border: none;
  margin: 0;
  padding: 2px 0;
}
body:has(.rx-pad) .select2-dropdown {
  border: 1.5px solid var(--pine-800);
  border-radius: 0;
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: 15px;
  overflow: hidden;
}
body:has(.rx-pad) .select2-search--dropdown { padding: 8px; background: var(--cream-50); }
body:has(.rx-pad) .select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--cream-300);
  border-radius: 0;
  padding: 7px 10px;
  font-family: var(--font-sans);
  font-size: 14px;
}
body:has(.rx-pad) .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--coral-500);
}
body:has(.rx-pad) .select2-results__option {
  color: var(--pine-800);
  padding: 9px 14px;
}
body:has(.rx-pad) .select2-results__option--highlighted[aria-selected] {
  background: var(--coral-500);
  color: #fff;
}
body:has(.rx-pad) .select2-results__option[aria-selected="true"] {
  background: var(--pine-50);
  color: var(--pine-800);
}

/* ---- footer ---- */
.site-footer { background: var(--pine-900); color: var(--pine-300); }
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--gutter);
  flex-wrap: wrap;
  gap: 14px;
}
.site-footer img { height: 30px; }
.site-footer .tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--coral-300);
}
.site-footer .copyright { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .02em; }

/* ---- warm closing line (hero-weight statement); ground-aware like
   .chart-rule and .margin-note .section-name above ---- */
.invite-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 25px);
  color: var(--pine-800);
  margin: 34px 0 0 0;
}
[data-band="pine"] .invite-line { color: #fff; }

.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;
}

/* ---- reduced motion: phase-2 micro-interactions ----
   Removes the literal movement/growth added in this pass — button
   lift/press, nav-toggle press, row indent, the underline-grow on
   nav links and intake fields, and (most importantly) the one
   continuous animation on the site, the rx-mark pulse. Color,
   background-tint, and shadow feedback still apply instantly; only
   the animated motion is gated, same contract as .chart-rule and
   .reveal above. */
@media (prefers-reduced-motion: reduce) {
  /* matches the doubled-class specificity of the rules being cancelled
     (see the .btn-rx / .rx-row / course-row comments above) */
  .btn-rx.btn-rx:hover, .btn-rx.btn-rx:focus-visible, .btn-rx.btn-rx:active,
  .nav-toggle:active,
  .rx-row.rx-row:hover, .course-row.course-row:hover, ol.course-list.course-list li:hover {
    transform: none;
  }
  .site-nav a::after,
  .rx-pad input, .rx-pad textarea, .rx-pad select,
  .rx-pad .select2-selection--single, .rx-pad .select2-selection--multiple {
    transition: none;
  }
  .margin-note .rx-mark.in-view { animation: none; }
}


/* ============================================================
   7. WP-core specificity note (see memory/wp-block-theme-css-specificity.md)
   FT's build hit repeated ties between its CSS and WP's global-styles/
   block-library output (.wrap vs .has-global-padding, etc.) — but those
   collisions require the SAME element to carry both classes, which only
   happens on blocks that opt into WP's layout supports (group/columns/
   navigation). Every HRX section above is raw markup inside a single
   core/html block per template (see templates/*.html) — WP's block-
   support system never touches core/html content, so it never adds
   has-global-padding/is-layout-constrained/etc. to any .wrap, .sect, or
   other element here. No preemptive double-class guard should be needed.
   If staging verification finds a real, rendered collision anyway,
   apply the .selector.selector fix documented in that memory file at
   the specific rule that's losing — don't blanket-apply it here first.
   ============================================================ */

/* ============================================================
   8. Top-level template-part gap — WP-core block-gap fix
   (owner-flagged 2026-07-18 on staging: cream bar between header/hero
   and above the footer, on every page). Mirrors the identical fix in
   clients/Forging Tomorrow/block-build/forging-tomorrow/assets/css/
   ft-build.css ("Header flush against the hero" rule).

   WordPress core's global styles put a block-gap margin on every
   direct child of .wp-site-blocks: :where(.wp-site-blocks) > * {
   margin-block-start: 24px }. Here those direct children are exactly
   <header> (from the header template-part), <main id="main"> (the raw
   markup inside the page's single wp:html block), and <footer> (from
   the footer template-part) — so core was inserting a 24px gap above
   <main> and above <footer>, and the transparent gap let the cream
   body background show through as a bar between the otherwise-flush
   pine header/hero/footer. The approved static build has zero gap
   there; this restores that.

   :where() carries zero specificity, so a plain class selector beats
   it outright — no !important needed (confirmed nothing else in this
   file sets margin on header/#main/footer/.site-header/.site-footer).
   Scoped to .wp-site-blocks' DIRECT children only: it does not reach
   the <section> elements nested inside <main id="main">, so intra-page
   rhythm (hero → Experience → Why HousingRx → ... ) is untouched —
   those sections were never subject to this rule in the first place,
   see the section 7 note above (core/html content carries none of the
   block-support layout classes this WP behavior keys off elsewhere). */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }