/* ==========================================================================
   Valley Pacific Landscape, Inc. — Site Stylesheet
   Clean, professional theme. Mobile-first, responsive.
   ========================================================================== */

:root {
  --green-900: #14361f;
  --green-800: #1c4a2b;
  --green-700: #3e8e2e;
  --green-600: #57b847;
  --green-500: #6cbe45;
  --green-100: #ecf7e6;
  --earth-700: #6b5844;
  --earth-500: #9a8468;
  --sand-100: #f6f3ee;
  --sand-200: #ece6dc;
  --ink-900: #1a1f1c;
  --ink-700: #3a423d;
  --ink-500: #626a64;
  --line: #e2e0d9;
  --white: #ffffff;
  --gold: #c9a24b;
  --brand-lime: #8dc63f;
  --brand-blue: #2fa3dc;
  --shadow-sm: 0 1px 3px rgba(20, 54, 31, .08), 0 1px 2px rgba(20, 54, 31, .06);
  --shadow-md: 0 6px 20px rgba(20, 54, 31, .10);
  --shadow-lg: 0 18px 50px rgba(20, 54, 31, .16);
  --radius: 12px;
  --radius-lg: 18px;
  --container: 1180px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Poppins", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Always reserve the scrollbar gutter so content doesn't jump sideways
   when moving between a short page and a long one. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-700);
  line-height: 1.65;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink-900);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { margin: 0 0 1rem; }

a { color: var(--green-700); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--green-500); }

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

/* <figure> carries a UA default of `margin: 1em 40px`. .gallery__item and .quote are
   both <figure>, so without this reset they sit 40px inboard of every other grid on
   the site and render ~20% narrower than their track. */
figure { margin: 0; }

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

.section { padding: clamp(56px, 8vw, 100px) 0; }
.section--tint { background: var(--sand-100); }
.section--green { background: var(--green-900); color: #dfeee5; }
.section--green h2, .section--green h3 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: .8rem;
}
.section--green .eyebrow { color: var(--gold); }

.lead { font-size: 1.14rem; color: var(--ink-700); max-width: 62ch; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
/* Standard centred section intro (eyebrow + h2 + lead) — one width everywhere. */
.section-intro { max-width: 700px; margin: 0 auto 46px; }
.section-intro--tight { margin-bottom: 30px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--green-700); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--green-600); color: #fff; }
.btn--gold { background: var(--brand-lime); color: #17301c; box-shadow: var(--shadow-md); }
.btn--gold:hover { background: #9ed44f; color: #17301c; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { background: #fff; color: var(--green-800); }
.btn--outline { background: transparent; color: var(--green-700); border-color: var(--green-700); }
.btn--outline:hover { background: var(--green-700); color: #fff; }
.btn--lg { padding: 1.05em 2em; font-size: 1.05rem; }
/* Full-width button: must be allowed to wrap, or its nowrap min-content width sets a
   floor that pushes the whole form section wider than a phone screen. */
.btn--block { width: 100%; white-space: normal; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  background: transparent;
  display: grid; place-items: center;
}
.brand__mark svg { width: 44px; height: 44px; }
.brand__name { font-family: var(--font-head); font-weight: 700; color: #57b847; line-height: 1.05; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .01em; }
.brand__name span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9b9b9d; }

.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink-900);
  padding: .55em .85em;
  border-radius: 8px;
  font-size: .98rem;
}
.nav__links a:hover, .nav__links a.active { background: var(--green-100); color: var(--green-800); }
.nav__cta { display: flex; align-items: center; gap: 10px; }

.nav__toggle {
  display: none;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--ink-900); margin: 5px 0; transition: .25s; border-radius: 2px; }

