/* =========================================================
   TOKENS & GLOBAL VARS
   ========================================================= */
:root {
  /* Palette */
  --pineBlue:#0F3F5E; --forestGreen:#2E9949; --sunrise:#F7A21B;
  --tealGlow:#1E6A86; --mist:#F2F3F4; --ink:#081620;
  --stone:#D9D9D6; --sand:#E6D5B8; --river:#4A90A4;
  --sage:#8FAF9F; --clay:#B65C3A;

/* Darker companion to pineBlue (pretty inky teal-navy) */
--pineBlueDeep: #0B2E47; /* “Midnight River” */
 
  --sunriseMuted: color-mix(in oklab, var(--sunrise) 50%, var(--ink)); /* warm, desaturated */
  /* alt flavors if you want to try them:
     --sunriseMuted: color-mix(in oklab, var(--sunrise) 60%, #0B2030);
     --sunriseMuted: #DFA85A;  // hand-picked soft sunrise
     --sunriseMuted: #C98C30;  // more muted/earthy
  */

  /* ...existing tokens... */
  --sageMuted: color-mix(in oklab, var(--sage) 95%, var(--ink)); /* default muted */
  /* try these alternates if you want different vibes: */
  /* --sageMuted: color-mix(in oklab, var(--sage) 60%, #0B2030);  */
  /* --sageMuted: #7B9E8F;   // hand-picked soft sage */
  /* --sageMuted: #6F9183;   // slightly deeper, cooler */

  /* Roles */
  --bg-surface: var(--mist);
  --text-main:  var(--ink);
  --text-soft:  color-mix(in oklab, var(--ink) 65%, white);
  --brand:      var(--pineBlue);
  --accent:     var(--sunrise);
  --link:       var(--tealGlow);

  /* Type scale */
  --step--1: clamp(12px, 0.74rem + 0.1vw, 14px);
  --step-0:  clamp(14px, 0.83rem + 0.2vw, 16px);
  --step-1:  clamp(18px, 1rem + 0.6vw, 22px);
  --step-2:  clamp(22px, 1.1rem + 1vw, 28px);
  --step-3:  clamp(28px, 1.2rem + 1.6vw, 36px);

  /* Layout */
  --nav-h: 60px;

  /* Hero background */
  --hero-bg:
    radial-gradient(1000px 600px at 10% 0%, rgba(30,106,134,.25), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(247,162,27,.20), transparent 60%),
    linear-gradient(180deg, var(--pineBlue), #081824);

/*Section and Header Font Token*/
  --headingFont: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bodyFont: "Manrope","Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }


}


body {
  font-family: var(--bodyFont);
}

h1, h2, h3, h4, h5, h6, .section-title {
  font-family: var(--headingFont);
}

/* =========================================================
   BASE / TYPE
   ========================================================= */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { 
background: var(--bg-surface); color: var(--text-main); font-size: var(--step-0); line-height: 1.55; letter-spacing: 0.01em; }
h1,h2,h3 { letter-spacing: -0.01em; line-height: 1.2; }
.section-title { font-size: var(--step-2); color: var(--brand); letter-spacing: .5px; }

a { color: var(--link); }
a:hover { color: color-mix(in oklab, var(--link) 80%, black); }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* Low-opacity frosted bar once scrolled */
.navbar.scrolled {
  background: rgba(15, 63, 94, .45);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  border-bottom: 1px solid color-mix(in oklab, var(--river) 25%, white);
}
.nav-link { position: relative; color: white !important; }
.nav-link::after {
 pointer-events: none;
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background: linear-gradient(90deg, var(--sunriseMuted), var(--sageMuted));
  transition: width .7s ease;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }
@media (max-width: 991.98px){
  #navMenu .navbar-nav { margin-left:auto; align-items:flex-end; }
  #navMenu .nav-link { text-align:right; }
}


/* =========================================================
   HERO
   ========================================================= */
.hero { background: var(--hero-bg); color:white; padding-top:8rem; padding-bottom:5rem; }
.hero-logo { width:120px; height:100px; object-fit:contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }



/* =========================================================
   BUTTONS
   ========================================================= */
:where(.btn){ transition: transform .2s, box-shadow .2s, background-color .2s, color .2s, border-color .2s; will-change: transform, box-shadow; }
:where(.btn):hover{ transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.18); }
:where(.btn):active{ transform: translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.18); }
:where(a,button,.btn):focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 60%, white); border-radius:12px; }
.btn-outline-dark:hover,.btn-outline-dark:focus-visible{ background-color: color-mix(in oklab, var(--ink) 8%, white); border-color: color-mix(in oklab, var(--ink) 22%, white); color: var(--ink); }
.btn-gradient{ border:0; color:white; background-image: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 60%, var(--link))); box-shadow:0 10px 30px rgba(30,106,134,.3); }
.btn-gradient:hover,.btn-gradient:focus-visible{ background-image: linear-gradient(135deg, color-mix(in oklab, var(--brand) 86%, white), color-mix(in oklab, var(--brand) 40%, var(--link))); }
.btn-sunrise{ background: var(--sunrise); color:#0B2030; border:none; }
.btn-sunrise:hover,.btn-sunrise:focus-visible{ background-color: color-mix(in oklab, var(--sunrise) 85%, black); color:#0B2030; }
.btn-pay{ transition: transform .25s, box-shadow .25s; }
.btn-pay:hover{ transform: translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.25); }
.nav-hov{ transition: transform .25s; }
.nav-hov:hover{ transform: translateY(-3px); }

/* =========================================================
   CARDS (glassy, river‑tinted)
   ========================================================= */
.card-feature{
  position:relative; overflow:hidden;
  border-radius:18px; border:1px solid color-mix(in oklab, var(--river) 22%, white);
  padding: clamp(16px, 2vw, 28px);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--river) 16%, transparent) 0%, rgba(255,255,255,0.65) 60%);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 30px rgba(11,32,48,0.06);
  color: var(--ink);
  transition: transform .3s ease, box-shadow .3s ease, background .4s ease, border-color .3s ease;
  transform: translateZ(0) scale(1);
}
.card-feature:hover{
  transform: translateY(-6px) scale(1.02);
  background: linear-gradient(135deg, color-mix(in oklab, var(--river) 18%, transparent) 0%, rgba(255,255,255,0.78) 60%);
  border-color: color-mix(in oklab, var(--river) 30%, white);
  box-shadow: 0 12px 40px rgba(11,32,48,0.10);
}

