/* ============================================================
   MUGUMO — Frame the Change LAB / Fikira site design system
   One committed palette. Engraved botanical identity. Editorial
   type: Fraunces display, Plus Jakarta Sans text, Plex Mono data.
   ============================================================ */

:root{
  --green:#0a9c49;
  --deep:#07401f;
  --deeper:#052e17;
  --cream:#f7f3ea;
  --paper:#fbf8f1;
  --ink:#0f1512;
  --mint:#7ee2a8;
  --hair:rgba(7,64,31,.26);
  --muted:#2b3a30;
  --cream-muted:#cfe4d6;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Plus Jakarta Sans',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  background-image:radial-gradient(rgba(7,64,31,.05) 1px,transparent 1px);
  background-size:14px 14px;
}
img{max-width:100%}
a{color:var(--deep)}
h1,h2,h3,h4{font-weight:600}

/* THE FRAME — Frame the Change signature */
.frame{position:fixed;inset:0;border:10px solid var(--deep);pointer-events:none;z-index:999}

/* micro label utility */
.hero-eyebrow,.section-label,.kicker,.tag,.trust-kicker,.eyebrow,.label,.dl-info-label,.req-label,.rq-label,.progress-label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);font-weight:500;
}

/* ================= MASTHEAD (sticky, logo stays) ================= */
.site-masthead{
  position:sticky;top:10px;z-index:900;
  background:var(--cream);border-bottom:1.5px solid var(--deep);
  background-image:radial-gradient(rgba(7,64,31,.05) 1px,transparent 1px);background-size:14px 14px;
}
.masthead-inner{
  max-width:1240px;margin:0 auto;padding:.7rem 44px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.masthead-brand{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.masthead-brand img{width:40px;height:40px;object-fit:cover;border:1.5px solid var(--deep);display:block}
.masthead-brand::after{
  content:"FRAME THE CHANGE LAB";
  font-family:var(--mono);font-size:.74rem;letter-spacing:.28em;font-weight:500;color:var(--ink);
}
.masthead-nav{display:flex;gap:1.9rem;align-items:center}
.masthead-nav a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border-bottom:1.5px solid transparent;padding-bottom:2px;
}
.masthead-nav a:hover{color:var(--green);border-bottom-color:var(--green)}
.masthead-nav a.cur{color:var(--green);border-bottom-color:var(--green)}
.masthead-nav a.masthead-cta{
  border:1.5px solid var(--deep);background:var(--deep);color:var(--cream);
  padding:.55rem 1.05rem;border-bottom:1.5px solid var(--deep);
}
.masthead-nav a.masthead-cta:hover{background:var(--green);border-color:var(--green);color:var(--cream)}
.mh-toggle{display:none}
.masthead-burger{display:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.masthead-burger span{display:block;width:22px;height:2px;background:var(--deep)}

/* ================= FIKIRA SUBNAV ================= */
.site-subnav{background:var(--deep);border-bottom:1.5px solid var(--deep)}
.subnav-inner{
  max-width:1240px;margin:0 auto;padding:.55rem 44px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.subnav-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--cream)}
.subnav-brand img{width:32px;height:auto;display:block}
.subnav-brand b{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.subnav-brand i{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.12em;color:var(--mint);text-transform:uppercase}
.subnav-links{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.subnav-links a{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-muted);text-decoration:none;border-bottom:1.5px solid transparent;padding-bottom:2px;
}
.subnav-links a:hover,.subnav-links a.cur{color:var(--cream);border-bottom-color:var(--mint)}
.subnav-links a.subnav-dl{
  background:var(--cream);color:var(--deep);padding:.45rem .95rem;border-bottom:none;font-weight:500;
}
.subnav-links a.subnav-dl:hover{background:var(--mint);color:var(--deep)}

/* ================= HERO (Fikira pages: green poster) ================= */
.hero{
  background:var(--deep);color:var(--cream);position:relative;overflow:hidden;
  padding:4.6rem 44px 4.2rem;
}
.hero::before{
  content:"";position:absolute;top:-8%;right:-4%;width:560px;height:560px;
  background:url('/mugumo-engraving-inverse.png') center/contain no-repeat;
  opacity:.5;pointer-events:none;
}
.hero-inner{max-width:1240px;margin:0 auto;position:relative;max-width:min(1240px,100%);}
.hero-inner{width:100%;max-width:1240px}
.hero-logo{width:64px;height:auto;margin-bottom:1.4rem}
.hero-eyebrow{color:var(--mint);margin-bottom:1.1rem}
.hero h1{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.015em;
  max-width:17em;
}
.hero-sub{max-width:36rem;margin:1.5rem 0 0;color:var(--cream-muted);font-size:1.02rem}
.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.1rem}
.hero-note{max-width:46rem;margin-top:1.8rem;font-size:.8rem;line-height:1.7;color:#9fc9ae}
.hero-note a{color:var(--mint)}
.version-badge{
  display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(247,243,234,.4);color:var(--mint);padding:.4rem .9rem;margin:1.2rem 0 .2rem;
}

/* ================= PAGE HERO (Work / About / Partner: cream) ================= */
.page-hero{padding:4.6rem 44px 3.6rem;border-bottom:1.5px solid var(--hair);position:relative;overflow:hidden}
.page-hero::after{
  content:"";position:absolute;top:-10%;right:-3%;width:480px;height:480px;
  background:url('/mugumo-engraving-hero.png') center/contain no-repeat;
  opacity:.35;pointer-events:none;mix-blend-mode:multiply;
}
.page-hero-inner{max-width:1240px;margin:0 auto;position:relative}
.page-hero .hero-eyebrow{margin-bottom:1.1rem}
.page-hero h1{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(2.6rem,5vw,4.2rem);line-height:1.03;letter-spacing:-.015em;max-width:15em;color:var(--ink);
}
.page-hero .hero-sub{color:var(--muted);max-width:36rem;margin-top:1.4rem}
.page-hero .hero-ctas,.page-hero .hero-buttons{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}

/* ================= BUTTONS ================= */
.btn-primary,.btn-secondary,.btn-teal,.btn-light,.btn-ghost,.btn-outline{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:.82rem;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  padding:.9rem 1.6rem;border:1.5px solid var(--deep);border-radius:0;
  transition:background .15s,color .15s;
}
.btn-primary,.btn-teal{background:var(--deep);color:var(--cream)}
.btn-primary:hover,.btn-teal:hover{background:var(--green);border-color:var(--green);color:var(--cream)}
.btn-secondary,.btn-outline,.btn-ghost{background:transparent;color:var(--deep)}
.btn-secondary:hover,.btn-outline:hover,.btn-ghost:hover{background:var(--deep);color:var(--cream)}
/* buttons inside green heroes / navy bands */
.hero .btn-primary,.bg-navy .btn-primary{background:var(--cream);color:var(--deep);border-color:var(--cream)}
.hero .btn-primary:hover,.bg-navy .btn-primary:hover{background:var(--mint);border-color:var(--mint);color:var(--deep)}
.hero .btn-secondary,.bg-navy .btn-secondary,.hero .btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream)}
.hero .btn-secondary:hover,.bg-navy .btn-secondary:hover,.hero .btn-ghost:hover{background:rgba(247,243,234,.12);color:var(--cream)}

