/* ===================================
   LOCAL-DESIGN BASE
   Design system: sharp corners, strong hierarchy, high contrast.
   Fill in --color-primary and --font-heading from intake + Stitch output.
   =================================== */

:root {
  /* Colors — OVERRIDE from intake */
  --color-primary: #1a1a1a;
  --color-primary-ink: #ffffff;
  --color-accent: #e63946;
  --color-ink: #0a0a0a;
  --color-body: #333333;
  --color-muted: #6b6b6b;
  --color-line: #e5e5e5;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-success: #16a34a;
  --color-error: #dc2626;

  /* Typography — OVERRIDE from typography-system.md */
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Scale */
  --fs-h1: clamp(2.5rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --header-h: 72px;

  /* NO rounded corners — design rule */
  --radius: 0;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
h4 { font-size: 1.125rem; font-weight: 700; }

.overline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-accent);
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
.container-narrow { max-width: var(--container-narrow); }

section { padding-block: var(--s-6); }
@media (min-width: 768px) { section { padding-block: var(--s-7); } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-ink); }
.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-secondary:hover { background: var(--color-ink); color: #fff; }
.btn-call {
  background: var(--color-ink);
  color: #fff;
  text-decoration: none;
}
.btn-call:hover { background: var(--color-accent); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  height: var(--header-h);
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-header nav { display: none; gap: var(--s-3); }
.site-header nav a { text-decoration: none; font-weight: 600; }
.site-header nav a:hover { color: var(--color-accent); }
/* Nav breakpoint is 1024px, not the 768px the rest of the layout uses.
   Six items plus the logo and the call button do not fit below that:
   at 900px Contact slid under the phone button and at 768px the logo
   was overlapped and two items wrapped to a second line. Tablet widths
   get the hamburger, which scrolls. */
@media (min-width: 1024px) { .site-header nav { display: flex; } }

.header-call { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.625rem 1rem; background: var(--color-ink); color: #fff; text-decoration: none; font-weight: 700; }
.header-call span { display: none; }
@media (min-width: 480px) { .header-call span { display: inline; } }

/* Hero */
.hero {
  background: var(--color-bg-alt);
  padding-block: var(--s-5);
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s-6); }
  .hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-5); align-items: center; }
}
.hero h1 { margin-bottom: var(--s-2); }
.hero .subhead { font-size: 1.25rem; color: var(--color-body); margin-bottom: var(--s-3); max-width: 52ch; }
.hero .trust-pill { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.5rem 1rem; background: var(--color-ink); color: #fff; font-weight: 700; font-size: 0.875rem; margin-bottom: var(--s-3); }

/* Lead form card */
.lead-form {
  background: var(--color-bg);
  padding: var(--s-3);
  border: 2px solid var(--color-ink);
}
.lead-form h2 { font-size: 1.5rem; margin-bottom: var(--s-2); }
.lead-form .form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.lead-form label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--color-line);
  background: #fff;
  font-size: 1rem;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-ink);
}
.lead-form textarea { min-height: 100px; resize: vertical; }
.lead-form .btn { width: 100%; }
.lead-form .hp { position: absolute; left: -9999px; }
.lead-form .form-note { font-size: 0.8125rem; color: var(--color-muted); margin-top: var(--s-1); text-align: center; }

/* Trust bar */
.trust-bar { background: var(--color-ink); color: #fff; padding-block: var(--s-3); }
.trust-bar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  text-align: center;
}
@media (min-width: 768px) { .trust-bar ul { grid-template-columns: repeat(5, 1fr); } }
.trust-bar li { font-weight: 700; font-size: 0.9375rem; }
.trust-bar li span { display: block; font-size: 1.25rem; color: var(--color-accent); margin-bottom: 0.25rem; }

/* Services grid */
.services-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: block;
  padding: var(--s-3);
  background: var(--color-bg);
  border: 2px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.service-card:hover { border-color: var(--color-ink); background: var(--color-bg-alt); }
.service-card h3 { margin-bottom: var(--s-1); }
.service-card .arrow { display: inline-block; margin-top: var(--s-2); font-weight: 800; color: var(--color-accent); }

/* Social proof */
.reviews { background: var(--color-bg-alt); }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: #fff; padding: var(--s-3); border: 2px solid var(--color-line); }
.review-card .stars { color: #f59e0b; font-size: 1.125rem; margin-bottom: var(--s-1); letter-spacing: 2px; }
.review-card blockquote { font-style: italic; margin-bottom: var(--s-2); }
.review-card cite { font-style: normal; font-weight: 700; display: block; }
.review-card cite span { display: block; font-weight: 400; font-size: 0.875rem; color: var(--color-muted); }

/* FAQ */
.faq details {
  border-bottom: 2px solid var(--color-line);
  padding-block: var(--s-2);
}
.faq summary {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.5rem;
  color: var(--color-accent);
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: var(--s-2); }

/* Final CTA */
.cta-band {
  background: var(--color-ink);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--s-2); }
