/* Keeper Facility Care — single stylesheet.
   Palette is fixed: navy, bone, charcoal, one teal accent. Nothing else. */

:root {
  --navy: #0B2545;
  --bone: #F6F4EF;
  --charcoal: #1F2933;
  --teal: #0F766E;
  --rule: rgba(11, 37, 69, 0.16);
  --rule-strong: rgba(11, 37, 69, 0.28);
  --serif: "Playfair Display", "Freight Display Pro", "Tiempos Headline", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 68ch;
  --gutter: 1.5rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
}

@media (min-width: 60rem) { body { font-size: 18px; } }

img, svg { max-width: 100%; }

h1, h2 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); }

h3, h4 {
  font-family: var(--sans);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

p { margin: 0 0 1.1rem; max-width: var(--measure); }
ul { margin: 0 0 1.1rem; padding-left: 1.1rem; max-width: var(--measure); }
li { margin-bottom: 0.5rem; }

a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--teal); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ---------- layout ---------- */

.container {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 3.5rem 0; }
.section--tight { padding: 2.5rem 0; }
@media (min-width: 60rem) { .section { padding: 5rem 0; } }

.section + .section { border-top: 1px solid var(--rule); }

/* Anchored headings sit at y=0 when a #link resolves, which on this site
   puts them underneath the 77px sticky header -- so a forwarded link lands
   the reader on a heading they cannot see. Measured after the scroll
   settles, not during it: mid-scroll positions look fine and are a lie. */
[id] { scroll-margin-top: 6rem; }

/* The closing block under the FAQs. Deliberately quiet: a second navy band
   at the foot of a long page reads as a second sales wall, and the people
   who get this far have already decided to keep reading. */
.section--quiet { padding: 3rem 0 3.5rem; }
.section--quiet .call-line { margin: 1.25rem 0 0.75rem; }

.section-title { position: relative; padding-top: 1.25rem; }
.section-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--teal);
}

.lede { font-size: 1.12rem; max-width: 62ch; }
.measure { max-width: var(--measure); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--bone);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary { background: var(--teal); color: #FFFFFF; }
.btn--primary:hover { background: #0C635C; color: #FFFFFF; }

.btn--quiet {
  background: transparent;
  color: var(--navy);
  border-color: var(--rule-strong);
}
.btn--quiet:hover { border-color: var(--navy); color: var(--navy); }

.btn--onnavy { background: var(--teal); color: #FFFFFF; }

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
}
.textlink:hover { color: var(--teal); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  margin-top: 1.75rem;
}
/* The line under a primary button: what the click costs, and the phone for
   people who would rather not click at all. */
.btn-note { margin: 0.8rem 0 0; font-size: 0.92rem; color: var(--charcoal); }
.btn-note a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.btn-note a:hover, .btn-note a:focus-visible { border-bottom-color: var(--navy); }

/* ---------- header ---------- */

.site-header {
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}

/* On a narrow phone the wordmark would otherwise take its full intrinsic
   width and push the menu toggle off the right edge, where it cannot be
   tapped at all. The actions keep their size; the wordmark gives way. */
.header-inner > .wordmark { flex: 0 1 auto; min-width: 0; }
.header-actions { flex: none; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex: none;
  white-space: nowrap;
  text-decoration: none;
  color: var(--navy);
}
.wordmark .key { flex: none; width: 14px; height: 42px; color: var(--navy); }
.wordmark-text { display: block; white-space: nowrap; }
.wordmark-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wordmark-sub {
  display: block;
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.6rem;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.call-icon {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  color: var(--navy);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.site-nav a {
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
}
.site-nav a:hover { color: var(--teal); }
.site-nav a[aria-current="page"] {
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--teal);
}

.header-phone {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 71.99rem) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bone);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .site-nav .btn { width: 100%; margin-top: 1rem; }
  .header-phone { display: none; }
  .call-icon { display: inline-flex; }
}

@media (min-width: 72rem) {
  .nav-toggle { display: none; }
  .site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.6rem;
  }
  .site-nav li { margin: 0; }
}

/* ---------- hero ---------- */

