/* ============================================================
   THE GROVE — Website Stylesheet V1
   Constitution: §2 Visual Identity, §10.2 Website Structure
   Master CSS: grove-master-css.md V1.0

   USAGE: Link as <link rel="stylesheet" href="/css/grove-website.css">
   ============================================================ */

/* ---- 1. ROOT TOKENS ---- */
:root {
  /* Brand Colors */
  --grove-green: #4ADE80;
  --grove-green-light: #6AE89B;
  --grove-green-dark: #2D9A5E;
  --grove-green-deep: #1A7A42;
  --grove-teal: #2DD4BF;
  --grove-teal-dark: #0D9488;
  --grove-blue: #4B8FE5;

  /* Backgrounds — warm white ground */
  --grove-bg: #F5F0E8;
  --grove-bg-secondary: #EDE8E0;
  --grove-bg-tertiary: #E5E0D8;
  --grove-bg-dark: #DCD6CC;
  --grove-bg-pure: #FFFFFF;

  /* Text */
  --grove-text-primary: #1E293B;
  --grove-text-secondary: #4B5563;
  --grove-text-tertiary: #9CA3AF;

  /* Glow */
  --grove-glow-inner: rgba(150, 255, 180, 0.55);
  --grove-glow-mid: rgba(74, 222, 128, 0.35);
  --grove-glow-outer: rgba(74, 222, 128, 0.18);
  --grove-glow-depth: rgba(45, 154, 94, 0.25);
  --grove-green-rgb: 74, 222, 128;

  /* Shadows — pillowy neumorphic */
  --grove-shadow-light: rgba(255, 255, 255, 0.68);
  --grove-shadow-dark: rgba(180, 170, 155, 0.38);
  --grove-shadow-dark-soft: rgba(180, 170, 155, 0.25);

  /* Glass */
  --grove-glass-bg: rgba(255, 255, 255, 0.12);
  --grove-glass-border: rgba(255, 255, 255, 0.25);
  --grove-frost-bg: rgba(245, 240, 232, 0.65);

  /* Radii — pillowy scale */
  --grove-radius-xs: 16px;
  --grove-radius-sm: 32px;
  --grove-radius-md: 48px;
  --grove-radius-lg: 64px;
  --grove-radius-pill: 999px;

  /* Easing */
  --grove-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --grove-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --grove-ease-transform: cubic-bezier(0.23, 1, 0.32, 1);

  /* Durations */
  --grove-duration-fast: 0.25s;
  --grove-duration-normal: 0.4s;
  --grove-duration-slow: 0.6s;
  --grove-duration-ambient: 25s;

  /* Typography */
  --grove-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --grove-font-display: 'Inter', sans-serif;
}

/* ---- 2. GLOBAL RESET & BODY ---- */
body {
  background: var(--grove-bg) !important;
  color: var(--grove-text-primary);
  font-family: var(--grove-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Subtle organic noise texture via SVG data URI */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E") !important;
  background-size: 256px 256px !important;
}

/* Link colors */
a { color: var(--grove-green-dark); }
a:hover { color: var(--grove-green-deep); }

/* ---- 3. HEADER / NAVIGATION ---- */
.header {
  background: var(--grove-bg) !important;
  border-bottom: 1px solid rgba(180, 170, 155, 0.15);
  backdrop-filter: blur(12px);
}

.header-nav-item a {
  color: var(--grove-text-primary) !important;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: color var(--grove-duration-fast) var(--grove-smooth);
}

.header-nav-item a:hover {
  color: var(--grove-green-dark) !important;
}

/* Logo */
.header-title-text a {
  color: var(--grove-text-primary) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* CTA Button in nav */
.header-actions .btn {
  background: linear-gradient(160deg, #6AE89B 0%, var(--grove-green) 40%, var(--grove-green-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--grove-radius-pill) !important;
  padding: 10px 28px !important;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.55),
    2px 2px 6px rgba(180, 170, 155, 0.25),
    -5px -5px 14px rgba(255, 255, 255, 0.35),
    5px 5px 14px rgba(180, 170, 155, 0.15),
    inset 0 2px 4px rgba(150, 255, 180, 0.45),
    inset 0 -2px 4px rgba(45, 154, 94, 0.12),
    0 4px 18px var(--grove-glow-mid),
    0 8px 36px var(--grove-glow-outer);
  transition: all var(--grove-duration-fast) var(--grove-smooth);
}

.header-actions .btn:hover {
  background: linear-gradient(160deg, var(--grove-green) 0%, var(--grove-green-dark) 50%, var(--grove-green-deep) 100%) !important;
  box-shadow:
    -3px -3px 8px rgba(255, 255, 255, 0.65),
    3px 3px 8px rgba(180, 170, 155, 0.30),
    -7px -7px 18px rgba(255, 255, 255, 0.45),
    7px 7px 18px rgba(180, 170, 155, 0.20),
    inset 0 2px 6px rgba(150, 255, 180, 0.55),
    inset 0 -2px 6px rgba(45, 154, 94, 0.18),
    0 6px 26px rgba(74, 222, 128, 0.45),
    0 12px 52px rgba(74, 222, 128, 0.28);
  transform: translateY(-2px);
}

/* ---- 4. HERO SECTION ---- */
.grove-hero {
  position: relative;
  background: var(--grove-bg);
  padding: 80px 24px 60px;
  text-align: center;
  overflow: hidden;
}

.grove-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--grove-text-primary);
  margin-bottom: 24px;
}

/* "Green Revolution" — gradient text with shimmer flare sweep */
.grove-hero-flare {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--grove-green-dark) 0%,
    var(--grove-green) 25%,
    var(--grove-green-light) 50%,
    var(--grove-green) 75%,
    var(--grove-green-dark) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grove-hero-flare-sweep 6s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.25))
          drop-shadow(0 0 28px rgba(74, 222, 128, 0.10));
}

/* Shimmer removed — gradient sweep only */
.grove-hero-flare::after { display: none; }

@keyframes grove-hero-flare-sweep {
  0%, 8% { background-position: 100% 0; }
  46%, 54% { background-position: 0% 0; }
  92%, 100% { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grove-hero-flare {
    animation: none;
    background: linear-gradient(135deg, var(--grove-green-light), var(--grove-green), var(--grove-green-deep));
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.20));
  }
}

.grove-hero .grove-accent {
  background: linear-gradient(135deg, var(--grove-green-light), var(--grove-green-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grove-hero p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--grove-text-secondary);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.65;
}

/* Ambient glow orbs behind hero */
.grove-hero::before,
.grove-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.4;
  animation: grove-float-orb var(--grove-duration-ambient) ease-in-out infinite;
}

.grove-hero::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.25), transparent 70%);
  top: -100px;
  left: -100px;
}

.grove-hero::after {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.18), transparent 70%);
  bottom: -80px;
  right: -60px;
  animation-delay: -8s;
}

/* Hero dynamic background: aurora + canopy blobs + rings + radiance */
.grove-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 70%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 70%,
    transparent 100%
  );
}

/* Slow-rotating aurora: conic gradient light rays */
.grove-hero-aurora {
  position: absolute;
  width: 140%;
  height: 140%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(74, 222, 128, 0.06) 30deg,
    transparent 60deg,
    rgba(45, 212, 191, 0.05) 120deg,
    transparent 150deg,
    rgba(74, 222, 128, 0.07) 210deg,
    transparent 240deg,
    rgba(45, 154, 94, 0.04) 300deg,
    transparent 330deg,
    rgba(74, 222, 128, 0.06) 360deg
  );
  border-radius: 50%;
  filter: blur(60px);
  animation: grove-aurora-rotate 30s linear infinite;
}

/* Drifting canopy blobs: large organic shapes on independent orbits */
.grove-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

