/* ==========================================================================
   RiseUp Hydroponics — Stylesheet
   Font: Inter (headings use 700–800 weight with tight tracking)
   ========================================================================== */

:root {
  /* Brand palette
     Deep Forest Green  #283F1A  main logo, headings
     Secondary Green    #2F4A20  supporting green elements
     Root Gold          #A3823B  roots / accent                       */
  --forest: #283F1A;          /* primary brand green */
  --leaf:   #2F4A20;          /* secondary / supporting green */
  --gold:   #A3823B;          /* root gold accent */
  --gold-soft: #c5a35a;       /* lighter gold for dark backgrounds */

  /* Neutrals derived from the brand green */
  --bg: #f7f6f1;
  --bg-tint: #eef1e8;
  --surface: #ffffff;
  --ink: #1b2714;             /* headings, darkest text */
  --ink-2: #2a3a20;
  --muted: #5f6a56;
  --line: rgba(40, 63, 26, 0.12);
  --line-light: rgba(255, 255, 255, 0.14);

  /* Kept for components that previously used a bright accent; both now
     resolve to the gold so nothing is left using the old lime. */
  --lime: #A3823B;
  --lime-deep: #8d6f31;

  /* Type */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Shape */
  --radius-sm: 8px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.8s;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 0px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--lime); color: var(--ink); }

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.section { padding-block: clamp(64px, 7vw, 100px); position: relative; }
.section--tint { background: var(--bg-tint); }
.section--dark {
  background: var(--ink);
  color: #f2f5f0;
}
.section--dark .section-sub { color: rgba(242, 245, 240, 0.65); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.section-title {
  color: var(--forest);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.section-title em {
  font-style: normal;
  color: var(--leaf);
  font-weight: 800;
}
.section--dark .section-title,
.clients .section-title { color: #fff; }
.section--dark .section-title em { color: var(--gold-soft); }

.section-sub {
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 78ch;
  margin-top: 16px;
}

.section-head {
  max-width: 900px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}
.section-head .section-sub { margin-inline: auto; }
.section-head--row {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.section-head--row > div { text-align: center; }
.section-head--row .section-sub { margin-top: 0; max-width: 72ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 18px;
}
.eyebrow--light { color: var(--lime); }
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 0 rgba(47,74,32, 0.5);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47,74,32, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(47,74,32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47,74,32, 0); }
}

.icon { display: block; flex: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 0.4s var(--ease), color 0.3s;
}
.btn > * { position: relative; z-index: 1; }
/* Text nodes without a wrapper would otherwise sit under .btn::before */
.btn { z-index: 0; }
.btn::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform 0.5s var(--ease);
  z-index: 0;
  will-change: transform;
  backface-visibility: hidden;
}
.btn:hover::before { transform: translateY(0); }
.btn svg { transition: transform 0.4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { background: var(--forest); color: #fff; box-shadow: 0 10px 30px -12px rgba(40,63,26, 0.6); }
.btn--primary::before { background: var(--leaf); }
.btn--primary:hover { box-shadow: 0 16px 36px -12px rgba(47,74,32, 0.7); }

.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }

.btn--lime { background: var(--forest); color: #fff; }
.btn--lime::before { background: var(--leaf); }

.btn--sm { padding: 11px 20px; font-size: 0.86rem; }

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__mark { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.preloader__logo {
  width: clamp(110px, 18vw, 150px);
  height: clamp(110px, 18vw, 150px);
  object-fit: contain;
  background: #fff; border-radius: 22px; padding: 16px;
  animation: fadeUp 0.7s var(--ease) both;
}
.preloader__mark svg path {
  fill: none; stroke: var(--lime); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: draw 1.2s var(--ease) forwards;
}
.preloader__mark svg .pl-leaf { animation-delay: 0.25s; }
.preloader__mark svg .pl-leaf--2 { animation-delay: 0.45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.preloader__text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.02em;
  color: #f2f5f0; letter-spacing: 0.04em;
  opacity: 0; animation: fadeUp 0.8s 0.5s var(--ease) forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Progress bar
   -------------------------------------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; pointer-events: none; }
.progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--leaf), var(--lime));
  transform-origin: left; transform: scaleX(0);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* ---- Announcement strip ---- */
.topbar {
  /* Scrolls away with the page — only the header stays pinned.
     Lower z-index than the header so it passes underneath it. */
  position: relative; z-index: 1;
  background: var(--forest);
  color: rgba(255,255,255,0.88);
  font-size: 0.79rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: 38px;
}
.topbar__contact { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topbar__link {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: color 0.25s;
}
.topbar__link .icon { color: var(--gold-soft); flex: none; }
a.topbar__link:hover { color: #fff; }

.topbar__social { display: flex; align-items: center; gap: 6px; }
.topbar__social a {
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.8);
  transition: background 0.25s, color 0.25s;
}
.topbar__social a:hover { background: var(--gold); color: #fff; }

.header {
  position: sticky; top: 0; z-index: 1250;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.4s var(--ease), background 0.4s;
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 24px -14px rgba(27, 39, 20, 0.3);
}
.header__inner {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
/* Scrolled state is intentionally identical to the default state:
   the bar keeps the same height, fill and shadow while scrolling. */

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--forest); }
.brand--light { color: var(--lime); }
.brand__mark { display: grid; place-items: center; width: 46px; height: 46px; flex: none; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The logo is dark green; on the dark footer give it a light backing */
.brand__mark--footer {
  background: #fff; border-radius: 9px; padding: 5px;
}
.brand__text {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); display: flex; flex-direction: column;
}
.brand--light .brand__text { color: #fff; }
.brand__text small {
  font-family: var(--font-body); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 3px;
}
.brand--light .brand__text small { color: rgba(255,255,255,0.55); }

/* Desktop: the nav sits visually inside the header bar but lives outside
   .header in the DOM, so the mobile drawer can cover the whole screen.
   It is FIXED (not absolute) so it stays put with the sticky header. */
.nav {
  position: fixed; top: 38px; left: 0; right: 0;
  height: 68px;
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding: 0 170px 0 230px;         /* clear the logo and the CTA */
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  pointer-events: none; z-index: 1300;
  transition: top 0.3s var(--ease);
}
.nav > * { pointer-events: auto; }
/* Once the topbar has scrolled away the nav rides at the very top */
.header.is-scrolled ~ .nav,
body.is-scrolled .nav { top: 0; }
.nav__link {
  position: relative; padding: 9px 13px; font-weight: 500; font-size: 0.85rem; color: var(--ink-2);
  transition: color 0.3s;
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--leaf); border-radius: 2px;
  transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.burger {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.4s var(--ease), opacity 0.3s; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__link.is-current { color: var(--forest); font-weight: 600; }
.nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }

/* ---- Map (contact page) ---- */
.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -30px rgba(27,39,20,0.35);
  line-height: 0;
}
.map-frame iframe { display: block; filter: grayscale(0.15) contrast(1.02); }
.map-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }

/* ---- Nav dropdown ---- */
.nav__cta--mobile { display: none; }
.nav__item { position: relative; }
.nav__item--has-menu > .nav__link { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { transition: transform 0.3s var(--ease); }
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 290px; padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 50px -24px rgba(27,39,20,0.4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0.25s;
  z-index: 60;
}
/* Invisible bridge so the menu does not close while moving the cursor to it */
.nav__item--has-menu::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.nav__menu-all {
  display: block; padding: 9px 12px; margin-bottom: 4px;
  border-radius: 8px; background: var(--bg-tint);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--forest);
  transition: background 0.25s;
}
.nav__menu-all:hover { background: var(--forest); color: var(--lime); }

.nav__menu-link {
  display: block;
  padding: 10px 14px; border-radius: 8px;
  font-size: 0.87rem; font-weight: 500; color: var(--ink);
  transition: background 0.22s, color 0.22s;
}
.nav__menu-link:hover { color: var(--forest); }
.nav__menu-link:hover, .nav__menu-link.is-current { background: var(--bg-tint); }



/* Services list rows become clickable */
.svc-item[data-href] { cursor: pointer; }

/* ---- Service detail pages ---- */
.crumbs { display: flex; gap: 8px; font-size: 0.78rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { transition: color 0.25s; }
.crumbs a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

.svc-detail__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: start; }
.svc-detail__head { margin-bottom: 22px; }
.svc-detail__head .section-title { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.svc-detail__intro { font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 28px; }
.svc-detail__main h2 { color: var(--forest);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.2rem; letter-spacing: -0.025em; margin-bottom: 16px;
}
.check-list--lg li { font-size: 0.92rem; font-weight: 400; color: var(--muted); margin-bottom: 12px; }
.check-list--lg li::before { top: 2px; }

.svc-detail__suits {
  display: flex; gap: 14px; margin-top: 30px; padding: 20px 22px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.svc-detail__icon {
  width: 42px; height: 42px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: #fff; color: var(--forest);
  border: 1px solid var(--line);
}
.svc-detail__suits strong { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--forest); margin-bottom: 5px; }
.svc-detail__suits p { font-size: 0.89rem; color: var(--muted); line-height: 1.6; }

.svc-side-media {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; margin-bottom: 18px;
  background: linear-gradient(140deg, #dbe6cf, #2F4A20);
  box-shadow: 0 24px 48px -30px rgba(27,39,20,0.45);
}
.svc-side-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-side-media.is-fallback img { display: none; }

.svc-cta {
  padding: 26px; border-radius: var(--radius-lg);
  background: var(--forest); color: #fff; margin-bottom: 18px;
}
.svc-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.svc-cta p { font-size: 0.87rem; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 18px; }
.svc-cta .btn--primary { background: var(--lime); color: var(--ink); }
.svc-cta .btn--primary::before { background: #fff; }
.svc-cta__phone {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 0.88rem; font-weight: 600; color: var(--lime);
}
.svc-cta__phone:hover { text-decoration: underline; text-underline-offset: 3px; }


/* --------------------------------------------------------------------------
   Hero — full-width image banner (text is part of the artwork)
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--bg); }

/* Screen-reader-only heading: the visible one lives inside the banner image */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hero-swiper { position: relative; z-index: 1; }
.hero-swiper .swiper-slide { line-height: 0; }

.hero__banner { display: block; position: relative; }
.hero__banner picture, .hero__banner img { display: block; width: 100%; height: auto; }

/* Controls float over the artwork, clear of the baked-in button on the left */
.hero__nav {
  position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vh, 32px);
  z-index: 3; display: flex; align-items: center; gap: 10px;
}
.hero__arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
  background: rgba(255,255,255,0.75); color: var(--forest);
  border: 1px solid rgba(40,63,26,0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -6px rgba(27,39,20,0.3);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.hero__arrow:hover { background: var(--forest); color: #fff; transform: scale(1.06); }
.hero__pagination { display: flex; align-items: center; gap: 6px; width: auto !important; }
.hero__pagination .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 3px; margin: 0 !important;
  background: rgba(40,63,26,0.3); opacity: 1;
  transition: width 0.4s var(--ease), background 0.3s;
}
.hero__pagination .swiper-pagination-bullet-active { width: 26px; background: var(--gold); }

/* One slide only: hide the controls entirely */
.hero-swiper.is-single .hero__nav { display: none; }

/* ---- USP marquee ----
   Scrolling band with a gold leaf mark between items. Subtle tint and
   inner shadow give it depth so it does not read as bare text. */
.marquee {
  position: relative; z-index: 1;
  padding: 20px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcf9 0%, var(--bg-tint) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.marquee::before,
.marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: clamp(40px, 8vw, 130px); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, #fbfcf9 10%, transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-tint) 10%, transparent); }

.marquee__track {
  display: flex; width: max-content;
  animation: marquee 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__run { display: flex; align-items: center; }

.marquee__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 clamp(20px, 2.2vw, 34px);
  font-family: "Fraunces", Georgia, serif;
  font-style: normal; font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  letter-spacing: -0.015em;
  color: var(--forest);
  white-space: nowrap;
}
.marquee__run .marquee__item:nth-child(4n+3) { color: var(--gold); }

.marquee__icon {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(163,130,59,0.14);
  color: var(--gold);
}
/* Thin divider between items */
.marquee__run .marquee__item + .marquee__item::before,
.marquee__run + .marquee__run .marquee__item:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 22px; margin-top: -11px;
  background: var(--line);
}
.marquee__item { position: relative; }

@keyframes marquee { to { transform: translateX(-50%); } }


/* --------------------------------------------------------------------------
   About / Bento
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 280px 200px;
  gap: 16px;
}
.bento__item {
  border-radius: var(--radius-lg);
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative; overflow: hidden;
  box-shadow: 0 10px 24px -20px rgba(27,39,20,0.3);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s;
}
.bento__item:hover { box-shadow: 0 16px 32px -20px rgba(27,39,20,0.38); border-color: rgba(47,74,32,0.3); }

/* Stat cards: number sits above its caption, grouped — not pushed apart */
.bento__item--stat { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.bento__item--stat p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.stat__num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1;
  color: var(--forest); letter-spacing: -0.045em;
}
.bento__item--img { padding: 0; grid-column: 3 / span 2; grid-row: 1; }
.bento__item--img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bento__item--img:hover img { transform: scale(1.05); }
.bento__item--img.is-fallback { background: linear-gradient(135deg, #dbe6cf, #283F1A); }
.bento__label {
  position: absolute; left: 16px; bottom: 16px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.85); backdrop-filter: blur(8px);
  font-size: 0.8rem; font-weight: 700;
}
.bento__item--text {
  grid-column: 1 / span 2; grid-row: 1;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(32px, 3.2vw, 42px) 28px 28px;
}
.bento__item--text h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; margin-bottom: 12px; letter-spacing: -0.025em; }
.bento__item--text p { color: var(--muted); font-size: 0.89rem; margin-bottom: 16px; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 8px; font-weight: 500; font-size: 0.85rem; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--lime); color: var(--forest);
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 800;
}
.bento__item--accent {
  background: var(--forest); color: #fff; border-color: transparent;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.bento__item--accent svg { color: var(--lime); }
.bento__item--accent p { font-size: 0.88rem; line-height: 1.5; }
.bento__item--accent strong { color: var(--lime); }

/* ---- About story (about page) ---- */
.story__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

.story__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, #dbe6cf, #2F4A20);
  box-shadow: 0 30px 60px -36px rgba(27,39,20,0.45);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media.is-fallback img { display: none; }
.story__badge {
  position: absolute; left: 18px; bottom: 18px;
  padding: 12px 18px; border-radius: var(--radius);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -18px rgba(27,39,20,0.5);
}
.story__badge strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem; letter-spacing: -0.02em; color: var(--forest);
}
.story__badge span { font-size: 0.76rem; color: var(--muted); }

.story__body h3 { color: var(--forest);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: -0.03em; margin-bottom: 12px;
}
.story__body > p { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 26px; }

.story__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 22px 0; margin-bottom: 24px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.story__stats dt {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--forest); margin-bottom: 6px;
}
.story__stats dd { font-size: 0.79rem; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Services — editorial list w/ cursor preview
   -------------------------------------------------------------------------- */
.svc-list { border-top: 1px solid var(--line-light); }
.svc-item {
  display: grid; grid-template-columns: 70px 1fr 60px; align-items: center; gap: 24px;
  padding: 34px 0; border-bottom: 1px solid var(--line-light);
  cursor: pointer; position: relative;
  transition: padding-left 0.5s var(--ease);
}
.svc-item::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.svc-item:hover::before { transform: scaleX(1); }
.svc-item:hover { padding-left: 16px; }
.svc-item__num { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: rgba(242,245,240,0.4); transition: color 0.3s; }
.svc-item:hover .svc-item__num { color: var(--lime); }
.svc-item__body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: -0.03em; margin-bottom: 8px; transition: transform 0.5s var(--ease); }
.svc-item:hover .svc-item__body h3 { transform: translateX(6px); }
.svc-item__body p { color: rgba(242,245,240,0.6); max-width: 60ch; font-size: 0.9rem; }
.svc-item__arrow {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-light); font-size: 1.2rem;
  transition: background 0.4s, color 0.4s, transform 0.5s var(--ease);
}
.svc-item:hover .svc-item__arrow { background: var(--lime); color: var(--ink); transform: rotate(-45deg); }

.svc-preview {
  position: fixed; top: 0; left: 0; z-index: 50;
  width: 280px; aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden; pointer-events: none;
  opacity: 0; transform: scale(0.85) rotate(-4deg);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  background: var(--forest);
}
.svc-preview.is-visible { opacity: 1; transform: scale(1) rotate(0); }
.svc-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Services grid (services page) ---- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* First two tiles span wider so the row of five stays balanced */
.svc-tile:nth-child(1), .svc-tile:nth-child(2) { grid-column: span 3; }
.svc-tile:nth-child(1), .svc-tile:nth-child(2) { grid-column: auto; }

.svc-tile {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 28px -22px rgba(27,39,20,0.35);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.svc-tile:hover { box-shadow: 0 20px 40px -22px rgba(27,39,20,0.45); border-color: rgba(47,74,32,0.3); }

.svc-tile__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.svc-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.svc-tile:hover .svc-tile__media img { transform: scale(1.05); }
.svc-tile__media.is-fallback { background: linear-gradient(140deg, #dbe6cf, #2F4A20); }
.svc-tile__media.is-fallback img { display: none; }
.svc-tile__num {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 11px; border-radius: 6px;
  background: rgba(16,24,11,0.72); color: var(--gold-soft);
  font-family: var(--font-display); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}

.svc-tile__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.svc-tile h3 { color: var(--forest);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.025em; line-height: 1.3;
  color: var(--ink); margin-bottom: 8px;
}
.svc-tile p { color: var(--muted); font-size: 0.87rem; line-height: 1.6; margin-bottom: 16px; flex: 1; }
.svc-tile__link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.83rem; font-weight: 700; color: var(--forest);
  transition: gap 0.3s var(--ease), color 0.3s;
}
.svc-tile:hover .svc-tile__link { gap: 11px; color: var(--gold); }

/* --------------------------------------------------------------------------
   Process — four horizontal step cards on a connector rail
   -------------------------------------------------------------------------- */
.psteps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.pstep {
  position: relative;
  padding: 24px 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px -20px rgba(27,39,20,0.3);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pstep:hover { box-shadow: 0 16px 32px -20px rgba(27,39,20,0.4); border-color: rgba(47,74,32,0.3); }

/* Rail: a short connector drawn BETWEEN cards only, so it never overshoots */
.pstep:not(:last-child)::after {
  content: "";
  position: absolute; top: 44px; right: -23px;
  width: 24px; height: 2px;
  background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease), background 0.6s;
}
.pstep.is-active:not(:last-child)::after { transform: scaleX(1); background: var(--leaf); }

.pstep__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.pstep__num {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--bg-tint); color: var(--muted);
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.82rem; letter-spacing: -0.02em;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.pstep.is-active .pstep__num { background: var(--forest); color: var(--lime); }

.pstep__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pstep.is-active .pstep__dot {
  background: var(--leaf);
  box-shadow: 0 0 0 4px rgba(47,74,32,0.15);
}

.pstep h3 { color: var(--forest);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.025em;
  color: var(--ink); margin-bottom: 8px;
}
.pstep p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; margin-bottom: 16px; }

.pstep__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--bg-tint); border: 1px solid var(--line);
  font-size: 0.72rem; font-weight: 600; color: var(--forest);
}
.pstep__tag .icon { color: var(--leaf); }

/* --------------------------------------------------------------------------
   Produce
   -------------------------------------------------------------------------- */
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface); border-radius: 12px; border: 1px solid var(--line); }
.tab { padding: 8px 16px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.8rem; color: var(--muted); transition: background 0.3s, color 0.3s; }
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--ink); color: #fff; }

