/* =====================================================================
   HOME PAGE STYLESHEET
   Declares its own tokens and reset. The header, buttons and footer
   come from chrome.css, which every page loads first.
   ===================================================================== */


/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --green: #007F09;
  --green-light: #00CC0E;
  --mint: #F3FCF0;
  --text: #3A3A3A;
  --accent: #3F4A3C;
  --ink: #222222;
  --ink-rgb: 34, 34, 34;
  --white: #FFFFFF;
  --on-ink: #FFFFFF;
  --on-ink-soft: rgba(255, 255, 255, .74);

  --font: Inter, "Inter Fallback", Arial, sans-serif;

  --edge: clamp(20px, 6.5vw, 96px);
}

@font-face{
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 92.5%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}


/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture { display: block; max-width: 100%; height: auto; }
h1, p, ul, address { margin: 0; padding: 0; }
h1 { font-weight: 600; line-height: 1.1; }
address { font-style: normal; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--green); color: var(--white);
  font-size: 16px;
}
.skip-link:focus { top: 12px; }


/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 48px) var(--edge) clamp(56px, 10vh, 120px);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
/* Slides stack; only the active one is opaque, so swaps are a crossfade. */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}
/* Ken Burns: slow push-in with a slight drift. Alternating, so it eases
   back rather than snapping at the end of each cycle. The drift stays
   well inside the overflow the scale creates, so no edge is ever exposed.
   It runs on both slides continuously, so a crossfade lands mid-move
   instead of on a still frame. */
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.18) translate(-2.6%, -1.8%); }
}
.hero-media img {
  transform-origin: 50% 52%;
  animation: hero-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* Offset so no two slides sit at the same point in the zoom. */
.hero-slide-2 img { animation-delay: -8.7s; }
.hero-slide-3 img { animation-delay: -17.4s; }
/* Layered scrims: darken the bottom-left so the copy holds AA contrast. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 90%),
    rgba(0, 0, 0, .2);
}

.hero-content { max-width: 1140px; }
.hero h1 { font-weight: 600; letter-spacing: 0; }
.hero-kicker {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
}
.hero-title {
  display: block;
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.08;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.hero-t1 { display: block; font-size: 1em; }
.hero-t2 {
  display: block;
  margin-top: .3em;
  font-size: .53em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .055em;
  color: #02B008;
}
.hero-sub {
  display: block;
  margin-top: 22px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--on-ink-soft);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; margin-top: 40px; }
.hero-badge { display: flex; align-items: center; gap: 10px; }
.laurel { width: 27px; height: 60px; color: var(--on-ink-soft); }
.laurel-r { transform: scaleX(-1); }
.hero-badge p { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.badge-big { font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.badge-small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-soft); }


/* =========================================================
   INTRO
   Light editorial band: a mint panel bleeding off the right edge,
   with the photo overlapping its left edge on an offset green frame.
   ========================================================= */
.intro {
  position: relative;
  padding: clamp(72px, 9vw, 140px) var(--edge);
  background: var(--white);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}
/* Mint panel: starts behind the photo, runs off the right edge. */
.intro-panel {
  position: absolute;
  z-index: -1;
  left: 22%;
  right: 0;
  top: clamp(48px, 5vw, 88px);
  bottom: clamp(48px, 5vw, 88px);
  background: var(--mint);
  pointer-events: none;
}
.intro-row {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1240px;
  /* Pinned to the edge gutter, not centred, so the photo starts on the
     same line as the logo and the hero copy at every width. */
  margin-inline: 0 auto;
}

/* ---------- Photo ---------- */
.intro-media { position: relative; }
.intro-media picture, .intro-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}
.intro-media img {
  position: relative;
  z-index: 1;
  box-shadow: 25px 25px 30px -10px rgba(33, 33, 33, .25);
}
/* Outline offset behind the photo, breaking its top-left corner. */
.intro-frame {
  position: absolute;
  inset: -22px auto auto -22px;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 3px solid var(--green);
  pointer-events: none;
}
/* Stat plate straddling the photo's bottom-right edge. */
.intro-stat {
  position: absolute;
  z-index: 2;
  right: clamp(-20px, -1.4vw, -6px);
  bottom: clamp(-30px, -2.6vw, -18px);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 12px;
  padding: 16px 24px;
  background: var(--white);
  color: var(--green);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .28), 0 26px 56px -12px rgba(0, 0, 0, .42);
}
.stat-num { font-size: clamp(30px, 3vw, 40px); font-weight: 600; line-height: 1.05; }
.stat-unit { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; max-width: 14ch; line-height: 1.35; }

