/* ============================================================
   EYOOT — Egyptian Youth of Today
   Design system blended from Figma "Homepage v3":
   Light ground · #333 ink · Bebas Neue display · Montserrat body
   Color-coded categories:
     Orange #FD6727  Employment & Impact
     Purple #A635FF  Youth Programs
     Green  #0B754E  Science & Environment
     Blue   #92BDF3  Tech & Digital Skills
     Yellow #FFAF00  Skills Training
     Pink   #FFC0C4  All Programs / Community
   ============================================================ */

:root{
  --bg:#F7F5F1;
  --card:#FFFFFF;
  --ink:#333333;
  --muted:rgba(51,51,51,.62);
  --line:rgba(51,51,51,.14);
  --line-strong:rgba(51,51,51,.3);

  --orange:#FD6727;
  --purple:#A635FF;
  --green:#0B754E;
  --blue:#92BDF3;
  --yellow:#FFAF00;
  --pink:#FFC0C4;

  --r-card:24px;
  --r-pill:999px;
  --max:1320px;
  --pad:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
::selection{background:var(--orange);color:#fff;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}

/* ---------- Type ---------- */
.bebas,h1.display,.h2{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.01em;line-height:.92;}
.display{font-size:clamp(3.4rem,9.6vw,8rem);text-transform:uppercase;}
.h2{font-size:clamp(2.3rem,5.4vw,4.4rem);text-transform:uppercase;}
.h3-bebas{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;line-height:.95;letter-spacing:.01em;}
h3,h4{font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.eyebrow{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ink);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:inline-block;}
.lead{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:500;max-width:58ch;}
.body-copy{color:var(--muted);font-size:.98rem;max-width:62ch;}
.accent{color:var(--orange);}

/* ---------- Category dots & chips ---------- */
.dot-i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;}
.c-orange{background:var(--orange);} .c-purple{background:var(--purple);}
.c-green{background:var(--green);}  .c-blue{background:var(--blue);}
.c-yellow{background:var(--yellow);} .c-pink{background:var(--pink);}
.t-orange{color:var(--orange);} .t-purple{color:var(--purple);}
.t-green{color:var(--green);}  .t-blue{color:#4C82CF;}
.t-yellow{color:#D89400;}      .t-pink{color:#E87983;}

.cat{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(247,245,241,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:transform .4s var(--ease);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:.05em;line-height:1;}
.logo span{color:var(--orange);}
.nav-links{display:flex;gap:clamp(14px,1.9vw,26px);align-items:center;}
.nav-links a{
  font-size:.85rem;font-weight:500;position:relative;padding:6px 0;flex:none;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--orange);transition:width .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{
  background:var(--orange);color:#fff;padding:12px 34px;border-radius:var(--r-pill);
  font-size:.82rem;font-weight:700;white-space:nowrap;flex:none;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
/* .nav-links a is more specific than .nav-cta, so the button needs its own rule */
.nav-links a.nav-cta{padding:12px 34px;display:inline-block;line-height:1.1;}
/* The nav underline effect must never apply to the Apply Now button */
.nav-links a.nav-cta::after,.nav-cta::after{content:none!important;display:none!important;}
.nav-cta:hover{background:var(--ink);transform:translateY(-2px);}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative;}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);transition:.3s var(--ease);}
.burger span:nth-child(1){top:14px;}
.burger span:nth-child(2){top:20px;}
.burger span:nth-child(3){top:26px;}
.nav.open .burger span:nth-child(1){top:20px;transform:rotate(45deg);}
.nav.open .burger span:nth-child(2){opacity:0;}
.nav.open .burger span:nth-child(3){top:20px;transform:rotate(-45deg);}

@media(max-width:920px){
  .nav-links{
    position:fixed;inset:76px 0 auto 0;background:var(--bg);
    flex-direction:column;align-items:flex-start;padding:24px var(--pad) 36px;
    border-bottom:1px solid var(--line);gap:18px;
    transform:translateY(-130%);transition:transform .45s var(--ease);
  }
  .nav.open .nav-links{transform:translateY(0);}
  .burger{display:block;}
}

/* ---------- Handwritten accent font ----------
   Drop the real file at assets/fonts/UglyDave.woff2 and it activates
   automatically; until then Caveat (Google Fonts) stands in. */
@font-face{
  font-family:'Ugly Dave';
  src:url('fonts/UglyDave.woff2') format('woff2');
  font-display:swap;
}
:root{--hand:'Ugly Dave','Caveat',cursive;}

.hand{
  font-family:var(--hand);font-weight:600;
  text-transform:lowercase;letter-spacing:.01em;
  font-size:1.08em;line-height:.9;
}
.hand.t-orange{color:var(--orange);} .hand.t-purple{color:var(--purple);}
.hand.t-blue{color:var(--blue);} .hand.t-green{color:var(--green);}
.hand.t-yellow{color:var(--yellow);} .hand.t-pink{color:var(--pink);}

/* Corner scribble annotations (e.g. "for youth, always") */
.scribble{
  position:absolute;top:clamp(18px,2.4vw,30px);right:clamp(20px,2.6vw,34px);
  font-family:var(--hand);font-weight:600;font-size:clamp(1.15rem,1.9vw,1.7rem);
  line-height:.95;transform:rotate(-12deg);text-align:center;
  max-width:9ch;pointer-events:none;
}

/* Montserrat-bold heading variant (mission-style) with hand accents */
.h2-sans{
  font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.18;text-transform:none;
}
.h2-sans .hand{font-size:1.12em;}

/* Full-width pill inside color cards */
.discover.wide{
  width:100%;justify-content:flex-start;transform:none;
  background:#fff;color:var(--ink);padding:14px 24px;
  font-size:.8rem;letter-spacing:.08em;
}
.discover.wide:hover{background:var(--ink);color:#fff;transform:none;}

/* ---------- Hero — locked to 100vh, pills drop into the Figma pile ---------- */
.hero{
  height:100svh;min-height:680px;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line-strong);
}
.hero-copy{
  position:relative;z-index:2;
  padding-top:calc(76px + 7vh);
  max-width:min(560px,46%);
}
.hero h1{margin:14px 0 22px;font-size:clamp(2.9rem,6.4vw,5.6rem);}
.hero .lead{color:var(--muted);font-size:clamp(.94rem,1.25vw,1.1rem);max-width:40ch;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}

/* Circular student photo — upper right, pills overlap its base */
.hero-photo{
  position:absolute;z-index:1;
  top:calc(76px + 3vh);left:58%;
  width:clamp(260px,26vw,380px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,#ECE8E1,#DDD7CD);
  display:flex;align-items:center;justify-content:center;
}
.hero-photo .ph{
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);background:rgba(247,245,241,.9);
  padding:8px 16px;border-radius:var(--r-pill);text-align:center;max-width:78%;position:relative;z-index:1;
}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* "What we do" cards — let the paragraph breathe before the footer bits */
.card.color p{margin-bottom:clamp(10px,1.6vw,22px);}
.card.color .thread{margin-top:auto;}

/* Pill pile — uniform-height bars that stack under gravity (positions
   are computed in main.js so nothing floats or overlaps by accident) */
.pile{position:absolute;inset:0;z-index:3;pointer-events:none;}
.pill{
  position:absolute;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  width:var(--w,16%);
  height:clamp(30px,3.3vw,50px);
  font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;line-height:1;
  font-size:clamp(.6rem,1.15vw,1.05rem);
  border-radius:var(--r-pill);
  color:#fff;white-space:nowrap;
  transform:translateY(-130vh) rotate(var(--rot,0deg));
  transform-origin:center;
  will-change:transform;
}
.pill.ink{background:var(--ink);}
body.dropped .pill{
  animation:pill-drop .9s cubic-bezier(.34,1.2,.44,1) forwards;
  animation-delay:var(--delay,0s);
}
@keyframes pill-drop{
  0%{transform:translateY(-130vh) rotate(calc(var(--rot,0deg) - 16deg));}
  66%{transform:translateY(0) rotate(calc(var(--rot,0deg) + 3deg));}
  82%{transform:translateY(-9%) rotate(var(--rot,0deg));}
  100%{transform:translateY(0) rotate(var(--rot,0deg));}
}
@media(max-width:920px){
  .hero{min-height:600px;}
  .hero-copy{max-width:92%;}
  .hero-photo{display:none;}
  .pill{height:clamp(26px,5vw,36px);font-size:clamp(.52rem,1.9vw,.8rem);}
  .pill.sm-hide{display:none;}
}

/* ---------- Partner logo marquee (band after hero) ---------- */
.partner-band{
  background:var(--ink);color:var(--bg);
  padding:clamp(28px,4vw,44px) 0 clamp(30px,4.4vw,48px);
  overflow:hidden;
}
.partner-band .band-head{
  max-width:var(--max);margin:0 auto clamp(20px,3vw,32px);padding:0 var(--pad);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.partner-band .band-head .h2{line-height:.86;}
.partner-band .band-head p{margin-top:.12em;}
.partner-band .band-head .h2{font-size:clamp(1.6rem,3.4vw,2.6rem);}
.partner-band .band-head p{font-size:.8rem;color:rgba(247,245,241,.55);max-width:38ch;}
.logo-marquee{overflow:hidden;white-space:nowrap;position:relative;}
.logo-marquee::before,.logo-marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none;
}
.logo-marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent);}
.logo-marquee::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent);}
.logo-track{display:inline-flex;align-items:center;gap:clamp(44px,6vw,90px);animation:marquee 34s linear infinite;will-change:transform;padding-right:clamp(44px,6vw,90px);}
.logo-track:hover{animation-play-state:paused;}
.logo-item{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex:none;
  padding:10px 0;
  transition:opacity .3s var(--ease);opacity:.72;
}
.logo-item:hover{opacity:1;}
.logo-img{
  height:clamp(38px,4.4vw,58px);display:flex;align-items:center;justify-content:center;
}
.logo-item img{
  height:100%;width:auto;max-width:clamp(110px,13vw,170px);object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
}
.logo-fallback{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(1.6rem,2.8vw,2.3rem);
  letter-spacing:.06em;color:#fff;
  width:clamp(38px,4.4vw,58px);height:100%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(247,245,241,.28);border-radius:12px;
}
.logo-sep{
  width:clamp(10px,1.2vw,14px);height:clamp(10px,1.2vw,14px);
  border-radius:50%;flex:none;display:inline-block;align-self:center;
}
.logo-name{
  font-family:'Montserrat',sans-serif;font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:rgba(247,245,241,.55);text-align:center;white-space:nowrap;
}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ---------- Program cards — two-layer instant swap on hover ----------
   Base layer: tag + photo-circle / heading / paragraph / pill (unchanged).
   Hover layer: big image on top, paragraph hidden, hook shown. No tween. */
