/* ==========================================================================
   Augusta Auto Glass Co — Global stylesheet
   Paste this ONCE into Elementor → Site Settings → Custom CSS (or a Code
   Snippets plugin). Every page's HTML block references these classes, which
   keeps each block tiny and keeps the site fast.

   Design system: steel navy + signal orange + amber.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --c-navy-900: #0C1E30;
  --c-navy-800: #10293F;
  --c-navy-700: #17384F;
  --c-navy-600: #205070;

  --c-accent-600:  #EA580C;  /* brand orange - icons, accents, borders, bullets.
                                NON-TEXT ONLY: 3.56:1 on white, fails AA as text. */
  --c-accent-700:  #9A3412;  /* CTA hover / error text. 7.31:1 with white text. */
  --c-accent-050:  #FFF1E9;  /* tint background. --c-ink-900 on it is 16.14:1. */

  /* Filled CTA background, used ONLY where white text sits on it. Darker than
     --c-accent-600 because the header Call button is below the large-text
     threshold: #EA580C would give white text 3.56:1 and fail. This gives
     5.18:1 and clears WCAG AA. */
  --c-accent-cta:  #C2410C;

  /* ACCENT TEXT on a light background. --c-accent-600 only manages 3.56:1 on
     white, so eyebrows and Details links set in it would fail AA. This clears
     all three light surfaces: 5.18:1 on white, 4.82:1 on --c-mist-100 and
     4.69:1 on --c-accent-050. Use --c-accent-600 for icons, borders and
     bullets; use this for text.
     Same value as --c-accent-cta today. Kept as a separate token so changing
     one role later cannot silently break the other. */
  --c-accent-text: #C2410C;

  --c-amber-500: #FFB020;
  --c-amber-050: #FFF6E4;

  --c-ink-900:   #14181D;
  --c-slate-500: #5B6875;
  --c-mist-100:  #F4F7FA;
  --c-line-200:  #E2E8F0;
  --c-white:     #FFFFFF;

  --font-head: "Barlow Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1300px;
  --wrap-narrow: 820px;

  /* Sticky CTA rail on long content pages. 1300 - 40 padding - 380 rail - 52
     gap leaves the reading column at ~828px, which is a ~86ch measure. Longer
     than the 72ch ideal, but the rail is what stops that width reading as dead
     space, and the phone number staying on screen is the point of the page. */
  --rail: 380px;
  --rail-gap: 52px;
  /* .site-header is sticky at ~70px min-height + 20px padding. The rail has to
     clear it or it slides underneath. */
  --header-h: 90px;

  --radius: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(12, 30, 48, .06), 0 2px 8px rgba(12, 30, 48, .06);
  --shadow-md: 0 4px 12px rgba(12, 30, 48, .10), 0 12px 32px rgba(12, 30, 48, .10);
  --shadow-cta: 0 4px 14px rgba(194, 65, 12, .35);

  --pad-band: 72px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* NOTE: scroll-behavior: smooth was removed here.

   It only ever affected programmatic scrolls - anchor jumps, Page Down, Space,
   and clicking the scrollbar gutter - but in those cases it replaces the
   browser's own scroll physics with a fixed-duration animation, which on a
   12,000px page reads as the page lurching rather than scrolling. It is a
   common source of "scrolling feels wrong" reports and it buys very little.
   The browser default respects the user's OS scroll settings. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-ink-900);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--c-navy-600); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--c-accent-text); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  color: var(--c-navy-900);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.45rem); text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.08rem; }

p  { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .45em; }

strong { font-weight: 700; }
small  { font-size: .875rem; }

hr { border: 0; border-top: 1px solid var(--c-line-200); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--c-amber-500);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-amber-500); color: var(--c-navy-900);
  padding: .7rem 1.1rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

.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;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap--narrow { max-width: var(--wrap-narrow); }