.cta-band p { font-size: 1.125rem; margin-bottom: var(--s-3); }

/* Footer */
.site-footer {
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--s-5) var(--s-3);
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; }
.site-footer .footer-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.site-footer h4 { color: #fff; margin-bottom: var(--s-2); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer .footer-bottom {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
}

/* Sticky mobile CTA */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta a {
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9375rem;
  font-family: var(--font-heading);
}
.mobile-cta .call { background: var(--color-ink); color: #fff; }
.mobile-cta .quote { background: var(--color-accent); color: #fff; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* Breadcrumbs */
.breadcrumbs {
  padding-block: var(--s-2);
  font-size: 0.875rem;
  color: var(--color-muted);
}
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-ink); }
.breadcrumbs span[aria-current] { color: var(--color-ink); font-weight: 600; }

/* Utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mb-3 { margin-bottom: var(--s-3); }

/* ===================================================================
   CAMARILLO CUSTOM CABINETS — brand layer
   Overrides + components added on top of the local-design base.
   Palette: charcoal + burnt orange. Sharp corners retained throughout.
   Contrast audited: accent #C2410C on white = 5.18:1 (AA normal text),
   white on accent = 5.18:1, muted #6B6B73 on #F7F5F2 = 4.7:1 (AA).
   Accent is never used as text on the dark ink background; the lighter
   --color-accent-hi (#FB923C, 8.1:1 on ink) is used there instead.
   =================================================================== */

:root {
  --color-primary: #16161A;
  --color-primary-ink: #ffffff;
  --color-accent: #C2410C;
  --color-accent-deep: #9A3412;
  --color-accent-hi: #FB923C;
  --color-ink: #16161A;
  --color-ink-soft: #24242B;
  --color-body: #35353D;
  --color-muted: #6B6B73;
  --color-line: #E2DED8;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F5F2;
  --color-bg-warm: #EFEBE5;

  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --header-h: 68px;
  --announce-h: 40px;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; }
h2 { margin-bottom: var(--s-2); }
p + p { margin-top: var(--s-2); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.section-alt { background: var(--color-bg-alt); }
.section-warm { background: var(--color-bg-warm); }
.section-head { max-width: 60ch; margin-bottom: var(--s-4); }
.section-head.center { margin-inline: auto; text-align: center; }
.lede { font-size: 1.125rem; color: var(--color-body); }

/* ---------- Announcement bar ---------- */
.announcement-bar {
  background: var(--color-accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: var(--announce-h);
  display: flex;
  align-items: center;
}
.announcement-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-1) var(--s-3);
  text-align: center;
  padding-block: 0.5rem;
}
.announcement-bar strong { font-weight: 800; }

/* ---------- Header ---------- */
.site-header { border-bottom: 2px solid var(--color-ink); }
.site-header .logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header nav a { font-size: 0.9375rem; letter-spacing: 0.01em; }
.site-header nav a[aria-current="page"] { color: var(--color-accent); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  cursor: pointer;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Just over the breakpoint the six items cleared the call button by 3px,
   which is not a margin, it is a coincidence. Tightening the gap and the type
   a little between 1024 and 1200 turns that into real space. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-header nav { gap: var(--s-2); }
  .site-header nav a,
  .site-header .nav-group-label { font-size: 0.875rem; }
}

#primary-nav.open {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-ink);
  padding: var(--s-2) var(--s-3);
}
#primary-nav.open a { padding-block: 0.75rem; border-bottom: 1px solid var(--color-line); }
.site-header > .container { position: relative; }

