/* =====================================================================
   Zick Construction & Roofing — shared brand stylesheet (v2)
   Visual-parity redesign matching the production homepage. Pure static
   CSS, no framework, no build step. Self-hosted fonts (woff2) live in
   /assets/fonts/ so there is NO external request — portability holds.

   Palette = white + forest green (sampled from the live site):
     --green     #002507  dark forest header/footer bar.
     --green-cta #477f19  CTA green. The bright brand accent (#61aa22)
                          fails WCAG AA on white (2.88:1) for white button
                          text, so it is darkened to #477f19 = 4.86:1 (AA
                          pass). New neutrals are tinted toward the green
                          hue (OKLCH) so nothing is pure #000/#fff.
   ===================================================================== */

/* ---------- 0. Self-hosted fonts (no external request) ----------
   Montserrat = clean, well-spaced geometric sans for headings, matching the
                client's production (Duda) site, which the client finds far
                more readable than the condensed Oswald we shipped earlier.
                Variable font, one latin woff2 covers 400-800.
   Inter   = clean body sans (close to production's Roboto). Variable font,
             one woff2 covers 400-700.
   font-display: swap keeps text visible while the woff2 loads. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
}

/* ---------- 1. Brand tokens + base ---------- */
:root {
  --green: #002507;        /* dark forest green — header/footer bar */
  --green-deep: oklch(22% 0.05 150);   /* reviews band — deep forest */
  --green-mid: oklch(34% 0.07 145);    /* "what can we do" band, panels */
  --green-cta: #477f19;    /* accessible CTA green (4.86:1 on white) */
  --green-cta-hover: #3a6814; /* darker on hover/active (6.62:1 on white) */
  --white: #ffffff;
  --paper: oklch(99% 0.004 150);       /* near-white, faint green tint */
  --mist: oklch(96.5% 0.008 150);      /* soft section background */
  --ink: oklch(24% 0.012 150);         /* body text — warm near-black */
  --ink-soft: oklch(45% 0.015 150);    /* muted text / labels */
  --line: oklch(90% 0.01 150);         /* hairline borders */
  --overlay: oklch(20% 0.04 150 / 0.58); /* hero dark-green overlay */
  --gold: oklch(76% 0.13 80);          /* review stars */
  --display: "Montserrat", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --max: 1180px;
  --radius: 6px;
  --radius-lg: 14px;
  --shadow: 0 4px 18px oklch(20% 0.04 150 / 0.14);
  --shadow-card: 0 14px 34px oklch(20% 0.04 150 / 0.20);
}

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

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

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--green-cta);
}

h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 2. Header / nav ---------- */
/* Thicker green bar, BIGGER centered ZICK logo. Nav split into two groups
   that flank the centered brand on desktop. */
.site-header {
  background: var(--green);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.06);
}

.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 30px;
  min-height: 104px;
  position: relative;
}

.site-header .brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-self: center;
}

.site-header .brand img {
  height: 84px;
  width: auto;
}

/* Primary nav (left of logo) + utility nav share .site-nav styling */
.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav.nav-primary {
  grid-column: 1;
  justify-content: flex-end;
}

.site-nav.nav-secondary {
  grid-column: 3;
  justify-content: flex-start;
}

.site-nav a {
  font-family: var(--display);
  color: var(--white);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 2px;
  display: inline-block;
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green-cta);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: #d7e8cc;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* hamburger — hidden on desktop, shown on mobile via media query */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
}

/* Services dropdown */
.has-dropdown {
  position: relative;
}

.has-dropdown > a::before {
  content: "";
}

/* Services dropdown indicator: a crisp CSS-drawn chevron (the old unicode ▾
   read as a dot). Points DOWN by default, rotates UP on hover/focus. The
   unicode glyph inside the .caret span is hidden (font-size:0); the chevron is
   drawn with two borders on ::before in currentColor so it matches the nav. */
.has-dropdown > a .caret {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 0;
}

.has-dropdown > a .caret::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s ease, top 0.22s ease;
}

