/* ====================================================================
   SUTHERLAND LANDSCAPING — MAIN STYLESHEET
   Brand tokens: Slate 1 #384544, Slate 2 #2A3231, Green 1 #8FB15D,
   Green 2 #7E975D. Fonts: Montserrat (primary), Lora (secondary).
   ==================================================================== */


/* ── CSS Custom Properties ─────────────────────────────────────────── */
:root {
  /* Colors */
  --c-slate-1:        #384544;
  --c-slate-2:        #2A3231;
  --c-green-1:        #8FB15D;
  --c-green-2:        #7E975D;
  --c-green-tint:     #EEF3E3;
  --c-off-white:      #F3F2EB;
  --c-white:          #FFFFFF;
  --c-border:         rgba(56, 69, 68, 0.14);
  --c-text-muted:     rgba(56, 69, 68, 0.58);
  --c-white-muted:    rgba(255, 255, 255, 0.70);
  --c-white-dimmed:   rgba(255, 255, 255, 0.42);

  /* Typography */
  --f-primary:   'Montserrat', sans-serif;
  --f-secondary: 'Lora', serif;

  /* Layout */
  --nav-h:         72px;
  --max-w:         1200px;
  --pad-x:         clamp(20px, 5vw, 48px);
  --pad-section:   clamp(72px, 10vw, 120px);

  /* Transitions */
  --t-fast: 0.18s ease;
  --t-base: 0.28s ease;
}


/* ── Layout helpers ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ── Scroll reveal motion ─────────────────────────────────────────────
   Content-aware entrance system. Each element carries ONE [data-reveal]
   primitive describing how it should enter — chosen (in main.js) from the
   role its BEM class already implies, so motion supports the content
   instead of being sprayed on uniformly. A shared IntersectionObserver
   adds .is-visible to play it; --reveal-delay drives per-element stagger
   within a group. Reveals fire once and never re-hide, so scrolling back
   past a section stays calm and never distracts from what's incoming.   */
:root {
  --reveal-ease:  cubic-bezier(0.22, 1, 0.36, 1);  /* decelerating ease-out */
  --reveal-dur:   0.85s;
  --reveal-shift: 26px;
}

[data-reveal],
.reveal,
.scroll-reveal {
  opacity: 0;
  transition:
    opacity   var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease),
    filter    var(--reveal-dur) var(--reveal-ease),
    clip-path var(--reveal-dur) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible,
.reveal.is-visible,
.scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Default (bare .reveal / .scroll-reveal / fade-up) — a quiet lift. */
.reveal,
.scroll-reveal,
[data-reveal="fade-up"] { transform: translate3d(0, var(--reveal-shift), 0); }

/* Pure fade — for calm beats where movement would only add noise. */
[data-reveal="fade"] { transform: none; }

/* Complementary two-column sides — each drifts in from its own edge.
   Shift stays within the container gutter so it never spills horizontally. */
[data-reveal="left"]  { transform: translate3d(calc(var(--reveal-shift) * -1.35), 0, 0); }
[data-reveal="right"] { transform: translate3d(calc(var(--reveal-shift) *  1.35), 0, 0); }

/* Cards / tiles — settle upward while scaling from 0.965 for a hint of depth. */
[data-reveal="rise"] { transform: translate3d(0, 22px, 0) scale(0.965); }

/* Focal points (hero headline) — lift out of a soft blur, cinematic. */
[data-reveal="blur"] { transform: translate3d(0, 20px, 0); filter: blur(14px); }

/* Media / imagery — a clipped curtain reveal with a gentle settle. */
[data-reveal="clip"] { clip-path: inset(0 0 100% 0); transform: translate3d(0, 14px, 0); }
[data-reveal="clip"].is-visible { clip-path: inset(0 0 0 0); }

/* Once two-column layouts stack (≤768px), a sideways entrance no longer maps
   to anything on screen — fall back to the same quiet lift as everything else,
   which also removes any chance of horizontal overflow on narrow viewports. */
@media (max-width: 768px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translate3d(0, var(--reveal-shift), 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .reveal,
  .scroll-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
  }
}

.section {
  padding: var(--pad-section) 0;
}

.text-green { color: var(--c-green-1); }


/* ── Section headers ───────────────────────────────────────────────── */
.section-header {
  max-width: 720px;
  margin: 0 auto clamp(48px, 7vw, 80px);
}

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

.section-label {
  display: inline-block;
  font-family: var(--f-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--c-green-1);
  margin-bottom: 14px;
}

.section-heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.14;
  color: var(--c-green-2);
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.section-heading--white { color: var(--c-white); }
.section-heading--dark  { color: var(--c-slate-1); }

.section-subheading {
  font-family: var(--f-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--c-text-muted);
  text-wrap: balance;
}

.section-subheading--muted { color: var(--c-white-muted); }


/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 15px 34px;
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

.btn--primary {
  background: var(--c-green-1);
  border-color: var(--c-green-1);
  color: var(--c-slate-2);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--c-green-2);
  border-color: var(--c-green-2);
  color: var(--c-slate-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(143, 177, 93, 0.40);
  outline: none;
}

/* Ghost — on dark imagery (hero) */
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.70);
  color: var(--c-white);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--c-white);
  color: var(--c-white);
  transform: translateY(-2px);
  outline: none;
}