.band { padding-block: var(--pad-band); }
.band--tight { padding-block: 48px; }
.band--mist  { background: var(--c-mist-100); }
.band--dark  { background: var(--c-navy-800); color: #D9E2EC; }
.band--darker{ background: var(--c-navy-900); color: #D9E2EC; }
.band--dark h2, .band--dark h3, .band--dark h4,
.band--darker h2, .band--darker h3, .band--darker h4 { color: var(--c-white); }
/* :not(.btn) matters - without it this rule repaints button LABELS amber,
   which makes an amber-filled button render amber-on-amber and vanish. */
.band--dark a:not(.btn), .band--darker a:not(.btn) { color: var(--c-amber-500); }
.band--dark a:not(.btn):hover, .band--darker a:not(.btn):hover { color: var(--c-white); }

.band-head { max-width: 760px; margin-bottom: 44px; }
.band-head--center { margin-inline: auto; text-align: center; }
.band-head p { color: var(--c-slate-500); font-size: 1.08rem; margin-bottom: 0; }
.band--dark .band-head p, .band--darker .band-head p { color: #AFC0D0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  margin-bottom: .5rem;
}
.band--dark .eyebrow, .band--darker .eyebrow, .hero .eyebrow { color: var(--c-amber-500); }

.grid { display: grid; gap: 22px; }
/* Grid items default to min-width:auto, so a single unbreakable string - the
   email address, a long URL - can force a track wider than the viewport and
   push the whole page into horizontal scroll. min-width:0 lets tracks shrink;
   overflow-wrap lets the string itself break as a last resort. */
.grid > * { min-width: 0; }
.grid > *, .card, .prose { overflow-wrap: break-word; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Reading column + sticky CTA rail.

   The single-column version this replaces measured 692px of .prose inside a
   1140px .wrap inside a 1600px viewport - ~450px of dead space on each side,
   which is what made every long page look half-empty. Widening the measure
   alone would only have traded dead space for 130-character lines, so the rail
   fills the right side with the phone number and the service/area links.

   The earlier sidebar attempt failed because the right column ran out of
   content and left thousands of pixels of nothing below it. The fix is
   position:sticky on .rail__inner - the column can now be shorter than the
   article without leaving a hole, because it travels down with the reader. */
.content-col { display: block; }

@media (min-width: 1024px) {
  .content-col--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail);
    column-gap: var(--rail-gap);
    /* align-items MUST NOT be start/flex-start here.

       A sticky element can only travel inside its own parent box. With
       align-items:start the .rail grid item shrinks to its content (~340px),
       so .rail__inner had 0px of travel - the card scrolled away after one
       screen and the right column was empty for the rest of the article.
       That is the exact hole position:sticky was added to fix.

       stretch (the grid default) makes .rail span the full row height, which
       on a long page is ~14,000px, so the card follows the whole article.
       Measured: travel goes from 0px to 13,978px on a service page. */
    align-items: stretch;
  }
  /* The <aside> is FIRST in source order so that the phone CTA lands at the top
     of the page on mobile, where this grid does not apply and DOM order is the
     visual order. Explicit placement is what puts it back on the right here. */
  .content-col--rail > * { grid-column: 1; }
  .content-col--rail > .rail { grid-column: 2; grid-row: 1; align-self: stretch; }
}

/* A 380px rail leaves only 537px of reading column at 1024px, which is a
   56-character measure - narrower than the single-column layout this replaced.
   Shrink the rail instead until there is room for the full one. */
@media (min-width: 1024px) and (max-width: 1199px) {
  :root { --rail: 300px; --rail-gap: 32px; }
}

/* Centred so the measure reads as deliberate rather than pushed to one side. */
.prose { max-width: 78ch; margin-inline: auto; }

/* For a section built out of full-bleed grids and cards (the I-4 corridor
   page). The container goes edge to edge, but loose paragraphs and lists still
   get a measure - without this they run to a 131-character line at 1440px. */
.prose--full { max-width: none; }
.prose--full > p,
.prose--full > ul,
.prose--full > ol { max-width: 78ch; }
/* Inside the rail layout the column IS the measure. Leaving the cap on would
   just move the dead space from outside the column to inside it. */
.content-col--rail > .prose { max-width: none; margin-inline: 0; }
.prose h2 { margin-top: 1.9em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 54px;
  padding: .85rem 1.7rem;
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 20px; height: 20px; flex: none; }

.btn-call {
  background: var(--c-accent-cta);
  color: var(--c-white);
  border-color: var(--c-accent-cta);
  box-shadow: var(--shadow-cta);
}
.btn-call:hover, .btn-call:focus { background: var(--c-accent-700); border-color: var(--c-accent-700); color: var(--c-white); }

.btn-secondary {
  background: transparent;
  color: var(--c-navy-900);
  border-color: var(--c-navy-900);
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--c-navy-900); color: var(--c-white); }