.header-call {
  border: 2px solid var(--color-ink);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.header-call span { display: inline; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--s-5);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(22,22,26,0.94) 0%, rgba(22,22,26,0.82) 45%, rgba(22,22,26,0.55) 100%);
  z-index: 1;
}
.hero > .container { position: relative; z-index: 2; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero h1 { color: #fff; }
.hero .subhead { color: rgba(255,255,255,0.86); }
.hero .overline { color: var(--color-accent-hi); }

.hero-bullets { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: 0.625rem; }
@media (min-width: 480px) { .hero-bullets { grid-template-columns: 1fr 1fr; } }
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.92);
}
.hero-bullets svg { flex: none; margin-top: 2px; color: var(--color-accent-hi); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero .btn-secondary { color: #fff; border-color: #fff; }
.hero .btn-secondary:hover { background: #fff; color: var(--color-ink); }

/* ---------- Lead form ---------- */
/* Explicit color: the form card sits inside .hero and .cta-form-band, both of
   which set color:#fff. Without this reset the label text renders white on the
   white card and disappears. */
.lead-form { border-color: var(--color-accent); box-shadow: none; color: var(--color-body); }
.lead-form label { color: var(--color-ink); }
.lead-form .form-kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}
.lead-form h2 { font-size: 1.375rem; line-height: 1.15; }
.lead-form .form-sub { font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--s-2); }
.lead-form .req { color: var(--color-accent); }
.lead-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.form-error { color: var(--color-error); margin-bottom: var(--s-2); font-weight: 600; font-size: 0.9375rem; }
.form-error a { color: var(--color-error); font-weight: 800; }
.form-success { background: var(--color-bg); border: 2px solid var(--color-success); padding: var(--s-3); }
.form-success h3 { color: var(--color-success); margin-bottom: var(--s-1); }
.form-success-alt { font-size: 0.9375rem; color: var(--color-muted); margin-top: var(--s-2); }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--color-ink-soft); border-block: 2px solid var(--color-accent); }
.trust-bar li span { color: var(--color-accent-hi); }
.trust-bar li strong { display: block; font-size: 1.0625rem; }
.trust-bar li em { display: block; font-style: normal; font-weight: 400; font-size: 0.8125rem; color: rgba(255,255,255,0.72); }

/* ---------- Services grid ---------- */
.service-card { border-color: var(--color-line); }
.service-card:hover { border-color: var(--color-accent); background: #fff; }
.service-card .service-icon { color: var(--color-accent); margin-bottom: var(--s-2); }
.service-card p { font-size: 0.9375rem; }
.service-card .arrow { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Why choose us ---------- */
.why-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card { background: #fff; border: 2px solid var(--color-line); border-top: 6px solid var(--color-accent); padding: var(--s-3); }
.why-card h3 { margin-bottom: var(--s-2); font-size: 1.1875rem; }
.why-card p { font-size: 0.9375rem; }

/* ---------- Stat chip ---------- */
.stat-chip {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 0.375rem 0.75rem;
  background: var(--color-bg-warm);
  border-left: 4px solid var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- Depth content sections ---------- */
.depth-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .depth-grid { grid-template-columns: repeat(2, 1fr); } }
.depth-item { padding: var(--s-3); background: #fff; border: 1px solid var(--color-line); }
.depth-item h3 { margin-bottom: var(--s-1); font-size: 1.125rem; }
.depth-item p { font-size: 0.9375rem; }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s-5); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s-3); margin-bottom: var(--s-1); }
.prose ul, .prose ol { margin: var(--s-2) 0; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--color-accent-deep); font-weight: 600; }

/* ---------- Process steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.steps li { counter-increment: step; padding-left: 3.25rem; position: relative; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.125rem;
}
.steps h3 { font-size: 1.0625rem; margin-bottom: 0.25rem; }
.steps p { font-size: 0.9375rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin-block: var(--s-3); border: 2px solid var(--color-ink); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
table.data caption { text-align: left; padding: var(--s-2); font-weight: 700; background: var(--color-bg-warm); border-bottom: 2px solid var(--color-ink); }
table.data th, table.data td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: top; }
table.data thead th { background: var(--color-ink); color: #fff; font-family: var(--font-heading); font-weight: 800; }
table.data tbody tr:nth-child(even) { background: var(--color-bg-alt); }
table.data td strong { color: var(--color-ink); }

/* ---------- Callout band (dark, accent-ruled) ---------- */
.callout-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  background: var(--color-ink);
  color: #fff;
  border-left: 6px solid var(--color-accent);
  margin-block: var(--s-3);
}
.callout-band p { margin: 0; }
.callout-band strong { color: var(--color-accent-hi); display: block; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 800; }
/* margin-left:auto parks the button at the end of the row, which is right
   while the text and the button share a line. Once the band wraps, the same
   rule strands it off-centre: 40px of space on its left and 24px on its right
   at 375px. Below the wrap it becomes a full-width button instead, which is
   what every other call to action on a phone does here. */
.callout-band .btn { margin-left: auto; }
@media (max-width: 640px) {
  .callout-band .btn { margin-left: 0; flex: 1 0 100%; }
}

