/* ============================================================
   Local service website template: stylesheet

   Shared by every client site. Do NOT edit per client: each site gets
   its own theme.css (next to this file) that overrides the
   :root tokens below with colors taken from the client logo. Turn on
   senior.css only for senior-friendly sites (see README).

   House layout: LIGHT header, then a DARK band directly under it (the
   stats strip on home, the page hero on interior pages), then the light
   hero and body. Reviews, process and footer are the other dark bands.
   Dark bands RE-SCOPE the same tokens (see the .stats-band/.quote-band/
   .site-footer block) so every descendant flips to light-on-dark.
   ============================================================ */
:root {
  /* Placeholder palette (neutral slate + burnt orange). Replace in theme.css. */
  --navy-900: #1E2B3A;   /* dark bands + footer ground */
  --navy-950: #141E2A;   /* bottom of the dark band gradient */
  --navy-800: #FFFFFF;   /* page background */
  --navy-700: #FAFAF8;   /* cards and raised surfaces */
  --navy-600: #E5E7EA;   /* tinted light for thumbs / placeholders */
  --alt:        #F3F4F6;   /* light alternating band (hero, form) */
  --copper:     #B5541C;   /* main accent + Estimate buttons (must pass contrast on white) */
  --copper-2:   #964516;   /* accent hover / pressed */
  --accent-rgb: 181,84,28; /* --copper as R,G,B for tints */
  --sand:       #1E2B3A;   /* headings */
  --cream:      #1F2933;   /* body ink */
  --muted:      #56606C;   /* secondary ink */
  --ink-rgb:    30,43,58;  /* --navy-900 as R,G,B for lines and shadows */

  /* Button fill (Estimate, submit, checked form choices). Defaults to the accent;
     a theme can set its own, e.g. brown accents with blue buttons. */
  --btn:        #B5541C;
  --btn-2:      #964516;  /* hover */
  --btn-rgb:    181,84,28;
  --on-btn:     #FFFFFF;

  --on-copper:  #FFFFFF;
  --line:       rgba(var(--ink-rgb),0.16);
  --line-soft:  rgba(var(--ink-rgb),0.09);
  --shadow:     0 18px 40px rgba(var(--ink-rgb),0.16);

  /* Secondary accent: secondary (white) buttons, highlighted words, letter tiles */
  --accent-2:      #2F5E8C;
  --accent-2-rgb:  47,94,140;
  --accent-2-tint: #E3EAF2;  /* secondary button fill on white sections and cards */

  /* Chips, form choices, Go to pills, town service pills */
  --chip-fill:     #F1F2F4;
  --chip-fill-2:   #E6E8EC;
  --chip-border:   #CBD0D7;
  --chip-border-2: #B5BCC6;
  --gallery-bg:    #F4F1EA;  /* warm cream behind the gallery */

  /* text roles on the dark bands */
  --band-strong: #F4F7FA;
  --band-muted:  #CAD3DE;   /* at least this bright on dark bands */
  --band-accent: #F2A47E;   /* light accent that reads on the dark bands */
  --band-accent-2: #F7C3A8;
  --band-accent-rgb: 242,164,126;
  --band-deep-rgb: 18,26,36;
  --cta-on-dark: #C25E28;   /* Estimate button on the dark page headers */

  --wrap: 1140px;
  /* One family sitewide (self-hosted Inter, see fonts.css). The serif token
     keeps its old name so the shared rules still work. */
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Deep-navy accent bands: re-scope the palette tokens so every descendant
   (headings, text, hairlines, accents) flips to light-on-dark automatically. */
.stats-band, .quote-band, .site-footer {
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --copper-2:   var(--band-accent-2);
  --navy-700: rgba(255,255,255,0.05);
  --line:       rgba(255,255,255,0.16);
  --line-soft:  rgba(255,255,255,0.09);
  --on-copper:  var(--navy-900);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--navy-800);
  color: var(--cream);
  line-height: 1.65; font-size: 18px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--copper); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.serif { font-family: var(--serif); font-weight: 500; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 5.4vw, 54px); letter-spacing: -0.01em; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.8vw, 38px); }
h3 { font-size: 19px; font-weight: 700; }
p  { margin: 0 0 1em; }

/* Skip link: keyboard users land past the nav */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--copper); color: var(--on-copper);
  padding: 10px 16px; font-weight: 700; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-2); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--cream); background: rgba(var(--ink-rgb),0.03); }
.btn-ghost:hover { border-color: var(--copper); color: var(--copper); }
.btn-lg { padding: 16px 28px; font-size: 17px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0;
  /* Light header sitewide, with a dark band directly beneath it on every
     page (stats strip on home, page hero elsewhere). */
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line);
  /* Must outrank .nav-backdrop (110). The drawer lives inside this header, and
     a positioned z-index here creates a stacking context, so the drawer's own
     z-index only sorts it against its siblings. At 100 the backdrop painted
     over the whole header subtree and swallowed every tap in the open drawer. */
  z-index: 130;
}
/* backdrop-filter is deliberately applied only above the drawer breakpoint.
   Any non-none backdrop-filter turns the element into a containing block for
   its position:fixed descendants, which made the mobile drawer size itself
   against the 69px header instead of the viewport. It opened 114px tall with
   zero-height links, so the hamburger looked like it did nothing. */
@media (min-width: 901px) {
  .site-header { backdrop-filter: saturate(140%) blur(10px); }
}
/* Keep .wrap's 20px side padding: this shorthand would otherwise reset it to 0
   and run the logo and buttons flush to the screen edge below 1180px. */
.nav { display: flex; align-items: center; gap: 20px; padding: 12px 20px; }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand-logo { height: 44px; width: auto; display: block; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; }
.navlink {
  text-decoration: none; color: var(--sand); font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  background: none; border: 0; font-family: inherit; padding: 6px 0;
}
.navlink:hover, .navlink:focus-visible { color: var(--copper); }
.navlink .caret { transition: transform .2s ease; }

/* Services dropdown */
.has-drop { position: relative; }
.drop-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 470px; background: var(--navy-700);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 14px; margin: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-drop:hover .drop-menu,
.has-drop:focus-within .drop-menu,
.has-drop.open .drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.has-drop:hover .caret, .has-drop.open .caret { transform: rotate(180deg); }
.drop-col > ul { list-style: none; margin: 0; padding: 0; }
.drop-head {
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--copper); font-weight: 700; padding: 6px 10px 4px; margin: 0;
}
.drop-menu a {
  display: block; padding: 9px 10px; border-radius: 7px;
  text-decoration: none; color: var(--cream); font-size: 16px; font-weight: 600;
}
.drop-menu a:hover { background: rgba(var(--accent-rgb),0.10); color: var(--copper); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-call {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--copper); font-weight: 700; font-size: 16px;
}
.nav-call:hover { color: var(--copper-2); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 7px; padding: 8px 10px; color: var(--sand); cursor: pointer;
}

