/* ===================================
   SHREVEPORT DRYWALL PRO
   Built on local-design base.css.
   Design system: sharp corners (0 radius), strong hierarchy, high contrast.
   Palette extracted from logo. All text colors verified WCAG AA.
   =================================== */

:root {
  /* Brand — from logo */
  --color-primary: #16295c;        /* navy — 13.9:1 on white */
  --color-primary-dark: #0f1d42;
  --color-primary-ink: #ffffff;
  --color-accent: #c2410c;         /* AA-safe orange — 5.2:1 on white */
  --color-accent-dark: #9a330a;
  --color-accent-bright: #f26a21;  /* logo orange — DECORATIVE ONLY, fails AA for text */

  --color-ink: #1e2126;            /* charcoal — 15.8:1 */
  --color-body: #333333;
  --color-muted: #5f6570;          /* 5.9:1 */
  --color-line: #e2e4e8;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f5f7;
  --color-success: #15803d;
  --color-error: #b91c1c;

  /* Typography — trades register per typography-system.md */
  --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Scale */
  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --header-h: 72px;
  --announce-h: 40px;

  --radius: 0;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.12;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
h4 { font-size: 1.125rem; font-weight: 700; }
p { max-width: 72ch; }

.overline {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: var(--s-1);
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-3);
}
.container-narrow { max-width: var(--container-narrow); }
section { padding-block: var(--s-6); }
@media (min-width: 768px) { section { padding-block: var(--s-7); } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 0.9375rem 1.875rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn + .btn { margin-top: var(--s-2); }
@media (min-width: 480px) { .btn + .btn { margin-top: 0; margin-left: var(--s-2); } }

.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-ink); color: #fff; }
.btn-on-dark { background: transparent; color: #fff; border-color: #fff; }
.btn-on-dark:hover { background: #fff; color: var(--color-primary); }

/* Announcement bar */
.announcement-bar {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding-block: 0.625rem;
  border-bottom: 3px solid var(--color-accent-bright);
}
.announcement-bar strong { font-weight: 800; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--header-h);
}
.site-header .logo { display: block; text-decoration: none; flex-shrink: 0; }

/* Logo lockup — badge mark + wordmark.
   Built in HTML/CSS rather than an <img> so the type renders in Montserrat,
   stays sharp at any DPI, and can invert for the dark footer. */
.logo { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-heading); }
.logo-city { font-weight: 900; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--color-primary); }
.logo-name { font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.11em; color: var(--color-ink); margin-top: 0.1875rem; }
.logo-name em { font-style: normal; color: var(--color-accent); }
@media (min-width: 480px) {
  .logo-mark { width: 46px; height: 46px; }
  .logo-city { font-size: 1.25rem; }
  .logo-name { font-size: 0.78125rem; }
}
/* Footer / dark-background variant */
.logo-light .logo-city { color: #fff; }
.logo-light .logo-name { color: rgba(255,255,255,0.9); }
.logo-light .logo-name em { color: var(--color-accent-bright); }
/* Primary nav.

   Inline from 1024px up. Below that it is replaced by the hamburger panel, not
   hidden outright: the previous rule was `display: none` under 900px with no
   substitute, so the whole menu vanished on phones AND in any desktop window
   narrower than 900px. */
.nav-inline { display: none; gap: var(--s-3); }
.nav-inline a {
  text-decoration: none;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 0.9375rem;
  white-space: nowrap;
}
.nav-inline a:hover { color: var(--color-accent); }

.header-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.6875rem 1.125rem;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9375rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-call:hover { background: var(--color-accent-dark); }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { border-color: var(--color-primary); }
/* Three bars from one element: the middle is the box, the outer two are its
   pseudo-elements. On open they rotate into an X. */
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  width: 22px;
  height: 2.5px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Panel */
.site-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  border-bottom: 3px solid var(--color-accent-bright);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  /* the panel scrolls itself rather than the page behind it, and never grows
     past the space actually left under the sticky bar */
  max-height: calc(100dvh - var(--header-h) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-menu[hidden] { display: none; }
.site-menu > .container { padding-block: var(--s-2) var(--s-3); }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list > li { border-bottom: 1px solid var(--color-line); }
.menu-list > li:last-child { border-bottom: 0; }

.menu-row { display: flex; align-items: stretch; justify-content: space-between; }
.menu-row > a, .menu-link {
  display: block;
  flex: 1 1 auto;
  padding: 0.875rem 0;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--color-primary);
}
.menu-row > a:hover, .menu-link:hover { color: var(--color-accent); }

/* Separate control from the label, so opening the sublist never costs you the
   hub page the label points at. */
.menu-expand {
  flex: 0 0 auto;
  width: 48px;
  border: 0;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-expand svg { width: 22px; height: 22px; transition: transform 0.2s ease; }
.menu-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-expand:hover { color: var(--color-accent); }

.menu-sub { list-style: none; margin: 0; padding: 0 0 0.75rem; }
.menu-sub[hidden] { display: none; }
.menu-sub a {
  display: block;
  padding: 0.5rem 0 0.5rem var(--s-2);
  border-left: 2px solid var(--color-line);
  text-decoration: none;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}
.menu-sub a:hover { color: var(--color-accent); border-left-color: var(--color-accent); }

.menu-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  margin-top: var(--s-3);
  padding: 0.875rem 1rem;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
}
.menu-call:hover { background: var(--color-accent-dark); }

@media (min-width: 1024px) {
  .nav-inline { display: flex; }
  .nav-toggle { display: none; }
  .site-menu { display: none !important; }
}

/* Logo, call button and hamburger have to share one row. Measured at 360px:
   122 + 156 + 40 plus gaps came to 334 against 312 of content, which pushed the
   hamburger off the right edge and made the menu unreachable. Two tiers. */
@media (max-width: 479px) {
  .site-header .header-call { padding-inline: 0.625rem; font-size: 0.8125rem; }
  .header-actions { gap: 0.5rem; }
  .nav-toggle { width: 40px; height: 40px; border-color: transparent; }
}
@media (max-width: 359px) {
  /* Below this the number genuinely cannot fit alongside the menu. Drop to the
     icon: it is still a one-tap call, the hero keeps a full-width call button,
     and the sticky bar carries the number on scroll. Reaching the menu at all
     matters more than showing the digits twice. */
  .header-call-text { display: none; }
  .site-header .header-call { padding-inline: 0.625rem; }
}

/* The header is sticky, so anything linked to by a fragment has to clear it or
   the target lands hidden behind the bar. Below 840px the header carries a
   second row for the nav, hence the larger offset there. */
:target, [id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Hero */
.hero { background: var(--color-bg-alt); padding-block: var(--s-5); }
@media (min-width: 900px) {
  .hero { padding-block: var(--s-6); }
  /* Two-column hero (copy + form card) only. Narrow heroes are single-column
     prose and must not be gridded, or their overline, H1 and standfirst get
     dealt into two columns. */
  .hero > .container:not(.container-narrow) { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-5); align-items: start; }
}
.hero h1 { margin-bottom: var(--s-2); }
.hero .subhead { font-size: 1.1875rem; color: var(--color-body); margin-bottom: var(--s-3); max-width: 54ch; }
.hero-copy .btn-row { margin-top: var(--s-3); }
/* Breathing room between the stacked hero copy and the form card on mobile. */
.hero-copy { margin-bottom: var(--s-4); }
@media (min-width: 900px) { .hero-copy { margin-bottom: 0; } }

.hero-bullets { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: 0.625rem; }
.hero-bullets li { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: 600; color: var(--color-ink); }
.hero-bullets svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--color-accent); }

