/* =================================================================
   CONSERVATION ALLIANCE — Homepage
   Design system & styles
   "Conservation for Human Development"
   ================================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand palette — sampled from the four flagship buttons */
  --teal:      #137a6e;   /* Biodiversity Data Management      */
  --teal-d:    #0d5a51;
  --green:     #2d6a3c;   /* Biodiversity Net Gain (Offset)    */
  --green-d:   #1e4a29;
  --ochre:     #9c5a14;   /* Community Development Initiative  */
  --ochre-d:   #7a440c;
  --navy:      #232e7a;   /* National Monitoring Support       */
  --navy-d:    #18205a;

  /* Neutrals & supporting */
  --ink:       #11271f;   /* deep forest text */
  --ink-soft:  #3f5249;
  --cream:     #f6f8f1;   /* page background  */
  --cream-2:   #eef2e6;
  --paper:     #ffffff;
  --gold:      #e0a82e;   /* warm accent / highlight */
  --line:      rgba(17,39,31,.10);

  /* Typography */
  --serif: "Poppins", "Playfair Display", Georgia, serif;
  --sans:  "Plus Jakarta Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --container: 1240px;
  --radius: 18px;
  --shadow-sm: 0 6px 22px rgba(17,39,31,.08);
  --shadow:    0 24px 60px -22px rgba(17,39,31,.32);
  --shadow-lg: 0 40px 90px -30px rgba(17,39,31,.45);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.flat-icon{width:1.15em;height:1.15em;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--ink)}

/* scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:20px;border:3px solid var(--cream-2)}

/* ---------- 3. LAYOUT HELPERS ---------- */
.container{width:min(100% - 3rem,var(--container));margin-inline:auto}
.section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--gold)}
.eyebrow.center::after{content:"";width:30px;height:2px;background:var(--gold)}
.eyebrow.center{justify-content:center}
.h-display{
  font-family:var(--serif);font-weight:600;line-height:1.04;
  font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.015em;
}
.lead{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--ink-soft);max-width:62ch}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- 4. BUTTONS ---------- */
.btn{
  --bg:var(--teal);--fg:#fff;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.95rem 1.7rem;border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--bg) 70%,transparent);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{transform:translateY(0)}
.btn .ico{transition:transform .4s var(--ease)}
.btn:hover .ico{transform:translate(4px)}
.btn--ghost{--bg:transparent;--fg:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:var(--ink)}
.btn--ink{--bg:var(--ink)}
.btn--gold{--bg:var(--gold);--fg:var(--ink)}
.btn--gold::before{background:var(--ink)}
.btn--gold:hover{color:#fff}
.btn--lg{padding:1.1rem 2.1rem;font-size:1rem}

/* color variants for program ctas */
.btn[data-c="teal"]{--bg:var(--teal)}
.btn[data-c="green"]{--bg:var(--green)}
.btn[data-c="ochre"]{--bg:var(--ochre)}
.btn[data-c="navy"]{--bg:var(--navy)}

/* =================================================================
   5. TOP BAR + NAV
   ================================================================= */
.topbar{
  background:var(--ink);color:#cfe0d6;
  font-size:.82rem;letter-spacing:.01em;
  transition:margin-top .4s var(--ease);
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:42px;flex-wrap:wrap}
.topbar a{display:inline-flex;align-items:center;gap:.45rem;transition:color .3s}
.topbar a:hover{color:var(--gold)}
.topbar-info{display:flex;gap:1.5rem;flex-wrap:wrap}
.topbar-location{display:inline-flex;align-items:center;gap:.45rem;opacity:.7}
.topbar-soc{display:flex;gap:.4rem}
.topbar-soc a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);justify-content:center}
.topbar-soc a:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}

.nav{
  position:sticky;top:0;z-index:1000;
  background:transparent;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s;
}
.nav.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 40px -18px rgba(17,39,31,.4);
}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px}

.brand{display:flex;align-items:center;gap:.7rem;z-index:2}
.brand img{height:56px;width:auto;border-radius:12px;box-shadow:0 3px 12px -4px rgba(0,0,0,.35)}
.brand .brand-txt{line-height:1.05}
.brand .brand-txt b{display:block;font-family:var(--serif);font-size:1.05rem;color:#fff;transition:color .4s}
.brand .brand-txt span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75);transition:color .4s}
.nav.scrolled .brand .brand-txt b{color:var(--ink)}
.nav.scrolled .brand .brand-txt span{color:var(--teal)}

.menu{display:flex;align-items:center;gap:.35rem}
.menu > li{position:relative}
.menu > li > a{
  display:flex;align-items:center;gap:.4rem;
  padding:.7rem .95rem;border-radius:10px;
  font-weight:600;font-size:.94rem;color:rgba(255,255,255,.92);
  transition:color .3s,background .3s;
}
.menu > li > a .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.nav.scrolled .menu > li > a{color:var(--ink)}
.menu > li:hover > a{color:var(--teal)}
.nav.scrolled .menu > li:hover > a{background:var(--cream-2)}
.menu > li:hover > a .caret{transform:rotate(225deg) translateY(0)}

/* dropdown */
.dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(12px);
  min-width:264px;background:#fff;border-radius:16px;padding:.7rem;
  box-shadow:var(--shadow);border:1px solid var(--line);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.menu > li:hover .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown a{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:10px;
  font-size:.9rem;font-weight:500;color:var(--ink-soft);
  transition:background .25s,color .25s,padding .25s;
}
.dropdown a .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;transition:transform .25s}
.dropdown a:hover{background:var(--cream);color:var(--ink);padding-left:1.1rem}
.dropdown a:hover .dot{transform:scale(1.6)}
.dropdown--wide{min-width:300px}

/* ===== MODERN MEGA MENU ===== */
.has-mega{position:static}
.has-mega > a{position:relative}
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(16px);
  background:rgba(255,255,255,.97);backdrop-filter:blur(22px) saturate(150%);
  border-radius:22px;border:1px solid rgba(255,255,255,.7);
  box-shadow:0 50px 90px -34px rgba(11,33,25,.55),0 6px 20px -10px rgba(11,33,25,.2);
  display:grid;grid-template-columns:248px 1fr;overflow:hidden;z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),transform .45s var(--ease-out),visibility .4s;
}
.mega::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--teal),var(--green),var(--ochre),var(--navy));z-index:3}
.has-mega > a::before{content:"";position:absolute;left:0;right:0;top:100%;height:26px}
.has-mega:hover .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* click / keyboard reveal — top-level items disclose their menu, they don't navigate */
.menu > li.open .dropdown,
.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu > li.open > a{color:var(--teal)}
.menu > li.open > a .caret{transform:rotate(225deg) translateY(0)}
.nav.scrolled .menu > li.open > a{background:var(--cream-2)}
.mega--about{width:min(880px,95vw)}
.mega--projects{width:min(1140px,96vw)}

/* feature promo panel */
.mega-feature{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;min-height:340px;isolation:isolate}
.mega-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.mega-feature:hover img{transform:scale(1.08)}
.mega-feature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,33,25,.15),rgba(11,33,25,.9))}
.mega-feature .mf-tag{position:absolute;top:1.2rem;left:1.2rem;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:.34rem .7rem;border-radius:100px}
.mega-feature h4{font-family:var(--serif);font-size:1.35rem;line-height:1.1;margin-bottom:.5rem}
.mega-feature p{font-size:.84rem;color:rgba(255,255,255,.82);margin-bottom:1rem;line-height:1.45}
.mega-feature .mf-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.86rem;color:var(--gold)}
.mega-feature .mf-link i{transition:transform .35s}
.mega-feature:hover .mf-link i{transform:translateX(5px)}

/* link columns */
.mega-body{padding:1.6rem 1.7rem 1.7rem;display:grid;gap:1.5rem 1.8rem;align-content:start}
.mega--projects .mega-body{grid-template-columns:repeat(3,1fr)}
.mega-col{min-width:0}
.mega-col > h5{
  display:flex;align-items:center;gap:.55rem;font-family:var(--serif);font-weight:600;font-size:.82rem;
  letter-spacing:.02em;color:var(--ink);text-transform:uppercase;
  padding:0 .4rem .55rem;margin-bottom:.45rem;border-bottom:1px solid var(--line);
}
.mega-col > h5 a{color:inherit}
.mega-col > h5 a:hover{color:var(--c,var(--teal))}
.mega-col > h5::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--c,var(--teal));flex:none}
.mega-list{display:grid;gap:.12rem}
.mega-list a{
  position:relative;display:flex;align-items:center;gap:.7rem;padding:.5rem .55rem;border-radius:11px;
  font-size:.86rem;font-weight:600;color:var(--ink-soft);line-height:1.2;
  transition:background .25s var(--ease),color .25s,transform .25s var(--ease);
}
.mega-list a .mi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.95rem;
  background:color-mix(in srgb,var(--c,var(--teal)) 12%,transparent);color:var(--c,var(--teal));transition:.3s var(--ease)}
.mega-list a .dot{width:6px;height:6px;border-radius:50%;background:var(--c,var(--gold));flex:none;opacity:.55;transition:.25s;margin-left:.35rem}
.mega-list a::after{content:"›";margin-left:auto;font-size:1rem;color:var(--c,var(--teal));opacity:0;transform:translateX(-6px);transition:.3s var(--ease)}
.mega-list a:hover{background:color-mix(in srgb,var(--c,var(--teal)) 8%,transparent);color:var(--ink);transform:translateX(3px)}
.mega-list a:hover .mi{background:var(--c,var(--teal));color:#fff;transform:rotate(-6deg)}
.mega-list a:hover .dot{opacity:1;transform:scale(1.5)}
.mega-list a:hover::after{opacity:1;transform:none}
.mega-list.cols2{grid-template-columns:1fr 1fr;gap:.12rem .6rem}
.mega-list.scroll{max-height:268px;overflow-y:auto;padding-right:.25rem}
.mega-list.scroll::-webkit-scrollbar{width:6px}
.mega-list.scroll::-webkit-scrollbar-track{background:transparent}
.mega-list.scroll::-webkit-scrollbar-thumb{background:var(--line);border:0;border-radius:10px}

/* ----- mobile accordion ----- */
.mobile-nav .m-top{font-family:var(--serif);font-size:1.4rem}
.m-group{border-bottom:1px solid rgba(255,255,255,.1)}
.m-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 0;font-family:var(--serif);font-size:1.4rem;color:#fff;text-align:left}
.m-caret{width:11px;height:11px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .35s var(--ease);flex:none;margin-right:.3rem}
.m-group.open .m-caret{transform:rotate(225deg)}
.m-sub{display:grid;max-height:0;overflow:hidden;transition:max-height .5s var(--ease);padding-left:.2rem}
.m-group.open .m-sub{max-height:1400px}
.m-sub a{font-family:var(--sans)!important;font-size:.98rem!important;font-weight:500;color:#bcd3c6;
  padding:.62rem 0!important;border-bottom:0!important}
.m-sub a:hover{color:#fff;padding-left:.4rem}
.m-sub .m-label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);padding:1rem 0 .3rem;opacity:.85}

.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center;background:rgba(255,255,255,.12)}
.nav-burger span{width:21px;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
.nav.scrolled .nav-burger{background:var(--cream-2)}
.nav.scrolled .nav-burger span{background:var(--ink)}

/* =================================================================
   6. HERO
   ================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;color:#fff;margin-top:-84px;padding-top:84px}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-slide.active{opacity:1}
.hero-slide::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(11,33,25,.95) 0%,rgba(11,33,25,.78) 38%,rgba(11,33,25,.34) 66%,rgba(11,33,25,.12) 100%),
    linear-gradient(0deg,rgba(9,24,18,.88),rgba(9,24,18,0) 48%);
}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 8s linear}
.hero-slide.active img{transform:scale(1)}

.hero-inner{position:relative;z-index:3;width:min(100% - 3rem,var(--container));margin-inline:auto;padding:5vh 0}
.hero-badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:100px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-bottom:1.6rem;
}
.hero-badge .pulse{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,168,46,.7)}70%{box-shadow:0 0 0 12px rgba(224,168,46,0)}100%{box-shadow:0 0 0 0 rgba(224,168,46,0)}}

.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.82rem,4.62vw,3.78rem);line-height:1.02;letter-spacing:-.02em;max-width:16ch}
.hero h1 .accent{color:var(--gold);font-style:italic;position:relative;display:inline-block}
.hero p{margin-top:1.5rem;font-size:clamp(.74rem,1.26vw,.91rem);max-width:54ch;color:rgba(255,255,255,.88)}
.hero-actions{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap}

/* hero reveal animation hooks */
.hero [data-reveal]{opacity:0;transform:translateY(34px);filter:blur(6px)}
.hero.in [data-reveal]{opacity:1;transform:none;filter:none;transition:all 1s var(--ease-out) var(--d,0s)}
/* re-reveal copy each time the slide content swaps */
.hero-inner.swap [data-reveal]{animation:heroSwap .85s var(--ease-out) both;animation-delay:var(--d,0s)}
@keyframes heroSwap{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* hero side controls */
.hero-meta{position:absolute;bottom:0;left:0;right:0;z-index:5}
.hero-meta .container{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:clamp(3rem,4.5vw,6rem);gap:2rem;flex-wrap:wrap}
.hero-dots{display:flex;gap:.6rem;align-items:center}
.hero-dots button{width:34px;height:4px;border-radius:10px;background:rgba(255,255,255,.35);transition:.4s}
.hero-dots button.active{background:var(--gold);width:54px}
.hero-scroll{display:flex;align-items:center;gap:.7rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero-scroll .mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.6);border-radius:14px;position:relative}
.hero-scroll .mouse::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:7px;background:var(--gold);border-radius:3px;animation:scroll 1.8s infinite}
@keyframes scroll{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}}

/* hero floating stat card */
.hero-float{
  position:absolute;right:max(1.5rem,calc((100vw - var(--container))/2));bottom:7rem;z-index:4;
  background:rgba(13,42,32,.36);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.6);
  border-radius:var(--radius);padding:1.4rem 1.6rem;width:230px;
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-float .num{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--gold)}
.hero-float .lbl{font-size:.82rem;color:rgba(255,255,255,.85);margin-top:.4rem}
.hero-float .avatars{display:flex;margin-top:1rem}
.hero-float .avatars span{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.6);margin-left:-10px;background-size:cover;background-position:center}
.hero-float .avatars span:first-child{margin-left:0}

/* curved divider */
.curve-divider{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;z-index:3}
.curve-divider svg{width:100%;height:auto;display:block}

/* =================================================================
   7. MARQUEE STRIP (partners / focus)
   ================================================================= */
.strip{background:var(--ink);color:#cfe0d6;padding:1.1rem 0;overflow:hidden}
.marquee{display:flex;gap:3.5rem;width:max-content;animation:scrollx 26s linear infinite}
.strip:hover .marquee{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee span{display:inline-flex;align-items:center;gap:1rem;font-family:var(--serif);font-size:1.25rem;font-style:italic;white-space:nowrap;opacity:.85}
.marquee span::after{content:"✦";color:var(--gold);font-style:normal;font-size:.9rem}

/* =================================================================
   8. FLAGSHIP PROGRAMS
   ================================================================= */
.flagship{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.flagship-head{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:end;margin-bottom:3rem}
.flagship-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.fcard{
  --c:var(--teal);
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:430px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem;color:#fff;isolation:isolate;
  box-shadow:var(--shadow);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.fcard:hover{transform:translateY(-10px)}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s var(--ease)}
.fcard:hover img{transform:scale(1.1)}
.fcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 25%,transparent) 0%,color-mix(in srgb,var(--c) 86%,transparent) 100%);
  transition:opacity .5s}