/* Secondary buttons sitting on any dark surface. .cta-band and .sidebar-card
   MUST be in this list - they are navy backgrounds, and without it the button
   renders navy-on-navy and is invisible until hovered. */
.on-dark .btn-secondary,
.band--dark .btn-secondary,
.band--darker .btn-secondary,
.hero .btn-secondary,
.cta-band .btn-secondary,
.sidebar-card .btn-secondary {
  color: var(--c-white); border-color: rgba(255,255,255,.65);
}
.on-dark .btn-secondary:hover,
.band--dark .btn-secondary:hover,
.band--darker .btn-secondary:hover,
.hero .btn-secondary:hover,
.cta-band .btn-secondary:hover,
.sidebar-card .btn-secondary:hover {
  background: var(--c-white); color: var(--c-navy-900); border-color: var(--c-white);
}

.btn-amber { background: var(--c-amber-500); color: var(--c-navy-900); border-color: var(--c-amber-500); }
.btn-amber:hover { background: #E89C11; border-color: #E89C11; color: var(--c-navy-900); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Trust chips
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips--center { justify-content: center; }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-navy-900);
  background: var(--c-amber-050);
  border: 1px solid #F5D79A;
  border-radius: 100px;
  margin: 0;
}
.chip .ico { width: 16px; height: 16px; color: var(--c-accent-600); flex: none; }

.on-dark .chip, .band--dark .chip, .band--darker .chip, .hero .chip {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,176,32,.45);
  color: var(--c-white);
  backdrop-filter: blur(2px);
}
.on-dark .chip .ico, .hero .chip .ico, .band--dark .chip .ico, .band--darker .chip .ico { color: var(--c-amber-500); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--c-navy-900);
  color: var(--c-white);
  padding-block: 84px 76px;
  overflow: hidden;
}
.hero::before {
  /* Industrial hazard-stripe motif — renders even with no photo present. */
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(115deg, rgba(194,65,12,.20) 0%, rgba(12,30,48,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,176,32,.055) 0 14px, rgba(255,176,32,0) 14px 34px),
    linear-gradient(180deg, var(--c-navy-800) 0%, var(--c-navy-900) 100%);
}
.hero__photo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .32;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(92deg, rgba(12,30,48,.94) 0%, rgba(12,30,48,.74) 48%, rgba(12,30,48,.42) 100%);
}
.hero h1 { color: var(--c-white); margin-bottom: .35em; }
.hero__lede {
  font-size: 1.22rem;
  color: #C9D6E2;
  max-width: 46ch;
  margin-bottom: 1.6rem;
}
.hero__inner { max-width: 700px; }
.hero .btn-row { margin-bottom: 1.6rem; }
.hero .chips { margin-top: .25rem; }

.hero--page { padding-block: 62px 54px; }
.hero--page h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.hero--page .hero__lede { font-size: 1.12rem; }

.hero__phone {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9FB3C6;
  margin-top: 1.15rem;
}
.hero__phone a { color: var(--c-white); text-decoration: none; border-bottom: 2px solid var(--c-amber-500); }
.hero__phone a:hover { color: var(--c-amber-500); }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card > :last-child { margin-top: auto; }
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--c-slate-500); font-size: .985rem; }

a.card, .card--link { text-decoration: none; color: inherit; }
a.card:hover, .card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #C6D3E2; }

.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--c-accent-050);
  color: var(--c-accent-text);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.card__icon .ico { width: 26px; height: 26px; }

.card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  padding-top: 14px;
}
a.card:hover .card__more { color: var(--c-accent-700); }
.card__more .ico { width: 15px; height: 15px; transition: transform .18s ease; }
a.card:hover .card__more .ico { transform: translateX(3px); }

