/* ============================================================
   IAA — LIGHT / LEDGER EDITION
   All-teal brand palette, re-balanced for a
   paper-and-ink, editorial reading experience. Dark teal is kept
   only for a handful of deliberate "islands" (stats, pyramid,
   dashboard preview, membership CTA, footer) instead of being
   the page base.

   This is the ONE global stylesheet for the whole site.
   Every page (Home + all internal pages) loads this same file.
   ============================================================ */
:root{
  --paper:         #F7F2E7;
  --paper-deep:    #EFE6D2;
  --card:          #FFFFFF;

  --ink:           #1C1710;
  --ink-soft:      rgba(28,23,16,.64);
  --ink-faint:     rgba(28,23,16,.42);
  --line:          rgba(28,23,16,.14);
  --line-soft:     rgba(28,23,16,.08);

  --teal-950:      #04211F;
  --teal-900:      #0E3B38;
  --teal-500:      #0E9488;
  --teal-400:      #34C7B5;
  --teal-300:      #8FE0D3;
  --accent:        #0E9488;
  --accent-bright: #34C7B5;

  --muted-on-dark: rgba(247,242,231,.68);
  --faint-on-dark: rgba(247,242,231,.38);
  --line-on-dark:  rgba(247,242,231,.16);

  --grad-glow:     radial-gradient(circle, var(--accent-bright) 0%, var(--accent) 45%, rgba(14,148,136,0) 72%);

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Plus Jakarta Sans', sans-serif;

  --container: 1320px;
  --edge: clamp(20px, 5vw, 88px);
  --header-clear: 118px;

  --ease-premium: cubic-bezier(.16,.84,.32,1);
  --dur-m: .7s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
svg{ display:block; }

::selection{ background:var(--accent); color:var(--paper); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--teal-900); border-radius: 100px; border: 2px solid var(--paper-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--teal-500); }

.container{ max-width:var(--container); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-label); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright);
}
.eyebrow::before{ content:''; width:30px; height:2px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); display:none; }
.section--light .eyebrow{ color:var(--teal-500); }

.editorial{ font-family:var(--font-display); font-style:italic; font-weight:500; }

.scroll-spectrum{
  position:fixed; top:0; left:0; height:4px; width:100%; z-index:9999; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:
    repeating-linear-gradient(90deg, rgba(247,242,231,.9) 0 2px, transparent 2px 26px),
    linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:8px;
  font-family:var(--font-label); font-size:13.5px; font-weight:700; letter-spacing:.01em;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition: transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium), background .3s ease, border-color .3s ease, color .3s ease;
}
.btn svg{ width:16px; height:16px; transition:transform .45s var(--ease-premium); flex-shrink:0; }
.btn:hover svg{ transform:translateX(4px); }
.btn:hover{ transform:translateY(-2px); }

.btn--solar{ background:var(--accent); color:var(--ink); }
.btn--solar:hover{ background:var(--accent-bright); box-shadow:0 14px 30px -14px rgba(14,148,136,.5); }
.btn--ghost, .btn--ghost-on-light{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover, .btn--ghost-on-light:hover{ border-color:var(--accent); background:rgba(14,148,136,.07); color:var(--accent); }
.btn--dark{ background:var(--teal-950); color:var(--paper); border-color:transparent; }
.btn--dark:hover{ background:var(--teal-900); box-shadow:0 14px 30px -14px rgba(4,33,31,.4); }

.section{ position:relative; }
section[id]{ scroll-margin-top:96px; }
.section--forest{ background:var(--paper-deep); color:var(--ink); }
.section--light{ background:var(--paper); color:var(--ink); }
.section--charcoal{ background:var(--teal-950); color:var(--paper); }

.skip-link{ position:absolute; left:16px; top:-60px; background:var(--accent); color:var(--ink); padding:10px 18px; border-radius:6px; font-weight:700; font-size:14px; z-index:10000; transition:top .3s var(--ease-premium); }
.skip-link:focus{ top:16px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:1000; padding:4px 0; background:rgba(247,242,231,.86); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-soft); transition: padding .5s var(--ease-premium), box-shadow .5s var(--ease-premium), border-color .5s var(--ease-premium); }
.site-header.is-scrolled{ padding:14px 0; box-shadow:0 10px 30px -22px rgba(28,23,16,.28); border-color:var(--line); }
.brand{ display:flex; align-items:center; gap:11px;  overflow:hidden; font-family:var(--font-label); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink); }
.brand-logo{ height:70px; width:auto; max-width:190px; object-fit:contain; display:block; flex-shrink:0; }

.main-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.main-nav a{ position:relative; padding:9px 16px; font-family:var(--font-label); font-size:13px; font-weight:600; color:var(--ink-soft); border-radius:100px; transition:color .35s var(--ease-premium), background .35s var(--ease-premium); white-space:nowrap; }
.main-nav a:hover{ color:var(--ink); background:rgba(28,23,16,.05); }
.main-nav a.is-active{ color:var(--paper); background:var(--teal-950); }

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn{ padding:11px 20px; font-size:12.5px; }

.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); border-radius:10px; color:var(--ink); }
.nav-toggle svg{ width:20px; height:20px; }

.project .project-img img{
    height:184px;
    width:100%;
    object-fit:cover;
}

.mobile-menu{ position:fixed; inset:0; z-index:1100; background:var(--teal-950); display:flex; flex-direction:column; padding:28px var(--edge) 40px; transform:translateY(-100%); transition:transform .6s var(--ease-premium); overflow-y:auto; }
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu .brand{ color:var(--paper); }
.mobile-menu-close{ width:44px; height:44px; border-radius:10px; border:1px solid var(--line-on-dark); background:transparent; color:var(--paper); display:flex; align-items:center; justify-content:center; }
.mobile-menu-close svg{ width:20px; height:20px; }
.mobile-nav{ margin-top:44px; display:flex; flex-direction:column; }
.mobile-nav a{ font-family:var(--font-display); font-style:italic; font-size:clamp(22px,7vw,32px); font-weight:600; padding:16px 0; border-bottom:1px solid var(--line-on-dark); color:var(--paper); display:flex; align-items:center; justify-content:space-between; }
.mobile-nav a svg{ width:20px; height:20px; opacity:.5; }
.mobile-menu-foot{ margin-top:auto; padding-top:28px; }
.mobile-menu-foot .btn{ width:100%; justify-content:center; }

@media (max-width:980px){ .main-nav, .header-cta .btn--ghost{ display:none; } .nav-toggle{ display:flex; } }
@media (min-width:981px){ .mobile-menu{ display:none; } }

/* ============================================================
   HERO — split layout: text on paper, image in a framed panel
   ============================================================ */
