/* ==========================================================================
   TEMPLATE C3: v1
   St. Pete Gutters. Built from design/home-desktop.html + home-mobile.html.

   Single-page microsite. One stylesheet, no build step, no framework.

   PER-SITE RECOLOUR: change --navy, --orange and --ground in §1.
   Everything else derives. No stray hex values elsewhere.

   Sections
     1. Tokens / fonts      8. Options
     2. Reset / base        9. Call band
     3. Layout             10. Process
     4. Buttons            11. Reviews (hidden until real)
     5. Header             12. Areas
     6. Hero + form        13. FAQ
     7. Trust band         14. Final CTA / footer / mobile bar
                           15. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --navy:        #0E2A44;   /* primary */
  --navy-deep:   #091D30;   /* footer */
  --navy-stripe: #143553;   /* hero stripe */
  --navy-rule:   #2C4C6A;   /* rules on navy */

  --orange:      #B84A14;   /* CTA */
  --orange-lt:   #F0915A;   /* orange on navy */
  --orange-hv:   #9C3E11;

  --ground:      #EEF2F5;
  --surface:     #FFFFFF;
  --ink:         #10202E;
  --muted:       #4A5A68;
  --on-navy:     #C9D6E1;

  --line:        #D3DCE3;
  --line-strong: #C3CFD9;
  --input:       #9FB0BE;
  --ph-fill:     #DCE5EB;   /* placeholder boxes */
  --ph-line:     #7C8D9B;

  --maxw:       1240px;
  --gutter:       32px;
  --section-y:    88px;

  --font-head: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
}

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/figtree-latin-700-normal.woff2') format('woff2')}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::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(--ground);
  -webkit-font-smoothing: antialiased;
}
/* Never overflow-x: hidden here: it makes body a scroll container and
   full-width sections paint short. Use minmax(0,1fr) and min-width:0. */

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--navy); }
a:hover { color: var(--orange); }
img { max-width: 100%; height: auto; display: block; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--orange-lt);
  outline-offset: 1px;
}

.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(--orange); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
/* The design file ships with no CSS reset, so its max-width:1240px applies to
   the CONTENT box and every section is 1240px of content plus 32px padding
   either side. We keep the border-box reset everywhere else and make the
   container content-box so the measured layout matches the design exactly. */
.container {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  box-sizing: content-box;
}

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

.eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange);
}
.section--navy .eyebrow { color: var(--orange-lt); }

.h2 { font-size: clamp(40px, 4.6vw, 64px); color: var(--navy); }
.section--navy .h2 { color: #fff; }

.grid > *, .hero__inner > *, .trust__band > *, .why > *, .svc > *,
.opt-grid > *, .steps > *, .areas > *, .faq-grid > *, .final__inner > *,
.field-row > *, .footer__top > * { min-width: 0; }

/* placeholder boxes: real photos replace these per site */
.ph {
  background: var(--ph-fill); border: 2px dashed var(--ph-line);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  color: var(--muted); font-size: 15px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 17px; font-weight: 700;
  text-decoration: none; text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange:hover { background: var(--orange-hv); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); color: #fff; }
.btn--block { width: 100%; }

/* the one rounded thing in the whole design */
.call-pill {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--orange); color: #fff; text-decoration: none;
  padding: 10px 26px 10px 10px; border-radius: 999px;
  font-family: var(--font-head); font-weight: 800; font-size: 30px;
  letter-spacing: .01em;
}
.call-pill:hover { background: var(--orange-hv); color: #fff; }
.call-pill__icon {
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--orange);
  display: grid; place-items: center; flex: none;
}

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; text-decoration: none; color: var(--navy);
}
.arrow-link:hover { color: var(--orange); }

/* --------------------------------------------------------------------------
   5. ANNOUNCE + HEADER
   -------------------------------------------------------------------------- */