.band--dark .card, .band--darker .card {
  background: var(--c-navy-700);
  border-color: #24445F;
  box-shadow: none;
  color: #D9E2EC;
}
.band--dark .card p, .band--darker .card p { color: #AFC0D0; }
.band--dark .card__icon, .band--darker .card__icon { background: rgba(255,176,32,.14); color: var(--c-amber-500); }
.band--dark a.card:hover, .band--darker a.card:hover { border-color: var(--c-amber-500); transform: translateY(-3px); }
.band--dark .card__more, .band--darker .card__more { color: var(--c-amber-500); }

/* Feature card — no border, lighter weight */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--c-navy-900); color: var(--c-amber-500);
  border-radius: var(--radius);
}
.feature__icon .ico { width: 22px; height: 22px; }
.feature h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.feature p { color: var(--c-slate-500); font-size: .97rem; margin: 0; }
.band--dark .feature p, .band--darker .feature p { color: #AFC0D0; }
.band--dark .feature__icon, .band--darker .feature__icon { background: rgba(255,176,32,.14); }

/* --------------------------------------------------------------------------
   8. Numbered steps
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 22px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps li { counter-increment: step; margin: 0; position: relative; padding-top: 58px; }
.steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 800;
  color: var(--c-white); background: var(--c-accent-cta);
  border-radius: var(--radius);
}
.steps h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.steps p { color: var(--c-slate-500); font-size: .97rem; margin: 0; }
.band--dark .steps p, .band--darker .steps p { color: #AFC0D0; }

/* --------------------------------------------------------------------------
   8b. Grouped service index (services hub)
   Text-and-rule listing rather than image cards - scans far faster when a
   driver is looking for one specific service, and carries no image weight.
   -------------------------------------------------------------------------- */
.svc-group { margin-bottom: 52px; }
.svc-group:last-child { margin-bottom: 0; }

.svc-group__head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-navy-900);
  margin-bottom: 4px;
}
.svc-group__head h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin: 0;
}
.svc-group__count {
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  letter-spacing: .1em; color: var(--c-slate-500);
}

.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
.svc-list li { margin: 0; border-bottom: 1px solid var(--c-line-200); }

.svc-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  padding: 18px 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color .15s ease, padding-left .15s ease;
}
.svc-list a:hover { background: var(--c-mist-100); padding-left: 12px; }

.svc-list__name {
  font-family: var(--font-head); font-size: 1.22rem; font-weight: 700;
  letter-spacing: .01em; color: var(--c-navy-900);
  grid-column: 1;
}
.svc-list a:hover .svc-list__name { color: var(--c-accent-text); }

.svc-list__desc {
  grid-column: 1; grid-row: 2;
  font-size: .95rem; color: var(--c-slate-500); line-height: 1.5;
}
.svc-list__arrow {
  grid-column: 2; grid-row: 1 / span 2;
  width: 18px; height: 18px; flex: none;
  color: var(--c-accent-600);
  transition: transform .15s ease;
}
.svc-list a:hover .svc-list__arrow { transform: translateX(4px); }

@media (max-width: 860px) {
  .svc-list { grid-template-columns: 1fr; }
  .svc-group { margin-bottom: 40px; }
}

/* Zero-padded step numbers - 01 / 02 / 03 */
.steps--zero li::before { content: counter(step, decimal-leading-zero); font-size: 1.3rem; }

/* --------------------------------------------------------------------------
   9. Checklists
   -------------------------------------------------------------------------- */