/*.hero{ position:relative; padding-top:var(--header-clear); padding-bottom:clamp(60px,8vh,90px); background:var(--paper); overflow:hidden; }*/
/*.hero-row{ position:relative; z-index:2; }*/
/*.hero-inner{ max-width:600px; }*/
/*.hero-eyebrow{ margin-bottom:clamp(14px, 2.4vh, 24px); color:var(--accent); }*/
/*.hero-title{ font-size:clamp(34px, 4.6vw, 60px); line-height:1.08; color:var(--ink); font-weight:600; }*/
/*.hero-title .accent{ color:var(--accent); font-style:italic; }*/
/*.hero-title-line{ display:block; overflow:hidden; }*/
/*.hero-title-line span{ display:block; transform:translateY(105%); }*/
/*.hero-tagline{ margin-top:clamp(10px, 2vh, 16px); font-size:clamp(18px,1.8vw,24px); color:var(--accent); opacity:0; transform:translateY(20px); }*/
/*.hero-copy{ margin-top:clamp(14px, 2.6vh, 22px); max-width:480px; font-size:clamp(14.5px,1.4vw,17px); line-height:1.7; color:var(--ink-soft); opacity:0; transform:translateY(20px); }*/
/*.hero-signature{ margin-top:clamp(12px, 2vh, 18px); display:flex; align-items:center; gap:12px; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); opacity:0; transform:translateY(20px); flex-wrap:wrap; }*/
/*.hero-signature i{ width:4px; height:4px; border-radius:50%; background:var(--accent); flex-shrink:0; }*/
/*.hero-ctas{ margin-top:clamp(20px, 3vh, 32px); display:flex; align-items:center; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(20px); }*/
/*.hero-ctas .btn--soon{ background:transparent; color:var(--ink-soft); border-color:var(--line); }*/
/*.hero-ctas .btn--soon:hover{ border-color:var(--accent); color:var(--ink); }*/
/*.hero-ctas .btn--soon .soon-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulseDot 1.8s ease-in-out infinite; }*/
/*.hero-meta{ margin-top:clamp(24px, 4vh, 44px); display:flex; align-items:center; gap:30px; padding-top:clamp(14px, 2.2vh, 24px); border-top:1px solid var(--line); max-width:560px; opacity:0; transform:translateY(20px); flex-wrap:wrap; row-gap:16px; }*/
/*.hero-meta-item{ display:flex; flex-direction:column; gap:4px; }*/
/*.hero-meta-item b{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--teal-900); }*/
/*.hero-meta-item span{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }*/

/*.hero-media-col{ position:relative; }*/
/*.hero-media{ position:relative; width:100%; aspect-ratio:4/5; border-radius:22px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(28,23,16,.35); }*/
/*.hero-bg{ position:absolute; inset:0; }*/
/*.hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; animation: heroKenBurns 28s ease-in-out infinite alternate; }*/
/*@keyframes heroKenBurns{ from{ transform:scale(1.02) translate(0,0); } to{ transform:scale(1.15) translate(-1.2%,-1%); } }*/
/*.hero-grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }*/

/* ---- Hero text (top, centered, no animation) ---- */
.hero--top{ padding-top:var(--header-clear); padding-bottom:clamp(40px,6vw,64px); background:var(--paper); }
.hero-top-inner{ max-width:860px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow{ margin-bottom:18px; color:var(--accent); }
.hero-title{ font-size:clamp(34px,4.8vw,62px); line-height:1.1; color:var(--ink); font-weight:600; }
.hero-title .accent{ color:var(--accent); font-style:italic; }
.hero-tagline{ margin-top:14px; font-size:clamp(18px,1.8vw,24px); color:var(--accent); opacity:1; transform:none; }
.hero-copy{ margin-top:18px; max-width:700px; font-size:clamp(14.5px,1.4vw,17px); line-height:1.75; color:var(--ink-soft); opacity:1; transform:none; }
.hero-signature{ margin-top:18px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); opacity:1; transform:none; }
.hero-signature i{ width:4px; height:4px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.hero-ctas{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; opacity:1; transform:none; }
.hero-ctas .btn--soon{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.hero-ctas .btn--soon:hover{ border-color:var(--accent); color:var(--ink); }
.hero-ctas .btn--soon .soon-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.hero-meta{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); width:100%; max-width:640px; display:flex; justify-content:center; gap:16px 44px; flex-wrap:wrap; opacity:1; transform:none; }
.hero-meta-item{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.hero-meta-item b{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--teal-900); }
.hero-meta-item span{ font-family:var(--font-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

/* ---- Full-width banner slider ---- */
.banner-full{ position:relative; width:100%; overflow:hidden; background:var(--teal-950); aspect-ratio:21/8; min-height:300px; }
.banner-full-slides{ position:absolute; inset:0; }
.banner-full-slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1s var(--ease-premium); }
.banner-full-slide.is-active{ opacity:1; z-index:1; }
.banner-full-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

.banner-full .hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-on-dark); background:rgba(4,33,31,.45); backdrop-filter:blur(6px); color:var(--paper); display:flex; align-items:center; justify-content:center; transition:background .3s ease, border-color .3s ease, color .3s ease; }
.banner-full .hero-arrow svg{ width:18px; height:18px; }
.banner-full .hero-arrow:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.banner-full .hero-arrow--prev{ left:clamp(10px,2vw,28px); }
.banner-full .hero-arrow--next{ right:clamp(10px,2vw,28px); }
.banner-full .hero-dots{ position:absolute; left:50%; bottom:18px; top:auto; transform:translateX(-50%); z-index:5; display:flex; gap:8px; }