.hero { padding: 3.5rem 0 3rem; }
@media (min-width: 60rem) { .hero { padding: 5.5rem 0 4.5rem; } }

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 1.35fr 1fr; gap: 4rem; }
}

.hero h1 { max-width: 18ch; }
.hero .lede { margin-bottom: 0; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--teal);
  display: inline-block;
}

/* flat navy composition standing in for photography */
.plate {
  background: var(--navy);
  color: var(--bone);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 2.5rem;
  text-align: center;
}
.plate .key { width: 46px; color: var(--bone); }
.plate p {
  margin: 0;
  max-width: 22ch;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.85;
}
.plate--wide { aspect-ratio: 16 / 7; }

/* ---------- hero photograph ---------- */

.hero-photo { margin: 0; }
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--navy);
}
.hero-photo figcaption {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  max-width: 34ch;
}

.panel-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--navy);
  margin-bottom: 1.25rem;
}

/* ---------- wide figure ---------- */

.figure-wide { margin: 2.5rem 0 2.25rem; max-width: var(--measure); }
.figure-wide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--navy);
}
.figure-wide figcaption {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  max-width: 46ch;
}

/* ---------- fact row ---------- */

.facts {
  display: grid;
  gap: 2rem;
  max-width: none;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--rule);
  padding-top: 2.5rem;
}
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; } }
/* Four items in a three-column grid leaves one alone on the second row.
   The guarantee block has four, so it pairs instead. */
@media (min-width: 64rem) { .facts--pairs { grid-template-columns: repeat(2, 1fr); } }

.fact { display: flex; gap: 0.85rem; align-items: flex-start; margin: 0; }
.fact svg { flex: none; width: 20px; height: 20px; color: var(--teal); margin-top: 2px; }
.fact > div { min-width: 0; }
.fact h3 {
  margin: 0 0 0.3rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.fact p { margin: 0; font-size: 0.95rem; color: var(--charcoal); }

/* The homepage lead block: the six rules get a numeral instead of a tick,
   and a size that matches their weight. The tick version stays for the
   guarantee block and the offer draft. */
.facts--lead { gap: 2.25rem 2.5rem; }
@media (min-width: 64rem) { .facts--lead { gap: 3rem 3.5rem; } }
.facts--lead .fact { gap: 1rem; }
.fact-n {
  flex: none;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--teal);
  min-width: 2rem;
  padding-top: 0.1rem;
}
.facts--lead .fact h3 { font-size: 1.1rem; margin-bottom: 0.45rem; }
.facts--lead .fact p { font-size: 1rem; line-height: 1.55; }

/* Headlines read as headlines: sentence case, heavier, and never smaller
   than the paragraph under them. All-caps slows a scanning reader down and
   turns a six-word claim into a label. */
.fact h3 { text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 700; }
.facts--lead .fact h3 { font-size: 1.2rem; }
.step h2 { text-transform: none; letter-spacing: 0; font-size: 1.2rem; font-weight: 700; }
.step p { font-size: 1rem; line-height: 1.55; }
/* The guarantee block leads with the number, which is the part a buyer
   repeats to a partner. */
.fact-n--wide { min-width: 6.2rem; font-size: 1.55rem; padding-top: 0; white-space: nowrap; }
/* The primary button is the one thing on the page that must never be the
   smallest type in its row. */
.btn { font-size: 1.05rem; padding: 0.8rem 1.5rem; }
/* On a phone the hero photograph sat between the button and the first
   proof at half a screen tall. A wider crop keeps the picture and gives
   back 250px. */
@media (max-width: 47.98rem) { .hero-photo img { aspect-ratio: 16 / 10; } }

/* ---------- cards ---------- */

/* Two up on a tablet, and three across on a wide screen so a three-card row
   does not leave one card stranded on its own line. */
.cards { display: grid; gap: 1.5rem; max-width: none; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cards--three { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--rule);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.card h2, .card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--navy); margin: 0 0 0.9rem; }
.card p { flex: 1; }
.card .textlink { align-self: flex-start; }

/* ---------- columns ---------- */