/* ---------- Copy ---------- */
.intro-copy { padding-block: clamp(8px, 2vw, 32px); }
.intro-kicker {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
}
.intro h2 {
  font-size: clamp(26px, 2.95vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.intro h2 span { display: block; }
.t-light { color: var(--text); }
.t-green { color: var(--green); }
.intro-rule {
  display: block;
  width: 96px;
  height: 3px;
  margin: 26px 0 28px;
  background: var(--green);
}
.intro-lede {
  font-size: 16px;
  line-height: 1.7;
}
.intro-close {
  margin-top: 26px;
  font-size: 16px;
  line-height: 1.7;
}

/* Services, as a two-column tick list rather than a block of prose. */
.intro-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 127, 9, .28);
}
.intro-list li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.5;
}
.intro-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .34em;
  width: 15px;
  height: 9px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}

.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 40px; }
.btn-box-dark {
  --fill: var(--white);
  background-color: var(--green);
  border: 2px solid var(--green);
  color: var(--white);
  min-height: 52px;
  padding-block: 14px;
}
.btn-box-dark:hover { color: var(--green); border-color: var(--green); }


/* =========================================================
   SERVICES
   Photo tiles. The title link stretches over the whole tile;
   the body copy is revealed on hover where hover exists, and
   is always visible on touch.
   ========================================================= */
/* The intro band and this one are both white and read as a single block, so
   the seam between them doesn't need both sections' full vertical padding. */
.intro:has(+ .services) { padding-bottom: clamp(36px, 4.5vw, 64px); }
.services {
  padding: clamp(18px, 2.3vw, 34px) var(--edge) clamp(64px, 8vw, 112px);
  background: var(--white);
  text-align: center;
}
.services-head { max-width: 1240px; margin: 0 auto clamp(30px, 4vw, 52px); }
.services h2 {
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;
}
.services h2 span { display: block; }

.service-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1240px;
  margin-inline: auto;
}
.service-tile {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  min-height: clamp(300px, 34vw, 360px);
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  isolation: isolate;
}
/* Background layers sit below the in-flow text (negative z-index inside the
   tile's own stacking context) so the h3 link can stretch over the whole
   tile and make every part of it clickable. */
.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, .16));
}
.service-tile-bg { position: absolute; inset: 0; z-index: -2; }
.service-tile-bg picture { display: block; width: 100%; height: 100%; }
.service-tile-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
/* Dark wash rises from the bottom on hover. */
.service-tile-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .58) 65%, rgba(0, 0, 0, .26));
  transform: translateY(100%);
  transition: transform .4s ease;
  pointer-events: none;
}
.service-tile:hover .service-tile-hover-overlay,
.service-tile:focus-within .service-tile-hover-overlay { transform: translateY(0); }

.service-tile-border {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.service-tile h3 {
  margin: 0;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.service-tile h3 a { color: var(--white); }
.service-tile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 3px;
}
.service-tile h3 a:focus-visible { outline: none; }
.service-tile h3 a:focus-visible::after { outline: 3px solid var(--white); outline-offset: -3px; }
.service-tile:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.service-tile-body {
  margin: 10px 0 0;
  color: var(--white);
  font-size: 15px;
  line-height: 1.55;
  transition: max-height .3s ease, opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .service-tile-body { max-height: 0; opacity: 0; overflow: hidden; }
  .service-tile:hover .service-tile-body,
  .service-tile:focus-within .service-tile-body { max-height: 240px; opacity: 1; }
  .service-tile:hover .service-tile-bg img,
  .service-tile:focus-within .service-tile-bg img { transform: scale(1.05); }
}

.services-actions { margin-top: clamp(28px, 4vw, 44px); }


/* =========================================================
   REVIEWS WALL
   Two marquee rows running opposite ways. Each row holds the
   same cards twice (the clone is aria-hidden) so the loop is
   seamless; hovering a row pauses it.
   ========================================================= */
.wall {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 104px) clamp(72px, 9vw, 128px);
  background: var(--ink);
  color: var(--on-ink);
}
/* Edges fade the cards out rather than cutting them off. */
.wall::before,
.wall::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: 0;
  width: 18%;
  pointer-events: none;
}
.wall::before { left: 0; background: linear-gradient(90deg, var(--ink), rgba(34, 34, 34, .5) 45%, rgba(34, 34, 34, 0)); }
.wall::after { right: 0; background: linear-gradient(270deg, var(--ink), rgba(34, 34, 34, .5) 45%, rgba(34, 34, 34, 0)); }