@media (max-width:767.98px){
  .banner-full{ aspect-ratio:4/3; min-height:0; }
  .banner-full .hero-arrow{ width:34px; height:34px; }
}
.flow-rail{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; flex-direction:row; flex-wrap:wrap; gap:8px 14px; background:rgba(247,242,231,.92); backdrop-filter:blur(8px); border-radius:12px; padding:12px 14px; }
.flow-rail-item{ display:flex; align-items:center; gap:7px; opacity:0; transform:translateX(14px); }
.flow-rail-item span{ font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.flow-rail-item i{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.flow-rail-item:nth-child(6) i,.flow-rail-item:nth-child(7) i,.flow-rail-item:nth-child(8) i{ background:var(--teal-500); }

.scroll-cue{ margin-top:52px; display:flex; align-items:center; gap:14px; color:var(--ink-faint); }
.scroll-cue span{ font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.scroll-cue-line{ position:relative; width:1px; height:34px; background:var(--line); overflow:hidden; }
.scroll-cue-line::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:linear-gradient(180deg, transparent, var(--accent), transparent); animation:cueDrop 2.2s ease-in-out infinite; }
@keyframes cueDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

@media (max-width:991.98px){ .hero-media{ aspect-ratio:16/10; } .flow-rail{ position:static; margin-top:14px; background:transparent; backdrop-filter:none; padding:0; } }
@media (max-width:420px){ .scroll-cue span{ display:none; } }

.cinematic-img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform, clip-path; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ============================================================
   PAGE HERO — small banner used at the top of every internal page
   (About, Team, Resources, Dashboard, Events, Membership, News)
   Same fonts/colors/eyebrow style as the homepage, just condensed.
   ============================================================ */
.page-hero{ position:relative; padding:var(--header-clear) 0 clamp(50px,7vw,80px); background:var(--paper); text-align:center; overflow:hidden; }
.page-hero-inner{ max-width:720px; margin:0 auto; position:relative; z-index:2; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ margin-top:16px; font-size:clamp(32px,4.4vw,54px); line-height:1.12; color:var(--ink); }
.page-hero h1 .accent{ color:var(--accent); font-style:italic; }
.page-hero p{ margin-top:16px; font-size:clamp(15px,1.3vw,17px); line-height:1.75; color:var(--ink-soft); max-width:600px; margin-left:auto; margin-right:auto; }
.page-hero-glow{ position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:60%; max-width:640px; aspect-ratio:1/1; background:var(--grad-glow); filter:blur(90px); opacity:.16; pointer-events:none; z-index:1; }

/* ============================================================
   ABOUT IAA — MINIMAL BAND
   ============================================================ */
.brief{ padding:clamp(70px,9vw,110px) 0; position:relative; border-bottom:1px solid var(--line); background:#efe6d2; }
.brief-row{ display:flex; align-items:center; gap:clamp(32px,6vw,72px); flex-wrap:wrap; }
.brief-mark{ flex:0 0 auto; width:clamp(84px,9vw,108px); height:clamp(84px,9vw,108px); border-radius:50%; background:var(--card); border:1px solid var(--line); box-shadow:0 20px 40px -26px rgba(28,23,16,.25); display:flex; align-items:center; justify-content:center; position:relative; }
.brief-mark-glow{ position:absolute; inset:10%; border-radius:50%; background:var(--grad-glow); filter:blur(22px); opacity:.3; }
.brief-mark img{ position:relative; z-index:2; max-width:60%; max-height:60%; object-fit:contain; animation: float 5s ease-in-out infinite; }
.brief-mark-fallback{ position:relative; z-index:2; display:none; align-items:center; justify-content:center; }
.brief-mark-fallback svg{ width:44%; height:44%; }
.brief-copy{ flex:1 1 420px; min-width:260px;  }
.brief-copy h2{ margin-top:14px; font-size:clamp(26px,3.2vw,38px); line-height:1.24; color:var(--ink); }
.brief-copy p{ margin-top:14px; font-size:15.5px; line-height:1.75; color:var(--ink-soft); }
.brief-readmore{ margin-top:24px; }

@media (max-width:767.98px){
  .brief{ padding:56px 0; }
  .brief-row{ flex-direction:column; align-items:flex-start; gap:24px; }
  .brief-mark{ width:76px; height:76px; }
}

/* ============================================================
   ALLIANCE AT SCALE — IMPACT (dark island)
   ============================================================ */
.impact{ padding:clamp(80px,10vw,130px) 0; position:relative; overflow:hidden; background:
  radial-gradient(ellipse 60% 50% at 15% 0%, rgba(143,224,211,.14), transparent 60%),
  radial-gradient(ellipse 60% 60% at 100% 100%, rgba(52,199,181,.1), transparent 60%),
  var(--teal-950);
}
.impact-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.08; z-index:0; }
.impact-head{ position:relative; z-index:2; text-align:center; max-width:620px; margin:0 auto clamp(44px,6vw,70px); }
.impact-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); color:var(--paper); }
.impact-head p{ margin-top:14px; font-size:15px; color:var(--muted-on-dark); }

.impact-grid{ position:relative; z-index:2; }
.impact-card{ position:relative; height:100%; padding:34px 26px; border-radius:14px; background:rgba(247,242,231,.045); border:1px solid var(--line-on-dark); text-align:center; overflow:hidden; transition:transform .5s var(--ease-premium), border-color .5s var(--ease-premium), background .5s var(--ease-premium); }
.impact-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease-premium); }
.impact-card:hover{ transform:translateY(-8px); border-color:rgba(14,148,136,.35); background:rgba(247,242,231,.07); }
.impact-card:hover::before{ transform:scaleX(1); }
.impact-icon{ width:52px; height:52px; margin:0 auto 20px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(14,148,136,.14); border:1px solid var(--line-on-dark); }
.impact-icon svg{ width:24px; height:24px; color:var(--accent-bright); }
.impact-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5vw,58px); line-height:1; color:var(--accent-bright); }
.impact-label{ margin-top:12px; font-family:var(--font-label); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--paper); }
.impact-sub{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--muted-on-dark); }

@media (max-width:767.98px){ .impact-card{ padding:28px 20px; } }

/* ============================================================
   WHY IAA — ECOSYSTEM VISUALIZATION
   ============================================================ */
.ecosystem{ padding:clamp(80px,10vw,130px) 0 clamp(60px,8vw,100px); overflow: hidden; }
.ecosystem-head{ max-width:660px; margin:0 auto clamp(44px,6vw,70px); text-align:center; }
.ecosystem-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); line-height:1.18; color:var(--ink); }
.ecosystem-head p{ margin:16px auto 0; max-width:580px; font-size:16px; line-height:1.75; color:var(--ink-soft); }

.ecosystem-wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(40px,6vw,80px); }
.ecosystem-diagram-col{ flex:0 1 540px; display:flex; justify-content:center; }
.ecosystem-diagram{ position:relative; width:100%; max-width:540px; aspect-ratio:1/1; }
.eco-lines{ position:absolute; inset:0; width:100%; height:100%; }
.eco-lines line{ stroke:var(--line); stroke-width:1; transition:stroke .5s var(--ease-premium), stroke-width .5s var(--ease-premium); }
.eco-lines line.is-active{ stroke:var(--accent); stroke-width:1.6; }

.eco-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:23%; height:23%; min-width:92px; min-height:92px; max-width:126px; max-height:126px; border-radius:50%; background:var(--teal-950); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 20px 44px -20px rgba(28,23,16,.3); z-index:3; text-align:center; padding:8px; }
.eco-center b{ font-family:var(--font-display); font-weight:700; font-size:clamp(16px,2vw,19px); color:var(--accent-bright); }
.eco-center span{ font-family:var(--font-label); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-on-dark); margin-top:4px; }