.has-dropdown:hover > a .caret::before,
.has-dropdown:focus-within > a .caret::before {
  transform: rotate(-135deg);
  top: 4px;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  background: var(--green);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  box-shadow: var(--shadow);
  border-radius: 0 0 var(--radius) var(--radius);
  display: none;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown.open {
  display: block;
}

.dropdown li {
  margin: 0;
}

.dropdown a {
  display: block;
  padding: 10px 20px;
  white-space: nowrap;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.dropdown a::after {
  display: none;
}

.dropdown a:hover,
.dropdown a:focus-visible {
  background: oklch(100% 0 0 / 0.08);
}

/* social icons (Facebook + Google) */
.site-header .social,
.site-footer .social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Social icons pinned to the far left of the header bar (matches the
   production layout). The 3-col grid keeps nav/logo/nav centered; the
   icons sit on top of the left column without disturbing it. */
.site-header .social {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(100% 0 0 / 0.12);
  color: var(--white);
  text-decoration: none;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.social a:hover,
.social a:focus-visible {
  background: oklch(100% 0 0 / 0.26);
  transform: translateY(-1px);
}

/* ---------- 3. Hero ---------- */
/* TALL full-bleed background video, dark overlay, big headline + CTA. */
.hero {
  position: relative;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* extra bottom room so the overlapping cards below have a surface */
  padding-bottom: 120px;
}

.hero video,
.hero img.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Normal users see the video; the poster fallback <img> stays hidden.
   Under prefers-reduced-motion (below) this flips. */
.hero img.hero-media {
  display: none;
}

/* Hero scrim: NO full green wash — let the drone footage show true color.
   Only a subtle near-neutral dark gradient, transparent across the top two
   thirds and deepening toward the bottom-center where the headline + CTA
   sit, purely for text legibility. Hue pulled almost to neutral (very low
   chroma) so it reads as a soft dark shade, not a green tint. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      oklch(20% 0.008 150 / 0) 0%,
      oklch(20% 0.008 150 / 0) 42%,
      oklch(18% 0.008 150 / 0.30) 72%,
      oklch(14% 0.008 150 / 0.52) 100%);
  z-index: 1;
}

.hero .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
  padding: 40px 20px;
}

.hero .eyebrow {
  color: oklch(92% 0.03 145);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.22em;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.hero h1 {
  /* Montserrat is WIDER than the old condensed Oswald, so the prior 3.2rem max
     pushed this headline to 3 lines on desktop. Capped at 2.85rem (≈46px), the
     largest size that keeps it to a clean 2 lines at 1280/1024 while the 4.4vw
     middle term scales it down on tablet (also 2 lines). "Fort Collins, CO" is
     kept together by the .nowrap span. (Re-tuned for the Montserrat swap.) */
  font-size: clamp(1.9rem, 4.4vw, 2.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 4px oklch(0% 0 0 / 0.6), 0 4px 26px oklch(0% 0 0 / 0.55);
  margin-bottom: 0.5em;
}
.hero h1 .nowrap { white-space: nowrap; }

.hero .hero-sub {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 10px oklch(0% 0 0 / 0.5);
  margin-bottom: 1.8em;
  color: oklch(95% 0.02 145);
}

.hero .hero-serving {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.25rem);
  letter-spacing: 0.03em;
  margin-top: 1.5rem;
  color: oklch(96% 0.02 145);
  text-shadow: 0 1px 3px oklch(0% 0 0 / 0.65), 0 2px 14px oklch(0% 0 0 / 0.5);
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  padding: 13px 26px;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  color: var(--green);
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--green);
  color: var(--white);
}

/* brand-green CTA */
.btn-cta {
  background: linear-gradient(135deg, var(--green-cta) 0%, oklch(66% 0.16 138) 100%);
  color: var(--white);
  border-color: var(--green-cta);
  padding: 15px 34px;
  font-size: 1rem;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background: linear-gradient(135deg, var(--green-cta-hover) 0%, oklch(60% 0.16 138) 100%);
  border-color: var(--green-cta-hover);
  color: var(--white);
  transform: translateY(-2px);
}

/* outline-on-dark variant for CTAs sitting on green/dark bands */
.btn-light {
  border-color: var(--white);
  color: var(--white);
  background: transparent;
}

.btn-light:hover,
.btn-light:focus-visible {
  background: var(--white);
  color: var(--green);
}

/* ---------- 5. Service cards — the signature overlap ---------- */
/* Four rounded image cards that OVERLAP UP onto the bottom of the hero
   video (negative top margin straddles the video/white boundary). */
.service-cards-wrap {
  background: var(--white);
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none;
  margin: -120px auto 0;        /* the overlap */
  padding: 0;
  position: relative;
  z-index: 5;
}

/* Bigger cards, fully rounded on ALL sides (top + bottom), more image
   showing (taller image area, object-fit prevents squishing). */
.service-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
}

.service-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.service-card h2 {
  font-size: 1.55rem;          /* ~15% larger than the prior 1.35rem */
  font-weight: 700;            /* bold so the label reads clearly */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--green);
  margin: 24px 22px 10px;
}

.service-card p {
  margin: 0 22px;
  color: var(--ink);           /* darker than the old muted --ink-soft */
  font-size: 1rem;
  font-weight: 600;            /* bold so the description is easy to read */
  flex: 1 1 auto;
}

.service-card .btn {
  margin: 20px 22px 26px;
  align-self: center;
  padding: 11px 26px;
  font-size: 0.88rem;
}

/* ---------- 6. Intro section (white -> green gradient, 2-col) ---------- */
.intro {
  background: linear-gradient(180deg, var(--white) 0%, var(--mist) 38%,
    var(--green-mid) 100%);
  padding: 90px 0 110px;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;   /* narrower photo column */
  gap: 54px;
  align-items: start;
}

/* Section heading: clean OPEN Inter (not the Montserrat display font) at a bold
   weight, Title Case (no uppercase transform) to match the production site. Slightly
   larger + comfortable letter-spacing so it reads open, not bunched. */
.intro h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(2rem, 3.7vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--green);
}

/* Eyebrow ("Don't let your home fall into disrepair") sits ABOVE the big
   heading. Clean open Inter (not the Montserrat display font), a touch bigger with open
   letter-spacing and a readable bold weight. It sits on the white top of the
   white->green gradient, so the brand-green --green-cta keeps strong contrast
   while still reading as the kicker accent. */