.grove-hero-blob--1 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.30), rgba(74, 222, 128, 0.08) 50%, transparent 70%);
  top: 10%;
  left: 15%;
  animation: grove-blob-drift-1 23s ease-in-out infinite;
}

.grove-hero-blob--2 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.25), rgba(45, 212, 191, 0.06) 50%, transparent 70%);
  top: 50%;
  right: 10%;
  animation: grove-blob-drift-2 19s ease-in-out infinite;
}

.grove-hero-blob--3 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.18), rgba(45, 154, 94, 0.06) 50%, transparent 70%);
  bottom: 5%;
  left: 30%;
  animation: grove-blob-drift-3 29s ease-in-out infinite;
}

.grove-hero-blob--4 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.22), transparent 65%);
  top: 20%;
  right: 25%;
  animation: grove-blob-drift-4 17s ease-in-out infinite;
}

.grove-hero-blob--5 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.15), rgba(75, 143, 229, 0.06) 45%, transparent 70%);
  bottom: 20%;
  left: 5%;
  animation: grove-blob-drift-5 31s ease-in-out infinite;
}

/* Expanding gradient rings */
.grove-hero-ring {
  position: absolute;
  border-radius: 50%;
  animation: grove-ring-expand 8s ease-out infinite;
}

.grove-hero-ring--1 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, transparent 55%, rgba(74, 222, 128, 0.18) 65%, rgba(74, 222, 128, 0.06) 80%, transparent 90%);
}

.grove-hero-ring--2 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, transparent 55%, rgba(45, 212, 191, 0.14) 65%, rgba(45, 212, 191, 0.04) 80%, transparent 90%);
  animation-delay: -2.7s;
}

.grove-hero-ring--3 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, transparent 55%, rgba(74, 222, 128, 0.12) 65%, rgba(45, 154, 94, 0.03) 80%, transparent 90%);
  animation-delay: -5.3s;
}

/* Central radiance: prominent breathing core */
.grove-hero-radiance {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(74, 222, 128, 0.22) 0%,
    rgba(74, 222, 128, 0.10) 30%,
    rgba(45, 212, 191, 0.06) 50%,
    transparent 70%
  );
  filter: blur(30px);
  animation: grove-radiance-breathe 6s ease-in-out infinite;
}

/* Responsive scaling */
@media (min-width: 768px) {
  .grove-hero-blob--1 { width: 380px; height: 380px; }
  .grove-hero-blob--2 { width: 300px; height: 300px; }
  .grove-hero-blob--3 { width: 450px; height: 450px; }
  .grove-hero-blob--4 { width: 260px; height: 260px; }
  .grove-hero-blob--5 { width: 340px; height: 340px; }
  .grove-hero-ring--1,
  .grove-hero-ring--2,
  .grove-hero-ring--3 { width: 160px; height: 160px; }
  .grove-hero-radiance { width: 420px; height: 420px; }
}

@media (min-width: 968px) {
  .grove-hero-aurora { width: 160%; height: 160%; }
  .grove-hero-blob--1 { width: 480px; height: 480px; }
  .grove-hero-blob--2 { width: 380px; height: 380px; }
  .grove-hero-blob--3 { width: 560px; height: 560px; }
  .grove-hero-blob--4 { width: 320px; height: 320px; }
  .grove-hero-blob--5 { width: 420px; height: 420px; }
  .grove-hero-ring--1,
  .grove-hero-ring--2,
  .grove-hero-ring--3 { width: 220px; height: 220px; }
  .grove-hero-radiance { width: 520px; height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .grove-hero-aurora { animation: none; opacity: 0.5; }
  .grove-hero-blob { animation: none; }
  .grove-hero-blob--1 { opacity: 0.6; }
  .grove-hero-blob--2 { opacity: 0.5; }
  .grove-hero-blob--3 { opacity: 0.4; }
  .grove-hero-blob--4 { opacity: 0.5; }
  .grove-hero-blob--5 { opacity: 0.4; }
  .grove-hero-ring { animation: none; opacity: 0; }
  .grove-hero-radiance { animation: none; opacity: 0.7; }
}

/* ---- 5. BUTTONS ---- */
.grove-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, #6AE89B 0%, var(--grove-green) 40%, var(--grove-green-dark) 100%);
  color: #fff;
  border: none;
  border-radius: var(--grove-radius-pill);
  padding: 14px 36px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    /* Embossed neumorphic shell */
    -2px -2px 6px rgba(255, 255, 255, 0.60),
    2px 2px 6px rgba(180, 170, 155, 0.28),
    -5px -5px 14px rgba(255, 255, 255, 0.40),
    5px 5px 14px rgba(180, 170, 155, 0.18),
    -10px -10px 28px rgba(255, 255, 255, 0.22),
    10px 10px 28px rgba(180, 170, 155, 0.12),
    /* Inset highlight — pillowy top-lit surface */
    inset 0 2px 4px rgba(150, 255, 180, 0.50),
    inset 0 -2px 4px rgba(45, 154, 94, 0.15),
    /* Green glow halo */
    0 4px 18px var(--grove-glow-mid),
    0 8px 36px var(--grove-glow-outer);
  transition: all var(--grove-duration-fast) var(--grove-smooth);
}

.grove-btn-primary:hover {
  background: linear-gradient(160deg, var(--grove-green) 0%, var(--grove-green-dark) 50%, var(--grove-green-deep) 100%);
  transform: translateY(-3px);
  box-shadow:
    -3px -3px 8px rgba(255, 255, 255, 0.70),
    3px 3px 8px rgba(180, 170, 155, 0.32),
    -7px -7px 18px rgba(255, 255, 255, 0.50),
    7px 7px 18px rgba(180, 170, 155, 0.22),
    -14px -14px 38px rgba(255, 255, 255, 0.30),
    14px 14px 38px rgba(180, 170, 155, 0.15),
    inset 0 2px 6px rgba(150, 255, 180, 0.60),
    inset 0 -2px 6px rgba(45, 154, 94, 0.20),
    0 6px 26px rgba(74, 222, 128, 0.45),
    0 12px 52px rgba(74, 222, 128, 0.28);
}

.grove-btn-primary:active {
  transform: translateY(0);
  background: linear-gradient(160deg, var(--grove-green-dark) 0%, var(--grove-green-deep) 50%, #14613A 100%);
  box-shadow:
    inset 2px 2px 6px rgba(20, 97, 58, 0.45),
    inset -2px -2px 6px rgba(106, 232, 155, 0.20),
    inset 5px 5px 14px rgba(20, 97, 58, 0.30),
    inset -5px -5px 14px rgba(106, 232, 155, 0.12),
    inset 8px 8px 22px rgba(20, 97, 58, 0.18),
    inset -8px -8px 22px rgba(106, 232, 155, 0.06),
    0 2px 10px rgba(74, 222, 128, 0.20);
}

.grove-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, #FAF7F2 0%, var(--grove-bg) 40%, var(--grove-bg-secondary) 100%);
  color: var(--grove-text-primary);
  border: none;
  border-radius: var(--grove-radius-pill);
  padding: 14px 36px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    /* Embossed neumorphic shell — 8 layers */
    -1px -1px 4px rgba(255, 255, 255, 0.80),
    1px 1px 4px rgba(180, 170, 155, 0.30),
    -3px -3px 10px rgba(255, 255, 255, 0.65),
    3px 3px 10px rgba(180, 170, 155, 0.25),
    -7px -7px 22px rgba(255, 255, 255, 0.50),
    7px 7px 22px rgba(180, 170, 155, 0.20),
    /* Inset highlight — pillowy top-lit surface */
    inset 0 2px 4px rgba(255, 255, 255, 0.75),
    inset 0 -2px 4px rgba(180, 170, 155, 0.08);
  transition: all var(--grove-duration-fast) var(--grove-smooth);
}

