/* ═══════════════════════════════════════════════════════════════
   Auto Hail Damage Solutions LLC — site styles
   Palette drawn from the AHDS badge: charcoal, sage, cream, tan.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  /* brand */
  --ink:        #23282a;
  --ink-2:      #3a3f3c;
  --ink-3:      #565d59;
  --sage:       #8fb2a6;
  --sage-600:   #5f8577;
  --sage-700:   #47665b;
  --sage-100:   #e3eeea;
  --cream:      #f3e9d3;
  --tan:        #e2d4b0;
  --paper:      #fbf8f1;
  --white:      #ffffff;

  /* semantic */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --muted:      var(--ink-3);
  --rule:       #e6e0d1;
  --accent:     var(--sage-600);
  --danger:     #a8342b;
  --ok:         #2f6b4f;

  /* type */
  --ff-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* metrics */
  --utilbar-h:  38px;
  --header-h:   76px;
  --topbar-h:   calc(var(--utilbar-h) + var(--header-h));
  --wrap:       1180px;
  --wrap-narrow: 840px;
  --r-sm:       8px;
  --r:          14px;
  --r-lg:       22px;
  --shadow-sm:  0 1px 2px rgba(35,40,42,.06), 0 2px 8px rgba(35,40,42,.05);
  --shadow:     0 4px 12px rgba(35,40,42,.08), 0 14px 40px rgba(35,40,42,.08);
  --shadow-lg:  0 10px 30px rgba(35,40,42,.12), 0 30px 70px rgba(35,40,42,.14);
}

@media (max-width: 860px) {
  :root { --utilbar-h: 0px; --header-h: 66px; }
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html { background: var(--ink); }

body {
  margin: 0;
  padding-top: var(--topbar-h);
  background: transparent;          /* lets .sitebg show through the bands */
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--sage-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.35rem); text-transform: uppercase; letter-spacing: .012em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
h4 { font-size: 1.08rem; }
p  { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--sage-600);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: .7rem 1.1rem; border-radius: var(--r-sm); font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ── Layout helpers ──────────────────────────────────────────── */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }
@media (max-width: 560px) { .wrap { width: min(100% - 1.75rem, var(--wrap)); } }

/* ── Fixed backdrop ──────────────────────────────────────────────
   One image, pinned to the viewport. The page scrolls over it and the
   transparent .band sections act as windows onto it.

   To change the backdrop, just overwrite assets/img/site-bg.jpg with
   another photo — no code change needed. Dark, low-detail images work
   best; the scrim below is tuned to keep band text readable.
   ─────────────────────────────────────────────────────────────── */
