/* ==========================================================================
   components.css — logo, header, hero (diagonal cut), buttons, cards, tiles,
   dividers, contact form, map, footer, call bar, lightbox
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon--xl {
  width: 2.25rem;
  height: 2.25rem;
}


/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-green-400);
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.logo:hover {
  color: var(--color-green-300);
}

/* Brand mark is the supplied raster artwork, so the box keeps its aspect ratio.
   The header uses the small variant (222x173) — the large one is for the About
   section, where it is displayed ~8x bigger. */
.logo__mark {
  width: 3.1rem;
  height: auto;
  aspect-ratio: 222 / 173;
  flex: none;
}

/* Lockup order matches the artwork: wordmark, sub-line, then the rule beneath. */
.logo__type {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.logo__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  /* The lockup must never reflow when a longer language crowds the header */
  white-space: nowrap;
  color: var(--color-cream);
}

.logo__rule {
  display: block;
  height: var(--hairline);
  background-color: currentColor;
  opacity: 0.85;
}

.logo__sub {
  font-size: 0.5625rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Footer: the supplied vertical lockup, used as-is */
.logo--lockup {
  display: block;
  width: min(15rem, 100%);
}

.logo--lockup img {
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  padding-block: var(--spacing-sm);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  transition: background-color var(--duration-base) var(--ease-out-soft),
    padding var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft),
    transform var(--duration-base) var(--ease-out-soft);
}

/* Solid once the visitor scrolls off the hero */
.header.is-stuck {
  padding-block: var(--spacing-2xs);
  background: rgba(0, 0, 0, 0.94);
  border-bottom: var(--hairline) solid var(--border-hairline);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.header.is-hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

/* Flex items default to min-content and will push the row wider than the
   viewport on narrow screens — let the logo lockup shrink instead. */
.header__inner > * {
  min-width: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--spacing-3xs);
  color: var(--color-cream);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  /* Spanish labels are longer; keep each on one line */
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background-color: var(--color-green-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.nav__link:hover,
.nav__link.is-current {
  color: var(--color-green-300);
}

.nav__link:hover::after,
.nav__link.is-current::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--color-orange-500);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.nav__phone:hover {
  color: var(--color-orange-400);
}


/* --------------------------------------------------------------------------
   Header utilities — language toggle + hamburger.
   Kept outside <nav> so the language switch is never hidden behind the mobile
   menu: a visitor who needs Spanish should not have to find it first.
   -------------------------------------------------------------------------- */
.header__utils {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: var(--hairline) solid var(--color-black-600);
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-cream);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    background-color var(--duration-fast) var(--ease-out-soft);
}

.lang:hover {
  color: var(--color-green-300);
  border-color: var(--color-green-400);
  background-color: rgba(36, 67, 10, 0.4);
}

.lang .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-green-400);
}

.lang:hover .icon {
  color: var(--color-green-300);
}

.lang__short {
  display: none;
}

/* Hamburger */
.hamburger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: var(--hairline) solid var(--color-black-600);
  border-radius: var(--radius-sm);
  background-color: rgba(0, 0, 0, 0.5);
}

.hamburger__bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--color-cream);
  transition: transform var(--duration-base) var(--ease-out-expo),
    opacity var(--duration-fast) linear;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: 0.8rem 1.5rem;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft);
}

.btn--sm {
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-100);
}

.btn--lg {
  padding: 1.05rem 2rem;
  font-size: var(--fs-300);
}

.btn--block {
  width: 100%;
}

/* Primary = orange = "do something" */
.btn--primary {
  background-color: var(--color-orange-500);
  color: var(--color-black);
  box-shadow: 0 10px 26px rgba(245, 166, 35, 0.18);
}

