/* ===========================================================================
   Green Passion - site stylesheet
   Dark green typography on white and sand. The photographs supply the green;
   the page itself stays quiet. Minimal animation by design.
   =========================================================================== */

:root {
  --green-900: #0d2a1b;
  --green-800: #13402a;
  --green-700: #1a5738;
  --green-600: #24704a;
  --green-500: #2f8b5c;
  --green-300: #8dc0a3;
  --green-100: #e3f0e8;

  --sand-50:  #f5faf5;
  --sand-100: #e8f2e9;
  --sand-200: #d8e8dc;
  --clay:     #a87e56;
  --sage:     #56866f;
  --flower:   #b83d42;
  --page-green: #f0f7f1;
  --surface-green: #f8fbf8;

  --ink:   #16241c;
  --muted: #5f6f66;
  --line:  #d8e6da;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script: "Allura", "Segoe Script", cursive;

  --wrap: 1120px;
  --radius: 11px;
  --radius-lg: 16px;
  --shadow: 0 18px 44px rgba(13, 42, 27, .10);
  --shadow-sm: 0 6px 18px rgba(13, 42, 27, .07);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 70px; }

body {
  margin: 0;
  background: var(--page-green);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-500); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green-800);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(34px, 4.5vw, 54px); }
h2 { font-size: clamp(27px, 3.1vw, 38px); }
h3 { font-size: clamp(19px, 1.8vw, 23px); }
h4 { font-size: 17px; }

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

::selection { background: var(--green-100); }

:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- layout -- */

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

.section { padding: clamp(48px, 6vw, 76px) 0; }
.section--tight { padding: clamp(34px, 4vw, 50px) 0; }
.section--sand { background: var(--sand-50); }
.section--deep { background: var(--green-900); color: #dbe7df; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep .muted { color: #a6bcae; }

.section__head { max-width: 680px; margin-bottom: clamp(26px, 3.5vw, 38px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head p { color: var(--muted); font-size: 16.5px; margin-bottom: 0; }

.eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--green-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.section--deep .eyebrow { color: var(--green-300); }

/* Small visual cues make the four service stages easier to scan. */
.project-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 92px;
  margin-bottom: 10px;
}
.project-step .stat__num { font-size: 34px; line-height: 1; }
.project-step h3 { margin-top: 0; font-size: 20px; }
.project-step__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(31, 111, 78, .22);
  border-radius: 50%;
  background: rgba(137, 184, 144, .12);
  color: var(--green-700);
}
.project-step__icon svg { width: 18px; height: 18px; }

.lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--green-700); color: #fff; }
.btn--primary:hover { background: var(--green-800); color: #fff; }
.btn--ghost { border-color: var(--green-700); color: var(--green-800); background: transparent; }
.btn--ghost:hover { background: var(--green-700); color: #fff; }
.btn--light { background: #fff; color: var(--green-800); }
.btn--light:hover { background: var(--sand-100); color: var(--green-800); }
.btn--outline-light { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--green-800); }
.btn--wa { background: #1f9d55; color: #fff; }
.btn--wa:hover { background: #177f44; color: #fff; }
.btn--sm { padding: 8px 15px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--down::after { content: "\2193"; }
.link-arrow--down:hover::after { transform: translateY(3px); }

/* ---------------------------------------------------------------- header -- */

.maintenance-preview { padding: 8px 18px; text-align: center; background: #8b5a12; color: #fff; font-size: 13px; font-weight: 600; }
.maintenance-preview a { margin-left: 8px; color: #fff; font-weight: 800; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(90deg, rgba(240,247,241,.88), rgba(248,251,247,.82));
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid rgba(38, 99, 65, .15);
  box-shadow: 0 7px 24px rgba(18, 65, 40, .07);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 88px;
}
.site-header .site-header__bar { max-width: none; padding-left: clamp(20px, 3vw, 52px); padding-right: clamp(20px, 3vw, 52px); }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 60px; height: 60px; flex: none; object-fit: contain; }
.site-header .brand__mark--featured {
  width: 66px;
  height: 66px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 4px rgba(70, 145, 96, .14), 0 8px 20px rgba(13, 61, 37, .22);
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.75));
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
/* A confident editorial wordmark: distinctive, but legible at header size. */
.brand__name {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--green-800);
  background: linear-gradient(120deg, var(--green-900) 10%, #327a4d 58%, var(--green-800) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(25, 87, 52, .15));
  transition: filter .2s ease, transform .2s ease;
}
.brand:hover .brand__name {
  filter: drop-shadow(0 3px 7px rgba(25, 87, 52, .24));
  transform: translateY(-1px);
}
.brand__tag { max-width: 235px; margin-top: 5px; padding-left: 1px; font-size: 9px; line-height: 1.2; letter-spacing: .065em; text-transform: uppercase; color: var(--muted); white-space: normal; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 13px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--sand-100); color: var(--green-800); }
.nav a.is-current { color: var(--green-700); font-weight: 650; }

.header-cta { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--green-800);
  text-decoration: none;
  white-space: nowrap;
}
.header-phones { display: flex; align-items: center; gap: 10px; }
.header-phones .header-phone + .header-phone { padding-left: 10px; border-left: 1px solid var(--line); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; margin: 0 auto;
  background: var(--green-800); content: ""; position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .header-phone { display: none; }
  .nav {
    position: fixed;
    inset: 88px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 26px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--sand-100); border-radius: 0; font-size: 17px; }
  .nav .btn { margin-top: 16px; }
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(64vh, 540px);
  padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 6vw, 72px);
  background: var(--green-900) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,30,19,.30) 0%, rgba(9,30,19,.52) 55%, rgba(9,30,19,.78) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__card { position: relative; max-width: 650px; padding: clamp(26px, 3.5vw, 40px); background: linear-gradient(135deg, rgba(13,42,27,.9), rgba(30,88,59,.76)); border-radius: 0 32px 0 32px; box-shadow: 0 22px 54px rgba(0,0,0,.18); backdrop-filter: blur(3px); }
