/* SmartHerb Public WTR25-inspired theme
   Pure CSS override for public pages only. Load after page-scoped inline CSS. */

:root {
  --wtr25-green-deep: #043d2f;
  --wtr25-green: #08724e;
  --wtr25-green-soft: #10a66f;
  --wtr25-teal: #0b6c84;
  --wtr25-blue: #0b5d7a;
  --wtr25-lime: #b7e35f;
  --wtr25-gold: #f5c84b;
  --wtr25-ink: #09251c;
  --wtr25-muted: #60756d;
  --wtr25-card: rgba(255, 255, 255, .82);
  --wtr25-card-solid: #ffffff;
  --wtr25-border: rgba(8, 114, 78, .14);
  --wtr25-shadow: 0 24px 80px rgba(7, 72, 51, .14);
  --wtr25-shadow-strong: 0 30px 100px rgba(4, 61, 47, .22);
  --wtr25-radius: 28px;
}

html[data-theme="dark"] {
  --wtr25-card: rgba(8, 24, 22, .82);
  --wtr25-card-solid: #071a17;
  --wtr25-border: rgba(183, 227, 95, .16);
  --wtr25-shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --wtr25-shadow-strong: 0 30px 100px rgba(0, 0, 0, .46);
}

body.public-shell {
  overflow-x: hidden;
  color: var(--wtr25-ink);
  background:
    radial-gradient(820px 420px at 8% 6%, rgba(183, 227, 95, .22), transparent 62%),
    radial-gradient(760px 360px at 94% 8%, rgba(11, 108, 132, .17), transparent 62%),
    linear-gradient(180deg, #f7fff9 0%, #ffffff 42%, #f2fbf6 100%) !important;
}

html[data-theme="dark"] body.public-shell,
body.public-shell.theme-dark {
  color: #edfdf5;
  background:
    radial-gradient(900px 500px at 8% 2%, rgba(16, 166, 111, .22), transparent 64%),
    radial-gradient(760px 420px at 96% 6%, rgba(11, 108, 132, .20), transparent 62%),
    linear-gradient(180deg, #021610 0%, #041c17 48%, #020f0c 100%) !important;
}

body.public-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(8, 114, 78, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 114, 78, .045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .68), transparent 82%);
}

html[data-theme="dark"] body.public-shell::before,
body.public-shell.theme-dark::before {
  background-image:
    linear-gradient(rgba(183, 227, 95, .052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 227, 95, .052) 1px, transparent 1px);
}

body.public-shell > * {
  position: relative;
  z-index: 1;
}

body.public-shell .container {
  max-width: 1180px;
}

body.public-shell .btn-brand,
body.public-shell .btn.btn-brand,
body.public-shell .public-navbar .btn-brand {
  border: 0 !important;
  color: #063829 !important;
  background: linear-gradient(135deg, #ffffff 0%, #dff8a5 100%) !important;
  box-shadow: 0 16px 36px rgba(4, 61, 47, .18), inset 0 0 0 1px rgba(255, 255, 255, .62) !important;
  font-weight: 900 !important;
}

body.public-shell .btn-brand:hover,
body.public-shell .btn.btn-brand:hover,
body.public-shell .public-navbar .btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(4, 61, 47, .26), inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
  filter: saturate(1.08);
}

body.public-shell .btn-outline-brand,
body.public-shell .btn.btn-outline-brand {
  color: var(--wtr25-green-deep) !important;
  border-color: rgba(8, 114, 78, .24) !important;
  background: rgba(255, 255, 255, .68) !important;
  font-weight: 850 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

body.public-shell .btn-outline-brand:hover,
body.public-shell .btn.btn-outline-brand:hover {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--wtr25-green) 0%, var(--wtr25-teal) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(8, 114, 78, .22);
}

