/* ============================================================
   YBI — Youth Business International (concept redesign)
   Design system: deep-ink navy · warm cream · single coral accent
   Type: Clash Display (display) + General Sans (text) via Fontshare
   ============================================================ */

:root{
  /* base — dark theme, locked */
  --ink:        #0A0F20;   /* deepest */
  --ink-2:      #0C1226;
  --navy:       #101A38;   /* raised surface */
  --navy-2:     #16224A;
  --line:       rgba(243,238,228,.12);
  --line-soft:  rgba(243,238,228,.07);

  /* cream text scale */
  --cream:      #F4EFE5;
  --cream-2:    rgba(244,239,229,.72);
  --cream-3:    rgba(244,239,229,.50);

  /* single accent */
  --coral:      #FF5C39;
  --coral-2:    #FF7A5C;
  --coral-ink:  #1a0a05;

  /* radii — one soft scale; CTAs are pill */
  --r:    16px;
  --r-lg: 24px;
  --pill: 999px;

  --wrap: 1320px;
  --gut:  clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.16,1,.3,1);

  --fs-display: clamp(2.7rem, 7.2vw, 6.6rem);
  --fs-h2:      clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3:      clamp(1.35rem, 2.4vw, 2rem);
  --fs-lead:    clamp(1.06rem, 1.5vw, 1.3rem);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

html{ overflow-x:clip }
body{
  font-family:"General Sans", system-ui, sans-serif;
  background:var(--ink);
  color:var(--cream);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* film grain — fixed, never on scroll containers */
body::after{
  content:"";
  position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{
  font-family:"Clash Display", "General Sans", sans-serif;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--cream);
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
::selection{ background:var(--coral); color:#fff }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.eyebrow{
  font-family:"General Sans"; font-weight:600;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--coral-2);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--coral); opacity:.75 }
.accent{ color:var(--coral) }
.mono{ font-family:"JetBrains Mono", ui-monospace, monospace }

/* ---------- buttons ---------- */
.btn{
  --pad:1.05em 1.6em;
  display:inline-flex; align-items:center; gap:.6em;
  padding:var(--pad);
  font-family:"General Sans"; font-weight:600; font-size:1rem;
  border-radius:var(--pill);
  border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s;
  will-change:transform;
}
.btn i{ font-size:1.1em; transition:transform .35s var(--ease) }
.btn--coral{ background:var(--coral); color:#fff }
.btn--coral:hover{ background:var(--coral-2) }
.btn--coral:hover i{ transform:translateX(4px) }
.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--line) }
.btn--ghost:hover{ border-color:var(--cream); background:rgba(244,239,229,.04) }
.btn--light{ background:var(--cream); color:var(--ink) }
.btn--light:hover{ background:#fff }
.btn--light:hover i{ transform:translateX(4px) }
.btn:active{ transform:translateY(1px) scale(.99) }
.btn--lg{ font-size:1.06rem; padding:1.15em 1.9em }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; color:var(--cream);
  border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:border-color .3s, gap .3s var(--ease);
}
.link-arrow i{ color:var(--coral); transition:transform .3s var(--ease) }
.link-arrow:hover{ border-color:var(--coral); gap:.8em }
.link-arrow:hover i{ transform:translateX(3px) }

/* ---------- reveal (hidden state only applies when JS is active) ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.js .reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,15,32,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__in{
  height:76px; display:flex; align-items:center; justify-content:space-between;
}
.nav.scrolled .nav__in{ height:66px }
.brand{ display:inline-flex; align-items:baseline; gap:.5em; font-family:"Clash Display"; font-weight:700; font-size:1.4rem; letter-spacing:-.02em }
.brand b{ color:var(--coral); font-weight:700 }
.brand span{ font-size:.7rem; font-family:"General Sans"; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3) }
.nav__links{ display:flex; align-items:center; gap:2rem }
.nav__links a{ font-weight:500; font-size:.98rem; color:var(--cream-2); transition:color .25s; position:relative }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--coral); transition:width .3s var(--ease) }
.nav__links a:hover{ color:var(--cream) }
.nav__links a:hover::after, .nav__links a.active::after{ width:100% }
.nav__links a.active{ color:var(--cream) }
.nav__cta{ display:flex; align-items:center; gap:1rem }
.nav__burger{ display:none; background:none; border:1px solid var(--line); color:var(--cream); width:46px; height:46px; border-radius:var(--pill); font-size:1.3rem; cursor:pointer; align-items:center; justify-content:center }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--ink-2);
  transform:translateY(-100%); transition:transform .5s var(--ease);
  display:flex; flex-direction:column; justify-content:center; padding:var(--gut);
}
.mobile-menu.open{ transform:none }
.mobile-menu a{ font-family:"Clash Display"; font-weight:600; font-size:clamp(2rem,9vw,3.2rem); padding:.35rem 0; color:var(--cream); border-bottom:1px solid var(--line) }
.mobile-menu a:last-of-type{ border:none }
.mobile-menu .btn{ margin-top:2rem; align-self:flex-start }

/* ============================================================
   HERO (home) — asymmetric split
   ============================================================ */
