/* ================================================================
   AMIGOS PAINTING & LANDSCAPE — Homepage v2 CSS
   All selectors scoped to .ampl- prefix — safe for WordPress
   ================================================================ */

/* ── Custom Properties ── */
:root {
  --ampl-green-900: #1F3D14;
  --ampl-green-800: #2E5A1E;
  --ampl-green-700: #3B7226;
  --ampl-green-600: #4C8C36;
  --ampl-green-400: #7FAE68;
  --ampl-green-100: #E7F1E0;
  --ampl-green-50:  #F2F8EE;

  /* Bronze — the site's one accent color, used sparingly (primary CTAs,
     dividers, small hover accents). Not a whole "gold" ramp. */
  --ampl-bronze:      #B8860B;
  --ampl-bronze-dark: #A17708;

  --ampl-charcoal:  #222222;
  --ampl-brown-dark: #4A2C0A; /* FAQ section brand palette only */
  --ampl-gray-700:  #404040;
  --ampl-gray-500:  #737373;
  --ampl-gray-400:  #9a9a9a;
  --ampl-gray-200:  #d4d4d4;
  --ampl-gray-100:  #f0f0ef;

  --ampl-cream:     #F7F5EF;
  --ampl-white:     #ffffff;

  /* ── Typography design system ──
     ONE family site-wide: Manrope, everywhere — headings and display
     moments at 700-800, body copy/forms/cards/FAQs/testimonials/CTAs at
     400-500. The three variable names below are kept as aliases of the
     same family (rather than renamed) since they're referenced throughout
     this file and inline in several page templates — do not repoint any
     of them to a different family. */
  --ampl-font-display:  'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --ampl-font-body:     'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --ampl-font-headline: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* Deliberate, restrained exception to "Manrope everywhere": a system
     serif for the three most editorial section headings (Reviews, Service
     Areas, FAQ) — a considered choice for hierarchy in those specific
     spots, not drift. Every other heading on the site stays Manrope. */
  --ampl-font-serif: 'Georgia', 'Iowan Old Style', serif;

  /* Shared heading tokens — every H2-level heading uses the same tracking
     and line-height regardless of section; only font-size has two
     deliberate tiers (standard section headers vs. the large brand-
     statement variant used once, mid-page). */
  --fs-h2:      clamp(2rem, 4vw, 3rem);
  --fs-h2-lg:   clamp(2.5rem, 5vw, 4rem);
  --ls-heading: -.02em;
  --lh-heading: 1.1;

  /* Shared button tokens — every button on the site (hero, header, cards,
     process, final CTA, forms) uses this same shape/type, only the color
     changes per variant. */
  --ampl-btn-radius: 8px;

  /* Every card/photo box on the site is sharp-cornered by design —
     these two tiers stay at 0 so no section can drift back to rounded
     corners by inventing its own value. --ampl-btn-radius (above) is
     the only rounded shape left, for buttons, form fields, and small
     interactive chips. */
  --ampl-radius-img:  0;   /* project/service photography, photo crops */
  --ampl-radius-card: 0;   /* cards, framed content, map/photo wraps */

  /* Shared "dark forest gradient" wash — the base background technique
     behind the Projects and Reviews bands. Both sections mirror the
     radial glow/vignette positions on purpose (adjacent dark sections
     shouldn't look like exact copies of each other scrolling past), but
     the underlying color wash itself is meant to be identical — these
     three stops used to drift slightly between the two sections. */
  --ampl-dark-1: #060F09;
  --ampl-dark-2: #0E1F14;
  --ampl-dark-3: #1C3A22;

  --ampl-max:      1240px;
  --ampl-section:  6rem;

  --ampl-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ampl-ease-io:  cubic-bezier(0.4, 0, 0.2, 1);

  --ampl-sh-sm:  0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --ampl-sh-md:  0 4px 20px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.06);
  --ampl-sh-lg:  0 8px 40px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
  --ampl-sh-xl:  0 20px 60px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.10);
  --ampl-sh-grn: 0 8px 32px rgba(46,90,30,.25);
}

/* Custom pages are fully self-contained HTML (no theme header/footer), so
   the browser's default 8px <body> margin was never reset — it showed as a
   thin white border around every edge of the page, on every device, since
   nothing else in this stylesheet touches the raw <body> tag. This is the
   one intentional exception to the ".ampl- prefix only" scoping rule below:
   it only fires on pages where this stylesheet is enqueued (custom pages),
   never on wp-admin or any default-template page. */
body { margin: 0; }

/* ── Base resets (scoped, won't bleed into WP) ── */
.ampl-header *, .ampl-nav *, .ampl-hero *,
.ampl-section *, .ampl-split *, .ampl-imgbreak *,
.ampl-why *, .ampl-process *,
.ampl-areas *, .ampl-faq *,
.ampl-cta *, .ampl-cta2 *, .ampl-footer *,
.ampl-projects *, .ampl-reviews2 *,
.ampl-areas2 *, .ampl-faq2 * {
  box-sizing: border-box;
}

.ampl-header a, .ampl-nav a, .ampl-hero a, .ampl-section a, .ampl-split a,
.ampl-why a, .ampl-process a,
.ampl-areas a, .ampl-faq a,
.ampl-cta a, .ampl-cta2 a, .ampl-footer a {
  text-decoration: none;
  color: inherit;
}

.ampl-nav ul, .ampl-areas__grid,
.ampl-hero__trust, .ampl-process__steps,
.ampl-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Accessibility helper: visually hidden but readable by screen readers.
   Used where a link's visible label lives inside an aria-hidden hover
   state, so the link still needs an accessible name. ── */
.ampl-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout helpers ── */
.ampl-container {
  width: 100%;
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.ampl-section {
  padding-block: var(--ampl-section);
}

.ampl-bg--alt  { background: var(--ampl-cream); }

/* ── Typography helpers ── */
.ampl-label {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ampl-green-800);
  margin-bottom: 0.75rem;
}
.ampl-label--gold     { color: var(--ampl-bronze); }
.ampl-label--green-lt { color: var(--ampl-green-400); }

.ampl-rule {
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--ampl-bronze);
  vertical-align: middle;
  margin-right: 0.75rem;
}

.ampl-h2 {
  font-family: var(--ampl-font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ampl-charcoal);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 1.25rem;
}
.ampl-h2--white { color: var(--ampl-white); }

.ampl-body-lg {
  font-family: var(--ampl-font-body);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.8;
  color: var(--ampl-gray-700);
  margin: 0 0 1.5rem;
}
.ampl-body-lg--center { text-align: center; max-width: 56ch; margin-inline: auto; }
.ampl-body-lg--muted  { color: rgba(255,255,255,.65); }

.ampl-section-header { margin-bottom: 3rem; }
.ampl-section-header--center { text-align: center; }

/* ── "Keep Up With Amigos" social-follow section (About page) ──
   Centered eyebrow + heading + subline, a row of white pill buttons
   (icon in brand green + label), closed by a short green rule. Pills
   wrap and center on narrow screens. */
.ampl-social__sub {
  font-family: var(--ampl-font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ampl-gray-700);
  max-width: 560px;
  margin: 1rem auto 0;
}
.ampl-social__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.25rem;
}
.ampl-social__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--ampl-white);
  border: 1px solid rgba(58, 34, 8, .10);
  box-shadow: 0 4px 16px rgba(20, 15, 5, .07);
  font-family: var(--ampl-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ampl-charcoal);
  text-decoration: none;
  transition: transform 220ms var(--ampl-ease-io), box-shadow 220ms var(--ampl-ease-io), color 220ms var(--ampl-ease-io);
}
.ampl-social__btn svg { color: var(--ampl-green-800); flex-shrink: 0; transition: color 220ms var(--ampl-ease-io); }
.ampl-social__btn:hover,
.ampl-social__btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 15, 5, .12);
  color: var(--ampl-green-800);
}
.ampl-social__rule {
  display: block;
  width: 120px;
  height: 2px;
  background: var(--ampl-green-800);
  border-radius: 2px;
  margin: 2.75rem auto 0;
}

/* ── Buttons ──
   One shared shape/type for every button on the site (hero, header, cards,
   process, final CTA banner, forms) — variants below only change color. */
.ampl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 30px;
  border-radius: var(--ampl-btn-radius);
  font-family: var(--ampl-font-body);
  font-size: clamp(.9375rem, 1vw, 1rem); /* ~15-16px */
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 250ms var(--ampl-ease);
}
.ampl-btn:hover { transform: translateY(-2px); }
.ampl-btn--lg { padding: 1rem 2rem; font-size: 1.0625rem; }

.ampl-btn--primary {
  background: var(--ampl-green-800);
  color: var(--ampl-white);
  box-shadow: var(--ampl-sh-grn);
}
.ampl-btn--primary:hover {
  background: var(--ampl-green-700);
  box-shadow: 0 12px 40px rgba(46,90,30,.35);
  transform: translateY(-2px);
}

/* The site's one accent button color (bronze) — "accent" and "bronze" used
   to be two different colors (gold vs. bronze); they're now the same
   variant kept under both class names so every existing reference still
   resolves correctly. */
.ampl-btn--accent,
.ampl-btn--bronze {
  background: var(--ampl-bronze);
  color: #1B1B1B;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.ampl-btn--accent:hover,
.ampl-btn--bronze:hover {
  background: var(--ampl-bronze-dark);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  transform: translateY(-2px);
}

.ampl-btn--outline {
  background: transparent;
  color: var(--ampl-green-800);
  border-color: var(--ampl-green-800);
}
.ampl-btn--outline:hover {
  background: var(--ampl-green-800);
  color: var(--ampl-white);
}

.ampl-btn--outline-bronze {
  background: transparent;
  color: var(--ampl-bronze);
  border-color: var(--ampl-bronze);
}
.ampl-btn--outline-bronze:hover {
  background: var(--ampl-bronze);
  color: #1B1B1B;
  transform: translateY(-2px);
}

.ampl-btn--ghost {
  background: transparent;
  color: var(--ampl-white);
  border-color: rgba(255,255,255,.45);
}
.ampl-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.8);
}

/* The sitewide link reset (.ampl-hero a { color: inherit }) outranks this
   class's own color via specificity, which silently turned the ghost
   button's text black on any hero that isn't the svc/land-page variant
   (those already got their own fix below). Same solid-white-pill treatment
   as those two so it's actually readable on a dark photo. */
.ampl-hero .ampl-btn--ghost {
  background: var(--ampl-white);
  color: var(--ampl-green-900);
  border-color: var(--ampl-white);
}
.ampl-hero .ampl-btn--ghost:hover {
  background: rgba(255, 255, 255, .90);
  border-color: rgba(255, 255, 255, .90);
  color: var(--ampl-green-900);
}



/* ================================================================
   HERO
================================================================ */
.ampl-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  /* Fallback flash before the video paints — matches the bottom fade's solid
     endpoint color below. */
  background: #4A2C0A;
  overflow: hidden;
}

.ampl-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Three-level first-paint fallback: brand color, lightweight image, then video. */
  background-color: #2C5F2E;
  background-image: url('/wp-content/uploads/2026/07/landscaping-hub-hero-768x432.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ampl-hero__bg img,
.ampl-hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ampl-hero__bg video {
  /* Was brightness(.75) — stacked with the dark gradient washes below
     (.ampl-hero::before, .ampl-hero__bg::after), the hero footage read
     as too dark/murky to tell what it was. Text contrast comes from
     those overlays, not from darkening the source video, so there's
     room to let more of the actual footage show through. */
  filter: brightness(1.05) contrast(1.08) saturate(1.12);
}
.ampl-hero__bg img {
  filter: brightness(.94) saturate(1.02);
  transform: scale(1.05);
  animation: ampl-zoom 20s ease-out forwards;
}
@keyframes ampl-zoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

/* Responsive focal point for the hero video (16:9 source). The subject — a finished
   paver walkway between the house and the aspens — sits center-right of frame with a
   safe sky margin at the top. Desktop hero containers are WIDER than 16:9, so cover
   crops top/bottom (vertical adjustment matters most). Mobile containers are much
   TALLER than 16:9, so cover crops left/right (horizontal adjustment matters most). */
.ampl-hero__bg video { object-position: center center; }

@media (max-width: 1024px) {
  .ampl-hero__bg video { object-position: center center; }
}
@media (max-width: 640px) {
  .ampl-hero__bg video { object-position: center center; }
}

/* Keep the lightweight still above the video until playback truly starts. This avoids
   an empty/brown hero on fresh devices, slow networks, and browsers that block autoplay. */
.ampl-hero__bg-poster {
  z-index: 1;
  opacity: 1;
  transition: opacity .45s ease;
}
.ampl-hero__bg.is-video-playing .ampl-hero__bg-poster {
  opacity: 0;
  pointer-events: none;
}

/* Subtle edge vignette. Lives on the media wrapper (paints above the
   video/poster, below the text layer) so it darkens the frame's corners
   without touching the center of the shot. */
.ampl-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 118% 100% at 50% 50%,
    transparent 52%,
    rgba(0,0,0,.24) 80%,
    rgba(0,0,0,.46) 100%
  );
}

/* Cinematic left-to-right darkening wash. Heavy behind the left-aligned
   text column (~84%) and easing to a light veil on the right (~30%) so the
   video is still clearly the focal point but every word clears WCAG AA. */
.ampl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.84) 0%,
    rgba(0,0,0,.70) 30%,
    rgba(0,0,0,.48) 58%,
    rgba(0,0,0,.30) 100%
  );
}
@media (max-width: 767px) {
  /* Content is centered on mobile, so a one-sided fade would leave half the
     text on brighter video — use a centered wash instead, same weight. */
  .ampl-hero::before {
    background: radial-gradient(
      ellipse 120% 90% at center,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.62) 45%,
      rgba(0,0,0,.42) 100%
    );
  }
}

.ampl-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 240px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.30) 35%,
    rgba(0,0,0,.82) 72%,
    #4A2C0A 100%
  );
}
@media (max-width: 640px) {
  .ampl-hero::after { height: 170px; }
}

.ampl-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}

.ampl-hero__content {
  position: relative;
  max-width: 600px;
}
/* Very subtle blur behind the text column ONLY — the rest of the video
   stays perfectly sharp. The radial mask feathers the blurred patch out
   to nothing so there is no visible rectangular edge over the footage.
   Sits at z-index:-1 inside .ampl-hero__body's stacking context: behind
   the copy, above the video. */
.ampl-hero__content::before {
  content: '';
  position: absolute;
  inset: -3rem -4rem;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 32% 50%, #000 40%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 62% at 32% 50%, #000 40%, transparent 76%);
}
@media (max-width: 767px) {
  .ampl-hero__content::before {
    inset: -2rem -1.5rem;
    -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 50%, #000 45%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 62% at 50% 50%, #000 45%, transparent 80%);
  }
}

.ampl-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.ampl-hero__h1 {
  /* Manrope 800, mixed case — sized down and re-tracked from the earlier
     condensed-uppercase Bebas Neue treatment, since Manrope's glyphs are
     much wider at the same font-size and don't carry uppercase-at-scale
     well. Re-measure before changing this again. */
  font-family: var(--ampl-font-headline);
  font-size: clamp(2.75rem, 5vw, 4.25rem); /* ~44-68px desktop */
  font-weight: 800;
  color: var(--ampl-white);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
  max-width: 600px;
  margin: 0 0 2rem;
}
.ampl-hero__h1-accent {
  display: block;
  margin-top: .15em;
  color: var(--ampl-bronze);
}
@media (max-width: 1024px) {
  .ampl-hero__h1 { font-size: clamp(2.25rem, 4.5vw, 3rem); } /* ~36-48px tablet */
}
@media (max-width: 640px) {
  .ampl-hero__h1 { font-size: clamp(1.875rem, 7vw, 2.25rem); } /* ~30-36px mobile */
}

.ampl-hero__sub {
  font-family: var(--ampl-font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.4vw, 1.25rem); /* ~18-20px */
  color: rgba(255,255,255,.96);
  line-height: 1.65;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
  max-width: 520px;
  margin: 0 0 3rem;
}

.ampl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}
/* Hero's accent CTA now just uses the shared .ampl-btn--accent bronze
   variant directly — no hero-scoped override needed since that variant
   already matches this color. */

/* Trust strip */
.ampl-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.ampl-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ampl-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  /* Raised from .75 — at 0.8rem this is small text, so it needs the extra
     lift to clear WCAG AA against the overlay. */
  color: rgba(255,255,255,.92);
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.ampl-hero__trust-sep {
  width: 1px; height: 18px;
  background: rgba(255,255,255,.28);
}


/* ================================================================
   INTRO / BRAND STATEMENT
================================================================ */
.ampl-intro { background: var(--ampl-white); }
.ampl-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ampl-intro__h2 {
  /* Intentionally the larger h2-lg tier — this is the page's one mid-page
     brand-statement headline, deliberately bigger than a standard section
     header, but sharing the same tracking/line-height as every other H2. */
  font-family: var(--ampl-font-display);
  font-size: var(--fs-h2-lg);
  font-weight: 700;
  color: var(--ampl-charcoal);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 1.5rem;
}
.ampl-intro__body {
  font-family: var(--ampl-font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ampl-gray-500);
  line-height: 1.8;
  max-width: 62ch;
  margin: 0 0 2.5rem;
}
.ampl-intro__links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }


/* ================================================================
   SPLIT SECTIONS (Painting + Landscaping)
================================================================ */
.ampl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

/* Painting: image left */
.ampl-split--alt .ampl-split__image { order: -1; }
/* Landscaping: image right (default) */

.ampl-split__image {
  position: relative;
  overflow: hidden;
  min-height: 560px;
}
.ampl-split__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ampl-ease);
}
.ampl-split__image:hover img { transform: scale(1.03); }

.ampl-split__badge {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: var(--ampl-white);
  border-radius: var(--ampl-radius-card);
  padding: 1rem 1.25rem;
  box-shadow: var(--ampl-sh-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ampl-split--rev .ampl-split__badge { right: auto; left: 2rem; }
.ampl-split__badge-num {
  font-family: var(--ampl-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--ampl-green-800);
  line-height: 1;
}
.ampl-split__badge-txt {
  font-family: var(--ampl-font-body);
  font-size: 0.8rem;
  color: var(--ampl-gray-500);
  line-height: 1.4;
}

.ampl-split__content {
  padding: 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ampl-white);
}
.ampl-split--alt .ampl-split__content { background: var(--ampl-cream); }

/* Service cards inside split */
.ampl-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0 2.5rem;
}
.ampl-svc-card {
  background: var(--ampl-white);
  border: 1px solid var(--ampl-gray-200);
  border-radius: var(--ampl-radius-card);
  padding: 1.25rem 1rem;
  transition: box-shadow 250ms var(--ampl-ease), transform 250ms var(--ampl-ease), border-color 250ms;
  position: relative;
  overflow: hidden;
}
.ampl-svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ampl-green-800);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ampl-ease);
}
.ampl-svc-card:hover::before { transform: scaleX(1); }
.ampl-svc-card:hover {
  box-shadow: var(--ampl-sh-md);
  transform: translateY(-4px);
  border-color: transparent;
}
.ampl-svc-card__icon {
  width: 42px; height: 42px;
  background: var(--ampl-green-50);
  border-radius: var(--ampl-btn-radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem;
}
.ampl-svc-card__icon svg { width: 22px; height: 22px; stroke: var(--ampl-green-800); }
.ampl-svc-card__title {
  font-family: var(--ampl-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ampl-charcoal);
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.ampl-svc-card__body {
  font-family: var(--ampl-font-body);
  font-size: 0.8rem;
  color: var(--ampl-gray-500);
  line-height: 1.6;
  margin: 0 0 0.6rem;
}
.ampl-svc-card__link {
  font-family: var(--ampl-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ampl-green-800);
  transition: gap 150ms;
}
.ampl-svc-card__link:hover { text-decoration: underline; }


/* ================================================================
   SERVICES OVERVIEW — "How Amigos Can Transform Your Property"
   Text on the left (~36%), a rectangular photo mosaic on the right
   (~64%) — one large landscape image + one tall portrait image in the
   top row, four smaller nearly-square images in the bottom row. No
   circles, no cards, no icons — the photography itself forms the grid.
   Single source of truth for this section.

   Service labels are permanently visible over the bottom-left of every
   photo (never hover-only, never below the image). Only the
   bronze-outlined arrow is hover-only, and only the image inside each
   frame animates on hover — the frame itself never moves or resizes.
================================================================ */
/* Editorial two-zone composition: warm brown text panel + the photos
   sitting directly on the section's own cream field (no second "gallery
   panel" background layered behind them — one consistent cream, not two
   near-identical shades stacked). */
.ampl-services {
  position: relative;
  background-color: var(--ampl-cream);
  padding-block: 80px;
}
/* Contained, not full-bleed — a premium content block, not a banner. */
.ampl-services__outer {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.ampl-services__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 36fr) minmax(0, 64fr);
  gap: 0;
  align-items: center;
}

/* LEFT ZONE — brand brown with a very subtle radial gradient for depth,
   not a flat block of color. Thin bronze rule is the only divider —
   no hard color seam. */
.ampl-services__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  background-color: #4A2C0A;
  background-image: radial-gradient(ellipse at center, rgba(96, 64, 28, .16) 0%, rgba(58, 34, 8, .5) 100%);
  border-right: 1px solid rgba(184, 134, 11, .5);
  padding: 4rem 3.5rem;
}