.fcard .fc-no{position:absolute;top:1.2rem;left:1.4rem;font-family:var(--serif);font-size:1rem;opacity:.7}
.fcard .fc-ico{position:absolute;top:1.1rem;right:1.3rem;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:grid;place-items:center;font-size:1.3rem}
.fc-ico .flat-icon,.scard-ico .flat-icon,.ic-ico .flat-icon{width:1.45em;height:1.45em}
.fcard h3{font-family:var(--serif);font-size:1.4rem;line-height:1.12;margin-bottom:.6rem}
.fcard p{font-size:.9rem;color:rgba(255,255,255,.85);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .5s,margin .5s}
.fcard:hover p{max-height:120px;opacity:1;margin-bottom:1rem}
.fcard .fc-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.92rem}
.fcard .fc-link .ico{transition:transform .4s}
.fcard:hover .fc-link .ico{transform:translateX(5px)}
.fcard .fc-bar{position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fcard:hover .fc-bar{transform:scaleX(1)}

/* =================================================================
   9. ABOUT
   ================================================================= */
.history-story{background:linear-gradient(180deg,var(--cream),#f9faf6)}
.history-story--inner{padding-top:clamp(4rem,7vw,7rem)}
.history-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(3rem,7vw,7rem);align-items:start}
.history-visual{position:sticky;top:112px;height:calc(100vh - 150px);min-height:520px;max-height:760px;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);isolation:isolate}
.history-visual::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(8,35,26,.78));z-index:1}
.history-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.history-visual:hover img{transform:scale(1.035)}
.history-year{position:absolute;left:1.4rem;top:1.4rem;z-index:2;background:#fff;border-radius:16px;padding:.85rem 1.15rem;box-shadow:var(--shadow-sm)}
.history-year b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;color:var(--teal)}
.history-year span,.history-caption span{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.history-caption{position:absolute;z-index:2;left:clamp(1.5rem,4vw,2.5rem);right:2rem;bottom:2rem;color:#fff}
.history-caption span{display:block;color:var(--gold);margin-bottom:.35rem}
.history-caption strong{display:block;font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.12}
.history-content{padding:.6rem 0 1rem}
.history-intro{padding-bottom:2.6rem;border-bottom:1px solid var(--line)}
.history-intro h2{max-width:14ch;margin-bottom:1.3rem}
.history-chapter{display:grid;grid-template-columns:42px 1fr;gap:1.25rem;padding:2.5rem 0;border-bottom:1px solid var(--line)}
.chapter-no{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);font-size:.72rem;font-weight:800}
.history-chapter h3{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.15;margin:.25rem 0 1rem}
.history-chapter p{color:var(--ink-soft);margin-bottom:1rem}
.history-chapter p:last-child{margin-bottom:0}
.history-quote{margin:2.5rem 0 0;background:linear-gradient(135deg,var(--teal-d),var(--green-d));color:#fff;border-radius:22px;padding:clamp(1.6rem,3vw,2.3rem);position:relative;overflow:hidden}
.history-quote::after{content:"“";position:absolute;right:1rem;top:-2.8rem;font-family:var(--serif);font-size:10rem;color:rgba(255,255,255,.08);line-height:1}
.history-quote .flat-icon{width:34px;height:34px;color:var(--gold);margin-bottom:1rem}
.history-quote p{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.4;max-width:28ch}
.history-principles{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.5rem 0}
.history-principles div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.4rem;box-shadow:var(--shadow-sm)}
.history-principles span{display:block;color:var(--teal);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.65rem}
.history-principles p{font-size:.9rem;color:var(--ink-soft)}
.history-link{margin-top:.25rem}
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-media{position:relative}
.about-media .m-main{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-media .m-main img{width:100%;aspect-ratio:4/4.4;object-fit:cover}
.about-media .m-sub{
  position:absolute;right:-1.5rem;bottom:-1.5rem;width:54%;border-radius:16px;overflow:hidden;
  border:6px solid var(--cream);box-shadow:var(--shadow);
}
.about-media .m-sub img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about-media .m-badge{
  position:absolute;left:-1.4rem;top:2rem;background:var(--gold);color:var(--ink);
  border-radius:16px;padding:1.1rem 1.3rem;box-shadow:var(--shadow);text-align:center;
}
.about-media .m-badge b{display:block;font-family:var(--serif);font-size:2.2rem;line-height:1}
.about-media .m-badge span{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.about-media .m-leaf{position:absolute;left:-2.5rem;top:-2.5rem;width:90px;opacity:.18;color:var(--green);animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.about-body h2{margin:.4rem 0 1.2rem}
.about-body .lead{margin-bottom:1.4rem}
.about-pills{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.about-pills button{
  padding:.6rem 1.1rem;border-radius:100px;border:1.5px solid var(--line);
  font-weight:600;font-size:.88rem;color:var(--ink-soft);transition:.3s;
}
.about-pills button.active,.about-pills button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.about-panel{display:none;animation:fade .5s var(--ease)}
.about-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.about-list{display:grid;gap:.9rem;margin:1.2rem 0 1.8rem}
.about-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.98rem}
.about-list .chk{flex:none;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal);display:grid;place-items:center;font-size:.8rem;font-weight:900}

/* =================================================================
   10. STATS BAND
   ================================================================= */
.stats{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 20%,rgba(19,122,110,.4),transparent 45%),radial-gradient(circle at 90% 90%,rgba(45,106,60,.4),transparent 45%)}
.stats .container{position:relative}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat .num{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--gold)}
.stat .num small{font-size:.5em}
.stat .lbl{margin-top:.6rem;font-size:.92rem;color:rgba(255,255,255,.78);letter-spacing:.02em}
.stat{padding:1rem;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;height:64%;width:1px;background:rgba(255,255,255,.14)}

/* =================================================================
   11. WHAT WE DO
   ================================================================= */
.do-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.do-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.scard{
  background:var(--paper);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  display:flex;flex-direction:column;
}
.scard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.scard-img{position:relative;overflow:hidden;aspect-ratio:16/10}
.scard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.scard:hover .scard-img img{transform:scale(1.09)}
.scard-img .tag{position:absolute;top:1rem;left:1rem;padding:.4rem .85rem;border-radius:100px;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--teal)}
.scard-ico{position:relative;z-index:3;align-self:flex-end;margin:-27px 1.3rem -27px 0;width:54px;height:54px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:1.4rem;box-shadow:var(--shadow-sm);color:var(--c,var(--teal))}
.scard-body{padding:1.6rem 1.5rem 1.7rem}
.scard-body h3{font-family:var(--serif);font-size:1.32rem;margin-bottom:.55rem;transition:color .3s}
.scard:hover .scard-body h3{color:var(--teal)}
.scard-body p{font-size:.93rem;color:var(--ink-soft);margin-bottom:1.1rem}
.scard-ico--flat{align-self:flex-start;margin:1.5rem 0 -.9rem 1.5rem} /* icon chip when the card has no photo */
.scard-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--teal)}
.scard-link .ico{transition:transform .4s}
.scard:hover .scard-link .ico{transform:translateX(5px)}

/* =================================================================
   12. IMPACT / CTA SPLIT (parallax)
   ================================================================= */
.impact{position:relative;color:#fff;overflow:hidden}
.impact-bg{position:absolute;inset:0;z-index:0}
.impact-bg img{width:100%;height:120%;object-fit:cover}
.impact::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,42,32,.94),rgba(13,42,32,.55))}
.impact .container{position:relative;z-index:2}
.impact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.impact h2{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.06;margin-bottom:1.2rem}
.impact p{color:rgba(255,255,255,.85);margin-bottom:2rem;max-width:50ch}
.impact-cards{display:grid;gap:1rem}
.icard{
  background:rgba(255,255,255,.08);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:1.5rem;display:flex;gap:1.1rem;align-items:center;
  transition:transform .4s var(--ease),background .4s;
}
.icard:hover{transform:translateX(8px);background:rgba(255,255,255,.14)}
.icard .ic-ico{flex:none;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--gold);color:var(--ink)}
.icard h4{font-family:var(--serif);font-size:1.2rem}
.icard p{margin:0;font-size:.9rem}

/* =================================================================
   13. ASSOCIATIONS
   ================================================================= */
.assoc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.acard{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/3.6;
  box-shadow:var(--shadow-sm);
}
.acard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.acard:hover img{transform:scale(1.1)}
.acard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(13,42,32,.92))}
.acard-body{position:absolute;inset:auto 0 0 0;padding:1.4rem;color:#fff;z-index:2}
.acard-body .ac-tag{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.acard-body h3{font-family:var(--serif);font-size:1.18rem;margin:.3rem 0}
.acard-body p{font-size:.84rem;color:rgba(255,255,255,.82);max-height:0;opacity:0;overflow:hidden;transition:.5s var(--ease)}
.acard:hover .acard-body p{max-height:120px;opacity:1;margin-top:.4rem}

/* =================================================================
   14. WORKSHOPS / NEWS
   ================================================================= */
.news{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.ncard{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.5s var(--ease)}
.ncard:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.ncard-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.ncard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ncard:hover .ncard-img img{transform:scale(1.08)}
.ncard-date{position:absolute;top:1rem;left:1rem;background:#fff;border-radius:12px;text-align:center;padding:.5rem .8rem;line-height:1;box-shadow:var(--shadow-sm)}
.ncard-date b{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--teal)}
.ncard-date span{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ncard-body{padding:1.5rem}
.ncard-body .meta{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre);margin-bottom:.6rem}
.ncard-body h3{font-family:var(--serif);font-size:1.2rem;line-height:1.2;margin-bottom:.9rem}
.ncard-body a.more{font-weight:700;font-size:.88rem;color:var(--teal);display:inline-flex;gap:.4rem;align-items:center}

/* =================================================================
   15. GET INVOLVED CTA
   ================================================================= */
.involve{position:relative}
.involve .panel{
  background:linear-gradient(120deg,var(--green-d),var(--teal-d));
  border-radius:30px;padding:clamp(2.5rem,5vw,4.5rem);color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.involve .panel::before{content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(224,168,46,.35),transparent 70%)}
.involve .panel::after{content:"";position:absolute;left:-80px;bottom:-80px;width:300px;height:300px;border-radius:50%;border:30px solid rgba(255,255,255,.05)}
.involve-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.involve h2{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;margin-bottom:1rem}
.involve p{color:rgba(255,255,255,.85);margin-bottom:1.8rem;max-width:46ch}
.involve-actions{display:flex;gap:1rem;flex-wrap:wrap}
.involve-side{display:grid;gap:1rem}
.iside{display:flex;gap:1rem;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:1.2rem 1.4rem;transition:.4s}
.iside:hover{background:rgba(255,255,255,.18);transform:translateY(-4px)}
.iside .n{font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:1}
.iside .t{font-size:.9rem;color:rgba(255,255,255,.88)}

/* =================================================================
   16. NEWSLETTER
   ================================================================= */
.subscribe{padding-top:clamp(3rem,6vw,5.5rem)}
.subscribe .box{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(2rem,4vw,3rem);box-shadow:var(--shadow-sm)}
.subscribe h3{font-family:var(--serif);font-size:1.7rem;margin-bottom:.4rem}
.subscribe p{color:var(--ink-soft)}
.subscribe form{display:flex;gap:.7rem;flex-wrap:wrap}
.subscribe input{padding:1rem 1.2rem;border-radius:100px;border:1.5px solid var(--line);min-width:260px;font-family:inherit;font-size:.95rem;background:var(--cream)}
.subscribe input:focus{outline:none;border-color:var(--teal)}

/* =================================================================
   17. FOOTER
   ================================================================= */
.footer{background:var(--ink);color:#b9cdc1;padding-top:clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--teal),var(--green),var(--ochre),var(--navy))}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3.5rem}
.footer h4{color:#fff;font-family:var(--serif);font-size:1.15rem;margin-bottom:1.3rem}
.footer .f-brand img{height:56px;margin-bottom:1.1rem}
.footer .f-brand p{font-size:.92rem;max-width:34ch;margin-bottom:1.3rem}
.footer .f-soc{display:flex;gap:.6rem}
.footer .f-soc a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:.35s}
.footer .f-soc a:hover{background:var(--teal);color:#fff;transform:translateY(-4px)}
.footer ul.f-links li{margin-bottom:.7rem}
.footer ul.f-links a{font-size:.92rem;transition:.3s;display:inline-flex;align-items:center;gap:.5rem}
.footer ul.f-links a::before{content:"›";color:var(--gold);transition:transform .3s}
.footer ul.f-links a:hover{color:#fff}
.footer ul.f-links a:hover::before{transform:translateX(3px)}
.footer .f-contact li{display:flex;gap:.8rem;margin-bottom:1rem;font-size:.9rem;align-items:flex-start}
.footer .f-contact .ico{color:var(--gold);flex:none;margin-top:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.5rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem}
.footer-motto{display:inline-flex;align-items:center;gap:.45rem}

/* =================================================================
   18. SCROLL REVEAL
   ================================================================= */
[data-r]{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-r].vis{opacity:1;transform:none}
[data-r="left"]{transform:translateX(-50px)}
[data-r="right"]{transform:translateX(50px)}
[data-r="scale"]{transform:scale(.9)}
[data-r].vis{transform:none}
[data-delay="1"]{transition-delay:.12s}
[data-delay="2"]{transition-delay:.24s}
[data-delay="3"]{transition-delay:.36s}
[data-delay="4"]{transition-delay:.48s}

/* progress bar */
.progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--gold));z-index:2000;width:0;transition:width .1s}

/* back to top */
.totop{position:fixed;right:1.5rem;bottom:1.5rem;z-index:900;width:50px;height:50px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;transform:translateY(20px) scale(.8);transition:.4s var(--ease);pointer-events:none}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--ink);transform:translateY(-4px)}

/* =================================================================
   19. RESPONSIVE
   ================================================================= */
.mobile-nav{position:fixed;inset:0;z-index:1500;background:var(--ink);color:#fff;padding:6rem 2rem 2rem;transform:translateX(100%);transition:transform .5s var(--ease);overflow-y:auto}
.mobile-nav.open{transform:none}
.mobile-nav a{display:block;padding:1rem 0;font-family:var(--serif);font-size:1.4rem;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav .m-close{position:absolute;top:1.5rem;right:1.5rem;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:1.6rem}

@media(max-width:1100px){
  .flagship-grid{grid-template-columns:repeat(2,1fr)}
  .do-grid{grid-template-columns:repeat(2,1fr)}
  .assoc-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .menu,.nav-cta .btn{display:none}
  .nav-burger{display:flex}
}
@media(max-width:880px){
  .about-grid,.history-grid,.impact-grid,.involve-grid,.flagship-head,.subscribe .box{grid-template-columns:1fr}
  .history-visual{position:relative;top:auto;height:min(68vh,620px);min-height:460px}
  .news-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .stat:not(:last-child)::after{display:none}
  .hero-float{display:none}
  .about-media{margin-bottom:3rem}
  .impact-cards{margin-top:1rem}
  .subscribe form{justify-content:flex-start}
}
@media(max-width:620px){
  .flagship-grid,.do-grid,.assoc-grid,.news-grid,.footer-grid,.stats-grid{grid-template-columns:1fr}
  .topbar-info{font-size:.74rem;gap:.9rem}
  .hero h1{font-size:clamp(1.54rem,6.3vw,2.1rem)}
  .section{padding:4rem 0}
  .history-story{padding-top:3rem}
  .history-visual{min-height:400px;height:58vh;border-radius:20px}
  .history-chapter{grid-template-columns:1fr;gap:.8rem}
  .history-principles{grid-template-columns:1fr}
  .hero-actions .btn{flex:1;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.2s!important}
  .hero-slide img{transform:none!important}
}

/* print / pdf preview helper — keeps brand colors when exporting */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hero{min-height:auto;height:760px}
  .nav{position:static}
  [data-r],[data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
}

/* =================================================================
   INNER PAGES — shared "T1" content template
   (page hero / breadcrumb / prose / split / value & feature cards / CTA band)
   ================================================================= */

/* active top-level nav item */
.menu > li > a.is-active{color:var(--teal)}
.menu > li > a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--teal);border-radius:2px}
.menu > li > a{position:relative}

/* inner-page nav: always solid (dark text on light), mirrors .nav.scrolled */
.nav--solid{background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 40px -18px rgba(17,39,31,.4)}
.nav--solid .brand .brand-txt b{color:var(--ink)}
.nav--solid .brand .brand-txt span{color:var(--teal)}
.nav--solid .menu > li > a{color:var(--ink)}
.nav--solid .menu > li:hover > a{background:var(--cream-2)}
.nav--solid .nav-burger{background:var(--cream-2)}
.nav--solid .nav-burger span{background:var(--ink)}

/* ---- page hero / banner ---- */
.page-hero{position:relative;display:grid;place-items:center;text-align:center;
  padding:clamp(7rem,14vw,11rem) 0 clamp(5rem,8vw,7rem);color:#fff;overflow:hidden;isolation:isolate}
.page-hero-bg{position:absolute;inset:0;z-index:-2}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,90,81,.62),rgba(17,39,31,.82))}
.page-hero .container{position:relative}
.page-hero .eyebrow{color:var(--gold);justify-content:center}
.page-hero h1{font-family:var(--serif);font-weight:600;line-height:1.04;
  font-size:clamp(2.4rem,6vw,4rem);margin:.4rem 0 1rem;letter-spacing:-.02em}