.intro .eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--green-cta);
}

/* Body copy bolder + darker so it reads clearly against the gradient. */
.intro-body p {
  color: var(--ink);
  font-weight: 600;
}

.intro-body p a {
  color: var(--green-cta);
  font-weight: 700;
}

/* (.intro-list removed in v5 — the redundant intro service checklist was
   dropped; the "What can we do for you?" pill band below already lists these
   as live buttons. Its CSS rules are deleted as dead code.) */

.intro-figure {
  margin: 0;
  position: sticky;
  top: 130px;
}

/* Smaller house photo than v2 (production's is noticeably smaller). Capped
   width + right-aligned so it stays inline in its column. */
.intro-figure img {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---------- 7. "What can we do for you?" green pill band ---------- */
.do-band {
  background: var(--green-mid);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
}

.do-band h2 {
  color: var(--white);
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: none;
  margin-bottom: 1.4em;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pill {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  text-decoration: none;
  background: oklch(100% 0 0 / 0.08);
  border: 1px solid oklch(100% 0 0 / 0.28);
  border-radius: 999px;
  padding: 11px 22px;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.pill:hover,
.pill:focus-visible {
  background: var(--green-cta);
  border-color: var(--green-cta);
  transform: translateY(-2px);
  color: var(--white);
}

/* ---------- 8. "Make us your go-to general contractor" ---------- */
/* Green panel (heading + checklist) overlapping/beside a house photo. */
.gc {
  background: var(--mist);
  padding: 90px 0;
}

.gc-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
}

.gc-panel {
  background: var(--green-mid);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 2;
  /* overlap onto the photo on the right */
  margin-right: -60px;
}

.gc-panel h2 {
  color: var(--white);
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: none;
}

.gc-list {
  list-style: none;
  margin: 1.3em 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.gc-list li {
  position: relative;
  padding-left: 32px;
}

.gc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-cta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Contact CTA inside the green panel. The solid green CTA would be green-on-
   green (low contrast) on this panel, so it uses a white-fill button: white
   background + dark-green text reads clearly against the mid-green panel. */
.gc-cta {
  margin-top: 28px;
  background: var(--white);
  border-color: var(--white);
  color: var(--green);
}

.gc-cta:hover,
.gc-cta:focus-visible {
  background: oklch(96.5% 0.008 150);   /* faint green-tinted off-white */
  border-color: oklch(96.5% 0.008 150);
  color: var(--green);
  transform: translateY(-2px);
}

.gc-figure {
  margin: 0;
}

.gc-figure img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---------- 9. Reviews — dark-green carousel ---------- */
.reviews {
  background: var(--green-deep);
  color: var(--white);
  padding: 84px 0;
  overflow: hidden;
}

.reviews h2 {
  color: var(--white);
  text-align: center;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: none;
  margin-bottom: 0.2em;
}

.reviews .eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: none;
  letter-spacing: 0.03em;
  color: oklch(82% 0.05 145);
  text-align: center;
  margin-bottom: 2.2em;
}

.carousel {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.review-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 8px 14px;
}

/* Contrasting lighter card on the dark-green reviews band: a warm cream
   surface tinted faintly toward the brand hue so the review text + name POP
   against the deep green. Breaks the green-on-green monotony. */
.review-card {
  background: oklch(97.5% 0.012 95);   /* warm cream, faint warm tint */
  border: 1px solid oklch(90% 0.012 95);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  text-align: center;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.review-card .stars {
  color: var(--gold);
  letter-spacing: 0.18em;
  font-size: 1.3rem;
  margin-bottom: 18px;
}

.review-card blockquote {
  margin: 0 0 20px;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);            /* dark text on cream — high contrast */
}

.review-card .reviewer {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);          /* brand green name on cream */
  margin: 0;
}

/* carousel controls */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / 0.3);
  background: oklch(100% 0 0 / 0.1);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease;
  z-index: 3;
}

.carousel-btn:hover,
.carousel-btn:focus-visible {
  background: var(--green-cta);
  border-color: var(--green-cta);
}

.carousel-prev { left: -8px; }
.carousel-next { right: -8px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  list-style: none;
  padding: 0;
}

.carousel-dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: oklch(100% 0 0 / 0.28);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.carousel-dots button[aria-current="true"] {
  background: var(--green-cta);
  transform: scale(1.25);
}

/* ---------- 10. "Quality That Can't Be Topped!" dark band ---------- */
.quality {
  position: relative;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  padding: 110px 20px;
}

.quality video,
.quality img.quality-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.quality img.quality-media {
  display: none;
}

.quality::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(18% 0.04 150 / 0.7);
  z-index: 1;
}

.quality-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.quality h2 {
  color: var(--white);
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.16;
  letter-spacing: 0.005em;
  text-transform: none;
  text-shadow: 0 2px 16px oklch(0% 0 0 / 0.5);
}

