/* Fraunces, self-hosted. Fetched from Google it cost 850-915ms cold, most
   of it a DNS lookup and TLS handshake to a second origin before a byte of
   font moved. Same bytes, one fewer origin, and the browser finds them in a
   stylesheet it is already downloading. Latin subset only; Georgia in the
   stack covers anything outside it. Roman is variable and spans 500-600, so
   the two weights share one file. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-italic.woff2") format("woff2");
}
/* Jackson's Stonemasonry — restrained, stone-toned design system */

:root {
  --ink: #262119;
  --ink-soft: #4d4536;
  --paper: #faf8f3;
  --paper-warm: #f4efe4;
  --stone-line: #ddd3bf;
  --stone-mid: #b9a888;
  --bronze: #6f5426;
  --bronze-dark: #57411d;
  --moss: #3f4a33;
  --white: #ffffff;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 72rem;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(38, 33, 25, 0.06), 0 8px 24px rgba(38, 33, 25, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.6em; }
h3 { font-size: 1.25rem; margin-top: 1.4em; }

p { margin: 0 0 1.1em; }

a { color: var(--bronze); text-underline-offset: 2px; }
a:hover { color: var(--bronze-dark); }

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

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--white); padding: 0.5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* An email address is one unbreakable token. At larger font sizes
   jackson_stonemasonry@outlook.com is wider than a phone screen and takes the
   whole page sideways with it, so let it break mid-address rather than push. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  background: var(--bronze); color: var(--white);
  box-shadow: 0 2px 10px rgba(38, 33, 25, 0.22);
}
.btn--primary:hover {
  background: var(--bronze-dark); color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(38, 33, 25, 0.28);
}
.btn--outline { border-color: var(--bronze); color: var(--bronze); background: transparent; }
.btn--outline:hover { background: var(--bronze); color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--paper-warm); color: var(--ink); }
.btn--ghost { border-color: rgba(255,255,255,0.55); color: var(--white); background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn--block { display: block; text-align: center; }

/* Secondary buttons sitting on a photograph.
   Neither variant survives an arbitrary image: measured against the ground
   colours in these heroes, the bronze outline manages 2.31:1 on sunlit grass
   and 2.26:1 on a dark pixel, and the white ghost 1.00:1 on a bright one — it
   vanishes completely. The hero scrim does not save them either, because it is
   weighted to the headline at the top and has faded by the time it reaches the
   buttons.
   So they get their own backing rather than relying on what is behind them.
   75% of --ink puts white text at 7.06:1 even against a pure white pixel,
   which is AAA regardless of the photograph. Only heroes with an image are
   targeted; the same buttons on paper keep their bronze. */
.hero .btn--ghost, .hero .btn--outline,
.page-hero--img .btn--ghost, .page-hero--img .btn--outline {
  background: rgba(38, 33, 25, 0.75);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hero .btn--ghost:hover, .hero .btn--outline:hover,
.page-hero--img .btn--ghost:hover, .page-hero--img .btn--outline:hover {
  background: rgba(38, 33, 25, 0.92);
  border-color: var(--white);
  color: var(--white);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--stone-line);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.5rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand__mark {
  display: block;
  width: 3rem; height: 3rem;
  background: var(--ink);
  border-radius: 4px;
  padding: 4px;
  object-fit: contain;
  flex: none;
}
.brand__name { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.1; }
.brand__strap { display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 0.97rem;
  padding: 0.35rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--bronze); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.header-phone { font-weight: 700; text-decoration: none; color: var(--ink); white-space: nowrap; }
.header-phone:hover { color: var(--bronze); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 0.5rem; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 60rem) {
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--stone-line);
    box-shadow: var(--shadow);
    padding: 0.75rem 1.25rem 1.25rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 0.7rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--paper-warm); }
  .nav-toggle { display: block; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .header-phone { display: none; }
}
@media (max-width: 40rem) {
  /* Below this the header was wider than the screen: on a 360px phone (a
     Galaxy S23) the actions ran 20px past the right edge, taking the menu
     button with them, and Android font scaling made it far worse. Everything
     here buys width back so the row stays on one line. */
  .brand__strap { display: none; }
  .site-header__inner { gap: 0.75rem; padding-inline: 1rem; }
  .brand { min-width: 0; gap: 0.5rem; }
  .brand__text { min-width: 0; }
  .brand__mark { width: 2.5rem; height: 2.5rem; }
  /* Capped against the viewport, not the root size, so Android font scaling
     cannot push the wordmark past the screen edge. Body copy is untouched and
     still scales with the user's setting — this only holds the header row. */
  .brand__name { font-size: min(1rem, 4.2vw); }
  .site-header__actions { gap: 0.5rem; flex: none; }
  .site-header__actions .btn { padding: 0.6rem 0.9rem; font-size: min(0.9rem, 3.8vw); white-space: nowrap; }
}