/* Outline — green on light backgrounds */
.btn--outline {
  background: transparent;
  border-color: var(--c-green-1);
  color: var(--c-green-2);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--c-green-1);
  border-color: var(--c-green-1);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(143, 177, 93, 0.30);
  outline: none;
}


/* ── NAVIGATION ────────────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: background var(--t-base), box-shadow var(--t-base);
}

#navbar.scrolled {
  background: var(--c-slate-2);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.22);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  gap: 32px;
}

.nav-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo {
  height: 58px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin-left: auto;
}

.nav-link {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  transition: color var(--t-fast);
  white-space: nowrap;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-green-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}

.nav-link:hover,
.nav-link.is-active,
.nav-link.is-current { color: var(--c-white); }

.nav-link:hover::after,
.nav-link.is-active::after,
.nav-link.is-current::after { transform: scaleX(1); }

/* CTA is now a solid green button */
.nav-cta {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-green-1);
  padding: 12px 24px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.nav-cta:hover {
  background: var(--c-green-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(143, 177, 93, 0.42);
}

/* Current page — settled/pressed look, no hover lift */
.nav-cta.is-current {
  background: var(--c-green-2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Services dropdown (desktop) */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  /* inherits .nav-link typography */
}

.nav-dropdown__caret {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--t-fast);
}

.nav-dropdown:hover .nav-dropdown__caret,
.nav-dropdown:focus-within .nav-dropdown__caret {
  transform: rotate(-135deg) translateY(-1px);
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 190px;
  background: var(--c-slate-2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.30);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 1001;
}

/* Bridge the gap so the menu doesn't close when the cursor crosses it */
.nav-dropdown__menu::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__item {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 11px 16px;
  transition: background var(--t-fast), color var(--t-fast);
}

.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
  background: var(--c-green-1);
  color: var(--c-white);
  outline: none;
}

/* Current sub-page inside the Services dropdown */
.nav-dropdown__item.is-current {
  color: var(--c-white);
  background: rgba(143, 177, 93, 0.18);
  box-shadow: inset 3px 0 0 var(--c-green-1);
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-hamburger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-white);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: linear-gradient(160deg, #2A3231 0%, #1a2120 100%);
  flex-direction: column;
  align-items: center;
  /* Scroll instead of clipping when the menu is taller than a short phone;
     top pad clears the fixed header, bottom pad reserves room for the tagline. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--nav-h) + 16px) 20px 76px;
}

.nav-overlay::before {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: var(--c-green-1);
  opacity: 0.04;
  border-radius: 50%;
  pointer-events: none;
}

.nav-overlay::after {
  content: 'Transforming Properties. Developing People.';
  font-family: var(--f-secondary);
  font-style: italic;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.04em;
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

.nav-overlay.is-open { display: flex; }
.nav-overlay__close { display: none; }

.nav-overlay nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 0;
  margin-top: auto;    /* centre the menu in the free space, but let it */
  flex-shrink: 0;      /* scroll rather than clip when the screen is short */
}

.nav-overlay.is-open .nav-overlay__link {
  opacity: 0;
  animation: navLinkIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-overlay.is-open .nav-overlay__link:nth-child(1) { animation-delay: 0.06s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(2) { animation-delay: 0.12s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(3) { animation-delay: 0.18s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(4) { animation-delay: 0.24s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(5) { animation-delay: 0.30s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(6) { animation-delay: 0.36s; }

@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-overlay__link {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: clamp(22px, 5.5vw, 30px);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.78);
  padding: 16px 40px;
  text-align: center;
  width: 100%;
  position: relative;
  transition: color var(--t-fast);
}

.nav-overlay__link::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--c-green-1);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.nav-overlay__link:hover { color: var(--c-white); }
.nav-overlay__link:hover::after { width: 40px; }

.nav-overlay__phone {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-green-1);
  margin-top: 28px;
  margin-bottom: auto;   /* balances the nav's margin-top:auto to centre the block */
  flex-shrink: 0;
  letter-spacing: 0.04em;
  transition: color var(--t-fast);
}

.nav-overlay__phone:hover { color: var(--c-white); }

.nav-overlay__group-label {
  /* Same Montserrat family as the links — a small green section label,
     not italic, so the menu reads as one consistent type system. */
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-green-1);
  padding: 18px 40px 2px;
  text-align: center;
}

.nav-overlay__link--sub {
  /* Same font style as About Us / Careers / Contact Us — just tighter
     vertical spacing so the two service links nest under the label. */
  padding-top: 10px;
  padding-bottom: 10px;
}


/* ── HERO ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* fill viewport exactly; dvh accounts for mobile browser bars */
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: var(--nav-h);
}

.hero__content {
  max-width: 640px;
}

/* Figma: Lora Medium 20 / Auto / #8FB15D (not italic) */
.hero__eyebrow {
  display: block;
  font-family: var(--f-secondary);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.2;
  color: var(--c-green-1);
  margin-bottom: 18px;
}

/* Figma: Montserrat Bold 48 / Auto / letter-spacing 0 / #FFFFFF */
.hero__headline {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 48px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--c-white);
  margin-bottom: 24px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* Figma headline accent green #A0BC74 (distinct from brand green #8FB15D) */
.hero__headline-accent { color: #A0BC74; }

/* Figma: Montserrat Regular 20 / 160% / #FFFFFF / box 532 wide */
.hero__lead {
  font-family: var(--f-primary);
  font-weight: 400;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.6;
  color: var(--c-white);
  max-width: 532px;
  margin-bottom: 34px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
}

/* Forced line breaks reproduce the Figma wrap 1:1 on desktop; reflow on mobile */
.hero__lead br { display: inline; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}


/* ── WHY CHOOSE SUTHERLAND ─────────────────────────────────────────── */
.why {
  background: var(--c-off-white);
}

.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 80px);
}

