/* ============================================================
   TruPoint Consulting — Independent HOA Consulting, Twin Cities
   Shared stylesheet for all pages.
   Palette (web-1.23): two brand anchors, navy #061A2E and amber #F5C518.
   Everything else in the brand families is a derived tint or shade of one of
   those two -- see the token block.  Amber reads at only 1.6:1 against white,
   so on light fields it never carries type or icons; it appears there only as
   a solid fill behind navy text (with a 1px navy border) or as a short rule,
   underline, or divider.  On navy it may be text, icon, rule, or fill.
   Display font: Montserrat (self-hosted variable woff2).
   Body font: Inter (self-hosted variable woff2), system fallback.
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
/* 2026-08-02 (web-1.23): two brand anchors, everything else derived.  Every
   navy on the site sits at hue 210 and every amber at hue 46-47, so each
   derived value below is a lightness/saturation move on one of the two
   anchors -- no third brand hue.  The legacy names further down are aliases
   into this system, kept so the several hundred var() references in this file
   keep resolving; new rules should reach for --tp-*.
   The old --accent-dark #866c10 (dark gold that carried type on light fields)
   is RETIRED: under the contrast rule, type on light fields is navy, and its
   former uses were re-pointed rule by rule. */
:root {
  /* Brand anchors */
  --tp-navy:  #061a2e;    /* primary dark: backgrounds, deep fields   hsl(210 77% 10%) */
  --tp-amber: #F5C518;    /* accent: fills and rules                  hsl(47 92% 53%)  */
  /* RGB triplets for the alpha washes (scrims, shadows, fades) */
  --tp-navy-rgb: 6, 26, 46;
  --tp-amber-rgb: 245, 197, 24;
  --tp-shadow-rgb: 10, 33, 56;   /* box-shadow tint: the anchor nudged +2L, same hue */
  --tp-shade-rgb: 6, 18, 34;     /* text-shadow tint over photos: the anchor -2L */
  /* Navy scale, dark to light.  -raised is the working navy for headings and
     panel fields (+5L on the anchor); the -t tints carry type on navy bands. */
  --tp-navy-raised:   #0a2540;   /* hsl(210 73% 15%) */
  --tp-navy-line:     #23486e;   /* thin drawing lines on navy */
  --tp-navy-ink:      #1a2b3c;   /* body text on paper */
  --tp-navy-ink-soft: #46586a;   /* secondary text on paper */
  --tp-navy-t40: #7f97ab;   /* faintest labels on navy */
  --tp-navy-t50: #93a9bc;   /* footer legal */
  --tp-navy-t60: #a9bfd2;   /* thin rules on paper, muted labels on navy */
  --tp-navy-t70: #dbe5ee;   /* cred-strip chips */
  --tp-navy-t75: #dde3ee;   /* hero subline */
  --tp-navy-t80: #cfdae4;   /* default body text on navy bands */
  --tp-navy-t85: #e8eef4;   /* brightest body text on navy bands */
  /* Amber scale */
  --tp-amber-hover: #ffd53d;   /* lighter amber for hover fills */
  --tp-amber-deep:  #d2a814;   /* pressed / active amber fill */
  --tp-amber-soft:  #ecd88f;   /* light amber type on navy bands ONLY */
  /* Neutrals (unchanged in the web-1.23 token pass) */
  --paper: #f7f4ec;        /* warm off-white paper */
  --paper-2: #efeadd;
  --line: #d9d2c2;         /* thin rules on paper */
  --white: #ffffff;
  /* Legacy aliases into the system above */
  --navy: var(--tp-navy-raised);
  --navy-deep: var(--tp-navy);
  --navy-line: var(--tp-navy-line);
  --ink: var(--tp-navy-ink);
  --ink-soft: var(--tp-navy-ink-soft);
  --line-blue: var(--tp-navy-t60);
  --accent: var(--tp-amber);
  --gold-soft: var(--tp-amber-soft);
  --font-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --wrap: 1120px;
  /* Radius scale (web-1.23, Apple-style).  --radius and --radius-lg are legacy
     aliases: one drives the ~16 button/input rules and one the ~23 card/panel
     rules, so the whole site rounds together.  Pills (999px) and circles (50%)
     stay fully round -- that is already the Apple treatment for chips. */
  --r-sm:  8px;    /* chips, small thumbnails, tooltips, focus rings */
  --r-md:  12px;   /* buttons, form inputs, select fields */
  --r-lg:  18px;   /* cards, panels, content boxes, the booking embed */
  --r-xl:  24px;   /* large hero panels */
  --r-img: 16px;   /* images, photo and drawing containers */
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
/* web-1.23 contrast rule: type on light fields is navy, never amber.  Links
   keep their underline for affordance; hover paints the underline amber, the
   one form amber may take next to type on a light field. */
a { color: var(--navy); text-underline-offset: 2px; }
a:hover { color: var(--tp-navy); text-decoration-color: var(--tp-amber); text-decoration-thickness: 2px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 0.5em;
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
h3 { font-size: clamp(1.15rem, 2.3vw, 1.4rem); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; }
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* On the dark bands a navy ring would vanish, so every dark context flips the
   ring to amber (10.7:1 on the deep navy). */
.blueprint :focus-visible, .site-footer :focus-visible, .utility-bar :focus-visible,
.nav-quick :focus-visible, .hero :focus-visible, .lead-capture :focus-visible,
.stats-band :focus-visible, .kc-explorer-callout :focus-visible,
.contrast-us :focus-visible, .wt-figure :focus-visible, .pledge-oath :focus-visible,
.guide-head :focus-visible {
  outline-color: var(--tp-amber);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.6em 1.2em;
  border-radius: var(--r-sm);
  font-weight: 700;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: var(--white);
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 3.5rem 0; }
.section-tight { padding: 2.5rem 0; }
.center { text-align: center; }

/* Kicker: small uppercase label with measurement-style rule */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
/* The tick rules stay amber in both worlds: a short accent rule is amber's
   allowed form on a light field.  Pinned rather than currentColor so the label
   color never drags the ticks with it. */
.kicker::before, .kicker::after {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--tp-amber);
}
/* On navy bands the label goes light amber.  This rule replaces the
   style="color:#ecd88f;" attribute the 29 page-hero kickers used to carry. */
.blueprint .kicker { color: var(--gold-soft); }
.kicker::after { display: none; }
.center .kicker::after { display: inline-block; }

/* Measurement-style divider: thin rule with end ticks */
.measure-rule {
  border: 0;
  height: 1px;
  background: var(--line-blue);
  position: relative;
  margin: 2.5rem auto;
  max-width: var(--wrap);
}
.measure-rule::before, .measure-rule::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--line-blue);
}
.measure-rule::before { left: 0; }
.measure-rule::after { right: 0; }

/* Blueprint grid texture for navy bands */
.blueprint {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  color: var(--tp-navy-t85);
}
.blueprint h1, .blueprint h2, .blueprint h3 { color: var(--white); }
.blueprint a { color: var(--gold-soft); }
.blueprint a:hover { color: var(--white); }
/* 2026-08-01 contrast fix.  `.blueprint a` (specificity 0,1,1) was out-ranking
   `.btn-primary` (0,1,0), so every gold CTA sitting in a navy band painted its
   label in --gold-soft on gold, and `.blueprint a:hover` (0,2,1) beat
   `.btn-primary:hover` (0,2,0) and painted it pure white on amber.  That is 43
   buttons across 43 pages.  Navy on amber is 9.53:1. */
.blueprint a.btn-primary,
.blueprint a.btn-primary:hover,
.blueprint a.btn-primary:focus,
.blueprint a.btn-primary:focus-visible { color: var(--navy); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.75em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, filter 0.15s;
}
/* Amber carries the CTA, navy carries the words: raw amber + white text would
   sit at 1.6:1, navy on amber is 9.5:1.  web-1.23: flat fill (the old gradient
   read plastic at this saturation, same finding as the hero CTAs) and the
   standard light-field treatment -- amber fill, navy text, 1px navy border.
   The border slot in .btn is 2px, so 1px of it moves into padding to keep the
   outer geometry identical to the other variants. */
.btn-primary {
  background: var(--tp-amber);
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: calc(0.75em + 1px) calc(1.5em + 1px);
}
.btn-primary:hover { background: var(--tp-amber-hover); color: var(--navy); border-color: var(--navy); }
.btn-primary.btn-sm { padding: calc(0.45em + 1px) calc(1em + 1px); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--navy); }
.btn-sm { font-size: 0.9rem; padding: 0.45em 1em; }

