/* ===== The Awakening Summit — v2 hero / nav dropdown / countdown =====
   Uses the existing brand tokens (green #7cb342, blues, teal) + Inter. */

/* ---------- Nav: Events dropdown ---------- */
.v2-dd { position: relative; display: inline-block; }
.v2-dd-btn {
  background: none; border: none; cursor: pointer;
  font: 600 0.875rem 'Inter', sans-serif; color: var(--text-white);
  display: inline-flex; align-items: center; gap: 5px; padding: 0;
  transition: color 0.2s;
}
.v2-dd-btn svg { transition: transform 0.2s; }
.v2-dd:hover .v2-dd-btn, .v2-dd:focus-within .v2-dd-btn { color: var(--primary-green); }
.v2-dd:hover .v2-dd-btn svg, .v2-dd:focus-within .v2-dd-btn svg { transform: rotate(180deg); }
.v2-dd::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 12px; }
.v2-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px);
  min-width: 230px; background: var(--footer-bg); border: 1px solid var(--primary-blue-light);
  border-radius: 12px; padding: 8px; z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity 0.18s, transform 0.18s;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.v2-dd:hover .v2-dd-menu, .v2-dd:focus-within .v2-dd-menu, .v2-dd.open .v2-dd-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.v2-dd.open .v2-dd-btn { color: var(--primary-green); }
.v2-dd-menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--text-white); text-decoration: none; font-size: 0.875rem; font-weight: 600;
  white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.v2-dd-menu a:hover { background: var(--primary-blue); color: #fff; }
.v2-dd-menu a small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--text-gray); margin-top: 2px; }

/* group headings so Upcoming and Past read as two separate lists */
.v2-dd-label {
  display: block; padding: 8px 14px 5px; font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em; color: var(--primary-green);
}
.v2-dd-label + * { margin-top: 0; }
.v2-dd-label.is-later { margin-top: 6px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Nav: second level (Events > Clearwater 2026 > …) ---------- */
.v2-sub { position: relative; }
.v2-sub-parent { position: relative; padding-right: 30px !important; }
.v2-sub-arrow { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); opacity: .6; transition: opacity .15s, transform .15s; }
.v2-sub:hover .v2-sub-arrow, .v2-sub:focus-within .v2-sub-arrow { opacity: 1; transform: translateY(-50%) translateX(2px); }
.v2-sub-menu {
  /* +14px clears the parent panel's 8px padding and 1px border, so the two
     cards sit side by side instead of overlapping at the rounded corner */
  position: absolute; left: calc(100% + 14px); top: -9px;
  min-width: 210px; background: var(--footer-bg); border: 1px solid var(--primary-blue-light);
  border-radius: 12px; padding: 8px; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity .16s, transform .16s;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
/* the gap between the row and the flyout would drop the hover — bridge it */
.v2-sub::before { content: ""; position: absolute; left: 100%; top: 0; width: 22px; height: 100%; }
.v2-sub:hover .v2-sub-menu, .v2-sub:focus-within .v2-sub-menu { opacity: 1; visibility: visible; transform: translateX(0); }
.v2-sub:hover > .v2-sub-parent { background: var(--primary-blue); color: #fff; }

/* ---------- Nav: which page am I on ----------
   Green text, nothing else — the same cue style.css already used for plain
   links, now applied consistently to the dropdowns and CTAs too. The two CTA
   buttons are handled separately: they are already solid shapes, and turning
   their text green makes them unreadable. */
.nav-links > a.active:not(.nav-cta), .v2-dd.active > .v2-dd-btn { color: var(--primary-green); }
.v2-dd-menu a.active { color: var(--primary-green); background: rgba(124,179,66,.1); }
.v2-dd-menu a.active small { color: rgba(124,179,66,.75); }
.nav-links a.nav-cta-donate.active { color: var(--primary-green); border-color: var(--primary-green); }
.nav-links a.nav-cta-tickets.active { color: #06305e; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 6px 18px rgba(124,179,66,.4); }

/* ---------- HERO ---------- */
.v2hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 84px 5% 52px;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(124,179,66,0.10), transparent 60%),
    radial-gradient(900px 520px at 12% 18%, rgba(42,183,202,0.16), transparent 55%),
    radial-gradient(1000px 620px at 88% 26%, rgba(25,118,210,0.24), transparent 55%),
    linear-gradient(180deg, #041a33 0%, #0a3a6b 62%, var(--primary-blue) 100%);
}

/* starfield */
.v2-stars { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; z-index: 0; }
.v2-stars span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  opacity: 0; animation: v2twinkle var(--d,5s) ease-in-out var(--dl,0s) infinite;
}
@keyframes v2twinkle { 0%,100%{opacity:0;transform:scale(.6)} 50%{opacity:var(--pk,.8);transform:scale(1)} }

/* drifting colour glow */
.v2-glow {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(64,156,255,0.20), transparent 70%);
  filter: blur(20px);
}

.v2hero-inner { position: relative; z-index: 2; width: 100%; max-width: 900px; }

/* the eye — flyer-matched fade (owner loved the A5 flyer treatment).
   Tighter ellipse, EASED multi-stop falloff (approximates the flyer's
   per-pixel (1-t)^1.6 curve), so the photo's rectangular edges vanish into
   the starfield instead of faintly reading as a rectangle. The blink/open
   animation lives inside the SVG and is untouched — the mask is static and
   sits identically over every frame. Eye enlarged to suit the softer edge. */
.v2-eye {
  position: relative; z-index: 0; width: min(80vw, 340px); margin: 0 auto 0;
}
.v2-eye::before {
  content: ""; position: absolute; inset: -14% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(64,156,255,0.4), transparent 74%);
}
.v2-eye img {
  width: 100%; display: block;
  /* own compositor layer: the mask + the SVG's lid animation otherwise re-rasterise
     on the main thread each frame, which is the open/blink jitter */
  transform: translateZ(0); backface-visibility: hidden;
  -webkit-mask-image: radial-gradient(ellipse 49% 51% at 50% 50%,
    #000 52%, rgba(0,0,0,.75) 66%, rgba(0,0,0,.45) 78%, rgba(0,0,0,.18) 88%, transparent 97%);
  mask-image: radial-gradient(ellipse 49% 51% at 50% 50%,
    #000 52%, rgba(0,0,0,.75) 66%, rgba(0,0,0,.45) 78%, rgba(0,0,0,.18) 88%, transparent 97%);
}

/* kinetic title */
.v2-title {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1.04; margin: 2px 0 10px; color: #fff;
}
.v2-title span {
  display: inline-block; opacity: 0; transform: translateY(22px);
  animation: v2rise 0.85s cubic-bezier(.2,.7,.2,1) forwards;
}
.v2-title span:nth-child(1){ animation-delay: 0.15s; }
.v2-title span:nth-child(2){ animation-delay: 0.33s; }
.v2-title span:nth-child(3){ animation-delay: 0.51s; }
.v2-title .green { color: var(--primary-green); text-shadow: 0 0 30px rgba(124,179,66,0.55); }
@keyframes v2rise { to { opacity: 1; transform: none; } }

.v2-sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--text-gray);
  max-width: 620px; margin: 0 auto 16px; line-height: 1.5;
  opacity: 0; animation: v2fade 1s ease 0.7s forwards;
}
@keyframes v2fade { to { opacity: 1; } }