.btn--primary:hover {
  background-color: var(--color-orange-400);
  box-shadow: var(--glow-orange), 0 14px 30px rgba(245, 166, 35, 0.24);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--ghost {
  border-color: rgba(247, 245, 238, 0.35);
  color: var(--color-cream);
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
}

.btn--ghost:hover {
  border-color: var(--color-green-400);
  color: var(--color-green-300);
  background-color: rgba(36, 67, 10, 0.35);
  transform: translateY(-2px);
}

.btn--ghost .icon,
.btn--primary .icon {
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.btn:hover .icon {
  transform: translateX(3px);
}

/* Arrow text link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--color-green-400);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out-soft),
    gap var(--duration-base) var(--ease-out-expo);
}

.link-arrow:hover {
  color: var(--color-green-300);
  gap: var(--spacing-sm);
}


/* ==========================================================================
   HERO — two-slide header with the diagonal cut
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: 7rem;
  padding-bottom: clamp(6rem, 12vw, 9rem);
  background-color: var(--color-black);
  overflow: hidden;
  isolation: isolate;
}

/* --- slides --- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
}

/* True cross-dissolve: the incoming frame fades in *on top* of the outgoing
   one, which holds at full opacity underneath and only drops once the fade has
   finished. Fading both at once would dip the hero through black mid-swap. */
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0s linear var(--duration-slide);
}

.hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  transition: opacity var(--duration-slide) var(--ease-in-out-soft) 0s;
}

.hero__slide picture,
.hero__slide img {
  width: 100%;
  height: 100%;
}

.hero__slide img {
  object-fit: cover;
  object-position: center 55%;
}

/* --- global scrim: keeps type at AA over any frame --- */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  /* The bottom stop stays short of pure black so the grass silhouette below
     still has photograph to read against. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 62%, rgba(36, 67, 10, 0.28) 100%);
}

/* --- THE DIAGONAL CUT ---------------------------------------------------
   A skewed near-black panel anchored off the left edge. Its right edge
   slants across the photo and carries a lime hairline; the photograph stays
   fully exposed on the right. Inspired by the reference site's angled cut,
   rebuilt in the FMS dark palette.
   ---------------------------------------------------------------------- */
.hero__wedge {
  position: absolute;
  inset: -8% auto -8% -18%;
  z-index: var(--z-wedge);
  width: 74%;
  transform: skewX(var(--diagonal-angle));
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.93) 0%,
    rgba(0, 0, 0, 0.87) 52%,
    rgba(11, 13, 8, 0.7) 82%,
    rgba(11, 13, 8, 0.34) 100%
  );
  border-right: 2px solid var(--color-green-400);
  box-shadow: 14px 0 60px rgba(0, 0, 0, 0.6), var(--glow-green);
}

/* A second, thinner echo line for depth */
.hero__wedge::after {
  content: "";
  position: absolute;
  inset: 0 -0.85rem 0 auto;
  width: var(--hairline);
  background-color: rgba(124, 181, 24, 0.4);
}

/* --- copy: both slides share one grid cell so the hero never jumps --- */
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  align-content: center;
  /* .hero is a flex row; without these the long display type sets a
     min-content floor and overflows narrow viewports. */
  width: 100%;
  min-width: 0;
}

.hero__copy {
  grid-area: 1 / 1;
  max-width: 46rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(1.75rem);
  /* Outgoing copy clears out quickly... */
  transition: opacity var(--duration-base) var(--ease-out-soft),
    transform var(--duration-base) var(--ease-out-soft),
    visibility var(--duration-base) linear;
}

/* ...then the incoming copy enters, so the two never overlap mid-read. */
.hero__copy.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--duration-slow) var(--ease-out-soft) var(--duration-base),
    transform var(--duration-slow) var(--ease-out-expo) var(--duration-base),
    visibility 0s linear var(--duration-base);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-md);
  color: var(--color-green-300);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.hero__eyebrow::before {
  content: "";
  width: 2.75rem;
  height: var(--hairline);
  background-color: currentColor;
}

