/* ==========================================================================
   Renovations By Wine: production stylesheet
   Design tokens follow the business's existing brand cues (logo greens,
   Playfair Display + Source Sans Pro pairing already in use on the live
   site) rather than the generic template palette.
   ========================================================================== */

:root {
  /* Color tokens */
  --color-ink: #15201a;          /* deep pine/near-black, matches nav bg */
  --color-ink-soft: #24312a;
  --color-green: #4f6b3a;        /* primary brand green, WCAG-AA on cream */
  --color-green-dark: #38492c;
  --color-green-light: #8faf6a;  /* logo accent tint, decorative use only */
  --color-cream: #f7f4ee;        /* warm off-white background */
  --color-cream-2: #efe9dd;
  --color-cream-3: #efeae0;
  --color-wood: #b98a52;         /* warm wood accent */
  --color-white: #ffffff;
  --color-text: #1c1f1b;
  --color-text-muted: #52584e;
  --color-border: #ded6c4;
  --color-focus: #2f6fed;
  --color-success-bg: #eaf3e4;
  --color-success-text: #2e4620;

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Spacing scale (fluid) */
  --space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-xs:  clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-sm:  clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-md:  clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-lg:  clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);
  --space-xl:  clamp(3rem, 2.4rem + 3vw, 5.5rem);
  --space-2xl: clamp(4rem, 3.2rem + 4vw, 7.5rem);

  --container-max: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 10px rgba(21, 32, 26, 0.06);
  --shadow-md: 0 12px 32px rgba(21, 32, 26, 0.12);
  --shadow-lg: 0 24px 60px rgba(21, 32, 26, 0.18);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip (not "hidden"): "hidden" on html/body breaks
   position: sticky for descendants in Chromium; "clip" gives the same
   no-horizontal-scroll guarantee without that side effect. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; width: 100%; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  /* Reserves space for the fixed .mobile-call-bar on phones so it never
     covers the last bit of page content; zeroed out at ≥768px below. */
  padding-bottom: 78px;
}
img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 var(--space-sm); color: var(--color-ink); }
h1 { font-size: clamp(2.3rem, 1.7rem + 3vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 1.6rem + 1.6vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + 0.6vw, 1.55rem); }
p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); max-width: 62ch; }
a { color: inherit; text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
button { font: inherit; }
input, textarea, select { font: inherit; }

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

/* Visible, high-contrast focus ring everywhere (keyboard nav) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
/* Keeps in-page anchor jumps (nav links, footer links, "Get a deck quote",
   etc.) from landing a heading directly under the sticky header. 100px
   comfortably clears the header at every breakpoint (it's ~73–94px tall). */
.section, .hero { scroll-margin-top: 100px; }
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--color-cream-2); }
.section--dark {
  background: var(--color-ink);
  color: var(--color-cream);
}
.section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--dark p { color: rgba(247,244,238,0.78); }

.section-head { max-width: 46rem; margin-bottom: var(--space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--color-green);
  margin-bottom: var(--space-2xs);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--color-wood);
  display: inline-block;
}
.section--dark .eyebrow { color: var(--color-green-light); }
/* Where an eyebrow sits inside a scroll-revealed block, its accent line
   draws in just after the text fades up, instead of appearing at full
   width immediately. */
.reveal .eyebrow::before { width: 0; transition: width 550ms var(--ease) 200ms; }
.reveal.is-visible .eyebrow::before { width: 24px; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  min-height: 48px;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--color-green); color: var(--color-white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-green-dark); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-outline:hover { background: var(--color-ink); color: var(--color-white); }
.section--dark .btn-outline { color: var(--color-white); border-color: rgba(255,255,255,0.55); }
.section--dark .btn-outline:hover { background: var(--color-white); color: var(--color-ink); }
.btn-whatsapp { background: #25D366; color: #0b3d20; }
.btn-whatsapp:hover { background: #1ebe5b; }
.btn-block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(21, 32, 26, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  color: var(--color-white);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.85rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-white);
  flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-green-light); }