.ampl-services__h2 {
  font-family: var(--ampl-font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.2vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
  color: #fff;
  max-width: 16ch;
  margin: 0 0 32px;
}

.ampl-services__intro {
  font-family: var(--ampl-font-body);
  font-weight: 400;
  color: #F5F2EC;
  text-align: left;
  max-width: 36ch;
  margin: 0 0 40px;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.7;
}

/* White text on both rest and hover — needed for contrast against the
   brown panel, unlike the shared .ampl-btn--accent's dark-text default. */
.ampl-services__cta.ampl-btn { color: #fff; }
.ampl-services__cta.ampl-btn:hover { background: var(--ampl-bronze-dark); color: #fff; }

/* ── Photo mosaic ──
   20 columns (not 4) so the top row can hit an exact 55/45 split
   between the large and tall images while the bottom row still divides
   into four perfectly even boxes (5 columns each, 4×5=20). Grid
   structure/positions unchanged — only spacing and finish updated.
   Padding here (not a background) is what keeps the photos off the
   divider and the section's outer edge — premium gallery framing, not
   a colored box. */
.ampl-services__mosaic {
  --row-a: clamp(230px, 24vw, 340px); /* row 1: large + tall */
  --row-b: clamp(120px, 12vw, 175px); /* row 2: the four smaller images */
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: var(--row-a) var(--row-b);
  gap: 18px;
  padding: 3rem 0 3rem 3rem;
  max-width: 1160px;
  width: 100%;
}

.ampl-mosaic__item {
  position: relative;
  display: block;
  border-radius: 0; /* sharp corners, matching every other photo box on the site */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08); /* subtle, not heavy */
}
.ampl-mosaic__item:focus-visible {
  outline: 2px solid var(--ampl-bronze);
  outline-offset: 3px;
}
.ampl-mosaic__item--large { grid-column: 1 / 12; grid-row: 1; } /* 11/20 = 55% */
.ampl-mosaic__item--tall  { grid-column: 12 / 21; grid-row: 1; } /* 9/20 = 45% */
.ampl-mosaic__item--small { grid-column: span 5; } /* 5/20 = 25% each, four fill row 2 exactly */
/* The four .ampl-mosaic__item--small images all share the span above
   and auto-place into row 2's columns in DOM order — no per-item
   position classes needed. */

.ampl-mosaic__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms var(--ampl-ease-io); /* only the image animates, not the frame */
}

/* Permanent bottom-left gradient + label — visible at rest, not
   hover-only, per spec. */
.ampl-mosaic__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(20, 20, 20, .58) 0%, rgba(20, 20, 20, 0) 100%);
  transition: background 300ms var(--ampl-ease-io);
  pointer-events: none;
}
.ampl-mosaic__label {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: 12px 14px;
  color: #fff;
  font-family: var(--ampl-font-body);
  font-weight: 600;
  font-size: 15px; /* 14–17px spec */
  line-height: 1.3;
  max-width: calc(100% - 24px);
}

/* Hover (laptop/desktop): image scales inside its fixed frame, scrim
   deepens slightly, a bronze-outlined arrow fades into the exact center
   of the box via its own dedicated overlay layer. */
.ampl-mosaic__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 54px; height: 54px; /* 50–58px spec */
  border-radius: 50%;
  border: 1.5px solid var(--ampl-bronze);
  background: rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity 300ms var(--ampl-ease-io), transform 300ms var(--ampl-ease-io);
}
/* Touch devices can't hover — keep the centered arrow faintly visible at
   rest instead of fully hidden, without requiring an interaction. */
@media (hover: none) {
  .ampl-mosaic__arrow { opacity: .55; }
}
.ampl-mosaic__item:hover img,
.ampl-mosaic__item:focus-visible img {
  transform: scale(1.05);
}
.ampl-mosaic__item:hover .ampl-mosaic__scrim,
.ampl-mosaic__item:focus-visible .ampl-mosaic__scrim {
  background: linear-gradient(to top, rgba(20, 20, 20, .74) 0%, rgba(20, 20, 20, 0) 100%);
}
.ampl-mosaic__item:hover .ampl-mosaic__arrow,
.ampl-mosaic__item:focus-visible .ampl-mosaic__arrow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ================================================================
   LAPTOP — 1024–1279px: text stays left, mosaic stays right; mosaic
   sizing already scales down via clamp(), padding tightens slightly to
   keep both zones comfortable at this width.
================================================================ */
@media (max-width: 1279px) {
  .ampl-services__content { padding: 3.5rem 2.5rem; }
  .ampl-services__mosaic { padding: 2.5rem 0 2.5rem 2.5rem; }
}

/* ================================================================
   TABLET — 768–1023px: brown panel stacks first (centered text), photos
   centered below it — no vertical divider once the zones are stacked
   instead of side by side. Top row (large + tall) stays two images;
   bottom row becomes a 2×2 grid instead of four across.
================================================================ */
@media (max-width: 1023px) {
  .ampl-services__layout { grid-template-columns: 1fr; }
  .ampl-services__content {
    align-items: center;
    text-align: center;
    border-right: none;
    padding: 3rem 2rem;
  }
  .ampl-services__h2 { text-align: center; max-width: 22ch; margin-inline: auto; }
  .ampl-services__intro { text-align: center; margin-inline: auto; }
  .ampl-services__cta { margin-inline: auto; }

  .ampl-services__mosaic {
    padding: 2.5rem;
    margin-inline: auto;
    --row-a: 260px;
    --row-b: 170px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: var(--row-a) var(--row-b) var(--row-b);
    max-width: 620px;
  }
  .ampl-mosaic__item--large { grid-column: 1 / 2; grid-row: 1; }
  .ampl-mosaic__item--tall  { grid-column: 2 / 3; grid-row: 1; }
  /* Reset the desktop 20-col span — this tier's grid only has 2 columns,
     so the four smalls go back to their default 1-column auto-place,
     filling the 2×2 grid below (rows 2–3). */
  .ampl-mosaic__item--small { grid-column: span 1; }
}

/* ================================================================
   MOBILE — below 768px: heading → paragraph → button → mosaic. Large
   image full width, tall image full width beneath it, then the four
   smaller images in a two-column grid.
================================================================ */
@media (max-width: 767px) {
  /* Safety net on top of the dvh fix above: real mobile browsers can still
     round/recalculate viewport height by a few pixels as the toolbar
     shows/hides, which briefly reveals the page's white background between
     the hero and this section. Pulling this section up slightly guarantees
     it always overlaps the hero's own bottom edge, so no gap can appear
     regardless of any remaining rounding. */
  .ampl-services { margin-top: -80px; position: relative; z-index: 1; }
  .ampl-services__content { padding: 2.5rem 1.5rem; }
  .ampl-services__h2 { font-size: clamp(1.625rem, 6.5vw, 2rem); }

  /* Pull the next section up into its own existing top padding (the
     standard ~64px every section starts with) instead of adding more
     space here — safe because that padding is empty space before its
     own heading, not real content, so nothing gets clipped. Kept small
     so the overlap never reaches into the real mosaic photos above it. */
  .ampl-why { margin-top: -12px; padding-top: 0; position: relative; z-index: 1; }

  .ampl-services__mosaic {
    padding: 0;
    --row-a: 230px;
    --row-tall: 190px;
    --row-b: 130px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: var(--row-a) var(--row-tall) var(--row-b) var(--row-b);
    gap: 12px; /* 12–16px spec */
    max-width: 100%;
  }
  .ampl-mosaic__item--large { grid-column: 1 / 3; grid-row: 1; }
  .ampl-mosaic__item--tall  { grid-column: 1 / 3; grid-row: 2; }
  /* Reset the desktop 20-col span — this tier's grid only has 2 columns,
     so the four smalls go back to their default 1-column auto-place,
     filling the 2×2 grid below (rows 3–4). */
  .ampl-mosaic__item--small { grid-column: span 1; }

  .ampl-mosaic__label { font-size: 14px; padding: 10px 12px; }
  .ampl-mosaic__arrow { width: 46px; height: 46px; } /* 42–48px spec, stays centered via the base rule */
}

/* ================================================================
   VERY SMALL MOBILE — below 390px: one-column featured images and the
   two-column small grid are preserved, everything just sized down.
================================================================ */
@media (max-width: 389px) {
  .ampl-services__h2 { font-size: clamp(1.375rem, 7.5vw, 1.75rem); }
  .ampl-services__intro { font-size: .875rem; }

  .ampl-services__mosaic {
    --row-a: 190px;
    --row-tall: 160px;
    --row-b: 122px;
    gap: 10px;
  }
  .ampl-mosaic__label { font-size: 12.5px; padding: 8px 10px; line-height: 1.25; }
  .ampl-mosaic__arrow { width: 42px; height: 42px; } /* still within the 42–48px spec */
}







/* ================================================================
   FULL-BLEED IMAGE BREAK
================================================================ */
.ampl-imgbreak {
  position: relative;
  height: 45vh;
  min-height: 280px;
  overflow: hidden;
}
.ampl-imgbreak img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.55) saturate(.8);
}
.ampl-imgbreak__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.ampl-imgbreak__quote {
  font-family: var(--ampl-font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 700;
  font-style: italic;
  color: var(--ampl-white);
  text-align: center;
  max-width: 22ch;
  line-height: 1.25;
  letter-spacing: -.01em;
}


/* ================================================================
   WHY CHOOSE US
================================================================ */
.ampl-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.ampl-why__img-wrap {
  position: relative;
  border-radius: var(--ampl-radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--ampl-sh-lg);
}
.ampl-why__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.ampl-why__h2 {
  font-family: var(--ampl-font-headline);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ampl-green-800);
  text-align: left;
  margin: 0 0 1.25rem;
}
.ampl-why__body {
  font-family: var(--ampl-font-body);
  font-size: clamp(1.125rem, 1.2vw, 1.25rem); /* ~18-20px */
  line-height: 1.75;
  color: #2B2B2B;
  text-align: left;
  max-width: 650px; /* within the requested 600-700px range */
  margin: 0 0 2.5rem;
}

.ampl-why__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}


/* ================================================================
   PROJECT GALLERY CARDS — shared by the standalone /gallery/ page.
   The homepage's old "Our Recent Work" section (and its exclusive
   header/view-all-link/featured-project styles) has been removed;
   these classes remain because page-templates/gallery.php still
   uses them for its own filter bar and card grid.
================================================================ */
.ampl-portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.ampl-portfolio__filter {
  font-family: var(--ampl-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ampl-gray-700);
  background: transparent;
  border: 1.5px solid var(--ampl-gray-200);
  border-radius: 9999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: all 200ms var(--ampl-ease);
}
.ampl-portfolio__filter:hover {
  border-color: var(--ampl-green-800);
  color: var(--ampl-green-800);
}
.ampl-portfolio__filter.is-active {
  background: var(--ampl-green-800);
  border-color: var(--ampl-green-800);
  color: var(--ampl-white);
}

/* Grid — 3 / 2 / 1 columns */
.ampl-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.ampl-portfolio-card {
  display: block;
  transition: transform 250ms var(--ampl-ease);
}
.ampl-portfolio-card__media {
  position: relative;
  border-radius: var(--ampl-radius-img);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--ampl-sh-sm);
  transition: box-shadow 250ms var(--ampl-ease);
}
.ampl-portfolio-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ampl-ease);
}
.ampl-portfolio-card:hover { transform: translateY(-6px); }
.ampl-portfolio-card:hover .ampl-portfolio-card__media { box-shadow: var(--ampl-sh-lg); }
.ampl-portfolio-card:hover .ampl-portfolio-card__media img { transform: scale(1.06); }
.ampl-portfolio-card__title {
  font-family: var(--ampl-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ampl-charcoal);
  margin: 1rem 0 0;
}
.ampl-portfolio-card__meta {
  display: inline-block;
  font-family: var(--ampl-font-body);
  font-size: 0.8rem;
  color: var(--ampl-gray-500);
  margin: 0.3rem 0 0;
}
.ampl-portfolio-card__arrow {
  display: inline-flex;
  margin-left: .4rem;
  color: var(--ampl-green-800);
  transition: transform 250ms var(--ampl-ease);
  vertical-align: middle;
}
.ampl-portfolio-card:hover .ampl-portfolio-card__arrow { transform: translateX(4px); }

/* The one before/after card (.ampl-portfolio-card--ba) isn't itself an
   <a> — its title/meta/arrow live in their own inner link instead, so
   the interactive range slider never ends up nested inside an anchor.
   It still shares the .ampl-portfolio-card class above for identical
   hover/lift/shadow behavior. */
.ampl-portfolio-card__link { display: block; }

@media (max-width: 1024px) {
  .ampl-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ampl-portfolio__grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* ================================================================
   PROCESS
================================================================ */
.ampl-process__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  counter-reset: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ampl-process__steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(10% + 28px);
  right: calc(10% + 28px);
  height: 2px;
  background: var(--ampl-gray-200);
}

.ampl-process__step { text-align: center; position: relative; z-index: 1; }

.ampl-process__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ampl-white);
  border: 2px solid var(--ampl-gray-200);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  font-family: var(--ampl-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ampl-gray-400);
  box-shadow: var(--ampl-sh-sm);
  transition: all 400ms var(--ampl-ease);
}
.ampl-process__step.is-active .ampl-process__num {
  background: var(--ampl-green-800);
  border-color: var(--ampl-green-800);
  color: var(--ampl-white);
  box-shadow: var(--ampl-sh-grn);
}
.ampl-process__title {
  font-family: var(--ampl-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ampl-charcoal);
  margin: 0 0 0.5rem;
}
.ampl-process__body {
  font-family: var(--ampl-font-body);
  font-size: 0.8rem;
  color: var(--ampl-gray-500);
  line-height: 1.6;
  margin: 0;
}


/* ================================================================
   PROJECTS WE'RE PROUD OF — new independent homepage component.
   Dark forest-green band, sharp-cornered cards, bronze accents.
   Uses its own --ampl-projects__* classes only (no shared/inherited
   classes from the removed "Our Recent Work" section).
================================================================ */
.ampl-projects {
  position: relative;
  overflow: hidden;
  background: var(--ampl-dark-2);
  padding-block: var(--ampl-section);
}
/* Same technique as the reviews band: layered gradients for depth +
   a pair of blurred, abstract botanical silhouettes tucked into
   opposite corners, fading out toward the center. Independent rule
   set — nothing shared with .ampl-bg--dark. */
.ampl-projects::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 90% 6%, rgba(190, 220, 180, .14) 0%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 6% 92%, rgba(160, 200, 160, .11) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 4% 4%, rgba(2, 7, 4, .55) 0%, transparent 58%),
    radial-gradient(ellipse 48% 42% at 96% 96%, rgba(2, 7, 4, .5) 0%, transparent 62%),
    linear-gradient(155deg, var(--ampl-dark-1) 0%, var(--ampl-dark-2) 30%, var(--ampl-dark-3) 56%, var(--ampl-dark-1) 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, rgba(0, 0, 0, .5) 0%, #000 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, rgba(0, 0, 0, .5) 0%, #000 85%);
}
.ampl-projects::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'%3E%3Cdefs%3E%3Cfilter id='p' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='30'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23p)' fill='%236B9A5F'%3E%3Cellipse cx='30' cy='30' rx='150' ry='100'/%3E%3Cellipse cx='150' cy='60' rx='110' ry='80'/%3E%3Cellipse cx='870' cy='650' rx='160' ry='100'/%3E%3Cellipse cx='760' cy='690' rx='120' ry='80'/%3E%3C/g%3E%3Cg filter='url(%23p)' stroke='%236B9A5F' stroke-width='7' fill='none'%3E%3Cpath d='M0,10 C90,50 110,110 190,150 C250,180 270,220 250,280'/%3E%3Cpath d='M900,690 C810,650 830,590 750,540 C690,500 680,450 710,390'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ampl-projects .ampl-container { position: relative; z-index: 1; }