.quality .eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: none;
  letter-spacing: 0.03em;
  color: oklch(92% 0.02 145);
  margin-bottom: 1.8em;
}

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--green);
  color: var(--white);
  padding: 56px 0 36px;
  text-align: center;
  font-size: 0.95rem;
}

.site-footer a {
  color: var(--white);
}

.footer-brand {
  font-family: var(--display);
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2em;
}

.footer-tagline {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(82% 0.05 145);
  margin-bottom: 1.6em;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 26px;
  margin: 0 0 1.4em;
  list-style: none;
  padding: 0;
}

.footer-contact a {
  text-decoration: none;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  text-decoration: underline;
}

.footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 1.8em;
}

.footer-review-badge {
  display: inline-flex;
  align-items: center;
}

.footer-review-badge img {
  height: 46px;
  width: auto;
  border-radius: 4px;
}

.site-footer .social {
  justify-content: center;
  margin: 20px 0 22px;
}

.footer-copyright {
  color: oklch(78% 0.02 145);
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Content sections + layout utilities (interior pages) ---------- */
.section {
  padding: 56px 0;
}

.section-tight {
  padding: 28px 0;
}

.section-narrow {
  max-width: 860px;
}

.section-center {
  text-align: center;
}

.eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.6em;
}

/* Page hero for interior service pages (image banner, not video). */
.page-hero {
  position: relative;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
}

.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay);
  z-index: 1;
}

.page-hero .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 64px 20px;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  text-transform: uppercase;
  text-shadow: 0 2px 8px oklch(0% 0 0 / 0.5);
}

.page-hero p {
  text-shadow: 0 1px 6px oklch(0% 0 0 / 0.5);
}

/* ---------- Service-page video hero (shorter than the homepage hero) ----------
   Reuses the homepage .hero video treatment (full-bleed muted loop + subtle
   dark scrim + poster fallback under reduced-motion) but at a banner height,
   matching the production /roofing page (a video banner, not a full viewport).
   Add .hero--page alongside .hero to opt into the shorter band. */
.hero.hero--page {
  min-height: 52vh;
  padding-bottom: 0;
}

.hero--page .hero-inner {
  padding: 48px 20px;
}

.hero--page .eyebrow {
  margin-bottom: 0.7rem;
}

.hero--page h1 {
  margin-bottom: 0;
}

/* ---------- Service-page STATIC-IMAGE hero (gutters) ----------
   Same .hero.hero--page band + translucent green .hero-box as the roofing
   VIDEO hero, but the gutters page has a still photo (production has no video
   here). The base .hero rule hides img.hero-media (it is the reduced-motion
   poster fallback for video pages); .hero--image flips it ALWAYS visible so the
   gutter photo renders as the full-bleed background. No <video> is present, so
   there is nothing to hide under reduced-motion. */
.hero--image img.hero-media {
  display: block;
}

/* Translucent forest-green panel behind the service-hero headline so the white
   text stays legible over the busy roof video (matches production). Rounded,
   padded, centered, inline-block so the box hugs the text. The semi-transparent
   green keeps the footage visible through it while anchoring the headline. */
.hero--page h1.hero-box {
  display: inline-block;
  background: oklch(28% 0.06 150 / 0.66);   /* translucent forest green */
  padding: 0.55em 1.05em;
  border-radius: var(--radius-lg);
  /* the panel already provides the contrast surface; soften the heavy shadow */
  text-shadow: 0 1px 3px oklch(0% 0 0 / 0.45);
}

/* ---------- Referrals-page GREEN TITLE banner (no photo) ----------
   The production /referrals page has NO hero photo or video — just a short
   forest-green title bar reading "Referrals". Reuses the .hero.hero--page band
   but swaps the image background for a forest-green linear-gradient (--green ->
   --green-mid) and drops the photo-overlay ::after scrim (there is no photo to
   darken). White-on-green headline reuses the translucent .hero-box look for
   visual consistency with the service heroes. SHORTER than the 52vh photo
   heroes (~34vh) so the form below is visible with minimal scrolling. */
.hero.hero--page.hero--title {
  min-height: 150px;
  padding-bottom: 0;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
}

/* No photo here, so suppress the photo-darkening overlay the base .hero adds. */
.hero--title::after {
  display: none;
}

.hero--title .hero-inner {
  padding: 30px 20px;
}

.hero--title h1 {
  margin-bottom: 0;
}

/* ---------- Referrals intro + form ----------
   Centered intro copy (Montserrat heading + Inter body) above a compact,
   left-to-right RESPONSIVE GRID form so the whole 5-field form is fillable
   WITHOUT scrolling on desktop. */
.referral-intro {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.referral-intro h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--green);
  margin-bottom: 0.6em;
}

.referral-intro p {
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 0.4em;
}

.referral-intro .ri-small {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}

/* Referral form labels: title case, bold, dark (the uppercase faint default
   was hard to read here). Inter for clarity. */
.referral-form.contact-form label {
  font-family: var(--body);
  text-transform: none;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0;
}

/* The referral form: a 3-across grid on desktop so all 5 fields sit
   left-to-right (row 1 = 3 fields, row 2 = 2 fields) and the form is fillable
   with no vertical scrolling. Tab order follows source order = left-to-right.
   Centered with a sensible max-width so the grid looks balanced, not stretched.
   Reuses the shared .contact-form input/label/focus styling; the .referral-form
   modifier overrides the single-column .contact-form grid. Collapses to 1
   column under ~640px (mobile). */