/* ---------- Mid-page CTA form band ---------- */
.cta-form-band { background: var(--color-ink); color: #fff; }
.cta-form-band h2 { color: #fff; }
.cta-form-band .lede { color: rgba(255,255,255,0.85); }
.cta-form-band .band-grid { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .cta-form-band .band-grid { grid-template-columns: 1fr 1fr; } }
.cta-form-band .band-points { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 0.625rem; }
.cta-form-band .band-points li { display: flex; gap: 0.5rem; font-size: 0.9375rem; color: rgba(255,255,255,0.9); }
.cta-form-band .band-points svg { flex: none; margin-top: 3px; color: var(--color-accent-hi); }

/* ---------- Trust / credential callouts (replaces review grid) ---------- */
.credential-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .credential-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .credential-grid { grid-template-columns: repeat(4, 1fr); } }
.credential-card { background: #fff; border: 2px solid var(--color-line); padding: var(--s-3); }
.credential-card .credential-icon { color: var(--color-accent); margin-bottom: var(--s-2); }
.credential-card h3 { font-size: 1.0625rem; margin-bottom: var(--s-1); }
.credential-card p { font-size: 0.875rem; color: var(--color-body); }

/* ---------- Service area ---------- */
.area-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .area-list { grid-template-columns: repeat(4, 1fr); } }
.area-list li { border-left: 3px solid var(--color-accent); padding-left: 0.625rem; font-weight: 600; font-size: 0.9375rem; }
.area-list a { text-decoration: none; }
.area-list a:hover { color: var(--color-accent-deep); text-decoration: underline; }

.city-links { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.city-links a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--color-line);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  background: #fff;
}
.city-links a:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }

/* ---------- Related services ---------- */
.related-grid { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card { display: block; padding: var(--s-2) var(--s-3); border: 2px solid var(--color-line); text-decoration: none; color: inherit; font-weight: 600; }
.related-card:hover { border-color: var(--color-accent); }
.related-card span { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--color-muted); margin-top: 0.25rem; }