.ampl-projects__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.ampl-projects__eyebrow {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
  margin-bottom: .75rem;
}
.ampl-projects__h2 {
  font-family: var(--ampl-font-headline);
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ampl-white);
  margin: 0;
}
.ampl-projects__desc {
  font-family: var(--ampl-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  text-align: right;
  max-width: 340px;
  margin: 0;
  flex-shrink: 0;
}

/* Grid: 6 columns so the two large cards split 3/3 on row one, and
   the three small cards split 2/2/2 on row two. */
.ampl-projects__grid {
  --row-a: clamp(320px, 30vw, 460px);
  --row-b: clamp(190px, 16vw, 260px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: var(--row-a) var(--row-b);
  gap: 20px;
}

.ampl-projects__featured { grid-column: 1 / 4; grid-row: 1; }
.ampl-projects__ba       { grid-column: 4 / 7; grid-row: 1; }
.ampl-projects__card     { grid-column: span 2; grid-row: 2; }

/* Shared card chrome: sharp corners (no border-radius anywhere),
   full-bleed image, bottom-left location/title over a scrim. */
.ampl-projects__featured,
.ampl-projects__ba,
.ampl-projects__card {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.ampl-projects__featured img,
.ampl-projects__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ampl-ease-io);
}
.ampl-projects__featured:hover img,
.ampl-projects__card:hover img { transform: scale(1.04); }

.ampl-projects__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(6, 12, 8, .78) 0%, rgba(6, 12, 8, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.ampl-projects__meta {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ampl-projects__location {
  font-family: var(--ampl-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
}
.ampl-projects__title {
  font-family: var(--ampl-font-headline);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ampl-white);
}
.ampl-projects__card .ampl-projects__title { font-size: 1.05rem; }

.ampl-projects__arrow {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 2;
  width: 40px; height: 40px;
  border: 1.5px solid var(--ampl-bronze);
  background: rgba(0, 0, 0, .2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ampl-white);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms var(--ampl-ease-io), transform 250ms var(--ampl-ease-io);
}
.ampl-projects__featured:hover .ampl-projects__arrow { opacity: 1; transform: translateY(0); }

/* ── Before / after slider ── */
.ampl-projects__baStage {
  position: absolute;
  inset: 0;
}
.ampl-projects__baAfter,
.ampl-projects__baBefore {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ampl-projects__baDivider {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, .85);
  z-index: 2;
  pointer-events: none;
  transform: translateX(-1px);
}
.ampl-projects__baGrip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  border: 1.5px solid var(--ampl-bronze);
  display: flex; align-items: center; justify-content: center;
  color: var(--ampl-bronze);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.ampl-projects__baTag {
  position: absolute;
  top: 16px;
  z-index: 2;
  font-family: var(--ampl-font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  color: var(--ampl-white);
  background: rgba(0, 0, 0, .45);
  pointer-events: none;
}
.ampl-projects__baTag--before { left: 16px; }
.ampl-projects__baTag--after  { right: 16px; background: var(--ampl-bronze); color: #1B1B1B; }
.ampl-projects__baRange {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  z-index: 3;
}
.ampl-projects__baRange::-webkit-slider-runnable-track { background: transparent; }
.ampl-projects__baRange::-moz-range-track { background: transparent; }
.ampl-projects__baRange::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 44px; height: 44px;
  opacity: 0;
  cursor: ew-resize;
}
.ampl-projects__baRange::-moz-range-thumb {
  width: 44px; height: 44px;
  opacity: 0;
  border: none;
  cursor: ew-resize;
}

.ampl-projects__cta {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

@media (max-width: 1024px) {
  .ampl-projects__featured, .ampl-projects__ba { grid-column: 1 / 7; }
  .ampl-projects__ba { grid-row: 2; }
  .ampl-projects__card { grid-column: span 3; grid-row: 3; }
  .ampl-projects__grid { grid-template-rows: var(--row-a) var(--row-a) var(--row-b); }
}
@media (max-width: 767px) {
  .ampl-projects__header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ampl-projects__desc { text-align: left; max-width: 100%; }
}
@media (max-width: 640px) {
  /* True mobile: drop the CSS Grid entirely in favor of a plain flex
     column. Grid track sizing (repeat(6, 1fr) items spanning 1/7) has
     been unreliable on some phones — a flex column stacking five
     full-width cards is bulletproof by comparison. */
  .ampl-projects__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ampl-projects__featured,
  .ampl-projects__ba {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: var(--row-a);
  }
  .ampl-projects__card {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: var(--row-b);
  }
}


/* ================================================================
   WHAT HOMEOWNERS ARE SAYING — new independent premium reviews
   carousel. Completely separate from the deleted "Every Neighbor
   Becomes a Reference" section — its own --ampl-reviews2__* classes,
   own background treatment, own card design. Uses native scroll +
   scroll-snap for touch/trackpad/wheel momentum (free, performant),
   plus a small JS layer for mouse-drag, buttons, and keyboard nav.
================================================================ */
/* ================================================================
   REVIEWS — premium card carousel. Warm off-white field with a gold
   spotlight glow; each card renders a real review as text (initials
   avatar, name, date, quote, gold verified badge) with the card
   nearest center elevated above its neighbors.
================================================================ */
.ampl-reviews2 {
  position: relative;
  overflow: hidden;
  background-color: #F9F3E9;
  padding-block: 100px;
}
/* Subtle paper grain — same technique used elsewhere on the site
   (feTurbulence noise), never a decorative graphic. ~2.5% opacity. */
.ampl-reviews2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
/* Warm spotlight + vignette — purely decorative background depth, sits
   behind everything (z-index:0, same as the grain layer above; content
   stays at z-index:1). Static, no animation, so there's nothing for
   prefers-reduced-motion to need to disable. Percentage-based radial
   positions/sizes so it scales naturally with the section at any
   viewport width with zero layout impact (position:absolute, doesn't
   participate in flow). */
.ampl-reviews2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 42% at 50% 32%, rgba(212, 160, 40, .18) 0%, rgba(246, 220, 175, .14) 42%, transparent 75%),
    radial-gradient(ellipse 95% 90% at 50% 55%, transparent 60%, rgba(58, 34, 8, .05) 100%);
}
.ampl-reviews2 .ampl-container { position: relative; z-index: 1; }

.ampl-reviews2__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.ampl-reviews2__eyebrow {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
  margin-bottom: .9rem;
}
.ampl-reviews2__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1.1;
  color: #1B1B1B;
  margin: 0 0 1.25rem;
}
.ampl-reviews2__ratedline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: .35rem 0 0;
  flex-wrap: wrap;
}
/* Big gold star row under the rated line — the header's focal point,
   matching the warm spotlight glow behind it (same #D4A028 family as
   the section's ::after radial). */
.ampl-reviews2__bigstars {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 1.35rem;
  color: #D4A028;
  filter: drop-shadow(0 2px 6px rgba(212, 160, 40, .35));
}
.ampl-reviews2__ratedtext {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--ampl-font-body);
  font-size: .92rem;
  font-weight: 600;
  color: #1B1B1B;
}
.ampl-reviews2__ratedtext svg { flex-shrink: 0; }

/* ── Carousel ── */
.ampl-reviews2__carousel-wrap {
  position: relative;
}
.ampl-reviews2__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: visible;
  /* proximity, not mandatory — mandatory snap has a real Chromium quirk
     where it can fight/revert the very first programmatic scroll (button
     click, scrollBy) on a track before any user-gesture scroll has
     happened on it yet, making the carousel appear frozen. Proximity
     still snaps but doesn't fight the browser like that. */
  scroll-snap-type: x proximity;
  /* No CSS scroll-behavior:smooth here on purpose — the drag handler
     writes scrollLeft directly on every mousemove and needs that to land
     instantly, not animate. Button/keyboard scrolling still requests
     smooth explicitly via scrollBy({behavior:'smooth'}) in JS, which is
     unaffected by this. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Both directions declared as native-pannable on this element itself.
     `pan-y` ALONE (an earlier version of this rule) actually tells the
     browser "only vertical panning is native here", which disables
     native horizontal swipe-scroll entirely — that was the swipe bug.
     Vertical swipes still fall through to the page correctly regardless,
     because this element has no vertical overflow of its own to consume
     them (overflow-y: visible, above) — nothing about that relies on
     touch-action being restricted. */
  touch-action: pan-x pan-y pinch-zoom;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* Extra block padding so the centered card's scale-up + drop shadow
     have room to render inside the scroll container instead of being
     clipped at its edges. */
  padding: 22px 8px 30px;
  margin: 0 -8px;
}
.ampl-reviews2__track::-webkit-scrollbar { display: none; }
.ampl-reviews2__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ampl-reviews2__track:focus-visible { outline: 2px solid var(--ampl-bronze); outline-offset: 4px; }

.ampl-reviews2__cardWrap {
  flex: 0 0 calc(33.333% - 16px); /* exactly 3 visible at desktop width */
  scroll-snap-align: center;
  /* No transform/transition here on purpose — this element also carries
     .ampl-fade-up (the entrance reveal, which animates its own
     translateY/opacity). Putting the center-emphasis scale here too
     would fight that over the single `transform` property and cause a
     visible jump/snap-back once the reveal finished — easy to mistake
     for the carousel "moving by itself". The scale effect lives on the
     inner .card instead, which has no other transform of its own. */
}

/* Text-rendered review card: avatar + name/date head, quote body,
   verified-badge foot. Side cards sit slightly recessed (scale .94);
   the card nearest center pops (scale 1.03 + deeper shadow) — the
   "elevated middle card" effect. */
.ampl-reviews2__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  background: #FFFDF9;
  border: 1px solid rgba(58, 34, 8, .07);
  border-radius: 18px;
  padding: 26px 26px 20px;
  box-shadow: 0 6px 20px rgba(20, 15, 5, .06);
  text-decoration: none;
  transform: scale(.94);
  transition: transform 320ms var(--ampl-ease-io), box-shadow 320ms var(--ampl-ease-io), background 320ms var(--ampl-ease-io);
}
.ampl-reviews2__cardWrap.is-centered .ampl-reviews2__card {
  transform: scale(1.03);
  background: #fff;
  box-shadow: 0 18px 40px rgba(58, 34, 8, .13), 0 5px 14px rgba(58, 34, 8, .06);
}
.ampl-reviews2__card:hover,
.ampl-reviews2__card:focus-visible {
  transform: scale(.97) translateY(-3px);
  box-shadow: 0 16px 36px rgba(58, 34, 8, .11);
}
.ampl-reviews2__cardWrap.is-centered .ampl-reviews2__card:hover,
.ampl-reviews2__cardWrap.is-centered .ampl-reviews2__card:focus-visible {
  transform: scale(1.04) translateY(-3px);
  box-shadow: 0 22px 46px rgba(58, 34, 8, .15), 0 6px 16px rgba(58, 34, 8, .07);
}

/* ── Card head: initials avatar + name + date/platform ── */
.ampl-reviews2__cardHead {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ampl-reviews2__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .18);
}
.ampl-reviews2__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ampl-reviews2__name {
  font-family: var(--ampl-font-body);
  font-size: .98rem;
  font-weight: 700;
  color: #1B1B1B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ampl-reviews2__meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--ampl-font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ampl-gray-500);
}
.ampl-reviews2__meta svg { flex-shrink: 0; }

/* ── Quote body — clamped so very long reviews don't stretch every
   card in the row (equal-height flex track); the full text is still
   in the DOM for search engines/screen readers, and the whole card
   links to the original post. ── */
.ampl-reviews2__quote {
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ampl-gray-700);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Card foot: gold verified badge + quiet external-link hint ── */
.ampl-reviews2__cardFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 15px;
  border-top: 1px solid rgba(58, 34, 8, .08);
}
.ampl-reviews2__verified {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ampl-font-body);
  font-size: .82rem;
  font-weight: 700;
  color: #1B1B1B;
  white-space: nowrap;
}
.ampl-reviews2__verified svg { flex-shrink: 0; }
.ampl-reviews2__viewlink {
  display: inline-flex;
  color: var(--ampl-gray-400);
  transition: color 220ms var(--ampl-ease-io);
}
.ampl-reviews2__card:hover .ampl-reviews2__viewlink,
.ampl-reviews2__card:focus-visible .ampl-reviews2__viewlink {
  color: var(--ampl-bronze-dark);
}

/* Nav buttons — floating bronze-outlined circles either side */
.ampl-reviews2__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--ampl-bronze);
  background: #fff;
  color: var(--ampl-bronze-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 15, 5, .1);
  transition: background 220ms var(--ampl-ease-io), color 220ms var(--ampl-ease-io);
}
.ampl-reviews2__nav:hover { background: var(--ampl-bronze); color: #fff; }
.ampl-reviews2__nav--prev { left: -24px; }
.ampl-reviews2__nav--next { right: -24px; }
.ampl-reviews2__nav.is-disabled { opacity: .35; pointer-events: none; }

/* ── Mobile-only swipe hint — hidden entirely on desktop; JS fades it
   out and remembers that permanently once the user has actually
   dragged/scrolled the track. ── */
.ampl-reviews2__swipehint {
  display: none;
}
.ampl-reviews2__swipehint.is-hidden { opacity: 0; }

/* ── Pagination dots — all viewports; the active (gold) dot tracks
   whichever card is currently nearest the center. ── */
.ampl-reviews2__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 1.25rem;
}
.ampl-reviews2__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 220ms var(--ampl-ease-io), background 220ms var(--ampl-ease-io), width 220ms var(--ampl-ease-io);
}
.ampl-reviews2__dot.is-active {
  background: var(--ampl-bronze);
  width: 20px;
  border-radius: 3px;
}

/* ── Understated "view more" line ── */
.ampl-reviews2__more {
  text-align: center;
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  color: var(--ampl-gray-700);
  margin: 3rem 0 0;
}
.ampl-reviews2__more svg { display: inline-block; vertical-align: middle; margin-left: .2rem; color: var(--ampl-bronze-dark); }
.ampl-reviews2__more a {
  color: var(--ampl-bronze-dark);
  font-weight: 700;
  text-decoration: none;
}
.ampl-reviews2__more a:hover { text-decoration: underline; }

@media (max-width: 1280px) {
  .ampl-reviews2__nav--prev { left: 8px; }
  .ampl-reviews2__nav--next { right: 8px; }
}
@media (max-width: 1023px) {
  .ampl-reviews2__cardWrap { flex-basis: calc(50% - 12px); }
}
@media (max-width: 767px) {
  .ampl-reviews2 { padding-block: 64px; }
  .ampl-reviews2__track {
    gap: 16px;
    /* Mandatory on mobile — a real user swipe always ends past the
       threshold, so mandatory's crisper "always land exactly on a card"
       behavior is safe here and looks more premium than proximity's
       looser settle. (Desktop keeps proximity — see base rule — since
       that's driven by button/keyboard scrollBy rather than a finger
       gesture with real momentum.) */
    scroll-snap-type: x mandatory;
  }
  /* ~85vw card leaves a ~10-15% peek of the next card so it reads as
     obviously swipeable at a glance. Center (not start) so a swipe
     always settles with the active card in the middle, matching the
     center-emphasis scale/shadow effect below. */
  .ampl-reviews2__cardWrap { flex-basis: 85vw; scroll-snap-align: center; }

  /* Arrows move out of their desktop floating position (they'd overlap
     the single peeking card at this width) and sit in their own row
     below the track instead — track is forced to its own full-width
     line via flex-basis:100%, wrapping prev/next onto a shared row
     beneath it, centered together. */
  .ampl-reviews2__carousel-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
  .ampl-reviews2__track { order: 1; flex-basis: 100%; }
  .ampl-reviews2__nav {
    position: static;
    order: 2;
    width: 42px; height: 42px;
    margin-top: 18px;
  }
  .ampl-reviews2__nav--prev { order: 2; margin-right: 8px; }
  .ampl-reviews2__nav--next { order: 3; margin-left: 8px; }

  .ampl-reviews2__swipehint {
    display: flex;
    align-items: center;
    gap: .4rem;
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ampl-font-body);
    font-size: .78rem;
    font-weight: 600;
    color: var(--ampl-gray-700);
    white-space: nowrap;
    opacity: 1;
    transition: opacity 400ms var(--ampl-ease-io);
    pointer-events: none;
  }
  .ampl-reviews2__swipehint svg { color: var(--ampl-bronze-dark); flex-shrink: 0; animation: amplSwipeHintNudge 1.6s ease-in-out infinite; }
  .ampl-reviews2__swipehint.is-hidden { opacity: 0; }
}

@keyframes amplSwipeHintNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}



/* ================================================================
   "RELATED AREAS" PILL LIST — shared component used on 20+ inner
   pages (service/area/project templates' "related areas" widgets).
   NOT used by the homepage anymore (see .ampl-areas2__* below for
   that) — kept here untouched since removing it would break those
   other pages.
================================================================ */
.ampl-areas__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.ampl-area-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  background: var(--ampl-white);
  border: 1.5px solid var(--ampl-gray-200);
  border-radius: 9999px;
  font-family: var(--ampl-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ampl-gray-700);
  transition: all 200ms var(--ampl-ease);
}
.ampl-area-pill:hover {
  border-color: var(--ampl-green-800);
  color: var(--ampl-green-800);
  background: var(--ampl-green-50);
  transform: translateY(-2px);
  box-shadow: var(--ampl-sh-sm);
}
.ampl-areas__note {
  font-family: var(--ampl-font-body);
  font-size: 0.875rem;
  color: var(--ampl-gray-400);
  text-align: center;
  margin: 0;
}
.ampl-areas__note a { color: var(--ampl-green-800); font-weight: 600; }
.ampl-areas__note a:hover { text-decoration: underline; }


/* ================================================================
   SERVICE AREAS — premium two-column editorial redesign (new,
   independent component). Real Google Maps embed as a boxed premium
   card in the right column; simple text city links (no pills); an
   understated contact note and a small signature logo close out the
   section instead of a heavy info bar.
================================================================ */
.ampl-areas2 {
  position: relative;
  overflow: hidden;
  background: #F7F5F0;
  padding-top: var(--ampl-section);
  padding-bottom: 0; /* the closing photo band supplies its own bottom spacing */
}
/* Extremely faint topographic contour lines — a handful of independent
   irregular closed loops (not one obvious "mountain"), under 2% opacity,
   pure CSS/SVG. Fitting theme for a service-area section, stays almost
   imperceptible. */
.ampl-areas2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%232E5A1E' stroke-width='1.5'%3E%3Cpath d='M60,120 C160,80 260,90 320,150 C380,210 360,280 280,300 C200,320 100,290 70,220 C50,175 40,150 60,120Z'/%3E%3Cpath d='M20,140 C140,90 280,100 350,175 C410,240 390,320 290,345 C190,370 60,335 25,250 C5,200 -5,175 20,140Z'/%3E%3Cpath d='M950,520 C1040,480 1120,495 1160,550 C1195,600 1175,660 1105,680 C1035,700 950,670 925,610 C910,570 905,555 950,520Z'/%3E%3Cpath d='M920,545 C1030,495 1140,515 1185,580 C1220,635 1195,705 1110,730 C1025,755 910,715 880,640 C860,590 855,575 920,545Z'/%3E%3Cpath d='M600,30 C660,10 720,20 745,55 C765,85 750,120 705,130 C660,140 605,120 590,85 C582,65 578,50 600,30Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* Extremely faint paper grain, layered under the contour lines — a
   texture, not a graphic. */
.ampl-areas2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
.ampl-areas2 > .ampl-container { position: relative; z-index: 1; padding-bottom: 2.5rem; }

/* ── Top: intro (~45%, left) + map (~55%, right) ── */
.ampl-areas2__top {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 4.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
}
.ampl-areas2__intro { max-width: 480px; }
.ampl-areas2__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  line-height: 1.12;
  color: var(--ampl-charcoal);
  margin: 0 0 1.5rem;
}
.ampl-areas2__body {
  font-family: var(--ampl-font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ampl-gray-700);
  margin: 0 0 1.25rem;
}
.ampl-areas2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2rem;
}
.ampl-areas2__actions .ampl-btn svg { margin-left: .4rem; transition: transform 220ms var(--ampl-ease-io); }
.ampl-areas2__actions .ampl-btn:hover svg { transform: translateX(3px); }

/* Secondary CTA — a text link, not a button, so only one solid button
   competes for attention in the left column. */
.ampl-areas2__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ampl-font-body);
  font-weight: 600;
  font-size: .98rem;
  color: var(--ampl-bronze);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 220ms var(--ampl-ease-io);
}
.ampl-areas2__link svg { transition: transform 220ms var(--ampl-ease-io); }
.ampl-areas2__link:hover,
.ampl-areas2__link:focus-visible { border-color: var(--ampl-bronze); }
.ampl-areas2__link:hover svg,
.ampl-areas2__link:focus-visible svg { transform: translateX(3px); }
.ampl-areas2__link:focus-visible { outline: 2px solid var(--ampl-bronze); outline-offset: 4px; }

.ampl-areas2__mapwrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 80%;
  margin-inline: auto;
  border-radius: var(--ampl-radius-card);
  border: 1px solid var(--ampl-bronze);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
  transition: transform 320ms var(--ampl-ease-io), box-shadow 320ms var(--ampl-ease-io);
}
.ampl-areas2__mapwrap:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .16);
}
.ampl-areas2__map {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

/* ── City columns ── */
.ampl-areas2__cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 3rem;
}
.ampl-areas2__col-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--ampl-bronze);
  padding: 0 0 .85rem;
  margin-bottom: 1.25rem;
  cursor: default;
  font-family: inherit;
}
.ampl-areas2__col-title {
  font-family: var(--ampl-font-headline);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ampl-charcoal);
}
.ampl-areas2__col-chevron { display: none; color: var(--ampl-bronze); flex-shrink: 0; }

.ampl-areas2__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ampl-areas2__col-list li + li { margin-top: .1rem; }
.ampl-areas2__col-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem 0;
  font-family: var(--ampl-font-body);
  font-size: .98rem;
  color: var(--ampl-gray-700);
  text-decoration: none;
}
.ampl-areas2__city-name {
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ampl-ease-io), color 200ms var(--ampl-ease-io);
}
.ampl-areas2__city-arrow {
  color: var(--ampl-bronze);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms var(--ampl-ease-io), transform 200ms var(--ampl-ease-io);
}
.ampl-areas2__col-list a:hover .ampl-areas2__city-name,
.ampl-areas2__col-list a:focus-visible .ampl-areas2__city-name {
  color: var(--ampl-charcoal);
  border-color: var(--ampl-bronze);
}
.ampl-areas2__col-list a:hover .ampl-areas2__city-arrow,
.ampl-areas2__col-list a:focus-visible .ampl-areas2__city-arrow { opacity: 1; transform: translateX(0); }

