/* ============================================================
   Beyond Birr (ብር) — shared design system
   Palette + type from the client brand kit. Cream page inside a
   green print-frame, like their paper collateral.
   ============================================================ */
:root{
  --green:#7CE83B;
  --green-bright:#5FDD1E;
  --green-leaf:#3D8E14;
  --cream:#F5F8E4;
  --paper:#FBFDF2;
  --ink:#0C0C0C;
  --charcoal:#2A2A2A;
  --frame:12px;
  --display:"Fraunces",serif;
  --type:"Special Elite",monospace;
  --body:"Figtree",sans-serif;
  --ethiopic:"Noto Serif Ethiopic",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--green);
  font-family:var(--body);
  color:var(--ink);
  line-height:1.6;
}
.sheet{
  background:var(--cream);
  margin:var(--frame);
  min-height:calc(100vh - var(--frame)*2);
  border-radius:6px;
  overflow:hidden;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- header + nav ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
  padding:20px 0;gap:14px;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand svg{display:block;flex-shrink:0}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.01em;line-height:1.1}
.brand-name .amh{font-family:var(--ethiopic);font-weight:800;font-size:.95em}
nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
nav a{
  font-family:var(--type);font-size:.85rem;color:var(--ink);
  text-decoration:none;padding:6px 14px;border-radius:999px;white-space:nowrap;
}
nav a:hover{background:var(--ink);color:var(--green)}
nav a.active{background:var(--green)}
nav a.active:hover{background:var(--ink);color:var(--green)}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--type);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  display:inline-block;background:var(--ink);color:var(--green);
  padding:6px 18px;border-radius:999px;margin-bottom:26px;
}
h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:1.02;letter-spacing:-.02em;
  max-width:14ch;margin:0 auto 22px;
}
h1 .accent{color:var(--green-leaf)}
h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1.05;letter-spacing:-.015em;
}
section{padding:64px 0}
.sec-head{text-align:center;margin-bottom:40px}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head p{max-width:58ch;margin:14px auto 0;color:var(--charcoal)}

.hero{padding:56px 0 48px;text-align:center;position:relative}
.hero p.lede{max-width:56ch;margin:0 auto 30px;font-size:1.12rem;color:var(--charcoal)}
.hero-sun{position:absolute;top:34px;right:4%;width:92px;opacity:.9;pointer-events:none}
.hero-jebena{position:absolute;bottom:10px;left:4%;width:76px;opacity:.9;pointer-events:none}

.fact-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{
  font-family:var(--type);font-size:.82rem;
  border:2px solid var(--ink);border-radius:999px;
  padding:6px 14px;background:var(--paper);
}

/* ---------- buttons ---------- */
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.btn{
  display:inline-block;font-family:var(--type);font-size:.95rem;
  background:var(--ink);color:var(--green);
  padding:13px 26px;border-radius:999px;text-decoration:none;
  border:2.5px solid var(--ink);
}
.btn:hover{background:var(--green);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--green)}
.btn.on-dark{background:var(--green);color:var(--ink);border-color:var(--green)}
.btn.on-dark:hover{background:transparent;color:var(--green)}

/* ---------- film hero + theater ---------- */
.film{
  position:relative;min-height:min(86vh,840px);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(0)}