/* Corner mark: the colour logo knocked to white with a filter, since
   there is no white asset. Decorative only. */
.wall-badge {
  position: absolute;
  z-index: 0;
  top: clamp(14px, 1.8vw, 30px);
  right: clamp(14px, 2.2vw, 44px);
  display: block;
  width: clamp(150px, 18vw, 270px);
  opacity: .05;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.wall-badge img { display: block; width: 100%; height: auto; }

.wall-head {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--edge);
  margin-bottom: clamp(40px, 5vw, 68px);
}
.wall-kicker {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-light);
}
.wall-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;
}
.wall-head h2 em { font-style: normal; color: var(--green-light); }
.wall-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-block: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-ink);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .35s;
}
.wall-link:hover { background-size: 100% 1px; }
.wall-link svg { width: 20px; height: 12px; }

.wall-rows { display: grid; gap: 24px; }
.wall-row { display: flex; width: max-content; }
.wall-track {
  display: flex;
  gap: 24px;
  padding-right: 24px;
  animation: wall-scroll 64s linear infinite;
}
.wall-row-rev .wall-track { animation-direction: reverse; animation-duration: 76s; }
.wall-row:hover .wall-track,
.wall-row:focus-within .wall-track { animation-play-state: paused; }
@keyframes wall-scroll { to { transform: translateX(-100%); } }

.wall-card {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 30px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.wall-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .6);
}
.wall-card blockquote { margin: 16px 0 0; flex: 1; }
.wall-card blockquote p { font-size: 16px; line-height: 1.6; }
.wall-card figcaption { display: flex; align-items: center; gap: 14px; margin-top: 24px; }

.review-stars { display: flex; gap: 4px; color: var(--green); }
.review-stars svg { width: 18px; height: 18px; fill: currentColor; }
.review-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
}
.review-who { display: flex; flex-direction: column; line-height: 1.35; }
.review-who strong { font-size: 16px; font-weight: 600; }
.review-who span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

@media (max-width: 1099px) { .wall::before, .wall::after { width: 10%; } }
@media (max-width: 700px) {
  .wall::before, .wall::after { width: 5%; }
  .wall-badge { display: none; }
  .wall-card { flex-basis: 300px; padding: 24px; }
}


/* ---------- Mirrored variant: photo right, mint panel bleeding left ---------- */
.intro-rev .intro-row {
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  /* Pinned to the right gutter so the photo lines up with the page edge,
     mirroring how the original aligns to the left. */
  margin-inline: auto 0;
}
.intro-rev .intro-media { grid-column: 2; grid-row: 1; }
.intro-rev .intro-copy { grid-column: 1; grid-row: 1; }
.intro-rev .intro-panel { left: 0; right: 22%; }
/* Frame and plate flip to the opposite corners. */
/* ---------- Tablet mockup ----------
   The report is shown on a portrait tablet rather than in the photo
   frame the other sections use, so the whole screenshot reads at its
   own width instead of being cropped to fit. */
/* Size the media box to the tablet itself so the green frame and the
   stat plate hang off the device, not off the whole column. */