.hero{ position:relative; padding-top:150px; padding-bottom:clamp(60px,9vw,120px); overflow:hidden }
.hero__glow{ position:absolute; top:-15%; right:-5%; width:60vw; height:60vw; max-width:820px; max-height:820px;
  background:radial-gradient(circle at center, rgba(255,92,57,.22), transparent 62%); filter:blur(20px); pointer-events:none; z-index:0 }
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,80px); align-items:center }
.hero h1{ font-size:var(--fs-display); font-weight:600 }
.hero h1 em{ font-style:italic; color:var(--coral); font-weight:600 }
.hero__sub{ font-size:var(--fs-lead); color:var(--cream-2); max-width:30ch; margin:1.7rem 0 2.3rem }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem }
.hero__eyebrow{ margin-bottom:1.7rem }

.hero__media{ position:relative }
.hero__photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 90px -30px rgba(0,0,0,.7) }
.hero__photo img{ width:100%; height:100%; object-fit:cover }
.hero__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, transparent 40%, rgba(10,15,32,.5)) }
.hero__badge{
  position:absolute; left:-26px; bottom:34px; z-index:3;
  background:var(--cream); color:var(--ink);
  border-radius:var(--r); padding:1.1rem 1.35rem; width:min(240px,72%);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.6);
}
.hero__badge b{ font-family:"Clash Display"; font-size:2.5rem; font-weight:700; line-height:1; display:block; color:var(--ink) }
.hero__badge span{ font-size:.9rem; color:#4a4335; line-height:1.35; display:block; margin-top:.35rem }
.hero__note{ position:absolute; top:18px; left:18px; z-index:3; display:inline-flex; align-items:center; gap:.45em; background:var(--coral); color:#fff; font-weight:600; font-size:.8rem; padding:.5rem .9rem; border-radius:var(--pill); box-shadow:0 14px 30px -10px rgba(255,92,57,.6) }
.hero__note i{ font-size:1em }

/* ============================================================
   LOGO WALL / marquee
   ============================================================ */
.trust{ padding:clamp(40px,6vw,64px) 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft) }
.trust__label{ text-align:center; color:var(--cream-3); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:2rem }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee__track{ display:flex; gap:clamp(40px,6vw,84px); align-items:center; width:max-content; animation:scroll-x 34s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
@keyframes scroll-x{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none } }
.marquee__track img, .marquee__track .wordmark{ height:30px; opacity:.62; filter:grayscale(1) brightness(1.7); transition:opacity .3s, filter .3s }
.marquee__track img:hover{ opacity:1; filter:grayscale(0) brightness(1) }
.wordmark{ font-family:"Clash Display"; font-weight:600; font-size:1.35rem; color:var(--cream); letter-spacing:-.01em; white-space:nowrap; opacity:.6 }

/* ============================================================
   SECTION scaffolding
   ============================================================ */
.section{ padding:clamp(80px,11vw,150px) 0; position:relative }
.section--tight{ padding:clamp(60px,8vw,110px) 0 }
.section-head{ max-width:62ch; margin-bottom:clamp(40px,5vw,66px) }
.section-head h2{ font-size:var(--fs-h2); margin-top:1.1rem }
.section-head p{ color:var(--cream-2); font-size:var(--fs-lead); margin-top:1.2rem; max-width:56ch }

/* ---------- editorial statement ---------- */
.statement{ padding:clamp(90px,13vw,180px) 0 }
.statement p{
  font-family:"Clash Display"; font-weight:500;
  font-size:clamp(1.7rem,4vw,3.1rem); line-height:1.12; letter-spacing:-.02em;
  max-width:22ch;
}
.statement .muted{ color:var(--cream-3) }
.statement .accent{ color:var(--coral) }

/* ============================================================
   STAT BAND
   ============================================================ */
.stats{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr) }
.stat{ padding:clamp(40px,5vw,64px) clamp(20px,2.4vw,36px); border-right:1px solid var(--line) }
.stat:last-child{ border-right:none }
.stat b{ font-family:"Clash Display"; font-weight:700; font-size:clamp(2.6rem,5vw,4.4rem); line-height:.95; display:flex; align-items:baseline; letter-spacing:-.03em }
.stat b .suffix{ color:var(--coral); font-size:.5em; margin-left:.06em }
.stat span{ display:block; margin-top:.9rem; color:var(--cream-2); font-size:.98rem; max-width:22ch }

