/* ==========================================================================
   TEMPLATE C2 — v1
   St. Pete Window Replacement. Built from design/desktop.html + mobile.html.

   One stylesheet, no build step, no framework.

   PER-SITE RECOLOUR: change --green, --char and --deep in §1. Everything
   else derives from them. Do not hunt for hex values elsewhere — there
   aren't any.

   Sections
     1. Tokens              9. Services
     2. Reset / base       10. Change grid
     3. Layout             11. Process
     4. Buttons            12. Window styles
     5. Utility bar        13. CTA band
     6. Header / nav       14. Reviews (hidden until real)
     7. Hero               15. Service area
     8. Quote form         16. FAQ
                           17. Pricing
                           18. Prose / inner pages
                           19. Footer + mobile bar
                           20. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- the three recolour levers --- */
  --green:        #3EDC81;   /* action: buttons, accents on dark */
  --char:         #121614;   /* hero, dark sections */
  --deep:         #0B0E0C;   /* utility bar, footer */

  --on-green:     #0B1F14;   /* text that sits on --green */
  --green-ink:    #12703A;   /* green for text/links on light ground */
  --green-ink-hv: #0B4D27;

  --panel:        #1B211E;   /* dark panel */
  --panel-line:   #2F3833;   /* dark border */
  --dark-line-2:  #3A443F;   /* outline button on dark */
  --grid-line:    #1C2320;   /* hero grid */

  --bg:           #F5F6F2;   /* page ground */
  --surface:      #FFFFFF;
  --line:         #DDE1DA;
  --line-strong:  #C9CFC8;
  --line-input:   #B9C0BA;

  --ink:          #121614;
  --muted:        #4D5852;   /* muted on light */
  --on-dark:      #C3CCC6;   /* muted on dark */

  --r-ctrl:        6px;      /* controls */
  --r-card:       10px;      /* cards */

  --maxw:       1200px;
  --gutter:       32px;
  --section-y:    96px;

  --font-head: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::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(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* NOTE: never put overflow-x: hidden here. With overflow-y visible it turns
   body into a scroll container and full-width sections paint short. Overflow
   is prevented with minmax(0, 1fr) and min-width: 0 instead. */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0; }

a { color: var(--green-ink); }
a:hover { color: var(--green-ink-hv); }

img { max-width: 100%; height: auto; display: block; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: var(--on-green); padding: 12px 20px;
  font-weight: 700; border-radius: 0 0 var(--r-ctrl) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section-y) 0; }
