/*
  ==========================================================================
  Complete Curbing: style.css
  One stylesheet for the whole site. Mobile-first; media queries sit inside
  each component's section. Same color and font system as the sister site,
  drakescompletelandscaping.com. Built by Mind Map Creative.
  Last updated: 2026-11-08

  CONTENTS
   1. Variables (colors, type, spacing)
   2. Font
   3. Base & reset
   4. Utilities (.wrap, .vh, .nowrap, icons, photo frame, stripes)
   5. Buttons
   6. Header & navigation
   7. Hero (home) and page header (inner pages)
   8. Info strip (raised 3-column card)
   9. Sections & headings
  10. Service cards
  11. Split layout (text + photo) and check lists
  12. Steps
  13. Style cards
  14. Gallery & lightbox
  15. Sister company (landscaping)
  16. Service area
  17. FAQ
  18. Contact & map
  19. Call-to-action band
  20. Footer
  21. Back to top
  22. Reduced motion
  ==========================================================================
*/

/* ===== 1. VARIABLES ===== */
/* EDIT: brand colors. Matches drakescompletelandscaping.com exactly. */
:root {
  --green-900: #173229;   /* deepest green: header, dark sections */
  --green-800: #1f4236;   /* cards on dark sections */
  --green-600: #2f6150;   /* links and icons on light backgrounds */
  --sage: #a9c2a4;        /* soft accent text on dark green */
  --sand-50: #fbf8f2;     /* page background */
  --sand-100: #f3ecdf;    /* alternate section background */
  --sand-300: #e2d6c0;    /* borders on sand */
  --lime: #79be27;        /* brand accent: buttons, highlights (dark text on it) */
  --lime-dark: #67a61e;   /* button hover */
  --ink: #1b2420;         /* body text */
  --muted: #56615b;       /* secondary text (5.9:1 on sand-50) */
  --on-dark: #f4f1ea;     /* body text on dark green */
  --on-dark-muted: #c3cfc6;

  /* Type: one self-hosted heading font (Lora 600), system fonts for body */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body: 1.0625rem;                         /* 17px */
  --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  --fs-h1-page: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  --fs-h3: 1.2rem;
  --fs-label: 0.8rem;

  /* Spacing: every section uses the same top/bottom padding */
  --section-y: clamp(56px, 4rem + 3vw, 104px);
  --gap: clamp(16px, 1rem + 1vw, 28px);
  --head-gap: clamp(32px, 2rem + 1vw, 48px);  /* section head -> content */
  --wrap-max: 1200px;
  --wrap-pad: clamp(18px, 4vw, 40px);

  /* Shapes */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(23, 50, 41, 0.10);
  --shadow-photo: 0 16px 36px rgba(0, 0, 0, 0.18);
  --header-h: 82px;
}

/* ===== 2. FONT ===== */
/* Lora 600, Latin subset (SIL Open Font License, see assets/OFL.txt).
   Single weight, so headings use font-weight 600 to avoid faux bold. */
@font-face {
  font-family: "Lora";
  src: url("/assets/lora-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ===== 3. BASE & RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);   /* anchors land below the sticky header */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand-50);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  overflow-wrap: break-word;
}

p:last-child {
  margin-bottom: 0;
}

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

a {
  color: var(--green-600);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--green-900);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

figure {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--lime);
  color: var(--green-900);
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 12px;
}

/* ===== 4. UTILITIES ===== */
/* .wrap sets ONLY left/right padding, never the shorthand, so sections that
   share the class keep their own top/bottom padding at every width. */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap-max) + var(--wrap-pad) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

/* visually hidden, still read by search engines and screen readers */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.break {
  overflow-wrap: anywhere;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dark green with soft diagonal stripes (shared with the landscaping site) */
.stripes {
  background-color: var(--green-900);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 0 34px,
    transparent 34px 68px
  );
}

/* Photo frame: white border and a soft shadow so photos sit up off the page.
   The frame sets the shape (aspect-ratio); the photo fills it. */
.photo-frame {
  position: relative;
  padding: 8px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-photo);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

/* ===== 5. BUTTONS ===== */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary {
  background: var(--lime);
  color: var(--green-900);
}

.btn-primary:hover {
  background: var(--lime-dark);
  color: var(--green-900);
}