.referral-form.contact-form {
  max-width: 760px;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 22px;
  align-items: start;
}

/* Submit button spans the full grid width and centers its own content. */
.referral-form.contact-form .btn-cta {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  min-width: 240px;
}

@media (max-width: 640px) {
  .referral-form.contact-form {
    grid-template-columns: 1fr;
  }

  .referral-form.contact-form .btn-cta {
    justify-self: stretch;
    width: 100%;
  }
}

/* ---------- Contact page: green intro banner ----------
   Forest-green gradient band (reuses --green -> --green-mid like the site's
   green panels) carrying the production intro copy. Light text on deep green
   for AA contrast; centered, with the eyebrow above and body below the heading.
   The phone link is brightened so it stays legible and dialable on the green. */
.contact-intro {
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 26%, var(--green-mid) 72%, var(--green) 100%);
  color: var(--ink);
  padding: 50px 0 64px;
}

.contact-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.contact-intro__eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--green-cta);
  margin: 0 0 0.4em;
}

.contact-intro h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--green);
  margin: 0 0 0.6em;
}

.contact-intro__body {
  color: oklch(96% 0.015 145);
  font-weight: 500;
  margin: 0;
  text-shadow: 0 1px 8px oklch(15% 0.04 150 / 0.45);
}

.contact-intro__body a {
  color: oklch(88% 0.12 128);
  font-weight: 700;
}

.contact-intro__body a:hover,
.contact-intro__body a:focus-visible {
  color: var(--white);
}

/* ---------- Contact page: two-column form + info card ----------
   Desktop: form (wider ~1.6fr) left, info card (~1fr) right. Under 768px the
   grid collapses to one column and the form sits above the card (production
   order). The form's left-to-right field grid is scoped to .contact-page-form
   so the narrow popup modal form is untouched. */
.contact-layout__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-layout__form h2 {
  margin-top: 0;
}

/* SCOPED form grid: only the inline contact-page form lays fields left-to-right.
   First/Last and Email/Phone sit 2-up; Subject + Message span full width. This
   override is scoped to .contact-page-form so the popup modal's .contact-form
   (single-column, narrow) is never affected. Collapses to 1 column under 640px. */
.contact-page-form.contact-form {
  max-width: none;
  margin: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
  align-items: start;
}

.contact-page-form.contact-form .field--full {
  grid-column: 1 / -1;
}

.contact-page-form.contact-form .btn-cta {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  min-width: 240px;
}

/* Bold, title-case, dark labels (the readable referrals/testimonials fix —
   not the faint uppercase default). Inter for clarity. Scoped so the modal
   form keeps its own label styling. */
.contact-page-form.contact-form label {
  font-family: var(--body);
  text-transform: none;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .contact-page-form.contact-form {
    grid-template-columns: 1fr;
  }

  .contact-page-form.contact-form .btn-cta {
    justify-self: stretch;
    width: 100%;
  }
}

/* Info card: soft off-white surface, rounded, hairline border + soft shadow. */
.contact-card {
  background: linear-gradient(165deg, var(--green-mid) 0%, var(--green) 100%);
  border: 1px solid oklch(100% 0 0 / 0.10);
  border-top: 3px solid var(--green-cta);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
  color: var(--white);
}

.contact-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--white);
  margin: 0 0 0.5em;
}

.contact-card__addr {
  color: oklch(90% 0.02 145);
  margin: 0 0 1.1em;
}

.contact-card__call {
  margin: 0 0 1.2em;
}

.contact-card__call a {
  color: oklch(86% 0.14 128);
  font-weight: 700;
  font-size: 1.15rem;
}

.contact-card__call a:hover,
.contact-card__call a:focus-visible {
  color: var(--white);
}

.contact-card__label {
  display: block;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: oklch(82% 0.10 128);
  margin: 0 0 0.35em;
}

.contact-card__hours .hours-list {
  margin: 0;
}

.contact-card__hours .hours-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}

.contact-card__hours dt {
  font-weight: 600;
  color: var(--white);
}

.contact-card__hours dd {
  margin: 0;
  color: oklch(85% 0.02 145);
}

/* Stack on tablet/mobile: form first, then the info card (production order). */
@media (max-width: 768px) {
  .contact-layout__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- Service-page "go-to company" white section ----------
   Clean white intro block with the v5 typography: open Inter heading, an Inter
   eyebrow kicker, bolder body copy, and a centered CTA. Mirrors the homepage
   .intro type scale. The --caps modifier (roofing page) centers + uppercases. */
.lead-section {
  background: var(--white);
  padding: 80px 0 70px;
}

.lead-section .lead-inner {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

.lead-section .eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--green-cta);
}

.lead-section h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(2rem, 3.7vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--green);
  margin-bottom: 0.7em;
}