.grove-btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.90),
    2px 2px 6px rgba(180, 170, 155, 0.35),
    -5px -5px 14px rgba(255, 255, 255, 0.75),
    5px 5px 14px rgba(180, 170, 155, 0.30),
    -10px -10px 28px rgba(255, 255, 255, 0.60),
    10px 10px 28px rgba(180, 170, 155, 0.24),
    -16px -16px 44px rgba(255, 255, 255, 0.35),
    16px 16px 44px rgba(180, 170, 155, 0.14),
    inset 0 2px 6px rgba(255, 255, 255, 0.85),
    inset 0 -2px 6px rgba(180, 170, 155, 0.10);
}

.grove-btn-secondary:active {
  transform: translateY(0);
  background: linear-gradient(160deg, #E8E3DA 0%, var(--grove-bg-tertiary) 50%, #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 6px rgba(180, 170, 155, 0.40),
    inset -2px -2px 6px rgba(255, 255, 255, 0.45),
    inset 5px 5px 14px rgba(160, 148, 130, 0.28),
    inset -5px -5px 14px rgba(255, 255, 255, 0.32),
    inset 8px 8px 22px rgba(150, 138, 120, 0.18),
    inset -8px -8px 22px rgba(255, 255, 255, 0.20);
}

/* Button styles */
.grove-btn-md,
.grove-btn-lg,
.grove-btn-sm {
  background: linear-gradient(160deg, #6AE89B 0%, var(--grove-green) 40%, var(--grove-green-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--grove-radius-pill) !important;
  font-family: var(--grove-font-body) !important;
  font-weight: 600 !important;
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.55),
    2px 2px 6px rgba(180, 170, 155, 0.25),
    -5px -5px 14px rgba(255, 255, 255, 0.35),
    5px 5px 14px rgba(180, 170, 155, 0.15),
    inset 0 2px 4px rgba(150, 255, 180, 0.45),
    inset 0 -2px 4px rgba(45, 154, 94, 0.12),
    0 4px 18px var(--grove-glow-mid),
    0 8px 36px var(--grove-glow-outer) !important;
  transition: all var(--grove-duration-fast) var(--grove-smooth) !important;
}

.sqs-block-button-element--medium:hover,
.sqs-block-button-element--large:hover,
.sqs-block-button-element--small:hover {
  background: var(--grove-green-dark) !important;
  transform: translateY(-2px);
}

/* ---- 6. CARDS — Embossed Neumorphic ---- */
.grove-card {
  background: var(--grove-bg);
  border-radius: var(--grove-radius-md);
  padding: 32px;
  box-shadow:
    -1px -1px 4px rgba(255, 255, 255, 0.80),
    1px 1px 4px rgba(180, 170, 155, 0.30),
    -3px -3px 10px rgba(255, 255, 255, 0.65),
    3px 3px 10px rgba(180, 170, 155, 0.25),
    -7px -7px 22px rgba(255, 255, 255, 0.50),
    7px 7px 22px rgba(180, 170, 155, 0.20),
    -12px -12px 38px rgba(255, 255, 255, 0.35),
    12px 12px 38px rgba(180, 170, 155, 0.16),
    -20px -20px 60px rgba(255, 255, 255, 0.22),
    20px 20px 60px rgba(160, 148, 130, 0.12);
  transition: all var(--grove-duration-normal) var(--grove-smooth);
}

.grove-card:hover {
  transform: translateY(-6px);
  box-shadow:
    -1px -1px 5px rgba(255, 255, 255, 0.90),
    1px 1px 5px rgba(180, 170, 155, 0.35),
    -4px -4px 14px rgba(255, 255, 255, 0.75),
    4px 4px 14px rgba(180, 170, 155, 0.30),
    -9px -9px 28px rgba(255, 255, 255, 0.60),
    9px 9px 28px rgba(180, 170, 155, 0.24),
    -16px -16px 48px rgba(255, 255, 255, 0.44),
    16px 16px 48px rgba(180, 170, 155, 0.20),
    -26px -26px 76px rgba(255, 255, 255, 0.30),
    26px 26px 76px rgba(160, 148, 130, 0.15);
}

/* Featured card — green aura */
.grove-card-featured {
  position: relative;
}

.grove-card-featured::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 140% 100% at 50% 50%,
    rgba(74, 222, 128, 0.035) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* ---- 7. DEBOSSED WELLS ---- */
.grove-well {
  background: var(--grove-bg-secondary);
  border-radius: var(--grove-radius-sm);
  padding: 24px;
  box-shadow:
    inset 3px 3px 10px rgba(180, 170, 155, 0.35),
    inset -3px -3px 10px rgba(255, 255, 255, 0.50),
    inset 7px 7px 22px rgba(180, 170, 155, 0.25),
    inset -7px -7px 22px rgba(255, 255, 255, 0.38),
    inset 12px 12px 38px rgba(160, 148, 130, 0.18),
    inset -12px -12px 38px rgba(255, 255, 255, 0.25);
}

/* ---- 8. DOMAIN BADGES — embossed pill + debossed text + green glow ---- */
.grove-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--grove-radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Embossed pill surface */
  background: linear-gradient(160deg,
    #FAF7F2 0%,
    var(--grove-bg) 40%,
    var(--grove-bg-secondary) 100%);
  box-shadow:
    -2px -2px 5px rgba(255, 255, 255, 0.80),
    2px 2px 5px rgba(180, 170, 155, 0.28),
    -5px -5px 14px rgba(255, 255, 255, 0.55),
    5px 5px 14px rgba(180, 170, 155, 0.18),
    -10px -10px 28px rgba(255, 255, 255, 0.35),
    10px 10px 28px rgba(180, 170, 155, 0.12),
    inset 0 2px 4px rgba(255, 255, 255, 0.65),
    inset 0 -2px 4px rgba(180, 170, 155, 0.08);
  /* Debossed text — pressed into pill, green glow from inside */
  color: var(--grove-green-dark);
  text-shadow:
    -0.5px -0.5px 1px rgba(180, 170, 155, 0.60),
    0.5px 0.5px 1px rgba(255, 255, 255, 0.90),
    0 0 6px rgba(74, 222, 128, 0.35),
    0 0 14px rgba(74, 222, 128, 0.18),
    0 0 28px rgba(74, 222, 128, 0.08);
  transition: box-shadow var(--grove-duration-normal) var(--grove-smooth),
              background var(--grove-duration-normal) var(--grove-smooth);
}

/* Badge: embossed → debossed on card hover */
.grove-card-featured:hover .grove-badge {
  background: linear-gradient(160deg,
    #E8E3DA 0%,
    var(--grove-bg-tertiary) 50%,
    #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 5px rgba(180, 170, 155, 0.38),
    inset -2px -2px 5px rgba(255, 255, 255, 0.48),
    inset 5px 5px 14px rgba(160, 148, 130, 0.24),
    inset -5px -5px 14px rgba(255, 255, 255, 0.32),
    inset 8px 8px 22px rgba(150, 138, 120, 0.14),
    inset -8px -8px 22px rgba(255, 255, 255, 0.20);
}

/* Green glow rim — breathing */
.grove-badge::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(74, 222, 128, 0.10);
  pointer-events: none;
  box-shadow:
    0 0 8px rgba(74, 222, 128, 0.06),
    0 0 20px rgba(74, 222, 128, 0.03);
  animation: grove-badge-glow 6s ease-in-out infinite;
}