/* Full-bleed: the slider breaks out of .container so the peeking card
   runs to the screen edge instead of being cut by the gutter. */
.produce-swiper {
  overflow: hidden; padding-bottom: 4px;
  margin-right: calc(-1 * (50vw - 50%));
  padding-right: 0;
}
.produce-swiper .swiper-slide { height: auto; }
.produce__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.produce__pagination { display: flex; align-items: center; gap: 6px; width: auto !important; }
.produce__pagination .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 3px; margin: 0 !important;
  background: rgba(40,63,26,0.28); opacity: 1;
  transition: width 0.4s var(--ease), background 0.3s;
}
.produce__pagination .swiper-pagination-bullet-active { width: 26px; background: var(--gold); }
.produce__nav .hero__arrow { background: var(--surface); border-color: var(--line); color: var(--forest); }
.produce__nav .hero__arrow:hover { background: var(--forest); color: #fff; }
.p-card {
  position: relative;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink);
  aspect-ratio: 3 / 4;
  /* Shadow is always on; the card does not lift on hover. */
  box-shadow: 0 14px 30px -18px rgba(27,39,20,0.38);
  transition: box-shadow 0.4s var(--ease), opacity 0.4s;
}
.p-card.is-hidden { display: none; }
.p-card:hover { box-shadow: 0 18px 36px -18px rgba(27,39,20,0.46); }
.p-card__img { position: absolute; inset: 0; background: linear-gradient(135deg, #e3f0d6, #9bcf7a); }
.p-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.p-card:hover .p-card__img img { transform: scale(1.06); }
.p-card__img.is-fallback img { display: none; }
.p-card__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,20,13,0.92) 0%, rgba(8,20,13,0.55) 34%, rgba(8,20,13,0.05) 62%);
}
.p-card__body {
  position: absolute; inset: auto 0 0 0;
  padding: 20px 20px 22px; color: #fff; z-index: 1;
}
.p-card__tag {
  display: inline-block; padding: 5px 10px; border-radius: 6px;
  background: rgba(163,130,59,0.9); color: var(--ink);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.p-card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 6px; color: #fff;
}
.p-card p {
  color: rgba(255,255,255,0.72); font-size: 0.82rem; line-height: 1.5;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease);
}
.p-card:hover p { max-height: 70px; opacity: 1; }
.produce__note { margin-top: 40px; text-align: center; color: var(--muted); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery-swiper { width: min(1400px, 100% - var(--gutter) * 2); margin-inline: auto; overflow: hidden; }
.gallery-swiper .swiper-slide { height: auto; }
.gallery-swiper .g-item { aspect-ratio: 4 / 3; grid-row: auto !important; grid-column: auto !important; }
.gallery-swiper .g-item img { transform: none !important; }
.gallery__nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.gallery__pagination { display: flex; align-items: center; gap: 6px; width: auto !important; }
.gallery__pagination .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 3px; margin: 0 !important;
  background: rgba(40,63,26,0.28); opacity: 1;
  transition: width 0.4s var(--ease), background 0.3s;
}
.gallery__pagination .swiper-pagination-bullet-active { width: 26px; background: var(--gold); }
.gallery__nav .hero__arrow { background: var(--surface); border-color: var(--line); color: var(--forest); }
.gallery__nav .hero__arrow:hover { background: var(--forest); color: #fff; }
.g-item {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, #dbe6cf, #283F1A);
}
.g-item--tall { grid-row: span 2; }
.g-item--wide { grid-column: span 2; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); will-change: transform; }
.g-item.is-fallback img { display: none; }
.g-item figcaption {
  position: absolute; left: 16px; bottom: 16px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(27,39,20,0.6); color: #fff; backdrop-filter: blur(8px);
  font-size: 0.8rem; font-weight: 600;
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--ease);
}
.g-item:hover figcaption { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Testimonials slider
   -------------------------------------------------------------------------- */
.slider__nav { display: flex; gap: 10px; }
.slider__btn {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-light);
  display: grid; place-items: center; font-size: 1.2rem;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.slider__btn:hover { background: var(--lime); color: var(--ink); transform: scale(1.06); }

.slider { overflow: hidden; }
.slider__track { display: flex; gap: 22px; transition: transform 0.8s var(--ease); will-change: transform; }
.t-card {
  flex: 0 0 calc((100% - 44px) / 3);
  padding: 36px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-light);
  position: relative; display: flex; flex-direction: column; gap: 22px;
  transition: background 0.4s, border-color 0.4s;
}
.t-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(163,130,59,0.35); }
.t-card__quote { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 0.6; color: var(--lime); }
.t-card p { font-size: 1.02rem; line-height: 1.65; color: rgba(242,245,240,0.85); flex: 1; }
.t-card footer { display: flex; flex-direction: column; gap: 2px; }
.t-card footer strong { font-size: 0.98rem; }
.t-card footer span { font-size: 0.82rem; color: rgba(242,245,240,0.55); }

