/* Paper system for community.html: the faithful finclarity layout with lifehappens' background language —
   cream paper river ribbons behind selected sections, the Divi wave where the ground colour changes,
   and the square explainer inside the urgency band. Nothing else changes. */

/* ribbons: absolutely behind the section's content, never intercepting input */
.gb-river{position:absolute;inset:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:110% auto;opacity:.95;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 97%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 78%,transparent 97%)}
.gb-river-1{background-image:url(assets/img/river-01.png)}
.gb-river-2{background-image:url(assets/img/river-02.png)}
.gb-river-3{background-image:url(assets/img/river-03.png)}
.gb-river--br{background-position:100% 100%}
.gb-river--bl{background-position:0% 100%;transform:scaleX(-1)}
.gb-river--tl{background-position:0% 0%;transform:scaleX(-1)}
.gb-river--tr{background-position:100% 0%}
/* on forest ground the ribbon reads as a soft light band, keep it faint */
.bg-primary .gb-river{opacity:.12;mix-blend-mode:screen}
@media (max-width:900px){.gb-river{background-size:220% auto;opacity:.8}}

/* wave transitions: the source's Divi "wave" path, filled with the colour of the section above,
   sitting on the top edge of the section below */
.gb-pwave{position:absolute;left:0;right:0;top:-1px;height:clamp(48px,7vw,100px);z-index:6;pointer-events:none}
.gb-pwave svg{width:100%;height:100%;display:block}
.gb-pwave--flip{transform:scaleX(-1)}
section.gb-pt{padding-top:clamp(7rem,12vw,10rem)!important}