.intro-rev .intro-media { width: min(100%, 420px); margin-inline: auto; }
.intro-rev .intro-frame {
  inset: -22px -22px auto auto;
  width: 100%;
  aspect-ratio: 3 / 4;
}
.device {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 3.1% 2.6%;
  border-radius: 26px;
  background: linear-gradient(155deg, #4a4a4f 0%, #1c1c1e 22%, #242428 60%, #3a3a3f 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .18) inset,
    0 26px 44px -18px rgba(0, 0, 0, .55),
    0 60px 90px -40px rgba(0, 0, 0, .5);
}
.device-cam {
  position: absolute;
  top: 1.35%;
  left: 50%;
  translate: -50% 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a0a0c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
/* The capture is already 3:4, so it fills the screen edge to edge with
   only a hair of crop. */
.device-screen picture { display: block; width: 100%; height: 100%; }
.device-screen img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 0;
}
.intro-rev .intro-media img { box-shadow: -25px 25px 30px -10px rgba(33, 33, 33, .25); }
.intro-rev .intro-stat { right: auto; left: clamp(-20px, -1.4vw, -6px); bottom: clamp(-48px, -3.3vw, -28px); }

@media (max-width: 1099px) {
  .intro-rev .intro-row { grid-template-columns: minmax(0, 1fr); margin-inline: 0 auto; }
  .intro-rev .intro-media { grid-column: 1; grid-row: 1; }
  .intro-rev .intro-copy { grid-column: 1; grid-row: 2; }
}
@media (max-width: 767px) {
  .intro-rev .intro-frame { inset: -14px -14px auto auto; }
  .intro-rev .intro-stat { left: -10px; right: auto; }
}



/* =========================================================
   SERVICE AREA
   Full-bleed photo under a scrim, with the covered places as a
   frosted grid rather than loose pills.
   ========================================================= */
.area-c {
  position: relative;
  padding: clamp(64px, 8vw, 120px) var(--edge);
  background: var(--ink);
  color: var(--on-ink);
  /* clip-path rather than overflow:hidden: overflow would make this a scroll
     container, and the parallax below binds its view() timeline to the
     nearest scrollport. */
  clip-path: inset(0);
  isolation: isolate;
  text-align: center;
}
.area-c-bg { position: absolute; inset: 0; z-index: -2; }
/* The picture is taller than the band so it has room to drift without
   ever exposing an edge. */
.area-c-bg picture {
  position: absolute;
  inset: -40% 0;
  display: block;
  height: 180%;
}
.area-c-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
/* Parallax driven by the section's own position in the viewport, so it
   stays on the compositor and needs no scroll listener. Browsers without
   scroll-driven animations simply get the still photo. */
@keyframes area-parallax {
  from { transform: translateY(-21%); }
  to   { transform: translateY(21%); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .area-c-bg picture {
      animation: area-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
  }
}
.area-c-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .84));
}
.area-c-inner { position: relative; z-index: 1; max-width: 1080px; margin-inline: auto; }
.area-kicker {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-light);
}
.area-c h2 {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}
.area-c h2 em { font-style: normal; color: var(--green-light); }

.area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(30px, 3.6vw, 48px);
}
.area-grid li {
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.area-grid a {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 92px;
  height: 100%;
  padding: 18px 14px;
  color: var(--on-ink);
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
}
/* Small green map pin above each place name. Masked so the colour stays
   a token rather than being baked into the artwork. */
.area-grid a::before {
  content: "";
  width: 17px;
  height: 22px;
  background: var(--green-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s ease;
}
.area-grid li:hover,
.area-grid li:focus-within {
  border-color: var(--green-light);
  background: rgba(0, 127, 9, .34);
  transform: translateY(-4px);
}
.area-grid li:hover a::before,
.area-grid li:focus-within a::before { transform: translateY(-2px) scale(1.14); }
.area-grid a:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }

.area-c-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-block: 8px;
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .35s ease;
}
.area-c-link:hover, .area-c-link:focus-visible { background-size: 100% 1px; }
.area-c-link svg { width: 20px; height: 12px; }

@media (max-width: 980px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .area-grid li { min-height: 78px; padding: 14px 10px; }
}


/* =========================================================
   FAQ
   Two-column accordion built on <details>, so it opens and
   closes with no JavaScript and stays keyboard accessible.
   ========================================================= */
.faq-a { padding: clamp(56px, 7vw, 100px) var(--edge); background: var(--white); }
.faq-kicker {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
}
.faq-a h2 {
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}
.faq-a h2 em { font-style: normal; color: var(--green); }
.faq-a-head { max-width: 1240px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.faq-a-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1240px;
  margin-inline: auto;
  align-items: start;
}
.faq-a-item {
  border: 1px solid rgba(0, 127, 9, .28);
  border-radius: 3px;
  background: var(--mint);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-a-item[open], .faq-a-item:hover { border-color: var(--green); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .4); }
/* The marker is replaced by a drawn plus/minus, so hide the native one. */
.faq-a summary::-webkit-details-marker { display: none; }
.faq-a summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 600;
  line-height: 1.35;
}
.faq-a summary:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.faq-a summary::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--green), var(--green)) center / 100% 2px no-repeat,
    linear-gradient(var(--green), var(--green)) center / 2px 100% no-repeat;
  transition: background-size .25s ease;
}
/* Open state: the vertical stroke collapses, leaving a minus. */
.faq-a-item[open] summary::after { background-size: 100% 2px, 0 100%; }
.faq-a-item p { padding: 0 22px 22px; font-size: 16px; line-height: 1.7; }

