/* ==========================================================================
   Georgia's Best Property Masters . css/style.css
   The single stylesheet for the whole site. Every page links exactly this
   file at /css/style.css. Never inline a duplicate <style> block.

   Contents
   01 Tokens
   02 Reset and base
   03 Layout primitives (.wrap, .section, .skip-link, focus ring)
   04 Typography helpers (.eyebrow, .h2, .lead, .prose)
   05 Buttons
   06 Flag stripe
   07 Site header, nav, mobile drawer
   08 Hero
   09 Trust row
   10 Ribbon quote bar
   11 Cards and service grid
   12 Stat band
   13 Process steps
   14 Area pills
   15 Reviews carousel
   16 Gallery grid
   17 Forms
   18 Breadcrumb
   19 Sidebar cards
   20 FAQ accordion
   21 CTA band
   22 Footer
   23 404
   24 Utilities
   25 Reduced motion
   26 Print
   ========================================================================== */

/* -- 01 Tokens ----------------------------------------------------------- */
:root {
  /* Brand palette. Approved by the client. Do not add hues. */
  --red: #b3242b;
  --red-dk: #8e1c22;
  --red-lt: #c9343b;
  --navy: #0e2a55;
  --navy-dk: #0a1f3f;
  --navy-lt: #1b3d71;
  --cream: #f7f4ed;
  --cream-dk: #efeae0;
  --gold: #c8a24a;
  --gold-lt: #dcbb6b;
  --ink: #11151c;
  --white: #ffffff;

  /* Derived text colors. All verified at 4.5:1 or better on their ground. */
  --body: #3c4655;          /* 8.7:1 on cream */
  --muted: #55606f;         /* 5.8:1 on cream */
  --on-navy: #ffffff;       /* 16.4:1 on navy-dk */
  --on-navy-mute: #c3ccda;  /* 10.0:1 on navy-dk */
  --line: rgba(14, 42, 85, 0.14);
  --line-strong: rgba(14, 42, 85, 0.26);
  --line-invert: rgba(255, 255, 255, 0.16);
  --danger: #a8161d;        /* form errors, 6.9:1 on white */

  /* Spacing scale. 4px base. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;

  /* Fluid type scale. */
  --fs-h1: clamp(2.25rem, 1.45rem + 3.5vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --fs-h3: clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.62;
  --ls-caps: 0.16em;

  /* Radii. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Shadows. */
  --sh-1: 0 1px 2px rgba(10, 31, 63, 0.06), 0 2px 8px rgba(10, 31, 63, 0.05);
  --sh-2: 0 6px 18px rgba(10, 31, 63, 0.09);
  --sh-3: 0 18px 44px rgba(10, 31, 63, 0.16);
  --sh-focus: 0 0 0 3px var(--cream), 0 0 0 6px var(--red);
  --sh-focus-dark: 0 0 0 3px var(--navy-dk), 0 0 0 6px var(--gold);

  /* Motion. */
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 380ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Layout. */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --header-h: 76px;
  --stripe-h: 6px;
  --tap: 44px;

  /* Fonts. Both are on every machine. Zero network cost, zero CLS. */
  --font-head: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* -- 02 Reset and base --------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--stripe-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); }

p { max-width: 68ch; }

a { color: var(--red-dk); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--red); }

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

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