html[data-theme="dark"] body.public-shell .btn-outline-brand,
body.public-shell.theme-dark .btn-outline-brand {
  color: #ecfdf5 !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* Navbar: WTR-style glass header */
.public-navbar {
  --bs-navbar-padding-y: .72rem;
  background: rgba(255, 255, 255, .78) !important;
  border-bottom: 1px solid rgba(8, 114, 78, .12) !important;
  box-shadow: 0 12px 38px rgba(4, 61, 47, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.public-navbar.shadow-scroll {
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 18px 52px rgba(4, 61, 47, .15) !important;
}

html[data-theme="dark"] .public-navbar,
body.theme-dark .public-navbar {
  background: rgba(2, 22, 17, .80) !important;
  border-bottom-color: rgba(183, 227, 95, .14) !important;
}

html[data-theme="dark"] .public-navbar.shadow-scroll,
body.theme-dark .public-navbar.shadow-scroll {
  background: rgba(2, 22, 17, .92) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .38) !important;
}

.public-navbar .brand-logo {
  border-radius: 18px !important;
  border-color: rgba(8, 114, 78, .18) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0ffe8 100%) !important;
  box-shadow: 0 12px 28px rgba(4, 61, 47, .12) !important;
}

.public-navbar .brand-title {
  color: var(--wtr25-green-deep) !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}

.public-navbar .brand-subtitle {
  color: var(--wtr25-muted) !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .public-navbar .brand-title,
body.theme-dark .public-navbar .brand-title { color: #ecfdf5 !important; }
html[data-theme="dark"] .public-navbar .brand-subtitle,
body.theme-dark .public-navbar .brand-subtitle { color: rgba(236,253,245,.68) !important; }

.public-navbar .nav-link {
  color: #24433a !important;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-weight: 850 !important;
}

.public-navbar .nav-link:hover,
.public-navbar .nav-link.active {
  color: #063829 !important;
  border-color: rgba(8, 114, 78, .13) !important;
  background: linear-gradient(135deg, rgba(183, 227, 95, .28), rgba(11, 108, 132, .08)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

html[data-theme="dark"] .public-navbar .nav-link,
body.theme-dark .public-navbar .nav-link { color: rgba(236,253,245,.78) !important; }
html[data-theme="dark"] .public-navbar .nav-link:hover,
html[data-theme="dark"] .public-navbar .nav-link.active,
body.theme-dark .public-navbar .nav-link:hover,
body.theme-dark .public-navbar .nav-link.active {
  color: #ecfdf5 !important;
  background: linear-gradient(135deg, rgba(16, 166, 111, .26), rgba(183, 227, 95, .10)) !important;
  border-color: rgba(183, 227, 95, .14) !important;
}

.public-navbar .btn-theme-public {
  border-color: rgba(8, 114, 78, .16) !important;
  background: rgba(255, 255, 255, .68) !important;
  box-shadow: 0 10px 24px rgba(4, 61, 47, .10);
}

/* Shared public cards */
.public-home-page .glass-card,
.public-home-page .surface-card,
.public-home-page .section-card,
.public-home-page .data-card,
.public-home-page .spotlight-card,
.public-herbs-v2 .ph-hero,
.public-herbs-v2 .ph-panel,
.public-herbs-v2 .ph-card,
.public-herbs-v2 .ph-side-card,
.public-map .map-hero,
.public-map .map-kpi,
.public-map .map-board,
.public-projects .project-hero,
.public-projects .project-kpi,
.public-projects .project-card,
.public-herb-detail .card,
.public-herb-detail .tab-shell {
  border-color: var(--wtr25-border) !important;
  border-radius: var(--wtr25-radius) !important;
  background: var(--wtr25-card) !important;
  box-shadow: var(--wtr25-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.public-home-page .glass-card:hover,
.public-home-page .surface-card:hover,
.public-home-page .data-card:hover,
.public-home-page .spotlight-card:hover,
.public-herbs-v2 .ph-card:hover,
.public-map .map-kpi:hover,
.public-projects .project-card:hover,
.public-herb-detail .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--wtr25-shadow-strong) !important;
  border-color: rgba(8, 114, 78, .22) !important;
}

.public-home-page .metric-card,
.public-map .map-kpi,
.public-projects .project-kpi,
.public-herbs-v2 .ph-kpi {
  border-radius: 22px !important;
  border: 1px solid rgba(8, 114, 78, .12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246, 255, 244, .76)) !important;
  box-shadow: 0 18px 42px rgba(4, 61, 47, .10) !important;
}

html[data-theme="dark"] .public-home-page .metric-card,
html[data-theme="dark"] .public-map .map-kpi,
html[data-theme="dark"] .public-projects .project-kpi,
html[data-theme="dark"] .public-herbs-v2 .ph-kpi,
body.theme-dark .public-home-page .metric-card,
body.theme-dark .public-map .map-kpi,
body.theme-dark .public-projects .project-kpi,
body.theme-dark .public-herbs-v2 .ph-kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(183,227,95,.035)) !important;
  border-color: rgba(183, 227, 95, .14) !important;
}

/* Public home: WTR hero mood */
.public-home-page {
  background:
    radial-gradient(780px 420px at 0% 0%, rgba(183, 227, 95, .20), transparent 62%),
    radial-gradient(760px 390px at 100% 4%, rgba(11, 108, 132, .15), transparent 60%),
    linear-gradient(180deg, rgba(247, 255, 249, .75), rgba(255, 255, 255, .90)) !important;
}

html[data-theme="dark"] .public-home-page,
body.theme-dark .public-home-page {
  background:
    radial-gradient(800px 430px at 0% 0%, rgba(16, 166, 111, .18), transparent 62%),
    radial-gradient(760px 390px at 100% 4%, rgba(11, 108, 132, .18), transparent 60%),
    linear-gradient(180deg, rgba(3, 24, 18, .70), rgba(2, 15, 12, .92)) !important;
}

.public-home-page .hero {
  position: relative;
  padding: clamp(2rem, 5vw, 4.6rem) 0 2.1rem !important;
  overflow: hidden;
}

.public-home-page .hero::before,
.public-herbs-v2 .ph-hero::before,
.public-map .map-hero::before,
.public-projects .project-hero::before {
  content: "";
  position: absolute;
  inset: -40% -16% auto auto;
  width: 520px;
  height: 520px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 227, 95, .32), rgba(11, 108, 132, .08) 42%, transparent 68%);
  filter: blur(2px);
}