/* ============================================================
   HEADER: sticky utility bar + main nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 var(--line);
}
.site-header.scrolled { box-shadow: 0 3px 14px rgba(var(--tp-shadow-rgb), 0.25); }

/* Utility bar */
.utility-bar {
  background: var(--navy-deep);
  color: var(--white);
  border-bottom: 1px solid var(--navy-line);
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  flex-wrap: wrap;
}
.phone-link {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.phone-link:hover { color: var(--gold-soft); }
.phone-link svg { flex: none; }
/* 2026-08-01: the top utility banner was removed sitewide.  Its two CTAs are in
   the hero, its SF 1750 and Learning links were already in the main menu, and
   its audience buttons became the hero panel plus the mid-width .nav-quick
   strip.  These rules stay only for the phone, which moved into the nav row. */
.nav-phone {
  margin-left: auto;
  padding-left: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--tp-navy); text-decoration: underline; text-decoration-color: var(--tp-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 1199.98px) { .nav-phone { display: none; } }
.utility-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* 2026-07-31 (web-1.17): the bar used to be seven outlined boxes in a row, which
   made the top of every page read as a wall of buttons before any content.
   The five audience links are now plain text.  Only the two actual actions,
   Rapid RFP and Book Free Consultation, still look like buttons.
   Child order is identical on all 50 pages (Boards / Managers / Contractors /
   SF 1750 / Learning / Try Rapid RFP! / Book Free Consultation), verified, so
   :nth-child is safe here and this needs no HTML edit. */
.utility-actions > .btn:nth-child(-n+5) {
  border-color: transparent;
  background: transparent;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.45em 0.35em;
  color: var(--tp-navy-t80);
}
.utility-actions > .btn:nth-child(-n+5):hover {
  background: transparent;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.utility-actions > .btn:nth-child(-n+5)[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Main nav */
.main-nav { background: var(--white); border-bottom: 2px solid var(--navy); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.14rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  /* 2026-07-26 (web-1.11): the "HOA Construction & Project Consulting" line
     under the wordmark was removed sitewide.  The lockup is a single line of
     type against the 40px mark now, so the tight 1.1 leading that existed to
     close up the two-line stack is opened slightly and the vertical padding is
     evened out.  Font size is deliberately unchanged -- the nav fit tiers at
     1200-1379px are tuned against this wordmark width. */
  line-height: 1.15;
  padding: 0.5rem 0;
}
.brand img { flex: none; width: 46px; height: auto; }
.brand:hover { color: var(--navy); }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35em 0.9em;
  cursor: pointer;
}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}
.nav-menu > li { position: relative; }
/* The four utility-bar buttons are mirrored into the menu sheet as plain rows.
   They exist only for the mobile sheet, so they stay hidden on the tab row. */
.nav-utility-mirror { display: none; }
.nav-menu a, .dropdown-toggle {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: none;
  white-space: nowrap;
  color: var(--navy);
  text-decoration: none;
  padding: 1.05rem 0.55rem;
  background: none;
  border: 0;
  cursor: pointer;
}
/* Hover keeps the type navy (amber never carries nav type on the white row)
   and marks the tab the same way aria-current does, with the amber bar --
   an underline is amber's allowed form here. */
.nav-menu a:hover, .dropdown-toggle:hover { color: var(--navy); background: var(--paper); }
.nav-menu a[aria-current="page"] {
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--accent);
}
/* Last top-level item (Contact) renders as a solid block button — logo left,
   spaced links across, filled CTA at the right. CSS-only, so all 14 pages
   pick it up without markup changes. */
/* web-1.23: the Contact button now wears the standard light-field treatment,
   amber fill + navy text + 1px navy border.  Hover inverts to the old navy
   fill.  On /contact itself the fill steps down to the deep amber (6.9:1
   under navy text) so the pressed state reads without leaving the family. */
.nav-menu > li:last-child > a {
  background: var(--tp-amber);
  color: var(--navy);
  border: 1px solid var(--navy);
  padding: 0.8em 1.5em;
  margin-left: 0.6rem;
  border-radius: var(--radius);
}
.nav-menu > li:last-child > a:hover {
  background: var(--navy);
  color: var(--white);
}
.nav-menu > li:last-child > a[aria-current="page"] {
  background: var(--tp-amber-deep);
  color: var(--navy);
  box-shadow: none;
}
.dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.3em;
  margin-right: -0.1em;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 270px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: 0 10px 24px rgba(var(--tp-shadow-rgb), 0.18);
  /* web-1.23: rounded at the bottom only -- the panel hangs off the nav row,
     so the top edge stays attached.  overflow keeps the hover fill inside the
     rounded corners; .dropdown-wide re-opens overflow-y for its own scroll. */
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  z-index: 50;
}
.has-dropdown.open .dropdown { display: block; }
.dropdown a {
  font-size: 0.98rem;
  padding: 0.5rem 1.1rem;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  font-weight: 500;
}
.dropdown a:hover { background: var(--paper); }
.dropdown .dropdown-all {
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.3rem;
}

/* The ten-tab row needs more room than the content wrap allows, so the nav row
   alone runs wider. */
.main-nav .wrap { max-width: 1380px; }

/* ---------- Desktop tab row (2026-07-24 pass: nav type raised to 15px) ----------
   Nine top-level items at 15px need room, so the horizontal row runs from 1200px
   up and the hamburger takes over below that.  The brand wordmark shows only at
   the full 1380px wrap; from 1200 to 1379 the logo mark stands alone so the 15px
   tabs keep comfortable spacing.  The logo mark itself is never shrunk. */
@media (min-width: 1200px) {
  .utility-actions { gap: 0.35rem; }
  .utility-actions .btn, .utility-actions .btn-sm {
    font-size: 0.82rem;
    padding: 0.42em 0.7em;
    letter-spacing: 0.04em;
  }
  .nav-menu { gap: 0.1rem; }
  .nav-menu > li > a, .nav-menu > li > .dropdown-toggle {
    font-size: 0.9375rem;
    letter-spacing: 0.008em;
    padding: 1.05rem 0.28rem;
  }
  .nav-menu > li:last-child > a { padding: 0.76em 0.8em; margin-left: 0.28rem; }
  .brand span { display: none; }
  .brand { gap: 0; font-size: 0.9rem; }
  .brand img { width: 38px; }
  .has-dropdown > a::after { margin-left: 0.08em; border-width: 4px; }
  .main-nav .wrap { padding-left: 0.5rem; padding-right: 0.5rem; }
  .phone-link { font-size: 1rem; }
}

/* At the full 1380px wrap there is room for the wordmark and a little more air
   between tabs. */
@media (min-width: 1380px) {
  .nav-menu { gap: 0.1rem; }
  .nav-menu > li > a { letter-spacing: 0.008em; padding: 1.05rem 0.32rem; }
  .nav-menu > li:last-child > a { padding: 0.78em 0.9em; margin-left: 0.32rem; }
  .brand span { display: block; }
  .brand { gap: 0.45rem; font-size: 0.92rem; }
}

/* ============================================================
   COMPACT NAV (web-1.8): one markup block, two jobs.
   From 768 to 1199.98 it is the single-row tablet nav with hover/tap
   dropdowns.  Below 768 the same block becomes the mobile sheet, with
   the two CTAs on top and the groups as one-at-a-time accordions.
   Above 1200 it is hidden and the original two-row header runs.
   ============================================================ */
.nav-compact { display: none; }
.nav-groups {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}
.nav-groups > li { position: relative; }
.sheet-ctas { display: none; }
.compact-ctas { display: none; }
/* Tablet-only phone link.  The mid row drops the utility bar, which is where
   the number normally lives, so it comes back here as an icon. */
.compact-phone { display: none; }