.slider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.slider__dots button { width: 8px; height: 8px; border-radius: 3px; background: rgba(255,255,255,0.25); transition: width 0.4s var(--ease), background 0.3s; }
.slider__dots button.is-active { width: 28px; background: var(--lime); }

/* --------------------------------------------------------------------------
   Who we serve — photo background with glass cards
   -------------------------------------------------------------------------- */
.clients { position: relative; isolation: isolate; overflow: hidden; }
.clients__bg { position: absolute; inset: 0; z-index: -2; }
.clients__bg img { width: 100%; height: 100%; object-fit: cover; }
.clients__bg.is-fallback { background: linear-gradient(140deg, #16301f, #0c1a12); }
.clients__bg.is-fallback img { display: none; }
/* Dark scrim keeps the white text readable over any photo */
.clients__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,24,11,0.78) 0%, rgba(16,24,11,0.56) 45%, rgba(16,24,11,0.82) 100%),
    radial-gradient(circle at 78% 25%, rgba(47,74,32,0.2), transparent 55%);
}
.clients .container { position: relative; z-index: 1; }

.clients__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.c-card {
  padding: 24px 18px; border-radius: var(--radius-lg);
  background: rgba(20,30,14,0.42);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 34px -24px rgba(0,0,0,0.6);
  transition: background 0.4s, border-color 0.4s, transform 0.5s var(--ease);
}
.c-card:hover {
  background: rgba(20,30,14,0.54);
  border-color: rgba(163,130,59,0.42);
  transform: translateY(-4px);
}
.c-card__icon {
  width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--lime);
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.c-card:hover .c-card__icon { background: var(--lime); color: var(--ink); }
.c-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 0.97rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.c-card p { color: rgba(242,245,240,0.62); font-size: 0.8rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { background: #fff; }
.faq__grid { display: block; }
.faq__head {
  max-width: 820px; margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}
.faq__head .section-sub { margin-inline: auto; }
.faq__head .section-sub { margin-bottom: 22px; }
.faq__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 5vw, 64px);
  align-items: start;
}
.faq__col { border-top: 1px solid var(--line); }