.checklist { list-style: none; margin: 0 0 1.15em; padding: 0; display: grid; gap: 11px; }
.checklist--2 { grid-template-columns: repeat(2, 1fr); column-gap: 30px; }
.checklist li {
  position: relative; padding-left: 32px; margin: 0; line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--c-accent-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.band--dark .checklist li::before, .band--darker .checklist li::before { background-color: var(--c-amber-500); }

/* --------------------------------------------------------------------------
   10. Scenario blocks
   -------------------------------------------------------------------------- */
.scenario {
  background: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-left: 4px solid var(--c-amber-500);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.scenario h3 { font-size: 1.16rem; margin-bottom: .4rem; }
.scenario p { margin-bottom: 0; color: var(--c-slate-500); font-size: .985rem; }
.band--mist .scenario { background: var(--c-white); }

/* --------------------------------------------------------------------------
   11. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-line-200); }
.faq details {
  border-bottom: 1px solid var(--c-line-200);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--font-head);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-navy-900);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent-text); }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  border-right: 3px solid var(--c-accent-600);
  border-bottom: 3px solid var(--c-accent-600);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__a { padding: 0 44px 22px 0; color: var(--c-slate-500); }
.faq__a > :last-child { margin-bottom: 0; }

.band--dark .faq, .band--darker .faq { border-color: #24445F; }
.band--dark .faq details, .band--darker .faq details { border-color: #24445F; }
.band--dark .faq summary, .band--darker .faq summary { color: var(--c-white); }
.band--dark .faq summary::after, .band--darker .faq summary::after { border-color: var(--c-amber-500); }
.band--dark .faq__a, .band--darker .faq__a { color: #AFC0D0; }

/* --------------------------------------------------------------------------
   12. Town / link lists
   -------------------------------------------------------------------------- */
.townlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 20px;
}
.townlist li { margin: 0; }
.townlist a {
  display: block;
  padding: 11px 14px;
  min-height: 44px;
  background: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-navy-900);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.townlist a:hover { border-color: var(--c-accent-text); color: var(--c-accent-text); }
.band--dark .townlist a, .band--darker .townlist a {
  background: var(--c-navy-700); border-color: #24445F; color: var(--c-white);
}
.band--dark .townlist a:hover, .band--darker .townlist a:hover { border-color: var(--c-amber-500); color: var(--c-amber-500); }

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.linklist li { margin: 0; }
.linklist a { font-weight: 600; }

/* --------------------------------------------------------------------------
   13. Nearby areas
   -------------------------------------------------------------------------- */
.nearby { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nearby a {
  display: block;
  padding: 20px;
  background: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.nearby a:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.nearby strong {
  display: block;
  font-family: var(--font-head); font-size: 1.3rem; font-weight: 700;
  color: var(--c-navy-900); margin-bottom: .2rem;
}
.nearby span { font-size: .93rem; color: var(--c-slate-500); }
.nearby a:hover strong { color: var(--c-accent-text); }

/* --------------------------------------------------------------------------
   14. Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat__n {
  display: block;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.1rem); line-height: 1;
  color: var(--c-amber-500);
}
.stat__l {
  display: block; margin-top: .35rem;
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #AFC0D0;
}

/* --------------------------------------------------------------------------
   15. Pricing / callout notes
   -------------------------------------------------------------------------- */
.note {
  background: var(--c-amber-050);
  border: 1px solid #F5D79A;
  border-left: 4px solid var(--c-amber-500);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.note h3 { margin-bottom: .5rem; }
.note > :last-child { margin-bottom: 0; }

.note--red { background: var(--c-accent-050); border-color: #F7CDB4; border-left-color: var(--c-accent-600); }

.pricing-table { display: grid; gap: 0; border: 1px solid var(--c-line-200); border-radius: var(--radius); overflow: hidden; }
.pricing-table > div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 18px; background: var(--c-white); }
.pricing-table > div + div { border-top: 1px solid var(--c-line-200); }
.pricing-table dt, .pricing-table strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   15b. Data tables (exit lists, coverage tables)
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; }
.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .97rem;
  background: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--radius);
}
.data-table caption {
  caption-side: bottom; padding-top: 12px;
  font-size: .88rem; color: var(--c-slate-500); text-align: left;
}
.data-table th, .data-table td { padding: 12px 15px; text-align: left; vertical-align: top; }
.data-table thead th {
  background: var(--c-navy-800); color: var(--c-white);
  font-family: var(--font-head); font-size: 1.02rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.data-table tbody tr + tr { border-top: 1px solid var(--c-line-200); }
.data-table tbody tr:nth-child(even) { background: var(--c-mist-100); }
.data-table td strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--c-navy-900); }

/* --------------------------------------------------------------------------
   16. CTA band
   -------------------------------------------------------------------------- */