@keyframes grove-badge-glow {
  0%, 100% {
    border-color: rgba(74, 222, 128, 0.08);
    box-shadow:
      0 0 8px rgba(74, 222, 128, 0.05),
      0 0 20px rgba(74, 222, 128, 0.02);
  }
  50% {
    border-color: rgba(74, 222, 128, 0.24);
    box-shadow:
      0 0 14px rgba(74, 222, 128, 0.14),
      0 0 32px rgba(74, 222, 128, 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grove-badge::after {
    animation: none;
    border-color: rgba(74, 222, 128, 0.16);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.08);
  }
}

/* ---- 9. BLOG STYLES ---- */

/* Blog list — card layout */
.blog-item {
  background: var(--grove-bg) !important;
  border-radius: var(--grove-radius-md) !important;
  overflow: hidden;
  box-shadow:
    -3px -3px 10px rgba(255, 255, 255, 0.65),
    3px 3px 10px rgba(180, 170, 155, 0.25),
    -7px -7px 22px rgba(255, 255, 255, 0.50),
    7px 7px 22px rgba(180, 170, 155, 0.20);
  transition: all var(--grove-duration-normal) var(--grove-smooth);
}

.blog-item:hover {
  transform: translateY(-4px);
}

/* Blog post body */
.blog-item-content {
  padding: 28px 32px;
}

.blog-item-title {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--grove-text-primary);
  line-height: 1.35;
}

.blog-item-excerpt {
  color: var(--grove-text-secondary);
  line-height: 1.6;
  margin-top: 8px;
}

/* Blog post page */
.blog-item-wrapper h1 {
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.2;
}

.blog-item-wrapper .sqs-block-content p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--grove-text-secondary);
}

.blog-item-wrapper .sqs-block-content h2 {
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--grove-text-primary);
}

/* ---- 10. SHOP / PRODUCT STYLES ---- */

/* Product grid */
.products .grid-item {
  background: var(--grove-bg) !important;
  border-radius: var(--grove-radius-md) !important;
  overflow: hidden;
  box-shadow:
    -3px -3px 10px rgba(255, 255, 255, 0.65),
    3px 3px 10px rgba(180, 170, 155, 0.25),
    -7px -7px 22px rgba(255, 255, 255, 0.50),
    7px 7px 22px rgba(180, 170, 155, 0.20);
  transition: all var(--grove-duration-normal) var(--grove-smooth);
}

.products .grid-item:hover {
  transform: translateY(-4px);
}

/* Product detail page */
.ProductItem-details .product-price {
  color: var(--grove-green-dark);
  font-weight: 700;
  font-size: 1.5rem;
}

/* Add to cart button */
.sqs-add-to-cart-button {
  background: linear-gradient(160deg, #6AE89B 0%, var(--grove-green) 40%, var(--grove-green-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--grove-radius-pill) !important;
  font-weight: 600 !important;
  padding: 14px 36px !important;
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.55),
    2px 2px 6px rgba(180, 170, 155, 0.25),
    -5px -5px 14px rgba(255, 255, 255, 0.35),
    5px 5px 14px rgba(180, 170, 155, 0.15),
    inset 0 2px 4px rgba(150, 255, 180, 0.45),
    inset 0 -2px 4px rgba(45, 154, 94, 0.12),
    0 4px 18px var(--grove-glow-mid),
    0 8px 36px var(--grove-glow-outer) !important;
}

.sqs-add-to-cart-button:hover {
  background: linear-gradient(160deg, var(--grove-green) 0%, var(--grove-green-dark) 50%, var(--grove-green-deep) 100%) !important;
  transform: translateY(-2px);
  box-shadow:
    -3px -3px 8px rgba(255, 255, 255, 0.65),
    3px 3px 8px rgba(180, 170, 155, 0.30),
    -7px -7px 18px rgba(255, 255, 255, 0.45),
    7px 7px 18px rgba(180, 170, 155, 0.20),
    inset 0 2px 6px rgba(150, 255, 180, 0.55),
    inset 0 -2px 6px rgba(45, 154, 94, 0.18),
    0 6px 26px rgba(74, 222, 128, 0.45),
    0 12px 52px rgba(74, 222, 128, 0.28) !important;
}

/* Product category badges */
.product-category-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--grove-radius-pill);
  background: rgba(74, 222, 128, 0.12);
  color: var(--grove-green-dark);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- 11. FOOTER ---- */
.footer-section {
  background: linear-gradient(180deg,
    var(--grove-bg-secondary) 0%,
    var(--grove-bg-tertiary) 60%,
    var(--grove-bg-dark) 100%) !important;
  border-top: none;
  padding-top: 60px;
}

.footer-section a {
  color: var(--grove-text-secondary) !important;
  transition: color var(--grove-duration-fast) var(--grove-smooth);
}

.footer-section a:hover {
  color: var(--grove-green-dark) !important;
}

/* Footer Logo Pill */
.grove-footer-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.grove-footer-tagline {
  text-align: center;
  font-size: 0.9rem;
  color: var(--grove-text-tertiary);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}

.grove-footer-bottom {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(180, 170, 155, 0.18);
}

/* ---- 12. EMAIL CAPTURE / NEWSLETTER ---- */

/* Subscribe card: embossed container with edge glow */
.grove-subscribe-card {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 36px;
  border-radius: var(--grove-radius-md);
  text-align: center;
  background: linear-gradient(160deg,
    #FAF7F2 0%,
    var(--grove-bg) 30%,
    var(--grove-bg-secondary) 65%,
    var(--grove-bg-tertiary) 100%);
  box-shadow:
    -1px -1px 4px rgba(255, 255, 255, 0.80),
    1px 1px 4px rgba(180, 170, 155, 0.30),
    -4px -4px 12px rgba(255, 255, 255, 0.65),
    4px 4px 12px rgba(180, 170, 155, 0.25),
    -10px -10px 28px rgba(255, 255, 255, 0.48),
    10px 10px 28px rgba(180, 170, 155, 0.20),
    -18px -18px 48px rgba(255, 255, 255, 0.30),
    18px 18px 48px rgba(180, 170, 155, 0.14),
    inset 0 2px 4px rgba(255, 255, 255, 0.68),
    inset 0 -2px 4px rgba(180, 170, 155, 0.08);
}

/* Edge glow rim */
.grove-subscribe-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(74, 222, 128, 0.08);
  pointer-events: none;
  box-shadow:
    0 0 12px rgba(74, 222, 128, 0.06),
    0 0 28px rgba(74, 222, 128, 0.03);
  animation: grove-badge-glow 6s ease-in-out infinite;
}

/* Icon above heading */
.grove-subscribe-icon {
  margin-bottom: 20px;
}

/* Legacy wrapper fallback */
.newsletter-form-wrapper {
  background: var(--grove-bg);
  border-radius: var(--grove-radius-md);
  padding: 48px 32px;
  box-shadow:
    -7px -7px 22px rgba(255, 255, 255, 0.50),
    7px 7px 22px rgba(180, 170, 155, 0.20),
    -12px -12px 38px rgba(255, 255, 255, 0.35),
    12px 12px 38px rgba(180, 170, 155, 0.16);
}

/* Form field styles */
.newsletter-form-wrapper input[type="email"],
.form-wrapper input[type="text"],
.form-wrapper input[type="email"],
.form-wrapper textarea {
  background: var(--grove-bg-secondary) !important;
  border: none !important;
  border-radius: var(--grove-radius-sm) !important;
  padding: 14px 20px !important;
  font-family: var(--grove-font-body) !important;
  color: var(--grove-text-primary) !important;
  box-shadow:
    inset 3px 3px 10px rgba(180, 170, 155, 0.35),
    inset -3px -3px 10px rgba(255, 255, 255, 0.50) !important;
  transition: box-shadow var(--grove-duration-fast) var(--grove-smooth);
}

.form-wrapper input:focus,
.form-wrapper textarea:focus {
  outline: none !important;
  box-shadow:
    inset 3px 3px 10px rgba(180, 170, 155, 0.35),
    inset -3px -3px 10px rgba(255, 255, 255, 0.50),
    0 0 0 3px rgba(74, 222, 128, 0.25) !important;
}