/* ---------- Final CTA band ---------- */
.cta-band { border-top: 6px solid var(--color-accent); }
.cta-band .btn-secondary { color: #fff; border-color: #fff; }
.cta-band .btn-secondary:hover { background: #fff; color: var(--color-ink); }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }

/* ---------- Footer ---------- */
.site-footer a { text-decoration: none; color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-nap { margin-top: var(--s-2); font-style: normal; line-height: 1.7; color: rgba(255,255,255,0.82); }
.site-footer .footer-nap strong { color: #fff; }
.site-footer .footer-tag { color: rgba(255,255,255,0.72); margin-top: var(--s-2); font-size: 0.875rem; max-width: 40ch; }
.site-footer .footer-disclaimer { font-size: 0.75rem; color: rgba(255,255,255,0.55); max-width: 70ch; margin-top: var(--s-2); }

/* ---------- Mobile CTA + FAB ---------- */
.mobile-cta .call { background: var(--color-accent); }
.mobile-cta .quote { background: var(--color-ink); }
.mobile-cta a { border-top: 2px solid #fff; }

.call-fab {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 90;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s, background-color 0.15s;
}
.call-fab:hover { background: var(--color-ink); }
.call-fab.visible { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) { .call-fab { display: inline-flex; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--color-line); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Contact / hours ---------- */
.contact-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.hours-table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); }
.hours-table th, .hours-table td { text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.9375rem; }
.hours-table th { font-weight: 600; }
.hours-table td { text-align: right; color: var(--color-body); }

.map-frame { width: 100%; height: 340px; border: 2px solid var(--color-ink); margin-top: var(--s-3); }

/* ---------- Print ---------- */
@media print {
  .announcement-bar, .mobile-cta, .call-fab, .site-header, .cta-band { display: none !important; }
}

/* ===================================================================
   MOBILE REFINEMENTS
   At 375px the header's three items (logo 124 + toggle 33 + call 170)
   plus 48px of gutter added up to exactly 375px, so space-between had
   nothing left to distribute and they sat flush against each other.
   The nav toggle was also being squeezed to 33px, under the 44px
   minimum touch target. Fixed by tightening the gutter, giving the
   header a real gap, and pinning the toggle's size.
   =================================================================== */

@media (max-width: 767px) {
  /* 16px gutter buys 16px of breathing room back for the header row */
  .container { padding-inline: 1rem; }

  /* Announcement bar was 107px tall, 13% of an iPhone viewport, before
     the header even began. */
  .announcement-bar { font-size: 0.75rem; line-height: 1.35; }
  .announcement-bar .container {
    gap: 0.25rem;
    padding-block: 0.5rem;
    text-align: center;
  }

  .site-header > .container { gap: 0.625rem; }

  /* The logo is the only element allowed to shrink. */
  .site-header .logo { flex: 0 1 auto; min-width: 0; }
  .site-header .logo img { width: auto; max-width: 130px; height: auto; }

  /* Call button sits before the menu button so the phone number stays
     the most prominent control and both land under the thumb. */
  .header-call {
    order: 2;
    flex: none;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
  }

  .nav-toggle {
    order: 3;
    flex: none;
    width: 44px;
    height: 44px;
  }

  /* Trust bar stacked 2-up ran to 432px. */
  .trust-bar { padding-block: var(--s-2); }
  .trust-bar ul { gap: var(--s-2) var(--s-1); }
  .trust-bar li { font-size: 0.875rem; }
  .trust-bar li strong { font-size: 0.9375rem; }
  .trust-bar li span { font-size: 1rem; margin-bottom: 0.125rem; }

  /* Keep the hero readable without pushing the form far down the page */
  .hero { padding-block: var(--s-4); }
  .hero .subhead { font-size: 1.0625rem; }
  .hero-actions .btn { width: 100%; }

  /* Full-width tap targets for the primary actions */
  .cta-band .cta-actions .btn { width: 100%; }

  /* Sticky bottom bar overlaps the last section otherwise */
  main { padding-bottom: 64px; }
}

/* Narrow phones: drop the secondary announcement line and tighten
   the call button so the logo keeps a usable size. */
@media (max-width: 400px) {
  .header-call { font-size: 0.875rem; padding: 0.5rem 0.625rem; }
  .site-header .logo img { max-width: 112px; }
}

/* ===================================================================
   BUTTON CONTRAST INSIDE PROSE
   `.prose a` has specificity (0,1,1) and was beating `.btn-primary`
   (0,1,0), so the callout band's button label rendered in
   #9A3412 on a #C2410C background: 1.41:1, effectively unreadable.
   Buttons must keep their own colour wherever they appear.
   =================================================================== */
.prose a.btn,
.callout-band a.btn,
.cta-band a.btn,
.hero a.btn {
  text-decoration: none;
  font-weight: 800;
}

.prose a.btn-primary,
.callout-band a.btn-primary,
.cta-band a.btn-primary,
.hero a.btn-primary,
.prose a.btn-call {
  color: #fff;                 /* 5.18:1 on the accent */
}

.prose a.btn-primary:hover,
.callout-band a.btn-primary:hover {
  color: #fff;
  background: var(--color-ink);
}

.prose a.btn-secondary {
  color: var(--color-ink);
}

.cta-band a.btn-secondary,
.hero a.btn-secondary {
  color: #fff;
}

.cta-band a.btn-secondary:hover,
.hero a.btn-secondary:hover {
  color: var(--color-ink);
}

/* ===================================================================
   IMAGE BUCKETS
   Slots defined in build/images.py. An empty slot renders nothing, so
   these rules only ever apply to images that actually exist.
   =================================================================== */
.media {
  margin: var(--s-4) 0;
}
.media img { width: 100%; }
.media figcaption {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
  border-left: 3px solid var(--color-accent);
  padding-left: 0.625rem;
}
.prose .media { margin-inline: 0; }

/* Side-by-side copy and image */
.media-split {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
@media (min-width: 900px) {
  .media-split { grid-template-columns: 1.05fr 0.95fr; }
  .media-split.reverse > *:first-child { order: 2; }
}
.media-split .media { margin: 0; }

.gallery-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

.gallery-item {
  margin: 0;
  background: #fff;
  border: 2px solid var(--color-line);
}
.gallery-item img { width: 100%; }
.gallery-item figcaption {
  padding: var(--s-2);
  font-size: 0.875rem;
  color: var(--color-body);
  border-top: 2px solid var(--color-line);
}

/* Service card thumbnails */
.service-card .card-media { margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3); }
.service-card .card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ===================================================================
   NAV DROPDOWNS
   Desktop uses hover plus :focus-within so keyboard works without JS.
   Mobile shows the sublinks inline inside the already-open nav panel.
   =================================================================== */
.nav-group { position: relative; }
.nav-group-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.nav-group-label:hover { color: var(--color-accent); }

.nav-sub { display: none; }

@media (min-width: 1024px) {
  .site-header nav { align-items: center; }
  .nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    background: var(--color-bg);
    border: 2px solid var(--color-ink);
    border-top: 4px solid var(--color-accent);
    padding: 0.5rem 0;
    z-index: 60;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    /* A dropdown must never run past the bottom of the window. The Services
       panel measured 901px against an 820px laptop viewport, which put the
       last four rows out of reach with nothing to scroll. The grid below
       keeps it short enough that this rarely engages; it is here so that a
       short window, or a future service, cannot make items unreachable
       again. overscroll-behavior stops the page scrolling underneath once
       the menu hits its end. */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Services carries 14 items across 5 groups. Two balanced columns bring it
     from 20 rows to 10, which fits any laptop without scrolling. */
  /* NO `display` here. `.nav-sub { display: none }` is what keeps the panel
     hidden at rest, and this selector has equal specificity but comes later,
     so declaring display:grid on it overrode that and left the Services panel
     permanently rendered over the page, eating every click beneath it. The
     grid is applied only by the :hover / :focus-within rule above. */
  .nav-sub-wide {
    grid-template-columns: repeat(2, minmax(212px, 1fr));
    column-gap: 0.25rem;
    align-items: start;
  }
  .nav-sub-wide .nav-col { min-width: 0; }
  /* The first heading in each column is flush; later ones keep their rule. */
  .nav-sub-wide .nav-col > .nav-sub-group:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0.5rem;
  }
  .nav-sub-wide .nav-sub-all {
    grid-column: 1 / -1;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .nav-group:hover .nav-sub,
  .nav-group:focus-within .nav-sub { display: block; }
  /* The rule above is what actually reveals a panel, so it has to restore the
     grid for the wide one. Without this it sets display:block on hover and
     silently collapses the Services menu back to a single tall column. */
  .nav-group:hover .nav-sub-wide,
  .nav-group:focus-within .nav-sub-wide { display: grid; }
  /* Bridges the gap between label and panel so the menu does not
     close as the pointer travels down to it. */
  .nav-group::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
  }
  .nav-sub a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .nav-sub a:hover { background: var(--color-bg-alt); color: var(--color-accent-deep); }
  .nav-sub .nav-sub-all {
    margin-top: 0.375rem;
    border-top: 1px solid var(--color-line);
    font-weight: 700;
    color: var(--color-accent-deep);
  }
}

@media (max-width: 1023px) {
  /* The open mobile menu is a scroll container.
     It holds 31 links across two expanded groups and measured 1648px against
     an 812px phone viewport. The header is position:sticky, so scrolling the
     page does NOT bring the lower half into reach: it stays pinned and 19
     links sit permanently off-screen. The menu has to scroll itself.
     dvh rather than vh so the mobile browser's collapsing address bar does not
     leave the last item under the chrome; vh first as the fallback. */
  #primary-nav.open {
    /* 7.75rem = the announcement bar plus the header row. The menu opens
       124px down the screen when the page is at the top, and 66px down once
       the bar has scrolled away and the header pins, so this is sized for the
       taller of the two states. */
    max-height: calc(100vh - 7.75rem);
    max-height: calc(100dvh - 7.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #primary-nav.open .nav-group { display: block; }
  #primary-nav.open .nav-group-label {
    display: flex;
    justify-content: space-between;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--color-line);
    font-weight: 700;
  }
  #primary-nav.open .nav-group-label svg { display: none; }
  #primary-nav.open .nav-sub { display: block; padding-left: 0.75rem; }
  #primary-nav.open .nav-sub a {
    display: block;
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--color-line);
    font-size: 0.9375rem;
    color: var(--color-body);
    text-decoration: none;
  }
  #primary-nav.open .nav-sub .nav-sub-all { font-weight: 700; color: var(--color-accent-deep); }
}