.page-hero p.lead{color:rgba(255,255,255,.9);max-width:60ch;margin-inline:auto}
.crumb{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-size:.86rem;color:rgba(255,255,255,.82);font-weight:600}
.crumb a{color:rgba(255,255,255,.82)}
.crumb a:hover{color:#fff}
.crumb span{opacity:.6}
/* left-aligned hero variant (Resources section) */
.page-hero--left{place-items:start;text-align:left}
.page-hero--left .eyebrow{justify-content:flex-start}
.page-hero--left p.lead{margin-inline:0}

/* ---- readable prose column ---- */
.prose{max-width:70ch}
.prose p{margin-bottom:1.15rem;color:var(--ink-soft);font-size:1.05rem}
.prose h2,.prose h3{font-family:var(--serif);color:var(--ink);line-height:1.15}
.prose h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.3rem 0 1rem}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.35rem;color:var(--ink-soft)}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li{margin-bottom:.5rem;font-size:1.05rem}
.prose li::marker{color:var(--teal)}
.prose blockquote{border-left:3px solid var(--gold);padding:.4rem 0 .4rem 1.2rem;margin:0 0 1.15rem;
  font-family:var(--serif);font-size:1.15rem;color:var(--ink)}

/* ---- two-column split (media + text) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split .media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.2}
.split .media .stamp{position:absolute;left:1.2rem;bottom:1.2rem;background:var(--paper);
  color:var(--ink);border-radius:14px;padding:.7rem 1.1rem;box-shadow:var(--shadow-sm);
  font-weight:700;display:flex;flex-direction:column;line-height:1.1}
.split .media .stamp b{font-family:var(--serif);font-size:1.6rem;color:var(--teal)}
.split .media .stamp span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ---- vision / mission cards ---- */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.5rem}
.vm-grid--3{grid-template-columns:repeat(3,1fr)}
.vm-card{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow-sm);
  border-top:4px solid var(--c,var(--teal));transition:transform .4s var(--ease-out),box-shadow .4s}
.vm-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.vm-card .vm-ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--teal)) 14%,transparent);color:var(--c,var(--teal));margin-bottom:1.1rem}
.vm-card .vm-ico .flat-icon{width:1.6rem;height:1.6rem}
.vm-card h3{font-family:var(--serif);font-size:1.45rem;margin-bottom:.5rem;color:var(--ink)}
.vm-card p{color:var(--ink-soft)}

/* ---- values band (deep-forest section) ---- */
.values-band{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#0d5a51 0%,#11271f 100%)}
.values-band::before{content:"";position:absolute;top:-25%;right:-8%;width:46%;height:80%;
  background:radial-gradient(circle,rgba(224,168,46,.20),transparent 62%);pointer-events:none}
.values-band::after{content:"";position:absolute;left:-6%;bottom:-30%;width:42%;height:80%;
  background:radial-gradient(circle,rgba(19,122,110,.45),transparent 60%);pointer-events:none}
.values-band .container{position:relative;z-index:1}
.values-band .eyebrow{color:var(--gold);justify-content:center}
.values-band .eyebrow::before,.values-band .eyebrow::after{background:var(--gold)}
.values-band h2{color:#fff}

.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:1.2rem;margin-top:2.8rem}
.vtile{position:relative;display:flex;flex-direction:column;gap:1.1rem;overflow:hidden;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:18px;
  padding:1.7rem 1.5rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .4s var(--ease-out),background .4s,border-color .4s,box-shadow .4s}
.vtile:hover{transform:translateY(-7px);background:rgba(255,255,255,.1);
  border-color:rgba(224,168,46,.55);box-shadow:0 26px 50px -24px rgba(0,0,0,.6)}
.vtile-top{display:flex;align-items:center;justify-content:space-between}
.vtile .v-ico{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(224,168,46,.16);color:var(--gold);transition:background .4s,transform .4s var(--ease-out)}
.vtile:hover .v-ico{background:var(--gold);color:var(--ink);transform:rotate(-6deg)}
.vtile .v-ico .flat-icon{width:1.4rem;height:1.4rem}
.vtile .num{font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1;color:var(--gold);opacity:.7}
.vtile p{color:rgba(255,255,255,.92);font-weight:600;font-size:1.02rem;line-height:1.5;margin:0}
.vtile::after{content:"";position:absolute;left:1.5rem;right:1.5rem;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.vtile:hover::after{transform:scaleX(1)}

/* ---- pillar / resource tiles ---- */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.2rem;margin-top:2.5rem}
.pillar-tile{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;
  padding:1.5rem 1.2rem;border-radius:16px;transition:transform .4s var(--ease-out),background .4s}
.pillar-tile:hover{transform:translateY(-5px)}
.pillar-tile .pt-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--teal)) 14%,transparent);color:var(--c,var(--teal));
  transition:background .4s,transform .4s}
.pillar-tile:hover .pt-ico{background:color-mix(in srgb,var(--c,var(--teal)) 24%,transparent);transform:scale(1.08)}
.pillar-tile .pt-ico .flat-icon{width:1.5rem;height:1.5rem}
.pillar-tile .pt-label{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.3}

/* ---- reusable donate / CTA band for inner pages ---- */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--teal-d),var(--green-d));
  border-radius:calc(var(--radius) + 6px);padding:clamp(2.5rem,5vw,4rem);color:#fff;text-align:center;box-shadow:var(--shadow)}
.cta-band h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:.8rem}
.cta-band p{color:rgba(255,255,255,.88);max-width:54ch;margin:0 auto 1.8rem}
.cta-band .hero-actions{justify-content:center}

@media(max-width:880px){
  .split,.vm-grid{grid-template-columns:1fr}
  .split .media{margin-bottom:1.5rem}
}

/* =================================================================
   FINANCIAL CONTROLS & ACCOUNTS — page components
   (key-fact band / gradient governance panel / controls checklist / duo cards)
   reusable across other data-driven pages
   ================================================================= */

/* ---- key facts band ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem;margin-top:2.6rem}
.fact{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:1.9rem 1.6rem;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s}
.fact:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.fact::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--c,var(--teal)),var(--gold))}
.fact .f-ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:color-mix(in srgb,var(--c,var(--teal)) 13%,transparent);color:var(--c,var(--teal))}
.fact .f-ico .flat-icon{width:1.45rem;height:1.45rem}
.fact .f-num{font-family:var(--serif);font-size:2.4rem;font-weight:600;line-height:1;color:var(--ink)}
.fact .f-lbl{margin-top:.45rem;font-weight:600;color:var(--ink-soft);font-size:.93rem;line-height:1.35}

/* ---- gradient governance panel ---- */
.gov-panel{position:relative;overflow:hidden;border-radius:26px;color:#fff;
  padding:clamp(2rem,4vw,3.4rem);background:linear-gradient(150deg,var(--teal) 0%,var(--green-d) 100%);
  box-shadow:var(--shadow);display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.gov-panel::after{content:"";position:absolute;top:-30%;right:-10%;width:48%;height:90%;
  background:radial-gradient(circle,rgba(224,168,46,.22),transparent 62%);pointer-events:none}
.gov-panel > *{position:relative;z-index:1}
.gov-shield{width:62px;height:62px;border-radius:17px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:var(--gold);margin-bottom:1.4rem}
.gov-shield .flat-icon{width:1.9rem;height:1.9rem}
.gov-panel h3{font-family:var(--serif);font-weight:600;color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.9rem}
.gov-panel p{color:rgba(255,255,255,.88);font-size:1.02rem}
.country-pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.cpill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:.5rem .95rem;font-weight:600;font-size:.88rem;
  transition:background .3s,transform .3s var(--ease-out)}
.cpill:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.cpill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.gov-highlights{display:flex;flex-direction:column;gap:.9rem}
.gov-highlights .gh{display:flex;gap:.8rem;align-items:flex-start;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:1rem 1.1rem}
.gov-highlights .gh .flat-icon{flex:none;width:1.25rem;height:1.25rem;color:var(--gold);margin-top:.1rem}
.gov-highlights .gh span{font-weight:600;font-size:.95rem;color:#fff;line-height:1.4}

/* ---- controls checklist ---- */
.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem;margin-top:2.6rem}
.control{display:flex;gap:1rem;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:1.4rem 1.35rem;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s}
.control:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--teal) 45%,transparent);box-shadow:var(--shadow)}
.control .c-check{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),var(--green-d));color:#fff;margin-top:.05rem}
.control .c-check .flat-icon{width:1rem;height:1rem;stroke-width:2.4}
.control b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:.25rem;font-family:var(--sans)}
.control span{color:var(--ink-soft);font-size:.92rem;line-height:1.45}

/* ---- duo feature cards ---- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem}
.duo-card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);
  border-radius:22px;padding:2.4rem 2.1rem;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-out),box-shadow .4s}
.duo-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.duo-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,var(--teal))}
.duo-card .d-watermark{position:absolute;top:-1.4rem;right:-.6rem;font-family:var(--serif);font-weight:600;
  font-size:8rem;line-height:1;color:var(--c,var(--teal));opacity:.07;pointer-events:none}
.duo-card .d-ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:color-mix(in srgb,var(--c,var(--teal)) 13%,transparent);color:var(--c,var(--teal))}
.duo-card .d-ico .flat-icon{width:1.6rem;height:1.6rem}
.duo-card h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--ink);margin-bottom:.7rem}
.duo-card p{color:var(--ink-soft);font-size:1rem}

@media(max-width:880px){
  .gov-panel{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
}

/* =================================================================
   WHERE WE WORK — page components
   (country presence cards / organisation flow / office cards + map)
   ================================================================= */

/* ---- presence (country) cards ---- */
.presence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1.1rem;margin-top:2.6rem}
.pcountry{position:relative;display:flex;flex-direction:column;gap:.8rem;background:var(--paper);
  border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease-out),box-shadow .4s,border-color .4s}
.pcountry:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--teal) 35%,transparent)}
.pcountry .p-pin{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--teal) 13%,transparent);color:var(--teal)}
.pcountry .p-pin .flat-icon{width:1.35rem;height:1.35rem}
.pcountry h3{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.pcountry .p-tag{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-soft)}
.pcountry .p-tag.has-office{color:var(--teal)}
.pcountry .p-tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---- organisation flow ---- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem;position:relative}
.flow-step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:2rem 1.7rem;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s}
.flow-step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.flow-step .fs-no{font-family:var(--serif);font-size:1rem;font-weight:700;color:#fff;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),var(--green-d));margin-bottom:1.1rem}
.flow-step .fs-ico{position:absolute;top:1.9rem;right:1.6rem;color:var(--teal);opacity:.28}
.flow-step .fs-ico .flat-icon{width:1.9rem;height:1.9rem}
.flow-step h3{font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-bottom:.5rem}
.flow-step p{color:var(--ink-soft);font-size:.95rem}
.flow-step::after{content:"";position:absolute;right:-1.05rem;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-right:2.5px solid var(--gold);border-top:2.5px solid var(--gold);
  rotate:45deg;z-index:2}
.flow-step:last-child::after{display:none}

/* ---- offices + map ---- */
#offices{background:linear-gradient(160deg,#f9faf6 0%,var(--cream) 58%,var(--cream-2) 100%);overflow:hidden;isolation:isolate}
#offices::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-260px;top:4rem;background:color-mix(in srgb,var(--teal) 8%,transparent);filter:blur(2px);z-index:-1}
.offices-heading{display:flex;justify-content:space-between;align-items:end;gap:3rem;padding-bottom:2.1rem;border-bottom:1px solid var(--line)}
.offices-heading h2{max-width:12ch}
.offices-heading-copy{display:flex;align-items:center;justify-content:flex-end;gap:2rem;max-width:520px}
.offices-heading-copy > p{max-width:38ch;color:var(--ink-soft)}
.office-total{display:flex;align-items:center;gap:.7rem;padding-left:1.6rem;border-left:1px solid var(--line);flex:none}
.office-total strong{font-family:var(--serif);font-size:2.7rem;line-height:1;color:var(--teal)}
.office-total span{font-size:.65rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;line-height:1.35;color:var(--ink-soft)}
.offices-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(350px,.8fr);gap:1.1rem;margin-top:1.7rem;align-items:start}
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.office-card{--accent:var(--teal);position:relative;isolation:isolate;overflow:hidden;background:rgba(255,255,255,.9);
  border:1px solid rgba(17,39,31,.1);border-radius:18px;padding:1.2rem;
  box-shadow:0 12px 36px -28px rgba(17,39,31,.5);transition:transform .4s var(--ease-out),box-shadow .4s,border-color .4s}