/* ---------- Hero ----------
   Split layout on purpose: the best photos the owner has are phone shots in
   portrait, and a portrait image crammed into a wide banner crops down to an
   unreadable strip. Giving it its own column shows the whole shower. */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  /* Light: it sits under the dark stats strip, so the page reads
     light header / dark band / light hero. */
  background: linear-gradient(180deg, var(--alt) 0%, #FFFFFF 100%);
  /* .hero is a <section>; its own grid owns the vertical rhythm, so the
     blanket section padding has to be cancelled or it stacks on top. */
  padding: 0;
}
/* Soft sunset bloom behind the photo so the panel is not a flat rectangle. */
.hero::before {
  content: ""; position: absolute; top: -120px; right: -140px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.10), transparent 68%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 56px; align-items: center;
  padding: 68px 0 72px;
}
.hero-inner { max-width: 620px; }

.hero-figure {
  position: relative; margin: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.hero-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 42%; }
.hero-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px 20px 18px;
  background: linear-gradient(to top, rgba(var(--band-deep-rgb),.94), transparent);
  color: var(--band-muted); font-size: 14px; line-height: 1.45;
}
.hero-figure figcaption strong {
  display: block; color: var(--band-strong); font-weight: 700; font-size: 16px; margin-bottom: 2px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper); font-weight: 700; margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--copper); }
.hero h1 { color: var(--sand); margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--copper); }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 560px; margin-bottom: 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
/* Grouped Interior / Exterior to mirror the Services dropdown, so the two
   navigation routes into the service pages describe the work the same way. */
.hero-services { display: flex; flex-direction: column; gap: 16px; }
.hero-svc-group { display: flex; flex-direction: column; gap: 9px; }
.hero-svc-label {
  font-size: 14px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--copper); font-weight: 700;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Zero-height full-width flex item: forces the wrap point so the Interior row
   always reads 3 then 2, rather than reflowing with the viewport. */
.chip-break { flex-basis: 100%; height: 0; margin: -8px 0 0; }
.chip {
  font-size: 14px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(var(--ink-rgb),0.03);
  color: var(--muted); text-decoration: none;
}
.chip:hover { border-color: var(--copper); color: var(--copper); }

/* ---------- Accent bands ----------
   The stats banner and the testimonial share one treatment on purpose, so the
   two proof points on the page read as a matching pair and stand apart from
   the ordinary sections around them. Change this rule and both move together. */
.stats-band, .quote-band {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
}
.stats-band::before, .quote-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--band-accent-rgb),0.13), transparent 62%);
}
.stats-band > .wrap, .quote-grid { position: relative; }

.stats-band {
  /* Deliberately dark: it sits between the light header and the light hero,
     and that contrast is what makes the credential strip register as its own
     thing. Its tokens are re-scoped by the dark-band block at the top. */
  /* Same trap as .hero: this is a <section>, so the blanket 76px section
     padding stacks on top of the grid's own and leaves a huge dead band. */
  padding: 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  text-align: center; padding: 22px 0;
}
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat .num { font-family: var(--serif); font-weight: 500; font-size: 32px; color: var(--copper); line-height: 1.1; }
.stat .lbl { font-size: 14px; color: var(--muted); letter-spacing: .04em; }

/* ---------- Section furniture ---------- */
section { padding: 76px 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-tag {
  display: inline-block; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper); font-weight: 700; margin-bottom: 12px;
}
.section-head h2 { color: var(--sand); }
.section-head p { color: var(--muted); font-size: 18px; margin-bottom: 0; }
.alt { background: var(--alt); }

/* ---------- Services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-grid .feature { grid-column: span 3; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover { border-color: var(--copper); transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-600); }
.feature .svc-thumb { aspect-ratio: 16 / 10; }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .svc-thumb img { transform: scale(1.04); }
.svc-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.svc-body h3 { color: var(--sand); font-family: var(--serif); font-weight: 500; font-size: 22px; }
.feature .svc-body h3 { font-size: 26px; }
.svc-body p { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.svc-more { margin-top: auto; color: var(--copper); font-weight: 700; font-size: 15px; }
/* Cards without a photo yet still have to read as a real card, not a gap. */
.svc-thumb.placeholder {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-700));
  color: rgba(var(--accent-rgb),0.5);
}

/* ---------- Featured project ----------
   The grid gets an explicit height rather than letting the images size it.
   All four photos are tall portraits, so with auto height the three stacked
   ones ran to their intrinsic size, made the row far taller than the single
   main image, and left a large dead gap under it. */
.feat-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px;
  height: clamp(420px, 46vw, 600px);
}
.feat-main {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  height: 100%; min-height: 0;
}
.feat-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.feat-side {
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px;
  height: 100%; min-height: 0;
}
.feat-side img {
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line);
}
.feat-caption {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 16px;
}
.feat-caption b { color: var(--sand); font-weight: 700; }

/* ---------- Project-type strip (under the featured build) ---------- */
.strip-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 20px;
  margin: 46px 0 16px; padding-top: 26px; border-top: 1px solid var(--line);
}
.strip-label {
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper); font-weight: 700;
}
.strip-all { font-size: 15px; font-weight: 700; text-decoration: none; }
.strip-all:hover { color: var(--copper-2); }

.type-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.type-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.type-card:hover { border-color: var(--copper); transform: translateY(-3px); box-shadow: var(--shadow); }
.type-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: var(--navy-600); }
.type-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.type-card:hover .type-thumb img { transform: scale(1.05); }
.type-thumb.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-700));
  color: rgba(var(--accent-rgb),0.5);
}
.type-thumb .soon-label {
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper);
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.45);
  border-radius: 999px; padding: 5px 13px;
}
.type-card h3 {
  font-family: var(--serif); font-weight: 500; font-size: 16px;
  color: var(--sand); margin: 0; padding: 12px 12px 14px; line-height: 1.3;
}

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
}
.gallery.wide img { aspect-ratio: 4 / 3; }

/* ---------- Why band ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card {
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 12px; padding: 26px 24px;
}
.why-num {
  width: 34px; height: 34px; border-radius: 8px; margin-bottom: 14px;
  background: rgba(var(--accent-rgb),0.12); color: var(--copper);
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
.why-card h3 { color: var(--sand); }
.why-card p { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.we-do {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--copper);
}

/* ---------- Meet the Owner ---------- */
.meet { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; }
.meet-photo img { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.meet h2 { color: var(--sand); }
.meet p { color: var(--muted); font-size: 18px; }
.meet-sign {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--sand);
}
.meet-sign span { display: block; font-family: var(--sans); font-size: 14px; color: var(--muted); letter-spacing: .05em; }

/* ---------- Testimonial ----------
   Shares the accent-band treatment defined above with the stats banner.
   The quote itself sits in a real bordered card so it reads as an object on
   the page rather than as loose text. */
.quote-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Flex rather than auto-fit grid: with a single card auto-fit leaves a phantom
   empty track. One card centres at a readable measure; drop in a second or
   third and they share the row automatically. */