.hero__title {
  margin-bottom: var(--spacing-md);
  color: var(--color-cream);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.hero__title-accent {
  color: var(--color-green-300);
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--spacing-lg);
  color: var(--color-cream);
  font-size: clamp(var(--fs-400), 1.6vw, var(--fs-500));
  line-height: 1.6;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* --- slide controls --- */
.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--cut-height) + 3.5rem);
  z-index: var(--z-content);
  display: flex;
  gap: var(--spacing-2xs);
}

.hero__dot {
  position: relative;
  width: 3.25rem;
  height: 3px;
  padding: 0;
  background-color: rgba(247, 245, 238, 0.28);
  overflow: hidden;
  transition: background-color var(--duration-fast) var(--ease-out-soft);
}

.hero__dot:hover {
  background-color: rgba(247, 245, 238, 0.5);
}

.hero__dot-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background-color: var(--color-green-400);
  transform: scaleX(0);
  transform-origin: left;
}

/* Progress sweep tied to the autoplay interval (see animations.css) */
.hero__dot.is-active .hero__dot-fill {
  animation: dot-progress var(--hero-interval, 7000ms) linear forwards;
}

/* --- service-area map ---------------------------------------------------
   Sits over the exposed photo on the right, clear of the wedge, the dots and
   the scroll cue. Sized so the county labels stay readable — below roughly
   19rem the type in the artwork turns to mush, which is the whole reason the
   map is here. */
.hero__map {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--cut-height) + 6rem);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: clamp(15rem, 24vw, 22rem);
  margin: 0;
  pointer-events: none;
}

.hero__map-img {
  width: 100%;
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.8));
}

.hero__map-label {
  color: var(--color-cream);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0.7;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* --- scroll cue --- */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cut-height) + 1.75rem);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xs);
  color: var(--text-muted);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.hero__cue:hover {
  color: var(--color-green-300);
}

/* Over photography the blades are a true silhouette; a faint lime rim-light
   keeps the edge from disappearing into the scrim. */
.hero__divider {
  z-index: var(--z-divider);
  filter: drop-shadow(0 -2px 7px rgba(124, 181, 24, 0.3));
}


/* --------------------------------------------------------------------------
   Grass silhouette dividers
   -------------------------------------------------------------------------- */
.divider {
  position: absolute;
  inset: auto 0 0 0;
  z-index: var(--z-divider);
  height: clamp(3rem, 6vw, 5.5rem);
  pointer-events: none;
  line-height: 0;
}

.divider svg {
  width: 100%;
  height: 100%;
}

.divider--grass .grass__soil {
  fill: var(--color-black);
}

/* Depth cue: the near blades catch what light there is, and the taller layer
   behind them falls away to black. Painting it the other way round put the
   silhouette in front of the lit grass, which read as one flat cut-out row. */
.divider--grass .grass__blade {
  fill: var(--color-green-900);
}

.divider--grass .grass__blades--back .grass__blade {
  fill: var(--color-black);
}

/* Flipped: sits on the top edge of a section and points up into the one above */
.divider--flip {
  inset: 0 0 auto 0;
  transform: scaleY(-1);
}

/* Green-lit variant: a turf strip with the blades growing out of it, rather
   than a silhouette cut out of the section edge. */
.divider--lit .grass__blade {
  fill: var(--color-green-900);
}

/* Faded so the strip sinks into the black section beyond it instead of ending
   on a hard horizontal line (gradient defined in the sprite). */
.divider--lit .grass__soil {
  fill: url(#grass-soil-fade);
}

.divider--lit .grass__blades--back .grass__blade {
  fill: var(--color-green-950);
}

.grass__soil-near {
  stop-color: var(--color-green-900);
}

.grass__soil-far {
  stop-color: var(--color-black);
}


/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.intro__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* The lead paragraph already separates the heading from the body copy here,
   so the standard section-head gap is too much. */
.intro__copy .section-head {
  margin-bottom: var(--spacing-md);
}

.intro__body {
  margin-bottom: var(--spacing-sm);
  color: var(--text-muted);
}

.intro__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: var(--hairline) solid var(--border-hairline);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-orange-500);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--fs-200);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.intro__media {
  position: relative;
  margin: 0;
}