.office-card::before{content:"";position:absolute;left:0;top:1.25rem;bottom:1.25rem;width:3px;border-radius:0 4px 4px 0;background:var(--accent);transition:top .4s,bottom .4s}
.office-card:hover{transform:translateY(-5px);box-shadow:0 28px 55px -30px rgba(17,39,31,.5);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.office-card:hover::before{top:.75rem;bottom:.75rem}
.office-card--featured,.office-card--compact{grid-column:auto;min-height:224px;padding:1.2rem}
.o-code{position:absolute;right:-.05rem;bottom:-1.5rem;z-index:-1;font-family:var(--serif);font-size:6.4rem;font-weight:700;line-height:1;color:color-mix(in srgb,var(--accent) 5%,transparent);letter-spacing:-.08em}
.office-card--compact .o-code{font-size:6.4rem;bottom:-1.5rem}
.office-card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem}
.o-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.o-mark .flat-icon{width:1.15rem;height:1.15rem}
.o-type{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.o-no{margin-left:auto;font-family:var(--serif);font-size:.85rem;color:color-mix(in srgb,var(--ink-soft) 60%,transparent)}
.office-card h3{font-family:var(--serif);font-size:clamp(1.35rem,1.7vw,1.65rem);line-height:1.05;color:var(--ink)}
.o-city{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:.3rem 0 .8rem}
.office-details{max-width:52ch}
.office-details > div{display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-soft);font-size:.8rem;line-height:1.42}
.office-details .flat-icon{width:1.05rem;height:1.05rem;flex:none;color:var(--accent);margin-top:.18rem}
.office-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.85rem}
.office-actions a{display:inline-flex;align-items:center;gap:.4rem;border-radius:100px;padding:.45rem .65rem;background:color-mix(in srgb,var(--accent) 9%,#fff);color:var(--accent);font-size:.65rem;font-weight:750;transition:background .3s,color .3s,transform .3s}
.office-actions a:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.office-actions .flat-icon{width:.95rem;height:.95rem}
.map-embed{position:sticky;top:100px;min-height:464px;border-radius:20px;overflow:hidden;box-shadow:0 28px 65px -34px rgba(17,39,31,.52);border:5px solid #fff;background:var(--cream-2)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:saturate(.78) contrast(.96)}
.map-label{position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;display:flex;align-items:center;gap:.8rem;padding:.85rem;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);border-radius:15px;box-shadow:var(--shadow-sm)}
.map-label-icon{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:var(--teal);color:#fff;flex:none}
.map-label-icon .flat-icon{width:1.15rem;height:1.15rem}
.map-label small{display:block;font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.map-label strong{display:block;font-family:var(--serif);font-size:1rem;line-height:1.15}
.map-label > a{margin-left:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--cream-2);color:var(--teal);font-size:1.1rem;font-weight:800;transition:.3s}
.map-label > a:hover{background:var(--teal);color:#fff;transform:translate(2px,-2px)}

@media(max-width:900px){
  .flow{grid-template-columns:1fr}
  .flow-step::after{right:50%;top:auto;bottom:-1.1rem;transform:translateX(50%);rotate:135deg}
  .offices-layout{grid-template-columns:1fr}
  .map-embed{position:relative;top:0;min-height:430px}
}
@media(max-width:700px){
  .offices-heading{align-items:flex-start;flex-direction:column;gap:1.4rem}
  .offices-heading-copy{align-items:flex-start;flex-direction:column;gap:1.2rem}
  .office-total{padding-left:0;padding-top:1rem;border-left:0;border-top:1px solid var(--line)}
  .office-grid{grid-template-columns:1fr}
  .office-card--featured{grid-column:auto}
}
@media(max-width:560px){
  .office-card,.office-card--featured{padding:1.35rem;min-height:auto}
  .office-actions a span{display:none}
  .office-actions a{width:40px;height:40px;padding:0;justify-content:center}
  .map-embed{min-height:390px;border-width:4px}
}

/* =================================================================
   CONTACT GROUP — people / team / contact form / partners
   ================================================================= */

/* ---- team & board member cards ---- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.6rem}
@media(max-width:1024px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.team-grid{grid-template-columns:1fr}}
.member{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease-out),box-shadow .45s}
.member:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.member .m-photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream-2)}
.member .m-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease)}
.member:hover .m-photo img{transform:scale(1.06)}
.member .m-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(17,39,31,.55));opacity:0;transition:opacity .45s}
.member:hover .m-photo::after{opacity:1}
.member .m-tag{position:absolute;top:.9rem;left:.9rem;z-index:2;font-size:.64rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:var(--gold);color:var(--ink);padding:.32rem .7rem;border-radius:100px}
.member .m-body{padding:1.15rem 1.3rem 1.4rem;position:relative}
.member .m-body::before{content:"";position:absolute;left:1.3rem;top:0;width:34px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--teal),var(--gold));transform:translateY(-50%)}
.member h3{font-family:var(--serif);font-size:1.16rem;color:var(--ink);line-height:1.22}
.member .m-role{margin-top:.35rem;font-size:.85rem;font-weight:600;color:var(--teal);line-height:1.3}
/* professional initials monogram (used where no photo is available) */
.member .m-avatar{width:100%;height:100%;display:grid;place-items:center;position:relative;
  background:linear-gradient(140deg,var(--c1,var(--teal)),var(--c2,var(--teal-d)));
  color:#fff;font-family:var(--serif);font-weight:600;letter-spacing:.02em;
  font-size:clamp(2.4rem,5vw,3.4rem);transition:transform .8s var(--ease)}
.member .m-avatar::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 60%)}
.member:hover .m-avatar{transform:scale(1.06)}

/* ---- contact page: info cards + form + map ---- */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.cc-card{--c:var(--teal);display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;
  background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.8rem;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease-out),box-shadow .35s,border-color .35s}
.cc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c) 35%,transparent)}
.cc-card .cc-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);margin-bottom:.7rem}
.cc-card .cc-ico .flat-icon{width:1.5rem;height:1.5rem}
.cc-card h3{font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.cc-card p{color:var(--ink-soft);font-size:.95rem;line-height:1.5;font-weight:500}
.cc-card p a:hover{color:var(--c)}
.cc-card .btn{margin-top:1.1rem}
.btn--sm{padding:.62rem 1.3rem;font-size:.83rem}

.contact-split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.contact-note{font-size:.9rem;color:var(--ink-soft);margin:1.1rem 0 1.4rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uform .uf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.uf-field input,.uf-field textarea{width:100%;border:0;border-bottom:1.5px solid var(--line);border-radius:0;
  background:transparent;padding:1.1rem 0 .85rem;font-family:inherit;font-size:.96rem;color:var(--ink);
  transition:border-color .35s}
.uf-field input::placeholder,.uf-field textarea::placeholder{color:#93a29a}
.uf-field input:focus,.uf-field textarea:focus{outline:none;border-color:var(--teal)}
.uf-field textarea{resize:vertical;min-height:110px}
.uform .btn{margin-top:1.9rem}

.contact-map{position:sticky;top:110px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.contact-map iframe{width:100%;height:480px;border:0;display:block}
.map-card{position:absolute;top:1.1rem;left:1.1rem;z-index:2;max-width:270px;background:#fff;border-radius:14px;
  padding:1rem 1.15rem;box-shadow:var(--shadow-sm);display:grid;gap:.4rem}
.map-card strong{font-family:var(--serif);font-size:.95rem;line-height:1.25;color:var(--ink)}
.map-card span{font-size:.78rem;color:var(--ink-soft);line-height:1.45}
.map-card a{font-size:.8rem;font-weight:700;color:var(--teal)}
.map-card a:hover{color:var(--teal-d)}

/* ---- partners (universities / organisations) ---- */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:1rem;margin-top:2rem}
.partner{display:flex;gap:.85rem;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:1rem 1.15rem;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out),box-shadow .35s,border-color .35s}
.partner:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c,var(--teal)) 38%,transparent)}
.partner .pt-ico{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,var(--teal)) 13%,transparent);color:var(--c,var(--teal))}
.partner .pt-ico .flat-icon{width:1.25rem;height:1.25rem}
.partner span{font-weight:600;color:var(--ink);font-size:.92rem;line-height:1.3}

/* ---- simple aim / bullet list ---- */
.aim-list{display:grid;gap:.9rem;margin-top:1.4rem;max-width:60ch}
.aim-list li{display:flex;gap:.8rem;align-items:flex-start;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.aim-list li .flat-icon{flex:none;width:1.3rem;height:1.3rem;color:var(--teal);margin-top:.15rem}

@media(max-width:880px){
  .contact-cards{grid-template-columns:1fr}
  .contact-split{grid-template-columns:1fr}
  .uform .uf-row{grid-template-columns:1fr}
  .contact-map{position:static}
  .contact-map iframe{height:380px}
}

/* =================================================================
   CREATIVE PATTERN LIBRARY — bold editorial layouts
   (section moods · split headers · magazine team wall · overlay cards)
   ================================================================= */

/* ---- section mood modifiers ---- */
.section--dark{position:relative;overflow:hidden;color:#fff;background:linear-gradient(165deg,#0d5a51 0%,#11271f 100%)}
.section--dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:radial-gradient(circle at 18% 18%,rgba(224,168,46,.14),transparent 42%),
             radial-gradient(circle at 88% 78%,rgba(19,122,110,.45),transparent 46%)}
.section--dark > .container{position:relative;z-index:1}
.section--dark .eyebrow{color:var(--gold)}
.section--dark .eyebrow::before,.section--dark .eyebrow.center::after{background:var(--gold)}
.section--dark .h-display,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .lead{color:rgba(255,255,255,.85)}

/* faint topographic line texture (pure CSS, no asset) */
.topo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:repeating-radial-gradient(circle at 30% 50%,transparent 0 28px,#fff 28px 29px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}

/* ---- split / indexed section headers ---- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem 3rem;flex-wrap:wrap;margin-bottom:2.6rem}
.sec-head .sh-main{max-width:24ch}
.sec-head .sh-main .h-display{margin-top:.4rem}
.sec-head .sh-aside{max-width:40ch}
.sec-head .sh-aside p{opacity:.85}
.sec-head .sh-index{font-family:var(--serif);font-weight:600;line-height:.85;
  font-size:clamp(3rem,7vw,5.5rem);color:var(--gold);opacity:.45;letter-spacing:-.02em}

/* ---- magazine "bento" team wall ---- */
.team-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:265px;gap:1.2rem}
.tcard{position:relative;overflow:hidden;border-radius:20px;background:var(--ink);isolation:isolate;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.7);transition:transform .5s var(--ease-out)}
.tcard:hover{transform:translateY(-6px)}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .9s var(--ease),filter .6s}
.tcard:hover img{transform:scale(1.07)}
.tcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,33,25,0) 36%,rgba(11,33,25,.55) 62%,rgba(11,33,25,.94))}
.tcard .t-no{position:absolute;top:1rem;left:1.25rem;z-index:2;font-family:var(--serif);
  font-size:1rem;color:rgba(255,255,255,.55)}
.tcard .t-tag{position:absolute;top:1rem;right:1rem;z-index:2;background:var(--gold);color:var(--ink);
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .7rem;border-radius:100px}
.tcard .t-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem 1.4rem 1.5rem;
  transform:translateY(10px);transition:transform .5s var(--ease-out)}
.tcard:hover .t-info{transform:translateY(0)}
.tcard h3{color:#fff;font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.18}
.tcard .t-role{color:var(--gold);font-weight:600;font-size:.84rem;margin-top:.35rem;
  opacity:.85;transition:opacity .4s}
.tcard:hover .t-role{opacity:1}
.tcard .t-bar{position:absolute;left:1.4rem;bottom:0;height:3px;width:38px;background:var(--gold);
  border-radius:3px;z-index:2;transition:width .5s var(--ease-out)}
.tcard:hover .t-bar{width:calc(100% - 2.8rem)}
.tcard--lead{grid-column:span 2;grid-row:span 2}
.tcard--lead h3{font-size:1.7rem}
.tcard--wide{grid-column:span 2}

@media(max-width:900px){
  .team-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:240px}
  .tcard--lead{grid-column:span 2;grid-row:span 1}
  .tcard--lead h3{font-size:1.35rem}
  .tcard--wide{grid-column:span 2}
  .sec-head{align-items:flex-start}
}
@media(max-width:520px){
  .team-bento{grid-template-columns:1fr;grid-auto-rows:300px}
  .tcard--lead,.tcard--wide{grid-column:span 1}

/* =================================================================
   INTERNSHIP PAGE — New components
   ================================================================= */

/* ---- hero-internship specific ---- */
.hero-internship{position:relative}
.hero-internship .page-hero-bg{filter:brightness(.65) saturate(1.1);object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(19,122,110,.35) 0%,rgba(45,106,60,.25) 100%);z-index:1;pointer-events:none}
.hero-internship .container{position:relative;z-index:2;display:flex;flex-direction:column;gap:2rem}
.hero-content{margin-top:3rem}
.hero-internship h1{font-weight:700;letter-spacing:-.02em;margin-bottom:1.2rem;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.hero-subtitle{display:block;font-size:clamp(1.1rem,2vw,1.35rem);color:rgba(255,255,255,.92);margin:1rem 0 2rem;max-width:65ch;line-height:1.6;font-weight:400}
.hero-cta-quick{display:flex;gap:1.2rem;margin-bottom:2rem;flex-wrap:wrap}
.btn--outline-light{--bg:transparent;--fg:#fff;border:2px solid rgba(255,255,255,.8);transition:all .4s var(--ease)}
.btn--outline-light:hover{--bg:rgba(255,255,255,.15);border-color:#fff}

/* light CTA buttons used on What We Do + internship pages (over colored bands) */
.btn--light{--bg:#fff;--fg:var(--ink)}
.btn--light::before{background:var(--ink)}
.btn--light:hover{--fg:#fff}
.btn--light-outline{--bg:transparent;--fg:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:none}
.btn--light-outline::before{background:#fff}
.btn--light-outline:hover{color:var(--ink)}

/* ---- quick facts grid ---- */
.quick-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;margin-top:2rem}
.quick-fact{position:relative;background:linear-gradient(135deg,#fff 0%,#fafbf8 100%);border:1px solid rgba(19,122,110,.1);border-radius:24px;padding:2.4rem 1.8rem;text-align:center;
  transition:all .4s var(--ease-out);overflow:hidden}
.quick-fact::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--green))}
.quick-fact::after{content:"";position:absolute;bottom:-40%;right:-40%;width:120%;height:120%;background:radial-gradient(circle,rgba(19,122,110,.08),transparent);border-radius:50%;transition:all .6s var(--ease-out)}
.quick-fact:hover{transform:translateY(-8px);box-shadow:0 24px 60px -14px rgba(19,122,110,.2);border-color:rgba(19,122,110,.2)}
.quick-fact:hover::after{bottom:-30%;right:-30%}
.qf-number{font-family:var(--serif);font-size:2.8rem;font-weight:700;background:linear-gradient(135deg,var(--teal),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.6rem;line-height:1}
.qf-label{font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:.5rem;letter-spacing:.01em}
.qf-desc{font-size:.9rem;color:var(--ink-soft);line-height:1.5;font-weight:500}

/* ---- benefits grid ---- */
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;margin-top:2.6rem}
.benefit-card{position:relative;background:linear-gradient(135deg,#fff 0%,#fafbf8 100%);border:1px solid rgba(19,122,110,.1);border-radius:24px;padding:2.5rem 2rem;
  transition:all .4s var(--ease-out);overflow:hidden;display:flex;flex-direction:column}
.benefit-card::before{content:"";position:absolute;top:0;right:0;width:100px;height:100px;background:radial-gradient(circle,rgba(19,122,110,.12),transparent);border-radius:50%;transform:translate(30%,-30%);transition:all .6s var(--ease-out)}
.benefit-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px -14px rgba(19,122,110,.15);border-color:rgba(19,122,110,.15)}
.benefit-card:hover::before{transform:translate(50%,-50%)}
.bc-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin-bottom:1.5rem;
  background:linear-gradient(135deg,rgba(19,122,110,.15),rgba(45,106,60,.1));color:var(--teal);flex:none;position:relative;z-index:1}
.bc-icon .flat-icon{width:1.8rem;height:1.8rem;stroke-width:1.6}
.benefit-card h3{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);margin-bottom:.7rem;position:relative;z-index:1}
.benefit-card p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;position:relative;z-index:1;flex:1}