.public-home-page .hero-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.2rem) !important;
}

.public-home-page .hero-shell::after {
  content: "";
  position: absolute;
  inset: auto -160px -210px auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 227, 95, .28), transparent 70%);
  pointer-events: none;
}

.public-home-page .eyebrow,
.public-home-page .soft-chip,
.public-home-page .mini-badge,
.public-home-page .metric-badge,
.public-herbs-v2 .chip,
.public-map .chip,
.public-map .map-hero__kicker,
.public-projects .project-kicker {
  color: #063829 !important;
  border-color: rgba(8, 114, 78, .16) !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 12px 26px rgba(4, 61, 47, .08);
  font-weight: 850 !important;
}

html[data-theme="dark"] .public-home-page .eyebrow,
html[data-theme="dark"] .public-home-page .soft-chip,
html[data-theme="dark"] .public-home-page .mini-badge,
html[data-theme="dark"] .public-home-page .metric-badge,
html[data-theme="dark"] .public-herbs-v2 .chip,
html[data-theme="dark"] .public-map .chip,
html[data-theme="dark"] .public-map .map-hero__kicker,
html[data-theme="dark"] .public-projects .project-kicker,
body.theme-dark .public-home-page .eyebrow,
body.theme-dark .public-home-page .soft-chip,
body.theme-dark .public-home-page .mini-badge,
body.theme-dark .public-home-page .metric-badge,
body.theme-dark .public-herbs-v2 .chip,
body.theme-dark .public-map .chip,
body.theme-dark .public-map .map-hero__kicker,
body.theme-dark .public-projects .project-kicker {
  color: #ecfdf5 !important;
  background: rgba(255, 255, 255, .075) !important;
  border-color: rgba(255, 255, 255, .13) !important;
}

