/* ==========================================================================
   TEMPLATE C10 v1 — Cape Coral Paver Sealing
   Spacing, radii, type scale and layout are transcribed from
   design/home-desktop.html and home-mobile.html.

   TWO deliberate departures, both documented in TEMPLATE-GUIDE §2:

   1. The accent moved off coral. `capecoralgaragedoorrepairs.com` (Template C9)
      is the SAME CITY and is near-black teal + coral. Two Cape Coral sites in
      one colour family is a network footprint. C10 keeps the design's deep teal
      and takes a warm amber accent instead — which also suits paver tones.
   2. The type pairing changed. The handoff asks for Bricolage Grotesque, which
      is Template C1's display face and Template C5's, and Figtree, which is C3's
      body and C7's. C10 uses Space Grotesk + DM Sans at the same weights.

   CONFIG — the three things a renter changes:
     1. Colours       -> --teal / --accent in §1
     2. Phone number  -> PHONE in site.config.js
     3. Form endpoint -> FORM_ENDPOINT in site.config.js
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --teal:        #0E3B39;  /* hero, process, contact, logo tile, call button */
  --teal-deep:   #0A2E2C;  /* hover on teal */
  --ink:         #14201D;  /* text, top strip, footer */
  --accent:      #E0962F;  /* primary buttons and headline bar (was coral) */
  --accent-hi:   #EFA93F;  /* the headline highlight bar */
  --accent-dark: #C57E1D;  /* button hover */
  --accent-soft: #FFC97A;  /* step rules and icons on dark */
  --label-dark:  #FFDFB0;  /* label text on dark (was peach) */
  --accent-text: #8A5A10;  /* accent text on light — passes contrast, coral did not */
  --link:        #0F5C58;  /* links and small labels */
  --stone:       #F3F2EE;  /* stone section background */
  --line:        #DAD9D2;
  --line-2:      #CFCEC6;
  --line-input:  #B9B8B0;
  --muted:       #3C4846;
  --muted-2:     #4D5957;
  --on-dark:     #DCE7E4;
  --white:       #FFFFFF;

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

  --r-form: 14px;   /* the quote card */
  --r-card: 12px;
  --r-btn: 8px;     /* inputs and buttons */
  --r-pill: 999px;

  --font-head: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. FONTS — self-hosted, latin subset
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { 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(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); margin: 0; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--accent-text); }

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

.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(--accent); color: var(--ink); padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
[id] { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--r-btn); min-height: 44px;
  font-family: inherit; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Text on the amber accent is always ink — it fails contrast with white. */
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-dark); color: var(--white); }
.btn--teal { background: var(--teal); color: var(--white); }
.btn--teal:hover { background: var(--teal-deep); }
.btn--ghost { border: 1px solid var(--line-input); color: var(--ink); background: transparent; font-weight: 600; }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn--sm { font-size: 15.5px; padding: 11px 18px; }
.btn--md { font-size: 17px; padding: 14px 22px; }
.btn--lg { font-size: 18px; padding: 16px 26px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. TOP STRIP + HEADER
   -------------------------------------------------------------------------- */
.topstrip { background: var(--ink); color: var(--on-dark); font-size: 14px; }
.topstrip .container {
  padding-top: 9px; padding-bottom: 9px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
}
.topstrip strong { color: var(--white); font-weight: 600; }

.header { background: var(--white); border-bottom: 1px solid var(--line); }
.header .container {
  min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.logo { flex-shrink: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-height: 44px; }
.logo__tile {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-btn);
  background: var(--teal); color: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.logo__name { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1.1; }

.nav { flex-shrink: 0; display: flex; align-items: center; gap: 28px; font-size: 15.5px; font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--link); }
.nav a[aria-current="page"] { color: var(--accent-text); font-weight: 700; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto; background: none;
  border: 1px solid var(--line-input); border-radius: var(--r-btn); color: var(--ink); cursor: pointer;
}
.mobile-menu { display: none; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero { background: var(--teal); color: var(--white); }
.hero__inner {
  padding-top: 48px; padding-bottom: 60px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px;
}
.hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--label-dark);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent-soft); flex: none; }