/* ---- apply paths / split layout ---- */
.apply-paths{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:2.8rem}
.apply-path{position:relative;background:linear-gradient(135deg,#fff 0%,#fafbf8 100%);border:1px solid rgba(19,122,110,.12);border-radius:28px;padding:3rem 2.5rem;
  transition:all .4s var(--ease-out);overflow:hidden}
.apply-path::before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(19,122,110,.08),transparent 70%);transition:all .8s var(--ease-out)}
.apply-path:hover{transform:translateY(-10px);box-shadow:0 32px 80px -16px rgba(19,122,110,.2);border-color:rgba(19,122,110,.2)}
.apply-path:hover::before{top:-30%;right:-30%}
.ap-number{font-family:var(--serif);font-size:4.5rem;font-weight:800;background:linear-gradient(135deg,var(--teal),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:.75;margin-bottom:1.5rem;opacity:.9}
.ap-icon{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;margin-bottom:2rem;
  background:linear-gradient(135deg,rgba(19,122,110,.2),rgba(45,106,60,.12));color:var(--teal);flex:none;position:relative;z-index:1}
.ap-icon .flat-icon{width:2rem;height:2rem;stroke-width:1.5}
.ap-content{position:relative;z-index:1}
.ap-content h3{font-family:var(--serif);font-weight:700;font-size:1.75rem;color:var(--ink);margin-bottom:1.2rem;letter-spacing:-.01em}
.ap-details > p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:1.6rem;line-height:1.7;font-weight:500}
.ap-checklist{display:flex;flex-direction:column;gap:1rem}
.ap-checklist li{display:flex;gap:1rem;align-items:flex-start;color:var(--ink-soft);font-size:.98rem;line-height:1.5;font-weight:500}
.ap-checklist li::before{content:"→";flex:none;color:var(--teal);font-weight:800;font-size:1.1rem;margin-top:.05rem;width:20px;text-align:center}

/* ---- activities list ---- */
.activities-list{display:flex;flex-direction:column;gap:2rem}
.activity-item{display:flex;gap:2rem;align-items:flex-start}
.ai-number{flex:none;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--green-d));color:#fff;font-family:var(--serif);
  font-weight:800;font-size:1.4rem;box-shadow:0 12px 30px -8px rgba(19,122,110,.3);flex-shrink:0}
.ai-content{flex:1}
.ai-content h4{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:.6rem;letter-spacing:-.01em}
.ai-content p{color:var(--ink-soft);font-size:.98rem;line-height:1.6;font-weight:500}

/* ---- timeline ---- */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;position:relative;margin-top:3rem}
.timeline::before{content:"";position:absolute;top:32px;left:5%;right:5%;height:3px;background:linear-gradient(90deg,var(--teal),var(--green),var(--teal));z-index:0}
.timeline-step{position:relative;background:linear-gradient(135deg,#fff 0%,#fafbf8 100%);border:1.5px solid rgba(19,122,110,.12);border-radius:24px;padding:2.2rem 1.8rem;
  text-align:center;transition:all .4s var(--ease-out);z-index:1;overflow:hidden}
.timeline-step::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(19,122,110,.1),transparent);opacity:0;transition:opacity .4s var(--ease-out)}
.timeline-step:hover{transform:translateY(-8px);box-shadow:0 24px 60px -14px rgba(19,122,110,.18);border-color:rgba(19,122,110,.2)}
.timeline-step:hover::before{opacity:1}
.ts-marker{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--green-d));color:#fff;
  font-family:var(--serif);font-weight:800;font-size:1.3rem;border:5px solid var(--cream);box-shadow:0 8px 24px rgba(19,122,110,.25);z-index:2}
.ts-title{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--ink);margin:2rem 0 .8rem;position:relative;z-index:1;letter-spacing:-.01em}
.ts-desc{color:var(--ink-soft);font-size:.93rem;line-height:1.6;position:relative;z-index:1;font-weight:500}

/* ---- grid-2 helper ---- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.grid-2 > div > h3{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--ink);margin-bottom:2rem;letter-spacing:-.01em}

/* ---- split media layout improvements ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem);align-items:center}
.split .media{position:relative;display:flex;flex-direction:column;align-items:center}
.split .media img{border-radius:28px;box-shadow:0 32px 80px -16px rgba(19,122,110,.25);border:1px solid rgba(19,122,110,.1);transition:transform .5s var(--ease-out),box-shadow .5s;width:100%}
.split .media:hover img{transform:scale(1.03);box-shadow:0 40px 100px -20px rgba(19,122,110,.3)}
.split .prose{display:flex;flex-direction:column;gap:2rem}
.split .prose h2{font-family:var(--serif);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.split .eyebrow{color:var(--teal);margin-bottom:.5rem}

/* ---- cta band improvements ---- */
.cta-band{text-align:center;position:relative;background:linear-gradient(135deg,#fff 0%,#fafbf8 100%);border:1.5px solid rgba(19,122,110,.12);border-radius:28px;padding:3.5rem 3rem;
  box-shadow:0 24px 60px -20px rgba(19,122,110,.1);transition:all .4s var(--ease-out);overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at -20% 120%,rgba(19,122,110,.08),transparent 50%);pointer-events:none}
.cta-band:hover{transform:translateY(-8px);box-shadow:0 32px 80px -16px rgba(19,122,110,.18);border-color:rgba(19,122,110,.2)}
.cta-band h2{font-family:var(--serif);font-size:clamp(1.9rem,3.5vw,2.5rem);font-weight:700;color:var(--ink);margin-bottom:1rem;position:relative;z-index:1;letter-spacing:-.01em}
.cta-band p{color:var(--ink-soft);font-size:1.08rem;margin-bottom:2.5rem;max-width:60ch;margin-left:auto;margin-right:auto;position:relative;z-index:1;line-height:1.7;font-weight:500}

/* ---- checklist ---- */
.checklist{display:flex;flex-direction:column;gap:1.2rem}
.checklist li{display:flex;gap:1rem;align-items:flex-start;color:var(--ink-soft);font-size:.98rem;line-height:1.6;font-weight:500}
.checklist li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--green-d));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.75rem;margin-top:.15rem;flex-shrink:0}
.checklist li strong{color:var(--ink);font-weight:600}

/* ---- hero actions ---- */
.hero-actions{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;justify-content:center}

/* ---- responsive adjustments ---- */
@media(max-width:1100px){
  .quick-facts-grid{grid-template-columns:repeat(2,1fr)}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .apply-paths{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr;gap:3rem}
  .timeline{grid-template-columns:repeat(2,1fr);margin-top:1.5rem;gap:1rem}
  .timeline::before{left:5%;right:5%;top:40px}
  .timeline-step{margin-top:1rem}
  .ts-marker{top:-22px}
}

@media(max-width:768px){
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split .media{grid-row:1;order:1}
  .split .prose{order:2}
  .quick-facts-grid{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .apply-paths{gap:1.8rem}
  .timeline{grid-template-columns:1fr;gap:1.5rem}
  .timeline::before{left:30px;top:0;bottom:0;height:auto;width:2px;right:auto}
  .timeline-step{margin-left:3rem;padding:2rem 1.5rem}
  .ts-marker{top:0;left:-27px;width:48px;height:48px;font-size:1.1rem}
  .hero-cta-quick{gap:1rem}
  .hero-actions{flex-direction:column;gap:.8rem;margin-top:1rem}
  .hero-actions .btn{width:100%;justify-content:center}
  .activity-item{gap:1.5rem}
}
}
}

/* =================================================================
   RESOURCES — News & Articles · Press · Gallery · Awards · Reports
   Shared component system for the Resources section
   ================================================================= */

/* ---- section intro / heads ---- */
.res-lead{font-size:1.12rem;color:var(--ink-soft);max-width:66ch;line-height:1.85}
.sec-head{margin-bottom:2.6rem}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.015em}
.sec-head p{color:var(--ink-soft);font-size:1.02rem;max-width:60ch;margin-top:.7rem}

/* ---- filter chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 2.4rem}
.chip{padding:.62rem 1.3rem;border-radius:100px;font-size:.85rem;font-weight:700;letter-spacing:.02em;
  background:#fff;color:var(--ink-soft);border:1.5px solid var(--line);transition:.3s var(--ease)}
.chip:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.chip.active{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 10px 24px -12px rgba(19,122,110,.6)}

/* ---- featured story ---- */
.feature-story{display:grid;grid-template-columns:1.12fr .88fr;background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.fs-media{position:relative;min-height:400px}
.fs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-flag{position:absolute;top:1.2rem;left:1.2rem;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gold);color:var(--ink);font-weight:800;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.5rem 1rem;border-radius:100px}
.fs-body{padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:center}
.fs-meta{display:flex;gap:.8rem;align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ochre);margin-bottom:1rem}
.fs-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-soft);opacity:.4}
.fs-body h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;margin-bottom:1.1rem}
.fs-body p{color:var(--ink-soft);font-size:1rem;line-height:1.8;margin-bottom:1.7rem}

/* ---- article / card grid (extends .ncard) ---- */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.ncard .excerpt{font-size:.92rem;color:var(--ink-soft);line-height:1.65;margin-bottom:1rem}
.is-hidden{display:none !important}

/* ---- quick links strip ---- */
.res-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.res-quick a{display:flex;flex-direction:column;gap:.7rem;padding:1.7rem;background:#fff;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.35s var(--ease)}
.res-quick a:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.res-quick .rq-ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--teal-d));
  color:#fff;display:grid;place-items:center}
.res-quick .rq-ico .flat-icon{width:1.5rem;height:1.5rem;color:#fff;stroke:#fff}
.res-quick b{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.res-quick a > span:not(.rq-ico){font-size:.85rem;color:var(--ink-soft)}

/* ---- press / media coverage ---- */
.press-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.press-card{display:flex;gap:1.3rem;align-items:flex-start;padding:1.7rem;background:#fff;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.35s var(--ease)}
.press-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.pc-ico{flex:none;width:54px;height:54px;border-radius:14px;background:rgba(19,122,110,.1);color:var(--teal);
  display:grid;place-items:center}
.pc-ico .flat-icon{width:1.6rem;height:1.6rem}
.pc-body{min-width:0}
.pc-src{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre);
  display:block;margin-bottom:.35rem}
.press-card h3{font-size:1.06rem;font-family:var(--serif);margin-bottom:.4rem;line-height:1.3}
.press-card p{font-size:.89rem;color:var(--ink-soft);margin-bottom:.8rem;line-height:1.6}
.pc-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.85rem;color:var(--teal)}
.pc-link .flat-icon{width:1rem;height:1rem}

/* ---- gallery (masonry + lightbox) ---- */
.gallery{columns:3;column-gap:1rem}
.gallery figure{break-inside:avoid;margin:0 0 1rem;position:relative;border-radius:14px;overflow:hidden;
  cursor:pointer;box-shadow:var(--shadow-sm)}
.gallery img{width:100%;display:block;transition:transform .6s var(--ease)}
.gallery figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,39,31,.6),transparent 55%);opacity:0;transition:.4s}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure:hover::after{opacity:1}
.gallery figcaption{position:absolute;left:1rem;right:1rem;bottom:.9rem;color:#fff;font-weight:600;font-size:.9rem;
  z-index:2;opacity:0;transform:translateY(8px);transition:.4s}
.gallery figure:hover figcaption{opacity:1;transform:none}
.g-zoom{position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;z-index:2;opacity:0;transition:.4s}
.gallery figure:hover .g-zoom{opacity:1}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,20,15,.93);display:none;place-items:center;
  padding:2rem;backdrop-filter:blur(6px)}
.lightbox.open{display:grid}
.lightbox img{max-width:min(92vw,1100px);max-height:84vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.14);color:#fff;border-radius:50%;
  display:grid;place-items:center;transition:.3s;backdrop-filter:blur(6px);line-height:1}
.lb-close{top:1.5rem;right:1.5rem;width:46px;height:46px;font-size:1.6rem}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.9rem}
.lb-prev{left:1.5rem}.lb-next{right:1.5rem}
.lb-close:hover,.lb-nav:hover{background:var(--gold);color:var(--ink)}

/* ---- reports list ---- */
.report-cat{margin-top:3.2rem}
.report-cat > h3{font-family:var(--serif);font-size:1.4rem;margin-bottom:.25rem;display:flex;align-items:center;gap:.7rem}
.report-cat > h3 .flat-icon{color:var(--teal);width:1.4rem;height:1.4rem}
.report-cat .rc-sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:1.4rem}
.report-list{display:flex;flex-direction:column;gap:.9rem}
.report-row{display:flex;gap:1.3rem;align-items:center;padding:1.25rem 1.5rem;background:#fff;border-radius:14px;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.35s var(--ease)}
.report-row:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:transparent}
.rr-ico{flex:none;width:48px;height:58px;border-radius:8px;
  background:linear-gradient(135deg,rgba(19,122,110,.14),rgba(19,122,110,.05));color:var(--teal);
  display:grid;place-items:center}
.rr-ico .flat-icon{width:1.5rem;height:1.5rem}
.rr-main{flex:1;min-width:0}
.rr-tag{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ochre)}
.rr-main h4{font-size:1.02rem;font-family:var(--serif);font-weight:600;line-height:1.3;margin:.2rem 0}
.rr-main p{font-size:.85rem;color:var(--ink-soft);margin:0}
.rr-dl{flex:none}

/* ---- recognition timeline & cards (awards) ---- */
.rtl{position:relative;max-width:840px;margin:0 auto}
.rtl::before{content:"";position:absolute;left:22px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--teal),var(--gold))}
.rtl-item{position:relative;padding:0 0 2.4rem 4rem}
.rtl-item:last-child{padding-bottom:0}
.rtl-dot{position:absolute;left:8px;top:0;width:30px;height:30px;border-radius:50%;background:#fff;
  border:3px solid var(--teal);display:grid;place-items:center;color:var(--teal)}