/* ================= DOWNLOAD BUTTON CARDS ================= */
.hero .hero-buttons{display:grid;grid-template-columns:repeat(2,minmax(230px,290px));gap:.9rem}
.btn-dl-mac,.btn-dl-mac-intel,.btn-dl-win,.btn-dl-android{
  display:flex;align-items:flex-start;gap:.8rem;text-decoration:none;
  border:1.5px solid var(--cream);color:var(--cream);padding:.95rem 1.15rem;
  transition:background .15s;
}
.btn-dl-mac{background:var(--cream);color:var(--deep)}
.btn-dl-mac:hover{background:var(--mint);border-color:var(--mint);color:var(--deep)}
.btn-dl-mac-intel:hover,.btn-dl-win:hover,.btn-dl-android:hover{background:rgba(247,243,234,.1)}
.btn-dl-mac svg,.btn-dl-mac-intel svg,.btn-dl-win svg,.btn-dl-android svg{flex:0 0 auto;margin-top:2px}
.btn-dl-mac .btn-text,.btn-dl-mac-intel .btn-text,.btn-dl-win .btn-text,.btn-dl-android .btn-text{
  display:block;font-size:.92rem;font-weight:700;letter-spacing:.02em;border:none;padding:0;text-transform:none;
}
.btn-dl-mac .btn-sub,.btn-dl-mac-intel .btn-sub,.btn-dl-win .btn-sub,.btn-dl-android .btn-sub{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.78;margin-top:.3rem;font-weight:400;border:none;padding:0;
}