@media (max-width: 940px) {
  .nav__toggle { display: block; }
  /* Solid header on mobile: Safari clips absolutely-positioned children of a
     backdrop-filtered ancestor, which cut off the first menu item. */
  .site-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 4px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    box-shadow: 0 30px 40px -18px rgba(20,54,31,.35);
    display: none;
    /* The sheet scrolls itself if it's ever taller than the screen. */
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open .nav__links { display: flex; }
  /* Dim the page behind the open menu so content doesn't bleed through. */
  .nav.open::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(15, 30, 20, .45);
  }
  .nav__links li + li { border-top: 1px solid var(--line); }
  .nav__links a { display: block; padding: 1em 8px; font-size: 1.06rem; border-radius: 10px; }
  .nav__cta .btn--outline { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  background: var(--green-900);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(15,40,24,.88) 0%, rgba(18,46,28,.55) 55%, rgba(15,35,25,.15) 100%);
}
.hero .container { padding-top: clamp(70px, 11vw, 130px); padding-bottom: clamp(70px, 11vw, 130px); }
.hero__inner { max-width: 660px; }
.hero h1 { color: #fff; }
.hero p { font-size: 1.18rem; color: #e7f1ea; max-width: 52ch; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 22px 0 30px; }
.hero__badge { display: flex; align-items: center; gap: 8px; font-weight: 600; font-family: var(--font-head); font-size: .95rem; color: #eafaf0; }
.hero__badge svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.subhero {
  background: var(--green-800);
  color: #dff0e6;
}
.subhero .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 26px; padding-bottom: 26px; }
.subhero__item { text-align: center; padding: 6px; }
.subhero__num { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: #fff; }
.subhero__label { font-size: .86rem; letter-spacing: .03em; opacity: .9; }
@media (max-width: 640px){ .subhero .container { grid-template-columns: repeat(2,1fr); gap: 18px 10px; } }

/* ---------- Generic page hero (interior) ----------
   min-height keeps the hero band identical on every interior page whether the
   headline wraps to one line or three; the container centres content within it. */
.page-hero {
  position: relative; color: #fff; isolation: isolate; overflow: hidden; background: var(--green-900);
  min-height: 560px; display: flex; align-items: center;
}
/* Fixed per-breakpoint floor, not a vw clamp: a vw-based floor shrinks on narrow
   screens at the same time the headline wraps to more lines, so the copy punches
   through it and hero heights diverge page to page. These values sit above the
   tallest hero content at each breakpoint, so every interior hero is identical. */
@media (max-width: 940px){ .page-hero { min-height: 500px; } }
@media (max-width: 640px){ .page-hero { min-height: 460px; } }
.page-hero .hero__actions { margin-top: 26px; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(100deg, rgba(15,40,24,.9), rgba(20,54,31,.6)); }
.page-hero .container { padding-top: clamp(48px, 7vw, 72px); padding-bottom: clamp(48px, 7vw, 72px); }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { color: #e7f1ea; font-size: 1.12rem; max-width: 55ch; }
.breadcrumb { font-size: .85rem; color: #bcd7c6; margin-bottom: 14px; letter-spacing: .04em; }
.breadcrumb a { color: #dbeee2; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px){ .grid--3, .grid--4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--sand-200); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: .4rem; }
.card__body p { color: var(--ink-500); font-size: .97rem; }
.card__link { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }
.card__link::after { content: "→"; transition: transform .2s ease; }
.card:hover .card__link::after { transform: translateX(4px); }

/* Feature (icon) cards */
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.feature__icon {
  width: 52px; height: 52px; border-radius: 13px; margin-bottom: 16px;
  background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center;
}
.feature__icon svg { width: 27px; height: 27px; }
.feature h3 { font-size: 1.2rem; }
.feature p { color: var(--ink-500); margin: 0; font-size: .97rem; }

/* Service list (with check) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23276b3d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* Split media + text */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* In every --reverse block the media is the FIRST DOM child, so `order: 2` was pushing
   it back to the right and cancelling the reversal — the modifier did nothing on desktop.
   Left at its natural order it genuinely sits left, so photo sides now alternate down the
   page; on mobile it drops below the copy so every stacked section leads with its heading. */
@media (max-width: 860px){ .split { grid-template-columns: 1fr; gap: 30px; } .split--reverse .split__media { order: 2; } }
/* Fixed ratio so a split section is the same height on every page, regardless of
   whether the source photo is square, portrait or panoramic. */
.split__media img, .split__media .ph {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  width: 100%; aspect-ratio: 4/3; object-fit: cover; height: auto;
}

/* ---------- Image placeholder styling (for photos to be provided) ---------- */
.ph {
  position: relative;
  width: 100%; height: 100%;
  min-height: 220px;
  background:
    repeating-linear-gradient(45deg, rgba(39,107,61,.05) 0 14px, rgba(39,107,61,.09) 14px 28px),
    linear-gradient(135deg, var(--green-100), var(--sand-200));
  display: grid; place-items: center; text-align: center;
  color: var(--green-700);
}
.ph__inner { padding: 18px; }
.ph svg { width: 40px; height: 40px; opacity: .55; margin-bottom: 8px; }
.ph__label { font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .02em; }
.ph__hint { font-size: .72rem; color: var(--ink-500); margin-top: 2px; }

/* ---------- Service area / cities ---------- */
.cities { display: flex; flex-wrap: wrap; gap: 10px; }
/* Cities we have a dedicated page for are links; the rest are plain spans.
   Both share one pill style so the row stays visually uniform. */
.cities span, .cities a {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .5em 1.05em; font-size: .93rem; font-weight: 500; color: var(--ink-700);
  box-shadow: var(--shadow-sm);
}
.section--green .cities span, .section--green .cities a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #eafaf0; }
.cities a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cities a:hover { background: var(--brand-lime); border-color: var(--brand-lime); color: #17301c; }
.section--green .cities a:hover { background: var(--brand-lime); border-color: var(--brand-lime); color: #17301c; }

/* ---------- Testimonials ---------- */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px;
}
.quote .stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; }
.quote p { font-size: 1.02rem; color: var(--ink-700); font-style: italic; margin: 0; }
.quote__who { font-family: var(--font-head); font-weight: 600; color: var(--ink-900); font-size: .95rem; }
.quote__who span { display: block; font-weight: 400; font-size: .84rem; color: var(--ink-500); font-style: normal; }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; counter-reset: step; }
@media (max-width: 860px){ .steps { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 480px){ .steps { grid-template-columns: 1fr;} }
.step { position: relative; padding-top: 8px; }
.step__num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--green-700); color:#fff;
  font-family: var(--font-head); font-weight: 700; display: grid; place-items: center; font-size: 1.15rem;
  margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.step h3 { font-size: 1.12rem; }
.step p { color: var(--ink-500); font-size: .95rem; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--green-800), var(--green-600));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(30px, 5vw, 54px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.cta-band h2 { color: #fff; margin: 0 0 .3em; }
.cta-band p { color: #e2f1e8; margin: 0; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Gallery grid ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px){ .gallery { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .gallery { grid-template-columns: 1fr;} }
.gallery__item { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover img { transform: scale(1.07); }
.gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 12px; color: #fff;
  background: linear-gradient(transparent, rgba(15,40,24,.82)); font-family: var(--font-head);
  font-weight: 600; font-size: .9rem;
}
.filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; }
.filter button {
  font-family: var(--font-head); font-weight: 500; font-size: .92rem; cursor: pointer;
  padding: .5em 1.1em; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-700);
  transition: .18s;
}
.filter button.active, .filter button:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }

/* ---------- Forms ---------- */
.form-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--ink-900); margin-bottom: 6px; }
.field label .req { color: #c0392b; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8em .9em; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: 1rem; color: var(--ink-900); background: var(--sand-100);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(63,145,89,.18); background: #fff;
}
.field textarea { min-height: 130px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .field--row { grid-template-columns: 1fr; } }
.form-note { font-size: .82rem; color: var(--ink-500); margin-top: 6px; }
.form-success {
  display: none; background: var(--green-100); border: 1px solid var(--green-500);
  color: var(--green-800); padding: 14px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500;
}
.form-error {
  display: none; background: #fdecea; border: 1px solid #e6b3ab;
  color: #8c2b20; padding: 14px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500;
}
.form-wrap button[type="submit"][disabled] { opacity: .6; cursor: progress; }
/* Spam honeypot — must stay in the DOM for bots, invisible to people */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- FAQ (native <details>, no JS) ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 4px 22px; transition: border-color .15s, box-shadow .15s;
}
.faq details[open] { border-color: var(--green-500); box-shadow: var(--shadow-md); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--green-500); outline-offset: 3px; border-radius: 6px; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--green-700); border-bottom: 2px solid var(--green-700);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__body { padding: 0 0 20px; color: var(--ink-500); }
.faq__body p { margin: 0 0 12px; }
.faq__body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq details, .faq summary::after { transition: none; }
}