/* ---------- MID: single row, 768 to 1199.98 ---------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Both original rows collapse into this one. */
  .utility-bar { display: none; }
  .nav-menu { display: none; }
  .nav-toggle { display: none; }
  .main-nav .wrap { max-width: 1200px; padding-left: 0.75rem; padding-right: 0.75rem; }
  .nav-inner { gap: 0.5rem; }
  .brand span { display: none; }
  .brand { gap: 0; }
  .brand img { width: 38px; }

  .nav-compact {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
  }
  .compact-ctas { display: flex; align-items: center; gap: 0.35rem; flex: none; }
  .compact-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    color: var(--navy);
    flex: none;
  }
  .compact-phone:hover { color: var(--tp-navy); }
  .compact-phone svg { display: block; }
  .nav-compact .group-toggle {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 1.05rem 0.38rem;
  }
  .compact-ctas .btn {
    font-size: 0.72rem;
    padding: 0.45em 0.65em;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  /* Dropdowns open on hover, on tap (the .open class from script.js), and on
     keyboard focus. */
  .nav-compact .nav-group:hover > .dropdown,
  .nav-compact .nav-group:focus-within > .dropdown,
  .nav-compact .nav-group.open > .dropdown { display: block; }
  .nav-compact .dropdown { min-width: 250px; }
  /* Keep the right-hand panels inside the viewport. */
  .nav-groups > li:nth-last-child(-n+2) .dropdown { left: auto; right: 0; }
  .group-panel-scroll { max-height: 72vh; overflow-y: auto; }
}

/* Tightest mid tier: at the low end the five groups plus two buttons need
   smaller type before anything is allowed to clip. */
@media (min-width: 768px) and (max-width: 949.98px) {
  .nav-compact { gap: 0.25rem; }
  .nav-groups { gap: 0; }
  .nav-compact .group-toggle {
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    padding: 1.05rem 0.26rem;
  }
  .compact-ctas { gap: 0.25rem; }
  .compact-ctas .btn {
    font-size: 0.66rem;
    padding: 0.42em 0.5em;
    letter-spacing: 0.01em;
  }
  .main-nav .wrap { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ---------- MOBILE: hamburger sheet, below 768 ---------- */
@media (max-width: 767.98px) {
  .nav-toggle { display: inline-block; }
  .nav-menu { display: none; }
  /* The dark bar keeps the phone number to itself. */
  .utility-actions { display: none; }
  .utility-inner { justify-content: flex-start; }

  .nav-compact {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-bottom: 2px solid var(--navy);
    box-shadow: 0 12px 24px rgba(var(--tp-shadow-rgb), 0.2);
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    z-index: 60;
  }
  .nav-compact.open { display: flex; }

  /* Two full-width CTAs ride at the top of the sheet. */
  .sheet-ctas {
    display: grid;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
  }
  .sheet-ctas .btn {
    width: 100%;
    text-align: center;
    padding: 0.85em 1em;
    font-size: 1rem;
  }
  .compact-ctas { display: none; }

  .nav-groups { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-compact .group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    padding: 1rem 1.15rem;
    border-top: 1px solid var(--line);
  }
  .nav-compact .has-dropdown.open > .group-toggle::after {
    transform: translateY(2px) rotate(180deg);
  }
  .nav-compact .dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-left: 3px solid var(--accent);
    /* The base .dropdown rounds its bottom corners; inside the sheet the panel
       is a flush accordion strip, so the rounding comes back off. */
    border-radius: 0;
    margin: 0 0 0.5rem 1.15rem;
    padding: 0;
  }
  .nav-compact .dropdown a {
    padding: 0.8rem 1.1rem;
    font-size: 1rem;
  }
  .nav-compact .dropdown-kicker { padding-left: 1.1rem; }
}

/* The floating Site Guide launcher would sit on top of the open sheet. */
body.nav-open .guide-launcher { display: none; }

@media (max-width: 480px) {
  .brand { font-size: 0.92rem; gap: 0.5rem; }
  .brand img { width: 36px; }
}
/* Very narrow phones (360px and under): the wordmark yields to the mark alone
   so the brand and the Menu button never push the row wider than the screen. */
@media (max-width: 380px) {
  .brand span { display: none; }
  .brand { gap: 0; }
  .nav-toggle { font-size: 0.9rem; padding: 0.32em 0.7em; }
}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(320px, 46vh, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 2026-08-01: the deeper navy, same token the footer uses.  Every element on
     the field gains: white headline 11.68 -> 13.49, subline 9.06 -> 10.47. */
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
}
/* 2026-07-31 (web-1.17): the homepage no longer renders .hero-slides or
   .hero-scrim.  Both blocks are KEPT ON PURPOSE so a hero photo can be put
   back by restoring markup alone, with no CSS work.  Do not delete as dead
   rules.  Any replacement photo needs its quiet plane in the LEFT 60 percent,
   because the scrim below is a horizontal gradient. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }
/* 2026-07-26 (web-1.11): the hero copy used to sit on solid navy plates, one
   per line, with a white logo tile beside the headline.  Plates and tile are
   gone; the type sits straight on the photo and this single left-to-right
   scrim does all the contrast work.  Stops were tuned by compositing the scrim
   over all six rotating slides and measuring the brightest pixel under every
   rendered line of type.  Worst case across all six (hero-siding.jpg and
   hero-storm.jpg are the busiest): H1 9.9:1, body copy 7.8:1, gold eyebrow
   5.5:1, gold tagline 5.3:1 -- all clear WCAG AA 4.5, even though the H1 and
   the tagline only need 3:1 at their size.  The plateau holds to 46% because
   the longest H1 line ends at 54.5% of the hero and the tagline at 45.7%.
   From about 73% rightward the photo is more than half visible, so the right
   side of the band still reads as a photograph. */
/* 2026-08-01 (web-1.20) RETUNED for hero-project5.jpg, and the change that
   matters is the RIGHT END.  The old stops faded to 0 at 93%, which was correct
   when the right half of the band was empty.  The .hero-aud panel moved into
   that half in web-1.18, so a bare photograph there put white links on a lit
   building.  The wash now HOLDS AT 58%.  Colour also moved from the old
   rgba(17,28,49) to --navy-deep rgba(6,26,46), matching the band behind it.
   Scored against the composited photo at true render size, worst line is the
   panel heading at 5.08:1; headline 13.66, subline 8.84, note 7.08. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--tp-navy-rgb), 0.94) 0%,
    rgba(var(--tp-navy-rgb), 0.90) 46%,
    rgba(var(--tp-navy-rgb), 0.78) 62%,
    rgba(var(--tp-navy-rgb), 0.64) 79%,
    rgba(var(--tp-navy-rgb), 0.58) 100%);
}
/* .hero is display:flex, so its .wrap is a flex item and shrinks to fit its
   content.  Once .hero-content gained a 720px cap that pulled the whole column
   inward and left the hero text starting ~180px right of every other section
   on the page.  width:100% keeps the wrap on the page grid. */
.hero > .wrap {
  width: 100%;
  /* 2026-08-01 (Option A): copy column left, audience panel right.  The panel
     also fills the right half of the band, which has been empty since the
     rotating photos came out. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: center;
}
/* Audience router.  Replaces the Boards / Managers / Contractors buttons that
   lived in the top banner before it was removed. */
/* 2026-08-01 (web-1.21): the panel now carries a real surface.  Its old
   rgba(255,255,255,.04) fill was designed against a flat navy field and does
   nothing over a photograph, so the building's corner downspout ran straight
   down the left column of every row.  Cropping cannot solve that: the only
   quiet stretch in the frame is 181px of brick between the glass wing and the
   downspout, and the panel needs 300px.  A surface solves it for THIS photo and
   for any photo that ever follows.
   The frost is the good version, a flat block is the fallback.  Both are
   listed, so a browser without backdrop-filter still gets an opaque-enough
   panel rather than the 4% fill. */
.hero-aud {
  position: relative;
  z-index: 2;
  border: 2px solid rgba(var(--tp-amber-rgb), 0.55);
  border-radius: var(--r-xl);
  background: rgba(var(--tp-navy-rgb), 0.72);
  padding: 1.4rem 1.3rem;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-aud {
    background: rgba(var(--tp-navy-rgb), 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(0.85);
    backdrop-filter: blur(10px) saturate(0.85);
  }
}
.hero-aud h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0 0 0.9rem;
}
.hero-aud a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0;
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-aud a:first-of-type { border-top: 0; }
.hero-aud a:hover { color: var(--accent); }
.hero-aud a::after {
  /* Was a mojibake on disk: the raw bytes were U+0083 (an unprintable C1
     control character, which is why it drew as a box) followed by a literal
     capital A.  It is a CSS escape now, the same convention the breadcrumb
     separator uses, so nothing depends on the file's encoding. */
  content: "\2192";  /* right arrow */
  color: var(--accent);
  font-size: 1.15em;
  line-height: 1;
  opacity: 0.85;
}
.hero-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 4.5rem 0;
  /* Was 62% of the 1120px wrap, which existed to keep type inside the dark end
     of the photo scrim.  With the photo gone the column is set by measure and
     by the CTA row instead: 720px holds two 350px buttons plus their 0.8rem
     gap (712.8px) with room left.  Prose keeps its own narrower measure via
     the max-width on .hero-sub. */
  max-width: min(100%, 720px);
}
/* 2026-07-22: the hero headline was outrunning the body and the menu type, so
   the home H1 scale steps down about 17 percent from the global h1 clamp
   (1.9-2.8rem becomes 1.58-2.32rem).  The global h1 used on interior pages is
   unchanged.
   2026-07-31 (web-1.17): the global `h1 { text-transform: uppercase }` was
   turning this line into a solid block of caps.  Sentence case now, one weight
   step down from the global 800, tighter leading, a hair of negative tracking,
   and another 10 percent off the scale.  Interior-page h1s keep the caps. */
.hero-content h1 {
  color: var(--white);
  margin: 0 0 0.4em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: clamp(1.42rem, 3.44vw, 2.09rem);
  /* The global h1,h2,h3,h4 rule sets text-wrap:balance, which evened the two
     lines and broke this headline after "to".  Balance off, then a measure in
     em (so it scales with the clamp) puts the break after "decide":
     "Empowering boards to decide" is 15.5em, adding "for" pushes past 17.5em,
     so 16.5em lands between the two at every size in the clamp. */
  text-wrap: wrap;
  max-width: 16.5em;
  text-shadow: 0 2px 18px rgba(var(--tp-shade-rgb), 0.55);
}
.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: var(--tp-navy-t75);
  max-width: 34em;
  margin: 0 0 1.6em;
  text-shadow: 0 1px 12px rgba(var(--tp-shade-rgb), 0.6);
}
/* 2026-07-31 (web-1.17): two CTAs of equal weight, gold OUTLINE on transparent.
   Filled gold on both read as a slab, and filling only one would make the other
   secondary.  Outline keeps them identical.
   They stay SIDE BY SIDE at every width, phones included.  1fr columns rather
   than a fixed 350px, so the pair divides whatever the column gives it and the
   labels wrap inside their own tiles instead of ever stacking. */
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 0.8rem;
  row-gap: 0.75rem;
  max-width: 720px;
}
.hero-cta {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.32;
  padding: 0.95em 1.1em;
  text-transform: none;
  /* Filled FLAT, not the house gradient: the gradient's dark bottom stop drops
     navy-on-amber from 9.53:1 to about 8.1:1 and reads plastic at this
     saturation. */
  background: var(--accent);
  color: var(--navy);
  border-color: var(--accent);
  border-radius: var(--r-md);
  /* 2026-08-01: text-wrap:balance was removed.  Balance equalises line lengths
     by pushing every line as wide as it can, which left about 5px of air each
     side on a phone and read as type sitting off-centre in its block.  Normal
     wrapping plus min-width:0 (so the anonymous flex item can shrink) and
     break-word (so no single token can ever exceed the box) keeps a visible,
     even margin on both sides. */
  min-width: 0;
  overflow-wrap: break-word;
}
.hero-cta:hover,
.hero-cta:focus-visible {
  background: var(--tp-amber-hover);
  color: var(--navy);
  border-color: var(--tp-amber-hover);
}
.hero-cta-note {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--tp-navy-t75);
  margin: 0;
  text-shadow: 0 1px 12px rgba(var(--tp-shade-rgb), 0.6);
}