.hero__script { display: block; margin-bottom: -2px; color: #fff; font-family: var(--font-script); font-size: clamp(32px, 4vw, 44px); line-height: 1; }
.hero__phones { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.24); }
.hero__phones a { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .035em; text-decoration: none; }
.hero__phones a:hover { color: var(--green-100); }
.hero h1 { color: #fff; max-width: 14ch; margin-bottom: 20px; }
.hero__sub { max-width: 54ch; font-size: clamp(16px, 1.6vw, 18px); color: #dfeae3; margin-bottom: 24px; }
.hero .eyebrow { color: var(--green-300); }
.hero--inner { min-height: min(40vh, 320px); align-items: center; }
.hero--inner h1 { max-width: 22ch; }

/* Falls back to a woven green gradient until a hero photograph is uploaded. */
.hero--placeholder {
  background-image:
    radial-gradient(120% 90% at 15% 0%, #2a6b47 0%, transparent 55%),
    radial-gradient(90% 80% at 90% 20%, #1d5537 0%, transparent 60%),
    linear-gradient(160deg, #0f3623 0%, #0b2417 100%);
}

.btn--arrow::before { content: "\2192"; display: grid; place-items: center; width: 25px; height: 25px; margin-left: -8px; border-radius: 50%; background: var(--green-700); color: #fff; font-size: 14px; }

.page-head { padding: clamp(34px, 4.5vw, 54px) 0 clamp(22px, 2.5vw, 32px); background: var(--sand-50); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-bottom: 14px; }
.page-head p { max-width: 68ch; color: var(--muted); font-size: 16.5px; margin: 0; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green-700); text-decoration: underline; }
.crumbs span::before { content: "/"; margin-right: 8px; color: var(--line); }

/* ----------------------------------------------------------------- grids -- */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- cards -- */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-green);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--green-300); transform: translateY(-5px); box-shadow: 0 18px 38px rgba(13,42,27,.1); }
a.card { text-decoration: none; color: inherit; }

.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--sand-100); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.card:hover .card__media img { transform: scale(1.03); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 23px; }
.card__title { margin: 0 0 6px; font-size: 21px; }
.card__sci { margin: 0 0 12px; font-style: italic; font-size: 14px; color: var(--muted); }
.card__text { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Service card: no photograph, an icon and generous white space instead. */
.service-card { position: relative; padding: 25px 23px 27px; border-top: 3px solid var(--sage); }
.service-card__content { display: flex; flex-direction: column; flex: 1; }
.service-card--image { padding: 0; border-top: 0; }
.service-card--image::after { top: calc(44% + 18px); }
.service-card--image .service-card__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-100); }
.service-card--image .service-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-card--image:hover .service-card__photo img { transform: scale(1.035); }
.service-card--image .service-card__content { padding: 21px 23px 25px; }
.service-card--image .service-card__icon { width: 38px; height: 38px; margin-bottom: 13px; }
.service-card::after { content: ""; position: absolute; right: 20px; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--flower); opacity: .85; }
.service-card__icon {
  display: block;
  width: 46px; height: 46px; margin-bottom: 20px;
  color: var(--green-600);
}
.service-card__icon svg { width: 100%; height: 100%; }