.acc { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; padding: 20px 46px 20px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.4; letter-spacing: -0.015em;
  color: var(--forest);
  transition: color 0.3s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--font-body); font-size: 1.05rem; font-weight: 400;
  transition: transform 0.5s var(--ease), background 0.3s, color 0.3s;
}
.acc[open] summary { color: var(--forest); }
.acc[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--forest); color: var(--lime); border-color: var(--forest); }
.acc__body { overflow: hidden; }
.acc__body p { padding-bottom: 24px; color: var(--muted); max-width: 62ch; font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Areas we serve
   -------------------------------------------------------------------------- */
.areas__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.areas__text { text-align: left; }
.areas__text .section-sub { margin-inline: 0; max-width: 54ch; }
.areas__list { justify-content: flex-start; }
.areas__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.areas__list li {
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-weight: 500; font-size: 0.84rem;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.areas__list li:hover { background: var(--forest); color: #fff; transform: translateY(-2px); }
.areas__card {
  padding: 36px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(27,39,20,0.35);
}
.areas__card h3 { color: var(--forest); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.025em; margin-bottom: 14px; }
.areas__card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }
.areas__meta { font-size: 0.9rem !important; margin-bottom: 22px !important; }
.areas__meta strong { color: var(--forest); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { background: #fff; }
.contact__card {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(165deg, #f3f8ef 0%, #e9f1e3 100%);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -50px rgba(27,39,20,0.35);
}
.contact__info {
  padding: clamp(32px, 4vw, 52px);
  background: transparent;
  border-right: 1px solid rgba(27,39,20,0.08);
  display: flex; flex-direction: column;
}
.contact__info .eyebrow { color: var(--forest); }
.contact__info { text-align: left; }
.contact__info .section-title { margin-bottom: 14px; }
.contact__info > p { margin-inline: 0; }
.contact__list { text-align: left; }
.socials { justify-content: flex-start; }
.contact__info .section-title em { color: var(--leaf); }
.contact__info > p { color: var(--muted); margin-bottom: 28px; max-width: 46ch; font-size: 0.94rem; }
.contact__list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.contact__list li { display: flex; gap: 13px; align-items: flex-start; }
.contact__icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: #fff; color: var(--forest); border: 1px solid rgba(27,39,20,0.1);
}
.contact__list strong { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leaf); margin-bottom: 3px; }
.contact__list a, .contact__list span:not(.contact__icon) { font-size: 0.89rem; color: var(--ink); line-height: 1.45; }
.contact__list a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.socials { display: flex; gap: 8px; margin-top: auto; }
.socials a {
  width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--forest);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-2px); }

.form { padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--radius);
  background: #fff; border: 1px solid rgba(27,39,20,0.12);
  color: var(--ink); font: inherit; font-size: 0.92rem; outline: none;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.field input::placeholder, .field textarea::placeholder { color: #a3aca7; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--leaf); background: #fff;
  box-shadow: 0 0 0 3px rgba(47,74,32,0.12);
}
.field.is-error input, .field.is-error select { border-color: #e05a5a; background: #fff6f6; }
.field textarea { resize: vertical; min-height: 110px; }
.form__submit { align-self: flex-start; margin-top: 6px; }
.form__hint { font-size: 0.76rem; color: var(--muted); }

/* ---- Custom select ---- */
.select { position: relative; }

/* The real <select> stays in the DOM for form submission, validation and
   keyboard users; it is layered invisibly over the styled trigger. */
.select select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.select select:focus-visible + .select__trigger {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(47,74,32,0.12);
}

.select__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-radius: var(--radius);
  background: #fff; border: 1px solid rgba(27,39,20,0.12);
  pointer-events: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* .field span styles the field label; the trigger text must not inherit it */
.select__trigger span {
  font-size: 0.92rem; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  color: #a3aca7;
}
.select.has-value .select__trigger span { color: var(--ink); }
.select__option span { font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: normal; color: inherit; }
.select__trigger svg {
  display: block; flex: none;
  width: 16px; height: 16px;
  color: var(--muted);
  transition: transform 0.35s var(--ease), color 0.3s;
}
.select.is-open .select__trigger { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(47,74,32,0.12); }
.select.is-open .select__trigger svg { transform: rotate(180deg); color: var(--forest); }

.select__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -20px rgba(27,39,20,0.35);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease), visibility 0.25s;
  max-height: 260px; overflow-y: auto;
}
.select.is-open .select__menu { opacity: 1; visibility: visible; transform: none; }

.select__group {
  padding: 9px 12px 5px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
}
.select__group:first-child { padding-top: 4px; }
.select__option {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 6px;
  font-size: 0.88rem; color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.select__option:hover,
.select__option.is-focused { background: var(--bg-tint); color: var(--ink); }
.select__option.is-selected { background: var(--forest); color: #fff; font-weight: 600; }
.select__option.is-selected .select__check { opacity: 1; }
.select__check {
  margin-left: auto; opacity: 0; flex: none;
  transition: opacity 0.2s;
}

/* ---- CTA band (inner pages) ---- */
.cta-band { padding: clamp(50px, 6vw, 76px) 0 clamp(60px, 7vw, 90px); }

.cta-band__card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(48px, 6vw, 82px) clamp(34px, 4.5vw, 62px);
  min-height: clamp(280px, 30vw, 380px);
  display: flex; align-items: center;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__bg.is-fallback { background: linear-gradient(140deg, #2F4A20, #1b2714); }
.cta-band__bg.is-fallback img { display: none; }
/* Overlay keeps the copy readable over any photo */
.cta-band__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,30,14,0.94) 0%, rgba(20,30,14,0.86) 45%, rgba(20,30,14,0.6) 100%);
}

.cta-band__inner {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 26px;
}
.cta-band__text { max-width: 58ch; }
.cta-band__eyebrow {
  display: inline-flex; justify-content: center; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 12px;
}
.cta-band h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.25;
  letter-spacing: -0.03em; color: #fff; margin-bottom: 10px;
  text-wrap: balance;
}
.cta-band p { color: rgba(255,255,255,0.8); font-size: 0.93rem; line-height: 1.65; margin-inline: auto; }