/* ---------- Contact info blocks ---------- */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-list .ico {
  width: 44px; height: 44px; border-radius: 11px; background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; flex: none;
}
.info-list .ico svg { width: 22px; height: 22px; }
.info-list strong { font-family: var(--font-head); color: var(--ink-900); display: block; font-size: .95rem; }
.info-list a, .info-list span { color: var(--ink-700); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-900); color: #bcd2c2; padding-top: 64px; }
.site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }
.site-footer a { color: #cfe3d6; }
.site-footer a:hover { color: var(--gold); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.footer-about p { font-size: .95rem; color: #a9c4b2; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .brand__name { color: #8dc63f; }
.footer-brand .brand__name span { color: #b7c4bb; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .95rem; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 3px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 52px; padding: 22px 0;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: #9bb6a5;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: #dbeee2;
}
.footer-social a:hover { background: var(--gold); color: #23200f; }
.footer-social svg { width: 19px; height: 19px; }

/* ---------- Floating call button (mobile) ---------- */
.fab-call {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  background: var(--green-700); color: #fff; border-radius: 999px;
  padding: .8em 1.2em; font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  box-shadow: var(--shadow-lg); display: none; align-items: center; gap: 8px;
}
.fab-call svg { width: 18px; height: 18px; }
@media (max-width: 940px){ .fab-call { display: inline-flex; } }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack-lg > * + * { margin-top: 26px; }
.badge-row { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
.trust-badge { display:flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--ink-700); }
.trust-badge svg { width:22px; height:22px; color:var(--green-600); flex:none; }

/* ---------- Real logo ---------- */
.brand__logo { height: 56px; width: auto; display: block; }
@media (max-width: 520px){ .brand__logo { height: 46px; } }
.footer-logo { height: 74px; width: auto; background: #fff; padding: 10px 16px; border-radius: 12px; margin-bottom: 16px; }

/* ==========================================================================
   iPhone / small-screen polish
   ========================================================================== */
/* Stop iOS Safari from inflating body copy in landscape. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Long unbroken strings (emails, URLs) wrap instead of forcing sideways scroll. */
body { overflow-wrap: break-word; }

/* Comfortable tap targets and softer tap flash on touch devices. */
a, button, .btn, summary, .filter button, .nav__toggle {
  -webkit-tap-highlight-color: rgba(63,145,89,.18);
}

/* Keep the floating Call button clear of the iPhone home indicator / rounded corners. */
.fab-call {
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: calc(18px + env(safe-area-inset-right, 0px));
}

@media (max-width: 940px) {
  /* Room at the bottom so the floating Call button never covers the footer's last line. */
  .site-footer { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* Very small phones: tighten gutters and vertical rhythm, and let the CTA band center. */
@media (max-width: 400px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .section { padding: clamp(44px, 12vw, 66px) 0; }
  .hero p, .page-hero p { font-size: 1.06rem; }
  .cta-band { text-align: center; justify-content: center; }
  .cta-band__actions { justify-content: center; width: 100%; }
  .btn { width: 100%; }               /* full-width buttons are far easier to tap */
  .nav__cta .btn { width: auto; }     /* …but keep the header CTA compact */
}