.card.hoverfx .photo-big{
  display:none;position:relative;overflow:hidden;flex:1;min-height:190px;
  border-radius:16px;align-items:center;justify-content:center;
}
.card.hoverfx .photo-big .ph{
  position:relative;z-index:1;font-size:.64rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:rgba(51,51,51,.7);background:rgba(255,255,255,.85);
  padding:7px 14px;border-radius:var(--r-pill);text-align:center;max-width:80%;
}
.card.hoverfx .photo-big img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
}
.card.hoverfx .hook{
  display:none;font-family:var(--hand);font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1;transform:rotate(-2deg);
}
a.card.hoverfx{transition:none;}
a.card.hoverfx:hover{
  transform:rotate(-1.8deg);
  box-shadow:0 26px 52px rgba(51,51,51,.14);border-color:transparent;
}
a.card.hoverfx:hover .photo-big{display:flex;order:-1;}
a.card.hoverfx:hover .top-row .photo-circle{display:none;}
a.card.hoverfx:hover .desc{display:none;}
a.card.hoverfx:hover .hook{display:block;}

/* Angled thread bar + wide pill inside color cards */
.card.color .thread{transform:rotate(-1.2deg);}
.discover.wide{transform:rotate(-1.6deg);transform-origin:left center;}
.discover.wide:hover{transform:rotate(0deg);}