.lead-section p {
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.lead-section .lead-cta {
  margin-top: 1.4em;
}

/* --- Roofing-page CAPS variant (page-specific) ---------------------------
   Production centers AND uppercases this block. Scoped to .lead-section--caps
   so the HOMEPAGE section headings stay Title Case (per the homepage decision).
   Eyebrow: uppercase, letter-spaced, green, Montserrat (the display font).
   Heading: uppercase, centered, bold Montserrat. Body: centered, ~70ch. */
.lead-section--caps .eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

.lead-section--caps h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.22;
}

.lead-section--caps p {
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Service-page "roof problem" green-gradient feature ----------
   Same white->green gradient as the homepage .intro, two columns: LEFT = an
   open-Inter Title-Case heading + body + a checklist (reuses the .gc-list
   check-circle styling) + closing line + CTA; RIGHT = a supporting photo. */
.feature-gradient {
  background: linear-gradient(180deg, var(--white) 0%, var(--mist) 34%,
    var(--green-mid) 100%);
  padding: 80px 0 100px;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 54px;
  align-items: center;
}

/* LEGIBILITY FIX: the left column previously used WHITE text, but it sits over
   the LIGHT (near-white) top of the white->green gradient, so the heading, body
   and checklist were nearly invisible. The column now gets its own light card
   (faint green-tinted off-white panel, rounded, padded, soft shadow) so DARK
   text reads clearly no matter what part of the gradient is behind it. All text
   inside is dark --ink / --green for AA contrast; the green check marks stay. */
.feature-body {
  background: var(--paper);            /* near-white, faint green tint */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 44px 44px 40px;
  box-shadow: var(--shadow-card);
}

.feature-body h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--green);
}

/* Dark body + list text on the light card (high AA contrast). */
.feature-body p {
  color: var(--ink);
  font-weight: 600;
}

.feature-body .feature-list {
  list-style: none;
  margin: 1.2em 0 1.4em;
  padding: 0;
  display: grid;
  gap: 13px;
  color: var(--ink);
  font-weight: 600;
}

.feature-body .feature-list li {
  position: relative;
  padding-left: 32px;
}

.feature-body .feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-cta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* CTA now sits on the LIGHT card, so the standard green-outline .btn reads
   clearly (green text/border on light, fills green on hover). The old
   white-fill override would be invisible here, so it is removed. */
.feature-body .feature-cta {
  margin-top: 0.4em;
}

.feature-figure {
  margin: 0;
}

/* Shingle photo: roughly SQUARE (1:1) with nicely rounded corners, matching
   production (client likes rounded). aspect-ratio keeps it square at any column
   width; object-fit: cover crops without distortion. */
.feature-figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   ABOUT PAGE (v5) — Scott-focused owner profile + secondary team
   ============================================================ */

/* ---------- Reusable circle avatar ----------
   One circle treatment used at two sizes: --lg = Scott's hero portrait
   (he's the focus), --sm = the secondary team members. object-fit: cover
   + a fixed 1:1 box crops to a clean circle at any source aspect ratio.
   Default object-position centers the face; per-person modifiers below
   nudge the crop where a source needs it (Brittany clips otherwise). A
   subtle ring + soft shadow lift the portrait off the page. */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
  background: var(--mist);
  box-shadow: 0 0 0 6px var(--white), 0 14px 34px oklch(20% 0.04 150 / 0.20),
    0 0 0 7px var(--line);
}

.avatar--lg {
  width: 220px;
  height: 220px;
}

.avatar--sm {
  width: 150px;
  height: 150px;
}

/* Scott: head sits in the upper-center of the steps photo (seated, with the
   dog below), so pull the crop slightly UP from center to frame his face. */
.avatar--scott {
  object-position: center 30%;
}

/* Brittany: her source is framed FURTHER BACK and a plain center crop clips
   her forehead. Raise the crop window toward the top of the image so MORE of
   her head shows inside the circle. (Tuned to 22% — her full head is in frame
   without cropping the forehead; lower the % to show even more headroom.) */
.avatar--brittany {
  object-position: center 22%;
}

/* ---------- Scott profile section (the focus) ----------
   Two columns on desktop: bio LEFT (wider, 1.3fr), large portrait RIGHT (1fr).
   Clean white surface, generous vertical rhythm. */
.owner-profile {
  background: var(--white);
  padding: 80px 0 70px;
}

.owner-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}

/* "Owner" eyebrow sits above his name — small, uppercase, brand green. */
.owner-eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green-cta);
  margin: 0 0 0.35em;
}

/* His name = the section heading (no redundant "About" heading stacked). */
.owner-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--green);
  margin: 0 0 0.6em;
}

.owner-body p {
  color: var(--ink);
  font-weight: 500;
}

.owner-cta {
  margin-top: 1em;
}

.owner-figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* ---------- Team grid (About page) — secondary, smaller ----------
   The --pair modifier centers TWO members side by side (Scott is profiled
   separately above, so the team grid is the two remaining members). */
.team-section {
  background: var(--mist);
  padding: 70px 0 84px;
}

.team-heading {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--green);
  text-align: center;
  margin: 0 0 1.6em;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Two-member centered pair (the secondary team below Scott). */
.team-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 220px));
  justify-content: center;
  gap: 56px;
}

