/* The Lost Genome — shared site styles */
:root{
  --bg:#0A0E14;
  --bg-raised:#1B1F25;
  --ink:#FFFFFF;
  --ink-dim:#969E9E;
  --line:#232830;
  --teal:#378F83;
  --mint:#00F0C8;
  --amber:#c98a4b;
  --green-copy:#7ddc98;
  --gutter:max(20px, calc((100% - 1224px) / 2));
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans',-apple-system,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  width:100%;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter);
  background:rgba(10,14,20,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-family:'Manrope',sans-serif;
  font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:16px;
}
.wordmark img{height:48px; width:auto; display:block;}
.wordmark span{color:var(--teal);}
nav.main{display:flex; align-items:center; gap:30px; font-family:'Manrope',sans-serif; font-size:14px; letter-spacing:0.02em; text-transform:uppercase; color:#9fc9c2;}
nav.main a{transition:color .2s; text-decoration:none; padding-bottom:4px;}
nav.main a:hover, nav.main a.current{color:var(--teal); text-decoration:underline; text-underline-offset:6px;}
nav.main a.nav-donate{
  color:var(--bg); background:var(--mint); padding:8px 18px; border-radius:999px;
  font-weight:700; text-decoration:none !important;
}
nav.main a.nav-donate:hover{background:#fff; color:var(--bg);}
nav.main a.lang-switch{
  border:1px solid var(--line); border-radius:6px; padding:6px 10px;
  font-size:12px; font-weight:700; color:var(--ink-dim); text-decoration:none !important;
}
nav.main a.lang-switch:hover{color:var(--mint); border-color:var(--mint);}
.nav-social{display:flex; align-items:center; gap:10px;}
.nav-social a{
  width:30px; height:30px; border-radius:50%; background:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  color:var(--bg); transition:background .2s, color .2s;
}
.nav-social a:hover{background:var(--mint); color:var(--bg);}
.nav-social svg{width:14px; height:14px; display:block;}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); font-size:24px; cursor:pointer;}
@media (max-width:760px){
  header.site{backdrop-filter:none;}
  nav.main{
    position:fixed; top:65px; left:0; right:0; bottom:0;
    background:var(--bg); flex-direction:column; align-items:flex-start; padding:32px 24px; gap:20px;
    font-size:20px; transform:translateX(100%); transition:transform .25s ease;
  }
  nav.main.open{transform:translateX(0);}
  nav.main a.nav-donate{display:inline-block; width:fit-content; padding:10px 22px;}
  nav.main a.lang-switch{display:inline-block; width:fit-content; font-size:14px;}
  .nav-social{width:fit-content;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55; z-index:0;}
.hero-content{
  position:relative; z-index:1; min-height:70vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) 56px;
  background:linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,0.85) 75%, var(--bg) 100%);
}
@media (max-width:760px){
  .hero-content{min-height:unset; padding-top:220px;}
}
.eyebrow{
  font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:0.14em;
  font-size:13px; color:var(--mint); margin-bottom:14px;
}
.hero h1{
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(32px,5.5vw,62px); line-height:1.02; letter-spacing:-0.01em; max-width:900px;
}
.hero p.lede{margin-top:20px; max-width:560px; color:var(--ink-dim); font-size:16px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}
.btn{
  display:inline-block; padding:13px 26px;
  font-family:'Manrope',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; font-size:13px;
  border:1px solid var(--ink); border-radius:8px; transition:all .2s;
}
.btn:hover{background:var(--ink); color:var(--bg);}
.btn.solid{background:var(--teal); border-color:var(--teal); color:var(--bg);}
.btn.solid:hover{background:transparent; color:var(--teal);}