/* ---------- Feature banner background image ---------- */
.feature-banner .bg{position:absolute;inset:0;z-index:0;}
.feature-banner .bg .imgph{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#2f4f43,#173a2e);
  display:flex;align-items:flex-start;justify-content:flex-start;padding:24px 28px;
}
.feature-banner .bg .imgph span{
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.35);
  padding:6px 12px;border-radius:var(--r-pill);
}
.feature-banner .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
a.feature-banner:hover .bg img{transform:scale(1.04);}
.feature-banner .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,117,78,.12) 0%,rgba(11,117,78,.55) 55%,rgba(9,90,60,.94) 100%);
}
.feature-banner>*:not(.bg){position:relative;z-index:1;}

/* ---------- Project rows with images ---------- */
.proj-row{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding:clamp(28px,4vw,52px) 0;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.proj-row .info{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.proj-row .info p{flex:none;}
.proj-media{
  border-radius:var(--r-card);overflow:hidden;position:relative;aspect-ratio:16/9;
  background:linear-gradient(135deg,#ECE8E1,#DDD7CD);
  display:flex;align-items:center;justify-content:center;
}
.proj-media .ph{
  position:relative;z-index:1;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);background:rgba(247,245,241,.9);
  padding:7px 14px;border-radius:var(--r-pill);text-align:center;max-width:80%;
}
.proj-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
a.proj-row:hover .proj-media img{transform:scale(1.06);}
@media(max-width:840px){
  .proj-row{grid-template-columns:1fr;gap:18px;}
  .proj-media{order:-1;}
}
.view-all{display:flex;justify-content:center;margin-top:clamp(28px,4vw,44px);}

/* ---------- Belief band background image ---------- */
.belief .bg{position:absolute;inset:0;z-index:0;}
.belief .bg .imgph{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px),
    linear-gradient(135deg,#B2481D,#8F3512);
}
.belief .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.belief .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,28,28,.30),rgba(28,28,28,.62));}
.belief .wrap,.belief .watermark{position:relative;z-index:1;}