.why__media {
  position: relative;
}

.why__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
}

.why__content .section-heading {
  margin-bottom: 20px;
}

.why__content .btn {
  margin-top: 30px;
}

/* Forced line breaks reproduce the target wrap 1:1; reflow on mobile (see media query) */
.why__content .section-subheading { text-wrap: initial; }


/* ── FEATURE STRIP ─────────────────────────────────────────────────── */
.feature-strip {
  position: relative;
  background-size: cover;
  background-position: center center;
  padding: clamp(28px, 3.5vw, 44px) 0;
  overflow: hidden;
}

.feature-strip__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 48px);
  max-width: 900px;
  margin-inline: auto;
}

.feature-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.feature-strip__icon {
  width: 40px;
  height: auto;
}

.feature-strip__text {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.4;
  color: var(--c-green-1);
  letter-spacing: 0.01em;
  max-width: 22ch;
  margin-inline: auto;
}


/* ── SERVICES — FEATURE CARDS ──────────────────────────────────────── */
.services {
  background: var(--c-off-white);
}

.services__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}

.service-tile {
  position: relative;
  display: block;
  min-height: clamp(320px, 34vw, 420px);
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(56, 69, 68, 0.12);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.service-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(56, 69, 68, 0.24);
}

.service-tile__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--c-green-1);
  transition: background var(--t-fast), transform var(--t-base);
}

.service-tile:hover .service-tile__arrow {
  background: var(--c-green-2);
  transform: rotate(45deg);
}

.service-tile__body {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(24px, 3vw, 34px);
}

.service-tile__title {
  font-family: var(--f-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--c-white);
  line-height: 1.2;
  margin-bottom: 10px;
}

.service-tile__desc {
  font-family: var(--f-secondary);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 340px;
}

.services__cta {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(36px, 5vw, 56px);
}

.services__cta-heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--c-slate-1);
}

.services__cta-text {
  font-family: var(--f-secondary);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text-muted);
}

.services__cta-btn {
  white-space: nowrap;
}


/* ── PROJECT GALLERY ───────────────────────────────────────────────── */
.gallery {
  background: var(--c-slate-2);
  padding: clamp(64px, 8vw, 104px) 0;
}

/* Gallery breaks out of the 1200px cap — near full-bleed strip like the design */
.gallery .container {
  max-width: none;
  padding: 0 clamp(16px, 2vw, 32px);
}

.gallery__heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--c-green-1);
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.gallery__carousel {
  position: relative;
}

.gallery__viewport {
  overflow: hidden;
  /* Fade the strip to transparent at both edges so side slides bleed off softly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.gallery__track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.gallery__slide {
  flex: 0 0 calc((100% - 40px) / 3); /* 3 per view, matches 20px gap */
  margin: 0;
}

.gallery__slide img {
  display: block;
  width: 100%;
  height: clamp(220px, 24vw, 300px);
  object-fit: cover;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--c-green-1);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(56, 69, 68, 0.28);
  transition: background var(--t-fast), transform var(--t-fast);
}

.gallery__arrow--prev { left: clamp(8px, 1.5vw, 24px); }
.gallery__arrow--next { right: clamp(8px, 1.5vw, 24px); }

.gallery__arrow:hover {
  background: var(--c-green-2);
  transform: translateY(-50%) scale(1.06);
}

.gallery__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: clamp(24px, 3vw, 36px);
}

.gallery__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

.gallery__dot.is-active {
  background: var(--c-green-1);
  transform: scale(1.25);
}


/* ── TESTIMONIALS ──────────────────────────────────────────────────── */
.testimonials {
  background: var(--c-off-white);
}

.testimonials__inner {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.testimonials__footer {
  text-align: center;
  margin-top: clamp(8px, 1vw, 12px);
}

/* Trustindex Google reviews widget wrapper. The plugin ships its own
   card/slider styling; this just constrains width and centres it. */
.reviews-embed {
  width: 100%;
}

.testimonials__heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--c-slate-1);
  margin-bottom: 20px;
}

.testimonials__text {
  font-family: var(--f-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: var(--c-text-muted);
  margin-bottom: 32px;
  text-wrap: balance;
}

.testimonials__top {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Reviews slider — white panel holding one review at a time, borderless.
   Placeholder reviews until the live Google feed returns content. */
.reviews-slider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}

.reviews-slider__viewport {
  flex: 0 1 840px;
  width: 840px;
  max-width: 100%;
  height: 472px;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: 0 8px 30px rgba(56, 69, 68, 0.08);
}

.reviews-slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.review-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(16px, 2.2vw, 24px);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 7vw, 96px);
}

