/* Trowbridge Recovery Group — shared styles
   Palette: institutional navy / cool paper / ledger green / bronze
   Type: Source Serif 4 (display) · Public Sans (body) · IBM Plex Mono (IDs & statutes)
   One sheet, no build step.
   Fonts are self-hosted latin subsets (publicsans-400.woff2 is a variable font, wght 100-900). */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("fonts/ibmplexmono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("fonts/ibmplexmono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("fonts/publicsans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("fonts/publicsans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("fonts/publicsans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("fonts/publicsans-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("fonts/sourceserif4-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── CLS fix: metric-matched fallback faces (audit fix #1) ──
   Overrides computed from the shipped woff2 metrics vs. local-font metrics
   (fonttools + @capsizecss/metrics, 2026-08-05). Do not hand-edit values;
   regenerate if any webfont file changes. */
@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 117.54%; ascent-override: 88.14%; descent-override: 28.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback Android";
  src: local("Noto Serif");
  size-adjust: 108.94%; ascent-override: 95.1%; descent-override: 30.75%; line-gap-override: 0%;
}
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Segoe UI");
  size-adjust: 122.81%; ascent-override: 77.35%; descent-override: 18.32%; line-gap-override: 0%;
}
@font-face {
  font-family: "Public Sans Fallback Android";
  src: local("Roboto");
  size-adjust: 122.41%; ascent-override: 77.61%; descent-override: 18.38%; line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Courier New");
  size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "IBM Plex Mono Fallback Android";
  src: local("Roboto Mono");
  size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.5%; line-gap-override: 0%;
}

:root {
  --ink: #16232e;
  --ink-soft: #2e3d49;
  --navy: #1e3a54;
  --navy-deep: #142a3f;
  --navy-ink: #0e1f30;
  --paper: #fafbf9;
  --card: #ffffff;
  --ledger: #edf2ec;
  --ledger-line: #c9d6c6;
  --bronze: #8c6d2f;
  --bronze-soft: #b3924f;
  --bronze-deep: #7a5e28; /* AA on ledger-tint backgrounds (4.5:1+) */
  --gray: #5b6770;
  --rule: #dde3e0;
  --rule-soft: #e8ecea;
  --serif: "Source Serif 4", "Source Serif 4 Fallback", "Source Serif 4 Fallback Android", Georgia, serif;
  --sans: "Public Sans", "Public Sans Fallback", "Public Sans Fallback Android", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", "IBM Plex Mono Fallback Android", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.25, 1);
  --shadow-1: 0 1px 2px rgba(20, 42, 63, 0.05), 0 2px 10px rgba(20, 42, 63, 0.05);
  --shadow-2: 0 2px 6px rgba(20, 42, 63, 0.07), 0 14px 34px rgba(20, 42, 63, 0.09);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: light; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--navy); color: #fff; }

img, svg { vertical-align: middle; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.18s var(--ease); }
a:hover { color: var(--bronze); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -52px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 0 0 6px 6px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Utility topbar ---------- */
.topbar {
  background: var(--navy-ink);
  color: #b9c7d3;
  font-size: 0.78rem;
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 24px;
}
.topbar a {
  color: #ccd8e2;
  text-decoration: none;
  padding: 2px 0;
}
.topbar a:hover { color: var(--bronze-soft); }
.topbar a:focus-visible { outline-color: var(--bronze-soft); }
.topbar-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
.topbar-mail { font-weight: 600; }
@media (max-width: 620px) {
  .topbar-note { display: none; }
  .topbar-in { justify-content: center; }
}

/* ---------- Header ---------- */
header.site {
  background: rgba(250, 251, 249, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.25s var(--ease);
}
header.site.scrolled { box-shadow: var(--shadow-1); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 24px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  text-decoration: none;
}
.wordmark .mark {
  display: block;
  flex: none;
  box-shadow: var(--shadow-1);
}
.wm-text {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.12;
  display: block;
}
.wm-text .grp {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-top: 2px;
}
nav.menu { display: flex; gap: 30px; align-items: center; }
nav.menu a {
  font-size: 0.91rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
}
nav.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--bronze);
  transition: right 0.25s var(--ease);
}
nav.menu a:hover { color: var(--navy); }
nav.menu a:hover::after { right: 0; }
nav.menu a[aria-current="page"]::after { right: 0; background: var(--navy); }
nav.menu a.nav-cta {
  border: 1.5px solid var(--navy);
  border-radius: 4px;
  padding: 8px 18px;
  font-weight: 600;
  color: var(--navy);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
nav.menu a.nav-cta::after { display: none; }
nav.menu a.nav-cta:hover { background: var(--navy); color: #fff; }

.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 760px) {
  /* Shared stacked item styling (applies with OR without JS). */
  nav.menu a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--rule-soft); }
  nav.menu a::after { display: none; }
  nav.menu a[aria-current="page"] { color: var(--navy); font-weight: 700; }
  nav.menu a.nav-cta { border: none; border-bottom: 1px solid var(--rule-soft); border-radius: 0; padding: 14px 0; }
  nav.menu a.nav-cta:hover { background: none; color: var(--navy); }
  nav.menu a:last-child { border-bottom: none; }

  /* DEFAULT = the collapsed hamburger layout, applied from the FIRST paint.
     This must not depend on JS: gating it on `.js` made the browser paint the
     tall stacked nav first and collapse it when site.js ran — a 184px jump and
     a CLS of ~0.26 (measured 2026-07-28). The no-JS variant is delivered by a
     <noscript><style> block in each page's <head>, which the parser applies
     before first paint, so neither path shifts. */
  .menu-btn { display: block; }
  nav.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 18px;
  }
  nav.menu.open { display: flex; }
}