/* ---------- Heroes ---------- */
/* The hero photograph stays a CSS background on purpose. Converting it to a
   <picture> element — the usual fix for Lighthouse’s "LCP request
   discovery" warning — was measured at 79-86 against 98-99, with first
   contentful paint at 3.2s against 1.1s, with and without fetchpriority.
   Found late means the render-blocking stylesheet gets the bandwidth first
   and the page paints sooner. Do not "fix" this without measuring. */
/* hero-wall.jpg (landscape, 1920x1080) and hero-wall-mobile.jpg (portrait,
   1080x1440): swap these files to change every hero background on the site —
   no CSS edits needed. The layered scrim (left for the headline, bottom for
   depth) keeps text readable over a bright photo. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 76vh, 46rem);
  background:
    linear-gradient(rgba(24, 20, 13, 0) 55%, rgba(24, 20, 13, 0.6) 100%),
    linear-gradient(102deg, rgba(24, 20, 13, 0.8) 18%, rgba(24, 20, 13, 0.42) 58%, rgba(24, 20, 13, 0.12) 92%),
    url("../img/hero-wall-mobile.jpg") center / cover no-repeat, var(--ink);
  color: var(--white);
  padding: clamp(4.5rem, 10vw, 7rem) 0;
}
@media (min-width: 44.0625rem) {
  .hero {
    background:
      linear-gradient(rgba(24, 20, 13, 0) 55%, rgba(24, 20, 13, 0.6) 100%),
      linear-gradient(102deg, rgba(24, 20, 13, 0.8) 18%, rgba(24, 20, 13, 0.42) 58%, rgba(24, 20, 13, 0.12) 92%),
      url("../img/hero-wall.jpg") center / cover no-repeat, var(--ink);
  }
}
.hero__content { width: 100%; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.hero-em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: #e6d7ae;
}
.hero-credit {
  position: absolute;
  right: 1.25rem;
  bottom: 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 250, 238, 0.85);
  text-decoration: none;
  background: rgba(24, 20, 13, 0.45);
  border: 1px solid rgba(255, 250, 238, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  backdrop-filter: blur(3px);
}
.hero-credit:hover { color: var(--white); border-color: rgba(255, 250, 238, 0.55); background: rgba(24, 20, 13, 0.6); }
@media (max-width: 44rem) { .hero-credit { display: none; } }

/* Hero entrance — a quiet, staggered rise */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero .hero-actions {
    animation: hero-rise 0.7s cubic-bezier(0.22, 0.7, 0.3, 1) both;
  }
  .hero h1 { animation-delay: 0.08s; }
  .hero .lede { animation-delay: 0.16s; }
  .hero .hero-actions { animation-delay: 0.24s; }
  @keyframes hero-rise {
    from { transform: translateY(18px); }
    to { transform: none; }
  }
}
.hero h1 { color: var(--white); max-width: 21ch; }
.hero .lede { color: rgba(255,255,255,0.88); }
.hero .eyebrow { color: var(--stone-line); }

.page-hero {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--stone-line);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.page-hero--img {
  background:
    linear-gradient(102deg, rgba(24, 20, 13, 0.85) 22%, rgba(24, 20, 13, 0.48) 65%, rgba(24, 20, 13, 0.28) 95%),
    url("../img/hero-wall-mobile.jpg") center / cover no-repeat, var(--ink);
  padding: clamp(3rem, 7vw, 5rem) 0;
  color: var(--white);
  border-bottom: 0;
}
@media (min-width: 44.0625rem) {
  .page-hero--img {
    background:
      linear-gradient(102deg, rgba(24, 20, 13, 0.85) 22%, rgba(24, 20, 13, 0.48) 65%, rgba(24, 20, 13, 0.28) 95%),
      url("../img/hero-wall.jpg") center / cover no-repeat, var(--ink);
  }
}
@media (max-width: 44rem) {
  .hero, .page-hero--img {
    background:
      linear-gradient(rgba(28, 24, 17, 0.7), rgba(28, 24, 17, 0.52)),
      url("../img/hero-wall-mobile.jpg") center / cover no-repeat, var(--ink);
  }
}
.page-hero--img h1 { color: var(--white); }
.page-hero--img .lede { color: rgba(255,255,255,0.88); }
.page-hero--img .eyebrow { color: var(--stone-line); }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700;
  color: var(--bronze); margin: 0 0 0.75rem;
}
.lede { font-size: 1.2rem; max-width: 52ch; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.section--alt { background: var(--paper-warm); border-top: 1px solid var(--stone-line); border-bottom: 1px solid var(--stone-line); }
.section > .wrap > h2:first-child, .section h2.section-title { margin-top: 0; }
.section-intro { max-width: 60ch; color: var(--ink-soft); margin-bottom: 2rem; }

/* ---------- Cards ---------- */
.card-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  margin-top: 1.75rem;
}
.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.card__img { overflow: hidden; display: block; }
.card__img img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.card:hover .card__img img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .card:hover .card__img img { transform: none; }
}
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.card__tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--bronze); }
.card__title { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.card__blurb { font-size: 0.95rem; color: var(--ink-soft); }
.card__more { margin-top: auto; padding-top: 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--bronze); }