/* ============================================================
   PILLARS — interactive tabs
   ============================================================ */
.pillars__layout{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4vw,64px); align-items:start }
.pillars__list{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.pillar{ border-bottom:1px solid var(--line); padding:1.5rem 0; cursor:pointer; transition:padding-left .4s var(--ease) }
.pillar__top{ display:flex; align-items:center; gap:1.1rem }
.pillar__ico{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:rgba(244,239,229,.06); color:var(--cream-2); font-size:1.35rem; transition:all .35s var(--ease) }
.pillar h3{ font-size:var(--fs-h3); font-weight:600; transition:color .3s }
.pillar__body{ overflow:hidden; height:0; opacity:0; transition:height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease) }
.pillar__body p{ color:var(--cream-2); padding-left:calc(44px + 1.1rem); max-width:46ch }
.pillar.active{ padding-left:.4rem }
.pillar.active .pillar__ico{ background:var(--coral); color:#fff }
.pillar.active h3{ color:var(--cream) }
.pillar.active .pillar__body{ height:var(--h,auto); opacity:1; margin-top:1rem }
.pillar:not(.active) h3{ color:var(--cream-3) }
.pillars__visual{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; box-shadow:0 40px 80px -30px rgba(0,0,0,.6) }
.pillars__visual img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transform:scale(1.08); transition:opacity .7s var(--ease), transform 1.2s var(--ease) }
.pillars__visual img.show{ opacity:1; transform:scale(1) }
.pillars__visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,15,32,.55)) }

/* ============================================================
   NETWORK / map
   ============================================================ */
.network{ background:var(--ink-2); border-top:1px solid var(--line) }
.network__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center }
.map{ position:relative; aspect-ratio:16/10 }
.map svg{ width:100%; height:100%; overflow:visible }
.map .land{ fill:rgba(244,239,229,.09) }
.dot{ fill:var(--coral); transform-box:fill-box; transform-origin:center }
.dot-pulse{ fill:var(--coral); opacity:.5; animation:pulse 2.6s var(--ease) infinite }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:.55 } 70%{ transform:scale(3); opacity:0 } 100%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .dot-pulse{ animation:none; opacity:0 } }
.network__stats{ display:flex; gap:2.5rem; margin-top:2.2rem; flex-wrap:wrap }
.network__stats div b{ font-family:"Clash Display"; font-weight:700; font-size:2.6rem; display:block; line-height:1 }
.network__stats div span{ color:var(--cream-3); font-size:.9rem }
.region-ticker{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.6rem }
.region-ticker span{ font-size:.86rem; padding:.4rem .85rem; border:1px solid var(--line); border-radius:var(--pill); color:var(--cream-2) }

/* ============================================================
   STORIES
   ============================================================ */