.sitebg {
  position: fixed; inset: 0; z-index: -10;
  background-image: url("../img/site-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.sitebg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(20,24,25,.34), rgba(20,24,25,.82) 78%),
    linear-gradient(180deg, rgba(20,24,25,.62), rgba(20,24,25,.74));
}

/* Sections must be opaque so the backdrop only reads through the bands. */
.section { padding: clamp(3.75rem, 8vw, 6.5rem) 0; background: var(--paper); }
.section--alt { background: var(--white); border-block: 1px solid var(--rule); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark h2, .section--dark h3 { color: var(--cream); }

.section__head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section__head--light .section__lede { color: rgba(243,233,211,.78); }
.section__lede { margin-top: 1rem; font-size: 1.09rem; color: var(--muted); }

.eyebrow {
  font-family: var(--ff-display);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--sage-600);
  margin-bottom: .75rem;
}
.section--dark .eyebrow, .section--estimate .eyebrow { color: var(--sage); }

.fineprint { display: block; margin-top: .7rem; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.section--dark .fineprint, .section--estimate .fineprint { color: rgba(243,233,211,.6); }
sup { font-size: .62em; }

.ico { width: 1.05em; height: 1.05em; flex: none; stroke-width: 2; }
.ico--lg { width: 26px; height: 26px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--sage-600);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .72rem 1.35rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid transparent; border-radius: 999px;
  font-family: var(--ff-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .055em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover { background: var(--sage-700); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--sage-600); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--cream);
  border-color: rgba(243,233,211,.55); backdrop-filter: blur(3px);
}
.btn--ghost:hover { background: rgba(243,233,211,.13); border-color: var(--cream); }
.btn--lg { padding: .95rem 1.85rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Fixed top bar ───────────────────────────────────────────── */
.utilbar {
  height: var(--utilbar-h);
  background: var(--ink);
  color: rgba(243,233,211,.82);
  font-size: .82rem;
  border-bottom: 1px solid rgba(243,233,211,.1);
}
@media (max-width: 860px) { .utilbar { display: none; } }
.utilbar__inner { display: flex; align-items: center; gap: 1.5rem; height: 100%; }
.utilbar__spacer { flex: 1; }
.utilbar__item {
  display: inline-flex; align-items: center; gap: .45rem;
  color: inherit; text-decoration: none; white-space: nowrap;
}
a.utilbar__item:hover { color: var(--sage); }
.utilbar .ico { opacity: .8; }
/* Two phone numbers plus the address is a lot of bar. Shed the least
   critical items first as the window narrows, rather than wrapping. */
@media (max-width: 1180px) { .utilbar__item--email { display: none; } }
@media (max-width: 980px)  { .utilbar__inner > .utilbar__item:first-child { display: none; } }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(251,248,241,.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(251,248,241,.985); }
.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--header-h);
}
/* the utility bar sits above the fixed header, so push the header down by its height */
.site-header { top: var(--utilbar-h); }
.utilbar { position: fixed; inset: 0 0 auto 0; z-index: 101; width: 100%; }

/* brand */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); flex: none; }
.brand__mark { width: 52px; height: 52px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.02; }
.brand__text strong {
  font-family: var(--ff-display); font-size: 1.12rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .035em;
}
.brand__text em {
  font-family: var(--ff-display); font-style: normal;
  font-size: .74rem; font-weight: 500; letter-spacing: .225em;
  text-transform: uppercase; color: var(--sage-600);
}
@media (max-width: 400px) {
  .brand__mark { width: 42px; height: 42px; }
  .brand__text strong { font-size: .95rem; }
  .brand__text em { font-size: .64rem; }
}

/* nav */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__list > li > a {
  display: block; padding: .55rem .78rem; border-radius: 999px;
  font-family: var(--ff-display); font-size: .93rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.nav__list > li > a:hover { color: var(--sage-700); background: var(--sage-100); }
.nav__list > li > a[aria-current="true"] { color: var(--sage-700); background: var(--sage-100); }
.nav__cta { margin-left: .6rem; }
.nav__cta > a { color: var(--white) !important; background: var(--sage-600) !important; padding: .68rem 1.2rem !important; }
.nav__cta > a:hover { background: var(--sage-700) !important; }

/* hamburger */
.navtoggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--rule); border-radius: 12px;
  cursor: pointer; place-items: center;
}
.navtoggle__bars { display: grid; gap: 5px; width: 22px; }
.navtoggle__bars i {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .navtoggle { display: grid; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .28s ease, visibility .28s;
  }
  .nav.is-open { max-height: min(78vh, 560px); overflow-y: auto; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1.25rem 1.4rem; }
  .nav__list > li > a { padding: .85rem .4rem; border-radius: var(--r-sm); font-size: 1.02rem; border-bottom: 1px solid var(--rule); }
  .nav__list > li:last-child > a { border-bottom: 0; }
  .nav__cta { margin: .9rem 0 0; }
  .nav__cta > a { text-align: center; padding: .95rem 1.2rem !important; }
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid; align-items: center;
  min-height: clamp(520px, 76vh, 760px);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  color: var(--cream);
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(24,28,29,.93) 0%, rgba(24,28,29,.80) 44%, rgba(24,28,29,.42) 76%, rgba(24,28,29,.30) 100%),
    linear-gradient(to top, rgba(24,28,29,.65), transparent 45%);
}
.hero__inner { max-width: 44rem; }
.hero .eyebrow { color: var(--sage); }
.hero h1 { color: var(--cream); }
.hero__lede {
  margin-top: 1.35rem; max-width: 40rem;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: rgba(243,233,211,.9);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero__note { margin-top: 1.5rem; font-size: .95rem; color: rgba(243,233,211,.72); }
.hero__note strong { color: var(--sage); }

/* ── Trust bar ───────────────────────────────────────────────── */
.trustbar { background: var(--ink-2); color: var(--cream); }
.trustbar__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(243,233,211,.14);
}
.trustbar__item {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.5rem 1.35rem;
  background: var(--ink-2);
}
.trustbar__item .ico { color: var(--sage); }
.trustbar__item span { display: flex; flex-direction: column; font-size: .85rem; color: rgba(243,233,211,.7); line-height: 1.4; }
.trustbar__item strong {
  font-family: var(--ff-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cream);
}
@media (max-width: 900px) { .trustbar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trustbar__grid { grid-template-columns: 1fr; } .trustbar__item { padding: 1.15rem 1rem; } }