.announce { background: var(--orange); color: #fff; font-size: 15px; font-weight: 600; }
.announce .container {
  padding-top: 9px; padding-bottom: 9px;
  display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between;
}
   old space-between left a 577px hole in the middle of the bar. */

.header { background: var(--surface); border-bottom: 3px solid var(--navy); }
.header .container {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex: none; }
.logo img { display: block; height: 52px; width: auto; }
.logo__name {
  font-family: var(--font-head); font-weight: 800; font-size: 30px;
  line-height: 1; text-transform: uppercase; letter-spacing: .01em;
}
.nav { display: flex; flex-wrap: nowrap; gap: 6px 24px; font-size: 16px; font-weight: 600; min-width: 0; }
.nav a { text-decoration: none; white-space: nowrap; padding: 6px 0; }
/* --- nav dropdowns ------------------------------------------------------
   Hover opens, click pins, Escape closes. The ::before bridge covers the gap
   between the button and the panel: without it the pointer crosses dead
   space, fires mouseleave, and the menu shuts before you reach it. */
.nav__item { position: relative; display: flex; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--navy);
  white-space: nowrap;
}
.nav__btn:hover { color: var(--orange); }
.nav__btn svg { transition: transform .18s ease; }
.nav__item[data-open] .nav__btn svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
  min-width: 268px; background: var(--surface);
  border: 1px solid var(--line); border-top: 4px solid var(--orange);
  box-shadow: 0 18px 40px rgba(9,29,48,.18);
  display: none; flex-direction: column;
}
.nav__item[data-open] .nav__menu { display: flex; }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav__menu a {
  padding: 12px 18px; text-decoration: none; color: var(--navy);
  font-weight: 600; font-size: 15.5px; white-space: nowrap;
}
.nav__menu a + a { border-top: 1px solid var(--line); }
.nav__menu a:hover { background: var(--ground); color: var(--orange); }

.header__phone {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; color: var(--navy); line-height: 1.1; flex: none;
}
.header__phone-label {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.header__phone-num { font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--orange); }

.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* --------------------------------------------------------------------------
   6. HERO + FORM
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--navy);
  background-image: repeating-linear-gradient(112deg, transparent 0 46px, var(--navy-stripe) 46px 48px);
  color: #fff;
  isolation: isolate;
}

/* Photo variant. Add class="hero hero--photo" and set --hero-img.
   The scrim is deliberately heavy on the left, where the headline sits, and
   lighter on the right so the photo still reads behind the form. White text
   stays above 4.5:1 over it. Drop the modifier to get the flat striped navy
   exactly as drawn. */
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img);
  background-size: cover; background-position: center 38%;
}
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(14,42,68,.97) 0%, rgba(14,42,68,.93) 38%,
      rgba(14,42,68,.74) 68%, rgba(14,42,68,.60) 100%),
    linear-gradient(180deg, rgba(9,29,48,.45) 0%, rgba(9,29,48,.10) 45%, rgba(9,29,48,.55) 100%);
}
/* keep the stripe texture, just very faint, so the design's character survives */
.hero--photo { background-image: repeating-linear-gradient(112deg, transparent 0 46px, rgba(255,255,255,.035) 46px 48px); }
.hero__inner {
  padding: 48px 0 56px;
  display: flex; flex-wrap: wrap; gap: 36px 64px; align-items: center;
}
.hero__copy { flex: 1 1 520px; display: flex; flex-direction: column; gap: 20px; }
.hero__badge {
  align-self: flex-start; border: 2px solid var(--orange-lt); color: var(--orange-lt);
  font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px;
}
.hero h1 { font-size: clamp(48px, 6vw, 84px); line-height: .94; }
.hero__lead { font-size: 21px; line-height: 1.45; color: var(--on-navy); max-width: 32em; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center;
  border-top: 1px solid var(--navy-rule); padding-top: 24px;
}
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 17px; font-weight: 600; }
.checks li { display: flex; align-items: center; gap: 10px; }
.checks svg { color: var(--orange-lt); flex: none; }
.hero__callnote { font-size: 14px; color: var(--on-navy); margin-top: 8px; }

.hero__form { flex: 1 1 430px; }