.cols { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .cols { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
@media (min-width: 64rem) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
/* Three panels in the two-column tablet range would leave the third alone
   on the left; it takes the full row instead until the third column opens. */
@media (min-width: 48rem) and (max-width: 63.98rem) { .cols--3 > :nth-child(3):last-child { grid-column: 1 / -1; } }

.col-panel { border-top: 2px solid var(--navy); padding-top: 1.5rem; }
.col-panel--accent { border-top-color: var(--teal); }

.ticked { list-style: none; padding: 0; }
.ticked li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.7rem;
}
.ticked li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  background: var(--teal);
}
.ticked--navy li::before { background: var(--navy); }

.plain { list-style: none; padding: 0; max-width: none; }
.plain li {
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0;
  margin: 0;
}
.plain li:first-child { border-top: 1px solid var(--rule); }

/* ---------- numbered standard ---------- */

.steps { counter-reset: step; display: grid; gap: 2.5rem; max-width: none; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); gap: 3rem 3.5rem; } }

.step { counter-increment: step; }
.step h2 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.step h2::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--teal);
}
.step p { margin: 0; }


@media (min-width: 48rem) {
}

/* ---------- bands ---------- */

.band {
  background: var(--navy);
  color: var(--bone);
  padding: 3.5rem 0;
}
.band h2, .band p { color: var(--bone); }
.band h2 { max-width: 24ch; }
.band p { max-width: 56ch; }
.band .section-title::before { background: var(--teal); }
/* The band offered one path, the form. Someone who would rather call had to
   scroll back to the header to find a number. */
.band-call { margin: 0.9rem 0 0; font-size: 0.95rem; }
.band-call a { color: var(--bone); text-decoration: none; border-bottom: 1px solid rgba(246, 244, 239, 0.45); }
.band-call a:hover, .band-call a:focus-visible { border-bottom-color: var(--bone); }

.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  max-width: none;
}
.areas li {
  border: 1px solid var(--rule-strong);
  padding: 0.35rem 0.85rem;
  font-size: 0.92rem;
  color: var(--navy);
  margin: 0;
}

/* ---------- form ---------- */

.form-grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 64rem) { .form-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }

.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.field .hint { display: block; font-weight: 400; color: var(--charcoal); font-size: 0.85rem; }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--charcoal);
  background: #FFFFFF;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
textarea { min-height: 96px; resize: vertical; }

fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; }
legend {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.6rem;
  padding: 0;
}

.choice { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  margin: 0;
}
.choice input { accent-color: var(--teal); width: 18px; height: 18px; }
.choice label:has(input:checked) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }

.form-aside { border-top: 2px solid var(--navy); padding-top: 1.5rem; }
.form-aside dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 1.25rem;
}
.form-aside dd { margin: 0.25rem 0 0; }

/* The optional half of the form, set back so the four fields that matter
   read as the whole ask. */