/* ghost buttons: outlined; dark on light sections, light on dark */
.btn-ghost {
  border-color: var(--green-600);
  color: var(--green-900);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  color: var(--on-dark);
}

.hero .btn-ghost,
.stripes .btn-ghost {
  border-color: rgba(244, 241, 234, 0.55);
  color: var(--on-dark);
}

.hero .btn-ghost:hover,
.stripes .btn-ghost:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--green-900);
}

/* ===== 6. HEADER & NAVIGATION ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green-900);
  color: var(--on-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease;
}

/* main.js adds this when scrolling down; scrolling up removes it */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

/* Wordmark: curb badge + name. EDIT: swap for a logo image when supplied. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-right: auto;
  color: var(--on-dark);
  text-decoration: none;
}

.brand:hover {
  color: var(--on-dark);
}

.brand-mark {
  width: 48px;
  height: 48px;
  flex: none;
}

.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-name small {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

.nav-list a {
  display: block;
  white-space: nowrap;
  padding: 10px 2px;
  color: var(--on-dark);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--lime);
}

/* the only nowrap button: the header call button */
.header-call {
  flex: none;
  white-space: nowrap;
  min-height: 46px;
  padding: 10px 20px;
}

.menu-toggle {
  display: none;
}

/* Desktop: inline nav */
@media (min-width: 1140px) {
  .nav-list {
    display: flex;
    gap: 26px;
  }
}

/* Below 1140: menu button (3 bars to X) and drop-down panel */
@media (max-width: 1139.98px) {
  .menu-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
  }

  .menu-bars,
  .menu-bars::before,
  .menu-bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s, background-color 0.25s;
  }

  .menu-bars {
    position: relative;
  }

  .menu-bars::before,
  .menu-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .menu-bars::before {
    top: -7px;
  }

  .menu-bars::after {
    top: 7px;
  }

  .menu-toggle[aria-expanded="true"] .menu-bars {
    background: transparent;
  }

  .menu-toggle[aria-expanded="true"] .menu-bars::before {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--green-900);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  }

  .site-nav.is-open {
    display: block;
  }

  .nav-list {
    max-width: calc(var(--wrap-max) + var(--wrap-pad) * 2);
    margin: 0 auto;
    padding: 8px var(--wrap-pad) 20px;
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav-list a {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Phones: smaller wordmark, icon-only round call button */
@media (max-width: 600px) {
  :root {
    --header-h: 66px;
  }

  .header-inner {
    gap: 8px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-name {
    font-size: 1.15rem;
  }

  .brand-name small {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  .header-call {
    width: 46px;
    height: 46px;
    padding: 0;
  }

  .header-call-text {
    display: none;
  }
}

/* Very narrow phones: drop the tagline so everything fits */
@media (max-width: 359.98px) {
  .brand-name small {
    display: none;
  }
}

/* Landscape phones: thinner header */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-h: 58px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .site-nav {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
}

/* ===== 7. HERO (home) AND PAGE HEADER (inner pages) ===== */
/* Full-bleed photo with a green fade behind the text. Equal top and bottom
   padding; the bottom gets an extra 56px for the raised info strip. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(72px, 4rem + 5vw, 140px);
  padding-bottom: calc(clamp(72px, 4rem + 5vw, 140px) + 56px);
  background: var(--green-900);
  color: var(--on-dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* fade: solid green behind the text, the curbing showing on the right */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(23, 50, 41, 0.95) 0%,
    rgba(23, 50, 41, 0.86) 40%,
    rgba(23, 50, 41, 0.30) 72%,
    rgba(23, 50, 41, 0.05) 100%
  );
}

.hero-copy {
  max-width: 680px;
}

.hero h1 {
  font-size: var(--fs-h1);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.hero .h-label {
  color: var(--lime);
}

.hero-lead {
  max-width: 36em;
  margin-top: 22px;
  font-size: 1.12rem;
  color: #dfe7e1;
}

/* Sister-company line under the hero / page-header buttons */
.sister-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #dfe7e1;
  font-size: 0.98rem;
  line-height: 1.45;
}

.sister-note .icon {
  margin-top: 1px;
  color: var(--lime);
}

.sister-note a {
  color: var(--lime);
  font-weight: 700;
}

.sister-note a:hover {
  color: #fff;
}

/* phones and tablets: even fade over the whole photo so text stays readable */
@media (max-width: 899.98px) {
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(23, 50, 41, 0.90), rgba(23, 50, 41, 0.78));
  }
}