/* Lead form */
.lead-form { background: var(--color-bg); padding: var(--s-3); border: 3px solid var(--color-primary); }
.lead-form h2 { font-size: 1.375rem; margin-bottom: 0.25rem; }
.lead-form .form-intro { font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--s-2); }
.lead-form .form-row { display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.lead-form label { display: block; font-weight: 700; font-size: 0.8125rem; margin-bottom: 0.3125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%;
  padding: 0.8125rem;
  border: 2px solid var(--color-line);
  background: #fff;
  font-size: 1rem;
  color: var(--color-ink);
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.lead-form textarea { min-height: 92px; resize: vertical; }
/* Pair the two shortest selects so a longer qualifying form stays compact. */
.lead-form .form-pair { display: grid; gap: var(--s-2); }
@media (min-width: 420px) { .lead-form .form-pair { grid-template-columns: 1fr 1fr; } }
.lead-form .req { color: var(--color-accent); font-weight: 800; }
.lead-form .form-note .req { margin-right: 0.15rem; }
.lead-form select:invalid, .lead-form select option[value=""] { color: var(--color-muted); }
.lead-form .btn { width: 100%; }
.lead-form .form-note { font-size: 0.8125rem; color: var(--color-muted); margin-top: var(--s-1); text-align: center; }
.lead-form ._gotcha { position: absolute; left: -9999px; opacity: 0; }
.form-success { padding: var(--s-3); border: 3px solid var(--color-success); background: #fff; }
.form-success h3 { color: var(--color-success); margin-bottom: var(--s-1); }

/* Google Maps embed. The supplied iframe was a fixed 400x300, which would sit
   as a small box on desktop and overflow narrow phones. Wrapper makes it fluid. */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}
@media (max-width: 600px) { .map-embed { aspect-ratio: 4 / 3; } }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Trust bar */
.trust-bar { background: var(--color-primary); color: #fff; padding-block: var(--s-3); }
.trust-bar ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3); text-align: center;
}
@media (min-width: 900px) { .trust-bar ul { grid-template-columns: repeat(5, 1fr); } }
.trust-bar li { font-weight: 700; font-size: 0.9375rem; line-height: 1.35; }
.trust-bar li svg { margin: 0 auto 0.5rem; color: var(--color-accent-bright); }

/* Services grid */
.services-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: block; padding: var(--s-3);
  background: var(--color-bg); border: 2px solid var(--color-line);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.service-card:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }

/* Image slots. These render only when the file exists at build time (see IMAGES.md),
   so the layout is correct with or without art and never shows a broken image. */
.card-img {
  /* Bleeds past the card's padding. Needs max-width:none because the global
     img reset caps every image at 100% of its container, which would clamp
     the calc() width back to the padded box and kill the bleed. */
  max-width: none;
  width: calc(100% + var(--s-3) * 2);
  margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}
.service-card:hover .card-img { border-bottom-color: var(--color-primary); }
/* Homepage hero: dark photo treatment.

   Dark text over a photo on a light background is the worst case in web design.
   Any overlay heavy enough to protect #333 body copy flattens the photo to a ghost,
   and the orange accent could not pass AA as text over the photo's near-black
   regions at ANY overlay (4.3:1 even at 0.96). Inverting solves both: white text
   over a navy overlay is far more forgiving, so the photo can show at roughly
   double the strength.

   Measured against the photo's LIGHTEST pixels under the text, rgb(255,255,255),
   which is the worst case for white type:
     white on 0.86 navy -> 8.8:1   AA pass (needs 4.5)
     white on 0.60 navy -> 4.6:1   still passes, and no text sits there anyway
   The checkmark icons use a light orange rather than the brand orange, which
   drops to 2.3:1 against navy and would fail even the 3:1 graphics threshold. */
.hero-image {
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgba(15,29,66,0.90), rgba(22,41,92,0.86)),
    url('/assets/img/drywall-contractor-shreveport-hero.webp');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .hero-image {
    background-image:
      linear-gradient(100deg,
        rgba(15,29,66,0.93) 0%,
        rgba(22,41,92,0.88) 45%,
        rgba(22,41,92,0.62) 100%),
      url('/assets/img/drywall-contractor-shreveport-hero.webp');
  }
}