/* Soft decorative quotation mark that anchors the composition */
.review-slide::before {
  content: "\201C";
  font-family: var(--f-secondary);
  font-size: clamp(88px, 12vw, 140px);
  line-height: 0.7;
  color: var(--c-green-1);
  opacity: 0.22;
}

.review-slide__stars {
  color: var(--c-green-1);
  font-size: 22px;
  letter-spacing: 5px;
  line-height: 1;
}

.review-slide__text {
  margin: 0;
  max-width: 660px;
  font-family: var(--f-secondary);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.75;
  color: var(--c-slate-1);
}

.review-slide__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(8px, 1.5vw, 16px);
}

.review-slide__avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-green-tint);
  color: var(--c-green-2);
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 18px;
}

.review-slide__who {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.review-slide__name {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-slate-1);
}

.review-slide__meta {
  font-family: var(--f-primary);
  font-size: 13px;
  color: var(--c-text-muted);
}

.reviews-slider__arrow {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--c-green-1);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

.reviews-slider__arrow:hover {
  background: var(--c-green-2);
  transform: scale(1.06);
}

.reviews-slider__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.reviews-slider__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: clamp(20px, 3vw, 28px);
}

.reviews-slider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(56, 69, 68, 0.20);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

.reviews-slider__dot.is-active {
  background: var(--c-green-1);
  transform: scale(1.25);
}

@media (max-width: 620px) {
  .reviews-slider__arrow { width: 40px; height: 40px; }
  .reviews-slider__viewport { height: auto; min-height: 380px; }
  .review-slide { height: 380px; }
}


/* ── START TODAY — CONTACT ─────────────────────────────────────────── */
.start {
  background: var(--c-green-1);
}

.start__card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
}

/* Dark scrim for photo-backed cards so centered copy stays readable */
.start__card--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 50, 49, 0.60);
  z-index: 1;
}

.start__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(36px, 5vw, 64px);
}

.start__heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  color: var(--c-white);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.start__subheading {
  font-family: var(--f-secondary);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--c-green-1);
  margin-bottom: 22px;
}

.start__body {
  font-family: var(--f-secondary);
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 16px;
}

.start__phone-btn {
  margin-top: 12px;
}

.start__form-wrap {
  background: var(--c-off-white);
  padding: clamp(24px, 3vw, 36px);
}


/* ── CONTACT FORM (shared) ─────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

.form-label {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-slate-1);
}

.form-required { color: var(--c-green-2); }

.form-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--c-text-muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--f-secondary);
  font-size: 15px;
  color: var(--c-slate-1);
  background: var(--c-white);
  border: 1px solid rgba(56, 69, 68, 0.26);
  border-radius: 0;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23384544' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px;
  padding-right: 44px;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.65;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--c-green-1);
  box-shadow: 0 0 0 3px rgba(143, 177, 93, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder { color: rgba(56, 69, 68, 0.36); }


/* ── RADIO PILLS (Contact page "Get Started" form) ─────────────────── */
.form-radio-field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;   /* let the fieldset shrink inside the grid */
}

.form-radio-field .form-label {
  display: block;
  width: 100%;
  margin-bottom: 9px;
  padding: 0;
}

.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.form-radio {
  display: inline-flex;
  cursor: pointer;
}

/* Visually hidden but focusable — the pill is the visible control. */
.form-radio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-radio__pill {
  display: inline-block;
  padding: 10px 16px;
  font-family: var(--f-secondary);
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--c-slate-1);
  background: var(--c-white);
  border: 1px solid rgba(56, 69, 68, 0.26);
  border-radius: 0;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}

.form-radio:hover .form-radio__pill {
  border-color: var(--c-green-1);
}

.form-radio__input:checked + .form-radio__pill {
  background: var(--c-green-1);
  border-color: var(--c-green-1);
  color: var(--c-white);
}

.form-radio__input:focus-visible + .form-radio__pill {
  border-color: var(--c-green-1);
  box-shadow: 0 0 0 3px rgba(143, 177, 93, 0.30);
}

.form-message {
  font-family: var(--f-primary);
  font-size: 13.5px;
  font-weight: 600;
  padding: 14px 18px;
  line-height: 1.5;
  display: none;
}

.form-message--success {
  display: block;
  background: rgba(143, 177, 93, 0.10);
  border: 1px solid var(--c-green-1);
  color: #5a7835;
}

.form-message--error {
  display: block;
  background: rgba(180, 60, 60, 0.07);
  border: 1px solid rgba(180, 60, 60, 0.38);
  color: #8B1F1F;
}