/* sheen (reflective) */
.card-feature::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0) 60%);
  opacity:0; transition: opacity .35s ease; pointer-events:none; z-index:1;
}
.card-feature:hover::before{ opacity:1; }

/* rim glow ring sits above sheen */
.card-feature.rim-glow::after{
  content:""; position:absolute; inset:-2px; border-radius: calc(18px + 2px);
  padding:4.5px;
  background: conic-gradient(from 0deg, rgba(247,162,27,.95), rgba(46,153,73,.90), rgba(30,106,134,.90), rgba(247,162,27,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; filter: blur(1px); transition: opacity .25s ease, filter .25s ease;
  pointer-events:none; z-index:2;
}
.card-feature.rim-glow:hover::after{ opacity:1; filter: blur(1.5px); transition: opacity 1.5s ease-out;}

/* List rhythm */
.card-feature h3,.card-feature .section-title{ margin:0 0 10px 0; line-height:1.2; }
.card-feature .list-unstyled{ margin:0; padding:0; }
.card-feature .list-unstyled>li{ padding:6px 0; color: var(--text-soft); }
.card-feature .list-unstyled i{ transform: translateY(1px); }

/* Amenities hover: gently enlarge only the card title*/ 
#amenities .card-feature .card-title{ display:inline-block; transform-origin:center; transition: transform 1s ease; will-change: transform; transform: translateZ(0); }
#amenities .card-feature:hover .card-title{ transform: scale(1.2); }


/* Section titles sizing */
#amenities .section-title,
#dues .section-title{ font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height:1.1; letter-spacing:-0.01em; margin-bottom:.5rem; }

/* Title only */
.dues-why h5 {
  font-size: clamp(0.8rem, 0.6rem + 0.7vw, 1.4rem);
  line-height: 1.15;
  font-weight: 520;
  letter-spacing: -0.012em;
}

/* Contents (list + text) only inside this card */
.dues-why ul,
.dues-why p,
.dues-why li,
.dues-why small {
  font-size: clamp(.9rem, .9rem + .4vw, 1.1rem);
  line-height: 1.55;
}
.dues-why li { margin-bottom: 6px; }

/* Section backgrounds */
/* Dues helper card */
.card-feature.dues-why{ border:1px solid #e6eef2; }

/* All cards — disable text selection + I-beam, keep interactive stuff normal */
.card-feature,
.card-feature *:not(a, button, .btn, input, textarea, select, label) {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-touch-callout: none; /* iOS long-press menu */
}

/* Preserve normal behavior for interactive elements */
.card-feature a,
.card-feature button,
.card-feature .btn,
.card-feature input,
.card-feature textarea,
.card-feature select,
.card-feature label {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
  cursor: pointer;
}
/* for cards that need selection
.card-feature.allow-select,
.card-feature.allow-select * { user-select: text; cursor: text; }*/

/*AMENITIES — card titles in Jakarta
#amenities .card-feature h1,
#amenities .card-feature h2,
#amenities .card-feature h3,
#amenities .card-feature h4,
#amenities .card-feature h5,
#amenities .card-feature h6,
#amenities .card-feature .card-title,
#amenities .card-feature .section-title {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
  font-weight: 700;
  letter-spacing: 0.2px;
}*/

/*#amenities .section-title,
#dues .section-title,
#donate .section-title,
#events .section-title,
#contact .section-title {
  font-family: var(--headingFont) !important;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6, .section-title {
  font-family: var(--headingFont) !important;
  font-weight: 400;
}
*/

/* Reuse the amenities pattern for targeted cards */
.card-feature.title-pop h1,
.card-feature.title-pop h2,
.card-feature.title-pop h3,
.card-feature.title-pop h4,
.card-feature.title-pop h5,
.card-feature.title-pop .section-title {
  display: inline-block;
  transform: translateZ(0);
  transition: transform 1s ease, text-shadow .35s ease;
}

.card-feature.title-pop:hover h1,
.card-feature.title-pop:hover h2,
.card-feature.title-pop:hover h3,
.card-feature.title-pop:hover h4,
.card-feature.title-pop:hover h5,
.card-feature.title-pop:hover .section-title {
  transform: scale(1.15);
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(11,32,48,.18);
}


/* =========================================================
   SPECIAL: “What we’re bringing back” card
   ========================================================= */
.card-feature.bringback .section-title{ color: var(--ink); display:block; text-align:center; }
.card-feature.bringback .list-unstyled{ display:inline-block; margin:0 auto; text-align:left; max-width:100%; }
.card-feature.bringback .list-unstyled>li{ color: var(--ink); }
.card-feature.bringback .list-unstyled>li i,
.card-feature.bringback .list-unstyled>li strong{ color: currentColor !important; }


/* ==========================================
   “What we’re bringing back” card — centered + enlarged
   ========================================== */
.card-feature.bringback {
  text-align: center;
  padding: clamp(20px, 3vw, 40px);
}

.card-feature.bringback .section-title {
  color: var(--pineBlueDeep);
  display: block;
  text-align: center;
  font-size: clamp(1.4rem, 1.0rem + 1.2vw, 2.0rem); /* larger title */
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: -0.015em;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), text-shadow .28s ease;
  will-change: transform, text-shadow;
  transform: translateZ(0) scale(1);
  text-shadow: 0 0 0 rgba(255,255,255,0);
}

.card-feature.bringback:hover .section-title {
  transform: translateZ(0) scale(1.04);
  text-shadow: 0 0 10px rgba(255,255,255,.18);
}

.card-feature.bringback .list-unstyled {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  list-style: none;
  font-size: clamp(1.00rem, 0.90rem + 0.4vw, 1.2rem); /* bump up list text */
  font-weight: 500;
  line-height: 1.6;
}

.card-feature.bringback .list-unstyled li {
  color: var(--pineBlueDeep);
  padding: 1px 0;
  white-space: nowrap;
}

.card-feature.bringback .list-unstyled i,
.card-feature.bringback .list-unstyled strong {
  color: currentColor !important;
}

/* WHAT WE’RE BRINGING BACK — bigger pop on hover */
.card-feature.bringback .section-title{
  transform-origin: center;
  will-change: transform, text-shadow;
  transform: translateZ(0) scale(1);
  transition:
    transform 2.5s cubic-bezier(.25,.8,.25,1),
    text-shadow .6s ease;
  text-shadow: 0 0 0 rgba(255,255,255,0);
}

/* More dramatic hover */
.card-feature.bringback:hover .section-title{
  transform: translateZ(0) scale(1.08);          /* was 1.03 */
  text-shadow:
    0 0 10px rgba(255,255,255,.18),
    0 6px 18px rgba(14,47,69,.10);               /* subtle depth */
}

/* (Optional) keep it a bit tamer on very small screens */
@media (max-width: 480px){
  .card-feature.bringback:hover .section-title{ transform: translateZ(0) scale(1.05); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .card-feature.bringback .section-title{ transition: none; }
}

/* WHAT WE'RE BRINGING BACK — custom font (Alternate option)
.wwbb-title{
  font-family: 'DM Serif Display', serif;
  font-weight: 400;              // display fonts typically stay regular
  letter-spacing: 0.2px;         // tiny tracking looks refined
}
*/


/* =========================================================
   EFFECTS: reveal + bounce
   ========================================================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform: translateY(0); }

@keyframes bounceVar{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(var(--bounce-amt,-5px)); } }
.reveal.visible.bounce-subtle{ --bounce-amt: -5px; animation: bounceVar 3s ease-in-out infinite; }
.bounce-subtle.card-feature:hover{ animation-play-state: paused; transform: translateY(-6px) scale(1.02); }
@media (prefers-reduced-motion: reduce){ .reveal.visible.bounce-subtle{ animation: none !important; } }

/* (bugfix) ensure valid unit */
.bounce-deeper{ --bounce-amt: -8px; }

/* =========================================================
   BADGES / GALLERY / FOOTER
   ========================================================= */
.badge-pine{ background: var(--tealGlow); }
.badge-sunrise{ background: var(--sunrise); color: var(--ink); }
.gallery img{ border-radius:14px; width:100%; height:220px; object-fit:cover; }
.footer{ background:#06121C; color:#BBD1DD; }



/* ---- GLOBAL TONE ADJUSTMENTS (soft whites, richer darks) ---- */
.text-white { color: rgba(255,255,255,0.88) !important; }
.text-dark  { color: rgba(8,22,32,0.95) !important; }
.bg-white   { background-color: #f8f9fa !important; }

/* ---- THEME ADD-ON ---- */
/* =========================================================
   SECTION THEMES (Hero-inspired) — drop-in add-on
   Usage: add one of the .theme-* classes to any section
   Example: <section id="amenities" class="py-5 theme-river on-dark">...</section>
   ========================================================= */

/* ---------- Foreground helpers ---------- */
.on-dark {
  --fg: #F6FBFF;
  --fg-soft: color-mix(in oklab, white 80%, var(--fg) 20%);
  --fg-dim:  color-mix(in oklab, white 65%, var(--fg) 35%);
  --link:    color-mix(in oklab, #7FD4FF 80%, white);
  color: var(--fg);
}
.on-dark .text-muted { color: var(--fg-dim) !important; }
.on-dark a { color: var(--link); }
.on-dark a:hover { color: color-mix(in oklab, var(--link) 80%, #AEE6FF); }
.on-dark .section-title { color: #EAF6FF; }
.on-dark .btn-outline-dark { border-color: #cfe8f6; color:#eaf6ff; }
.on-dark .btn-outline-dark:hover { background: rgba(255,255,255,.08); border-color:#eaf6ff; }

/* Ensure Bootstrap icon colors inherit on dark */
.on-dark i[class^="bi"], .on-dark i[class*=" bi-"] { color: currentColor; }

/* Cards remain readable on dark by slightly brightening their glass */

.on-dark .card-feature {
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.48)); /* brighter glass */
  border-color: color-mix(in oklab, var(--river) 36%, white);
  color: #0B2030; /* darker text for contrast */
}


.on-dark .card-feature:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.56));
}

.on-dark .card-feature.rim-glow::after { opacity:.85; }

/* ---------- Default (light) foreground reset if needed ---------- */
.on-light {
  --fg: var(--text-main);
  --fg-soft: var(--text-soft);
  --fg-dim: color-mix(in oklab, var(--text-main) 65%, white);
  color: var(--fg);
}

/* =========================================================
   Themed Background Palettes
   Each theme uses layered radial glows + subtle grain
   ========================================================= */

/* Shared subtle grain */
.section-grain {
  position: relative;
  isolation: isolate;
}
.section-grain::before {
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.06'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/></filter>\
    <rect width='100' height='100' filter='url(%23n)'/>\
  </svg>");
  background-size: 400px 400px;
  mix-blend-mode: overlay;
}

/* --- Deep (hero-like) --- */
.theme-deep {
  background:
    radial-gradient(1200px 700px at 6% -10%, rgba(30,106,134,0.42), rgba(30,106,134,0) 60%),
    radial-gradient(900px 520px at 96% -12%, rgba(247,162,27,0.30), rgba(247,162,27,0) 58%),
    linear-gradient(180deg, #0F3F5E 0%, #081824 100%);
  color: white;
}
.theme-deep.section-grain::before { opacity:.08; }

/* --- River (cool teal with river tint) --- */
.theme-river {
  background:
    radial-gradient(1100px 600px at 10% -8%, rgba(74,144,164,0.35), rgba(74,144,164,0) 60%),
    radial-gradient(900px 520px at 92% -12%, rgba(30,106,134,0.22), rgba(30,106,134,0) 58%),
    linear-gradient(180deg, #0E2F45 0%, #0A1C29 100%);
  color: white;
}

/* --- Sunrise (warm accent wash) --- */
.theme-sunrise {
  background:
    radial-gradient(1000px 520px at 84% -12%, rgba(247,162,27,0.34), rgba(247,162,27,0) 55%),
    radial-gradient(900px 520px at 12% -10%, rgba(46,153,73,0.15), rgba(46,153,73,0) 56%),
    linear-gradient(180deg, #0c2637 0%, #081824 100%);
  color: white;
}

/* --- Mist (light variant that still nods to hero) --- */
.theme-mist {
  background:
    radial-gradient(1000px 520px at 10% -10%, rgba(30,106,134,0.10), rgba(30,106,134,0) 60%),
    radial-gradient(900px 520px at 92% -12%, rgba(247,162,27,0.10), rgba(247,162,27,0) 58%),
    linear-gradient(180deg, #F7FBFD 0%, #E9F2F7 100%);
  color: var(--text-main);
}

/* Variant: flip glows horizontally */
.theme-flip-x {
  --flipX: 100% 0%;
  background:
    radial-gradient(1100px 600px at 90% -8%, rgba(74,144,164,0.35), rgba(74,144,164,0) 60%),
    radial-gradient(900px 520px at 8% -12%, rgba(247,162,27,0.30), rgba(247,162,27,0) 58%);
}

/* Variant: flip vertically (glows appear from bottom) */
.theme-flip-y {
  background:
    radial-gradient(1100px 600px at 10% 108%, rgba(74,144,164,0.35), rgba(74,144,164,0) 60%),
    radial-gradient(900px 520px at 92% 112%, rgba(247,162,27,0.30), rgba(247,162,27,0) 58%),
    linear-gradient(180deg, #081824 0%, #0F3F5E 100%);
}

/* =========================================================
   Spacing & dividers for dark sections
   ========================================================= */
.theme-deep, .theme-river, .theme-sunrise {
  position: relative;
}
.theme-deep .container > .text-center.mb-4,
.theme-river .container > .text-center.mb-4,
.theme-sunrise .container > .text-center.mb-4 {
  color: var(--fg, #EAF6FF);
}
.theme-deep hr, .theme-river hr, .theme-sunrise hr {
  border-color: color-mix(in oklab, var(--river) 25%, white);
  opacity: .4;
}

/* Optional: make section titles slightly brighter on dark */
.theme-deep .section-title,
.theme-river .section-title,
.theme-sunrise .section-title { color: #F0FAFF; }

/* =========================================================
   Example responsive padding tweaks so sections feel airy
   ========================================================= */
.theme-deep, .theme-river, .theme-sunrise, .theme-mist {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Specificity boost so themes win over any leftover ID-based rules */
section.theme-deep, section.theme-river, section.theme-sunrise, section.theme-mist { background: inherit; }
section.theme-deep { 
  background:
    radial-gradient(1200px 700px at 6% -10%, rgba(30,106,134,0.42), rgba(30,106,134,0) 60%),
    radial-gradient(900px 520px at 96% -12%, rgba(247,162,27,0.30), rgba(247,162,27,0) 58%),
    linear-gradient(180deg, #0F3F5E 0%, #081824 100%);
}
section.theme-river {
  background:
    radial-gradient(1100px 600px at 10% -8%, rgba(74,144,164,0.35), rgba(74,144,164,0) 60%),
    radial-gradient(900px 520px at 92% -12%, rgba(30,106,134,0.22), rgba(30,106,134,0) 58%),
    linear-gradient(180deg, #0E2F45 0%, #0A1C29 100%);
}
section.theme-sunrise {
  background:
    radial-gradient(1000px 520px at 84% -12%, rgba(247,162,27,0.34), rgba(247,162,27,0) 55%),
    radial-gradient(900px 520px at 12% -10%, rgba(46,153,73,0.15), rgba(46,153,73,0) 56%),
    linear-gradient(180deg, #0c2637 0%, #081824 100%);
}
section.theme-mist {
  background:
    radial-gradient(1000px 520px at 10% -10%, rgba(30,106,134,0.10), rgba(30,106,134,0) 60%),
    radial-gradient(900px 520px at 92% -12%, rgba(247,162,27,0.10), rgba(247,162,27,0) 58%),
    linear-gradient(180deg, #F7FBFD 0%, #E9F2F7 100%);
}

/* Hover zoom variable pattern */
.card-feature { --hover-scale: 1.02; transform-origin:center; }
.card-feature:hover { transform: translateY(-6px) scale(var(--hover-scale)); }
.bounce-subtle.card-feature:hover { animation-play-state: paused; transform: translateY(-6px) scale(var(--hover-scale)); }
.card-feature.bringback { --hover-scale: 1.06; }

/* Legibility tweaks on dark cards */
.on-dark .card-feature h3,
.on-dark .card-feature .card-title,
.on-dark .card-feature .section-title,
.on-dark .card-feature i,
.on-dark .card-feature strong { color: #0B2030 !important; }

.on-dark .card-feature .list-unstyled > li { color: #123047; }

/* Increase sheen visibility on all cards */


/* Force Calendar section cards to match glassy theme */
#events .card,
#events .p-4.rounded-4,
#events .bg-white {
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.48)) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in oklab, var(--river) 30%, white) !important;
  color: #0B2030 !important;
  box-shadow: 0 8px 30px rgba(11,32,48,0.06) !important;
}
#events .card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.56)) !important;
}
/* ==== Calendar section: force dark hero-style background ==== */
section#events.theme-river {
  background:
    radial-gradient(1100px 600px at 10% -8%, rgba(74,144,164,0.35), rgba(74,144,164,0) 60%),
    radial-gradient(900px 520px at 92% -12%, rgba(30,106,134,0.22), rgba(30,106,134,0) 58%),
    linear-gradient(180deg, #0E2F45 0%, #0A1C29 100%) !important; /* win all conflicts */
  color: #fff;
}

/* If any utilities are stuck on the section itself, neutralize them */
section#events.bg-white,
section#events .bg-white {            /* only if some inner wrapper is forcing white */
  background: transparent !important;
}

/* Make sure containers don’t reintroduce white */
section#events .container {
  background: transparent !important;
}
/* Flip Amenities vertically to mesh with hero */
#amenities.theme-river {
  background:
    radial-gradient(1100px 600px at 10% 108%, rgba(74,144,164,0.35), rgba(74,144,164,0) 60%),
    radial-gradient(900px 520px at 92% 112%, rgba(247,162,27,0.30), rgba(247,162,27,0) 58%),
    linear-gradient(180deg, #081824 0%, #0F3F5E 100%) !important;
}
.ph-duotone {
  font-size: 2rem;
  vertical-align: middle;
  margin-right: .5rem;
  --ph-color: var(--river, #4A90A4);       /* main stroke */
  --ph-secondary-color: var(--sunrise, #F
7A21B); /* accent fill */
  --ph-duotone-opacity: .4;                /* how strong the accent shows */
  transition: transform .25s ease, filter .25s ease;
}
.ph-duotone:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
}




/* =========================================================
   LEGIBILITY BOOST — Card text inside glassy surfaces
   ========================================================= */
.card-feature .list-unstyled > li {
  /* Darken list/body copy for better contrast on translucent white glass */
  color: color-mix(in oklab, var(--ink) 82%, white);
  /* A whisper of lift against the glass; adjust/remove if unwanted */
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}

.card-feature p,
.card-feature .text-muted,
.card-feature .small,
.card-feature small {
  color: color-mix(in oklab, var(--ink) 78%, white) !important;
}

/* On dark-themed sections, push card text a touch deeper */
.on-dark .card-feature { color: #07131B; }
.on-dark .card-feature .list-unstyled > li { color: #0C2432; }
.on-dark .card-feature .section-title { color: #061824 !important; }



/* =========================================================
   LEGIBILITY BOOST — PLUS (darker card text)
   ========================================================= */
.card-feature .list-unstyled > li {
  color: color-mix(in oklab, var(--ink) 90%, white);
  text-shadow: 0 1px 0 rgba(255,255,255,0.16);
}

.card-feature p,
.card-feature .text-muted,
.card-feature .small,
.card-feature small {
  color: color-mix(in oklab, var(--ink) 88%, white) !important;
}

/* On dark-themed sections, push card text a touch deeper */
.on-dark .card-feature { color: #050F17; }
.on-dark .card-feature .list-unstyled > li { color: #071A24; }
.on-dark .card-feature .section-title { color: #05121B !important; }
/* Amenity cards: bump body text + icons a touch */
#amenities .card-feature .list-unstyled {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.25rem); /* ~8–15% larger */
  line-height: 1.65;
}

/* Amenity cards: bigger + heavier text */
#amenities .card-feature .list-unstyled {
  font-size: clamp(3.05rem, 0.98rem + 0.45vw, 1.25rem);
  line-height: 1.65;
  font-weight: ; /* Medium for body items */
}

#amenities .card-feature .list-unstyled > li {
  padding: 0px 0;
}

/* Make emphasized bits stand out more */
#amenities .card-feature .list-unstyled strong {
  font-weight: 700; /* Bold for feature names */
}

/* If using Phosphor icons, scale to match the heavier text */
#amenities .ph-duotone {
  font-size: 2.2rem;
  margin-right: .6rem;
}
/* Amenities cards — darker in-card text only */
#amenities .card-feature,
#amenities .card-feature .list-unstyled > li,
#amenities .card-feature p,
#amenities .card-feature .text-muted,
#amenities .card-feature small,
#amenities .card-feature strong {
  color: color-mix(in oklab, var(--ink) 95%, white) !important;  /* bump to 95–96% if you want max */
}

/* If you're using Phosphor icons inside the list, keep them in sync */
#amenities .card-feature .ph-duotone {
  --ph-color: color-mix(in oklab, var(--ink) 95%, white);
  --ph-secondary-color: var(--sunrise);
}
/* Calendar card: base text in the card */
#events .card-feature {
  font-size: clamp(1.00rem, 0.95rem + 0.35vw, 1.18rem); /* body size */
  line-height: .5;
  font-weight: 500; /* body weight */
}

/* Title inside the calendar card (yours is <h5 class="mb-2">Upcoming</h5>) */
#events .card-feature h5 {
  font-size: clamp(1rem, 1rem + 0.50vw, 1.6rem); /* title size */
  font-weight: 500;  /* title weight */
  letter-spacing: -0.01em;
}

/* List styling inside the card */
#events .card-feature .list-unstyled {
  font-size: clamp(1rem, 0.98rem + 0.4vw, 1rem); /* list size */
  line-height: 1.65;
}

#events .card-feature .list-unstyled > li {
  font-weight: 600; /* list weight */
}

/* Optional: bump the Bootstrap icon size to match text scale */
#events .card-feature .bi {
  font-size: 1.5em;
}

/* Per-icon overrides with higher specificity 
.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-swimming-pool { 
  color: var(--sageMuted) !important; 
}*/

.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-person-simple-swim { 
  color: var(--sageMuted) !important; 
}
.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-waves { 
  color: #1E6A86 !important; 
}
.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-house { 
  color: var(--pineBlue) !important; 
}
.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-game-controller { 
  color: var(--sunriseMuted) !important; 
}
.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-waves:hover {
  filter: brightness(1.5);
}
.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-game-controller:hover {
  filter: brightness(1.5);
}
.card-feature.bringback .list-unstyled > li i.ph-duotone.ph-house:hover {
  filter: brightness(1.8);
}

/* B) Your SEND button icon (paper plane) — in sunriseMuted */
#contact .btn-dues i.ph.ph-paper-plane-tilt,
#contact .btn-dues i.ph-duotone.ph-paper-plane-tilt {
  color: var(--sunrise) !important;
  --ph-duotone-secondary-color: color-mix(in oklab, var(--sunriseMuted) 65%, black);
}

/* C) The icons in your contact info list on the left */
/* Envelope = river */
#contact .card-feature i.ph-duotone.ph-envelope-simple{
  color: var(--river) !important;
  --ph-duotone-secondary-color: color-mix(in oklab, var(--river) 60%, black);
}

/* Phone = SageMuted */
#contact .card-feature i.ph-duotone.ph-phone{
  color: var(--sageMuted) !important;
  --ph-duotone-secondary-color: color-mix(in oklab, var(--forestGreen) 60%, black);
}

/* Map pin = clay */
#contact .card-feature i.ph-duotone.ph-map-pin{
  color: var(--clay) !important;
  --ph-duotone-secondary-color: color-mix(in oklab, var(--sunriseMuted) 60%, black);
}

/* =========================
   Premium Buttons — compact
   ========================= */

/* DONATE (warm, pill) */
.btn-donate{
  /* compact sizing + perfect centering */
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-size:.95rem; line-height:1.1; padding:.55rem .9rem; border-radius:999px;

  /* look */
  color:#0B2030;
  border:1px solid color-mix(in oklab, var(--sunrise) 55%, white);
  background-image:linear-gradient(135deg,
    color-mix(in oklab, var(--sunrise) 92%, white),
    color-mix(in oklab, var(--sunrise) 64%, var(--pineBlue))
  );
  box-shadow:0 10px 24px rgba(247,162,27,.24);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  position:relative; overflow:hidden;
}
.btn-donate::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,.25), rgba(255,255,255,0) 35%);
  mix-blend-mode:soft-light; opacity:0; transition:opacity .25s ease;
}
.btn-donate:hover{ transform:translateY(-3px); filter:saturate(108%); }
.btn-donate:hover::after{ opacity:.9; }
.btn-donate:active{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(247,162,27,.2); }
.btn-donate:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--sunrise) 55%, white); }

