/* ==========================================================================
   MNZ Construction — site stylesheet
   Header style: DARK — near-black (#111111) header with white text and an
   amber-brown utility strip, matching the client's own logo ground and the
   legacy site's amber-on-black palette (read from their stylesheet 2026-08-28,
   NOT inferred from the logo).
   Fonts: Oswald (headings) + Source Sans 3 (body).

   COLOR CONTRACT — read before changing an amber.
   The brand amber #FFB600 measures 1.76:1 against white. That FAILS WCAG AA for
   normal text and for anything relying on contrast against a white ground.
   Rule 30 requires zero axe violations at every severity, so:

     --accent       #FFB600  the brand amber. Button FILLS under BLACK text
                             (11.94:1), icons and rules on the dark grounds, and
                             text on dark. NEVER a text color on white.
     --accent-ink   #8A5A00  the usable amber for light grounds — 5.93:1 on
                             white, 5.42:1 on the tint. All amber text on white,
                             outline-button borders and labels, body-context icons.
     --accent-ink-dark #6E4700  8.19:1 on white — hover state for the above.

   On the DARK grounds (header, footer, stats bar, CTA banner, hero overlay —
   all the brand near-black) the relationship inverts and the brand amber is the
   correct choice:

     --on-dark      #FFB600  10.74:1 on #111111 — hero eyebrow, stat numbers,
                             footer headings, nav hover text.
     --muted-on-dark #C9C9C9 11.40:1 on #111111 — secondary text on dark grounds.

   ⚠️ THIS FILE WAS PORTED FROM A LIGHT-HEADER BUILD. Three rules were written
   against a pale header ground and had to be re-tinted for a black one, because
   a :root variable swap alone is NOT sufficient:
     - .nav-desktop > li > a:hover     (a 7% DARK tint is invisible on black,
                                        and --accent-ink-dark is 1.9:1 there)
     - .sub a  /  .sub .sub-all a      (inside the MOBILE nav panel, whose ground
                                        is --header-bg: --body would be invisible
                                        and --accent-ink measured 2.1:1)
   If you flip this build to a light header, those three need re-tinting back.
   ========================================================================== */

:root {
  --primary: #1A1A1A;        /* their black */
  --primary-dark: #111111;
  --primary-deep: #0A0A0A;
  --accent: #FFB600;         /* their amber — the CTA color on the legacy site */
  --accent-ink: #8A5A00;     /* amber darkened for TEXT on white (5.93:1) */
  --accent-ink-dark: #6E4700;/* hover (8.19:1) */
  --accent-tint: #FFF4D9;    /* icon-badge ground; --accent-ink on it is 5.42:1 */
  --on-dark: #FFB600;        /* amber reads 10.74:1 on the black grounds */
  --muted-on-dark: #C9C9C9;  /* secondary text ON the black grounds (11.40:1) */

  --ink: #1A1A1A;
  --body: #3A3F45;
  --muted: #5A6069;
  --line: #E2E4E7;
  --surface: #F6F6F5;
  --surface-2: #ECECEA;
  --white: #ffffff;

  --header-bg: #111111;      /* dark header — matches the logo's own ground */
  --header-text: #FFFFFF;
  --header-line: #2A2A2A;

  --font-head: 'Oswald', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(17, 17, 17, .10);
  --shadow-lg: 0 12px 34px rgba(17, 17, 17, .18);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.05rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -.015em; }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1.1em; }

a { color: var(--accent-ink); }
a:hover { color: var(--accent-ink-dark); }

/* Rule 30: links inside running copy need an underline, color alone is not
   a sufficient cue against body text. */
main p a:not(.btn), main li a:not(.btn) { text-decoration: underline; }
main a[href^="tel:"] { white-space: nowrap; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--accent-ink);
  padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 0; }

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

.eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.hero .eyebrow, .page-hero .eyebrow, .cta-banner .eyebrow { color: var(--on-dark); }

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: 14px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn + .btn { margin-left: 10px; }