@media (max-width: 720px) { .faq-a-grid { grid-template-columns: minmax(0, 1fr); } }


/* =========================================================
   CLOSING CTA BAND
   Reproduced from style.css so the home page renders it the
   same way the other pages do. Includes the .frame / .ph /
   .dual pieces it depends on, scoped to this band.
   ========================================================= */
.cta-band {
  overflow: hidden;
  padding: 5% 10%;
  background-color: transparent;
  background-image: linear-gradient(90deg, rgb(255, 255, 255) 40%, rgb(0, 127, 9) 25%);
}
.cta-row { display: flex; }
.cta-media { width: 50%; }
.cta-copy { position: relative; z-index: 1; width: 50%; display: flex; }
.cta-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 20px 0;
  padding: 8%;
  background-color: var(--mint);
  border-radius: 0 10px 10px 0;
}

.cta-band .frame {
  position: relative;
  height: 100%;
  padding: 1%;
  display: flex;
  align-items: center;
  box-shadow: 25px 25px 30px 10px rgba(0, 0, 0, .5);
}
.cta-band .ph { position: relative; overflow: hidden; }
.cta-band .frame > .ph { position: absolute; inset: 0; }
.cta-band .ph > picture,
.cta-band .ph > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cta-band .frame-inner {
  position: relative;
  width: 100%;
  padding: 10px;
  border: 3px solid var(--green);
}
.cta-band .spacer { height: var(--sp, 400px); }

.cta-card .eyebrow {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.cta-card h2 { text-align: left; }
.cta-band .dual { display: inline-block; align-self: flex-start; }
.cta-band .dual .d1, .cta-band .dual .d2 {
  display: inline;
  font-size: 35px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.cta-band .dual .g { color: var(--green); }
.cta-band .dual .t { color: var(--text); }

.cta-band .btn-box { align-self: flex-start; margin-top: 10px; }

@media (max-width: 1190px) {
  .cta-band { padding: 3%; }
  .cta-row { flex-direction: column-reverse; }
  .cta-media, .cta-copy { width: 100%; }
  .cta-copy { z-index: 4; }
  .cta-card { margin: 0; }
  .cta-band .btn-box { align-self: stretch; }
}
@media (max-width: 767px) {
  .cta-band { padding: 0; }
  .cta-band .frame { padding: 0; }
  .cta-card { border-radius: 0; margin: 0; padding: 8%; }
  .cta-card h2 { text-align: center; }
}


/* =========================================================
   STACKED LAYOUT (1319px and below)
   ========================================================= */
@media (max-width: 1319px){
  .intro-row { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .service-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-media { max-width: 560px; }
  /* Stacked: the copy block carries the mint itself, bleeding edge to
     edge, so the panel can never cut across the photo or a heading. */
  .intro-panel { display: none; }
  .intro-copy {
    background: var(--mint);
    margin-inline: calc(var(--edge) * -1);
    padding: clamp(36px, 7vw, 56px) var(--edge);
  }
}


/* =========================================================
   PHONE (767px and below)
   ========================================================= */
@media (max-width: 767px){
  .hero { padding-bottom: 48px; }
  .hero-media img { object-position: 58% 48%; }
  .hero-actions { gap: 24px; margin-top: 32px; }
  .hero-actions .btn-box { width: 100%; }

  .intro-list { grid-template-columns: minmax(0, 1fr); }
  .service-tiles { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
  .services-actions .btn-box { width: 100%; }
  .intro-frame { inset: -14px auto auto -14px; }
  .intro-stat { right: -10px; bottom: -16px; padding: 14px 20px; }
  .intro-actions { gap: 20px; }
  .intro-actions .btn-box { width: 100%; }
}


/* =========================================================
   MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .hero-media img { animation: none; transform: none; will-change: auto; }
  .hero-slide { transition: none; }
  .service-tile-bg img, .service-tile-hover-overlay, .service-tile-body { transition: none; }
  .wall::before, .wall::after { display: none; }
  .wall-row { width: auto; overflow-x: auto; padding-inline: var(--edge); }
  .wall-track { animation: none; }
  .wall-track[aria-hidden="true"] { display: none; }
  .area-grid li, .area-grid a::before { transition: none; }
  .area-grid li:hover, .area-grid li:focus-within { transform: none; }
}