.stories__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,54px) }
.stories__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,1.8vw,26px) }
.story{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/4; cursor:pointer }
.story:nth-child(2){ margin-top:clamp(0px,4vw,52px) }
.story img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.story::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(8,10,22,.86)) }
.story:hover img{ transform:scale(1.06) }
.story__meta{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.6rem }
.story__country{ font-family:"JetBrains Mono"; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-2) }
.story__meta h3{ font-size:1.4rem; margin:.35rem 0 .1rem }
.story__meta p{ color:var(--cream-2); font-size:.95rem; opacity:0; max-height:0; transition:opacity .45s var(--ease), max-height .45s var(--ease), margin .45s }
.story:hover .story__meta p{ opacity:1; max-height:80px; margin-top:.5rem }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; overflow:hidden; padding:clamp(90px,12vw,160px) 0; text-align:center }
.cta__glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 120%, rgba(255,92,57,.28), transparent 55%); pointer-events:none }
.cta h2{ font-size:clamp(2.4rem,6vw,5rem); max-width:16ch; margin-inline:auto }
.cta p{ color:var(--cream-2); font-size:var(--fs-lead); max-width:44ch; margin:1.6rem auto 2.5rem }
.cta__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:2 }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#070B18; border-top:1px solid var(--line); padding:clamp(60px,7vw,90px) 0 40px }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line) }
.footer__brand .brand{ font-size:1.6rem; margin-bottom:1.1rem }
.footer__brand p{ color:var(--cream-3); max-width:34ch; font-size:.96rem }
.footer__col h4{ font-family:"General Sans"; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-3); font-weight:600; margin-bottom:1.1rem }
.footer__col a{ display:block; color:var(--cream-2); padding:.34rem 0; font-size:.98rem; transition:color .25s, padding-left .25s var(--ease) }
.footer__col a:hover{ color:var(--coral); padding-left:.35rem }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-top:2rem; color:var(--cream-3); font-size:.86rem }
.footer__social{ display:flex; gap:.7rem }
.footer__social a{ width:42px; height:42px; border:1px solid var(--line); border-radius:var(--pill); display:grid; place-items:center; color:var(--cream-2); font-size:1.1rem; transition:all .3s var(--ease) }
.footer__social a:hover{ background:var(--coral); border-color:var(--coral); color:#fff; transform:translateY(-3px) }

/* ============================================================
   IMPACT PAGE
   ============================================================ */
.pagehero{ padding:170px 0 clamp(50px,6vw,90px); position:relative }
.pagehero__eyebrow{ margin-bottom:1.4rem }
.pagehero h1{ font-size:clamp(2.6rem,6.6vw,5.6rem); max-width:15ch }
.pagehero p{ color:var(--cream-2); font-size:var(--fs-lead); max-width:52ch; margin-top:1.6rem }
.pagehero--photo{ min-height:82vh; display:flex; align-items:flex-end; padding-bottom:clamp(50px,6vw,84px) }
.pagehero--photo .pagehero__bg{ position:absolute; inset:0; z-index:0 }
.pagehero--photo .pagehero__bg img{ width:100%; height:100%; object-fit:cover }
.pagehero--photo .pagehero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,15,32,.75) 0%, rgba(10,15,32,.35) 40%, rgba(10,15,32,.94) 100%) }
.pagehero--photo .wrap{ position:relative; z-index:2 }
.mini-stats{ display:flex; gap:clamp(2rem,5vw,4.5rem); margin-top:2.6rem; flex-wrap:wrap }
.mini-stats b{ font-family:"Clash Display"; font-weight:700; font-size:clamp(2.2rem,4vw,3.4rem); display:block; line-height:1 }
.mini-stats b .suffix{ color:var(--coral); font-size:.55em }
.mini-stats span{ color:var(--cream-3); font-size:.92rem }

/* goal block */
.goal{ text-align:center; padding:clamp(80px,11vw,150px) 0 }
.goal h2{ font-size:clamp(2.6rem,7vw,6rem); line-height:1 }
.goal h2 .accent{ display:block }
.goal p{ color:var(--cream-2); max-width:48ch; margin:1.8rem auto 0; font-size:var(--fs-lead) }
.goal__bars{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); max-width:820px; margin:3.5rem auto 0; text-align:left }
.goal__bar{ padding:1.6rem; border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2) }
.goal__bar .top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem }
.goal__bar .top b{ font-family:"Clash Display"; font-size:1.8rem; font-weight:700 }
.goal__bar .top span{ color:var(--cream-3); font-size:.9rem }
.goal__track{ height:8px; border-radius:var(--pill); background:rgba(244,239,229,.09); overflow:hidden }
.goal__fill{ height:100%; width:0; border-radius:var(--pill); background:linear-gradient(90deg,var(--coral),var(--coral-2)); transition:width 1.4s var(--ease) }
.goal__bar small{ display:block; margin-top:.8rem; color:var(--cream-3); font-size:.85rem }

/* model — horizontal steps */
.model__flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,30px); counter-reset:step }
.model__step{ position:relative; padding:2rem 1.7rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-2); overflow:hidden }
.model__step .num{ font-family:"Clash Display"; font-weight:700; font-size:3.4rem; color:rgba(255,92,57,.22); line-height:1 }
.model__step h3{ font-size:1.4rem; margin:.6rem 0 .7rem }
.model__step p{ color:var(--cream-2); font-size:.98rem }
.model__step .ico{ position:absolute; top:1.8rem; right:1.7rem; font-size:1.6rem; color:var(--coral) }