.btn-accent { background: var(--accent); color: var(--primary-dark); }
.btn-accent:hover { background: #E5A400; color: var(--primary-dark); }

.btn-dark { background: var(--primary); color: var(--white); }
.btn-dark:hover { background: var(--accent); color: var(--primary-dark); }

.btn-outline { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn-outline:hover { background: var(--accent-ink); color: var(--white); }

/* On dark grounds the outline button must invert, or the label drops to ~1.5:1.
   Every dark container must be listed here. */
.hero .btn-outline,
.page-hero .btn-outline,
.stats-bar .btn-outline,
.sidebar-card.dark .btn-outline,
.cta-banner .btn-outline,
.ftr .btn-outline { color: var(--white); border-color: var(--white); background: transparent; }
.hero .btn-outline:hover,
.page-hero .btn-outline:hover,
.stats-bar .btn-outline:hover,
.sidebar-card.dark .btn-outline:hover,
.cta-banner .btn-outline:hover,
.ftr .btn-outline:hover { background: var(--white); color: var(--primary); border-color: var(--white); }

/* ---------- trust bar ---------------------------------------------------- */

/* The amber utility strip. It sits ABOVE the header rather than inside it,
   because the header is sticky and nesting the strip would make the stuck bar
   taller on every page. Uses --accent-ink (the darkened amber), NOT the brand
   amber: white on #FFB600 is 1.76:1 and fails badly at this text size, whereas
   white on #8A5A00 is 5.93:1. */
.trust-bar { background: var(--accent-ink); color: #ffffff; font-size: .86rem; }
.trust-bar-inner { display: flex; gap: 26px; align-items: center; justify-content: space-between; min-height: 40px; }
.trust-item { color: #ffffff; display: inline-flex; align-items: center; }
.trust-call { font-weight: 700; color: var(--white); text-decoration: none; }
.trust-call:hover { color: #ffffff; text-decoration: underline; }

/* ---------- header ------------------------------------------------------- */

header {
  background: var(--header-bg);
  color: var(--header-text);
  position: sticky; top: 0; z-index: 100;
  overflow: visible;
  border-bottom: 1px solid var(--header-line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }

.logo { display: flex; align-items: center; }
.logo img { height: 56px; width: auto; display: block; }

.nav-desktop { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-desktop > li { position: relative; }
.nav-desktop > li > a {
  display: block;
  color: var(--header-text);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9rem;
  padding: 12px 12px;
  border-radius: 8px;
}
/* Rule 12: exclude the special buttons or the hover rule eats them. */
/* Dark header: the hover tint LIGHTENS the ground to about #2A2A2A, where the
   brand amber measures 8.16:1. A dark tint would be invisible here and
   --accent-ink-dark would fall to 1.9:1 — the pale-header values do not port. */
.nav-desktop > li > a:not(.nav-call):hover { background: rgba(255,255,255,.10); color: var(--accent); }

.nav-call {
  background: var(--accent);
  color: var(--primary-dark) !important;
  padding: 12px 20px !important;
  margin-left: 8px;
}
.nav-call:hover { background: #E5A400; color: var(--primary-dark) !important; }

.sub {
  position: absolute; top: 100%; left: 0; min-width: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  list-style: none; margin: 6px 0 0; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a {
  display: block; padding: 9px 12px; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600;
}
.sub a:hover { background: var(--surface); color: var(--accent-ink-dark); }
.sub .sub-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.sub .sub-all a { color: var(--accent-ink); }

.hamburger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 46px; height: 46px; padding: 10px;
  color: currentColor;                 /* Rule 11 — auto-matches header text */
}
.hamburger span { display: block; height: 2px; background: currentColor; margin: 5px 0; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
/* Rule 25: burger becomes an X while open */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero --------------------------------------------------------- */

.hero { position: relative; color: var(--white); padding: 64px 0 72px; }
.hero h1 { color: var(--white); max-width: 18ch; }
.hero-lead { font-size: 1.16rem; max-width: 56ch; color: rgba(255,255,255,.92); }
.hero-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
/* The hero card IS the form card: one frame, not a white box around a bordered box. */
.hero-form { background: var(--white); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-lg); color: var(--body); }
.hero-form .form-card { border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.hero-form h2 { font-size: 1.3rem; margin-bottom: .6em; }
.hero-form .form-note { margin-top: 10px; }
/* Compact variant (hero): tighter rhythm, short message box. */
.form-compact .field { margin-bottom: 11px; }
.form-compact .field label { font-size: .86rem; margin-bottom: 4px; }
.form-compact .field input, .form-compact .field select { padding: 9px 12px; }
.form-compact .field textarea { min-height: 58px; }
.form-compact .btn { width: 100%; display: block; text-align: center; margin-top: 4px; }
.form-compact > .form-note { font-size: .76rem; line-height: 1.35; margin-top: 8px; }

/* Rule 2: .page-hero carries NO background-image here — layout only. The image
   and its brand-tinted gradient are inline on each page. */
.page-hero { position: relative; color: var(--white); padding: 74px 0; overflow: hidden; }
.page-hero h1 { color: var(--white); margin-bottom: .3em; }
.page-hero p { color: rgba(255,255,255,.92); max-width: 62ch; margin: 0; }

/* ---------- breadcrumb --------------------------------------------------- */

.breadcrumb { background: var(--surface); border-bottom: 1px solid var(--line); font-size: .88rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- layout blocks ------------------------------------------------ */

.section { padding: 72px 0; }
.section-alt { background: var(--surface); }
.section-h { text-align: center; }
.section-lead { text-align: center; max-width: 74ch; margin: 0 auto 40px; color: var(--muted); }
.section-h + .section-lead { margin-top: -.2em; }
.center { text-align: center; }
/* Narrow measure for the short utility pages (thank-you, 404) — full --wrap
   width across three lines of text reads as a stranded sentence. */
.wrap.narrow { max-width: 720px; }
.wrap.narrow .cta-actions { justify-content: center; }

/* Rule 13: .content-wrap also carries .wrap — keep the side padding or mobile
   runs flush to both screen edges. */
.content-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 46px;
  padding: 64px 22px;
}
.content-main > h2 { margin-top: 1.6em; }
.content-main > h2:first-child { margin-top: 0; }
.content-main h3 { margin-top: 1.3em; }

.sidebar-cta { position: sticky; top: 96px; align-self: start; display: grid; gap: 18px; }

.sidebar-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.sidebar-card h3 { margin-bottom: .5em; }
.sidebar-card p { font-size: .95rem; }
.sidebar-card .btn { width: 100%; text-align: center; }
.sidebar-card.dark { background: var(--primary); border-color: var(--primary); color: rgba(255,255,255,.88); }
.sidebar-card.dark h3 { color: var(--white); }
.sidebar-card.dark .phone-big { display: block; font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--white); text-decoration: none; margin-bottom: 14px; }
.sidebar-card.dark .phone-big:hover { color: var(--on-dark); text-decoration: underline; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }

.svc-card { display: block; text-decoration: none; color: inherit; overflow: hidden; padding: 0; }
.svc-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.svc-card .svc-body { padding: 22px 24px 26px; }
.svc-card h3 { color: var(--ink); display: flex; align-items: center; gap: 8px; }
.svc-card:hover { box-shadow: var(--shadow-lg); }
.svc-card:hover h3 { color: var(--accent-ink); }
.svc-more { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--accent-ink); }

/* Compact service tiles for the 8/7-item hub grids */
.tile { display: block; text-decoration: none; color: inherit; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.tile h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: .35em; }
.tile p { font-size: .94rem; margin: 0 0 .6em; }
.tile:hover { box-shadow: var(--shadow-lg); border-color: var(--accent-ink); }
.tile:hover h3 { color: var(--accent-ink); }

.feature-list { list-style: none; padding: 0; margin: 0 0 1.4em; }
.feature-list li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.feature-list li::before {
  /* Pure-CSS check: a rotated two-sided border. Not a glyph (Rule 22). */
  content: ""; position: absolute; left: 2px; top: .38em;
  width: 6px; height: 11px;
  border: solid var(--accent-ink); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Stats strip: value / short label / muted sub-line. Labels are deliberately
   2-3 words so the row never wraps into sentences; Rule 14 keeps it ONE row at
   every viewport (fonts shrink, columns never collapse). */
.stats-bar { background: var(--primary); color: var(--white); padding: 30px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; text-align: center; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border-left: 1px solid rgba(255,255,255,.14); }
.stat:first-child { border-left: 0; }
.stat-n { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--on-dark); display: block; letter-spacing: -.01em; }
.stat-star { font-size: .6em; vertical-align: .25em; margin-left: .12em; }
.stat-l { font-size: .95rem; font-weight: 600; color: var(--white); line-height: 1.25; }
.stat-s { font-size: .78rem; color: var(--muted-on-dark); line-height: 1.3; }

.step-n { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--accent-ink); letter-spacing: .1em; margin-bottom: 8px; }

.photo-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.photo-frame img { display: block; width: 100%; height: auto; }

/* ---------- reviews band ------------------------------------------------- */

.reviews { padding: 72px 0; background: var(--surface); }
.reviews-note { text-align: center; max-width: 70ch; margin: 0 auto 36px; color: var(--muted); font-size: .97rem; }
.review-featured { background: var(--white); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 30px 34px; box-shadow: var(--shadow); margin-bottom: 26px; }
.review-featured p { font-size: 1.02rem; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.review-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.review-card blockquote, .review-featured blockquote { margin: 0; }
.review-card p { margin-bottom: 1em; flex: 1; }
.stars { display: inline-flex; gap: 2px; color: #d99a06; margin-bottom: 10px; }
.stars .icon { fill: currentColor; stroke: currentColor; }
.review-by { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--ink); margin: 0; }
.review-by span { font-weight: 400; color: var(--muted); }
.reviews-cta { text-align: center; margin-top: 36px; }

/* ---------- FAQ ---------------------------------------------------------- */

.faq { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--ink);
  padding: 20px 44px 20px 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--accent-ink); line-height: 1;
}
.faq-q[aria-expanded="true"]::after { content: "\2013"; }
.faq-q:hover { color: var(--accent-ink); }
.faq-a { padding: 0 0 20px; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- CTA banner --------------------------------------------------- */

.cta-banner { background: var(--primary); color: var(--white); padding: 66px 0; text-align: center; }
.cta-banner h2 { color: var(--white); }
.cta-banner p { color: rgba(255,255,255,.88); max-width: 60ch; margin: 0 auto 26px; }
.cta-banner .btn-accent { background: var(--white); color: var(--accent-ink); }
.cta-banner .btn-accent:hover { background: var(--surface-2); color: var(--accent-ink-dark); }

/* ---------- forms -------------------------------------------------------- */

.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .92rem; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  border: 1px solid #c3ccd8; border-radius: 8px; background: var(--white);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-ink); outline: 3px solid rgba(10,116,168,.25); outline-offset: 0; }
.form-note { font-size: .85rem; color: var(--muted); }
.field .form-note { margin: 6px 0 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Full-form counterpart of .form-row: a no-op wrapper so the include can
   switch between paired and stacked layouts without duplicating markup. */
.form-stack { display: contents; }
/* Validation banner. --accent-ink on the tint measures 4.57:1, and the left
   rule carries the meaning for anyone who cannot see the color. */
.form-error {
  background: var(--accent-tint); border-left: 4px solid var(--accent-ink);
  color: var(--accent-ink-dark); font-weight: 700; font-size: .93rem;
  padding: 12px 14px; border-radius: 6px; margin: 0 0 18px;
}

/* Rule 8: honeypot is display:none, never an off-screen offset. */
.hp-field { display: none !important; }

/* ---------- icons -------------------------------------------------------- */

.icon { flex: none; vertical-align: -.18em; }

.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-ink);
}
.tile .card-icon { width: 40px; height: 40px; margin-bottom: 12px; }

.icon-row { display: flex; align-items: flex-start; gap: 9px; }
.icon-row .icon { margin-top: .12em; color: var(--accent-ink); }  /* body context is white; --accent is 1.76:1 there */
.trust-item .icon { margin-right: 7px; color: var(--accent); }
.svc-body h3 .icon { color: var(--accent-ink); }

.ftr-contact-list { list-style: none; padding: 0; margin: 0; }
.ftr-contact-list li { margin-bottom: 11px; }
.ftr-contact-list .icon { color: var(--accent); }

/* The footer CTA is the only button that is not full-width on mobile. Hold it
   on one line and let it size to its content. */
.ftr-col .btn { white-space: nowrap; }

/* ---------- area strip (city list) --------------------------------------- */

.area-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.area-list a { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; }
.area-list a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.area-list .icon { color: var(--accent-ink); }
.area-list .tag { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }

/* Owner-bio pull quote (About). Left rule in brand amber, not a decorative
   glyph — Rule 22 keeps quote marks out of CSS content. */
.pull-quote { margin: 18px 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--accent); }
.pull-quote p { margin: 0; font-style: italic; color: var(--muted); font-size: .97rem; }

/* ---------- footer ------------------------------------------------------- */

.ftr { background: var(--primary); color: rgba(255,255,255,.88); padding: 62px 0 0; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 38px; padding-bottom: 46px; }
.ftr-col { min-width: 0; }
.ftr-col .ftr-h + .ftr-list + .ftr-h { margin-top: 1.6em; }
.ftr-h { font-size: .95rem; color: var(--on-dark); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1em; }
.ftr-contact li { margin-bottom: 12px; }
.ftr-logo { height: 62px; width: auto; margin-bottom: 16px; }
.ftr-blurb { font-size: .95rem; }
.ftr-formerly { font-size: .86rem; color: var(--muted-on-dark); }
.ftr-list { list-style: none; margin: 0 0 18px; padding: 0; }
.ftr-list li { margin-bottom: 9px; font-size: .95rem; }
.ftr address { font-style: normal; }

/* Rule 12: :not(.btn) belongs on the BASE rule too, not just :hover. */
.ftr a:not(.btn) { color: #d6dde8; text-decoration: none; }
.ftr a:not(.btn):hover { color: var(--white); text-decoration: underline; }

.ftr-social a { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; }

.ftr-bottom { border-top: 1px solid rgba(255,255,255,.14); padding: 20px 0; }
.ftr-bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem; }
.ftr-bottom p { margin: 0; }
.ftr-legal a { margin: 0 6px; }

/* ---------- sticky CTA (Rule 10 — exactly two elements) ------------------ */

.sticky-cta { position: fixed; z-index: 120; display: flex; }
.sticky-quote, .sticky-phone {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; flex: 1 1 0;
}
.sticky-quote { background: var(--accent-ink); color: var(--white); }
.sticky-quote:hover { background: var(--accent-ink-dark); color: var(--white); }
.sticky-phone { background: var(--primary); color: var(--white); }
.sticky-phone:hover { background: var(--primary-dark); color: var(--white); }

@media (min-width: 901px) {
  .sticky-cta {
    right: 22px; bottom: 22px; width: 380px;
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  }
  .sticky-quote, .sticky-phone { flex: 1; padding: 14px 10px; }
}

@media (max-width: 900px) {
  .sticky-cta { left: 0; right: 0; bottom: 0; }
  .sticky-quote, .sticky-phone { flex: 1; padding: 16px 10px; }
  /* Rule 24: clear the bar AND the iOS home indicator. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .sticky-cta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1024px) {
  .content-wrap { grid-template-columns: 1fr; }
  .sidebar-cta { position: static; }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: 4px 8px; }
  .stat-n { font-size: 1.7rem; }
  .stat-l { font-size: .85rem; }
  .stat-s { font-size: .72rem; }
  .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: 1fr; }
}

/* The desktop nav needs the full row. Below 1120px the hamburger takes over —
   kept separate from the 768px layout block on purpose (Rule 11). */
@media (max-width: 1120px) {
  .hamburger { display: block; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--header-bg);
    border-top: 1px solid var(--header-line);
    display: none;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav.open { display: block; }
  /* Bottom padding clears the fixed .sticky-cta bar (~60px + safe area) so the
     last menu items (Contact, phone) are reachable when the panel is scrolled. */
  .nav-desktop { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .nav-desktop > li > a { padding: 13px 10px; }
  /* Rule 25: reset the desktop transform in EVERY state or the panel renders
     shifted the first time it opens. */
  .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; margin: 0 0 6px;
    padding: 0 0 0 12px;
  }
  /* The open panel's ground is --header-bg (black), not white: --body would be
     invisible and --accent-ink 2.1:1. These are the dark-ground equivalents. */
  .sub a { color: var(--muted-on-dark); padding: 9px 10px; }
  .sub a:hover { background: rgba(255,255,255,.10); color: var(--accent); }
  .sub .sub-all { border-top-color: var(--header-line); }
  .sub .sub-all a { color: var(--accent); }
  .nav-call { display: inline-block; margin: 10px 10px 0; }
}

/* Rule 11: trust items fit on one line from ~830px; hidden below. */
@media (max-width: 830px) {
  .trust-bar { display: none; }
}

@media (max-width: 768px) {
  .grid-2, .two-col { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 72px; }
  .content-wrap { padding: 46px 22px; }
  .section { padding: 54px 0; }
  .reviews { padding: 54px 0; }
  .review-featured { padding: 24px; }
}

@media (max-width: 560px) {
  .grid-3, .grid-4, .area-list { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-bar { padding: 20px 0; }
  .stat { padding: 2px 5px; }
  .stat-n { font-size: 1.35rem; }
  .stat-l { font-size: .74rem; }
  .stat-s { display: none; }
  .ftr-grid { grid-template-columns: 1fr; }
  .logo img { height: 48px; }
  .btn { display: block; text-align: center; }
  .btn + .btn { margin-left: 0; margin-top: 10px; }
  .hero-cta { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Contact page: numbered "what happens next" list and the NAP detail rows. */
.steps-list { margin: 0 0 24px; padding-left: 1.15em; }
.steps-list li { margin-bottom: 12px; }
.contact-details { margin-bottom: 26px; list-style: none; padding-left: 0; }
.contact-details .icon-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.contact-details .icon-row .icon { flex: 0 0 auto; margin-top: 4px; color: var(--accent-ink); }
.contact-details address { font-style: normal; display: inline; }

/* CTA banner action row. Without this the two buttons sit on the text baseline
   with no gap and .btn + .btn's margin-left is the only thing separating them,
   which wraps badly on mobile. */
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 0; }
.cta-actions .btn + .btn { margin-left: 0; }

/* Claims-language disclaimer (storm hub). Deliberately quiet but readable —
   4.5:1 minimum, not a gray whisper. */
.disclaimer-note { margin: 28px auto 0; max-width: 900px; padding: 16px 20px;
  background: var(--surface); border-left: 3px solid var(--accent-ink);
  border-radius: 6px; font-size: .92rem; color: var(--body); }

/* Rule 32: in-body photo on service sub-pages and city pages, so they do not
   read as a wall of copy in the 55%% content column at 1440. */
.photo-inline { margin: 26px 0 30px; }

/* ---------- gallery -------------------------------------------------------
   Fixed 3-col at desktop, 2 at tablet, 1 on phones. Each figure clips its own
   image to a consistent aspect so mixed 4:3 / 16:9 / portrait sources do not
   produce a ragged grid. */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-item { margin: 0; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; }
.gallery-item figcaption { padding: 12px 14px; font-size: .86rem; line-height: 1.45;
  color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ---------- legal pages ---------------------------------------------------
   Narrower measure than the marketing pages: long-form policy text at the full
   1180px wrap is unreadable. page-hero-plain is the no-photo hero variant. */
.legal-copy { max-width: 780px; }
.legal-copy h2 { margin-top: 1.7em; font-size: 1.35rem; }
.legal-copy .feature-list { margin-bottom: 1.4em; }
.page-hero-plain { background: var(--primary); }