/* ── Parallax bands (windows onto the fixed backdrop) ────────── */
.band {
  position: relative;
  padding: clamp(4.5rem, 12vw, 9rem) 0;
  background: transparent;               /* .sitebg shows through here */
  color: var(--cream);
  text-align: center;
  border-block: 1px solid rgba(243,233,211,.16);
}
.band__inner { max-width: 54rem; margin-inline: auto; }
.band .eyebrow { color: var(--sage); }
.band h2 {
  color: var(--cream);
  font-size: clamp(1.95rem, 4.4vw, 3.25rem);
  text-transform: uppercase; letter-spacing: .014em;
  text-shadow: 0 2px 24px rgba(12,15,16,.55);
}
.band p {
  margin: 1.15rem auto 0; max-width: 46rem;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: rgba(243,233,211,.86);
  text-shadow: 0 1px 14px rgba(12,15,16,.5);
}
.band .btn { margin-top: 2.1rem; }
.band__rule {
  width: 64px; height: 3px; margin: 0 auto 1.6rem;
  background: var(--sage); border-radius: 2px;
}

/* ── Cards ───────────────────────────────────────────────────── */
.cards {
  display: grid; gap: 1.35rem;
  grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
}
.card {
  padding: 1.9rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.section--alt .card { background: var(--paper); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sage); }
.card__ico {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 1.1rem;
  background: var(--sage-100); color: var(--sage-700);
  border-radius: 16px;
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--muted); font-size: .97rem; }

/* ── Split (image + text) ────────────────────────────────────── */
.split {
  display: grid; gap: clamp(2rem, 4.5vw, 3.75rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}
.split__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
/* for portrait source photos, which a 4:3 crop would gut */
.split__media--square img { aspect-ratio: 1 / 1; }

figure.split__media { margin: 0; }
.split__media--photo img { aspect-ratio: 3 / 2; }
.split__media figcaption {
  margin-top: .8rem; font-size: .87rem; line-height: 1.5;
  color: var(--muted); text-align: center;
}
.split__body h2 { margin-bottom: 1.1rem; }
.split__body p { color: var(--muted); margin-bottom: 1rem; }

.checklist { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.checklist li { position: relative; padding-left: 2rem; color: var(--fg); font-size: .98rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--sage-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/.72rem no-repeat;
}
.checklist--light li { color: rgba(243,233,211,.9); }

/* ── Steps (inside the repair) ───────────────────────────────── */
.steps { margin-top: clamp(3rem, 6vw, 4.5rem); }
.steps__title {
  font-size: 1.05rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--sage-700); margin-bottom: 1.75rem;
  padding-bottom: .85rem; border-bottom: 2px solid var(--rule);
}
.steps__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.6rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  counter-reset: step;
}
.steps__list li { padding-top: .35rem; border-top: 1px solid var(--rule); }
.steps__n {
  display: block; font-family: var(--ff-display); font-size: 1.45rem; font-weight: 700;
  color: var(--sage); letter-spacing: .04em; margin-bottom: .35rem;
}
.steps__list h4 { margin-bottom: .4rem; }
.steps__list p { font-size: .93rem; color: var(--muted); }