/* ---------- Hero & page heads (ledger-paper backdrop) ---------- */
.hero, .page-head {
  position: relative;
  background:
    linear-gradient(180deg, rgba(30, 58, 84, 0.04), rgba(30, 58, 84, 0) 320px),
    repeating-linear-gradient(180deg, transparent 0 54px, rgba(30, 58, 84, 0.045) 54px 55px),
    var(--paper);
}
.hero .wrap, .page-head .wrap { position: relative; }
@media (min-width: 1180px) {
  .hero .wrap::before, .page-head .wrap::before {
    content: "";
    position: absolute;
    left: -34px;
    top: -20px;
    bottom: -20px;
    width: 5px;
    border-left: 2px solid rgba(179, 146, 79, 0.34);
    border-right: 1px solid rgba(179, 146, 79, 0.22);
  }
}

/* Hero spacing is tuned so the trust chips finish above an 800px-tall desktop
   fold. The 2026-08-13 headline is 17 chars longer than its predecessor, so
   the hero H1 gets a wider measure (26ch vs the global 20ch) — four lines on
   desktop instead of five — and a slightly lower mobile floor. Type scale and
   spacing only; copy untouched. */
.hero { padding: 68px 0 88px; }
.hero h1 {
  margin-bottom: 20px;
  max-width: 26ch;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 2px;
  background: var(--bronze-soft);
}
h1 {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  max-width: 20ch;
  margin-bottom: 26px;
  text-wrap: balance;
}
.hero p.lead {
  font-size: 1.16rem;
  line-height: 1.75;
  color: var(--gray);
  max-width: 58ch;
  margin-bottom: 18px;
}

/* ---------- Verification stub (signature element, check-stub aesthetic) ---------- */
.stub {
  background: var(--card);
  border: 1px solid var(--ledger-line);
  border-left: none;
  border-radius: 0 8px 8px 0;
  box-shadow: var(--shadow-1);
  padding: 24px 30px 26px 54px;
  position: relative;
  overflow: hidden;
  max-width: 680px;
  margin: 0 0 42px;
}
.stub::before {
  /* perforated stub edge: punched holes over a ledger-tint strip */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  background:
    radial-gradient(circle at 11px 11px, var(--paper) 3px, rgba(0, 0, 0, 0) 3.7px) 0 6px / 22px 22px repeat-y,
    var(--ledger);
  border-right: 1px dashed var(--bronze-soft);
}
.stub .stub-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 10px;
}
.stub .stub-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ledger-line);
}
.stub p { font-size: 0.97rem; line-height: 1.7; color: var(--ink); }
.stub .mono, code.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--paper);
  border: 1px solid var(--ledger-line);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(20, 42, 63, 0.04);
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.actions.mt-lg { margin-top: 30px; }
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  border: 1.5px solid var(--navy);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-1); }
.btn.primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: rgba(30, 58, 84, 0.06); border-color: var(--navy-deep); color: var(--navy-deep); }