/* feature split (africa) */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center }
.feature--rev .feature__media{ order:2 }
.feature__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/4; box-shadow:0 40px 80px -30px rgba(0,0,0,.6) }
.feature__media img{ width:100%; height:100%; object-fit:cover }
.feature__tag{ position:absolute; top:1.2rem; left:1.2rem; background:rgba(10,15,32,.7); backdrop-filter:blur(10px); border:1px solid var(--line); color:var(--cream); font-size:.8rem; font-weight:600; padding:.5rem .9rem; border-radius:var(--pill) }
.feature h2{ font-size:var(--fs-h2) }
.feature p{ color:var(--cream-2); font-size:var(--fs-lead); margin:1.4rem 0 2rem }
.feature__list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2.2rem }
.feature__list li{ list-style:none; display:flex; gap:.9rem; align-items:flex-start; color:var(--cream-2) }
.feature__list i{ color:var(--coral); font-size:1.25rem; margin-top:.1rem }

/* quote spotlight */
.spotlight{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.spotlight__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,66px); align-items:center }
.spotlight__photo{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -30px rgba(0,0,0,.6) }
.spotlight__photo img{ width:100%; height:100%; object-fit:cover }
.spotlight blockquote{ font-family:"Clash Display"; font-weight:500; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.24; letter-spacing:-.01em }
.spotlight blockquote .accent{ color:var(--coral) }
.spotlight cite{ display:block; margin-top:1.8rem; font-style:normal }
.spotlight cite b{ font-family:"General Sans"; font-weight:600; font-size:1.05rem; display:block }
.spotlight cite span{ color:var(--cream-3); font-size:.92rem }

/* ============================================================
   PARTNER PAGE
   ============================================================ */
.phero{ padding:160px 0 clamp(60px,7vw,100px) }
.phero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,70px); align-items:center }
.phero h1{ font-size:clamp(2.5rem,6vw,5rem); max-width:14ch }
.phero p{ color:var(--cream-2); font-size:var(--fs-lead); max-width:40ch; margin:1.6rem 0 2.3rem }
.phero__panel{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,40px) }
.phero__panel h3{ font-size:1.1rem; color:var(--cream-3); font-family:"General Sans"; font-weight:600; letter-spacing:.02em; margin-bottom:1.6rem }
.phero__panel .row{ display:flex; align-items:baseline; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line) }
.phero__panel .row:last-child{ border:none }
.phero__panel .row b{ font-family:"Clash Display"; font-weight:700; font-size:2rem; color:var(--cream); min-width:3.5ch }
.phero__panel .row span{ color:var(--cream-2); font-size:.96rem }

/* value props — asymmetric */
.values{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(16px,1.6vw,22px) }
.value{ border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.6vw,38px); background:var(--ink-2); position:relative; overflow:hidden; transition:border-color .4s, transform .4s var(--ease) }
.value:hover{ border-color:rgba(255,92,57,.4); transform:translateY(-4px) }
.value__ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:rgba(255,92,57,.12); color:var(--coral); font-size:1.5rem; margin-bottom:1.4rem }
.value h3{ font-size:1.35rem; margin-bottom:.7rem }
.value p{ color:var(--cream-2); font-size:.98rem }
.value--wide{ grid-column:span 3 }
.value--tall{ grid-column:span 3 }
.value--full{ grid-column:span 6; display:flex; align-items:center; gap:2rem; flex-wrap:wrap }
.value--full .value__ico{ margin:0; flex:0 0 auto; width:52px; min-width:52px }
.value--full > .value__txt{ flex:1; min-width:240px }

