/* ========================================
   ZONE GROUP — Main Homepage CSS
   ======================================== */

/* ==========================================
   HOME NAV
   ========================================== */

/* Homepage header — white bar */
.home-nav {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 1px 12px rgba(0,0,0,0.06);
}

.home-nav.scrolled {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
}

/* dark logo text on white nav */
.home-nav .logo-name {
  color: #111;
}

/* dark nav links on white nav */
.home-nav .main-nav a {
  color: rgba(0,0,0,0.65);
}

.home-nav .main-nav a:hover {
  color: #111;
}

/* green phone button on white nav */
.home-nav .btn-phone {
  color: #2e7d32;
  border-color: rgba(79,195,82,0.45);
  background: rgba(79,195,82,0.06);
}

.home-nav .btn-phone:hover {
  color: #1b5e20;
  border-color: #4fc352;
  background: rgba(79,195,82,0.13);
}

/* ==========================================
   HOME HERO  —  CSS background-image, bright sky, floating cards
   ========================================== */

.hm-hero {
  position: relative;
  min-height: 1020px;
  overflow: visible;          /* cards float out the bottom — must not clip */

  /* Instant placeholder — visible before any image byte arrives */
  background-color: #c5d5c2;
}

/* Optimised responsive hero background — absolutely positioned <picture> */
.hm-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: block;
}

.hm-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40px;
  display: block;
}

/* Text wrapper — centered in the bright sky area */
.hm-hero-text-wrap {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  text-align: center;
}

.hm-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.hm-hero-eyebrow {
  display: inline-block;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2e7d32;
  margin-bottom: 26px;
}

.hm-hero-headline {
  /* scale so both lines fit on one row each across viewports */
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #111;
  margin-bottom: 28px;
}

/* each span is its own locked line — no internal wrapping */
.hm-hl-line {
  display: block;
  white-space: nowrap;
}

.hm-hero-headline em {
  font-style: normal;
  color: #4fc352;
}

.hm-hero-sub {
  font-size: clamp(0.95rem, 1.7vw, 1.08rem);
  color: rgba(0,0,0,0.58);
  line-height: 1.72;
  /* wide enough so "properties" stays on the same line */
  max-width: 660px;
  margin: 0 auto 28px;
}

/* on mobile: allow wrapping again — nowrap would overflow narrow screens */
@media (max-width: 640px) {
  .hm-hl-line { white-space: normal; }
  .hm-hero-headline { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .hm-hero-sub { max-width: 100%; }
}

.hm-hero-location {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.38);
}

.hm-hero-location::before,
.hm-hero-location::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(0,0,0,0.18);
}

/* ==========================================
   FLOATING CARDS  —  absolute inside hero, independent of white section
   ========================================== */

/* Cards sit at the bottom of the hero, breaking out downward.
   They overlap the hero image AND the white section below.
   The white section itself never moves — only the cards float. */
.hm-cards-float {
  position: absolute;
  left: 50%;
  bottom: -250px;
  transform: translateX(-50%);
  z-index: 5;
  width: min(1120px, calc(100% - 48px));
}

.hm-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* ── Individual Card ── */
.hm-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform 0.30s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.30s cubic-bezier(0.25,0.46,0.45,0.94);
  background: #0d1a0d;
}

.hm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.26), 0 4px 12px rgba(0,0,0,0.14);
}

/* Image area — top portion */
.hm-card-img {
  position: relative;
  height: 400px;
  overflow: hidden;
  flex-shrink: 0;
}

.hm-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.50s cubic-bezier(0.25,0.46,0.45,0.94);
}

.hm-card:hover .hm-card-img img {
  transform: scale(1.05);
}

/* cinematic fade — pure black, no green tint */
.hm-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    45%,
    rgba(0,0,0,0.55) 68%,
    rgba(0,0,0,0.92) 100%
  );
}

/* Dark content panel — bottom portion */
.hm-card-body {
  padding: 28px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.hm-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

.hm-card-tag svg {
  color: #4fc352;
  flex-shrink: 0;
}

.hm-card-accent {
  font-size: clamp(0.88rem, 1.4vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #4fc352;
  line-height: 1.4;
  margin-bottom: 14px;
}

.hm-card-desc {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.50);
  line-height: 1.70;
  margin-bottom: 28px;
  flex: 1;
}

.hm-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  background: #4fc352;
  padding: 13px 22px;
  border-radius: 10px;
  letter-spacing: 0.01em;
  transition: background 0.20s, gap 0.20s, transform 0.18s;
  align-self: flex-start;
  width: 100%;
  justify-content: center;
}