/* ---------- Ledger strip (the protections table) ---------- */
.ledger-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}
.ledger-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.ledger-cell {
  padding: 44px 34px 40px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.ledger-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  width: 30px;
  height: 3px;
  background: var(--bronze-soft);
}
.ledger-cell:last-child { border-right: none; }
.ledger-cell .fig {
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 10px;
}
.ledger-cell .cap {
  font-size: 0.91rem;
  line-height: 1.65;
  color: var(--gray);
}
.ledger-cell .cap code {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--bronze);
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .ledger-table { grid-template-columns: 1fr; }
  .ledger-cell { border-right: none; border-bottom: 1px solid var(--rule); padding: 32px 24px 28px; }
  .ledger-cell::before { left: 24px; }
  .ledger-cell:last-child { border-bottom: none; }
}

/* ---------- Sections ---------- */
section.band { padding: 92px 0; }
section.band.tint {
  background: var(--ledger);
  border-top: 1px solid var(--ledger-line);
  border-bottom: 1px solid var(--ledger-line);
}
h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin-bottom: 20px;
  max-width: 28ch;
  text-wrap: balance;
}
.band h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--bronze-soft);
  margin-bottom: 24px;
}
h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
}
section p { max-width: 64ch; margin-bottom: 18px; }
.muted { color: var(--gray); }

/* ---------- Process rows ---------- */
.steps { margin-top: 44px; border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 34px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.step .who {
  justify-self: start;
  align-self: start;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  background: var(--ledger);
  border: 1px solid var(--ledger-line);
  border-radius: 3px;
  padding: 5px 12px;
  margin-top: 4px;
  white-space: nowrap;
}
.step h3 { margin-bottom: 8px; }
/* Step titles are h2 for a correct heading outline, styled to the h3 scale */
.step h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 8px;
  max-width: none;
}
.step h2::before { display: none; }
.step p { margin-bottom: 0; }
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 24px 44px 24px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 0.2s var(--ease);
}
.faq-item summary:hover { color: var(--navy); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--bronze);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary { color: var(--navy); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-body {
  padding: 2px 0 28px 22px;
  border-left: 2px solid var(--ledger-line);
  margin-bottom: 4px;
}
.faq-item .faq-body p { margin-bottom: 12px; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }
html.js .faq-item[open] .faq-body { animation: faq-in 0.32s var(--ease); }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Notice / compliance plate ---------- */
.notice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  background: var(--card);
  border-radius: 0 6px 6px 0;
  box-shadow: var(--shadow-1);
  padding: 20px 26px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--gray);
  max-width: 760px;
  margin-top: 44px;
}
.notice strong { color: var(--ink); }

/* ---------- Contact ---------- */
.contact-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  padding: 38px 40px;
  max-width: 580px;
}
.contact-card dt {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
  border-top: 1px solid var(--rule-soft);
  padding-top: 22px;
  margin-top: 22px;
}
.contact-card dt:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.contact-card dd {
  font-size: 1.03rem;
  line-height: 1.7;
  margin-top: 6px;
}
.contact-card dd a { font-weight: 600; }
@media (max-width: 640px) {
  .contact-card { padding: 28px 24px; }
}

/* ---------- 404 ---------- */
.lost { padding: 104px 0 96px; }
.lost .code {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--bronze-deep);
  background: var(--ledger);
  border: 1px solid var(--ledger-line);
  border-radius: 3px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 26px;
}
.lost p.lead { font-size: 1.12rem; color: var(--gray); max-width: 56ch; margin-bottom: 36px; }