.field-group {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0 1.75rem;
  padding: 1.4rem 0 0;
}
.field-group legend {
  padding: 0;
  margin-bottom: 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.field-group .field:last-child { margin-bottom: 0; }

/* Validation. Amber rather than red: this is a missing field on a lead form,
   not a system failure, and the tone should match. */
.form-status--error { border-left-color: #B45309; }
.field-error {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #B45309;
}
[aria-invalid="true"] { border-color: #B45309; box-shadow: inset 0 0 0 1px #B45309; }

.form-status {
  border-left: 2px solid var(--teal);
  padding: 0.85rem 0 0.85rem 1rem;
  margin-bottom: 1.5rem;
}
.form-status p { margin: 0; }
[hidden] { display: none !important; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--bone);
  padding: 3rem 0 2rem;
  font-size: 0.94rem;
}
.site-footer a { color: var(--bone); }
.site-footer a:hover { color: #FFFFFF; }
.site-footer p { max-width: 42ch; color: var(--bone); }

.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.footer-mark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.footer-mark .key { width: 12px; height: 36px; color: var(--bone); }
.footer-mark span {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* FAQ. A question-shaped heading is what an answer engine lifts, so the
   <h3> stays real markup inside the summary rather than styled text. Open
   the first one by default: a page of closed rows reads as an empty page. */
.faq-item {
  border-top: 1px solid var(--rule);
  padding: 0;
  max-width: var(--measure);
}
.faq-item:last-of-type { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
  display: inline;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  margin: 0;
}
/* A plus that becomes a minus. Drawn in CSS so it costs no request. */
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.55rem;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--teal), var(--teal)) center/13px 1.5px no-repeat,
    linear-gradient(var(--teal), var(--teal)) center/1.5px 13px no-repeat;
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after {
  background: linear-gradient(var(--teal), var(--teal)) center/13px 1.5px no-repeat;
}
.faq-item summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.faq-answer { padding: 0 2.5rem 1.35rem 0; }
.faq-answer p { margin: 0 0 0.9rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* Social icons: quiet by default, brightened on hover. 44px hit area on
   touch, which is the minimum a thumb can hit reliably. */
.footer-social {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.35rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -0.6rem;
  color: var(--bone);
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible { opacity: 1; }
.footer-social svg { width: 20px; height: 20px; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(246, 244, 239, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.88rem;
}
.footer-bottom p { margin: 0; }

@media print {
  .site-header, .band, .btn { box-shadow: none; }
}

/* ---------- bid comparison ----------
   Each question renders as: the question, the answer that should worry
   you, then ours. The two answers are visually unequal on purpose -- the
   weak one is set back in muted type, ours carries the teal rule -- so the
   page reads as a buyer's checklist rather than a scorecard we wrote for
   ourselves. */
.qa { border-top: 1px solid var(--rule); padding-top: 1.75rem; margin-bottom: 2.75rem; }
.qa > h3 { margin: 0 0 1rem; max-width: 34ch; }
.qa-why { max-width: var(--measure); margin: 0 0 1.25rem; }
.qa-pair { display: grid; gap: 1.1rem; }
@media (min-width: 52rem) { .qa-pair { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.qa-side { padding-left: 1.1rem; border-left: 3px solid var(--rule-strong); }
.qa-side--ours { border-left-color: var(--teal); }
.qa-label {
  display: block; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 0.5rem; color: var(--navy);
}
.qa-side p { margin: 0; }
.qa-side--weak p { color: #5A6472; }

/* Summary table. Scrolls rather than squashing on a phone. */
.vs-wrap { overflow-x: auto; margin: 2rem 0 0; -webkit-overflow-scrolling: touch; }
.vs { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.95rem; }
.vs th, .vs td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.vs thead th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 2px solid var(--navy); }
.vs tbody th { font-weight: 600; width: 32%; }
.vs .vs-ours { color: var(--navy); font-weight: 500; }
.vs .vs-usual { color: #5A6472; }

/* The request page leads with the phone number because the pricing
   conversation is the product; the form only books it. */
.call-line { margin: 1.5rem 0 1.25rem; }
.call-big {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.9rem);
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 0.1em;
}
.call-big:hover, .call-big:focus-visible { color: var(--teal); }

/* The two paths the page offers, asked as a field rather than left for the
   caller to raise. Some buyers will not have a stranger in the office on a
   cold call and would rather book the visit; some want a number and nothing
   else. The form used to assume the first kind. */
.field--choice { border: 0; padding: 0; margin: 0 0 1.5rem; }
.field--choice legend { padding: 0; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.6rem; }
.field--choice label.choice { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin-bottom: 0.5rem; cursor: pointer; }
.choice input { margin-top: 0.25rem; flex: none; accent-color: var(--teal); }

/* When the call-back form is suppressed the grid has a single child;
   let it use the full measure instead of sitting in a half-width column. */
.form-grid > :only-child { grid-column: 1 / -1; max-width: var(--measure); }

/* CALL BAR. On a phone the logo, a full phone number and the menu toggle
   cannot share one row without something being clipped, and an icon alone
   makes people hunt for a number they could have read. So the number gets
   its own strip directly under the header, full width and tappable. Hidden
   on desktop, where the header already shows it. */
.call-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--navy);
  color: var(--bone);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.7rem 1rem;
}
.call-bar svg { flex: none; }
.call-bar:hover, .call-bar:focus-visible { background: var(--teal); color: #fff; }
@media (min-width: 72rem) { .call-bar { display: none; } }