/* ---- 13. SECTIONS ---- */
.page-section {
  padding: 80px 24px;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* Organic section separators */
.grove-separator {
  position: relative;
  width: 100%;
  height: 60px;
  margin: -1px 0;
  overflow: hidden;
  color: var(--grove-bg);
}

.grove-separator svg {
  display: block;
  width: 100%;
  height: 100%;
}

.grove-separator--leaf {
  height: 80px;
}

.grove-separator__glow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.30), transparent);
  filter: blur(4px);
}

/* Legacy divider kept for compatibility */
.grove-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.25), transparent);
  border: none;
  margin: 60px 0;
}

/* ---- 14. GLASSMORPHIC PANELS ---- */
.grove-glass {
  background: var(--grove-frost-bg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.40);
  border-radius: var(--grove-radius-md);
  padding: 32px;
}

/* ---- 15. SPORE PARTICLES (ambient) ---- */
.grove-spores {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.grove-spore {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--grove-green);
  border-radius: 50%;
  opacity: 0;
  animation: grove-spore-drift 12s ease-in-out infinite;
}

/* ---- 16. KEYFRAMES ---- */
@keyframes grove-float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(25px, -18px) scale(1.08); }
  66% { transform: translate(-18px, 25px) scale(0.92); }
}

/* Hero aurora: slow full rotation */
@keyframes grove-aurora-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hero blobs: coprime durations create non-repeating Lissajous drift */
@keyframes grove-blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(60px, -40px) scale(1.12); }
  50% { transform: translate(-30px, 50px) scale(0.92); }
  75% { transform: translate(-50px, -20px) scale(1.06); }
}

@keyframes grove-blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(-50px, 30px) scale(1.10); }
  60% { transform: translate(40px, -45px) scale(0.88); }
  80% { transform: translate(20px, 35px) scale(1.04); }
}

@keyframes grove-blob-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(45px, 25px) scale(0.94); }
  55% { transform: translate(-55px, -35px) scale(1.14); }
  80% { transform: translate(30px, -15px) scale(0.98); }
}

@keyframes grove-blob-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-35px, -50px) scale(1.08); }
  65% { transform: translate(50px, 25px) scale(0.90); }
  85% { transform: translate(-20px, 40px) scale(1.02); }
}

@keyframes grove-blob-drift-5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  22% { transform: translate(40px, -30px) scale(1.06); }
  48% { transform: translate(-45px, 40px) scale(0.94); }
  72% { transform: translate(25px, 20px) scale(1.10); }
}

/* Hero rings: expand outward from center and fade */
@keyframes grove-ring-expand {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}

/* Hero central radiance: prominent breathe */
@keyframes grove-radiance-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes grove-spore-drift {
  0% { bottom: -5%; opacity: 0; transform: translateX(0) scale(0.6); }
  10% { opacity: 0.4; }
  60% { opacity: 0.3; }
  100% { bottom: 105%; opacity: 0; transform: translateX(25px) scale(1); }
}

@keyframes grove-breathe {
  0%, 100% {
    box-shadow:
      0 0 22px rgba(74, 222, 128, 0.20),
      0 0 44px rgba(74, 222, 128, 0.12);
  }
  50% {
    box-shadow:
      0 0 38px rgba(74, 222, 128, 0.35),
      0 0 70px rgba(74, 222, 128, 0.22);
  }
}

@keyframes grove-edge-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 22px rgba(74, 222, 128, 0.08),
      inset 0 0 44px rgba(74, 222, 128, 0.04);
  }
  50% {
    box-shadow:
      inset 0 0 44px rgba(74, 222, 128, 0.16),
      inset 0 0 88px rgba(74, 222, 128, 0.10);
  }
}

/* ---- 17. RESPONSIVE — MOBILE FIRST ---- */

/* Base: Mobile (no media query needed) */

@media (min-width: 480px) {
  .grove-hero { padding: 100px 32px 80px; }
  .grove-hero h1 { font-size: 2.5rem; }
}

@media (min-width: 768px) {
  .grove-hero { padding: 120px 48px 100px; }
  .page-section { padding: 100px 48px; }

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

@media (min-width: 968px) {
  .grove-hero { padding: 140px 64px 120px; }

  .grove-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

@media (min-width: 1200px) {
  .grove-hero h1 { font-size: 3.5rem; }
}

/* ---- 18. ACCESSIBILITY ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 3px solid rgba(74, 222, 128, 0.5);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- 19. IMAGE & GALLERY STYLES ---- */

/* Image border radius */
.grove-content img {
  border-radius: var(--grove-radius-sm);
}

/* Gallery blocks */
.grove-gallery-stacked .image-wrapper,
.grove-gallery-grid .image-wrapper {
  border-radius: var(--grove-radius-sm) !important;
  overflow: hidden;
}

/* Summary blocks (blog cards) */
.summary-item {
  border-radius: var(--grove-radius-md) !important;
  overflow: hidden;
}

/* Quote blocks */
.sqs-block-quote blockquote {
  border-left: 4px solid var(--grove-green);
  padding-left: 24px;
  font-style: italic;
  color: var(--grove-text-secondary);
}

/* Horizontal rule */
.sqs-block-horizontalrule hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.25), transparent);
}

/* Cart icon */
.cart-icon { color: var(--grove-text-primary); }

/* ---- 20. CONSULTATION PAGE ---- */
.grove-consultation-card {
  background: var(--grove-bg);
  border-radius: var(--grove-radius-lg);
  padding: 48px;
  position: relative;
  box-shadow:
    -7px -7px 22px rgba(255, 255, 255, 0.50),
    7px 7px 22px rgba(180, 170, 155, 0.20),
    -12px -12px 38px rgba(255, 255, 255, 0.35),
    12px 12px 38px rgba(180, 170, 155, 0.16),
    -20px -20px 60px rgba(255, 255, 255, 0.22),
    20px 20px 60px rgba(160, 148, 130, 0.12);
}

.grove-consultation-card::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 140% 100% at 50% 50%,
    rgba(74, 222, 128, 0.03) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* Price tag styling */
.grove-price {
  display: inline-block;
  padding: 8px 24px;
  border-radius: var(--grove-radius-pill);
  background: rgba(74, 222, 128, 0.1);
  color: var(--grove-green-dark);
  font-weight: 700;
  font-size: 1.25rem;
}

/* ---- 21. TIP JAR ---- */
.grove-tip-jar {
  text-align: center;
  padding: 60px 32px;
  background: var(--grove-bg-secondary);
  border-radius: var(--grove-radius-lg);
  box-shadow:
    inset 3px 3px 10px rgba(180, 170, 155, 0.25),
    inset -3px -3px 10px rgba(255, 255, 255, 0.45);
}

.grove-tip-jar h2 {
  font-weight: 800;
  margin-bottom: 16px;
}