strong, b { font-weight: 700; color: var(--navy); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--navy-dk); }

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

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--white { background: var(--white); border-block: 1px solid var(--line); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy h2,
.section--navy h3 { color: var(--white); }
.section--navy p { color: var(--on-navy-mute); }

.section__head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head p { margin-inline: auto; }

/* Skip link. First focusable element on every page. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 200;
  background: var(--gold);
  color: var(--navy-dk);
  font-weight: 700;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; color: var(--navy-dk); }

/* One focus treatment everywhere. Never remove the ring.
   outline-offset draws the ring OUTSIDE the control, so the colour has to
   clear 3:1 against the ground the control sits on, not against the control.
   --focus-ring is therefore set on the containers that paint a ground and
   inherits down. A light card nested inside a navy section sets it back on
   itself, which the old descendant selectors could not do: they reached
   every level and painted gold rings on white cards at 2.41:1. */
:focus-visible {
  outline: 3px solid var(--focus-ring, var(--red));
  outline-offset: 3px;
  border-radius: 2px;
}
/* Light grounds nested inside dark ones. Red on white is 6.55:1. */
.card,
.side-card,
.faq__item,
.review,
.empty-note,
.notice { --focus-ring: var(--red); }
/* Navy grounds. Red is 2.16:1 there, gold is 5.89:1 on navy and 6.81:1 on
   navy-dk. Listed after the light grounds so the --navy card modifiers win. */
.section--navy,
.site-header,
.site-footer,
.hero,
.page-hero,
.card--navy,
.side-card--navy { --focus-ring: var(--gold); }
/* Red grounds. Gold on red is 2.72:1, white on red is 6.55:1. */
.cta-band,
.ribbon { --focus-ring: var(--white); }


/* -- 04 Typography helpers ---------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-3);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--light { color: var(--gold-lt); }

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 40rem;
}
.lead--center { margin-inline: auto; text-align: center; }
.section--navy .lead { color: var(--on-navy-mute); }

.gold { color: var(--gold); }
.serif { font-family: var(--font-head); }

.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose ul,
.prose ol { margin-left: var(--sp-2); }
.prose li { max-width: 66ch; }

/* -- 05 Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--primary { background: var(--red); border-color: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dk); border-color: var(--red-dk); color: var(--white); box-shadow: var(--sh-2); }

.btn--ghost { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--navy-dk); }

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

.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.btn--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--navy-dk); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--navy-dk); }
.btn--gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--navy-dk); }

.btn--block { width: 100%; }
.btn--lg { padding: var(--sp-4) var(--sp-7); font-size: var(--fs-body); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.btn-row--center { justify-content: center; }

/* -- 06 Flag stripe ------------------------------------------------------ */
/* The one piece of flag chrome on the page. The logo carries the rest. */
.flag-stripe {
  height: var(--stripe-h);
  background: repeating-linear-gradient(
    90deg,
    var(--red) 0 40px,
    var(--white) 40px 80px,
    var(--navy) 80px 120px
  );
}

/* -- 07 Site header ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-dk);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* The drawer is a child of the header, so it lives in the header's stacking
   context. Everything in the header bar has to outrank it or the drawer
   paints over the logo and the close button. */
.brand,
.nav-toggle,
.header-call { position: relative; z-index: 2; }

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--white); }
.brand:hover { color: var(--white); }
.brand img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.brand__text { display: block; line-height: 1.05; }
.brand__name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand__sub {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav__list { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* "page" on the current document, "true" on the parent-section link. Both
   take the same visual state. */
.nav__link[aria-current] { color: var(--gold); border-bottom-color: var(--gold); }

/* The drawer repeats the estimate CTA. On desktop the header already carries
   the phone button, so a second CTA there is noise. */
.nav__cta { display: none; }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  background: var(--red);
  color: var(--white);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.header-call:hover { background: var(--red-dk); color: var(--white); }
.header-call svg { width: 1.05em; height: 1.05em; flex: none; }

/* Hamburger. Hidden on desktop, hidden entirely when JS is off. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  background: transparent;
  border: 1px solid var(--line-invert);
  border-radius: var(--r-sm);
  color: var(--white);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Mobile drawer. */
/* visibility flips instantly when opening and waits out the slide when
   closing. Transitioning it normally leaves the drawer non-focusable in the
   frame the class is added, which silently breaks the focus trap. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(10, 31, 63, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear 0s;
}

@media (max-width: 899px) {
  /* Brand left, phone and hamburger grouped right. */
  .js .nav-toggle { display: inline-flex; order: 5; }
  .js .header-call { margin-left: auto; }
  .js .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(22rem, 88vw);
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + var(--sp-4)) var(--sp-5) var(--sp-6);
    background: var(--navy-dk);
    border-left: 1px solid var(--line-invert);
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .js .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--t-med) var(--ease), visibility 0s linear 0s;
  }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav__link {
    display: flex;
    min-height: 52px;
    padding-block: var(--sp-3);
    font-size: 1rem;
    border-bottom: 1px solid var(--line-invert);
  }
  .js .nav__link:hover,
  .js .nav__link[aria-current] { border-bottom-color: var(--line-invert); }
  .js .nav__cta { display: inline-flex; margin-top: var(--sp-5); }
  .brand__text { display: none; }
  /* No JS: the nav stays a plain visible link row under the logo. */
  .no-js .site-header__inner { flex-wrap: wrap; }
  .no-js .nav { width: 100%; order: 3; overflow-x: auto; padding-bottom: var(--sp-2); }
}

@media (max-width: 560px) {
  .header-call span { display: none; }
  .header-call { padding-inline: var(--sp-4); }
}