.rtl-dot .flat-icon{width:.95rem;height:.95rem}
.rtl-year{font-size:.78rem;font-weight:800;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.rtl-item h3{font-family:var(--serif);font-size:1.22rem;margin:.25rem 0 .5rem}
.rtl-item p{color:var(--ink-soft);font-size:.95rem;line-height:1.7;margin:0}
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.rec-card{padding:2rem;background:#fff;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:.35s var(--ease)}
.rec-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.rec-ico{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--teal),var(--teal-d));
  color:#fff;display:grid;place-items:center;margin-bottom:1.2rem}
.rec-ico .flat-icon{width:1.7rem;height:1.7rem}
.rec-card h3{font-family:var(--serif);font-size:1.18rem;margin-bottom:.5rem}
.rec-card p{color:var(--ink-soft);font-size:.92rem;line-height:1.65}

/* ---- resources responsive ---- */
@media(max-width:960px){
  .feature-story{grid-template-columns:1fr}
  .fs-media{min-height:260px}
  .res-grid,.press-grid,.rec-grid{grid-template-columns:repeat(2,1fr)}
  .res-quick{grid-template-columns:repeat(2,1fr)}
  .gallery{columns:2}
}
@media(max-width:640px){
  .res-grid,.press-grid,.rec-grid,.res-quick{grid-template-columns:1fr}
  .gallery{columns:1}
  .report-row{flex-wrap:wrap}
  .rr-dl{width:100%}
  .rr-dl .btn{width:100%;justify-content:center}
}

/* =================================================================
   INTERNSHIP PROGRAM — editorial redesign
   ================================================================= */

/* ---- hero ---- */
.ip-hero{position:relative;min-height:min(86vh,740px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;isolation:isolate;margin-top:-84px;padding-top:84px}
.ip-hero .page-hero-bg{position:absolute;inset:0;z-index:-2}
.ip-hero .page-hero-bg img{width:100%;height:100%;object-fit:cover}
.ip-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(9,30,24,.9) 0%,rgba(13,90,81,.6) 45%,rgba(17,39,31,.35) 100%)}
.ip-hero .container{position:relative;z-index:2;padding-block:clamp(5rem,11vw,8rem) clamp(4.5rem,8vw,7rem)}
.ip-hero-inner{max-width:720px}
.ip-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.1rem;border-radius:100px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:1.5rem}
.ip-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold);animation:pulse 2.4s infinite}
.ip-hero h1{font-family:var(--serif);font-weight:600;line-height:1.03;letter-spacing:-.02em;
  font-size:clamp(2.6rem,6.2vw,4.6rem);text-shadow:0 2px 14px rgba(0,0,0,.2)}
.ip-hero h1 .accent{color:var(--gold);font-style:italic}
.ip-hero-sub{font-size:clamp(1.05rem,1.8vw,1.28rem);color:rgba(255,255,255,.9);max-width:56ch;
  line-height:1.7;margin:1.4rem 0 2.2rem}
.ip-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.ip-hero-meta{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;font-size:.85rem;
  font-weight:600;color:rgba(255,255,255,.85)}
.ip-hero-meta .flat-icon{width:1.05rem;height:1.05rem;color:var(--gold);vertical-align:-2px;margin-right:.35rem}
.ip-hero-meta .sep{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ---- at-a-glance floating card ---- */
.ip-glance{position:relative;z-index:6;margin-top:-4.5rem}
.ip-glance-inner{background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.ip-glance-item{display:flex;gap:1rem;align-items:center;padding:1.7rem 1.9rem;border-right:1px solid var(--line)}
.ip-glance-item:last-child{border-right:0}
.ig-ico{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff}
.ig-ico .flat-icon{width:1.4rem;height:1.4rem}
.ig-k{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ig-v{font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--ink);line-height:1.15;margin-top:.15rem}

/* ---- reusable left section head ---- */
.ip-head{max-width:60ch;margin-bottom:2.8rem}
.ip-head h2{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4vw,2.9rem);margin-top:.3rem}
.ip-head p{color:var(--ink-soft);font-size:1.05rem;line-height:1.8;margin-top:.9rem}

/* ---- overview: intro + aim panel ---- */
.ip-overview{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.ip-overview .lead{font-size:1.12rem;color:var(--ink-soft);line-height:1.85}
.ip-aim{background:linear-gradient(140deg,var(--teal),var(--teal-d));color:#fff;border-radius:26px;
  padding:clamp(2rem,4vw,3rem);box-shadow:var(--shadow);position:relative;overflow:hidden}
.ip-aim::after{content:"";position:absolute;right:-30%;top:-40%;width:80%;height:120%;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%)}
.ip-aim h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;position:relative;z-index:1}
.ip-aim > p{opacity:.9;font-size:.98rem;margin-top:.5rem;position:relative;z-index:1}
.ip-aim ul{display:flex;flex-direction:column;gap:1.15rem;margin-top:1.6rem;position:relative;z-index:1}
.ip-aim li{display:flex;gap:.9rem;align-items:flex-start;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.95)}
.ip-aim li .chk{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;margin-top:.05rem}
.ip-aim li .chk .flat-icon{width:.95rem;height:.95rem;color:#fff}

/* ---- requirements panels ---- */
.ip-panels{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.ip-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(1.8rem,3vw,2.6rem);box-shadow:var(--shadow-sm)}
.ip-panel .ip-panel-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.ip-panel .ip-panel-head .flat-icon{width:1.5rem;height:1.5rem;color:var(--teal)}
.ip-panel h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:0}
.ip-panel.is-teal{background:linear-gradient(150deg,rgba(19,122,110,.07),rgba(19,122,110,.02))}

/* ---- responsive ---- */
@media(max-width:960px){
  .ip-glance-inner{grid-template-columns:1fr 1fr}
  .ip-glance-item:nth-child(2){border-right:0}
  .ip-glance-item:nth-child(1),.ip-glance-item:nth-child(2){border-bottom:1px solid var(--line)}
  .ip-overview{grid-template-columns:1fr;gap:2.5rem}
  .ip-panels{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ip-glance{margin-top:-2.5rem}
  .ip-glance-inner{grid-template-columns:1fr}
  .ip-glance-item{border-right:0;border-bottom:1px solid var(--line)}
  .ip-glance-item:last-child{border-bottom:0}
  .ip-hero-actions .btn{flex:1;justify-content:center}
}

/* =================================================================
   THEMATIC AREAS — master template (soft / tactile)
   Per-page accent set via  <main class="tm" style="--accent:…;--accent-d:…">
   ================================================================= */
.tm{--accent:var(--teal);--accent-d:var(--teal-d);--r:28px;
  --soft:0 30px 70px -38px color-mix(in srgb,var(--accent) 55%,transparent),0 6px 20px rgba(17,39,31,.05)}

/* ---- hero ---- */
.tm-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;margin-top:-84px;
  padding:calc(84px + clamp(4.5rem,10vw,7.5rem)) 0 clamp(4rem,8vw,6rem);border-radius:0 0 42px 42px}
.tm-hero-bg{position:absolute;inset:0;z-index:-2}
.tm-hero-bg img{width:100%;height:100%;object-fit:cover}
.tm-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent-d) 94%,#000) 0%,color-mix(in srgb,var(--accent) 72%,transparent) 52%,rgba(17,39,31,.4) 100%)}
.tm-hero .eyebrow{color:#fff}
.tm-hero-inner{max-width:760px}
.tm-hero h1{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(2.5rem,6vw,4.4rem);margin:.3rem 0 1.2rem;text-shadow:0 2px 14px rgba(0,0,0,.18)}
.tm-hero .tm-hero-lead{max-width:62ch;color:rgba(255,255,255,.92);font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.75}
.tm-chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.1rem}
.tm-chips a{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);
  font-weight:600;font-size:.85rem;color:#fff;transition:.3s var(--ease)}
.tm-chips a:hover{background:#fff;color:var(--accent-d);transform:translateY(-2px)}
.tm-chips a .flat-icon{width:1rem;height:1rem}

/* ---- section head ---- */
.tm-head{max-width:60ch;margin-bottom:2.6rem}
.tm-head .eyebrow{color:var(--accent)}
.tm-head .eyebrow::before{background:var(--gold)}
.tm-head h2{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4vw,2.9rem);margin-top:.3rem}
.tm-head p{color:var(--ink-soft);font-size:1.05rem;line-height:1.8;margin-top:.9rem}

/* ---- intro ---- */
.tm-intro{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.tm-intro .tm-lead{font-size:1.1rem;color:var(--ink-soft);line-height:1.9}
.tm-intro .tm-lead p{margin-bottom:1.1rem}
.tm-intro .tm-lead p:first-child::first-letter{}
.tm-figure{position:relative}
.tm-figure > img{border-radius:var(--r);box-shadow:var(--soft);width:100%;aspect-ratio:4/3.4;object-fit:cover}
.tm-figfloat{position:absolute;left:-14px;bottom:-18px;display:flex;align-items:center;gap:.8rem;
  background:#fff;border-radius:18px;padding:.9rem 1.2rem;box-shadow:var(--shadow);border:1px solid var(--line)}
.tm-figfloat .fi-ico{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff}
.tm-figfloat .fi-ico .flat-icon{width:1.4rem;height:1.4rem}
.tm-figfloat small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.tm-figfloat b{font-family:var(--serif);font-size:1rem;color:var(--ink)}

/* ---- focus cards ---- */
.tm-focus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem}
.tm-card{background:#fff;border-radius:var(--r);padding:2.2rem;border:1px solid var(--line);
  box-shadow:0 20px 50px -34px rgba(17,39,31,.3);transition:.4s var(--ease);display:flex;flex-direction:column}
.tm-card:hover{transform:translateY(-8px);box-shadow:var(--soft)}
.tm-ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin-bottom:1.4rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff;
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 65%,transparent)}
.tm-ico .flat-icon{width:1.8rem;height:1.8rem}
.tm-card h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin-bottom:.55rem;line-height:1.2}
.tm-card p{color:var(--ink-soft);font-size:.96rem;line-height:1.7}
.tm-subpills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.tm-subpills span{padding:.34rem .8rem;border-radius:100px;font-size:.75rem;font-weight:700;
  background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent-d)}

/* ---- flagship feature split ---- */
.tm-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.tm-feature .tm-media img{border-radius:var(--r);box-shadow:var(--soft);width:100%;aspect-ratio:4/3.2;object-fit:cover}
.tm-feature.rev .tm-media{order:2}
.tm-feature .tm-body h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.12;margin:.3rem 0 1rem}
.tm-feature .tm-body p{color:var(--ink-soft);font-size:1.02rem;line-height:1.8;margin-bottom:1rem}
.tm-flist{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
.tm-flist li{display:flex;gap:1rem;align-items:flex-start}
.tm-flist li .fk{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent-d);font-weight:800;font-family:var(--serif);font-size:.95rem}
.tm-flist li b{font-family:var(--serif);color:var(--ink);font-weight:600}
.tm-flist li p{margin:.15rem 0 0;font-size:.95rem;color:var(--ink-soft);line-height:1.6}

/* ---- approach panel ---- */
.tm-approach{background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 7%,var(--cream)),var(--cream))}
.tm-panel{background:linear-gradient(140deg,var(--accent),var(--accent-d));color:#fff;border-radius:34px;
  padding:clamp(2.5rem,5vw,4rem);box-shadow:var(--soft);position:relative;overflow:hidden}
.tm-panel::after{content:"";position:absolute;right:-15%;top:-40%;width:60%;height:150%;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.tm-panel .tm-panel-head{position:relative;z-index:1;max-width:60ch;margin-bottom:2rem}
.tm-panel .eyebrow{color:var(--gold)}
.tm-panel .eyebrow::before{background:var(--gold)}
.tm-panel h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.12;color:#fff;margin-top:.3rem}
.tm-panel > p{position:relative;z-index:1;opacity:.92;max-width:60ch;line-height:1.8;margin-top:.8rem}
.tm-pillars{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;margin-top:2.2rem}
.tm-pillar{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:1.6rem;backdrop-filter:blur(8px)}
.tm-pillar .n{font-family:var(--serif);font-size:1.7rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:.6rem}
.tm-pillar .flat-icon{width:1.7rem;height:1.7rem;color:var(--gold);margin-bottom:.7rem}
.tm-pillar h4{font-family:var(--serif);font-weight:600;font-size:1.12rem;margin-bottom:.4rem}
.tm-pillar p{font-size:.92rem;opacity:.9;line-height:1.6}

/* ---- explore other themes ---- */
.tm-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tm-rel{position:relative;display:block;border-radius:var(--r);overflow:hidden;min-height:220px;color:#fff;
  box-shadow:0 20px 50px -34px rgba(17,39,31,.35);transition:.45s var(--ease)}
.tm-rel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tm-rel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,25,20,.85),rgba(9,25,20,.15) 65%)}
.tm-rel:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tm-rel:hover img{transform:scale(1.07)}
.tm-rel .cap{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;z-index:2}
.tm-rel .cap small{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.tm-rel .cap b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-top:.25rem;line-height:1.2}
.tm-rel .cap .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.85rem;font-weight:700}

/* ---- cta ---- */
.tm-cta-inner{background:linear-gradient(135deg,var(--accent),var(--accent-d));border-radius:38px;color:#fff;
  padding:clamp(3rem,6vw,5rem);text-align:center;box-shadow:var(--soft);position:relative;overflow:hidden}
.tm-cta-inner::after{content:"";position:absolute;left:-10%;bottom:-60%;width:50%;height:140%;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.tm-cta-inner > *{position:relative;z-index:1}
.tm-cta-inner .eyebrow{color:var(--gold);justify-content:center}
.tm-cta-inner .eyebrow::after{content:"";width:30px;height:2px;background:var(--gold)}
.tm-cta-inner h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,3rem);color:#fff;margin:.3rem auto 1.1rem;max-width:20ch}
.tm-cta-inner p{opacity:.95;font-size:1.1rem;line-height:1.75;max-width:60ch;margin:0 auto 2rem}
.tm-cta-actions{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap}

@media(max-width:900px){
  .tm-intro{grid-template-columns:1fr;gap:2.5rem}
  .tm-feature{grid-template-columns:1fr;gap:2.2rem}
  .tm-feature.rev .tm-media{order:0}
  .tm-related-grid{grid-template-columns:1fr}
}

/* ---- project detail extras (hero meta pills + impact stats) ---- */
.tm-meta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.tm-meta .m{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;border-radius:100px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);
  font-size:.82rem;font-weight:600;color:#fff}
.tm-meta .m .flat-icon{width:1rem;height:1rem;color:var(--gold)}
.tm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.3rem}
.tm-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.9rem;
  box-shadow:0 20px 50px -34px rgba(17,39,31,.3);transition:.4s var(--ease)}
.tm-stat:hover{transform:translateY(-6px);box-shadow:var(--soft)}
.tm-stat .v{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,4vw,2.7rem);color:var(--accent);line-height:1}
.tm-stat .k{color:var(--ink-soft);font-size:.92rem;margin-top:.55rem;line-height:1.5}

/* =================================================================
   AGRICULTURE PROJECTS — modern / organic system (pj-*)
   Per-page accent: <main class="pj" style="--a:…;--a-d:…">
   ================================================================= */
.pj{--a:var(--green);--a-d:var(--green-d);--rr:32px}
.pj ::selection{background:var(--a);color:#fff}
@keyframes blobMorph{
  0%,100%{border-radius:58% 42% 61% 39% / 45% 47% 53% 55%}
  33%{border-radius:42% 58% 38% 62% / 56% 42% 58% 44%}
  66%{border-radius:53% 47% 52% 48% / 41% 60% 40% 59%}
}
@keyframes pjMarquee{to{transform:translateX(-50%)}}

/* ---- hero ---- */
.pj-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3.5rem,7vw,5.5rem)}
.pj-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none}
.pj-orb.o1{width:460px;height:460px;background:var(--a);top:-170px;right:-90px;opacity:.26}
.pj-orb.o2{width:400px;height:400px;background:var(--gold);bottom:-200px;left:-140px;opacity:.16}
.pj-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pj-kicker{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.1rem;border-radius:100px;
  background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a-d);font-weight:700;font-size:.8rem;
  letter-spacing:.04em;border:1px solid color-mix(in srgb,var(--a) 25%,transparent)}