/* PAY DUES (deep, rounded) */
.btn-dues{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-size:.95rem; line-height:1.1; padding:.55rem .9rem; border-radius:12px;

  color:#EAF6FF;
  border:1px solid color-mix(in oklab, var(--river) 40%, white);
  background-image:linear-gradient(135deg,
    color-mix(in oklab, var(--pineBlue) 75%, black),
    color-mix(in oklab, var(--tealGlow) 70%, var(--pineBlue))
  );
  box-shadow:0 10px 24px rgba(14,47,69,.32);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.btn-dues:hover{ transform:translateY(-3px); filter:brightness(1.07) saturate(105%); }
.btn-dues:active{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(14,47,69,.26); }
.btn-dues:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--river) 55%, white); }

/* icons inside buttons */
.btn .bi, .btn .ph, .btn .ph-duotone{ font-size:1.05em; line-height:1; margin:0; }


/* Contact form — glassy inputs that match your cards */
.contact-card { padding: clamp(18px, 2.2vw, 28px); }

.contact-input.form-control{
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.9));
  border: 1px solid color-mix(in oklab, var(--river) 22%, white);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(11,32,48,.04) inset;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.contact-input.form-control:focus{
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.98));
  border-color: color-mix(in oklab, var(--river) 40%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--river) 45%, white);
  outline: 0;
}

