:root {
  --radius-pill: 9999px;
  --ease-motion: cubic-bezier(0.25, 1, 0.5, 1);
  --shadow-lime-glow: 0 10px 30px rgba(108, 171, 47, 0.3);
}

/* --- Hero Section --- */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--eco-dark-green);
}

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

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 31, 23, 0.65) 0%,
    rgba(10, 31, 23, 0.35) 40%,
    rgba(10, 31, 23, 0.75) 100%
  );
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(10, 31, 23, 0.5) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 20;
}

.hero-label {
  position: relative;
  z-index: 20;
}

.hero-highlight {
  color: var(--eco-lime);
  text-shadow: 0 0 30px rgba(82, 183, 136, 0.3);
}

.hero-card {
  position: relative;
  z-index: 20;
}

/* --- Hero Entrance Animations --- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-dot {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scroll-dot {
  animation: scroll-dot 2s ease-in-out infinite;
}

/* --- Hero Section Specific Styles --- */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

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

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 31, 23, 0.65) 0%,
    rgba(10, 31, 23, 0.35) 40%,
    rgba(10, 31, 23, 0.75) 100%
  );
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(10, 31, 23, 0.5) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 20;
  opacity: 0;
  animation: fade-in-up 1.2s ease-out forwards;
}

.hero-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-label {
  position: relative;
  z-index: 20;
}

.hero-title {
  position: relative;
  z-index: 20;
}

.hero-subtitle {
  position: relative;
  z-index: 20;
}

.hero-cta {
  position: relative;
  z-index: 20;
}

.hero-highlight {
  color: var(--eco-lime);
  text-shadow: 0 0 30px rgba(82, 183, 136, 0.3);
}

.hero-card {
  position: relative;
  z-index: 20;
}

/* --- Scroll Indicator --- */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-scroll-indicator .dot {
  width: 1.5px;
  height: 3px;
  background: var(--eco-lime);
  border-radius: 50%;
  animation: scroll-dot 2s ease-in-out infinite;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0A1F17;
}
::-webkit-scrollbar-thumb {
  background: #1B4D3E;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #52B788;
}

/* Light container scrollbar for Academy list */
.academy-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #C5C0B2 #F4F2EA;
}
.academy-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.academy-scrollbar::-webkit-scrollbar-track {
  background: #F4F2EA;
  border-radius: 4px;
}
.academy-scrollbar::-webkit-scrollbar-thumb {
  background: #C5C0B2;
  border-radius: 4px;
}
.academy-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #1E4D2B;
}

/* --- Enhanced Button Styles for Hero --- */
.btn-primary-lime.light-text {
  background: linear-gradient(135deg, #74C69D 0%, #52B788 50%, #2D6A4F 100%);
  color: #ffffff;
  font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 0.875rem 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  box-shadow: var(--shadow-lime-glow);
  transition: all 0.35s var(--ease-motion);
}

.btn-primary-lime.light-text:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 48px rgba(82, 183, 136, 0.65);
  filter: brightness(1.08);
}

.btn-secondary-outline {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.875rem 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  transition: all 0.35s var(--ease-motion);
}

.btn-secondary-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px);
}