/* ===================================================================
   HERO H1 AT SMALL SIZES
   The homepage H1 is a long brand-plus-services line (77 chars). At the
   default hero scale that ran to six lines on a 375px screen and pushed
   the primary Call button below the fold. Scaling the hero H1 down on
   phones keeps the CTA visible without shortening the copy.
   =================================================================== */
@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(1.75rem, 7.2vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
  }
  .hero .subhead { font-size: 1rem; margin-bottom: var(--s-2); }
  .hero-bullets { gap: 0.5rem; margin-bottom: var(--s-2); }
  .hero-bullets li { font-size: 0.875rem; }
}

/* ---------- Blog ---------- */
.post-meta {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-accent-deep);
  margin-bottom: var(--s-2);
}
.post-tags {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.prose .lede { font-size: 1.125rem; color: var(--color-ink); }
.post-links {
  margin-top: var(--s-4);
  padding: var(--s-3);
  background: var(--color-bg-warm);
  border-left: 4px solid var(--color-accent);
  font-size: 0.9375rem;
}
.service-card .arrow em { font-style: normal; color: var(--color-muted); font-weight: 400; }

/* ---------- Brand mentions linking home ----------
   Base styles set `a { color: inherit }`, so without this a brand link inside a
   card or hero would read as plain underlined text rather than a link. */
.brand-link {
  color: var(--color-accent-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brand-link:hover { color: var(--color-ink); text-decoration: none; }

/* On dark backgrounds the deep accent fails contrast, so use the light tone. */
.hero .brand-link,
.cta-form-band .brand-link,
.cta-band .brand-link,
.site-footer .brand-link,
.callout-band .brand-link { color: var(--color-accent-hi); }
.hero .brand-link:hover,
.cta-form-band .brand-link:hover,
.cta-band .brand-link:hover,
.site-footer .brand-link:hover { color: #fff; }

/* ---------- Services hub category groups ---------- */
.svc-group { margin-bottom: var(--s-6); }
.svc-group:last-child { margin-bottom: 0; }
.svc-group .section-head { margin-bottom: var(--s-3); }
.svc-group h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); }

/* ---------- Grouped nav dropdown ---------- */
.nav-sub-group {
  display: block;
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 800;
  color: var(--color-muted);
}
.nav-sub-group:not(:first-child) {
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-line);
  padding-top: 0.625rem;
}
@media (max-width: 1023px) {
  #primary-nav.open .nav-sub-group {
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    margin-top: 0.5rem;
  }
}