.contact-input::placeholder{ color: color-mix(in oklab, var(--ink) 55%, white); }
.form-label{ font-weight: 600; color: color-mix(in oklab, var(--ink) 90%, white); }

#contact .section-title{ font-family: 'DM Serif Display', serif; font-weight: 400; letter-spacing: .2px; }

/* Small fix so the paper-plane icon sits perfectly centered in the button */
.btn-dues .ph, .btn-dues .ph-duotone { line-height:1; vertical-align:middle; font-size:1.05em; }

/* =========================
   CONTACT — quick overrides
   ========================= */

/* 1) Softer field fill (subtle river tint, still high contrast) */
#contact .contact-input.form-control{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, #ffffff 92%, var(--river) 8%),
    color-mix(in oklab, #ffffff 98%, var(--river) 2%)
  );
  border: 1px solid color-mix(in oklab, var(--river) 28%, #e8edf0);
  color: var(--ink);
}

#contact .contact-input.form-control:focus{
  background: linear-gradient(
    135deg,
    color-mix(in oklab, #ffffff 90%, var(--river) 10%),
    color-mix(in oklab, #ffffff 96%, var(--river) 4%)
  );
  border-color: color-mix(in oklab, var(--river) 55%, white);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--river) 30%, transparent);
}

#contact .contact-input::placeholder{
  color: color-mix(in oklab, var(--ink) 65%, white);
}