/* ---------- Footer ---------- */
footer {
  background: linear-gradient(180deg, var(--navy-deep), var(--navy-ink));
  border-top: 2px solid var(--bronze-soft);
  color: #c6d2dc;
  padding: 64px 0 44px;
  font-size: 0.88rem;
}
footer .foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 44px;
}
footer .fw {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}
footer p { line-height: 1.7; max-width: 40ch; }
footer a { color: #dfe8ef; text-decoration-color: rgba(223, 232, 239, 0.4); }
footer a:hover { color: var(--bronze-soft); }
footer a:focus-visible { outline-color: var(--bronze-soft); }
footer .foot-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
footer .foot-links a { text-decoration: none; padding: 1px 0; }
footer .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer .legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 28px;
  font-size: 0.8rem;
  line-height: 1.75;
  color: #9fb0be;
}
footer .legal p { margin-bottom: 12px; max-width: 100ch; }
@media (max-width: 760px) {
  footer .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  footer { padding: 48px 0 36px; }
}

/* ---------- Page headers (interior pages) ---------- */
.page-head { padding: 76px 0 20px; }
.page-head h1 { font-size: clamp(1.95rem, 4.2vw, 2.75rem); }
.page-head p.lead {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--gray);
  max-width: 60ch;
  margin-top: 16px;
}

/* ---------- Inbound-verifier strip (homepage) ---------- */
.inbound {
  background: var(--ledger);
  border-top: 1px solid var(--ledger-line);
  border-bottom: 1px solid var(--ledger-line);
}
.inbound .wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 0.93rem;
}
.inbound .tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  white-space: nowrap;
}
.inbound a { font-weight: 600; }

/* ---------- Intake form (/start) ---------- */
.intake {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  padding: 34px 36px 38px;
  max-width: 680px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-row.single { grid-template-columns: 1fr; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 7px;
}
.field label .opt {
  color: var(--gray);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 11px 13px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 1px;
  border-color: var(--bronze-soft);
}
button.btn {
  font-family: var(--sans);
  cursor: pointer;
  width: auto;
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  font-size: 0.88rem;
  color: var(--gray);
  margin: 6px 0 22px;
}
.form-note strong { color: var(--ink); }
.form-note-after { margin: 12px 0 0; }

/* Form result banners: revealed without JS via :target after the 303 redirect */
.form-banner { display: none; }
.form-banner:target {
  display: block;
  border-radius: 0 6px 6px 0;
  padding: 18px 24px;
  margin: 0 0 30px;
  max-width: 680px;
  font-size: 0.95rem;
  line-height: 1.7;
}
.form-banner.ok:target {
  background: var(--ledger);
  border: 1px solid var(--ledger-line);
  border-left: 3px solid var(--navy);
}
.form-banner.err:target {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--bronze);
}
.form-banner strong { color: var(--ink); }

/* ---------- Scroll reveals (JS adds .in; no-JS stays visible) ---------- */
.reveal { opacity: 1; }
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal[data-rd="2"] { transition-delay: 0.08s; }
html.js .reveal[data-rd="3"] { transition-delay: 0.16s; }