.cta-band__actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-band__btn { background: var(--gold); color: #fff; white-space: nowrap; }
.cta-band__btn::before { background: #fff; }
.cta-band__btn:hover { color: var(--forest); }
/* Outlined counterpart to the solid button beside it */
.cta-band__phone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.9rem; font-weight: 700; color: #fff; white-space: nowrap;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.cta-band__phone .icon { color: var(--gold-soft); transition: color 0.3s; }
.cta-band__phone:hover { background: #fff; border-color: #fff; color: var(--forest); }
.cta-band__phone:hover .icon { color: var(--forest); }

/* Map inside the contact card */
.contact__map {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(27,39,20,0.1);
  margin-bottom: 26px; line-height: 0;
}
.contact__map iframe { display: block; filter: grayscale(0.12); }

/* ---- Quote modal ---- */
.modal {
  position: fixed; inset: 0; z-index: 2400;
  /* Grid centring keeps the panel in the middle of the viewport; the panel
     stays auto-height, and a panel taller than the screen scrolls instead
     of being clipped because the rows are sized by content. */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__panel { grid-row: 2; margin-inline: auto; }
.modal[hidden] { display: none; }
.modal__backdrop {
  /* Span every row so the tint covers the whole overlay, not just row 1 */
  grid-area: 1 / 1 / -1 / -1;
  position: fixed; inset: 0;
  background: rgba(16,24,11,0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.modal.is-open .modal__backdrop { opacity: 1; }

.modal__panel {
  position: relative;
  width: min(620px, 100%);
  height: auto;          /* hug the content; the overlay scrolls if needed */
  max-height: none;
  background: linear-gradient(165deg, #f3f8ef 0%, #e9f1e3 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -40px rgba(16,24,11,0.6);
  padding: 24px 26px 22px;
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 0.35s var(--ease), transform 0.4s var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }

.modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(27,39,20,0.06); color: var(--ink);
  transition: background 0.25s, color 0.25s;
}
.modal__close:hover { background: var(--forest); color: #fff; }

.modal__head { margin-bottom: 14px; }
.modal__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.71rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--forest); margin-bottom: 10px;
}
.modal__eyebrow .icon { color: var(--gold); }
.modal__head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -0.03em; margin-bottom: 4px;
}
.modal__head p { color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.modal__form { padding: 0; gap: 9px; }
/* Two fields per row: name + phone, then email + interest */
.modal__form .form__row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.modal__form .field { gap: 5px; }
.modal__form .field > span { font-size: 0.64rem; }
.modal__form .field input,
.modal__form .field select,
.modal__form .field textarea { padding: 8px 11px; font-size: 0.82rem; }
.modal__form .select__trigger { padding: 8px 11px; }
.modal__form .select__trigger span { font-size: 0.82rem; }
.modal__form textarea { min-height: 54px; }
/* Button centred and full width so it reads as the clear next step */
.modal__form .form__submit {
  align-self: center; margin-top: 4px;
  width: 100%; justify-content: center;
  padding: 10px 20px; font-size: 0.85rem;
}
.modal__form .form__hint { text-align: center; font-size: 0.7rem; }
.modal__eyebrow { margin-bottom: 5px; font-size: 0.64rem; }
.modal__close { top: 12px; right: 12px; width: 30px; height: 30px; }
.modal__form .form__hint a { color: var(--forest); font-weight: 600; }

body.is-locked { overflow: hidden; }

/* ---- Gallery lightbox ---- */
.g-item__btn {
  display: block; width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in;
}
.g-item__btn img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
  position: fixed; inset: 0; z-index: 2100;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10,16,8,0.93);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: scale(0.97); transition: transform 0.35s var(--ease);
}
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__figure img {
  max-width: 100%; max-height: calc(100vh - 150px);
  object-fit: contain; border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8);
}
.lightbox__figure figcaption {
  color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 500; text-align: center;
}

.lightbox__close,
.lightbox__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: #fff; color: var(--ink); }

.lightbox__close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); width: 44px; height: 44px; }
.lightbox__nav { top: 50%; margin-top: -24px; width: 48px; height: 48px; }
.lightbox__nav--prev { left: clamp(10px, 2.5vw, 30px); }
.lightbox__nav--next { right: clamp(10px, 2.5vw, 30px); }
.lightbox__nav:hover { transform: scale(1.06); }

.lightbox__count {
  position: absolute; bottom: clamp(14px, 3vw, 26px); left: 50%; transform: translateX(-50%);
  font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  .pkg-tab { flex: 0 0 auto; padding: 13px 14px; }
  .pkg-tab__text strong { font-size: 0.82rem; }
  .pkg-grid, .pkg-grid--1, .pkg-grid--2 { grid-template-columns: 1fr; }
  .pkg-group__head { gap: 12px; }
  .pkg-group__step { width: 36px; height: 36px; }
  .pkg-grid { grid-template-columns: 1fr; }
  .modal__form .form__row { grid-template-columns: 1fr; }
  .section { padding-block: 44px; }
  .section-head { margin-bottom: 26px; }
  .story__body > p { margin-bottom: 20px; }
  .story__stats { padding: 18px 0; margin-bottom: 18px; }
  .bento__item--text { padding: 24px 20px; }

  .lightbox__nav { width: 40px; height: 40px; margin-top: -20px; }
  .lightbox__figure img { max-height: calc(100vh - 170px); }
}

/* Honeypot — hidden from people, filled by bots */
.hp-field {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Form feedback */
.form__note {
  padding: 12px 14px; border-radius: var(--radius);
  font-size: 0.86rem; line-height: 1.55;
}
.form__note--ok {
  background: rgba(47,74,32,0.1); color: var(--forest);
  border: 1px solid rgba(47,74,32,0.2);
}
.form__note--err {
  background: rgba(200,80,60,0.08); color: #9e3b28;
  border: 1px solid rgba(200,80,60,0.25);
}
.form__note a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.field span small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.btn.is-busy { opacity: 0.7; pointer-events: none; }

/* ---- Schools page ---- */
.schools-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.schools-fact {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(27,39,20,0.3);
}
.schools-fact__icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(163,130,59,0.14); color: var(--gold);
}
.schools-fact strong { display: block; font-size: 0.92rem; color: var(--forest); margin-bottom: 3px; }
.schools-fact span { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

/* ---- Tabbed packages ---- */
.pkg-tabs {
  position: relative;
  display: flex; gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.pkg-tabs::-webkit-scrollbar { display: none; }

.pkg-tab {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 0; min-width: 0;
  padding: 15px 18px 16px;
  background: none; border: 0; text-align: left;
  white-space: nowrap;
  transition: color 0.25s;
}
/* The moving underline that marks the active tab */
.pkg-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--forest);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.35s var(--ease);
}
.pkg-tab.is-active::after { transform: scaleX(1); }
.pkg-tab:hover:not(.is-active)::after { transform: scaleX(0.35); background: var(--line); }

.pkg-tab__step {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-tint); color: var(--muted);
  font-family: var(--font-display); font-weight: 800; font-size: 0.7rem;
  transition: background 0.3s, color 0.3s;
}
.pkg-tab.is-active .pkg-tab__step { background: var(--forest); color: var(--gold-soft); }

.pkg-tab__text { display: flex; flex-direction: column; min-width: 0; }
.pkg-tab__text strong {
  font-family: var(--font-display); font-weight: 700; font-size: 0.87rem;
  letter-spacing: -0.02em; color: var(--muted); line-height: 1.25;
  transition: color 0.25s;
}
.pkg-tab__text small { font-size: 0.68rem; color: var(--muted); opacity: 0.75; margin-top: 1px; }
.pkg-tab.is-active .pkg-tab__text strong { color: var(--forest); }
.pkg-tab.is-active .pkg-tab__text small { color: var(--gold); opacity: 1; }

/* Panel reads as the content of the selected tab */
.pkg-panel { display: none; }
.pkg-panel.is-active { display: block; animation: pkgIn 0.35s var(--ease) both; }
@keyframes pkgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pkg-panel__intro {
  font-size: 0.88rem; color: var(--muted);
  padding: 20px 0 22px; margin: 0; text-align: center;
}

@media (max-width: 600px) {
  .modal__form .form__row { grid-template-columns: 1fr; }
  .section { padding-block: 44px; }
  .section-head { margin-bottom: 26px; }
  .story__body > p { margin-bottom: 20px; }
  .story__stats { padding: 18px 0; margin-bottom: 18px; }
  .bento__item--text { padding: 24px 20px; }

  .lightbox__nav { width: 40px; height: 40px; margin-top: -20px; }
  .lightbox__figure img { max-height: calc(100vh - 170px); }
}

/* Honeypot — hidden from people, filled by bots */
.hp-field {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Form feedback */
.form__note {
  padding: 12px 14px; border-radius: var(--radius);
  font-size: 0.86rem; line-height: 1.55;
}
.form__note--ok {
  background: rgba(47,74,32,0.1); color: var(--forest);
  border: 1px solid rgba(47,74,32,0.2);
}
.form__note--err {
  background: rgba(200,80,60,0.08); color: #9e3b28;
  border: 1px solid rgba(200,80,60,0.25);
}
.form__note a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.field span small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.btn.is-busy { opacity: 0.7; pointer-events: none; }

/* ---- Schools page ---- */
.schools-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.schools-fact {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(27,39,20,0.3);
}
.schools-fact__icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(163,130,59,0.14); color: var(--gold);
}
.schools-fact strong { display: block; font-size: 0.92rem; color: var(--forest); margin-bottom: 3px; }
.schools-fact span { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 600px) {
  .modal__form .form__row { grid-template-columns: 1fr; }
  .section { padding-block: 44px; }
  .section-head { margin-bottom: 26px; }
  .story__body > p { margin-bottom: 20px; }
  .story__stats { padding: 18px 0; margin-bottom: 18px; }
  .bento__item--text { padding: 24px 20px; }

  .lightbox__nav { width: 40px; height: 40px; margin-top: -20px; }
  .lightbox__figure img { max-height: calc(100vh - 170px); }
}