.eco-node{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:7px; z-index:2; transition:transform .5s var(--ease-premium), opacity .5s var(--ease-premium); background:none; border:none; padding:6px; font-family:inherit; cursor:pointer; }
.eco-node-dot{ width:12px; height:12px; border-radius:50%; background:var(--card); border:2px solid var(--teal-500); transition:transform .4s var(--ease-premium), border-color .4s var(--ease-premium), background .4s var(--ease-premium); }
.eco-node-label{ font-family:var(--font-label); font-size:10px; font-weight:700; text-align:center; color:var(--ink); white-space:nowrap; background:var(--paper); padding:3px 9px; border-radius:6px; border:1px solid var(--line); transition: all .3s ease; }
.eco-node:hover .eco-node-dot, .eco-node:focus-visible .eco-node-dot, .eco-node.is-active .eco-node-dot{ transform:scale(1.6); background:var(--accent); border-color:var(--accent); }
.eco-node:hover .eco-node-label, .eco-node:focus-visible .eco-node-label, .eco-node.is-active .eco-node-label{ color:var(--ink); font-weight:700; border-color:rgba(14,148,136,.4); background:#E3F5F1; transform: translateY(2px); }

.ecosystem-side-col{ flex:1 1 420px; max-width:520px; }
.eco-caption{ margin-bottom:30px; min-height:60px; padding:20px 24px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow: 0 16px 34px -22px rgba(28,23,16,.18); }
.eco-caption-role{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-500); }
.eco-caption-text{ margin-top:8px; font-size:15px; line-height:1.6; color:var(--ink); }

.ecosystem-side-list{ display:flex; flex-direction:column; gap: 22px; }
.eco-side-item{ display:flex; align-items:flex-start; gap:16px; padding:16px 18px; border-radius:10px; background:var(--card); border:1px solid var(--line); transition:transform .4s var(--ease-premium), border-color .4s var(--ease-premium); }
.eco-side-item:hover{ transform:translateX(4px); border-color:rgba(14,148,136,.3); }
.eco-side-item b{ font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--accent); flex-shrink:0; width:24px; padding-top:2px; }
.eco-side-item div h4{ font-size:16px; font-weight:700; color:var(--ink); }
.eco-side-item div p{ margin-top:5px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

@media (max-width:991.98px){ .ecosystem-diagram-col{ flex-basis:100%; } .ecosystem-side-col{ flex-basis:100%; max-width:640px; margin:0 auto; } }
@media (max-width:560px){ .eco-node-label{ font-size:8.2px; padding:2px 6px; } .eco-center b{ font-size:14px; } }

/* ============================================================
   NATIONAL ECOSYSTEM / INDIA NETWORK (Pyramid, dark island)
   ============================================================ */
.network{ padding:clamp(80px,10vw,130px) 0; position:relative; overflow:hidden; background:var(--teal-950); }
.network-bg-img { position:absolute; top:0; left:0; width: 50%; height: 100%; object-fit:cover; opacity:0.12; pointer-events:none; z-index:0; mask-image: linear-gradient(90deg, black, transparent); -webkit-mask-image: linear-gradient(90deg, black, transparent); }
.network-head{ max-width:600px; position:relative; z-index:2; }
.network-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); line-height:1.18; color:var(--paper); }
.network-head p{ margin-top:16px; font-size:15.5px; line-height:1.75; color:var(--muted-on-dark); max-width:560px; }

.eco-pyramid{ position:relative; z-index:2; margin-top:64px; display:flex; flex-direction:column; align-items:center; }
.eco-tier{ width:100%; display:flex; justify-content:center; }
.eco-tier-inner{ width:100%; border-radius:10px; padding:22px 30px; border:1px solid var(--line-on-dark); background:rgba(247,242,231,.03); opacity:0; transform:translateY(24px) scale(.96); transition:border-color .4s ease; }
.eco-tier[data-tier="1"]{ max-width:40%; }
.eco-tier[data-tier="2"]{ max-width:58%; }
.eco-tier[data-tier="3"]{ max-width:78%; }
.eco-tier[data-tier="4"]{ max-width:100%; }
.eco-tier[data-tier="1"] .eco-tier-inner{ background:linear-gradient(120deg, rgba(143,224,211,.18), rgba(143,224,211,.02)); border-color:rgba(143,224,211,.45); }
.eco-tier[data-tier="2"] .eco-tier-inner{ background:linear-gradient(120deg, rgba(52,199,181,.14), rgba(52,199,181,.02)); border-color:rgba(52,199,181,.35); }
.eco-tier[data-tier="3"] .eco-tier-inner{ background:linear-gradient(120deg, rgba(14,148,136,.14), rgba(14,148,136,.02)); border-color:rgba(14,148,136,.35); }
.eco-tier[data-tier="4"] .eco-tier-inner{ background:linear-gradient(120deg, rgba(14,59,56,.22), rgba(14,59,56,.04)); border-color:rgba(14,59,56,.45); }
.eco-tier-tag{ font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-bright); }
.eco-tier-items{ margin-top:14px; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:center; }
.eco-tier-item{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--paper); white-space:nowrap; }
.eco-tier-item svg{ width:19px; height:19px; color:var(--teal-300); flex-shrink:0; }
.eco-tier[data-tier="3"] .eco-tier-item svg{ color:var(--teal-400); }
.eco-tier[data-tier="4"] .eco-tier-item svg{ color:var(--teal-400); }
.eco-tier-arrow{ display:flex; justify-content:center; padding:10px 0; color:var(--faint-on-dark); opacity:0; }
.eco-tier-arrow svg{ width:17px; height:17px; }

@media (max-width:760px){
  .network-bg-img{ display:none; }
  .eco-tier[data-tier="1"], .eco-tier[data-tier="2"], .eco-tier[data-tier="3"], .eco-tier[data-tier="4"]{ max-width:100%; }
  .eco-tier-inner{ padding:18px 20px; }
  .eco-tier-items{ justify-content:flex-start; }
}

/* ============================================================
   POWERED BY COLLABORATION — PARTNERS (poster cards)
   ============================================================ */
.partners{ padding:clamp(80px,10vw,130px) 0; }
.partners-head{ text-align:center; max-width:600px; margin:0 auto clamp(44px,6vw,64px); }
.partners-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); color:var(--ink); }
.partners-head p{ margin-top:12px; font-size:15px; color:var(--ink-soft); }