/* 2) Stronger, darker type across both cards */
#contact .card-feature h3,
#contact .card-feature h5{
  font-weight: 700;
  color: color-mix(in oklab, var(--ink) 96%, white);
}

#contact .card-feature p,
#contact .card-feature li,
#contact .card-feature small{
  font-weight: 500; /* 400->500 = “darker” feel without overdoing it */
  color: color-mix(in oklab, var(--ink) 92%, white);
}

#contact .form-label{
  font-weight: 700; /* bolder labels */
  color: color-mix(in oklab, var(--ink) 95%, white);
}

/* 3) Send button icon in sunriseMuted */
#contact .btn-dues{
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: .6rem;
}

#contact .btn-dues i{
  color: var(--sunriseMuted);     /* <- your request */
  font-size: 1.05rem;
  vertical-align: -1px;
  margin-right: .5rem;
}

#contact .btn-dues:hover i{
  color: color-mix(in oklab, var(--sunriseMuted) 85%, black);
}


/*Removes pop up for cards
.card-feature:hover { transform: none !important; }*/


/* Amenity photo badge — circular */
.amenity-badge{
  --size: 64px;              /* default; overridden by badge-* classes */
  width: var(--size);
  height: var(--size);
  margin: 0 auto .75rem;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--river) 10%, white);
  border: 2px solid color-mix(in oklab, var(--river) 40%, white);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  isolation: isolate;        /* keeps any inner effects contained */
}