.v2-eventmeta {
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center;
  margin-bottom: 18px; opacity: 0; animation: v2fade 1s ease 0.9s forwards;
}
.v2-eventmeta span { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.06em; font-size: 0.95rem; }
.v2-eventmeta svg { color: var(--primary-green); flex-shrink: 0; }

/* countdown */
.v2-cd { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 24px; opacity: 0; animation: v2fade 1s ease 1.05s forwards; }
.v2-cd .u {
  min-width: 74px; padding: 12px 9px 9px; border-radius: 13px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(6px);
}
.v2-cd .n { display: block; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 900; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.v2-cd .l { display: block; margin-top: 7px; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-gray); }

/* CTAs */
.v2-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: v2fade 1s ease 1.2s forwards; }
.v2-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 34px; border-radius: 5px; font-weight: 900; text-transform: uppercase;
  color: #fff; text-decoration: none; background: transparent; border: 2px solid rgba(255,255,255,0.5);
  transition: border-color 0.2s, background 0.2s;
}
.v2-ghost:hover { border-color: var(--primary-green); background: rgba(124,179,66,0.12); }

/* scroll cue */
.v2-scroll { display: none; }
@keyframes v2bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

@media (prefers-reduced-motion: reduce) {
  .v2-title span, .v2-sub, .v2-eventmeta, .v2-cd, .v2-cta { animation: none; opacity: 1; transform: none; }
  .v2-stars span, .v2-glow, .v2-scroll { animation: none; }
}

/* ============================================================
   v2 FULL HOMEPAGE DESIGN PASS — brand palette kept, depth + motion added
   ============================================================ */
.section-padding { padding: 84px 6%; position: relative; }

