/* Hand-tuned bits Tailwind doesn't cover well. */

:root {
  --navy: #1B3A6B;
  --navy-deep: #0f2039;
  --forest: #2E8B4E;
  --forest-deep: #1c5832;
}

/* Bold hero band, navy → forest with a subtle paper texture overlay. */
.hero-gradient {
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(46,139,78,0.35), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(46,139,78,0.18), transparent 60%),
    linear-gradient(135deg, #0f2039 0%, #1B3A6B 55%, #1f4682 100%);
  color: #ffffff;
}
.hero-gradient .hero-eyebrow { color: #a6dbb5; }
.hero-gradient h1 { color: #ffffff; }
.hero-gradient .hero-body { color: #d8e3f1; }

/* Soft variant (about, services list, pricing, faq, contact heroes). */
.hero-soft {
  background:
    radial-gradient(1200px 600px at 85% -20%, rgba(46,139,78,0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(27,58,107,0.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Ribbon, green-tinted accent. */
.ribbon {
  background:
    linear-gradient(90deg, rgba(27,58,107,0.06), rgba(46,139,78,0.10));
}

/* Section divider, colored wave between bands. */
.wave-flip { transform: scaleY(-1); }

/* Prose tweaks for service-detail content. */
.prose-service h2 { color: #1B3A6B; }

/* Animated subtle dot pattern overlay for accent areas. */
.dot-grid {
  background-image: radial-gradient(rgba(46,139,78,0.18) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* === Mobile clickability — make every linked card unmistakably tappable ===
   On touch devices, :hover doesn't fire, so any card or button that's clickable
   needs a permanent visual cue. We use:
    1. cursor:pointer on every <a class="group ...">
    2. A persistent right-side chevron tag (the .gs-tap-chip below)
    3. A visible :active state with scale + ring for tactile feedback
    4. Tap-highlight color in the brand palette
*/
a, button, [role="button"] {
  -webkit-tap-highlight-color: rgba(46, 139, 78, 0.2); /* forest-soft */
}

/* Cards: always show the "tap me" affordance, even before hover. */
@media (hover: none) and (pointer: coarse) {
  /* On touch-only devices, force the chevron and ring to be visible at rest. */
  a.group {
    box-shadow: 0 1px 2px rgba(15, 32, 57, 0.06);
  }
  a.group::after {
    /* Subtle right-edge accent strip on touch devices so the card reads as a button. */
    content: "";
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(46,139,78,0) 0%, rgba(46,139,78,0.5) 50%, rgba(46,139,78,0) 100%);
    border-radius: 0 14px 14px 0;
    opacity: 0.6;
    pointer-events: none;
  }
}

/* Active (pressed) state for any clickable card or button — works on touch. */
a.group:active,
button:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 0.06s ease;
}