.quote-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 30px; max-width: 900px; margin: 0 auto;
}
.quote-card {
  position: relative; margin: 0; text-align: center;
  flex: 1 1 300px; max-width: 640px;
  background: rgba(244,248,252,0.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 44px 34px 30px;
  box-shadow: var(--shadow);
}
/* Oversized opening quote, sitting over the card edge so the block has a
   recognisable silhouette instead of being a plain rectangle of text. */
.quote-mark {
  position: absolute; top: -16px; left: 24px;
  font-family: var(--serif); font-weight: 500;
  font-size: 104px; line-height: 1; color: var(--copper);
  opacity: .3; pointer-events: none;
}
.stars { display: flex; justify-content: center; gap: 5px; margin-bottom: 20px; }
.stars svg { width: 22px; height: 22px; color: var(--copper); }
.quote-card blockquote {
  margin: 0 0 26px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55;
  color: var(--muted);
}
/* Her opening two sentences, set larger. Same words, same order, just weighted
   the way a magazine weights a lead line. */
.quote-lead {
  display: block; margin-bottom: .55em;
  font-size: clamp(21px, 2.5vw, 27px); line-height: 1.4;
  color: var(--cream);
}
.quote-card figcaption {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.quote-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--copper); color: var(--on-copper);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .5px;
}
.quote-who { display: flex; flex-direction: column; text-align: left; }
.quote-name { font-weight: 700; color: var(--sand); font-size: 17px; }
.quote-role {
  font-size: 14px; color: var(--muted);
  letter-spacing: .1em; text-transform: uppercase;
}

/* "How It Works" is a deep-navy band too, so the home page alternates
   dark / light all the way down instead of running light from the hero to the
   footer. Tokens re-scoped the same way the other bands do it. */
#process {
  background: var(--navy-900);
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --navy-700: rgba(244,248,252,0.05);
  --line:       rgba(244,248,252,0.16);
  --line-soft:  rgba(244,248,252,0.09);
  --on-copper:  var(--navy-900);
}

/* ---------- Process ----------
   Numbered cards with the specifics spelled out, same shape as the Nettles
   build. The bare numbered text this replaced gave no sense of what actually
   happens at each stage. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step {
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px 22px;
}
.step-num {
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--copper); color: var(--on-copper);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 18px;
  margin-bottom: 15px;
}
.step h3 { color: var(--sand); margin: 0 0 7px; font-size: 18px; }
.step p { color: var(--muted); font-size: 16px; margin: 0; }
.step ul { list-style: none; padding: 0; margin: 14px 0 0; }
.step ul li {
  position: relative; padding-left: 18px; margin-bottom: 6px;
  font-size: 14px; color: var(--muted); line-height: 1.45;
}
.step ul li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--copper);
}

/* ---------- Areas ---------- */
.area-list { display: flex; flex-wrap: wrap; gap: 10px; }
.area-list a, .area-list span {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--navy-700); color: var(--cream);
  text-decoration: none; font-size: 16px; font-weight: 600;
}
.area-list a:hover { border-color: var(--copper); color: var(--copper); }

/* ---------- Estimate form ---------- */
.est-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; }
.est-points { list-style: none; padding: 0; margin: 24px 0 0; }
.est-points li {
  display: flex; gap: 11px; align-items: flex-start;
  color: var(--muted); font-size: 17px; margin-bottom: 13px;
}
.est-points svg { color: var(--copper); flex-shrink: 0; margin-top: 4px; }
.form-card {
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px; box-shadow: var(--shadow);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--cream); }
.field .req { color: var(--copper); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #FFFFFF;
  color: var(--cream); font-family: inherit; font-size: 16px;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.16);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Multi-select project type, styled as tappable chips */
.chip-field { border: 0; padding: 0; margin: 0 0 16px; }
.chip-field legend {
  padding: 0; font-size: 14px; font-weight: 700; color: var(--cream); margin-bottom: 8px;
}
.chip-field .hint { font-weight: 400; color: var(--muted); font-size: 14px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-input { position: relative; }
/* The box itself is hidden but still focusable, so the label carries the ring. */
.chip-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-input label {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #FFFFFF;
  color: var(--cream); font-size: 14px; font-weight: 600;
  cursor: pointer; margin: 0; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip-input label:hover { border-color: var(--copper); color: var(--copper); }
.chip-input input:checked + label {
  background: var(--btn); border-color: var(--btn); color: var(--on-btn);
}
.chip-input input:focus-visible + label {
  outline: 2px solid var(--copper); outline-offset: 2px;
}
/* Netlify honeypot: hidden from people, irresistible to bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--alt); text-align: center; border-top: 1px solid var(--line); }
.cta-band h2 { color: var(--sand); }
.cta-band p { color: var(--muted); max-width: 560px; margin: 0 auto 26px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
/* Category headings so the page can be scanned instead of read straight down. */
.faq-group {
  font-family: var(--sans);
  font-size: 14px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper);
  margin: 46px 0 4px; padding-bottom: 10px;
  border-bottom: 1px solid var(--copper-2);
}
.faq-group:first-child { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  padding: 20px 40px 20px 0; cursor: pointer; position: relative;
  font-weight: 700; font-size: 18px; color: var(--cream); list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--copper); font-size: 22px; font-weight: 400;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { color: var(--copper); }
.faq-item .answer { padding: 0 40px 22px 0; color: var(--muted); font-size: 17px; }
.faq-item .answer p:last-child { margin-bottom: 0; }

/* ---------- Interior page hero ---------- */
/* Interior pages open the same way the home page does: dark header straight
   into a dark banner, then the light body underneath. */
.page-hero {
  background: var(--navy-900);
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --line:       rgba(244,248,252,0.16);
  border-bottom: 1px solid rgba(244,248,252,0.14);
  padding: 56px 0 48px;
}
.page-hero h1 { color: var(--sand); margin-bottom: 14px; }
.page-hero p { color: var(--muted); font-size: 19px; max-width: 680px; margin-bottom: 0; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--copper); }

/* ---------- Prose (service page bodies) ---------- */
.prose { max-width: 740px; }
.prose h2 { color: var(--sand); margin-top: 40px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--cream); font-size: 18px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--copper); }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.aside-card {
  background: var(--navy-700); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px; position: sticky; top: 96px;
}
.aside-card h3 { color: var(--sand); font-family: var(--serif); font-weight: 500; font-size: 21px; }
.aside-card p { color: var(--muted); font-size: 16px; }
.aside-card .btn { width: 100%; }

/* Empty-gallery state: honest placeholder, never stock photography. */
.no-photos {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 34px 26px; text-align: center; color: var(--muted); font-size: 16px;
  background: rgba(var(--ink-rgb),0.02);
}
.no-photos strong { color: var(--sand); display: block; margin-bottom: 6px; font-size: 17px; }
.no-photos .soon-badge {
  display: inline-block;
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--copper);
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.45);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); border-top: 1px solid var(--line); padding: 54px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.foot-grid h4 {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--copper); margin: 0 0 14px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 9px; }
/* Short link lists run as two columns so the footer does not become one long
   vertical stack. break-inside stops an item splitting across the gutter. */
.foot-grid ul.two-col { columns: 2; column-gap: 20px; }
.foot-grid ul.two-col li { break-inside: avoid; }
/* Eight towns as eight stacked rows made the footer taller than a phone screen.
   Flowing them inline wraps them into three or four lines instead. */