/* ---------- Sections ---------- */
.section{padding:clamp(64px,9vw,116px) 0;}
/* Side text lines up with the TOP of the big title (not the eyebrow above it);
   buttons line up with the BOTTOM of the title instead. */
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:32px;margin-bottom:clamp(30px,4.6vw,52px);
}
.section-head > .body-copy{
  align-self:start;margin-top:27px; /* clears the eyebrow line above the title */
  max-width:clamp(280px,38ch,440px);
}
.section-head > .discover,.section-head > a.discover{justify-self:end;align-self:end;}
@media(max-width:760px){
  .section-head{grid-template-columns:1fr;align-items:start;gap:18px;}
  .section-head > .body-copy{margin-top:0;max-width:none;}
  .section-head > .discover,.section-head > a.discover{justify-self:start;}
}
.divider{border:0;border-top:1px solid var(--line-strong);}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);}
.stat{
  padding:clamp(26px,3.4vw,46px) clamp(18px,2.4vw,36px);
  border-right:1px solid var(--line);
  transition:background .35s var(--ease);
}
.stat:last-child{border-right:0;}
.stat:hover{background:var(--card);}
.stat .num{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1;}
.stat .lbl{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:10px;}
@media(max-width:820px){
  .stats{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2){border-right:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
@media(max-width:460px){
  .stats{grid-template-columns:1fr;}
  .stat{border-right:0;border-bottom:1px solid var(--line);}
  .stat:last-child{border-bottom:0;}
}

/* ---------- Buttons / pills ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--orange);color:#fff;
  padding:15px 30px;border-radius:var(--r-pill);
  font-size:.84rem;font-weight:700;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.btn::after{content:"→";transition:transform .3s var(--ease);}
.btn:hover{background:var(--ink);transform:translateY(-3px);box-shadow:0 14px 30px rgba(51,51,51,.16);}
.btn:hover::after{transform:translateX(4px);}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:#fff;}
.btn.light{background:#fff;color:var(--ink);}
.btn.light:hover{background:var(--orange);color:#fff;}
.btn.on-dark{background:var(--orange);}
.btn.on-dark:hover{background:#fff;color:var(--ink);}

/* Small "discover more" pill — playful slight rotation, from Figma */
.discover{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#fff;
  padding:8px 20px;border-radius:var(--r-pill);
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  transform:rotate(-1deg);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.discover:hover{transform:rotate(0deg) translateY(-2px);background:var(--ink);}
.discover.on-color{background:#fff;color:var(--ink);}
.discover.on-color:hover{background:var(--ink);color:#fff;}

/* ---------- Cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(24px,3vw,36px);position:relative;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
a.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(51,51,51,.1);border-color:transparent;}
.card .h3-bebas{margin-top:2px;}
.card p{color:var(--muted);font-size:.94rem;flex:1;}
.card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.card .photo-circle{
  width:clamp(96px,10vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none;
  background:linear-gradient(135deg,#ECE8E1,#DDD7CD);
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:center;padding:10px;
}
.card .photo-circle img{width:100%;height:100%;object-fit:cover;}

/* Full-color feature cards (purple education / green EcoScape style) */
.card.color{border:0;color:#fff;}
.card.color p{color:rgba(255,255,255,.82);}
.card.color .cat{color:rgba(255,255,255,.9);}
.card.bg-purple{background:var(--purple);}
.card.bg-green{background:var(--green);}
.card.bg-orange{background:var(--orange);}
.card.bg-yellow{background:var(--yellow);color:var(--ink);}
.card.bg-yellow p{color:rgba(51,51,51,.75);}
.card.bg-blue{background:var(--blue);color:var(--ink);}
.card.bg-blue p{color:rgba(51,51,51,.75);}
.card.bg-pink{background:var(--pink);color:var(--ink);}
.card.bg-pink p{color:rgba(51,51,51,.75);}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);}
@media(max-width:920px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}}

/* Tomorrow thread tag — connective device */
.thread{
  font-size:.74rem;font-weight:600;letter-spacing:.03em;
  border-left:3px solid currentColor;
  padding:8px 14px;display:inline-block;opacity:.92;
}
.thread b{font-weight:800;}
.card:not(.color) .thread{color:var(--ink);background:var(--bg);border-left-color:var(--orange);}
.card:not(.color) .thread b{color:var(--orange);}
.card.color .thread{background:rgba(255,255,255,.14);color:#fff;border-left-color:#fff;}

/* ---------- Featured project banner (green EcoScape style) ---------- */
.feature-banner{
  border-radius:var(--r-card);color:#fff;position:relative;overflow:hidden;
  padding:clamp(28px,4vw,52px);min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
a.feature-banner:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(51,51,51,.18);}
.feature-banner .indicator{
  position:absolute;top:26px;right:28px;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
}
.feature-banner .indicator::after{
  content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .3s var(--ease);
}
a.feature-banner:hover .indicator::after{transform:scale(1);}
.feature-banner .bebas-xl{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,5vw,4rem);line-height:.95;max-width:14ch;}
.feature-banner p{color:rgba(255,255,255,.84);max-width:46ch;font-size:.96rem;}
.feature-banner .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.badge{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.6);padding:6px 14px;border-radius:var(--r-pill);
}
.badge.dark{border-color:var(--line-strong);color:var(--ink);}

/* ---------- Project list rows (Figma projects index style) ---------- */
.proj-rows{border-top:1px solid var(--line-strong);}
.proj-row{
  display:grid;grid-template-columns:1.1fr .9fr auto;gap:clamp(20px,3vw,48px);
  align-items:center;padding:clamp(26px,3.6vw,44px) 0;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.proj-row:hover{background:rgba(255,255,255,.7);}
.proj-row .title{display:flex;flex-direction:column;gap:8px;}
.proj-row .title .name{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);line-height:.95;display:flex;align-items:center;gap:14px;}
.proj-row .title .sub{font-size:.8rem;font-weight:600;color:var(--muted);}
.proj-row p{color:var(--muted);font-size:.92rem;}
@media(max-width:840px){
  .proj-row{grid-template-columns:1fr;gap:14px;}
}

/* ---------- Values rows (About-section style: icon + hairlines) ---------- */
.value-rows{display:flex;flex-direction:column;}
.value-row{
  display:grid;grid-template-columns:44px 1fr;gap:20px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.value-row:first-child{padding-top:0;}
.value-row:last-child{border-bottom:0;}
.value-row .glyph{font-size:1.35rem;line-height:1.2;}
.value-row h4{font-size:.86rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px;}
.value-row p{color:var(--muted);font-size:.93rem;}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center;}
.split.rev{grid-template-columns:.95fr 1.05fr;}
.vline{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,56px);}
@media(max-width:920px){
  .split,.split.rev{grid-template-columns:1fr;}
  .vline{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px;}
}

/* ---------- Steps ---------- */
.steps{border-top:1px solid var(--line-strong);}
.step{
  display:grid;grid-template-columns:90px 1fr 1.4fr;gap:24px;align-items:start;
  padding:clamp(20px,2.8vw,32px) 0;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.step:hover{background:rgba(255,255,255,.7);}
.step .n{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.7rem,3vw,2.5rem);color:var(--orange);line-height:.86;display:block;}
.step h4{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;}
.step p{color:var(--muted);font-size:.93rem;}
@media(max-width:760px){.step{grid-template-columns:64px 1fr;}.step p{grid-column:2;}}

/* ---------- News video cards ---------- */
.news-card{
  border-radius:var(--r-card);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#3a3a3a,#242424);color:#fff;
  aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(22px,3vw,34px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
a.news-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(51,51,51,.22);}
.news-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;}
.news-card>*{position:relative;z-index:1;}
.news-card .tag-line{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);}
.news-card .play{
  align-self:center;width:74px;height:74px;border-radius:50%;
  background:var(--orange);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:#fff;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
a.news-card:hover .play{transform:scale(1.12);background:#fff;color:var(--ink);}
.news-card .caption{font-weight:600;font-size:clamp(.92rem,1.4vw,1.05rem);max-width:44ch;}
.news-card .vbadge{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.55);padding:5px 12px;border-radius:var(--r-pill);
  margin-bottom:12px;
}

/* ---------- Media placeholders ---------- */
.media{
  background:linear-gradient(135deg,#ECE8E1 0%,#DDD7CD 100%);
  border-radius:var(--r-card);
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
}
.media.tall{aspect-ratio:4/5;}
.media.wide{aspect-ratio:21/9;}
.media .ph{
  position:relative;z-index:1;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted);background:rgba(247,245,241,.9);
  padding:8px 16px;border-radius:var(--r-pill);text-align:center;max-width:82%;
}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
a:hover .media img{transform:scale(1.05);}

/* ---------- Partners ---------- */
.partners{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,20px);}
.partner{
  flex:1 1 170px;min-height:88px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--muted);padding:14px;
  transition:color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.partner:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 14px 28px rgba(51,51,51,.08);}