.partners-row{ align-items:stretch; }
.partner-panel{ position:relative; height:100%; min-width:0; padding:0 0 30px; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; border-radius:14px; background:var(--card); border:1px solid var(--line); transition:transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium); }
.partner-panel:hover{ transform:translateY(-6px); box-shadow:0 30px 56px -30px rgba(28,23,16,.22); }
.partner-panel-bg{ position:absolute; top:0; left:0; right:0; height:150px; opacity:.94; }
.partner-panel--nsefi .partner-panel-bg{ background:linear-gradient(160deg,#0B2E2A,#34C7B5); }
.partner-panel--cstep .partner-panel-bg{ background:linear-gradient(160deg,#0A1B1D,#1F3B3E); }
.partner-panel--teri  .partner-panel-bg{ background:linear-gradient(160deg,#04211F,#1C7A6C); }
.partner-panel-overlay{ position:absolute; top:0; left:0; right:0; height:150px; background:linear-gradient(180deg, rgba(3,18,17,0) 0%, rgba(3,18,17,.25) 100%); }
.partner-panel-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; padding:0 30px; }

.partner-logo-badge{ width:80px; height:80px; margin-top:96px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; padding:14px; box-shadow:0 12px 26px -12px rgba(0,0,0,.3); border:3px solid var(--card); }
.partner-logo-badge img{ width:100%; height:100%; object-fit:contain; }

.partner-index{ margin-top:18px; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--accent); }
.partner-wordmark{ margin-top:8px; font-size:clamp(24px,2.4vw,30px); color:var(--ink); }
.partner-role{ margin-top:6px; font-family:var(--font-label); font-size:12.5px; color:var(--ink-soft); font-weight:600; max-width:260px; }
.partner-desc{ margin-top:14px; font-size:13.5px; line-height:1.7; color:var(--ink-soft); max-width:280px; }
.partner-link{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:8px; border:1px solid var(--line); font-family:var(--font-label); font-size:12px; font-weight:700; color:var(--ink); transition:all .35s var(--ease-premium); }
.partner-link:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.partner-link svg{ width:14px; height:14px; }

@media (max-width:860px){ .partner-panel-content{ padding:0 24px; } }

/* ============================================================
   OUR TEAM (light cards)
   ============================================================ */
.team{ padding:clamp(80px,10vw,130px) 0; }
.team-head{ max-width:660px; margin:0 auto; text-align:center; }
.team-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); line-height:1.18; color:var(--ink); }
.team-head p{ margin:16px auto 0; max-width:580px; font-size:16px; line-height:1.75; color:var(--ink-soft); }
.team-grid{ margin-top:clamp(44px,6vw,64px); }

.team-card{ position:relative; height:100%; padding:0; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--line); transition:transform .5s var(--ease-premium), border-color .5s var(--ease-premium), box-shadow .5s var(--ease-premium); }
.team-card:hover{ transform:translateY(-6px); border-color:rgba(14,148,136,.3); box-shadow:0 30px 56px -30px rgba(28,23,16,.22); }
.team-card-top{ position:relative; padding:28px 26px 0; display:flex; align-items:center; gap:16px; }
.team-card-accent{ position:absolute; top:0; left:0; right:0; height:4px; display:none;}
.team-photo-ring--secretariat .team-card-accent{ background:linear-gradient(90deg,var(--teal-900),var(--teal-500)); }
.team-photo-ring--nsefi .team-card-accent{ background:linear-gradient(90deg,#0B2E2A,var(--accent-bright)); }
.team-photo-ring--teri .team-card-accent{ background:linear-gradient(90deg,#04211F,var(--teal-400)); }
.team-photo-ring--cstep .team-card-accent{ background:linear-gradient(90deg,#0A1B1D,var(--teal-300)); }

.team-photo-ring{ width:80px; height:80px; border-radius:50%; padding:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.team-photo-ring--secretariat{ background:linear-gradient(150deg,var(--teal-900),var(--teal-500)); }
.team-photo-ring--nsefi{ background:linear-gradient(150deg,#0B2E2A,var(--accent-bright)); }
.team-photo-ring--teri{ background:linear-gradient(150deg,#04211F,var(--teal-400)); }
.team-photo-ring--cstep{ background:linear-gradient(150deg,#0A1B1D,var(--teal-300)); }
.team-photo{ width:100%; height:100%; border-radius:50%; overflow:hidden; border:3px solid var(--card); }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-premium); }
.team-card:hover .team-photo img{ transform:scale(1.08); }

.team-id{ min-width:0; }
.team-name{ font-family:var(--font-body); font-size:17px; font-weight:700; line-height:1.25; color:var(--ink); }
.team-role{ margin-top:4px; font-family:var(--font-label); font-size:12px; font-weight:700; color:var(--accent); line-height:1.4; }
.team-org{ display:inline-block; margin-top:10px; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px; background:var(--paper-deep); color:var(--ink-soft); }

.team-card-body{ padding:20px 26px 26px; }
.team-bio{ font-size:13.5px; line-height:1.7; color:var(--ink-soft); }
.team-social{ margin-top:18px; display:flex; gap:8px; }
.team-social a{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:all .3s ease; color:var(--ink-soft); }
.team-social a svg{ width:14px; height:14px; }
.team-social a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); background:rgba(14,148,136,.06); }
.team-note{ margin-top:40px; font-size:12.5px; color:var(--ink-faint); max-width:640px; margin-left:auto; margin-right:auto; text-align:center; }

@media (max-width:575.98px){ .team-card-top{ padding:24px 20px 0; } .team-card-body{ padding:18px 20px 22px; } }

/* ============================================================
   KNOWLEDGE HUB
   ============================================================ */
.knowledge{ padding:130px 0 110px; }
.knowledge-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.knowledge-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); max-width:520px; color:var(--ink); }
.knowledge-controls{ display:flex; gap:10px; }
.carousel-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); display:flex; align-items:center; justify-content:center; transition:background .35s var(--ease-premium), border-color .35s var(--ease-premium), transform .35s var(--ease-premium), color .35s var(--ease-premium); }
.carousel-btn svg{ width:16px; height:16px; }
.carousel-btn:hover{ background:var(--teal-950); color:var(--paper); border-color:var(--teal-950); transform:translateY(-2px); }

.knowledge-track{ margin-top:48px; display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-width:none; mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); }
.knowledge-track::-webkit-scrollbar{ display:none; }
.res-card{ scroll-snap-align:start; flex:0 0 auto; width:320px; display:flex; flex-direction:column;transition: transform .6s var(--ease-premium); }
.res-cover{ position:relative; height:200px; border-radius: 20px 20px 0px 0px; overflow:hidden; }
.res-card:hover{ transform:translateY(-6px); }
/*.res-card:hover .res-cover{ transform:translateY(-6px); }*/
.res-cover-inner{ position:absolute; inset:0; }
.res-type{ position:absolute; left:14px; top:14px; z-index:2; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--accent-bright); padding:6px 12px; border-radius:100px; }
.res-body{ padding:18px; display:flex; flex-direction:column; flex:1;border-radius: 0px 0px 20px 20px;border: 1px solid #292d2c66; }
.res-org{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-500); }
.res-title{ margin-top:8px; font-size:19px; font-weight:600; line-height:1.32; color:var(--ink); }
.res-desc{ margin-top:10px; font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.res-view{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-label); font-size:12px; font-weight:700; color:var(--ink); }
.res-view svg{ width:14px; height:14px; transition:transform .4s var(--ease-premium); }
.res-card:hover .res-view svg{ transform:translateX(4px); }
.knowledge-cta{ margin-top:50px; text-align:center; }

/* Full grid layout used on the dedicated Resources page (instead of the horizontal carousel) */
.res-grid .res-card{ width:100%; }

@media (max-width:560px){ .res-card{ width:260px; } .res-grid .res-card{ width:100%; } }

/* ============================================================
   NATIONAL DASHBOARD PREVIEW (dark island — app-preview mockup)
   ============================================================ */
.dashboard{ padding:130px 0; position:relative; overflow:hidden; background:var(--teal-950); }
.dashboard-head{ position:relative; z-index:2; max-width:640px; }
.dashboard-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:7px 14px; border-radius:100px; background:rgba(14,148,136,.14); border:1px solid rgba(14,148,136,.4); font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-bright); }
.dashboard-badge i{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.4); } }
.dashboard-head h2{ margin-top:18px; font-size:clamp(28px,3.4vw,40px); line-height:1.18; color:var(--paper); }
.dashboard-head p{ margin-top:16px; font-size:16px; line-height:1.75; color:var(--muted-on-dark); }