.foot-grid ul.foot-inline li { display: inline; margin: 0; line-height: 2.1; }
.foot-grid ul.foot-inline li:not(:last-child)::after {
  content: " \00B7 "; color: var(--muted); opacity: .55;
}
.foot-meta { color: var(--muted); font-size: 16px; margin: 12px 0 0; line-height: 1.7; }
.foot-grid a { color: var(--muted); text-decoration: none; font-size: 16px; }
.foot-grid a:hover { color: var(--sand); }
.foot-about p { color: var(--muted); font-size: 16px; max-width: 330px; }
/* Full white lockup here, tagline included: it sits on the dark footer band. */
.foot-logo { height: 76px; width: auto; display: block; margin: 0 0 18px; }
.foot-bottom {
  margin-top: 42px; padding: 20px 0; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  color: var(--muted); font-size: 14px;
}

.nav-backdrop { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid .feature { grid-column: span 2; }
  .why-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .meet { grid-template-columns: 1fr; gap: 30px; }
  .meet-photo { max-width: 420px; }
  .est-grid { grid-template-columns: 1fr; gap: 34px; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .aside-card { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .feat-grid { grid-template-columns: 1fr; height: auto; }
  .feat-main { height: auto; }
  .feat-main img { aspect-ratio: 4 / 3; height: auto; }
  .feat-side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); height: auto; }
  .feat-side img { aspect-ratio: 1 / 1; height: auto; }
  .drop-menu { min-width: 420px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 54px 0 60px; }
  .hero-inner { max-width: none; }
  .hero-figure { max-width: 520px; }
  .hero-figure img { aspect-ratio: 16 / 11; object-position: center 46%; }
  .type-strip { grid-template-columns: repeat(4, 1fr); }
}

/* Between the drawer breakpoint and this one the full horizontal menu is still
   shown, and the spelled-out phone number is the widest thing that can be given
   up. The icon stays, so the call is still one tap. */
@media (max-width: 1024px) {
  .nav-call span.num { display: none; }
}

/* Nav collapses to a right-hand drawer.
   This breaks earlier than the rest of the layout on purpose: the full
   horizontal menu plus the brand lockup, the call link and the Estimate
   button run out of room around 770px, so the drawer takes over well
   before anything gets pinned to the edges. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .menu {
    /* Light panel to match the light header. The menu button, phone and
       Estimate button stay on top of the open drawer, so the drawer must be
       the same colour as the header or the navy menu button vanishes. */
    position: fixed; inset: 0 0 0 auto; width: min(330px, 86vw);
    background: #FFFFFF; border-left: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 84px 20px 30px; overflow-y: auto;
    transform: translateX(100%); z-index: 120;
    /* visibility, not just transform: a translated-off drawer is still in the
       tab order, so keyboard users would tab into invisible links. It flips
       at the end of the close transition and the start of the open one. */
    visibility: hidden;
    transition: transform .26s ease, visibility .26s;
    box-shadow: var(--shadow);
  }
  .menu.open { transform: translateX(0); visibility: visible; }
  .menu > li { border-bottom: 1px solid var(--line-soft); }
  .menu .navlink { padding: 15px 4px; width: 100%; justify-content: space-between; font-size: 17px; }
  /* In the drawer the submenu is an accordion, so hover must not open it. */
  .drop-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; background: none; border: 0; box-shadow: none;
    padding: 0 0 12px 10px; grid-template-columns: 1fr; display: none;
  }
  .has-drop:hover .drop-menu { display: none; }
  .has-drop.open .drop-menu, .has-drop.open:hover .drop-menu { display: grid; transform: none; }
  .drop-head { padding: 10px 8px 2px; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s; z-index: 110;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
}