/* ---------- Belief band ---------- */
.belief{
  background:var(--orange);color:#fff;
  padding:clamp(72px,11vw,132px) 0;text-align:center;position:relative;overflow:hidden;
}
.belief .big{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,9vw,7.6rem);line-height:.92;text-transform:uppercase;}
.belief .find{
  display:inline-block;margin-top:30px;font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:.24em;
  border:2px solid rgba(255,255,255,.75);padding:12px 40px;border-radius:var(--r-pill);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.belief a.find:hover{background:#fff;color:var(--orange);}
.belief .watermark{
  position:absolute;bottom:-10%;left:50%;transform:translateX(-50%);
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(9rem,30vw,26rem);opacity:.08;white-space:nowrap;line-height:1;pointer-events:none;
}

/* ---------- Fact bar / detail pages ---------- */
.factbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);margin:40px 0;}
.fact{padding:20px 24px 20px 0;border-right:1px solid var(--line);padding-left:24px;}
.fact:first-child{padding-left:0;}
.fact:last-child{border-right:0;}
.fact .k{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);}
.fact .v{font-weight:700;margin-top:6px;font-size:1rem;}
@media(max-width:820px){
  .factbar{grid-template-columns:1fr 1fr;}
  .fact{padding-left:0;padding-right:16px;}
  .fact:nth-child(2){border-right:0;}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
/* Inner-page heroes stay clear of the fold so the next section is visible */
.detail-hero{padding:clamp(96px,10vh,118px) 0 0;}
.detail-hero h1.display{font-size:clamp(2.7rem,7vw,5.6rem);}
.detail-hero .lead{font-size:clamp(.95rem,1.35vw,1.08rem);max-width:64ch;}
/* Short laptop screens: compress the hero so the next section always peeks */
@media(max-height:800px){
  .detail-hero{padding:clamp(74px,9vh,96px) 0 0;}
  .detail-hero h1.display{font-size:clamp(2.2rem,5vw,3.5rem);}
  .detail-hero h1{margin:12px 0 10px;}
  .detail-hero .lead{font-size:.95rem;}
  .detail-hero .factbar{margin-top:16px;padding-top:16px;}
  .detail-hero + .section{padding-top:24px;}
}
/* The first section after a hero sits closer to it */
.detail-hero + .section{padding-top:clamp(28px,3.6vw,46px);}
.crumb{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.crumb a:hover{color:var(--orange);}
.detail-hero h1{margin:16px 0 14px;}

.quote{
  border-left:3px solid var(--orange);padding:8px 0 8px 28px;margin:36px 0;
  font-size:clamp(1.1rem,2vw,1.45rem);font-weight:600;line-height:1.35;max-width:46ch;
}
.quote small{display:block;margin-top:14px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--bg);padding:clamp(72px,10vw,126px) 0;}
.cta-band h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2.6rem,7vw,6rem);line-height:.92;text-transform:uppercase;max-width:16ch;}
.cta-band .accent{color:var(--orange);}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--bg);}
.foot-top{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  padding:clamp(48px,6vw,72px) 0 clamp(36px,5vw,56px);
  border-bottom:1px solid rgba(247,245,241,.16);
}
.foot-top .mail{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1;
  transition:color .3s var(--ease);
}
.foot-top .mail:hover{color:var(--orange);}
.newsletter{display:flex;flex-direction:column;gap:12px;justify-self:end;width:min(100%,480px);}
.newsletter label{font-size:.82rem;color:rgba(247,245,241,.7);}
.newsletter .row{display:flex;gap:10px;}
.newsletter input{
  flex:1;background:transparent;border:1px solid rgba(247,245,241,.3);border-radius:var(--r-pill);
  padding:13px 20px;color:var(--bg);font-family:inherit;font-size:.9rem;outline:none;
  transition:border-color .3s var(--ease);
}
.newsletter input:focus{border-color:var(--orange);}
.newsletter button{
  background:var(--orange);color:#fff;border:0;border-radius:var(--r-pill);
  padding:13px 26px;font-family:inherit;font-weight:700;font-size:.84rem;cursor:pointer;
  transition:background .3s var(--ease);
}
.newsletter button:hover{background:#fff;color:var(--ink);}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;}.newsletter{justify-self:start;}}

.foot-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 0;
}
.foot-bar .logo{color:var(--bg);}
.foot-bar nav{display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;}
.foot-bar nav a{font-size:.84rem;color:rgba(247,245,241,.72);transition:color .25s;}
.foot-bar nav a:hover{color:var(--orange);}
.foot-note{
  border-top:1px solid rgba(247,245,241,.14);padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.74rem;color:rgba(247,245,241,.5);
}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}
.reveal.in{opacity:1;transform:none;}
.reveal-line{transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease);}
.reveal-line.in{transform:scaleX(1);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .reveal,.reveal-line{opacity:1;transform:none;}
  .pill{transform:translateY(0) rotate(var(--rot,0deg))!important;}
  html{scroll-behavior:auto;}
}
/* No-JS fallback: keep pills visible */
.no-js .pill{transform:translateY(0) rotate(var(--rot,0deg));}