.btn-secondary-outline:active {
  transform: translateY(-1px) scale(0.99);
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Approved landing-page composition — matched to 54.png. */
:root { --approved-ink:#0d182d; --approved-green:#123b2a; --approved-lime:#68ae28; --approved-paper:#fbfaf7; }
body { background:var(--approved-paper); color:var(--approved-ink); }
.approved-hero { height:760px!important; min-height:760px; padding:0!important; }
.approved-hero > .absolute:first-child img { height:100%!important; width:100%!important; object-fit:cover!important; object-position:center!important; }
.approved-hero > .absolute:nth-child(2) { background:linear-gradient(90deg,rgba(1,10,8,.61),rgba(1,10,8,.22) 51%,rgba(1,10,8,.05))!important; }
.approved-hero .max-w-7xl { max-width:1280px!important; padding:118px 50px 34px!important; }.approved-hero h1 { font-size:60px!important; line-height:1.04!important; letter-spacing:-.055em!important; }.approved-hero h1 span { color:#70b82a!important; }.approved-hero p { font-size:16px!important; line-height:1.35!important; max-width:350px!important; }.approved-hero .grid { min-height:500px!important; gap:18px!important; }.approved-hero .lg\:col-span-5 { padding-top:18px; }


/* 53.png: top-of-page revision. */
.approved-hero { height:670px!important; min-height:670px!important; }
.approved-hero .max-w-7xl { padding-top:100px!important; padding-bottom:30px!important; }
.approved-hero h1 { font-family:'Playfair Display',serif!important; font-size:50px!important; font-weight:700!important; letter-spacing:-.045em!important; line-height:.98!important; }
.approved-hero p { font-size:14.5px!important; font-weight:600!important; }
.approved-hero .lg\:col-span-5 { padding-top:0px; }
.approved-hero .lg\:col-span-4 { margin-top:0px; max-width:365px; margin-left:auto; width:100%; }
.approved-hero .lg\:col-span-4 > div { min-height:54px; padding:10px 16px!important; border-radius:14px!important; background:rgba(8,26,18,0.78)!important; border:1px solid rgba(255,255,255,0.16)!important; }
.approved-hero .lg\:col-span-4 h4 { font-size:15px!important; font-weight:700!important; letter-spacing:-0.015em!important; color:#ffffff!important; line-height:1.25!important; margin:0!important; }
.approved-hero .lg\:col-span-4 p { font-size:12.5px!important; font-weight:500!important; color:rgba(226,232,240,0.92)!important; opacity:1!important; max-width:none!important; line-height:1.3!important; margin-top:2px!important; margin-bottom:0!important; }
.approved-primary-cta,.approved-secondary-cta { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 17px; border-radius:999px; font-size:11.5px; font-weight:800; transition:transform .2s,background .2s; }
.approved-primary-cta { color:#fff; background:#6cab2f; box-shadow:0 7px 20px rgba(51,107,14,.28); }.approved-primary-cta:hover { background:#5b9928; transform:translateY(-2px); }
.approved-secondary-cta { color:#fff; background:rgba(18,22,20,.72); border:1px solid rgba(255,255,255,.45); margin-left:8px; }.approved-secondary-cta:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }
.legacy-interlude { display:block!important; height:310px!important; padding:80px 24px 60px!important; background:linear-gradient(180deg,#062216 0%,#041d12 100%)!important; overflow:visible!important; }
.legacy-interlude .max-w-4xl { max-width:900px!important; }.legacy-interlude h2 { font-family:'Playfair Display',serif!important; font-size:28px!important; line-height:1.1!important; }.legacy-interlude .my-4 { margin:14px auto!important; }.legacy-interlude p { font-size:13.5px!important; }.legacy-interlude .mt-6 { margin-top:14px!important; }
.legacy-interlude > .absolute.top-0 svg { height:40px!important; color:#062216!important; }.legacy-interlude > .absolute.bottom-0 { transform:translateY(99%)!important; }.legacy-interlude > .absolute.bottom-0 svg { height:60px!important; color:#041d12!important; filter:none!important; }
@media (max-width:800px) { .approved-hero { height:auto!important; min-height:650px!important; padding-bottom:40px!important; }.approved-hero h1 { font-size:40px!important; }.approved-hero .max-w-7xl { padding-top:95px!important; }.approved-hero .lg\:col-span-4 { max-width:100%!important; margin-top:20px!important; }.approved-hero .lg\:col-span-4 h4 { font-size:14px!important; }.approved-hero .lg\:col-span-4 p { font-size:12px!important; }.approved-primary-cta,.approved-secondary-cta { height:37px; padding:0 12px; font-size:10.5px; }.legacy-interlude { height:290px; padding:70px 20px 50px!important; }.legacy-interlude h2 { font-size:23px!important; }.comparison-section { padding-top:60px!important; padding-bottom:60px!important; } }

/* ==================================================
   ACCESSIBILITY: VISIBLE FOCUS INDICATORS (C14.2)
   ================================================== */
:focus-visible {
  outline: 2px solid #6CAB2F !important;
  outline-offset: 2px !important;
}

/* Ensure interactive controls with focus:outline-none still receive accessible visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid #6CAB2F !important;
  outline-offset: 2px !important;
}

/* Contrast enhancement on eco-lime surfaces */
.bg-eco-lime:focus-visible,
.bg-\[\#6CAB2F\]:focus-visible,
.approved-primary-cta:focus-visible {
  outline: 2px solid #0A1F17 !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   Apple-Grade Interactive Field Test Degradation Timeline (Section 8)
   ========================================================================== */
.field-test-circle {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 14px -2px rgba(18, 51, 38, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  background-color: rgba(27, 77, 62, 0.08);
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.25s ease;
  will-change: transform, box-shadow;
  z-index: 10;
}

/* 1.5 inch physical enlargement = 144px at standard 96 DPI (144 / 80 = 1.8x scale) */
.group:hover .field-test-circle,
.field-test-circle:hover,
.field-test-circle:focus-visible {
  transform: scale(1.8) translateY(-6px);
  z-index: 50;
  border-color: #ffffff;
  box-shadow: 0 24px 48px -8px rgba(18, 51, 38, 0.45),
              0 12px 24px -4px rgba(0, 0, 0, 0.18),
              0 0 0 3px rgba(118, 192, 67, 0.85);
}

/* Specular glass sheen overlay */
.field-test-specular {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Day 7 special final result treatment */
.field-test-circle-final {
  border-color: #76C043;
  background-color: #76C043;
  box-shadow: 0 4px 16px -2px rgba(118, 192, 67, 0.35);
}

.group:hover .field-test-circle-final,
.field-test-circle-final:hover {
  border-color: #ffffff;
  box-shadow: 0 24px 48px -8px rgba(18, 51, 38, 0.45),
              0 12px 24px -4px rgba(0, 0, 0, 0.18),
              0 0 0 4px #76C043;
}

/* Final result checkmark overlay fades out on hover so the pristine soil is 100% visible */
.field-test-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(118, 192, 67, 0.3);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover .field-test-badge {
  opacity: 0;
}

/* Inner photo crisp scaling inside circle */
.field-test-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.group:hover .field-test-circle img {
  transform: scale(1.05);
}

/* Interactive label highlight */
.field-test-label {
  transition: color 0.25s ease, transform 0.25s ease;
}

.group:hover .field-test-label {
  color: #123326;
  transform: translateY(2px);
}

/* ==========================================================================
   ACCESSIBILITY: TARGETED REDUCED MOTION (C14.3-C1 / WCAG 2.2.2 & 2.3.3)
   Suppresses non-essential motion, continuous loops, parallax, and entrance
   transforms while strictly preserving focus visibility, active state feedback,
   and visual hierarchy.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  /* Suppress continuous looping animations (Class E) */
  .animate-scroll-dot,
  .hero-scroll-indicator .dot,
  .animate-pulse {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Suppress entrance keyframes & translation effects (Class C) */
  .hero-title,
  .hero-tagline,
  .hero-text,
  .hero-content {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Suppress AOS entrance transforms and reveal delays (Class C) */
  [data-aos] {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* Suppress mobile menu sliding entrance animation (Class C) */
  .animate-in,
  .slide-in-from-top {
    animation: none !important;
    transform: none !important;
  }

  /* Suppress decorative hover translations & image zoom scales (Class B)
     while preserving essential background, border, shadow, and color feedback */
  .card-hover:hover,
  .approved-primary-cta:hover,
  .approved-secondary-cta:hover,
  .hover\:-translate-y-0\.5:hover,
  .hover\:-translate-y-1:hover,
  .hover\:-translate-y-2:hover,
  .group:hover .group-hover\:translate-x-1,
  .group:hover .group-hover\:scale-105,
  .group:hover .group-hover\:scale-110,
  .group-hover\:scale-105:hover,
  .group-hover\:scale-110:hover,
  .group:hover .field-test-circle,
  .field-test-circle:hover,
  .group:hover .field-test-circle-final,
  .field-test-circle-final:hover {
    transform: none !important;
  }

  /* Layout transform transitions dampened to instantaneous */
  .transition-transform {
    transition-duration: 0.01ms !important;
  }
}