/* the urgency band: card + square explainer, two columns */
.gb-band-inner{display:flex;justify-content:center}
.gb-band-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,380px);gap:clamp(1.5rem,3vw,3rem);align-items:stretch;width:100%;max-width:1200px}
.gb-band-grid>div:first-child{display:flex;align-items:center;border-radius:2.5rem 1rem 2.5rem 1rem!important;height:100%;box-sizing:border-box;background:linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.02) 60%,rgba(0,0,0,.10) 100%),hsl(var(--primary))!important;border-color:rgba(255,255,255,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 30px 60px -24px rgba(0,0,0,.6)!important;position:relative;overflow:hidden}
.gb-band-grid>div:first-child::before{content:"";position:absolute;inset:0 0 auto 0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0));pointer-events:none;border-radius:inherit}
.gb-band-grid .gb-sq{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gb-band-grid .gb-sq:hover{transform:translateY(-4px)}
.gb-band-grid .gb-sq .gb-video__cover,.gb-band-grid .gb-sq .gb-video__el{border-radius:1rem 2.5rem 1rem 2.5rem}
.gb-band-grid>div:first-child{max-width:none!important;width:100%}
@media (max-width:900px){.gb-band-grid{grid-template-columns:1fr}.gb-band-grid .gb-sq{max-width:360px;margin-inline:auto;transform:none}}

/* square paper video card on the forest ground */
.gb-video{position:relative;width:100%}
.gb-video__cover{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;border:0;padding:0;cursor:pointer;background:#F7F3EA;box-shadow:0 12px 18px -6px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.14);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.gb-video__cover:hover{transform:translateY(-4px);box-shadow:0 30px 60px -16px rgba(0,0,0,.45),0 0 0 3px rgba(237,174,29,.55)}
.gb-video__cover img{width:100%;height:100%;object-fit:cover;display:block}
.gb-video__play{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:9999px;background:hsl(var(--primary));color:#fff;display:grid;place-items:center;box-shadow:0 12px 24px -8px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.gb-video__cover:hover .gb-video__play{transform:translate(-50%,-50%) scale(1.06)}
.gb-video__play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}
.gb-video__meta{position:absolute;left:14px;bottom:12px;background:rgba(0,0,0,.72);color:#fff;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.gb-video__el{width:100%;aspect-ratio:1/1;border-radius:20px;display:block;background:#000;box-shadow:0 12px 18px -6px rgba(0,0,0,.3)}
.gb-video.is-playing .gb-video__cover{display:none}

/* ---- full-bleed community photo hero (community.html) ---- */
.gb-hero-sec{padding:0!important;background:hsl(var(--primary))}
.gb-hero{position:relative;min-height:max(100svh,720px);display:flex;align-items:center;padding:calc(88px + 4vw) 0 clamp(6rem,11vw,9rem);overflow:hidden}
.gb-hero__bg{position:absolute;inset:0}
.gb-hero__bg video,.gb-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
/* very slow zoom-in on first load, then holds; the clip itself loops underneath */
.gb-hero__video{transform:scale(var(--gbz,1));will-change:transform}
.gb-hero__veil{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.7) 160px,#000 360px);mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.7) 160px,#000 360px);background:linear-gradient(270deg,rgba(17,44,40,.86) 0%,rgba(17,44,40,.70) 38%,rgba(17,44,40,.26) 66%,rgba(17,44,40,.08) 100%),linear-gradient(180deg,transparent 0%,transparent 70%,rgba(17,44,40,.5) 100%)}
.gb-hero__in{width:100%;display:flex;justify-content:flex-end}
.gb-hero__copy{max-width:680px}
@media (min-width:1100px){.gb-hero__copy{margin-right:-2vw;padding-right:0}}
.gb-hero__h1{font-size:clamp(2.5rem,4.9vw,3.85rem);line-height:1.02;letter-spacing:-.025em;font-weight:700;color:#fff}
@media (min-width:1024px){.gb-hero__h1 .gb-l{white-space:nowrap}}
.gb-hero__h1 .gb-l{color:#fff}
.gb-hero__h1 .gb-l.text-accent{color:hsl(var(--accent))!important;text-shadow:0 0 30px rgba(237,174,29,.35)}
.gb-hero__sub{margin:1.4rem 0 0;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:rgba(253,248,240,.9);max-width:30em}
.gb-hero__cta{margin-top:2rem}
@media (prefers-reduced-motion:reduce){.gb-hero__video{transform:scale(1.02)!important}}
@media (max-width:640px){.gb-hero{min-height:82vh;align-items:flex-end}.gb-hero__veil{background:linear-gradient(180deg,rgba(17,44,40,.25),rgba(17,44,40,.85) 70%)}}
/* header over the photo hero: light links until the bar turns solid on scroll */
/* header: logo left (only once the bar turns white), nav centred, CTA right; fully transparent over the hero */
#siteHeader>div{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
#siteHeader>div>a[aria-label]{order:1;justify-self:start;transition:opacity .35s}
#siteHeader>div>nav{order:2;justify-self:center}
#siteHeader>div>button,#siteHeader>div>div{order:3;justify-self:end;width:auto}
@media (max-width:767px){#siteHeader>div{grid-template-columns:1fr auto}#siteHeader>div>nav{display:none}}
#siteHeader.bg-transparent{background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
#siteHeader.bg-transparent nav a{color:hsl(var(--primary));text-shadow:0 1px 10px rgba(255,255,255,.55)}
#siteHeader.bg-transparent a[aria-label]{opacity:1}
#siteHeader a[aria-label] img{height:44px!important;filter:none}
/* darken the sky under the header so nav, logo and CTA read */
.gb-hero__veil::after{content:none}

/* game plan: the three step cards drift and glint, staggered, as a living pattern interrupt */
.gb-step{animation:gbDrift 9s ease-in-out infinite;animation-delay:calc(var(--i,0)*-3s);will-change:transform;transform-origin:50% 100%}
.gb-step::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-18deg);animation:gbGlint 9s ease-in-out infinite;animation-delay:calc(var(--i,0)*-3s + 1.2s);pointer-events:none}
.gb-step:hover{animation-play-state:paused}
@keyframes gbDrift{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-.4deg)}60%{transform:translateY(-4px) rotate(.35deg)}}
@keyframes gbGlint{0%,55%{left:-60%}75%{left:130%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.gb-step,.gb-step::after{animation:none}}

/* embossed, glossy CTAs everywhere (no amber ring): top gloss, lower inner shade, soft drop; shine still glides */
.animate-glow-accent,.animate-glow-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.22),0 10px 22px -8px rgba(0,0,0,.5)!important;background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 52%,rgba(0,0,0,.10) 100%)!important;transition:transform .3s ease,box-shadow .3s ease!important}
.animate-glow-accent:hover,.animate-glow-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.22),0 16px 30px -10px rgba(0,0,0,.55)!important;transform:translateY(-1px)}
.btn-elegant:after{background:linear-gradient(to right,transparent,rgba(255,255,255,.28),transparent)}
/* over the hero the CTAs get a faint cream rim for separation (light, not amber) */
.gb-hero__cta,#siteHeader.bg-transparent [data-open-modal]{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1.5px rgba(253,248,240,.45),0 14px 30px -10px rgba(0,0,0,.65)!important}

/* explainer tile: autoplays muted when in view; one tap for sound */
.gb-video__sound{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;background:hsl(var(--accent));color:hsl(var(--primary));font-weight:700;font-size:13px;letter-spacing:.02em;padding:10px 16px;border-radius:9999px;border:0;display:none;align-items:center;gap:8px;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);animation:gbPulse 2.2s ease-in-out infinite}
@keyframes gbPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
.gb-video.is-playing .gb-video__sound{display:inline-flex}
.gb-video.has-sound .gb-video__sound{display:none}

/* explainer prompt: a readable invitation on the cover */
.gb-band-grid .gb-video__cover::after{content:"Watch the 1-minute explainer";position:absolute;left:50%;bottom:52px;transform:translateX(-50%);white-space:nowrap;font-weight:700;font-size:14px;color:hsl(var(--primary));background:rgba(253,248,240,.92);padding:8px 14px;border-radius:9999px;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);pointer-events:none}
.gb-band-grid .gb-video__play{top:auto;bottom:100px;transform:translateX(-50%)}
.gb-band-grid .gb-video__cover:hover .gb-video__play{transform:translateX(-50%) scale(1.06)}