/* ============================================================
   v9 additions — combined Programs & Projects + detail pages
   ============================================================ */

/* Jump pills on cover hero */
.jump-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.jump{
  display:inline-flex;align-items:center;gap:12px;
  border:1.5px solid var(--ink);border-radius:var(--r-pill);
  padding:13px 26px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.jump::after{content:"↓";transition:transform .3s var(--ease);}
.jump:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}
.jump:hover::after{transform:translateY(3px);}
.jump .dot-i{width:9px;height:9px;}

/* Numbered section labels on the combined page */
.sec-num{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(3.4rem,8vw,6.4rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--line-strong);user-select:none;
}

/* Detail hero color theming helper */
.detail-hero .eyebrow.no-dash::before{display:none;}

/* Process steps — high-touch journey (7-step manual pipeline) */
.steps.process .step{grid-template-columns:90px 1.05fr 1.35fr;}
.steps.process .step .via{
  display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 12px;margin-top:10px;
}

/* Coming-soon platform panel (fund pitch) */
.soon{
  background:var(--ink);color:var(--bg);border-radius:var(--r-card);
  padding:clamp(30px,4.6vw,64px);position:relative;overflow:hidden;
}
.soon .watermark{
  position:absolute;top:-14%;right:-4%;font-family:'Bebas Neue',sans-serif;
  font-size:clamp(7rem,20vw,17rem);opacity:.05;line-height:1;pointer-events:none;white-space:nowrap;
}
.soon>*{position:relative;z-index:1;}
.soon .badge{border-color:rgba(247,245,241,.45);color:rgba(247,245,241,.85);}
.soon .h2{margin:18px 0 14px;}
.soon p.lead{color:rgba(247,245,241,.8);font-weight:500;}
.soon-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(26px,3.4vw,42px);
}
.soon-cell{
  border:1px solid rgba(247,245,241,.16);border-radius:16px;padding:20px 22px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.soon-cell:hover{border-color:var(--orange);background:rgba(253,103,39,.06);}
.soon-cell .k{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:.03em;line-height:1;margin-bottom:8px;display:block;}
.soon-cell p{font-size:.86rem;color:rgba(247,245,241,.65);}
@media(max-width:920px){.soon-grid{grid-template-columns:1fr;}}

/* Detail page color accent bar under crumb */
.accent-bar{width:64px;height:4px;border-radius:2px;margin-top:22px;}

/* Room grid (EcoScape six rooms) */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);}
.room{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.room:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(51,51,51,.08);}
.room .n{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--green);line-height:1;}
.room h4{font-size:.9rem;margin:10px 0 6px;}
.room p{color:var(--muted);font-size:.86rem;}
@media(max-width:920px){.rooms{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.rooms{grid-template-columns:1fr;}}

/* ============================================================
   SPLASH / PRELOADER — homepage first load
   ============================================================ */
.splash{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:transform .78s cubic-bezier(.76,0,.24,1), opacity .5s ease .28s;
}
.splash.gone{transform:translateY(-101%);opacity:0;pointer-events:none;}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:18px;}
.splash-pills{display:flex;gap:10px;}
.splash-pills span{
  width:clamp(26px,4vw,42px);height:clamp(9px,1.3vw,13px);
  border-radius:var(--r-pill);display:block;
  transform:translateY(-26px) scaleX(.3);opacity:0;
  animation:none;
}
@keyframes splash-pill{
  0%{transform:translateY(-26px) scaleX(.3);opacity:0;}
  70%{transform:translateY(3px) scaleX(1.06);opacity:1;}
  100%{transform:translateY(0) scaleX(1);opacity:1;}
}
.splash-mark{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.2rem,10vw,6.4rem);
  letter-spacing:.06em;line-height:1;color:var(--ink);
  display:flex;align-items:flex-end;
  opacity:0;transform:translateY(14px);
  animation:none;
}
.splash-mark i{
  width:clamp(10px,1.5vw,16px);height:clamp(10px,1.5vw,16px);
  border-radius:50%;background:var(--orange);
  margin:0 0 clamp(8px,1.2vw,14px) 6px;flex:none;
  transform:scale(0);animation:none;
}
.splash-tag{
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.24em;
  color:var(--muted);
  opacity:0;animation:none;
}
.splash.go .splash-pills span{animation:splash-pill .62s cubic-bezier(.34,1.3,.44,1) forwards;animation-delay:var(--d,0s);}
.splash.go .splash-mark{animation:splash-rise .7s var(--ease) .42s forwards;}
.splash.go .splash-mark i{animation:splash-dot .5s cubic-bezier(.34,1.5,.44,1) .92s forwards;}
.splash.go .splash-tag{animation:splash-rise .7s var(--ease) .62s forwards;}
@keyframes splash-rise{to{opacity:1;transform:translateY(0);}}
@keyframes splash-dot{to{transform:scale(1);}}
body.splashing{overflow:hidden;}
@media(prefers-reduced-motion:reduce){
  .splash,.splash *{animation:none!important;transition:none!important;opacity:1;transform:none;}
}