.dashboard-frame{ position:relative; z-index:2; margin-top:56px; border-radius:14px; overflow:hidden; background:rgba(247,242,231,.035); border:1px solid var(--line-on-dark); backdrop-filter:blur(20px); box-shadow:0 50px 110px -50px rgba(0,0,0,.6); }
.dash-topbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 24px; border-bottom:1px solid var(--line-on-dark); flex-wrap:wrap; }
.dash-chrome{ display:flex; gap:7px; }
.dash-chrome span{ width:9px; height:9px; border-radius:50%; background:rgba(247,242,231,.18); }
.dash-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.dash-filter{ font-family:var(--font-label); font-size:11px; font-weight:700; padding:7px 13px; border-radius:100px; border:1px solid var(--line-on-dark); color:#000; background:transparent; transition:all .3s var(--ease-premium); }
.dash-filter.is-active, .dash-filter:hover{ background:var(--paper); color:var(--teal-950); border-color:var(--paper); }

.dash-sidebar{ padding:20px 16px; border-right:1px solid var(--line-on-dark); }
.dash-sidebar-label{ font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint-on-dark); padding:0 10px 10px; }
.dash-state{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; padding:10px 10px; border-radius:8px; font-size:13px; color:var(--muted-on-dark); background:transparent; border:none; transition: all .3s ease; }
.dash-state.is-active{ background:rgba(14,148,136,.12); color:var(--accent-bright); }
.dash-state:hover{ background:rgba(247,242,231,.05); }
.dash-state em{ font-style:normal; font-size:11px; opacity:.6; }

.dash-main{ padding:24px; }
.dash-cards{ margin-bottom:20px; }
.dash-card{ padding:16px; border-radius:8px; background:rgba(247,242,231,.03); border:1px solid var(--line-on-dark); transition: transform .3s ease; }
.dash-card:hover{ transform: translateY(-3px); background: rgba(247,242,231,.05); }
.dash-card-label{ font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint-on-dark); }
.dash-card-value{ margin-top:10px; font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--paper); }
.dash-card-value small{ font-family:var(--font-label); font-size:12px; font-weight:700; color:var(--teal-400); margin-left:6px; }
.dash-gauge{ margin-top:12px; height:5px; border-radius:100px; background:rgba(247,242,231,.08); overflow:hidden; }
.dash-gauge i{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--teal-400),var(--accent)); width:0%; }

.dash-map-row{ border-radius:8px; border:1px solid var(--line-on-dark); background:rgba(247,242,231,.02); padding:18px; }
.dash-map{ position:relative; height:220px; }
.dash-map svg{ width:100%; height:100%; }
.dash-legend{ display:flex; flex-direction:column; gap:12px; justify-content:center; height:100%; }
.dash-legend-item{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted-on-dark); }
.dash-legend-item i{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

.dashboard-cta{ position:relative; z-index:2; margin-top:40px; text-align:center; }

@media (max-width:991.98px){ .dash-sidebar{ border-right:none; border-bottom:1px solid var(--line-on-dark); display:flex; gap:8px; overflow-x:auto; } .dash-sidebar-label{ display:none; } }

/* ============================================================
   EVENTS & ENGAGEMENT
   ============================================================ */
.events{ padding:clamp(80px,10vw,130px) 0 clamp(60px,8vw,100px); position:relative; }
.events-bg-img { position:absolute; top:20%; right:0; width: 50%; height: 60%; object-fit:cover; opacity:0.08; mask-image: linear-gradient(270deg, black, transparent); -webkit-mask-image: linear-gradient(270deg, black, transparent); pointer-events:none; }
.events-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; position:relative; z-index:2; }
.events-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); color:var(--ink); }
.events-controls{ display:flex; gap:10px; }

.events-viewport{ position:relative; margin-top:48px; z-index:2; }
.events-track{ display:flex; gap:20px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x proximity; padding:4px 4px 18px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); }
.event-card{ scroll-snap-align:start; flex:0 0 auto; width:min(330px,80vw); border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--card); display:flex; flex-direction:column; transition:transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium); }
.event-card:hover{ transform:translateY(-6px); box-shadow:0 26px 54px -30px rgba(28,23,16,.2); }
.event-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.event-date{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.event-date b{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--teal-900); }
.event-date span{ font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.event-type{ font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:100px; background:rgba(14,148,136,.1); color:var(--teal-500); }
.event-title{ margin-top:20px; font-size:19px; font-weight:600; line-height:1.35; color:var(--ink); }
.event-loc{ margin-top:10px; display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); }
.event-loc svg{ width:14px; height:14px; flex-shrink:0; }
.event-desc{ margin-top:12px; font-size:13.5px; line-height:1.65; color:var(--ink-soft); }
.event-cta{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-label); font-size:12px; font-weight:700; color:var(--ink); }
.event-cta svg{ width:14px; height:14px; transition:transform .4s var(--ease-premium); }
.event-card:hover .event-cta svg{ transform:translateX(4px); }
.events-hint{ margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--ink-faint); position:relative; z-index:2; }
.events-hint svg{ width:14px; height:14px; }

/* Full grid layout used on the dedicated Events page (instead of the horizontal carousel) */
.events-grid .event-card{ width:100%; }

@media (max-width:560px){ .events-hint{ display:none; } }

/* ============================================================
   MEMBERSHIP CTA (dark island)
   ============================================================ */