.section--dark { background: var(--char); color: #fff; }
.section--surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head {
  display: flex; flex-wrap: wrap; gap: 16px 48px;
  justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px;
}
.section-head h2 { font-size: clamp(32px, 3.6vw, 46px); max-width: 14em; }
.section-head p { max-width: 26em; color: var(--muted); }
.section--dark .section-head p { color: var(--on-dark); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green-ink);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.section--dark .eyebrow, .hero .eyebrow { color: var(--green); }

/* every grid/flex child that could be squeezed */
.grid > *, .hero__inner > *, .svc-grid > *, .change > *, .steps > *,
.style-grid > *, .area__inner > *, .field-row > *, .trust__grid > *,
.footer__top > *, .final__inner > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 22px; border-radius: var(--r-ctrl);
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--green { background: var(--green); color: var(--on-green); }
.btn--green:hover { background: #2fc870; color: var(--on-green); }

.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--on-dark { background: transparent; color: #fff; border: 2px solid var(--dark-line-2); font-size: 18px; }
.btn--on-dark:hover { border-color: var(--green); color: #fff; }
.btn--on-dark svg { stroke: var(--green); }

.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. UTILITY BAR
   -------------------------------------------------------------------------- */
.utility { background: var(--deep); color: var(--on-dark); font-size: 14px; }
.utility .container {
  padding-top: 10px; padding-bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between; align-items: center;
}
.utility__left { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header .container {
  padding-top: 16px; padding-bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
}
/* The header must never wrap to two rows: the actions would drop below the nav
   and leave a dead gap on the left. Keep nav labels SHORT (one word where
   possible) and the compact breakpoint below takes over before it can happen. */

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.logo__mark {
  width: 40px; height: 40px; background: var(--char); border-radius: var(--r-ctrl);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 7px;
}
.logo__mark span { background: var(--bg); border-radius: 1px; }
.logo__mark span:first-child { background: var(--green); }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.logo__name { font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }
.logo__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; flex-wrap: nowrap; gap: 8px 22px; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; }
.nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.nav a:hover { color: var(--green-ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--green); }
.nav { align-items: center; }
/* Owner-supplied logo (Logo Drop, 2026-10-20) */
.logo--img img { display: block; width: auto; height: 76px; }
.footer .logo--img img { height: 64px; }
@media (max-width: 640px) { .logo--img img { height: 54px; } }
@media (max-width: 360px) { .logo--img img { height: 46px; } }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-drop {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none;
  font: inherit; color: var(--ink); cursor: pointer; transition: color .15s;
}
.nav-drop .caret { font-size: 12px; transition: transform .15s; }
.nav-item:hover .nav-drop, .nav-item.is-open .nav-drop { color: var(--green-ink); }
.nav-item:hover .caret, .nav-item.is-open .caret { transform: rotate(180deg); }
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: -14px; z-index: 60; min-width: 230px;
  display: flex; flex-direction: column; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 14px 34px rgba(18,22,20,.16);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s;
}
/* invisible bridge over the 10px gap so the menu stays open on the way down */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel, .nav-item.is-open .nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav .nav-panel a { display: block; padding: 10px 12px; border-radius: var(--r-ctrl); transition: background .15s, color .15s; }
.nav .nav-panel a:hover, .nav .nav-panel a:focus-visible { background: var(--bg); color: var(--green-ink); }
.nav .nav-panel a[aria-current="page"] { box-shadow: none; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .nav-panel, .nav-drop .caret { transition: none; } }
.mobile-menu__group { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 0 4px; }
.mobile-menu__group:first-child { padding-top: 0; }
.mobile-menu ul + .mobile-menu__group, .mobile-menu ul + ul { border-top: 1px solid var(--line); margin-top: 6px; }
.form-error { font-size: 15px; font-weight: 600; color: #9B1C1C; background: #FDECEC; border: 1px solid #F3B4B4; border-radius: var(--r-ctrl); padding: 10px 12px; }
.prose a[href^="mailto:"] { overflow-wrap: anywhere; }
.field__opt { color: var(--muted); font-weight: 400; }
.quote select { appearance: auto; }
.page-hero__date { margin-top: 12px; font-size: 14px; color: var(--muted); }
a.chip { text-decoration: none; color: inherit; transition: border-color .15s, color .15s; }
a.chip:hover { color: var(--green-ink); border-color: var(--green-ink); }

.header__actions { display: flex; gap: 10px; align-items: stretch; margin-left: auto; flex: none; white-space: nowrap; }

.phone-box {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
  border: 1.5px solid var(--ink); border-radius: var(--r-ctrl);
  text-decoration: none; color: var(--ink);
}
.phone-box:hover { background: var(--bg); color: var(--ink); }
.phone-box svg { stroke: var(--green-ink); flex: none; }
.phone-box__text { display: flex; flex-direction: column; line-height: 1.15; }
.phone-box__label { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.phone-box__num { font-family: var(--font-head); font-weight: 700; font-size: 17px; }

/* Both of these only ever appear under the 1080px breakpoint. They are hidden
   here, at base, so they cannot leak onto desktop if a later rule is edited. */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--char);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 120px 120px;
  color: #fff;
  isolation: isolate;
}
/* photo variant: add class="hero hero--photo" and set --hero-img */
.hero--photo { background-image: none; }
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img); background-size: cover; background-position: center;
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,22,20,.95) 0%, rgba(18,22,20,.88) 42%, rgba(18,22,20,.62) 100%),
    linear-gradient(180deg, rgba(18,22,20,.55) 0%, rgba(18,22,20,.35) 55%, rgba(18,22,20,.8) 100%);
}

.hero__inner {
  padding: 56px 0 72px;
  display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: center;
}
.hero__copy { flex: 1 1 480px; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; }
.hero__lead { font-size: 20px; line-height: 1.5; color: var(--on-dark); max-width: 34em; }

.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 18px; }
.checks li { display: flex; gap: 12px; align-items: center; }
.checks svg { stroke: var(--green); flex: none; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; padding-top: 8px; }
.hero__rating { color: var(--on-dark); font-size: 16px; }