/* 2026-08-20: the learning route, sitting under the two conversion CTAs.
   Its own block rather than a third cell in .hero-actions, so the 2-col grid
   that was tuned for the amber pair at every breakpoint is left untouched.
   Ghost outline (.btn-light) over the scrim: unmistakably a button, one rung
   below the amber pair, no competition with Book or Rapid RFP. */
.hero-learn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  max-width: 720px;
  margin-top: 1rem;
}
.hero-learn-cta {
  flex: 0 0 auto;
  font-size: 0.875rem;
  line-height: 1.32;
  padding: 0.7em 1.3em;
  text-transform: none;
}
.hero-learn-note {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--tp-navy-t75);
  margin: 0;
  text-shadow: 0 1px 12px rgba(var(--tp-shade-rgb), 0.6);
}
/* The proof strip and the policy sentence both left the hero in the web-1.17
   density pass.  .hero-proof and .hero-policy are retired; .why-proof and
   .why-policy carry them in the why-we-exist block near the bottom. */
/* Below the wrap's comfortable two-column width the copy column goes full
   width, so the horizontal scrim would run out from under the right-hand end
   of every line.  Swap to a full vertical overlay there. */
@media (max-width: 860px) {
  .hero > .wrap { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .hero-aud { max-width: 420px; }
  .hero-content { max-width: 100%; }
  /* Full vertical overlay below 860, and heavier than the old stops because the
     copy column now runs the whole width over a lit photograph rather than over
     the empty right end of a horizontal wash. */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(var(--tp-navy-rgb), 0.84) 0%,
      rgba(var(--tp-navy-rgb), 0.90) 55%,
      rgba(var(--tp-navy-rgb), 0.94) 100%);
  }
  /* Column goes full width here, so let the CTA pair use all of it rather than
     sit at 720px inside a wider box.  Still two columns, never stacked. */
  .hero-actions { max-width: none; }
}
/* Tighten the stacked hero copy on small screens -- the min-height clamp
   above only bounds the section when content is shorter than it; below
   ~600px the h1/sub/actions/proof stack is what drives height. */
@media (max-width: 600px) {
  .hero-content { padding: 2.2rem 0; }
  .hero-sub { font-size: 0.98rem; margin-bottom: 1.2em; }
  /* Phone: the two tiles split the row, so the long label wraps inside its own
     tile.  0.8rem is a floor, not a fit -- squeezing it to one or two lines
     meant 11.7px type on a touch target, so the label is allowed to run to
     three balanced lines instead and both tiles stretch to match. */
  .hero-cta { font-size: 0.78rem; padding: 0.95em 1.15em; letter-spacing: 0.02em; }
  .hero-actions { column-gap: 0.6rem; }
  /* The note belongs to the right-hand tile, so it stays in column 2. */
  .hero-cta-note { font-size: 0.8rem; }
  /* Phone: the note drops under the button rather than squeezing beside it. */
  .hero-learn { gap: 0.6rem; margin-top: 0.85rem; }
  .hero-learn-cta { font-size: 0.78rem; padding: 0.7em 1.1em; letter-spacing: 0.02em; }
  .hero-learn-note { flex-basis: 100%; font-size: 0.8rem; }
}
@media (max-width: 400px) {
  .hero-cta { font-size: 0.74rem; padding: 0.95em 0.95em; }
  .hero-learn-cta { font-size: 0.74rem; padding: 0.7em 0.95em; }
  /* At the clamp floor the headline needed a third line on a 320px screen,
     which stranded "themselves." on its own.  A step down holds it to two. */
  .hero-content h1 { font-size: 1.3rem; }
}

/* Page hero for interior pages */
.page-hero { padding: 3.2rem 0 2.8rem; }
.page-hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--tp-navy-t80);
  max-width: 44em;
  margin: 0;
}

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.card h3 { margin-top: 0; }
.card .card-more {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-decoration: none;
}

/* Service icon grid (home “What can we help you with?”) */
.service-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .service-grid { grid-template-columns: 1fr; } }
.service-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--navy);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.service-tile:hover {
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(var(--tp-shadow-rgb), 0.12);
}
.service-tile svg { color: var(--navy); flex: none; }
.service-tile .tile-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.04em;
}
.service-tile .tile-desc { font-size: 0.9rem; color: var(--ink-soft); }

/* ============================================================
   INDEPENDENCE CONTRAST (two-column vs.)
   ============================================================ */
