/* PARALLAX */
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height:35vh;
    z-index: -1;}

/*------ NAVIGATION BAR ------*/

.nav-wrap{
    position:sticky;
    top:0;
    z-index:1200;
    width:100%;
    background:rgba(255,252,246,.20);
    border-bottom:1px solid rgba(33,56,39,.08);
    backdrop-filter:blur(16px) saturate(160%);
    transition:background .25s ease, box-shadow .25s ease}
.nav-wrap.scrolled{
    background:rgba(255,252,246,.40);
    box-shadow:0 10px 28px rgba(33,56,39,.08)}
.nav{
    min-height:var(--nav-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;position:relative}
.brand{
    display:flex;
    align-items:center;gap:.8rem}
.brand-logo{
    height:76px;
    width:auto;display:block}
.brand-text{
    display:grid;
    gap:2px}
.brand-title{
    font-weight:800;
    letter-spacing:-.04em;
    font-size:1.04rem;
    color:var(--forest)}
.brand-tagline{
    font-size:.84rem;
    font-weight:700;
    color:var(--muted);
    white-space:nowrap}
.nav-right{
    display:flex;
    align-items:center;
    gap:12px}
.nav-links{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end}
.nav-links>a,
.drop-btn{
    padding:12px 14px;
    border-radius:12px;
    font-size:.97rem;
    color:var(--forest);
    border:0;background:transparent;
    cursor:pointer;
    transition:background 180ms ease,transform 180ms ease}
.nav-links>a:hover,
.drop-btn:hover,
.drop:hover 
.drop-btn{
    background:rgba(44,82,115,.08)}
.nav-links>a.active{
    background:rgba(66,111,77,.12);font-weight:800}
.drop{
    position:relative}
.drop-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:220px;
    background:rgba(255,252,246,.98);
    border:1px solid rgba(33,56,39,.08);
    box-shadow:var(--shadow);
    border-radius:18px;padding:10px;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity 180ms ease,transform 180ms ease}
.drop:hover .drop-menu,
.drop:focus-within .drop-menu,
.drop.open .drop-menu{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0)}
.drop-menu a{
    display:block;
    padding:12px;
    border-radius:12px;
    color:var(--text-main)} 
.drop-menu a:hover{
    background:rgba(105,109,46,.08)}
.nav-cta{
    padding:12px 18px;
    background:var(--forest);
    color:var(--white);
    border-radius:999px;
    font-weight:800;
    border:1px solid rgba(33,56,39,.12)}
.theme-toggle{
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    border:1px solid var(--border-soft);
    background:var(--surface-soft);
    color:var(--text-main);
    border-radius:999px;
    padding:.42rem .72rem .42rem .5rem;
    cursor:pointer;
    transition:transform .22s ease, background .22s ease}
.theme-toggle:hover{
    transform:translateY(-1px)} 
.theme-toggle-track{
    position:relative;
    width:46px;
    height:26px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(241,207,98,.65), rgba(66,111,77,.38));
    display:inline-block;
    flex-shrink:0}
.theme-toggle-thumb{
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fffef8;
    box-shadow:0 4px 10px rgba(0,0,0,.16);
    transition:left .28s ease, background .28s ease}
.theme-toggle-label{
    font-weight:700;
    font-size:.9rem;
    min-width:42px}
.mobile-toggle{
    display:none;
    border:1px solid var(--line);
    background:var(--white);
    color:var(--forest);
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer}
.section-nav{
    position:sticky;
    top:var(--primary-nav-height, 84px);
    z-index:1100;
    width:100%;
    background:rgba(255,252,246,.88);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(33,56,39,.08);
    transition:box-shadow .25s ease}
.section-nav.scrolled{
    box-shadow:0 10px 24px rgba(33,56,39,.06)}
.section-nav-inner{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory}
.section-nav-inner::-webkit-scrollbar{
    display:none}
.section-nav-center{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    margin:0 auto;
    min-width:max-content;
    padding:.62rem .5rem}
.section-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:.6rem .88rem;
    border-radius:999px;
    color:var(--muted);
    font-weight:700;
    font-size:.9rem;
    transition:background .2s ease,color .2s ease;s
    croll-snap-align:center}
.section-link:hover{
    background:rgba(66,111,77,.08);
    color:var(--forest)} 
.section-link.active{
    background:rgba(66,111,77,.14);
    color:var(--forest)} 
.section-link.active::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    margin-right:.45rem;
    background:currentColor}


/*------ FLOATING SECTION INDICATOR ----*/

.floating-section-indicator{
    display:none}