/* The homepage H1 is a long keyword-led heading (94 chars). At the global
   --fs-h1 of 60px it ran to 8 lines, 538px tall, and pushed the call buttons
   below the fold on a 900px viewport. Scale it down for this heading only;
   every other H1 on the site keeps the display size. */
.hero-image h1 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.15; }

/* Invert the hero copy for the dark ground */
.hero-image .overline { color: #ffffff; opacity: 0.95; }
.hero-image h1 { color: #ffffff; }
.hero-image .subhead { color: rgba(255,255,255,0.92); }
.hero-image .hero-bullets li { color: #ffffff; }
.hero-image .hero-bullets svg { color: #ffb380; }
.hero-image .btn-secondary { color: #ffffff; border-color: #ffffff; background: transparent; }
.hero-image .btn-secondary:hover { background: #ffffff; color: var(--color-primary); }

/* Images inside the homepage topical-depth blocks */
.block-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--s-2);
  border: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}

.feature-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--s-3);
  border: 2px solid var(--color-line);
  background: var(--color-bg-alt);
}
.service-card h3 { margin-bottom: var(--s-1); color: var(--color-primary); }
.service-card p { font-size: 0.9375rem; color: var(--color-body); }
.service-card .arrow { display: inline-block; margin-top: var(--s-2); font-weight: 800; color: var(--color-accent); font-family: var(--font-heading); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Why Choose Us — 3 pillars */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { border-top: 4px solid var(--color-accent-bright); padding-top: var(--s-2); }
.pillar h3 { margin-bottom: var(--s-1); }
.pillar p { font-size: 0.9375rem; }

/* Deep content sections (topical depth blocks) */
.content-blocks { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 768px) { .content-blocks { grid-template-columns: repeat(2, 1fr); } }
.content-block h3 { margin-bottom: var(--s-1); color: var(--color-primary); }
.content-block p { font-size: 0.9375rem; }
.stat-line {
  display: block; margin-top: var(--s-1);
  font-size: 0.8125rem; font-weight: 700; color: var(--color-ink);
  border-left: 3px solid var(--color-accent-bright); padding-left: 0.75rem;
}

/* Mid-page form band */
.form-band { background: var(--color-primary); color: #fff; }
.form-band h2, .form-band h3 { color: #fff; }
/* Top-align rather than centre. The qualifying form is much taller than the copy
   beside it, and centring left a large empty band above the headline. */
.form-band .form-band-grid { display: grid; gap: var(--s-4); align-items: start; }
.form-band .band-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: var(--s-3);
  border: 2px solid rgba(255,255,255,0.25);
}
@media (min-width: 900px) { .form-band .form-band-grid { grid-template-columns: 1fr 1fr; } }
.form-band p { color: rgba(255,255,255,0.9); }
.form-band .lead-form { border-color: var(--color-accent-bright); }
.form-band .lead-form h2, .form-band .lead-form label { color: var(--color-ink); }
.form-band .lead-form .form-intro, .form-band .lead-form .form-note { color: var(--color-muted); }

/* Pricing table */
.price-table { width: 100%; border-collapse: collapse; margin-block: var(--s-2); font-size: 0.9375rem; }
.price-table th, .price-table td { text-align: left; padding: 0.875rem 0.75rem; border-bottom: 1px solid var(--color-line); }
.price-table th { font-family: var(--font-heading); font-weight: 800; background: var(--color-primary); color: #fff; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.price-table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.table-scroll { overflow-x: auto; }

/* Reviews / proof */
.reviews { background: var(--color-bg-alt); }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: #fff; padding: var(--s-3); border: 2px solid var(--color-line); }
.review-card .stars { color: #d97706; font-size: 1.125rem; margin-bottom: var(--s-1); letter-spacing: 2px; }
.review-card blockquote { font-style: italic; margin-bottom: var(--s-2); }
.review-card cite { font-style: normal; font-weight: 700; display: block; }
.review-card cite span { display: block; font-weight: 400; font-size: 0.875rem; color: var(--color-muted); }

/* Process steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); counter-reset: step; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.125rem;
}
.steps h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.steps p { font-size: 0.9375rem; }

/* FAQ */
.faq details { border-bottom: 2px solid var(--color-line); padding-block: var(--s-2); }
.faq summary {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem;
  cursor: pointer; list-style: none; position: relative; padding-right: 2.5rem;
  color: var(--color-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 0; top: -0.25rem;
  font-size: 1.75rem; line-height: 1; color: var(--color-accent);
}
.faq details[open] summary::after { content: '\2212'; }
.faq details > div, .faq details > p { margin-top: var(--s-2); }

/* Service area list */
.area-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
@media (min-width: 768px) { .area-list { grid-template-columns: repeat(4, 1fr); } }
.area-list li { border-left: 3px solid var(--color-accent-bright); padding-left: 0.75rem; font-weight: 600; font-size: 0.9375rem; }

/* Final CTA band */
.cta-band { background: var(--color-primary); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--s-2); }
.cta-band p { font-size: 1.125rem; margin-bottom: var(--s-3); margin-inline: auto; color: rgba(255,255,255,0.92); }
.cta-band a { color: #fff; }

/* Footer */
.site-footer { background: var(--color-ink); color: rgba(255,255,255,0.85); padding-block: var(--s-5) var(--s-3); font-size: 0.9375rem; }
.site-footer a { color: #fff; }
.site-footer .footer-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h4 { color: #fff; margin-bottom: var(--s-2); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer .footer-bottom {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  font-size: 0.8125rem; color: rgba(255,255,255,0.65);
}

/* Sticky mobile CTA */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform 0.25s ease;
}
.mobile-cta.visible { transform: translateY(0); }
.mobile-cta a {
  padding: 1.0625rem 1rem; text-align: center; text-decoration: none;
  font-weight: 800; text-transform: uppercase; font-size: 0.9375rem;
  font-family: var(--font-heading); letter-spacing: 0.03em;
}
.mobile-cta .call { background: var(--color-accent); color: #fff; }
.mobile-cta .quote { background: var(--color-primary); color: #fff; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* Desktop floating call button */
.fab-call {
  display: none;
  position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 90;
  align-items: center; gap: var(--s-1);
  padding: 1rem 1.5rem;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.fab-call:hover { background: var(--color-accent-dark); }
@media (min-width: 768px) { .fab-call.visible { display: inline-flex; } }

/* Breadcrumbs */
.breadcrumbs { padding-block: var(--s-2); font-size: 0.875rem; color: var(--color-muted); border-bottom: 1px solid var(--color-line); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-ink); }
.breadcrumbs span[aria-current] { color: var(--color-ink); font-weight: 600; }

/* Quick answer callout. Sits above the first H2 so the direct answer is the
   first thing a reader, a featured snippet or an AI summariser encounters. */
.quick-answer {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
}
.quick-answer .quick-answer-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--s-1);
}
.quick-answer p:last-child { margin: 0; font-size: 1.0625rem; }

/* Prose helpers for long-form body copy */
.prose p + p { margin-top: var(--s-2); }
.prose h3 { margin-top: var(--s-3); margin-bottom: var(--s-1); }
.prose ul, .prose ol { margin: var(--s-2) 0; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--color-accent); font-weight: 700; }

/* Utility */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }
.mb-3 { margin-bottom: var(--s-3); }
.bg-alt { background: var(--color-bg-alt); }

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

/* Services hub grouping. Eleven flat cards read as a list rather than a
   structure, so they are bucketed by job type. */
.service-group-heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-top: var(--s-4);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent-bright);
}
.service-group-heading:first-of-type { margin-top: var(--s-2); }
.service-group-blurb { color: var(--color-muted, #55606e); margin-bottom: var(--s-3); }