.membership{ position:relative; overflow:hidden; padding:150px 0; text-align:center; }
.membership-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.membership-overlay { position:absolute; inset:0; background: rgba(4,33,31,.82); z-index:1; }
.membership-content{ position:relative; z-index:3; max-width:640px; margin:0 auto; }
.membership-tag{ justify-content:center; color:var(--accent-bright); }
.membership h2{ margin-top:20px; font-size:clamp(32px,4.6vw,52px); line-height:1.14; color:var(--paper); }
.membership p{ margin-top:20px; font-size:16.5px; line-height:1.75; color:rgba(247,242,231,.82); max-width:540px; margin-left:auto; margin-right:auto; }
.membership-cta{ margin-top:36px; }
.membership-cta .btn{ padding:17px 32px; font-size:14px; }

/* Extra content block used on the dedicated Membership page (how to join) */
.membership-info{ padding:clamp(70px,9vw,110px) 0; }
.membership-info-grid{ align-items:stretch; }
.membership-info-card{ height:100%; padding:30px 28px; border-radius:14px; background:var(--card); border:1px solid var(--line); }
.membership-info-card h3{ font-size:20px; color:var(--ink); }
.membership-info-card p{ margin-top:10px; font-size:14px; line-height:1.7; color:var(--ink-soft); }
.membership-info-card a{ color:var(--accent); font-weight:700; }

/* ============================================================
   NEWS
   ============================================================ */
.news{ padding:130px 0; }
.news-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.news-head h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); color:var(--ink); }

.news-grid{ margin-top:48px; }
.news-feature{ position:relative; border-radius:12px; overflow:hidden; min-height:400px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; height:100%; }
.news-feature-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.news-feature-overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,33,31,.92), rgba(4,33,31,.1) 60%); z-index:1; }
.news-feature-content{ position:relative; z-index:2; }
.news-tag{ font-family:var(--font-label); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-bright); }
.news-feature-title{ margin-top:14px; font-size:clamp(22px,2.4vw,28px); font-weight:600; line-height:1.3; color:var(--paper); max-width:440px; }
.news-feature-desc{ margin-top:14px; font-size:14px; line-height:1.7; color:var(--muted-on-dark); max-width:420px; }
.news-meta{ margin-top:18px; font-size:12px; color:var(--faint-on-dark); }

.news-list{ display:flex; flex-direction:column; gap: 18px; }
.news-row{ padding:18px; border:1px solid var(--line); background: var(--card); border-radius: 10px; transition: transform .3s var(--ease-premium); }
.news-row:hover { transform: translateY(-4px); }
.news-row-img { width: 76px; height: 76px; border-radius: 8px; overflow: hidden; }
.news-row-img img { width: 100%; height: 100%; object-fit: cover; }
.news-row-content { display: flex; flex-direction: column; gap: 5px; }
.news-row-tag{ font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-500); }
.news-row-title{ font-size:15.5px; font-weight:600; line-height:1.3; color:var(--ink); }
.news-row-date{ font-size:11.5px; color:var(--ink-soft); }

.news-cta{ margin-top:46px; text-align:center; }

@media (max-width:991.98px){ .news-feature{ min-height:300px; } }

/* ============================================================
   FOOTER (dark island)
   ============================================================ */
.site-footer{ position:relative; overflow:hidden; background:var(--teal-950); color:var(--paper); padding:90px 0 0; }
.footer-top{ padding-bottom:60px; border-bottom:1px solid var(--line-on-dark); }
.footer-brand{ display:flex; align-items:center; height:40px; overflow:hidden; }
.footer-logo{ height:40px; max-height:40px; width:auto; max-width:200px; object-fit:contain; display:block; }
.footer-org{ margin-top:18px; font-size:14px; line-height:1.7; color:var(--muted-on-dark); max-width:280px; }
.footer-org strong{ color:var(--paper); display:block; margin-bottom:6px; }

.footer-col h5{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint-on-dark); margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color:var(--muted-on-dark); transition: color .3s ease; }
.footer-col a:hover{ color:var(--accent-bright); }

.footer-contact p{ font-size:14px; line-height:1.7; color:var(--muted-on-dark); }
.footer-contact a{ color:var(--paper); font-weight:600; }
.footer-newsletter{ margin-top:20px; }
.footer-newsletter p{ font-size:13px; color:var(--muted-on-dark); margin-bottom:12px; }
.newsletter-form{ display:flex; gap:8px; }
.newsletter-form input{ flex:1; min-width:0; background:rgba(247,242,231,.06); border:1px solid var(--line-on-dark); border-radius:8px; padding:12px 16px; color:var(--paper); font-size:13.5px; font-family:inherit; }
.newsletter-form input::placeholder{ color:var(--faint-on-dark); }
.newsletter-form input:focus{ outline: none; border-color: var(--accent-bright); background: rgba(247,242,231,.09); }
.newsletter-form button{ width:44px; height:44px; border-radius:8px; flex-shrink:0; background:var(--accent); border:none; display:flex; align-items:center; justify-content:center; transition: transform .3s ease, background .3s ease; }
.newsletter-form button:hover{ transform: scale(1.05); background:var(--accent-bright); }
.newsletter-form button svg{ width:16px; height:16px; color:var(--ink); }

/*.footer-giant{ position:relative; padding:44px 0 18px; text-align:center; overflow:hidden; }*/
/*.footer-giant span{ font-family:var(--font-display); font-weight:700; font-style:italic; font-size:clamp(80px,20vw,260px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(247,242,231,.09); }*/

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:24px 0 30px; border-top:1px solid var(--line-on-dark); }
.footer-bottom-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-bottom-links a{ font-size:12px; color:var(--muted-on-dark); }
.footer-bottom-links a:hover{ color:var(--accent-bright); }
.footer-copy{ font-size:12px; color:var(--faint-on-dark); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-on-dark); display:flex; align-items:center; justify-content:center; transition: all .3s ease; }
.footer-social a svg{ width:14px; height:14px; }
.footer-social a:hover{ border-color:var(--accent-bright); color:var(--accent-bright); transform: translateY(-2px); }

@media (max-width:560px){ .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   MISC
   ============================================================ */
.cursor-ring{ position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid rgba(14,148,136,.75); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .3s var(--ease-premium), height .3s var(--ease-premium), background .3s var(--ease-premium), border-color .3s var(--ease-premium), opacity .3s ease; mix-blend-mode:multiply; opacity:0; }
.cursor-ring.is-active{ opacity:1; }
.cursor-ring.is-hover{ width:52px; height:52px; background:rgba(14,148,136,.12); }
@media (hover:none), (pointer:coarse){ .cursor-ring{ display:none; } }

html.no-gsap .hero-title-line span{ transform:translateY(0); }
html.no-gsap .hero-tagline, html.no-gsap .hero-copy, html.no-gsap .hero-signature, html.no-gsap .hero-ctas, html.no-gsap .hero-meta{ opacity:1; transform:none; }
html.no-gsap .flow-rail-item{ opacity:1; transform:none; }
html.no-gsap .eco-tier-inner{ opacity:1; transform:none; }
html.no-gsap .eco-tier-arrow{ opacity:1; }
html.no-gsap .dash-gauge i{ width:60%; }
html.no-gsap .eco-node{ opacity:1; }

#dashPoints circle { animation: mapPulse 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
#dashPoints circle:nth-child(2) { animation-delay: 0.3s; }
#dashPoints circle:nth-child(3) { animation-delay: 0.6s; }
#dashPoints circle:nth-child(4) { animation-delay: 0.9s; }
#dashPoints circle:nth-child(5) { animation-delay: 1.2s; }

@keyframes mapPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.6); } }