/* Inner pages: compact dark band with breadcrumb, h1, lead and call button */
.page-head {
  padding-top: clamp(48px, 3rem + 3vw, 88px);
  padding-bottom: clamp(48px, 3rem + 3vw, 88px);
  color: var(--on-dark);
}

.page-head-inner {
  max-width: 780px;
}

.page-head h1 {
  font-size: var(--fs-h1-page);
  color: #fff;
}

.page-head .lead {
  margin-top: 18px;
  font-size: 1.1rem;
  color: var(--on-dark-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 0.9rem;
  color: var(--sage);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
}

.breadcrumb a {
  color: var(--lime);
}

/* ===== 8. INFO STRIP ===== */
/* Raised white card that overlaps the bottom of the hero.
   4 equal columns (2 x 2 on tablets, 1 column on phones), each item centered. */
.strip {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}

.strip-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-radius: var(--radius);
  border-top: 4px solid var(--lime);
  box-shadow: 0 18px 40px rgba(23, 50, 41, 0.16);
}

.strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* top-aligned so every icon sits on one line */
  gap: 10px;
  padding: 30px 22px;
  text-align: center;
  border-left: 1px solid var(--sand-300);
}

.strip-item:first-child {
  border-left: 0;
}

.strip-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--lime);
  box-shadow: 0 0 0 6px var(--sand-100);   /* soft ring so the icon reads as a badge */
}

.strip-icon .icon {
  width: 26px;
  height: 26px;
}

.strip-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--green-900);
}

.strip-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
}

.strip-link {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-600);
}

/* Tablets: 2 x 2 (never an uneven wrap) */
@media (max-width: 1099.98px) {
  .strip-card {
    grid-template-columns: repeat(2, 1fr);
  }

  .strip-item:nth-child(3) {
    border-left: 0;
  }

  .strip-item:nth-child(n + 3) {
    border-top: 1px solid var(--sand-300);
  }
}

/* Phones: one column, icon on the left, so the card stays compact */
@media (max-width: 759.98px) {
  .strip-card {
    grid-template-columns: 1fr;
  }

  .strip-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 2px;
    justify-content: start;
    padding: 20px 22px;
    text-align: left;
    border-left: 0;
  }

  .strip-icon {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    box-shadow: none;
  }

  .strip-item + .strip-item {
    border-top: 1px solid var(--sand-300);
  }
}

/* ===== 9. SECTIONS & HEADINGS ===== */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* first section after the raised strip: same spacing as every other section */
.strip + .section {
  padding-top: var(--section-y);
}

.section-sand {
  background: var(--sand-100);
}

.section.stripes {
  color: var(--on-dark);
}

.stripes a:not(.btn) {
  color: var(--lime);
}

.section-head {
  max-width: 760px;
  margin: 0 auto var(--head-gap);
  text-align: center;
}

.section-head h2 {
  font-size: var(--fs-h2);
  color: var(--green-900);
}

.stripes .section-head h2,
.stripes h2 {
  color: var(--on-dark);
}

/* Signature: a short curved "curb" line under each centered section heading */
.section-head h2::after {
  content: "";
  display: block;
  width: 96px;
  height: 14px;
  margin: 16px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M3 10 C 25 2, 71 2, 93 10' fill='none' stroke='%2379be27' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M27 4.6v4M48 3v4M69 4.6v4' stroke='%23fbf8f2' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Label + slogan in ONE heading: label is small caps above the slogan */
.h-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-600);
}

.stripes .h-label {
  color: var(--lime);
}

.section-head p {
  margin-top: 18px;
  color: var(--muted);
}

.stripes .section-head p,
.stripes .split-copy p {
  color: var(--on-dark-muted);
}

.sub-head {
  margin: 0 0 var(--gap);
  text-align: center;
  font-size: 1.6rem;
  color: var(--green-900);
}

.center-row {
  display: flex;
  justify-content: center;
  margin-top: var(--head-gap);
}

/* ===== 10. SERVICE CARDS ===== */
/* 2 columns from 760px. An odd last card spans both columns so rows stay even. */
.service-grid {
  display: grid;
  gap: var(--gap);
}

.service-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  height: 100%;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.service-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sand-100);
  color: var(--green-600);
}

