/* ==========================================================================
   Haswani HVAC & Construction - design system
   Navy / ivory / copper. Serif headings, system sans body, zero web fonts.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --navy-900: #0d1b2c;
  --navy-800: #12253a;
  --navy-700: #1a3450;
  --navy-600: #24486b;
  --navy-100: #dce6f0;

  --ivory:    #faf7f2;
  --ivory-2:  #f3ede3;
  --sand:     #e7dfd2;

  --ink:      #16202b;
  --slate:    #46545f;
  /* Muted body text. Must clear WCAG AA (4.5:1) on BOTH white and --ivory,
     since .small sits on both. This value gives 5.45:1 on white and 5.10:1 on
     ivory. Do not lighten it. */
  --slate-2:  #5f6b77;
  --hairline: #ddd5c8;
  --hairline-dark: rgba(255, 255, 255, .14);

  --copper:      #9a5a1a;  /* AA on white: 5.4:1 */
  --copper-dark: #7d4813;
  --copper-lit:  #e0a663;  /* for navy backgrounds only */

  --white: #fff;
  --alert: #b3261e;
  /* Lifted from the Google star in the review badges, so the stars drawn in
     CSS and the stars baked into the badge images are the same gold. */
  --star:  #f6ad01;

  --wrap: 1140px;
  --wrap-narrow: 760px;
  --radius: 4px;
  --radius-lg: 8px;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 1px 2px rgba(13, 27, 44, .06), 0 2px 8px rgba(13, 27, 44, .05);
  --shadow-md: 0 2px 6px rgba(13, 27, 44, .08), 0 12px 28px rgba(13, 27, 44, .09);

  --sticky-h: 0px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--copper-dark); }
button { font: inherit; }
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; color: var(--navy-900); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem); margin-top: 0; }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.42rem); }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 700; letter-spacing: .01em; }
p, ul, ol { margin: 0 0 1.15em; }
li { margin-bottom: .45em; }
strong { font-weight: 650; color: var(--navy-800); }
.lede { font-size: 1.17rem; line-height: 1.6; color: var(--slate); }
.eyebrow {
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--copper);
  margin: 0 0 .7rem;
}
.eyebrow--light { color: var(--copper-lit); }
.small { font-size: .9rem; color: var(--slate-2); }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 560px) { .wrap, .wrap--narrow { width: min(100% - 1.75rem, var(--wrap)); } }

section { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
section.tight { padding: clamp(2rem, 3.5vw, 3rem) 0; }
.band-ivory { background: var(--ivory); }
.band-sand  { background: var(--ivory-2); }
.band-navy  { background: var(--navy-900); color: #e7edf4; }
.band-navy h2, .band-navy h3, .band-navy h4 { color: var(--white); }
.band-navy a { color: var(--copper-lit); }
.band-navy .lede { color: #b9c6d4; }
.band-navy .small { color: #93a3b4; }

.split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); }
@media (min-width: 860px) {
  .split { grid-template-columns: 1.25fr .95fr; align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--flip > :first-child { order: 2; }
}

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; }
.prose ul { padding-left: 1.15rem; }
.prose ul li::marker { color: var(--copper); }

/* --- Header ------------------------------------------------------------- */
.topbar {
  background: var(--navy-900); color: #b9c6d4;
  font-size: .82rem; letter-spacing: .01em;
}
.topbar .wrap { display: flex; gap: 1rem; align-items: center; justify-content: space-between; min-height: 38px; padding-block: .35rem; }
.topbar strong { color: var(--copper-lit); font-weight: 650; }
.topbar__note { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 720px) { .topbar__hide { display: none; } .topbar .wrap { justify-content: center; } }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.masthead__inner { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--navy-900); flex: 0 0 auto; }
.brand:hover { color: var(--navy-700); }
.brand__mark { flex: 0 0 auto; }
.brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.13rem; line-height: 1.05; letter-spacing: -.01em; }
.brand__sub { display: block; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-2); margin-top: .22rem; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: .6rem .6rem; border-radius: var(--radius);
  font-size: .92rem; font-weight: 550; color: var(--navy-800); text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--ivory-2); color: var(--navy-900); }
