/* ————— Base & Variables ————— */
:root {
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.85);
  --btn-bg: #0a0a0a;
  --btn-text: #ffffff;
  --maxw: 1200px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  overflow-x: hidden;
  background: #000;
}

/* ————— Hero Section ————— */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  background:
    linear-gradient(to bottom right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35)),
    url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1950&q=80")
    no-repeat center center/cover;

  display: flex;
  justify-content: center;     /* horizontally center content */
  align-items: flex-end;       /* slightly lower for cinematic composition */
  text-align: center;
  color: #fff;
  padding: 0 6vw 20vh;         /* space from bottom */
}

/* ————— Navigation (Desktop) ————— */
header nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px 4vw;
  background: transparent;
  z-index: 50;
}

/* Upper Brand */
.nav-upper {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
  padding: 12px 0;
  letter-spacing: 0.2em;
  word-spacing: 0.45em;
}
.nav-upper span {
  display: inline-block;
  text-transform: lowercase;
}
.nav-upper span::first-letter {
  font-size: 1.6em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

/* Lower Nav Row */
.nav-lower {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-lower-menu {
  display: flex;
  justify-content: center;
  width: 100%;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  position: relative;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  transition: opacity 0.2s ease;
}
.nav-menu a {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 4px 0;
}
.nav-menu li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--text);
  transform: translateX(-50%);
  transition: width 0.2s ease;
}
.nav-menu li:hover {
  opacity: 0.9;
}
.nav-menu li:hover::after {
  width: 60%;
}

.nav-lower-button {
  position: absolute;
  right: 0;
}
.nav-book-btn {
  border: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.nav-book-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  background: #111;
}

/* ————— Hamburger + Drawer (Checkbox Method) ————— */
#nav-toggle {
  display: none;
}

/* Default (desktop hidden) */
.hamburger {
  display: none;
  position: absolute;
  right: 4vw;
  top: 58px;
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 1101;
}

/* Classic 3-bar look */
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* --- Desktop dropdown under “Services” --- */
.nav-menu .has-dropdown { position: relative; }

.nav-menu .has-dropdown > a {
display: inline-flex;
align-items: center;
gap: 6px;
}

/* little caret */
.nav-menu .has-dropdown > a::after {
content: "â–¾";
font-size: 0.85em;
line-height: 1;
transition: transform .2s ease;
}

/* panel */
.nav-menu .dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translate(-50%, -6px);
min-width: 220px;
background: #fff;
color: #111;
border: 1px solid rgba(0,0,0,.1);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(0,0,0,.22);
padding: 10px;
display: grid;
gap: 4px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 9999;
}

.nav-menu .dropdown li { list-style: none; }
.nav-menu .dropdown a {
display: block;
padding: 10px 12px;
border-radius: 8px;
color: #111;
text-decoration: none;
font-weight: 600;
}
.nav-menu .dropdown a:hover { background: rgba(0,0,0,.06); }

/* show on hover + keyboard focus */
.nav-menu .has-dropdown:hover > .dropdown,
.nav-menu .has-dropdown:focus-within > .dropdown {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.nav-menu .has-dropdown:hover > a::after,
.nav-menu .has-dropdown:focus-within > a::after {
transform: rotate(180deg);
}

/* Don’t show dropdown UI on mobile; drawer handles nav there */
@media (max-width: 900px) {
.nav-menu .has-dropdown > a::after { content: none; }
.nav-menu .dropdown { display: none !important; }
}


/* Animate to X when checked */
#nav-toggle:checked + .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#nav-toggle:checked + .hamburger span:nth-child(2) {
  opacity: 0;
}
#nav-toggle:checked + .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Drawer */
.mobile-menu {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(8, 8, 8, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 16px 5vw 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1100;
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.mobile-menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: block;
  padding: 12px 6px;
  border-radius: 8px;
}
.mobile-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
}
.mobile-menu .mobile-cta {
  margin-top: 16px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
}
#nav-toggle:checked ~ #primary-menu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ————— Hero Content ————— */
.hero-content {
  max-width: 900px;
  margin: 0 auto;
}
.hero-kicker {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-style: italic;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1rem;
}
.hero-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  margin-bottom: 1.5rem;
}
.hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.btn-dark {
  background: #000;
  color: #fff;
}
.btn-dark:hover {
  transform: translateY(-1px);
}
.btn-light {
  background: #fff;
  color: #000;
}
.btn-light:hover {
  background: #f1f1f1;
  transform: translateY(-1px);
}
.hero-buttons i {
  margin-right: 8px;
  font-size: 1em;
}


/* ——— Hide desktop CTA button in tight mid-range to avoid collision ——— */
@media (max-width: 1150px) and (min-width: 901px) {
  .nav-lower-button { display: none; }
  .nav-lower-menu { justify-content: center; width: 100%; }
}

/* ————— MOBILE STYLE (≤900px) ————— */
@media (max-width: 900px) {
  header nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 4vw;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  }

  .nav-upper {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 15px;
    letter-spacing: 0.12em;
    word-spacing: 0.2em;
    color: #111;
  }
  .nav-upper span,
  .nav-upper span::first-letter {
    color: #111;
  }

  /* IMPORTANT: Let hamburger position against header nav, not .nav-lower */
  .nav-lower {
    display: block;
    position: static; /* was relative; now static so the containing block is header nav */
  }

  .nav-lower-menu {
    display: none;
  }
  .nav-lower-button {
    display: none;
  }

  /* Perfectly Centered Classic Hamburger relative to header nav */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 4vw;
    top: 50%;                   /* Center relative to full nav height */
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 1101;
  }

  .hamburger span {
    width: 24px;
    height: 3px;
    background: #111;
    margin: 2px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Animation for X effect */
  #nav-toggle:checked + .hamburger span:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
  }
  #nav-toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
  }
  #nav-toggle:checked + .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
  }

  .mobile-menu {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    color: #111;
    padding: 16px 5vw 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  #nav-toggle:checked ~ #primary-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu a {
    color: #111;
  }
  .mobile-menu a:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  .hero {
  position: relative;
  height: 100vh;
  width: 100%;
  background:
    linear-gradient(to bottom right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35)),
    url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1950&q=80")
    no-repeat center center/cover;

  display: flex;
  justify-content: center;     /* horizontally center content */
  align-items: flex-end;       /* slightly lower for cinematic composition */
  text-align: center;
  color: #fff;
  padding: 0 6vw 20vh;         /* space from bottom */
}
  .hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
}

@media (max-width: 720px) {
  .hero-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  margin-bottom: 1.5rem;
}
}

/* ——— Bottom-right floating logo ——— */
.bottom-logo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 120px;         /* adjust size as needed */
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1500;       /* ensure it stays above all content */
}

.bottom-logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ===== About / Welcome Section (matches screenshot) ===== */
.about {
  background: #fff;
  color: #111;
  padding: clamp(48px, 8vw, 88px) 6vw;
}

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* image a touch wider like the screenshot */
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* Left image with two black offset blocks */
.about-media {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* vertical bar on LEFT side */
.about-media::before {
  left: -16px;
  top: 60px;
  bottom: -16px;
  width: 16px;
  background: #000;
  position: absolute;
  content: "";
  z-index: 2;
}

/* horizontal bar on BOTTOM - meets vertical bar */
.about-media::after {
  left: -16px;
  right: -16px;
  height: 16px;
  bottom: -16px;
  background: #000;
  position: absolute;
  content: "";
  z-index: 2;
}

/* image */
.about-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* Right copy */
.eyebrow {
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.9rem;
  color: #111;
  margin-bottom: 10px;
}

.about-title {
  font-family: "Georgia","Times New Roman",serif;
  font-size: clamp(1.8rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.about-text p + p {
  margin-top: 12px;
  line-height: 1.7;
  color: #2a2a2a;
}

/* button spacing to match screenshot */
.about-cta {
  margin-top: 22px;
  border-radius: 9999px;
  padding: 14px 24px; /* re-affirm size */
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .about-inner {
    grid-template-columns: 1fr;
  }
  .about-media {
    max-width: 720px;
    margin: 0 auto 28px;
  }
  .about-copy {
    max-width: 740px;
    margin: 0 auto;
    text-align: left; /* keep copy left-aligned on tablet/mobile */
  }
}

@media (max-width: 560px) {
  .about {
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .about-media::before { left: -14px; top: 24px; width: 12px; }
  .about-media::after  { left: 16px; bottom: -14px; height: 16px; }
}

/* Left image with two black offset blocks */
.about-media {
  position: relative;
  display: inline-block;
  line-height: 0;
  margin: 0;
  padding: 0;
}

/* vertical bar on LEFT side */
.about-media::before {
  left: -16px;
  top: 60px;
  bottom: -16px;
  width: 16px;
  background: #000;
  position: absolute;
  content: "";
  z-index: 2;
}

/* horizontal bar on BOTTOM - meets vertical bar */
.about-media::after {
  left: -16px;
  right: 20%;
  height: 16px;
  bottom: -16px;
  background: #000;
  position: absolute;
  content: "";
  z-index: 2;
}

/* image */
.about-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ===== OUR SERVICES — UPGRADE PACK ===== */

/* section backdrop + divider under title */
.services {
  background: radial-gradient(1000px 400px at 50% -200px, rgba(255,255,255,0.06), transparent 60%) #000;
  color: #fff;
  padding: clamp(60px, 8vw, 100px) 6vw;
}

.services-header {
  text-align: center;
  margin-bottom: 44px;
}
.services-header .eyebrow {
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 10px;
  opacity: 0.9;
}
.services-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 18px;
}
.services-header::after {
  content: "";
  display: block;
  height: 1px;
  width: 120px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: 0.35;
}

/* ===== Card layout + polish */
.service-card,
.service-card.reverse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  background: #fff;
  color: #111;
  padding: clamp(18px, 2.8vw, 28px);
  margin-bottom: clamp(40px, 6vw, 70px);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  border: 1px solid #0f0f0f;
}

/* subtle inner “frame” (corner lines) */
.service-card::before,
.service-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid #111;
  opacity: 0.5;
}
.service-card::before {
  /* top-left corner line */
  top: 14px; left: 14px;
  width: 32%;
  height: 0;
  border-width: 1px 0 0 0;
}
.service-card::after {
  /* bottom-right corner line */
  right: 14px; bottom: 14px;
  width: 32%;
  height: 0;
  border-width: 1px 0 0 0;
}

/* image area: consistent aspect & gentle zoom on hover */
.service-image {
  border: 1.5px solid #111;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f7f7;
  aspect-ratio: 16/10;           /* keeps heights consistent */
  display: grid;
  place-items: center;
}
.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
}
.service-card:hover .service-image img {
  transform: scale(1.03);
}