.public-home-page .hero-title,
.public-herbs-v2 h1,
.public-map .map-hero h3,
.public-projects .project-hero h1 {
  color: #063829 !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

.public-home-page .hero-title {
  font-size: clamp(2.45rem, 5.3vw, 4.85rem) !important;
  line-height: .98 !important;
  max-width: 850px;
  background: linear-gradient(135deg, #043d2f 0%, #08724e 48%, #0b6c84 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

html[data-theme="dark"] .public-home-page .hero-title,
body.theme-dark .public-home-page .hero-title {
  background: linear-gradient(135deg, #ecfdf5 0%, #d9f99d 48%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.public-home-page .hero-desc,
.public-home-page .section-desc,
.public-home-page .spotlight-text,
.public-home-page .data-card-text,
.public-home-page .project-text,
.public-herbs-v2 .text-muted,
.public-map .text-muted,
.public-projects .text-muted,
.public-projects .project-hero p,
.public-herb-detail .text-muted {
  color: #526b62 !important;
}

html[data-theme="dark"] .public-home-page .hero-desc,
html[data-theme="dark"] .public-home-page .section-desc,
html[data-theme="dark"] .public-home-page .spotlight-text,
html[data-theme="dark"] .public-home-page .data-card-text,
html[data-theme="dark"] .public-home-page .project-text,
html[data-theme="dark"] .public-herbs-v2 .text-muted,
html[data-theme="dark"] .public-map .text-muted,
html[data-theme="dark"] .public-projects .text-muted,
html[data-theme="dark"] .public-projects .project-hero p,
html[data-theme="dark"] .public-herb-detail .text-muted,
body.theme-dark .public-home-page .hero-desc,
body.theme-dark .public-home-page .section-desc,
body.theme-dark .public-home-page .spotlight-text,
body.theme-dark .public-home-page .data-card-text,
body.theme-dark .public-home-page .project-text,
body.theme-dark .public-herbs-v2 .text-muted,
body.theme-dark .public-map .text-muted,
body.theme-dark .public-projects .text-muted,
body.theme-dark .public-projects .project-hero p,
body.theme-dark .public-herb-detail .text-muted {
  color: #cde8dd !important;
}

.public-home-page .search-card,
.public-herbs-v2 .ph-panel {
  border-radius: 24px !important;
  border: 1px solid rgba(8, 114, 78, .13) !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 16px 42px rgba(4,61,47,.08);
}

html[data-theme="dark"] .public-home-page .search-card,
html[data-theme="dark"] .public-herbs-v2 .ph-panel,
body.theme-dark .public-home-page .search-card,
body.theme-dark .public-herbs-v2 .ph-panel {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

body.public-shell .form-control,
body.public-shell .form-select {
  border-radius: 16px !important;
  border-color: rgba(8, 114, 78, .18) !important;
  background-color: rgba(255, 255, 255, .88) !important;
  min-height: 48px;
}

body.public-shell .form-control:focus,
body.public-shell .form-select:focus {
  border-color: rgba(8, 114, 78, .48) !important;
  box-shadow: 0 0 0 .25rem rgba(183, 227, 95, .18) !important;
}

html[data-theme="dark"] body.public-shell .form-control,
html[data-theme="dark"] body.public-shell .form-select,
body.public-shell.theme-dark .form-control,
body.public-shell.theme-dark .form-select {
  color: #ecfdf5 !important;
  background-color: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

.public-home-page .hero-visual {
  border-radius: 34px !important;
  overflow: hidden;
}

.public-home-page .hero-visual-media::after {
  background:
    linear-gradient(180deg, rgba(4, 61, 47, .02), rgba(4, 61, 47, .72)),
    radial-gradient(circle at 40% 20%, rgba(183, 227, 95, .16), transparent 42%) !important;
}

.public-home-page .hero-overlay-box {
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.public-home-page .section-wrap {
  padding-bottom: clamp(2rem, 5vw, 4.5rem) !important;
}

.public-home-page .section-title,
.public-home-page .spotlight-title,
.public-home-page .data-card-title,
.public-home-page .project-title,
.public-herbs-v2 .ph-title,
.public-projects .project-card h3,
.public-herb-detail .fw-bold {
  color: #0a3d30 !important;
  font-weight: 950 !important;
}

html[data-theme="dark"] .public-home-page .section-title,
html[data-theme="dark"] .public-home-page .spotlight-title,
html[data-theme="dark"] .public-home-page .data-card-title,
html[data-theme="dark"] .public-home-page .project-title,
html[data-theme="dark"] .public-herbs-v2 .ph-title,
html[data-theme="dark"] .public-projects .project-card h3,
html[data-theme="dark"] .public-herb-detail .fw-bold,
body.theme-dark .public-home-page .section-title,
body.theme-dark .public-home-page .spotlight-title,
body.theme-dark .public-home-page .data-card-title,
body.theme-dark .public-home-page .project-title,
body.theme-dark .public-herbs-v2 .ph-title,
body.theme-dark .public-projects .project-card h3,
body.theme-dark .public-herb-detail .fw-bold {
  color: #f1fff8 !important;
}

.public-home-page .spotlight-item,
.public-home-page .quick-link {
  border-radius: 22px !important;
  border-color: rgba(8, 114, 78, .12) !important;
  background: rgba(255, 255, 255, .68) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.public-home-page .spotlight-item:hover,
.public-home-page .quick-link:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 114, 78, .25) !important;
  box-shadow: 0 18px 44px rgba(4, 61, 47, .13) !important;
}

html[data-theme="dark"] .public-home-page .spotlight-item,
html[data-theme="dark"] .public-home-page .quick-link,
body.theme-dark .public-home-page .spotlight-item,
body.theme-dark .public-home-page .quick-link {
  color: #ecfdf5 !important;
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

.public-home-page .spotlight-thumb,
.public-herbs-v2 .ph-thumb .fallback {
  background:
    radial-gradient(circle at 30% 20%, rgba(183, 227, 95, .36), transparent 48%),
    linear-gradient(135deg, rgba(8, 114, 78, .20), rgba(11, 108, 132, .14)) !important;
}

.public-home-page .metric-value,
.public-map .map-kpi__value,
.public-projects .project-kpi__value,
.public-herbs-v2 .ph-kpi .value {
  color: #063829 !important;
  font-weight: 950 !important;
}

html[data-theme="dark"] .public-home-page .metric-value,
html[data-theme="dark"] .public-map .map-kpi__value,
html[data-theme="dark"] .public-projects .project-kpi__value,
html[data-theme="dark"] .public-herbs-v2 .ph-kpi .value,
body.theme-dark .public-home-page .metric-value,
body.theme-dark .public-map .map-kpi__value,
body.theme-dark .public-projects .project-kpi__value,
body.theme-dark .public-herbs-v2 .ph-kpi .value {
  color: #d9f99d !important;
}

/* List/map/project pages */
.public-herbs-v2 .ph-hero,
.public-map .map-hero,
.public-projects .project-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 0%, rgba(183, 227, 95, .24), transparent 34%),
    radial-gradient(circle at 96% 10%, rgba(11, 108, 132, .15), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(239, 255, 235, .76)) !important;
}

html[data-theme="dark"] .public-herbs-v2 .ph-hero,
html[data-theme="dark"] .public-map .map-hero,
html[data-theme="dark"] .public-projects .project-hero,
body.theme-dark .public-herbs-v2 .ph-hero,
body.theme-dark .public-map .map-hero,
body.theme-dark .public-projects .project-hero {
  background:
    radial-gradient(circle at 8% 0%, rgba(16, 166, 111, .20), transparent 34%),
    radial-gradient(circle at 96% 10%, rgba(11, 108, 132, .20), transparent 34%),
    linear-gradient(135deg, rgba(6, 32, 27, .92), rgba(8, 24, 22, .80)) !important;
}

.public-map .map-board {
  overflow: hidden;
}

.public-map .map-board__head {
  background: rgba(255, 255, 255, .62) !important;
  border-bottom-color: rgba(8, 114, 78, .12) !important;
}

html[data-theme="dark"] .public-map .map-board__head,
body.theme-dark .public-map .map-board__head {
  background: rgba(255, 255, 255, .055) !important;
  border-bottom-color: rgba(255, 255, 255, .11) !important;
}

.public-herbs-v2 .ph-status,
.public-herbs-v2 .quick-filter,
.public-projects .project-badge,
.public-map .map-pill {
  border-radius: 999px !important;
}

/* Footer */
.public-footer {
  margin-top: 0 !important;
  border-top: 1px solid rgba(8, 114, 78, .14) !important;
  color: #dcefe8 !important;
  background:
    radial-gradient(620px 260px at 10% 0%, rgba(183, 227, 95, .18), transparent 60%),
    radial-gradient(620px 260px at 90% 10%, rgba(11, 108, 132, .22), transparent 60%),
    linear-gradient(135deg, #043d2f 0%, #08724e 52%, #0b6c84 100%) !important;
}

.public-footer__inner {
  padding: 1.75rem 0 !important;
}

.public-footer__brand {
  color: #ffffff !important;
  font-size: 1.08rem;
  font-weight: 950 !important;
}

.public-footer__desc {
  color: rgba(255, 255, 255, .82) !important;
}

.public-footer__links a {
  color: #063829 !important;
  border-color: rgba(255, 255, 255, .28) !important;
  background: rgba(255, 255, 255, .86) !important;
  font-weight: 850 !important;
}

.public-footer__links a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .12) !important;
  transform: translateY(-2px);
}

/* WTR intro overlay, homepage only */
.wtr25-intro {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(183, 227, 95, .36), transparent 28rem),
    radial-gradient(circle at 86% 16%, rgba(255, 255, 255, .18), transparent 22rem),
    linear-gradient(135deg, #043d2f 0%, #08724e 48%, #0b6c84 100%);
  transition: opacity .75s ease, visibility .75s ease, transform .75s ease;
}

.wtr25-intro.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
}

.wtr25-intro__card {
  position: relative;
  width: min(960px, 94vw);
  overflow: hidden;
  text-align: center;
  padding: clamp(30px, 6vw, 76px);
  border-radius: 38px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .26);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.wtr25-intro__card::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 90deg, transparent, rgba(255, 255, 255, .24), transparent, rgba(183, 227, 95, .24), transparent);
  animation: wtr25Spin 10s linear infinite;
}

.wtr25-intro__inner {
  position: relative;
  z-index: 2;
}

.wtr25-intro__badge {
  display: inline-flex;
  padding: 9px 18px;
  border-radius: 999px;
  color: #063829;
  background: rgba(255, 255, 255, .92);
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}

.wtr25-intro__title {
  margin: 24px auto 14px;
  max-width: 860px;
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -.045em;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .24);
}

.wtr25-intro__desc {
  margin: 0 auto 32px;
  max-width: 760px;
  font-size: clamp(17px, 2vw, 25px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .90);
}

.wtr25-enter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  color: #063829;
  background: linear-gradient(135deg, #fff 0%, #dff8a5 100%);
  font-size: 18px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wtr25-enter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

.wtr25-orb {
  position: fixed;
  z-index: 0;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(183, 227, 95, .34), rgba(8, 114, 78, .03) 72%);
  animation: wtr25Float var(--speed) ease-in-out infinite alternate;
}

.wtr25-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .72s ease, transform .72s ease;
}

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