/* Optional-field marker on the lead form */
.lead-form .opt { font-weight: 400; color: var(--color-muted); font-size: 0.8125rem; }

/* Signature spec line: the concrete, checkable differentiators, first thing
   after the intro heading. */
.spec-line {
  font-size: 1.0625rem;
  border-left: 4px solid var(--color-accent);
  padding: 0.875rem 0 0.875rem 1.125rem;
  background: var(--color-bg-warm);
  margin-bottom: var(--s-3);
}

/* ---------- Decision tool ---------- */
.dt { max-width: 760px; margin-inline: auto; }
.dt-steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.dt-step { margin-bottom: var(--s-4); }
.dt-q {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.0625rem;
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  margin-bottom: var(--s-2);
}
.dt-num {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-ink); color: #fff;
  font-size: 0.875rem;
}
.dt-opts { display: grid; gap: 0.625rem; }
@media (min-width: 640px) { .dt-opts { grid-template-columns: repeat(3, 1fr); } }
.dt-opt {
  padding: 0.875rem 1rem;
  background: #fff;
  border: 2px solid var(--color-line);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 48px;
}
.dt-opt:hover { border-color: var(--color-accent); }
.dt-opt.is-on {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}
.dt-result {
  background: var(--color-ink);
  color: #fff;
  padding: var(--s-4);
  border-left: 6px solid var(--color-accent);
}
.dt-result h3 { color: #fff; margin-bottom: var(--s-2); }
.dt-result p { margin-bottom: var(--s-2); }
.dt-result-kicker {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800; color: var(--color-accent-hi); margin-bottom: 0.5rem;
}
.dt-range { font-weight: 700; color: var(--color-accent-hi); }
.dt-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.dt-actions .btn-secondary { color: #fff; border-color: #fff; }
.dt-actions .btn-secondary:hover { background: #fff; color: var(--color-ink); }
.dt-reset { text-align: center; margin-top: var(--s-3); }
.dt-reset-btn {
  background: none; border: none; cursor: pointer;
  font-weight: 700; color: var(--color-accent-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.dt-fallback { margin-top: var(--s-2); }
.dt-fallback li { margin-bottom: 0.5rem; }

/* ---------- Honeypot ----------
   Named "website" and hidden off-screen with CSS rather than type="hidden",
   so a bot parsing the DOM sees an ordinary text input and fills it. Never
   display:none -- some bots skip those. aria-hidden + tabindex="-1" keep it
   out of the accessibility tree and the tab order for real users. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Turnstile ---------- */
.cf-turnstile { margin-bottom: var(--s-2); min-height: 65px; }

/* ---------- Project minimum ----------
   Reuses .callout-band for the block form. The compact form sits inside the
   lead form, where it has to read as information rather than a warning: a red
   or boxed treatment here tested as a barrier, so it stays as quiet text. */
.min-callout strong { margin-bottom: .35rem; }
.min-note {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin: .5rem 0 0;
}

/* ---------- Cabinet cost estimator ---------- */
.est-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: start;
}
@media (min-width: 900px) {
  .est-grid { grid-template-columns: 1fr 22rem; }
  /* The figure has to stay in view while the specification is being changed,
     otherwise the cause and the effect are never on screen together. */
  .est-result { position: sticky; top: 6rem; }
  .est-toggle { display: none; }
}

/* On a phone the panel would otherwise sit below six fieldsets, so changing a
   material moves a number that is off screen. It becomes a compact sticky
   summary instead: the range stays visible while the specification changes,
   and the breakdown opens on demand rather than eating the viewport. */
@media (max-width: 899px) {
  .est-result {
    order: -1;
    position: sticky;
    top: 4rem;
    z-index: 40;
    padding: 0.875rem 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  .est-result .est-range { font-size: 1.375rem; }
  .est-result .est-lines,
  .est-result .est-why,
  .est-result .est-disclaimer,
  .est-result .est-actions { display: none; }
  .est-result.is-open .est-lines,
  .est-result.is-open .est-why,
  .est-result.is-open .est-disclaimer,
  .est-result.is-open .est-actions { display: block; }
  .est-result.is-open { max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; }
  .est-toggle {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.4rem 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--color-line);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-accent-deep);
    cursor: pointer;
    text-align: left;
  }
}

/* Clears the sticky header, and on mobile the sticky summary too, so a
   step scrolled to is never hidden behind them. */
.est-step { border: 0; padding: 0; margin: 0 0 var(--s-4); scroll-margin-top: 16rem; }
@media (min-width: 900px) { .est-step { scroll-margin-top: 7rem; } }
.est-step legend {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 0.375rem;
}
.est-num {
  display: inline-grid;
  place-items: center;
  width: 1.65rem; height: 1.65rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.875rem;
  border-radius: 50%;
  flex: none;
}
.est-help { font-size: 0.875rem; color: var(--color-muted); margin: 0 0 0.75rem; }

.est-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; }
.est-opt {
  display: block;
  position: relative;
  border: 2px solid var(--color-line);
  padding: 0.6875rem 0.875rem;
  cursor: pointer;
  background: var(--color-bg);
  transition: border-color .12s ease, background .12s ease;
}
.est-opt:hover { border-color: var(--color-accent); }
.est-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.est-opt-body { display: block; font-size: 0.9375rem; line-height: 1.35; }
.est-opt-body strong { display: block; font-weight: 600; color: var(--color-ink); }
.est-opt-body em { font-style: normal; font-size: 0.8125rem; color: var(--color-accent-deep); font-weight: 700; }
/* "Not sure yet" is a different kind of answer from a species, so it reads as
   one: dashed rather than solid, and set apart from the specific choices. */
.est-opt-span { border-style: dashed; }
.est-opt-span .est-opt-body strong { color: var(--color-muted); }
.est-opt-span:has(input:checked) .est-opt-body strong { color: var(--color-ink); }

.est-opt:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-bg-alt);
}
.est-opt:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.est-size label { display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 600; color: var(--color-ink); margin-bottom: 0.375rem; }
.est-size output { font-family: var(--font-heading); font-weight: 800; color: var(--color-accent-deep); }
.est-size input[type="range"] { width: 100%; accent-color: var(--color-accent); }

