/* ==========================================================================
   Aftermath Rehabilitation -- site stylesheet
   --------------------------------------------------------------------------
   Warm cream ground, warm near-black ink, one clay accent. Clean and calm:
   no display serif, no decorative numbering, and photography kept small.

   Written from scratch rather than layered over the previous versions, because
   this is the third direction and stacking override blocks is how a stylesheet
   ends up with four rules fighting over the same element.

   Rules that are not preference:
     - ONE typeface. No display serif. Headings are the same family as the body
       text, just heavier and tighter.
     - NO decorative numbering anywhere. No 01/02/03 on sections, lists or
       steps. A number appears only when the number is a fact.
     - Photography is SMALL and captioned. Nothing full bleed, and nothing that
       could be mistaken for a photograph of the actual home.
     - 16px floor on every text input, or iOS zooms the page on focus.

   Order: tokens -> reset -> type -> layout -> header -> components -> forms
          -> pages -> a11y -> print.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* Warm cream ground, warm near-black ink, one clay accent. Cool white next
     to warm ink reads as a printing error, which is why the paper is bone. */
  --paper:    #f8f4ee;
  --paper-2:  #f2ece1;   /* alternating section tint */
  --paper-3:  #eae2d4;
  --paper-4:  #e0d6c4;

  --ink:      #17130f;   /* warm near black */
  --ink-2:    #55483e;
  /* 4.5:1 on every surface it is used over, including --paper-3, the
     darkest section tint. At the old #7b6b5e it measured 4.35:1 on the
     alternating tint and 3.98:1 on --paper-3, which is most of the
     breadcrumbs and every .fine line on the site. */
  --ink-3:    #6f5f50;
  --ink-4:    #a1907f;

  --line:     #ddd2c1;
  --line-2:   #cabda8;

  /* one warm accent */
  --accent:      #9c5c33;
  --accent-2:    #834c29;
  --accent-3:    #c8894f;
  --accent-tint: #f3e9df;
  --accent-line: #e0cdb8;

  --warn:      #8a6212;
  --warn-tint: #f8eeda;
  --warn-line: #e5cf9f;
  --danger:      #8e3b30;
  --danger-tint: #f8e7e2;
  --danger-line: #e8c6bd;
  --ok:      #4a6b46;
  --ok-tint: #eaf0e6;
  --ok-line: #cbdcc2;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(23, 19, 15, .04);
  --sh-2: 0 2px 10px rgba(23, 19, 15, .07);

  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(52px, 7vw, 100px);
  --maxw: 1180px;
  --maxw-narrow: 720px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, "Helvetica Neue", sans-serif;

  --nav-h: 72px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* ---------- type ---------- */
.display, h1.display {
  font-size: clamp(1.95rem, 3.9vw, 3rem);
  line-height: 1.14;
  letter-spacing: -.026em;
  font-weight: 600;
}
.h1 { font-size: clamp(1.7rem, 3.1vw, 2.35rem); line-height: 1.2;  letter-spacing: -.022em; font-weight: 600; }
.h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem);  line-height: 1.25; letter-spacing: -.018em; font-weight: 600; }
.h3 { font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.35; letter-spacing: -.012em; font-weight: 600; }
.h4 { font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: -.008em; }