.form-submit {
  width: 100%;
  padding: 16px 24px;
  background: var(--c-green-1);
  color: var(--c-white);
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-submit:hover,
.form-submit:focus-visible {
  background: var(--c-slate-1);
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(56, 69, 68, 0.50);
  outline: none;
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════════════
   FORMINATOR OVERRIDES — makes the code-defined Forminator contact forms
   (inc/forminator-forms.php) render identically to the original hand-coded
   design. Scoped to .contact-form so other Forminator forms are untouched.
   Field markup reference:
     .forminator-row            → a form row (two col-6 or one col-12)
     .forminator-col(-6/-12)    → column
     .forminator-field          → label + control wrapper
     .forminator-label          → field label (.forminator-required = the *)
     .forminator-input          → text / email / phone input
     .forminator-textarea       → message box
     select.forminator-select--field → native select (Select2 widget hidden)
     .forminator-radio          → one radio option (styled as a pill)
     .forminator-button-submit  → submit button
   ═══════════════════════════════════════════════════════════════════════ */

/* Forminator's own rules use `.forminator-ui.forminator-custom-form
   [data-design=default] …` (high specificity), so the visually decisive
   properties below are forced with !important to win reliably. */

/* Strip Forminator's own container chrome. */
.contact-form .forminator-ui.forminator-custom-form {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--f-secondary);
}

/* Rows & columns → the original flex/grid rhythm (14px gaps). */
.contact-form .forminator-ui .forminator-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 14px !important;
}
.contact-form .forminator-ui .forminator-row:last-child,
.contact-form .forminator-ui .forminator-row-last { margin-bottom: 0 !important; }

.contact-form .forminator-ui .forminator-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}
.contact-form .forminator-ui .forminator-col-12 { flex-basis: 100%; }

.contact-form .forminator-ui .forminator-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}

/* Labels. */
.contact-form .forminator-ui .forminator-label {
  display: block;
  margin: 0 0 0 0 !important;
  padding: 0;
  font-family: var(--f-primary) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-slate-1) !important;
}
.contact-form .forminator-ui .forminator-required { color: var(--c-green-2) !important; }

/* Text / email / phone / textarea / native select. */
.contact-form .forminator-ui .forminator-input,
.contact-form .forminator-ui .forminator-textarea,
.contact-form .forminator-ui select.forminator-select--field {
  width: 100% !important;
  padding: 13px 16px !important;
  font-family: var(--f-secondary) !important;
  font-size: 15px !important;
  color: var(--c-slate-1) !important;
  background-color: var(--c-white) !important;
  border: 1px solid rgba(56, 69, 68, 0.26) !important;
  border-radius: 0 !important;
  outline: none;
  box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.contact-form .forminator-ui .forminator-input:focus,
.contact-form .forminator-ui .forminator-textarea:focus,
.contact-form .forminator-ui select.forminator-select--field:focus {
  border-color: var(--c-green-1) !important;
  box-shadow: 0 0 0 3px rgba(143, 177, 93, 0.15) !important;
}
.contact-form .forminator-ui .forminator-input::placeholder,
.contact-form .forminator-ui .forminator-textarea::placeholder { color: rgba(56, 69, 68, 0.36); }

.contact-form .forminator-ui .forminator-textarea {
  resize: vertical;
  min-height: 110px !important;
  line-height: 1.65;
}

/* Native <select> with the original SVG chevron. Forminator enhances selects
   with Select2 (a JS widget that hides the real <select> via a clip). We hide
   the widget and un-clip the native control — which is what actually submits. */
.contact-form .select2,
.contact-form .select2-container { display: none !important; }

.contact-form .forminator-ui select.forminator-select--field {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding-right: 44px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23384544' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 11px !important;
}

/* Radio options → styled pills. The group label takes a full row, pills wrap
   beneath it and size to their content. */
.contact-form .forminator-ui .forminator-field[role="radiogroup"] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 9px;
}
.contact-form .forminator-ui .forminator-field[role="radiogroup"] > .forminator-label {
  flex-basis: 100%;
  margin-bottom: 2px !important;
}

.contact-form .forminator-ui .forminator-radio {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  font-family: var(--f-secondary);
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--c-slate-1);
  background: var(--c-white);
  border: 1px solid rgba(56, 69, 68, 0.26) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}
/* Hide Forminator's bullet — the whole pill is the control. */
.contact-form .forminator-ui .forminator-radio .forminator-radio-bullet {
  display: none !important;
}
.contact-form .forminator-ui .forminator-radio .forminator-radio-label {
  margin: 0 !important;
  line-height: 1.2;
  color: inherit;
}

.contact-form .forminator-ui .forminator-radio:hover { border-color: var(--c-green-1) !important; }
.contact-form .forminator-ui .forminator-radio:has(input[type="radio"]:checked) {
  background: var(--c-green-1) !important;
  border-color: var(--c-green-1) !important;
  color: var(--c-white) !important;
}
.contact-form .forminator-ui .forminator-radio:has(input[type="radio"]:focus-visible) {
  border-color: var(--c-green-1) !important;
  box-shadow: 0 0 0 3px rgba(143, 177, 93, 0.30) !important;
}

/* Checkbox (multi-select) options → the same pills as the radios. Forminator's
   checkbox field wraps its options in a role="group" .forminator-field, so we
   match on the presence of .forminator-checkbox rather than a role. Visitors
   can select more than one Service Type; each choice styles like a radio pill. */
.contact-form .forminator-ui .forminator-field:has(.forminator-checkbox) {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 9px;
}
.contact-form .forminator-ui .forminator-field:has(.forminator-checkbox) > .forminator-label {
  flex-basis: 100%;
  margin-bottom: 2px !important;
}

.contact-form .forminator-ui .forminator-checkbox {
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  font-family: var(--f-secondary);
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--c-slate-1);
  background: var(--c-white);
  border: 1px solid rgba(56, 69, 68, 0.26) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}
