:root{
  --green:#0c5a3d;
  --green-2:#0a3e2a;
  --teal:#19d3c5;
  --pink:#ff3ea7;
  --gold:#f5b34c;
  --gold-2:#ffd06a;
  --cream:#fff3d9;
  --orange:#ff8a2d;
  --ink:#0f1220;
  --text:#f8fff9;
  --muted:#caefe3
}
body{
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(25,211,197,.18), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(255,62,167,.12), transparent 60%),
    linear-gradient(145deg, var(--green) 0%, #0e6a47 40%, var(--green-2) 100%);
  color:var(--text);
  text-rendering:optimizeLegibility
}
.section-pad{padding:68px 0}
.nav-bg{background:linear-gradient(180deg,#0a3a29,#082a1d);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:.6rem;letter-spacing:.4px}
.brand-pill{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--pink),var(--teal));color:#200d0b;font-weight:900}
.title{text-transform:uppercase;letter-spacing:.6px;font-weight:900}
.accent{background:linear-gradient(90deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{
  background:
    radial-gradient(1200px 520px at 8% 0%, rgba(245,179,76,.18), transparent 60%),
    radial-gradient(1000px 600px at 88% 6%, rgba(255,138,45,.16), transparent 60%)
}
.sub{color:var(--muted)}
.badge-fan{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border-radius:999px;background:rgba(25,211,197,.18);border:1px solid rgba(255,255,255,.14);color:#cffff9;font-weight:700}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#3b1f05;border:none;font-weight:800;letter-spacing:.3px;box-shadow:0 10px 0 #e3a92d,0 16px 28px rgba(0,0,0,.28)}
.btn-gold:active{transform:translateY(2px)}
.btn-outline-teal{border:2px solid #1f8b63;color:#eafff5}
.panel-grad{background:linear-gradient(145deg,#136043 0%, #0f4b33 50%, #0b3926 100%);border:1px solid #1d7f59;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.panel-cream{background:linear-gradient(180deg,#fff7e7 0%, var(--cream) 100%);border:2px solid #e6d0a1;border-radius:18px;color:#442e14}
.panel-dark{background:linear-gradient(180deg,#0f172a,#0b1324);border:1px solid rgba(255,255,255,.08);border-radius:18px}
.orange-band{background:linear-gradient(180deg,#ff993f,var(--orange));color:#2b1202;border-radius:16px}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:.6rem;background:#093b29;border:1px solid #1b7b57;color:#aef1e1;font-size:.85rem}
.meter{height:10px;border-radius:999px;background:#0a3323;border:1px solid #1f8b63;overflow:hidden}
.meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--teal))}
.list-check i{color:var(--teal)}
.pink-text{color:var(--pink)}
.teal-text{color:var(--teal)}
.gallery{border-radius:14px;border:2px solid #1f8b63}
.squircle{background:#0f2f22;border:1px solid #1a7e57;border-radius:16px}
.consent{color:#e9d9ad}
.footer{background:linear-gradient(180deg,#092a1d,#071e15);border-top:1px solid rgba(255,255,255,.08)}
/* === Taller portrait-friendly crops (override) === */
.gallery,
.panel-grad > img,
.panel-cream > img,
.panel-dark > img,
.hero .panel-grad > img {
  width: 100%;
  aspect-ratio: 3 / 4 !important;   /* taller by default */
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  min-height: 280px;                 /* prevents tiny images on narrow cards */
}

/* Taller on desktops for nicer presence */
@media (min-width: 992px) {
  .gallery,
  .panel-grad > img,
  .panel-cream > img,
  .panel-dark > img,
  .hero .panel-grad > img {
    aspect-ratio: 2 / 3 !important;  /* even taller on large screens */
    min-height: 380px;
  }
}

/* Slightly less tall on very small phones for readability */
@media (max-width: 576px) {
  .gallery,
  .panel-grad > img,
  .panel-cream > img,
  .panel-dark > img,
  .hero .panel-grad > img {
    aspect-ratio: 4 / 5 !important;  /* still portrait, but not overwhelming */
    min-height: 240px;
  }
}

/* Cap extreme heights on huge monitors */
@media (min-width: 1200px) {
  .gallery,
  .panel-grad > img,
  .panel-cream > img,
  .panel-dark > img,
  .hero .panel-grad > img {
    max-height: 680px;
  }
}
.wsg-cookie-banner{
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1080;
  background:
    radial-gradient(600px 240px at 10% -10%, rgba(25,211,197,.15), transparent 60%),
    radial-gradient(600px 320px at 100% 0%, rgba(255,62,167,.10), transparent 60%),
    linear-gradient(145deg, var(--green) 0%, #0e6a47 40%, var(--green-2) 100%);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 14px 0;
  color: var(--text);
  display: none;
}
.wsg-cookie-banner.show{display:block}
.wsg-cookie-text{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
}
.wsg-cookie-text strong{letter-spacing:.2px}
.wsg-cookie-link{color:#ffe39a; text-decoration:underline}
.wsg-cookie-link:hover{opacity:.9}
@media (max-width:576px){
  .wsg-cookie-banner{padding: 18px 0}
  .wsg-cookie-text{flex-direction:column; align-items:flex-start}
}