/* text area */
.service-text h3 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  margin-bottom: 10px;
}
.service-text p {
  line-height: 1.65;
  margin-bottom: 18px;
  color: #242424;
}

/* lift on hover */
.service-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.26);
  border-color: #000;
}

/* button polish */
.service-card .btn {
  border-radius: 9999px;
  padding: 12px 26px;
}
.service-card .btn:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

/* reverse card without RTL hack (more accessible) */
.service-card.reverse .service-image { order: 2; }
.service-card.reverse .service-text  { order: 1; }

/* responsive stack */
@media (max-width: 900px) {
  .service-card,
  .service-card.reverse {
    grid-template-columns: 1fr;
  }
  .service-card::before,
  .service-card::after {
    width: 40%;
  }
}

/* reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-image img { transition: none !important; }
}

/* ===== Optional feature list inside service cards ===== */
.service-bullets {
  margin: 10px 0 18px;
  padding-left: 20px;
  color: #2a2a2a;
  list-style-type: disc;
}

.service-bullets li {
  margin: 6px 0;
  line-height: 1.5;
  font-size: 0.95rem;
}

.service-card.reverse .service-bullets {
  /* maintain consistent indentation on reversed cards */
  padding-left: 24px;
}

/* ===== Subsection inside Services: Lawncare ===== */
.lawncare-sub {
  text-align: center;
  margin-top: clamp(60px, 8vw, 100px);
  color: #fff;
}

.lawncare-header h2 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  margin-bottom: 50px;
  line-height: 1.2;
}

.lawncare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  justify-items: center;
  margin-bottom: 50px;
}

.lawncare-card {
  background: #fff;
  color: #111;
  border: 1.5px solid #000;
  border-radius: 8px;
  padding: 24px 30px;
  text-align: left;
  max-width: 420px;
  transition: all 0.3s ease;
}

.lawncare-card h3 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.lawncare-card p {
  font-size: 1rem;
  line-height: 1.6;
}

.lawncare-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Centered button */
.lawncare-btn-wrap {
  text-align: center;
}

.btn-light-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 9999px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-light-outline:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

/* responsive tweaks */
@media (max-width: 600px) {
  .lawncare-card {
    padding: 20px;
  }
}
/* centered CTA inside Services */
.services-cta {
  display: flex;
  justify-content: center;
  margin: 18px 0 72px;
}
.services-cta .btn {
  padding: 12px 28px;
  border-radius: 9999px;
  /* uses .btn-light-outline visuals you already added */
}
.services-cta .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
/* === View All Services button === */
.btn-outline-round {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 1.8px solid #fff;
  border-radius: 40px;
  padding: 14px 46px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.btn-outline-round:hover {
  background: #fff;
  color: #000;
  transform: translateY(-3px);
}

.btn-outline-round:active {
  transform: translateY(0);
}

/* === View More button (slanted edges) === */
.btn-slant {
  display: inline-block;
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 14px 42px;
  border: none;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
  transition: all 0.3s ease;
}

.btn-slant:hover {
  background: #f2f2f2;
  transform: translateY(-3px);
}

.btn-slant:active {
  transform: translateY(0);
}

/* ===== WHY CHOOSE US ===== */
/* Tighter side padding for the whole section */
.why-us {
  background: #fff;
  color: #111;
  padding-block: clamp(56px, 7vw, 100px);
  padding-inline: clamp(18px, 4vw, 48px); /* was ~6vw — now tighter */
}

.why-header {
  text-align: center;
  margin-bottom: clamp(34px, 5vw, 58px);
}
.why-header .eyebrow {
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  color: #111;
}
.why-header h2 {
  font-family: "Georgia","Times New Roman",serif;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1.15;
}

/* Layout: left copy / center visual / right copy */
.why-grid {
  max-width: 1320px;          /* was 1200px */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr; /* left / center / right */
  column-gap: clamp(22px, 3.6vw, 56px);   /* slightly reduced gaps */
  align-items: center;
}

.why-col {
  display: grid;
  gap: clamp(20px, 2.5vw, 34px);
}


.why-point h4 {
  font-weight: 800;
  margin-bottom: 8px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}
.why-point p {
  color: #2a2a2a;
  line-height: 1.7;
}

/* Center visual with rounded blob, dashed arcs, and ticks */
.why-visual {
  display: grid;
  place-items: center;
}

/* shrink the blob just a bit and center it cleanly */
.why-blob {
  position: relative;
  width: min(500px, 42vw);     /* use more horizontal width */
  aspect-ratio: 1/1;
  border-radius: 28% / 28%;
  overflow: hidden;
  background: #e9e9e9;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  margin-inline: auto;
}
.why-blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(0.98) brightness(0.98);
}

/* Two dashed arcs (like your mock) */
.why-blob::before,
.why-blob::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px dashed rgba(0,0,0,0.45);
  border-radius: 50%;
  pointer-events: none;
}
.why-blob::before { transform: rotate(14deg); }
.why-blob::after  { transform: rotate(-18deg) scale(0.92); }

/* Check badges around the blob */
.tick {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  font-size: 1.25rem;
  line-height: 1;
}
.tick-tl { left: -16px; top: 18%; }
.tick-tr { right: -16px; top: 8%; }
.tick-br { right: -16px; bottom: 12%; }
.tick-bl { left: -16px; bottom: 22%; }

/* Responsive */
@media (max-width: 980px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
  .why-col { order: 2; }
  .why-visual { order: 1; margin-bottom: 20px; }
  .tick-tl { left: -8px;  top: 16%; }
  .tick-tr { right: -8px; top: 6%; }
  .tick-br { right: -8px; bottom: 10%; }
  .tick-bl { left: -8px;  bottom: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  .why-blob::before,
  .why-blob::after { animation: none !important; }
}

.why-col { padding-inline: clamp(6px, 1.2vw, 18px); }

/* ===== TESTIMONIALS ===== */
.testimonials {
  position: relative;
  overflow: hidden;
  color: #111;
  padding-block: clamp(20px, 3vw, 40px);  /* ↓ much less top/bottom space */
  padding-inline: clamp(12px, 2.5vw, 28px);
  isolation: isolate;
}

/* background image as actual <img> */
.testimonials-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(1) contrast(1.05);
}

/* dimming overlay layer */
.t-overlay {
  position: relative;
  background: linear-gradient(
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.25) 100%
  );
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  padding-block: clamp(20px, 3vw, 40px);  /* match reduced padding */
}

/* rest of the testimonial styling (same as before) */
.t-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.t-head {
  text-align: center;
  color: #fff;
  margin-bottom: clamp(16px, 2vw, 26px);

}

.t-head .eyebrow {
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
  opacity: 0.9;
  color: #fff;
}

.t-head h2 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
}

.t-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  column-gap: clamp(22px, 2.6vw, 32px);
  row-gap: clamp(22px, 2.6vw, 32px);
  align-items: stretch;              /* ⬅️ cards fill the same height */
  justify-items: stretch;
}

.t-card {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  padding: 26px 24px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  display: flex;                     /* ⬅️ equalize heights */
  flex-direction: column;
}

.t-card::after {
  content: "";
  position: absolute;
  inset: 22px 18px 18px 18px;        /* ⬅️ more top inset */
  border: 2px solid rgba(0,0,0,0.6);
  border-radius: 6px;
  pointer-events: none;
}