/* partner types — tabs */
.ptypes{ display:grid; grid-template-columns:.5fr 1.5fr; gap:clamp(24px,3vw,52px); align-items:stretch }
.ptypes__nav{ display:flex; flex-direction:column; gap:.6rem }
.ptype-tab{ text-align:left; background:none; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.3rem; cursor:pointer; color:var(--cream-2); transition:all .3s var(--ease); font-family:"General Sans" }
.ptype-tab b{ font-family:"Clash Display"; font-size:1.25rem; display:block; color:var(--cream-3); transition:color .3s; font-weight:600 }
.ptype-tab small{ font-size:.85rem; color:var(--cream-3) }
.ptype-tab.active{ background:var(--ink-2); border-color:rgba(255,92,57,.4) }
.ptype-tab.active b{ color:var(--coral) }
.ptype-panel{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); min-height:420px }
.ptype-content{ display:none; grid-template-columns:1.1fr .9fr; height:100%; animation:fade .5s var(--ease) }
.ptype-content.show{ display:grid }
@keyframes fade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.ptype-content__text{ padding:clamp(28px,3vw,48px) }
.ptype-content__text h3{ font-size:1.9rem; margin-bottom:1rem }
.ptype-content__text p{ color:var(--cream-2); margin-bottom:1.6rem }
.ptype-content__text ul{ list-style:none; display:flex; flex-direction:column; gap:.8rem }
.ptype-content__text li{ display:flex; gap:.7rem; color:var(--cream-2); align-items:flex-start }
.ptype-content__text li i{ color:var(--coral); margin-top:.15rem }
.ptype-content__media{ position:relative }
.ptype-content__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* form */
.contact{ background:var(--ink-2); border-top:1px solid var(--line) }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:start }
.contact h2{ font-size:var(--fs-h2) }
.contact > .wrap > .contact__grid p.lead{ color:var(--cream-2); font-size:var(--fs-lead); margin-top:1.3rem; max-width:40ch }
.contact__points{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.3rem }
.contact__points div{ display:flex; gap:1rem; align-items:flex-start }
.contact__points i{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; background:rgba(255,92,57,.12); color:var(--coral); display:grid; place-items:center; font-size:1.3rem }
.contact__points b{ display:block; font-size:1.02rem }
.contact__points span{ color:var(--cream-3); font-size:.92rem }
.form{ background:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,40px) }
.field{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.3rem }
.field label{ font-size:.86rem; font-weight:600; color:var(--cream-2) }
.field input, .field textarea, .field select{
  background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
  padding:.9rem 1rem; color:var(--cream); font-family:"General Sans"; font-size:1rem;
  transition:border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--cream-3) }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,92,57,.18) }
.field textarea{ resize:vertical; min-height:120px }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem }
.form__msg{ display:none; margin-top:1rem; padding:1rem 1.1rem; border-radius:12px; background:rgba(255,92,57,.1); border:1px solid rgba(255,92,57,.35); color:var(--coral-2); font-size:.95rem }
.form__msg.show{ display:block }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav__links{ display:none }
  .nav__burger{ display:flex }
  .nav__cta .btn{ display:none }
  .hero__grid{ grid-template-columns:1fr; gap:44px }
  .hero__media{ max-width:440px }
  .pillars__layout{ grid-template-columns:1fr }
  .pillars__visual{ display:none }
  .network__grid, .feature, .spotlight__grid, .phero__grid, .contact__grid{ grid-template-columns:1fr }
  .feature--rev .feature__media{ order:0 }
  .ptypes{ grid-template-columns:1fr }
  .ptypes__nav{ flex-direction:row; overflow-x:auto; padding-bottom:.4rem }
  .ptype-tab{ min-width:180px }
  .ptype-content.show{ grid-template-columns:1fr }
  .ptype-content__media{ min-height:220px; order:-1 }
  .ptype-content__media img{ position:relative }
  .values{ grid-template-columns:1fr 1fr }
  .value--wide,.value--tall,.value--full{ grid-column:span 2 }
  .footer__top{ grid-template-columns:1fr 1fr }
  .footer__brand{ grid-column:1/-1 }
}
@media (max-width:680px){
  body{ font-size:16px }
  .stats__grid{ grid-template-columns:1fr 1fr }
  .stat{ border-bottom:1px solid var(--line) }
  .stat:nth-child(2){ border-right:none }
  .stories__grid, .model__flow, .goal__bars{ grid-template-columns:1fr }
  .story:nth-child(2){ margin-top:0 }
  .values{ grid-template-columns:1fr }
  .value--wide,.value--tall,.value--full{ grid-column:span 1 }
  .value--full{ display:block }
  .value--full .value__ico{ margin-bottom:1.2rem }
  .form__row{ grid-template-columns:1fr }
  .footer__top{ grid-template-columns:1fr }
  .hero__badge{ left:0 }
  .mini-stats{ gap:2rem }
}