.grove-tip-jar p {
  color: var(--grove-text-secondary);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* ---- 22. GRADIENT TEXT UTILITY ---- */
.grove-text-gradient {
  background: linear-gradient(135deg, var(--grove-green-light), var(--grove-green-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(74, 222, 128, 0.18));
}

/* ---- 23. SITE HEADER LAYOUT ---- */
.grove-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 12px 24px;
}

.grove-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.grove-header-logo {
  text-decoration: none;
  display: inline-flex;
}

.grove-nav {
  display: none;
  align-items: center;
  gap: 28px;
}

.grove-nav a:not(.grove-btn-primary) {
  display: inline-flex;
  align-items: center;
  color: var(--grove-text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 10px 22px;
  border-radius: var(--grove-radius-pill);
  background: linear-gradient(160deg, #FAF7F2 0%, var(--grove-bg) 40%, var(--grove-bg-secondary) 100%);
  box-shadow:
    -1px -1px 4px rgba(255, 255, 255, 0.80),
    1px 1px 4px rgba(180, 170, 155, 0.28),
    -3px -3px 10px rgba(255, 255, 255, 0.60),
    3px 3px 10px rgba(180, 170, 155, 0.20),
    -6px -6px 18px rgba(255, 255, 255, 0.38),
    6px 6px 18px rgba(180, 170, 155, 0.14),
    inset 0 2px 3px rgba(255, 255, 255, 0.70),
    inset 0 -1px 3px rgba(180, 170, 155, 0.06);
  transition: all var(--grove-duration-fast) var(--grove-smooth);
}

.grove-nav a:not(.grove-btn-primary):hover {
  color: var(--grove-green-dark);
  transform: translateY(-2px);
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.88),
    2px 2px 6px rgba(180, 170, 155, 0.32),
    -5px -5px 14px rgba(255, 255, 255, 0.70),
    5px 5px 14px rgba(180, 170, 155, 0.24),
    -9px -9px 24px rgba(255, 255, 255, 0.48),
    9px 9px 24px rgba(180, 170, 155, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.80),
    inset 0 -1px 4px rgba(180, 170, 155, 0.08);
}

.grove-nav a:not(.grove-btn-primary):active {
  transform: translateY(0);
  background: linear-gradient(160deg, #E8E3DA 0%, var(--grove-bg-tertiary) 50%, #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 6px rgba(180, 170, 155, 0.40),
    inset -2px -2px 6px rgba(255, 255, 255, 0.45),
    inset 5px 5px 14px rgba(160, 148, 130, 0.28),
    inset -5px -5px 14px rgba(255, 255, 255, 0.32),
    inset 8px 8px 22px rgba(150, 138, 120, 0.18),
    inset -8px -8px 22px rgba(255, 255, 255, 0.20);
}

.grove-nav .grove-btn-primary {
  font-size: 0.85rem;
  padding: 10px 24px;
}

/* Burger button (mobile) */
.grove-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.grove-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--grove-text-primary);
  border-radius: 2px;
  transition: all var(--grove-duration-fast) var(--grove-smooth);
}

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

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

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

/* Mobile menu overlay */
.grove-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--grove-bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.grove-mobile-menu.grove-mobile-menu--open {
  display: flex;
}

.grove-mobile-menu a {
  color: var(--grove-text-primary);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  transition: color var(--grove-duration-fast) var(--grove-smooth);
}

.grove-mobile-menu a:hover {
  color: var(--grove-green-dark);
}

body.grove-menu-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .grove-nav {
    display: flex;
  }
  .grove-burger {
    display: none;
  }
}

/* ---- 24. HERO ACTIONS ---- */
.grove-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- 25. SECTION TYPOGRAPHY ---- */
.grove-section-heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 24px;
}

.grove-section-body {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--grove-text-secondary);
  max-width: 720px;
  margin: 0 auto 20px;
  line-height: 1.7;
  text-align: center;
}

.grove-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--grove-text-primary);
}

.grove-card p {
  color: var(--grove-text-secondary);
  line-height: 1.65;
  font-size: 0.95rem;
}

.grove-card-grid {
  margin-top: 48px;
}

.grove-card .grove-badge {
  margin-bottom: 16px;
}

/* Domain card body well — debossed + edge glow, matching pillar wells */
.grove-domain-well {
  position: relative;
  width: 88%;
  margin: 4px auto 0;
  padding: 18px 22px;
  border-radius: var(--grove-radius-sm);
  overflow: hidden;
  background: linear-gradient(160deg,
    #EDE8E0 0%,
    var(--grove-bg-tertiary) 50%,
    #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 6px rgba(180, 170, 155, 0.35),
    inset -2px -2px 6px rgba(255, 255, 255, 0.48),
    inset 5px 5px 16px rgba(160, 148, 130, 0.22),
    inset -5px -5px 16px rgba(255, 255, 255, 0.32),
    inset 10px 10px 30px rgba(150, 138, 120, 0.14),
    inset -10px -10px 30px rgba(255, 255, 255, 0.20);
  transition: box-shadow var(--grove-duration-normal) var(--grove-smooth),
              background var(--grove-duration-normal) var(--grove-smooth);
}

/* Well: debossed → embossed on card hover */
.grove-card-featured:hover .grove-domain-well {
  background: linear-gradient(160deg,
    #FAF7F2 0%,
    var(--grove-bg) 30%,
    var(--grove-bg-secondary) 100%);
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.70),
    2px 2px 6px rgba(180, 170, 155, 0.28),
    -5px -5px 14px rgba(255, 255, 255, 0.50),
    5px 5px 14px rgba(180, 170, 155, 0.20),
    -10px -10px 28px rgba(255, 255, 255, 0.32),
    10px 10px 28px rgba(180, 170, 155, 0.14),
    inset 0 2px 4px rgba(255, 255, 255, 0.65),
    inset 0 -2px 4px rgba(180, 170, 155, 0.08);
}

.grove-domain-well::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 22px rgba(74, 222, 128, 0.08),
    inset 0 0 44px rgba(74, 222, 128, 0.04),
    inset 0 0 66px rgba(74, 222, 128, 0.015);
  animation: grove-edge-glow 6s ease-in-out infinite;
}

.grove-domain-well p {
  position: relative;
  z-index: 1;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .grove-domain-well::before {
    animation: none;
    box-shadow:
      inset 0 0 32px rgba(74, 222, 128, 0.12),
      inset 0 0 64px rgba(74, 222, 128, 0.06),
      inset 0 0 96px rgba(74, 222, 128, 0.03);
  }
}

/* ---- 26. DOMAIN GRID (6-card: 3+3) ---- */
.grove-domain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .grove-domain-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
  }
  .grove-domain-grid .grove-card {
    flex: 0 1 calc(50% - 16px);
  }
}

@media (min-width: 968px) {
  .grove-domain-grid .grove-card {
    flex: 0 1 calc(33.33% - 22px);
  }
}

/* ---- 27. SOCIAL PILLS ---- */
.grove-social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0;
}

@media (min-width: 600px) {
  .grove-social-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Social Pill: Logo Pill aesthetic (embossed rim + debossed well + edge glow) --- */

.grove-social-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 42px;
  text-decoration: none;
  /* Embossed outer rim — matched to Logo Pill .grove-logo */
  background: linear-gradient(160deg,
    #FAF7F2 0%,
    var(--grove-bg) 30%,
    var(--grove-bg-secondary) 65%,
    var(--grove-bg-tertiary) 100%);
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.88),
    1px 1px 3px rgba(180, 170, 155, 0.32),
    -4px -4px 10px rgba(255, 255, 255, 0.68),
    4px 4px 10px rgba(180, 170, 155, 0.26),
    -8px -8px 22px rgba(255, 255, 255, 0.48),
    8px 8px 22px rgba(180, 170, 155, 0.20),
    -14px -14px 38px rgba(255, 255, 255, 0.30),
    14px 14px 38px rgba(180, 170, 155, 0.12),
    inset 0 2px 4px rgba(255, 255, 255, 0.68),
    inset 0 -2px 4px rgba(180, 170, 155, 0.08);
  transition: all var(--grove-duration-fast) var(--grove-smooth);
}

.grove-social-pill:hover {
  transform: translateY(-3px);
  box-shadow:
    -2px -2px 5px rgba(255, 255, 255, 0.92),
    2px 2px 5px rgba(180, 170, 155, 0.36),
    -6px -6px 14px rgba(255, 255, 255, 0.75),
    6px 6px 14px rgba(180, 170, 155, 0.30),
    -12px -12px 28px rgba(255, 255, 255, 0.55),
    12px 12px 28px rgba(180, 170, 155, 0.24),
    -18px -18px 44px rgba(255, 255, 255, 0.35),
    18px 18px 44px rgba(180, 170, 155, 0.14),
    inset 0 2px 5px rgba(255, 255, 255, 0.75),
    inset 0 -2px 5px rgba(180, 170, 155, 0.10);
}