/* ── Understated contact note, centered, with a small pin mark ── */
.ampl-areas2__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  color: var(--ampl-gray-500);
  margin: 2.5rem 0 0;
}
.ampl-areas2__note-pin { color: var(--ampl-bronze); flex-shrink: 0; }
.ampl-areas2__note a {
  color: var(--ampl-bronze);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 134, 11, .4);
  transition: border-color 200ms var(--ampl-ease-io), color 200ms var(--ampl-ease-io);
}
.ampl-areas2__note a:hover,
.ampl-areas2__note a:focus-visible { color: var(--ampl-charcoal); border-color: var(--ampl-bronze); }

/* ── Closing band — real client photo, dark overlay, logo lockup on a
   light plaque (the brand mark's brown/gold palette doesn't read on a
   dark photo, so it sits on a small cream card rather than directly on
   the image) + "Proudly Serving Northern Utah" line. ── */
.ampl-areas2__band {
  position: relative;
  overflow: hidden;
  min-height: 190px;
}
.ampl-areas2__band-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
}
.ampl-areas2__band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12, 20, 12, .90) 0%, rgba(18, 30, 16, .78) 45%, rgba(20, 34, 18, .58) 100%);
}
.ampl-areas2__band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-block: 2.75rem;
}
.ampl-areas2__band-logo-badge {
  display: inline-flex;
  flex-shrink: 0;
  /* Entrance: pops in on a slight delay after the band itself fades up,
     then stays interactive with a gentle lift on hover/focus. */
  opacity: 0;
  transform: scale(.8) translateY(8px);
  transition: opacity 650ms var(--ampl-ease-io), transform 650ms var(--ampl-ease-io);
  transition-delay: .18s;
}
.ampl-areas2__band.is-visible .ampl-areas2__band-logo-badge {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.ampl-areas2__band-logo-badge:hover,
.ampl-areas2__band-logo-badge:focus-within {
  transform: scale(1.06) translateY(-2px);
}
.ampl-areas2__band-logo {
  width: clamp(90px, 7.5vw, 125px);
  height: auto;
  display: block;
  /* No plaque behind it — the PNG is genuinely transparent, so it sits
     right on the photo. A soft dark drop-shadow (not a box) keeps the
     gold/brown mark legible against both the light and dark parts of
     the image. */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .55)) drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}
.ampl-areas2__band-divider {
  display: none;
  width: 34px;
  height: 1px;
  background: rgba(184, 134, 11, .55);
}
.ampl-areas2__band-text {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: right;
}
.ampl-areas2__band-title {
  font-family: var(--ampl-font-headline);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ampl-white);
}
.ampl-areas2__band-sub {
  font-family: var(--ampl-font-body);
  font-size: .88rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
}

@media (max-width: 1024px) {
  .ampl-areas2__top { grid-template-columns: 1fr; gap: 3rem; }
  .ampl-areas2__intro { max-width: 100%; }
  .ampl-areas2__mapwrap { max-width: 100%; }
  .ampl-areas2__map { height: 440px; }
  .ampl-areas2__cities { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
}
@media (max-width: 767px) {
  .ampl-areas2 > .ampl-container { padding-bottom: 3rem; }
  .ampl-areas2__map { height: 380px; }
  .ampl-areas2__cities { grid-template-columns: 1fr; gap: 0; padding-bottom: 3rem; }
  .ampl-areas2__col { border-bottom: 1px solid rgba(0, 0, 0, .08); }
  .ampl-areas2__col:last-child { border-bottom: none; }

  /* The desktop overlay is a directional gradient tuned for a left
     plaque / right text layout — once everything centers and stacks,
     give it a richer, more even vignette instead so the text keeps
     good contrast wherever it lands over the photo. */
  .ampl-areas2__band-overlay {
    background: linear-gradient(180deg, rgba(10, 18, 10, .58) 0%, rgba(14, 24, 13, .8) 55%, rgba(10, 18, 10, .92) 100%);
  }
  .ampl-areas2__band-inner { flex-direction: column; justify-content: center; text-align: center; padding-block: 2.75rem; gap: 1.1rem; }
  .ampl-areas2__band-divider { display: block; }
  .ampl-areas2__band-text { text-align: center; align-items: center; }
  .ampl-areas2__band-title { font-size: 1.2rem; letter-spacing: .09em; }
  .ampl-areas2__band-sub { font-size: .9rem; }

  /* Mobile-only: columns become accordions */
  .ampl-areas2__col-toggle {
    cursor: pointer;
    padding-block: 1.1rem;
    margin-bottom: 0;
    border-bottom: none;
  }
  .ampl-areas2__col-chevron {
    display: block;
    transition: transform 250ms var(--ampl-ease-io);
  }
  .ampl-areas2__col.is-open .ampl-areas2__col-chevron { transform: rotate(180deg); }
  .ampl-areas2__col-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms var(--ampl-ease-io);
  }
  .ampl-areas2__col.is-open .ampl-areas2__col-list { max-height: 600px; }
  .ampl-areas2__col:not(.is-open) { padding-bottom: 0; }

}


/* ================================================================
   FAQ
================================================================ */
.ampl-faq__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 5rem;
  align-items: start;
}

.ampl-faq__list { max-width: 100%; }

.ampl-faq__item { border-bottom: 1px solid var(--ampl-gray-200); }
.ampl-faq__item:first-child { border-top: 1px solid var(--ampl-gray-200); }

.ampl-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.25rem;
  text-align: left;
  font-family: var(--ampl-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ampl-charcoal);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 150ms;
}
.ampl-faq__q:hover { color: var(--ampl-green-800); }

.ampl-faq__icon {
  width: 28px; height: 28px;
  background: var(--ampl-gray-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 200ms, transform 300ms var(--ampl-ease);
}
.ampl-faq__icon svg { width: 13px; height: 13px; stroke: var(--ampl-gray-500); transition: stroke 200ms; }

.ampl-faq__item.is-open .ampl-faq__icon {
  background: var(--ampl-green-100);
  transform: rotate(45deg);
}
.ampl-faq__item.is-open .ampl-faq__icon svg { stroke: var(--ampl-green-800); }

.ampl-faq__a {
  display: none;
  padding-bottom: 1.25rem;
  font-family: var(--ampl-font-body);
  font-size: 0.9rem;
  color: var(--ampl-gray-500);
  line-height: 1.75;
  margin: 0;
}
.ampl-faq__item.is-open .ampl-faq__a { display: block; }


/* ================================================================
   HAVE QUESTIONS — premium card-based FAQ (v2 redesign). Editorial
   30/70 split with evenly-spaced category tabs on desktop; below
   768px the tabs are replaced outright by a native <select> so
   nothing can ever overflow, wrap awkwardly, or get cut off on any
   phone. Every answer ships in the raw HTML (max-height/opacity
   toggling, never display:none + JS-injected content, never
   lazy-loaded) so it stays fully crawlable. Brand palette: white
   canvas, dark-brown text, gold accents, forest-green hover/focus.
================================================================ */
.ampl-faq2 {
  position: relative;
  overflow: hidden;
  background: var(--ampl-white);
  padding-top: 4.5rem;
  padding-bottom: var(--ampl-section);
}
.ampl-faq2 > .ampl-container { position: relative; z-index: 1; }

.ampl-faq2__grid {
  max-width: 1160px;
  display: grid;
  grid-template-columns: minmax(240px, 30%) 1fr;
  gap: 4rem;
  align-items: start;
}

/* ── Left: editorial intro ── */
.ampl-faq2__intro { max-width: 340px; padding-top: .5rem; }
.ampl-faq2__h2 {
  position: relative;
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  line-height: 1.12;
  color: var(--ampl-brown-dark);
  margin: 0 0 1.5rem;
  padding-bottom: 1.1rem;
}
.ampl-faq2__h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--ampl-bronze);
}
.ampl-faq2__desc {
  font-family: var(--ampl-font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ampl-gray-700);
  margin: 0 0 2rem;
}
.ampl-faq2__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ampl-font-body);
  font-weight: 600;
  font-size: .98rem;
  color: var(--ampl-bronze);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 220ms var(--ampl-ease-io), color 220ms var(--ampl-ease-io);
}
.ampl-faq2__link svg { transition: transform 220ms var(--ampl-ease-io); }
.ampl-faq2__link:hover,
.ampl-faq2__link:focus-visible { border-color: var(--ampl-bronze); color: var(--ampl-green-800); }
.ampl-faq2__link:hover svg,
.ampl-faq2__link:focus-visible svg { transform: translateX(3px); }
.ampl-faq2__link:focus-visible { outline: 2px solid var(--ampl-bronze); outline-offset: 4px; }

/* ── Right: tabs (desktop/tablet) + mobile select + accordion ── */
.ampl-faq2__tabs {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: .5rem;
  border-bottom: 1px solid rgba(74, 44, 10, .12);
  margin-bottom: .5rem;
}
.ampl-faq2__tab {
  background: none;
  border: none;
  padding: .6rem .25rem 1.1rem;
  min-height: 44px;
  font-family: var(--ampl-font-body);
  font-weight: 600;
  font-size: .94rem;
  letter-spacing: .01em;
  color: var(--ampl-gray-500);
  cursor: pointer;
  transition: color 220ms var(--ampl-ease-io);
}
.ampl-faq2__tab:hover { color: var(--ampl-green-800); }
.ampl-faq2__tab.is-active { color: var(--ampl-brown-dark); }
.ampl-faq2__tab:focus-visible { outline: 2px solid var(--ampl-bronze); outline-offset: 3px; }
.ampl-faq2__tab-indicator {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--ampl-bronze);
  transition: transform 340ms var(--ampl-ease-io), width 340ms var(--ampl-ease-io);
}

/* Mobile category switcher — hidden until <768px, where it fully
   replaces the tabs row (not just visually restyled). */
.ampl-faq2__selectWrap { display: none; }
.ampl-faq2__selectLabel {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ampl-faq2__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 50px;
  padding: .9rem 2.75rem .9rem 1.25rem;
  border: 1.5px solid rgba(74, 44, 10, .18);
  border-radius: var(--ampl-btn-radius);
  background: var(--ampl-white);
  font-family: var(--ampl-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ampl-brown-dark);
  cursor: pointer;
  transition: border-color 200ms var(--ampl-ease-io), box-shadow 200ms var(--ampl-ease-io);
}
.ampl-faq2__select:hover { border-color: var(--ampl-bronze); }
.ampl-faq2__select:focus-visible {
  outline: none;
  border-color: var(--ampl-green-800);
  box-shadow: 0 0 0 3px rgba(46, 90, 30, .15);
}
.ampl-faq2__selectIcon {
  position: absolute;
  top: 50%; right: 1.1rem;
  transform: translateY(-50%);
  color: var(--ampl-bronze);
  pointer-events: none;
}

.ampl-faq2__category { padding-top: 1.75rem; }
.ampl-faq2__category.is-active { animation: amplFaq2Fade 380ms var(--ampl-ease-io); }
@keyframes amplFaq2Fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Accordion — individual premium cards ── */
.ampl-faq2__item {
  background: var(--ampl-white);
  border: 1px solid rgba(74, 44, 10, .1);
  border-radius: var(--ampl-radius-card);
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(74, 44, 10, .04);
  transition: border-color 260ms var(--ampl-ease-io), box-shadow 260ms var(--ampl-ease-io), transform 260ms var(--ampl-ease-io);
  overflow: hidden;
}
.ampl-faq2__item:last-child { margin-bottom: 0; }
.ampl-faq2__item:hover {
  border-color: rgba(46, 90, 30, .3);
  box-shadow: 0 10px 26px rgba(46, 90, 30, .09);
  transform: translateY(-1px);
}
.ampl-faq2__item.is-open {
  border-color: rgba(184, 134, 11, .45);
  box-shadow: 0 12px 30px rgba(184, 134, 11, .12);
}
.ampl-faq2__qheading { margin: 0; }
.ampl-faq2__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 1.6rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.ampl-faq2__q:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ampl-bronze); }
.ampl-faq2__qtext {
  font-family: var(--ampl-font-body);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--ampl-brown-dark);
  transition: color 200ms var(--ampl-ease-io);
}
.ampl-faq2__q:hover .ampl-faq2__qtext { color: var(--ampl-green-800); }
.ampl-faq2__qicon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(184, 134, 11, .1);
  color: var(--ampl-bronze);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 260ms var(--ampl-ease-io);
}
.ampl-faq2__item.is-open .ampl-faq2__qicon { background: var(--ampl-bronze); color: var(--ampl-white); }
.ampl-faq2__qicon-v {
  transform-origin: center;
  transition: transform 320ms var(--ampl-ease-io);
}
.ampl-faq2__item.is-open .ampl-faq2__qicon-v { transform: scaleY(0); }

.ampl-faq2__a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 380ms var(--ampl-ease-io), opacity 300ms var(--ampl-ease-io), transform 300ms var(--ampl-ease-io);
}
.ampl-faq2__item.is-open .ampl-faq2__a {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
}
.ampl-faq2__a p {
  margin: 0;
  padding: 0 1.6rem 1.5rem;
  font-family: var(--ampl-font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ampl-gray-700);
}

.ampl-faq2__footer {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 3.5rem auto 0;
  font-family: var(--ampl-font-body);
  font-size: 1rem;
  color: var(--ampl-gray-500);
}
.ampl-faq2__footer a {
  color: var(--ampl-bronze);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1024px) {
  .ampl-faq2__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .ampl-faq2__intro { max-width: 100%; }
}
@media (max-width: 767px) {
  .ampl-faq2 { padding-top: 3.5rem; }

  /* Tabs are fully replaced by the select below — not just hidden
     behind a scroll trick — so there is no overflow class of bug
     left to reintroduce on any phone width. */
  .ampl-faq2__tabs { display: none; }
  .ampl-faq2__selectWrap { display: block; position: relative; margin-bottom: 1.5rem; }

  .ampl-faq2__category { padding-top: 0; }
  .ampl-faq2__q { padding: 1.15rem 1.25rem; }
  .ampl-faq2__qtext { font-size: 1.02rem; }
  .ampl-faq2__a p { padding-inline: 1.25rem; }
}


/* ================================================================
   CTA BANNER — shared simple closing CTA used on ~30 inner pages
   (about, every service/area/project page, contact, gallery, hubs).
   Do not repurpose these class names for page-specific redesigns —
   see .ampl-cta2 below for the homepage's photo variant.
================================================================ */
.ampl-cta {
  background: var(--ampl-green-800);
  padding-block: 5rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.ampl-cta__body { position: relative; z-index: 1; }
.ampl-cta__h2 {
  font-family: var(--ampl-font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ampl-white);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 1rem;
}
.ampl-cta__sub {
  font-family: var(--ampl-font-body);
  font-size: 1.05rem;
  color: rgba(255,255,255,.8);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.75;
}
.ampl-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ================================================================
   CTA2 BANNER — editorial closing section (homepage only). Warm
   off-white band with a faint paper-grain texture; a real finished-
   landscape photo occupies ~28% of the content width and fades
   softly into the background. No box, no border, no shadow — the
   restraint IS the design. Content stays inside the site's standard
   max-width container like every other section.
================================================================ */
.ampl-cta2 {
  position: relative;
  background-color: var(--ampl-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* Photo is a sibling of the contained .ampl-cta2__inner, not a grid
   column inside it — that lets it bleed to the true left edge of the
   viewport while the text stays inside the normal reading container.
   It's absolutely positioned against the section, so it automatically
   fills the section's full height (driven by the text content) with
   no explicit height math needed. */
.ampl-cta2__photo {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(280px, 24vw, 380px);
  overflow: hidden;
}
.ampl-cta2__inner {
  position: relative;
}
.ampl-cta2__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ampl-ease-io, ease);
}
.ampl-cta2:hover .ampl-cta2__photo img {
  transform: scale(1.045);
}
.ampl-cta2__photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 72%, var(--ampl-cream) 100%);
  pointer-events: none;
}
.ampl-cta2__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 3.5rem;
  padding-inline-start: calc(clamp(280px, 24vw, 380px) + clamp(2rem, 4vw, 3.5rem));
  padding-inline-end: 1.5rem;
}
.ampl-cta2__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  color: var(--ampl-green-800);
  line-height: 1.15;
  text-align: left;
  max-width: 30rem;
  margin: 0 0 1.1rem;
}
.ampl-cta2__sub {
  font-family: var(--ampl-font-body);
  font-size: 1.0625rem;
  color: var(--ampl-gray-700);
  max-width: 34.5rem;
  margin: 0 0 2rem;
  line-height: 1.65;
  text-align: left;
}
.ampl-cta2__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.ampl-cta2__btn {
  padding: 0.9rem 1.75rem;
  font-size: 0.9375rem;
}
.ampl-cta2__divider {
  width: 1px;
  height: 2rem;
  background: var(--ampl-gray-200);
  flex-shrink: 0;
}
.ampl-cta2 .ampl-cta2__contact {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ampl-gray-500);
}
.ampl-cta2__contact svg { flex-shrink: 0; color: var(--ampl-bronze); }
.ampl-cta2__contact-text {
  display: flex;
  flex-direction: column;
  font-family: var(--ampl-font-body);
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ampl-cta2__contact:hover .ampl-cta2__contact-text { text-decoration: underline; }
.ampl-cta2__contact-text strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ampl-green-800);
}

@media (max-width: 1023px) {
  .ampl-cta2__photo {
    position: static;
    width: 100%;
    height: 14rem;
  }
  .ampl-cta2__photo-fade {
    background: linear-gradient(to bottom, transparent 72%, var(--ampl-cream) 100%);
  }
  .ampl-cta2__body {
    max-width: none;
    padding-inline: 1.5rem;
    padding-block: 2rem 2.5rem;
  }
  .ampl-cta2__sub { max-width: 34.5rem; }
}

@media (max-width: 640px) {
  .ampl-cta2 { padding-block: 2.5rem; }
  .ampl-cta2__actions { flex-direction: column; align-items: stretch; gap: 1rem; }
  .ampl-cta2__divider { display: none; }
  .ampl-cta2__btn { justify-content: center; }
  .ampl-cta2 .ampl-cta2__contact { justify-content: flex-start; }
}


/* ================================================================
   CTA PHOTO BANNER — full-bleed dark-green closing CTA with a real
   photo bleeding in from the right edge and left-aligned editorial
   copy (eyebrow + serif heading + subline + two pill buttons).
   Page-specific (About page); own class namespace so it never
   touches the shared .ampl-cta used on ~30 inner pages.
================================================================ */
.ampl-ctaphoto {
  position: relative;
  overflow: hidden;
  background: var(--ampl-green-900);
}
/* Photo bleeds to the true right edge of the section, ~48% wide, and
   fades into the green on its left side via the gradient span below so
   the two blend with no hard seam. */
.ampl-ctaphoto__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  overflow: hidden;
}
.ampl-ctaphoto__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 900ms var(--ampl-ease-io, ease);
}
.ampl-ctaphoto:hover .ampl-ctaphoto__photo img { transform: scale(1.045); }
/* Green→transparent wash: fully covers the photo's left third so text
   never fights it, then clears to let the photo read on the right. A
   faint top/bottom darkening keeps the crew photo from going too bright. */