/* ── Flow (our process) ──────────────────────────────────────── */
.flow {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  counter-reset: flow;
}
.flow__item {
  position: relative;
  padding: 2.4rem 1.5rem 1.6rem;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r);
  border-top: 4px solid var(--sage);
}
.flow__n {
  position: absolute; top: -1px; left: 1.5rem;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--sage-600); color: var(--white);
  border-radius: 0 0 12px 12px;
  font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700;
}
.flow__item h3 { margin: .75rem 0 .45rem; font-size: 1.16rem; }
.flow__item p { font-size: .93rem; color: var(--muted); }

/* ── Insurance facts ─────────────────────────────────────────── */
.factgrid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  background: rgba(243,233,211,.16);
  border: 1px solid rgba(243,233,211,.16); border-radius: var(--r);
  overflow: hidden;
}
.fact { padding: 1.9rem 1.7rem; background: var(--ink); }
.fact h3 { font-size: 1.14rem; margin-bottom: .65rem; color: var(--sage); }
.fact p { font-size: .95rem; color: rgba(243,233,211,.76); }
.fact strong { color: var(--cream); }

.insurance-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin-top: 2.75rem;
  padding: 1.9rem 2rem;
  background: rgba(143,178,166,.12);
  border: 1px solid rgba(143,178,166,.32); border-radius: var(--r);
}
.insurance-cta p { font-family: var(--ff-display); font-size: 1.2rem; letter-spacing: .01em; color: var(--cream); max-width: 44ch; }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.gallery__item { margin: 0; }
.gallery__item--wide { grid-column: span 2; }
@media (max-width: 700px) { .gallery__item--wide { grid-column: span 1; } }
.gallery__item img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
}
.gallery__item--wide img { aspect-ratio: 21 / 9; }
.gallery figcaption { margin-top: .7rem; font-size: .87rem; color: var(--muted); }

/* ── Stat grid ───────────────────────────────────────────────── */
.statgrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem; margin: 2rem 0 0; padding-top: 1.6rem;
  border-top: 2px solid var(--rule);
}
.statgrid dt {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3rem;
}
.statgrid dd {
  margin: 0; font-family: var(--ff-display); font-size: 1.5rem; font-weight: 600;
  color: var(--sage-700); line-height: 1;
}
@media (max-width: 620px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }

/* ── Reviews ─────────────────────────────────────────────────── */
.reviews__intro {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
@media (max-width: 900px) { .reviews__intro { grid-template-columns: 1fr; } }

.reviews__photo { margin: 0; }
.reviews__photo img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.reviews__photo figcaption {
  margin-top: .8rem; font-size: .87rem; line-height: 1.5;
  color: var(--muted); text-align: center;
}

.reviews__note h3 { margin-bottom: .9rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.reviews__note p { color: var(--muted); margin-bottom: .85rem; }
.reviews__note .btn { margin-top: .6rem; }

/* The no-JS layout. Every review is in the HTML, so with scripting off all
   ten render as an even grid — equal columns, equal row heights, no ragged
   bottoms. JS replaces this with the rotator below. */
.reviews__wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

/* ── Rotating mode (added by JS) ─────────────────────────────────
   Pages of three are stacked on top of each other and crossfaded. The
   wall is locked to the tallest page and every page fills it, so the
   section never changes height and nothing below it ever shifts. */
.reviews__wall.is-rotating {
  display: block;
  position: relative;
}
.reviews__page {
  position: absolute; inset: 0 0 auto 0;
  min-height: 100%;
  display: grid; gap: 1.35rem; align-items: stretch;
  grid-template-columns: repeat(var(--per-page, 3), minmax(0, 1fr));
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), visibility 0s .55s;
}
.reviews__page.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), visibility 0s 0s;
}
.is-rotating .review { display: flex; }