.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .85rem;
}
.on-dark .eyebrow { color: #dda878; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 62ch;
}
.on-dark .lede { color: #c8bbac; }
.small { font-size: .92rem; }
.fine  { font-size: .82rem; line-height: 1.55; color: var(--ink-3); }
.on-dark .fine { color: #9e9083; }
.muted { color: var(--ink-2); }
.on-dark .muted { color: #c8bbac; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* The tagline. A quiet line of small caps, not a graphic device. */
.motto {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.on-dark .motto { color: #dda878; }
.motto-center { justify-content: center; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(34px, 5vw, 60px); }
.tone-2 { background: var(--paper-2); }
.tone-3 { background: var(--paper-3); }
.on-dark { background: var(--ink); color: #f4efe7; }
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .display { color: #ffffff; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split {
  display: grid;
  gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.split-wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.6rem; }

@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(248, 244, 238, .93);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 24px);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; margin-right: auto; }
/* The mark is a detailed line drawing; below about 40px the star and the
   flames turn to mush. */
.brand img { width: 42px; height: 42px; border-radius: 0; }
.brand-name { font-size: 1.02rem; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; }
.brand-sub {
  display: block;
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.nav-links { display: flex; align-items: center; gap: clamp(8px, 1.3vw, 22px); }
.nav-links a {
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 7px 2px;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-phone {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; font-weight: 600; font-size: .92rem;
  white-space: nowrap; color: var(--ink);
}
.nav-phone svg { width: 15px; height: 15px; color: var(--accent); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 17px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease;
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -5.5px; }
.burger span::after  { top: 5.5px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .burger span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* The sheet is a direct child of <body>. Nested inside the sticky, blurred
   header it would inherit that containing block and be clipped to 72px. */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--paper);
  /* --sheet-top is the header's measured bottom edge, set by site.js on open.
     The fallback covers the worst case measured (127px, a wrapped crisis bar
     at 360px and below) so the first row is never clipped even if the script
     has not run. The bottom padding clears the home indicator on a phone with
     no hardware button. */
  padding: calc(var(--sheet-top, calc(var(--nav-h) + 56px)) + 18px)
           var(--gutter)
           calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s .2s;
}
body.menu-open .nav-sheet { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.nav-sheet a {
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.015em;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.nav-sheet a .chev { color: var(--ink-4); font-weight: 400; }
.nav-sheet-foot { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .burger { display: flex; }
}
/* The header CTA carries two labels: "Check availability" is 155px wide and at
   390px pushes .nav-cta past the viewport edge, because .nav-cta is
   flex: 0 0 auto and takes its width out of the brand and then out of the page. */
@media (max-width: 700px) { .cta-full { display: none; } .cta-short { display: inline; } }
@media (min-width: 701px) { .cta-short { display: none; } }
@media (max-width: 560px) { .nav-phone span { display: none; } }
@media (max-width: 480px) { .brand-sub { display: none; } .brand-name { font-size: 1rem; } }
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .nav { gap: 8px; }
  .nav-cta { gap: 7px; }
  .nav-cta .btn { padding: 9px 12px; font-size: .84rem; }
  .burger { width: 40px; height: 40px; }
}
/* Last resort at 320px: the CTA goes, because the menu sheet opens with a
   full-width "Check availability" button one tap away. The call link stays. */
@media (max-width: 360px) { .nav-cta > .btn { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 22px;
  min-height: 46px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-4); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2c241c; }
.btn-on-dark { background: #fff; color: var(--ink); }
.btn-on-dark:hover { background: var(--paper-3); }
.btn-ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-on-dark:hover { background: rgba(255,255,255,.1); }
.btn-sm { padding: 8px 14px; min-height: 38px; font-size: .87rem; }
.btn-lg { padding: 15px 28px; min-height: 52px; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* A full-width button must be allowed to WRAP. .btn is white-space: nowrap,
   and a wide label on a 100%-width button sets a min-content floor that gives
   the whole page a horizontal scrollbar at 320px. */
.btn-block { width: 100%; white-space: normal; text-align: center; line-height: 1.35; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; font-weight: 600; font-size: .93rem;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
  transition: gap .18s ease, border-color .18s ease;
}
.link-arrow:hover { gap: .6rem; border-bottom-color: var(--accent); }
.on-dark .link-arrow { color: #dda878; border-bottom-color: rgba(221,168,120,.4); }

/* ---------- hero ----------
   Warm charcoal, cream text, and the photograph is a SMALL card beside the
   words rather than a full-bleed background. A big photo of a house that is not
   this house was the thing that read as misleading. */
.hero { background: var(--ink); color: #f4efe7; border-bottom: 1px solid var(--line); }
.hero .display, .hero h1 { color: #fff; }
.hero .lede { color: #c8bbac; }
.hero .fine { color: #9e9083; }
.hero .ticks li::before { border-color: #dda878; }
.hero .badge { background: rgba(244,239,231,.07); border-color: rgba(244,239,231,.24); color: #e6dccd; }
.hero .badge .dot { background: #dda878; }
.hero .motto { color: #dda878; }
.hero .btn-ghost { color: #fff; border-color: rgba(244,239,231,.32); }
.hero .btn-ghost:hover { background: rgba(244,239,231,.09); border-color: rgba(244,239,231,.55); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-photo { max-width: 380px; }
.hero-photo .figure { border-color: rgba(244,239,231,.18); background: #221c16; }
.hero-photo .photo-note { color: #9e9083; }
.hero-inner { padding-block: clamp(40px, 6.5vw, 84px); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: 1.1rem; }
.hero-lede { margin-top: 1.1rem; }
.hero-cta { margin-top: 1.8rem; }
.hero-fine { margin-top: 1rem; }
.hero-points {
  list-style: none;
  margin: clamp(24px, 3.2vw, 38px) 0 0;
  padding: 0;
  display: grid;
  gap: .7rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}
@media (max-width: 620px) { .hero-points { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 28px);
}
.card-hover { transition: border-color .18s ease, box-shadow .18s ease; }
.card-hover:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.card-flat { border: 0; padding: 0; background: transparent; }
.on-dark .card { background: #221c16; border-color: rgba(255,255,255,.13); color: #f4efe7; }
.card-accent { border-left: 3px solid var(--accent); }

/* ---------- small, honest photography ----------
   Nothing full bleed and nothing large. Every photo is captioned, because
   these are licensed stock images and not photographs of the home. */
.figure {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure-4x3 { aspect-ratio: 4 / 3; }
.figure-3x2 { aspect-ratio: 3 / 2; }
.figure-16x9 { aspect-ratio: 16 / 9; }
.figure-1x1 { aspect-ratio: 1 / 1; }
.figure-tall { aspect-ratio: 4 / 5; }
/* the ceiling that keeps "small" small, whatever the aspect ratio */
.photo { max-width: 400px; }
.photo-wide { max-width: 620px; }
.figure-cap {
  position: absolute; left: 8px; bottom: 8px;
  padding: 4px 9px;
  border-radius: var(--r-sm);
  background: rgba(23, 19, 15, .74);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
}
.photo-note { font-size: .74rem; color: var(--ink-3); margin-top: .5rem; }

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.75rem; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 1px; top: .42em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.on-dark .ticks li::before { border-color: #dda878; }

.crosses li::before {
  left: 0; top: .48em;
  width: 10px; height: 10px;
  border: 0;
  transform: none;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--ink-4) 44%, var(--ink-4) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--ink-4) 44%, var(--ink-4) 56%, transparent 56%);
}

/* Plain, unnumbered blocks. These used to carry an 01/02/03 sequence; the
   numbers were decoration and are gone. */
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.rule-list > li { border-bottom: 1px solid var(--line); padding: clamp(16px, 2vw, 22px) 0; }
.rule-list h3 { margin: 0 0 .35rem; }
.rule-list p { margin: 0; color: var(--ink-2); font-size: .94rem; max-width: 62ch; }
.rule-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.on-dark .rule-list, .on-dark .rule-list > li { border-color: rgba(255,255,255,.13); }
.on-dark .rule-list p { color: #c8bbac; }
@media (max-width: 820px) { .rule-list-2 { grid-template-columns: minmax(0, 1fr); } }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps li { padding: clamp(16px, 2vw, 22px) 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps h3 { margin-bottom: .35rem; }
.steps p { margin: 0; }
.on-dark .steps li { border-color: rgba(255,255,255,.13); }

/* Numbers appear only where the number is a fact. */
.figures, .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.figures > div, .stat { padding: clamp(16px, 2vw, 24px); }
.figures > div + div, .stat + .stat { border-left: 1px solid var(--line); }
.figures .n, .stat-n {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  display: block;
  color: var(--ink);
}
.figures .l, .stat-l { font-size: .82rem; color: var(--ink-3); margin-top: .45rem; display: block; line-height: 1.4; }
@media (max-width: 760px) {
  .figures, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(3), .stat:nth-child(3) { border-left: 0; }
  .figures > div:nth-child(-n+2), .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

.partner { border-top: 1px solid var(--line); padding: 13px 0; font-size: .97rem; font-weight: 500; min-width: 0; }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.3rem; }

/* ---------- accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 40px 17px 0;
  position: relative;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  background:
    linear-gradient(to bottom, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
    linear-gradient(to right,  transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
  opacity: .45;
  transition: transform .25s ease, opacity .2s ease;
}
.faq details[open] summary::after { transform: rotate(135deg); opacity: .8; }
.faq .faq-body { padding: 0 40px 20px 0; color: var(--ink-2); max-width: 70ch; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field > label, .field-label { font-size: .87rem; font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--ink-3); line-height: 1.45; }
.req { color: var(--accent); font-weight: 700; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  /* A <select> takes its intrinsic width from its longest option, and that
     min-content floor propagates all the way up: one long option pushed the
     whole page to 374px wide in a 320px window. */
  min-width: 0;
  font-size: 16px;      /* iOS zooms the page on focus below this */
  line-height: 1.5;
  padding: 12px 14px;
  min-height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 120px; resize: vertical; padding-top: 11px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b6b5e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }

.field-row { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
@media (max-width: 620px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  cursor: pointer;
  font-size: .91rem;
  line-height: 1.5;
  min-width: 0;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer;
}
.check-card {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 13px 15px;
  background: var(--paper);
  transition: border-color .16s ease, background .16s ease;
}
.check-card:hover { border-color: var(--ink-4); }
.check-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }

.consent-box {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  padding: clamp(14px, 1.8vw, 18px);
  display: grid;
  gap: .9rem;
}

.form-note {
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: .89rem;
  line-height: 1.5;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.form-note.warn   { background: var(--warn-tint);   border-color: var(--warn-line); }
.form-note.ok     { background: var(--ok-tint);     border-color: var(--ok-line); }
.form-note.danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Browsers give <fieldset> an implicit min-inline-size: min-content that no
   grid sizing overrides. */
fieldset { min-inline-size: 0; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .9rem; }
.fieldset legend { padding: 0; font-size: 1.08rem; font-weight: 600; letter-spacing: -.012em; margin-bottom: .2rem; }
.form-section { padding-top: clamp(20px, 2.4vw, 28px); margin-top: clamp(6px, 1vw, 12px); border-top: 1px solid var(--line); }
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.form, .field, .field-row, .check { min-width: 0; }

/* ---------- crisis bar ---------- */
.crisis {
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .82rem;
  line-height: 1.45;
  padding: 8px 0;
}
.crisis .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; align-items: center; justify-content: center; text-align: center; }
.crisis a { color: var(--danger); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(154,59,48,.3); }
.crisis a:hover { border-bottom-color: var(--danger); }
.crisis strong { color: var(--ink); }
.c-short { display: none; }
@media (max-width: 700px) {
  /* Three lines of prose cost 110px of an 844px phone screen before the visitor
     sees anything. The numbers matter; the sentence around them does not. */
  .crisis { font-size: .78rem; padding: 7px 0; }
  .crisis .wrap { gap: .15rem .9rem; }
  .c-long { display: none; }
  .c-short { display: inline; }
}

/* ---------- page header ---------- */
.page-head {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(34px, 5vw, 62px);
}
.page-head .lede { margin-top: .9rem; }
.breadcrumb { font-size: .8rem; color: var(--ink-3); margin-bottom: .8rem; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

/* Older markup wrapped page headers and CTA bands in a full-bleed photograph.
   Those are suppressed rather than deleted from every page: a big image behind
   the headline is exactly what made the site feel misleading. */
.page-head-media, .band-media, .hero-media, .hero-scrim, .plate-media { display: none !important; }
.band, .plate { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); }
.band::after, .plate::before { display: none !important; }
.band .on-dark, .plate .on-dark { background: transparent; color: var(--ink); }
.band .on-dark .h1, .plate .on-dark .h1,
.band .on-dark .h2, .plate .on-dark .h2,
.band .on-dark .display, .plate .on-dark .display { color: var(--ink); }
.band .on-dark .lede, .plate .on-dark .lede { color: var(--ink-2); }
.band .btn-on-dark, .plate .btn-on-dark { background: var(--accent); color: #fff; }
.band .btn-on-dark:hover, .plate .btn-on-dark:hover { background: var(--accent-2); }
.band .btn-ghost-on-dark, .plate .btn-ghost-on-dark { color: var(--ink); border-color: var(--line-2); }
.band .btn-ghost-on-dark:hover, .plate .btn-ghost-on-dark:hover { background: var(--paper-3); }
.band .eyebrow, .plate .eyebrow,
.band .motto, .plate .motto { color: var(--accent); }
.band .fine, .plate .fine { color: var(--ink-3); }
.plate-inner { padding-block: var(--section-y); }
.pull { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.35; letter-spacing: -.02em; font-weight: 600; max-width: 34ch; }
.pull-wide { max-width: 46ch; }

/* No decorative numbering anywhere. */
.sec-num, .card-num { display: none !important; }
.sec-head { margin-bottom: clamp(24px, 3.4vw, 44px); }
.sec-head-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 52px); align-items: start; }
@media (max-width: 860px) { .sec-head-split { grid-template-columns: minmax(0, 1fr); } }

/* neutralise the old editorial helpers */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.ed-text { max-width: 58ch; }
.ed-bleed-right, .ed-bleed-left { margin-inline: 0; }
@media (max-width: 999px) { .ed { grid-template-columns: minmax(0, 1fr); } }
.grain::after { display: none !important; }
.cue { display: none; }

/* ---------- prose / legal ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 2.1rem 0 .8rem; letter-spacing: -.018em; }
.prose h3 { font-size: 1rem; margin: 1.6rem 0 .45rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.1rem 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); width: 34%; }
.toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 2.2rem; }
.toc ul { list-style: none; padding: 0; display: grid; gap: .4rem; margin: 0; }
.toc a { color: var(--ink-2); text-decoration: none; font-size: .91rem; }
.toc a:hover { color: var(--accent); }
.updated { font-size: .82rem; color: var(--ink-3); margin-bottom: 1.8rem; }

/* A value only the operator can supply. Deliberately loud: a placeholder that
   looks like real content is how a fictional license number goes live. */
.fill {
  background: var(--warn-tint);
  border-bottom: 1px dashed var(--warn-line);
  color: var(--warn);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
}
.langs { display: grid; gap: .8rem; margin: 1.2rem 0; }
.langs p { margin: 0; font-size: .88rem; line-height: 1.55; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.langs p:last-child { border-bottom: 0; }
.langs .ln { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .2rem; }
.langs [dir="rtl"] { text-align: right; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  padding-block: clamp(38px, 5vw, 58px) 22px;
  font-size: .92rem;
}
.footer-motto { display: none; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 44px);
  padding-bottom: clamp(26px, 3.4vw, 38px);
  border-bottom: 1px solid var(--line);
}
.footer-col h4 { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); margin-bottom: .8rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-col a { text-decoration: none; color: var(--ink-2); }
.footer-col a:hover { color: var(--accent); }
.footer-brand .brand-name { color: var(--ink); }
.footer-bottom {
  padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--ink-3);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.footer-legal a { text-decoration: none; color: var(--ink-3); }
.footer-legal a:hover { color: var(--accent); }
.footer-disclaimer {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.6; color: var(--ink-3);
  max-width: 92ch;
}
.footer-disclaimer a { color: var(--ink-2); }

/* The vendor credit. Last line, quiet, and centred so it reads as a signature
   rather than as another thing the reader is meant to do. Same colours as the
   disclaimer above it: this footer is CREAM, not dark, so --ink-3 is 4.95:1
   here. Do not copy this rule to a site with a dark footer without
   re-measuring, which is the mistake the shared floors file already documents. */
.footer-credit {
  margin-top: 14px;
  font-size: .78rem;
  color: var(--ink-3);
  text-align: center;
}
.footer-credit a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.footer-credit a:hover { color: var(--accent-text, var(--ink)); border-bottom-color: currentColor; }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: .06s; }
.js .reveal-d2 { transition-delay: .12s; }
.js .reveal-d3 { transition-delay: .18s; }

/* ---------- accessibility ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 11px 18px;
  border-radius: 0 0 var(--r-sm) 0; text-decoration: none; font-weight: 600;
}
.skip:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ---------- print ---------- */
@media print {
  .site-header, .nav-sheet, .crisis, .site-footer, .btn, .burger { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page-head { background: #fff; padding-block: 0; border: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   PORTAL  (/portal and /activate)
   --------------------------------------------------------------------------
   A branded sign-in page rather than the netlify-identity-widget modal. The
   widget is a third-party script that draws a dialog we cannot style, on a
   site whose whole point is looking like itself.
   ========================================================================== */
body.auth { background: var(--paper-2); }
.auth-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 48px) var(--gutter);
}
.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 38px);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.auth-brand img { flex: 0 0 auto; }
.auth-brand b { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; display: block; }
.auth-brand-sub {
  display: block;
  font-size: .63rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

/* the Show/Hide control sits inside the field, so the input needs room for it */
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 74px; }
.pass-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
  min-height: 36px;
  border-radius: var(--r-sm);
}
.pass-toggle:hover { color: var(--accent); background: var(--paper-2); }

.hint.err { color: var(--danger); font-weight: 500; }
input[aria-invalid="true"] { border-color: var(--danger); }
.auth-card a { color: var(--accent); }
/* the brand lockup is a link, but it is a wordmark rather than a link to read */
.auth-brand, .auth-brand:hover { color: var(--ink); }

/* ==========================================================================
   PHONE SPACING
   --------------------------------------------------------------------------
   "Crammed on mobile" was a measurement rather than a taste, and the numbers
   are in tools/measure-mobile.js. What it found at 390px:

     - h1 to h5 carry `margin: 0`, so every gap under a heading comes from the
       NEXT element's own top margin. Where that element has none, the heading
       sits flush against it: measured 0px between "We welcome adults who" and
       the list under it, on the homepage and again on /the-home.
     - a bare paragraph under an h3 got 6px, which at 17px type reads as one
       block of text rather than a heading and an answer.
     - tick lists ran at .7rem between items, and those items wrap to two and
       three lines on a phone, so the space between items was smaller than the
       space between lines inside one.

   Rules here are ADJACENT-SIBLING and deliberately narrow. A blanket
   `h2 + * { margin-top }` would have flattened the places that were already
   right: /who-we-serve and /our-role already give a `.muted` paragraph 16px,
   and setting every case to one value would have taken those DOWN. The check
   is to re-run the measurement after changing anything here, not to read it.

   Appended last so these win at equal specificity.
   ========================================================================== */

@media (max-width: 700px) {
  /* a heading and the thing it introduces */
  .section h2 + ul, .section h3 + ul,
  .section h2 + ol, .section h3 + ol,
  .plate h2 + ul, .plate h3 + ul,
  .band h2 + ul, .band h3 + ul { margin-top: .85rem; }

  /* A paragraph under a heading. `.muted` is included rather than left alone
     because it is NOT consistent: measured 16px under an h3 on /the-home, 6px
     on /who-we-serve and 0px on the homepage's form message, all from the same
     class. 1rem is at or above every one of those, so this only ever loosens. */
  main h2 + p, main h3 + p { margin-top: 1rem; }
  main h2 + p.lede, main h3 + p.lede { margin-top: 1rem; }

  /* items that wrap need more between them than the lines inside them carry */
  .ticks { gap: .95rem; }
  .ticks li { line-height: 1.55; }

  /* `.steps p { margin: 0 }` is (0,1,1) and beats the `main h3 + p` rule above
     it, which is (0,0,3), so the sibling rule could not reach these at all and
     they stayed at .35rem. Raising the heading's OWN bottom margin is what
     works, and it has to be written at the same weight as the base rule to
     win. This is the same specificity trap the dashboard's selected row and
     the quiz options hit: check the base rule's SHAPE, not where it sits. */
  .steps h3 { margin-bottom: .7rem; }
  .steps li { padding-block: clamp(20px, 4vw, 26px); }

  /* `.rule-list` is the same trap: `.rule-list h3 { margin: 0 0 .35rem }` and
     `.rule-list p { margin: 0 }` are both (0,1,1), so no sibling rule reaches
     them either. It is the homepage's main list of what the house provides. */
  .rule-list h3 { margin-bottom: .7rem; }
  .rule-list > li { padding-block: clamp(20px, 4vw, 26px); }


  /* The gap between one block of the page and the next. The base is
     clamp(52px, 7vw, 100px), which at 390px resolves to the 52px floor: the vw
     term never engages on a phone, so the only way to give a phone more room
     is to raise the FLOOR. A first attempt used clamp(46px, 9vw, 62px) and
     made it tighter, not looser, which is exactly what re-measuring is for. */
  :root { --section-y: clamp(62px, 9vw, 78px); }
  .section-sm { padding-block: clamp(44px, 7vw, 60px); }
}

@media (max-width: 480px) {
  /* Narrower still: the side gutter is what stops text touching the glass, so
     it holds, and the extra room comes out of the vertical rhythm instead. */
  .ticks { gap: 1rem; }
  main h3 + p { margin-top: 1.05rem; }
}

/* ==========================================================================
   THE BROCHURE PAGE
   --------------------------------------------------------------------------
   /brochure is the address printed on the trifold's QR code, so assume the
   reader is standing somewhere holding the paper version and looking at a
   phone. That is what the two decisions here are for: the download row comes
   before the pictures, and the pictures are PANELS rather than pages.
   ========================================================================== */

.bro-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(26px, 4vw, 40px);
}

/* The primary button carries a second line saying what you are about to
   download. `.btn` is `white-space: nowrap` and a centred row, both of which
   have to be undone for a two-line label, or the sub-line sits beside the
   words instead of under them and sets a min-content floor wide enough to
   push the button off a 320px screen. */
.bro-dl {
  flex-direction: column;
  gap: 3px;
  white-space: normal;
  text-align: center;
  padding-block: 12px;
  line-height: 1.25;
}
.bro-dl-sub {
  font-size: .78rem;
  font-weight: 500;
  opacity: .82;
}

/* auto-fit rather than a fixed three: at 6 panels a hard column count leaves
   an orphan on the last row at most widths, and the panels are all one
   aspect ratio so letting them find their own count reads better. */
.bro-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  max-width: 1120px;
  margin-inline: auto;
}

.bro-panel {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.bro-panel:hover {
  border-color: var(--ink-4);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(60, 45, 30, .10);
}
.bro-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The intrinsic width/height attributes hold the space before the image
   decodes, so the grid does not reflow six times on a slow connection. */
.bro-panel img {
  display: block;
  width: 100%;
  height: auto;
}
.bro-cap {
  display: block;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 640px) {
  /* One panel per row. Two columns of a portrait panel on a phone is 165px
     wide, which is the unreadable thing this page exists to avoid. */
  .bro-panels { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  /* Full-width actions: three buttons wrapping into an uneven stack reads as
     a broken row, and a thumb wants the whole width anyway. */
  .bro-acts { flex-direction: column; align-items: stretch; }
  .bro-acts .btn { width: 100%; }
}

/* ==========================================================================
   THE MOBILE MENU ON A SHORT SCREEN
   --------------------------------------------------------------------------
   The height that matters is not the phone's screen, it is what is left after
   the browser's own bars: roughly 660 to 700px on a handset whose spec sheet
   says 844. Measured with the menu open at 390px wide, the sheet's content ran
   776px, so the last thing in it (the phone number) sat below the fold. The
   sheet does scroll, so nothing was unreachable, but a menu you have to scroll
   to find the call button in is a menu that reads as cut off, which is what it
   was reported as.

   So the rows compact on a short viewport rather than the type shrinking on a
   narrow one: this is a height problem and the fix belongs on the height axis.
   Nothing here goes below a 44px tap target.
   ========================================================================== */

/* The two buttons at the foot of the sheet are <a> elements INSIDE
   .nav-sheet, so `.nav-sheet a` reaches them: (0,1,1) beats `.btn` at (0,1,0),
   and it was winning with `justify-content: space-between`, `padding: 15px 0`
   and a bottom border. The result was a button whose label sat flush against
   its own left edge with no horizontal padding at all, which is the other half
   of the "no padding" report. `.nav-sheet-foot .btn` is (0,2,0) and takes it
   back. Same specificity trap as the selected row in the CRM: check the shape
   of the rule you are fighting, not where it sits in the file. */
.nav-sheet-foot .btn {
  justify-content: center;
  padding: 15px 24px;
  border-bottom: 1px solid transparent;
  font-size: 1rem;
}
.nav-sheet-foot .btn-ghost { border-color: var(--line-2); }

@media (max-height: 740px) {
  .nav-sheet {
    padding-top: calc(var(--sheet-top, calc(var(--nav-h) + 56px)) + 12px);
  }
  /* 15px + 15px of padding on eight rows is 240px, the single biggest block of
     space in the sheet. At 10px it is 160px, and the row is still 46px tall. */
  .nav-sheet a {
    padding: 10px 0;
    font-size: 1.08rem;
  }
  .nav-sheet-foot {
    padding-top: 14px;
    gap: 8px;
  }
}

@media (max-height: 620px) {
  /* A phone held sideways, or an SE. Nothing left to give but the gaps. */
  /* min-height rather than arithmetic on the padding: the row height is
     padding x2 plus a line box, and at 8px that came out 43px, one pixel under
     the tap-target floor. State the floor and let the padding be whatever is
     left. */
  .nav-sheet a { padding: 8px 0; min-height: 44px; font-size: 1.02rem; }
  .nav-sheet-foot { padding-top: 10px; }
  .nav-sheet-foot .btn { min-height: 46px; padding-block: 11px; }
}