.contrast { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .contrast { grid-template-columns: 1fr; } }
.contrast-col {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
}
.contrast-them {
  background: var(--paper-2);
  border: 1px dashed var(--ink-soft);
}
.contrast-us {
  background: var(--navy);
  color: var(--tp-navy-t85);
  border: 1px solid var(--navy);
}
.contrast-us h3 { color: var(--white); }
.contrast-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.contrast-them .contrast-label { color: var(--ink-soft); }
.contrast-us .contrast-label { color: var(--gold-soft); }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band { background: var(--navy); }
.stats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); text-align: center; }
@media (max-width: 700px) { .stats-grid { grid-template-columns: 1fr; } }
.stat { padding: 1.5rem 1rem; border: 1px solid var(--navy-line); border-radius: var(--radius-lg); }
.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--white);
  display: block;
}
.stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-navy-t60);
}
.cred-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  justify-content: center;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-line);
  list-style: none;
  padding-left: 0;
}
.cred-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--tp-navy-t70);
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  padding: 0.35em 1em;
}
.cred-strip li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  flex: none;
}

/* ============================================================
   STEPS (3 easy steps, SF 1750 walkthrough)
   ============================================================ */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); counter-reset: step; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.steps li {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
}
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  /* Flat amber + 1px navy ring: the standard amber-behind-navy-text treatment
     on a light field. */
  background: var(--tp-amber);
  border: 1px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}
.steps h3 { font-size: 1.25rem; margin-bottom: 0.35em; }
.steps p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }

/* Long-form numbered walkthrough (SF 1750 page) */
.walkthrough { list-style: none; padding: 0; margin: 0; counter-reset: wstep; }
.walkthrough > li {
  counter-increment: wstep;
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 4.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
.walkthrough > li::before {
  content: counter(wstep);
  position: absolute;
  left: 1.2rem;
  top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.walkthrough h3 { margin-bottom: 0.5em; }
.wstep-meta { margin: 0.6rem 0 0; font-size: 0.98rem; }
.wstep-meta dt {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--navy);
  margin-top: 0.6rem;
}
.wstep-meta dd { margin: 0.15rem 0 0; color: var(--ink-soft); }
.wstep-flag {
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  background: #fdf1e7;
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
}

/* ============================================================
   CHECKLIST
   ============================================================ */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding: 0.55rem 0 0.55rem 2.2rem;
  border-bottom: 1px solid var(--line);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--navy);
  background: var(--white);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 1.05rem;
  width: 0.5rem;
  height: 0.28rem;
  /* Navy since web-1.23: an amber glyph on white sat at 1.6:1. */
  border-left: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); margin-bottom: 0.75rem; }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
  line-height: 1.25;
}
.faq-q .faq-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}
.faq-q .faq-icon::before, .faq-q .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--navy);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq-q .faq-icon::before { width: 100%; height: 2px; }
.faq-q .faq-icon::after { width: 2px; height: 100%; transition: transform 0.2s; }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { padding: 0 1.25rem 1.15rem; color: var(--ink-soft); }
.faq-a[hidden] { display: none; }
.faq-a p:last-child { margin-bottom: 0; }

/* ============================================================
   REVIEWS / TESTIMONIALS
   ============================================================ */
.reviews-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.4rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.review::before {
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--navy);
  position: absolute;
  top: 0.6rem;
  left: 1.1rem;
  opacity: 0.85;
}
.review blockquote { margin: 1.1rem 0 1rem; font-size: 1rem; color: var(--ink); flex: 1; }
.review .stars { color: var(--navy); letter-spacing: 0.15em; font-size: 1.05rem; }
.review-byline { font-size: 0.92rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 0.8rem; }
.review-byline strong { color: var(--navy); display: block; font-size: 1rem; }

/* Trust-signal logo row */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.trust-row img { max-height: 52px; width: auto; filter: grayscale(1); opacity: 0.75; }
.trust-row a:hover img { filter: none; opacity: 1; }
.trust-label {
  width: 100%;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: var(--navy); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-inner h2 { margin-bottom: 0.2em; }
.cta-inner p { margin: 0; color: var(--tp-navy-t80); max-width: 36em; }
.cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.cta-phone {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  white-space: nowrap;
}
.cta-phone:hover { color: var(--gold-soft); }

/* ============================================================
   FORMS
   ============================================================ */
.form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  max-width: 640px;
}
.form-row { margin-bottom: 1.1rem; }
label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  padding: 0.65em 0.8em;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 1px;
}
.form-hint { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.25rem; }

/* Inline message written by script.js when an AJAX submit does not land */
.form-status {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: 0.95rem;
  color: var(--ink);
}
.lead-capture .form-status { background: transparent; color: var(--white); border-color: var(--navy-line); }

/* Option rows for radios / checkboxes (review form) */
fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.1rem;
}
legend {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--navy);
  padding: 0 0.4em;
}
.option-row { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.35rem 0; }
/* Navy, not amber: a checked control paints a white glyph on the accent-color
   fill, and white on amber is 1.6:1. */
.option-row input { width: auto; margin-top: 0.3em; accent-color: var(--navy); }
.option-row label {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
}

/* Paired form fields.  Started on the Rapid RFP form so the whole thing fit a
   standard screen without zooming out; the service-page request forms added
   2026-07-22 use the same pairing, so the grid rule is general now and only
   the Rapid RFP panel sizing stays scoped. */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 560px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
#rfp-form .form-panel { padding: 1.5rem; max-width: 600px; }
#rfp-form .form-row { margin-bottom: 0.85rem; }

/* Lead capture band (SF 1750) */
.lead-capture { background: var(--navy-deep); }
.lead-capture .form-panel { background: transparent; border-color: var(--navy-line); max-width: none; }
.lead-capture label { color: var(--white); }
.lead-inline { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lead-inline .form-row { flex: 1 1 220px; margin-bottom: 0; }
.lead-inline .btn { flex: 0 0 auto; align-self: end; }

/* ============================================================
   START-A-PROJECT WIZARD (/start)
   One step visible at a time, driven by script inside start.html.
   ============================================================ */
.wizard { max-width: 780px; }
.wizard-progress { margin-bottom: 1.5rem; }
.wizard-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.wizard-bar span {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--accent);
  transition: width 0.25s ease;
}
.wizard-count {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}
.wizard-step[hidden] { display: none; }
.wizard-step > fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.wizard-step > fieldset > legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  margin-bottom: 1rem;
}
.wizard-options { display: grid; gap: 0.6rem; }
.wizard-options.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wizard-opt { position: relative; }
.wizard-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.wizard-opt label {
  display: block;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wizard-opt label:hover { border-color: var(--navy); background: var(--paper-2); }
.wizard-opt input:checked + label {
  border-color: var(--navy);
  border-left: 4px solid var(--navy);
  background: var(--paper-2);
  font-weight: 600;
}
.wizard-opt input:focus-visible + label {
  outline: 3px solid var(--navy);
  outline-offset: 1px;
}
.wizard-nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.wizard-back {
  background: none;
  border: 0;
  padding: 0.4rem 0;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.wizard-back:hover { color: var(--navy); }
.wizard-detour {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
}
.wizard-detour h3 { margin-top: 0; }
.wizard-detour .btn { margin-top: 0.4rem; }
.wizard-intro { margin-bottom: 1.25rem; }

/* ============================================================
   MISC CONTENT BLOCKS
   ============================================================ */
.note-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  padding: 1.1rem 1.3rem;
  font-size: 0.98rem;
  border-radius: var(--radius-lg);
}
.callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.callout h2, .callout h3 { margin-bottom: 0.25em; }
.callout p { margin: 0; color: var(--ink-soft); max-width: 40em; }
/* HubSpot Meetings embed (/contact only).  HubSpot's script sizes the iframe
   itself once it has loaded, so the only job here is to reserve the space
   first, otherwise the form below it jumps down the page mid-load.  The two
   heights are the tallest the widget gets in each layout: the wide one shows
   the month grid beside the time column, the narrow one stacks them. */
/* web-1.23: the outer div is the rounding frame -- the iframe cannot be
   rounded from the inside, so the wrapper clips it (overflow: hidden) behind a
   quiet navy border.  The scroll safety net stays one level down on the
   container, which scrolls INSIDE the clipped frame, so the two jobs never
   fight over one overflow property. */
.meetings-embed {
  margin-top: 1.5rem;
  border: 1px solid rgba(var(--tp-navy-rgb), 0.25);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.meetings-embed .meetings-iframe-container {
  min-height: 680px;
  max-width: 100%;
  /* Safety net: if HubSpot's widget ever insists on more width than the phone
     has, this box scrolls instead of the whole page. */
  overflow-x: auto;
}
/* !important is load-bearing here.  HubSpot's script writes an inline width on
   the iframe it builds, and at 320 that inline value was 312px inside a 265px
   column, which pushed the page 27px sideways.  An inline style outranks any
   selector, so this is the one place on the site that needs it. */
.meetings-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .meetings-embed .meetings-iframe-container { min-height: 940px; }
}

/* Two equal actions in a callout (the Lifeline block).  Side by side on
   desktop.  The .callout itself wraps its own children below 860, so the pair
   goes full width and equal weight from there down -- measured, not guessed:
   at 768 they were already stacking at 340px and 306px, which read as one
   button being the lesser option. */
.callout-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: stretch; }
.callout-actions .btn { display: flex; align-items: center; justify-content: center; min-width: 0; }
@media (max-width: 859.98px) {
  .callout-actions { width: 100%; }
  .callout-actions .btn { flex: 1 1 100%; }
}