/* -- 08 Hero ------------------------------------------------------------- */
/* No photograph. The client has not supplied one and nothing may be
   hotlinked, so the ground is a CSS mowing-stripe field in brand navy. */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--white);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(27, 61, 113, 0.85) 0%, rgba(10, 31, 63, 0) 62%),
    repeating-linear-gradient(
      104deg,
      rgba(255, 255, 255, 0.035) 0 44px,
      rgba(255, 255, 255, 0) 44px 88px
    ),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-dk) 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0 33%, var(--gold) 33% 66%, var(--navy-lt) 66% 100%);
}
.hero__inner {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}
.hero__logo {
  width: 190px;
  height: auto;
  margin: 0 auto var(--sp-5);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
}
.hero h1 {
  color: var(--white);
  max-width: 20ch;
  margin-inline: auto;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.38);
}
.hero h1 .hedges {
  display: block;
  color: var(--gold);
  font-style: italic;
}
.hero__slogan {
  margin: var(--sp-4) auto 0;
  max-width: 34ch;
  font-family: var(--font-head);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--gold);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.hero__sub {
  max-width: 44rem;
  margin: var(--sp-5) auto 0;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.92);
}
.hero .btn-row { margin-top: var(--sp-6); }

/* -- 09 Trust row -------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
  padding-left: 0;
}
.trust li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }
.trust svg { width: 26px; height: 26px; color: var(--gold); }
.trust span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.35;
}

/* -- 10 Ribbon quote bar ------------------------------------------------- */
.ribbon {
  background: var(--red);
  color: var(--white);
  text-align: center;
  padding: var(--sp-4) var(--gutter);
  border-block: 3px solid var(--red-dk);
}
.ribbon p {
  max-width: 60rem;
  margin-inline: auto;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.25rem);
  line-height: 1.4;
  color: var(--white);
}
/* Cream, not gold-lt. This line is 13px, so it needs 4.5:1: gold-lt on red is
   3.55:1 and gold is 2.72:1, cream is 5.97:1. Gold on red is for display sizes
   only, and nothing on this bar is one. */
.ribbon cite { display: block; margin-top: var(--sp-2); font-style: normal; font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--cream); }

/* -- 11 Cards and service grid ------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--sh-1);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}
.card h3 { color: var(--navy); margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-sm); color: var(--muted); }

a.card { text-decoration: none; color: inherit; }
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--line-strong);
  color: inherit;
}
a.card:hover .card__more { color: var(--red-dk); gap: var(--sp-3); }

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--navy);
  color: var(--white);
  flex: none;
}
.card__icon svg { width: 27px; height: 27px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card__icon--red { background: var(--red); }
.card__icon--gold { background: var(--gold); color: var(--navy-dk); }

.card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--red);
  transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.card__more svg { width: 1em; height: 1em; }

.card--flush { background: transparent; border: 0; box-shadow: none; padding: 0; }
.card--navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.card--navy h3 { color: var(--white); }
.card--navy p { color: var(--on-navy-mute); }

/* -- 12 Stat band -------------------------------------------------------- */
/* Claim tiles. Text only. The client has no verified metrics, so this
   component must never be filled with a number he has not stated. */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  list-style: none;
  padding-left: 0;
}
.stat { text-align: center; margin: 0; }
.stat__key {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: 1.15;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}
.stat__label { display: block; font-size: var(--fs-sm); color: var(--on-navy-mute); }

/* -- 13 Process steps ---------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); list-style: none; padding-left: 0; counter-reset: step; }
.step { margin: 0; text-align: center; }
.step__num {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--gold);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.625rem;
  line-height: 1;
}
.step h3 { margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--muted); max-width: 22rem; margin-inline: auto; }

/* -- 14 Area pills ------------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; list-style: none; padding-left: 0; }
.pills li { margin: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-5);
  border: 2px solid var(--red);
  border-radius: var(--r-pill);
  color: var(--red-dk);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  background: var(--white);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a.pill:hover { background: var(--red); color: var(--white); }
.pill--static { border-color: var(--line-strong); color: var(--navy); background: transparent; }

/* -- 15 Reviews carousel ------------------------------------------------- */
/* Data driven. Hidden until js/main.js confirms reviews.json has entries.
   Never hard-code a review into the markup. */
[data-async-section] { display: none; }
[data-async-section].is-populated { display: block; }