.grove-social-pill:active {
  transform: translateY(0);
  box-shadow:
    inset 2px 2px 6px rgba(180, 170, 155, 0.40),
    inset -2px -2px 6px rgba(255, 255, 255, 0.45),
    inset 5px 5px 14px rgba(160, 148, 130, 0.28),
    inset -5px -5px 14px rgba(255, 255, 255, 0.32),
    inset 8px 8px 22px rgba(150, 138, 120, 0.18),
    inset -8px -8px 22px rgba(255, 255, 255, 0.20);
}

/* Inner well — debossed, edge glow on ::before, rim pulse on ::after */
.grove-social-pill__well {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  border-radius: 32px;
  color: var(--grove-text-primary);
  font-weight: 600;
  font-size: 1.05rem;
  /* Debossed inner well — matched to Logo Pill .grove-logo__well */
  background: linear-gradient(160deg,
    #E8E3DA 0%,
    var(--grove-bg-tertiary) 50%,
    #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 5px rgba(180, 170, 155, 0.40),
    inset -2px -2px 5px rgba(255, 255, 255, 0.50),
    inset 4px 4px 10px rgba(160, 148, 130, 0.28),
    inset -4px -4px 10px rgba(255, 255, 255, 0.35),
    inset 7px 7px 18px rgba(150, 138, 120, 0.18),
    inset -7px -7px 18px rgba(255, 255, 255, 0.22);
  transition: all var(--grove-duration-fast) var(--grove-smooth);
}

/* Edge glow — oscillates on the well rim */
.grove-social-pill__well::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0 0 4px rgba(74, 222, 128, 0.06),
    inset 0 0 2px rgba(74, 222, 128, 0.04);
  animation: grove-logo-edge-glow 6s ease-in-out infinite;
}

/* Rim border accent — pulses in sync with edge glow */
.grove-social-pill__well::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(74, 222, 128, 0.06);
  pointer-events: none;
  z-index: 1;
  animation: grove-logo-rim-pulse 6s ease-in-out infinite;
}

.grove-social-pill:hover .grove-social-pill__well {
  color: var(--grove-green-dark);
}

.grove-social-pill__well svg {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.grove-social-pill__well span {
  position: relative;
  z-index: 2;
}

.grove-pull-quote {
  max-width: 600px;
  margin: 48px auto 0;
  padding: 24px 32px;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-style: italic;
  font-weight: 500;
  color: var(--grove-text-secondary);
  line-height: 1.6;
  border-left: 4px solid var(--grove-green);
  text-align: left;
}

.grove-pull-quote p {
  margin: 0;
}

/* ---- 28. EMAIL CAPTURE FORM ---- */
.grove-email-form {
  max-width: 540px;
  margin: 32px auto 0;
  text-align: center;
}

.grove-form-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.grove-email-form select {
  background: var(--grove-bg-secondary);
  border: none;
  border-radius: var(--grove-radius-sm);
  padding: 14px 20px;
  font-family: var(--grove-font-body);
  color: var(--grove-text-primary);
  font-size: 0.95rem;
  box-shadow:
    inset 3px 3px 10px rgba(180, 170, 155, 0.35),
    inset -3px -3px 10px rgba(255, 255, 255, 0.50);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.grove-email-form select:focus {
  outline: none;
  box-shadow:
    inset 3px 3px 10px rgba(180, 170, 155, 0.35),
    inset -3px -3px 10px rgba(255, 255, 255, 0.50),
    0 0 0 3px rgba(74, 222, 128, 0.25);
}

.grove-form-success {
  display: none;
  padding: 24px;
  text-align: center;
  color: var(--grove-green-dark);
  font-weight: 600;
}

@media (min-width: 480px) {
  .grove-form-row {
    flex-direction: row;
  }
  .grove-form-row input[type="email"] {
    flex: 2;
  }
  .grove-form-row select {
    flex: 1;
  }
}

/* ---- 29. FOOTER LAYOUT ---- */
.grove-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 0 32px;
}

.grove-footer-nav a,
.grove-footer-nav span {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Coming soon items styled as muted pills */
.grove-footer-coming-soon {
  color: var(--grove-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--grove-radius-pill);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(237, 232, 224, 0.5) 100%);
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.50),
    1px 1px 3px rgba(180, 170, 155, 0.18);
}

.grove-footer-coming-soon small {
  font-size: 0.7em;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.grove-footer-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--grove-radius-pill);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(237, 232, 224, 0.6) 100%);
  box-shadow:
    -1px -1px 3px rgba(255, 255, 255, 0.55),
    1px 1px 3px rgba(180, 170, 155, 0.20);
  text-decoration: none;
}

.grove-footer-nav a:hover {
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.65),
    2px 2px 6px rgba(180, 170, 155, 0.25),
    0 0 12px rgba(74, 222, 128, 0.15);
}

.grove-footer-transparency {
  max-width: 600px;
  margin: 0 auto 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--grove-text-tertiary);
  line-height: 1.65;
}

.grove-footer-copyright {
  text-align: center;
  font-size: 0.8rem;
  color: var(--grove-text-tertiary);
  padding-bottom: 48px;
}