/* "Why TruPoint exists" callout: two columns on desktop. Copy and the closing
   tagline stay left (~65%); the TruPoint mark and its link sit right. On mobile
   the mark and link stack below the copy, centered. */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 65%) 1fr;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.why-grid .why-copy p { max-width: none; }
/* Credentials line and policy sentence, both moved down out of the hero in the
   web-1.17 pass.  Navy since web-1.23: this is type on a white callout, so
   the contrast rule sends it to the brand dark. */
/* Scoped to .why-copy on purpose: `.callout p { color: var(--ink-soft) }` is
   (0,1,1) and would otherwise outrank a bare .why-proof. */
.why-copy .why-proof {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--navy);
  margin-bottom: 0.5em;
}
.why-proof-sep { padding: 0 0.35em; opacity: 0.8; }
.why-copy .why-policy { color: var(--ink-soft); }
/* Centered caption stack: title, then the clickable mark, then the linked line. */
.why-mark { text-align: center; }
.why-mark .why-mark-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  max-width: none;
}
.why-mark-img { display: inline-block; line-height: 0; }
.why-mark-img img { width: 100%; max-width: 150px; height: auto; }
.why-mark .why-mark-line {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
}
@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-mark { margin-top: 0.5rem; }
}

/* Definition trio: what it is / who it's for / how it works */
.svc-structure { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.svc-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem;
}
.svc-block h2 {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.svc-block h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-blue);
}
.svc-block ul { margin-bottom: 0; }
.svc-block li { margin-bottom: 0.35em; }

/* Audience cards */
.audience-card { border-top-color: var(--accent); }
.audience-card .who {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.audience-card .want { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }
.audience-card .want strong { color: var(--navy); }

/* Team profile (about) */
.profile {
  display: grid;
  gap: 2rem;
  grid-template-columns: 280px 1fr;
  align-items: start;
}
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } }
.profile-photo {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-img);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}
img.profile-photo { object-fit: cover; padding: 0; width: 100%; }
.profile-creds { list-style: none; padding: 0; margin: 1rem 0 0; }
.profile-creds li {
  padding: 0.5rem 0 0.5rem 1.6rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 0.98rem;
}
.profile-creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 0.7rem;
  height: 0.7rem;
  /* Amber fill + 1px navy ring, the allowed amber-on-light form. */
  background: var(--tp-amber);
  border: 1px solid var(--navy);
}

/* ============================================================
   QUICK-LINKS STRIP (web-1.12, widened to phones web-1.16)
   ============================================================
   From 768 to 1199.98 the utility bar is display:none (web-1.8), and below 768
   .utility-actions is display:none too, so in both bands the audience and topic
   buttons went off screen.  This strip restores the five on its own row directly
   under the nav, at EVERY width below 1200.  Hidden at 1200+ only, where the
   utility bar carries them.

   Below 768 the five no longer fit on one row, so the row scrolls sideways and
   the arrows below appear as the affordance.  The arrows are BUILT BY script.js,
   not authored in the HTML, which is why no page markup changed when this grew
   to phones -- same lazily-created-control pattern as .bx-tip.  With JS off the
   row still scrolls by touch and the same links remain in the hamburger sheet,
   so nothing becomes unreachable. */
.nav-quick { display: none; }
@media (max-width: 1199.98px) {
  .nav-quick {
    display: block;
    position: relative;         /* positioning context for the scroll arrows */
    background: var(--navy-deep);
    border-top: 1px solid var(--navy-line);
  }
  .nav-quick-inner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .nav-quick-inner::-webkit-scrollbar { display: none; }
  .nav-quick .btn { flex: none; white-space: nowrap; }

  /* Scroll arrows.  Hidden until script.js measures real overflow, and each side
     is shown only while there is actually more row in that direction, so neither
     arrow ever sits there as a dead control. */
  .nav-quick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    cursor: pointer;
    color: var(--white);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-quick.can-scroll-prev .nav-quick-prev,
  .nav-quick.can-scroll-next .nav-quick-next { display: flex; }
  /* The gradient fades the row out under the chevron, so a half-clipped button
     reads as "there is more" rather than as a broken edge. */
  .nav-quick-prev {
    left: 0;
    background: linear-gradient(to right, rgba(var(--tp-navy-rgb), 1) 55%, rgba(var(--tp-navy-rgb), 0) 100%);
  }
  .nav-quick-next {
    right: 0;
    background: linear-gradient(to left, rgba(var(--tp-navy-rgb), 1) 55%, rgba(var(--tp-navy-rgb), 0) 100%);
  }
  .nav-quick-arrow:hover { color: var(--gold-soft); }
  .nav-quick-arrow:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -3px; }
}

/* ============================================================
   FOOTER — drawing-sheet title block
   ============================================================ */
/* LOGO CONVENTION (set 2026-07-26, web-1.11).  images/logo-mark.png, the navy
   triangle with the gold T, is the sitewide standard: header brand, favicons,
   homepage Why block, every light surface.  images/logo-mark-light.png, the
   white triangle, is NOT a competing variant -- it is the light-on-dark
   lockup, and it is used in exactly two places where the navy triangle would
   land at 1.08:1 against its own background and disappear: .footer-mark below,
   and the mark at the center of the what-is-trupoint diagram circle.  Do not
   swap those two to logo-mark.png. */
.site-footer {
  background: var(--navy-deep);
  color: var(--tp-navy-t80);
  border-top: 4px solid var(--accent);
  font-size: 0.95rem;
}
.footer-mark { width: 60px; height: auto; margin-bottom: 0.7rem; }

/* Full-width photo band on service pages: framed like the hero. */
.photo-band {
  margin: 0;
  position: relative;
}
.photo-band img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.photo-band::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 3px solid rgba(var(--tp-amber-rgb), 0.85);
  pointer-events: none;
}
.photo-band figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45em 1em;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.3fr 1fr 1fr;
  padding-top: 3rem;
  padding-bottom: 2rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 {
  color: var(--white);
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.8em;
}
.site-footer a { color: var(--tp-navy-t80); }
.site-footer a:hover { color: var(--white); }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 0.22rem 0; }
.footer-contact p { margin-bottom: 0.5em; }
.footer-contact .phone-link { font-size: 1.3rem; }

/* Title block: bordered corner frame like a drawing sheet */
.footer-titleblock {
  border: 1px solid var(--navy-line);
  outline: 1px solid var(--navy-line);
  outline-offset: 3px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.footer-titleblock > div {
  flex: 1 1 200px;
  padding: 0.6rem 1rem;
  border-right: 1px solid var(--navy-line);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.footer-titleblock > div:last-child { border-right: 0; }
.footer-titleblock .tb-label {
  display: block;
  font-size: 0.68rem;
  color: var(--tp-navy-t40);
  letter-spacing: 0.2em;
}
.footer-titleblock .tb-value { color: var(--white); font-weight: 600; }
.footer-legal {
  border-top: 1px solid var(--navy-line);
  padding: 1rem 0 1.4rem;
  font-size: 0.85rem;
  color: var(--tp-navy-t50);
}
.footer-legal p { margin: 0.3em 0; }

/* ============================================================
   SITE GUIDE WIDGET (assistant.js)
   ============================================================ */
.guide-launcher {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6em 1.1em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--tp-shadow-rgb), 0.35);
}
.guide-launcher:hover { background: var(--tp-amber); border-color: var(--navy); color: var(--navy); }
.guide-launcher svg { flex: none; }

.guide-panel {
  position: fixed;
  bottom: 4.6rem;
  right: 1rem;
  z-index: 150;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(560px, 75vh);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--navy);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px rgba(var(--tp-shadow-rgb), 0.35);
}
.guide-panel[hidden] { display: none; }