.service-icon .icon {
  width: 28px;
  height: 28px;
}

.service-card h3 {
  margin: 12px 0 8px;
  font-size: var(--fs-h3);
  color: var(--green-900);
}

.service-card p {
  color: var(--muted);
  font-size: 1rem;
}

@media (min-width: 760px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .service-card {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

/* Home page: 3 photo cards linking to the main pages */
.link-cards {
  display: grid;
  gap: var(--gap);
}

.link-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.link-card .card-photo {
  aspect-ratio: 4 / 3;
  margin: 10px 10px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.link-card .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 26px;
}

.link-card h3 {
  margin-bottom: 8px;
  font-size: 1.35rem;
  color: var(--green-900);
}

.link-card p {
  color: var(--muted);
  font-size: 1rem;
}

.link-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.link-card p + .btn {
  margin-top: 20px;
}

@media (min-width: 900px) {
  .link-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== 11. SPLIT LAYOUT (text + photo) AND CHECK LISTS ===== */
.split {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* let grid children shrink on narrow phones instead of pushing the page wider */
.split > * {
  min-width: 0;
}

/* framed photo; same shape everywhere so splits line up across pages */
.split-photo {
  aspect-ratio: 5 / 4;
  width: 100%;
}

.split-copy h2 {
  font-size: var(--fs-h2);
  color: var(--green-900);
}

.stripes .split-copy h2 {
  color: var(--on-dark);
}

.split-copy p {
  margin-top: 18px;
  color: var(--muted);
}

.split-copy p + p {
  margin-top: 12px;
}

.check-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.check-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.check-list .icon {
  margin-top: 3px;
  color: var(--green-600);
}

.stripes .check-list .icon {
  color: var(--lime);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  /* photo on the right */
  .split-flip .split-photo {
    order: 2;
  }
}

/* ===== 12. STEPS ===== */
/* 4 steps: 2 x 2 on tablets, 4 across on desktop (always even) */
.steps {
  display: grid;
  gap: var(--gap);
  counter-reset: step;
}

.step {
  position: relative;
  height: 100%;
  padding: 82px 24px 26px;
  background: #fff;
  border: 1px solid var(--sand-300);
  border-top: 4px solid var(--lime);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px rgba(23, 50, 41, 0.08);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  left: 24px;
  top: 24px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--lime);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
}

.step h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: var(--green-900);
}

.step p {
  color: var(--muted);
  font-size: 1rem;
}

@media (min-width: 600px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== 13. STYLE CARDS ===== */
/* 5 styles: rows are centered, so 3 + 2 sits evenly instead of leaving a gap */
.style-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.style-card {
  flex: 0 1 calc((100% - var(--gap) * 2) / 3);
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.style-card .card-photo {
  aspect-ratio: 4 / 3;
  margin: 10px 10px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.style-card .card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-card-body {
  padding: 20px 22px 24px;
}

.style-card h3 {
  margin-bottom: 8px;
  font-size: var(--fs-h3);
  color: var(--green-900);
}

.style-card p {
  color: var(--muted);
  font-size: 1rem;
}

@media (max-width: 899.98px) {
  .style-card {
    flex-basis: calc((100% - var(--gap)) / 2);
  }
}

@media (max-width: 599.98px) {
  .style-card {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* ===== 14. GALLERY & LIGHTBOX ===== */
/* Even grid of framed tiles, all one 4:3 shape so every row lines up:
   3 across on desktop, 2 below 900px. Groups hold multiples of 6 photos.
   The lightbox always shows the whole, uncropped photo. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.gallery-4 {
  grid-template-columns: repeat(2, 1fr);
}

.g-item {
  display: block;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 10px 26px rgba(23, 50, 41, 0.14);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.g-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
}

.g-item:hover,
.g-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(23, 50, 41, 0.2);
}

.gallery-group + .gallery-group {
  margin-top: var(--section-y);
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 459.98px) {
  .gallery {
    gap: 12px;
  }

  .g-item {
    padding: 4px;
  }
}

/* Lightbox: built by main.js */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 16, 13, 0.94);
  touch-action: pan-y;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  border: 6px solid #fff;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform 0.25s ease;
}

.lightbox-img.is-zoomed {
  transform: scale(1.8);
  cursor: zoom-out;
}

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.lb-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lb-close {
  top: 16px;
  right: 16px;
}

.lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lb-caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  color: #e9ede9;
  font-size: 0.95rem;
  text-align: center;
}

/* ===== 15. SISTER COMPANY (LANDSCAPING) ===== */
/* Uses the split layout; this adds the 2-column service list */
.sister-list {
  display: grid;
  gap: 10px 24px;
  margin-top: 22px;
}

@media (min-width: 560px) {
  .sister-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 16. SERVICE AREA ===== */
/* 12 towns: 4 x 3 desktop, 3 x 4 tablet, 2 x 6 phone (always even) */
.area-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.area-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  color: var(--green-900);
}

.area-list .icon {
  color: var(--green-600);
}

@media (min-width: 600px) {
  .area-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .area-list {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1000px;
    margin: 0 auto;
  }
}

@media (max-width: 380px) {
  .area-list li {
    font-size: 0.92rem;
  }
}

/* ===== 17. FAQ ===== */
/* All answers visible (no accordions) so search engines and AI read them.
   2 columns from 900px; an odd last question spans both columns. */
.faq-grid {
  display: grid;
  gap: var(--gap);
}

.faq-item {
  min-width: 0;
  height: 100%;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: var(--radius);
}

.section-sand .faq-item {
  background: var(--sand-50);
}

.faq-item h3 {
  margin-bottom: 10px;
  font-size: var(--fs-h3);
  color: var(--green-900);
}

.faq-item p {
  color: var(--muted);
  font-size: 1rem;
}

@media (min-width: 900px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ===== 18. CONTACT & MAP ===== */
.contact-grid {
  display: grid;
  gap: var(--gap);
}

.contact-card {
  padding: clamp(24px, 3vw, 40px);
  background: var(--green-800);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  color: var(--on-dark);
}

.contact-list {
  display: grid;
  gap: 22px;
}

.contact-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  margin: 0;
  align-items: start;
}

.contact-row .icon {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--lime);
}

.contact-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.contact-row a {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--on-dark);
}

/* 4 contact buttons: an even 2 x 2 grid (one column on phones) */
.contact-card .btn-row {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 440px) {
  .contact-card .btn-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-grid > * {
  min-width: 0;
}

.contact-card .btn-ghost {
  border-color: rgba(244, 241, 234, 0.55);
  color: var(--on-dark);
}

.contact-card .btn-ghost:hover {
  background: var(--on-dark);
  color: var(--green-900);
}

.map-frame {
  position: relative;
  min-height: 380px;
  padding: 8px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-photo);
}

.map-frame iframe {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border: 0;
  border-radius: var(--radius-sm);
}

.map-fallback {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--sand-100);
  font-weight: 700;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Social link (Google, Facebook) used in the footer */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
}

.social-link .icon {
  width: 22px;
  height: 22px;
}

/* ===== 19. CALL-TO-ACTION BAND ===== */
.cta-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cta-inner h2 {
  font-size: var(--fs-h2);
  color: var(--on-dark);
}

.cta-inner p {
  margin-top: 18px;
  color: var(--on-dark-muted);
}

.cta-inner .btn-row {
  justify-content: center;
}

/* ===== 20. FOOTER ===== */
.site-footer {
  padding-top: var(--section-y);
  background: #10251e;
  color: var(--on-dark-muted);
  font-size: 0.98rem;
}

.footer-grid {
  display: grid;
  gap: 36px;
}

.footer-title {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}

.site-footer a {
  color: var(--on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--lime);
  text-decoration: underline;
}

.footer-brand .brand {
  display: inline-flex;
  margin-bottom: 16px;
}

.footer-brand p {
  margin-bottom: 10px;
}

.footer-links {
  display: grid;
  gap: 8px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

/* House standard: credit in the lower right, slightly smaller and muted */
.footer-credit {
  margin: 0 0 0 auto;
  font-size: 0.8rem;
  color: #8fa198;
}

.site-footer .footer-credit a {
  color: #8fa198;
}

.site-footer .footer-credit a:hover {
  color: var(--on-dark);
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 0.9fr 1.3fr;
  }
}

@media (max-width: 599.98px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-credit {
    margin-left: 0;
  }
}

/* ===== 21. BACK TO TOP ===== */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--green-900);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--lime-dark);
}

.to-top .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.2;
}

/* ===== 22. REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}