@media (max-width: 760px) {
  section { padding: 56px 0; }
  /* Three stats stay in three columns here; the labels are short enough. */
  .stats-grid { grid-template-columns: repeat(3, 1fr); padding: 22px 0; }
  .stat .num { font-size: 27px; }
  .stat .lbl { font-size: 14px; }
  .type-strip { grid-template-columns: repeat(3, 1fr); }

  /* No sticky bottom bar: the header keeps a call button and an Estimate
     button visible at every width instead. */
  .nav-call span.num { display: none; }
  .cta-long { display: none; }
  .nav-actions .btn { padding: 10px 14px; font-size: 15px; }

  .hero-grid { padding: 44px 0 50px; gap: 30px; }
  .hero-figure img { aspect-ratio: 4 / 3; }
  /* Four steps read as a sequence, so they stack one per row on phones
     rather than sitting in a 2x2 block that breaks the reading order. */
  .quote-card { padding: 36px 20px 24px; }
  .quote-mark { font-size: 76px; top: -10px; left: 14px; }
  .steps { grid-template-columns: 1fr; row-gap: 14px; }
  .step { padding: 20px 18px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .svc-grid, .svc-grid .feature { grid-template-columns: 1fr; }
  .svc-grid .feature { grid-column: span 1; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 22px 18px; }
  /* Footer stays two-up on phones. A single stacked column made it roughly
     three screens tall on its own. The logo and blurb span the full width;
     the four link blocks pair off below it. */
  .site-footer { padding-top: 38px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .foot-about { grid-column: 1 / -1; }
  .foot-about p { max-width: none; }
  .foot-logo { height: 58px; margin-bottom: 14px; }
  /* Nested two-up columns are too cramped inside a half-width block. */
  .foot-grid ul.two-col { columns: 1; }
  .foot-grid li { margin-bottom: 7px; }
  .foot-grid h4 { margin-bottom: 11px; }
  .foot-bottom { flex-direction: column; margin-top: 30px; }
}

@media (max-width: 480px) {
  /* The logo is a wide lockup, so it has to give way to the call and menu
     buttons rather than shove them off the edge. */
  .brand-logo { height: 34px; }
  .nav { gap: 10px; }
  .nav-actions { gap: 8px; }
  .foot-logo { height: 64px; }
}

@media (max-width: 420px) {
  /* The banner stays a single row of three at every width. Stacking it made
     the numbers read as three separate claims instead of one credential line. */
  .stats-grid { grid-template-columns: repeat(3, 1fr); padding: 18px 0; }
  .stat { padding: 0 6px; }
  .stat .num { font-size: 23px; }
  .stat .lbl { font-size: 14px; line-height: 1.3; }
  .gallery { grid-template-columns: 1fr; }
  .feat-side { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .type-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .cta-band, .nav-backdrop { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Shared additions (from the base template)
   ============================================================ */

/* Round badge logo on the light header, with the wordmark set beside it. */
.brand { gap: 12px; }
.brand-logo { height: 52px; width: 52px; border-radius: 50%; background: #fff; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name strong { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--sand); letter-spacing: .01em; }
.brand-name span { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); font-weight: 700; }
.foot-logo { height: 96px; width: 96px; border-radius: 50%; background: #fff; }

/* Single column services dropdown: one trade, so no Interior / Exterior split. */
.drop-menu.single { grid-template-columns: 1fr; min-width: 280px; }

/* Honest photo placeholder: used wherever a real project photo will go. */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 100%; min-height: 140px; text-align: center; padding: 16px;
  background: linear-gradient(135deg, var(--navy-600), var(--navy-700));
  border: 1px dashed rgba(var(--accent-rgb),0.45); border-radius: 12px;
  color: rgba(var(--accent-rgb),0.6);
}
.ph .soon-label {
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper);
  background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.45);
  border-radius: 999px; padding: 5px 13px;
}
.ph small { color: var(--muted); font-size: 14px; max-width: 240px; }
.hero-figure .ph { aspect-ratio: 4 / 5; border: 0; border-radius: 0; background: linear-gradient(160deg, var(--navy-600), var(--navy-700)); }
.hero-figure .ph small { color: var(--muted); }
.meet-photo .ph { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.feat-main .ph, .feat-side .ph { border-radius: 12px; }
.gallery .ph { aspect-ratio: 3 / 4; height: auto; }
.type-thumb .ph { border: 0; border-radius: 0; min-height: 0; }

/* Three reviews side by side on the dark band. */
.quote-grid.three { max-width: none; }
.quote-grid.three .quote-card { flex: 1 1 300px; max-width: 380px; padding: 40px 26px 26px; }
.quote-grid.three .quote-card blockquote { font-size: 18px; }
.quote-source { text-align: center; margin: 34px 0 0; color: var(--muted); font-size: 16px; }
.quote-source a { color: var(--copper); font-weight: 700; }

/* Book-online block under the estimate points. */
.book-card {
  margin-top: 26px; padding: 20px 22px; border-radius: 12px;
  background: var(--navy-700); border: 1px solid var(--line);
}
.book-card h3 { color: var(--sand); font-family: var(--serif); font-weight: 500; font-size: 20px; margin-bottom: 6px; }
.book-card p { color: var(--muted); font-size: 16px; margin-bottom: 14px; }

/* Gallery page filter chips (pure CSS: radio inputs drive the grid). */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-row label {
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--navy-700); color: var(--cream); font-size: 15px; font-weight: 600; cursor: pointer;
}
.filter-row input:checked + label { background: var(--copper); border-color: var(--copper); color: var(--on-copper); }
.filter-row input:focus-visible + label { outline: 2px solid var(--copper); outline-offset: 2px; }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: 14px; color: var(--muted); padding: 8px 2px 0; }

/* Service areas hub cards. */
.area-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.area-card { text-decoration: none; display: block; }
.area-card p { margin-bottom: 0; }
a.area-card:hover { border-color: var(--copper); }
.area-card .svc-more { display: inline-block; margin-top: 12px; }

/* Small text helpers so no page needs an inline style. */
.lead-muted { color: var(--muted); font-size: 18px; }
.note-muted { color: var(--muted); font-size: 16px; margin-top: 26px; }
.btn-block { width: 100%; }
.mt-20 { margin-top: 20px; }

@media (max-width: 760px) {
  .area-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .brand-logo { height: 42px; width: 42px; }
  .brand-name strong { font-size: 16px; }
  .brand-name span { display: none; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
}

.type-strip.five { grid-template-columns: repeat(5, 1fr); }
.form-note { text-align: center; color: var(--muted); font-size: 14px; margin: 12px 0 0; }
@media (max-width: 980px) { .type-strip.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .type-strip.five { grid-template-columns: repeat(2, 1fr); } }


/* Placeholder tiles in the featured grid: on narrow screens the three side
   tiles sit in one row, so they must be allowed to shrink below the label. */
@media (max-width: 980px) {
  .feat-main .ph { aspect-ratio: 4 / 3; }
  .feat-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feat-side .ph { aspect-ratio: 1 / 1; min-height: 0; padding: 8px; }
  .feat-side .ph .soon-label { font-size: 10px; letter-spacing: .08em; padding: 4px 8px; }
}

/* The open drawer (z-index 120) must not cover the menu button, phone and
   Estimate button, or there is no visible way to close it. */
@media (max-width: 900px) {
  .nav-actions { position: relative; z-index: 125; }
}

/* ---------- Mobile footer ----------
   Phone layout: logo and blurb full width, then Services and Contact side by
   side, then the town list and company links full width so the town list wraps
   across the whole screen instead of stacking in a narrow column. */
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 20px; }
  .foot-grid > div:nth-child(2) { order: 2; }
  .foot-grid > div:nth-child(4) { order: 3; }
  .foot-grid > div:nth-child(3) { order: 4; grid-column: 1 / -1; }
  .foot-about { display: flex; align-items: center; gap: 16px; }
  .foot-about .foot-logo { height: 72px; width: 72px; margin: 0; flex-shrink: 0; }
  .foot-about p { margin: 0; }
  .foot-grid a { overflow-wrap: anywhere; }
  .foot-bottom { text-align: left; gap: 6px; }
}
/* .foot-grid h4 resets margin-top, which silently cancelled the utility and
   jammed "Company" against the town list. */
.foot-grid h4.mt-20 { margin-top: 22px; }

/* Bigger call button on phones and tablets. Many customers are
   older on some sites, so the phone gets a large, outlined tap target (48px, above
   the 44px minimum) with a bigger icon instead of a small bare glyph. */
@media (max-width: 900px) {
  .nav-call {
    width: 48px; height: 48px; justify-content: center;
    border: 2px solid var(--copper); border-radius: 10px;
  }
  .nav-call svg { width: 26px; height: 26px; }
  .nav-toggle { padding: 12px 13px; }
}

/* A phone number must never break across lines ("970-" / "1504"). */
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Form sizing (trimmed back by the Standard sizing block at the end) ---------- */
.hero-sub { font-size: 20px; }
.field label, .chip-field legend { font-size: 17px; }
.field input, .field select, .field textarea { padding: 15px 16px; font-size: 18px; min-height: 54px; }
.chip-input label { padding: 11px 18px; font-size: 16px; }
.form-card .btn-lg { padding: 19px 28px; font-size: 19px; }
.form-note { font-size: 16px; }
.call-note { margin-top: 6px; }
.call-note a { font-weight: 700; }

/* The word "Menu" beside the three-line icon: plenty of visitors do not
   recognise the icon on its own. */
.nav-toggle { align-items: center; gap: 7px; }
.toggle-label { font-size: 15px; font-weight: 700; }

/* Real photos in the hero, type strip and gallery. */
.gallery figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.photo-row img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
@media (max-width: 760px) { .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.type-strip.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 980px) { .type-strip.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .type-strip.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.type-strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .type-strip.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Choose your material" cards on service pages. Kept compact on purpose:
   five short cards in a wrapping grid, one line each. */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 12px; }
.mat { background: var(--navy-700); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.mat strong { display: block; color: var(--sand); font-size: 17px; margin-bottom: 3px; }
.mat span { display: block; color: var(--muted); font-size: 15px; line-height: 1.45; }
.mat-note { color: var(--muted); font-size: 15px; }


/* Thank-you page: the scheduling step is the first thing people see after
   sending the form, set as one clear card with one big button. */
.next-step { padding: 48px 0; }
.step-card {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: #FFFFFF; border: 2px solid var(--copper); border-radius: 14px;
  padding: 32px 26px; box-shadow: var(--shadow);
}
.step-card h2 { color: var(--sand); }
.step-card p { color: var(--muted); }
.step-card .btn { margin: 6px 0 14px; }
.step-skip { font-size: 16px; margin: 0; }
@media (max-width: 420px) { .mat { padding: 12px 13px; } .mat strong { font-size: 16px; } }

/* ---------- Readability pass (Curtis, 2026-09-28) ---------- */
/* Reviews: plain sturdy font, bright text, left-aligned, with the opening
   quotation mark sitting right in front of the first word instead of
   floating faded in the card corner. */
.quote-mark { display: none; }
.quote-card { text-align: left; padding: 30px 28px 26px; }
.quote-grid.three .quote-card { padding: 30px 26px 24px; }
.stars { justify-content: flex-start; }
.quote-card blockquote,
.quote-grid.three .quote-card blockquote {
  font-family: var(--sans); font-weight: 400;
  font-size: 19px; line-height: 1.6; color: var(--band-strong);
}
.quote-card blockquote::before {
  content: "\201C"; color: var(--copper);
  font-family: Georgia, serif; font-weight: 700; font-size: 2.2em;
  line-height: 0; vertical-align: -0.42em; margin-right: 3px;
}
.quote-card blockquote::after {
  content: "\201D"; color: var(--copper);
  font-family: Georgia, serif; font-weight: 700; font-size: 2.2em;
  line-height: 0; vertical-align: -0.42em; margin-left: 2px;
}
.quote-lead { font-family: var(--sans); font-size: 1.1em; color: var(--band-strong); display: inline; margin: 0; }
.quote-card figcaption { justify-content: flex-start; }
.quote-avatar { font-family: var(--sans); font-weight: 700; }

/* How It Works: plain bold numbers (the display serif draws "1" like a small
   capital I) and larger, brighter step text. */
.step-num { font-family: var(--sans); font-weight: 800; font-size: 19px; width: 42px; height: 42px; }
.step p { font-size: 17px; color: var(--band-strong); }
.step ul li { font-size: 16px; }

/* Small uppercase labels: a little bigger with less letter spacing. */
.section-tag, .eyebrow, .strip-label, .hero-svc-label, .drop-head, .faq-group, .foot-grid h4 { letter-spacing: .08em; }
.section-tag, .eyebrow { font-size: 15px; }

/* Header estimate button in capitals so it reads as the main action. */
.nav-actions .btn { text-transform: uppercase; letter-spacing: .04em; }

/* Owner photo (home and About). height:auto so the width/height attributes
   cannot stretch it. */
.meet-photo img { width: 100%; height: auto; }
.about-photo { margin: 0; }
.about-photo figcaption { color: var(--muted); font-size: 15px; margin-top: 10px; text-align: center; }

/* ---------- Mobile header fit ----------
   Below 700px the wordmark ran under the call button. The round logo already
   says the business name, so the text lockup drops out on small screens. */
@media (max-width: 700px) {
  .brand-name { display: none; }
}

/* ---------- Form choices that look selectable ----------
   Each option shows a circle (pick one) or a square (pick any) that fills in
   when chosen, so it reads as something to tap, not a plain button. */
.chip-input label { display: inline-flex; align-items: center; gap: 10px; }
.chip-input label::before {
  content: ""; flex-shrink: 0; width: 20px; height: 20px;
  border: 2px solid var(--muted); border-radius: 5px; background: #fff;
  box-sizing: border-box;
}
.chip-input input[type="radio"] + label::before { border-radius: 50%; }
.chip-input input:checked + label::before {
  border-color: #fff; background: #fff;
  box-shadow: inset 0 0 0 4px var(--copper);
}
.form-req-note { font-size: 16px; color: var(--muted); margin: 0 0 16px; }
.form-req-note .req, .field .req { color: #B42318; font-weight: 700; }

/* ---------- Service page header ----------
   A real header, like the home page: location eyebrow, big title, intro,
   Estimate + Call buttons, and a project photo when there is one. */
.svc-hero { padding: 54px 0 60px; }
.svc-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.svc-hero-grid.no-photo { grid-template-columns: 1fr; max-width: 780px; }
.svc-hero h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 16px; }
.svc-hero .svc-hero-sub { font-size: 20px; max-width: 620px; margin-bottom: 26px; }
.svc-hero .hero-cta { margin-bottom: 0; }
.svc-hero .btn-ghost { background: rgba(244,248,252,0.06); }
.svc-hero-photo { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,0.3); }
.svc-hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 45%; }
@media (max-width: 980px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .svc-hero-photo { max-width: 560px; }
}