.film-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.16) 0%,rgba(12,12,12,.24) 40%,rgba(12,12,12,.86) 100%);
}
.film-chip{
  position:absolute;top:22px;left:22px;z-index:2;
  font-family:var(--type);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(12,12,12,.55);color:var(--green);
  border:1.5px solid rgba(124,232,59,.5);
  padding:5px 14px;border-radius:999px;backdrop-filter:none;
}
/* orchestrated load-in: the film content rises line by line */
.js .film-content .eyebrow.reveal{transition-delay:.1s}
.js .film-content h1.reveal{transition-delay:.28s}
.js .film-content .lede.reveal{transition-delay:.46s}
.js .film-content .cta-row.reveal{transition-delay:.64s}
.film-content{position:relative;z-index:2;text-align:center;width:100%;max-width:900px;padding:120px 24px 60px}
.film-content h1{color:var(--cream)}
.film-content h1 .accent{color:var(--green)}
.film-content .lede{color:#E9EFD8;max-width:52ch;margin:0 auto 30px;font-size:1.12rem}
.film-content .btn.ghost{color:var(--cream);border-color:var(--cream);background:rgba(12,12,12,.35)}
.film-content .btn.ghost:hover{background:var(--cream);color:var(--ink)}
.fact-strip{padding:26px 0 0}
.theater{
  position:fixed;inset:0;z-index:1100;
  background:rgba(8,10,4,.94);
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.theater[hidden]{display:none}
.theater video{
  width:min(1100px,100%);max-height:84vh;
  border:3px solid var(--green);border-radius:14px;background:#000;
}
.theater-close{
  position:absolute;top:18px;right:22px;width:46px;height:46px;
  background:var(--ink);color:var(--green);border:2px solid var(--green);
  border-radius:50%;font-size:1.05rem;cursor:pointer;
}
.theater-close:hover{background:var(--green);color:var(--ink)}
.theater-close:focus-visible{outline:3px solid var(--green);outline-offset:3px}
/* phones: the film becomes a full-frame cinema card on an ink stage —
   no cropping, captions stay readable, full sharpness */
@media (max-width:700px){
  .film{
    display:flex;flex-direction:column;align-items:stretch;
    min-height:0;background:var(--ink);padding:20px 16px 42px;
  }
  .film-video{
    position:static;width:100%;height:auto;aspect-ratio:16/9;
    border-radius:12px;border:2.5px solid var(--green);
  }
  .film-shade{display:none}
  .film-chip{position:static;order:-1;align-self:center;margin-bottom:14px}
  .film-content{padding:28px 4px 0;max-width:none}
}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;background:var(--ink);color:var(--green);
  padding:13px 0;font-family:var(--type);font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:bb-scroll 32s linear infinite}
.marquee-track span{padding:0 18px}
@keyframes bb-scroll{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;
  padding:22px 18px;text-align:center;position:relative;
  box-shadow:5px 5px 0 var(--green);
}
.stat .num{font-family:var(--display);font-weight:900;font-size:2.3rem;line-height:1}
.stat .lbl{font-family:var(--type);font-size:.8rem;margin-top:8px;color:var(--charcoal)}
.overview-note{
  margin-top:28px;text-align:center;font-size:1.05rem;color:var(--charcoal);
  max-width:62ch;margin-left:auto;margin-right:auto;
}
.overview-note strong{color:var(--ink)}

/* ---------- card grid (features / logistics) ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;
  padding:26px 22px;
}
.card h3{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.15;margin-bottom:8px}
.card p{font-size:.97rem;color:var(--charcoal)}
.card .k{
  font-family:var(--type);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-block;background:var(--green);border-radius:999px;padding:3px 12px;margin-bottom:14px;
}
.card .icon{margin-bottom:14px}

/* ---------- dark feature panel ---------- */
.why{background:var(--ink);color:var(--cream);border-radius:22px;overflow:hidden}
.why-inner{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center;padding:56px 48px}
.why-icon{display:flex;justify-content:center}
.why h2{color:var(--green)}
.why .amh-big{font-family:var(--ethiopic);color:var(--green);font-weight:800}
.why p{margin-top:16px;color:#DDE6C8}
.why p + p{margin-top:12px}

/* ---------- benefits (what you'll get / gain) ---------- */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.benefit-card{
  border:2.5px solid var(--ink);border-radius:18px;padding:34px 30px;
  background:var(--paper);
}
.benefit-card.dark{background:var(--ink);border-color:var(--ink)}
.benefit-card h3{font-family:var(--display);font-weight:800;font-size:1.6rem;margin-bottom:6px}
.benefit-card.dark h3{color:var(--cream)}
.benefit-card .tag{font-family:var(--type);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:10px;color:var(--green-leaf)}
.benefit-card.dark .tag{color:var(--green)}
.benefit-card .sub{color:var(--charcoal);font-size:.95rem;margin-bottom:18px}
.benefit-card.dark .sub{color:#C9D6AC}
.benefit-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.benefit-list li{
  position:relative;padding-left:36px;color:var(--charcoal);font-size:.98rem;
}
.benefit-card.dark .benefit-list li{color:#DDE6C8}
.benefit-list li::before{
  content:"✓";position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:50%;
  background:var(--green);color:var(--ink);
  font-family:var(--type);font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.benefit-list li strong{color:var(--ink)}
.benefit-card.dark .benefit-list li strong{color:var(--cream)}
@media (max-width:900px){.benefits{grid-template-columns:1fr}}

/* ---------- mission / vision ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mv-card{
  border:2.5px solid var(--ink);border-radius:18px;padding:34px 30px;
  background:var(--paper);position:relative;
}
.mv-card.vision{background:var(--green)}
.mv-card h3{font-family:var(--display);font-weight:800;font-size:1.6rem;margin-bottom:12px}
.mv-card .tag{font-family:var(--type);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:10px;color:var(--green-leaf)}
.mv-card.vision .tag{color:var(--ink)}
.mv-card p{color:var(--charcoal)}
.mv-card.vision p{color:#173203}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.value{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:24px 20px}
.value .v-num{
  font-family:var(--type);font-size:.85rem;display:inline-block;
  background:var(--green);border-radius:999px;padding:3px 12px;margin-bottom:14px;
}
.value h3{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.15;margin-bottom:8px}
.value h3 .amh{font-family:var(--ethiopic);font-size:.9em}
.value p{font-size:.95rem;color:var(--charcoal)}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:24px;justify-content:center}
.member{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;
  padding:34px 28px;text-align:center;position:relative;overflow:hidden;
}
.member .portrait{
  width:132px;height:132px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--green);
  font-family:var(--display);font-weight:900;font-size:2.4rem;
  border:4px solid var(--green);overflow:hidden;
}
.member .portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.member h3{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.1}
.member .role{
  font-family:var(--type);font-size:.82rem;display:inline-block;margin-top:10px;
  background:var(--green);padding:4px 14px;border-radius:999px;
}
.member .bio{color:var(--charcoal);font-size:.95rem;margin-top:14px;max-width:36ch;margin-left:auto;margin-right:auto}
.member .ribbon{height:6px;border-radius:99px;margin:18px auto 0;max-width:120px}
.ribbon.et{background:linear-gradient(90deg,#078930 33%,#FCDD09 33% 66%,#DA121A 66%)}
.ribbon.er{background:linear-gradient(90deg,#12AD2B 33%,#EA0437 33% 66%,#4189DD 66%)}

/* ---------- banknote timeline ---------- */
.notes{display:flex;flex-direction:column;gap:26px;max-width:820px;margin:0 auto}
.note{
  position:relative;border:3px solid var(--green-leaf);border-radius:16px;
  background:var(--paper);padding:30px 34px 30px 118px;
  display:block;color:inherit;text-decoration:none;
}
.note::before{
  content:"";position:absolute;inset:8px;border:1.5px dashed var(--green-leaf);
  border-radius:10px;pointer-events:none;opacity:.55;
}
.note .denom{
  position:absolute;left:26px;top:50%;transform:translateY(-50%);
  width:66px;height:66px;border-radius:50%;
  border:2.5px solid var(--green-leaf);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--type);line-height:1.05;text-align:center;
  background:var(--cream);
}
.note .denom .d-top{font-size:.62rem;letter-spacing:.06em;color:var(--green-leaf)}
.note .denom .d-big{font-family:var(--display);font-weight:900;font-size:1.35rem}
.note .dates{font-family:var(--type);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-leaf)}
.note h3{font-family:var(--display);font-weight:800;font-size:1.45rem;margin:4px 0 8px}
.note p{color:var(--charcoal);font-size:.98rem;max-width:56ch}
.note.market{
  background:var(--ink);border-color:var(--green);
  padding-top:40px;padding-bottom:40px;
}
.note.market::before{border-color:var(--green);opacity:.5}
.note.market .denom{background:var(--ink);border-color:var(--green)}
.note.market .denom .d-top,.note.market .denom .d-big{color:var(--green)}
.note.market .dates{color:var(--green)}
.note.market h3{color:var(--cream);font-size:1.8rem}
.note.market p{color:#C9D6AC}
.stamp{
  position:absolute;top:18px;right:22px;transform:rotate(-8deg);
  font-family:var(--type);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);border:2.5px solid var(--green);border-radius:8px;
  padding:5px 12px;
}
.note .connector{
  position:absolute;left:56px;bottom:-29px;height:32px;width:3px;
  background:var(--green-leaf);opacity:.6;
}
.note:last-child .connector{display:none}

/* ---------- photo feature (market day) ---------- */
.photo-card{
  position:relative;max-width:760px;margin:0 auto;
  border:3px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:10px 10px 0 var(--green);
}
.photo-card img{display:block;width:100%;height:auto;transform:scale(1.12);transition:transform 1.4s cubic-bezier(.22,1,.36,1) .15s}
.photo-card.in img{transform:scale(1)}
.photo-card::after{
  content:"";position:absolute;inset:0;background:var(--green);
  transition:transform .9s cubic-bezier(.22,1,.36,1) .15s;
}
.photo-card.in::after{transform:translateX(102%)}
.photo-cap{
  position:absolute;left:16px;bottom:16px;z-index:2;
  font-family:var(--type);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--green);padding:6px 16px;border-radius:999px;
}

/* ---------- apply promo (compositor-only animations: transform + opacity) ---------- */
.btn-mega{
  font-size:1.15rem;padding:18px 42px;position:relative;
}
.btn-mega::before,.nav-apply::before{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  border:3px solid var(--green-bright);pointer-events:none;
  animation:bb-ring 2.6s ease-out infinite;
}
.nav-apply::before{animation-duration:3.4s;border-width:2px}
.btn-mega .shine{
  position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none;
}
.btn-mega .shine::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:50%;
  background:linear-gradient(105deg,transparent,rgba(124,232,59,.5),transparent);
  transform:translateX(-130%) skewX(-18deg);
  animation:bb-shine 2.6s ease-in-out infinite;
}
@keyframes bb-ring{
  0%{transform:scale(1);opacity:.7}
  75%,100%{transform:scale(1.22);opacity:0}
}
@keyframes bb-shine{
  0%{transform:translateX(-130%) skewX(-18deg)}
  55%,100%{transform:translateX(330%) skewX(-18deg)}
}
.nav-apply{
  background:var(--green) !important;border:2px solid var(--ink);position:relative;
}
.nav-apply:hover{background:var(--ink) !important;color:var(--green) !important}

/* ---------- letter / quote block ---------- */
.letter{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;
  padding:44px 48px;max-width:760px;margin:0 auto;position:relative;
}
.letter::before{
  content:"";position:absolute;inset:9px;border:1.5px dashed var(--green-leaf);
  border-radius:11px;pointer-events:none;opacity:.45;
}
.letter p{color:var(--charcoal);position:relative}
.letter p + p{margin-top:14px}
.letter .salute{font-family:var(--type);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-leaf);margin-bottom:16px}
.letter .sign{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-top:20px;color:var(--ink)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
.step{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:26px 22px;
  position:relative;
}
.step .s-num{
  width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--green);
  font-family:var(--type);font-size:1.1rem;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.step h3{font-family:var(--display);font-weight:800;font-size:1.25rem;margin-bottom:8px}
.step p{font-size:.95rem;color:var(--charcoal)}
.step a{color:var(--green-leaf);font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq details{
  background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;
  padding:0;overflow:hidden;
}
.faq summary{
  font-family:var(--display);font-weight:700;font-size:1.12rem;
  padding:20px 24px;cursor:pointer;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-family:var(--type);font-size:1.2rem;color:var(--green-leaf);
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{background:var(--green)}
.faq .a{padding:18px 24px 22px;color:var(--charcoal);font-size:.98rem}
.faq .a a{color:var(--green-leaf);font-weight:600}

/* ---------- big CTA panel ---------- */
.cta-panel{
  background:var(--ink);border-radius:22px;text-align:center;
  padding:64px 32px;position:relative;overflow:hidden;
}
.cta-panel h2{color:var(--cream)}
.cta-panel h2 .g{color:var(--green)}
.cta-panel p{color:#C9D6AC;max-width:52ch;margin:14px auto 28px}
.cta-panel .contact-line{font-family:var(--type);font-size:.9rem;color:var(--green);margin-top:22px}
.cta-panel .contact-line a{color:var(--green);text-decoration:none}
.cta-panel .contact-line a:hover{text-decoration:underline}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--cream);margin-top:30px}
.foot-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:22px;padding:44px 0 30px;
}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .tagline{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--green);line-height:1.2}
.foot-contact{font-family:var(--type);font-size:.9rem;display:flex;flex-direction:column;gap:6px}
.foot-contact a{color:var(--cream);text-decoration:none}
.foot-contact a:hover{color:var(--green)}
.foot-social{font-family:var(--type);font-size:.9rem;color:var(--green)}
.foot-nav{
  display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
  padding:0 0 34px;font-family:var(--type);font-size:.82rem;
}
.foot-nav a{color:#C9D6AC;text-decoration:none}
.foot-nav a:hover{color:var(--green)}

/* ---------- motion (content stays visible without JS) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* staggered groups: cards, stats, values, steps cascade in */
.js .stats .stat:nth-child(2),.js .cards-3 .card:nth-child(2),.js .cards-2 .card:nth-child(2),
.js .values .value:nth-child(2),.js .steps .step:nth-child(2){transition-delay:.12s}
.js .stats .stat:nth-child(3),.js .cards-3 .card:nth-child(3),.js .cards-2 .card:nth-child(3),
.js .values .value:nth-child(3),.js .steps .step:nth-child(3){transition-delay:.24s}
.js .stats .stat:nth-child(4),.js .cards-2 .card:nth-child(4),
.js .values .value:nth-child(4){transition-delay:.36s}

/* hero chips pop in one by one */
.js .fact-chips.reveal .chip{opacity:0;transform:translateY(10px) scale(.92);transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
.js .fact-chips.reveal.in .chip{opacity:1;transform:none}
.js .fact-chips.reveal.in .chip:nth-child(2){transition-delay:.08s}
.js .fact-chips.reveal.in .chip:nth-child(3){transition-delay:.16s}
.js .fact-chips.reveal.in .chip:nth-child(4){transition-delay:.24s}
.js .fact-chips.reveal.in .chip:nth-child(5){transition-delay:.32s}

/* banknotes print in sideways, like a bill leaving the machine */
.js .note.reveal{transform:translateX(-52px) rotate(-1.2deg)}
.js .note.reveal.in{transform:none}
.js .note.reveal .denom{scale:.4;opacity:0;transition:scale .5s cubic-bezier(.34,1.56,.64,1) .3s,opacity .3s ease .3s}
.js .note.reveal.in .denom{scale:1;opacity:1}

/* the market stamp slams down after the note lands */
.js .note.market .stamp{opacity:0}
.js .note.market.in .stamp{animation:bb-stamp .5s cubic-bezier(.2,.85,.35,1.3) .55s forwards}
@keyframes bb-stamp{
  0%{opacity:0;transform:rotate(6deg) scale(2.6)}
  70%{opacity:1;transform:rotate(-10deg) scale(.94)}
  100%{opacity:1;transform:rotate(-8deg) scale(1)}
}

/* benefit checklists tick down the list */
.js .benefit-card.reveal .benefit-list li{opacity:0;transform:translateX(-12px);transition:opacity .4s ease,transform .4s ease}
.js .benefit-card.reveal.in .benefit-list li{opacity:1;transform:none}
.js .benefit-card.reveal.in .benefit-list li:nth-child(2){transition-delay:.09s}
.js .benefit-card.reveal.in .benefit-list li:nth-child(3){transition-delay:.18s}
.js .benefit-card.reveal.in .benefit-list li:nth-child(4){transition-delay:.27s}
.js .benefit-card.reveal.in .benefit-list li:nth-child(5){transition-delay:.36s}
.js .benefit-card.reveal.in .benefit-list li:nth-child(6){transition-delay:.45s}

/* team flag ribbons draw in */
.js .member.reveal .ribbon{max-width:0;transition:max-width .7s ease .35s}
.js .member.reveal.in .ribbon{max-width:120px}

/* ink progress: a thin hand-inked stroke with drips, filling as you read.
   Texture is drawn into the pattern itself (no live filters = no repaint cost). */
#bb-progress{
  position:fixed;top:0;left:0;height:30px;width:0;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='30'%3E%3Cpath d='M0 0 H260 V4.5 C248 6.2 236 3.8 222 5.4 C208 7 196 4.2 182 5.6 C168 7 152 3.6 138 5.2 C124 6.8 110 4 96 5.8 C82 7.2 68 3.8 54 5.4 C40 7 26 4.2 12 5.8 C7 6.4 3 5.2 0 5.8 Z' fill='%230C0C0C'/%3E%3Cpath d='M38 5 C42.5 12 43 20 38.6 23.5 C34 21 33.6 12.5 38 5' fill='%230C0C0C'/%3E%3Ccircle cx='38.5' cy='25.5' r='1.6' fill='%230C0C0C'/%3E%3Cpath d='M151 5 C154.5 9.5 154 15.5 151.4 17.8 C148 15.6 148 9.8 151 5' fill='%230C0C0C'/%3E%3Cpath d='M226 4.5 C228.4 7.5 228 11.5 226.3 12.8 C224 11.6 223.8 7.8 226 4.5' fill='%230C0C0C'/%3E%3Ccircle cx='104' cy='7.5' r='1.1' fill='%230C0C0C'/%3E%3Ccircle cx='187' cy='7' r='0.9' fill='%230C0C0C'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  z-index:1000;pointer-events:none;opacity:0;transition:opacity .3s ease;
}
#bb-progress::after{
  content:"";position:absolute;top:-1px;right:-3px;
  width:10px;height:10px;
  background:var(--ink);border-radius:55% 45% 60% 40%;
}