@media (max-width:1024px){
  .section-nav{
      display:none}
  .floating-section-indicator{
      position:fixed;
      right:14px;
      top:50%;
      transform:translateY(-50%);
      z-index:1400;display:flex;
      flex-direction:column;
      lign-items:center;
      gap:.55rem;
      padding:.7rem .45rem;
      border-radius:999px;
      background:rgba(255,252,246,.46);
      backdrop-filter:blur(18px) saturate(160%);
      border:1px solid rgba(33,56,39,.08);
      box-shadow:0 16px 38px rgba(33,56,39,.12)}
  .floating-dot{
      position:relative;
      width:10px;
      height:10px;
      border-radius:50%;
      background:rgba(33,56,39,.24);
      transition:transform .22s ease,background .22s ease,box-shadow .22s ease,opacity .22s ease;
      opacity:.8}
  .floating-dot:hover{
      transform:scale(1.18);
      opacity:1}
  .floating-dot.active{
      background:var(--forest);
      transform:scale(1.22);
      box-shadow:0 0 0 6px rgba(66,111,77,.12);
      opacity:1}}
@media (max-width:640px){
    .floating-section-indicator{
        right:10px;
        gap:.48rem;
        padding:.58rem .38rem}
    .floating-dot{
        width:9px;
        height:9px}}


/*-------- HERO SECTION --------*/


.hero-cinematic,
.hero-premium{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    background:#213827}
.hero-media-wrap{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden}
.hero-picture,
.hero-bg-webp{
    position:absolute;
    inset:0}
.hero-bg-webp{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transform:scale(1.1);
    will-change:transform,filter,opacity;
    filter:saturate(1.02) contrast(1.03) brightness(.8)}
.hero-film{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(33,56,39,.80) 0%, rgba(33,56,39,.48) 28%, rgba(33,56,39,.12) 54%, rgba(33,56,39,.32) 100%),linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.03) 30%, rgba(0,0,0,.30) 100%);
    z-index:1}
.hero-vignette{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, rgba(0,0,0,0) 0 26%, rgba(0,0,0,.08) 56%, rgba(0,0,0,.34) 100%);
    z-index:2;
    pointer-events:none}
.hero-light-sweep{
    position:absolute;
    inset:-10% auto -10% -12%;
    width:54%;
    background:linear-gradient(115deg, rgba(249,242,178,.16), rgba(249,242,178,0));
    transform:skewX(-14deg);
    filter:blur(14px);
    opacity:.55;
    z-index:2;
    pointer-events:none}
.hero-bottom-fade{
    position:absolute;
    inset:auto 0 0 0;
    height:24vh;
    background:linear-gradient(180deg, rgba(255,252,246,0) 0%, rgba(255,252,246,.82) 88%, rgba(255,252,246,1) 100%);
    z-index:3}
.hero-grain{
    position:absolute;
    inset:0;
    z-index:2;
    opacity:.07;
    mix-blend-mode:soft-light;
    background-image:
        radial-gradient(circle at 20% 20%, 
            rgba(255,255,255,.22) 0 1px, 
            transparent 1px),
        radial-gradient(circle at 70% 40%, 
            rgba(255,255,255,.18) 0 1px, 
            transparent 1px),
        radial-gradient(circle at 40% 80%, 
            rgba(255,255,255,.16) 0 1px, 
            transparent 1px);
    background-size:140px 140px, 180px 180px, 220px 220px;
    pointer-events:none}
.premium-hero-grid{
    position:relative;
    z-index:5;
    width:100%;
    min-height:100svh;
    display:grid;
    grid-template-columns:minmax(320px,680px) 1fr;
    align-items:center;
    gap:2rem;
    padding-top:calc(var(--nav-h) + 2.5rem);
    padding-bottom:5.5rem}
.hero-copy-premium{
    color:#FFFCF6;
    max-width:680px;
    will-change:transform;
    transition:transform .18s linear}
.hero-title-premium{
    display:flex;
    flex-direction:column;
    gap:.18em;
    margin-top:1rem;
    margin-bottom:1.2rem}
.title-line{
    display:block;
    width:fit-content;
    max-width:12ch;
    color:#fffef8;
    text-shadow:0 10px 32px rgba(0,0,0,.22)}
.hero-copy-premium .hero-muted{
    color:rgba(255,252,246,.78);
    max-width:56ch}
.hero-copy-premium strong{
    color:#F9F2B2}
.btn-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:32px}
.hero-scroll-indicator{
    position:absolute;
    left:50%;
    bottom:1.4rem;
    transform:translateX(-50%);
    z-index:6;display:flex;
    flex-direction:column;
    align-items:center;
    gap:.55rem;color:rgba(255,252,246,.86);
    font-size:.82rem;
    letter-spacing:.06em;
    text-transform:uppercase}
.hero-scroll-line{
    width:1px;
    height:44px;
    background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.12));
    position:relative;
    overflow:hidden}
.hero-scroll-line::after{
    content:"";
    position:absolute;
    left:0;
    top:-20px;
    width:100%;
    height:20px;
    background:#fff;
    animation:heroScrollLine 1.8s infinite}