.ampl-ctaphoto__fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--ampl-green-900) 8%, rgba(31,61,20,.55) 42%, rgba(31,61,20,.15) 70%, transparent 100%),
    linear-gradient(to bottom, rgba(6,15,9,.25), transparent 30%, transparent 70%, rgba(6,15,9,.25));
  pointer-events: none;
}
.ampl-ctaphoto__inner { position: relative; z-index: 1; }
.ampl-ctaphoto__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: clamp(4rem, 8vw, 7rem);
  padding-inline-end: 1.5rem;
  max-width: 40rem;
}
.ampl-ctaphoto__eyebrow {
  font-family: var(--ampl-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,245,239,.65);
  margin-bottom: 1.25rem;
}
.ampl-ctaphoto__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.1;
  color: var(--ampl-cream);
  margin: 0 0 1.25rem;
}
.ampl-ctaphoto__sub {
  font-family: var(--ampl-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(247,245,239,.82);
  margin: 0 0 2.25rem;
  max-width: 30rem;
}
.ampl-ctaphoto__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.ampl-ctaphoto__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border-radius: 999px;
  font-family: var(--ampl-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 200ms var(--ampl-ease-io), box-shadow 200ms var(--ampl-ease-io), background 200ms var(--ampl-ease-io), color 200ms var(--ampl-ease-io);
}
.ampl-ctaphoto__btn--solid {
  background: var(--ampl-cream);
  color: var(--ampl-green-900);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.ampl-ctaphoto__btn--solid:hover,
.ampl-ctaphoto__btn--solid:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.26);
}
.ampl-ctaphoto__btn--ghost {
  background: transparent;
  color: var(--ampl-cream);
  border: 1.5px solid rgba(247,245,239,.55);
}
.ampl-ctaphoto__btn--ghost:hover,
.ampl-ctaphoto__btn--ghost:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ampl-cream);
  background: rgba(247,245,239,.08);
}

@media (max-width: 1023px) {
  .ampl-ctaphoto__photo { width: 42%; }
  .ampl-ctaphoto__fade {
    background:
      linear-gradient(to right, var(--ampl-green-900) 12%, rgba(31,61,20,.5) 50%, transparent 100%),
      linear-gradient(to bottom, rgba(6,15,9,.25), transparent 30%, transparent 70%, rgba(6,15,9,.25));
  }
}
@media (max-width: 767px) {
  /* Photo becomes a top band; copy sits on solid green beneath it. */
  .ampl-ctaphoto__photo {
    position: static;
    width: 100%;
    height: 12rem;
  }
  .ampl-ctaphoto__fade {
    background: linear-gradient(to bottom, rgba(6,15,9,.2), transparent 40%, transparent 70%, var(--ampl-green-900) 100%);
  }
  .ampl-ctaphoto__inner { margin-top: -1px; }
  .ampl-ctaphoto__body { padding-block: 2.5rem 3rem; max-width: none; }
  .ampl-ctaphoto__actions { width: 100%; }
  .ampl-ctaphoto__btn { flex: 1 1 auto; }
}


/* ================================================================
   FOOTER
================================================================ */
@media (max-width: 720px) {
  .ampl-next__steps { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1rem; }
  /* Connectors only read correctly across a single unbroken row. */
  .ampl-next__step::after { display: none; }
}
@media (max-width: 420px) {
  .ampl-next__steps { grid-template-columns: 1fr; }
}


/* ================================================================
   BEFORE & AFTER SPLIT BAND (.ampl-bacta) — full-bleed section:
   dark copy panel on the left, draggable comparison slider filling
   the right. Reuses the .ampl-projects__ba* inner parts (so the
   existing before/after JS drives it unchanged) and only overrides
   what this context needs: the wrapper's own size, and moving the
   Before/After tags to the bottom of the frame.
================================================================ */
.ampl-bacta {
  display: grid;
  grid-template-columns: minmax(340px, 38%) 1fr;
  align-items: stretch;
  background: linear-gradient(180deg, #232323 0%, #1A1A1A 100%);
  overflow: hidden;
}
.ampl-bacta__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
.ampl-bacta__eyebrow {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
  margin-bottom: 1.1rem;
}
.ampl-bacta__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 2.9rem);
  line-height: 1.15;
  color: var(--ampl-cream);
  margin: 0 0 1rem;
}
.ampl-bacta__sub {
  font-family: var(--ampl-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
  max-width: 34ch;
  margin: 0 0 2rem;
}
.ampl-bacta__btn { gap: .55rem; }

/* Slider wrapper — positioned + sized so the shared .baStage
   (position:absolute; inset:0) has a box to fill. */
.ampl-bacta__slider {
  position: relative;
  min-height: clamp(320px, 42vw, 560px);
  overflow: hidden;
}
/* Reference places the labels along the bottom edge, not the top. */
.ampl-bacta .ampl-projects__baTag { top: auto; bottom: 18px; }

@media (max-width: 900px) {
  .ampl-bacta { grid-template-columns: 1fr; }
  .ampl-bacta__panel {
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem 2.5rem;
  }
  .ampl-bacta__sub { max-width: 46ch; }
  .ampl-bacta__slider { min-height: 0; aspect-ratio: 4 / 3; }
}


/* ================================================================
   FOOTER — plain 4-column business footer. Deliberately undecorated:
   flat dark field, real headings, plain text links, no cards, icons,
   gradients or shadows. Contact block is a real <address>, and the
   service-area line below the columns carries the local-SEO terms.
================================================================ */
.ampl-ftr,
.ampl-ftr *,
.ampl-ftr *::before,
.ampl-ftr *::after { box-sizing: border-box; }

.ampl-ftr {
  background: #1E1E1E;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #B0B0B0;
  font-family: var(--ampl-font-body);
}
.ampl-ftr a { text-decoration: none; color: inherit; }
.ampl-ftr__inner {
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding: 44px 1.5rem 0;
}
.ampl-ftr__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.35fr 1.25fr;
  gap: 2.5rem;
  align-items: start;
}

/* ── Column headings ── */
.ampl-ftr__title {
  margin: 0 0 .9rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #FFFFFF;
}

/* ── Column 1: brand ── */
.ampl-ftr__logo { display: inline-block; }
.ampl-ftr__logo-img {
  width: 120px;
  height: auto;
  display: block;
  margin-bottom: .95rem;
}
.ampl-ftr__about {
  margin: 0;
  max-width: 36ch;
  font-size: .9rem;
  line-height: 1.75;
}

/* ── Columns 2 & 3: link lists ── */
.ampl-ftr__list { list-style: none; margin: 0; padding: 0; }
.ampl-ftr__list li { margin-bottom: .45rem; }
.ampl-ftr__list li:last-child { margin-bottom: 0; }
.ampl-ftr__link {
  font-size: .9rem;
  line-height: 1.6;
  color: #B0B0B0;
  transition: color 150ms ease;
}
.ampl-ftr__link:hover,
.ampl-ftr__link:focus-visible { color: #FFFFFF; }

/* ── Column 4: contact ── */
.ampl-ftr__contact {
  font-style: normal;
  font-size: .9rem;
  line-height: 1.85;
}
.ampl-ftr__contact a { transition: color 150ms ease; }
.ampl-ftr__contact a:hover,
.ampl-ftr__contact a:focus-visible { color: #FFFFFF; }
.ampl-ftr__contact-label { color: #8F8F8F; }

/* ── Service-area line + copyright ── */
.ampl-ftr__areas {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .85rem;
  line-height: 1.7;
  color: #9A9A9A;
}
.ampl-ftr__bottom {
  padding: .9rem 0 1.35rem;
  font-size: .78rem;
  color: #8A8A8A;
}

@media (max-width: 900px) {
  .ampl-ftr__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
  .ampl-ftr__about { max-width: 46ch; }
}
@media (max-width: 560px) {
  .ampl-ftr__inner { padding: 34px 1.25rem 0; }
  .ampl-ftr__grid { grid-template-columns: 1fr; gap: 1.85rem; }
  .ampl-ftr__about { max-width: 100%; }
}


/* ================================================================
   SCROLL ANIMATIONS
================================================================ */
.ampl-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ampl-ease), transform 600ms var(--ampl-ease);
}
.ampl-fade-up.is-visible { opacity: 1; transform: translateY(0); }

.ampl-fade-in {
  opacity: 0;
  transition: opacity 600ms var(--ampl-ease);
}
.ampl-fade-in.is-visible { opacity: 1; }

[data-delay="100"] { transition-delay: .10s; }
[data-delay="150"] { transition-delay: .15s; }
[data-delay="200"] { transition-delay: .20s; }
[data-delay="300"] { transition-delay: .30s; }
[data-delay="400"] { transition-delay: .40s; }


/* ================================================================
   RESPONSIVE — 1024px
================================================================ */
@media (max-width: 1024px) {
  :root { --ampl-section: 5rem; }

  .ampl-split { grid-template-columns: 1fr; min-height: auto; }
  .ampl-split--alt .ampl-split__image { order: 0; }
  .ampl-split__image { min-height: 420px; }
  .ampl-split__content { padding: 3rem 2rem; }

  .ampl-why__grid { grid-template-columns: 1fr; gap: 3rem; }
  .ampl-why__img-wrap { aspect-ratio: 3/2; max-height: 400px; }

  .ampl-faq__inner { grid-template-columns: 1fr; gap: 2rem; }
  .ampl-process__steps { grid-template-columns: repeat(3, 1fr); }
  .ampl-process__steps::before { display: none; }
}

/* ================================================================
   RESPONSIVE — 767px
================================================================ */
@media (max-width: 767px) {
  :root {
    --ampl-section: 4rem;
  }

  .ampl-hero__content { max-width: 100%; margin-inline: auto; text-align: center; }
  .ampl-hero__eyebrow { justify-content: center; }
  .ampl-hero__h1 { max-width: 100%; }
  .ampl-hero__sub { max-width: 100%; margin-inline: auto; }
  .ampl-hero__actions { justify-content: center; }
  .ampl-hero__trust { display: none; }

  /* The hero video is a wide landscape shot (16:9). Forcing it to cover a
     FULL-HEIGHT (100dvh) portrait viewport scales it up ~3.8x and shows
     only ~26% of its width — reads as "zoomed in". Text stays overlaid on
     the video (unchanged), but shortening the box eases how hard the video
     has to be scaled/cropped to fill it. */
  .ampl-hero { min-height: 82dvh; }

  .ampl-svc-grid { grid-template-columns: 1fr; }
  .ampl-split__content { padding: 2.5rem 1.5rem; }

  .ampl-why__h2, .ampl-why__body { text-align: center; margin-inline: auto; }
  .ampl-why__actions { justify-content: center; }

  .ampl-process__steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* ================================================================
   RESPONSIVE — 480px
================================================================ */
@media (max-width: 480px) {
  .ampl-hero__actions { flex-direction: column; }
  .ampl-hero__actions .ampl-btn { width: 100%; justify-content: center; }
  .ampl-cta__actions { flex-direction: column; align-items: center; }
  .ampl-process__steps { grid-template-columns: 1fr; }
  .ampl-intro__links { flex-direction: column; align-items: center; }
  .ampl-svc-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   INNER PAGE HERO (service / area / project pages — static image,
   not the homepage's video hero)
================================================================ */
/* Pages that open with a plain section instead of a hero (e.g. the
   privacy policy) still have to clear the fixed nav. `section:first-of-type`
   matches by element type, so on hero pages the first <section> is
   .ampl-page-hero and this rule correctly does not apply. */
body > .ampl-section:first-of-type {
  padding-top: calc(var(--nav-topbar-h, 38px) + var(--nav-header-h, 100px) + 2rem);
}

.ampl-page-hero {
  position: relative;
  /* border-box so the fixed-nav offset below is absorbed into
     min-height instead of stacking on top of it. */
  box-sizing: border-box;
  min-height: 56vh;
  /* Clears the fixed topbar + header. Without this the hero starts at
     y=0 and its bottom-aligned content rides up underneath the nav on
     any viewport shorter than ~930px (i.e. most laptops). Mirrors the
     homepage convention already used for .ampl-hero__body. */
  padding-top: calc(var(--nav-topbar-h, 38px) + var(--nav-header-h, 100px) + 1.25rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ampl-page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ampl-page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.6) saturate(1.05);
}
/* Scrim over the background so whatever the photo contains (including
   the placeholder's own arc + label artwork) can't compete with the
   heading. Sits above the image, still below the copy. */
.ampl-page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.62) 100%);
}
.ampl-page-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding: 2rem 1.5rem 3.5rem;
  color: var(--ampl-white);
}
.ampl-page-hero__h1 {
  font-family: var(--ampl-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
  /* was 20ch — too narrow, forcing long service titles onto 3-4 lines
     and driving the whole block up into the nav. */
  max-width: 800px;
}
.ampl-page-hero__sub {
  font-family: var(--ampl-font-body);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255,255,255,.88);
  max-width: 600px;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
@media (max-width: 640px) {
  /* No padding-top override here on purpose: the header stays 100px tall
     at every width (only --nav-topbar-h shrinks to 34px), so the base
     calc already resolves correctly on mobile. An earlier 78px-based
     override — copied from the homepage rule — put the floor 10px above
     the real nav bottom and could still collide. */
  .ampl-page-hero { min-height: 46vh; }
  .ampl-page-hero__body { padding-bottom: 2.5rem; }
}

/* ── "What's Included" checklist (service pages) ── */
.ampl-included__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin-top: 2rem;
}
.ampl-included__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-family: var(--ampl-font-body);
  font-size: 0.95rem;
  color: var(--ampl-gray-700);
  line-height: 1.5;
}
.ampl-included__item svg { flex-shrink: 0; margin-top: 3px; stroke: var(--ampl-green-800); width: 18px; height: 18px; }
@media (max-width: 640px) {
  .ampl-included__grid { grid-template-columns: 1fr; }
}

/* ── Related services (service pages) — reuses the .ampl-area-pill look ── */
.ampl-related__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.ampl-related__grid--center { justify-content: center; }

/* Narrow reading-width container variant — area pages' intro copy block */
.ampl-container--narrow { max-width: 760px; }

/* Small sub-heading label above a pill list (e.g. "Services Available in
   [City]" on area pages) — was a repeated inline style on every area page */
.ampl-h3-label {
  font-family: var(--ampl-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2rem 0 1rem;
}

/* ================================================================
   CONTACT PAGE
================================================================ */
.ampl-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;
}
.ampl-contact__info-item { margin-bottom: 2rem; }
.ampl-contact__info-item:last-child { margin-bottom: 0; }
.ampl-contact__info-label {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ampl-green-800);
  margin-bottom: .5rem;
}
.ampl-contact__info-value {
  font-family: var(--ampl-font-body);
  font-size: 1.05rem;
  color: var(--ampl-charcoal);
  line-height: 1.7;
}
.ampl-contact__info-value a { color: var(--ampl-charcoal); transition: color 150ms; }
.ampl-contact__info-value a:hover { color: var(--ampl-green-800); }
.ampl-contact__card {
  background: var(--ampl-white);
  border-radius: var(--ampl-radius-card);
  box-shadow: var(--ampl-sh-lg);
  padding: 2.5rem;
}
.ampl-contact__card-title {
  font-family: var(--ampl-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ampl-charcoal);
  margin: 0 0 1.5rem;
}
.ampl-contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
/* Honeypot — positioned off-screen rather than display:none, which some
   spam bots specifically check for and skip filling in as a result. */
.ampl-contact__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .ampl-contact__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ampl-contact__card { padding: 2rem 1.5rem; }
}

/* ================================================================
   REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
  .ampl-fade-up, .ampl-fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ampl-hero__bg img { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ================================================================
   SERVICE PAGE COMPONENTS — trust bar, work grid, before/after
   pair, why-us grid, review quotes. Plain and understated on
   purpose: real content, minimal ornament.
================================================================ */
/* These components aren't covered by the theme's global box-sizing
   reset (which enumerates specific class names), so a padded
   .ampl-container inside one computes as content-box and overflows
   the viewport by its horizontal padding. */
.ampl-trustbar, .ampl-trustbar *,
.ampl-workgrid, .ampl-workgrid *,
.ampl-ba2, .ampl-ba2 *,
.ampl-whygrid, .ampl-whygrid *,
.ampl-revgrid, .ampl-revgrid * { box-sizing: border-box; }

.ampl-svc-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── Trust bar ── */
.ampl-trustbar {
  background: var(--ampl-green-900);
  color: rgba(255, 255, 255, .92);
  padding-block: .95rem;
}
.ampl-trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem 2.25rem;
  font-family: var(--ampl-font-body);
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
}
.ampl-trustbar__item { position: relative; }
.ampl-trustbar__item + .ampl-trustbar__item::before {
  content: '';
  position: absolute;
  left: -1.125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, .28);
}

/* ── Project photo grid ── */
.ampl-workgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ampl-workgrid__item { margin: 0; }
.ampl-workgrid__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ampl-radius-img);
}
.ampl-workgrid__item figcaption,
.ampl-ba2__item figcaption {
  margin-top: .65rem;
  font-family: var(--ampl-font-body);
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ampl-gray-700);
}

/* ── Before / after pair ── */
.ampl-ba2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.ampl-ba2__item { position: relative; margin: 0; }
.ampl-ba2__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ampl-radius-img);
}
.ampl-ba2__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 5px 11px;
  font-family: var(--ampl-font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ampl-white);
  background: rgba(0, 0, 0, .6);
}
.ampl-ba2__tag--after { background: var(--ampl-bronze); color: #1B1B1B; }

/* ── Why-us grid ── */
.ampl-whygrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3rem;
}
.ampl-whygrid__title {
  font-family: var(--ampl-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1B1B1B;
  margin: 0 0 .5rem;
}
.ampl-whygrid__body {
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ampl-gray-700);
  margin: 0;
}

/* ── Review quotes ── */
.ampl-revgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.ampl-revgrid__item {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--ampl-bronze);
}
.ampl-revgrid__item p {
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ampl-gray-700);
  margin: 0 0 .85rem;
}
.ampl-revgrid__item cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-family: var(--ampl-font-body);
  font-size: .88rem;
  font-weight: 700;
  color: #1B1B1B;
}
.ampl-revgrid__item cite span {
  font-weight: 400;
  font-size: .8rem;
  color: var(--ampl-gray-500);
}
.ampl-revgrid__more {
  text-align: center;
  margin: 2rem 0 0;
  font-family: var(--ampl-font-body);
  font-size: .92rem;
}
.ampl-revgrid__more a { color: var(--ampl-bronze-dark); font-weight: 700; }
.ampl-revgrid__more a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .ampl-workgrid, .ampl-revgrid { grid-template-columns: repeat(2, 1fr); }
  .ampl-workgrid__item:last-child, .ampl-revgrid__item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ampl-workgrid, .ampl-revgrid, .ampl-ba2, .ampl-whygrid { grid-template-columns: 1fr; }
  .ampl-workgrid__item:last-child, .ampl-revgrid__item:last-child { grid-column: auto; }
  .ampl-trustbar__item + .ampl-trustbar__item::before { display: none; }
  .ampl-trustbar__inner { gap: .45rem 1rem; font-size: .85rem; }
}


/* ================================================================
   GALLERY PAGE (.ampl-g*) — premium portfolio layout: full-bleed
   hero with stat strip, sticky trade filters, featured carousel,
   uniform card grid with load-more, before/after panel, photo CTA.
   Uses the existing brand tokens only (forest green + bronze +
   cream) — no new palette.
================================================================ */
.ampl-ghero, .ampl-ghero *, .ampl-gfilters, .ampl-gfilters *,
.ampl-gfeat, .ampl-gfeat *, .ampl-gwall, .ampl-gwall *,
.ampl-gba, .ampl-gba *, .ampl-gcta, .ampl-gcta * { box-sizing: border-box; }