/* Global small-device safety net */
@media (max-width:380px){
  :root{ --edge:18px; }
  .btn{ padding:13px 20px; font-size:13px; }
}

/* ============================================================
   NEW CONTENT COMPONENTS
   Added when real content was supplied. Every rule below reuses
   the same colors, fonts, spacing and card patterns already
   defined above — nothing here introduces a new visual style.
   ============================================================ */

/* ---- reusable icon + label chip (used by: What is Agrivoltaics,
   Resource Categories, Membership Benefits/Categories, Dashboard
   Features) ---- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:28px 22px; justify-content:center; margin-top:36px; }
.chip-item{ display:flex; flex-direction:column; align-items:center; gap:12px; width:140px; text-align:center; }
.chip-icon{ width:56px; height:56px; border-radius:50%; background:rgba(14,148,136,.1); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; transition:transform .3s var(--ease-premium), background .3s ease; }
.chip-item:hover .chip-icon{ transform:translateY(-4px); background:rgba(14,148,136,.16); }
.chip-icon svg{ width:24px; height:24px; }
.chip-label{ font-family:var(--font-label); font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.4; }
.section--charcoal .chip-icon{ background:rgba(247,242,231,.08); border-color:var(--line-on-dark); color:var(--accent-bright); }
.section--charcoal .chip-label{ color:var(--paper); }

/* ---- Latest Announcements (Home) ---- */
.announcements{ padding:34px 0; border-bottom:1px solid var(--line); background:var(--paper-deep); }
.announcement-track{ display:flex; flex-wrap:wrap; gap:14px; }
.announcement-item{ display:flex; align-items:center; gap:12px; flex:1 1 260px; padding:14px 18px; border-radius:10px; background:var(--card); border:1px solid var(--line); }
.announcement-icon{ width:34px; height:34px; border-radius:50%; background:rgba(14,148,136,.12); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.announcement-icon svg{ width:16px; height:16px; }
.announcement-text b{ display:block; font-family:var(--font-label); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-500); }
.announcement-text span{ display:block; margin-top:3px; font-size:13px; font-weight:600; color:var(--ink); line-height:1.4; }

/* ---- Focus Areas (Home) ---- */
.focus-block{ margin-top:20px; }
.focus-block + .focus-block{ margin-top:56px; }
.focus-group-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.focus-group-head b{ font-family:var(--font-display); font-size:22px; color:var(--accent); }
.focus-group-head span{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.focus-grid{ margin-top:22px; }
.focus-card{ height:100%; padding:26px 24px; border-radius:14px; background:var(--card); border:1px solid var(--line); transition:transform .4s var(--ease-premium), border-color .4s var(--ease-premium), box-shadow .4s var(--ease-premium); }
.focus-card:hover{ transform:translateY(-6px); border-color:rgba(14,148,136,.3); box-shadow:0 26px 50px -30px rgba(28,23,16,.2); }
.focus-card-icon{ width:44px; height:44px; border-radius:10px; background:rgba(14,148,136,.12); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.focus-card-icon svg{ width:22px; height:22px; }
.focus-card h4{ margin-top:16px; font-size:16.5px; font-weight:700; color:var(--ink); }
.focus-card p{ margin-top:8px; font-size:13.5px; line-height:1.65; color:var(--ink-soft); }

/* ---- Our Journey timeline (About) ---- */
.timeline{ margin-top:48px; display:flex; flex-direction:column; gap:0; }
.timeline-item{ position:relative; padding:0 0 40px 44px; border-left:2px solid var(--line-on-dark); }
.timeline-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.timeline-marker{ position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--accent-bright); border:3px solid var(--teal-950); }
.timeline-year{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--accent-bright); }
.timeline-title{ margin-top:4px; font-family:var(--font-label); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--paper); }
.timeline-body{ margin-top:8px; font-size:14px; line-height:1.7; color:var(--muted-on-dark); max-width:560px; }

/* ---- Team avatar initials (real named people, no stock photos) ---- */
.team-avatar-initials{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--paper); letter-spacing:.02em; }

/* ---- Tabs (News / Events) — reuses .dash-filter pill styling for the buttons ---- */
.tab-panel[hidden]{ display:none; }

/* ---- Resource / item filters — reuses .dash-filter pill styling ---- */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

/* ---- Event Gallery ---- */
.gallery-grid .gallery-item{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; }
.gallery-grid .gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-premium); }
.gallery-grid .gallery-item:hover img{ transform:scale(1.06); }

/* ---- Member directory (Membership) ---- */
.member-logo-grid{ display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; }
.member-logo-card{ display:flex; align-items:center; justify-content:center; width:150px; height:90px; border-radius:10px; background:var(--card); border:1px solid var(--line); padding:16px; }
.member-logo-card img{ max-width:100%; max-height:100%; object-fit:contain; }
.member-logo-more{ display:flex; align-items:center; justify-content:center; width:150px; height:90px; border-radius:10px; border:1px dashed var(--line); font-family:var(--font-label); font-size:11.5px; font-weight:700; color:var(--ink-faint); text-align:center; padding:10px; }

/* ---- Contact form ---- */
.contact-card{ height:100%; padding:32px 30px; border-radius:14px; background:var(--card); border:1px solid var(--line); }
.contact-card h3{ margin-top:12px; font-size:20px; color:var(--ink); }
.contact-card p{ margin-top:8px; font-size:14px; line-height:1.7; color:var(--ink-soft); }
.contact-card a{ color:var(--accent); font-weight:700; }
.form-label{ font-family:var(--font-label); font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; display:block; }
.form-control{ width:100%; border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--paper); transition:border-color .3s ease, background .3s ease; }
.form-control:focus{ outline:none; border-color:var(--accent); background:var(--card); box-shadow:0 0 0 3px rgba(14,148,136,.12); }
.map-embed{ border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:100%; min-height:280px; display:block; border:0; }

/* ---- small "sample content" note — reuses .team-note typography ---- */
.content-note{ margin-top:28px; font-size:12.5px; color:var(--ink-faint); font-style:italic; }
.section--charcoal .content-note{ color:var(--faint-on-dark); }