/* Solid, not striped. This is the last thing on every page and the strongest
   call to action on it - a flat block of colour with an amber rule reads as a
   deliberate stop, where the diagonal texture just made it blend into the hero. */
.cta-band {
  position: relative;
  background: var(--c-navy-900);
  border-top: 4px solid var(--c-amber-500);
  color: var(--c-white);
  padding-block: 68px;
  text-align: center;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--c-white); margin-bottom: .4em; }
.cta-band p { color: #C9D6E2; max-width: 60ch; margin-inline: auto; margin-bottom: 1.6rem; font-size: 1.08rem; }
.cta-band .btn-row { justify-content: center; }
.cta-band__note { display: block; margin-top: 1.2rem; font-size: .95rem; color: #9FB3C6; }

/* --------------------------------------------------------------------------
   17. Breadcrumbs
   -------------------------------------------------------------------------- */
/* The visible breadcrumb bar was removed at the owner's request - the reference
   site doesn't use one either. The BreadcrumbList JSON-LD is still on every
   deep page, which is what actually feeds the breadcrumb trail Google shows in
   search results, so nothing was lost on the SEO side. No .crumbs styles are
   needed; if the bar is ever wanted back, restore the markup in src/pages and
   add rules here. */

/* --------------------------------------------------------------------------
   18. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-navy-800);
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 2px 12px rgba(12,30,48,.22);
}
.site-header__bar {
  display: flex; align-items: center; gap: 20px;
  min-height: 70px;
  padding-block: 10px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand__mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  background: var(--c-accent-600);
  border-radius: var(--radius);
  font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; line-height: 1;
  color: var(--c-white);
  letter-spacing: -.02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-head); font-weight: 800; font-size: 1.32rem;
  text-transform: uppercase; letter-spacing: .01em; color: var(--c-white);
}
.brand__tag {
  font-family: var(--font-head); font-weight: 600; font-size: .76rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--c-amber-500);
}

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
/* Scoped to `ul` so it never outranks the .btn styles on the nav's Call button. */
.nav ul a {
  display: block; padding: 10px 13px;
  font-family: var(--font-head); font-size: 1.1rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: #C9D6E2; text-decoration: none; border-radius: var(--radius);
}
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--c-white); background: rgba(255,255,255,.09); }
.nav ul a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--c-amber-500); }

/* The nav's Call button belongs to the MOBILE drawer only. On desktop the
   header's own Call button (.header-cta) is the single CTA, so this one is
   hidden - otherwise two identical red buttons render side by side. */
.nav__cta { display: none; }

.header-cta { flex: none; }
.header-cta .btn { min-height: 46px; padding: .5rem 1.15rem; font-size: 1.08rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius); color: var(--c-white); cursor: pointer;
}
.nav-toggle .ico { width: 24px; height: 24px; }
.nav-toggle .ico--close { display: none; }
.nav-toggle[aria-expanded="true"] .ico--open { display: none; }
.nav-toggle[aria-expanded="true"] .ico--close { display: block; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-navy-900); color: #AFC0D0; padding-block: 56px 0; font-size: .96rem; }
.site-footer h2, .site-footer h3 { color: var(--c-white); }
.site-footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h3 {
  font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-amber-500); margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55em; }
.site-footer a { color: #AFC0D0; text-decoration: none; }
.site-footer a:hover { color: var(--c-white); text-decoration: underline; }

.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { font-size: .95rem; margin-bottom: 1rem; }
.footer-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-size: 1.7rem; font-weight: 800;
  color: var(--c-white) !important; text-decoration: none !important;
  line-height: 1.1;
}
.footer-phone:hover { color: var(--c-amber-500) !important; }
.footer-hours {
  display: block; margin-top: .3rem;
  font-family: var(--font-head); font-size: .95rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-amber-500);
}

.site-footer__bar {
  margin-top: 44px; padding-block: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center;
  font-size: .89rem;
}
.site-footer__bar p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.site-footer__legal li { margin: 0; }

/* --------------------------------------------------------------------------
   20. Mobile sticky call bar
   -------------------------------------------------------------------------- */
.callbar { display: none; }