.guide-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--navy);
  color: var(--white);
}
.guide-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guide-badge {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--navy-line);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  color: var(--tp-navy-t60);
}
.guide-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2em;
}
.guide-close:hover { color: var(--gold-soft); }

.guide-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.g-msg {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: 0.93rem;
  line-height: 1.5;
  max-width: 95%;
}
.g-user {
  align-self: flex-end;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  max-width: 85%;
}
.g-links { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.3rem; }
.g-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guide-options { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.g-option {
  text-align: left;
  background: var(--white);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  color: var(--navy);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.7rem 0.9rem;
  min-height: 44px; /* comfortable tap target */
  cursor: pointer;
}
.g-option:hover { background: var(--navy); color: var(--white); }

.guide-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.guide-call {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.guide-call:hover { color: var(--tp-navy); text-decoration: underline; text-decoration-color: var(--tp-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.guide-disclaimer { font-size: 0.72rem; color: var(--ink-soft); text-align: right; }

@media (max-width: 480px) {
  .guide-panel { right: 0.5rem; left: 0.5rem; width: auto; bottom: 4.4rem; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.max-prose { max-width: 46em; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   ESTIMATING TOOL (estimate.html, preview build, unpublished)
   Additive component classes only; nothing above is affected.
   ============================================================ */
.est-badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.15em 0.8em;
  margin-left: 0.6rem;
  color: var(--gold-soft);
}
.est-shell { max-width: 720px; margin: 0 auto; }
.est-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.est-progress-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
.est-progress-track {
  flex: 1;
  height: 7px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.est-progress-fill { display: block; height: 100%; background: var(--tp-amber); transition: width 0.3s; }
.est-step { border: 0; padding: 0; margin: 0 0 0.5rem; }
.est-step > legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  padding: 0;
  margin-bottom: 0.9rem;
}
.est-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: 0.85em; }
.est-choices { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .est-choices { grid-template-columns: 1fr; } }
.est-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.est-choice:hover { border-color: var(--navy); }
.est-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est-choice:has(input:checked) {
  border-color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
  background: #fdf9ec;
}
.est-choice:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.est-choice svg { color: var(--navy); }
.est-choice-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.est-choice-num { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--navy); }
.est-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  border: 2px dashed var(--ink-soft);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 2rem 1.5rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0;
}
.est-drop.dragging, .est-drop:hover { border-color: var(--navy); background: #fdf9ec; }
.est-drop svg { color: var(--navy); }
.est-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.est-drop:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.est-filelist { list-style: none; padding: 0; margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.est-filelist li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  padding: 0.35em 0.7em;
  font-size: 0.88rem;
}
.est-filelist img { width: 34px; height: 34px; object-fit: cover; border-radius: var(--r-sm); }
.est-file-icon { color: var(--navy); }
.est-nav { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
.est-nav #est-back { margin-right: auto; }
.est-review { margin: 0 0 1.1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.5rem; }
.est-review dt {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--navy);
  padding-top: 0.2em;
}
.est-review dd { margin: 0; }
.est-result .est-range {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0.2em 0 0.5em;
}
.est-result-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }

/* ============================================================
   HOMEPAGE SCOPE SPECIFICS BAND
   ============================================================ */
.spec-band {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem;
  margin-top: 2rem;
}
.spec-band h3 { margin-bottom: 0.4em; }
.spec-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; padding: 0; margin: 0 0 1rem; }
.spec-chips li {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  font-size: 0.92rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
}
/* Each chip is a link into the Learning Center, so the padding moves onto the
   anchor and the whole pill becomes the hit area. */
.spec-chips li > a {
  display: block;
  padding: 0.3em 1em;
  color: inherit;
  text-decoration: none;
}
.spec-chips li:hover, .spec-chips li:focus-within {
  border-color: var(--navy);
  background: var(--white);
}
.spec-chips li > a:hover, .spec-chips li > a:focus-visible { color: var(--navy); }
/* ============================================================
   KNOWLEDGE CENTER (knowledge-center/, staged, unpublished)
   Additive component classes only; nothing above is affected.
   ============================================================ */
.breadcrumb { font-size: 0.85rem; margin: 0 0 1.1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "\203A"; margin-right: 0.4em; color: var(--tp-navy-t40); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.blueprint .breadcrumb { color: var(--tp-navy-t80); }
.kc-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: 0.2em 0.85em;
  margin-bottom: 0.7rem;
}
.blueprint .kc-tag { color: var(--gold-soft); border-color: var(--gold-soft); }
.kc-card { display: flex; flex-direction: column; align-items: flex-start; }
.kc-card h3 { font-size: 1.18rem; }
.kc-card p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.kc-soon {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px dashed var(--ink-soft);
  border-radius: 999px;
  padding: 0.25em 0.9em;
}
.kc-article > h2 { margin-top: 1.8em; }
.kc-methodology {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.kc-methodology h2, .kc-methodology h3 { font-size: 1.25rem; margin-top: 0; }
.kc-linkout {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  font-size: 0.95rem;
}
.kc-linkout svg { flex: none; color: var(--navy); }
.kc-credit { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.3rem; }
.kc-figure { margin: 1.8rem 0; }
.kc-figure img { border: 1px solid var(--line); border-radius: var(--r-img); }
.kc-figure figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.45rem; }
.kc-cta { margin: 1.6rem 0 0; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.kc-sources li { margin-bottom: 0.4em; overflow-wrap: anywhere; }
.kc-related {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  margin: 2.2rem 0 0;
}
.kc-related h2 { font-size: 1.15rem; }
.kc-related ul { margin-bottom: 0; }
.kc-disclaimer {
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
}
.kc-table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.kc-article table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--white);
  border: 1px solid var(--line);
}
.kc-article th, .kc-article td {
  border: 1px solid var(--line);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}
.kc-article thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kc-article tbody th { background: var(--paper-2); font-weight: 600; }

/* ============================================================
   NAV DROPDOWNS, hover-open on desktop, tap-open on mobile
   (2026-07-20: split pattern, the tab stays a real link and the
   caret button only renders inside the mobile menu)
   ============================================================ */
[id] { scroll-margin-top: 96px; }
.has-dropdown { display: flex; align-items: stretch; flex-wrap: wrap; }
.has-dropdown > a { flex: 1 1 auto; }
.has-dropdown > .dropdown-toggle { flex: none; }
.dropdown-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0.55rem 1.1rem 0.15rem;
}
/* web-1.8: these two blocks are scoped to .nav-menu (the wide tab row).  The
   compact nav carries its own toggle, caret and hover rules, so it must not
   inherit the wide row's "caret button is mobile-only" split pattern. */