.amenity-badge img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transform: translateZ(0);
  transition: transform 1.4s ease;
}

/* Gentle zoom on card hover (keeps your other hover effects intact) */
.card-feature:hover .amenity-badge img{
  transform: scale(1.2);
}

/* Sizes */
.badge-sm { --size: 52px; }
.badge-md { --size: 64px; }
.badge-lg { --size: 80px; }
.badge-xl { --size: 96px; }
.badge-xxl { --size: 120px; }


/* Optional: match centered titles in Amenities section */
#amenities .card-feature .card-title{
  text-align: center;
  width: 100%;
}

/* --- QUICK LINKS CLICKABILITY FIX (anchors only, not whole card) --- */

/* A) Decorative layers: pretty but non-interactive, always below content */
.card-feature,
.rim-glow,
.section-grain { position: relative; }

.card-feature::before,
.card-feature::after,
.rim-glow::before,
.rim-glow::after,
.section-grain::before,
.section-grain::after {
  pointer-events: none;
  z-index: 0;
}

/* B) Make sure content sits above those layers */
.card-feature > * { position: relative; z-index: 1; }

/* C) Inside feature cards, anchors show a hand cursor */
.card-feature a,
.card-feature a * {
  cursor: pointer !important;
  pointer-events: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}

/* D) Inputs still get the I-beam caret */
.card-feature input,
.card-feature textarea,
.card-feature select { cursor: text; }