.carousel { position: relative; max-width: 56rem; margin-inline: auto; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform var(--t-slow) var(--ease); }
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: var(--sp-2);
}
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--sh-1);
  height: 100%;
}
.review__stars { display: flex; gap: 2px; margin-bottom: var(--sp-4); color: var(--gold); }
.review__stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.review__body { font-family: var(--font-head); font-size: var(--fs-lead); line-height: 1.5; color: var(--navy); max-width: none; }
.review__meta { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.review__name { font-weight: 700; color: var(--navy); }
.review__where { color: var(--muted); }

.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.carousel__btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.carousel__btn:hover { background: var(--navy); color: var(--white); }
.carousel__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.carousel__dots { display: flex; gap: var(--sp-2); }
.carousel__dot {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.carousel__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.carousel__dot[aria-current="true"]::before { background: var(--red); transform: scale(1.35); }

/* -- 16 Gallery grid ----------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-4);
}
.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-dk);
  border: 1px solid var(--line);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery__item figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--white);
}

/* Visible placeholder for the demo build while the client has no photos. */
.empty-note {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  color: var(--muted);
}
.empty-note strong { display: block; margin-bottom: var(--sp-2); color: var(--navy); }

/* -- 17 Forms ------------------------------------------------------------ */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > label { font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.req { color: var(--red); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2A55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 18px;
  padding-right: var(--sp-8);
}
.input:hover,
.textarea:hover,
.select:hover { border-color: var(--navy); }
.input:focus,
.textarea:focus,
.select:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--navy); }

.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--danger); border-width: 2px; background: #fdf5f5; }
.field__error { display: none; font-size: var(--fs-sm); font-weight: 600; color: var(--danger); }
.field--error .field__error { display: flex; align-items: center; gap: var(--sp-2); }

.form__status { display: none; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-weight: 600; }
.form__status.is-visible { display: block; }
.form__status--error { background: #fdf1f1; border: 1px solid var(--danger); color: var(--danger); }
.form__status--ok { background: #f0f6ef; border: 1px solid #2f6d33; color: #235627; }

/* No-JavaScript failure notices on /contact/.
   functions/api/submit.js answers a scriptless POST it could not deliver with
   a 303 to /contact/#not-sent, #check-fields or #too-many. :target reveals the
   matching one with no script, which matters because the only visitor who can
   ever reach these has no script. Hidden by default, so a bookmark of /contact/
   shows nothing. Never route a failure to /thanks/: that page says the request
   is in, and it must only ever be true. */
.notice { display: none; }
.notice:target {
  display: block;
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: #fdf1f1;
  border: 1px solid var(--danger);
  border-left: 4px solid var(--danger);
  border-radius: var(--r-md);
  color: var(--ink);
}
.notice h3 { color: var(--danger); font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.notice p { margin: 0; }
.notice p + p { margin-top: var(--sp-3); }
.notice a { color: var(--danger); font-weight: 700; }

/* Honeypot. Off-screen rather than display:none so bots still see it. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -- 18 Breadcrumb ------------------------------------------------------- */
.breadcrumb { font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; opacity: 0.55; }
.breadcrumb a { position: relative; color: inherit; text-decoration: none; opacity: 0.85; }
/* Breadcrumb type is 13px, so the link box is 21px tall. This grows the touch
   target to 45px without moving a pixel of layout. Nothing sits directly above
   or below the crumb row, so the overhang cannot steal a tap from anything. */
.breadcrumb a::after { content: ""; position: absolute; inset: -12px -6px; }
.breadcrumb a:hover { color: var(--gold); opacity: 1; }
.breadcrumb [aria-current="page"] { opacity: 0.7; }

/* Inner page hero. Same ground as the home hero, shorter. */
.page-hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dk) 100%);
  color: var(--white);
  border-bottom: 3px solid var(--red);
}
.page-hero__inner { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.page-hero h1 { color: var(--white); margin-top: var(--sp-4); max-width: 22ch; }
.page-hero h1 em { color: var(--gold); font-style: normal; }
.page-hero p { margin-top: var(--sp-4); font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.92); }
.page-hero .btn-row { margin-top: var(--sp-6); }

/* -- 19 Sidebar cards ---------------------------------------------------- */
.layout-aside { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.aside { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); }
.side-card h2,
.side-card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.side-card--navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.side-card--navy h2,
.side-card--navy h3 { color: var(--white); }
.side-card--navy p { color: var(--on-navy-mute); font-size: var(--fs-sm); }
.side-card__links { list-style: none; padding: 0; margin: 0; }
.side-card__links li { margin: 0; }
.side-card__links a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.side-card__links li:last-child a { border-bottom: 0; }
.side-card__links a:hover { color: var(--red); }
/* The current service is listed but not linked, so the sidebar never sends a
   visitor to the page they are already on. Same box as the links around it. */