/* dl-info spec strip -> monospace release record */
.dl-info{
  display:flex;gap:2.6rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.4rem;
  border-top:1px solid rgba(247,243,234,.25);
}
.dl-info-item{text-align:left}
.dl-info-label{color:var(--mint);margin-bottom:.25rem}
.dl-info-value{font-family:var(--mono);font-size:.78rem;color:var(--cream)}

/* ================= SECTIONS ================= */
section{padding:0}
.bg-off-white{background:var(--cream)}
.bg-white{background:var(--paper)}
.bg-navy{background:var(--deep);color:var(--cream)}
.bg-navy .section-title{color:var(--cream)}
.bg-navy .section-subtitle{color:var(--cream-muted)}
.bg-navy .section-label{color:var(--mint)}
.section-inner{max-width:1240px;margin:0 auto;padding:4.4rem 44px;border-bottom:1.5px solid var(--hair)}
.bg-navy .section-inner{border-bottom:none}
.section-header{margin-bottom:2.4rem;max-width:52rem}
.section-label{display:block;margin-bottom:.9rem}
.section-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.1;letter-spacing:-.01em;color:var(--ink);
}
.section-subtitle{margin-top:.9rem;color:var(--muted);font-size:.98rem;max-width:46rem}

/* ================= CARD GRIDS ================= */
.what-grid,.focus-grid,.pillar-grid,.trust-grid,.team-grid,.engagement-grid,.roadmap-grid,.steps-grid,.sysreqs-grid,.mission-grid,.mission-values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
}
.what-card,.focus-card,.pillar-card,.trust-card,.team-card,.engagement-card,.roadmap-card,.step-card,.sysreqs-card,.mission-value,.card{
  background:var(--paper);border:1.5px solid var(--hair);border-radius:0;
  padding:1.6rem 1.5rem;box-shadow:none;position:relative;
}
.bg-navy .what-card,.bg-navy .trust-card{background:var(--deeper);border-color:rgba(247,243,234,.25);color:var(--cream)}
.bg-navy .what-card h3,.bg-navy .trust-card h3{color:var(--cream)}
.bg-navy .what-card p,.bg-navy .what-card li{color:var(--cream-muted)}
.what-card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--green)}
.what-card h3,.focus-card h3,.pillar-card h3,.trust-card h3,.roadmap-card h3,.step-card h3,.engagement-card h3{
  font-family:var(--serif);font-weight:500;font-size:1.2rem;margin:.75rem 0 .55rem;color:var(--ink);
}
.what-card p,.what-card li,.focus-card p,.pillar-card p,.trust-card p,.roadmap-card p,.step-card p,.engagement-card p{
  font-size:.9rem;color:var(--muted);
}
.what-card ul{padding-left:1.1rem}
.what-card li{margin-bottom:.45rem}
.what-icon,.focus-icon{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--hair);
}
.what-icon svg,.focus-icon svg{width:20px;height:20px}
.what-icon.green{color:var(--green)}
.focus-icon{background:var(--deep);border-color:var(--deep);color:#fff}
.what-icon.blue{color:#0e7490}
.what-icon.purple{color:#6d28d9}
.what-icon.orange{color:#c2410c}

/* ================= SPLIT + PRINCIPLES ================= */
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:start}
.principles-panel{border:1.5px solid var(--hair);background:var(--paper)}
.principle{display:flex;gap:1.1rem;padding:1.15rem 1.3rem;border-bottom:1.5px solid var(--hair)}
.principle:last-child{border-bottom:none}
.principle-num{
  font-family:var(--mono);font-size:.8rem;color:var(--green);font-weight:500;
  border:1.5px solid var(--hair);width:30px;height:30px;flex:0 0 30px;
  display:flex;align-items:center;justify-content:center;
}
.principle-body strong{display:block;font-size:.95rem;margin-bottom:.15rem}
.principle-body span{font-size:.87rem;color:var(--muted)}

/* ================= FAQ ================= */
.faq-list{border:1.5px solid var(--hair);background:var(--paper)}
.faq-item{border-bottom:1.5px solid var(--hair)}
.faq-item:last-child{border-bottom:none}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:1.05rem 1.3rem;font-family:var(--sans);font-size:.98rem;font-weight:600;color:var(--ink);
}
.faq-q:hover{color:var(--green)}
.faq-icon{font-family:var(--mono);color:var(--green);font-size:1.1rem;flex:0 0 auto}
.faq-a{display:none;padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.92rem}
.faq-a p{margin-bottom:.6rem}
.faq-a ul{padding-left:1.2rem}
.faq-a li{margin-bottom:.4rem}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-icon{transform:rotate(45deg)}

/* ================= REQUIREMENTS / SPEC ROWS (mono lab register) ================= */
.req-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid var(--hair);font-family:var(--mono);font-size:.78rem}
.req-label{color:var(--green)}
.req-value{color:var(--ink);text-align:right}
.sysreqs-card h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:.8rem}