.pj-kicker .flat-icon{width:1.05rem;height:1.05rem}
.pj-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.04;
  letter-spacing:-.02em;margin:1.3rem 0 1.1rem}
.pj-hero h1 em{font-style:italic;color:var(--a)}
.pj-hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-soft);line-height:1.75;max-width:54ch}
.pj-meta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.pj-meta .m{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:100px;padding:.55rem 1.1rem;box-shadow:var(--shadow-sm)}
.pj-meta .m .flat-icon{width:1.05rem;height:1.05rem;color:var(--a)}
.pj-hero-actions{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}

/* organic hero image */
.pj-figure{position:relative;max-width:520px;margin-inline:auto}
.pj-figure .blob{position:relative;border-radius:58% 42% 61% 39% / 45% 47% 53% 55%;overflow:hidden;
  box-shadow:0 44px 100px -34px color-mix(in srgb,var(--a) 55%,transparent);animation:blobMorph 20s ease-in-out infinite}
.pj-figure .blob img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.pj-figure .leaf{position:absolute;top:-6%;right:2%;width:74px;height:74px;color:var(--a);opacity:.22;transform:rotate(18deg);z-index:-1}
.pj-emblem{position:absolute;bottom:4%;left:-4%;background:#fff;border-radius:22px;padding:1rem 1.3rem;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.9rem;border:1px solid var(--line)}
.pj-emblem .e-ico{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--a),var(--a-d));color:#fff}
.pj-emblem .e-ico .flat-icon{width:1.4rem;height:1.4rem}
.pj-emblem .v{font-family:var(--serif);font-weight:700;font-size:1.45rem;color:var(--a-d);line-height:1}
.pj-emblem .k{font-size:.72rem;color:var(--ink-soft);font-weight:600}

/* ---- spec bar ---- */
.pj-spec{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.pj-spec .s{display:flex;gap:.9rem;align-items:center;padding:1.5rem 1.6rem;border-right:1px solid var(--line)}
.pj-spec .s:last-child{border-right:0}
.pj-spec .s-ico{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a-d)}
.pj-spec .s-ico .flat-icon{width:1.35rem;height:1.35rem}
.pj-spec .s small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.pj-spec .s b{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.2}

/* ---- section head ---- */
.pj-head{max-width:60ch;margin-bottom:2.6rem}
.pj-ey{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--a);margin-bottom:1rem}
.pj-ey::before{content:"";width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--a);transform:rotate(45deg)}
.pj-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.015em}
.pj-head p{color:var(--ink-soft);font-size:1.05rem;line-height:1.8;margin-top:.8rem}

/* ---- overview + pullquote ---- */
.pj-lead-lg{font-size:clamp(1.15rem,2vw,1.5rem);font-family:var(--serif);color:var(--ink);line-height:1.5;max-width:34ch}
.pj-quote{border-left:4px solid var(--a);padding:.4rem 0 .4rem 1.4rem;margin-top:1.6rem;color:var(--a-d);
  font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.6}

/* ---- bento grid ---- */
.pj-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;grid-auto-rows:minmax(160px,auto)}
.pj-tile{position:relative;overflow:hidden;border-radius:var(--rr);padding:1.9rem;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 44px -32px rgba(17,39,31,.3);transition:.4s var(--ease)}
.pj-tile:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(17,39,31,.4)}
.pj-tile.col2{grid-column:span 2}.pj-tile.col3{grid-column:span 3}.pj-tile.col4{grid-column:span 4}.pj-tile.col6{grid-column:span 6}
.pj-tile.row2{grid-row:span 2}
.pj-tile .t-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a-d)}
.pj-tile .t-ico .flat-icon{width:1.55rem;height:1.55rem}
.pj-tile h3{font-family:var(--serif);font-weight:600;font-size:1.22rem;margin-bottom:.4rem;line-height:1.2}
.pj-tile p{color:var(--ink-soft);font-size:.93rem;line-height:1.6}
.pj-tile .big{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,4.5vw,3.4rem);line-height:1;color:var(--a-d);margin-top:auto}
.pj-tile.accent{background:linear-gradient(140deg,var(--a),var(--a-d));border-color:transparent;color:#fff}
.pj-tile.accent .t-ico{background:rgba(255,255,255,.18);color:#fff}
.pj-tile.accent h3{color:#fff}.pj-tile.accent p{color:rgba(255,255,255,.9)}.pj-tile.accent .big{color:#fff}
.pj-tile.img{padding:0;justify-content:flex-end;min-height:200px}
.pj-tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-tile.img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,25,20,.82),transparent 62%)}
.pj-tile.img .cap{position:relative;z-index:2;color:#fff;padding:1.7rem}
.pj-tile.img .cap b{font-family:var(--serif);font-weight:600;font-size:1.2rem;display:block}
.pj-tile.img .cap small{font-size:.8rem;opacity:.85}

/* ---- impact stats ---- */
.pj-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem}
.pj-statcard{position:relative;overflow:hidden;padding:2.2rem;border-radius:var(--rr);background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 44px -32px rgba(17,39,31,.3)}
.pj-statcard::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;
  background:color-mix(in srgb,var(--a) 12%,transparent);top:-46px;right:-46px}
.pj-statcard .n{position:relative;font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);color:var(--a-d);line-height:1}
.pj-statcard .n small{font-size:.5em;font-weight:700}
.pj-statcard .l{position:relative;color:var(--ink-soft);margin-top:.6rem;line-height:1.5;font-size:.95rem}

/* ---- marquee ---- */
.pj-marquee{overflow:hidden;padding:1.15rem 0;border-block:1px solid var(--line);background:#fff}
.pj-marquee .track{display:flex;gap:2.8rem;width:max-content;animation:pjMarquee 28s linear infinite}
.pj-marquee .track span{display:inline-flex;align-items:center;gap:2.8rem;font-family:var(--serif);
  font-size:1.25rem;color:var(--ink);white-space:nowrap;opacity:.85}
.pj-marquee .track span::after{content:"✦";color:var(--a)}

/* ---- CTA ---- */
.pj-cta-inner{position:relative;overflow:hidden;border-radius:40px;color:#fff;
  background:linear-gradient(135deg,var(--a),var(--a-d));padding:clamp(3rem,6vw,5rem);text-align:center}
.pj-cta-inner .c-blob{position:absolute;width:340px;height:340px;background:rgba(255,255,255,.1);
  border-radius:58% 42% 61% 39% / 45% 47% 53% 55%;animation:blobMorph 16s ease-in-out infinite}
.pj-cta-inner .c-blob.b1{top:-120px;right:-80px}
.pj-cta-inner .c-blob.b2{bottom:-160px;left:-100px;animation-duration:22s}
.pj-cta-inner > *{position:relative;z-index:1}
.pj-cta-inner h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,3rem);margin:0 auto 1rem;max-width:22ch}
.pj-cta-inner p{opacity:.95;font-size:1.1rem;line-height:1.7;max-width:56ch;margin:0 auto 2rem}
.pj-cta-actions{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap}

@media(max-width:900px){
  .pj-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .pj-spec{grid-template-columns:1fr 1fr}
  .pj-spec .s:nth-child(2){border-right:0}
  .pj-spec .s:nth-child(1),.pj-spec .s:nth-child(2){border-bottom:1px solid var(--line)}
  .pj-bento{grid-template-columns:repeat(2,1fr)}
  .pj-tile.col3,.pj-tile.col4,.pj-tile.col6{grid-column:span 2}
  .pj-tile.col2{grid-column:span 1}
}
@media(max-width:560px){
  .pj-spec{grid-template-columns:1fr}
  .pj-spec .s{border-right:0;border-bottom:1px solid var(--line)}
  .pj-spec .s:last-child{border-bottom:0}
  .pj-bento{grid-template-columns:1fr}
  .pj-tile.col2,.pj-tile.col3,.pj-tile.col4,.pj-tile.col6{grid-column:span 1}
  .pj-tile.row2{grid-row:span 1}
  .pj-emblem{left:0}
}

/* ---- pj: finding bars (research variant) ---- */
@keyframes pjBarGrow{from{width:0}}
.pj-bars{display:flex;flex-direction:column;gap:1.5rem;max-width:660px}
.pj-bar .bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.55rem}
.pj-bar .bar-top .lbl{font-weight:600;color:var(--ink);font-size:.98rem}
.pj-bar .bar-top .val{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--a-d);line-height:1;flex:none}
.pj-bar .track{height:14px;border-radius:100px;background:color-mix(in srgb,var(--a) 12%,#fff);overflow:hidden}
.pj-bar .fill{height:100%;border-radius:100px;width:var(--w,0);
  background:linear-gradient(90deg,color-mix(in srgb,var(--a) 75%,#fff),var(--a-d));animation:pjBarGrow 1.3s var(--ease-out) both}
.pj-bar.muted .val{color:var(--ink-soft)}
.pj-bar.muted .fill{background:linear-gradient(90deg,#c9cfc6,#9aa39a)}

/* ---- pj: donor/partner chips ---- */
.pj-partners{display:flex;flex-wrap:wrap;gap:.8rem}
.pj-partners .p{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.3rem;border-radius:100px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-weight:600;font-size:.92rem;color:var(--ink)}
.pj-partners .p .flat-icon{width:1.1rem;height:1.1rem;color:var(--a)}

/* ---- pj: species / tag pills ---- */
.pj-pills{display:flex;flex-wrap:wrap;gap:.65rem}
.pj-pills span{padding:.5rem 1.1rem;border-radius:100px;font-weight:600;font-size:.88rem;
  background:color-mix(in srgb,var(--a) 10%,#fff);color:var(--a-d);border:1px solid color-mix(in srgb,var(--a) 22%,transparent)}

/* ---- pj: archive badge ---- */
.pj-kicker.is-past{background:color-mix(in srgb,var(--ink) 8%,#fff);color:var(--ink-soft);border-color:var(--line)}
.pj-kicker.is-past .flat-icon{color:var(--a)}

/* ---- pj: FAQ accordion (native details) ---- */
.pj-faq{display:flex;flex-direction:column;gap:1rem;max-width:840px}
.pj-faq details{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 14px 40px -34px rgba(17,39,31,.35);transition:.3s var(--ease)}
.pj-faq details[open]{box-shadow:var(--soft);border-color:color-mix(in srgb,var(--a) 30%,transparent)}
.pj-faq summary{list-style:none;cursor:pointer;padding:1.35rem 1.6rem;display:flex;align-items:center;gap:1rem;
  font-family:var(--serif);font-weight:600;font-size:1.08rem;color:var(--ink)}
.pj-faq summary::-webkit-details-marker{display:none}
.pj-faq summary .q{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a-d);font-weight:800;font-family:var(--sans);font-size:.9rem}
.pj-faq summary .chev{margin-left:auto;flex:none;width:22px;height:22px;color:var(--a);transition:transform .3s var(--ease)}
.pj-faq details[open] summary .chev{transform:rotate(180deg)}
.pj-faq .a{padding:0 1.6rem 1.5rem 4rem;color:var(--ink-soft);line-height:1.75;font-size:.98rem}
@media(max-width:560px){.pj-faq .a{padding-left:1.6rem}}

/* ---- pj: photo grid (masonry) ---- */
.pj-photos{columns:3;column-gap:1rem}
.pj-photos figure{break-inside:avoid;margin:0 0 1rem;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pj-photos img{width:100%;display:block;transition:transform .6s var(--ease)}
.pj-photos figure:hover img{transform:scale(1.05)}
@media(max-width:900px){.pj-photos{columns:2}}
@media(max-width:560px){.pj-photos{columns:1}}

/* =================================================================
   WHAT WE DO — clean editorial intro (per-page accent: --c / --cd)
   ================================================================= */
.wd-intro{--c:var(--teal);--cd:var(--teal-d);position:relative;overflow:hidden;
  padding:clamp(4rem,8vw,7rem) 0;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c) 6%,var(--cream)))}
.wd-intro::before{content:"";position:absolute;top:-120px;right:-100px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);pointer-events:none}
.wd-intro .container{position:relative;z-index:1}
.wd-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.wd-eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.15rem;border-radius:100px;
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cd);
  background:color-mix(in srgb,var(--c) 12%,#fff);border:1px solid color-mix(in srgb,var(--c) 24%,transparent);margin-bottom:1.4rem}
.wd-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.wd-intro h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.08;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:1.1rem}
.wd-intro .wd-lead{font-size:1.1rem;color:var(--ink-soft);line-height:1.85;max-width:52ch;margin-bottom:2rem}
.wd-cards{display:flex;flex-direction:column;gap:1.1rem}
.wd-card{display:flex;gap:1.2rem;align-items:flex-start;padding:1.5rem 1.6rem;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 40px -30px rgba(17,39,31,.4);transition:.35s var(--ease)}
.wd-card:hover{transform:translateX(6px);box-shadow:0 26px 55px -34px color-mix(in srgb,var(--c) 55%,transparent);
  border-color:color-mix(in srgb,var(--c) 22%,transparent)}
.wd-card .ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c),var(--cd));color:#fff;
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--c) 65%,transparent)}
.wd-card .ic .flat-icon{width:1.5rem;height:1.5rem}
.wd-card h4{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:var(--ink);margin-bottom:.3rem;line-height:1.2}
.wd-card p{font-size:.95rem;color:var(--ink-soft);line-height:1.6}
@media(max-width:860px){.wd-grid{grid-template-columns:1fr;gap:2.4rem}}

/* =================================================================
   HOMEPAGE — partners / trust strip + polish
   ================================================================= */
.trust{padding:clamp(2.4rem,4vw,3.2rem) 0;background:#fff;border-bottom:1px solid var(--line)}
.trust-label{text-align:center;font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.5rem}
.trust-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.trust-track{display:flex;gap:1rem;width:max-content;animation:scrollx 36s linear infinite}
.trust:hover .trust-track{animation-play-state:paused}
.trust-track span{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  padding:.7rem 1.45rem;border-radius:100px;background:var(--cream);border:1px solid var(--line);
  font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink)}
.trust-track span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
@media(prefers-reduced-motion:reduce){
  .trust-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .trust-marquee{-webkit-mask-image:none;mask-image:none}
}
/* flagship: soft separation + show copy on touch devices (was hover-only) */
.flagship .fcard{box-shadow:0 26px 58px -36px rgba(17,39,31,.55)}
@media(hover:none){.flagship .fcard p{max-height:200px;opacity:1;margin-bottom:1rem}}

/* =================================================================
   DONATION PAGE — 3-step giving flow
   ================================================================= */
.donate-wrap{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(1.8rem,4vw,3.2rem);align-items:start}

/* ---- form card ---- */
.dn-card{background:var(--paper);border:1px solid var(--line);border-radius:26px;
  padding:clamp(1.5rem,3.5vw,2.8rem);box-shadow:var(--shadow)}

/* ---- stepper ---- */
.dn-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;list-style:none}
.dn-steps[hidden],.dn-custom[hidden],.dn-impact[hidden],.dn-error[hidden],#dnForm[hidden],.dn-success[hidden]{display:none}
.dn-step-btn{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  padding:.55rem .6rem;border-radius:14px;transition:background .3s}
.dn-step-btn:hover{background:var(--cream)}
.dn-step-num{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.95rem;background:var(--cream-2);color:var(--ink-soft);
  border:2px solid var(--line);transition:all .35s var(--ease)}