.wtr25-number-pop {
  animation: wtr25Pop .42s ease both;
}

@keyframes wtr25Spin { to { transform: rotate(360deg); } }
@keyframes wtr25Float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, -26px, 0) scale(1.08); }
}
@keyframes wtr25Pop {
  0% { transform: scale(.92); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (max-width: 991.98px) {
  .public-navbar #navPublic {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(8, 114, 78, .14) !important;
  }

  html[data-theme="dark"] .public-navbar #navPublic,
  body.theme-dark .public-navbar #navPublic {
    background: rgba(2, 22, 17, .96) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }
}

@media (max-width: 767.98px) {
  .public-home-page .hero-title {
    font-size: clamp(2.15rem, 12vw, 3.4rem) !important;
  }

  .wtr25-intro__card {
    border-radius: 28px;
  }

  .wtr25-enter-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wtr25-intro,
  .wtr25-intro__card::before,
  .wtr25-orb,
  .wtr25-reveal,
  .wtr25-number-pop,
  body.public-shell a,
  body.public-shell button,
  .public-home-page .glass-card,
  .public-home-page .surface-card,
  .public-home-page .data-card,
  .public-home-page .spotlight-card,
  .public-herbs-v2 .ph-card,
  .public-map .map-kpi,
  .public-projects .project-card {
    animation: none !important;
    transition: none !important;
  }

  .wtr25-reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   2026-05-11 Public light-mode contrast guard
   Fix: keep WTR25 theme but prevent white/pale text on light cards.
   Scope: public pages only. Dark mode and intentional image/footer/intro overlays are preserved.
========================================================= */
html[data-theme="light"] body.public-shell:not(.theme-dark),
html:not([data-theme="dark"]) body.public-shell:not(.theme-dark) {
  --wtr25-ink: #08251c;
  --wtr25-muted: #3f5f54;
  --public-ink: #10251d;
  --public-heading: #052f24;
  --public-muted: #3f5f54;
  --public-muted-2: #587168;
  color: #10251d !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.public-home-page, .public-herbs-v2, .public-map, .public-projects, .public-herb-detail),
html:not([data-theme="dark"]) body.public-shell:not(.theme-dark) :where(.public-home-page, .public-herbs-v2, .public-map, .public-projects, .public-herb-detail) {
  color: #10251d !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) :where(
  .glass-card,
  .surface-card,
  .section-card,
  .data-card,
  .spotlight-card,
  .metric-card,
  .search-card,
  .spotlight-item,
  .quick-link,
  .ph-hero,
  .ph-panel,
  .ph-card,
  .ph-side-card,
  .ph-kpi,
  .map-hero,
  .map-kpi,
  .map-board,
  .map-board__head,
  .project-hero,
  .project-kpi,
  .project-card,
  .project-panel,
  .public-herb-detail .card,
  .public-herb-detail .tab-shell,
  .public-herb-detail .list-group-item,
  .selected-card,
  .selected-meta__row,
  .empty-state,
  .herb-link-card,
  .herb-link-empty,
  .media-item,
  .occ-dashboard,
  .db-alert
),
html:not([data-theme="dark"]) body.public-shell:not(.theme-dark) :where(
  .glass-card,
  .surface-card,
  .section-card,
  .data-card,
  .spotlight-card,
  .metric-card,
  .search-card,
  .spotlight-item,
  .quick-link,
  .ph-hero,
  .ph-panel,
  .ph-card,
  .ph-side-card,
  .ph-kpi,
  .map-hero,
  .map-kpi,
  .map-board,
  .map-board__head,
  .project-hero,
  .project-kpi,
  .project-card,
  .project-panel,
  .public-herb-detail .card,
  .public-herb-detail .tab-shell,
  .public-herb-detail .list-group-item,
  .selected-card,
  .selected-meta__row,
  .empty-state,
  .herb-link-card,
  .herb-link-empty,
  .media-item,
  .occ-dashboard,
  .db-alert
) {
  color: #10251d !important;
  border-color: rgba(8, 114, 78, .16) !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) :where(
  .glass-card,
  .surface-card,
  .section-card,
  .data-card,
  .spotlight-card,
  .metric-card,
  .search-card,
  .spotlight-item,
  .quick-link,
  .ph-hero,
  .ph-panel,
  .ph-card,
  .ph-side-card,
  .ph-kpi,
  .map-hero,
  .map-kpi,
  .map-board,
  .project-hero,
  .project-kpi,
  .project-card,
  .project-panel,
  .public-herb-detail .card,
  .public-herb-detail .tab-shell,
  .selected-card,
  .empty-state,
  .herb-link-card,
  .media-item,
  .occ-dashboard,
  .db-alert
) :where(h1,h2,h3,h4,h5,h6,.fw-bold,.fw-semibold,.fw-black,strong,b,.section-title,.spotlight-title,.data-card-title,.project-title,.ph-title,.metric-value,.map-kpi__value,.project-kpi__value,.value,.title,.card-title):not(.hero-overlay):not(.hero-overlay *):not(.public-footer):not(.public-footer *):not(.wtr25-intro):not(.wtr25-intro *) {
  color: #052f24 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) :where(
  .glass-card,
  .surface-card,
  .section-card,
  .data-card,
  .spotlight-card,
  .metric-card,
  .search-card,
  .spotlight-item,
  .quick-link,
  .ph-hero,
  .ph-panel,
  .ph-card,
  .ph-side-card,
  .ph-kpi,
  .map-hero,
  .map-kpi,
  .map-board,
  .project-hero,
  .project-kpi,
  .project-card,
  .project-panel,
  .public-herb-detail .card,
  .public-herb-detail .tab-shell,
  .selected-card,
  .empty-state,
  .herb-link-card,
  .media-item,
  .occ-dashboard,
  .db-alert
) :where(p,li,dd,dt,label,small,.small,.text-muted,.text-secondary,.form-text,.section-desc,.spotlight-text,.data-card-text,.project-text,.metric-label,.metric-sub,.ph-desc,.ph-sci,.map-kpi__label,.project-kpi__label,.result-card__meta,.herb-link-card__meta,.selected-desc,.selected-meta,.popup-meta):not(.hero-overlay):not(.hero-overlay *):not(.public-footer):not(.public-footer *):not(.wtr25-intro):not(.wtr25-intro *) {
  color: #3f5f54 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Override legacy utility classes that made text disappear on light panels. */
html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.public-home-page, .public-herbs-v2, .public-map, .public-projects, .public-herb-detail) :where(.text-white,.text-light,.text-white-50):not(.btn):not(.badge):not(.hero-overlay):not(.hero-overlay *):not(.public-footer):not(.public-footer *):not(.wtr25-intro):not(.wtr25-intro *) {
  color: #10251d !important;
  opacity: 1 !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.public-home-page, .public-herbs-v2, .public-map, .public-projects, .public-herb-detail) :where(.text-white-50):not(.hero-overlay):not(.hero-overlay *):not(.public-footer):not(.public-footer *):not(.wtr25-intro):not(.wtr25-intro *) {
  color: #587168 !important;
}

/* Inputs/search blocks: readable in light mode. */
html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.form-control,.form-select,.input-group-text,textarea.form-control) {
  color: #10251d !important;
  background-color: rgba(255,255,255,.94) !important;
  border-color: rgba(8, 114, 78, .22) !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.form-control,.form-select,textarea.form-control)::placeholder {
  color: #647b72 !important;
  opacity: 1 !important;
}

/* Navbar light-mode contrast. */
html[data-theme="light"] body.public-shell:not(.theme-dark) .public-navbar,
html[data-theme="light"] body.public-shell:not(.theme-dark) .public-navbar #navPublic {
  color: #10251d !important;
  background: rgba(255,255,255,.94) !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) .public-navbar :where(.brand-title,.nav-link,.dropdown-item) {
  color: #163a31 !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) .public-navbar :where(.brand-subtitle,.small,.text-muted) {
  color: #526b62 !important;
}

/* Buttons keep intentional contrast after the broad text guard. */
html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.btn-primary,.btn-success,.btn-outline-brand:hover,.btn-outline-success:hover,.btn-outline-secondary:hover) {
  color: #ffffff !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.btn-brand,.public-navbar .btn-brand) {
  color: #063829 !important;
}

/* Intentional dark/photo/intro/footer surfaces must stay light text. */
html[data-theme="light"] body.public-shell:not(.theme-dark) :where(.hero-overlay,.hero-overlay *,.hero-visual .text-white,.hero-visual .text-light,.public-footer,.public-footer *,.wtr25-intro,.wtr25-intro *,.wtr25-enter-btn:hover) {
  color: #ffffff !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) .wtr25-intro__badge,
html[data-theme="light"] body.public-shell:not(.theme-dark) .wtr25-enter-btn,
html[data-theme="light"] body.public-shell:not(.theme-dark) .public-footer__links a {
  color: #063829 !important;
}

html[data-theme="light"] body.public-shell:not(.theme-dark) .public-footer__desc {
  color: rgba(255,255,255,.84) !important;
}