.side-card__links [aria-current="page"] {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.side-card__links li:last-child [aria-current="page"] { border-bottom: 0; }
.phone-big {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-block: var(--sp-1) var(--sp-4);
  font-family: var(--font-head);
  font-size: 1.625rem;
  color: var(--gold);
  text-decoration: none;
}
.phone-big:hover { color: var(--gold-lt); }

/* -- 20 FAQ accordion ---------------------------------------------------- */
/* <details>/<summary>. Works with JS off. main.js only adds single-open
   behaviour and the chevron rotation class. */
.faq { display: grid; gap: var(--sp-3); max-width: var(--wrap-narrow); margin-inline: auto; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--navy);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); }
.faq__a p { font-size: var(--fs-sm); color: var(--muted); }

/* -- 21 CTA band --------------------------------------------------------- */
.cta-band {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dk) 100%);
  color: var(--white);
  text-align: center;
  border-block: 4px solid var(--navy-dk);
}
.cta-band__inner { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.cta-band h2 { color: var(--white); }
.cta-band p { margin: var(--sp-4) auto 0; max-width: 38rem; color: rgba(255, 255, 255, 0.94); font-size: var(--fs-lead); }
.cta-band .btn-row { margin-top: var(--sp-6); }
.cta-band__note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85); }

/* -- 22 Footer ----------------------------------------------------------- */
.site-footer { background: var(--navy-dk); color: var(--on-navy-mute); font-size: var(--fs-sm); }
.site-footer__inner { padding-block: var(--sp-8) var(--sp-5); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--sp-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
/* min-height is the tap-target floor, not decoration. Do not shrink it. */
.site-footer a { color: var(--on-navy-mute); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer__logo { width: 150px; height: auto; margin-bottom: var(--sp-4); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); }
.site-footer__tagline {
  font-family: var(--font-head);
  font-style: italic;
  color: var(--on-navy-mute);
  max-width: 26rem;
  margin-bottom: var(--sp-4);
}
/* The services column carries all 12 links, so it spans two tracks and
   flows in two text columns. */
.site-footer__services { grid-column: span 2; }
.site-footer__services ul { columns: 2; column-gap: var(--sp-5); }
.site-footer__services li { break-inside: avoid; }
.site-footer__contact address { font-style: normal; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-invert);
  font-size: var(--fs-xs);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* -- 23 404 -------------------------------------------------------------- */
.notfound { display: grid; place-items: center; text-align: center; padding-block: clamp(3.5rem, 10vw, 7rem); }
.notfound__code { font-family: var(--font-head); font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--gold); }

/* -- 24 Utilities -------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.print-only { display: none; }

/* -- Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .layout-aside { grid-template-columns: 1fr; }
  .aside { position: static; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__services { grid-column: span 2; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .form__row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__services { grid-column: span 1; }
  .btn-row .btn { width: 100%; }
  .hero__logo { width: 150px; }
  .brand img { height: 44px; }
}

/* -- 25 Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  a.card:hover,
  .btn:active { transform: none !important; }
  .carousel__track { transition: none !important; }
  .carousel__dot[aria-current="true"]::before { transform: none; }
}

/* -- 26 Print ------------------------------------------------------------ */
@media print {
  :root { --header-h: 0px; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header,
  .nav,
  .nav-toggle,
  .nav-scrim,
  .flag-stripe,
  .skip-link,
  .carousel__nav,
  .cta-band .btn-row,
  .btn-row { display: none !important; }
  .print-only { display: block; }
  .hero,
  .page-hero,
  .cta-band,
  .ribbon,
  .section--navy,
  .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1,
  .page-hero h1,
  .cta-band h2,
  .section--navy h2,
  .section--navy h3,
  .ribbon p,
  .site-footer h2,
  .site-footer a,
  .stat__key,
  .stat__label,
  .trust span { color: #000 !important; }
  /* The phone number is the point of the page. Keep it on paper. */
  a[href^="tel:"],
  a[href^="mailto:"] { color: #000 !important; font-weight: 700; text-decoration: none; }
  a[href^="tel:"]::after { content: ""; }
  .card,
  .side-card,
  .faq__item { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .faq__item .faq__a { display: block !important; }
  img { max-width: 2.5in; }
}