/* --------------------------------------------------------------------------
   21. Photo frames
   -------------------------------------------------------------------------- */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,176,32,.10) 0 14px, rgba(255,176,32,0) 14px 34px),
    linear-gradient(160deg, var(--c-navy-700) 0%, var(--c-navy-900) 100%);
  min-height: 240px;
  display: grid;
  place-items: center;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.photo-frame figcaption {
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
  padding: 14px 18px;
  font-size: .88rem;
  color: #C9D6E2;
  background: linear-gradient(0deg, rgba(12,30,48,.85), rgba(12,30,48,0));
}

/* --------------------------------------------------------------------------
   22. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--c-white);
  border: 1px solid var(--c-line-200);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: .35rem;
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-navy-900);
}
.field .hint { display: block; font-family: var(--font-body); font-size: .86rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--c-slate-500); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  font-family: var(--font-body); font-size: 1rem; color: var(--c-ink-900);
  background: var(--c-white);
  border: 1px solid #C6D3E2;
  border-radius: var(--radius);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-navy-600); }
.req { color: var(--c-accent-text); }

.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); font-weight: 600; }
.form-status[data-state="ok"]  { background: #E9F7EF; border: 1px solid #A9DFC0; color: #14663C; }
.form-status[data-state="err"] { background: var(--c-accent-050); border: 1px solid #F7CDB4; color: var(--c-accent-700); }

/* --------------------------------------------------------------------------
   23. Blog
   -------------------------------------------------------------------------- */
.post-meta { color: var(--c-slate-500); font-size: .92rem; margin-bottom: 1.4rem; }
.post-body h2 { margin-top: 2em; }
.post-body h3 { margin-top: 1.7em; }
.post-body img, .post-body .photo-frame { margin-block: 1.8rem; }

.toc {
  background: var(--c-mist-100);
  border: 1px solid var(--c-line-200);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 2rem;
}
.toc h2 { font-size: 1.15rem; margin: 0 0 .7rem; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: .3em; }

/* The navy call-to-action card. It lives inside .rail on content pages, but is
   still used as a full-width in-flow callout on pages with no rail, so the
   default styling below stays the horizontal strip and .rail overrides it. */
.sidebar-card {
  background: var(--c-navy-900);
  color: #C9D6E2;
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-block: 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 32px;
}
/* The card can hold the email address, which is one long unbreakable string.
   Grid children default to min-width:auto, so without this it forces the card
   wider than a 320px viewport and the whole page scrolls sideways. */
.sidebar-card > * { min-width: 0; overflow-wrap: anywhere; }
.sidebar-card h3 { grid-column: 1; margin-bottom: .35rem; }
.sidebar-card p  { grid-column: 1; font-size: .96rem; margin-bottom: 0; }
.sidebar-card p + p { margin-top: .5rem; }
.sidebar-card .btn {
  grid-column: 2;
  grid-row: 1 / span 3;
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 700px) {
  .sidebar-card { grid-template-columns: 1fr; }
  .sidebar-card .btn { grid-column: 1; grid-row: auto; width: 100%; margin-top: .8rem; }
}
.sidebar-card h3 { color: var(--c-white); }
.sidebar-card p { font-size: .96rem; }
.sidebar-card .btn { width: 100%; }
/* Navy card, so plain links must not inherit the default dark-blue link color -
   it renders almost invisibly against the background. */
.sidebar-card a:not(.btn) { color: var(--c-amber-500); }
.sidebar-card a:not(.btn):hover { color: var(--c-white); }

/* --------------------------------------------------------------------------
   23b. Sticky CTA rail
   -------------------------------------------------------------------------- */
/* The rail holds the call card and nothing else. It briefly also carried
   services / service-area link blocks, which were dropped: they repeated the
   footer verbatim, and at ~1140px tall the rail no longer fit under the sticky
   header, so it needed its own scrollbar. One short card needs neither. */
@media (min-width: 1024px) {
  .rail__inner {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

.rail__pill {
  grid-column: 1;
  justify-self: start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem;
  margin-bottom: .5rem;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-white);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,176,32,.45);
  border-radius: 100px;
}
.rail__pill::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-amber-500);
  flex: none;
}