/* Hide Forminator's checkbox box — the whole pill is the control. */
.contact-form .forminator-ui .forminator-checkbox .forminator-checkbox-box {
  display: none !important;
}
.contact-form .forminator-ui .forminator-checkbox .forminator-checkbox-label {
  margin: 0 !important;
  line-height: 1.2;
  color: inherit;
}

.contact-form .forminator-ui .forminator-checkbox:hover { border-color: var(--c-green-1) !important; }
.contact-form .forminator-ui .forminator-checkbox:has(input[type="checkbox"]:checked) {
  background: var(--c-green-1) !important;
  border-color: var(--c-green-1) !important;
  color: var(--c-white) !important;
}
.contact-form .forminator-ui .forminator-checkbox:has(input[type="checkbox"]:focus-visible) {
  border-color: var(--c-green-1) !important;
  box-shadow: 0 0 0 3px rgba(143, 177, 93, 0.30) !important;
}

/* Commercial add-ons: 7 options left-packed wrap to 3 + 3 + 1, leaving a lone
   "stray" pill on its own row. Lay them out as an even 4-across grid instead
   (4 + 3, the last cell simply empty) so nothing dangles. Pills fill their
   cell and are slightly tightened so the longer labels stay on one line. */
.contact-form--commercial .forminator-ui .forminator-field:has(.forminator-checkbox) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.contact-form--commercial .forminator-ui .forminator-field:has(.forminator-checkbox) > .forminator-label {
  grid-column: 1 / -1;
}
.contact-form--commercial .forminator-ui .forminator-checkbox {
  justify-content: center !important;
  text-align: center;
  padding: 10px 6px !important;
  font-size: 13.5px;
}
@media (max-width: 768px) {
  .contact-form--commercial .forminator-ui .forminator-field:has(.forminator-checkbox) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Submit button. */
.contact-form .forminator-ui .forminator-button-submit {
  width: 100% !important;
  padding: 16px 24px !important;
  background: var(--c-green-1) !important;
  color: var(--c-white) !important;
  font-family: var(--f-primary) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.contact-form .forminator-ui .forminator-button-submit:hover,
.contact-form .forminator-ui .forminator-button-submit:focus-visible {
  background: var(--c-slate-1) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(56, 69, 68, 0.50);
  outline: none;
}

/* Response + inline validation messages. */
.contact-form .forminator-response-message {
  font-family: var(--f-primary);
  font-size: 13.5px;
  font-weight: 600;
  padding: 14px 18px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.contact-form .forminator-response-message.forminator-error {
  background: rgba(180, 60, 60, 0.07);
  border: 1px solid rgba(180, 60, 60, 0.38);
  color: #8B1F1F;
}
.contact-form .forminator-response-message.forminator-success {
  background: rgba(143, 177, 93, 0.10);
  border: 1px solid var(--c-green-1);
  color: #5a7835;
}
.contact-form .forminator-field .forminator-error-message {
  color: #8B1F1F;
  font-family: var(--f-secondary);
  font-size: 12px;
  margin-top: 4px;
}

@media (max-width: 768px) {
  /* Stack the two-up rows, matching .form-row on mobile. Switching the row to
     a column (rather than setting flex-basis on .forminator-col-6) is what
     actually wins here: the base `.forminator-ui .forminator-col { flex: 1 1 0 }`
     rule out-specifies a bare `.forminator-col-6`, so its flex-basis:0 kept the
     two fields sharing one line all the way down to phone widths. */
  .contact-form .forminator-ui .forminator-row { flex-direction: column; }
}


/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq {
  background: var(--c-off-white);
}

.faq__inner {
  max-width: 860px;
}

.faq__heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  color: var(--c-slate-1);
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: clamp(36px, 5vw, 52px);
}

.faq-item {
  border-bottom: 2px solid var(--c-green-1);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--c-slate-1);
  transition: color var(--t-fast);
}

.faq-item__question:hover { color: var(--c-green-2); }

.faq-item__chevron {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--c-slate-1);
  border-bottom: 2px solid var(--c-slate-1);
  transform: rotate(45deg);
  transition: transform var(--t-base);
  margin-top: -4px;
}

.faq-item__question[aria-expanded="true"] .faq-item__chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item__answer p {
  font-family: var(--f-secondary);
  font-size: 15px;
  line-height: 1.78;
  color: var(--c-text-muted);
  padding: 0 4px 24px;
}


/* ════════════════════════════════════════════════════════════════════
   PAGE HERO — shared component (components/PageHero.php)
   Used on About, Contact and Services. Photo bg + centered label + title.
   ════════════════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  min-height: 62vh;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-hero__inner {
  padding-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-hero__headline {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* Optional dark scrim for bright hero photos */
.page-hero--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42, 50, 49, 0.55) 0%, rgba(42, 50, 49, 0.62) 100%);
  z-index: 1;
}

.page-hero--overlay .page-hero__inner {
  position: relative;
  z-index: 2;
}