.primary-nav { display: none; }
.primary-nav ul { display: flex; align-items: center; gap: var(--space-md); }
.primary-nav a {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0.1rem;
  position: relative;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-green-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-call {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--color-white);
  font-size: 0.95rem;
}
.header-call svg { width: 18px; height: 18px; color: var(--color-green-light); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--color-white);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-ink);
  color: var(--color-white);
  z-index: 600;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) clamp(1.25rem, 6vw, 3rem);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease), visibility var(--dur-med);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.mobile-nav a { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; }
/* Links cascade in just after the panel itself slides into place, rather
   than all appearing at once, a small layered-motion touch on top of the
   panel's own slide transition above. */
.mobile-nav li {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
.mobile-nav.is-open li { opacity: 1; transform: none; }
.mobile-nav li:nth-child(1) { transition-delay: 80ms; }
.mobile-nav li:nth-child(2) { transition-delay: 130ms; }
.mobile-nav li:nth-child(3) { transition-delay: 180ms; }
.mobile-nav li:nth-child(4) { transition-delay: 230ms; }
.mobile-nav li:nth-child(5) { transition-delay: 280ms; }
.mobile-nav li:nth-child(6) { transition-delay: 330ms; }
.mobile-nav .btn { align-self: flex-start; }
.mobile-nav-contact { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; color: rgba(255,255,255,0.75); }
.mobile-nav-contact a { font-weight: 700; color: var(--color-white); }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(143,175,106,0.25), transparent 60%),
              linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-soft) 55%, #2b3a2f 100%);
  color: var(--color-white);
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 46px);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.hero-copy { max-width: 40rem; }
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}
.hero-rating .stars { color: #f3c14d; letter-spacing: 1px; }
.hero h1 { color: var(--color-white); }
.hero-sub { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); color: rgba(247,244,238,0.85); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: var(--space-md); }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero-meta-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: rgba(247,244,238,0.85); }
.hero-meta-item svg { width: 20px; height: 20px; color: var(--color-green-light); flex-shrink: 0; }

.hero-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
}

/* Hero content sits above the fold, so it animates in on load rather than
   on scroll (the .reveal/IntersectionObserver system below handles
   everything else). A short, staggered fade-up per element, kept to
   opacity/transform only so it's cheap to composite, and neutralized
   site-wide by the prefers-reduced-motion rule above. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero-rating, .hero h1, .hero-sub, .hero-actions, .hero-meta {
  animation: hero-fade-up 760ms var(--ease) both;
}
.hero-rating { animation-delay: 60ms; }
.hero h1 { animation-delay: 140ms; }
.hero-sub { animation-delay: 240ms; }
.hero-actions { animation-delay: 340ms; }
.hero-meta { animation-delay: 420ms; }

/* ---------- Photo placeholder (used until real project photos are supplied) --- */
.photo-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: var(--pf-ratio, 4 / 3);
  background:
    linear-gradient(180deg, rgba(21,32,26,0.55), rgba(21,32,26,0.72)),
    repeating-linear-gradient(100deg, #35462f 0 34px, #2c3b28 34px 68px);
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  transition: transform 650ms var(--ease);
}
/* Subtle image-zoom on hover, clipped by the frame's own overflow:hidden.
   Self-contained so it works the same whether the frame sits alone (About,
   Service Areas) or inside a card (Services, Projects), same effect,
   same easing, everywhere it appears. */
.photo-frame:hover { transform: scale(1.045); }
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 64px);
  mix-blend-mode: multiply;
}
.photo-frame-label {
  position: relative;
  z-index: 1;
  padding: 1rem 1.15rem;
  font-size: 0.82rem;
  line-height: 1.4;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  width: 100%;
}
.photo-frame-label strong { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.photo-frame-tag {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  z-index: 1;
  background: rgba(255,255,255,0.92);
  color: var(--color-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--color-cream-3);
  border-block: 1px solid var(--color-border);
}
.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  justify-content: center;
  padding-block: var(--space-sm);
  text-align: center;
}
.trust-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-ink);
}
.trust-list svg { width: 18px; height: 18px; color: var(--color-green); }