/* The card is a two-column strip by default (copy left, button right). At 380px
   that has to collapse, at every width - the rail is never wide enough for it,
   including on mobile where the card is the full content width but the rail
   context still applies. */
.rail .sidebar-card {
  grid-template-columns: 1fr;
  margin-block: 0;
  padding: 22px 24px;
}
.rail .sidebar-card .btn {
  grid-column: 1;
  grid-row: auto;
  width: 100%;
  margin-top: .9rem;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   24. Responsive — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav ul a { padding: 10px 9px; font-size: 1.04rem; }
  .brand__tag { display: none; }
}

@media (max-width: 960px) {
  :root { --pad-band: 56px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .townlist { grid-template-columns: repeat(3, 1fr); }
  .nearby { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* --------------------------------------------------------------------------
   25. Responsive — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  :root { --pad-band: 46px; }

  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }

  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-navy-800);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 12px 24px rgba(12,30,48,.35);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 10px 20px 22px;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { padding: 14px 6px; font-size: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .nav__cta { display: block; margin-top: 16px; }
  .nav__cta .btn { width: 100%; }

  .hero { padding-block: 52px 46px; }
  .hero--page { padding-block: 40px 36px; }
  .hero__lede { font-size: 1.08rem; }
  .btn-row .btn { width: 100%; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps--4, .steps--3 { grid-template-columns: 1fr; }
  .steps li { padding-top: 0; padding-left: 60px; min-height: 46px; }
  .checklist--2 { grid-template-columns: 1fr; }
  .townlist { grid-template-columns: repeat(2, 1fr); }
  .nearby { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer { padding-bottom: 0; }

  .site-footer__legal { gap: 4px 22px; }

  .faq summary { font-size: 1.15rem; padding-right: 38px; }

  .form-card { padding: 22px 18px; }

  /* Sticky bottom call bar — mobile only */
  .callbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(12,30,48,.97);
    border-top: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
  }
  .callbar .btn { width: 100%; min-height: 56px; font-size: 1.28rem; box-shadow: none; }
  /* Must clear the fixed call bar, including the notch inset on iPhones -
     env() varies by device, so this tracks it rather than guessing a number. */
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) {
  .townlist { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }

  /* On a 320px screen the call bar label wraps to two lines, which makes the
     fixed bar ~117px tall and eats a third of the viewport. Shrink the type so
     it stays on one line instead of padding the body to accommodate a wrap. */
  .callbar .btn {
    font-size: 1.06rem;
    padding-inline: .8rem;
    gap: .4rem;
    white-space: nowrap;
  }
  .callbar .btn .ico { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   25b. Touch targets
   Keyed off the INPUT DEVICE, not the screen width. An iPad in landscape is
   1024px wide but is still a thumb - a width breakpoint would miss it, and
   equally there is no reason to bloat a 1000px-wide desktop footer with 44px
   rows for a mouse pointer. Everything here is nav-like; inline links inside
   paragraphs stay inline on purpose, since padding body copy out to 44px
   wrecks the line rhythm.
   -------------------------------------------------------------------------- */
/* Width OR pointer, not just one. `pointer: coarse` alone catches an iPad in
   landscape (1024px, still a thumb) but misses a narrow desktop window; a
   width query alone does the reverse. Together they cover both. */
@media (max-width: 768px), (pointer: coarse) {
  .site-footer li { margin-bottom: 0; }
  .site-footer ul a { display: inline-block; padding: 13px 0; }
  .footer-phone { padding: 8px 0; }
  .brand { min-height: 44px; }
  .hero__phone a { display: inline-block; padding: 11px 0; }
  .data-table a { display: inline-block; padding: 13px 0; }
  .linklist a { display: inline-block; padding: 11px 0; }
  .svc-list a { padding-block: 22px; }
}

/* --------------------------------------------------------------------------
   26. Motion / print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .callbar, .cta-band, .site-footer { display: none !important; }
  /* Collapse the two columns so the card prints once, above the article, rather
     than as a pinned box beside it. It keeps the phone number on the paper. */
  .content-col--rail { display: block !important; }
  .rail__inner { position: static !important; }
  body { padding-bottom: 0; }
}