.ampl-glabel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ampl-font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
}
.ampl-glabel::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Shared buttons ── */
.ampl-gbtn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 13px 26px;
  font-family: var(--ampl-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 240ms var(--ampl-ease-io), color 240ms var(--ampl-ease-io),
              border-color 240ms var(--ampl-ease-io), transform 240ms var(--ampl-ease-io);
}
.ampl-gbtn--outline { border-color: rgba(31,61,20,.28); color: var(--ampl-charcoal); background: transparent; }
.ampl-gbtn--outline:hover { border-color: var(--ampl-green-900); color: var(--ampl-green-900); }
.ampl-gbtn--solid { background: var(--ampl-green-900); color: #fff; }
.ampl-gbtn--solid:hover { background: var(--ampl-green-800); }
.ampl-gbtn--gold { background: var(--ampl-bronze); color: #1B1B1B; }
.ampl-gbtn--gold:hover { background: #C9982E; transform: translateY(-2px); }
.ampl-gbtn--ghost { border-color: rgba(255,255,255,.45); color: #fff; }
.ampl-gbtn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ── Hero ── */
.ampl-ghero {
  position: relative;
  isolation: isolate;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--nav-topbar-h, 38px) + var(--nav-header-h, 100px) + 2rem);
  padding-bottom: 3rem;
}
.ampl-ghero__bg { position: absolute; inset: 0; z-index: -2; }
.ampl-ghero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ampl-ghero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(10,16,8,.90) 0%, rgba(10,16,8,.72) 42%, rgba(10,16,8,.30) 100%);
}
.ampl-ghero__inner {
  width: 100%;
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  color: #fff;
}
.ampl-ghero__h1 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 1.1rem;
  max-width: 12ch;
  text-wrap: balance;
}
.ampl-ghero__lede {
  font-family: var(--ampl-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
  max-width: 46ch;
  margin: 0;
}
.ampl-ghero__rule {
  display: block;
  width: 64px; height: 2px;
  background: var(--ampl-bronze);
  margin: 2rem 0 1.6rem;
}
.ampl-ghero__stats {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.75rem;
}
.ampl-ghero__stats li { display: flex; align-items: center; gap: .7rem; }
.ampl-ghero__stats svg { width: 26px; height: 26px; color: var(--ampl-bronze); flex-shrink: 0; }
.ampl-ghero__stats span {
  display: flex; flex-direction: column;
  font-family: var(--ampl-font-body);
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.7);
}
.ampl-ghero__stats b {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Sticky filter bar ── */
.ampl-gfilters {
  position: sticky;
  top: var(--nav-header-h-scrolled, 74px);
  z-index: 40;
  background: var(--ampl-cream);
  border-bottom: 1px solid rgba(31,61,20,.10);
}
.ampl-gfilters__inner {
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding: 14px 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ampl-gfilter {
  font-family: var(--ampl-font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid rgba(31,61,20,.20);
  background: #fff;
  color: var(--ampl-gray-700);
  cursor: pointer;
  white-space: nowrap;
  transition: background 220ms var(--ampl-ease-io), color 220ms var(--ampl-ease-io), border-color 220ms var(--ampl-ease-io);
}
.ampl-gfilter:hover { border-color: var(--ampl-green-800); color: var(--ampl-green-900); }
.ampl-gfilter.is-active {
  background: var(--ampl-green-900);
  border-color: var(--ampl-green-900);
  color: #fff;
}
.ampl-gfilter__n { opacity: .55; font-weight: 400; margin-left: .35rem; font-variant-numeric: tabular-nums; }

/* ── Shared card ── */
.ampl-gcard {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ampl-gray-100);
  text-decoration: none;
  line-height: 0;
  margin: 0;
}
.ampl-gcard img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 620ms var(--ampl-ease-io);
}
.ampl-gcard:hover img { transform: scale(1.045); }
.ampl-gcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(8,12,6,.82) 100%);
  pointer-events: none;
}
.ampl-gcard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.35;
  z-index: 1;
}
.ampl-gcard__cat {
  font-family: var(--ampl-font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
}
.ampl-gcard__title {
  font-family: var(--ampl-font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
}
.ampl-gcard__city { font-family: var(--ampl-font-body); font-size: .78rem; color: rgba(255,255,255,.75); }
.ampl-gcard__go {
  position: absolute;
  right: 16px; bottom: 18px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  transition: background 240ms var(--ampl-ease-io), transform 240ms var(--ampl-ease-io);
}
.ampl-gcard--feat:hover .ampl-gcard__go { background: var(--ampl-bronze); border-color: var(--ampl-bronze); transform: translateX(3px); }

/* ── Featured carousel ── */
.ampl-gfeat { background: var(--ampl-cream); padding-block: clamp(3rem, 6vw, 5rem); }
.ampl-gfeat__inner {
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 2.5fr;
  gap: 2.5rem;
  align-items: center;
}
.ampl-gfeat__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  line-height: 1.12;
  margin: .9rem 0 .9rem;
  color: #1B1B1B;
}
.ampl-gfeat__body {
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  line-height: 1.75;
  color: var(--ampl-gray-700);
  margin: 0 0 1.6rem;
  max-width: 34ch;
}
.ampl-gfeat__carousel { position: relative; min-width: 0; }
.ampl-gfeat__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(33.333% - 11px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.ampl-gfeat__track::-webkit-scrollbar { display: none; }
.ampl-gfeat__track:focus-visible { outline: 2px solid var(--ampl-bronze); outline-offset: 3px; }
.ampl-gcard--feat { aspect-ratio: 3 / 4; scroll-snap-align: start; }
.ampl-gfeat__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(31,61,20,.2);
  background: #fff;
  color: var(--ampl-green-900);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20,15,5,.12);
  transition: background 220ms var(--ampl-ease-io), color 220ms var(--ampl-ease-io);
}
.ampl-gfeat__nav:hover { background: var(--ampl-green-900); color: #fff; }
.ampl-gfeat__nav--prev { left: -18px; }
.ampl-gfeat__nav--next { right: -18px; }
.ampl-gfeat__nav.is-disabled { opacity: .3; pointer-events: none; }

/* ── All-projects grid ── */
.ampl-gwall { background: #fff; padding-block: clamp(3rem, 6vw, 5rem); }
.ampl-gwall__inner { max-width: var(--ampl-max); margin-inline: auto; padding-inline: 1.5rem; }
.ampl-gwall__head { margin-bottom: 2rem; }
.ampl-gwall__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  line-height: 1.12;
  margin: .8rem 0 .4rem;
  color: #1B1B1B;
}
.ampl-gwall__count {
  font-family: var(--ampl-font-body);
  font-size: .85rem;
  color: var(--ampl-gray-500);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ampl-gwall__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ampl-gcard--wall { aspect-ratio: 4 / 3; }
.ampl-gcard--wall[hidden] { display: none; }
.ampl-gwall__empty {
  text-align: center;
  font-family: var(--ampl-font-body);
  color: var(--ampl-gray-500);
  padding: 2.5rem 0;
}
.ampl-gwall__more { display: flex; justify-content: center; margin-top: 2.25rem; }
.ampl-gwall__more[hidden] { display: none; }

/* ── Before & after ── */
.ampl-gba { background: var(--ampl-cream); padding-block: clamp(3rem, 6vw, 5rem); }
.ampl-gba__inner { max-width: var(--ampl-max); margin-inline: auto; padding-inline: 1.5rem; }
.ampl-gba__head { margin-bottom: 1.8rem; }
.ampl-gba__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  line-height: 1.12;
  margin: .8rem 0 0;
  color: #1B1B1B;
}
.ampl-gba__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ampl-gba__item { margin: 0; background: #fff; border: 1px solid rgba(31,61,20,.10); }
.ampl-gba__item img { display: block; width: 100%; height: auto; }
.ampl-gba__item figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.ampl-gba__label {
  font-family: var(--ampl-font-body);
  font-size: .88rem;
  font-weight: 700;
  color: #1B1B1B;
}
.ampl-gba__city { font-family: var(--ampl-font-body); font-size: .78rem; color: var(--ampl-gray-500); }

/* ── Closing CTA ── */
.ampl-gcta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.ampl-gcta__bg { position: absolute; inset: 0; z-index: -2; }
.ampl-gcta__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ampl-gcta::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,16,8,.80), rgba(10,16,8,.88));
}
.ampl-gcta__inner {
  max-width: var(--ampl-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
  color: #fff;
}
.ampl-gcta__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .8rem;
  text-wrap: balance;
}
.ampl-gcta__sub {
  font-family: var(--ampl-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 0 auto 2rem;
  max-width: 52ch;
}
.ampl-gcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ampl-gfeat__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .ampl-gfeat__body { max-width: 52ch; }
  .ampl-gfeat__track { grid-auto-columns: calc(50% - 8px); }
  .ampl-gfeat__nav--prev { left: 6px; }
  .ampl-gfeat__nav--next { right: 6px; }
  .ampl-gwall__grid { grid-template-columns: repeat(3, 1fr); }
  .ampl-gba__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ampl-ghero { min-height: 0; }
  .ampl-ghero__h1 { max-width: 100%; }
  .ampl-gwall__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ampl-gfilters { position: static; }
  .ampl-gfilters__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ampl-gfilters__inner::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
  .ampl-gfeat__track { grid-auto-columns: 82%; }
  .ampl-gba__grid { grid-template-columns: 1fr; }
  .ampl-ghero__stats { gap: .9rem 1.5rem; }
  .ampl-gcard__body { padding: 12px 12px 11px; }
  .ampl-gcta__actions .ampl-gbtn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ampl-gcard img, .ampl-gbtn, .ampl-gcard__go { transition: none; }
  .ampl-gcard:hover img { transform: none; }
}


/* ================================================================
   EXPERT LANDSCAPING SPLIT  (/services/landscaping/)
   Copy column + one real project photo. Replaced the old "Our Work"
   portfolio grid, which shipped placeholder.svg in every card.
   NOTE: the global box-sizing reset near the top of this file is an
   enumerated selector list, so this component declares its own or the
   .ampl-container inside it overflows the viewport by 48px.
================================================================ */
.ampl-expert, .ampl-expert * { box-sizing: border-box; }

.ampl-expert__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.ampl-expert__copy .ampl-h2 { margin-bottom: 1.75rem; }

.ampl-expert__copy .ampl-body-lg {
  max-width: 54ch;
  margin: 0 0 2.75rem;
}

.ampl-expert__features {
  display: grid;
  /* Four across, matching the reference layout. A fixed count rather than
     auto-fit: auto-fit fell to 3 columns inside this half-width column,
     leaving a single orphan feature on a second row. */
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ampl-expert__feature svg {
  display: block;
  color: var(--ampl-green-700);
  margin-bottom: 0.85rem;
}

.ampl-expert__feature h3 {
  font-family: var(--ampl-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ampl-charcoal);
  line-height: 1.3;
  margin: 0 0 0.4rem;
}

.ampl-expert__feature p {
  font-family: var(--ampl-font-body);
  font-size: 0.875rem;
  color: var(--ampl-gray-500);
  line-height: 1.6;
  margin: 0;
}

/* .ampl-expert__media / .ampl-expert__img sizing lives in ONE place —
   see the consolidated "EDITORIAL SPLIT" rules further down this file.
   (That comment explains why: this component picked up three separate
   generations of bleed/position-absolute/stretch-height patches over
   time that fought each other, notably breaking on narrow viewports.) */

@media (max-width: 560px) {
  .ampl-expert__features { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
}


/* ================================================================
   LANDSCAPING SERVICES GRID  (/services/landscaping/)
   Icon + title + one-line description, echoing the feature row in
   .ampl-expert. Replaced the old stacked "What We Do" list.
   Own box-sizing: the global reset near the top of this file is an
   enumerated selector list and does not cover new components.
================================================================ */
.ampl-svcgrid, .ampl-svcgrid * { box-sizing: border-box; }











/* Only the linked cards get affordance — unlinked ones stay inert so a
   hover state never implies a page that doesn't exist yet. */











/* ================================================================
   SERVICE CARD PHOTOS — added 2026-07-26 to .ampl-svcgrid.
   Every one of the 7 services has a real project photo; no
   placeholders. Uniform 4:3 crop so mixed portrait/landscape
   source shots still line up on a row.
================================================================ */








/* Icon now sits inline beside the title rather than stacked above it. */





/* ================================================================
   CTA BAND — full-bleed photo band with a dark wash, copy left and
   three reassurance points + button right. Replaced the old
   4-step process section on /services/landscaping/.
================================================================ */
.ampl-ctaband, .ampl-ctaband * { box-sizing: border-box; }

.ampl-ctaband {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--ampl-dark-2);
  isolation: isolate;
}

.ampl-ctaband__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ampl-ctaband__bg .ampl-ctaband__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

/* Dark wash — the photo has to stay readable underneath white text
   at every viewport, so this is a flat-ish scrim, not a soft vignette. */
.ampl-ctaband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10,20,12,.92) 0%, rgba(10,20,12,.80) 45%, rgba(10,20,12,.72) 100%);
}

.ampl-ctaband__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.ampl-ctaband__eyebrow {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
  margin-bottom: 1rem;
}

.ampl-ctaband__h2 {
  font-family: var(--ampl-font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: var(--ls-heading);
  line-height: 1.12;
  color: var(--ampl-white);
  margin: 0 0 1.1rem;
}

.ampl-ctaband__sub {
  font-family: var(--ampl-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  max-width: 46ch;
  margin: 0;
}

.ampl-ctaband__sub a {
  color: var(--ampl-bronze);
  text-decoration: none;
  border-bottom: 1px solid rgba(184,134,11,.5);
}
.ampl-ctaband__sub a:hover { border-bottom-color: var(--ampl-bronze); }

.ampl-ctaband__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.ampl-ctaband__point svg {
  display: block;
  color: var(--ampl-bronze);
  margin-bottom: 0.85rem;
}

.ampl-ctaband__point h3 {
  font-family: var(--ampl-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ampl-white);
  margin: 0 0 0.35rem;
}

.ampl-ctaband__point p {
  font-family: var(--ampl-font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 0;
}

.ampl-ctaband__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ampl-ctaband__btn { align-self: flex-end; }

@media (max-width: 980px) {
  .ampl-ctaband__inner { grid-template-columns: 1fr; }
  .ampl-ctaband__side { align-items: stretch; }
  .ampl-ctaband__btn { align-self: flex-start; }
  .ampl-ctaband::before {
    background: linear-gradient(180deg, rgba(10,20,12,.88) 0%, rgba(10,20,12,.86) 100%);
  }
}

@media (max-width: 620px) {
  .ampl-ctaband__points { grid-template-columns: 1fr; gap: 1.5rem; }
  .ampl-ctaband__point p br { display: none; }
  .ampl-ctaband__btn { align-self: stretch; text-align: center; justify-content: center; }
}

/* The sitewide link reset is an enumerated selector list (.ampl-section a,
   .ampl-hero a, …) and does not cover .ampl-ctaband, so the CTA button was
   inheriting the browser's default underline. Same enumerated-list gotcha
   as the box-sizing reset above. */
.ampl-ctaband a { text-decoration: none; }
.ampl-ctaband__sub a { border-bottom: 1px solid rgba(184,134,11,.5); }


/* ================================================================
   SERVICE GRID v2 (2026-07-26) — the bare image-in-a-grid version
   read as a stock WordPress template. Cards now sit on their own
   cream panel with the photo flush to the top edge and the text
   properly inset, which is what makes it read as designed rather
   than as a default grid. Corners stay sharp per --ampl-radius-img.
================================================================ */














/* Linked cards lift; unlinked ones stay put so the hover never implies
   a page that isn't built yet. */


/* Titles that wrap to two lines ("Irrigation & Sprinkler Systems") were
   centring the icon against the whole block. Pin it to the first line. */




/* ================================================================
   SERVICE GRID v3 (2026-07-26) — all 7 services on ONE row.
   Seven cards inside the standard 1240px container works out to only
   ~157px each, so this section opts into a wider container and a
   smaller type/padding scale. Below 1200px seven-across stops being
   readable, so it steps down and the normal scale comes back.
================================================================ */
.ampl-svcgrid .ampl-container { max-width: 1560px; }











/* Seven across stops working here; go back to the roomier scale. */
@media (max-width: 1199px) {
  .ampl-svcgrid .ampl-container { max-width: var(--ampl-max); }
  
  
  
  
  
}








/* ================================================================
   SEO INTRO READABILITY (.ampl-seotext) — 2026-07-26
   Same copy and same keywords as before, split into shorter
   paragraphs with a slightly larger lead line and a little more air
   between them. No new colours, no icons, no rules, no decoration.
================================================================ */
.ampl-seotext__lead {
  font-size: clamp(1.15rem, 2.1vw, 1.35rem);
  line-height: 1.65;
  color: var(--ampl-charcoal);
  margin-bottom: 1.9rem;
}

.ampl-seotext p { margin-bottom: 1.7rem; }
.ampl-seotext p:last-child { margin-bottom: 0; }

/* The sitewide reset sets .ampl-section a { color: inherit; text-decoration:
   none }, which would render the service-area city links as plain body text.
   Give them a real link affordance using an existing palette colour. Bronze
   was rejected here: #B8860B on the cream section background is only ~3.4:1,
   under the 4.5:1 minimum for body-size text. green-800 clears it comfortably. */
.ampl-seotext p a {
  color: var(--ampl-green-800);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(46, 90, 30, .35);
  transition: text-decoration-color 200ms var(--ampl-ease-io);
}

.ampl-seotext p a:hover,
.ampl-seotext p a:focus-visible {
  text-decoration-color: var(--ampl-green-800);
}


/* ================================================================
   PREMIUM PASS — /services/landscaping/ only (2026-07-26)
   Built to a mockup the client supplied. Editorial serif headings,
   a proper photo split, bordered service cards at 4+3, and the CTA
   band as a contained deep-green panel. No new colours or fonts:
   the serif is the existing --ampl-font-serif, already used for the
   Reviews / Service Areas / FAQ headings elsewhere on the site.
   Corners stay sharp. No eyebrow labels (client rejected them).
================================================================ */

/* ── Editorial heading variant ───────────────────────────────────
   The single biggest "premium" lever here. Serif, tighter tracking,
   normal weight instead of Manrope 800. */
.ampl-h2--editorial {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
}


/* ── HERO ────────────────────────────────────────────────────────
   SCOPED to .amigos-land-page: .ampl-hero is shared with
   front-page.php, whose H1 type scale was tuned separately and must
   not move. Splits the existing H1 into a small tracked lead line
   and a large city line. This is the H1's own content restyled, not
   an added eyebrow label. */
.amigos-land-page .ampl-hero__h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.02;
}

.amigos-land-page .ampl-hero__h1-lead {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: clamp(.7rem, 1.1vw, .8rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 1rem;
}

/* Mockup shows the city line white, not bronze. Scoped so the
   homepage's bronze accent line is untouched. */
.amigos-land-page .ampl-hero__h1-accent {
  color: var(--ampl-white);
  margin-top: 0;
}

.amigos-land-page .ampl-hero__sub { max-width: 42ch; }

@media (max-width: 1024px) {
  .amigos-land-page .ampl-hero__h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); }
}


/* ── SPLIT SECTION ───────────────────────────────────────────────
   Photo bleeds to the right edge of the viewport and stretches the
   full height of the row, which is what reads as editorial rather
   than as two stacked boxes. */
.ampl-expert { padding-block: 0; background: var(--ampl-cream); }

.ampl-expert__grid {
  align-items: stretch;
  gap: 0;
}

.ampl-expert__copy {
  padding: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 4vw, 4.5rem) clamp(3.5rem, 6vw, 6rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ampl-expert__copy .ampl-h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin-bottom: 1.5rem;
}

.ampl-expert__copy .ampl-body-lg { margin-bottom: 1.25rem; }

.ampl-expert__features {
  margin-top: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, .09);
}

.ampl-expert__cta { align-self: flex-start; margin-top: 2.25rem; }

@media (max-width: 980px) {
  .ampl-expert__grid { grid-template-columns: minmax(0, 1fr); }
  .ampl-expert__copy {
    order: 2;
    padding: clamp(2.5rem, 6vw, 3.5rem) 0;
  }
  .ampl-expert__media { order: 1; }
}


/* ── SEO TEXT BLOCK ──────────────────────────────────────────────
   Same content, just the editorial heading scale. */
.ampl-seotext .ampl-h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: 1.75rem;
}


/* ── SERVICE GRID: 4 + 3, second row centred ─────────────────────
   Reverses the earlier forced 7-across at the client's request after
   they supplied the mockup. Twelve-column track so a centred row of
   three is possible without JS: each card spans 3, and the second
   row is nudged in by a 1.5-column offset.
   Overrides the v3 seven-column rules further up this file. */