/* marker underline sweeps beneath section headings */
.js .sec-head h2.reveal::after{
  content:"";display:block;width:0;height:6px;margin:16px auto 0;
  background:var(--green);border-radius:99px;
  transition:width .8s cubic-bezier(.22,1,.36,1) .25s;
}
.js .sec-head h2.reveal.in::after{width:110px}

/* timeline connectors draw downward after each note lands */
.js .note .connector{transform-origin:top;transition:transform .5s ease .55s}
.js .note.reveal:not(.in) .connector{transform:scaleY(0)}

/* cards lean in alternately instead of rising straight */
.js .cards-3 .card.reveal:not(.in):nth-child(odd),
.js .cards-2 .card.reveal:not(.in):nth-child(odd),
.js .values .value.reveal:not(.in):nth-child(odd){transform:translateY(30px) rotate(-1.8deg)}
.js .cards-3 .card.reveal:not(.in):nth-child(even),
.js .cards-2 .card.reveal:not(.in):nth-child(even),
.js .values .value.reveal:not(.in):nth-child(even){transform:translateY(30px) rotate(1.8deg)}

/* portraits spring in after the member card lands */
.js .member .portrait{transition:scale .6s cubic-bezier(.34,1.56,.64,1) .18s,rotate .6s cubic-bezier(.34,1.56,.64,1) .18s,opacity .4s ease .18s}
.js .member.reveal:not(.in) .portrait{scale:.72;rotate:-6deg;opacity:0}