/* E) Quick Links: anchor is the only hit area; give it a comfy but LOCAL padding */
#events .link-item { cursor: default; }
#events .link-item > a {
  position: relative; z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border-radius: .375rem;
  text-decoration: none;
}
#events .link-item > a:hover { text-decoration: underline; }

/* If JS flags bad perf, drop to fast theme */
.no-frost .navbar.scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15,63,94,.65) !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Special Meeting Hero Button ===== */
.btn-hero-special {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--sunrise) 80%, var(--river) 20%),
    color-mix(in oklab, var(--pineBlue) 65%, var(--sunrise) 35%)
  );
  color: var(--pineBlueDeep);
  border: 1px solid color-mix(in oklab, var(--sunrise) 60%, white 30%);
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 0 12px rgba(247,162,27,0.35);
  transition: all 1s ease;
  backdrop-filter: blur(4px);
}

.btn-hero-special:hover {
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--river) 60%, var(--sunrise) 40%),
    color-mix(in oklab, var(--forestGreen) 60%, var(--sunrise) 40%)
  );
  box-shadow: 0 0 18px rgba(247,162,27,0.55);
  transform: scale(1.1);
transition: all 1s ease;
  color: var(--pineBlueDeep);
  border-color: color-mix(in oklab, var(--sunrise), white 25%);
}