.intro__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Angled corner cut so the photo echoes the hero's diagonal */
.intro__media::before {
  content: "";
  position: absolute;
  inset: auto auto -1rem -1rem;
  width: 42%;
  height: 42%;
  border-left: 2px solid var(--color-green-400);
  border-bottom: 2px solid var(--color-green-400);
  border-bottom-left-radius: var(--radius-md);
  opacity: 0.75;
  pointer-events: none;
}

.intro__badge {
  position: absolute;
  right: clamp(-1rem, -1vw, 0rem);
  bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  max-width: 17rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: rgba(0, 0, 0, 0.92);
  border-left: 3px solid var(--color-orange-500);
  color: var(--text-muted);
  font-size: var(--fs-300);
  line-height: 1.35;
  box-shadow: var(--shadow-card);
}

.intro__badge .icon {
  color: var(--color-green-400);
}

.intro__badge strong {
  color: var(--color-orange-500);
}


/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-black);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out-expo),
    border-color var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--color-green-900);
  box-shadow: var(--shadow-lift);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform var(--duration-slower) var(--ease-out-expo);
}

.card:hover .card__media img {
  transform: scale(1.07);
}

.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
}

.card__title {
  color: var(--color-cream);
}

.card__title em {
  color: var(--color-green-300);
  font-style: italic;
  text-transform: none;
}

.card__text {
  flex: 1;
  color: var(--text-muted);
  font-size: var(--fs-300);
}


/* --------------------------------------------------------------------------
   Why Choose Us pillars
   -------------------------------------------------------------------------- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.pillar {
  text-align: center;
}

.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-green-400);
  border: var(--hairline) solid var(--color-green-900);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  transition: color var(--duration-base) var(--ease-out-soft),
    border-color var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft),
    transform var(--duration-base) var(--ease-out-expo);
}

.pillar:hover .pillar__icon {
  color: var(--color-green-300);
  border-color: var(--color-green-400);
  box-shadow: var(--glow-green);
  transform: translateY(-4px);
}

.pillar__title {
  margin-bottom: var(--spacing-2xs);
  color: var(--color-cream);
}

.pillar__text {
  color: var(--text-muted);
  font-size: var(--fs-300);
}

.why__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
  text-align: center;
}

.why__cta-note {
  color: var(--text-muted);
  font-size: var(--fs-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Service tiles
   -------------------------------------------------------------------------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 26rem;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--duration-base) var(--ease-out-soft),
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-out-soft);
}

.tile:hover {
  border-color: var(--color-green-500);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out-expo);
}

.tile:hover .tile__media img {
  transform: scale(1.08);
}

/* Base scrim + green wipe that sweeps up on hover */
.tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.6) 45%,
    rgba(0, 0, 0, 0.93) 100%
  );
}

.tile__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(36, 67, 10, 0) 0%, rgba(36, 67, 10, 0.72) 100%);
  opacity: 0;
  transform: translateY(35%);
  transition: opacity var(--duration-base) var(--ease-out-soft),
    transform var(--duration-slow) var(--ease-out-expo);
}

.tile:hover .tile__media::before {
  opacity: 1;
  transform: translateY(0);
}

.tile__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2xs);
  padding: var(--spacing-md);
}

.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--spacing-2xs);
  color: var(--color-green-300);
  background-color: rgba(0, 0, 0, 0.6);
  border: var(--hairline) solid var(--color-green-900);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-base) var(--ease-out-soft),
    color var(--duration-base) var(--ease-out-soft);
}

.tile:hover .tile__icon {
  background-color: var(--color-green-400);
  color: var(--color-black);
}