/* Small facts under a plant name. */
.card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.card__meta span { display: inline-flex; align-items: center; gap: 5px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.chip--sand { background: var(--sand-200); color: #6b5a3f; }
.chip--ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 500; }

.badge-stack { display: flex; flex-wrap: wrap; gap: 7px; }

/* --------------------------------------------------------------- project -- */

.project-card .card__media { aspect-ratio: 3 / 2; }
.project-card__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--muted); }

/* Flex rather than a fixed grid: a project can carry anything from three facts to
   six, and a grid leaves the leftover cells of the last row showing as an empty
   slab. Wrapped rows stretch to fill instead. The negative margin tucks each
   row's first divider under the container border. */
.project-stats {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.project-stats > div {
  flex: 1 1 190px;
  padding: 20px 22px;
  border-left: 1px solid var(--line);
  margin-left: -1px;
}
.project-stats > div + div { border-top: 0; }
.project-stats dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.project-stats dd { margin: 0; font-family: var(--font-display); font-size: 24px; color: var(--green-800); line-height: 1.25; }
@media (max-width: 760px) { .project-stats > div { flex-basis: 45%; } }

/* ----------------------------------------------------------------- stats -- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 28px 24px; }
.stat__num { font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); color: var(--green-700); line-height: 1; }
.section--deep .stat__num { color: #fff; }
.stat__label { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

/* --------------------------------------------------------- simple process -- */
.section--process { background: var(--green-900); color: #dbe7df; }
.section--process h2, .section--process h3 { color: #fff; }
.section--process .eyebrow { color: var(--green-300); }
.section--process .section__head p { color: #abc0b3; }
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: steps; border-top: 1px solid rgba(255,255,255,.18); }
.process__step { position: relative; padding: 36px clamp(22px, 3vw, 42px) 18px 0; }
.process__step + .process__step { padding-left: clamp(22px, 3vw, 42px); border-left: 1px solid rgba(255,255,255,.18); }
/* Number on the left, a small icon for the step on the right of the column. */
.process__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.process__num { display: block; color: var(--green-300); font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.process__icon {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--green-300);
}
.process__icon svg { width: 21px; height: 21px; }
.process__step h3 { font-size: clamp(22px, 2vw, 28px); }
.process__step p { max-width: 34ch; color: #abc0b3; }
.process__action { display: flex; justify-content: center; margin-top: 48px; }

@media (max-width: 760px) {
  .process { grid-template-columns: 1fr; }
  .process__step { padding: 28px 0; }
  .process__step + .process__step { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .process__num { margin-bottom: 16px; }
}

/* ----------------------------------------------------------- split panels -- */

.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 820px) { .panels { grid-template-columns: minmax(0, 1fr); } }

.panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--green-800) center/cover no-repeat;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}
.panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,32,21,.15) 30%, rgba(10,32,21,.80) 100%);
  transition: background .25s ease;
}
.panel:hover::after { background: linear-gradient(180deg, rgba(10,32,21,.28) 20%, rgba(10,32,21,.86) 100%); }
.panel__inner { position: relative; z-index: 1; }
.panel h3 { color: #fff; margin-bottom: 8px; font-size: 23px; }
.panel p { color: #d9e6df; font-size: 15.5px; margin-bottom: 16px; }
.panel--public  { background-image: linear-gradient(150deg, #17593a, #0d3020); }
.panel--private { background-image: linear-gradient(150deg, #3f6b4d, #1a3f2a); }

/* ------------------------------------------------------------- two-column -- */

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
}
.split__media img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------------ list -- */

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--muted); }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--green-500);
  border-bottom: 2px solid var(--green-500);
  transform: rotate(-45deg);
}
.section--deep .ticks li { color: #c6d8cd; }

/* --------------------------------------------------------------- filters -- */

/* A grid, not a flex row: with eight filters the flex version left whichever
   field wrapped last stretched across the whole bar. Every control now keeps the
   same width whatever wraps. */
.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  align-items: end;
  gap: 14px 16px;
  padding: 20px 22px;
  background: var(--sand-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 32px;
}
.toolbar .field { margin: 0; min-width: 0; }
.toolbar__actions { display: flex; gap: 10px; align-items: end; }
/* The search box earns a little more room than a dropdown. */
.toolbar .field--wide { grid-column: span 2; }
@media (max-width: 620px) {
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .toolbar .field--wide { grid-column: span 1; }
  .toolbar__actions .btn { flex: 1; justify-content: center; }
}

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tabs a {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
}
.tabs a:hover { border-color: var(--green-300); color: var(--green-700); }
.tabs a.is-current { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.result-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; color: var(--muted); font-size: 15px; }

.empty {
  padding: 60px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
  background: var(--sand-50);
}

/* ---------------------------------------------------------- plant finder -- */

/* Five questions, each a row of pill choices. Radios rather than dropdowns: on a
   phone every option is visible at once, which is the point of asking somebody
   who does not know the vocabulary. */
.finder {
  display: grid;
  gap: 26px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--sand-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 40px;
}
.finder__q { border: 0; padding: 0; margin: 0; min-width: 0; }
.finder__legend { padding: 0; font-family: var(--font-display); font-size: 19px; color: var(--green-800); }
.finder__hint { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.finder__options { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

/* The radio keeps its keyboard behaviour and stays in the accessibility tree;
   the span next to it is what you actually see. */
.finder__option { position: relative; }
.finder__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.finder__option span {
  display: block;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 550;
}
.finder__option input:hover + span { border-color: var(--green-300); color: var(--green-700); }
.finder__option input:checked + span { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.finder__option input:focus-visible + span { outline: 2px solid var(--green-600); outline-offset: 2px; }
/* "No preference" is the default on every question, so it must not look like a
   deliberate choice sitting there five times over. */
.finder__option--any input:checked + span { background: #fff; border-color: var(--green-300); color: var(--green-700); }
.finder__actions { margin-top: 2px; }
/* "What is it for?" has nine options. At full pill size every one of them took a
   row of its own on a 390px screen, which pushed the button below a screen and a
   half of scrolling. A few pixels off each pill pairs them up again. */
@media (max-width: 620px) {
  .finder { padding: 22px 16px; gap: 22px; }
  .finder__options { gap: 8px; }
  .finder__option span { padding: 8px 13px; font-size: 14px; }
  .finder__actions .btn { flex: 1 1 44%; justify-content: center; }
  .finder__actions .btn--primary { flex-basis: 100%; }
}
.finder__results { scroll-margin-top: 90px; }

/* The doorway to the finder, sitting above the catalogue filter bar. */
.finder-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: -8px 0 20px;
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------------------------------------ plant page -- */

.detail { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 920px) { .detail { grid-template-columns: minmax(0, 1fr); } }

.viewer__main { border-radius: var(--radius-lg); overflow: hidden; background: var(--sand-100); aspect-ratio: 4 / 3; }
.viewer__main img { width: 100%; height: 100%; object-fit: cover; }
.viewer__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.viewer__thumb {
  width: 84px; height: 64px; padding: 0;
  border: 2px solid transparent; border-radius: 9px;
  background: var(--sand-100); overflow: hidden; cursor: pointer;
}
.viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer__thumb.is-active { border-color: var(--green-600); }

.specs { margin: 0; border-top: 1px solid var(--line); }
.specs__row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.specs__row dt { color: var(--muted); font-size: 14.5px; }
.specs__row dd { margin: 0; font-weight: 550; }
@media (max-width: 520px) { .specs__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.sticky-cta {
  position: sticky;
  top: 96px;
  padding: 26px;
  background: var(--sand-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.prose h2 { margin-top: 1.6em; font-size: clamp(23px, 2.4vw, 28px); }
.service-detail-image { width: 100%; margin: 0 0 26px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: #2c3a32; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: .5em; }

/* --------------------------------------------------------------- gallery -- */

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--sand-100); }
.gallery figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------- forms -- */

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: block; }
.field__label { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 600; color: var(--green-800); }
.field__hint { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6f66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
}
.textarea { min-height: 140px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(47, 139, 92, .14);
}
.input::placeholder, .textarea::placeholder { color: #9aa79f; }

.check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.check input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--green-600); flex: none; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 20px; }

.alert { padding: 15px 18px; border-radius: var(--radius); margin-bottom: 22px; font-size: 15px; }
.alert p { margin: 0 0 6px; }
.alert p:last-child { margin: 0; }
.alert--ok  { background: var(--green-100); color: #10462c; border: 1px solid #bfdcca; }
.alert--bad { background: #fdeceb; color: #7d2622; border: 1px solid #f3c9c6; }
.alert--info { background: var(--sand-100); color: #5a4b32; border: 1px solid var(--sand-200); }

.honey { position: absolute; left: -9999px; opacity: 0; }

/* ---------------------------------------------------------------- pager --- */

.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 44px; }
.pager__page, .pager__step {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}
.pager__page:hover, .pager__step:hover { border-color: var(--green-300); color: var(--green-700); }
.pager__page.is-current { background: var(--green-700); border-color: var(--green-700); color: #fff; font-weight: 600; }
.pager__gap { color: var(--muted); padding: 0 4px; }

/* ------------------------------------------------------------------ CTA --- */

.cta-band {
  padding: clamp(44px, 6vw, 76px);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--sage) 0%, #164a37 48%, #0d2e1e 100%);
  color: #fff;
  text-align: center;
}

@media (max-width: 760px) {
  .hero { min-height: 520px; align-items: flex-end; }
  .hero__card { border-radius: 0 26px 0 26px; padding: 28px 24px; }
  .hero__script { font-size: 39px; }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
}

/* The home page is a preview, not the whole catalogue. Keep its rhythm compact
   and let the dedicated pages carry the longer browsing experience. */
.home-page .hero { min-height: 430px; padding-top: 34px; padding-bottom: 34px; }
.home-page .hero__card { max-width: 590px; padding: 26px 30px; }
.home-page .hero h1 { font-size: clamp(34px, 4.2vw, 48px); }
.home-page .hero__sub { margin-bottom: 22px; }
.home-page .section { padding-top: clamp(38px, 4.5vw, 54px); padding-bottom: clamp(38px, 4.5vw, 54px); }
.home-page .section--tight { padding-top: 32px; padding-bottom: 32px; }
.home-page .section__head { margin-bottom: clamp(26px, 3.5vw, 40px); }
.home-page .panel { min-height: 320px; }

@media (max-width: 760px) {
  .home-page .hero { min-height: 0; padding: 42px 0 24px; }
  .home-page .hero__card { padding: 22px 19px; }
  .home-page .hero__script { font-size: 31px; }
  .home-page .hero h1 { font-size: 32px; }
  .home-page .hero__sub { font-size: 15px; line-height: 1.42; }
  .home-page .hero__phones { margin-top: 16px; padding-top: 13px; }
  .home-page .section { padding-top: 32px; padding-bottom: 32px; }
  .home-page .panel { min-height: 220px; }
}

@media (max-width: 620px) {
  /* Homepage cards swipe sideways on phones, keeping the page short while all
     previews remain available. Dedicated listing pages retain vertical cards. */
  .home-page .grid--3 { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 18px 18px; margin-inline: -18px; scrollbar-width: thin; }
  .home-page .grid--3 > * { flex: 0 0 82vw; max-width: 340px; scroll-snap-align: start; }
  .home-page .panels { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
  .home-page .panels > * { flex: 0 0 84vw; scroll-snap-align: start; }
}
.cta-band h2 { color: #fff; max-width: 20ch; margin: 0 auto .6em; }
.cta-band p { color: #cfe0d7; max-width: 58ch; margin: 0 auto 28px; }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------- contact -- */

.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.contact-grid--no-map { grid-template-columns: minmax(0, 760px); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
/* The icons are inline SVGs and `svg { display:block }` was dropping each one
   onto its own line above the label. */
.contact-list dt {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.contact-list dt svg { flex: none; opacity: .8; }
.contact-list dd { margin: 0; font-size: 17px; }
.contact-list a { text-decoration: none; font-weight: 550; }
.phone-pair { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* A faint contour ground sits behind the iframe, so the panel reads as a map
   that is still loading rather than an empty box on a slow connection. */
.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--sand-100);
  background-image:
    repeating-linear-gradient(45deg, rgba(86,134,111,.07) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(86,134,111,.07) 0 2px, transparent 2px 22px);
}
.map-frame iframe { display: block; width: 100%; height: 290px; border: 0; pointer-events: none; user-select: none; }
.map-frame--branded { position: relative; }
.map-pin { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; padding: 5px; transform: translate(-50%, -82%); border: 4px solid #fff; border-radius: 50%; background: var(--green-800); box-shadow: 0 8px 22px rgba(13,42,27,.28); transition: transform .18s ease; }
.map-pin::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 17px; height: 17px; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 4px 0; background: #fff; z-index: -1; }
.map-pin:hover { transform: translate(-50%, -88%) scale(1.05); }
.map-pin img { width: 100%; height: 100%; border-radius: 50%; }
.map-action { margin: 12px 4px 0; font-size: 14px; }

/* ---------------------------------------------------------------- footer -- */

.site-footer { background: var(--green-900); color: #a9c0b3; padding: clamp(32px, 4vw, 44px) 0 20px; font-size: 13px; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 11px; }
.site-footer a { color: #cfe0d7; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .9fr .9fr .95fr 1.15fr; gap: 24px; align-items: start; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-brand .brand__mark { width: 50px; height: 50px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); border-radius: 50%; }
.footer-brand .brand__name {
  color: #fff;
  font-size: 34px;
  background: none;
  -webkit-text-fill-color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.28));
}
.footer-brand .brand:hover .brand__name {
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.38));
}
.footer-brand .brand__tag { max-width: 190px; color: #a9c0b3; font-size: 7.5px; }
.footer-brand p { color: #91a99b; margin-top: 10px; max-width: 31ch; font-size: 12.5px; line-height: 1.5; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 25px; padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 11.5px; color: #7f9689;
}
.footer-bottom a { color: #7f9689; }
.footer-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; }
.creator-credit { color: #9bb0a4; font-size: 11px; letter-spacing: .025em; }
.creator-credit i { color: var(--green-300); font-style: normal; }
.creator-credit b { color: #d2e0d8; letter-spacing: .08em; }
.site-footer li, .site-footer a { overflow-wrap: anywhere; }

.social { display: flex; gap: 8px; margin-top: 11px; }
.social a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
}
.social svg { width: 17px; height: 17px; }

/* --------------------------------------------------------- floating chat -- */

.utility-actions { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: grid; justify-items: center; gap: 10px; }
.utility-btn { position: relative; width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(19,64,42,.2); border-radius: 50%; background: var(--surface-green); color: var(--green-800); box-shadow: 0 7px 20px rgba(13,42,27,.16); font: inherit; text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.utility-btn:hover { transform: translateY(-2px); background: #fff; color: var(--green-800); box-shadow: 0 10px 24px rgba(13,42,27,.2); }
.utility-btn--wa { border-color: #20b859; background: #25d366; color: #fff; }
.utility-btn--wa:hover { background: #20bd5a; color: #fff; }
.utility-btn--quote { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.utility-btn--quote:hover { background: var(--green-800); color: #fff; }
.utility-label { position: absolute; right: 58px; top: 50%; padding: 6px 10px; transform: translate(6px,-50%); border-radius: 6px; background: var(--green-900); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.utility-btn:hover .utility-label, .utility-btn:focus-visible .utility-label { opacity: 1; visibility: visible; transform: translate(0,-50%); }
.utility-btn[hidden] { display: none; }

.wa-chooser {
  width: min(430px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-green);
  color: var(--green-900);
  box-shadow: 0 24px 70px rgba(8, 38, 24, .28);
}
.wa-chooser::backdrop { background: rgba(7, 28, 18, .5); backdrop-filter: blur(3px); }
.wa-chooser__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.wa-chooser__head h2 { margin: 4px 0 0; font-size: clamp(27px, 5vw, 36px); }
.wa-chooser__close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(19,64,42,.08); color: var(--green-800); font-size: 25px; line-height: 1; cursor: pointer; }
.wa-chooser__intro { margin: 10px 0 18px; color: var(--muted); font-size: 14px; }
.wa-chooser__options { display: grid; gap: 10px; }
.wa-chooser__option { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--green-900); text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.wa-chooser__option:hover { transform: translateY(-1px); border-color: #75bd91; box-shadow: 0 7px 20px rgba(13,42,27,.1); }
.wa-chooser__icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #25d366; color: #fff; }
.wa-chooser__icon--phone { background: var(--green-700); }
.wa-chooser__option small, .wa-chooser__option strong { display: block; }
.wa-chooser__option small { margin-bottom: 2px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.wa-chooser__option strong { font-size: 17px; }

@media print { .utility-actions, .mobile-bar, .site-header, .site-footer { display: none; } }

/* -------------------------------------------------------------- a11y ------ */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--green-800); color: #fff;
}
.skip-link:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------- header CTA / sub-nav rules -- */
/* The quote button appears twice in the markup - once in the desktop bar and
   once inside the mobile drawer. Exactly one of them is ever visible. */
.nav > .btn { display: none; }
.nav__sub { font-size: 14px !important; color: var(--muted) !important; }

@media (min-width: 1001px) {
  .site-header__bar { position: relative; }
  .site-header__bar > .nav { position: absolute; left: 50%; transform: translateX(-50%); }
  .nav__sub { display: none; }          /* reached from Services and the footer */
}
@media (min-width: 1001px) and (max-width: 1220px) {
  .header-phone { display: none; }
  .nav a { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1000px) {
  .header-cta { display: none; }
  .nav > .btn { display: inline-flex; }
  .nav__sub { padding-left: 18px !important; }
}

/* ------------------------------------------------------- narrow phones ----- */
/* The tagline is a long, letter-spaced string. On a 390px screen it pushed the
   menu button off the edge of the header, so it steps aside there. */
.brand { min-width: 0; }
.brand__text { min-width: 0; }
.brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .site-header__bar { min-height: 76px; }
  .site-header .brand__mark { width: 52px; height: 52px; }
  .site-header .brand__name { font-size: 30px; }
  .site-header .brand__tag { display: block; max-width: 175px; font-size: 8px; letter-spacing: .04em; }
  .site-header__bar { gap: 12px; }
  .nav { inset: 76px 0 auto; max-height: calc(100vh - 76px); }
}

@media (max-width: 360px) {
  .site-header .brand__tag { max-width: 145px; font-size: 7.5px; }
}

/* --------------------------------------------------- phone contact bar ----- */
/* Hidden on desktop, where the header already carries the phone number and the
   quote button. On a phone it is the only thing that must never scroll away. */
.mobile-bar { display: none; }

@media (max-width: 760px) {
  .mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 20px rgba(13, 42, 27, .10);
  }
  .mobile-bar__btn {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 8px 4px;
    background: #fff;
    color: var(--green-800);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    text-align: center;
  }
  .mobile-bar__btn span { line-height: 1.2; }
  .mobile-bar__btn--wa { background: #1f9d55; color: #fff; }
  .mobile-bar__btn--quote { background: var(--green-700); color: #fff; }

  /* The bar sits over the page, so the footer needs room to clear it. */
  body { padding-bottom: 58px; }
  .utility-actions { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .utility-btn { width: 42px; height: 42px; }
  .utility-btn--wa { display: none; } /* WhatsApp already lives in the mobile bar. */
  .utility-btn--quote { display: none; } /* Quote is in the mobile contact bar. */
  .utility-label { display: none; }
}

/* Let the mobile actions fill the width when a phone or WhatsApp line is off. */
.mobile-bar:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.mobile-bar:has(> :first-child:last-child) { grid-template-columns: 1fr; }

/* ------------------------------------------------------- trust facts ------- */
/* Shown in place of the headline figures until the owner confirms those, so the
   site is never publishing a number nobody has checked. */
/* A bordered panel, not loose text: an owner who has filled in only one of these
   would otherwise get a single line floating in an empty half of the page. */
.trust {
  display: grid;
  margin: 0;
  padding: 4px 26px;
  background: var(--surface-green);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.trust__item { padding: 18px 0; border-top: 1px solid var(--line); }
.trust__item:first-child { border-top: 0; }
.trust__item dt {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 5px;
  color: var(--green-600);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.trust__item dt svg { flex: none; opacity: .85; }
.trust__item dd { margin: 0; font-size: 17px; line-height: 1.5; }

.section--deep .trust { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.section--deep .trust__item { border-top-color: rgba(255, 255, 255, .12); }
.section--deep .trust__item dt { color: var(--green-300); }
.section--deep .trust__item dd { color: #dbe7df; }

/* Sparse trust block: one column, with the facts running across as a strip. */
.split--stack { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
/* Full width would give a 120-character measure; text stays readable. */
.split--stack > div:first-child { max-width: 74ch; }
.split--stack .trust { padding: 0; }
.split--stack .trust__item {
  padding: 18px 26px;
  border-top: 0;
  border-left: 1px solid var(--line);
  margin-left: -1px;
}
@media (min-width: 700px) {
  .split--stack .trust { display: flex; flex-wrap: wrap; }
  .split--stack .trust__item { flex: 1 1 220px; }
}

/* Filters collapse behind a button on a phone (see app.js). */
.toolbar[hidden] { display: none; }
.toolbar-toggle {
  display: none;
  width: 100%;
  margin-bottom: 18px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sand-50);
  color: var(--green-800);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.toolbar-toggle:hover { border-color: var(--green-300); }
@media (max-width: 620px) { .toolbar-toggle { display: block; } }

/* Keeps a long tagline from leaving one word alone on the last line. */
.eyebrow { text-wrap: balance; }

/* ------------------------------------------------------- Lebanon locator --- */
.lebanon-map__frame {
  padding: 18px;
  background: linear-gradient(145deg, #c7ddcd 0%, #aecab7 100%);
  border: 1px solid rgba(40, 95, 64, .18);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 12px 32px rgba(21,72,45,.08);
}
.lebanon-map { width: 100%; height: auto; max-height: 500px; display: block; margin: 0 auto; }

.lebanon-map__land {
  display: none;
  fill: url(#lebanon-land);
  stroke: var(--green-600);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lebanon-map__governorate {
  fill: #d8eadc;
  stroke: #477c5c;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  transition: fill .2s ease, stroke .2s ease, filter .2s ease;
}
.lebanon-map__region-link:nth-child(2n) .lebanon-map__governorate { fill: #c9e0cf; }
.lebanon-map__region-link:nth-child(3n) .lebanon-map__governorate { fill: #e2efe5; }
.lebanon-map__region-link { cursor: pointer; outline: none; }
.lebanon-map__region-link:hover .lebanon-map__governorate {
  fill: #f4faf5;
  stroke: #174f32;
  filter: drop-shadow(0 3px 5px rgba(18, 75, 44, .2));
}
.lebanon-map__region-link:focus .lebanon-map__governorate {
  fill: #f4faf5;
  stroke: #174f32;
  stroke-width: 2.5;
}
.lebanon-map__outline {
  fill: none;
  stroke: var(--green-700);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.lebanon-map__governorate-labels {
  fill: #285f40;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  paint-order: stroke;
  stroke: rgba(239, 247, 241, .88);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.lebanon-map__governorate-name--tiny { font-size: 8px; }
.lebanon-map__pin { pointer-events: none; }
.lebanon-map__marker { fill: var(--green-700); }
.lebanon-map__dot { fill: #fff; stroke: var(--green-700); stroke-width: 1; }