.t-quote {
  position: absolute;
  left: 50%;
  top: 0;                            /* anchor at card top */
  transform: translate(-50%, -50%);  /* straddle the top edge */
  z-index: 2;                        /* ⬅️ above the inner frame */
  color: #000;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

.t-card-body {
  text-align: center;
  padding-top: 18px;                 /* body starts a bit below the quote */
  color: #111;
}

.t-text {
  font-style: italic;
  line-height: 1.85;
  color: #111; /* same tone as other text */
  font-size: clamp(1rem, 1.4vw, 1.1rem); /* larger & scales smoothly */
  margin: 0;
}

.t-author {
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  color: #111; /* consistent color */
}

.t-cta {
  text-align: center;
  margin-top: clamp(12px, 1.8vw, 20px);
}

.btn-review {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-review:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  background: #f7f7f7;
}
/* ===== TESTIMONIAL SECTION FIX ===== */
.testimonials {
  padding: clamp(30px, 3vw, 50px) 3vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
}

.t-overlay {
  background: rgba(0, 0, 0, 0.45);
  padding: clamp(30px, 3vw, 50px) 2vw;
}

.t-head .eyebrow {
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.t-head h2 {
  text-align: center;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: #fff;
  margin-bottom: clamp(20px, 2.5vw, 30px);
}

/* Testimonial Cards Layout */
.t-grid {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2vw, 24px);
  flex-wrap: wrap;
}

.t-card {
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  border: 1.5px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px; /* smaller radius */
  padding: clamp(16px, 1.5vw, 22px);
  width: clamp(290px, 30%, 340px);
  text-align: center;
  font-style: italic;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Slight inward offset for left and right cards */
.t-card:first-child {
  transform: translateY(12px);
}
.t-card:last-child {
  transform: translateY(12px);
}

.t-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* “Leave a Review” Button */
.t-cta button {
  background: #fff;
  color: #111;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  cursor: pointer;
  margin-top: clamp(20px, 2vw, 28px);
  transition: background 0.3s ease, transform 0.2s ease;
}

.t-cta button:hover {
  background: #f5f5f5;
  transform: scale(1.04);
}
.t-card {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: clamp(16px, 1.5vw, 22px);
  width: clamp(290px, 30%, 340px);
  text-align: center;
  font-style: italic;
  color: #111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Center card - solid white background */
.t-card:nth-child(2) {
  background: rgba(255, 255, 255, 0.95);
}

/* Side cards - transparent frosted look */
.t-card:first-child,
.t-card:last-child {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Subtle lift effect */
.t-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.t-card:first-child p,
.t-card:last-child p {
  color: #f5f5f5;
}
    
/* Responsive: stack cleanly with equal-width cards */
@media (max-width: 1024px) {
  .t-grid { grid-template-columns: 1fr; }
  .t-card { max-width: 760px; margin-inline: auto; }
}

/* ===== WHAT'S NEW SECTION ===== */
.whats-new {
  background-color: #000;
  text-align: center;
  color: #fff;
  padding: clamp(25px, 3vw, 40px) 2vw; /* reduced section padding */
}

.whats-new h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: clamp(40px, 5vw, 60px);
  font-weight: 600;
}

.new-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(140px, 14vw, 200px); /* WAY more spacing between items */
}


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

.new-image {
  width: clamp(180px, 20vw, 240px);
  height: clamp(180px, 20vw, 240px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.8);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.new-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.new-image:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

.new-item h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 600;
}

/* ===== GALLERY SECTION ===== */
.gallery {
  background: #fff;
  text-align: center;
  padding: clamp(50px, 6vw, 90px) 3vw;
  color: #000;
}

.gallery-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 8px;
}

.gallery-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2vw, 40px);
  justify-items: center;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
  max-width: 420px;
  height: 280px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* Last tile (black background with button) */
.gallery-item.more {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-item.more .overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-item.more button {
  background: #d60000;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.gallery-item.more button:hover {
  background: #b80000;
  transform: scale(1.05);
}

/* ===== CONTACT SECTION ===== */
.contact-section {
  position: relative;
  background: #000;
  padding: clamp(50px, 8vw, 120px) 0;
  display: flex;
  justify-content: center;
}

.contact-container {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

/* Left white info panel */
.contact-info {
  background: #fff;
  padding: clamp(50px, 5vw, 80px);
  width: 60%;
  color: #000; /* <-- all text black */
}

.contact-info h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 1rem;
  color: #000;
}

.contact-info p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #000;
}

.contact-details .detail {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 1.5rem;
  color: #000;
}

.icon {
  width: 45px;
  height: 45px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.detail strong {
  color: #000;
}

.detail p {
  color: #000;
}

/* Floating right card */
.contact-form-card {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  background: #fff;
  color: #000; /* <-- all text black */
  padding: clamp(40px, 4vw, 60px);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.contact-form-card h3 {
  text-align: center;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  margin-bottom: 10px;
  color: #000;
}

.contact-form-card hr {
  width: 60px;
  height: 3px;
  border: none;
  background: #000;
  margin: 0 auto 25px;
}

/* Form styles */
.contact-form-card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.row {
  display: flex;
  gap: 1rem;
}

.row input,
.row select,
textarea {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #f7f7f7;
  font-size: 1rem;
  color: #000; /* <-- text black */
  transition: all 0.3s ease;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #000;
  background: #fff;
}

button {
  margin-top: 10px;
  padding: 12px;
  border: 2px solid #000;
  background: transparent;
  color: #000; /* <-- black text */
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: 0.3s ease;
  cursor: pointer;
}

button:hover {
  background: #000;
  color: #fff;
}

/* Responsive */
@media (max-width: 960px) {
  .contact-info {
    width: 100%;
    padding: 40px 30px 180px;
  }

  .contact-form-card {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    margin-top: -100px;
  }
}

/* ===== FOOTER ===== */
.site-footer {
  background: #000;
  color: #fff;
  padding: clamp(50px, 6vw, 80px) clamp(20px, 2vw, 30px) clamp(30px, 4vw, 50px);
  font-family: "Poppins", sans-serif;
}

/* Footer Grid Layout */
.footer-inner {
  max-width: 1400px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 1fr 1fr;
  gap: clamp(40px, 5vw, 70px);
  align-items: start;
}

/* About Text */
.site-footer .about p,
.f-col.about p {
  color: #fff !important;
  line-height: 1.65;
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  margin: 0;
  max-width: 48ch;
}

/* Headings */
.site-footer h4 {
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  font-weight: 700;
  margin-bottom: 18px;
  color: #fff;
}

/* Footer Lists */
.f-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  row-gap: 12px;
}

.f-list li::before {
  content: "• ";
  color: #fff;
  font-weight: bold;
  margin-right: 8px;
}

.f-list a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(0.9rem, 1vw, 1rem);
  transition: 0.25s ease;
}

.f-list a:hover {
  opacity: 0.7;
}

/* Underline links in Services column */
.f-list.underline a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hours of Operation */
.hours {
  margin: 8px 0;
  color: #fff;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.6;
}

.hours span {
  opacity: 1;
  margin-right: 6px;
}

.mt-24 {
  margin-top: 24px;
}

/* Social Icons */
.f-social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.soc {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: 0.3s ease;
}

.soc:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

/* Divider + Copyright */
.f-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0 0 24px;
}

.f-copy {
  text-align: center;
  color: #fff;
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  padding-bottom: 0;
}

/* About Text */
.site-footer .about p,
.f-col.about p {
  color: #fff !important;
  line-height: 1.6;
  font-size: clamp(1rem, 0.88vw, 0.9rem);
  margin: 0;
  max-width: 100%;
  text-align: left;
  max-height: 280px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
}

.f-col.about {
  max-width: 480px;
}
.f-col.about {
  max-width: 480px;
  background: transparent;
  padding: 0%;
}

.site-footer .about {
  background: transparent;
}
/* Responsive */
@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .f-social {
    justify-content: flex-start;
  }
}

/* ===== Desktop safety for mobile drawer ===== */
@media (min-width: 901px) {
  /* Hide the hamburger & checkbox on desktop */
  #nav-toggle,
  label.hamburger {
    display: none !important;
  }

  /* Hard-disable the drawer on desktop no matter what */
  #primary-menu {
    transform: translateY(-120%) !important;  /* or translateX, match your mobile animation */
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* If your CSS targets the checked state, nullify it on desktop just in case */
  #nav-toggle:checked ~ #primary-menu {
    transform: translateY(-120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}
/* Base hidden state (works for all viewports unless overridden) */
#primary-menu {
  transform: translateY(-120%);   /* or translateX(120%) if your drawer slides from right */
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
}

/* Open state (only when the checkbox is checked) */
#nav-toggle:checked ~ #primary-menu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Desktop hard guard so it can NEVER appear on large screens */
@media (min-width: 901px) {
  #nav-toggle, label.hamburger { display: none !important; }
  #primary-menu {
    transform: translateY(-120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}
  
/* Hide the mobile inline sublist by default */
.mobile-sublist { 
  display: none; 
  margin: 6px 0 0; 
  padding-left: 0; 
}
.mobile-sublist li { list-style: none; }
.mobile-sublist a { 
  display: block; 
  padding: 10px 6px; 
  text-decoration: none; 
  color: inherit; 
}

/* Show it only inside the mobile drawer */
@media (max-width: 900px) {
  #primary-menu .mobile-sublist {
    display: grid;
    gap: 8px;
  }
}

/* Belt-and-suspenders: never show on desktop */
@media (min-width: 901px) {
  .mobile-sublist { display: none !important; }
}

/* === LANDSCAPE-THEMED ABOUT PAGE === */
body.about-page {
  background: #FAF9F6;
  color: #222;
}

/* Hero Section - gradient inspired by forest & soil */
.about-hero {
  position: relative;
  min-height: 65vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 50%, #C2A676 100%);
}

.about-hero .hero-kicker {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.9);
}

.about-hero .hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
}

/* Section titles with earthy underline */
.about h2,
.process h2,
.values h2,
.service-area h2,
.team h2 {
  position: relative;
  display: inline-block;
}