/* ── BACK TO TOP (global) ──────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--c-green-1);
  color: var(--c-white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), transform var(--t-base),
              visibility var(--t-base), background var(--t-fast);
  box-shadow: 0 6px 20px rgba(56, 69, 68, 0.28);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--c-green-2);
  transform: translateY(-3px);
  outline: none;
}

.back-to-top svg { display: block; }


/* ════════════════════════════════════════════════════════════════════
   ABOUT US PAGE
   ════════════════════════════════════════════════════════════════════ */


/* ── Meet the owners ───────────────────────────────────────────────── */
.owners {
  background: var(--c-off-white);
}

.owners__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 80px);
}

.owners__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
}

.owners__content .section-heading {
  margin-bottom: 20px;
}


/* ── Our values band ───────────────────────────────────────────────── */
.values {
  background: var(--c-green-1);
  padding: clamp(48px, 7vw, 84px) 0;
}

.values__inner {
  max-width: 780px;
  text-align: center;
}

.values__label {
  display: inline-block;
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-slate-2);
  margin-bottom: 14px;
}

.values__heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--c-slate-1);
  margin-bottom: 18px;
}

.values__text {
  font-family: var(--f-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: rgba(42, 50, 49, 0.78);
  text-wrap: balance;
}


/* ── SHAPE values ──────────────────────────────────────────────────── */
.shape {
  background-size: cover;
  background-position: center center;
  padding: clamp(56px, 8vw, 96px) 0;
}

.shape__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
}

.shape__item {
  text-align: center;
}

.shape__icon {
  width: clamp(60px, 6vw, 82px);
  height: auto;
  margin-bottom: 18px;
  /* Nudge right so the letter sits centred over the description text;
     the leaf's pointed tip (top-left) otherwise pulls the icon visually left. */
  transform: translateX(52px);
}

.shape__title {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-green-1);
  letter-spacing: 0.01em;
  line-height: 1.3;
  margin-bottom: 14px;
  min-height: 2.6em;          /* reserve two lines so every column lines up */
  display: flex;
  align-items: center;        /* centre 1- and 2-line titles in the same band */
  justify-content: center;
  text-wrap: balance;
}

.shape__desc {
  font-family: var(--f-secondary);
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-white-muted);
  max-width: 26ch;            /* even column measure — keeps every desc to 3–4 lines */
  margin-inline: auto;
  min-height: calc(4 * 1.7em); /* reserve four lines so all column bottoms align */
  text-wrap: balance;         /* balance line lengths for a uniform block */
}


/* ── What makes us different ───────────────────────────────────────── */
.different {
  background: var(--c-off-white);
}

.different__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 5vw, 68px);
}

.different__content .section-label {
  margin-bottom: 20px;
}

.different__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
}


/* ── Start Today (centered CTA variant) ────────────────────────────── */
.start__center {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 48px);
  text-align: center;
}

.start__center .start__body {
  color: rgba(255, 255, 255, 0.82);
}

.start__center-btn {
  margin-top: 18px;
}


/* ════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════════════════════════ */

/* ── Contact info + form ───────────────────────────────────────────── */
.contact-main {
  background: var(--c-off-white);
}

/* The form section and the testimonials below it share the off-white
   background, so their stacked section padding reads as one oversized gap.
   Tighten the seam and pull the testimonials up. */
.contact-main { padding-bottom: clamp(40px, 5vw, 64px); }
.contact-main + .testimonials { padding-top: clamp(48px, 6vw, 72px); }

.contact-main__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: stretch;
}

/* Left column stacks its text, then the photo fills the remaining
   height so its bottom lines up with the form card on the right. */
.contact-info {
  display: flex;
  flex-direction: column;
}

/* Left column */
.contact-info__heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-slate-1);
  margin-bottom: 22px;
}

.contact-info__body {
  font-family: var(--f-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--c-text-muted);
  max-width: 460px;
  margin-bottom: 26px;
}

.contact-info__subheading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  color: var(--c-green-2);
  margin-bottom: 18px;
}

.contact-info__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}

.contact-info__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--f-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--c-slate-1);
}

.contact-info__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-green-1);
}

.contact-info__label {
  font-family: var(--f-primary);
  font-weight: 700;
  color: var(--c-slate-1);
  margin-right: 4px;
}

.contact-info__link {
  color: var(--c-green-2);
  transition: color var(--t-fast);
}

.contact-info__link:hover { color: var(--c-slate-1); }

.contact-info__photo {
  flex: 1 1 auto;
  margin: clamp(28px, 4vw, 44px) 0 0;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(56, 69, 68, 0.08);
}

.contact-info__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* Right column */
.contact-form-block__heading {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-slate-1);
  margin-bottom: 22px;
}

.contact-form-block__card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 30px rgba(56, 69, 68, 0.08);
  padding: clamp(24px, 3vw, 36px);
}


/* ── FOOTER ────────────────────────────────────────────────────────── */
#footer {
  position: relative;
  background: var(--c-slate-2);
  padding: clamp(56px, 8vw, 96px) 0 0;
  overflow: hidden;
}

/* Decorative leaf watermark — behind all footer content */
.footer-leaf {
  position: absolute;
  right: 0;
  top: 70%;
  transform: translate(18%, -50%);
  width: clamp(240px, 26vw, 368px);
  height: auto;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Keep footer text/links above the leaf */
#footer .container {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-col--brand .nav-logo-link {
  display: block;
  width: fit-content;
  line-height: 0;
}