.tile__title {
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  color: var(--color-cream);
}

.tile__text {
  max-height: 0;
  color: var(--text-muted);
  font-size: var(--fs-300);
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out-expo),
    opacity var(--duration-base) var(--ease-out-soft),
    margin var(--duration-slow) var(--ease-out-expo);
}

.tile:hover .tile__text,
.tile:focus-within .tile__text {
  max-height: 9rem;
  margin-top: var(--spacing-3xs);
  opacity: 1;
}

/* CTA tile — no photo, orange-edged */
.tile--cta {
  align-items: center;
  background: linear-gradient(160deg, var(--color-black-800) 0%, var(--color-black) 100%);
  border-color: var(--color-green-900);
}

.tile--cta .tile__body {
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
}

.tile--cta .tile__text {
  max-height: none;
  opacity: 1;
  overflow: visible;
}

.tile--cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-green-400), var(--color-orange-500));
}


/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Capped at half the asset's pixel width so 2x displays still get a full
   device pixel per image pixel — the artwork is raster, not vector, and
   upscaling it is what made it look jagged. */
.about__mark {
  max-width: 26rem;
}

.about__mark img {
  width: 100%;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 40px rgba(124, 181, 24, 0.25));
}

.about__body {
  margin-bottom: var(--spacing-sm);
  color: var(--text-muted);
}

.about__copy h2 {
  margin-bottom: var(--spacing-md);
  color: var(--color-cream);
}

.about__points {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.about__points li {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--color-cream);
  font-size: var(--fs-300);
}

.about__points .icon {
  color: var(--color-green-400);
}


/* --------------------------------------------------------------------------
   Work gallery
   -------------------------------------------------------------------------- */
/* Fixed row height keeps the mosaic flush — wide tiles span two columns of the
   same row rather than growing taller and leaving holes in the grid. */
.work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(11rem, 17vw, 16rem);
  gap: var(--spacing-sm);
}

.work__item--wide {
  grid-column: span 2;
}

.work__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
}

.work__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out-expo),
    filter var(--duration-base) var(--ease-out-soft);
  filter: saturate(0.85) brightness(0.82);
}

.work__btn:hover img,
.work__btn:focus-visible img {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1);
}

.work__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(36, 67, 10, 0.7) 100%);
  color: var(--color-cream);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}

.work__btn:hover .work__overlay,
.work__btn:focus-visible .work__overlay {
  opacity: 1;
}

.lightbox__caption[hidden] {
  display: none;
}


/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(36, 67, 10, 0.35) 0%, rgba(0, 0, 0, 0) 60%),
    var(--color-black);
}

.contact__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact__list {
  display: flex;
  flex-direction: column;
}

.contact__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding-block: var(--spacing-sm);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.contact__row:first-child {
  padding-top: 0;
}

.contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  color: var(--color-green-400);
  background-color: var(--bg-panel);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
}

.contact__row--action .contact__icon {
  color: var(--color-orange-500);
  border-color: rgba(245, 166, 35, 0.4);
}

.contact__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.contact__label {
  color: var(--text-muted);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.contact__value {
  color: var(--color-cream);
  font-size: var(--fs-400);
  line-height: 1.4;
  transition: color var(--duration-fast) var(--ease-out-soft);
}

a.contact__value:hover {
  color: var(--color-green-300);
}

.contact__value--action {
  color: var(--color-orange-500);
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

a.contact__value--action:hover {
  color: var(--color-orange-400);
}

.contact__area {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--bg-panel);
  border-left: 3px solid var(--color-green-400);
  border-radius: var(--radius-sm);
}

.contact__area-title {
  margin-bottom: var(--spacing-2xs);
  color: var(--color-cream);
  font-size: var(--fs-500);
}

.contact__area-text {
  color: var(--text-muted);
  font-size: var(--fs-300);
  line-height: 1.85;
}


/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.contact__form-wrap {
  position: relative;
}

.form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: linear-gradient(165deg, var(--color-black-800) 0%, var(--color-black) 100%);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Diagonal accent bar echoing the hero cut */
.form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-green-400) 0%, var(--color-green-700) 55%, var(--color-orange-500) 100%);
}