.est-result {
  border: 2px solid var(--color-ink);
  border-top: 5px solid var(--color-accent);
  padding: var(--s-3);
  background: var(--color-bg);
}
.est-kicker { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 800; color: var(--color-muted); margin: 0 0 0.25rem; }
.est-range {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 0.25rem;
}
.est-unitline { font-size: 0.875rem; color: var(--color-muted); margin: 0 0 0.875rem; }
.est-lines { border-block: 1px solid var(--color-line); padding-block: 0.625rem; margin-bottom: 0.875rem; }
.est-line { display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.875rem; margin: 0 0 0.3rem; }
.est-line span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.est-line-total { border-top: 1px solid var(--color-line); padding-top: 0.4rem; margin-top: 0.4rem; }
.est-line-total span { font-weight: 800; color: var(--color-ink); }
.est-why-item { font-size: 0.8125rem; line-height: 1.5; color: var(--color-body); margin: 0 0 0.625rem; }
.est-why-item strong { color: var(--color-accent-deep); }
.est-why-hint { border-top: 1px solid var(--color-line); padding-top: 0.625rem; }
.est-disclaimer { font-size: 0.75rem; line-height: 1.5; color: var(--color-muted);
  border-top: 1px solid var(--color-line); padding-top: 0.75rem; margin: 0.25rem 0 0.875rem; }
.est-actions { display: grid; gap: 0.5rem; margin: 0; }
.est-actions .btn { width: 100%; text-align: center; }

/* Under the minimum the panel changes character: this is an answer, not an
   error, so it is informative rather than alarming. */
.est-under-min .est-result { border-top-color: var(--color-muted); }
.est-under-min .est-range { font-size: 1.25rem; color: var(--color-muted); }
.est-under-min .est-lines { font-size: 0.875rem; }
.est-under-min .est-lines p { margin: 0 0 0.625rem; }