/* section headings: consistent + accent underline */
.section-title, .green-section h2, .teal-section h2 { position: relative; padding-bottom: 20px; }
.section-title::after, .green-section h2::after, .teal-section h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 66px; height: 3px; border-radius: 2px; background: var(--primary-green);
  box-shadow: 0 0 16px rgba(124,179,66,0.7);
}
.green-section h2::after { background: #fff; box-shadow: 0 0 16px rgba(255,255,255,0.6); }

/* GREEN sections: rich gradient + sheen (keeps the brand green) */
.green-section {
  background:
    radial-gradient(760px 420px at 82% -5%, rgba(255,255,255,0.16), transparent 60%),
    linear-gradient(158deg, #86c049 0%, #5f8f34 100%);
  position: relative; overflow: hidden;
}
.green-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 70px 90px -60px rgba(255,255,255,0.22), inset 0 -80px 90px -60px rgba(0,0,0,0.28);
}

/* BLUE section (speakers): deep cosmic stage */
.blue-section {
  background:
    radial-gradient(900px 460px at 50% -12%, rgba(64,156,255,0.20), transparent 62%),
    linear-gradient(180deg, #0a3a6b 0%, #041a33 100%);
  position: relative; overflow: hidden;
}

/* TEAL section (closing CTA): luminous */
.teal-section {
  background:
    radial-gradient(760px 420px at 18% 108%, rgba(42,183,202,0.40), transparent 60%),
    linear-gradient(158deg, #1f86d6 0%, #0c4a86 100%);
  position: relative; overflow: hidden;
}

/* featured speakers: unified duotone portraits, colourise + lift on hover */
.featured-speaker-img {
  width: 150px; height: 150px; border: 3px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  filter: grayscale(1) contrast(1.05) brightness(1.03);
  transition: filter .45s ease, transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
@media (min-width: 768px) { .featured-speaker-img { width: 170px; height: 170px; } }
.featured-speaker:hover .featured-speaker-img {
  filter: none; transform: scale(1.06);
  border-color: var(--primary-green); box-shadow: 0 16px 42px rgba(124,179,66,0.4);
}
.featured-speaker h3 { margin-top: 6px; }

/* tier cards: dark glass, elevation, tier-coloured accent */
.tier-card {
  background: rgba(6,28,54,0.55); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px; backdrop-filter: blur(8px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.32);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
}
.tier-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #e5e4e2, #b9b9c9);
}
.tier-card:nth-child(2)::before { background: linear-gradient(90deg, #ffd700, #d9a400); }
.tier-card:nth-child(3)::before { background: linear-gradient(90deg, #d8d8d8, #9a9a9a); }
.tier-card:hover { transform: translateY(-7px); box-shadow: 0 24px 54px rgba(0,0,0,0.42); border-color: rgba(124,179,66,0.5); }

/* sponsor boxes: dark glass */
.platinum-box, .silver-box {
  background: rgba(6,28,54,0.6); backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}

/* buttons */
.cta-button { box-shadow: 0 8px 26px rgba(124,179,66,0.4); }
.cta-button-blue {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px); color: #fff;
}
.cta-button-blue:hover { background: rgba(255,255,255,0.2); }

/* footer */
.footer {
  background: linear-gradient(180deg, #0a3d6e 0%, #041a33 100%);
  border-top: 1px solid rgba(124,179,66,0.4);
}

/* scroll reveal (JS toggles .v2-vis; no-JS falls back to visible) */
.v2-anim { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.v2-anim.v2-vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v2-anim { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   v2 SITE STRUCTURE — nav CTAs, interior heros, home sections, shop, donate
   ============================================================ */
.nav-links { align-items: center; }
.nav-cta { padding: 8px 17px; border-radius: 5px; font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .02em; text-decoration: none; transition: transform .2s, background .2s, border-color .2s, color .2s; }
.nav-cta-donate { color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.nav-cta-donate:hover { border-color: var(--primary-green); color: var(--primary-green); }
.nav-cta-tickets { color: #fff; background: var(--primary-green); box-shadow: 0 6px 18px rgba(124,179,66,.4); }
.nav-cta-tickets:hover { transform: translateY(-2px); }
/* style.css has a generic `.nav-links a:hover { color: green }` which out-ranks the button's own
   colour — turning this green-on-green and unreadable. Force the brand deep blue on hover
   (higher specificity than the generic rule) so it stays legible and reads as a deliberate change. */
.nav-links a.nav-cta-tickets:hover { color: #06305e; }

/* interior page hero (shop / donate / about / event / past) */
.v2-pagehero { position: relative; overflow: hidden; text-align: center; padding: 132px 5% 66px;
  background: radial-gradient(900px 420px at 50% -20%, rgba(64,156,255,.22), transparent 60%), linear-gradient(180deg, #041a33 0%, #0a3a6b 100%); }
.v2-pagehero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; color: #fff; }
.v2-pagehero h1 .green { color: var(--primary-green); }
.v2-pagehero p { color: var(--text-gray); max-width: 620px; margin: 14px auto 0; font-size: 1.05rem; line-height: 1.6; }

/* home: next-event teaser */
.next-event { max-width: 960px; margin: 0 auto; border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35); display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .next-event { grid-template-columns: 1.05fr .95fr; } }
.next-event .ne-body { padding: 40px; }
.next-event .ne-tag { color: var(--primary-green); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; }
.next-event h3 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 900; text-transform: uppercase; margin: 8px 0 14px; color: #fff; }
.next-event .ne-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 20px; color: var(--text-gray); font-weight: 700; }
.next-event .ne-meta span { display: inline-flex; align-items: center; gap: 7px; }
.next-event .ne-meta svg { color: var(--primary-green); }
.next-event .ne-media { min-height: 240px; background: radial-gradient(circle at 50% 42%, rgba(64,156,255,.4), #06305e 70%); display: flex; align-items: center; justify-content: center; padding: 24px; }
.next-event .ne-media img { width: 70%; filter: drop-shadow(0 0 30px rgba(64,156,255,.5));
  -webkit-mask-image: radial-gradient(ellipse 82% 86% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 86% at 50% 50%, #000 55%, transparent 100%); }

/* centred band (donate / newsletter) */
.v2-band { text-align: center; }
.v2-band .lead { font-size: 1.14rem; color: #fff; max-width: 640px; margin: 0 auto 24px; line-height: 1.6; }

/* home: past summits strip */
.past-strip { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 780px; margin: 0 auto; }
@media (min-width: 640px) { .past-strip { grid-template-columns: repeat(2, 1fr); } }
.past-tile { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 30px; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff;
  background: radial-gradient(620px 320px at 85% -25%, rgba(124,179,66,.20), transparent 60%), linear-gradient(158deg, #0e4a86 0%, #041a33 100%);
  border: 1px solid rgba(255,255,255,.15); box-shadow: 0 16px 40px rgba(0,0,0,.35);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.past-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary-green); }
.past-tile:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(0,0,0,.45); border-color: rgba(124,179,66,.55); }
.past-tile .pt-eyebrow { margin-bottom: auto; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-gray); font-weight: 800; }
.past-tile .pt-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 900; text-transform: uppercase; line-height: 1.05; margin: 22px 0 6px; }
.past-tile .pt-loc { color: #dfeaf6; font-weight: 600; }
.past-tile .pt-link { margin-top: 18px; color: var(--primary-green); font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.past-tile:hover .pt-link { text-decoration: underline; }

/* ---------- footer credit: Designed by ArloWebStudio ---------- */
.site-credit {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  color: rgba(255,255,255,.42); text-decoration: none;
  transition: color .2s ease;
}
.site-credit img { width: 15px; height: 15px; display: block; opacity: .85; transition: opacity .2s ease; }
.site-credit strong { font-weight: 800; color: rgba(255,255,255,.58); transition: color .2s ease; }
.site-credit:hover { color: rgba(255,255,255,.75); }
.site-credit:hover strong { color: #fff; }
.site-credit:hover img { opacity: 1; }

/* ---------- Speaker cards: modern v2 (name over photo, bio + Read bio) ----------
   Used on upcoming.html + both past-summit pages. */
/* flex (not grid) so an incomplete last row of 1–3 cards CENTRES instead of left-aligning */
.spk-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1120px; margin: 0 auto; }
.spk-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left;
  flex: 0 0 calc(50% - 10px);                     /* 2 per row; widened at breakpoints below */
  border-radius: 18px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
@media (min-width: 700px) { .spk-card { flex-basis: calc(33.333% - 13.34px); } }   /* 3 per row */
@media (min-width: 1000px) { .spk-card { flex-basis: calc(25% - 15px); } }         /* 4 per row */
.spk-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--primary-green), var(--primary-blue-light)); opacity: 0; transition: opacity .3s ease; }
.spk-card:hover { transform: translateY(-6px); border-color: rgba(124,179,66,.5);
  box-shadow: 0 28px 62px rgba(0,0,0,.45), 0 0 44px rgba(124,179,66,.14); }
.spk-card:hover::before { opacity: 1; }
/* photo: line-height 0 + a baseline scale slightly over 1 so the image always overflows its
   box — prevents the sub-pixel hairline/flicker at the bottom edge when it zooms on hover. */
/* margin-bottom:-1px — aspect-ratio can compute a fractional height, leaving a 1px hairline of
   card background under the photo that shimmers as the card lifts. Overlapping the body kills it. */
.spk-photo { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #06203c; line-height: 0; margin-bottom: -1px; }
/* NO transform/zoom on the image. Scaling it inside the rounded, overflow-clipped card (which is
   itself transformed on hover) makes the browser composite them on separate layers and paint a
   flickering 1px light seam under the photo. A filter changes no geometry, so there's no seam. */
.spk-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  transition: filter .35s ease;
}
.spk-card:hover .spk-photo img { filter: brightness(1.08) saturate(1.04); }
.spk-photo::after { content: ""; position: absolute; inset: -1px 0 -1px 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(4,14,28,.55) 72%, rgba(4,14,28,.95) 100%); }
.spk-name { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 12px; margin: 0;
  font-size: 1rem; font-weight: 900; text-transform: uppercase; line-height: 1.2; color: #fff; letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.spk-body { position: relative; z-index: 1; padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; line-height: normal; }
.spk-bio { font-size: .85rem; line-height: 1.55; color: var(--text-gray); margin: 0 0 14px; }
.spk-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--primary-green); font-weight: 800; text-transform: uppercase; font-size: .73rem; letter-spacing: .08em; }
.spk-more svg { transition: transform .2s ease; }
.spk-more:hover { text-decoration: underline; }
.spk-more:hover svg { transform: translateX(3px); }
/* to-be-announced state */
.spk-card.tba .spk-photo { display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), rgba(255,255,255,.03)); }
.spk-card.tba .spk-photo svg { width: 34%; height: 34%; color: rgba(255,255,255,.26); }
.spk-card.tba .spk-photo::after { display: none; }
.spk-card.tba .spk-name { position: static; left: auto; right: auto; bottom: auto; padding: 0; margin: 0 0 6px;
  color: rgba(255,255,255,.85); text-shadow: none; }

/* home: summits — featured next + past list */
.summits { max-width: 900px; margin: 0 auto; }
.summit-next {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
  padding: 36px; border-radius: 20px; overflow: hidden; margin-bottom: 34px;
  background: radial-gradient(700px 360px at 88% -30%, rgba(124,179,66,.30), transparent 60%), linear-gradient(155deg, #12599f 0%, #06213e 100%);
  border: 1px solid rgba(124,179,66,.5); box-shadow: 0 26px 62px rgba(0,0,0,.45), 0 0 70px rgba(124,179,66,.16);
}
@media (min-width: 720px) { .summit-next { grid-template-columns: auto 1fr; gap: 36px; } }
.summit-next::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary-green); }
.sn-badge { display: inline-block; margin-bottom: 10px; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #06305e; background: var(--primary-green); padding: 5px 12px; border-radius: 20px; }
.sn-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 156px; padding: 24px 26px; border-radius: 16px; background: rgba(4,16,31,.5); border: 1px solid rgba(255,255,255,.16); }
.sn-date .sn-month { font-size: .9rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--primary-green); }
.sn-date .sn-day { font-size: 2.5rem; font-weight: 900; line-height: 1; color: #fff; margin: 5px 0; }
.sn-date .sn-year { font-size: .9rem; font-weight: 700; color: #dfeaf6; letter-spacing: .12em; }
.sn-info { text-align: left; }
.sn-info h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 900; text-transform: uppercase; color: #fff; margin: 0 0 8px; line-height: 1.05; }
.sn-info p { color: rgba(255,255,255,.85); margin: 0 0 20px; line-height: 1.6; }
.sn-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.summits-past { max-width: 760px; margin: 0 auto; }
.summits-past .sp-head { text-align: center; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.65); margin: 0 0 16px; }
.sp-row { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 17px 22px; border-radius: 14px; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.14); background: rgba(4,16,31,.32); transition: background .2s, border-color .2s, transform .2s; }
.sp-row + .sp-row { margin-top: 12px; }
.sp-row:hover { background: rgba(4,16,31,.62); border-color: rgba(124,179,66,.75); transform: translateX(4px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.sp-row .sp-when { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; min-width: 118px; }
.sp-row .sp-where { color: #dfeaf6; font-weight: 600; flex: 1; min-width: 180px; }
.sp-row .sp-go { color: var(--primary-green); font-weight: 800; text-transform: uppercase; font-size: .76rem; letter-spacing: .06em; margin-left: auto; }

/* shop / merch grid */
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 768px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 46px rgba(0,0,0,.4); border-color: rgba(124,179,66,.5); }
.product-img { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: linear-gradient(150deg, #0a3a6b, #06305e); color: rgba(255,255,255,.5); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.product-info { padding: 18px 18px 22px; text-align: center; }
.product-info h3 { font-size: 1.05rem; font-weight: 800; }
.product-price { color: var(--primary-green); font-weight: 900; font-size: 1.3rem; margin: 6px 0 14px; }

/* donate page */
.donate-card { max-width: 560px; margin: 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 34px; backdrop-filter: blur(8px); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.donate-toggle { display: flex; gap: 8px; background: rgba(0,0,0,.25); border-radius: 10px; padding: 5px; margin-bottom: 24px; }
.donate-toggle button { flex: 1; padding: 11px; border: none; border-radius: 7px; background: transparent; color: #fff; font-weight: 800; cursor: pointer; text-transform: uppercase; font-size: .8rem; transition: background .2s; }
.donate-toggle button.on { background: var(--primary-green); }
.donate-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.amount-btn { padding: 16px; border: 1.5px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; font-weight: 900; font-size: 1.2rem; cursor: pointer; transition: border-color .2s, background .2s; }
.amount-btn:hover, .amount-btn.on { border-color: var(--primary-green); background: rgba(124,179,66,.15); }
.donate-custom { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(0,0,0,.2); color: #fff; font-size: 1rem; margin-bottom: 20px; }

/* newsletter */
.newsletter-form { display: flex; gap: 10px; max-width: 480px; margin: 22px auto 0; flex-wrap: wrap; justify-content: center; }
.newsletter-form input { flex: 1; min-width: 220px; padding: 15px 18px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); color: #fff; font-size: 1rem; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.55); }

/* tickets */
.tier-card.featured { border-color: rgba(124,179,66,.6); box-shadow: 0 18px 44px rgba(124,179,66,.22); }
.tier-badge { display: inline-block; background: var(--primary-green); color: #06305e; font-weight: 900; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; margin-bottom: 14px; }
.tier-card .price small { display: block; font-size: .8rem; font-weight: 600; color: var(--text-gray); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.tier-card .cta-button { margin-top: 24px; width: 100%; justify-content: center; }

/* event page: fact cards + placeholder speaker boxes */
.event-facts { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 820px; margin: 0 auto; }
@media (min-width: 640px) { .event-facts { grid-template-columns: repeat(3, 1fr); } }
.fact { display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(6,28,54,0.45); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px;
  padding: 22px; text-align: center; backdrop-filter: blur(6px); }
.fact-label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.8); font-weight: 800; margin-bottom: 6px; }
.fact-value { display: block; font-size: 1.15rem; font-weight: 800; }
.speaker-ph {
  width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 14px;
  border: 3px solid rgba(255,255,255,0.18);
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) { .speaker-ph { width: 170px; height: 170px; } }
.speaker-ph svg { width: 44%; height: 44%; color: rgba(255,255,255,0.28); }
.featured-speaker.tba h3 { color: rgba(255,255,255,0.85); }
.featured-speaker.tba p { color: var(--text-gray); }

/* ---------- Modals: v2 restyle (site-wide) ----------
   Overrides the base modal styles in style.css so every pop-up — past-summit
   speaker bios, sponsor cards, the welcome pop-up, and future speaker modals —
   shares the cosmic v2 look with a soft glow, accent bar and scale-in entrance. */
.modal-overlay {
  background: radial-gradient(120% 120% at 50% 0%, rgba(10,26,50,0.72), rgba(3,7,16,0.86));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: opacity 0.3s ease;
}
.modal {
  position: relative;
  background:
    radial-gradient(130% 90% at 50% -12%, rgba(124,179,66,0.18), transparent 58%),
    linear-gradient(165deg, #103055 0%, #0b1c34 52%, #081221 100%);
  border: 1px solid rgba(124,179,66,0.32);
  border-radius: 20px;
  box-shadow: 0 34px 90px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.03), 0 0 70px rgba(21,101,192,0.28);
  transform: translateY(16px) scale(0.955);
  opacity: 0;
  transition: transform 0.36s cubic-bezier(.2,.85,.25,1), opacity 0.32s ease;
}
.modal-overlay.active .modal { transform: none; opacity: 1; }
.modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--primary-green), var(--primary-blue-light) 55%, var(--primary-green));
}
.modal-header {
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  padding: 18px 22px;
}
.modal-header h3 { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: .01em; }
.modal-close {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
  transition: background 0.2s, color 0.2s, transform 0.25s;
}
.modal-close:hover { background: rgba(124,179,66,0.22); color: #fff; transform: rotate(90deg); }
.modal-content { padding: 24px 24px 28px; }
.modal-image {
  border: 3px solid var(--primary-green);
  box-shadow: 0 0 0 6px rgba(124,179,66,0.12), 0 12px 34px rgba(0,0,0,0.5);
}
.modal-section-title { color: var(--primary-green); letter-spacing: .02em; }
.modal-link {
  padding: 10px 13px; border-radius: 10px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07); transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.modal-link:hover { background: rgba(21,101,192,0.3); border-color: rgba(124,179,66,0.4); color: #fff; }
.modal-description .highlight { color: var(--primary-green); font-weight: 800; font-size: 1.05rem; display: block; margin-bottom: 12px; }
.modal .video-container { border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.4); }

/* Welcome pop-up specifics */
.modal-welcome { max-width: 480px; text-align: center; }
.modal-welcome .lead { color: var(--text-gray); font-size: 1.02rem; line-height: 1.6; margin: 0 0 20px; }
.modal-welcome .newsletter-form { margin: 0 auto; }
.modal-welcome .newsletter-form .cta-button { flex: 0 0 auto; }

/* ---------- Home: "Join The Movement" video feature ---------- */
.join-section {
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
  background:
    radial-gradient(72% 62% at 50% 40%, rgba(124,179,66,0.20), transparent 72%),
    linear-gradient(180deg, #071b30 0%, #050f1e 100%);
}
.join-section::before {                  /* faint drifting star sparkle up top */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 82% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 65% 14%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 34% 12%, rgba(255,255,255,0.3), transparent);
  opacity: .7;
}
.join2 { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; text-align: center; }
.join-eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary-green);
}
/* ---- "The War For Reality" mission copy ---- */
.join2-eyebrow {
  font-size: clamp(.78rem, 1.5vw, .92rem); font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--primary-green); margin: 20px auto 12px;
}
.join2-kicker {
  font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.015em; line-height: 1.06; color: #fff; margin: 0 auto;
}
.join2-kicker .green { color: var(--primary-green); }
.join2-sub {
  font-size: clamp(1rem, 1.9vw, 1.2rem); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-gray); margin: 12px auto 0;
}
.join2-strap {
  position: relative; max-width: 700px; margin: 30px auto 30px; padding: 20px 22px;
  font-size: clamp(1.14rem, 2.3vw, 1.38rem); font-weight: 700; line-height: 1.5; color: #fff;
  border-top: 1px solid rgba(124,179,66,.35); border-bottom: 1px solid rgba(124,179,66,.35);
}
.join2-lead { font-size: clamp(1.06rem, 1.8vw, 1.2rem); line-height: 1.75; color: rgba(255,255,255,0.9); max-width: 700px; margin: 0 auto 20px; }
.join2-lead strong { color: var(--primary-green); font-weight: 800; }

/* action pills — solid, lifted and glowing so they read as the call to action */
.join2-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px;
  max-width: 760px; margin: 34px auto 30px; padding: 0;
}
.join2-actions span {
  padding: 14px 30px; border-radius: 999px;
  background: linear-gradient(150deg, var(--primary-green), #63992f);
  border: 1px solid rgba(160,220,110,.75);
  box-shadow: 0 12px 28px rgba(124,179,66,.38), inset 0 1px 0 rgba(255,255,255,.28);
  font-size: clamp(.9rem, 1.7vw, 1.02rem); font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; color: #06305e; text-shadow: 0 1px 0 rgba(255,255,255,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.join2-actions span:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(124,179,66,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.join2-close {
  max-width: 700px; margin: 0 auto 34px; font-size: clamp(1.1rem, 2.1vw, 1.28rem);
  line-height: 1.7; color: rgba(255,255,255,.94);
}
.join2-close .green { color: var(--primary-green); font-weight: 800; }
.join2-close strong {
  display: inline-block; margin-top: 12px; font-size: 1.12em; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em; color: #fff;
}
@media (max-width: 560px) {
  .join2-actions { gap: 11px 12px; }
  .join2-actions span { padding: 12px 22px; font-size: .86rem; }
  .join2-strap { padding: 16px 14px; }
}
.join2-video {
  position: relative; width: 100%; max-width: 700px; aspect-ratio: 16 / 9; margin: 0 auto 34px;
  border-radius: 18px; padding: 2px;
  background: linear-gradient(150deg, rgba(124,179,66,0.95), rgba(21,101,192,0.75) 55%, rgba(124,179,66,0.55));
  box-shadow: 0 44px 100px rgba(0,0,0,0.55), 0 0 80px rgba(124,179,66,0.16);
}
.join2-video video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; background: #04101f; }
.video-sound {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(6,16,30,0.6); border: 1px solid rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.2s, border-color 0.2s, opacity 0.25s;
}
.video-sound:hover { background: rgba(124,179,66,0.35); border-color: rgba(124,179,66,0.6); transform: scale(1.06); }
/* Desktop (hover-capable): hide the control until the video is hovered/focused. Touch devices keep it visible. */
@media (hover: hover) {
  .video-sound { opacity: 0; }
  .join2-video:hover .video-sound, .join2-video:focus-within .video-sound { opacity: 1; }
}
.video-sound .i-on { display: none; }
.video-sound.on .i-off { display: none; }
.video-sound.on .i-on { display: inline; }
.join-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.join-cta .cta-button svg { margin-left: 4px; }
@media (max-width: 560px) { .join-cta { flex-direction: column; } .join-cta a { width: 100%; justify-content: center; } }

/* ---------- footer legal links (between nav links and copyright) ---------- */
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 22px; margin: 16px auto 4px; max-width: 620px;
}
.footer-legal a {
  color: rgba(255,255,255,.5); text-decoration: none;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  transition: color .2s ease;
}
.footer-legal a:hover { color: var(--primary-green); }

/* ---------- legal pages (privacy / terms / shipping) ---------- */
.legal { max-width: 820px; margin: 0 auto; color: #dfeaf6; line-height: 1.75; }
.legal .legal-updated {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-gray); padding-bottom: 18px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.legal h2 {
  font-size: 1.12rem; font-weight: 800; color: #fff; text-transform: uppercase;
  letter-spacing: .02em; margin: 34px 0 10px; padding-left: 14px;
  border-left: 3px solid var(--primary-green);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--primary-green); }
.legal strong { color: #fff; font-weight: 700; }
.legal a { color: var(--primary-green); text-decoration: none; font-weight: 600; }
.legal a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .legal { font-size: .95rem; }
  .legal h2 { font-size: 1rem; padding-left: 11px; margin-top: 28px; }
}

/* ---- merch teaser: real shop products ---- */
.product-img { padding: 0; background: #fff; }
.product-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.product-sub { color: var(--text-gray); font-size: .8rem; margin: 5px 0 14px; }

/* ---- Hotel & Stay modal (shared: tickets.html + upcoming.html) ---- */
.hotel-modal { width: min(680px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.hotel-modal .modal-header { flex: none; }
.hotel-body { overflow-y: auto; }
/* single establishing photo at the top of the modal — deliberately not a
   gallery, that lives on hotel.html */
.hotel-hero {
  margin: 0 0 20px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
}
.hotel-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }
.hotel-intro { color: #dfeaf6; line-height: 1.7; margin: 0 0 22px; }
.hotel-intro strong { color: var(--primary-green); font-weight: 800; }
.hotel-h {
  font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
  color: #fff; padding-left: 12px; border-left: 3px solid var(--primary-green);
  margin: 26px 0 12px;
}
.hotel-facts { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px; overflow: hidden; margin: 0 0 16px; }
@media (min-width: 520px) { .hotel-facts { grid-template-columns: 1fr 1fr; } }
.hotel-facts > div { background: rgba(9,26,48,.92); padding: 13px 16px; }
.hotel-facts dt { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-gray); margin-bottom: 5px; }
.hotel-facts dd { margin: 0; color: #fff; font-weight: 700; font-size: .95rem; }
.hotel-tbc {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(124,179,66,.14); border: 1px solid rgba(124,179,66,.42);
  color: var(--primary-green); font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.hotel-list { list-style: none; padding: 0; margin: 0; }
.hotel-list li { position: relative; padding-left: 22px; margin-bottom: 9px; color: #dfeaf6; line-height: 1.6; }
.hotel-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--primary-green); }
.hotel-pending { color: var(--text-gray); font-size: .9rem; line-height: 1.65; font-style: italic; margin: 0; }
.hotel-p { color: #dfeaf6; line-height: 1.7; margin: 0; }
.hotel-book { margin: 4px 0 6px; }
.hotel-note { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
  color: var(--text-gray); font-size: .82rem; line-height: 1.6; }
.hotel-note a { color: var(--primary-green); font-weight: 700; text-decoration: none; }
.hotel-note a:hover { text-decoration: underline; }

/* Trigger button. Deliberately the SAME frosted-glass treatment the site already
   uses for a secondary button (.cta-button-blue — e.g. "See Schedule" sitting
   directly below it on upcoming.html), with the house 5px radius and 16/32
   padding, so it reads as a sibling rather than a foreign element. Works on the
   green AND the dark blue sections, so no per-section override is needed. */
.hotel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border-radius: 5px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-family: inherit; font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hotel-btn:hover {
  background: rgba(255,255,255,.22); border-color: #fff; transform: translateY(-2px);
}
.hotel-btn svg { width: 18px; height: 18px; flex: none; }

/* =========================================================================
   Contact form — v2 restyle (overrides the older style.css rules)
   ========================================================================= */
.tas-contact-form-wrapper { max-width: 720px; }
.tas-contact-form {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(124,179,66,.14), transparent 60%),
    linear-gradient(165deg, rgba(16,48,85,.92) 0%, rgba(11,28,52,.94) 55%, rgba(8,18,33,.96) 100%);
  border: 1px solid rgba(124,179,66,.28);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 0 60px rgba(21,101,192,.14);
  overflow: hidden;
}
/* brand accent bar, same language as the modals */
.tas-contact-form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-green), var(--primary-blue-light) 55%, var(--primary-green));
}

.tas-contact-form label span {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-gray); margin-bottom: 9px;
}

.tas-contact-form input,
.tas-contact-form select,
.tas-contact-form textarea {
  width: 100%; padding: 14px 16px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(4,16,31,.62);
  color: #fff; font-family: inherit; font-size: .95rem; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tas-contact-form input::placeholder,
.tas-contact-form textarea::placeholder { color: rgba(255,255,255,.42); }

.tas-contact-form input:hover,
.tas-contact-form select:hover,
.tas-contact-form textarea:hover { border-color: rgba(255,255,255,.26); }

.tas-contact-form input:focus,
.tas-contact-form select:focus,
.tas-contact-form textarea:focus {
  border-color: var(--primary-green);
  background: rgba(4,16,31,.85);
  box-shadow: 0 0 0 3px rgba(124,179,66,.18);
}
.tas-contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

/* subject dropdown: native select, custom chevron */
.tas-select-wrap { position: relative; }
.tas-select-wrap::after {
  content: ""; position: absolute; right: 17px; top: calc(50% + 3px);
  width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--primary-green); border-bottom: 2px solid var(--primary-green);
  transform: translateY(-50%) rotate(45deg);
}
.tas-contact-form select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 44px; cursor: pointer;
}
.tas-contact-form select option { background: #0b1c34; color: #fff; }
.tas-contact-form select:invalid { color: rgba(255,255,255,.42); }

.tas-form-full { margin-bottom: 18px; }
.tas-form-row { gap: 18px; margin-bottom: 18px; }

.tas-form-actions { margin-top: 24px; flex-direction: column; gap: 12px; }
.tas-form-actions .cta-button { width: 100%; justify-content: center; }
.form-status { font-size: .88rem; text-align: center; min-height: 1.2em; }

/* routing hint under the dropdown */
.tas-route-note {
  margin: 8px 0 0; font-size: .76rem; color: var(--text-gray); line-height: 1.5;
}
.tas-route-note strong { color: var(--primary-green); font-weight: 700; }

@media (max-width: 640px) {
  .tas-contact-form { padding: 22px; border-radius: 16px; }
  .tas-form-row { gap: 14px; margin-bottom: 14px; }
}

/* brief highlight when an enquiry card jumps you to the form */
@keyframes formFlash {
  0%, 100% { box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 0 60px rgba(21,101,192,.14); }
  35%      { box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 0 0 4px rgba(124,179,66,.45), 0 0 70px rgba(124,179,66,.35); }
}
.tas-contact-form.form-flash { animation: formFlash 1.4s ease; }
@media (prefers-reduced-motion: reduce) { .tas-contact-form.form-flash { animation: none; } }

/* ---- About page: mission statement band ---- */
.about-mission { padding-top: 62px; padding-bottom: 62px; }
.mission-wrap {
  position: relative; max-width: 820px; margin: 0 auto; padding: 40px 34px 38px;
  text-align: center; border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% -25%, rgba(124,179,66,.14), transparent 62%),
    linear-gradient(165deg, rgba(16,48,85,.72) 0%, rgba(11,28,52,.78) 55%, rgba(8,18,33,.82) 100%);
  border: 1px solid rgba(124,179,66,.26);
  box-shadow: 0 26px 64px rgba(0,0,0,.38);
}
/* the summit eye, echoing the hero mark */
.mission-mark {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(150deg, var(--primary-green), #63992f);
  color: #06305e; box-shadow: 0 10px 26px rgba(124,179,66,.4);
}
.mission-mark svg { width: 25px; height: 25px; }
.mission-text {
  margin: 8px 0 0; font-size: clamp(1.12rem, 2.3vw, 1.42rem); font-weight: 500;
  line-height: 1.65; color: #eaf3fb; letter-spacing: .005em;
}
.mission-text strong { color: var(--primary-green); font-weight: 800; }
@media (max-width: 560px) {
  .about-mission { padding-top: 52px; padding-bottom: 52px; }
  .mission-wrap { padding: 34px 20px 30px; border-radius: 16px; }
}

/* =========================================================================
   Hotel & Booking page (hotel.html) — the modal content given room to breathe.
   Booking is the primary action, so the rate + CTAs lead.
   ========================================================================= */
.hotel-page { max-width: 860px; margin: 0 auto; }
.hp-intro { font-size: 1.08rem; line-height: 1.75; color: #dfeaf6; margin: 0 0 30px; text-align: center; }
.hp-intro strong { color: var(--primary-green); font-weight: 800; }

/* --- the booking panel --- */
.hp-book {
  position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 40px;
  background:
    radial-gradient(120% 100% at 50% -25%, rgba(124,179,66,.16), transparent 62%),
    linear-gradient(165deg, rgba(16,48,85,.9) 0%, rgba(11,28,52,.94) 55%, rgba(8,18,33,.96) 100%);
  border: 1px solid rgba(124,179,66,.35);
  box-shadow: 0 26px 64px rgba(0,0,0,.4);
}
.hp-book::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-green), var(--primary-blue-light) 55%, var(--primary-green));
}
.hp-book-main { padding: 34px 30px 30px; text-align: center; }
.hp-eyebrow {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary-green);
}
.hp-rate {
  margin-top: 8px; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 900;
  line-height: 1; color: #fff; letter-spacing: -.02em;
}
.hp-rate span {
  display: inline-block; margin-left: 6px; font-size: .95rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-gray);
  vertical-align: middle;
}
/* The bold call to action is its own line: as a block it can never be split
   mid-sentence, whichever way the rest of the copy wraps. balance then
   evens out the sentence below it so it does not orphan a word either. */
.hp-rate-note { max-width: 520px; margin: 14px auto 0; font-size: .93rem; line-height: 1.65;
  color: #cfe1f6; text-wrap: balance; }
.hp-rate-note strong { display: block; }
.hp-rate-note strong { color: #fff; font-weight: 800; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }
.hp-call { display: inline-flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
/* --- contact page: who to speak to ---------------------------------------
   auto-fit so the row stays balanced as people are added or removed; each
   card shows only the details that exist, so a missing phone number just
   leaves the email line. */
/* Two per row, photo beside the details. Four narrow columns left the
   addresses no room and forced them onto two ragged lines; a wide card puts
   each address on one line, which is the whole point of showing it. */
/* One breakpoint governs the column count AND the centred-orphan rule below.
   auto-fit was tempting, but then the grid decides its own column count and
   the orphan rule has to guess where that happens — at 780px they disagreed
   and the last card shrank to half width while still in a single column. */
.team-grid {
  display: grid; gap: 18px; max-width: 880px; margin: 0 auto;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
}
.team-card {
  display: flex; align-items: center; gap: 18px; text-align: left;
  padding: 20px 22px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
  transition: border-color .2s ease, transform .2s ease;
}
.team-card:hover { border-color: rgba(124,179,66,.5); transform: translateY(-3px); }
.team-card img {
  flex: none; width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.22);
}
.team-info { min-width: 0; }
.team-card h3 { font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0 0 8px; }
.team-card a {
  display: flex; align-items: center; gap: 7px;
  color: #cfe1f6; text-decoration: none; font-size: .82rem; line-height: 1.5;
  margin-top: 5px;
  /* addresses carry a <wbr/> after the @ so a narrow card splits them at the
     seam rather than mid-word — never break-word, which gave
     "theawakeningsummi t.org". */
  overflow-wrap: anywhere;
}
.team-card a svg { flex: none; }
/* An odd number of people leaves the last card stranded in column one, so it
   spans the row and centres itself at the same width as the others.
   :nth-child(odd) means this switches itself off the moment the count is even
   again — nothing to remember when someone is added or removed.
   Same 820px breakpoint as the grid above — they must never disagree. */
@media (min-width: 820px) {
  .team-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 9px);   /* half the grid minus half the 18px gap */
    justify-self: center;
  }
}
@media (max-width: 420px) {
  .team-card { gap: 14px; padding: 18px; }
  .team-card img { width: 74px; height: 74px; }
  .team-card a { font-size: .78rem; }
}
.team-card a:hover { color: var(--primary-green); }
.team-card .team-tel { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.team-note { text-align: center; margin: 30px auto 0; color: var(--text-gray); font-size: .9rem; }
.team-note a { color: var(--primary-green); font-weight: 700; text-decoration: none; }
.team-note a:hover { text-decoration: underline; }

/* --- booking deadline (shared by hotel.html and the tickets modal) ---
   Three looks for three states: neutral while there is time, amber in the
   final fortnight, red once the block has gone. */
.hp-deadline {
  max-width: 520px; margin: 16px auto 0; padding: 11px 16px; border-radius: 10px;
  font-size: .9rem; line-height: 1.6;
}
.hp-deadline strong { color: #fff; font-weight: 800; }
.hp-deadline.is-open { color: #cfe1f6; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); }
.hp-deadline.is-closing { color: #ffe3b0; background: rgba(255,167,38,.13); border: 1px solid rgba(255,167,38,.5); }
.hp-deadline.is-closed { color: #f4d9d9; background: rgba(229,115,115,.12); border: 1px solid rgba(229,115,115,.45); }
.hp-deadline.is-closing strong { color: #ffc46b; }
.hp-deadline.is-closed strong { color: #ffb4b4; }

/* the rate is left visible but struck through — clearer than deleting it,
   because people arrive holding the $259 figure in their head */
.hp-book.is-closed .hp-rate { opacity: .4; text-decoration: line-through; }
.hp-book.is-closed .hp-rate-note { display: none; }
.hotel-facts.is-closed dd { opacity: .45; text-decoration: line-through; }

.hp-callnote { margin-top: 16px; font-size: .86rem; color: var(--text-gray); }
.hp-callnote strong { color: #fff; font-weight: 700; }

/* --- section headings --- */
.hp-h {
  font-size: .84rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
  color: #fff; padding-left: 13px; border-left: 3px solid var(--primary-green);
  margin: 34px 0 16px;
}

/* --- the waived resort fee, called out --- */
.hp-waiver {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;
  padding: 16px 20px; border-radius: 14px;
  background: rgba(124,179,66,.1); border: 1px solid rgba(124,179,66,.42);
}
.hp-waiver-tag {
  flex: none; margin-top: 1px; padding: 4px 12px; border-radius: 999px;
  background: var(--primary-green); color: #06305e;
  font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.hp-waiver p { margin: 0; color: #eaf3fb; line-height: 1.6; font-size: .95rem; }
.hp-waiver strong { color: #fff; font-weight: 800; }

/* --- lists --- */
.hp-list { list-style: none; padding: 0; margin: 0; }
.hp-list li { position: relative; padding-left: 22px; margin-bottom: 10px; color: #dfeaf6; line-height: 1.6; }
.hp-list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--primary-green);
}
@media (min-width: 700px) { .hp-cols { column-count: 2; column-gap: 40px; } .hp-cols li { break-inside: avoid; } }
.hp-pending { color: var(--text-gray); font-size: .95rem; line-height: 1.65; font-style: italic; margin: 0; }

.hp-note {
  margin: 34px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  color: var(--text-gray); font-size: .86rem; line-height: 1.65;
}
.hp-note a { color: var(--primary-green); font-weight: 700; text-decoration: none; }
.hp-note a:hover { text-decoration: underline; }

.hp-back { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.hp-back .v2-ghost { display: inline-flex; align-items: center; gap: 9px; }

/* --- photography ---------------------------------------------------------
   One wide establishing shot sits above the rate so the hotel sells itself
   before the price, then a small gallery lower down. Every image is cropped
   with object-fit against a fixed aspect-ratio, so the layout never shifts
   as the pictures load. */
.hp-lead {
  margin: 26px 0 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
/* height:auto is required — the width/height attributes on the <img> are
   presentational hints that would otherwise pin the height and make
   aspect-ratio do nothing. */
.hp-lead img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; }

/* The aspect lives on the button, not the image, so a short tile stretched by
   its grid row still has its picture fill the whole cell. */
.hp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hp-shot {
  display: block; padding: 0; margin: 0; cursor: pointer; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  transition: border-color .2s ease;
}
.hp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.hp-shot:hover { border-color: rgba(124,179,66,.6); }
.hp-shot:hover img { transform: scale(1.05); }
.hp-shot:focus-visible { outline: 2px solid var(--primary-green); outline-offset: 3px; }

.hp-credit { margin: 12px 0 0; font-size: .78rem; color: var(--text-gray); font-style: italic; }

/* --- lightbox --- */
.hp-light {
  /* longhand fallback for Safari < 14.1 — see the note on .modal-overlay */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 4000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(3,14,30,.93); backdrop-filter: blur(4px);
}
.hp-light.active { display: flex; }
.hp-light img {
  max-width: min(1100px, 92vw); max-height: 86vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.hp-light-close, .hp-light-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1);
  color: #fff; cursor: pointer; border-radius: 50%; line-height: 1;
  transition: background .2s ease;
}
.hp-light-close:hover, .hp-light-nav:hover { background: rgba(255,255,255,.24); }
.hp-light-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.7rem; }
.hp-light-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; padding-bottom: 4px; }
.hp-prev { left: 16px; }
.hp-next { right: 16px; }

@media (max-width: 600px) {
  .hp-book-main { padding: 26px 20px 24px; }
  .hp-actions .cta-button, .hp-actions .v2-ghost { width: 100%; justify-content: center; }
  .hp-back a { width: 100%; justify-content: center; }
  .hp-lead img { aspect-ratio: 4 / 3; }
  .hp-gallery { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .hp-light { padding: 10px; }
  .hp-light-nav { width: 40px; height: 40px; font-size: 1.6rem; }
}

/* The VENUE fact card is itself the link to hotel.html. A button inside one
   card made it look bolted-on next to the other two — this keeps all three
   visually identical and just makes one of them clickable. */
.fact-link-card { text-decoration: none; color: inherit; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.fact-link-card:hover {
  background: rgba(6,28,54,.62); border-color: rgba(255,255,255,.45); transform: translateY(-3px);
}
.fact-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.fact-cta svg { transition: transform .2s ease; }
.fact-link-card:hover .fact-cta { color: #fff; }
.fact-link-card:hover .fact-cta svg { transform: translateX(3px); }

/* modal booking row: online CTA + phone side by side */
.hotel-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.hotel-cta-row .hotel-book { margin: 0; }
.hotel-call {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.hotel-call svg { color: var(--primary-green); flex: none; }
.hotel-call:hover { color: var(--primary-green); }
/* a single confirmed fact shouldn't leave an empty cell in the 2-col grid */
@media (min-width: 520px) { .hotel-facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }


/* shown in a speaker modal when only the links have arrived so far */
.modal-bio-pending { color: var(--text-gray); font-style: italic; }

/* --- sponsor cards (homepage strip + sponsors page) ---
   Same card language as the ticket tiers, team and speaker cards: rounded,
   faint fill, 1px border, lift on hover. Each card carries its own tier badge,
   so a mixed set of sponsors reads correctly without needing a row per tier. */
.sp-grid {
  display: grid; gap: 20px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 270px));
  max-width: 900px; margin: 0 auto;
}
.sp-card {
  overflow: hidden; border-radius: 16px; text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sp-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.34);
  box-shadow: 0 20px 44px rgba(0,0,0,.4); }
.sp-media { line-height: 0; background: #06203c; }
.sp-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.sp-body { padding: 16px 16px 18px; }
/* the tier is the point of the card, so it leads */
.sp-tier {
  display: inline-block; margin-bottom: 9px; padding: 5px 12px; border-radius: 20px;
  font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.sp-name { margin: 0; font-size: 1rem; font-weight: 800; color: #fff; }
/* tier colours, borrowed from the metals rather than the brand green so a
   sponsor badge never reads as a call to action */
.sp-platinum .sp-tier { background: linear-gradient(135deg,#f1f5f9,#cbd5e1); color: #10233c; }
.sp-gold     .sp-tier { background: linear-gradient(135deg,#f7d774,#d4a437); color: #3a2a05; }
.sp-silver   .sp-tier { background: linear-gradient(135deg,#dfe6ee,#aab6c4); color: #1b2836; }
.sp-platinum:hover { border-color: rgba(226,232,240,.6); }
.sp-gold:hover     { border-color: rgba(212,164,55,.7); }
.sp-silver:hover   { border-color: rgba(170,182,196,.7); }


/* --- donate page: supporters ("Friends of the Summit") ---
   People who gave below sponsor level and asked to be named. The section is
   hidden by donate.html unless the list has entries, so an empty wall never
   appears. Its own darker band separates it from the donate card above. */
.sup-section {
  background: linear-gradient(180deg, #0a2f57 0%, #082744 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.sup-intro { text-align: center; color: var(--text-gray); max-width: 560px; margin: 0 auto 34px; line-height: 1.7; }
.sup-grid {
  display: grid; gap: 12px; max-width: 900px; margin: 0 auto;
  /* min() so a long name never forces the track wider than the phone */
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.sup-card {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.sup-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: #fff; font-size: .92rem; }
.sup-amt { flex: none; font-weight: 800; font-size: .9rem; color: var(--primary-green); font-variant-numeric: tabular-nums; }


/* ============ MOBILE NAV ============
   Full-screen panel. Longhand offsets before `inset` and a -webkit- prefix on
   the blur, because the Safari in use here predates both. */
.burger { position: relative; display: block; width: 26px; height: 18px; }
.burger i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), top .34s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 8px; }
.burger i:nth-child(3) { top: 16px; }
/* the bars converge and cross rather than swapping for an X glyph */
.is-nav-open .burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
.is-nav-open .burger i:nth-child(2) { opacity: 0; transform: scaleX(.1); }
.is-nav-open .burger i:nth-child(3) { top: 8px; transform: rotate(-45deg); }
.mobile-menu-btn { padding: 10px; margin: -10px; }   /* 44px touch area, no visual change */

.mnav {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  z-index: 45; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(21,101,192,.5), transparent 60%),
    linear-gradient(180deg, #06203c 0%, #041428 100%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease, visibility .34s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mnav.active { opacity: 1; visibility: visible; }
.mnav-inner {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100%; padding: 88px 22px 30px;   /* clears the sticky navbar */
}
.mnav-label {
  margin: 22px 0 6px; font-size: .64rem; font-weight: 900; letter-spacing: .2em;
  text-transform: uppercase; color: var(--primary-green);
}
.mnav-label:first-child { margin-top: 0; }
.mnav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 8px 4px; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08); color: #fff;
}
.mnav-text { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.mnav-text small { display: block; margin-top: 3px; font-size: .72rem; font-weight: 600; color: var(--text-gray); letter-spacing: .01em; }
.mnav-arrow { flex: none; opacity: .35; transition: transform .2s ease, opacity .2s ease; }
.mnav-item:active .mnav-arrow { transform: translateX(3px); opacity: .8; }
.mnav-item.active { color: var(--primary-green); }
.mnav-item.active .mnav-arrow { opacity: .9; }
.mnav-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.mnav-cta .cta-button, .mnav-cta .v2-ghost { width: 100%; justify-content: center; text-align: center; }

/* the stagger: each row is given its own transition-delay in v2.js */
.mnav-item, .mnav-label, .mnav-cta {
  opacity: 0; transform: translateY(12px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.2,.85,.25,1);
}
.mnav.active .mnav-item, .mnav.active .mnav-label, .mnav.active .mnav-cta { opacity: 1; transform: none; }

@media (min-width: 820px) { .mnav { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav-item, .mnav-label, .mnav-cta, .burger i { transition-duration: .01ms !important; }
  .mnav-item, .mnav-label, .mnav-cta { transform: none; }
}


/* ---- navbar on a phone ----
   The logo is 24px on desktop, which at 360px leaves 298px of text plus a 46px
   burger inside a 324px bar -- they collided. Scaling it with the viewport
   keeps the wordmark whole and the burger reachable. */
@media (max-width: 819px) {
  .navbar { padding: 14px 4%; gap: 12px; }
  /* flex:none on the button and min-width:0 on the wordmark: without these the
     logo can push the burger out of the bar entirely if the text renders wider
     than expected (a webfont that has not loaded yet will do it). The burger
     must survive whatever the type does. */
  .nav-logo { font-size: clamp(.95rem, 4.6vw, 1.25rem); line-height: 1.15; min-width: 0; flex: 0 1 auto; }
  .mobile-menu-btn { flex: none; }
}
.mnav-arrow { opacity: .5; }