@media (min-width: 950px) {
  .nav-menu .has-dropdown > .dropdown-toggle { display: none; }
  .nav-menu .has-dropdown > a::after {
    content: "";
    display: inline-block;
    margin-left: 0.28em;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
  }
  .nav-menu .has-dropdown:hover > .dropdown,
  .nav-menu .has-dropdown:focus-within > .dropdown { display: block; }
  .dropdown-right { left: auto; right: 0; }
  .dropdown-wide {
    min-width: 660px;
    padding-bottom: 0.7rem;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
  .dropdown-wide a { padding: 0.34rem 1.1rem; font-size: 0.92rem; }
  .dropdown-wide .dropdown-kicker { padding: 0.5rem 1.1rem 0.1rem; }
  .dropdown-cols { display: grid; grid-template-columns: repeat(2, minmax(270px, 1fr)); gap: 0 0.8rem; align-items: start; }
  .dropdown-cols > ul { list-style: none; margin: 0; padding: 0; }
}
@media (max-width: 949.98px) {
  .nav-menu .has-dropdown > a { width: auto; }
  .nav-menu .has-dropdown > .dropdown-toggle {
    width: 56px;
    padding: 0.85rem 0;
    text-align: center;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .nav-menu .has-dropdown > .dropdown { width: 100%; }
  .dropdown-cols > ul { list-style: none; margin: 0; padding: 0; }
}

/* ============================================================
   BUILDING EXPLORER (Sheet K-3.0, 2026-07-20)
   ============================================================ */
.bx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}
/* position:relative anchors the hover tooltip.  The tooltip lives on the stage
   rather than inside .bx-scroll so the scroll container cannot clip it. */
.bx-stage { min-width: 0; position: relative; }
.bx-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  max-width: 15rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.7rem;
  box-shadow: 0 6px 18px rgba(var(--tp-shadow-rgb), 0.3);
  opacity: 0;
  visibility: hidden;
  /* Fade only.  left/top are set directly, so the tooltip never lags the
     cursor while it follows. */
  transition: opacity 80ms ease;
}
.bx-tip.bx-tip-on { opacity: 1; visibility: visible; }
.bx-tip-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.25;
}
.bx-tip-hint {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gold-soft);
}
.bx-scroll {
  overflow-x: auto;
  border-radius: var(--r-img);
  box-shadow: 0 12px 28px rgba(var(--tp-shadow-rgb), 0.25);
}
.bx-svg { display: block; width: 100%; min-width: 700px; height: auto; }
.bx-tb {
  fill: rgba(255, 255, 255, 0.75);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.bx-spot { cursor: pointer; outline: none; }
.bx-hit { fill: transparent; stroke: none; }
.bx-glow { fill: none; stroke: var(--accent); stroke-width: 3.5; opacity: 0; }
.bx-spot:hover .bx-glow,
.bx-spot.bx-active .bx-glow,
.bx-spot:focus-visible .bx-glow { opacity: 1; }
.bx-marker circle { fill: var(--accent); stroke: var(--navy); stroke-width: 2; }
.bx-marker text {
  fill: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  text-anchor: middle;
}
.bx-spot:hover .bx-marker circle,
.bx-spot.bx-active .bx-marker circle { fill: var(--gold-soft); }
.bx-legend {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* web-1.10: the chips are anchors now.  The button selector is kept so the
   appearance is identical either way, and text-decoration/color are pinned so
   the anchor default never bleeds through. */
.bx-legend a,
.bx-legend button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3em 0.85em 0.3em 0.35em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.bx-legend a:hover,
.bx-legend a:focus { color: var(--ink); text-decoration: none; }
.bx-legend a span,
.bx-legend button span {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
}
.bx-legend a:hover,
.bx-legend a.bx-active,
.bx-legend button:hover,
.bx-legend button.bx-active { border-color: var(--navy); background: var(--paper); }
.bx-panel {
  position: sticky;
  top: 96px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem 1.4rem;
  box-shadow: 0 8px 20px rgba(var(--tp-shadow-rgb), 0.08);
}
.bx-panel h3 { margin: 0.55rem 0 0.5rem; font-size: 1.18rem; }
.bx-panel p { font-size: 0.95rem; margin-bottom: 0.9rem; }
@media (max-width: 860px) {
  .bx-layout { display: block; }
  .bx-panel { position: static; margin-top: 1.1rem; }
}

/* KC hub callout band for the Building Explorer */
.kc-explorer-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--navy);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  margin-top: 1.6rem;
}
.kc-explorer-callout .kc-tag { margin-bottom: 0; }
.kc-explorer-callout h3 { color: var(--white); margin: 0.35rem 0 0.4rem; }
.kc-explorer-callout p { margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 62ch; }
.kc-explorer-callout .btn { flex: none; }

/* ============================================================
   BUILDING EXPLORER, HERO VARIANT (Learning Center landing, 2026-07-22)
   The explorer is the KC hero now, so it runs the full content width and the
   description card drops below the drawing instead of taking a sidebar.
   ============================================================ */
.bx-hero { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.bx-hero .bx-layout {
  display: block;
}
.bx-hero .bx-panel {
  position: static;
  margin-top: 1.1rem;
  max-width: none;
}
.bx-hero .bx-svg { min-width: 780px; }
.bx-hero .bx-scroll { box-shadow: 0 16px 34px rgba(var(--tp-shadow-rgb), 0.28); }
/* Callout list under the drawing: the accessible text path, ten numbered
   blueprint callouts mapped one-to-one to the guides they open. */
.bx-callouts {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.6rem;
}
.bx-callouts a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
}
.bx-callouts a:hover, .bx-callouts a:focus-visible {
  background: var(--paper);
  border-left-color: var(--navy);
}
.bx-callouts b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.78rem;
}

/* ============================================================
   NAV TYPOGRAPHY PREVIEW (/nav-preview, 2026-07-22)
   Three candidate treatments for the main menu labels, scoped to a preview
   wrapper so nothing here leaks onto the live header.  Matt picks one, and
   the winner gets promoted into the .nav-menu rules above.
   ============================================================ */
.np-frame {
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(var(--tp-shadow-rgb), 0.1);
  margin-top: 0.9rem;
  background: var(--white);
}
.np-frame .site-header { position: static; }
/* The live nav row is capped at 1380px, which is wider than this frame, so the
   frame re-caps it and clips rather than pushing the page sideways. */
.np-frame { overflow-x: auto; }
.np-frame .main-nav .wrap, .np-frame .utility-bar .wrap { max-width: 100%; }
.np-frame .nav-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.np-frame .nav-utility-mirror { display: none; }
.np-note { font-size: 0.92rem; color: var(--ink-soft); margin: 0.3rem 0 0; }

/* Option A: current all-caps, 15px, medium weight */
.np-a .nav-menu > li > a, .np-a .nav-menu > li > .dropdown-toggle {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1.05rem 0.5rem;
}
/* Option B: mixed case, 16px, semibold */
.np-b .nav-menu > li > a, .np-b .nav-menu > li > .dropdown-toggle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 1.05rem 0.55rem;
}
/* Option C: all caps, 14px, bold, wider tracking */
.np-c .nav-menu > li > a, .np-c .nav-menu > li > .dropdown-toggle {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1.05rem 0.5rem;
}

/* ============================================================
   WHAT IS TRUPOINT (/what-is-trupoint, Sheet A-0.1, 2026-07-22)
   ============================================================ */
.wt-figure {
  background: var(--navy);
  border-radius: var(--r-img);
  box-shadow: 0 14px 30px rgba(var(--tp-shadow-rgb), 0.28);
  overflow-x: auto;
}
.wt-figure svg { display: block; width: 100%; height: auto; }
.wt-figure .wt-svg-wide { min-width: 620px; }
.wt-figure .wt-svg-stack { display: none; }
/* Below 720px the wide sheet can only stay legible by side-scrolling, which
   reads as a triangle shoved off center.  Swap in the portrait sheet instead
   so the diagram sits centered and whole on a phone.  (2026-07-27) */
@media (max-width: 719px) {
  .wt-figure { overflow-x: hidden; }
  .wt-figure .wt-svg-wide { display: none; }
  .wt-figure .wt-svg-stack { display: block; }
}
.wt-caption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.7rem; }
.wt-label {
  fill: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-anchor: middle;
}
.wt-sub {
  fill: rgba(255, 255, 255, 0.62);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-anchor: middle;
}
.wt-center {
  fill: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-anchor: middle;
}
.wt-tb {
  fill: rgba(255, 255, 255, 0.75);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
}

/* Type for the phone-portrait sheet.  Sizes are in the 620-wide user space of
   .wt-svg-stack, so they render larger on a phone than the wide sheet did. */
.wt-mlabel {
  fill: rgba(255, 255, 255, 0.92);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-anchor: middle;
}
.wt-msub {
  fill: rgba(255, 255, 255, 0.62);
  font-family: var(--font-body);
  font-size: 19px;
  letter-spacing: 0.03em;
  text-anchor: middle;
}
.wt-mstart { text-anchor: start; }
.wt-mcenter {
  fill: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.08em;
  text-anchor: middle;
}
.wt-mtb {
  fill: rgba(255, 255, 255, 0.75);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.08em;
}

/* ============================================================
   TRANSPARENCY PLEDGE: signed-oath block (/partner-network, /pledge)
   Blueprint treatment: navy drafting field, gold spine, each line
   of the oath set off like a numbered clause on a title sheet.
   ============================================================ */
.pledge-oath {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  color: var(--tp-navy-t85);
  border: 1px solid var(--navy-line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.9rem 2rem;
}
.pledge-oath p {
  margin: 0 0 1.05rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--navy-line);
  font-size: 1.02rem;
  line-height: 1.55;
}
.pledge-oath p:last-child { margin-bottom: 0; }
.pledge-sig {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.8rem;
}
.blueprint .pledge-sig { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 480px) {
  .pledge-oath { padding: 1.4rem 1.2rem; }
}

/* Optional-field hint and on-page quick links (2026-07-24 pass) */
.form-optional { font-weight: 400; color: var(--ink-soft); font-size: 0.85em; }
.quick-links {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}
.quick-links a { font-weight: 600; }