.dn-step-txt{display:grid;line-height:1.25;min-width:0}
.dn-step-txt b{font-size:.9rem;color:var(--ink-soft);font-weight:700;white-space:nowrap}
.dn-step-txt small{font-size:.72rem;color:#93a29a;white-space:nowrap}
.dn-step.is-active .dn-step-num{background:var(--teal);border-color:var(--teal);color:#fff}
.dn-step.is-active .dn-step-txt b{color:var(--ink)}
.dn-step.is-done .dn-step-num{background:var(--gold);border-color:var(--gold);color:var(--ink);font-size:0}
.dn-step.is-done .dn-step-num::before{content:"✓";font-size:1rem}
.dn-progress{height:5px;border-radius:100px;background:var(--cream-2);margin:1.1rem 0 1.9rem;overflow:hidden}
.dn-progress span{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .5s var(--ease-out)}

/* ---- panels ---- */
.dn-panel{display:none;border:0}
.dn-panel.is-active{display:block;animation:dnFade .45s var(--ease-out)}
@keyframes dnFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dn-field-head{margin-bottom:1.6rem}
.dn-field-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.01em}
.dn-field-head p{color:var(--ink-soft);font-size:.94rem;margin-top:.35rem;max-width:52ch}

/* ---- step 1: frequency + currency ---- */
.dn-row-split{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.dn-seg{display:inline-flex;background:var(--cream-2);border-radius:100px;padding:.3rem;gap:.25rem}
.dn-seg-btn{padding:.6rem 1.25rem;border-radius:100px;font-weight:700;font-size:.9rem;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:.5rem;transition:all .3s var(--ease)}
.dn-seg-btn.is-on{background:var(--teal);color:#fff;box-shadow:0 8px 18px -8px rgba(19,122,110,.55)}
.dn-seg-tag{font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);border-radius:100px;padding:.15rem .5rem}
.dn-currency select,.dn-fund select,.dn-field select{
  width:100%;appearance:none;
  background:var(--paper) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233f5249' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  border:1.5px solid var(--line);border-radius:13px;padding:.85rem 2.6rem .85rem 1rem;
  font-family:inherit;font-size:.93rem;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .3s}
.dn-currency select:focus,.dn-fund select:focus,.dn-field select:focus{outline:none;border-color:var(--teal)}

/* ---- step 1: amount chips ---- */
.dn-amounts{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin-bottom:1.2rem}
.dn-amt{padding:1rem .5rem;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);
  font-weight:800;font-size:1.02rem;color:var(--ink);text-align:center;
  transition:all .3s var(--ease)}
.dn-amt:hover{border-color:var(--teal);transform:translateY(-2px)}
.dn-amt.is-on{background:var(--teal);border-color:var(--teal);color:#fff;
  box-shadow:0 14px 26px -12px rgba(19,122,110,.6)}
.dn-custom{margin-bottom:1.2rem}
.dn-custom label,.dn-fund>label,.dn-field>label{display:block;font-size:.8rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.45rem}
.dn-custom-input{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:13px;
  overflow:hidden;background:var(--paper);transition:border-color .3s}
.dn-custom-input:focus-within{border-color:var(--teal)}
.dn-custom-input span{padding:.85rem 0 .85rem 1rem;font-weight:800;color:var(--teal);font-size:1.05rem}
.dn-custom-input input{flex:1;border:0;padding:.85rem 1rem .85rem .5rem;font-family:inherit;
  font-size:1.05rem;font-weight:700;color:var(--ink);background:transparent}
.dn-custom-input input:focus{outline:none}
.dn-custom-input input.is-bad{color:#b3261e}
.dn-fund{margin-bottom:1.2rem}
.dn-impact{background:color-mix(in srgb,var(--teal) 8%,var(--cream));border:1px solid color-mix(in srgb,var(--teal) 22%,transparent);
  border-radius:13px;padding:.85rem 1.1rem;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.dn-impact b{color:var(--teal-d)}

/* ---- step 2: fields ---- */
.dn-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;margin-bottom:1.3rem}
.dn-span2{grid-column:1/-1}
.dn-field input,.dn-field textarea{width:100%;border:1.5px solid var(--line);border-radius:13px;
  padding:.85rem 1rem;font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  transition:border-color .3s}
.dn-field input:focus,.dn-field textarea:focus{outline:none;border-color:var(--teal)}
.dn-field input.is-bad,.dn-field select.is-bad{border-color:#b3261e;background:#fdf3f2}
.dn-field textarea{resize:vertical}
.dn-field label em{color:#b3261e;font-style:normal}
.dn-opt{text-transform:none;letter-spacing:0;font-weight:500;color:#93a29a}
.dn-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);
  margin-top:.6rem;cursor:pointer}
.dn-check input{margin-top:.28rem;accent-color:var(--teal);width:1rem;height:1rem;flex:none}

/* ---- step 3: review + payment ---- */
.dn-review{display:grid;gap:.65rem;background:var(--cream);border:1px solid var(--line);
  border-radius:16px;padding:1.15rem 1.3rem;margin-bottom:1.5rem}
.dn-review>div{display:flex;justify-content:space-between;gap:.35rem 1rem;font-size:.93rem;flex-wrap:wrap}
.dn-review dt{color:var(--ink-soft);font-weight:600}
.dn-review dd{font-weight:800;color:var(--ink);text-align:right;word-break:break-word}
.dn-pay{display:grid;gap:.7rem;margin-bottom:1.4rem}
.dn-pay-opt{position:relative}
.dn-pay-opt input{position:absolute;opacity:0;pointer-events:none}
.dn-pay-card{display:flex;align-items:center;gap:1rem;border:1.5px solid var(--line);border-radius:15px;
  padding:.95rem 1.15rem;cursor:pointer;transition:all .3s var(--ease);background:var(--paper)}
.dn-pay-card:hover{border-color:var(--teal)}
.dn-pay-opt input:checked+.dn-pay-card{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 6%,var(--paper));
  box-shadow:0 12px 26px -16px rgba(19,122,110,.5)}
.dn-pay-opt input:focus-visible+.dn-pay-card{outline:2px solid var(--teal);outline-offset:2px}
.dn-pay-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal)}
.dn-pay-ico .flat-icon{width:1.35rem;height:1.35rem}
.dn-pay-txt{display:grid;line-height:1.3}
.dn-pay-txt b{font-size:.96rem}
.dn-pay-txt small{font-size:.78rem;color:var(--ink-soft)}
.dn-secure{display:flex;gap:.6rem;align-items:flex-start;font-size:.83rem;color:var(--ink-soft);line-height:1.5}
.dn-secure .flat-icon{flex:none;width:1.15rem;height:1.15rem;color:var(--teal);margin-top:.1rem}
.dn-secure a{color:var(--teal);font-weight:700}
.dn-secure a:hover{color:var(--teal-d)}

/* ---- nav / errors ---- */
.dn-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.8rem}
.dn-back{font-weight:700;font-size:.92rem;color:var(--ink-soft);padding:.6rem .9rem;border-radius:10px;
  transition:color .3s,background .3s}
.dn-back:hover{color:var(--ink);background:var(--cream)}
.dn-error{color:#b3261e;background:#fdf3f2;border:1px solid #f2c9c5;border-radius:12px;
  padding:.75rem 1rem;font-size:.88rem;font-weight:600;margin-top:1.1rem}

/* ---- success ---- */
.dn-success{text-align:center;padding:1rem 0 .5rem;animation:dnFade .5s var(--ease-out)}
.dn-success-ico{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1.2rem;
  background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.dn-success-ico .flat-icon{width:2.1rem;height:2.1rem}
.dn-success h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3vw,2rem)}
.dn-success-sub{color:var(--ink-soft);max-width:46ch;margin:.6rem auto 1.5rem;font-size:.97rem}
.dn-success .dn-review{text-align:left;max-width:460px;margin-inline:auto}
.dn-success-note{font-size:.86rem;color:var(--ink-soft);margin-bottom:1.7rem}
.dn-success-note b{color:var(--ink)}
.dn-success-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.btn--ghost-ink{--bg:transparent;--fg:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost-ink::before{background:var(--ink)}
.btn--ghost-ink:hover{color:#fff}

/* ---- sidebar ---- */
.dn-side{position:sticky;top:110px;display:grid;gap:1.2rem}
.dn-summary{background:var(--ink);color:#fff;border-radius:22px;padding:1.5rem 1.6rem;
  box-shadow:var(--shadow)}
.dn-summary h3{font-family:var(--serif);font-weight:600;font-size:1.1rem;margin-bottom:1rem;color:#fff}
.dn-summary dl{display:grid;gap:.7rem}
.dn-summary dl>div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:.7rem}
.dn-summary dl>div:last-child{border-bottom:0;padding-bottom:0}
.dn-summary dt{color:rgba(255,255,255,.65)}
.dn-summary dd{font-weight:800;text-align:right;color:var(--gold)}
.dn-why,.dn-help{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:1.5rem 1.6rem;box-shadow:var(--shadow-sm)}
.dn-why h4,.dn-help h4{font-family:var(--serif);font-weight:600;font-size:1.02rem;margin-bottom:.9rem}
.dn-why ul{display:grid;gap:.9rem}
.dn-why li{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.dn-why li .flat-icon{flex:none;width:1.25rem;height:1.25rem;color:var(--teal);margin-top:.15rem}
.dn-why li b{color:var(--ink)}
.dn-help p{font-size:.88rem;color:var(--ink-soft);margin-bottom:.9rem;line-height:1.5}
.dn-help a{display:flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:700;color:var(--teal);
  padding:.3rem 0}
.dn-help a:hover{color:var(--teal-d)}

/* ---- responsive ---- */
@media(max-width:1020px){
  .donate-wrap{grid-template-columns:1fr}
  .dn-side{position:static;grid-template-columns:1fr 1fr;align-items:stretch}
  .dn-summary{grid-column:1/-1}
}
@media(max-width:680px){
  .dn-side{grid-template-columns:1fr}
  .dn-amounts{grid-template-columns:repeat(3,1fr)}
  .dn-grid2{grid-template-columns:1fr}
  .dn-steps{gap:.2rem}
  .dn-step-txt{display:none}
  .dn-step-btn{justify-content:center;padding:.4rem}
  .dn-nav{flex-wrap:wrap}
  .dn-row-split{flex-direction:column;align-items:stretch}
  .dn-seg{justify-content:center}
}

/* =================================================================
   PARTNERS & FUNDERS wall
   ================================================================= */
.partner-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(1.6rem,4vw,3.6rem);margin-top:2.6rem}
.partner-logos a{display:grid;place-items:center;height:66px;filter:grayscale(1);opacity:.6;transition:.35s var(--ease)}
.partner-logos a:hover{filter:none;opacity:1;transform:translateY(-3px)}
.partner-logos img{max-height:54px;max-width:180px;width:auto;object-fit:contain}
.partner-more-label{text-align:center;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:2.6rem}
.partner-more{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin:1rem auto 0;max-width:940px}
.partner-more span{padding:.5rem 1.1rem;border-radius:100px;background:var(--cream);border:1px solid var(--line);font-weight:600;font-size:.85rem;color:var(--ink-soft)}

/* =================================================================
   VOLUNTEER PAGE
   ================================================================= */
/* ---- why volunteer perks ---- */
.vt-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.vt-perk{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:2rem 1.8rem;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s;position:relative;overflow:hidden}
.vt-perk::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--c,var(--teal))}
.vt-perk:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.vt-perk-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:color-mix(in srgb,var(--c,var(--teal)) 13%,transparent);color:var(--c,var(--teal))}
.vt-perk-ico .flat-icon{width:1.6rem;height:1.6rem}
.vt-perk h3{font-family:var(--serif);font-weight:600;font-size:1.15rem;margin-bottom:.5rem}
.vt-perk p{font-size:.92rem;color:var(--ink-soft);line-height:1.6}

/* ---- role cards ---- */
.vt-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:2.4rem}
.vt-role{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s;display:flex;flex-direction:column}
.vt-role:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.vt-role img{width:100%;height:150px;object-fit:cover}
.vt-role-body{padding:1.4rem 1.4rem 1.6rem;position:relative;flex:1}
.vt-role-ico{position:absolute;top:-24px;left:1.3rem;width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;background:var(--c,var(--teal));color:#fff;
  box-shadow:0 12px 24px -10px color-mix(in srgb,var(--c,var(--teal)) 70%,transparent)}
.vt-role-ico .flat-icon{width:1.35rem;height:1.35rem}
.vt-role h3{font-family:var(--serif);font-weight:600;font-size:1.08rem;margin:1.1rem 0 .45rem}
.vt-role p{font-size:.87rem;color:var(--ink-soft);line-height:1.55}

/* ---- how it works band ---- */
.vt-how-band{background:linear-gradient(135deg,var(--ink),#1a3a2e)}
.vt-how{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.8rem}
.vt-how-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:1.9rem 1.7rem;color:#fff;transition:background .4s,transform .4s var(--ease-out)}
.vt-how-step:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.vt-how-step .n{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--gold);display:block;margin-bottom:.7rem}
.vt-how-step h3{font-family:var(--serif);font-weight:600;font-size:1.15rem;margin-bottom:.45rem}
.vt-how-step p{font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.6}

/* ---- application extras (reuses dn- form styles) ---- */
.vt-block{margin:1.3rem 0}
.vt-block-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.6rem}
.vt-block-label em{color:#b3261e;font-style:normal}
.vt-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.vt-chip input{position:absolute;opacity:0;pointer-events:none}
.vt-chip span{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;border-radius:100px;
  border:1.5px solid var(--line);background:var(--paper);font-weight:700;font-size:.88rem;color:var(--ink-soft);
  cursor:pointer;transition:all .3s var(--ease);user-select:none}
.vt-chip span .flat-icon{width:1.1rem;height:1.1rem}
.vt-chip span:hover{border-color:var(--teal);color:var(--ink)}
.vt-chip input:checked+span{background:var(--teal);border-color:var(--teal);color:#fff;
  box-shadow:0 10px 20px -10px rgba(19,122,110,.6)}
.vt-chip input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
.vt-upload{display:flex;align-items:center;gap:.8rem;border:1.5px dashed color-mix(in srgb,var(--teal) 45%,var(--line));
  border-radius:14px;padding:1rem 1.2rem;cursor:pointer;background:color-mix(in srgb,var(--teal) 4%,var(--paper));
  color:var(--ink-soft);font-size:.92rem;font-weight:600;transition:all .3s}
.vt-upload:hover{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,var(--paper))}
.vt-upload.has-file{border-style:solid;border-color:var(--teal);color:var(--teal-d)}
.vt-upload input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.vt-upload .flat-icon{flex:none;width:1.3rem;height:1.3rem;color:var(--teal)}
#vtForm[hidden]{display:none}

/* ---- sidebar expect list ---- */
.vt-expect{display:grid;gap:.75rem}
.vt-expect li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:rgba(255,255,255,.85);line-height:1.45}
.vt-expect li .flat-icon{flex:none;width:1.15rem;height:1.15rem;color:var(--gold);margin-top:.12rem}

/* ---- responsive ---- */
@media(max-width:1020px){
  .vt-perks{grid-template-columns:1fr 1fr}
  .vt-roles{grid-template-columns:1fr 1fr}
  .vt-how{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .vt-perks,.vt-roles,.vt-how{grid-template-columns:1fr}
  .vt-role img{height:170px}
}