.form__title {
  margin-bottom: var(--spacing-2xs);
  color: var(--color-cream);
  font-size: var(--fs-600);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xs);
  min-width: 0;
  border: 0;
  padding: 0;
}

.field__label {
  color: var(--text-muted);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.field__label span {
  color: var(--color-orange-500);
}

.field__input {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--bg-field);
  border: var(--hairline) solid var(--color-black-600);
  border-radius: var(--radius-sm);
  color: var(--color-cream);
  font-size: var(--fs-400);
  transition: border-color var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft),
    background-color var(--duration-fast) var(--ease-out-soft);
}

.field__input::placeholder {
  color: rgba(168, 175, 160, 0.55);
}

.field__input:hover {
  border-color: var(--color-green-900);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-green-400);
  background-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(124, 181, 24, 0.18);
}

.field__input--area {
  resize: vertical;
  min-height: 6.5rem;
  line-height: 1.55;
}

.field__select {
  position: relative;
}

.field__select select {
  appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
}

.field__select .icon {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  color: var(--color-green-400);
  pointer-events: none;
  transform: translateY(-50%);
}

.field__error {
  min-height: 1rem;
  color: var(--color-orange-400);
  font-size: var(--fs-100);
  letter-spacing: 0.04em;
}

.field.has-error .field__input {
  border-color: var(--color-orange-500);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.16);
}

.field--group legend {
  margin-bottom: var(--spacing-2xs);
  padding: 0;
}

/* Service chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip span {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  background-color: var(--bg-field);
  border: var(--hairline) solid var(--color-black-600);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft);
}

.chip:hover span {
  border-color: var(--color-green-500);
  color: var(--color-cream);
}

.chip input:checked + span {
  background-color: var(--color-green-400);
  border-color: var(--color-green-400);
  color: var(--color-black);
  transform: translateY(-1px);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--color-orange-500);
  outline-offset: 2px;
}

/* Netlify honeypot — must stay in the DOM but never be seen or focusable */
.form__bot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Shown only when the submission actually fails, so the visitor still has a
   way through instead of a form that silently swallowed their request. */
.form__alert {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: rgba(245, 166, 35, 0.12);
  border-left: 3px solid var(--color-orange-500);
  border-radius: var(--radius-sm);
  color: var(--color-cream);
  font-size: var(--fs-300);
}

.form__alert[hidden] {
  display: none;
}

.form__alert a {
  color: var(--color-orange-500);
  font-weight: var(--fw-semibold);
}

.form__note {
  color: var(--text-muted);
  font-size: var(--fs-200);
  text-align: center;
}

.form__note a {
  color: var(--color-orange-500);
  font-weight: var(--fw-semibold);
}

/* Success state overlays the form */
.form__success {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-lg);
  background: linear-gradient(165deg, var(--color-black-800) 0%, var(--color-black) 100%);
  text-align: center;
}

.form__success[hidden] {
  display: none;
}

.form__success .icon {
  color: var(--color-green-400);
}

.form__success h4 {
  color: var(--color-cream);
}

.form__success p {
  max-width: 26rem;
  color: var(--text-muted);
  font-size: var(--fs-300);
}

.form__success a {
  color: var(--color-orange-500);
  font-weight: var(--fw-semibold);
}


/* --------------------------------------------------------------------------
   Thank-you page (no-JS form fallback)
   -------------------------------------------------------------------------- */
.thanks {
  display: flex;
  align-items: center;
  min-height: 100svh;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(36, 67, 10, 0.35) 0%, rgba(0, 0, 0, 0) 60%),
    var(--color-black);
}