.hero h1 {
  font-size: clamp(40px, 5vw, 72px); line-height: 1.02; font-weight: 700;
  letter-spacing: -.025em; text-wrap: balance;
}
/* the highlight bar behind the city name */
.mark {
  background: linear-gradient(transparent 70%, var(--accent-hi) 70%, var(--accent-hi) 93%, transparent 93%);
  white-space: nowrap;
}
.hero__lead { font-size: 19.5px; line-height: 1.55; color: var(--on-dark); max-width: 540px; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15.5px; color: var(--on-dark); }
.hero__trust span { display: flex; align-items: center; gap: 8px; }
.hero__trust svg { flex: none; }

/* --------------------------------------------------------------------------
   7. QUOTE FORM
   -------------------------------------------------------------------------- */
.hero__form { flex: 0 1 430px; min-width: 0; }
.quote {
  background: var(--white); color: var(--ink); border-radius: var(--r-form);
  padding: 24px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: 0 20px 48px rgba(10,46,44,.28);
}
.quote__title { font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.quote__sub { font-size: 14.5px; color: var(--muted-2); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 13.5px; font-weight: 600; }
.field > label .opt { font-weight: 400; color: var(--muted-2); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.quote input, .quote select, .quote textarea {
  width: 100%; border: 1px solid var(--line-input); border-radius: var(--r-btn);
  font: inherit; font-size: 16px;   /* 16px keeps iOS from zooming */
  color: var(--ink); background: var(--white);
}
.quote input, .quote select { height: 44px; padding: 0 12px; }
.quote textarea { padding: 10px 12px; resize: vertical; min-height: 52px; }
.quote input:focus, .quote select:focus, .quote textarea:focus { border-color: var(--teal); }
.quote__foot { font-size: 13px; color: var(--muted-2); text-align: center; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: #B3261E; }
.field__err { margin: 0; font-size: 13px; font-weight: 600; color: #B3261E; }
.form-status { margin: 0; font-size: 15px; font-weight: 600; }
.form-status--ok { color: #1B6B45; }
.form-status--err { color: #B3261E; }

/* --------------------------------------------------------------------------
   8. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust { background: var(--stone); border-bottom: 1px solid var(--line); }
.trust .container {
  padding-top: 24px; padding-bottom: 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px 32px;
}
.trust__item { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15.5px; }
.trust__item svg { flex: none; color: var(--teal); }

/* --------------------------------------------------------------------------
   9. SECTIONS
   -------------------------------------------------------------------------- */
.section { padding: var(--section-y) 0; }
.section--stone { background: var(--stone); }
.section--white { background: var(--white); }
.section--teal { background: var(--teal); color: var(--white); }
.section--ink { background: var(--ink); color: var(--white); }

.h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.stack { display: flex; flex-direction: column; gap: 48px; }
.stack--sm { display: flex; flex-direction: column; gap: 32px; }

.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; }
.section__head .h2 { flex: 1 1 520px; max-width: 660px; }
.section__head p { flex: 0 1 380px; color: var(--muted); }
.section--teal .section__head p, .section--ink .section__head p { color: var(--on-dark); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }

/* --- service cards --- */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--teal); transform: translateY(-2px); }
.card__num { font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: .1em; color: var(--accent-text); }
.card h3 { font-size: 21px; }
.card p { font-size: 15.5px; color: var(--muted); }

/* --- finishes --- */
.finish { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.finish__sample { aspect-ratio: 4 / 3; display: block; width: 100%; object-fit: cover; background: var(--stone); }
.finish__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.finish h3 { font-size: 20px; }
.finish p { font-size: 15.5px; color: var(--muted); }

/* --- process --- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 28px 32px; }
.step { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--accent-soft); padding-top: 18px; }
.step__num { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: var(--accent-soft); }
.step h3 { font-size: 20px; }
.step p { font-size: 15.5px; color: var(--on-dark); }

/* --- areas --- */
.areas { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.areas__copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.areas__copy p { color: var(--muted); }
.areas__lists { flex: 1.3 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.areas__group { display: flex; flex-direction: column; gap: 12px; }
.areas__label { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--link); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; font-weight: 600; list-style: none; margin: 0; padding: 0; }
.pills li { padding: 9px 16px; border: 1px solid var(--line-input); border-radius: var(--r-pill); }
.pills a { text-decoration: none; color: inherit; }
.pills a:hover { color: var(--accent-text); }

/* --- reviews --- */
.review { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.review p { font-size: 16.5px; }
.review footer { font-size: 14.5px; font-weight: 600; color: var(--muted-2); }

/* --- faq --- */
.faq-wrap { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.faq-intro { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.faq-intro p { color: var(--muted); }
/* the phone number in the FAQ intro is a call action, so it gets a real target */
.faq-intro p a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.faq { flex: 1.3 1 560px; min-width: 0; display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  padding: 18px 0; font-family: var(--font-head); font-weight: 700; font-size: 19px;
  cursor: pointer; list-style: none; min-height: 44px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--accent-text); flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--link); }
.faq details > p { margin: 0; padding: 0 0 20px; color: var(--muted); font-size: 16px; }

/* --- about / contact --- */
.contact { display: flex; flex-wrap: wrap; gap: 44px 72px; align-items: flex-start; }
.contact__copy { flex: 1.1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.contact__copy p { color: var(--on-dark); max-width: 560px; }
.facts { margin: 0; display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.2); }
.facts > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--label-dark); }
.facts dd { margin: 0; font-size: 17px; font-weight: 500; }
.facts__phone { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--white); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.facts__phone:hover { color: var(--accent-soft); }

/* --------------------------------------------------------------------------
   10. SUBPAGES
   -------------------------------------------------------------------------- */
.page-hero { background: var(--teal); color: var(--white); padding: 36px 0 52px; }
.page-hero h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.025em; margin-top: 14px; text-wrap: balance; }
.page-hero__lead { font-size: 18.5px; color: var(--on-dark); max-width: 46em; margin-top: 14px; }

.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 [aria-current="page"] { color: var(--white); font-weight: 600; }

.body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; }
.prose h2 { font-size: clamp(25px, 2.7vw, 33px); letter-spacing: -.02em; line-height: 1.12; margin: 38px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-body); font-weight: 700; font-size: 19.5px; line-height: 1.35; margin: 26px 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(--accent-text); }
.prose strong { color: var(--ink); }
.prose a { font-weight: 600; }

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

.sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.side-card--teal { background: var(--teal); color: var(--white); border-color: var(--teal); }
.side-card--teal p { color: var(--on-dark); font-size: 15px; }
.side-card__label { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.side-card--teal .side-card__label { color: var(--label-dark); }
.side-card__amount { font-family: var(--font-head); font-weight: 700; font-size: 25px; margin: 4px 0 0; white-space: nowrap; }
.side-card__title { font-family: var(--font-head); font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.side-card__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.side-rows { list-style: none; margin: 0; padding: 0; }
.side-rows li { padding: 11px 0; }
.side-rows li + li { border-top: 1px solid var(--line); }
.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: 15.5px; min-height: 44px; }
.side-links a:hover { color: var(--accent-text); }
.side-links svg { color: var(--teal); flex: none; }

.estimates-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--stone); border: 1px solid var(--line);
  border-left: 5px solid var(--accent); border-radius: var(--r-card);
  padding: 18px 22px; margin: 24px 0;
}
.estimates-note svg { color: var(--teal); 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; }

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--on-dark); }
.footer .container { padding-top: 52px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 36px; }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 36px; }
.footer__col { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.footer__brand { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--white); }
.footer__col b { color: var(--white); font-weight: 700; }
.footer a { color: var(--on-dark); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer a:hover { color: var(--accent-soft); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 14px; }

/* --------------------------------------------------------------------------
   12. STICKY MOBILE BAR
   -------------------------------------------------------------------------- */
.mobilebar { display: none; }

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1049.98px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header .container { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 10px 16px; }
  .logo { margin-right: auto; }
  .mobile-menu { display: none; width: 100%; border-top: 1px solid var(--line); }
  .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(--ink); font-weight: 600; }

  .hero__inner { flex-direction: column; gap: 32px; padding-top: 48px; padding-bottom: 56px; }
  .hero__copy, .hero__form { flex: 1 1 auto; width: 100%; }
  .body-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sidebar { position: static; }
}