.team-member {
  text-align: center;
}

.team-member .avatar {
  margin: 0 auto 16px;
}

.team-member h3 {
  margin-bottom: 0.15em;
}

.team-member .role {
  font-family: var(--display);
  color: var(--green-cta);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.6em;
}

/* Screen-reader-only text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   TESTIMONIALS PAGE — review wall + leave-a-review form
   Light, dark-on-cream, all reviews shown at once (no carousel, no
   auto-advance). A CSS-columns masonry so cards of different lengths
   pack tightly and the grid grows when more reviews are added.
   ============================================================ */

/* --- Reviews wall section --- */
.reviews-wall {
  background: linear-gradient(180deg, var(--white) 0%, var(--mist) 100%);
  padding: 76px 0 88px;
}

.reviews-wall__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.reviews-wall__head h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: 0.005em;
  color: var(--green);
  margin-bottom: 0.45em;
}

.reviews-wall__stars {
  margin: 0 0 0.4em;
}

.reviews-wall__stars .stars {
  color: var(--gold);
  letter-spacing: 0.22em;
  font-size: 1.5rem;
  /* gentle glow so the gold reads as a crafted accent, not flat glyphs */
  text-shadow: 0 1px 0 oklch(70% 0.13 80 / 0.35);
}

.reviews-wall__sub {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0;
}

/* CSS-columns masonry: 2 columns desktop, 1 mobile (set in the media query).
   column-gap controls horizontal space; each card's margin-bottom is the
   vertical rhythm. break-inside: avoid keeps a card whole across the column
   break. The list resets default <ul> styling. */
.reviews-wall__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 30px;
}

/* --- One review card --- */
.review-quote {
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  background: oklch(98% 0.01 95);          /* warm cream, faint warm tint */
  border: 1px solid oklch(91% 0.012 120);  /* full hairline — no side stripe */
  border-radius: var(--radius-lg);
  padding: 34px 34px 30px;
  margin: 0 0 30px;
  box-shadow: 0 8px 24px oklch(20% 0.04 150 / 0.10);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Decorative quote mark, low-opacity brand green, top-right. Purely ornamental
   (aria-hidden via ::before content), it adds polish without competing with the
   review text. Sits behind the content so it never blocks reading. */
.review-quote::before {
  content: "\201D";                         /* right double quotation mark */
  position: absolute;
  top: -0.18em;
  right: 0.12em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 6.5rem;
  line-height: 1;
  color: oklch(45% 0.07 150 / 0.10);        /* faint forest green */
  pointer-events: none;
  z-index: 0;
}

.review-quote > * {
  position: relative;
  z-index: 1;
}

.review-quote:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px oklch(20% 0.04 150 / 0.16);
}

.review-quote .stars {
  color: var(--gold);
  letter-spacing: 0.16em;
  font-size: 1.18rem;
  margin: 0 0 0.7em;
}

.review-quote blockquote {
  margin: 0 0 1.1em;
  font-size: 1.04rem;
  line-height: 1.66;
  color: var(--ink);                        /* dark on cream — high contrast */
}

.review-quote__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--green);                      /* brand green name */
  margin: 0;
}

/* --- Scroll reveal: subtle staggered fade + slide-up.
   The hidden start-state is gated on the .js-reveal class that main.js adds to
   <html> ONLY when JS runs AND motion is allowed. So if JS is disabled (or the
   observer is unsupported, or reduced-motion is on) the cards are visible by
   default — no FOUC, no permanently-hidden content. .in-view clears the offset;
   the per-card stagger comes from an inline --reveal-delay set by JS. */
.js-reveal .reviews-wall__grid[data-reveal-group] .review-quote {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal .reviews-wall__grid[data-reveal-group] .review-quote.in-view {
  opacity: 1;
  transform: none;
}

/* --- Leave-a-review form section --- */
.review-cta {
  background: var(--white);
  padding: 18px 0 84px;
}

.review-cta__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}

.review-cta__eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--green-cta);
  margin: 0 0 0.3em;
}

.review-cta__intro h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--green);
  margin: 0;
}

/* Review form: Name / Email / Phone on a 3-across responsive row (like the
   referrals form); Rating + experience span the full width. Reuses the shared
   .contact-form input/focus styling. */
.review-form.contact-form {
  max-width: 760px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 22px;
  align-items: start;
}

/* Full-width rows (Rating select, experience textarea) span all 3 columns. */
.review-form.contact-form .field--full {
  grid-column: 1 / -1;
}

/* Submit spans the full grid width and centers its own content. */
.review-form.contact-form .btn-cta {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  min-width: 260px;
}

/* Review form labels: title case, bold, dark (the readable fix — the faint
   uppercase default was hard to read). Inter for clarity. */
.review-form.contact-form label {
  font-family: var(--body);
  text-transform: none;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0;
}

/* Centered image utility. */
.img-center {
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Contact details block. */
.contact-details p {
  margin: 0.3em 0;
}

/* ---------- Contact form ---------- */
.contact-form {
  display: grid;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
}

.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form label {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--green-cta);
  box-shadow: 0 0 0 3px oklch(52% 0.13 135 / 0.28);
}