/* ================= IMMERSIVE / VIS (work page) ================= */
.immersive-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.immersive-visual{border:1.5px solid var(--hair);background:var(--paper);padding:1.4rem}
.vis-item{display:flex;gap:.7rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--hair);font-size:.9rem}
.vis-item:last-child{border-bottom:none}
.vis-badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);flex:0 0 auto}
.dot{width:7px;height:7px;background:var(--green);display:inline-block;flex:0 0 auto}

/* ================= TEAM / MISSION (about page) ================= */
.team-photo{filter:grayscale(1) sepia(.28) hue-rotate(90deg) saturate(.9);border:1.5px solid var(--hair)}
.team-name{font-family:var(--serif);font-size:1.15rem;margin-top:.8rem}
.team-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:.25rem 0 .5rem}
.team-bio{font-size:.88rem;color:var(--muted)}
.mission-prose p{margin-bottom:1rem;color:var(--muted)}
.mission-grid{grid-template-columns:1fr 1fr}

/* ================= PARTNER ================= */
.partner-list{padding-left:1.2rem}
.partner-list li{margin-bottom:.6rem;color:var(--muted)}
.partner-cta-box{border:1.5px solid var(--deep);background:var(--paper);padding:2rem}

/* ================= CALLOUT STRIP ================= */
.callout-strip{background:var(--deep);color:var(--cream)}
.callout-inner{max-width:1240px;margin:0 auto;padding:2.4rem 44px;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.callout-inner h3,.callout-inner .section-title{font-family:var(--serif);font-weight:400;color:var(--cream)}
.callout-inner p{color:var(--cream-muted)}

/* ================= RELEASES (whats-new) ================= */
.release{border-left:3px solid var(--green);padding:.4rem 0 .6rem 1.5rem;margin:0 44px 2rem;max-width:900px}
.release h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--ink)}
.release .date{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-left:.8rem}
.release ul{padding-left:1.2rem;margin-top:.6rem}
.release li{font-size:.92rem;color:var(--muted);margin-bottom:.4rem}
.releases-wrap{max-width:1240px;margin:0 auto;padding:3rem 0}