/* ---------- About / intro ---------- */
.about-grid { display: grid; gap: var(--space-lg); align-items: center; }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-top: var(--space-md); }
.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.stat-card strong { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--color-green); }
.stat-card span { font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- Services ---------- */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card .photo-frame { --pf-ratio: 16/10; border-radius: 0; }
.service-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.service-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--color-cream-2);
  color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.35rem;
}
.service-icon svg { width: 24px; height: 24px; }
.service-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.service-list li { display: flex; gap: 0.5rem; font-size: 0.92rem; color: var(--color-text-muted); }
.service-list svg { width: 16px; height: 16px; margin-top: 0.2rem; color: var(--color-green); flex-shrink: 0; }
.service-card .btn { align-self: flex-start; margin-top: auto; }
.service-card--secondary { background: var(--color-cream-2); }

/* ---------- Why us ---------- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.why-card { display: flex; gap: 1rem; }
.why-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 14px;
  background: rgba(143,175,106,0.14);
  color: var(--color-green-light);
  display: flex; align-items: center; justify-content: center;
}
.why-icon svg { width: 26px; height: 26px; }
.why-card h3 { color: var(--color-white); margin-bottom: 0.35rem; font-size: 1.2rem; }
.why-card p { margin: 0; font-size: 0.95rem; }

/* ---------- Projects / featured work ---------- */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.project-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.project-card .photo-frame { --pf-ratio: 4/3; border-radius: 0; }
.project-pair { display: grid; grid-template-columns: 1fr 1fr; }
.project-pair .photo-frame { --pf-ratio: 1/1; border-radius: 0; }
.project-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.project-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-green);
  background: rgba(79,107,58,0.1);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.project-quote { font-style: italic; color: var(--color-ink); border-left: 3px solid var(--color-wood); padding-left: 0.9rem; margin-top: 0.6rem; font-size: 0.95rem; }