/* reduced-motion: rotate, but swap instantly instead of animating */
.reviews__wall.is-instant,
.reviews__wall.is-instant .reviews__page { transition: none; }
.reviews__wall.is-instant .reviews__page { transform: none; }

.rotator__controls {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 2rem;
}
.rotator__arrow {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  background: var(--paper); color: var(--sage-700);
  border: 1.5px solid var(--rule); border-radius: 50%;
  cursor: pointer; line-height: 1;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.rotator__arrow svg { width: 18px; height: 18px; stroke-width: 2.4; }
.rotator__arrow:hover { border-color: var(--sage-600); background: var(--sage-100); transform: translateY(-1px); }

.rotator__dots {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem;
  max-width: min(100%, 22rem);   /* 18 reviews = 18 dots on mobile; wrap them */
}
.rotator__dot {
  width: 9px; height: 9px; padding: 0;
  background: var(--rule); border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.rotator__dot:hover { background: var(--sage); }
.rotator__dot[aria-current="true"] { background: var(--sage-600); width: 26px; border-radius: 999px; }

.review {
  display: flex; flex-direction: column;
  margin: 0;
  padding: 1.6rem 1.5rem 1.35rem;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.review blockquote { margin: 0; }
.review blockquote p {
  font-size: .97rem; line-height: 1.62; color: var(--fg);
}
/* Emphasis inside a quote is ours, not the reviewer's — keep it subtle:
   a weight bump and a faint highlight, never a different colour, so it
   reads as "look here" rather than as edited text.

   Two levels: the proof phrase in a review gets the highlight, while a
   name mention gets weight only. Highlighting all 24 name mentions too
   would leave nothing standing out. */
.review blockquote strong {
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(transparent 62%, rgba(143,178,166,.38) 62%);
}
.review blockquote strong.mention {
  font-weight: 600;
  background: none;
}
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after  { content: "\201D"; }
.review figcaption {
  display: flex; flex-direction: column; gap: .12rem;
  margin-top: auto; padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.review blockquote { margin-bottom: 1rem; }
.review__name {
  font-family: var(--ff-display); font-size: 1rem; font-weight: 600;
  letter-spacing: .02em; color: var(--ink);
}
.review__meta { font-size: .8rem; color: var(--muted); }

/* ── Owners ──────────────────────────────────────────────────── */
.owners { margin-top: clamp(3rem, 6vw, 4.75rem); }
.owners__title {
  font-size: 1.05rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--sage-700); margin-bottom: 1.75rem;
  padding-bottom: .85rem; border-bottom: 2px solid var(--rule);
}
.owners__grid {
  display: grid; gap: 1.35rem;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.owner {
  position: relative;
  padding: 2rem 1.85rem;
  background: var(--paper);
  border: 1px solid var(--rule); border-left: 4px solid var(--sage-600);
  border-radius: var(--r);
}
.owner__ico {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-bottom: 1.1rem;
  background: var(--sage-100); color: var(--sage-700);
  border-radius: 14px;
}
.owner__role {
  font-family: var(--ff-display); font-size: .76rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage-600); margin-bottom: .35rem;
}
.owner h4 { font-size: 1.35rem; margin-bottom: .75rem; }
.owner p { color: var(--muted); font-size: .97rem; }
.owner p + p { margin-top: .8rem; }
.owner strong { color: var(--fg); font-weight: 600; }

.pullquote {
  margin: 2.25rem 0 0; padding: 2.1rem 2.25rem;
  background: var(--ink); color: var(--cream);
  border-radius: var(--r); text-align: center;
}
.pullquote blockquote { margin: 0; }
.pullquote blockquote p {
  font-family: var(--ff-display); font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.22;
  color: var(--cream); text-wrap: balance;
}
.pullquote blockquote p::before { content: "\201C"; }
.pullquote blockquote p::after  { content: "\201D"; }
.pullquote figcaption {
  max-width: 58ch; margin: 1.1rem auto 0;
  font-size: .95rem; color: rgba(243,233,211,.72);
}
@media (max-width: 560px) { .pullquote { padding: 1.6rem 1.35rem; } }

/* ── Areas we serve ──────────────────────────────────────────── */
.areas {
  display: grid; gap: 1.35rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.areas__group {
  padding: 1.5rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r);
  border-top: 3px solid var(--sage);
}
.areas__group h3 {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-700); margin-bottom: .9rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
}
.areas__group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .38rem; }
.areas__group li { font-size: .95rem; color: var(--fg); }
.areas__note {
  margin-top: 1.9rem; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: .97rem; color: var(--muted); text-align: center;
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq { display: grid; gap: .75rem; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq__item[open] { border-color: var(--sage); box-shadow: var(--shadow-sm); }
.faq__item summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: var(--ff-display); font-size: 1.08rem; font-weight: 500;
  letter-spacing: .012em;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; margin-left: auto; margin-top: .18em;
  width: 1.15rem; height: 1.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f8577' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .22s ease;
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item summary:hover { background: var(--sage-100); }
.faq__body { padding: 0 1.4rem 1.4rem; }
.faq__body p { color: var(--muted); font-size: .97rem; }
.faq__body p + p { margin-top: .8rem; }

/* ── Estimate section ────────────────────────────────────────── */
.section--estimate {
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(143,178,166,.22), transparent 62%),
    var(--ink);
  color: var(--cream);
}
.section--estimate h2 { color: var(--cream); }
.estimate {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
}
@media (max-width: 940px) { .estimate { grid-template-columns: 1fr; } }
.estimate__aside { position: sticky; top: calc(var(--topbar-h) + 2rem); }
@media (max-width: 940px) { .estimate__aside { position: static; } }
.estimate__aside > p { color: rgba(243,233,211,.8); margin-top: 1rem; }
.estimate__contact {
  display: grid; gap: .55rem; margin-top: 1.75rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(243,233,211,.18);
}
.estimate__contact a {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--sage); text-decoration: none; font-size: .95rem; word-break: break-word;
}
.estimate__contact a:hover { color: var(--cream); text-decoration: underline; }

.estimate__formwrap {
  background: var(--paper); color: var(--fg);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
}

/* ── Form ────────────────────────────────────────────────────── */
.form__set { border: 0; padding: 0; margin: 0 0 1.9rem; }
.form__set + .form__set { padding-top: 1.7rem; border-top: 1px solid var(--rule); }
.form__set legend {
  padding: 0; margin-bottom: 1.15rem;
  font-family: var(--ff-display); font-size: .84rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sage-700);
}