.hm-card-cta svg {
  transition: transform 0.20s;
  flex-shrink: 0;
}

.hm-card:hover .hm-card-cta {
  background: #3db340;
  gap: 12px;
}

.hm-card:hover .hm-card-cta svg {
  transform: translateX(3px);
}

/* ==========================================
   PARTNERS SECTION
   ========================================== */

.hm-partners {
  position: relative;
  z-index: 1;
  background: #fff;
  /* top padding clears the floating cards — white section stays flat */
  padding: 350px 0 72px;
  overflow: hidden;
}

.hm-partners-header {
  text-align: center;
  padding-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.hm-partners-header::before,
.hm-partners-header::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: rgba(0,0,0,0.10);
}

.hm-partners-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.28);
  white-space: nowrap;
}

.hm-partners-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.hm-partners-track {
  display: flex;
  animation: hm-marquee 36s linear infinite;
  width: max-content;
}

.hm-partners-track:hover {
  animation-play-state: paused;
}

@keyframes hm-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hm-partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  height: 64px;
  flex-shrink: 0;
}

.hm-partner-logo {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  /* greyscale + low opacity for a cohesive, premium look */
  filter: grayscale(100%) opacity(0.35);
  transition: filter 0.25s ease;
}

.hm-partner-item:hover .hm-partner-logo {
  filter: grayscale(100%) opacity(0.65);
}

.hm-partner-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0,0,0,0.12);
  flex-shrink: 0;
  align-self: center;
}

/* ==========================================
   DIFFERENCE SECTION  —  editorial layout
   ========================================== */

.hm-diff {
  background: #f9f9f7;
  padding: 82px 0 90px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.hm-diff-layout {
  display: grid;
  grid-template-columns: 1.15fr 1.85fr;
  gap: 56px;
  align-items: center;
}

.hm-diff-intro {
  position: sticky;
  top: 100px;
}

.hm-diff-eyebrow {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4fc352;
  margin-bottom: 22px;
  display: block;
}

.hm-diff-heading {
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #111;
  line-height: 1.08;
  margin-bottom: 24px;
}

.hm-diff-heading em {
  font-style: normal;
  color: #4fc352;
}

/* Each phrase stays on one line — never wraps mid-sentence */
.hm-diff-hl {
  display: block;
  white-space: nowrap;
}

.hm-diff-sub {
  font-size: 0.92rem;
  color: rgba(0,0,0,0.48);
  line-height: 1.76;
  max-width: none;   /* column width already constrains — no need to clip it further */
}

/* ── 3×2 editorial grid ──
   Interior dividers only — no outer borders, no closed rectangles.
   Vertical lines appear between columns 1-2 and 2-3.
   Horizontal line appears between rows 1 and 2.            */
.hm-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.hm-diff-item {
  padding: 40px 18px 36px;
  text-align: center;
  transition: background 0.22s;
}

.hm-diff-item:hover {
  background: rgba(79,195,82,0.03);
}

/* Vertical interior dividers — right border on col 1 & col 2 only */
.hm-diff-item:not(:nth-child(3n)) {
  border-right: 1px solid rgba(0,0,0,0.052);
}

/* Horizontal interior divider — bottom border on row 1 only */
.hm-diff-item:nth-child(-n+3) {
  border-bottom: 1px solid rgba(0,0,0,0.052);
}

.hm-diff-icon {
  color: #4fc352;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.hm-diff-item-title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111;
  margin-bottom: 12px;
}

.hm-diff-item-desc {
  font-size: 0.85rem;
  color: rgba(0,0,0,0.48);
  line-height: 1.74;
  max-width: 100%;
  margin: 0 auto;
}

/* ==========================================
   STATS BAND  —  cinematic image background
   ========================================== */

.hm-stats {
  position: relative;
  padding: 100px 0 96px;
  overflow: hidden;

  /* Premium dark-green gradient — blooms concentrated in upper stats area */
  background-color: #070c07;
  background-image:
    /* left bloom — sits in the stats row, fades well before CTA */
    radial-gradient(ellipse 120% 55% at 8% 22%, rgba(38,128,66,0.13) 0%, transparent 60%),
    /* right counter-light — top-right, stays in stats zone */
    radial-gradient(ellipse 75% 65% at 92% 8%, rgba(26,90,44,0.09) 0%, transparent 55%),
    /* very faint centre warmth — shifted up, so CTA area is naturally calmer */
    radial-gradient(ellipse 55% 45% at 50% 28%, rgba(46,156,82,0.05) 0%, transparent 50%);

  /* Inset depth — top shadow heavier, bottom lighter */
  box-shadow:
    inset 0 10px 52px rgba(0,0,0,0.32),
    inset 0 -8px 32px rgba(0,0,0,0.18);
}

/* Cinematic vertical vignette — top edge + gentle mid-section settling */
.hm-stats-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.26) 0%,    /* top edge depth */
    rgba(0,0,0,0)    22%,
    rgba(0,0,0,0.07) 58%,   /* very gentle mid darkening → calms CTA area */
    rgba(0,0,0,0.22) 100%   /* bottom edge into footer */
  );
  z-index: 0;
}