@media (max-width: 767.98px) {
  :root { --gutter: 16px; --section-y: 56px; }

  /* long brand name and long buttons would otherwise overflow a 320px screen */
  .logo { white-space: normal; }
  .logo__name { font-size: 16.5px; }
  .btn { white-space: normal; text-align: center; }

  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero__lead { font-size: 17.5px; }
  .hero__ctas .btn { width: 100%; }
  .quote { padding: 20px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .topstrip .container { justify-content: center; text-align: center; }
  .footer__bottom { flex-direction: column; gap: 8px; }

  .mobilebar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(20,32,29,.12);
  }
  .mobilebar .btn { min-height: 48px; font-size: 16px; padding: 0 12px; }
  body { padding-bottom: 80px; }
}

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

/* --------------------------------------------------------------------------
   14. FINAL REVIEW ADDITIONS (2026-10-20): hero photo, dropdown nav
   -------------------------------------------------------------------------- */
/* Photo behind the hero with a strong teal wash so the white text stays clear */
.hero {
  background-color: var(--teal);
  background-image: linear-gradient(90deg, rgba(10,46,44,.88) 0%, rgba(10,46,44,.74) 50%, rgba(10,46,44,.5) 100%),
                    url("/images/hero-sealed-driveway.webp");
  background-size: cover; background-position: center 60%;
}
@media (max-width: 767.98px) {
  .hero {
    background-image: linear-gradient(rgba(10,46,44,.82), rgba(10,46,44,.82)),
                      url("/images/hero-sealed-driveway-960.webp");
  }
}