.contact-form .btn-cta {
  justify-self: stretch;
  width: 100%;
}

/* ---------- Contact modal ---------- */
.contact-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(15% 0.02 150 / 0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.contact-modal.open {
  display: flex;
}

.contact-modal .modal-card {
  background: var(--white);
  color: var(--ink);
  border-radius: 10px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.35);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 32px;
  position: relative;
}

.contact-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 8px;
}

.contact-modal h2 {
  color: var(--green);
  margin-top: 0;
  text-transform: uppercase;
}

/* Sticky / floating contact button (bottom-right). */
.sticky-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
}

/* ---------- Accessibility: skip link + focus ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green-cta);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 300;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--green-cta);
  outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -90px;
  }

  .gc-panel {
    margin-right: -30px;
    padding: 40px 34px;
  }
}

@media (max-width: 768px) {
  /* header: switch from the 3-col desktop grid to a wrapping flex row so the
     logo + hamburger sit on the first line and the collapsed nav groups +
     social stack full-width below. */
  .site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    row-gap: 0;
    min-height: 76px;
  }

  .site-header .brand {
    order: 1;
    justify-self: start;
  }

  .site-header .brand img {
    height: 56px;
  }

  .nav-toggle {
    display: inline-block;
    order: 2;
  }

  /* both nav groups stack full-width below the logo/hamburger row */
  .site-nav {
    display: none;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--green);
    width: 100%;
    padding: 4px 0;
  }

  .site-nav.nav-primary { order: 3; }
  .site-nav.nav-secondary { order: 4; }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    padding: 13px 22px;
    letter-spacing: 0.05em;
  }

  .site-nav a::after {
    display: none;
  }

  /* Hide the header social icons on mobile to keep the collapsed bar tidy
     (logo + hamburger only). The footer carries the same social links, so
     mobile users still reach Facebook/Google. */
  .site-header .social {
    display: none;
  }

  /* dropdown becomes inline block on mobile */
  .dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    background: oklch(0% 0 0 / 0.2);
    min-width: 0;
    border-radius: 0;
    display: block;
  }

  .hero {
    min-height: 78vh;
    padding-bottom: 90px;
  }

  .hero.hero--page {
    min-height: 42vh;
    padding-bottom: 0;
  }

  /* feature green-gradient section collapses to one column, photo on top */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .feature-body {
    padding: 32px 26px 30px;
  }

  .feature-figure {
    order: -1;
  }

  .feature-gradient {
    padding: 60px 0 80px;
  }

  .lead-section {
    padding: 60px 0 50px;
  }

  /* cards stack 2-up, then 1-up; reduce overlap */
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: -70px;
  }

  /* sections collapse to one column */
  .intro {
    padding: 60px 0 80px;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .intro-figure {
    position: static;
    top: auto;
    order: -1;
  }

  .gc {
    padding: 60px 0;
  }

  .gc-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .gc-panel {
    margin-right: 0;
    margin-bottom: -40px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .gc-figure img {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    min-height: 260px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .carousel-prev { left: 2px; }
  .carousel-next { right: 2px; }

  .review-card {
    padding: 30px 26px;
  }

  /* Reviews wall: single column on tablet/mobile so each review reads full
     width; the form's 3-across row collapses to one column too. */
  .reviews-wall__grid {
    columns: 1;
  }

  .review-form.contact-form {
    grid-template-columns: 1fr;
  }

  .review-form.contact-form .btn-cta {
    justify-self: stretch;
    width: 100%;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  /* About: owner profile collapses to one column, portrait FIRST so Scott
     leads the page on mobile (he's the focus). */
  .owner-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: center;
    text-align: center;
  }

  .owner-figure {
    order: -1;
  }

  .owner-cta {
    align-self: center;
  }

  .owner-profile {
    padding: 56px 0 50px;
  }

  /* The two-member team pair stacks vertically, centered. */
  .team-grid--pair {
    grid-template-columns: minmax(0, 220px);
    gap: 36px;
  }

  .team-section {
    padding: 52px 0 64px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }

  .service-cards {
    grid-template-columns: 1fr;
    margin-top: -60px;
    max-width: 340px;
  }

  .contact-modal .modal-card {
    padding: 22px;
  }

  .review-card blockquote {
    font-size: 1rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* hide the looping <video> and show the poster image instead */
  .hero video,
  .quality video {
    display: none;
  }

  .hero img.hero-media,
  .quality img.quality-media {
    display: block;
  }

  /* Service-page video hero: hide the looping <video>, show the poster.
     The .hero rules above already cover .hero--page since it carries .hero. */

  .carousel-track {
    scroll-behavior: auto;
  }

  /* Reviews wall reveal: show every card immediately, no fade/slide. Overrides
     the hidden default so reduced-motion users see all reviews at once. (main.js
     also skips adding .js-reveal under reduced-motion; this is belt-and-suspenders
     in case the OS setting changes after load.) */
  .js-reveal .reviews-wall__grid[data-reveal-group] .review-quote,
  .reviews-wall__grid[data-reveal-group] .review-quote {
    opacity: 1;
    transform: none;
    transition: none;
  }
}