.hm-stats .container {
  position: relative;
  z-index: 1;
}

.hm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hm-stat-item {
  text-align: center;
  padding: 0 32px;
  position: relative;
}

/* Thin vertical dividers between stats */
.hm-stat-item + .hm-stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,0.12);
}

.hm-stat-number {
  font-size: clamp(2.6rem, 4.2vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #4fc352;
  line-height: 1;
  margin-bottom: 14px;
}

/* suffix symbols (+, %) inherit green */
.hm-stat-number span {
  color: #4fc352;
}

/* "Seasons" word sits inline at reduced size */
.hm-stat-unit {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #4fc352;
}

.hm-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* ==========================================
   STATS INLINE CTA  —  inside the green gradient band
   ========================================== */

/* Thin rule separating stats row from CTA */
.hm-stats-rule {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 58px 0 54px;
}

.hm-stats-cta {
  text-align: center;
  max-width: 1080px;   /* wide enough for the headline to sit on one line */
  margin: 0 auto;
  padding-bottom: 8px;
}

.hm-stats-cta-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4fc352;
  margin-bottom: 24px;
}

.hm-stats-cta-heading {
  font-size: clamp(1.85rem, 2.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hm-stats-cta-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.40);
  line-height: 1.72;
  margin-bottom: 46px;
}

.hm-stats-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hm-stats-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 10px;
  padding: 14px 28px;
  text-decoration: none;
  transition: background 0.20s, border-color 0.20s, gap 0.20s, transform 0.18s;
}

.hm-stats-cta-btn svg {
  transition: transform 0.20s;
  flex-shrink: 0;
}

.hm-stats-cta-btn:hover svg { transform: translateX(3px); }

/* Solid green — primary */
.hm-stats-cta-btn-primary {
  background: #4fc352;
  color: #fff;
  border: 1.5px solid #4fc352;
}

.hm-stats-cta-btn-primary:hover {
  background: #3db340;
  border-color: #3db340;
  gap: 12px;
}

/* Ghost — secondary */
.hm-stats-cta-btn-outline {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.80);
  border: 1.5px solid rgba(255,255,255,0.16);
}

.hm-stats-cta-btn-outline:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.30);
  gap: 12px;
}

/* ==========================================
   RESPONSIVE — MEDIUM DESKTOP (1181px – 1439px)
   Cards scale down ~10%; hero compresses slightly.
   ========================================== */

@media (min-width: 1181px) and (max-width: 1439px) {
  .hm-hero        { min-height: 960px; }
  .hm-cards-float { bottom: -210px; width: min(1020px, calc(100% - 48px)); }
  .hm-cards-grid  { gap: 24px; }
  .hm-card-img    { height: 360px; }
  .hm-card-body   { padding: 24px 28px 32px; }
  .hm-partners    { padding-top: 310px; }
}

/* ==========================================
   RESPONSIVE — NON-HERO LAYOUT (≤ 1023px)
   Difference section, stats grid — both tablet ranges.
   ========================================== */