.field { display: flex; flex-direction: column; margin-bottom: 1.1rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field-row--3 { grid-template-columns: 1.6fr .5fr .8fr; }
@media (max-width: 620px) {
  .field-row, .field-row--3 { grid-template-columns: 1fr; }
}

.field label, .field__label {
  margin-bottom: .4rem;
  font-size: .87rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-2);
}
.field__opt { font-weight: 400; color: var(--muted); }
.req { color: var(--danger); font-weight: 700; }

.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field input[type="number"], .field select, .field textarea {
  width: 100%;
  padding: .78rem .9rem;
  background: var(--white);
  border: 1.5px solid var(--rule); border-radius: 10px;
  font-size: 1rem; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.field select {
  appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565d59' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.05rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cfc7b4; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sage-600);
  box-shadow: 0 0 0 4px rgba(95,133,119,.16);
}
.field input::placeholder, .field textarea::placeholder { color: #a9a396; }

.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field.is-invalid input:focus, .field.is-invalid select:focus { box-shadow: 0 0 0 4px rgba(168,52,43,.14); }
.field__err { min-height: 0; margin-top: .35rem; font-size: .82rem; color: var(--danger); font-weight: 500; }
.field__err:empty { display: none; }
.field__hint { margin-top: .4rem; font-size: .82rem; color: var(--muted); }
.field.is-hidden { display: none; }

.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span {
  display: grid; place-items: center; width: 2.5rem;
  background: var(--sage-100); color: var(--sage-700); font-weight: 600;
  border: 1.5px solid var(--rule); border-right: 0; border-radius: 10px 0 0 10px;
}
.input-prefix > input { border-radius: 0 10px 10px 0 !important; }

.radios { display: flex; gap: .75rem; flex-wrap: wrap; }
.radio {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .68rem 1.35rem; margin: 0;
  background: var(--white); border: 1.5px solid var(--rule); border-radius: 999px;
  cursor: pointer; font-weight: 500; font-size: .95rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.radio:hover { border-color: var(--sage); }
.radio input { accent-color: var(--sage-600); width: 1.05rem; height: 1.05rem; margin: 0; }
.radio:has(input:checked) { border-color: var(--sage-600); background: var(--sage-100); }

.check {
  display: flex; align-items: flex-start; gap: .7rem; margin: 0;
  font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--muted); cursor: pointer;
}
.check input { accent-color: var(--sage-600); width: 1.15rem; height: 1.15rem; margin-top: .12rem; flex: none; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.form__actions { margin-top: 1.9rem; }
.form__legal { margin-top: .9rem; font-size: .8rem; color: var(--muted); text-align: center; }

.btn__spinner { display: none; width: 1.05rem; height: 1.05rem; }
.btn.is-busy .btn__spinner {
  display: block;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.formstatus { margin-top: 1.2rem; padding: 0; border-radius: var(--r); font-size: .95rem; }
.formstatus:empty { display: none; }
.formstatus.is-ok {
  padding: 1.15rem 1.3rem;
  background: #e8f3ec; border: 1.5px solid #b9dcc7; color: #235c40;
}
.formstatus.is-err {
  padding: 1.15rem 1.3rem;
  background: #fbeceb; border: 1.5px solid #efc4c0; color: #8d2b23;
}
.formstatus strong { display: block; margin-bottom: .25rem; font-family: var(--ff-display); font-size: 1.1rem; letter-spacing: .02em; }
.formstatus a { color: inherit; font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(243,233,211,.72); padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  padding-bottom: 3rem;
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand img { margin-bottom: 1.1rem; }
.site-footer__brand p { font-size: .93rem; max-width: 36ch; }
.site-footer h3 {
  font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer li { font-size: .93rem; }
.site-footer a { color: rgba(243,233,211,.78); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; word-break: break-word; }
.site-footer a:hover { color: var(--sage); text-decoration: underline; }
.site-footer__contact .btn { margin-top: 1.4rem; color: var(--white); }
.site-footer__contact .btn:hover { color: var(--white); text-decoration: none; }
.site-footer__legal {
  padding: 1.5rem 0 2.25rem;
  border-top: 1px solid rgba(243,233,211,.14);
  font-size: .84rem;
}
.site-footer__legal .fineprint { color: rgba(243,233,211,.5); max-width: 90ch; }

/* ── Mobile sticky CTA ───────────────────────────────────────── */
.fab {
  position: fixed; left: 50%; bottom: 1rem; transform: translate(-50%, 150%);
  z-index: 90;
  display: none; align-items: center; justify-content: center;
  padding: .9rem 2rem;
  background: var(--sage-600); color: var(--white);
  border-radius: 999px; box-shadow: var(--shadow-lg);
  font-family: var(--ff-display); font-size: .98rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 1040px) { .fab { display: flex; } }
.fab.is-visible { transform: translate(-50%, 0); }

/* ── Reveal on scroll ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .site-header, .utilbar, .fab, .hero__media, .btn { display: none !important; }
  body { padding-top: 0; background: #fff; }
  .section, .section--dark, .section--estimate { background: #fff !important; color: #000 !important; }
}