.project-quote cite { display: block; margin-top: 0.35rem; font-style: normal; font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- Reviews ---------- */
.reviews-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: -0.5rem; margin-bottom: var(--space-md); flex-wrap: wrap; }
.review-scroller {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin: 0 calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  scrollbar-width: thin;
  scrollbar-color: var(--color-green) var(--color-cream-2);
}
.review-card {
  scroll-snap-align: start;
  flex: 0 0 min(88vw, 380px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review-stars { color: #e5a53a; letter-spacing: 2px; margin-bottom: 0.6rem; font-size: 1rem; }
.review-quote { flex: 1; font-size: 0.98rem; color: var(--color-text); }
.review-name { font-weight: 800; color: var(--color-ink); margin-top: 0.75rem; }
.review-meta { font-size: 0.82rem; color: var(--color-text-muted); }
.review-controls { display: flex; gap: 0.6rem; }
.carousel-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.carousel-btn:hover:not(:disabled) { background: var(--color-green); border-color: var(--color-green); color: var(--color-white); transform: translateY(-2px); }
.carousel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.carousel-btn svg { width: 18px; height: 18px; }
.review-disclosure { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-sm); }

/* ---------- Service areas ---------- */
.area-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }
.area-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-sm); }
.area-chip {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.area-chip:hover { transform: translateY(-2px); border-color: var(--color-green); box-shadow: var(--shadow-sm); }
.area-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-sm);
}
.area-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 0.85rem; max-width: 52rem; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease);
}
.faq-item summary:hover { background: var(--color-cream-2); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-cream-2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.faq-item summary .plus::before, .faq-item summary .plus::after {
  content: "";
  position: absolute;
  background: var(--color-green);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item summary .plus::before { width: 12px; height: 2px; }
.faq-item summary .plus::after { width: 2px; height: 12px; }
.faq-item[open] summary .plus::after { transform: rotate(90deg) scaleY(0); }
.faq-answer { padding: 0 1.3rem 1.2rem; color: var(--color-text-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--color-green-dark), var(--color-ink));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) clamp(1.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}
.cta-band h2 { color: var(--color-white); margin-bottom: 0.4rem; }
.cta-band p { color: rgba(247,244,238,0.85); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label { font-weight: 700; font-size: 0.9rem; color: var(--color-ink); }
.form-field .hint { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-text);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 4px rgba(79,107,58,0.15);
  outline: none;
}
.form-field input:invalid:not(:placeholder-shown) { border-color: #b3402c; }
.form-note { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.75rem; }
.form-status {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: var(--space-sm);
  font-weight: 700;
  font-size: 0.92rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: var(--color-success-bg); color: var(--color-success-text); }
.form-status.is-error { background: #fbe7e3; color: #7a2416; }

.contact-info { display: flex; flex-direction: column; gap: var(--space-md); }
.info-card {
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.info-card h3 { color: var(--color-white); }
.info-list { display: flex; flex-direction: column; gap: 0.9rem; }
.info-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: rgba(247,244,238,0.9); }
.info-list svg { width: 20px; height: 20px; color: var(--color-green-light); flex-shrink: 0; margin-top: 0.1rem; }
.info-list a { font-weight: 700; color: var(--color-white); }
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hours-table td { padding: 0.35rem 0; color: rgba(247,244,238,0.88); }
.hours-table td:last-child { text-align: right; font-weight: 700; color: var(--color-white); }
.social-row { display: flex; gap: 0.6rem; margin-top: var(--space-sm); }
.social-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social-btn svg { width: 20px; height: 20px; }
.social-btn:hover { background: var(--color-green); transform: translateY(-2px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: rgba(247,244,238,0.78); padding-block: var(--space-xl) var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.footer-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.75rem; }
.footer-brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer-brand span { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--color-white); }
.footer-tagline { font-style: italic; color: var(--color-green-light); }
.footer-col h4 { color: var(--color-white); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; margin-bottom: 0.9rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.2rem; }
/* Vertical padding brings each link's tappable box to WCAG 2.2's 2.5.8
   Target Size (Minimum), at least 24px tall, without changing the
   visible text size or spacing rhythm (the list gap was reduced to
   compensate, so overall column height is unchanged). */
.footer-col a { font-size: 0.94rem; display: inline-block; padding-block: 0.5rem; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--color-white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: 400;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }

/* Sticky mobile call bar */
.mobile-call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 450;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.08);
}
.mobile-call-bar a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-weight: 800;
  font-size: 0.92rem;
}
.mobile-call-bar a:first-child { color: var(--color-white); background: var(--color-green); }
.mobile-call-bar a:last-child { color: #0b3d20; background: #25D366; }
.mobile-call-bar svg { width: 18px; height: 18px; }

/* ==========================================================================
   Breakpoints, verified at 360/375/390/430/768/820/1024/1280/1440/1920
   ========================================================================== */

/* ≥431px: small phones landscape-ish spacing bump handled by clamp() already */

/* ≥600px: two-column stat cards become tighter, nav still hidden */
@media (min-width: 600px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}

/* ≥768px: tablets, show two-up grids */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .mobile-call-bar { display: none; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .header-call { display: inline-flex; }
}

/* ≥1024px: desktop nav + hero two columns */
@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .nav-toggle { display: none; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card--wide { grid-column: span 1; }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1.2fr 0.8fr; }
  .cta-band { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-band .cta-copy { max-width: 32rem; }
}

/* ≥1280px: a touch more breathing room */
@media (min-width: 1280px) {
  .service-grid { gap: var(--space-lg); }
}

/* ≥1440 / ≥1920: cap line lengths, let container max-width handle whitespace */
@media (min-width: 1440px) {
  :root { font-size: 17.5px; }
}
@media (min-width: 1920px) {
  .container { max-width: 1360px; }
}

/* Narrow phones (≤374px): tighten paddings a touch further */
@media (max-width: 374px) {
  .container { padding-inline: 1rem; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
}

/* Below 480px the header can't fit brand + CTA + hamburger. Drop the
   header CTA button; calling/quoting is still one tap away via the
   sticky mobile call bar and the hamburger menu's own CTA. */
@media (max-width: 479px) {
  .header-actions .btn-primary { display: none; }
  .brand small { display: none; }
}