@media (max-width: 1023px) {
  .hm-diff-layout { grid-template-columns: 1fr; gap: 48px; }
  .hm-diff-intro  { position: static; }
  .hm-diff-sub    { max-width: 100%; }
  .hm-diff-grid   { grid-template-columns: repeat(2, 1fr); }

  .hm-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-stat-item + .hm-stat-item::before { display: none; }
  .hm-stat-item { padding: 28px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .hm-stat-item:nth-child(3),
  .hm-stat-item:nth-child(4) { border-bottom: none; }
  .hm-stats-rule { margin: 56px 0 52px; }
}

/* ==========================================
   RESPONSIVE — TABLET / iPAD (769px – 1180px)
   Covers iPad mini landscape → iPad Air landscape.
   Text moves up, cards scale down, text-safe gradient added.
   ========================================== */

@media (min-width: 769px) and (max-width: 1180px) {
  .hm-hero           { min-height: 860px; }
  .hm-hero-text-wrap { padding-top: 100px; }
  .hm-cards-float    { bottom: -150px; width: min(800px, calc(100% - 40px)); }
  .hm-cards-grid     { gap: 14px; }
  .hm-card-img       { height: 235px; }
  .hm-card-body      { padding: 18px 20px 22px; }
  .hm-partners       { padding-top: 220px; }

  /* Text-safe zone — very subtle radial glow behind the copy block so the
     location line stays readable over any horizon / sprinkler detail */
  .hm-hero-inner {
    position: relative;
  }
  .hm-hero-inner::before {
    content: '';
    position: absolute;
    inset: -52px -80px;
    background: radial-gradient(
      ellipse 82% 78% at 50% 46%,
      rgba(255,255,255,0.40) 0%,
      rgba(255,255,255,0.18) 40%,
      transparent 100%
    );
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
  }

  /* Strengthen location line so it reads clearly over the landscape */
  .hm-hero-location {
    color: rgba(0,0,0,0.55);
  }
  .hm-hero-location::before,
  .hm-hero-location::after {
    background: rgba(0,0,0,0.30);
  }
}

/* ==========================================
   RESPONSIVE — SHORT VIEWPORT OVERRIDE
   iPad landscape (portrait ~768–860px tall).
   Constrains hero to viewport height so card tops
   land above the fold; hides location line to
   preserve the text / card gap.
   ========================================== */

@media (min-width: 769px) and (max-width: 1180px) and (max-height: 860px) {
  .hm-hero           { min-height: min(760px, 90vh); }
  .hm-hero-text-wrap { padding-top: 76px; }
  .hm-cards-float    { bottom: -120px; }
  .hm-card-img       { height: 190px; }
  .hm-partners       { padding-top: 190px; }

  /* Location line is hidden on very short viewports — prevents overlap
     with the card tops that float up into the hero on compact screens */
  .hm-hero-location  { display: none; }
}

/* ==========================================
   RESPONSIVE — MOBILE (≤ 768px)
   ========================================== */

@media (max-width: 768px) {
  /* hero shrinks to just show the sky text; bottom padding makes room for stacked cards */
  .hm-hero {
    min-height: auto;
    padding-bottom: 420px;
  }

  .hm-hero-text-wrap { padding-top: 110px; }
  .hm-hero-headline  { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .hm-hl-line        { white-space: normal; }
  .hm-hero-sub       { max-width: 100%; }

  /* cards stack vertically — still float, just taller overlap area */
  .hm-cards-float {
    bottom: -360px;
    width: calc(100% - 32px);
  }

  .hm-cards-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hm-card-img { height: 240px; }

  /* partners top padding accounts for the taller stacked card layout */
  .hm-partners { padding-top: 400px; }

  .hm-diff { padding: 60px 0 68px; }
  .hm-diff-grid   { grid-template-columns: 1fr; }
  .hm-diff-item   { padding: 28px 20px; }

  .hm-stats { padding: 56px 0 64px; }
  .hm-stats-grid { grid-template-columns: 1fr 1fr; }
  .hm-stat-item { padding: 20px 12px; }

  .hm-stats-rule { margin: 44px 0 40px; }
  .hm-stats-cta { max-width: 100%; }
  .hm-stats-cta-heading { font-size: clamp(1.65rem, 6vw, 2rem); }
  .hm-stats-cta-btns { flex-direction: column; align-items: center; }
  .hm-stats-cta-btn { justify-content: center; width: 100%; max-width: 280px; }
}