.about h2::after,
.process h2::after,
.values h2::after,
.service-area h2::after,
.team h2::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #C2A676; /* earthy beige accent */
  border-radius: 2px;
}

/* Buttons - primary green with golden hover */
.btn-alt, .btn, .nav-book-btn {
  background: #3B6B3D;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 28px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-alt:hover, .btn:hover, .nav-book-btn:hover {
  background: #C2A676;
  color: #222;
  transform: translateY(-2px);
}

/* Section background alternation */
.process, .service-area {
  background: #fff;
}

.values, .team, .cta-alt {
  background: #FAF9F6;
}

/* CTA Section - reversed color scheme */
.cta-alt {
  background: #3B6B3D;
  color: #fff;
  padding: clamp(46px,6vw,80px) 6vw;
  text-align: center;
}

.cta-alt .btn-alt {
  background: #C2A676;
  color: #222;
}

.cta-alt .btn-alt:hover {
  background: #E9C46A;
}

/* =========================================
 ABOUT PAGE (scoped by body.about-page)
 ========================================= */

/* base page tone */
body.about-page {
  background: #FAF9F6;   /* warm off-white */
  color: #222;
}

/* gradient hero (no image) — forest → green → earthy sand */
body.about-page .about-hero {
  position: relative;
  min-height: 65vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: clamp(80px, 10vw, 140px) 6vw 12vh;  /* room under the nav */
  background: linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 55%, #C2A676 100%);
}

/* hero text */
body.about-page .about-hero .hero-kicker {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.92);
  margin-bottom: .5rem;
}
body.about-page .about-hero .hero-title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 700;
  color: #fff;
}

/* section headings with subtle earthy underline */
body.about-page .about h2,
body.about-page .process h2,
body.about-page .values h2,
body.about-page .service-area h2,
body.about-page .team h2 {
  position: relative;
  display: inline-block;
}
body.about-page .about h2::after,
body.about-page .process h2::after,
body.about-page .values h2::after,
body.about-page .service-area h2::after,
body.about-page .team h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #C2A676; /* secondary */
  border-radius: 2px;
}