.hero__form { flex: 1 1 420px; position: relative; padding: 0 0 28px 28px; }
.hero__form::before {
  content: ""; position: absolute; right: 0; bottom: 0; top: 28px; left: 0;
  border: 2px solid var(--green); border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   8. QUOTE FORM
   -------------------------------------------------------------------------- */
.quote {
  position: relative; background: var(--surface); color: var(--ink);
  border-radius: var(--r-card); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.quote--flat { box-shadow: 0 2px 10px rgba(18,22,20,.06); border: 1px solid var(--line); }
.quote__head { display: flex; flex-direction: column; gap: 6px; }
.quote__head h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.quote__head p { color: var(--muted); font-size: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; }

.quote input, .quote textarea, .quote select {
  height: 52px; border: 1.5px solid var(--line-input); border-radius: var(--r-ctrl);
  padding: 0 14px; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--surface); width: 100%;
}
.quote textarea { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.quote input::placeholder, .quote textarea::placeholder { color: #8C958F; }

.quote__foot { font-size: 13.5px; color: var(--muted); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-status { font-size: 15px; font-weight: 600; padding: 12px 14px; border-radius: var(--r-ctrl); }
.form-status--ok { background: #E7F8EE; color: var(--green-ink-hv); border: 1px solid #A9E3C3; }
.form-status--err { background: #FDECEC; color: #9B1C1C; border: 1px solid #F3C2C2; }

/* --------------------------------------------------------------------------
   9. TRUST STRIP + SERVICES
   -------------------------------------------------------------------------- */
.trust { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line);
}
.trust__item { background: var(--surface); padding: 24px 20px; display: flex; flex-direction: column; gap: 4px; }
.trust__value { font-family: var(--font-head); font-weight: 800; font-size: 24px; }
.trust__label { font-size: 14.5px; color: var(--muted); }

.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.svc-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.svc-card--featured { background: var(--char); color: #fff; border-color: var(--char); }
.svc-card--featured p { color: var(--on-dark); }
.svc-card h3 { font-size: 25px; }
.svc-card p { color: var(--muted); font-size: 16px; }
.svc-card__tag {
  align-self: flex-start; background: var(--green); color: var(--on-green);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px;
}
.svc-card__link { margin-top: auto; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.svc-card--featured .svc-card__link { color: var(--green); }

/* --------------------------------------------------------------------------
   10. CHANGE GRID   11. PROCESS   12. WINDOW STYLES
   -------------------------------------------------------------------------- */
.change { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.change__list { display: flex; flex-direction: column; gap: 28px; }
.change__item { display: flex; gap: 18px; }
.change__num {
  font-family: var(--font-head); font-weight: 800; font-size: 20px;
  color: var(--green-ink); flex: none; width: 38px; height: 38px;
  display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-ctrl);
}
.change__item h3 { font-size: 20px; margin-bottom: 4px; }
.change__item p { color: var(--muted); font-size: 16px; }

.photo { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; }
.step__num {
  font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: .1em;
  color: var(--green-ink); text-transform: uppercase; margin-bottom: 12px;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 16px; }

.style-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.style-card {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-card);
  padding: 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.style-card svg { width: 100%; height: auto; }
.style-card h3 { font-size: 18px; }
.style-card p { color: var(--on-dark); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   13. CTA BAND   14. REVIEWS   15. SERVICE AREA
   -------------------------------------------------------------------------- */
.cta-band { background: var(--green); color: var(--on-green); }
.cta-band .container {
  padding-top: 56px; padding-bottom: 56px;
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between;
}
.cta-band h2 { font-size: clamp(28px, 3vw, 40px); max-width: 16em; }
.cta-band p { max-width: 30em; font-size: 17px; }
.cta-band .btn--outline { border-color: var(--on-green); color: var(--on-green); }
.cta-band .btn--outline:hover { background: var(--on-green); color: var(--green); }

/* Reviews stay hidden until the partner supplies real ones.
   RANK-AND-RENT-MASTER: never invent a review. */
.review-slot {
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--r-card); padding: 28px; color: var(--muted);
}
.review-slot__title { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; }
.review-card__stars { color: var(--green-ink); letter-spacing: .12em; margin-bottom: 10px; }
.review-card__who { font-size: 14.5px; color: var(--muted); margin-top: 12px; }

.area__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; color: var(--ink); text-decoration: none;
}
a.chip:hover { border-color: var(--green-ink); color: var(--green-ink); }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--ink);
}
.faq__q:hover { color: var(--green-ink); }
.faq__icon { flex: none; transition: transform .2s ease; color: var(--green-ink); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 0 22px; color: var(--muted); font-size: 16.5px; max-width: 62ch; }
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   17. PRICING
   -------------------------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; }
.price-card__label { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.price-card__amount { font-family: var(--font-head); font-weight: 800; font-size: 34px; margin: 8px 0 6px; }
.price-card__note { font-size: 15px; color: var(--muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-head); font-weight: 700; font-size: 15px; background: var(--bg); }
tbody tr:last-child td { border-bottom: 0; }

.estimates-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: #EAF7F0; border: 1px solid #BCE3CE; border-radius: var(--r-card);
  padding: 20px 22px; margin-top: 24px;
}
.estimates-note svg { stroke: var(--green-ink); flex: none; margin-top: 2px; }
.estimates-note__title { font-weight: 700; margin-bottom: 4px; }
.estimates-note p { font-size: 15.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   18. PROSE / INNER PAGES
   -------------------------------------------------------------------------- */
.page-hero { background: var(--char); color: #fff; padding: 56px 0 64px; }
.page-hero h1 { font-size: clamp(34px, 4.4vw, 54px); margin-top: 18px; }
.page-hero__lead { font-size: 19px; color: var(--on-dark); max-width: 46em; margin-top: 18px; }

.breadcrumb { font-size: 14px; color: var(--on-dark); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb a { color: var(--on-dark); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb [aria-current="page"] { color: #fff; }

.body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }

.prose h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 21px; margin: 28px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--muted); font-size: 17px; max-width: 66ch; }
.prose ul, .prose ol { color: var(--muted); font-size: 17px; max-width: 66ch; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose .table-wrap { margin: 20px 0; }

.sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.side-card--dark { background: var(--char); color: #fff; border-color: var(--char); }
.side-card--dark p { color: var(--on-dark); font-size: 15px; }
.side-card__label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); }
.side-card__amount { font-family: var(--font-head); font-weight: 800; font-size: 32px; margin: 8px 0 8px; }
.side-card__title { font-family: var(--font-head); font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.side-card__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.side-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.side-links li + li { border-top: 1px solid var(--line); }
.side-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 16px; }
.side-links a:hover { color: var(--green-ink); }

/* --------------------------------------------------------------------------
   19. FOOTER + MOBILE BAR
   -------------------------------------------------------------------------- */
.final { background: var(--char); color: #fff; }
.final__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: center; padding: var(--section-y) 0; }
.final h2 { font-size: clamp(30px, 3.4vw, 44px); }
.final p { color: var(--on-dark); font-size: 18px; margin-top: 16px; max-width: 34em; }

.footer { background: var(--deep); color: var(--on-dark); font-size: 15px; }
.footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 40px; padding: 64px 0 48px; }
.footer__col-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.footer a { color: var(--on-dark); text-decoration: none; }
.footer a:hover { color: var(--green); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__blurb { max-width: 34em; }
.footer__bottom { border-top: 1px solid var(--panel-line); padding: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 14px; }

.mobilebar { display: none; }

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
/* Laptops are short, not just narrow. On a shallow viewport the hero has to
   give up some height or the quote form falls below the fold, which is the one
   thing on this page that must be visible without scrolling. */
@media (min-width: 1024px) and (max-height: 940px) {
  .hero__inner { padding: 36px 0 48px; gap: 36px 48px; }
  .hero h1 { font-size: clamp(38px, 3.6vw, 52px); }
  .hero__lead { font-size: 18px; }
  .hero__copy { gap: 18px; }
  .checks { gap: 10px; font-size: 17px; }
  .quote { padding: 26px; gap: 14px; }
  .quote__head h2 { font-size: 25px; }
  .quote input, .quote select { height: 48px; }
  .quote textarea { min-height: 72px; }
}

@media (max-width: 1199px) {
  .nav, .header__actions .phone-box { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto;
    background: none; border: 1.5px solid var(--ink); border-radius: var(--r-ctrl); cursor: pointer;
  }
  .header__actions { margin-left: 12px; }
  .mobile-menu { display: none; width: 100%; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
  .mobile-menu[data-open] { display: block; }
  .mobile-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .mobile-menu li + li { border-top: 1px solid var(--line); }
  .mobile-menu a { display: flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--ink); font-weight: 600; }

  .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body-grid { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
}

@media (max-width: 860px) {
  :root { --section-y: 72px; }
  .change, .area__inner, .final__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --section-y: 60px; }
  body { font-size: 16.5px; }

  .utility { font-size: 13px; }
  .utility__left { gap: 4px 16px; }

  .hero__inner { padding: 48px 0 56px; gap: 36px; }
  .hero__form { padding: 0 0 20px 20px; }
  .hero__form::before { top: 20px; }
  .quote { padding: 24px; }
  .hero__lead { font-size: 18px; }
  .checks { font-size: 16.5px; }

  .field-row { grid-template-columns: minmax(0, 1fr); }
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { margin-bottom: 32px; }

  /* sticky call bar, phones only */
  .mobilebar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--deep); border-top: 1px solid var(--panel-line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .mobilebar .btn { height: 50px; font-size: 15.5px; }
  .mobilebar .btn--outline { color: #fff; border-color: var(--dark-line-2); }
  .mobilebar .btn--outline:hover { background: #fff; color: var(--ink); }
  body { padding-bottom: 78px; }
}

@media (max-width: 400px) {
  .trust__grid, .style-grid, .footer__top, .steps { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: 34px; }
}

@media print {
  .utility, .header, .mobilebar, .cta-band, .final, form { display: none !important; }
  body { background: #fff; color: #000; }
}