/* ---------- Reduced motion: no animation, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  /* Hero spacing compressed on phones so all three trust chips clear the fold
     (Kent's directive, 2026-08-11). Padding and margins only — no copy removed,
     no type sizes reduced in the hero itself. */
  .hero { padding: 16px 0 44px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero h1 { margin-bottom: 12px; }
  .hero p.lead { font-size: 1.08rem; line-height: 1.58; margin-bottom: 0; }
  section.band { padding: 60px 0; }
  .page-head { padding: 52px 0 12px; }
  .lost { padding: 72px 0 64px; }
  .notice { margin-top: 32px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
  .nav { padding: 12px 20px; }
  .topbar-in { padding: 8px 20px; }
  .stub { padding: 20px 20px 22px 46px; }
  .btn { padding: 13px 22px; }
  .intake { padding: 24px 20px 28px; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── v4: letter path, vet checklist, timeline note, credentials strip ── */
.letter-path{margin:26px 0 4px;background:#fff;border:1px solid var(--rule, #d9d2c4);border-left:4px solid #b3924f;border-radius:10px;padding:16px 18px;max-width:560px}
.lp-label{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:17px;color:#1e3a54;margin:0 0 10px}
.lp-row{display:flex;gap:10px;flex-wrap:wrap}
.lp-row input{flex:1 1 220px;padding:12px 14px;border:1px solid #c9c1b2;border-radius:8px;font:inherit;font-size:15px;min-height:48px}
.lp-row input:focus-visible{outline:2px solid var(--bronze);outline-offset:1px;border-color:var(--bronze-soft)}
.lp-row .btn{min-height:48px}
.lp-note{margin:10px 0 0;font-size:12.5px;color:#5c6670}
.lp-note a{color:#1e3a54}
.timeline-note{background:#f4efe6;border:1px solid #e2d9c6;border-radius:10px;padding:16px 18px;margin:22px 0 0}
.timeline-note .tn-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a6d3b;font-weight:700;margin:0 0 6px}
.timeline-note p{margin:0}
.vet-item{border-bottom:1px solid #e6dfd0;padding:18px 0}
.vet-item:last-of-type{border-bottom:0}
.vet-item h3{font-size:19px;color:#1e3a54;margin:0 0 8px}
.vet-us{background:#f7f4ec;border-left:3px solid #b3924f;padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0 0}
.vet-close{margin-top:22px;font-family:"Source Serif 4",Georgia,serif;font-size:18px;color:#1e3a54}
.credstrip{background:#0e1f30;color:#dfe7ed;font-size:13px;text-align:center;padding:9px 14px}
.credstrip .cred-sep{margin:0 10px;color:#b3924f}
@media(max-width:560px){.lp-row .btn{flex:1 1 100%}}

/* ── v9: three-chip trust strip, promoted above the hero fold ──
   Copy is verbatim from the former below-hero ledger strip (that instance was
   removed; this is the single homepage instance). Tokens reuse the ledger
   palette. Fixed min-heights so the row reserves its space before the webfont
   swaps — no layout shift. */
.herochips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 0;
  max-width: 760px;
}
.herochip {
  min-height: 104px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--bronze-soft);
  border-radius: 4px;
}
.herochip .fig {
  font-family: var(--serif);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 4px;
}
.herochip .cap { font-size: 0.78rem; line-height: 1.45; color: var(--gray); margin: 0; }
.herochip .cap code {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--bronze);
  background: none; border: none; padding: 0;
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* Stack vertically on phones. The figure runs inline with its caption rather
     than in its own column: a fixed fig column costs ~70px of caption width and
     pushed every chip to three lines, which put chip 3 below the fold. Inline
     flow gets each chip to two lines, so all three are visible without scrolling
     at 375px. Same words, less furniture. */
  .herochips { grid-template-columns: 1fr; gap: 4px; margin-top: 12px; max-width: none; }
  .herochip {
    min-height: 0;
    padding: 5px 10px;
    border-top: 1px solid var(--rule);
    border-left: 3px solid var(--bronze-soft);
    /* The chip must set its own line-height: with inline children, every line
       box is at least as tall as the block's strut, and body's 1.7 made each
       line 27px. Sizing the chip itself is what actually compresses it. */
    font-size: 0.73rem;
    line-height: 1.42;
  }
  .herochip .fig {
    display: inline;
    font-size: 1.26em;
    line-height: inherit;
    margin: 0 5px 0 0;
    white-space: nowrap;
  }
  .herochip .cap { display: inline; font-size: 1em; line-height: inherit; }
}

/* ── v11: config-gated header phone — SHIPS DARK. Renders only when PHONE is
   set in site.js (credentials-strip pattern: empty config = the slot stays
   hidden and none of this applies). Flip day is its own §10 deploy with the
   CLS gate rerun. */
.topbar-phone {
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 4px;      /* stretches the tap target to ~40px within the bar */
  color: #ccd8e2;
}
.topbar-phone:hover { color: var(--bronze-soft); }
@media (max-width: 620px) {
  /* With the line live, the phone becomes the topbar's single centered
     tap-to-call target on small screens; the email link yields (it remains in
     the footer of every page). Larger type for the thumb. */
  .topbar-has-phone .topbar-mail { display: none; }
  .topbar-phone { font-size: 0.85rem; padding: 10px 8px; }
}