.footer-logo {
  height: 60px;
  width: auto;
  margin-bottom: 13px;
  display: block;
  margin-left: -4px;
}

.footer-tagline {
  font-family: var(--f-secondary);
  font-style: italic;
  font-size: 14px;
  color: var(--c-green-1);
  line-height: 1.65;
  max-width: 230px;
}

.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--c-white-muted);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.footer-social__link:hover {
  border-color: var(--c-green-1);
  color: var(--c-green-1);
}

.footer-social__link svg { display: block; width: 16px; height: 16px; }

.footer-heading {
  font-family: var(--f-primary);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white-dimmed);
  margin-bottom: 18px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  font-family: var(--f-secondary);
  font-size: 15px;
  color: var(--c-white-muted);
  transition: color var(--t-fast);
}

.footer-link:hover { color: var(--c-green-1); }

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact__link {
  font-family: var(--f-secondary);
  font-size: 15px;
  color: var(--c-white-muted);
  transition: color var(--t-fast);
}

.footer-contact__link:hover { color: var(--c-green-1); }

.footer-contact li:first-child .footer-contact__link {
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 18px;
  color: var(--c-white);
  letter-spacing: -0.01em;
}

.footer-contact__address {
  font-family: var(--f-secondary);
  font-size: 15px;
  color: var(--c-white-muted);
  line-height: 1.7;
  font-style: normal;
}

.footer-contact__service-area {
  font-family: var(--f-primary);
  font-size: 11.5px;
  color: var(--c-white-dimmed);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.footer-bottom {
  padding: 20px 0;
  text-align: center;
}

.footer-copyright {
  font-family: var(--f-primary);
  font-size: 11.5px;
  color: var(--c-white-dimmed);
  letter-spacing: 0.05em;
}


/* ── RESPONSIVE ────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {
  .why__grid { gap: 40px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-tagline { max-width: none; }

  /* Gallery — 2 per view */
  .gallery__slide { flex-basis: calc((100% - 20px) / 2); }

  /* Services CTA — stack heading/text, keep button below */
  .services__cta {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .services__cta-btn { justify-self: center; }

  /* About — SHAPE to 3 across */
  .shape__grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }

  /* The desktop icon is nudged +52px to sit centred over the narrow 5-across
     column measure. Once the grid widens to 3/2/1 columns that fixed offset
     floats the leaf off to the right of its centred title/desc, so reset it. */
  .shape__icon { transform: none; }
}

/* Mobile */
@media (max-width: 768px) {

  /* Nav — show hamburger, hide desktop links + CTA */
  .nav-links,
  .nav-cta { display: none; }

  .nav-hamburger { display: flex; }

  /* Hero */
  .hero { min-height: 100vh; min-height: 100dvh; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__lead br { display: none; } /* let lead reflow, drop forced desktop breaks */

  /* Why — stack, image first */
  .why__grid { grid-template-columns: 1fr; }
  .why__photo { max-height: 340px; }
  .why__content .section-heading br,
  .why__content .section-subheading br { display: none; } /* reflow, drop forced desktop breaks */

  /* Drop the desktop-only forced line breaks in headlines/headings so
     `text-wrap: balance` can reflow them into even lines with no stranded
     word once they shrink to phone/tablet widths. */
  .page-hero__headline br,
  .services__cta-heading br { display: none; }

  /* Feature strip — stack */
  .feature-strip__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  /* Services cards — stack */
  .services__cards { grid-template-columns: 1fr; }

  /* Gallery — 1 per view (drop the edge fade so the single slide isn't clipped) */
  .gallery__slide { flex-basis: 100%; }
  .gallery__slide img { height: clamp(240px, 60vw, 320px); }
  .gallery__viewport { -webkit-mask-image: none; mask-image: none; }

  /* Start Today — stack */
  .start__grid { grid-template-columns: 1fr; }

  /* Contact — stack form rows */
  .form-row { grid-template-columns: 1fr; }

  /* Page hero (About / Contact / Services) */
  .page-hero { min-height: 52vh; }

  /* Contact — stack info above form */
  .contact-main__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-info__body { max-width: none; }

  /* About — stack */
  .owners__grid { grid-template-columns: 1fr; }
  .owners__photo { max-height: 340px; }
  .shape__grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  /* Stacked cards: centre the leaf reliably and drop the desktop
     column-alignment min-heights that leave big gaps when not in a row. */
  .shape__item  { display: flex; flex-direction: column; align-items: center; }
  .shape__icon  { transform: none; margin: 0 auto 12px; }
  .shape__title { min-height: 0; margin-bottom: 8px; }
  .shape__desc  { min-height: 0; max-width: 34ch; }
  .different__grid { grid-template-columns: 1fr; }
  .different__media { order: -1; }

  /* Footer — stack */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-col--brand { grid-column: auto; }

  /* Footer leaf — the stacked footer is much taller, so the desktop
     top:70% anchor drops the watermark into the middle of the content.
     Re-anchor it to the bottom-right corner and shrink it so it reads as
     a subtle accent, matching the desktop feel. */
  .footer-leaf {
    top: auto;
    bottom: 0;
    width: 320px;
    transform: translate(24%, 22%);
    opacity: 0.4;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .shape__grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; gap: 30px; }
}