/* ============================================================
   PARTNERS PAGE — logo roster + three ways in
   ============================================================ */
.pgroup{margin-bottom:clamp(34px,4.6vw,60px);}
.pgroup:last-child{margin-bottom:0;}
.pgroup-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  align-items:start;gap:24px;
  padding-bottom:16px;margin-bottom:clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line-strong);
}
@media(max-width:760px){.pgroup-head{grid-template-columns:1fr;gap:10px;}}
.pgroup-head h3{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(1.35rem,2.4vw,1.9rem);text-transform:uppercase;line-height:1;
  display:flex;align-items:center;gap:11px;
}
.pgroup-head p{color:var(--muted);font-size:.9rem;max-width:46ch;justify-self:end;text-align:left;margin-top:2px;}
@media(max-width:760px){.pgroup-head p{justify-self:start;max-width:none;}}

.plogo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:clamp(14px,1.8vw,22px);}
.plogo-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:0;min-height:0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.plogo-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(51,51,51,.08);}
.plogo-card .pproject{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.05;text-transform:uppercase;color:var(--ink);
  text-align:center;
}
.plogo{
  height:56px;width:100%;display:flex;align-items:center;justify-content:center;
  margin:clamp(14px,1.8vw,20px) 0;   /* equal space above and below */
}
.plogo img{max-height:100%;max-width:100%;width:auto;object-fit:contain;}
.plogo-fallback{
  font-family:'Bebas Neue',sans-serif;font-size:1.9rem;color:var(--muted);
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:14px;
}
.plogo-card .pname{
  font-weight:700;font-size:.78rem;letter-spacing:.02em;color:var(--muted);text-align:center;line-height:1.3;
}
.plogo-card .pkind{
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-align:left;
}
.plogo-card .pblurb{font-size:.86rem;color:var(--muted);margin-top:10px;}
.pactions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:clamp(14px,1.8vw,20px);}
.discover.small{font-size:.66rem;padding:8px 14px;}
.discover.small.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);}
.discover.small.ghost:hover{background:var(--ink);color:#fff;}

/* Three ways in — side by side cards */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);}
.ways.four{grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.8vw,40px);}
@media(max-width:960px){.ways,.ways.four{grid-template-columns:1fr;}}
.way{
  border-radius:var(--r-card);padding:clamp(26px,3vw,38px);color:#fff;
  display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.way:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(51,51,51,.14);}
.way.o{background:var(--green);}
.way.g{background:var(--orange);}
.way.p{background:var(--purple);}
.way.k{background:var(--ink);}
.way .num{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;opacity:.45;
}
.way .who-for{
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.85);display:flex;align-items:center;gap:9px;
}
.way h3{font-family:'Bebas Neue',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:.98;}
.way p{color:rgba(255,255,255,.86);font-size:.93rem;flex:1;}
.way .discover.wide{margin-top:6px;}

/* ============================================================
   LANGUAGE TOGGLE
   ============================================================ */