/* Honeypot — hidden from people, filled by bots */
.hp-field {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Form feedback */
.form__note {
  padding: 12px 14px; border-radius: var(--radius);
  font-size: 0.86rem; line-height: 1.55;
}
.form__note--ok {
  background: rgba(47,74,32,0.1); color: var(--forest);
  border: 1px solid rgba(47,74,32,0.2);
}
.form__note--err {
  background: rgba(200,80,60,0.08); color: #9e3b28;
  border: 1px solid rgba(200,80,60,0.25);
}
.form__note a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.field span small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.btn.is-busy { opacity: 0.7; pointer-events: none; }

/* ---- Schools page ---- */
.schools-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.schools-fact {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(27,39,20,0.3);
}
.schools-fact__icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(163,130,59,0.14); color: var(--gold);
}
.schools-fact strong { display: block; font-size: 0.92rem; color: var(--forest); margin-bottom: 3px; }
.schools-fact span { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

/* ---- Grouped packages ---- */
.pkg-group { margin-bottom: clamp(38px, 4.5vw, 58px); }
.pkg-group:last-of-type { margin-bottom: 0; }

.pkg-group__head {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.pkg-group__step {
  flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--forest); color: var(--gold-soft);
  font-family: var(--font-display); font-weight: 800; font-size: 0.82rem;
  letter-spacing: -0.02em;
}
.pkg-group__head h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.18rem; letter-spacing: -0.03em;
  color: var(--forest); margin-bottom: 3px;
}
.pkg-group__head p { font-size: 0.86rem; color: var(--muted); }

.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.pkg-grid--1 { grid-template-columns: minmax(0, 520px); }
.pkg-grid--2 { grid-template-columns: repeat(2, 1fr); }

.pkg {
  position: relative; display: flex; flex-direction: column;
  padding: 24px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px -24px rgba(27,39,20,0.32);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pkg:hover { box-shadow: 0 20px 40px -24px rgba(27,39,20,0.45); border-color: rgba(47,74,32,0.32); }

/* Featured package gets the dark treatment so it stands apart */
.pkg--featured {
  background: var(--forest); border-color: var(--forest);
  box-shadow: 0 20px 44px -26px rgba(27,39,20,0.6);
}
.pkg--featured .pkg__title,
.pkg--featured .pkg__gives strong { color: #fff; }
.pkg--featured .pkg__sub,
.pkg--featured .pkg__list li,
.pkg--featured .pkg__gives,
.pkg--featured .pkg__dur { color: rgba(255,255,255,0.72); }
.pkg--featured .pkg__icon { background: rgba(255,255,255,0.12); color: var(--gold-soft); }
.pkg--featured .pkg__tag { background: rgba(255,255,255,0.12); color: var(--gold-soft); }
.pkg--featured .pkg__cbse { background: rgba(255,255,255,0.08); color: var(--gold-soft); }
.pkg--featured .pkg__list li::before { background: var(--gold); }
.pkg--featured .pkg__foot { border-top-color: rgba(255,255,255,0.14); }
.pkg--featured .pkg__btn { background: var(--gold); color: #fff; }
.pkg--featured .pkg__btn::before { background: #fff; }
.pkg--featured .pkg__btn:hover { color: var(--forest); }

.pkg__flag {
  position: absolute; top: -9px; left: 22px;
  padding: 4px 11px; border-radius: 5px;
  background: var(--gold); color: #fff;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}

.pkg__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pkg__icon {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(47,74,32,0.1); color: var(--forest);
}
.pkg__tag {
  padding: 4px 10px; border-radius: 5px;
  background: var(--bg-tint); color: var(--muted);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  white-space: nowrap;
}

.pkg__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.98rem; line-height: 1.32; letter-spacing: -0.025em;
  color: var(--forest); margin-bottom: 5px;
}
.pkg__sub { font-size: 0.79rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }

.pkg__cbse {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px; margin-bottom: 14px;
  background: rgba(163,130,59,0.12); color: var(--gold);
  font-size: 0.68rem; font-weight: 700;
}
.pkg__cbse .icon { flex: none; }

.pkg__list { margin-bottom: 16px; }
.pkg__list li {
  position: relative; padding-left: 16px; margin-bottom: 7px;
  font-size: 0.79rem; line-height: 1.5; color: var(--ink-2);
}
.pkg__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

.pkg__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.pkg__gives { font-size: 0.74rem; color: var(--muted); line-height: 1.55; margin-bottom: 8px; }
.pkg__gives strong { color: var(--ink-2); font-weight: 700; }
.pkg__dur {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--muted); margin-bottom: 14px;
}
.pkg__dur .icon { flex: none; color: var(--gold); }
.pkg__btn { width: 100%; justify-content: center; }

.pkg__note {
  margin-top: clamp(30px, 4vw, 44px); text-align: center;
  font-size: 0.9rem; color: var(--muted);
}
.pkg__note a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Package detail dialog ---- */
.pkg__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pkg__more { border-color: var(--line); }
.pkg--featured .pkg__more {
  color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.28);
}
.pkg--featured .pkg__more::before { background: #fff; }
.pkg--featured .pkg__more:hover { color: var(--forest); }

.pkg-modal {
  position: fixed; inset: 0; z-index: 2400;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; overflow-y: auto;
}
.pkg-modal[hidden] { display: none; }
.pkg-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(16,24,11,0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.pkg-modal.is-open .pkg-modal__backdrop { opacity: 1; }

.pkg-modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -40px rgba(16,24,11,0.6);
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 0.35s var(--ease), transform 0.4s var(--ease);
}
.pkg-modal.is-open .pkg-modal__panel { opacity: 1; transform: none; }

.pkg-modal__head { margin-bottom: 16px; padding-right: 40px; }
.pkg-modal__head h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; letter-spacing: -0.03em;
  color: var(--forest); margin: 10px 0 4px;
}
.pkg-modal__head p { font-size: 0.88rem; color: var(--muted); }
.pkg-modal__intro { font-size: 0.92rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 16px; }

.pkg-modal__sub {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}

.pkg-flow { margin: 0 0 22px; padding: 0; list-style: none; }
.pkg-flow li {
  position: relative; padding: 0 0 14px 22px;
  border-left: 2px solid var(--line); margin-left: 5px;
}
.pkg-flow li:last-child { padding-bottom: 0; border-left-color: transparent; }
.pkg-flow li::before {
  content: ""; position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--surface);
}
.pkg-flow__when {
  display: block; font-size: 0.78rem; font-weight: 700;
  color: var(--forest); margin-bottom: 3px;
}
.pkg-flow__what { display: block; font-size: 0.84rem; line-height: 1.6; color: var(--muted); }

.pkg-modal__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 20px 0; margin-bottom: 20px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pkg-modal__grid .check-list li { font-size: 0.83rem; margin-bottom: 8px; }
.pkg-modal__grid .pkg__meta { padding: 0; margin: 0; border: 0; gap: 11px; }
.pkg-modal__grid .pkg__meta > div { flex-direction: column; gap: 2px; }
.pkg-modal__grid .pkg__meta dt { width: auto; }
.pkg-modal__grid .pkg__meta dd { font-size: 0.82rem; }

.pkg-modal__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pkg-modal__phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 700; color: var(--forest);
}
.pkg-modal__phone .icon { color: var(--gold); }
.pkg-modal__phone:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .pkg__actions { grid-template-columns: 1fr; }
  .pkg-modal__grid { grid-template-columns: 1fr; gap: 18px; }
  .pkg-modal__foot .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(242,245,240,0.7); padding-top: 70px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1.2fr 1.4fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line-light); }