/* ---------- Video Hero (full-bleed intro video, like rewild.org) ---------- */
.video-hero{position:relative; height:100vh; min-height:560px; max-height:860px; overflow:hidden; border-bottom:1px solid var(--line);}
.video-hero video{width:100%; height:100%; object-fit:cover; display:block;}
.video-hero .ph{
  position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:0;
  flex-direction:column; gap:14px;
  background:repeating-linear-gradient(45deg, rgba(150,158,158,0.14) 0 10px, rgba(150,158,158,0.05) 10px 20px), var(--bg-raised);
}
.video-hero .ph .play-badge{
  width:64px; height:64px; border-radius:50%; border:2px solid rgba(150,158,158,0.6);
  display:flex; align-items:center; justify-content:center; font-size:20px; color:#8b9090;
}
.video-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,14,20,0.05) 0%, rgba(10,14,20,0.35) 55%, rgba(10,14,20,0.92) 100%);
}
.video-hero-content{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) 64px; color:#fff;
}
.video-hero-content .eyebrow{color:var(--mint);}
.video-hero-content h1{
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(32px,5.5vw,60px); line-height:1.04; letter-spacing:-0.01em; max-width:820px; color:#fff;
}
.video-hero-content p.lede{margin-top:20px; max-width:560px; color:#dfe4e4; font-size:16px;}
.video-hero-content .hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}
@media (max-width:700px){ .video-hero{height:82vh;} }