/* ================= MOCKS (role/progress on fikira overview) ================= */
.role-mock,.progress-mock{border:1.5px solid var(--hair);background:var(--paper);padding:1.2rem}
.role-chip{display:inline-block;border:1.5px solid var(--hair);padding:.45rem .9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin:.25rem}
.role-chip.active{background:var(--deep);color:var(--cream);border-color:var(--deep)}
.progress-bar-bg{background:var(--cream);border:1px solid var(--hair);height:10px}
.progress-bar-fill{background:var(--green);height:100%}
.progress-pct{font-family:var(--mono);font-size:.75rem;color:var(--green)}

/* ================= STEP CARDS ================= */
.step-number{
  font-family:var(--mono);font-size:.8rem;color:var(--green);font-weight:500;
  border:1.5px solid var(--hair);width:34px;height:34px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;
}
.step-note{font-family:var(--mono);font-size:.72rem;line-height:1.8;color:var(--deep);opacity:.85;margin-top:.7rem}
.step-illustration{border:1.5px solid var(--hair);background:var(--cream);padding:1rem;margin-top:1rem}

/* ================= RESEARCH / NOTICES ================= */
.research-question{border:1.5px solid var(--hair);background:var(--paper);padding:1.3rem 1.5rem;margin-bottom:1rem}
.rq-label{display:block;margin-bottom:.4rem}
.notice{border:1.5px solid var(--green);background:var(--paper);padding:1.1rem 1.3rem;font-size:.9rem;color:var(--muted)}
.how-we-work{border:1.5px solid var(--hair);background:var(--paper);padding:1.6rem}

/* ================= FOOTER ================= */
.site-foot,footer.site-foot{background:var(--deeper);color:var(--cream);margin-top:0}
.foot-inner{max-width:1240px;margin:0 auto;padding:3.6rem 44px 2.4rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.6rem}
.foot-brand img{width:52px;height:52px;object-fit:cover;border:1.5px solid rgba(247,243,234,.35);margin-bottom:1rem}
.foot-brand p{font-size:.85rem;color:#b9cfc1;max-width:26rem}
.foot-col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin-bottom:1rem;font-weight:500}
.foot-col a{display:block;color:var(--cream);opacity:.85;text-decoration:none;font-size:.88rem;margin-bottom:.5rem}
.foot-col a:hover{opacity:1;color:var(--mint)}
.foot-bottom{
  max-width:1240px;margin:0 auto;padding:1.3rem 44px 2.2rem;border-top:1px solid rgba(247,243,234,.18);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#9fc9ae;
}
.foot-bottom a{color:#9fc9ae}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .masthead-inner,.subnav-inner,.section-inner,.hero,.page-hero,.callout-inner{padding-left:26px;padding-right:26px}
  .hero::before,.page-hero::after{opacity:.16;width:420px;height:420px}
}
@media (max-width:900px){
  .what-grid,.focus-grid,.pillar-grid,.trust-grid,.team-grid,.engagement-grid,.roadmap-grid,.steps-grid,.sysreqs-grid,.mission-grid,.mission-values{grid-template-columns:1fr}
  .split-section,.immersive-layout{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  .masthead-brand::after{display:none}
  .masthead-burger{display:flex}
  .masthead-nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--cream);border-bottom:1.5px solid var(--deep);padding:.6rem 26px 1rem;gap:0;
  }
  .mh-toggle:checked ~ .masthead-nav{display:flex}
  .site-masthead .masthead-inner{position:relative}
  .masthead-nav a{padding:.8rem 0;border-bottom:1px solid var(--hair)}
  .masthead-nav a.masthead-cta{margin-top:.6rem;text-align:center}
  .hero,.page-hero{padding-top:3.2rem;padding-bottom:3rem}
  .release{margin:0 26px 1.6rem}
}