/* dark panels settle into place */
.js .why.reveal:not(.in){transform:translateY(30px) scale(.965)}
.js .cta-panel.reveal:not(.in){transform:translateY(30px) scale(.965)}

@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .fact-chips.reveal .chip,.js .note.reveal .denom,
  .js .benefit-card.reveal .benefit-list li{opacity:1;transform:none;scale:1;transition:none}
  .js .note.reveal{transform:none}
  .js .note.market .stamp{opacity:1;animation:none}
  .js .member.reveal .ribbon{max-width:120px;transition:none}
  .js .note.reveal:not(.in) .connector{transform:none}
  .js .cards-3 .card.reveal:not(.in),.js .cards-2 .card.reveal:not(.in),
  .js .values .value.reveal:not(.in){transform:none}
  .js .member.reveal:not(.in) .portrait{scale:1;rotate:0deg;opacity:1}
  .js .why.reveal:not(.in),.js .cta-panel.reveal:not(.in){transform:none}
  .js .sec-head h2.reveal::after{width:110px;transition:none}
  #bb-progress{transition:none}
  .btn-mega::before,.nav-apply::before,.btn-mega .shine::after,.bb-fab::before{animation:none;opacity:0}
  .marquee-track{animation:none}
  html{scroll-behavior:auto}
}