.footer__brand { text-align: left; }
.footer__brand p { margin-top: 18px; max-width: 34ch; font-size: 0.88rem; }
.socials--footer { margin-top: 22px; justify-content: flex-start; }
.socials--footer a {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}
.socials--footer a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.footer__col a.footer__contact,
.footer__contact {
  display: flex !important; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: 0.86rem; line-height: 1.55;
  color: rgba(255,255,255,0.72);
  transform: none !important;
  transition: color 0.3s;
}
.footer__col a.footer__contact:hover { transform: none !important; }
.footer__contact .icon { color: var(--gold-soft); flex: none; margin-top: 2px; }
a.footer__contact:hover { color: #fff; }
a.footer__contact:hover .icon { color: var(--gold); }
.footer__contact--plain { cursor: default; }
.footer__col h4 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; margin-bottom: 16px; }
.footer__col a { display: block; padding: 5px 0; font-size: 0.88rem; transition: color 0.3s, transform 0.3s var(--ease); }
.footer__col a:hover { color: var(--lime); transform: translateX(4px); }
.footer__col p { font-size: 0.9rem; margin-bottom: 14px; }
.footer__news { display: flex; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-light); background: rgba(255,255,255,0.05); }
.footer__news input { flex: 1; min-width: 0; padding: 12px 18px; background: transparent; border: 0; color: #fff; outline: none; font: inherit; }
.footer__news button { width: 46px; background: var(--lime); color: var(--ink); font-size: 1.1rem; transition: background 0.3s; }
.footer__news button:hover { background: #fff; }
.footer__bottom { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 20px; padding: 24px 0; font-size: 0.82rem; }
.footer__legal { transition: color 0.3s; }
.footer__legal:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Inner page banner (all pages except home) ---- */
.page-banner {
  position: relative; isolation: isolate; overflow: hidden;
  height: 300px;
  display: grid; place-items: center;
  text-align: center;
}
.page-banner__bg { position: absolute; inset: 0; z-index: -2; background: var(--forest); }
.page-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-banner__bg.is-fallback { background: linear-gradient(140deg, #2F4A20, #1b2714); }
.page-banner__bg.is-fallback img { display: none; }
.page-banner__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,24,11,0.78) 0%, rgba(16,24,11,0.62) 45%, rgba(16,24,11,0.8) 100%);
}
.page-banner__inner { position: relative; z-index: 1; }

.crumbs {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 0.79rem; color: rgba(255,255,255,0.62); margin-bottom: 16px;
}
.crumbs a { transition: color 0.25s; }
.crumbs a:hover { color: var(--gold-soft); }
.crumbs__current { color: #fff; font-weight: 500; }

.page-banner .eyebrow--light { color: var(--gold-soft); }
.page-banner .eyebrow__dot { background: var(--gold); }

.page-banner__title { color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.035em; line-height: 1.12;
  color: #fff; margin-bottom: 12px;
  text-wrap: balance;
}
.page-banner__text {
  color: rgba(255,255,255,0.78); font-size: 0.98rem;
  max-width: 60ch; margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Inner pages (privacy policy, etc.)
   -------------------------------------------------------------------------- */

.legal__wrap { max-width: 860px; margin-inline: auto; }
.legal__lead {
  font-size: 1.05rem; line-height: 1.7; color: var(--ink-2);
  padding-bottom: 28px; margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.legal__body { color: var(--muted); font-size: 0.95rem; line-height: 1.75; }
.legal__body h2 { color: var(--forest);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.2rem; letter-spacing: -0.025em; color: var(--ink);
  margin: 36px 0 12px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin-bottom: 14px; }
.legal__body ul { margin: 0 0 18px; padding: 0; }
.legal__body li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
}
.legal__body li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 5px; height: 5px; border-radius: 2px; background: var(--leaf);
}
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__body a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--leaf); }

.legal__cta {
  margin-top: 44px; padding: 30px; border-radius: var(--radius-lg);
  background: var(--bg-tint); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.legal__cta p { font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Floating helpers
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -6px rgba(37,211,102,0.55);
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Pulse ring sits BEHIND the button so it never dims the icon */
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #25d366; opacity: 0.45; z-index: -1;
  animation: ring 2.4s ease-out infinite;
}
@keyframes ring {
  0%   { transform: scale(1);   opacity: 0.45; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 12px 28px -6px rgba(37,211,102,0.7); }
.wa-float svg { position: relative; z-index: 1; }

.to-top {
  position: fixed; right: 22px; bottom: 88px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.2);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease), background 0.3s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--lime); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  padding: 14px 22px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font-size: 0.92rem; font-weight: 600;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; z-index: 950;
  transition: opacity 0.4s, transform 0.5s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Reveal animations
   -------------------------------------------------------------------------- */
/* Content is visible by DEFAULT. Only once JS confirms it is running
   (html.js) do elements start hidden and animate in. If the script fails,
   is blocked, or errors, the page still renders fully. */