.quote { background: var(--surface); color: var(--ink); border-top: 6px solid var(--orange); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.quote h2, .quote .quote__title { font-size: 34px; color: var(--navy); }
.quote__sub { color: var(--muted); font-size: 15.5px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; }
.quote input, .quote textarea, .quote select {
  border: 1.5px solid var(--input); background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; padding: 0 14px; height: 50px; width: 100%;
}
.quote textarea { height: auto; min-height: 76px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.quote input::placeholder, .quote textarea::placeholder { color: #8495A3; }
.quote select { appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23334' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.quote__foot { font-size: 13.5px; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-status { font-size: 15px; font-weight: 600; padding: 12px 14px; }
.form-status--ok  { background: #E6F2EA; color: #1B5E34; border: 1px solid #A8D6BA; }
.form-status--err { background: #FBEAE6; color: #8A2B12; border: 1px solid #E8BAAC; }
.field--invalid input, .field--invalid textarea, .field--invalid select { border-color: var(--orange); }
.field__err { font-size: 13.5px; color: var(--orange); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. TRUST BAND + WHY
   -------------------------------------------------------------------------- */
.trust-wrap { padding: 64px 0 0; }
.trust__band { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.trust__photo { flex: 1.7 1 520px; min-height: 340px; overflow: hidden; }
.trust__photo img, .areas__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust__tiles {
  flex: 1 1 320px; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.trust__tile {
  background: var(--surface); border-left: 6px solid var(--orange); padding: 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; line-height: 1.15;
}
.trust__value { font-family: var(--font-head); font-weight: 800; font-size: 32px; text-transform: uppercase; color: var(--navy); }
.trust__label { font-size: 14px; color: var(--muted); }

.why { display: flex; flex-wrap: wrap; gap: 40px 72px; }
.why__col { flex: 1 1 360px; display: flex; flex-direction: column; gap: 18px; }
.section--why { padding: 96px 0 88px; }
.why h2 { font-size: clamp(40px, 4.6vw, 64px); color: var(--navy); }
.why__intro { color: var(--muted); font-size: 18px; }
.why__list { flex: 1.4 1 520px; display: flex; flex-direction: column; }
.why__item { display: flex; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line-strong); }
.why__item:first-child { border-top: 3px solid var(--navy); }
.why__item > div { display: flex; flex-direction: column; gap: 4px; }
.why__key { font-family: var(--font-head); font-weight: 800; font-size: 48px; line-height: .9; color: var(--orange); flex: none; width: 56px; }
.why__item h3 { font-family: var(--font-body); font-weight: 700; font-size: 21px; text-transform: none; letter-spacing: 0; line-height: inherit; }
.why__item p { color: var(--muted); }

/* --------------------------------------------------------------------------
   8. SERVICES + OPTIONS
   -------------------------------------------------------------------------- */
.svc { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.svc__featured { flex: 1 1 400px; background: var(--navy); color: #fff; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.svc__tag {
  align-self: flex-start; background: var(--orange-lt); color: var(--navy-deep);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px;
}
.svc__featured h3 { font-size: 46px; line-height: .96; }
.svc__featured p { font-size: 18px; color: var(--on-navy); }
.svc__points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.svc__points li { display: flex; gap: 12px; align-items: center; }
.svc__points svg { flex: none; }
.svc__featured .btn { align-self: flex-start; background: var(--orange); color: #fff; padding: 15px 24px; min-height: 0; }
.svc__featured .btn:hover { background: var(--orange-hv); }
.svc__featured .svc__points svg { color: var(--orange-lt); }

.svc__list { flex: 1 1 440px; display: flex; flex-direction: column; }
.section--stack > .container { display: flex; flex-direction: column; gap: 40px; }
.section--navy.section--stack > .container { gap: 48px; }
.svc__row {
  display: flex; gap: 24px; align-items: center; justify-content: space-between;
  padding: 22px 0; border-top: 1px solid var(--line-strong); text-decoration: none; color: var(--ink);
}
.svc__row:first-child { border-top: 0; padding-top: 0; }
.svc__row:hover { color: var(--orange); }
.svc__row h3 { font-size: 24px; color: var(--navy); }
.svc__row:hover h3 { color: var(--orange); }
.svc__row p { color: var(--muted); font-size: 16px; margin-top: 4px; }
.svc__row svg { color: var(--orange); flex: none; }

.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.opt-head { display: flex; flex-wrap: wrap; gap: 14px 56px; align-items: flex-end; justify-content: space-between; }
.opt-head p { flex: 0 1 26em; max-width: 26em; color: var(--muted); }
.opt-head .h2 { flex: 1 1 auto; }
.opt-card { background: var(--surface); border: 1px solid var(--line); border-bottom: 6px solid var(--navy); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.opt-card svg { color: var(--navy); }
.opt-card h3 { font-size: 24px; color: var(--navy); }
.opt-card p { color: var(--muted); font-size: 15.5px; }

.colors { background: var(--surface); border: 1px solid var(--line); margin-top: 20px; padding: 22px 26px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.colors__title { font-weight: 700; }
.colors__note { color: var(--muted); font-size: 15px; }
.colors__swatches { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.swatch { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.swatch i { width: 26px; height: 26px; border: 1px solid var(--line-strong); display: block; }

/* --------------------------------------------------------------------------
   9. CALL BAND   10. PROCESS
   -------------------------------------------------------------------------- */
.call-band { background: var(--orange); color: #fff; }
.call-band .container { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: center; justify-content: space-between; }
.call-band h2 { font-size: clamp(34px, 4vw, 54px); line-height: .98; flex: 1 1 420px; }
.call-band__box { background: var(--surface); color: var(--navy); padding: 14px 28px; text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.call-band__box:hover { color: var(--navy); }
.call-band__label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.call-band__num { font-family: var(--font-head); font-weight: 800; font-size: 34px; color: var(--navy); }

.process__intro { max-width: 46em; margin: 16px 0 36px; font-size: 17px; line-height: 1.55; color: var(--on-navy); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px 40px; margin: 0; padding: 0; list-style: none; }
.step { display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--orange-lt); padding-top: 20px; }
.step__num { font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-lt); }
.step h3 { font-size: 36px; line-height: 1; }
.step p { color: var(--on-navy); font-size: 16.5px; }

/* --------------------------------------------------------------------------
   11. REVIEWS: hidden until the partner supplies real ones.
       Never invent a review.
   -------------------------------------------------------------------------- */
.reviews { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 48px; align-items: start; }
.rating-card { background: var(--surface); border: 1px solid var(--line); padding: 32px; }
.rating-card__value { font-family: var(--font-head); font-weight: 800; font-size: 64px; color: var(--navy); line-height: 1; }
.rating-card__label { font-weight: 700; margin-top: 8px; }
.rating-card__sub { color: var(--muted); font-size: 15px; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.review-card { background: var(--surface); border-left: 6px solid var(--orange); padding: 22px; }
.review-card p { color: var(--muted); font-size: 16px; }
.review-card__who { font-weight: 700; margin-top: 14px; }
.review-card__meta { color: var(--muted); font-size: 14px; }

/* --------------------------------------------------------------------------
   12. AREAS   13. FAQ
   -------------------------------------------------------------------------- */
.areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px 64px; align-items: stretch; }
.areas__map { min-height: 360px; background: #E3EAEF; overflow: hidden; }
.areas h2 { margin-bottom: 16px; }
.areas__intro { color: var(--muted); }
.area-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; font-weight: 600; }
.area-list li { border-top: 1px solid var(--line-strong); padding-top: 10px; }

.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 0 56px; }
.faq-item { padding: 24px 0; border-top: 3px solid var(--navy); display: flex; flex-direction: column; gap: 8px; }
.faq-item h3 { font-family: var(--font-body); font-weight: 700; font-size: 21px; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.faq-item p { color: var(--muted); }

/* --------------------------------------------------------------------------
   14. FINAL CTA / FOOTER / MOBILE BAR
   -------------------------------------------------------------------------- */
.final { background: var(--navy); color: #fff; }
.final__inner { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; padding: var(--section-y) 0; }
.final__copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; }
.final__inner > form { flex: 1 1 480px; }
.final h2 { font-size: clamp(38px, 4.2vw, 58px); }
.final p { color: var(--on-navy); font-size: 18px; max-width: 34em; }
.final__phone { align-self: flex-start; font-family: var(--font-head); font-weight: 800; font-size: 44px; color: var(--orange-lt); text-decoration: none; }
.final__phone:hover { color: #fff; }

.footer { background: var(--navy-deep); color: var(--on-navy); font-size: 15px; }
.footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 40px; padding: 56px 0 44px; }
.footer__name { font-family: var(--font-head); font-weight: 800; font-size: 26px; text-transform: uppercase; color: #fff; }
.footer__col-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; text-transform: uppercase; color: #fff; margin-bottom: 12px; letter-spacing: .02em; }
.footer a { color: var(--on-navy); text-decoration: none; }
.footer a:hover { color: var(--orange-lt); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer__bottom { border-top: 1px solid #16304A; padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 14px; }

.mobilebar { display: none; }

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   16. INNER PAGES: page hero, prose column, sidebar
   The design is a single page; these follow its vocabulary (navy band, square
   corners, orange rules, Barlow Condensed headings) so inner pages read as the
   same site rather than a bolt-on.
   -------------------------------------------------------------------------- */
.page-hero {
  background-color: var(--navy);
  background-image: repeating-linear-gradient(112deg, transparent 0 46px, var(--navy-stripe) 46px 48px);
  color: #fff; padding: 40px 0 52px;
}
.page-hero h1 { font-size: clamp(38px, 4.4vw, 62px); margin-top: 16px; }
.page-hero__lead { font-size: 19px; line-height: 1.5; color: var(--on-navy); max-width: 46em; margin-top: 16px; }
.page-hero__updated { font-size: 15px; color: var(--on-navy); margin-top: 12px; opacity: .9; }
.page-hero .eyebrow { color: var(--orange-lt); }

.breadcrumb { font-size: 14px; color: var(--on-navy); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb a { color: var(--on-navy); }
.breadcrumb a:hover { color: var(--orange-lt); }
.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(28px, 3vw, 40px); color: var(--navy); margin: 44px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 21px;
  text-transform: none; letter-spacing: 0; line-height: 1.3;
  color: var(--ink); margin: 28px 0 8px;
}
.prose p { margin: 0 0 16px; color: var(--muted); max-width: 66ch; }
.prose ul, .prose ol { color: var(--muted); max-width: 66ch; padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--orange); }
.prose strong { color: var(--ink); }
.prose .table-wrap { margin: 20px 0; }
.prose .photo { margin: 24px 0; }
.prose .photo img { width: 100%; display: block; }

.sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--orange); padding: 24px; }
.side-card--navy { background: var(--navy); color: #fff; border-color: var(--navy); border-top-color: var(--orange); }
.side-card--navy p { color: var(--on-navy); font-size: 15px; }
.side-card__label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.side-card--navy .side-card__label { color: var(--on-navy); }
.side-card__amount { font-family: var(--font-head); font-weight: 800; font-size: 34px; text-transform: uppercase; margin: 6px 0 8px; }
.side-card__title { font-family: var(--font-head); font-weight: 800; font-size: 20px; text-transform: uppercase; 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; }
.side-links a:hover { color: var(--orange); }
.side-links svg { color: var(--orange); flex: none; }

.estimates-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FDF1EA; border-left: 6px solid var(--orange);
  padding: 20px 22px; margin: 24px 0;
}
.estimates-note svg { color: var(--orange); flex: none; margin-top: 2px; }
.estimates-note__title { font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.estimates-note p { font-size: 15.5px; color: var(--muted); margin: 0; }

@media (max-width: 1000px) {
  .body-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sidebar { position: static; }
}

/* --------------------------------------------------------------------------
   15b. SHORT DESKTOP VIEWPORTS: the hero must not push the form below the fold
   A 1366x768 laptop gives roughly 650px of viewport once the OS taskbar and
   browser chrome are gone; 1536x864 gives about 730px. At the design's full
   hero height the quote form was cut off by 95px and 19px respectively. These
   two steps condense the hero only, and only on short screens. Wide, tall
   monitors still get the design exactly as drawn.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-height: 920px) {
  .hero__inner { padding: 34px 0 40px; gap: 26px 56px; }
  .hero__copy { gap: 15px; }
  .hero h1 { font-size: clamp(42px, 4.2vw, 60px); }
  .hero__lead { font-size: 18px; }
  .hero__actions { padding-top: 18px; gap: 18px 40px; }
  .checks { gap: 8px; font-size: 16px; }
  .call-pill { font-size: 26px; padding: 8px 22px 8px 8px; }
  .call-pill__icon { width: 40px; height: 40px; }
  .quote { padding: 22px; gap: 11px; }
  .quote .quote__title { font-size: 28px; }
  .quote input { height: 44px; }
  .quote textarea { min-height: 62px; }
  .quote .btn { min-height: 46px; padding: 11px 24px; }
}

@media (min-width: 1024px) and (max-height: 780px) {
  .hero__inner { padding: 24px 0 30px; gap: 20px 48px; }
  .hero__copy { gap: 12px; }
  .hero h1 { font-size: clamp(38px, 3.6vw, 50px); }
  .hero__lead { font-size: 17px; }
  .hero__actions { padding-top: 14px; gap: 14px 32px; }
  .checks { gap: 7px; font-size: 15.5px; }
  .quote { padding: 18px; gap: 9px; }
  .quote .quote__title { font-size: 25px; }
  .quote__sub { font-size: 14.5px; }
  .quote input { height: 42px; }
  .quote textarea { min-height: 54px; }
  .quote .btn { min-height: 44px; padding: 10px 22px; }
  .quote__foot { font-size: 13px; }
}

@media (max-width: 1180px) {
  .logo img { height: 44px; }
  .nav, .header__phone { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto;
    background: none; border: 2px solid var(--navy); color: var(--navy); cursor: pointer;
  }
  .header__call {
    display: inline-flex; align-items: center; gap: 8px; margin-left: 12px;
    background: var(--orange); color: #fff; text-decoration: none;
    font-family: var(--font-head); font-weight: 800; font-size: 22px; padding: 10px 16px;
  }
  .mobile-menu { display: none; width: 100%; border-top: 1px solid var(--line); margin-top: 6px; }
  .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: 50px; text-decoration: none; color: var(--navy); font-weight: 700; }
}
@media (min-width: 1181px) { .header__call { display: none; } }

@media (max-width: 1000px) {
  .why, .svc, .areas, .reviews, .final__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Design B: below ~760px the form comes straight after the headline, then the
   call button and the description. */
@media (max-width: 760px) {
  :root { --gutter: 20px; --section-y: 60px; }
  body { font-size: 16.5px; }

  .announce { font-size: 13.5px; }
  .announce .container { justify-content: flex-start; gap: 4px 18px; }

  .hero__inner { padding: 32px 0 40px; gap: 26px; }
  .hero__copy { display: contents; }
  .hero__badge { order: 1; }
  .hero h1 { order: 2; font-size: clamp(40px, 11vw, 56px); }
  .hero__form { order: 3; flex: 1 1 100%; }
  .hero__actions { order: 4; flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__lead { order: 5; font-size: 18px; }

  .call-pill { font-size: 26px; padding: 8px 20px 8px 8px; }
  .call-pill__icon { width: 40px; height: 40px; }

  .field-row { grid-template-columns: minmax(0, 1fr); }
  .trust__tiles { grid-template-columns: minmax(0, 1fr); }
  .trust__photo { min-height: 240px; }
  .opt-grid, .area-list { grid-template-columns: minmax(0, 1fr); }
  .colors { flex-direction: column; align-items: flex-start; }
  .areas__map { min-height: 280px; }
  .call-band .container { flex-direction: column; align-items: flex-start; }
  .call-band__box { align-items: flex-start; align-self: stretch; }

  .mobilebar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--navy-deep); border-top: 3px solid var(--orange);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .mobilebar .btn { min-height: 50px; font-size: 16px; padding: 12px 16px; }
  .mobilebar .btn--outline { background: transparent; color: #fff; border: 2px solid var(--on-navy); }
  body { padding-bottom: 80px; }
}

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

@media print {
  .announce, .header, .mobilebar, .call-band, .final, form { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}