/* “Who we are” section reuses your .about layout; just ensure body text is readable */
body.about-page .about { background: #fff; color: #111; }
body.about-page .about .about-text p { color: #333; }

/* Process cards (no change to your grid sizes; just theme it) */
body.about-page .process { background:#fff; color:#111; padding: clamp(48px,6vw,80px) 6vw; }
body.about-page .process-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(16px,2vw,24px); }
body.about-page .process-card {
  border: 1.5px solid #3B6B3D;
  border-radius: 10px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
body.about-page .process-card .step { font-weight:800; font-size:.85rem; letter-spacing:.12em; color:#3B6B3D; opacity:.85; }

/* Values section (soft background for contrast) */
body.about-page .values { background:#F4F1EA; color:#111; padding: clamp(48px,6vw,90px) 6vw; }
body.about-page .values .values-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(16px,2vw,22px); max-width:1200px; margin:0 auto; }
body.about-page .values .value { background:#fff; border:1px solid #E4DAC5; border-radius:10px; padding:18px; }
body.about-page .values .value h4 { color:#1f3c1f; }

/* Service area chips */
body.about-page .service-area { background:#fff; color:#111; padding: clamp(40px,6vw,70px) 6vw; }
body.about-page .service-area .badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
body.about-page .service-area .badge {
  border:1.5px solid #3B6B3D; color:#1f3c1f;
  background:#EAF0EB; border-radius:9999px; padding:8px 14px; font-weight:700; font-size:.9rem;
}

/* Team (dark band using your dark theme, but with green edges) */
body.about-page .team { background:#101410; color:#fff; padding: clamp(48px,6vw,88px) 6vw; }
body.about-page .team .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(16px,2vw,24px); max-width:1200px; margin:0 auto; }
body.about-page .team .member {
  background:#151A15; border:1.5px solid #234423; border-radius:10px; padding:20px;
}

/* CTA strip (inverted) */
body.about-page .cta-alt { background:#3B6B3D; color:#fff; text-align:center; padding: clamp(46px,6vw,80px) 6vw; }
body.about-page .cta-alt .btn-alt {
  background:#C2A676; color:#222; border:none; border-radius:9999px; padding:14px 28px; font-weight:800;
  transition:.2s ease;
}
body.about-page .cta-alt .btn-alt:hover { background:#E0BE7A; }

/* Buttons & nav CTA accents (only on About page) */
body.about-page .btn,
body.about-page .nav-book-btn {
  background:#3B6B3D; color:#fff; border:none; border-radius:9999px; padding:12px 26px; font-weight:600;
  transition: background .25s ease, transform .2s ease;
}
body.about-page .btn:hover,
body.about-page .nav-book-btn:hover { background:#C2A676; color:#222; transform: translateY(-2px); }

/* ===== nav “Services” mobile list injected by nav.js =====
   Hide on desktop, show only inside the mobile drawer. */
.mobile-sublist { display:none; margin:6px 0 0; padding-left:0; }
.mobile-sublist li { list-style:none; }
.mobile-sublist a { display:block; padding:10px 6px; text-decoration:none; color:inherit; }
@media (max-width: 900px) {
  #primary-menu .mobile-sublist { display:grid; gap:8px; }
}
@media (min-width: 901px) {
  .mobile-sublist { display:none !important; }
}

/* Safety: if .hero class mistakenly stays on the About hero, force our gradient */
body.about-page .about-hero { background: linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 55%, #C2A676 100%) !important; }

/* Footer should never inherit the page .about section styling */
.site-footer .about,
.site-footer .f-col.about {
background: transparent !important;
padding: 0 !important;
}

/* --- Mobile nav fixes --- */

/* ensure the mobile drawer background stays white */
.nav-overlay.active #primary-menu {
  background: #fff;
}

/* make all links black inside mobile menu */
#primary-menu a {
  color: #111;
}

/* specific fix for the injected Services sublist */
#primary-menu .mobile-sublist a {
  color: #111;
  font-weight: 500;
}

/* hide bullets for cleaner look */
#primary-menu .mobile-sublist li {
  list-style: none;
}

/* hover or tap highlight (optional) */
#primary-menu a:hover {
  color: #3B6B3D; /* your main landscape green accent */
}
/* === Services Page Hero Styling === */
body.services-page .services-hero {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 55%, #C2A676 100%);
  padding: 120px 20px 80px;
}

body.services-page .services-hero h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

body.services-page .services-hero p {
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(255,255,255,0.9);
}

/* make nav readable over the gradient */
/* removed page-specific nav positioning (unified) */
/* === Services Page Hero Styling === */
body.services-page .services-hero {
  min-height: 75vh; /* Taller hero */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 55%, #C2A676 100%);
  padding: 120px 20px 80px;
}

/* hero text */
body.services-page .services-hero h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

body.services-page .services-hero p {
  font-size: 1.1rem;
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(255,255,255,0.9);
}

/* nav bar should NOT be sticky */
/* removed page-specific nav positioning (unified) */

/* optional: ensure white logo/nav text stays visible on gradient */
body.services-page header nav a {
  color: #fff;
}
/* === Services Page Hero Styling (Fully Behind Nav) === */
body.services-page .services-hero {
  position: relative;
  min-height: 90vh; /* a bit taller */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #1f3c1f 0%, #3B6B3D 50%, #C2A676 100%);
  padding: 0 20px;
  margin-top: -160px; /* increased from -100px → pushes hero further behind nav */
  z-index: 0;
}

/* keep nav visible above hero */
body.services-page header {
  position: relative;
  z-index: 10;
  background: transparent;
}
/* === Services Page Nav Behavior === */

/* Default (desktop): transparent over gradient */
/* removed page-specific nav positioning (unified) */

/* Mobile view: force solid white navbar */
@media (max-width: 900px) {
  /* removed page-specific nav positioning (unified) */

  /* Ensure links and logo go dark for contrast */
  body.services-page header nav a {
    color: #111 !important;
  }

  /* Also make the menu button (hamburger or X) dark */
  body.services-page .menu-toggle,
  body.services-page .menu-close {
    color: #111 !important;
  }
}

/* ================================
 CONTACT PAGE (scoped styles)
 ================================ */
body.contact-page { background: #FAF9F6; color: #222; }

/* Hero: green landscape gradient (nav uses existing global styles) */
body.contact-page .contact-hero{
min-height: 70vh;
display: flex; align-items: center; justify-content: center; text-align: center;
color: #fff;
/* same palette you approved */
background: linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 55%, #C2A676 100%);
padding: 120px 6vw 80px;
}
body.contact-page .contact-hero .hero-kicker{
letter-spacing: .08em; font-weight: 700; opacity: .9; margin-bottom: .5rem;
}
body.contact-page .contact-hero h1{
font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0 0 .5rem; color: #fff;
}
body.contact-page .contact-hero p{
max-width: 70ch; margin: 0 auto 1.2rem; color: rgba(255,255,255,.95);
}

/* contact content grid */
body.contact-page .contact-wrap{
max-width: 1200px; margin: 0 auto; padding: clamp(40px,6vw,80px) 6vw;
display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(20px,3vw,40px);
}
@media (max-width: 980px){
body.contact-page .contact-wrap{ grid-template-columns: 1fr; }
}

/* left column */
body.contact-page .contact-info h2{
font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .5rem; color: #1f3c1f;
}
body.contact-page .contact-info p{ color: #333; line-height: 1.7; }
body.contact-page .contact-details{ margin-top: 14px; display: grid; gap: 12px; }
body.contact-page .detail{ display: flex; align-items: center; gap: 10px; }
body.contact-page .detail .icon{
width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9999px;
background: #EAF0EB; color: #1f3c1f; font-weight: 700;
}
body.contact-page .badges{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body.contact-page .badge{
border: 1.5px solid #3B6B3D; color: #1f3c1f; background: #EAF0EB;
border-radius: 9999px; padding: 8px 14px; font-weight: 700; font-size: .9rem;
}

/* right column (form) */
body.contact-page .contact-form-card{
background: #fff; border: 1px solid #E4DAC5; border-radius: 14px;
padding: clamp(18px, 3vw, 26px); box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
body.contact-page .contact-form-card h3{ margin: 0 0 8px; color: #1f3c1f; }
body.contact-page .contact-form-card hr{ border: 0; height: 1px; background: #E4DAC5; margin: 8px 0 16px; }
body.contact-page .contact-form-card .row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px){
body.contact-page .contact-form-card .row{ grid-template-columns: 1fr; }
}
body.contact-page .contact-form-card input,
body.contact-page .contact-form-card select,
body.contact-page .contact-form-card textarea{
width: 100%; border: 1px solid #D9D3C5; border-radius: 10px; padding: 12px 14px;
background: #fff; color: #222; font-size: 1rem;
}
body.contact-page .contact-form-card textarea{ min-height: 120px; resize: vertical; }
body.contact-page .contact-form-card button{
margin-top: 12px; width: 100%;
background: #3B6B3D; color: #fff; border: none; border-radius: 9999px;
padding: 12px 20px; font-weight: 700; cursor: pointer; transition: .2s ease;
}
body.contact-page .contact-form-card button:hover{ background: #C2A676; color: #222; }

/* map */
body.contact-page .map-wrap{ padding: 0 6vw 60px; }
body.contact-page .map-frame{
width: 100%; height: 360px; border: 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* footer safety: avoid clash with .about section class */
.site-footer .about{ background: transparent !important; padding: 0 !important; }

/* mobile menu sublist visibility (from earlier) */
@media (min-width: 901px){ .mobile-sublist { display: none !important; } }

  
/* ======================================================
 CONTACT PAGE — layout + polish
 ====================================================== */
 body.contact-page { background:#FAF9F6; color:#222; }

 /* Hero */
 body.contact-page .contact-hero{
   min-height:72vh;
   display:flex; align-items:center; justify-content:center; text-align:center;
   color:#fff;
   background: radial-gradient(1200px 600px at 50% 0%, rgba(194,166,118,.25), transparent 60%),
               linear-gradient(135deg,#1f3c1f 0%,#3B6B3D 55%,#C2A676 100%);
   padding: 120px 6vw 80px;
 }
 body.contact-page .contact-hero .hero-kicker{
   letter-spacing:.1em; font-weight:800; opacity:.9; margin-bottom:.4rem;
 }
 body.contact-page .contact-hero h1{
   font-size: clamp(2.2rem, 5.2vw, 3.2rem); margin:0 0 .6rem; color:#fff;
 }
 body.contact-page .contact-hero p{
   max-width:70ch; margin:0 auto 1.25rem; color:rgba(255,255,255,.95);
 }
 body.contact-page .contact-hero .btn{
   background:#C2A676; color:#222; border:none; border-radius:9999px;
   padding:12px 22px; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.15);
 }
 body.contact-page .contact-hero .btn:hover{ background:#e0be7a; }
 
 /* Content grid */
 body.contact-page .contact-wrap{
   max-width:1160px; margin:0 auto; padding: clamp(40px,6vw,88px) 6vw;
   display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,3vw,44px);
 }
 @media (max-width: 980px){
   body.contact-page .contact-wrap{ grid-template-columns:1fr; }
 }
 
 /* Left column */
 body.contact-page .contact-info{ align-self:start; }
 body.contact-page .contact-info h2{
   font-size:clamp(1.7rem,3.6vw,2.2rem); margin:0 0 .4rem; color:#1f3c1f;
 }
 body.contact-page .contact-info p{ color:#34423b; line-height:1.75; }
 body.contact-page .contact-details{ margin-top:14px; display:grid; gap:14px; }
 body.contact-page .detail{ display:flex; align-items:center; gap:12px; }
 body.contact-page .detail .icon{
   width:38px; height:38px; display:grid; place-items:center; border-radius:9999px;
   background:#EAF0EB; color:#1f3c1f; font-weight:800;
 }
 body.contact-page .badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
 body.contact-page .badge{
   border:1.5px solid #3B6B3D; color:#1f3c1f; background:#EAF0EB;
   border-radius:9999px; padding:8px 14px; font-weight:700; font-size:.9rem;
 }
 
 /* Right column — form card */
 body.contact-page .contact-form-card{
   background:#fff; border:1px solid #E4DAC5; border-radius:14px;
   padding: clamp(20px,3vw,28px);
   box-shadow:0 18px 36px rgba(16,20,16,.08);
 }
 body.contact-page .contact-form-card h3{ margin:0 0 8px; color:#1f3c1f; }
 body.contact-page .contact-form-card hr{ border:0; height:1px; background:#E4DAC5; margin:8px 0 16px; }
 
 body.contact-page .contact-form-card .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
 @media (max-width:640px){ body.contact-page .contact-form-card .row{ grid-template-columns:1fr; } }
 
 body.contact-page .contact-form-card input,
 body.contact-page .contact-form-card select,
 body.contact-page .contact-form-card textarea{
   width:100%; border:1px solid #D9D3C5; border-radius:10px; padding:12px 14px;
   background:#fff; color:#222; font-size:1rem;
 }
 body.contact-page .contact-form-card input:focus,
 body.contact-page .contact-form-card select:focus,
 body.contact-page .contact-form-card textarea:focus{
   outline:none; border-color:#3B6B3D; box-shadow:0 0 0 3px rgba(59,107,61,.15);
 }
 body.contact-page .contact-form-card textarea{ min-height:130px; resize:vertical; }
 
 body.contact-page .contact-form-card button{
   margin-top:12px; width:100%;
   background:#3B6B3D; color:#fff; border:none; border-radius:9999px;
   padding:12px 20px; font-weight:800; cursor:pointer; transition:.2s ease;
 }
 body.contact-page .contact-form-card button:hover{ background:#C2A676; color:#222; }
 
 /* Map */
 body.contact-page .map-wrap{ padding: 0 6vw 80px; }
 body.contact-page .map-card{
   max-width:1160px; margin:0 auto; background:#fff; padding:12px; border-radius:16px;
   border:1px solid #E4DAC5; box-shadow:0 18px 36px rgba(0,0,0,.08);
 }
 body.contact-page .map-frame{
   width:100%; aspect-ratio: 16 / 9;
   border:0; border-radius:12px; display:block;
 }
 body.contact-page .map-open{
   display:inline-block; margin-top:10px; font-weight:700; color:#3B6B3D;
 }
 body.contact-page .map-open:hover{ color:#C2A676; }
 
 /* Footer safety (avoid conflict with .about section class) */
 .site-footer .about{ background:transparent !important; padding:0 !important; }
 
 /* Mobile nav stays white on this page */
 @media (max-width: 900px){
   /* removed page-specific nav positioning (unified) */
   body.contact-page header nav a{ color:#111 !important; }
 }
 /* CONTACT PAGE REFINED */
body.contact-page .contact-hero {
  min-height: 65vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  background: linear-gradient(135deg,#1f3c1f 0%,#3b6b3d 55%,#c2a676 100%);
  padding: 120px 6vw 100px;
}
body.contact-page .contact-hero h1 {
  font-size: clamp(2.3rem,5vw,3rem);
  margin-bottom: 0.5rem;
}
body.contact-page .contact-hero p {
  max-width: 680px;
  margin: 0 auto 1.5rem;
  color: rgba(255,255,255,.9);
}
body.contact-page .contact-hero .btn {
  background:#c2a676; color:#222; font-weight:700;
  border:none; border-radius:9999px; padding:12px 28px;
  box-shadow:0 8px 20px rgba(0,0,0,.2); cursor:pointer;
}
body.contact-page .contact-hero .btn:hover { background:#e2c98d; }

/* MAIN GRID */
body.contact-page .contact-main {
  background:#faf9f6;
  padding: clamp(60px,8vw,100px) 6vw;
}
body.contact-page .contact-grid {
  max-width: 1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width:900px){
  body.contact-page .contact-grid{grid-template-columns:1fr;}
}

/* INFO */
body.contact-page .contact-info h2 {
  color:#1f3c1f;
  font-size:clamp(1.8rem,3vw,2.3rem);
  margin-bottom:0.5rem;
}
body.contact-page .contact-info p {
  color:#333;
  margin-bottom:1.5rem;
  line-height:1.7;
}
body.contact-page .contact-list {
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:0.7rem;
}
body.contact-page .contact-list li {
  display:flex; align-items:center; gap:0.6rem;
  font-weight:500;
}
body.contact-page .contact-list span {
  font-size:1.2rem;
  color:#3b6b3d;
}

/* FORM */
body.contact-page .contact-form-card {
  background:#fff;
  border-radius:16px;
  padding:2rem;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}
body.contact-page .contact-form-card h3 {
  margin-top:0;
  color:#1f3c1f;
  font-size:1.4rem;
  margin-bottom:1rem;
}
body.contact-page .contact-form-card .row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
@media (max-width:600px){
  body.contact-page .contact-form-card .row{grid-template-columns:1fr;}
}
body.contact-page .contact-form-card input,
body.contact-page .contact-form-card select,
body.contact-page .contact-form-card textarea {
  width:100%;
  border:1px solid #d9d3c5;
  border-radius:8px;
  padding:12px 14px;
  font-size:1rem;
  font-family:inherit;
}
body.contact-page .contact-form-card textarea {
  min-height:120px; resize:vertical;
}
body.contact-page .contact-form-card button {
  width:100%;
  background:#3b6b3d;
  color:#fff;
  border:none;
  border-radius:9999px;
  padding:12px 20px;
  margin-top:1rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease;
}
body.contact-page .contact-form-card button:hover {
  background:#c2a676; color:#222;
}

/* MAP */
body.contact-page .map-wrap {
  background:#faf9f6;
  padding:0 6vw 100px;
}
body.contact-page .map-card {
  max-width:1180px;
  margin:0 auto;
  background:#fff;
  border-radius:16px;
  padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}
body.contact-page .map-frame {
  width:100%;
  height:400px;
  border:0;
  border-radius:12px;
}
body.contact-page .map-open {
  display:inline-block;
  margin-top:8px;
  color:#3b6b3d;
  font-weight:700;
}
body.contact-page .map-open:hover{color:#c2a676;}

/* === NAVBAR CONSISTENT HEIGHT (ALL PAGES) === */
#site-nav.nav--solid nav,
#site-nav.nav--transparent nav {
padding: 1.2rem 3rem !important;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* keep same height even when scrolled */
#site-nav nav {
height: auto;
line-height: normal;
}

/* === NAVBAR: single source of truth =============================== */
:root {
  --nav-pad-y: 1.2rem;
  --nav-pad-x: 3rem;
  --nav-link-dark: #111;
  --nav-link-light: #fff;
}

/* same box metrics in all states/pages */
#site-nav nav {
  padding: var(--nav-pad-y) var(--nav-pad-x) !important;
  height: auto;          /* no implicit line-height scaling */
  line-height: normal;   /* avoid odd baselines */
  transition: background-color .25s ease, box-shadow .25s ease, color .2s ease;
}

/* transparent (over dark hero) */
#site-nav.is-transparent nav,
#site-nav.nav--transparent nav {           /* keep backwards-compat with old class */
  background: transparent !important;
  box-shadow: none;
  color: var(--nav-link-light);
}
#site-nav.is-transparent a,
#site-nav.nav--transparent a { color: var(--nav-link-light) !important; }

/* solid (after scroll / on light backgrounds) */
#site-nav.is-solid nav,
#site-nav.nav--solid nav {                 /* keep backwards-compat with old class */
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  color: var(--nav-link-dark);
}
#site-nav.is-solid a,
#site-nav.nav--solid a { color: var(--nav-link-dark) !important; }

/* mobile: always use solid for readability */
@media (max-width: 900px) {
  #site-nav.is-transparent nav,
  #site-nav.nav--transparent nav {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    color: var(--nav-link-dark);
  }
  #site-nav.is-transparent a,
  #site-nav.nav--transparent a { color: var(--nav-link-dark) !important; }
}

/* kill page-scoped overrides that were causing drift */
body.about-page header nav,
body.services-page header nav,
body.contact-page header nav,
.main-nav { background: unset; color: unset; }

/* ===========================================
 NAV: Solid-on-scroll + Hide/Reveal on scroll
 =========================================== */
#site-nav nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: transparent;
transition: background .25s ease, box-shadow .25s ease, color .25s ease, transform .25s ease;
}

/* Base (transparent) assumes light-on-dark hero at top */
#site-nav:not(.nav--solid) .nav-upper { color: #fff; }
#site-nav:not(.nav--solid) .nav-menu li,
#site-nav:not(.nav--solid) .nav-menu a { color: #fff; }
#site-nav:not(.nav--solid) .nav-menu li::after { background: #fff; }
#site-nav:not(.nav--solid) .hamburger span { background: #fff; }

/* Solid state: turns bar white and text/icons dark */
#site-nav.nav--solid nav {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
#site-nav.nav--solid .nav-upper { color: #111; }
#site-nav.nav--solid .nav-menu li,
#site-nav.nav--solid .nav-menu a { color: #111; }
#site-nav.nav--solid .nav-menu li::after { background: #111; }
#site-nav.nav--solid .hamburger span { background: #111; }

/* Hide on scroll down, reveal on scroll up */
#site-nav.nav--hidden nav {
transform: translateY(-110%);
}

/* Keep mobile behavior intact: drawer stays white */
@media (max-width: 900px) {
#site-nav nav {
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
/* Ensure readable colors in mobile header */
#site-nav .nav-upper,
#site-nav .nav-menu li,
#site-nav .nav-menu a { color: #111; }
#site-nav .hamburger span { background: #111; }
}


/* =====================================================
   GALLERY PAGE — Unique hero + Before/After cards
===================================================== */
body.gallery-page {
  background: #FAF9F6;
  color: #111;
}

/* Distinct filmstrip hero */
.gallery-hero {
  position: relative;
  min-height: 70vh;
  padding: 120px 6vw 60px;
  background: radial-gradient(900px 300px at 20% -140px, rgba(0,0,0,0.08), transparent 60%) #FFFFFF;
  display: grid;
  place-items: center;
}
.gallery-hero .gh-wrap {
  width: 100%;
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 50px);
  align-items: center;
}
.gallery-hero .gh-copy .hero-kicker { color: #2f5130; font-weight: 700; letter-spacing: .14em; }
.gallery-hero .gh-copy h1 { 
  font-family: "Georgia","Times New Roman",serif; 
  font-size: clamp(2rem, 4.2vw, 3.2rem); 
  margin: 6px 0 10px;
}
.gallery-hero .gh-copy p { color:#333; line-height:1.7; max-width: 55ch; }
.gallery-hero .gh-filmstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery-hero .gh-filmstrip img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

/* Before & After cards */
.ba-gallery {
  background: #fff;
  padding: clamp(40px, 6vw, 80px) 6vw;
}
.ba-head {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.ba-head .eyebrow { color: #2f5130; letter-spacing: .14em; font-weight: 800; }
.ba-head h2 { 
  font-family: "Georgia","Times New Roman",serif; 
  font-weight: 600; 
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
}
.ba-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.6vw, 26px);
}
.ba-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}
.ba-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  background: #000;
}
.ba-side { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ba-side img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform .35s ease; filter: saturate(.95); }
.ba-card:hover .ba-side img { transform: scale(1.03); }
.ba-badge {
  position: absolute; top: 10px; left: 10px;
  font-weight: 800; font-size: .8rem; color:#fff;
  padding: 6px 10px; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.ba-badge.before { background: #e63946; }
.ba-badge.after  { background: #2a9d8f; }
.ba-body { padding: 14px 16px 18px; }
.ba-title { font-family: "Georgia","Times New Roman",serif; font-size: 1.05rem; margin-bottom: 4px; }
.ba-desc  { color: #444; line-height: 1.6; font-size: .98rem; }

/* =====================================================
   TESTIMONIALS PAGE — Unique hero + extra sections
===================================================== */
body.testimonials-page { background: #FAF9F6; color: #111; }
/* wave-like band hero */
.testimonials-hero {
  position: relative;
  min-height: 62vh;
  padding: 120px 6vw 90px;
  display: grid; place-items: center;
  color: #fff;
  background:
    linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 55%, #C2A676 100%);
  overflow: hidden;
}
.testimonials-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 140px;
  background: radial-gradient(90% 140px at 50% -10px, #FAF9F6 0%, #FAF9F6 60%, transparent 61%);
}
.testimonials-hero .th-inner { 
  width: 100%; max-width: var(--maxw); text-align: center; position: relative; z-index: 2;
}
.testimonials-hero .hero-kicker { color: rgba(255,255,255,.95); letter-spacing: .16em; font-weight: 800; }
.testimonials-hero h1 { font-family: "Georgia","Times New Roman",serif; font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 6px; }
.testimonials-hero .stars { margin-top: 10px; font-size: 1.15rem; letter-spacing: .2em; }
.testimonials-hero .sub { margin-top: 6px; opacity: .92; max-width: 60ch; margin-left: auto; margin-right: auto; }

/* Review highlights (metrics + small chips) */
.review-highlights {
  background: #fff;
  padding: clamp(40px, 6vw, 80px) 6vw;
}
.rh-metrics {
  max-width: var(--maxw);
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: clamp(14px, 3vw, 28px);
}
.metric {
  background: #141814;
  color: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  text-align: center;
}
.metric .big { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; line-height: 1; }
.metric .label { opacity: .9; margin-top: 6px; }

.rh-quotes {
  max-width: var(--maxw);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}
.rh-quote {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  font-style: italic;
  color: #333;
}
.rh-quote strong { display: block; margin-top: 8px; font-style: normal; color: #111; }

/* Responsive tweaks */
@media (max-width: 980px) {
  .gallery-hero .gh-wrap { grid-template-columns: 1fr; }
  .testimonials-hero::after { height: 100px; }
  .rh-metrics { grid-template-columns: 1fr; }
}

/* ======================================================
   CONTACT PAGE — final overrides (keep this at the end)
   Purpose: neutralize older unscoped rules and lock grid
   ====================================================== */
   body.contact-page .contact-info {
    /* kill older white-panel + fixed-width rules */
    background: transparent;
    color: #222;
    width: auto;
    padding: 0;
  }
  
  body.contact-page .contact-form-card {
    /* older CSS set this to absolute — reset it */
    position: static;
    right: auto; top: auto; transform: none; width: auto;
  }
  
  /* make sure our 2-col grid is authoritative */
  body.contact-page .contact-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) 6vw;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(20px, 3vw, 40px);
  }
  @media (max-width: 980px) {
    body.contact-page .contact-wrap { grid-template-columns: 1fr; }
  }
  
  /* ensure the contact list renders cleanly even if earlier rules conflict */
  body.contact-page .contact-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.7rem;
  }
  body.contact-page .contact-list span { font-size: 1.2rem; color: #3b6b3d; }

  /* ======================================================
   CONTACT — BEAUTY BOOST (safe, scoped polish)
   Paste at the very bottom of style.css
   ====================================================== */

/* 1) Hero: add depth + a gentle moving-style gleam on the CTA */
body.contact-page .contact-hero {
  position: relative;
  overflow: hidden;
}
body.contact-page .contact-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 62%;
  background:
    radial-gradient(600px 180px at 50% 0, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(420px 160px at 10% 80%, rgba(194,166,118,.24), transparent 70%),
    radial-gradient(420px 160px at 90% 80%, rgba(31,60,31,.20), transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(1px);
}
body.contact-page .contact-hero .hero-kicker { letter-spacing: .16em; text-transform: uppercase; }
body.contact-page .contact-hero .btn {
  position: relative;
  overflow: hidden;
}
body.contact-page .contact-hero .btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .45s ease;
}
body.contact-page .contact-hero .btn:hover::after { transform: translateX(120%); }

/* 2) Form card: premium gradient border + subtle lift on hover */
body.contact-page .contact-form-card {
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #C2A676, #3B6B3D) border-box;
  box-shadow: 0 18px 36px rgba(16,20,16,.08), 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.contact-page .contact-form-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(16,20,16,.10), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* 3) Inputs: optional icon slot (just add data-icon to the .field wrapper) */
body.contact-page .contact-form-card .field { position: relative; }
body.contact-page .contact-form-card .field[data-icon] input,
body.contact-page .contact-form-card .field[data-icon] select,
body.contact-page .contact-form-card .field[data-icon] textarea {
  padding-left: 42px;
}
body.contact-page .contact-form-card .field[data-icon]::before {
  content: attr(data-icon);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  opacity: .75;
}

/* 4) Info column: tidy “pill” rows + stick to viewport on desktop */
body.contact-page .contact-info { position: sticky; top: 96px; }
@media (max-width: 980px) { body.contact-page .contact-info { position: static; } }

body.contact-page .contact-list li {
  background: #fff;
  border: 1px solid #E4DAC5;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* 5) Map card: floating label for clarity */
body.contact-page .map-card { position: relative; overflow: hidden; }
body.contact-page .map-card .map-label {
  position: absolute; top: 10px; left: 12px;
  background: #1f3c1f; color: #fff; font-weight: 700;
  font-size: .8rem; letter-spacing: .06em;
  padding: 6px 10px; border-radius: 9999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

/* 6) Strong focus states (keyboard accessibility) */
body.contact-page a:focus-visible,
body.contact-page button:focus-visible,
body.contact-page input:focus-visible,
body.contact-page select:focus-visible,
body.contact-page textarea:focus-visible {
  outline: 3px solid #C2A676;
  outline-offset: 2px;
}

/* ---------- Compatibility aliases if your older markup is still in place ---------- */
body.contact-page .form-card { /* same gradient border if using .form-card */
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #C2A676, #3B6B3D) border-box;
  box-shadow: 0 18px 36px rgba(16,20,16,.08), 0 1px 0 rgba(255,255,255,.6) inset;
}
body.contact-page .info-card .info-list li { /* pill rows for older right column */
  background: #fff; border: 1px solid #E4DAC5; border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
/* -----------------------------------------------
   MOBILE (≤980px): show the form above the info
   ----------------------------------------------- */
   @media (max-width: 980px) {
    /* If your page still has an inner .contact-grid wrapper,
       let the parent grid treat its children as direct items */
    body.contact-page .contact-wrap > .contact-grid { display: contents; }
  
    /* Define the 1-column stack and explicit order */
    body.contact-page .contact-wrap {
      grid-template-columns: 1fr;     /* your CSS already does this, we re‑assert it */
      grid-template-areas:
        "form"
        "info";
    }
  
    /* Modern class names (from the newer contact.html) */
    body.contact-page .contact-form-card { grid-area: form; }
    body.contact-page .contact-info      { grid-area: info; }
  
    /* Legacy class names (if your page still uses them) */
    body.contact-page .form-card { grid-area: form; }
    body.contact-page .info-card { grid-area: info; }
  
    /* Safety: neutralize any old absolute positioning on the form card */
    body.contact-page .contact-form-card,
    body.contact-page .form-card {
      position: static;
      right: auto; top: auto; transform: none; width: auto;
      margin-top: 0;
    }
  }
  
  /* =====================================================
   GALLERY HERO — photo background variant (like index)
   ===================================================== */
body.gallery-page .gallery-hero.has-bg {
  /* fallback image if the inline variable isn't provided */
  --gallery-hero: url('landingfrontimg.jpeg');

  /* same idea as .hero on index: gradient overlay + cover image */
  background:
    linear-gradient(to bottom right, rgba(0,0,0,0.60), rgba(0,0,0,0.35)),
    var(--gallery-hero) no-repeat center / cover;

  color: #fff;
  min-height: 70vh;
  padding: 120px 6vw 80px; /* leaves room for fixed nav (matches your layout) */
  display: grid;
  place-items: center;
}

body.gallery-page .gallery-hero.has-bg .gh-wrap {
  width: 100%;
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: 1fr;  /* center the copy; no side-by-side filmstrip */
  place-items: center;
  text-align: center;
}

body.gallery-page .gallery-hero.has-bg .gh-copy .hero-kicker { color: rgba(255,255,255,.92); }
body.gallery-page .gallery-hero.has-bg .gh-copy h1 { color: #fff; }
body.gallery-page .gallery-hero.has-bg .gh-copy p  { color: rgba(255,255,255,.92); }

/* Hide the filmstrip when using a background photo */
body.gallery-page .gallery-hero.has-bg .gh-filmstrip { display: none; }

/* Small tweak: lift the top crop on tall images (optional) */
@media (min-width: 901px) {
  body.gallery-page .gallery-hero.has-bg {
    background-position: center 35%;
  }
}
/* Minimal before/after slider */
body.gallery-page .ba-compare { background:#fff; padding: 0 6vw 36px; }
body.gallery-page .compare {
  position: relative; max-width: 1200px; margin: 0 auto;
  aspect-ratio: 16/9; border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
body.gallery-page .compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.gallery-page .compare-after { z-index: 1; }
body.gallery-page .compare-before {
  z-index: 2;
  clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
}
body.gallery-page .compare::before {  /* center bar */
  content:""; position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12); z-index: 3;
}
body.gallery-page .compare-range {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 12px; width: min(560px, 70%); z-index: 4;
}
body.gallery-page .compare-tag {
  position:absolute; top:10px; padding:6px 10px; border-radius: 8px;
  font-weight:800; font-size:.85rem; color:#fff; z-index: 4;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
body.gallery-page .compare-tag.left  { left:10px;  background:#e53e3e; }
body.gallery-page .compare-tag.right { right:10px; background:#059669; }

/* Mobile: force visible hamburger + readable header at load */
@media (max-width: 900px){
  /* Make the transparent header look solid on mobile */
  #site-nav.nav--transparent nav,
  #site-nav.is-transparent nav {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  /* Override the white lines rule with matching specificity */
  #site-nav.nav--transparent .hamburger span,
  #site-nav:not(.nav--solid) .hamburger span {
    background: #111 !important;
  }

  /* Ensure the bar is visible and on top */
  #site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* --- Desktop dropdown under "Services" --- */
.nav-menu .has-dropdown { position: relative; }

.nav-menu .has-dropdown > a {
display: inline-flex;
align-items: center;
gap: 6px;
}

/* little caret */
.nav-menu .has-dropdown > a::after {
content: "▾";
font-size: 0.85em;
line-height: 1;
transition: transform .2s ease;
}

/* panel - ALWAYS solid white regardless of navbar state */
.nav-menu .dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translate(-50%, -6px);
min-width: 220px;
background: #fff !important;
color: #111 !important;
border: 1px solid rgba(0,0,0,.1);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(0,0,0,.22);
padding: 10px;
display: grid;
gap: 4px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 9999;
}

.nav-menu .dropdown li { 
  list-style: none;
  color: #111 !important;
  position: relative;
}

.nav-menu .dropdown a {
display: block;
padding: 10px 12px;
border-radius: 8px;
color: #111 !important;
text-decoration: none;
font-weight: 600;
transition: opacity 0.2s ease;
position: relative;
}

/* Underline effect on hover for dropdown items */
.nav-menu .dropdown a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: #111;
  transform: translateX(-50%);
  transition: width 0.2s ease;
}

.nav-menu .dropdown a:hover::after {
  width: 60%;
}

.nav-menu .dropdown a:hover {
  opacity: 0.9;
  background: transparent;
}

/* Override any parent color inheritance */
#site-nav.nav--transparent .nav-menu .dropdown,
#site-nav.is-transparent .nav-menu .dropdown {
  background: #fff !important;
  color: #111 !important;
}

#site-nav.nav--transparent .nav-menu .dropdown a,
#site-nav.is-transparent .nav-menu .dropdown a,
#site-nav.nav--transparent .nav-menu .dropdown li,
#site-nav.is-transparent .nav-menu .dropdown li {
  color: #111 !important;
}

.nav-menu .dropdown a:hover { background: rgba(0,0,0,.06); }

/* show on hover + keyboard focus */
.nav-menu .has-dropdown:hover > .dropdown,
.nav-menu .has-dropdown:focus-within > .dropdown {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.nav-menu .has-dropdown:hover > a::after,
.nav-menu .has-dropdown:focus-within > a::after {
transform: rotate(180deg);
}
.f-list li::before {
  content: "• ";
  color: #fff;
  font-weight: bold;
  margin-right: 8px;
}

/* === Services Page Hero Styling (Fully Behind Nav) === */
body.services-page .services-hero {
  position: relative;
  min-height: 100vh; /* full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #1f3c1f 0%, #3B6B3D 50%, #C2A676 100%);
  padding: 250px 20px 20px; /* add top padding to clear the nav */
  z-index: 0;
}

/* Services Hero - remove bullet points */
body.services-page .services-hero .hero-badges {
  list-style: none;
  padding-left: 0;
}

/* Hardscape page hero - increase top padding */
body.hardscape-page .hardscape-hero {
  padding: 160px 6vw 80px;
}

/* Hardscape page - What Is section styling */
body.hardscape-page .what-is {
  background: #FAF9F6; /* creamy color instead of image */
  padding: clamp(80px, 10vw, 120px) 6vw;
  color: #111; /* black text */
}

body.hardscape-page .what-copy .eyebrow {
  color: #4a7c28; /* keep the green accent */
}

body.hardscape-page .what-copy h2 {
  color: #2d5016; /* dark green for heading */
}

body.hardscape-page .what-copy p {
  color: #111; /* black text for paragraphs */
}

/* Irrigation page hero - increase top padding */
body.irrigation-page .irrigation-hero {
  padding: 140px 6vw 80px;
}

/* Irrigation page - What Is section styling */
body.irrigation-page .what-is {
  background: #FAF9F6; /* creamy color instead of image */
  padding: clamp(80px, 10vw, 120px) 6vw;
  color: #111; /* black text */
}

body.irrigation-page .what-copy .eyebrow {
  color: #2A7FA7; /* keep the blue accent */
}

body.irrigation-page .what-copy h2 {
  color: #1A5F7C; /* dark blue for heading */
}

body.irrigation-page .what-copy p {
  color: #111; /* black text for paragraphs */
}

/* Design page hero - increase top padding */
body.design-page .design-hero {
  padding: 160px 6vw 80px;
}

/* === Mobile Services Dropdown (Toggleable) === */

/* Hide the mobile inline sublist by default */
.mobile-sublist { 
  display: none !important; 
  margin: 6px 0 0; 
  padding-left: 0; 
}

.mobile-sublist li { 
  list-style: none; 
}

.mobile-sublist a { 
  display: block; 
  padding: 10px 6px; 
  text-decoration: none; 
  color: inherit; 
}

/* Mobile-specific dropdown styling */
@media (max-width: 900px) {
  /* Add dropdown indicator to Services menu item on mobile */
  #primary-menu .has-dropdown > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  #primary-menu .has-dropdown > a::after {
    content: "▼";
    font-size: 0.75em;
    margin-left: 6px;
    transition: transform 0.2s ease;
  }
  
  /* Rotate indicator when open */
  #primary-menu .has-dropdown.mobile-open > a::after {
    transform: rotate(180deg);
  }
  
  /* Show sublist when parent has mobile-open class */
  #primary-menu .has-dropdown.mobile-open .mobile-sublist {
    display: grid !important;
    gap: 8px;
    animation: slideDown 0.2s ease;
    padding-left: 16px;
    margin-top: 8px;
  }
  
  /* Slide down animation */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Style for submenu items */
  #primary-menu .mobile-sublist a {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
  }
  
  #primary-menu .mobile-sublist a:hover {
    background: rgba(0, 0, 0, 0.04);
  }
}

/* Desktop: ensure mobile sublist never shows */
@media (min-width: 901px) {
  .mobile-sublist { 
    display: none !important; 
  }
}

@media (min-width: 901px) {
  /* Keep your existing hover CSS … and add this line: */
  .has-sub.desktop-open > .submenu { display: block; } /* or grid, matching your layout */
}

/* Keep dropdown open when JS adds .desktop-open (for hover-out delay) */
@media (min-width: 901px) {
  .nav-menu .has-dropdown.desktop-open > .dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .nav-menu .has-dropdown.desktop-open > a::after {
    transform: rotate(180deg);
  }
}

/* =========================================
   THANK YOU PAGE — Hero + CTAs
   Works with <body class="contact-page"> and .c-hero
   ========================================= */
   body.contact-page .c-hero {
    text-decoration: none;
    position: relative;
    min-height: 62vh;
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    /* Clear the fixed nav; keep room above on desktop */
    padding: 140px 6vw 80px;
    /* On-brand gradient (matches site palette) */
    background:
      radial-gradient(1200px 600px at 50% 0%, rgba(194,166,118,.22), transparent 60%),
      linear-gradient(135deg, #1f3c1f 0%, #3B6B3D 55%, #C2A676 100%);
    overflow: hidden;
  }
  
  body.contact-page .c-hero::before {
    /* gentle gleam overlay for depth */
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 58%;
    background:
      radial-gradient(600px 180px at 50% 0, rgba(255,255,255,.12), transparent 60%),
      radial-gradient(420px 160px at 10% 80%, rgba(194,166,118,.18), transparent 70%),
      radial-gradient(420px 160px at 90% 80%, rgba(31,60,31,.16), transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(1px);
  }
  
  body.contact-page .c-hero .c-hero-inner {
    width: 100%;
    max-width: 1000px;
    padding: 0 2vw;
  }
  
  body.contact-page .c-hero .c-hero-copy h1 {
    font-family: "Georgia","Times New Roman",serif;
    font-size: clamp(2rem, 4.6vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .5rem;
  }
  
  body.contact-page .c-hero .c-hero-copy .sub {
    color: rgba(255,255,255,.95);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
    max-width: 70ch;
    margin: 0 auto 1.1rem;
  }
  
  /* CTAs */
  body.contact-page .c-hero .hero-ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  
  body.contact-page .c-hero .hero-ctas .btn {
    background: #C2A676;     /* golden accent */
    color: #222;
    border: none;
    border-radius: 9999px;
    padding: 12px 24px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  body.contact-page .c-hero .hero-ctas .btn:hover {
    background: #E0BE7A;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
  }
  
  /* Outline/ghost button next to primary */
  body.contact-page .c-hero .hero-ctas .ghost {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 9999px;
    padding: 12px 24px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  body.contact-page .c-hero .hero-ctas .ghost:hover {
    background: #fff;
    color: #222;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }
  
  /* Motion-safe entrance */
  @keyframes thx-pop {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }
  body.contact-page .c-hero .c-hero-copy > * {
    animation: thx-pop .45s ease both;
  }
  body.contact-page .c-hero .c-hero-copy h1   { animation-delay: .04s; }
  body.contact-page .c-hero .c-hero-copy .sub { animation-delay: .12s; }
  body.contact-page .c-hero .hero-ctas        { animation-delay: .18s; }
  
  @media (prefers-reduced-motion: reduce) {
    body.contact-page .c-hero .c-hero-copy > * { animation: none !important; }
  }
  
  /* Mobile tweaks: a bit less top padding under the fixed nav */
  @media (max-width: 900px) {
    body.contact-page .c-hero { padding: 120px 6vw 70px; }
  }
  

.btn, .ghost{
  text-decoration: none;
}

/* Fix: avoid double underline inside dropdown (desktop + mobile sublist) */
.nav-menu .dropdown li::after,
.nav-menu .mobile-sublist li::after {
  content: none !important; /* disable the global nav li underline */
}

/* Prevent top-level underline from leaking into submenus */
.nav-menu .dropdown li::after,
.nav-menu .dropdown li:hover::after {
  content: none !important;
  width: 0 !important;
  background: transparent !important;
}

/* === FLS Contact Section: mobile hotfix (drop-in override) === */
@media (max-width: 900px) {
  .contact-section { padding: 40px 0 !important; }
  .contact-container { display: block !important; }

  .contact-info {
    width: 100% !important;
    padding: 28px 16px 18px !important;
  }

  .contact-form-card {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    margin: 16px 16px 0 !important;
    box-sizing: border-box !important;
  }

  .contact-form-card .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .contact-form-card input,
  .contact-form-card select,
  .contact-form-card textarea {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important; /* stops iOS zoom on focus */
    box-sizing: border-box !important;
  }
}