/* ---------- Materials checklist ----------
   A plain "what we are good at" list with checkmarks, not cards, so nothing
   looks like a button that does nothing. */
.prose ul.mat-list { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.prose ul.mat-list li { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.prose ul.mat-list li svg { color: var(--copper); flex-shrink: 0; }
@media (max-width: 480px) { .prose ul.mat-list { grid-template-columns: 1fr; } }

/* ---------- Desktop menu fit ----------
   With About added, "Service Areas" wrapped to two lines around 1280px.
   Keep every item on one line and give up the spelled-out phone number
   (the icon stays) until there is room for it. */
.navlink { white-space: nowrap; }
.menu { gap: 22px; }
@media (max-width: 1240px) { .nav-call span.num { display: none; } }

/* ---------- Phone menu opens below the header ----------
   The drawer used to cover the full screen and scroll underneath the call,
   Estimate and Menu buttons. It now starts under the header bar, so those
   buttons sit above it and nothing slides behind them. */
@media (max-width: 900px) {
  .menu { top: var(--hdr-h, 74px); bottom: 0; height: auto; padding-top: 16px; }
  .nav-backdrop { top: var(--hdr-h, 74px); }
}

/* Materials list: one per row, larger type (Curtis, 2026-09-28). */
.prose ul.mat-list { grid-template-columns: 1fr; gap: 12px; }
.prose ul.mat-list li { font-size: 20px; }
.prose ul.mat-list li svg { width: 22px; height: 22px; }

/* Schedule button: solid navy with a calendar icon, so it stands apart from the
   orange estimate button beside it in the hero. */
.btn-schedule { background: var(--navy-900); color: #FFFFFF; border-color: var(--navy-900); }
.btn-schedule:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); }
.btn svg { flex-shrink: 0; }

/* Leave a review (home page, inside the dark reviews band). */
.review-ask {
  max-width: 720px; margin: 34px auto 0; text-align: center;
  padding: 26px 24px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(244,248,252,0.05);
}
.review-ask h3 { color: var(--sand); font-family: var(--serif); font-weight: 500; font-size: 24px; margin-bottom: 8px; }
.review-ask p { color: var(--muted); font-size: 17px; margin-bottom: 18px; }
.review-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-review { background: #FFFFFF; color: var(--navy-900); border-color: #FFFFFF; font-size: 17px; padding: 14px 22px; }
.btn-review:hover { background: var(--band-accent); border-color: var(--band-accent); color: var(--navy-900); }
@media (max-width: 480px) { .review-btns .btn { width: 100%; } }
.btn-review { gap: 10px; }
.btn-review .brand-ico { width: 24px; height: 24px; }

/* ---------- Gallery: "Go to" buttons and one section per material ----------
   No filters: everything stays on the page and people scroll or jump.
   scroll-margin keeps each section heading clear of the sticky header. */
.goto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 34px; }
.goto-label { font-weight: 700; font-size: 18px; color: var(--sand); margin-right: 4px; }
.goto-btn {
  display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 10px;
  background: #FFFFFF; border: 2px solid var(--copper); color: var(--copper);
  font-weight: 700; font-size: 17px; text-decoration: none;
}
.goto-btn:hover, .goto-btn:focus-visible { background: var(--copper); color: var(--on-copper); }
.mat-section { scroll-margin-top: calc(var(--hdr-h, 74px) + 16px); margin-bottom: 42px; }
#gallery-top { scroll-margin-top: var(--hdr-h, 74px); }
.mat-head { font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--sand); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.back-top { margin: 14px 0 0; text-align: right; }
.back-top a { font-weight: 700; font-size: 17px; }
@media (max-width: 480px) { .goto-btn { flex: 1 1 100%; justify-content: center; } }

/* Photo rows and the 3x3 service grids keep three columns on phones (two
   columns left a lone photo on the last row). Square crops keep the grid
   short; the full photos are one tap away in the gallery. */
@media (max-width: 760px) {
  .photo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .photo-row img { aspect-ratio: 1 / 1; border-radius: 8px; }
}

/* ---------- Gallery: cream background + soft "Go to" buttons ----------
   Warm cream behind the gallery so white bathrooms stand out instead of
   melting into a white page. Go to buttons are soft light-blue pills with a
   down arrow: clearly buttons, but nothing like the orange estimate or solid
   navy schedule buttons. */
.gallery-cream { background: var(--gallery-bg); }
.gallery-cream .gallery figure img { border-color: rgba(var(--ink-rgb),0.12); box-shadow: 0 6px 18px rgba(var(--ink-rgb),0.12); background: #fff; }
.gallery-cream .gallery figcaption { color: #4A5568; }
.gallery-cream .mat-head { border-bottom-color: rgba(var(--ink-rgb),0.15); }
.gallery-cream .no-photos { background: #FFFFFF; }
.goto-btn {
  background: var(--chip-fill); border: 1px solid var(--chip-border); color: var(--sand);
  border-radius: 999px; padding: 12px 20px 12px 18px; gap: 8px;
}
.goto-btn::before { content: "\2193"; font-weight: 700; color: var(--accent-2); }
.goto-btn:hover, .goto-btn:focus-visible { background: var(--chip-fill-2); border-color: var(--chip-border-2); color: var(--sand); }

/* ---------- New arch logo (2026-10-12) ----------
   Header: arch icon only (the lettering is unreadable at header size and the
   wordmark text sits beside it). Footer: full logo on a white card so it reads
   on the navy band. Replaces the old round badge sizing. */
.brand-logo { height: 54px; width: auto; border-radius: 0; background: none; }
.foot-logo { width: 220px; height: auto; border-radius: 12px; background: #fff; padding: 10px; }
@media (max-width: 480px) { .brand-logo { height: 46px; width: auto; } }
@media (max-width: 760px) {
  .foot-about .foot-logo { width: 120px; height: auto; padding: 6px; border-radius: 10px; }
}

/* ============================================================
   Template additions (theme only through the :root tokens)
   ============================================================ */

/* Inter for headings too, set heavier so it carries like a display face. */
h1, h2 { font-weight: 800; letter-spacing: -0.02em; }
.type-card h3, .aside-card h3, .book-card h3, .review-ask h3,
.mat-head, .meet-sign, .stat .num { font-weight: 800; }
.stat .num { letter-spacing: -0.01em; }

/* ---------- Buttons: every one has a solid fill (PBC lesson) ----------
   Primary = solid accent with a soft shadow (Estimate). Secondary (.btn-ghost)
   = solid white pill, 1.5px cap-blue border and text, inverting on hover. */
.btn { min-height: 44px; border-radius: 10px; }
.btn-primary { box-shadow: 0 6px 16px rgba(var(--btn-rgb),0.28); }
.btn-ghost {
  background: #FFFFFF; color: var(--accent-2); border: 1.5px solid var(--accent-2);
  box-shadow: 0 4px 12px rgba(var(--ink-rgb),0.10);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--accent-2); border-color: var(--accent-2); color: #FFFFFF; }
/* On the navy page header the white pill stays white with navy text. */
.svc-hero .btn-ghost, .page-hero .btn-ghost { background: #FFFFFF; color: var(--navy-900); border-color: #FFFFFF; }
.svc-hero .btn-ghost:hover, .page-hero .btn-ghost:hover { background: var(--band-accent); border-color: var(--band-accent); color: var(--navy-900); }
/* White sections and white cards: the white pill would vanish, so it takes a tinted fill. */
section:not(.alt):not(.hero):not(.page-hero):not(.quote-band) .btn-ghost,
.aside-card .btn-ghost, .form-card .btn-ghost, .book-card .btn-ghost, .why-card .btn-ghost {
  background: var(--accent-2-tint); border-color: var(--accent-2); color: var(--accent-2);
}
section:not(.alt):not(.hero):not(.page-hero):not(.quote-band) .btn-ghost:hover,
.aside-card .btn-ghost:hover { background: var(--accent-2); color: #FFFFFF; }

/* Hero service chips are links, so they get a solid fill and a 44px target. */
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 16px; font-size: 16px; font-weight: 600;
  background: #FFFFFF; border: 1.5px solid var(--chip-border); color: var(--sand);
}
.chip:hover { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.form-card { background: #FFFFFF; }
.chip-input label { background: var(--chip-fill); border: 1.5px solid var(--chip-border); min-height: 44px; }
.chip-input label:hover { background: var(--chip-fill-2); }

/* Cards on a ground of nearly the same colour need more than a hairline. */
.why-card { background: #FFFFFF; box-shadow: 0 8px 22px rgba(var(--ink-rgb),0.08); }
.type-card { background: #FFFFFF; box-shadow: 0 8px 22px rgba(var(--ink-rgb),0.09); }
.aside-card { background: var(--alt); box-shadow: 0 8px 22px rgba(var(--ink-rgb),0.08); }
.aside-card .btn-ghost { background: var(--accent-2-tint); }

/* ---------- Header brand: logo + wordmark ---------- */
.brand-logo { height: 56px; width: auto; }
.brand-name strong { font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.brand-name span { font-size: 13px; letter-spacing: .1em; }
.foot-logo { width: 230px; }
@media (max-width: 480px) { .brand-logo { height: 46px; } }

/* ---------- Dropdown hover bridge (PBC lesson) ---------- */
@media (min-width: 901px) {
  .has-drop::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    top: 100%; width: 480px; height: 14px; display: none;
  }
  .has-drop:hover::after, .has-drop:focus-within::after { display: block; }
}

/* ---------- Optional hero extras ----------
   .hl-tag: a highlighted word in the H1 (e.g. a short brand name).
   .hero-badge: logo + one-line explainer under the hero sub.
   .why-num.letter: letter tiles instead of 1/2/3 on the Why cards (acronyms). */
.hero h1 em { color: var(--copper); }
.hero h1 .hl-tag {
  display: inline-block; font-style: normal; color: #FFFFFF; background: var(--accent-2);
  padding: 0 .22em; border-radius: .18em; letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(var(--accent-2-rgb),0.28);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px;
  background: #FFFFFF; border: 1.5px solid var(--chip-border); border-radius: 14px;
  padding: 8px 16px 8px 10px; box-shadow: 0 4px 12px rgba(var(--ink-rgb),0.08);
}
.hero-badge img { height: 54px; width: auto; }
.hero-badge span { font-size: 16px; color: var(--muted); line-height: 1.35; }
.hero-badge strong { display: block; color: var(--sand); font-size: 17px; font-weight: 800; }
.hero-badge b { color: var(--accent-2); }

.why-num.letter {
  font-family: var(--sans); font-weight: 800; font-size: 34px; width: 64px; height: 64px;
  background: var(--accent-2); color: #FFFFFF; border: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.why-card .letter-word { display: block; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); font-weight: 700; margin: 0 0 6px; }
.head-hl h2 b { color: var(--accent-2); }

/* Optional brand line, e.g. "We install [Brand] equipment". */
.brand-line { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); margin: 0 0 22px; }
.brand-line strong { color: var(--sand); }
.brand-line svg { color: var(--copper); flex-shrink: 0; }

/* Real photos everywhere, so height:auto guards against stretch. */
.feat-main img, .feat-side img { display: block; }
.meet-photo .ph { min-height: 360px; }
.meet-photo figcaption { color: var(--muted); font-size: 15px; margin-top: 10px; text-align: center; }

/* Service card grid on the home page (six services). */
.type-strip.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.type-strip.three .type-thumb { aspect-ratio: 4 / 3; }
.type-strip.three .type-card h3 { font-size: 19px; padding: 14px 16px 4px; }
.type-card p { color: var(--muted); font-size: 16px; margin: 0; padding: 0 16px 16px; line-height: 1.5; }
.type-thumb .ph .soon-label { font-size: 12px; }
@media (max-width: 760px) {
  .type-strip.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .type-card p { display: none; }
  .type-strip.three .type-card h3 { font-size: 16px; padding: 10px 12px 12px; }
}

/* Town page: services offered as link pills (solid fill). */
.svc-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 10px 0 18px; }
.prose ul.svc-links { padding: 0; }
.prose .svc-links li { margin: 0; }
.svc-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border-radius: 999px;
  background: var(--chip-fill); border: 1.5px solid var(--chip-border); color: var(--sand); font-weight: 700; font-size: 16px; text-decoration: none;
}
.svc-links a:hover { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.photo-cap { color: var(--muted); font-size: 15px; margin: 10px 0 0; }

/* "Photo Coming Soon" tiles inside photo rows keep the same square shape. */
.photo-row .ph { aspect-ratio: 4 / 3; min-height: 0; }
@media (max-width: 760px) { .photo-row .ph { aspect-ratio: 1 / 1; padding: 6px; } .photo-row .ph .soon-label { font-size: 10px; letter-spacing: .06em; padding: 3px 7px; } .photo-row .ph small { display: none; } }

/* Gallery Go to pills in warm stone rather than sky blue. */
.goto-btn { background: #FFFFFF; border: 1.5px solid var(--chip-border); }
.goto-btn::before { color: var(--copper); }
.goto-btn:hover, .goto-btn:focus-visible { background: var(--chip-fill); border-color: var(--chip-border-2); }

/* On the navy page headers the re-scoped accent turns the Estimate button pale
   peach with white text. Keep it a solid, darker accent there. */
.page-hero .btn-primary, .svc-hero .btn-primary { background: var(--cta-on-dark); color: #FFFFFF; box-shadow: 0 6px 16px rgba(0,0,0,0.28); }
.page-hero .btn-primary:hover, .svc-hero .btn-primary:hover { background: var(--btn); color: var(--on-btn); }

/* Button scan: white chips nearly vanished on the light hero, so they take the
   warm stone fill used by the form choices. */
.chip { background: var(--chip-fill); border-color: var(--chip-border); }

/* ============================================================
   Standard sizing (the default for every site)
   Comfortable, modern sizes. senior.css, loaded after this file on
   senior-friendly sites only, raises them again.
   ============================================================ */
body { font-size: 17px; }
.hero-sub, .svc-hero .svc-hero-sub { font-size: 18px; }
.section-head p, .meet p, .lead-muted, .prose p, .prose li { font-size: 17px; }
.field label, .chip-field legend { font-size: 16px; }
.field input, .field select, .field textarea { padding: 10px 13px; font-size: 16px; min-height: 46px; }
/* Form choices: compact pills with a small box or circle. Senior mode makes them bigger. */
.chip-input label { padding: 7px 14px; font-size: 15px; min-height: 40px; gap: 8px; border-width: 1px; }
.chip-input label::before { width: 16px; height: 16px; border-width: 1.5px; }
.chip-input input:checked + label::before { box-shadow: inset 0 0 0 3px var(--btn); }
.chip-row { gap: 6px; }
.form-card .btn-lg { padding: 14px 24px; font-size: 17px; }
.quote-card blockquote, .quote-grid.three .quote-card blockquote { font-size: 17px; }
.step p { font-size: 16px; }
.prose ul.mat-list li { font-size: 18px; }
.prose ul.mat-list li svg { width: 20px; height: 20px; }
/* Phone header: a normal 44px call button and an icon-only menu button.
   The word "Menu" stays in the markup for screen readers. */
@media (max-width: 900px) {
  .nav-call { width: 44px; height: 44px; border-width: 1.5px; }
  .nav-call svg { width: 22px; height: 22px; }
  .nav-toggle { padding: 11px 12px; }
}
.toggle-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Owner photo figure: drop the browser's default 40px figure margins and let
   the grid columns shrink. With the "Photo Coming Soon" tile, the margins plus
   the tile's label pushed the Meet the Owner section 13px past a 375px phone
   (HVAC Specialties lesson). */
.meet-photo { margin: 0; }
.meet > * { min-width: 0; }

/* ---------- How It Works: clear reading order ----------
   Number, then a title in the band accent, then one line of plain text, then
   the smaller muted checklist set off by a hairline. Before, the title and the
   text were the same bright color and size, so nothing told the eye where to start. */
.step h3 { color: var(--band-accent); font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.step p { color: var(--band-strong); font-size: 16px; line-height: 1.55; }
.step ul { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.step ul li { color: var(--band-muted); font-size: 15px; margin-bottom: 7px; }
.step ul li::before { background: var(--band-accent); top: 9px; }

/* Footer social links: brand icon beside the label. */
.foot-social { display: inline-flex; align-items: center; gap: 8px; }
.foot-social .foot-ico { flex-shrink: 0; }

/* Stats strip on phones: one line per number and label. Keep labels short
   (one or two words) so all three columns line up. */
@media (max-width: 480px) {
  .stat .num { font-size: 26px; }
  .stat .lbl { font-size: 13px; letter-spacing: 0; line-height: 1.3; }
}