.ampl-svcgrid .ampl-container { max-width: var(--ampl-max); }

.ampl-svcgrid__sub {
  font-family: var(--ampl-font-body);
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  line-height: 1.7;
  color: var(--ampl-gray-500);
  max-width: 58ch;
  margin: 1rem auto 0;
}





/* Centre the trailing row of three under the row of four. */
















@media (max-width: 1080px) {
            /* 3 across */
  
}

@media (max-width: 760px) {
            /* 2 across */
  
}

@media (max-width: 460px) {
  
           /* 1 across */
  
}


/* ── CTA BAND: contained deep-green panel ────────────────────────
   Same section, new presentation. The photo background and its
   scrim are dropped in favour of the mockup's solid green panel. */
.ampl-ctaband {
  padding-block: 0 var(--ampl-section);
  background: transparent;
}

/* Photo background no longer used by this section. */
.ampl-ctaband__bg { display: none; }
.ampl-ctaband::before { content: none; }

.ampl-ctaband__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--ampl-green-900);
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 3rem);
}

.ampl-ctaband__h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
}

.ampl-ctaband__sub { max-width: 40ch; font-size: .95rem; }

.ampl-ctaband__side {
  display: block;
  align-items: initial;
}

.ampl-ctaband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

/* Outline button sits on dark green here, so it needs light strokes. */
.ampl-ctaband__tel {
  border: 1px solid rgba(255, 255, 255, .45);
  color: var(--ampl-white);
  background: transparent;
}
.ampl-ctaband__tel:hover {
  border-color: var(--ampl-white);
  background: rgba(255, 255, 255, .08);
}

.ampl-ctaband__points {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0;
}

.ampl-ctaband__point p { font-size: .8rem; }

@media (max-width: 980px) {
  .ampl-ctaband__panel { grid-template-columns: 1fr; }
  .ampl-ctaband__actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .ampl-ctaband__points { grid-template-columns: 1fr; gap: 1.25rem; }
  .ampl-ctaband__actions > .ampl-btn { width: 100%; justify-content: center; }
}


.ampl-expert {
  position: relative;
  overflow: hidden;
}


/* ── Second-row centring fix ─────────────────────────────────────
   The 12-column version above could not centre the trailing row of
   three: 3 cards span 9 of 12 columns, leaving 1.5 columns of slack
   per side, and a grid line has to be an integer. Measured result was
   a 101px left gutter against a 203px right gutter.

   24 columns divides evenly. Card spans 6 (4 across fills 24), the
   row of three spans 18, leaving 6 columns of slack = 3 per side, so
   the second row starts at line 4. With a 1192px container that is a
   152px offset on both sides and the card width is unchanged at 280px. */





@media (max-width: 1080px) {
              /* 3 across */
  
}

@media (max-width: 760px) {
             /* 2 across */
  
}

@media (max-width: 460px) {
             /* 1 across */
  
}


/* ── Narrow-viewport overflow fix ────────────────────────────────
   repeat(24, 1fr) has a hard minimum width of its gaps: 23 x 24px =
   552px. Below roughly a 600px viewport the container is narrower
   than that, so the 1fr tracks collapsed to 0 and the gaps alone
   pushed the grid past the viewport (measured 264px cards at 480 and
   460px cards at 390, with horizontal overflow at both).

   The 24-track scheme only exists to centre the trailing row of
   three, which stops applying once the grid is 2-up or 1-up. So drop
   back to plain column counts there and the minimum width goes away. */





/* ================================================================
   SERVICES SECTION ON A GREEN BAND (2026-07-26)
   Full-bleed deep green behind the 7 white service cards. Uses the
   existing --ampl-green-900, the same green as the CTA panel below,
   so no new colour enters the palette. Cards stay white with sharp
   corners; only the section background and the heading/subtitle
   colours change.
================================================================ */
.ampl-svcgrid { background: var(--ampl-green-900); }

.ampl-svcgrid .ampl-h2 { color: var(--ampl-white); }

.ampl-svcgrid__sub { color: rgba(255, 255, 255, .74); }

/* The card hover shadow was a black glow, which is invisible against a
   dark background. On green, the lift plus a light border edge is what
   actually reads. */


/* The CTA panel below is also green-900. Without a gap the two greens
   run together into one block and the section boundary disappears, so
   restore top padding on the CTA band to separate them. */
.ampl-ctaband { padding-block: var(--ampl-section) var(--ampl-section); }


/* ================================================================
   CTA BAND — PHOTO BACKGROUND RESTORED (2026-07-26)
   Client asked for the original background back, so this undoes the
   solid green-900 panel from the premium pass. Everything else about
   the section stays as it is now: the two buttons, the three points,
   and the editorial serif heading.
   These rules re-enable the original full-bleed photo + dark scrim
   that earlier overrides in this file had switched off.
================================================================ */
.ampl-ctaband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ampl-dark-2);
  padding-block: 0;
}

.ampl-ctaband__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ampl-ctaband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 20, 12, .92) 0%, rgba(10, 20, 12, .80) 45%, rgba(10, 20, 12, .72) 100%);
}

/* The panel is now just the layout grid: no green fill, no inset box.
   Vertical padding moves onto it so the section itself can stay flush. */
.ampl-ctaband__panel {
  background: transparent;
  padding: clamp(3rem, 5.5vw, 4.75rem) 0;
}

@media (max-width: 980px) {
  /* Copy sits over the photo top-to-bottom once stacked, so the scrim
     runs vertically instead of left-weighted. */
  .ampl-ctaband::before {
    background: linear-gradient(180deg, rgba(10, 20, 12, .90) 0%, rgba(10, 20, 12, .88) 100%);
  }
}


/* ================================================================
   SERVICES BAND — DEPTH PASS (2026-07-26)
   Feedback was that the cards read as "boxes thrown there". The flat
   green fill gave them nothing to sit against and they had no shadow,
   so they looked pasted on rather than seated.

   Everything here reuses techniques already in this file rather than
   inventing a new visual language:
     - the layered radial wash + soft-light foliage texture used by
       the .ampl-projects and .ampl-reviews2 dark bands, recoloured to
       the green family using only --ampl-green-800/900 plus black alpha
     - the sitewide .ampl-fade-up reveal, staggered per card
     - the existing --ampl-sh-* shadow ramp and --ampl-bronze accent
================================================================ */
.ampl-svcgrid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Depth instead of a flat fill. No new colours: green-900 and
     green-800 with black-alpha radials for the corner falloff. */
  background:
    radial-gradient(ellipse 55% 60% at 8% 6%, rgba(0, 0, 0, .38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 92% 94%, rgba(0, 0, 0, .34) 0%, transparent 62%),
    linear-gradient(155deg, var(--ampl-green-900) 0%, var(--ampl-green-800) 50%, var(--ampl-green-900) 100%);
}

/* Same blurred-foliage texture asset the Projects band uses, at a lower
   opacity. This is what ties the band to the rest of the site rather
   than looking like a plain green rectangle. Decorative and
   non-interactive, and it has no layout impact. */
.ampl-svcgrid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .10;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'%3E%3Cdefs%3E%3Cfilter id='p' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='30'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23p)' fill='%236B9A5F'%3E%3Cellipse cx='30' cy='30' rx='150' ry='100'/%3E%3Cellipse cx='150' cy='60' rx='110' ry='80'/%3E%3Cellipse cx='870' cy='650' rx='160' ry='100'/%3E%3Cellipse cx='760' cy='690' rx='120' ry='80'/%3E%3C/g%3E%3Cg filter='url(%23p)' stroke='%236B9A5F' stroke-width='7' fill='none'%3E%3Cpath d='M0,10 C90,50 110,110 190,150 C250,180 270,220 250,280'/%3E%3Cpath d='M900,690 C810,650 830,590 750,540 C690,500 680,450 710,390'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Two delay steps the sitewide ramp did not have yet, so seven cards can
   stagger evenly at 50ms intervals. Same mechanism, same naming. */
[data-delay="50"]  { transition-delay: .05s; }
[data-delay="250"] { transition-delay: .25s; }

/* Seat the cards: a real shadow against the dark band, and a hairline
   that belongs to the green rather than a generic black. */


/* Photo crops need to clip the zoom. */




/* Every card is a link now, so the hover applies across the board. */




/* The title picks up the brand green on hover; the icon takes bronze,
   matching how links behave elsewhere on the site. */



/* Give the band a little more room so the grid reads as composed inside
   it rather than crammed against the edges. */
.ampl-svcgrid .ampl-section-header { margin-bottom: 3.5rem; }




/* ================================================================
   SERVICE CARDS  (.ampl-svcs / .ampl-svccard)
   Sole source of truth for the service cards on
   /services/landscaping/. Replaced six stacked override blocks that
   had accumulated on the retired .ampl-svcgrid__card namespace; those
   90 rules were deleted rather than overridden again.

   Written mobile-first. All seven cards are identical in size; the
   desktop layout is 4 + 3 with the trailing row of three centred.
   An earlier version made the first service a full-width feature card;
   that was removed at the client's request so the set reads uniform.

   The section shell (.ampl-svcgrid: green band, heading, subtitle,
   box-sizing reset, container width) is untouched and lives above.

   NOTE ON CORNERS: the sitewide tokens --ampl-radius-img and
   --ampl-radius-card are deliberately 0 because every other card and
   photo on this site is sharp-cornered. The client specifically asked
   for 18-22px here, so the radius is a LOCAL token on this component
   only and must not be promoted to the global tokens.
================================================================ */
.ampl-svcs {
  --svc-radius: 20px;
  --svc-pad: 1.5rem;
  /* --ampl-bronze (#B8860B) on this dark green measures about 3.8:1,
     under the 4.5:1 AA floor for text at this size. This lighter gold
     measures ~5.5:1 and is the same value already used for the review
     stars elsewhere on the site, so it is not a new brand colour.
     Bronze stays on borders, where contrast rules do not apply. */
  --svc-gold: #D4A028;

  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ampl-svcs, .ampl-svcs * { box-sizing: border-box; }

/* Whole card is one link: a single tab stop, and the entire surface is
   the tap target. The inner "Learn more" is a <span>, not a nested
   anchor, so the markup stays valid. */
.ampl-svccard {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Deep green card, edged in gold. green-900 plus a black tint so the
     card separates from the band behind it, which is itself a
     green-900 -> green-800 gradient. No new named colour. */
  background-color: var(--ampl-green-900);
  background-image: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22));
  /* Gold hairline: --ampl-bronze is the site's single accent. Borders
     carry no text-contrast requirement, so full bronze is fine here. */
  border: 1px solid rgba(184, 134, 11, .55);
  border-radius: var(--svc-radius);
  /* Clips the photo into the rounded corner so image and content read
     as one component instead of two stacked boxes. */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 12px 30px rgba(0, 0, 0, .26);
  transition:
    transform 340ms var(--ampl-ease),
    box-shadow 340ms var(--ampl-ease),
    border-color 340ms var(--ampl-ease);
}

.ampl-svccard:focus-visible {
  outline: 3px solid var(--ampl-bronze);
  outline-offset: 3px;
}

/* ── Photo ─────────────────────────────────────────────────────── */
.ampl-svccard__media {
  position: relative;
  /* Clips the photo zoom. The badge notch sits inside this box, so it is
     unaffected. */
  overflow: hidden;
  /* Fixed ratio on every card guarantees identical image heights and
     reserves the box before load, so there is no layout shift. */
  aspect-ratio: 3 / 2;
  background: var(--ampl-gray-100);
}

.ampl-svccard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 380ms var(--ampl-ease), filter 380ms var(--ampl-ease);
}

/* ── Content ───────────────────────────────────────────────────── */
.ampl-svccard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--svc-pad) var(--svc-pad) calc(var(--svc-pad) + .1rem);
}

/* Number + icon tab, notched into the photo's bottom-left corner. Uses
   the card's own background so it reads as the body pushing up into the
   image rather than as a floating chip. */
.ampl-svccard__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.15rem .75rem 1.35rem;
  background-color: var(--ampl-green-900);
  background-image: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22));
  border-top-right-radius: calc(var(--svc-radius) - 2px);
  color: var(--svc-gold);
}

.ampl-svccard__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(184, 134, 11, .75);
  border-radius: 50%;
  font-family: var(--ampl-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.ampl-svccard__icon { display: block; }

/* Thin gold rule running down the left of the copy, as in the reference. */
.ampl-svccard__text {
  flex: 1;
  border-left: 1px solid rgba(184, 134, 11, .38);
  padding-left: 1.15rem;
}

.ampl-svccard__title {
  font-family: var(--ampl-font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ampl-white);
  margin: 0 0 .55rem;
  transition: color 340ms var(--ampl-ease);
}

.ampl-svccard__desc {
  font-family: var(--ampl-font-body);
  font-size: .92rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, .76);
  margin: 0;
}

.ampl-svccard__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.35rem;
  font-family: var(--ampl-font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--svc-gold);
  transition: color 340ms var(--ampl-ease);
}

.ampl-svccard__arrow {
  flex: 0 0 auto;
  transition: transform 340ms var(--ampl-ease);
}

/* ── Hover: pointer devices only, so touch never sticks in a hover
      state after a tap. GPU-friendly transform/opacity only. ────── */
@media (hover: hover) {
  .ampl-svccard:hover {
    transform: translateY(-6px);
    border-color: var(--ampl-bronze);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .10), 0 22px 44px rgba(0, 0, 0, .24);
  }
  .ampl-svccard:hover .ampl-svccard__img {
    transform: scale(1.04);
    filter: brightness(1.05);
  }
  .ampl-svccard:hover .ampl-svccard__cta   { color: var(--ampl-white); }
  .ampl-svccard:hover .ampl-svccard__arrow { transform: translateX(4px); }
}

/* Keyboard users get the same affordance as hover. */
.ampl-svccard:focus-visible .ampl-svccard__arrow { transform: translateX(4px); }
.ampl-svccard:focus-visible .ampl-svccard__cta   { color: var(--ampl-white); }

/* ── Responsive grid: all seven cards identical ──────────────────
   Every card is the same size at every breakpoint. The earlier
   full-width "feature" card on the first service was removed at the
   client's request: they want the row to read as one uniform set.

   Desktop is 4 + 3, with the trailing row of three centred under the
   row of four. That needs a 24-column track: three cards span 18 of 24,
   leaving 6 columns of slack = 3 per side, so row two starts at line 4.
   A 12-column track cannot do it, because 3 cards span 9 of 12 and the
   1.5 columns of slack per side is not an integer grid line.

   IMPORTANT: repeat(24, 1fr) has a hard minimum width equal to its gaps
   (23 x 24px = 552px). Below roughly a 600px viewport the container is
   narrower than that, the 1fr tracks collapse to zero and the gaps alone
   overflow the page. So the narrow breakpoints drop the 24-column track
   entirely and use plain column counts. ── */

/* 3-up (7 = 3 + 3 + 1) */
@media (min-width: 768px) {
  .ampl-svcs {
    --svc-pad: 1.6rem;
    grid-template-columns: repeat(24, 1fr);
    gap: 1.6rem;
  }
  .ampl-svcs__item { grid-column: span 8; }
}

/* 4-up with the trailing row of three centred (7 = 4 + 3) */
@media (min-width: 1024px) {
  .ampl-svcs {
    --svc-pad: 1.75rem;
    grid-template-columns: repeat(24, 1fr);
    gap: 1.75rem;
  }
  .ampl-svcs__item { grid-column: span 6; }
  .ampl-svcs__item:nth-child(5) { grid-column: 4 / span 6; }
}

/* 2-up: plain columns, no 24-track minimum */
@media (min-width: 480px) and (max-width: 767px) {
  .ampl-svcs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
  }
  .ampl-svcs__item,
  .ampl-svcs__item:nth-child(5) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ampl-svccard,
  .ampl-svccard__img,
  .ampl-svccard__title,
  .ampl-svccard__cta,
  .ampl-svccard__arrow { transition: none; }
  .ampl-svccard:hover { transform: none; }
  .ampl-svccard:hover .ampl-svccard__img { transform: none; filter: none; }
  .ampl-svccard:hover .ampl-svccard__arrow,
  .ampl-svccard:focus-visible .ampl-svccard__arrow { transform: none; }
}

/* ── Image-less card variant ──────────────────────────────────────
   Used on /services/painting/ for Interior Painting: no real interior
   photograph exists in the media library, the only interior asset is
   AI-generated, and this client bars both AI imagery and placeholder
   tiles. So the card renders text-only with the number/icon badge moved
   inline above the copy. Delete this variant's usage the moment a real
   interior photo is supplied. */
.ampl-svccard__badge--inline {
  position: static;
  padding: 0;
  margin-bottom: 1rem;
  background: none;
  border-radius: 0;
}

.ampl-svccard--noimg .ampl-svccard__body { padding-top: calc(var(--svc-pad) + .25rem); }

/* ── Quantity queries: centre a short row ─────────────────────────
   The pillar pages carry fewer cards than the landscaping page (3 on
   hardscaping, 2 on painting). With a fixed 24-column track and cards
   spanning 6, three cards fill 18 of 24 and two fill 12, so the row sat
   left-aligned with dead space on the right.

   "first-child AND nth-last-child(n)" matches only when the list holds
   exactly n items, so these fire on the pillar pages and never on the
   7-card landscaping grid. Only the first item needs repositioning;
   the rest auto-flow after it. */
@media (min-width: 768px) {
  /* 3-up breakpoint, cards span 8. Two cards = 16 of 24, slack 8, so
     start at line 5. Three cards already fill the row exactly. */
  .ampl-svcs__item:first-child:nth-last-child(2) { grid-column: 5 / span 8; }
}

@media (min-width: 1024px) {
  /* 4-up breakpoint, cards span 6. */
  .ampl-svcs__item:first-child:nth-last-child(3) { grid-column: 4 / span 6; }  /* 3 cards: 18/24, slack 6 */
  .ampl-svcs__item:first-child:nth-last-child(2) { grid-column: 7 / span 6; }  /* 2 cards: 12/24, slack 12 */
}


/* ================================================================
   HERO FIXES — /services/landscaping/ only (2026-07-27)
   Both rules are scoped to .amigos-land-page because .ampl-hero is
   shared with front-page.php, whose hero was tuned separately.
================================================================ */

/* The bottom fade ended on #4A2C0A (--ampl-brown-dark), which is what
   read as a brown haze washing up the hero. On this page the section
   below the hero is cream, so a brown terminator had nothing to blend
   into. Same fade geometry, neutral dark instead of brown, so the
   bottom of the hero still holds text without the colour cast. */
.amigos-land-page .ampl-hero::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .22) 45%,
    rgba(0, 0, 0, .50) 100%
  );
}

/* "Contact Us" was a ghost button at 45% white border on a dark photo,
   which barely registered next to the solid bronze primary. Solid white
   with dark green text makes it a clear secondary action and still
   reads as subordinate to the bronze CTA. */
.amigos-land-page .ampl-hero .ampl-btn--ghost {
  background: var(--ampl-white);
  color: var(--ampl-green-900);
  border-color: var(--ampl-white);
}

.amigos-land-page .ampl-hero .ampl-btn--ghost:hover {
  background: rgba(255, 255, 255, .90);
  border-color: rgba(255, 255, 255, .90);
  color: var(--ampl-green-900);
}

/* ================================================================
   SERVICE-PAGE VISUAL LANGUAGE  (.ampl-hero--svc)  2026-07-27
   Ports the landscaping page's hero treatment to the other service
   pages as a REUSABLE MODIFIER rather than a per-page body class, so
   each page opts in with one class instead of needing its own CSS.

   The landscaping page keeps its .amigos-land-page scoping; this
   modifier carries the identical rules for the siblings. front-page.php
   uses plain .ampl-hero and is untouched by both.
================================================================ */
.ampl-hero--svc .ampl-hero__h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  line-height: 1.04;
}