a:focus-visible{outline:3px solid var(--green-leaf);outline-offset:3px;border-radius:6px}
summary:focus-visible{outline:3px solid var(--green-leaf);outline-offset:-3px}

/* ---------- chat widget ---------- */
.bb-chat{position:fixed;bottom:24px;right:24px;z-index:999;font-family:var(--body)}
.bb-fab{
  height:56px;border-radius:999px;padding:0 22px 0 18px;
  background:var(--ink);color:var(--green);
  border:3px solid var(--green);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 18px rgba(12,12,12,.28);
  transition:transform .18s ease;
  position:relative;
}
.bb-fab::before{
  content:"";position:absolute;inset:-5px;border-radius:999px;
  border:3px solid var(--green-bright);pointer-events:none;
  animation:bb-ring 2.8s ease-out 1.5s 4;opacity:0;
}
.bb-fab-label{
  font-family:var(--type);font-size:.85rem;letter-spacing:.05em;
  color:var(--green);white-space:nowrap;
}
.bb-fab:hover{transform:scale(1.05)}
.bb-fab:focus-visible{outline:3px solid var(--green-leaf);outline-offset:3px}
.bb-panel[hidden]{display:none}
.bb-panel{
  position:absolute;bottom:76px;right:0;
  width:min(360px,calc(100vw - 32px));
  height:min(520px,calc(100vh - 130px));
  background:var(--cream);border:3px solid var(--ink);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 14px 40px rgba(12,12,12,.3);
}
.bb-head{
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--cream);padding:14px 16px;flex-shrink:0;
}
.bb-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--green);color:var(--ink);
  font-family:var(--ethiopic);font-weight:800;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
}
.bb-title{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.1}
.bb-sub{font-family:var(--type);font-size:.68rem;color:var(--green);margin-top:2px}
.bb-close{
  margin-left:auto;background:none;border:none;color:var(--cream);
  font-size:1rem;cursor:pointer;padding:6px 8px;border-radius:8px;
}
.bb-close:hover{color:var(--green)}
.bb-close:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bb-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.bb-msg{
  max-width:85%;padding:10px 14px;border-radius:14px;
  font-size:.92rem;line-height:1.5;
}
.bb-msg.bot{
  background:var(--paper);border:2px solid var(--ink);
  border-bottom-left-radius:4px;align-self:flex-start;color:var(--charcoal);
}
.bb-msg.bot a{color:var(--green-leaf);font-weight:600}
.bb-msg.bot strong{color:var(--ink)}
.bb-msg.user{
  background:var(--ink);color:var(--cream);
  border-bottom-right-radius:4px;align-self:flex-end;
}
.bb-typing{font-family:var(--type);letter-spacing:.2em;color:var(--green-leaf)}
.bb-chips{
  display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px;flex-shrink:0;
}
.bb-chip{
  font-family:var(--type);font-size:.7rem;cursor:pointer;
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;
  padding:4px 11px;color:var(--ink);
}
.bb-chip:hover{background:var(--green)}
.bb-chip:focus-visible{outline:2px solid var(--green-leaf);outline-offset:2px}
.bb-form{
  display:flex;gap:8px;padding:12px 14px;border-top:2.5px solid var(--ink);
  background:var(--paper);flex-shrink:0;
}
.bb-input{
  flex:1;font-family:var(--body);font-size:.92rem;
  border:2px solid var(--ink);border-radius:999px;padding:9px 16px;
  background:var(--cream);color:var(--ink);
}
.bb-input:focus{outline:2px solid var(--green-leaf);outline-offset:1px}
.bb-send{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--ink);color:var(--green);border:none;cursor:pointer;font-size:.95rem;
}
.bb-send:hover{background:var(--green-leaf);color:var(--cream)}
.bb-send:focus-visible{outline:2px solid var(--green-leaf);outline-offset:2px}
@media (max-width:600px){
  .bb-chat{bottom:16px;right:16px}
  .bb-fab{height:50px;padding:0 18px 0 15px}
  .bb-fab-label{font-size:.78rem}
  .bb-panel{bottom:64px;height:min(480px,calc(100vh - 110px))}
}
@media (prefers-reduced-motion: reduce){
  .bb-fab{transition:none}
  .bb-fab:hover{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .why-inner{grid-template-columns:1fr;text-align:center;padding:44px 28px;gap:24px}
  .mv{grid-template-columns:1fr}
  .team{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .hero-sun,.hero-jebena{display:none}
  header{justify-content:center}
}
@media (max-width:600px){
  :root{--frame:8px}
  section{padding:48px 0}
  .values{grid-template-columns:1fr}
  .letter{padding:32px 24px}
  .note{padding:88px 24px 26px 24px}
  .note .denom{left:24px;top:22px;transform:none;width:54px;height:54px}
  .note .denom .d-big{font-size:1.05rem}
  .note .connector{left:50px}
  .stamp{top:14px;right:14px;font-size:.68rem}
  .note.market{padding-top:96px}
}