.nav__link[aria-current="page"] { color: var(--copper); }
.nav__item { position: relative; }
.nav__toggle { border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.nav__toggle svg { transition: transform .15s ease; }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 268px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: .5rem; list-style: none; margin: 0; display: none;
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel a { display: block; padding: .5rem .65rem; border-radius: var(--radius); font-size: .92rem; color: var(--navy-800); text-decoration: none; }
.nav__panel a:hover { background: var(--ivory); color: var(--copper-dark); }
.nav__panel .nav__all { border-top: 1px solid var(--hairline); margin-top: .35rem; padding-top: .55rem; font-weight: 650; color: var(--copper); }

.masthead__cta { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }
.masthead__num { text-align: right; line-height: 1.2; }
.masthead__num a { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; color: var(--navy-900); text-decoration: none; letter-spacing: -.01em; }
.masthead__num a:hover { color: var(--copper-dark); }
.masthead__num span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); }

.burger { display: none; }
@media (max-width: 1239px) { .masthead__num { display: none; } }
@media (max-width: 1140px) {
  .nav { display: none; }
  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-left: auto; border: 1px solid var(--hairline);
    background: var(--white); border-radius: var(--radius); cursor: pointer; color: var(--navy-900);
  }
  .masthead__cta { order: 3; }
}
/* Phone widths: the brand, the burger and the call button all have to fit on
   one row at 360px without the CTA being pushed off-screen. */
@media (max-width: 600px) {
  .masthead__inner { gap: .6rem; min-height: 64px; }
  .brand { gap: .55rem; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__name { font-size: 1.02rem; }
  .brand__sub { display: none; }
  .burger { width: 44px; height: 44px; }
  /* The brand, the burger and a button holding "(855) 758-5353" all have to
     sit on one row at 360px. The icon shrinks and the padding tightens rather
     than the number, because the number is the point. */
  .masthead__cta .btn { padding-inline: .6rem; gap: .35rem; font-size: .95rem; }
  .masthead__cta .btn svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
  .brand__name { font-size: .93rem; }
  .masthead__cta .btn { padding-inline: .5rem; font-size: .9rem; }
  /* Last thing to go before the number would have to shrink. A phone number in
     a copper button is already unambiguous without it. */
  .masthead__cta .btn svg { display: none; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(13, 27, 44, .45);
}
.drawer[data-open="true"] { display: block; }
.drawer__panel {
  position: absolute; inset-block: 0; right: 0; width: min(400px, 88vw);
  background: var(--white); overflow-y: auto; padding: 1rem 1.25rem 6rem;
  box-shadow: -8px 0 40px rgba(13, 27, 44, .28);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-block: .5rem 1rem; border-bottom: 1px solid var(--hairline); }
.drawer__close { width: 44px; height: 44px; border: 1px solid var(--hairline); background: var(--white); border-radius: var(--radius); cursor: pointer; color: var(--navy-900); }
.drawer__group { border-bottom: 1px solid var(--hairline); padding-block: .35rem; }
.drawer__group > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: .85rem .2rem; background: none; border: 0; cursor: pointer;
  font-size: 1rem; font-weight: 650; color: var(--navy-900); text-align: left;
}
.drawer__group > button svg { transition: transform .15s ease; flex: 0 0 auto; }
.drawer__group > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 .2rem; display: none; }
.drawer__sub[data-open="true"] { display: block; }
.drawer__sub a { display: block; padding: .58rem .2rem; font-size: .96rem; color: var(--slate); text-decoration: none; }
.drawer__sub a:hover { color: var(--copper-dark); }
.drawer__flat { display: block; padding: .85rem .2rem; font-size: 1rem; font-weight: 650; color: var(--navy-900); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.drawer__call { margin-top: 1.35rem; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.4rem; border-radius: var(--radius); border: 1px solid transparent;
  font-size: 1rem; font-weight: 650; line-height: 1.25; text-decoration: none;
  cursor: pointer; transition: background-color .14s ease, color .14s ease, border-color .14s ease;
  min-height: 48px;
}
.btn svg { flex: 0 0 auto; }
.btn--call { background: var(--copper); color: var(--white); }
.btn--call:hover { background: var(--copper-dark); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--navy-600); }
.btn--ghost:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.btn--onnavy { background: var(--copper); color: var(--white); }
.btn--onnavy:hover { background: #b06a24; color: var(--white); }
.btn--ghost-light { background: transparent; color: #e7edf4; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.7); }
.btn--sm { padding: .6rem 1rem; font-size: .92rem; min-height: 42px; }
.btn--block { width: 100%; }
/* The number, set in the serif face it uses everywhere else on the site. */
.btn__num { font-family: var(--serif); letter-spacing: -.01em; }

/* A call button that carries the number itself once the header's separate
   number slot disappears. Swapped with display:none rather than by rewriting
   text, so there is no layout shift and no JavaScript, and screen readers get
   exactly one label. */
.btn--swap .btn__num { display: none; }
@media (max-width: 1239px) {
  .btn--swap .btn__label { display: none; }
  .btn--swap .btn__num { display: inline; }
}

/* Five filled stars, for the button through to the reviews. Gold regardless of
   what the button's text is doing, because stars that inherit a navy or white
   link colour stop reading as stars at all. */
.stars { display: inline-flex; gap: .06em; color: var(--star); line-height: 0; }
.btn--stars { gap: .5rem; }
.btn--stars .stars { margin-top: -1px; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--navy-900); color: #e7edf4; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(13,27,44,.95) 0%, rgba(13,27,44,.86) 42%, rgba(13,27,44,.55) 100%);
}
.hero__inner { position: relative; padding: clamp(2.5rem, 6vw, 5.25rem) 0 clamp(2.5rem, 5vw, 4.25rem); }
.hero__body { max-width: 680px; }
.hero h1 { color: var(--white); margin-bottom: .55rem; }
.hero__sub { font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem); color: #c3d0de; margin-bottom: 1.6rem; max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem 1.35rem; align-items: center; }
.hero__actions .btn { padding-inline: 1.55rem; }

/* A third way out of the hero, kept as a link rather than a button so that it
   cannot compete with the two that matter. */
.hero__jump { color: #b0bfcf; font-size: .95rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 2px; }
.hero__jump:hover { color: var(--white); border-bottom-color: var(--copper-lit); }
.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.7rem; padding-top: 1.35rem; border-top: 1px solid var(--hairline-dark); font-size: .89rem; color: #b0bfcf; }
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta svg { color: var(--copper-lit); flex: 0 0 auto; }

/* Compact hero for problem/symptom pages: answer first, call fast. */
.hero--urgent .hero__inner { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.9rem, 3.5vw, 2.75rem); }
.hero--urgent h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }

/* --- Answer box (top of symptom pages) ---------------------------------- */
.answer {
  background: var(--white); border: 1px solid var(--hairline); border-left: 4px solid var(--copper);
  border-radius: var(--radius-lg); padding: 1.35rem 1.5rem; box-shadow: var(--shadow-sm);
}
.answer p:last-child { margin-bottom: 0; }
.answer h2 { font-size: 1.12rem; font-family: var(--sans); margin-bottom: .5rem; }

/* --- Cards / tiles ------------------------------------------------------ */
.tile {
  display: block; padding: 1.4rem 1.5rem; background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
a.tile:hover { border-color: var(--copper); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.tile h3 { font-size: 1.13rem; margin-bottom: .4rem; }
a.tile:hover h3 { color: var(--copper-dark); }
.tile p { font-size: .95rem; color: var(--slate); margin-bottom: 0; }
.tile__icon { color: var(--copper); margin-bottom: .85rem; }

/* Service-area hub. Coverage is grouped by distance and jurisdiction rather
   than listed alphabetically, so each group gets a heading and the tiles under
   it drop to h4. That keeps the document outline honest instead of putting a
   group and its members at the same level. */
.area-group + .area-group { margin-top: 2.7rem; }
.area-group h3 { font-size: 1.28rem; margin-bottom: .3rem; }
.area-group > p { max-width: 68ch; margin: 0 0 1.25rem; }
.area-group .tile h4 { font-size: 1.1rem; margin-bottom: .4rem; }
.area-group a.tile:hover h4 { color: var(--copper-dark); }
.band-navy .area-group a.tile:hover h4 { color: var(--copper-lit); }
.band-navy .tile { background: rgba(255,255,255,.05); border-color: var(--hairline-dark); }
.band-navy .tile p { color: #b0bfcf; }
.band-navy a.tile:hover { border-color: var(--copper-lit); background: rgba(255,255,255,.09); }
.band-navy .tile__icon { color: var(--copper-lit); }

/* Symptom chips: dense, scannable, low chrome */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; }
.chips a {
  display: inline-block; padding: .58rem .95rem; border: 1px solid var(--hairline);
  border-radius: 100px; background: var(--white); font-size: .93rem; font-weight: 550;
  color: var(--navy-800); text-decoration: none;
}
.chips a:hover { border-color: var(--copper); color: var(--copper-dark); background: var(--ivory); }
.band-navy .chips a { background: rgba(255,255,255,.06); border-color: var(--hairline-dark); color: #dae3ec; }
.band-navy .chips a:hover { border-color: var(--copper-lit); color: var(--white); }

/* Numbered process list */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.steps li { counter-increment: s; padding-left: 3.1rem; position: relative; margin: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -.1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-900); color: var(--white);
  font-family: var(--serif); font-size: 1rem; font-weight: 700;
}
.steps h3 { font-size: 1.06rem; font-family: var(--sans); margin-bottom: .25rem; }
.steps p { margin-bottom: 0; color: var(--slate); font-size: .97rem; }
.band-navy .steps li::before { background: var(--copper); }
.band-navy .steps p { color: #b0bfcf; }

/* Check / warn lists */
.ticks { list-style: none; padding: 0; margin: 0 0 1.15em; display: grid; gap: .7rem; }
.ticks li { padding-left: 1.9rem; position: relative; margin: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 1.05rem; height: .55rem; border-left: 2.5px solid var(--copper); border-bottom: 2.5px solid var(--copper);
  transform: rotate(-45deg);
}
.band-navy .ticks li::before { border-color: var(--copper-lit); }

.callout {
  background: var(--ivory-2); border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem; margin: 1.8rem 0;
}
.callout--warn { background: #fdf3f2; border-left: 4px solid var(--alert); }
.callout--warn h3, .callout--warn h4 { color: #8a1d17; }
.callout > :last-child { margin-bottom: 0; }
.callout h4 { margin-bottom: .5rem; }

/* --- Tables ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
caption { text-align: left; font-size: .88rem; color: var(--slate-2); padding-bottom: .6rem; }
th, td { text-align: left; padding: .78rem .9rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
thead th { background: var(--navy-900); color: var(--white); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--ivory); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--serif); font-size: 1.09rem; font-weight: 700; color: var(--navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .45rem; top: 1.55rem;
  width: .6rem; height: .6rem; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper);
  transform: rotate(45deg); transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq__a { padding: 0 1rem 1.3rem 0; color: var(--slate); }
.faq__a > :last-child { margin-bottom: 0; }

/* --- Breadcrumbs -------------------------------------------------------- */
.crumbs { font-size: .85rem; padding: .95rem 0; color: var(--slate-2); border-bottom: 1px solid var(--hairline); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: "/"; color: var(--sand); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--copper); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy-900); font-weight: 600; }

/* --- CTA blocks --------------------------------------------------------- */
.cta {
  background: var(--navy-900); color: #e7edf4; border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 800px) { .cta { grid-template-columns: 1.4fr auto; } }
.cta h2, .cta h3 { color: var(--white); margin-bottom: .45rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.cta p { color: #b9c6d4; margin-bottom: 0; max-width: 54ch; }
.cta__actions { display: flex; flex-direction: column; gap: .6rem; }
.cta__actions .btn { white-space: nowrap; }
.cta__note { font-size: .82rem; color: #93a3b4; text-align: center; }

.cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
  background: var(--ivory-2); border-left: 4px solid var(--copper);
  border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.9rem 0;
}
.cta-inline p { margin: 0; flex: 1 1 260px; font-weight: 550; color: var(--navy-800); }

/* --- Trust strip -------------------------------------------------------- */
.trust { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.trust__item { display: flex; gap: .85rem; align-items: flex-start; }
.trust__item svg { flex: 0 0 auto; color: var(--copper); margin-top: .18rem; }
.trust__item strong { display: block; font-size: .98rem; color: var(--navy-900); }
.trust__item span { font-size: .88rem; color: var(--slate); line-height: 1.5; }
.band-navy .trust__item svg { color: var(--copper-lit); }
.band-navy .trust__item strong { color: var(--white); }
.band-navy .trust__item span { color: #a9b8c8; }

/* --- Quotes ------------------------------------------------------------- */
.quote { border-left: 3px solid var(--copper); padding-left: 1.35rem; margin: 0; }
.quote p { font-family: var(--serif); font-size: 1.09rem; line-height: 1.55; color: var(--navy-800); font-style: italic; }
.quote footer { font-size: .87rem; color: var(--slate-2); font-style: normal; }

/* --- Figures ------------------------------------------------------------ */
figure { margin: 0; }
.figure img { border-radius: var(--radius-lg); width: 100%; }
figcaption { font-size: .84rem; color: var(--slate-2); padding-top: .6rem; }
.ph {
  display: grid; place-items: center; background: var(--ivory-2);
  border: 1px dashed var(--sand); border-radius: var(--radius-lg);
  color: var(--slate-2); font-size: .82rem; text-align: center; padding: 1rem;
  aspect-ratio: 4 / 3;
}

/* --- Calculator --------------------------------------------------------- */
.calc { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 400px; align-items: start; } }
.calc__panel { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 1.9rem); }
.field { margin-bottom: 1.3rem; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > legend { display: block; font-weight: 650; font-size: .96rem; color: var(--navy-900); margin-bottom: .1rem; padding: 0; }
.field .hint { display: block; font-size: .85rem; color: var(--slate-2); margin-bottom: .55rem; }
.field select {
  width: 100%; padding: .78rem .9rem; font-size: 1rem; min-height: 48px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--white); color: var(--ink); font-family: inherit;
}
fieldset { border: 0; margin: 0 0 1.3rem; padding: 0; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.segmented label {
  position: relative; padding: .78rem .7rem; text-align: center;
  border: 1px solid var(--hairline); border-radius: var(--radius); cursor: pointer;
  font-size: .95rem; font-weight: 600; color: var(--slate); background: var(--white); min-height: 48px;
  display: grid; place-items: center;
}
.segmented input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--copper); outline-offset: 2px; }

.result { position: sticky; top: 92px; background: var(--navy-900); color: #e7edf4; border-radius: var(--radius-lg); padding: clamp(1.35rem, 3vw, 1.85rem); }
@media (max-width: 899px) { .result { position: static; } }
.result__label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-lit); font-weight: 700; margin-bottom: .5rem; }
.result__range { font-family: var(--serif); font-size: clamp(1.85rem, 1.4rem + 2vw, 2.5rem); font-weight: 700; color: var(--white); line-height: 1.1; letter-spacing: -.02em; }
.result__for { font-size: .95rem; color: #b9c6d4; margin: .6rem 0 1.1rem; }
.result__note { font-size: .84rem; color: #93a3b4; border-top: 1px solid var(--hairline-dark); padding-top: 1rem; margin-top: 1.1rem; }
.result ul { list-style: none; padding: 0; margin: 0 0 1.1rem; font-size: .9rem; color: #b9c6d4; }
.result ul li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--hairline-dark); margin: 0; }
.result ul li b { color: var(--white); font-weight: 600; text-align: right; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--navy-900); color: #a9b8c8; font-size: .93rem; padding: clamp(2.75rem, 5vw, 4rem) 0 0; }
.footer h2, .footer h3 { color: var(--white); font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer a { color: #c3d0de; text-decoration: none; }
.footer a:hover { color: var(--copper-lit); text-decoration: underline; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; }
.footer__grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer__brand { max-width: 320px; }
.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand__sub { color: #7f8fa0; }
.footer__nap { margin-top: 1.1rem; font-style: normal; line-height: 1.7; }
.footer__nap a[href^="tel"] { font-family: var(--serif); font-size: 1.18rem; font-weight: 700; color: var(--white); }
.footer__bottom {
  margin-top: 2.75rem; border-top: 1px solid var(--hairline-dark);
  padding: 1.35rem 0 calc(1.35rem + var(--sticky-h));
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: #7f8fa0;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer__bottom li { margin: 0; }

/* --- Sticky mobile call bar --------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.12);
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  display: none; gap: .75rem; align-items: center;
  box-shadow: 0 -4px 22px rgba(13, 27, 44, .3);
}
.callbar__msg { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.callbar__msg strong { display: block; color: var(--white); font-size: .92rem; font-weight: 650; }
/* Direct child only. `.callbar__msg span` also matched the nested
   `.callbar__where`, and at (0,1,1) it outranked that class, which forced the
   location onto its own line and defeated the rule that hides it on narrow
   screens. */
.callbar__msg > span { display: block; color: #93a3b4; font-size: .76rem; }
.callbar .btn { flex: 0 0 auto; padding-inline: 1.15rem; }
@media (max-width: 860px) {
  .callbar { display: flex; }
  body { --sticky-h: 68px; }
}
/* Phone widths. The button carries the full number, sized so the bar stays the
   height it was when it only said "Call now": the number gets slightly tighter
   type rather than the message losing a line. */
@media (max-width: 600px) {
  .callbar { gap: .6rem; padding-inline: .75rem; }
  .callbar .btn { padding-inline: .75rem; gap: .35rem; font-size: .88rem; }
  .callbar .btn svg { width: 16px; height: 16px; }
  .callbar__msg strong { font-size: .85rem; }
  .callbar__msg span { font-size: .72rem; }
}
@media (max-width: 430px) { .callbar__where { display: none; } }
@media print { .callbar, .masthead, .topbar { display: none; } }

/* --- Reviews ------------------------------------------------------------ */
/* Screenshots of the real Google and Yelp reviews. The text inside them is
   pixels, not type, so the only thing keeping it legible is showing each shot
   at close to its own native width. The two platforms screenshot at very
   different widths - Google cards are around 380px, Yelp's around 790px - so
   they get different column counts rather than a single grid that would render
   one platform's reviews a third smaller than the other's. */
.rgrid { column-gap: 1.15rem; }
.rgrid--google,
.rgrid--all    { columns: 3 300px; }
.rgrid--picks  { columns: 3 290px; }
.rgrid--yelp   { columns: 1; max-width: 800px; }

/* One column below 700px. Capped, because a 380px screenshot stretched across
   a 690px tablet column is a blurry mess; the wide Yelp shots need the room. */
@media (max-width: 700px) {
  .rgrid { columns: 1; }
  .rgrid--google,
  .rgrid--all,
  .rgrid--picks { max-width: 430px; }

  /* A Yelp shot carries nearly 800px of baked-in text. Squeezed onto a phone it
     renders the review at about six pixels tall, which defeats the entire point
     of showing a screenshot. So the card scrolls sideways instead and the words
     stay their own size. Tapping it still opens the review on Yelp. */
  .rgrid--yelp .rshot { overflow-x: auto; overscroll-behavior-x: contain; }
  .rgrid--yelp .rshot img { width: auto; max-width: none; }
}

.rshot {
  display: block; break-inside: avoid; margin: 0 0 1.15rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--white);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.rshot:hover { border-color: var(--copper); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.rshot img { display: block; width: 100%; height: auto; }
.band-navy .rshot, .footer .rshot { border-color: var(--hairline-dark); }

/* Platform badges. tools/optimize-reviews.py rebuilds the Google and Yelp marks
   to one shared geometry - same star size, same star spacing, wordmarks matched
   by weight - and emits them on a canvas of identical dimensions. So a single
   height balances them, on every page, with nothing to keep in sync by hand. */
.rbadges { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem; }
.rbadge { display: inline-block; text-decoration: none; line-height: 0; }
.rbadge img { display: block; width: auto; height: 54px; }
.rbadge:hover { opacity: .82; }

@media (max-width: 480px) { .rbadge img { height: 42px; } }

/* Compact variant for the about and contact pages, where the badges support the
   copy rather than being the point of the section. */
.rbadges--sm { gap: .9rem 1.5rem; }
.rbadges--sm .rbadge img { height: 40px; }

/* --- Footer social ------------------------------------------------------ */
/* Deliberately quiet: muted, small, and below the phone number in every sense.
   They should be findable, not attention-grabbing. */
.footer__social { display: flex; gap: .35rem; align-items: center; }
.footer__social li { margin: 0; }
.footer__social a {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: #7f8fa0;
  transition: color .14s ease, background-color .14s ease;
}
.footer__social a:hover { color: #c3d0de; background: rgba(255, 255, 255, .07); }

/* --- Maps --------------------------------------------------------------- */
/* Facade pattern: the SVG is self-hosted and always present. The iframe is
   injected only when the visitor asks for it. */
.map { margin: 0; }
.map__canvas {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  border: 1px solid var(--hairline);
  aspect-ratio: 8 / 5;
}
.band-navy .map__canvas, .footer .map__canvas { border-color: var(--hairline-dark); }
.map__svg { display: block; width: 100%; height: 100%; }
.map__canvas iframe { display: block; width: 100%; height: 100%; border: 0; }

.map__load {
  position: absolute; right: .85rem; bottom: .85rem;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1rem;
  background: rgba(255, 255, 255, .94);
  color: var(--navy-900); font-size: .9rem; font-weight: 650;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--radius);
  cursor: pointer; box-shadow: 0 2px 14px rgba(13, 27, 44, .35);
}
.map__load:hover { background: var(--white); color: var(--copper-dark); }
.map__load svg { color: var(--copper); }

.map__cap {
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  justify-content: space-between; align-items: baseline;
  padding-top: .75rem; font-size: .85rem; color: var(--slate-2);
}
.band-navy .map__cap, .footer .map__cap { color: #9db0c2; }
.map__links { display: flex; gap: 1.1rem; flex: 0 0 auto; }
.map__cap a { font-weight: 600; white-space: nowrap; }

@media (max-width: 560px) {
  .map__canvas { aspect-ratio: 4 / 3; }
  .map__load { left: .7rem; right: .7rem; bottom: .7rem; justify-content: center; }
}

/* --- Dark-surface text overrides ---------------------------------------- */
/* Every dark background in one place, so muted text and eyebrows can never be
   left at their light-surface colour. --copper and --slate-2 are tuned for AA
   on white and ivory, which puts both well under 4.5:1 on navy. */
.band-navy .eyebrow,
.footer .eyebrow,
.cta .eyebrow,
.hero .eyebrow,
.result .eyebrow { color: var(--copper-lit); }

.band-navy .small,
.footer .small,
.cta .small,
.hero .small,
.result .small { color: #9db0c2; }   /* 7.4:1 on --navy-900 */

.band-navy .quote p,
.footer .quote p { color: #dae3ec; }
.band-navy .quote,
.footer .quote { border-left-color: var(--copper-lit); }

.band-navy .pill { background: rgba(224, 166, 99, .16); color: var(--copper-lit); }

/* `strong` defaults to --navy-800, which is invisible on a navy background.
   Caught by the contrast audit on the symptom pages. */
.band-navy strong,
.footer strong,
.cta strong,
.hero strong,
.result strong { color: var(--white); }

/* `.band-navy a` (0,1,1) outranks `.btn--call` (0,1,0), which turned button
   labels copper-on-copper inside dark sections. These win it back. */
.band-navy a.btn--call, .band-navy a.btn--onnavy,
.footer a.btn--call,    .footer a.btn--onnavy,
.cta a.btn--call,       .cta a.btn--onnavy,
.hero a.btn--call,      .hero a.btn--onnavy,
.result a.btn--call,    .result a.btn--onnavy { color: var(--white); }

.band-navy a.btn--ghost-light,
.hero a.btn--ghost-light,
.cta a.btn--ghost-light { color: #e7edf4; }

/* The FAQ accordion was built for light surfaces. These make it safe to place
   on a navy band, so the combination cannot silently go invisible. */
.band-navy .faq { border-top-color: var(--hairline-dark); }
.band-navy .faq details { border-bottom-color: var(--hairline-dark); }
.band-navy .faq summary { color: var(--white); }
.band-navy .faq summary::after { border-color: var(--copper-lit); }
.band-navy .faq__a { color: #b9c6d4; }
.band-navy .cta-inline { background: rgba(255, 255, 255, .06); border-left-color: var(--copper-lit); }
.band-navy .cta-inline p { color: #e7edf4; }

/* --- Utility ------------------------------------------------------------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: var(--white); padding: .85rem 1.25rem;
  border-radius: 0 0 var(--radius) 0; text-decoration: none; font-weight: 650;
}
.skip:focus { left: 0; color: var(--white); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }
.pill {
  display: inline-block; padding: .3rem .7rem; border-radius: 100px;
  background: var(--ivory-2); color: var(--copper-dark);
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.band-navy .pill { background: rgba(224,166,99,.16); color: var(--copper-lit); }