.ampl-hero--svc .ampl-hero__h1-lead {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: clamp(.7rem, 1.1vw, .8rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 1rem;
}

.ampl-hero--svc .ampl-hero__h1-accent {
  color: var(--ampl-white);
  margin-top: 0;
}

.ampl-hero--svc .ampl-hero__sub { max-width: 46ch; }

/* The shared bottom fade ends on --ampl-brown-dark, which reads as a brown
   haze. Same neutral replacement already applied to the landscaping page. */
.ampl-hero--svc.ampl-hero::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .22) 45%,
    rgba(0, 0, 0, .50) 100%
  );
}

/* Secondary button was a 45%-white outline on a dark photo: hard to see. */
.ampl-hero--svc .ampl-btn--ghost {
  background: var(--ampl-white);
  color: var(--ampl-green-900);
  border-color: var(--ampl-white);
}
.ampl-hero--svc .ampl-btn--ghost:hover {
  background: rgba(255, 255, 255, .90);
  border-color: rgba(255, 255, 255, .90);
  color: var(--ampl-green-900);
}


@media (max-width: 1024px) {
  .ampl-hero--svc .ampl-hero__h1 { font-size: clamp(2rem, 6.5vw, 3rem); }
}

/* The ported split is cream, and on several service pages the very next
   section is .ampl-bg--alt, which is also cream, so the boundary disappeared.
   Cheaper and safer than re-alternating five section backgrounds per page. */
.ampl-expert + .ampl-section.ampl-bg--alt { border-top: 1px solid rgba(0, 0, 0, .07); }


/* ================================================================
   "WHAT'S INCLUDED" BAND (.ampl-incl)
   Same deep-green treatment as the .ampl-svcgrid card bands on the
   pillar pages, so this reads as part of the same site rather than a
   one-off: layered radial falloff over a green-900 -> green-800 wash,
   plus the blurred-foliage texture the .ampl-projects band uses. No
   new colours.

   Sits between a cream section above and a plain white one below, so
   there is no adjacent-background collision.

   Text is inverted for the dark ground. .ampl-section is already in
   the sitewide box-sizing and link resets, so no extra guards needed.
================================================================ */
.ampl-incl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 8% 6%, rgba(0, 0, 0, .38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 92% 94%, rgba(0, 0, 0, .34) 0%, transparent 62%),
    linear-gradient(155deg, var(--ampl-green-900) 0%, var(--ampl-green-800) 50%, var(--ampl-green-900) 100%);
}

.ampl-incl::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .10;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700'%3E%3Cdefs%3E%3Cfilter id='p' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='30'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23p)' fill='%236B9A5F'%3E%3Cellipse cx='30' cy='30' rx='150' ry='100'/%3E%3Cellipse cx='150' cy='60' rx='110' ry='80'/%3E%3Cellipse cx='870' cy='650' rx='160' ry='100'/%3E%3Cellipse cx='760' cy='690' rx='120' ry='80'/%3E%3C/g%3E%3Cg filter='url(%23p)' stroke='%236B9A5F' stroke-width='7' fill='none'%3E%3Cpath d='M0,10 C90,50 110,110 190,150 C250,180 270,220 250,280'/%3E%3Cpath d='M900,690 C810,650 830,590 750,540 C690,500 680,450 710,390'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.ampl-incl .ampl-h2            { color: var(--ampl-white); }
.ampl-incl .ampl-body-lg       { color: rgba(255, 255, 255, .80); }
.ampl-incl .ampl-whygrid__title { color: var(--ampl-white); }
.ampl-incl .ampl-whygrid__body  { color: rgba(255, 255, 255, .80); }

/* Icons in the "What's Included" band. Gold reads well on the deep-green
   ground and matches the accent used on the service-card CTAs. Scoped to
   .ampl-incl so the other .ampl-whygrid block on the same page (the
   "What Working With Amigos Is Like" section) stays icon-free.
   Decorative only: each <span> is aria-hidden, so contrast rules do not
   apply, but this gold is the same AA-passing value used for card CTA text. */
.ampl-incl .ampl-whygrid__icon {
  display: block;
  color: #D4A028;
  margin-bottom: .9rem;
}

/* A little more air now that each item leads with an icon. */
.ampl-incl .ampl-whygrid__item { padding-top: .25rem; }
.ampl-incl .ampl-whygrid__title { margin-bottom: .45rem; }

/* ================================================================
   EDITORIAL SPLIT — .ampl-expert__media / __img, single source of
   truth (2026-07-29). This component previously accumulated three
   generations of overlapping fixes (viewport-bleed margins, then
   position:absolute for a full-height bleed panel, then per-breakpoint
   patches on top of that) spread across this file. They fought each
   other — the mobile breakpoint in particular could leave the image
   without a definite height. Consolidated into one normal-flow,
   aspect-ratio-based box: it always has real intrinsic height, so
   there is nothing left for align-items: stretch to collapse.

   Applies to every page using .ampl-expert (landscaping, hardscaping,
   painting, snow removal, about, landscape installation).
================================================================ */
.ampl-expert__copy { padding-block: clamp(2.5rem, 4vw, 4rem); }

.ampl-expert__media {
  position: relative;
  margin: 0;
  min-width: 0;
}

.ampl-expert__media .ampl-expert__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ampl-radius-img);
  box-shadow: var(--ampl-sh-lg);
}

@media (min-width: 981px) {
  .ampl-expert__media { align-self: center; }
  .ampl-expert__media .ampl-expert__img { max-height: 460px; }
}

@media (max-width: 980px) {
  .ampl-expert__media .ampl-expert__img { aspect-ratio: 16 / 10; }
}


/* ================================================================
   WHY CHOOSE AMIGOS — /about/why-choose-amigos/ only
   Premium editorial pass built to a client-supplied mockup. Reuses
   the shared .ampl-hero shell, --ampl-font-serif editorial headings,
   and --ampl-sh-* shadow tokens already in this file. No eyebrow
   labels (client rejected them on the landscaping page pass — same
   call here). Corners stay sharp everywhere except the two spots
   below with an explicit client ask for rounded photo/card corners;
   those use a LOCAL radius token on the component only, same pattern
   as .ampl-svcs above — never promoted to the global tokens.
================================================================ */

/* ── Our Difference: copy + 2x3 card grid + portrait photo ── */
.ampl-wcu-diff__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.ampl-wcu-diff__copy .ampl-h2 { margin-bottom: 1.25rem; }
.ampl-wcu-diff__copy .ampl-body-lg { margin-bottom: 0; }

.ampl-wcu-cards {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.5rem;
}

.ampl-wcu-card {
  --wcu-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem 1.5rem 1.65rem;
  background: var(--ampl-white);
  border: 1px solid var(--ampl-gray-200);
  border-radius: var(--wcu-radius);
  box-shadow: var(--ampl-sh-sm);
  transition: transform 250ms var(--ampl-ease), box-shadow 250ms var(--ampl-ease), border-color 250ms var(--ampl-ease);
}
.ampl-wcu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ampl-sh-md);
  border-color: var(--ampl-bronze);
}
.ampl-wcu-card__icon {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--ampl-green-800);
}
.ampl-wcu-card__icon svg { width: 22px; height: 22px; }
.ampl-wcu-card__title {
  font-family: var(--ampl-font-headline);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--ampl-charcoal);
}
.ampl-wcu-card__desc {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ampl-gray-700);
}

.ampl-wcu-diff__media {
  --wcu-radius: 18px;
  position: relative;
  border-radius: var(--wcu-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--ampl-sh-lg);
}
.ampl-wcu-diff__img {
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (max-width: 980px) {
  .ampl-wcu-diff__grid { grid-template-columns: 1fr; gap: 3rem; }
  .ampl-wcu-diff__media { order: -1; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .ampl-wcu-cards { grid-template-columns: 1fr; }
}

/* ── Trust band: dark green strip, qualitative claims only ── */
.ampl-wcu-stats {
  background: var(--ampl-green-900);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.ampl-wcu-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.ampl-wcu-stat {
  text-align: center;
  padding-inline: 1rem;
  border-left: 1px solid rgba(255,255,255,.14);
}
.ampl-wcu-stat:first-child { border-left: none; }
.ampl-wcu-stat__icon {
  display: inline-flex;
  width: 34px; height: 34px;
  margin-bottom: .85rem;
  color: var(--ampl-bronze);
}
.ampl-wcu-stat__icon svg { width: 100%; height: 100%; }
.ampl-wcu-stat__label {
  display: block;
  font-family: var(--ampl-font-headline);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--ampl-white);
  margin-bottom: .3rem;
}
.ampl-wcu-stat__sub {
  display: block;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
}
@media (max-width: 767px) {
  .ampl-wcu-stats__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .ampl-wcu-stat:nth-child(3) { border-left: none; }
  .ampl-wcu-stat:nth-child(2) { border-left: 1px solid rgba(255,255,255,.14); }
}

/* ── Our Promise: centered heading + 4 columns, gold underline on hover ── */
.ampl-wcu-promise__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
.ampl-wcu-promise__item {
  text-align: center;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--ampl-gray-200);
  position: relative;
  transition: transform 250ms var(--ampl-ease);
}
.ampl-wcu-promise__item::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  width: 0;
  height: 2px;
  background: var(--ampl-bronze);
  transition: width 300ms var(--ampl-ease), left 300ms var(--ampl-ease);
}
.ampl-wcu-promise__item:hover {
  transform: translateY(-3px);
}
.ampl-wcu-promise__item:hover::before {
  left: 0;
  width: 100%;
}
.ampl-wcu-promise__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  margin: .25rem auto 1rem;
  color: var(--ampl-green-800);
}
.ampl-wcu-promise__icon svg { width: 100%; height: 100%; }
.ampl-wcu-promise__title {
  font-family: var(--ampl-font-headline);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ampl-charcoal);
  margin: 0 0 .6rem;
}
.ampl-wcu-promise__desc {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ampl-gray-700);
  max-width: 26ch;
  margin-inline: auto;
}
@media (max-width: 980px) {
  .ampl-wcu-promise__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ampl-wcu-promise__grid { grid-template-columns: 1fr; }
}

/* ── Final CTA: full-bleed photo, dark overlay, centered content ── */
.ampl-wcu-cta {
  position: relative;
  padding-block: clamp(5rem, 12vw, 8rem);
  overflow: hidden;
  background: var(--ampl-green-900);
}
.ampl-wcu-cta__bg {
  position: absolute;
  inset: 0;
}
.ampl-wcu-cta__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.55) saturate(1.05);
}
.ampl-wcu-cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.ampl-wcu-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
}
.ampl-wcu-cta__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ampl-white);
  margin: 0 0 1rem;
}
.ampl-wcu-cta__sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.88);
  margin: 0 0 2rem;
}


/* ================================================================
   CONTACT — PREMIUM PASS — /contact/ only
   Client-supplied mockup, same conventions as the Why Choose Amigos
   pass above: shared .ampl-hero shell, --ampl-font-serif editorial
   headings, --ampl-sh-* shadows, local radius tokens only where the
   client specifically asked for rounded corners (form card, photo,
   trust cards, map panel). No eyebrow labels except where the
   mockup shows a small all-caps kicker directly above an H1/H2 —
   kept minimal and never decorative.
================================================================ */

.ampl-c2-eyebrow {
  display: block;
  font-family: var(--ampl-font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
  margin-bottom: .85rem;
}
.ampl-c2-eyebrow--on-dark { color: var(--ampl-bronze); text-align: center; }

/* Scoped split layout for THIS hero only: content left, floating
   info card right, side by side. The shared .ampl-hero used on the
   homepage and Why Choose Amigos stays a single left-aligned column. */
.ampl-c2-hero .ampl-hero__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.ampl-c2-hero .ampl-hero__content { flex: 1 1 480px; }
.ampl-c2-hero .ampl-c2-infocard { flex: 0 0 360px; margin-top: 0; }
@media (max-width: 1024px) {
  .ampl-c2-hero .ampl-hero__body { flex-direction: column; align-items: stretch; }
}

/* ── Hero label + floating info card ── */
.ampl-c2-hero__label {
  display: inline-block;
  font-family: var(--ampl-font-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ampl-bronze);
  margin-bottom: 1rem;
}

.ampl-c2-infocard {
  --wcu-radius: 16px;
  position: relative;
  z-index: 2;
  margin-top: 2.5rem;
  max-width: 380px;
  background: rgba(31, 61, 20, .74);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--wcu-radius);
  box-shadow: var(--ampl-sh-xl);
  padding: 1.75rem 1.75rem 1.5rem;
}
.ampl-c2-infocard__row {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding-block: .85rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.ampl-c2-infocard__row:first-child { border-top: none; padding-top: 0; }
.ampl-c2-infocard__row:last-child { padding-bottom: 0; }
.ampl-c2-infocard__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: .1rem;
  color: var(--ampl-bronze);
}
.ampl-c2-infocard__icon svg { width: 100%; height: 100%; }
.ampl-c2-infocard__text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-family: var(--ampl-font-body);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ampl-white);
  line-height: 1.4;
}
.ampl-c2-infocard__text a { color: var(--ampl-white); }
.ampl-c2-infocard__text a:hover { color: var(--ampl-bronze); }
.ampl-c2-infocard__text small {
  font-size: .78rem;
  font-weight: 400;
  color: rgba(255,255,255,.62);
}
@media (max-width: 1024px) {
  .ampl-c2-infocard { max-width: 100%; }
}

/* ── Estimate form section ── */
.ampl-c2-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start;
}
.ampl-c2-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.ampl-c2-form {
  --wcu-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--ampl-white);
  border: 1px solid var(--ampl-gray-200);
  border-radius: var(--wcu-radius);
  box-shadow: var(--ampl-sh-lg);
  padding: 2.25rem;
  margin-top: 1.5rem;
}
.ampl-c2-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ampl-gray-400); }
.ampl-c2-file {
  font-family: var(--ampl-font-body);
  font-size: .88rem;
  color: var(--ampl-gray-700);
  background: #fafafa;
  border: 1.5px dashed var(--ampl-gray-200);
  border-radius: 8px;
  padding: .7rem;
  width: 100%;
}
.ampl-c2-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-family: var(--ampl-font-body);
  font-size: .85rem;
  color: var(--ampl-gray-700);
  line-height: 1.4;
}
.ampl-c2-checkbox input { margin-top: .2rem; accent-color: var(--ampl-bronze); flex-shrink: 0; }

.ampl-c2-photo-col { position: relative; }
.ampl-c2-photo {
  --wcu-radius: 18px;
  position: relative;
  border-radius: var(--wcu-radius);
  overflow: hidden;
  box-shadow: var(--ampl-sh-lg);
  aspect-ratio: 4 / 5;
  margin-top: 1.5rem;
}
.ampl-c2-photo__img { width: 100%; height: 100%; object-fit: cover; }
.ampl-c2-trustcard {
  --wcu-radius: 14px;
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  background: var(--ampl-white);
  border-radius: var(--wcu-radius);
  box-shadow: var(--ampl-sh-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ampl-c2-trustcard__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--ampl-font-body);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ampl-charcoal);
}
.ampl-c2-trustcard__item svg { flex-shrink: 0; color: var(--ampl-green-800); }

@media (max-width: 980px) {
  .ampl-c2-form-grid { grid-template-columns: 1fr; gap: 3rem; }
  .ampl-c2-photo-col { order: -1; }
  .ampl-c2-photo { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .ampl-c2-form-row { grid-template-columns: 1fr; }
  .ampl-c2-form { padding: 1.5rem; }
  .ampl-c2-trustcard { position: static; margin-top: 1rem; }
}

/* ── Trust rows ── */
.ampl-c2-trustrow {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--ampl-gray-200);
  position: relative;
  overflow: hidden;
}
.ampl-c2-trustrow:last-child { border-bottom: 1px solid var(--ampl-gray-200); }
.ampl-c2-trustrow::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ampl-bronze);
  transform: scaleY(0);
  transition: transform 280ms var(--ampl-ease);
}
.ampl-c2-trustrow:hover::before { transform: scaleY(1); }
.ampl-c2-trustrow:hover { padding-left: 1rem; }
.ampl-c2-trustrow__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  color: var(--ampl-green-800);
  transition: color 250ms var(--ampl-ease);
}
.ampl-c2-trustrow__icon svg { width: 100%; height: 100%; }
.ampl-c2-trustrow:hover .ampl-c2-trustrow__icon { color: var(--ampl-bronze); }
.ampl-c2-trustrow__body { display: flex; flex-direction: column; gap: .35rem; }
.ampl-c2-trustrow__title {
  font-family: var(--ampl-font-headline);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ampl-charcoal);
}
.ampl-c2-trustrow__desc {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ampl-gray-700);
}
@media (max-width: 560px) {
  .ampl-c2-trustrow:hover { padding-left: 0; }
}

/* ── Service area + stylized map ── */
.ampl-c2-areas__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ampl-c2-areas__list {
  list-style: none;
  margin: 1.5rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1.5rem;
}
.ampl-c2-areas__list li {
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ampl-charcoal);
  padding-left: 1.3rem;
  position: relative;
}
.ampl-c2-areas__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ampl-bronze);
}

.ampl-c2-map {
  --wcu-radius: 18px;
  position: relative;
  aspect-ratio: 4 / 3.6;
  border-radius: var(--wcu-radius);
  overflow: hidden;
  box-shadow: var(--ampl-sh-lg);
  border: 1px solid var(--ampl-gray-200);
}
.ampl-c2-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ampl-c2-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ampl-bronze);
  transition: transform 200ms var(--ampl-ease);
}
.ampl-c2-pin svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.ampl-c2-pin em {
  font-style: normal;
  font-family: var(--ampl-font-body);
  font-size: .68rem;
  font-weight: 700;
  color: var(--ampl-charcoal);
  background: rgba(255,255,255,.9);
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 2px;
  white-space: nowrap;
}
.ampl-c2-pin--big svg { width: 30px; height: 30px; }
.ampl-c2-pin--big em { font-size: .74rem; }
.ampl-c2-pin:hover { transform: translate(-50%, -100%) scale(1.15); }
.ampl-c2-map__badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: var(--ampl-green-900);
  color: var(--ampl-white);
  font-family: var(--ampl-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: 10px;
  box-shadow: var(--ampl-sh-md);
}

@media (max-width: 980px) {
  .ampl-c2-areas__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 560px) {
  .ampl-c2-areas__list { grid-template-columns: 1fr 1fr; font-size: .88rem; }
}

/* ── Timeline ── */
.ampl-c2-timeline {
  background: var(--ampl-green-900);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.ampl-c2-timeline__h2 {
  font-family: var(--ampl-font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ampl-white);
  text-align: center;
  margin: 0;
}
.ampl-c2-timeline__steps {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.ampl-c2-timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: .5rem;
}
.ampl-c2-timeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 29px;
  left: calc(50% + 40px);
  right: calc(-50% + 40px);
  border-top: 2px dotted rgba(184, 134, 11, .55);
}
.ampl-c2-timeline__ico {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--ampl-bronze);
  color: var(--ampl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: var(--ampl-sh-md);
}
.ampl-c2-timeline__ico svg { width: 26px; height: 26px; }
.ampl-c2-timeline__num {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ampl-green-900);
  border: 2px solid var(--ampl-green-900);
  outline: 2px solid var(--ampl-white);
  color: var(--ampl-white);
  font-family: var(--ampl-font-body);
  font-size: .68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ampl-c2-timeline__label {
  font-family: var(--ampl-font-body);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ampl-white);
  margin-bottom: .35rem;
}
.ampl-c2-timeline__desc {
  font-family: var(--ampl-font-body);
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255,255,255,.68);
  max-width: 15ch;
}
@media (max-width: 900px) {
  .ampl-c2-timeline__steps { grid-template-columns: 1fr 1fr; gap: 2.5rem 0; }
  .ampl-c2-timeline__step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) {
  .ampl-c2-timeline__steps { grid-template-columns: 1fr; gap: 2rem 0; }
}