.lang-switch{position:relative;flex:none;}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid var(--line-strong);cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:.74rem;font-weight:800;
  letter-spacing:.1em;color:var(--ink);
  padding:9px 13px;border-radius:var(--r-pill);line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.lang-btn:hover,.lang-switch.open .lang-btn{background:var(--ink);border-color:var(--ink);color:#fff;}
.lang-btn .caret{font-size:.6rem;transition:transform .3s var(--ease);}
.lang-switch.open .lang-btn .caret{transform:rotate(180deg);}
.lang-menu{
  position:absolute;top:calc(100% + 10px);inset-inline-end:0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(51,51,51,.14);
  padding:6px;min-width:150px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:9px;font-size:.85rem;font-weight:600;
  transition:background .2s var(--ease);
}
.lang-menu a:hover{background:#F2EFEA;}
.lang-menu a.current{color:var(--orange);font-weight:800;}
.lang-menu a .tick-l{font-size:.75rem;opacity:0;}
.lang-menu a.current .tick-l{opacity:1;}
@media(max-width:920px){
  .lang-switch{order:-1;margin-inline-start:auto;margin-inline-end:10px;}
  .lang-menu{inset-inline-end:auto;inset-inline-start:0;}
}

/* ============================================================
   RIGHT-TO-LEFT (Arabic)
   ============================================================ */
[dir="rtl"]{text-align:right;}
[dir="rtl"] body{font-family:'Montserrat','Cairo','Segoe UI',Tahoma,sans-serif;}
/* Bebas Neue has no Arabic glyphs — display type falls back to a strong Arabic face */
[dir="rtl"] .bebas,[dir="rtl"] h1.display,[dir="rtl"] .h2,[dir="rtl"] .h3-bebas,
[dir="rtl"] .bebas-xl,[dir="rtl"] .splash-mark,
[dir="rtl"] .step .n,[dir="rtl"] .stat .num,[dir="rtl"] .figure .big,
[dir="rtl"] .sec-num,[dir="rtl"] .pgroup-head h3,[dir="rtl"] .plogo-card .pproject,
[dir="rtl"] .way h3,[dir="rtl"] .side h3,[dir="rtl"] .track h3,[dir="rtl"] .cert h3{
  font-family:'Cairo','Tajawal','Segoe UI',Tahoma,sans-serif;
  font-weight:800;letter-spacing:0;line-height:1.15;
}
[dir="rtl"] h1.display{font-size:clamp(2.2rem,6vw,4.6rem);}
[dir="rtl"] .h2{font-size:clamp(1.8rem,4.2vw,3.2rem);}
[dir="rtl"] .eyebrow,[dir="rtl"] .cat,[dir="rtl"] .crumb,[dir="rtl"] .logo-name,
[dir="rtl"] .story .type,[dir="rtl"] .badge,[dir="rtl"] .discover,[dir="rtl"] .btn,
[dir="rtl"] .nav-cta,[dir="rtl"] .lang-btn{letter-spacing:0;}
[dir="rtl"] .eyebrow::before{margin-left:.7em;margin-right:0;}
[dir="rtl"] .lead,[dir="rtl"] .body-copy,[dir="rtl"] .hero .lead{max-width:60ch;}

/* Mirrored arrows and directional flourishes */
[dir="rtl"] .discover::after,[dir="rtl"] .btn::after,[dir="rtl"] .story .more::after{
  transform:scaleX(-1);display:inline-block;
}
[dir="rtl"] .thread,[dir="rtl"] .hook{direction:rtl;}

/* Borders and rules that indicate a side */
[dir="rtl"] .vline{border-left:0;border-right:1px solid var(--line);
  padding-left:0;padding-right:clamp(24px,4vw,56px);}
[dir="rtl"] .quote{border-left:0;border-right:3px solid var(--orange);
  padding:8px 28px 8px 0;}
[dir="rtl"] .mv-card .stamp{right:auto;left:-4%;}
[dir="rtl"] .cert .stamp-c{right:auto;left:-4%;}
[dir="rtl"] .pledge .watermark{right:auto;left:0;}

/* Hero: copy sits right, photo mirrors across.
   The pill pile re-settles from mirrored positions in main.js. */
[dir="rtl"] .hero-photo{left:auto;right:58%;}

/* Marquee runs the other way */
[dir="rtl"] .logo-track,[dir="rtl"] .marquee-track{animation-direction:reverse;}

/* Grids/flex that carried a left bias */
[dir="rtl"] .plogo-card,[dir="rtl"] .logo-item{text-align:center;}
[dir="rtl"] .side li,[dir="rtl"] .cert-point,[dir="rtl"] .step,
[dir="rtl"] .value-row,[dir="rtl"] .swatch-row{text-align:right;}
[dir="rtl"] .foot-note,[dir="rtl"] .foot-bar{direction:rtl;}
[dir="rtl"] .logo-marquee::before{left:auto;right:0;background:linear-gradient(-90deg,var(--ink),transparent);}
[dir="rtl"] .logo-marquee::after{right:auto;left:0;background:linear-gradient(90deg,var(--ink),transparent);}

/* Numerals stay Western so figures read consistently with the English site */
[dir="rtl"] .stat .num,[dir="rtl"] .figure .big,[dir="rtl"] .count,
[dir="rtl"] .step .n,[dir="rtl"] .sec-num,[dir="rtl"] .funnel-step .big-n,
[dir="rtl"] .edition .ed-n,[dir="rtl"] .pipe-step .n-p,[dir="rtl"] .way .num{
  direction:ltr;unicode-bidi:embed;
}

/* The wordmark and Latin brand names never flip */
[dir="rtl"] .logo,[dir="rtl"] .splash-mark,[dir="rtl"] .lang-btn,
[dir="rtl"] .logo-name,[dir="rtl"] .collab span,[dir="rtl"] .sponsor span{
  direction:ltr;unicode-bidi:isolate;
}
[dir="rtl"] .foot-bar .logo,[dir="rtl"] .nav-inner .logo{text-align:left;}