.page-hero__updated { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--label-dark); }

.nav-drop { position: relative; }
.nav-drop__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink); white-space: nowrap; transition: color .15s ease;
}
.nav-drop__btn:hover, .nav-drop.is-open .nav-drop__btn { color: var(--link); }
.nav-drop__btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
.nav-drop__btn svg { transition: transform .15s ease; }
.nav-drop.is-open .nav-drop__btn svg { transform: rotate(180deg); }
.nav-panel {
  display: none; position: absolute; top: calc(100% + 10px); left: -16px; z-index: 60;
  min-width: 260px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 12px 28px rgba(20,32,29,.18);
}
/* invisible strip over the 10px gap so the pointer never leaves the menu */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop.is-open .nav-panel { display: block; }
@media (hover: hover) and (min-width: 1050px) { .nav-drop:hover .nav-panel { display: block; } }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav .nav-panel a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: var(--r-btn);
  color: var(--ink); transition: background-color .15s ease, color .15s ease;
}
.nav .nav-panel a:hover { background: var(--stone); color: var(--link); }
.nav .nav-panel__all { border-top: 1px solid var(--line); margin-top: 6px; color: var(--link); font-weight: 700; }

.mobile-menu__group > span {
  display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--muted-2);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.mobile-menu .mobile-menu__group ul { padding-left: 16px; }
.mobile-menu .mobile-menu__group li { border-top: 1px solid var(--line); }

/* Owner-supplied logo (2026-10-20) */
.logo__img { display: block; height: 56px; width: auto; max-width: 100%; }
@media (max-width: 767.98px) { .logo__img { height: 44px; } }