/* ---------- Split Hero (image left, text right) ---------- */
.split-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:60px var(--gutter) 80px;
  border-bottom:1px solid var(--line);
}
@media (max-width:900px){ .split-hero{grid-template-columns:1fr;} }
.split-image img{
  width:100%; height:auto; display:block; border-radius:12px;
  cursor:grab; transition:transform .25s ease, box-shadow .25s ease;
}
.split-image img:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.3);}
.split-image img:active{cursor:grabbing; transform:translateY(-1px);}
.split-text h1{
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(32px,4.4vw,54px); line-height:1.05; color:var(--ink);
}
.split-text h1 .accent{color:#2f8fd1;}
.video-hero-content h1 .accent{color:#2f8fd1;}
.split-text .lede{margin-top:24px; max-width:480px; color:var(--ink-dim); font-size:15px;}
.split-text .hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px;}
.btn.fill-blue{background:#0E7490; border-color:#0E7490; color:#fff;}
.btn.fill-blue:hover{opacity:0.88;}
.btn.fill-green{background:#057364; border-color:#057364; color:#fff;}
.btn.fill-green:hover{opacity:0.88;}

/* ---------- Sections ---------- */
.section{padding:80px var(--gutter); border-top:1px solid var(--line);}
.section.tight{padding-top:48px;}
.section.light{background:#E2ECE9; border-top:none;}
.section.centered{text-align:center;}
.section.centered h2, .section.centered p.body{margin-left:auto; margin-right:auto;}
.section-eyebrow.dark{color:#6b6f68;}
.dark-heading{color:#12140f;}
.dark-heading .accent-teal{color:#1fb488;}
.dark-body{color:#3a3d38; max-width:820px;}

/* ---------- Mission split (teal two-column) ---------- */
.mission-split{
  background:#057364; border-top:none;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:80px var(--gutter);
}
@media (max-width:900px){ .mission-split{grid-template-columns:1fr;} }
.mission-split .eyebrow-light{
  font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:0.14em;
  font-size:13px; color:#8ff0d0; margin-bottom:14px;
}
.mission-split h2{
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,3.6vw,44px); line-height:1.1; color:#0e1f19; margin-bottom:18px;
}
.mission-split p.body{color:#f1faf6; max-width:480px; margin-bottom:28px;}
.mission-split .btn.fill-dark{background:#066155; border-color:#066155; color:#fff;}
.mission-split .btn.fill-dark:hover{opacity:0.85;}
.mission-split .split-image img{
  width:100%; height:auto; display:block; border-radius:12px;
  cursor:grab; transition:transform .25s ease, box-shadow .25s ease;
}
.mission-split .split-image img:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.3);}
.mission-split .split-image img:active{cursor:grabbing; transform:translateY(-1px);}
.section-eyebrow{
  font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:0.16em;
  font-size:12px; color:var(--amber); margin-bottom:14px;
}
.section h2{
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(26px,3.6vw,44px); line-height:1.1; max-width:900px; margin-bottom:20px;
}
.section p.body{color:var(--ink-dim); font-size:16px; max-width:720px; margin-bottom:16px;}
.section p.body.dark-body{color:#3a3d38;}
.section p.body.light-body{color:#dcf3ec;}
.section p.body.mint-body{color:#123a32;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
@media (max-width:820px){ .two-col{grid-template-columns:1fr;} }

.stat-row{display:flex; gap:48px; flex-wrap:wrap; margin-top:32px;}
.stat{border-top:1px solid var(--line); padding-top:14px; min-width:140px;}
.stat .num{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:32px; line-height:1.15; color:#E2ECE9;}
.stat .label{color:var(--ink-dim); font-size:14px; text-transform:none; letter-spacing:normal; margin-top:8px;}

/* ---------- Home: Support Our Project stats band ---------- */
.stats-feature{
  background:linear-gradient(160deg, #0A0E14 0%, #0B3B4B 100%);
  text-align:center;
}
.stats-feature .stat{border-top:none; text-align:center;}
.stats-feature .stat-row{justify-content:center;}

.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:36px;}
@media (max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .grid-4{grid-template-columns:1fr;} }
.grid-item .idx{font-family:'Space Grotesk',sans-serif; color:var(--teal); font-size:13px; margin-bottom:10px;}
.grid-item h3{font-family:'Manrope',sans-serif; text-transform:uppercase; font-size:17px; margin-bottom:8px; letter-spacing:0.02em; font-weight:700;}
.grid-item p{color:var(--ink-dim); font-size:14px;}

.people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:32px;}
@media (max-width:760px){ .people-grid{grid-template-columns:1fr;} }
.person{border-top:1px solid var(--line); padding-top:16px;}
.person h3{font-family:'Manrope',sans-serif; font-weight:700; text-transform:uppercase; font-size:18px; margin-bottom:6px;}
.person p{color:var(--ink-dim); font-size:14px;}

.callout{
  border:1px solid var(--line); background:var(--bg-raised); padding:40px clamp(20px,4vw,48px);
  font-family:'Manrope',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(18px,2.2vw,26px); line-height:1.3; margin-top:12px;
}

/* ---------- Generic image placeholder ---------- */
.ph{
  width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px;
  border:1px dashed rgba(150,158,158,0.6);
  border-radius:12px;
  background:repeating-linear-gradient(45deg, rgba(150,158,158,0.14) 0 10px, rgba(150,158,158,0.05) 10px 20px);
  color:#8b9090;
  font-family:'Manrope',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:0.05em;
  cursor:grab; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ph:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.3); border-color:rgba(150,158,158,0.9);}
.ph:active{cursor:grabbing; transform:translateY(-1px);}

/* ---------- Gallery ---------- */
.gallery-hint{
  font-family:'Manrope',sans-serif; font-size:13px; font-style:italic; color:var(--ink-dim);
  margin-top:28px; margin-bottom:-8px;
}
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:36px;}
@media (max-width:820px){ .gallery{grid-template-columns:1fr;} }
.gallery figure{margin:0;}
.gallery img{width:100%; height:500px; object-fit:cover; border:1px solid var(--line); display:block; cursor:zoom-in; transition:transform .25s ease, box-shadow .25s ease;}
@media (max-width:820px){ .gallery img{height:360px;} }

.gallery img:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.35);}
.gallery img:active{transform:translateY(-1px);}
.gallery .ph{
  width:100%; height:220px; border:1px dashed var(--line); box-sizing:border-box;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 10px, rgba(255,255,255,0.02) 10px 20px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  color:var(--ink-dim); font-family:'Manrope',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;
}
.gallery figcaption{margin-top:8px; font-family:'Manrope',sans-serif; font-size:12px; color:var(--ink-dim);}

/* ---------- Lightbox ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(5,8,7,0.92);
  display:none; align-items:center; justify-content:center;
  z-index:999; padding:48px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{
  max-width:90vw; max-height:82vh; object-fit:contain;
  border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,0.5);
  cursor:default;
}
.lightbox-close{
  position:absolute; top:20px; right:28px;
  font-size:34px; line-height:1; color:var(--ink); background:none; border:none;
  cursor:pointer; font-family:'Manrope',sans-serif;
}
.lightbox-close:hover{color:var(--teal);}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--ink); font-size:42px; cursor:pointer;
  padding:12px; opacity:0.75; transition:opacity .2s;
}
.lightbox-nav:hover{opacity:1;}
.lightbox-prev{left:12px;}
.lightbox-next{right:12px;}
.lightbox-caption{
  position:absolute; bottom:24px; left:0; right:0; text-align:center;
  font-family:'Manrope',sans-serif; font-size:13px; color:var(--ink-dim);
  padding:0 80px;
}
@media (max-width:620px){
  .lightbox-nav{font-size:32px; padding:8px;}
  .lightbox-close{top:14px; right:16px; font-size:30px;}
}

/* ---------- Form ---------- */
form.contact{display:flex; flex-direction:column; gap:18px; max-width:560px; margin-top:28px;}
form.contact label{font-family:'DM Sans',sans-serif; text-transform:none; font-size:14px; font-weight:500; letter-spacing:0; color:var(--ink); margin-bottom:6px; display:block;}
form.contact input, form.contact textarea{
  width:100%; background:#e2e6e2; border:1px solid #cfd4cf; color:#1a1d19;
  padding:12px 14px; font-family:'DM Sans',sans-serif; font-size:14px; border-radius:8px;
}
form.contact input::placeholder, form.contact textarea::placeholder{color:#7a7f79;}
form.contact textarea{min-height:140px; resize:vertical;}
form.contact button{
  align-self:flex-start; padding:14px 32px; background:#0E7490; border:none; color:#fff;
  font-family:'Manrope',sans-serif; font-weight:600; text-transform:none; letter-spacing:0;
  font-size:14px; cursor:pointer; border-radius:8px; transition:opacity .2s;
}
form.contact button:hover{opacity:0.85;}

/* ---------- Footer ---------- */
footer.site{padding:56px var(--gutter) 40px; border-top:1px solid var(--line);}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:48px;}
.footer-brand{display:flex; flex-direction:column; gap:18px; max-width:260px;}
.footer-dash{width:48px; height:2px; background:var(--teal); border:none; margin:0;}
.tagline{
  font-family:'Amatic SC',cursive; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  font-size:22px; color:var(--ink);
}
.footer-brand-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.footer-divider{width:1px; height:22px; background:var(--line); display:inline-block; flex:none;}
.footer-social{display:flex; gap:10px; margin-top:0;}
.footer-social a{
  width:34px; height:34px; border-radius:50%; background:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  color:var(--bg); transition:background .2s, color .2s;
}
.footer-social a:hover{background:var(--mint); color:var(--bg);}
.footer-social svg{width:16px; height:16px; display:block;}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{
  font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:0.08em;
  font-size:13px; color:var(--teal); margin-bottom:14px; font-weight:700;
}
.footer-col a{
  display:block; font-family:'Manrope',sans-serif; font-size:14px; font-weight:600;
  color:var(--ink); text-decoration:none; margin-bottom:10px;
}
.footer-col a:hover{color:var(--mint);}
.footer-line{border:none; border-top:1px solid var(--line); margin:40px 0 20px;}
.copyright{color:var(--green-copy); font-size:12px;}

@media (max-width:600px){
  .footer-grid{flex-direction:column; gap:32px;}
  .footer-cols{gap:36px;}
  .footer-brand-row{gap:14px;}
}

/* ---------- Scroll-in animations ---------- */
.word{display:inline-block; white-space:nowrap;}
.letter{display:inline-block; opacity:0; transform:translateY(0.35em);}
h1.reveal-active .letter{animation:letterIn .45s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes letterIn{ to{ opacity:1; transform:translateY(0);} }

.reveal-block{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-block.reveal-active{opacity:1; transform:translateY(0);}

/* ---------- About page: gradient hero ---------- */
.gradient-hero{
  background:linear-gradient(160deg, #057364 0%, #0A0E14 100%);
  border-top:none;
}
.gradient-hero.reverse{
  background:linear-gradient(160deg, #0A0E14 0%, #057364 100%);
}
.centered{text-align:center;}
.centered h2, .centered p.body, .centered .btn{margin-left:auto; margin-right:auto;}
.centered .hero-ctas{justify-content:center;}
.light-eyebrow{color:#eafff6;}
.team-section .light-eyebrow,
.section.gradient-hero.reverse .light-eyebrow{color:var(--mint);}
.light-heading{color:#fff;}
.light-body{color:#dcf3ec; max-width:640px; margin-left:auto; margin-right:auto;}
.trailer-frame{
  max-width:900px; margin:32px auto 0; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
}
.trailer-frame video{width:100%; height:auto; display:block;}
.btn.fill-dark{background:#0a2b24; border-color:#0a2b24; color:#fff;}
.btn.fill-dark:hover{opacity:0.85;}

/* Two-column body text */
.two-col-text{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:8px;}
@media (max-width:800px){ .two-col-text{grid-template-columns:1fr;} }

/* Team section: teal background + dark cards */
.team-section{background:#378F83; border-top:none;}
.team-section .people-grid{margin-top:36px; max-width:1040px; margin-left:auto; margin-right:auto;}
.team-section .person-card{text-align:left;}
.person-card{
  background:#1B1F25; border-radius:8px; padding:28px 24px;
}
.person-card h3{
  font-family:'Kalam','Comic Sans MS',cursive; font-weight:700; font-size:22px;
  color:var(--mint); margin-bottom:2px; text-transform:none;
}
.person-card p{color:#f1faf6; font-size:14px; line-height:1.55;}
.person-card .person-photo{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:8px; margin-bottom:18px; display:block;
  cursor:grab; transition:transform .25s ease, box-shadow .25s ease;
}
.person-card .person-photo:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.35);}
.person-card .person-photo:active{cursor:grabbing; transform:translateY(-1px);}
.person-card .ph.person-photo{margin-bottom:18px;}
.person-card .role-tag{
  display:inline-block; font-family:'Manrope',sans-serif; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--mint);
  border:1px solid rgba(0,240,200,0.4); border-radius:999px; padding:4px 12px;
  margin-bottom:14px;
}

.dark-idx{color:#0e6f56;}

/* ---------- Madagascar: Field Approach section (matches live colours) ---------- */
.field-approach .section-eyebrow.dark{color:var(--mint);}
.field-approach .dark-heading{color:#0E7490;}
.field-approach .dark-idx{color:var(--mint);}
.field-approach .dark-body{color:var(--ink-dim);}

/* ---------- Series: architecture zigzag ---------- */
.series-architecture{background:#0E728E; padding:80px var(--gutter); border-top:none;}
.arch-heading{
  font-family:'Montserrat',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,4vw,46px); color:#eafcff; margin-bottom:56px;
}
.feature-row{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:56px;}
.feature-row:last-child{margin-bottom:0;}
@media (max-width:800px){ .feature-row{grid-template-columns:1fr;} }
.idx-light{font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-size:12px; color:var(--mint); margin-bottom:10px;}
.feature-text h3{font-family:'Manrope',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.4vw,28px); color:#fff; margin-bottom:14px;}
.feature-text p{color:#eafcff; font-size:14px; max-width:420px;}
.feature-image img{
  width:100%; height:auto; display:block; border-radius:12px;
  cursor:grab; transition:transform .25s ease, box-shadow .25s ease;
}
.feature-image img:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.35);}
.feature-image img:active{cursor:grabbing; transform:translateY(-1px);}

/* ---------- Join hero: stacked heading + photo/text row ---------- */
.join-hero-row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:40px;}
@media (max-width:800px){ .join-hero-row{grid-template-columns:1fr;} }
.join-hero-image img{
  width:100%; height:auto; display:block; border-radius:12px;
  cursor:grab; transition:transform .25s ease, box-shadow .25s ease;
}
.join-hero-image img:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.35);}
.join-hero-image img:active{cursor:grabbing; transform:translateY(-1px);}
.join-hero-text{display:flex; flex-direction:column; align-items:flex-start;}

/* ---------- Join: icon cards ---------- */
.icon-card{background:#1B1F25; border-radius:8px; padding:28px 24px; margin-top:0;}
.icon-box{
  width:52px; height:52px; border-radius:8px; background:rgba(0,240,200,0.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  color:var(--mint);
}
.icon-box svg{width:26px; height:26px;}
.icon-card h3{font-family:'Manrope',sans-serif; font-weight:700; text-transform:none; font-size:19px; color:var(--ink); margin-bottom:10px;}
.icon-card p{color:var(--ink-dim); font-size:14px;}

/* ---------- Join: bright mint tokens section ---------- */
.section.mint{background:#00F0C8; border-top:none;}
.mint-heading{color:#0a2b24;}
.mint-body{color:#123a32; max-width:640px;}

/* ---------- Join: closing CTA row ---------- */
.closing-cta{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;}
.closing-cta .body{max-width:520px;}