@keyframes heroScrollLine{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(64px);opacity:0}}
.reveal-up{
    opacity:0;
    transform:translateY(26px);
    animation:heroRevealUp 1s cubic-bezier(.2,.7,.2,1) forwards}
.reveal-line{
    opacity:0;
    transform:translateY(42px);
    filter:blur(8px);
    animation:heroRevealLine 1.05s cubic-bezier(.18,.75,.22,1) forwards}
.delay-1{
    animation-delay:.10s}
.delay-2{
    animation-delay:.22s}
.delay-3{
    animation-delay:.38s}
.delay-4{
    animation-delay:.54s}
.delay-5{
    animation-delay:.72s}
.delay-6{
    animation-delay:.88s}
.delay-7{
    animation-delay:1.04s}
@keyframes heroRevealUp{to{opacity:1;transform:translateY(0)}}
@keyframes heroRevealLine{0%{opacity:0;transform:translateY(42px);filter:blur(8px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}



/*--------FOOTER--------*/


.footer{
    padding:56px 0 64px;
    background:linear-gradient(180deg,#fbfaf2 0%,#f4f1e5 100%);
    border-top:1px solid var(--line)}
.footer-shell{
    display:grid;
    gap:32px}
.footer-top{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:28px;
    /*align-items: start;*/}
.footer-brand-block{
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    opacity: 0.95;
    padding:45px}
.footer-cta-block{
    background:rgba(255,255,255,.62);
    border:1px solid rgba(33,56,39,.08);
    border-radius:28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding:45px}
.footer-logo{
    height:130px}
.footer-cta-block h3{
    margin:0 0 12px;
    color:var(--forest)}
.footer-contact-btn{
    margin-top:18px;
    background:linear-gradient(135deg,var(--green),var(--forest));color:var(--white);
    box-shadow:0 12px 24px rgba(33,56,39,.18);
    text-align: center;}
.footer-note{
    color:var(--muted);
    justify-content: flex-end;
    font-size:.52rem;
    max-width:110ch;
    padding-top: 2px;
    margin-bottom: 1px;
}
.footer-note2{
    color:var(--muted);
    font-size:.92rem;
    max-width:72ch}

.footer-credit{
    max-width: 70ch;
    margin: 0;
    font-size:0.6rem;
    line-height: 1.3;
    opacity: .75;}

.supporters-block{
    display:grid;
    gap:14px}
.supporters-label{
    font-size:.88rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--olive)}
.supporters-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px}
.supporter-logo-card{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    padding:20px;
    position:relative;
    overflow: hidden;
    /*background:rgba(255,255,255,.72);
    border:1px solid rgba(33,56,39,.08);*/
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.supporter-logo-card:hover{
    transform:translateY(-2px);
    border-color:rgba(66,111,77,.20);
    box-shadow:0 20px 40px rgba(33,56,39,.10)}
.supporter-logo-card img{
    max-height:56px;
    width:auto;
    object-fit:contain}

.supporter-logo-card2{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    padding:20px;
    /*background:rgba(255,255,255,.72);
    border:1px solid rgba(33,56,39,.08);*/
    border-radius: 18px;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.supporter-logo-card2:hover{
    transform:translateY(-2px);
    border-color:rgba(66,111,77,.20);
    box-shadow:0 20px 40px rgba(33,56,39,.10)}
.supporter-logo-card2 img{
    max-height:15rem;
    width:auto;
    object-fit:contain}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding-top:8px;
    border-top:1px solid rgba(33,56,39,.08)}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:16px}
.footer-links a{
    color:var(--muted);
    font-weight:600}
.footer-links a:hover{
    color:var(--forest)}



/*-----THEME DARK--------*/


body.theme-dark .brand-title,
body.theme-dark .drop-btn{
    color:var(--cream)}
body.theme-dark .nav-links>a{
    color:var(--forest)}
body.theme-dark .brand-tagline{
    color:rgba(249,242,178,.7)}
body.theme-dark .nav-wrap{
    background:rgba(16,32,25,.58);
    border-bottom-color:rgba(249,242,178,.10)} 
body.theme-dark .nav-wrap.scrolled{
    background:rgba(16,32,25,.80)}
body.theme-dark .section-nav{
    background:var(--section-nav-bg);
    border-bottom-color:var(--border-soft)} 
body.theme-dark .section-link{
    color:var(--text-soft)} 
body.theme-dark .section-link:hover{
    background:rgba(255,255,255,.06);
    color:var(--cream)} 
body.theme-dark .section-link.active{
    background:var(--section-link-active-bg);
    color:var(--section-link-active-text)}
body.theme-dark .floating-section-indicator{
    background:rgba(16,32,25,.52);
    border-color:rgba(249,242,178,.10);
    box-shadow:0 16px 38px rgba(0,0,0,.30)} 
body.theme-dark .floating-dot{
    background:rgba(249,242,178,.28)} 
body.theme-dark .floating-dot.active{
    background:var(--cream);
    box-shadow:0 0 0 6px rgba(241,207,98,.10)}
body.theme-dark .drop-menu{
    background:rgba(18,32,25,.96);
    border-color:rgba(249,242,178,.10)} 
body.theme-dark .drop-menu a{
    color:var(--cream)} 
body.theme-dark .drop-menu a:hover{
    background:rgba(255,255,255,.06)}
body.theme-dark .theme-toggle{
    background:rgba(255,255,255,.05);
    border-color:rgba(249,242,178,.10);
    color:var(--cream)} 
body.theme-dark .theme-toggle-track{
    background:linear-gradient(135deg, rgba(44,82,115,.75), rgba(33,56,39,.92))} 
body.theme-dark .theme-toggle-thumb{
    left:23px;
    background:#F9F2B2}
body.theme-dark .mobile-toggle{
    background:rgba(255,255,255,.05);
    color:var(--cream);
    border-color:rgba(249,242,178,.10)} 
body.theme-dark .footer-bottom{
    border-top-color:rgba(249,242,178,.10)} 
body.theme-dark .footer-brand-block{
    background: transparent;
    border: none;
    box-shadow: none;}
body.theme-dark .footer-links a:hover{
    color:var(--cream)}
body.theme-dark .footer-cta-block h3{
    color:var(--cream)}
/*body.theme-dark .supporter-logo-card2{
    background: rgba(255,255,255,0.4);  /*subtle glass
    border: 1px solid rgba(249,242,178,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);}*/
body.theme-dark .supporter-logo-card{
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    overflow: hidden;}
body.theme-dark .supporter-logo-card::before{
    content: "";
    position: absolute;
    inset: 12px;
    border-radius:  16px;
    background:  radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
    z-index: 0;
    pointer-events: none;}
/*body.theme-dark .supporter-logo-card2 img{
    filter: brightness(0.95) contrast(1.05);}*/
body.theme-dark .supporter-logo-card img{
    position: relative;
    z-index: 1;}
body.theme-dark .supporter-logo-card2{
    background: transparent;
    border: none;
    box-shadow: none;}
body.theme-dark .supporter-logo-card2::before{
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 16px;
    background:  radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
    z-index: 0;
    pointer-events: none;}
/*body.theme-dark .supporter-logo-card2 img{
    filter: brightness(0.95) contrast(1.05);}*/
body.theme-dark .supporter-logo-card2 img{
    position: relative;
    z-index: 1;}




/*-----MEDIA SPECIFICATIONS----*/

@media (max-width:1080px){
    .premium-hero-grid{
        grid-template-columns:1fr;
        align-items:end;padding-bottom:7rem}
    .title-line{
        max-width:100%}
    .hero-light-sweep{
        width:70%;opacity:.42}}
@media (max-width:960px){
  :root{--nav-h:74px}
    .mobile-toggle{
        display:inline-flex}
    .nav{
        min-height:74px}
    .nav-right{
        gap:.6rem}
    .theme-toggle{
        display:none}
    .brand-tagline{
        display:none}
    .nav-links{
        position:absolute;
        top:calc(100% + 10px);
        left:50%;
        right:auto;
        transform:translateX(-50%) translateY(-10px);
        width:max-content;
        min-width:220px;
        max-width:90vw;
        background:rgba(255,252,246,.58);
        border:1px solid rgba(33,56,39,.08);
        border-radius:20px;
        padding:1rem 1.2rem;
        display:none;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:.5rem;
        box-shadow:var(--shadow);
        opacity:0}
    .nav-links.open{
      display:flex;
      opacity:1;
      transform:translateX(-50%) translateY(0)}
    .nav-links>a,
    .drop-btn,
    .nav-cta{
        width:auto;
        text-align:center;
        justify-content:center}
    .drop-menu{
      position:static;
      opacity:1;
      pointer-events:auto;
      transform:none;
      margin-top:8px;
      box-shadow:none;
      background:rgba(44,82,115,.03);
      display:none}
    .drop.open .drop-menu{
      display:block}
    .premium-hero-grid{
      padding-top:calc(var(--nav-h) + 1.2rem)}
    .footer-top{
      grid-template-columns:1fr}
    .supporters-grid{
        grid-template-columns:repeat(2, minmax(0,1fr))}
    .footer-bottom{
        flex-direction:column;
        align-items:flex-start}}
@media (max-width:640px){
    .hero-bg-webp{
        transform:scale(1.14)}
    .hero-scroll-indicator{
        bottom:1rem}
    .supporters-grid{
        grid-template-columns:1fr}
    .footer-brand-block,
    .footer-cta-block{
        padding:22px}}