.reveal { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--delay, 0ms); }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {

  .pkg-grid, .pkg-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid--1 { grid-template-columns: 1fr; }
  .schools-facts { grid-template-columns: 1fr; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .schools-facts { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
  .t-card { flex-basis: calc((100% - 22px) / 2); }
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .bento__item--text { grid-column: 1 / span 2; grid-row: auto; min-height: 230px; }
  .bento__item--img { grid-column: 1 / span 2; grid-row: auto; min-height: 240px; }
  .bento__item--stat, .bento__item--accent { min-height: 180px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* ---- Services list becomes cards on mobile ---- */
  .svc-list { border-top: 0; display: grid; gap: 12px; }
  .svc-item {
    display: block; position: relative;
    padding: 20px 18px 18px;
    border: 1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.05);
  }
  .svc-item:hover { padding-left: 18px; }
  .svc-item::before { display: none; }
  .svc-item__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(163,130,59,0.18); color: var(--gold-soft);
    font-size: 0.72rem; font-weight: 800;
    margin-bottom: 12px;
  }
  .svc-item__body h3 { font-size: 1.02rem; margin-bottom: 6px; }
  .svc-item:hover .svc-item__body h3 { transform: none; }
  .svc-item__body p { font-size: 0.84rem; line-height: 1.55; }
  /* Arrow sits top-right of the card rather than in its own column */
  .svc-item__arrow {
    position: absolute; top: 18px; right: 16px;
    width: 34px; height: 34px; font-size: 0.95rem;
    border-color: rgba(255,255,255,0.16);
  }
  .svc-item:hover .svc-item__arrow { transform: none; background: var(--gold); color: #fff; }

  .story__grid { grid-template-columns: 1fr; }
  .topbar__link--email, .topbar__link--hours { display: none; }
  .topbar__contact { gap: 14px; }
  .page-banner { height: auto; min-height: 220px; padding: 44px 0; }
  .svc-detail__grid { grid-template-columns: 1fr; }
  .psteps { grid-template-columns: repeat(2, 1fr); }
  .pstep:nth-child(2)::after { display: none; }
  .areas__inner { grid-template-columns: 1fr; }
  .faq__cols { grid-template-columns: 1fr; }
  :root { --header-h: 0px; }
  /* Full-screen drawer. It must sit ABOVE the page (the old z-index:-1
     put it behind, so links floated over the content).               */
  .nav {
    position: fixed; inset: 0; z-index: 1200;
    width: 100%; height: 100%; height: 100dvh;
    margin-top: 0; box-sizing: border-box;
    padding: calc(68px + 24px) 24px 32px;
    pointer-events: auto;
    background: var(--bg);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 0;
    padding: calc(68px + 24px) 24px 32px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.35s var(--ease), visibility 0.35s, transform 0.4s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.15rem; padding: 15px 4px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
  }
  .nav__link::after { display: none; }
  .nav__link.is-current { color: var(--forest); }

  /* Services: collapsed by default, opens on tap */
  .nav__item { width: 100%; }
  .nav__item--has-menu > .nav__link {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
  }
  .nav__caret {
    display: block; width: 18px; height: 18px; flex: none;
    color: var(--muted);
    transition: transform 0.35s var(--ease), color 0.3s;
  }
  .nav__item--has-menu.is-open > .nav__link .nav__caret {
    transform: rotate(180deg); color: var(--forest);
  }
  .nav__menu {
    /* position:static cancels the transform but NOT the base rule's
       left:50%, which pushed the sub-menu off the left edge. */
    position: static; left: auto; transform: none; width: 100%;
    opacity: 1; visibility: visible;
    max-height: 0; overflow: hidden;
    padding: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none;
    transition: max-height 0.4s var(--ease), padding 0.3s var(--ease);
  }
  .nav__item--has-menu.is-open .nav__menu {
    max-height: 420px; padding: 2px 0 8px;
  }
  /* hover must not open it on touch devices */
  .nav__item--has-menu:hover .nav__menu,
  .nav__item--has-menu:focus-within .nav__menu {
    opacity: 1; visibility: visible;
    transform: none; left: auto;
  }
  .nav__menu-all { display: none; }
  .nav__menu-link {
    padding: 11px 4px 11px 16px;
    font-size: 0.95rem; color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .nav__menu-link:last-child { border-bottom: 0; }
  .nav__item--has-menu::after { display: none; }

  .nav__cta {
    margin: 22px 0 0; padding: 14px 28px;
    font-size: 0.95rem; justify-content: center;
  }

  /* Burger stays clickable above the open drawer */
  .burger { display: flex; position: relative; z-index: 1300; }
  /* Header bar stays visible over the drawer so the close button works */
  .header { z-index: 1350; }
  .header__inner { display: flex; justify-content: space-between; }
  .header__inner > .nav__cta { display: none; }
  .nav__cta--mobile { display: inline-flex; }

  .hero__arrow { width: 40px; height: 40px; font-size: 1rem; }
  .float-card--2 { right: -8px; }



  .contact__card { grid-template-columns: 1fr; }
  .gallery__wrap { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .svc-preview { display: none; }
  .svc-item { grid-template-columns: 44px 1fr 44px; gap: 14px; padding: 26px 0; }
  .svc-item__arrow { width: 44px; height: 44px; }
}

@media (max-width: 600px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .svc-tile__body { padding: 14px 13px 16px; }
  .svc-tile h3 { font-size: 0.86rem; line-height: 1.3; margin-bottom: 5px; }
  .svc-tile p { font-size: 0.75rem; line-height: 1.5; margin-bottom: 10px; }
  .svc-tile__link { font-size: 0.74rem; }
  .svc-tile__num { top: 9px; left: 9px; padding: 4px 8px; font-size: 0.66rem; }
  .svc-tile__media { aspect-ratio: 4 / 3; }
  .topbar { font-size: 0.74rem; }
  .topbar__inner { height: 34px; }
  .cta-band__actions { width: 100%; flex-direction: column; }
  .cta-band__btn, .cta-band__phone { width: 100%; justify-content: center; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); }
  .p-card__body { padding: 14px 16px 18px; }
  .p-card h3 { font-size: 1.05rem; }
  .t-card { flex-basis: 100%; }
  /* Stats sit two-up; the text and image cards stay full width */
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 12px; }
  .bento__item--text, .bento__item--img { grid-column: 1 / span 2; grid-row: auto; }
  .bento__item--img { min-height: 200px; }
  .bento__item--stat, .bento__item--accent { min-height: 150px; padding: 20px 18px; }
  .bento__item--stat p, .bento__item--accent p { font-size: 0.8rem; line-height: 1.45; }
  .stat__num { font-size: 1.8rem; }
  .psteps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pstep:not(:last-child)::after { display: none; }
  .pstep { padding: 18px 16px 20px; }
  .pstep h3 { font-size: 0.95rem; }
  .pstep p { font-size: 0.79rem; line-height: 1.5; margin-bottom: 12px; }
  .pstep__tag { font-size: 0.66rem; padding: 5px 9px; }
  .pstep__num { width: 32px; height: 32px; font-size: 0.74rem; }
  .pstep__dot { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .gallery__wrap { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .g-item--tall, .g-item--wide { grid-row: auto; grid-column: auto; }
  .float-card { padding: 10px 14px; }
  .float-card strong { font-size: 1rem; }
  .badge-rotate { display: none; }
  .hero__proof { align-items: flex-start; flex-direction: column; }
  .wa-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .to-top { right: 14px; bottom: 74px; width: 50px; height: 50px; }
  .section-head--row .tabs { width: 100%; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .hero-swiper [data-anim] { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Schools page — responsive
   Appended last so these win over the base grid rules defined above.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .pkg-grid,
  .pkg-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .pkg-grid--1 { grid-template-columns: 1fr; }
  .schools-facts { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Tabs scroll sideways rather than squeezing four across a phone */
  .pkg-tabs {
    gap: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .pkg-tab { flex: 0 0 auto; padding: 12px 16px 13px; }
  .pkg-tab__step { width: 26px; height: 26px; font-size: 0.66rem; }
  .pkg-tab__text strong { font-size: 0.82rem; }
  .pkg-tab__text small { font-size: 0.65rem; }

  /* One card per row, full width of the container */
  .pkg-grid,
  .pkg-grid--1,
  .pkg-grid--2 { grid-template-columns: 1fr; gap: 14px; }

  .pkg { padding: 20px 18px 18px; }
  .pkg__title { font-size: 1rem; }
  .pkg__sub { font-size: 0.82rem; }
  .pkg__list li { font-size: 0.82rem; }
  .pkg__actions { grid-template-columns: 1fr 1fr; gap: 8px; }

  .pkg-panel__intro { padding: 16px 0 18px; font-size: 0.85rem; }

  .schools-facts { grid-template-columns: 1fr; gap: 12px; }
  .schools-fact { padding: 16px; }
}


/* --------------------------------------------------------------------------
   Floating "Get a quote" — mobile only
   The header CTA is always visible on desktop, so this would be redundant
   there. On phones the header CTA scrolls away, so this keeps the primary
   action reachable.

   Rotated into a vertical tab flush against the right edge. It is anchored
   by its own centre (top:50% + translateY(-50%)) so it stays clear of the
   WhatsApp and back-to-top buttons sitting at the bottom of that edge.
   -------------------------------------------------------------------------- */
.quote-float { display: none; }

@media (max-width: 600px) {
  .quote-float {
    position: fixed; right: 0; top: 50%; z-index: 900;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 34px; padding: 16px 0;
    background: var(--forest); color: #fff;
    border: 0;
    /* Left corners rounded; right edge is flush to the screen, so square */
    border-radius: var(--radius) 0 0 var(--radius);
    font-family: inherit; font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.02em; white-space: nowrap;
    box-shadow: -3px 0 16px -5px rgba(40,63,26,0.5);
    cursor: pointer;
    transition: background 0.3s var(--ease);
  }
  .quote-float:active { background: var(--leaf); }
  /* Only the label turns; reads bottom-to-top like a standard side tab. */
  .quote-float span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
  }
}


/* --------------------------------------------------------------------------
   Terrace packages (service pages that define them)
   Three cards; the middle one is flagged as most popular and lifts slightly
   so the eye lands on it first.
   -------------------------------------------------------------------------- */
.tpkg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.tpkg {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
}
.tpkg--featured {
  border-color: rgba(40,63,26,0.3);
  box-shadow: 0 18px 44px -26px rgba(16,24,11,0.45);
}

.tpkg__flag {
  position: absolute; top: -11px; left: 22px;
  background: var(--forest); color: #fff;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
}

.tpkg__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tpkg__icon {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-tint); color: var(--forest);
  border-radius: var(--radius);
}
.tpkg__tag {
  font-size: 0.64rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.09em; text-transform: uppercase;
}

.tpkg__title {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--ink); margin-bottom: 6px;
}
.tpkg__sub {
  font-size: 0.84rem; line-height: 1.55; color: var(--muted);
  margin-bottom: 16px;
}

/* Capacity + space: the two numbers people actually compare */
.tpkg__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 0; margin-bottom: 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.tpkg__stat { display: flex; flex-direction: column; gap: 2px; }
.tpkg__stat strong {
  font-size: 0.95rem; font-weight: 800; color: var(--forest);
  letter-spacing: -0.02em;
}
.tpkg__stat span { font-size: 0.68rem; color: var(--muted); }

.tpkg__label {
  font-size: 0.64rem; font-weight: 700; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 8px;
}

.tpkg__systems { list-style: none; margin: 0 0 16px; padding: 0; }
.tpkg__systems li {
  font-size: 0.78rem; color: var(--muted);
  padding: 3px 0 3px 15px; position: relative;
}
.tpkg__systems li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-soft);
}

.tpkg__list { list-style: none; margin: 0 0 18px; padding: 0; }
.tpkg__list li {
  font-size: 0.8rem; line-height: 1.5; color: var(--ink);
  padding: 4px 0 4px 20px; position: relative;
}
.tpkg__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--forest); border-bottom: 2px solid var(--forest);
  transform: rotate(-45deg);
}

/* Foot pinned to the bottom so the buttons line up across cards */
.tpkg__foot { margin-top: auto; }
.tpkg__suits {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.74rem; line-height: 1.45; color: var(--muted);
  margin-bottom: 14px;
}
.tpkg__suits svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }
.tpkg__btn { width: 100%; justify-content: center; }

.tpkg__note {
  text-align: center; font-size: 0.84rem; color: var(--muted);
  margin-top: 26px;
}

@media (max-width: 980px) {
  .tpkg-grid { grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 600px) {
  .tpkg { padding: 20px 18px 18px; }
  .tpkg__title { font-size: 1.08rem; }
  .tpkg__sub { font-size: 0.8rem; }
  .tpkg__stat strong { font-size: 0.88rem; }
}