/* ---------- Why us ---------- */
.tick-grid {
  display: grid; gap: 1rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  list-style: none; padding: 0; margin: 1.75rem 0 0;
}
.tick-grid li { padding-left: 1.9rem; position: relative; }
.tick-grid li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--moss); font-weight: 700;
}
.tick-grid strong { display: block; }

/* ---------- Article layout ---------- */
.article-grid {
  display: grid; gap: 3rem;
  grid-template-columns: minmax(0, 2.2fr) minmax(min(15rem, 100%), 1fr);
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
@media (max-width: 56rem) { .article-grid { grid-template-columns: 1fr; gap: 2rem; } }

.article-body { max-width: 68ch; }
.article-body--narrow { max-width: 68ch; padding-top: clamp(2.25rem, 5vw, 3.5rem); padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.article-body > h2:first-child { margin-top: 0; }
.article-body ul { padding-left: 1.2rem; }
.article-body li { margin-bottom: 0.4em; }

.article-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.aside-card {
  background: var(--white); border: 1px solid var(--stone-line);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
}
.aside-card--cta { background: var(--paper-warm); }
.aside-card__title { font-size: 1.05rem; margin: 0 0 0.75rem; }
.aside-card p { font-size: 0.95rem; color: var(--ink-soft); }
.aside-links { list-style: none; margin: 0; padding: 0; }
.aside-links li { border-bottom: 1px solid var(--paper-warm); }
.aside-links li:last-child { border-bottom: 0; }
.aside-links a { display: block; padding: 0.45rem 0; text-decoration: none; font-size: 0.97rem; }
.aside-links a[aria-current="page"] { font-weight: 700; color: var(--ink); }
.aside-links--inline { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.aside-links--inline li { border: 0; }

/* ---------- Project pages ---------- */
.project-facts {
  display: grid; gap: 0.9rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  background: var(--paper-warm); border: 1px solid var(--stone-line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
  margin: 0 0 2rem;
}
.project-facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-soft); }
.project-facts dd { margin: 0.15rem 0 0; font-weight: 600; }

.figure-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); margin: 1.5rem 0; }
figure { margin: 1.5rem 0; }
figure img, figure video { border-radius: var(--radius); border: 1px solid var(--stone-line); width: 100%; }
figcaption { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* ---------- Reviews ---------- */
.review-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); margin-top: 1.75rem; }
.review {
  background: var(--white); border: 1px solid var(--stone-line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; margin: 0;
}
.review__stars { color: #b7860b; letter-spacing: 0.1em; font-size: 0.95rem; }
.review blockquote, .review__quote { margin: 0.75rem 0; font-style: italic; color: var(--ink-soft); }
.review__by { font-weight: 600; font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 68ch; margin-top: 1.5rem; }
.faq-list details {
  border: 1px solid var(--stone-line); border-radius: var(--radius);
  background: var(--white); margin-bottom: 0.8rem; padding: 0 1.25rem;
}
.faq-list summary {
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
  padding: 1rem 0; cursor: pointer; list-style-position: outside;
}
.faq-list details[open] summary { border-bottom: 1px solid var(--paper-warm); margin-bottom: 0.75rem; }
.faq-list details p { padding-bottom: 1rem; color: var(--ink-soft); }

/* ---------- Quote form ---------- */
.quote-form { max-width: 44rem; }
/* A fieldset defaults to min-inline-size: min-content, so it refuses to
   shrink below its widest child and runs past a narrow viewport whatever
   width you give it. Same trap as min-width: 0 on a grid child. */
fieldset { min-inline-size: 0; }
.quote-form fieldset {
  border: 1px solid var(--stone-line); border-radius: var(--radius);
  background: var(--white); padding: 1.4rem 1.5rem; margin: 0 0 1.5rem;
}
.quote-form legend {
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem; padding: 0 0.5rem;
}
.choice-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
.choice {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1.5px solid var(--stone-line); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; cursor: pointer; background: var(--paper);
}
.choice:hover { border-color: var(--stone-mid); }
.choice:has(input:checked) { border-color: var(--bronze); background: var(--paper-warm); }
.choice input { accent-color: var(--bronze); }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field .hint { font-size: 0.88rem; color: var(--ink-soft); margin: -0.2rem 0 0.4rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--stone-line); border-radius: var(--radius);
  font: inherit; background: var(--paper); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--bronze); outline-offset: 1px; border-color: var(--bronze); }