/* ---- 30. SIX-LAYER ICONS (from grove-master.css) ---- */
.grove-icon-6layer {
  position: relative;
  width: 76px;
  height: 76px;
  background: linear-gradient(140deg, var(--grove-bg), var(--grove-bg-tertiary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    -6px -6px 16px rgba(255, 255, 255, 0.80),
    6px 6px 16px rgba(180, 170, 155, 0.30),
    -12px -12px 28px rgba(255, 255, 255, 0.45),
    12px 12px 28px rgba(180, 170, 155, 0.18);
}

.grove-icon-6layer::before {
  content: '';
  position: absolute;
  width: 88%;
  height: 88%;
  background: linear-gradient(140deg, var(--grove-bg-secondary), var(--grove-bg-dark));
  border-radius: 50%;
  z-index: 1;
}

.grove-icon-6layer::after {
  content: '';
  position: absolute;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  z-index: 2;
}

.grove-icon-6layer.green::after {
  background: linear-gradient(135deg, var(--grove-green-light), var(--grove-green-deep));
  box-shadow:
    inset 0 2px 6px rgba(150, 255, 180, 0.45),
    0 0 22px rgba(74, 222, 128, 0.18),
    0 0 44px rgba(74, 222, 128, 0.08);
}

.grove-icon-6layer.teal::after {
  background: linear-gradient(135deg, var(--grove-teal), #0D9488);
  box-shadow:
    inset 0 2px 6px rgba(200, 255, 245, 0.45),
    0 0 22px rgba(45, 212, 191, 0.18),
    0 0 44px rgba(45, 212, 191, 0.08);
}

.grove-icon-6layer.neutral::after {
  background: linear-gradient(135deg, #94A3B8, #64748B);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.28),
    0 0 22px rgba(100, 116, 139, 0.12),
    0 0 44px rgba(100, 116, 139, 0.06);
}

.grove-icon-lens {
  position: absolute;
  width: 60%;
  height: 60%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.14) 40%,
    rgba(255, 255, 255, 0.04) 70%,
    transparent 100%
  );
  backdrop-filter: blur(6px) saturate(140%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  z-index: 3;
  pointer-events: none;
}

.grove-icon-6layer .icon {
  position: relative;
  z-index: 4;
  color: white;
  font-size: 1.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  line-height: 1;
}

.grove-pillar-icon {
  position: relative;
  margin-bottom: 20px;
}

/* Green glow behind 6-layer icons — breathing radiance */
.grove-pillar-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(74, 222, 128, 0.28) 0%,
    rgba(74, 222, 128, 0.12) 40%,
    rgba(74, 222, 128, 0.03) 70%,
    transparent 100%);
  z-index: -1;
  animation: grove-icon-glow 6s ease-in-out infinite;
}

@keyframes grove-icon-glow {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grove-pillar-icon::before {
    animation: none;
    opacity: 0.8;
  }
}

/* ---- 33. PILLAR CARDS (centred layout + deep well) ---- */
.grove-pillar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.grove-pillar-card h3 {
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg,
    var(--grove-green-light) 0%,
    var(--grove-green) 50%,
    var(--grove-green-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(74, 222, 128, 0.22));
}

/* Deep debossed well for body text — grove-well + edge-glow from master */
.grove-pillar-well {
  position: relative;
  width: 88%;
  margin: 16px auto 0;
  padding: 20px 24px;
  border-radius: var(--grove-radius-sm);
  overflow: hidden;
  background: linear-gradient(160deg,
    #EDE8E0 0%,
    var(--grove-bg-tertiary) 50%,
    #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 6px rgba(180, 170, 155, 0.35),
    inset -2px -2px 6px rgba(255, 255, 255, 0.48),
    inset 5px 5px 16px rgba(160, 148, 130, 0.22),
    inset -5px -5px 16px rgba(255, 255, 255, 0.32),
    inset 10px 10px 30px rgba(150, 138, 120, 0.14),
    inset -10px -10px 30px rgba(255, 255, 255, 0.20);
}

/* Edge glow — canonical grove-edge-glow from grove-master.css */
.grove-pillar-well::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 22px rgba(74, 222, 128, 0.08),
    inset 0 0 44px rgba(74, 222, 128, 0.04),
    inset 0 0 66px rgba(74, 222, 128, 0.015);
  animation: grove-edge-glow 6s ease-in-out infinite;
}

.grove-pillar-well p {
  position: relative;
  z-index: 1;
  margin: 0;
}

@keyframes grove-edge-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 22px rgba(74, 222, 128, 0.08),
      inset 0 0 44px rgba(74, 222, 128, 0.04),
      inset 0 0 66px rgba(74, 222, 128, 0.015);
  }
  50% {
    box-shadow:
      inset 0 0 44px rgba(74, 222, 128, 0.16),
      inset 0 0 88px rgba(74, 222, 128, 0.10),
      inset 0 0 130px rgba(74, 222, 128, 0.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grove-pillar-well::before {
    animation: none;
    box-shadow:
      inset 0 0 32px rgba(74, 222, 128, 0.12),
      inset 0 0 64px rgba(74, 222, 128, 0.06),
      inset 0 0 96px rgba(74, 222, 128, 0.03);
  }
}

/* ---- 31. INTRO WELL — wide debossed container for body text ---- */
.grove-intro-well {
  position: relative;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 32px 36px;
  border-radius: var(--grove-radius-sm);
  overflow: hidden;
  background: linear-gradient(160deg,
    #EDE8E0 0%,
    var(--grove-bg-tertiary) 50%,
    #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 6px rgba(180, 170, 155, 0.35),
    inset -2px -2px 6px rgba(255, 255, 255, 0.48),
    inset 5px 5px 16px rgba(160, 148, 130, 0.22),
    inset -5px -5px 16px rgba(255, 255, 255, 0.32),
    inset 10px 10px 30px rgba(150, 138, 120, 0.14),
    inset -10px -10px 30px rgba(255, 255, 255, 0.20);
}

.grove-intro-well::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 22px rgba(74, 222, 128, 0.08),
    inset 0 0 44px rgba(74, 222, 128, 0.04),
    inset 0 0 66px rgba(74, 222, 128, 0.015);
  animation: grove-edge-glow 6s ease-in-out infinite;
}

.grove-intro-well .grove-section-body {
  position: relative;
  z-index: 1;
  text-align: center;
}

.grove-intro-well .grove-section-body:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .grove-intro-well::before {
    animation: none;
    box-shadow:
      inset 0 0 32px rgba(74, 222, 128, 0.12),
      inset 0 0 64px rgba(74, 222, 128, 0.06),
      inset 0 0 96px rgba(74, 222, 128, 0.03);
  }
}

/* ---- 32. PULL QUOTE ---- */
.grove-pull-quote-section {
  padding: 60px 24px;
  text-align: center;
}

.grove-pull-quote {
  margin: 0 auto;
  max-width: 680px;
}

.grove-pull-quote__well {
  position: relative;
  padding: 40px 36px;
  border-radius: var(--grove-radius-sm);
  overflow: hidden;
  background: linear-gradient(160deg,
    #EDE8E0 0%,
    var(--grove-bg-tertiary) 50%,
    #E0DBD2 100%);
  box-shadow:
    inset 2px 2px 6px rgba(180, 170, 155, 0.35),
    inset -2px -2px 6px rgba(255, 255, 255, 0.48),
    inset 5px 5px 16px rgba(160, 148, 130, 0.22),
    inset -5px -5px 16px rgba(255, 255, 255, 0.32),
    inset 10px 10px 30px rgba(150, 138, 120, 0.14),
    inset -10px -10px 30px rgba(255, 255, 255, 0.20);
}

.grove-pull-quote__well::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 22px rgba(74, 222, 128, 0.08),
    inset 0 0 44px rgba(74, 222, 128, 0.04),
    inset 0 0 66px rgba(74, 222, 128, 0.015);
  animation: grove-edge-glow 6s ease-in-out infinite;
}

.grove-pull-quote__well p {
  position: relative;
  z-index: 1;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  color: var(--grove-green-dark);
  text-shadow:
    -0.5px -0.5px 1px rgba(180, 170, 155, 0.40),
    0.5px 0.5px 1px rgba(255, 255, 255, 0.70),
    0 0 8px rgba(74, 222, 128, 0.20),
    0 0 20px rgba(74, 222, 128, 0.08);
}

.grove-pull-quote__well p::before {
  content: '\201C';
  display: block;
  font-size: 3rem;
  line-height: 0.5;
  margin-bottom: 16px;
  color: var(--grove-green);
  opacity: 0.5;
  font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
  .grove-pull-quote__well::before {
    animation: none;
    box-shadow:
      inset 0 0 32px rgba(74, 222, 128, 0.12),
      inset 0 0 64px rgba(74, 222, 128, 0.06),
      inset 0 0 96px rgba(74, 222, 128, 0.03);
  }
}

/* ---- 33. SOCIAL BAR (below hero) ---- */
.grove-social-bar {
  padding: 48px 24px 56px;
  text-align: center;
}

.grove-social-bar .grove-section-heading {
  margin-bottom: 32px;
}

.grove-social-bar .grove-social-grid {
  margin: 0 auto;
  max-width: 800px;
}

/* ---- 32. HEADING SWEEP ANIMATION ---- */
/*
   Pendulum sweep: green wash travels through the text then returns.
   background-size 300% keeps the green band (at gradient 50%) hidden
   at both bg-position 0% (visible: gradient 0-33%) and 100% (visible:
   gradient 67-100%). The round-trip makes 0% == 100%, seamless loop.
*/
.grove-heading-sweep {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--grove-text-primary) 0%,
    var(--grove-text-primary) 30%,
    var(--grove-green-dark) 43%,
    var(--grove-green) 50%,
    var(--grove-green-dark) 57%,
    var(--grove-text-primary) 70%,
    var(--grove-text-primary) 100%
  );
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grove-heading-sweep 8s ease-in-out infinite;
}

@keyframes grove-heading-sweep {
  0%, 8% {
    background-position: 0% 0;
  }
  46%, 54% {
    background-position: 100% 0;
  }
  92%, 100% {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grove-heading-sweep {
    animation: none;
    background: linear-gradient(135deg, var(--grove-green-light), var(--grove-green-deep));
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}