@keyframes heroPulse {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(247,162,27,0.6),
      0 0 28px rgba(247,162,27,0.35);
  }
  50% {
    box-shadow:
      0 0 26px rgba(247,162,27,0.9),
      0 0 42px rgba(247,162,27,0.65);
  }
}

.glow-pulse {
  animation: heroPulse 1.5s ease-in-out infinite !important;
}

/* ========================== 

   Everything from here down 
   relates to the video in the 
   HERO card 

   ========================== */


.feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: none;       /* kill that white card background */
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  max-width: 320px;
  margin: 0 auto;
margin-top: 1rem;
  padding: 0;             /* remove inner space that caused white edges */
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}

/* video now *is* the card */
.feature-card video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}

/* optional subtle hover zoom */
.feature-card:hover video {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* optional controls cleanup */
.feature-card video::-webkit-media-controls-panel {
  background: rgba(0,0,0,0.3);
  border-radius: 0 0 1rem 1rem;
}
/* Make the video look like one of your cards */
.video-wrapper {
  /* size/shape */
  width: 72%;            /* smaller overall */
  max-width: 240px;      /* hard cap so it doesn't dominate */
  aspect-ratio: 5 / 4;   /* wider than tall (try 4/3 if you want wider) */

  /* existing stuff you already had */
  position: relative;
  margin: 1rem auto;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);


/* smooth expansion */
  transition: width 1.7s ease, 
              max-width 1.7s ease, 
              aspect-ratio 1.7s ease, 
              transform 1.7s ease;
}

.video-wrapper.active {
  width: 100%;
  max-width: 285px;        /* bigger player size */
  aspect-ratio: 4 / 5;    /* roomier view; use 4/5 if you prefer portrait */
}


/* Poster overlay = the clickable play surface */
.video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Big play glyph */
.play-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.25rem;        /* smaller and proportional */
  line-height: 1;            /* prevents vertical distortion */
  color: rgba(255,255,255,0.9);
  text-shadow: 0 3px 8px rgba(0,0,0,0.6);
  pointer-events: none;
}
.play-glyph svg { pointer-events: none; }

/* Video layer (hidden until playing) */
.video-container {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1;
}

.video-container video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Close button */
.close-btn {

  position: absolute;
  top: .5rem; right: .5rem;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer !important;
pointer-events: auto !important;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
  z-index: 5;

  /* tiny optical correction so the glyph looks perfect */
  transform: translateY(-0.5px);
}
.close-btn:hover { background: rgba(0,0,0,0.8); }


/* Active state toggled by JS */
.video-wrapper.active .video-overlay { opacity: 0; pointer-events: none !important; }
.video-wrapper.active .video-container { opacity: 1; pointer-events: auto; }
.video-wrapper.active .close-btn { opacity: 1; }

/* Optional: make it match your existing glow class */
.rim-glow .video-wrapper { box-shadow: 0 0 0 0px rgba(255,255,255,1), 0 10px 30px rgba(10,1,1,1); }

.feature-card.rim-g::after{
  content:""; position:absolute; inset:-2.5px; border-radius: calc(18px + 2px);
  padding:3.1px;
  background: conic-gradient(from 0deg, rgba(247,162,27,.95), rgba(46,153,73,.90), rgba(30,106,134,.90), rgba(247,162,27,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; filter: blur(3px); transition: opacity 1s ease, filter .25s ease;
  pointer-events:none; z-index:2;
}
.feature-card.rim-g:hover::after{ opacity:1; filter: blur(1.5px); }


/* 1) Make the entire preview surface obviously clickable */
#wwbbPlay,
#wwbbPlay *,
.video-overlay,
.video-overlay * {
  cursor: pointer !important;
}

/* 2) Guarantee the overlay is the top click target pre-play */
.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 999;              /* higher than poster/video/anything */
  pointer-events: auto !important;
}

/* 3) When active, the overlay shouldn’t eat clicks */
.video-wrapper.active .video-overlay {
  pointer-events: none !important;
}

/* 4) Close button always shows pointer */
#wwbbClose,
#wwbbClose * {
  cursor: pointer !important;
  pointer-events: auto !important;
}