.thanks__inner {
  text-align: center;
}

.thanks__logo {
  margin-inline: auto;
  margin-bottom: var(--spacing-xl);
}

.thanks .eyebrow {
  justify-content: center;
}

.thanks__lead {
  max-width: 34rem;
  margin: var(--spacing-md) auto 0;
  color: var(--text-muted);
  font-size: var(--fs-500);
  line-height: 1.55;
}

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.thanks__meta {
  margin-top: var(--spacing-xl);
  color: var(--text-muted);
  font-size: var(--fs-200);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.map {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.map__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.map__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--color-cream);
  font-size: var(--fs-500);
  letter-spacing: 0.04em;
}

.map__title .icon {
  color: var(--color-green-400);
}

.map__frame {
  position: relative;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.map__frame iframe {
  width: 100%;
  height: clamp(20rem, 42vw, 27rem);
  border: 0;
  /* Deliberately light — enough to sit in the dark palette, not enough to
     hurt street-label legibility or dim Google's attribution. */
  filter: grayscale(0.15) brightness(0.92) contrast(1.02);
}

.map__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  padding-top: clamp(3rem, 7vw, 5rem);
  background-color: var(--color-black-800);
  border-top: var(--hairline) solid var(--border-hairline);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: var(--spacing-xl);
}

.footer__tagline {
  max-width: 22rem;
  margin-top: var(--spacing-sm);
  color: var(--text-muted);
  font-size: var(--fs-300);
}

.footer__heading {
  margin-bottom: var(--spacing-sm);
  color: var(--color-green-300);
  font-size: var(--fs-300);
  letter-spacing: var(--ls-wide);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.footer__list a {
  color: var(--text-muted);
  font-size: var(--fs-300);
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.footer__list a:hover {
  color: var(--color-cream);
}

.footer__list--contact a {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xs);
}

.footer__list--contact .icon {
  margin-top: 0.2rem;
  color: var(--color-green-400);
}

.footer__phone {
  color: var(--color-orange-500) !important;
  font-size: var(--fs-500) !important;
  font-weight: var(--fw-semibold);
}

.footer__phone:hover {
  color: var(--color-orange-400) !important;
}

.footer__bar {
  border-top: var(--hairline) solid var(--border-hairline);
  padding-block: var(--spacing-sm);
}

.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xs);
  color: var(--text-muted);
  font-size: var(--fs-200);
}

.footer__credit {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Designer credit — deliberately quiet: muted tone, small mark, and it only
   comes up to full strength on hover. */
.footer__designer {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--text-muted);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft);
}

.footer__designer:hover {
  opacity: 1;
  color: var(--color-cream);
}

.footer__designer-mark {
  height: 2.25rem;
  width: auto;
  flex: none;
}


/* --------------------------------------------------------------------------
   Mobile sticky call bar
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-callbar);
  display: none;
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.callbar.is-visible {
  transform: translateY(0);
}

.callbar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  padding: 0.85rem var(--spacing-sm);
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  background-color: var(--color-orange-500);
  color: var(--color-black);
}

.callbar__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.callbar__text strong {
  color: var(--color-black);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.callbar__text span {
  font-size: var(--fs-500);
  font-weight: var(--fw-semibold);
}


/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.93);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}

.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(64rem, 100%);
  transform: scale(0.96);
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.lightbox.is-open .lightbox__figure {
  transform: scale(1);
}

.lightbox__img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border: var(--hairline) solid var(--color-black-600);
  border-radius: var(--radius-md);
}

.lightbox__caption {
  margin-top: var(--spacing-xs);
  color: var(--text-muted);
  font-size: var(--fs-200);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-cream);
  background-color: rgba(0, 0, 0, 0.6);
  border: var(--hairline) solid var(--color-black-600);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft);
}

.lightbox__close:hover {
  color: var(--color-green-300);
  border-color: var(--color-green-400);
}