/* A file input sizes itself to its button plus the "No file chosen" text and
   will happily run past a 320px screen. */
.field input[type="file"] { font: inherit; max-width: 100%; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { .field-row { grid-template-columns: 1fr; } }

/* ---------- CTA band + footer ---------- */
.cta-band {
  background:
    linear-gradient(rgba(43, 51, 36, 0.92), rgba(31, 37, 26, 0.94)),
    url("../img/hero-wall.jpg") center / cover no-repeat, var(--moss);
  color: var(--white);
  padding: clamp(3rem, 7vw, 5rem) 0;
}
.cta-band h2 { color: var(--white); margin-top: 0; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 55ch; margin-bottom: 0; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.site-footer { background: var(--ink); color: #cfc8ba; padding: 3rem 0 1.5rem; font-size: 0.95rem; }
.site-footer a { color: #e8e2d4; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer h3 {
  color: var(--white); font-family: var(--sans); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer__grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.footer-social { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-brand { font-family: var(--serif); font-size: 1.2rem; color: var(--white); margin-top: 0; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 2.5rem; padding-top: 1.4rem; font-size: 0.85rem; color: #a89f8d; }
/* Build credit — deliberately quieter than the legal line above it, so it
   reads as a signature on the work rather than an advert on a client site. */
.site-footer__legal .credit { margin-top: 0.5rem; font-size: 0.8rem; color: #968e7c; }
.site-footer__legal .credit a { color: #bfb5a1; text-decoration: none; border-bottom: 1px solid rgba(191,181,161,0.4); }
.site-footer__legal .credit a:hover, .site-footer__legal .credit a:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ---------- Misc ---------- */
.service-linklist { list-style: none; padding: 0; }
.service-linklist li { margin-bottom: 0.6rem; }
.service-linklist a {
  display: block; padding: 0.8rem 1rem;
  border: 1px solid var(--stone-line); border-radius: var(--radius);
  background: var(--white); text-decoration: none; color: var(--ink-soft);
}
.service-linklist a:hover { border-color: var(--stone-mid); }
.service-linklist strong { color: var(--ink); }

.area-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.area-cloud a {
  display: inline-block; padding: 0.5rem 1rem;
  background: var(--white); border: 1px solid var(--stone-line); border-radius: 999px;
  text-decoration: none; font-weight: 500;
}
.area-cloud a:hover { border-color: var(--bronze); }

.note-box {
  background: var(--paper-warm); border-left: 3px solid var(--bronze);
  padding: 0.9rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem; color: var(--ink-soft);
  margin: 1.5rem 0;
}

/* Scroll reveal — classes are added by JS only, so content is never hidden
   without it; prefers-reduced-motion is respected in main.js. */
.will-reveal { opacity: 0; transform: translateY(16px); }
.will-reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
}

/* ---------- Coverage map (Areas We Cover) ---------- */
.coverage-map {
  margin: 0 0 2.5rem;
  background: var(--paper-warm);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.coverage-map svg { width: 100%; height: auto; display: block; }
.coverage-map figcaption {
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--stone-line);
  background: var(--white);
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}
.cov-ring { fill: none; stroke: var(--stone-mid); stroke-width: 1.2; stroke-dasharray: 5 7; opacity: 0.75; }
.cov-ring-label {
  fill: var(--ink-soft); font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75;
}
.cov-spoke { stroke: var(--stone-mid); stroke-width: 1; opacity: 0.5; }
.cov-region {
  fill: var(--stone-mid); font-family: var(--serif); font-size: 30px;
  letter-spacing: 0.34em; opacity: 0.45;
}
.cov-dot { fill: var(--bronze); stroke: var(--paper-warm); stroke-width: 2.5; transition: r 0.15s ease; }
.cov-home { fill: var(--moss); stroke: var(--paper-warm); stroke-width: 2.5; }
.cov-home-halo { fill: var(--moss); opacity: 0.18; }
.cov-label { fill: var(--ink); font-family: var(--serif); font-size: 19px; font-weight: 600; }
.cov-label--home { fill: var(--moss); }
.cov-base {
  fill: var(--ink-soft); font-family: var(--sans); font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cov-pin { cursor: pointer; }
.cov-pin:hover .cov-dot { r: 9; }
.cov-pin:hover .cov-label { fill: var(--bronze); text-decoration: underline; }
.cov-pin:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (max-width: 40rem) {
  .cov-label { font-size: 23px; }
  .cov-ring-label, .cov-base { font-size: 16px; }
  .cov-region { font-size: 38px; }
}

/* ---------- Next steps list (thank-you page) ---------- */
.next-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.next-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.35rem;
}
.next-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px solid var(--stone-line);
  font-family: var(--serif);
  font-weight: 600;
  color: var(--bronze);
}
.next-steps strong { display: block; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}