/* =========================================================
   cefe.css — scoped under .cefe-page, safe to import globally
   Place this file next to page.tsx and import at top of page.tsx:
   import "./cefe.css"  (or the relative path to it)

   Google Fonts: add this @import to your root layout.tsx global CSS:
   @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
========================================================= */

.cefe-page {
  --ink:#1c2b22;
  --paper:#f6f1e7;
  --clay:#c1542c;
  --clay-dark:#9c4022;
  --olive:#3c5240;
  --olive-light:#5c7860;
  --card:#fffaf0;
  --line:rgba(28,43,34,0.14);
  --gold:#d99a3d;
  --maxw:1180px;
}
.cefe-page * {box-sizing:border-box;margin:0;padding:0;}
.cefe-page {
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.cefe-page h1, .cefe-page h2, .cefe-page h3, .cefe-page .display {font-family:'Fraunces', serif;}
.cefe-page .mono {font-family:'JetBrains Mono', monospace;letter-spacing:0.02em;}

.cefe-page .wrap {max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.cefe-page img, .cefe-page video {max-width:100%;display:block;}

/* ---------- ISLAND SUB-NAV ---------- */
/* "top" = height of your site's main navbar. Adjust 64px to match it. */
.cefe-page .island-nav {
  position:sticky;top:64px;z-index:40;
  display:flex;justify-content:center;
  padding:0 16px;
}
.cefe-page .island-nav-inner {
  display:flex;align-items:center;gap:22px;
  background:rgba(246,241,231,0.92);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 22px;
  margin-top:14px;
  box-shadow:0 10px 28px rgba(28,43,34,0.14);
}
.cefe-page .island-nav-inner a {color:var(--ink);text-decoration:none;font-size:0.92rem;font-weight:600;opacity:0.8;white-space:nowrap;}
.cefe-page .island-nav-inner a:hover {opacity:1;}
.cefe-page .nav-cta {
  background:var(--clay);color:#fff;padding:10px 18px;border-radius:6px;
  font-weight:700;font-size:0.88rem;
}
.cefe-page .nav-cta:hover {background:var(--clay-dark);}

/* ---------- HERO ---------- */
.cefe-page .hero {
  position:relative;padding:90px 0 70px;overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(217,154,61,0.18), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(60,82,64,0.12), transparent 50%);
}
.cefe-page .hero .wrap {display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:center;}
.cefe-page .eyebrow {
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--olive);background:rgba(60,82,64,0.08);
  padding:6px 12px;border-radius:20px;margin-bottom:22px;border:1px solid rgba(60,82,64,0.18);
}
.cefe-page .eyebrow::before {content:"●";color:var(--clay);font-size:0.6rem;}
.cefe-page .hero h1 {
  font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:600;line-height:1.05;color:var(--ink);
  margin-bottom:22px;letter-spacing:-0.01em;
}
.cefe-page .hero h1 em {font-style:italic;color:var(--clay);}
.cefe-page .hero p.lede {font-size:1.18rem;color:#3a4640;max-width:54ch;margin-bottom:30px;}
.cefe-page .hero-actions {display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.cefe-page .btn-primary {
  background:var(--clay);color:#fff;padding:16px 28px;border-radius:8px;
  font-weight:700;font-size:1rem;text-decoration:none;display:inline-block;
  box-shadow:0 8px 20px rgba(193,84,44,0.3);transition:transform .15s ease, box-shadow .15s ease;
}
.cefe-page .btn-primary:hover {transform:translateY(-2px);box-shadow:0 12px 26px rgba(193,84,44,0.38);}
.cefe-page .btn-ghost {
  color:var(--olive);text-decoration:none;font-weight:600;font-size:0.97rem;
  border-bottom:2px solid var(--olive);padding-bottom:2px;
}
.cefe-page .hero-stats {display:flex;gap:30px;margin-top:42px;flex-wrap:wrap;}
.cefe-page .hero-stat .num {font-family:'Fraunces',serif;font-size:2rem;font-weight:600;color:var(--olive);}
.cefe-page .hero-stat .lbl {font-size:0.82rem;color:#5c6b62;max-width:14ch;}

.cefe-page .hero-visual {
  position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg, var(--olive), var(--ink));
  display:flex;align-items:center;justify-content:center;text-align:center;color:#eee8d8;
  padding:30px;border:1px solid rgba(0,0,0,0.1);
}
.cefe-page .hero-visual .ph-label {font-family:'JetBrains Mono',monospace;font-size:0.78rem;opacity:0.75;line-height:1.6;}
.cefe-page .hero-visual .ph-icon {font-size:2.4rem;margin-bottom:14px;}

/* ---------- SECTION generic ---------- */
.cefe-page section {padding:84px 0;}
.cefe-page .section-head {max-width:680px;margin-bottom:48px;}
.cefe-page .section-tag {
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--clay);font-weight:600;margin-bottom:10px;display:block;
}
.cefe-page .section-head h2 {font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;color:var(--ink);line-height:1.18;}
.cefe-page .section-head p {margin-top:14px;color:#4a564f;font-size:1.05rem;}

/* ---------- WHAT IS CEFE ---------- */
.cefe-page .what-grid {display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;}
.cefe-page .what-grid .copy p {margin-bottom:16px;color:#3a443d;font-size:1.04rem;}
.cefe-page .acronym-box {
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;
  margin-bottom:10px;
}
.cefe-page .acronym-box .letters {display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.cefe-page .acronym-box .letter {
  width:42px;height:42px;border-radius:8px;background:var(--olive);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;
  font-weight:700;font-size:1.2rem;
}
.cefe-page .acronym-box .expand {font-size:0.95rem;color:#4a564f;}
.cefe-page .dim-list {list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.cefe-page .dim-list li {
  background:rgba(60,82,64,0.06);border-radius:8px;padding:12px 14px;font-size:0.92rem;
  font-weight:600;color:var(--olive);border-left:3px solid var(--gold);
}

/* ---------- TIMELINE (history) — index-card flipchart style, the signature element ---------- */
.cefe-page .timeline-section {background:var(--ink);color:var(--paper);}
.cefe-page .timeline-section .section-tag {color:var(--gold);}
.cefe-page .timeline-section .section-head h2 {color:var(--paper);}
.cefe-page .timeline-section .section-head p {color:#c9cdc2;}
.cefe-page .pinboard {
  display:flex;gap:22px;overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x mandatory;
}
.cefe-page .pinboard::-webkit-scrollbar {height:8px;}
.cefe-page .pinboard::-webkit-scrollbar-thumb {background:var(--olive-light);border-radius:4px;}
.cefe-page .pin-card {
  flex:0 0 260px;scroll-snap-align:start;background:var(--paper);color:var(--ink);
  border-radius:4px;padding:24px 20px;position:relative;
  box-shadow:0 14px 30px rgba(0,0,0,0.35);transform:rotate(var(--rot,0deg));
}
.cefe-page .pin-card:nth-child(odd) {--rot:-1.4deg;}
.cefe-page .pin-card:nth-child(even) {--rot:1.2deg;}
.cefe-page .pin-card::before {
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--clay);
  box-shadow:0 3px 6px rgba(0,0,0,0.4);
}
.cefe-page .pin-card .yr {font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--clay-dark);font-size:0.95rem;}
.cefe-page .pin-card h4 {font-family:'Fraunces',serif;font-size:1.1rem;margin:6px 0 8px;}
.cefe-page .pin-card p {font-size:0.88rem;color:#3a443d;}

/* ---------- GLOBAL REACH ---------- */
.cefe-page .reach-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cefe-page .reach-stat {
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px 22px;text-align:left;
}
.cefe-page .reach-stat .num {font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600;color:var(--clay);line-height:1;}
.cefe-page .reach-stat .lbl {margin-top:10px;font-size:0.92rem;color:#4a564f;}
.cefe-page .reach-note {margin-top:18px;font-size:0.85rem;color:#6b756d;font-style:italic;}

/* ---------- BALANCE IN ALBANIA ---------- */
.cefe-page .albania-section {background:linear-gradient(180deg, rgba(60,82,64,0.07), transparent);}
.cefe-page .proj-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cefe-page .proj-card {
  background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
}
.cefe-page .proj-media {
  aspect-ratio:16/10;background:linear-gradient(135deg,var(--olive-light),var(--olive));
  display:flex;align-items:center;justify-content:center;color:#eee8d8;text-align:center;padding:18px;
}
.cefe-page .proj-media .ph-icon {font-size:1.8rem;margin-bottom:8px;}
.cefe-page .proj-media .ph-label {font-family:'JetBrains Mono',monospace;font-size:0.72rem;opacity:0.8;}
.cefe-page .proj-body {padding:22px;flex:1;display:flex;flex-direction:column;}
.cefe-page .proj-tag {font-family:'JetBrains Mono',monospace;font-size:0.72rem;text-transform:uppercase;color:var(--clay);font-weight:700;margin-bottom:8px;}
.cefe-page .proj-body h3 {font-family:'Fraunces',serif;font-size:1.25rem;margin-bottom:10px;}
.cefe-page .proj-body p {font-size:0.92rem;color:#4a564f;margin-bottom:14px;}
.cefe-page .proj-stats {display:flex;gap:16px;margin-top:auto;border-top:1px solid var(--line);padding-top:14px;}
.cefe-page .proj-stats div {flex:1;}
.cefe-page .proj-stats .n {font-weight:700;color:var(--olive);font-size:1.15rem;font-family:'Fraunces',serif;}
.cefe-page .proj-stats .l {font-size:0.74rem;color:#6b756d;}

/* ---------- VIDEO TESTIMONIALS ---------- */
.cefe-page .video-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cefe-page .video-card {background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.cefe-page .video-frame {
  aspect-ratio:16/9;background:var(--ink);position:relative;display:flex;align-items:center;justify-content:center;
}
.cefe-page .video-frame .play {
  width:58px;height:58px;border-radius:50%;background:var(--clay);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.3rem;box-shadow:0 8px 22px rgba(0,0,0,0.4);cursor:pointer;
}
.cefe-page .video-frame .ph-label {position:absolute;bottom:10px;left:12px;right:12px;font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;color:#c9cdc2;opacity:0.8;}
.cefe-page .video-card .who {padding:16px 18px;}
.cefe-page .video-card .who .name {font-weight:700;color:var(--ink);}
.cefe-page .video-card .who .role {font-size:0.82rem;color:#6b756d;}

/* ---------- PHOTO STRIP ---------- */
.cefe-page .photo-strip {display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.cefe-page .photo-ph {
  aspect-ratio:3/4;border-radius:10px;background:repeating-linear-gradient(135deg, rgba(60,82,64,0.12), rgba(60,82,64,0.12) 10px, rgba(60,82,64,0.18) 10px, rgba(60,82,64,0.18) 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.cefe-page .photo-ph span {font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--olive);opacity:0.85;}

/* ---------- METHOD IN ACTION / ENVELOPE EXERCISE ---------- */
.cefe-page .method-block {
  display:grid;grid-template-columns:0.95fr 1.05fr;gap:50px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:46px;
}
.cefe-page .envelope {
  position:relative;background:#eee2c8;border-radius:10px;aspect-ratio:1/0.7;
  box-shadow:0 18px 36px rgba(28,43,34,0.18);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
.cefe-page .envelope::before {
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    linear-gradient(135deg, transparent 49.3%, rgba(28,43,34,0.12) 49.6%, transparent 50%),
    linear-gradient(45deg, transparent 49.3%, rgba(28,43,34,0.12) 49.6%, transparent 50%);
}
.cefe-page .envelope .stamp {
  position:absolute;top:16px;right:16px;width:50px;height:60px;border:2px dashed var(--clay);
  border-radius:4px;
}
.cefe-page .envelope .label {
  position:relative;z-index:2;background:var(--clay);color:#fff;padding:8px 16px;border-radius:6px 6px 0 0;
  font-family:'JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:0.05em;text-transform:uppercase;
  font-weight:700;
}
.cefe-page .method-copy .section-tag {margin-bottom:8px;}
.cefe-page .method-copy h3 {font-family:'Fraunces',serif;font-size:1.6rem;margin-bottom:14px;}
.cefe-page .method-copy p {color:#4a564f;margin-bottom:14px;}
.cefe-page .method-copy ul {margin:16px 0 0;padding-left:0;list-style:none;}
.cefe-page .method-copy li {
  padding-left:26px;position:relative;margin-bottom:10px;font-size:0.95rem;color:#3a443d;
}
.cefe-page .method-copy li::before {
  content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:3px;background:var(--gold);
}

/* ---------- LEARNING JOURNEY (CEFE ToT) ---------- */
.cefe-page .journey {position:relative;}
.cefe-page .journey-rail {position:relative;padding-left:34px;}
.cefe-page .journey-rail::before {
  content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line);
}
.cefe-page .journey-step {position:relative;padding-bottom:38px;}
.cefe-page .journey-step:last-child {padding-bottom:0;}
.cefe-page .journey-step::before {
  content:"";position:absolute;left:-34px;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--paper);border:3px solid var(--clay);
}
.cefe-page .journey-step h4 {font-family:'Fraunces',serif;font-size:1.18rem;margin-bottom:6px;}
.cefe-page .journey-step p {color:#4a564f;font-size:0.96rem;max-width:62ch;}
.cefe-page .journey-step .tag {font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--clay);text-transform:uppercase;font-weight:700;margin-bottom:4px;display:block;}

/* ---------- WHO IT'S FOR / NOT FOR ---------- */
.cefe-page .fit-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cefe-page .fit-card {border-radius:14px;padding:28px;border:1px solid var(--line);}
.cefe-page .fit-card.yes {background:rgba(60,82,64,0.07);}
.cefe-page .fit-card.no {background:rgba(193,84,44,0.06);}
.cefe-page .fit-card h3 {font-family:'Fraunces',serif;font-size:1.2rem;margin-bottom:14px;}
.cefe-page .fit-card ul {list-style:none;}
.cefe-page .fit-card li {padding:8px 0;font-size:0.95rem;display:flex;gap:10px;}
.cefe-page .fit-card.yes li::before {content:"✓";color:var(--olive);font-weight:700;}
.cefe-page .fit-card.no li::before {content:"✕";color:var(--clay);font-weight:700;}

/* ---------- TRUST: NOT AN ONLINE COURSE BANNER ---------- */
.cefe-page .truth-banner {
  background:var(--olive);color:var(--paper);border-radius:16px;padding:36px 40px;
  display:flex;gap:26px;align-items:center;
}
.cefe-page .truth-banner .icon {font-size:2rem;flex-shrink:0;}
.cefe-page .truth-banner p {font-size:1.02rem;line-height:1.6;}
.cefe-page .truth-banner strong {color:var(--gold);}

/* ---------- FAQ-ish details: effort/expectations ---------- */
.cefe-page .expect-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cefe-page .expect-card {background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;}
.cefe-page .expect-card .ic {font-size:1.5rem;margin-bottom:10px;}
.cefe-page .expect-card h4 {font-family:'Fraunces',serif;font-size:1.05rem;margin-bottom:8px;}
.cefe-page .expect-card p {font-size:0.9rem;color:#4a564f;}

/* ---------- BIG CTA ---------- */
.cefe-page .mega-cta {
  position:relative;border-radius:22px;overflow:hidden;padding:70px 50px;text-align:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(217,154,61,0.35), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(193,84,44,0.35), transparent 50%),
    linear-gradient(160deg, var(--ink), var(--olive));
  color:var(--paper);
}
.cefe-page .mega-cta .section-tag {color:var(--gold);}
.cefe-page .mega-cta h2 {
  font-family:'Fraunces',serif;font-size:clamp(2rem,4.4vw,3.1rem);font-weight:600;
  margin:14px 0 18px;line-height:1.1;color:#fff;
}
.cefe-page .mega-cta p.sub {max-width:60ch;margin:0 auto 34px;color:#dfe3d8;font-size:1.08rem;}
.cefe-page .btn-mega {
  display:inline-block;background:var(--clay);color:#fff;padding:22px 48px;border-radius:12px;
  font-size:1.25rem;font-weight:700;text-decoration:none;
  box-shadow:0 18px 40px rgba(193,84,44,0.5);transition:transform .15s ease;
  font-family:'Fraunces',serif;
}
.cefe-page .btn-mega:hover {transform:translateY(-3px) scale(1.01);}
.cefe-page .mega-meta {margin-top:22px;font-size:0.85rem;color:#aeb6a6;font-family:'JetBrains Mono',monospace;}

.pinboard-wrap {
  position: relative;   /* <-- this is critical, it anchors the absolute button */
}

.pinboard {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.pin-arrow {
  position: absolute;
  top: 50%;
  right: 0;              /* try 0 first, adjust with -16px etc after */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;           /* bumped up in case cards overlap it */
}

.expect-card {
  position: relative;
  overflow: hidden;
}

.expect-card::before,
.expect-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}

.expect-card::before {
  width: 180px;
  height: 180px;
  top: -80px;
  right: -80px;
  background: rgba(21,45,121,0.08);
}

.expect-card::after {
  width: 100px;
  height: 100px;
  bottom: -40px;
  left: -40px;
  background: rgba(255,165,0,0.08);
}

.expect-card > * {
  position: relative;
  z-index: 1;
}

/* ---------- FOOTER ---------- */
.cefe-page footer {padding:46px 0;border-top:1px solid var(--line);}
.cefe-page footer .wrap {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.cefe-page footer p {font-size:0.85rem;color:#6b756d;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .cefe-page .hero .wrap {grid-template-columns:1fr;}
  .cefe-page .hero-visual {order:-1;aspect-ratio:16/9;}
  .cefe-page .what-grid {grid-template-columns:1fr;}
  .cefe-page .reach-grid {grid-template-columns:repeat(2,1fr);}
  .cefe-page .proj-grid {grid-template-columns:1fr;}
  .cefe-page .video-grid {grid-template-columns:1fr;}
  .cefe-page .photo-strip {grid-template-columns:repeat(2,1fr);}
  .cefe-page .method-block {grid-template-columns:1fr;padding:30px;}
  .cefe-page .fit-grid {grid-template-columns:1fr;}
  .cefe-page .expect-grid {grid-template-columns:1fr;}
  .cefe-page .island-nav-inner a:not(.nav-cta) {display:none;}
}
@media (prefers-reduced-motion:reduce){
  .cefe-page * {transition:none !important;scroll-behavior:auto !important;}
}