/* =========================================================================
   Nguthiru theme — main design styles
   Afrofuturist climate palette: deep night #0f0a1a · panel #0a0612
   Vibranium violet accent #7c4dff · savanna gold #e3b955 · muted gold label #b08d52
   (One source of truth: every page reads these vars, so the whole site
    stays in lockstep. Change a value here, not in the templates.)
   ========================================================================= */
:root{
  --ink:#0f0a1a; --panel:#0a0612; --paper:#f4f1ea;
  --accent:#7c4dff; --accent-2:#e3b955; --sage:#b08d52;
  --line:rgba(244,241,234,.12); --fg:#f4f1ea; --fg-soft:rgba(244,241,234,.74);
  --maxw:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--ink)}
.serif{font-family:'Newsreader',Georgia,serif}
.mono{font-family:'Space Mono',monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:40px;padding-right:40px}
.eyebrow{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.btn{display:inline-block;background:var(--accent);color:var(--ink);padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:transform .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost{display:inline-block;border:1px solid rgba(244,241,234,.26);color:var(--fg);padding:13px 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none}

/* ---------- header / nav ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.site-header.solid,.site-header.scrolled{background:rgba(20,19,15,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:15px 24px;display:flex;justify-content:space-between;align-items:center}
.site-header__logo img{height:30px;width:auto}
.nav{display:flex;gap:30px;align-items:center}
.nav a{color:rgba(244,241,234,.7);text-decoration:none;font-size:13.5px;font-weight:600;transition:color .2s;position:relative}
.nav a:hover,.nav a.current{color:var(--fg)}
.nav a.current::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--accent)}
.nav .btn{padding:10px 20px;font-size:13.5px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:1002}
.burger span{display:block;width:24px;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s,opacity .3s}
.mobile-menu{position:fixed;inset:0;z-index:1001;background:var(--panel);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:96px 32px 40px;gap:2px;opacity:0;transform:translateY(-12px);pointer-events:none;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:opacity .35s,transform .45s cubic-bezier(.16,.84,.44,1)}
body.menu-open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu a{font-family:'Newsreader',serif;font-size:clamp(26px,7.2vw,34px);font-weight:400;color:var(--fg);text-decoration:none;padding:9px 0}
.mobile-menu a:hover{color:var(--accent-2)}

/* ---------- typography scale ---------- */
.h1{font-family:'Newsreader',serif;font-weight:400;font-size:60px;line-height:1.02;letter-spacing:-.025em;margin:0}
.h2{font-family:'Newsreader',serif;font-weight:400;font-size:40px;line-height:1.12;letter-spacing:-.015em;margin:0}
.lead{font-size:19px;line-height:1.65;color:var(--fg-soft)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;perspective:1400px}
.hero__vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 50% 30%,transparent 45%,rgba(0,0,0,.45) 100%)}
.hero__ghost{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);font-family:'Archivo',sans-serif;font-weight:900;font-size:15vw;line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(244,241,234,.13);white-space:nowrap;pointer-events:none;user-select:none}
.hero__portrait{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:3;animation:heroFade 1.3s ease both}
.hero__portrait img{height:auto;max-height:88vh;width:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero__copy{position:relative;z-index:4;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 40px 7vh;pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px}
.hero__copy a{pointer-events:auto}
.badge{display:inline-flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-2);border:1px solid rgba(188,198,166,.4);padding:7px 13px;border-radius:999px;background:rgba(20,19,15,.5)}
.badge .dot{width:7px;height:7px;border-radius:999px;background:var(--accent-2)}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;background:var(--panel)}
.marquee__track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee__track > div{display:flex;gap:54px;padding-right:54px;align-items:center}
.marquee span{font-family:'Newsreader',serif;font-size:26px;font-weight:500;color:rgba(244,241,234,.5);white-space:nowrap}

/* ---------- cards / sections ---------- */
.card{background:var(--panel);border:1px solid rgba(244,241,234,.1);border-radius:14px}
.tilt{transition:transform .4s cubic-bezier(.16,.84,.44,1);transform-style:preserve-3d;will-change:transform}
.numbers{background:var(--accent);color:#171810}
.numbers .wrap{padding:64px 40px}
.numbers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.numbers .k{font-family:'Archivo',sans-serif;font-weight:800;font-size:48px;line-height:.95;letter-spacing:-.025em}
.numbers .v{font-size:14.5px;line-height:1.5;color:rgba(23,24,16,.82);margin-top:12px;font-weight:500}
.quote{font-family:'Newsreader',serif;font-weight:300;font-size:44px;line-height:1.28;letter-spacing:-.01em;margin:0}

/* ---------- grain ---------- */
.grain{position:fixed;inset:-60%;z-index:9998;pointer-events:none;background-image:url(../img/grain.png);opacity:.32;mix-blend-mode:overlay;animation:grain 1s steps(5) infinite;will-change:transform}

/* ---------- reveal & keyframes ---------- */
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes heroItem{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-8%,2%)}40%{transform:translate(-2%,8%)}60%{transform:translate(6%,0)}80%{transform:translate(8%,-2%)}100%{transform:translate(0,0)}}
[data-reveal]{animation:rise both;animation-timeline:view();animation-range:entry 0% cover 24%}
.hero-item{opacity:0;animation:heroItem .9s cubic-bezier(.16,.84,.44,1) both}
@media(prefers-reduced-motion:reduce){
  [data-reveal],.hero-item,.hero__portrait{animation:none;opacity:1}
  .grain,.marquee__track{animation:none}
  .tilt{transform:none!important}
}

/* ---------- footer ---------- */
.site-footer{background:var(--panel);border-top:1px solid var(--line)}
.site-footer .wrap{padding:90px 40px 44px}
.footer-cta{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;padding-bottom:64px;border-bottom:1px solid var(--line)}
.footer-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:30px}
.footer-soc{display:flex;gap:20px;flex-wrap:wrap}
.footer-soc a{font-family:'Space Mono',monospace;font-size:12px;color:rgba(244,241,234,.55);text-decoration:none}
.footer-soc a:hover{color:var(--accent-2)}
.footer-h{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 16px}
.footer-columns a{display:block;color:rgba(244,241,234,.55);text-decoration:none;font-size:14px;font-weight:500;padding:5px 0;transition:color .2s,transform .2s}
.footer-columns a:hover{color:var(--accent-2);transform:translateX(3px)}
.footer-icons a{padding:0!important;transform:none}
.footer-icons img{width:34px;height:34px;border-radius:999px;display:block;filter:grayscale(.2);transition:transform .25s,filter .25s}
.footer-icons a:hover img{transform:translateY(-3px) scale(1.06);filter:none}
@media(max-width:860px){
  .footer-columns{grid-template-columns:1fr 1fr!important;gap:36px 24px!important}
  .footer-watermark{display:none!important}
  .footer-bottom{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
}

/* ---------- generic page header ---------- */
.page-hero{padding:120px 40px 50px;max-width:var(--maxw);margin:0 auto}
.section{padding:90px 0}

/* Elementor-built pages render their own content with no top offset, so clear
   the fixed site header (theme PHP templates already bake in their own top
   padding, so this only targets Elementor canvases; the front page is excluded
   because its header is a transparent overlay). */
body.elementor-page:not(.home) #main{padding-top:84px}

/* ---------- blog post body ---------- */
.po-body p{font-size:19px;line-height:1.82;color:rgba(244,241,234,.84);margin:0 0 26px}
.po-body h2{font-family:'Newsreader',serif;font-weight:500;font-size:30px;line-height:1.2;letter-spacing:-.01em;margin:48px 0 18px;color:var(--fg)}
.po-body h3{font-family:'Newsreader',serif;font-weight:500;font-size:24px;margin:36px 0 14px}
.po-body blockquote{margin:38px 0;padding:6px 0 6px 28px;border-left:3px solid var(--accent);font-family:'Newsreader',serif;font-style:italic;font-size:25px;line-height:1.4;color:var(--fg)}
.po-body a{color:var(--accent-2)}
.po-body img{border-radius:8px;margin:30px 0}
.po-body ul,.po-body ol{font-size:18px;line-height:1.8;color:rgba(244,241,234,.84);padding-left:22px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{font-size:15px;font-weight:600;color:rgba(244,241,234,.82);border:1px solid rgba(244,241,234,.16);border-radius:999px;padding:11px 20px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:fixed;top:-60px;left:16px;z-index:2000;background:var(--accent);color:var(--ink);padding:10px 16px;border-radius:8px;transition:top .2s}
.skip-link:focus{top:16px}

/* ---------- form inputs ---------- */
.ct-input{width:100%;background:var(--ink);border:1px solid rgba(244,241,234,.16);border-radius:10px;padding:14px 16px;color:var(--fg);font-family:inherit;font-size:15.5px;transition:border-color .2s}
.ct-input:focus{outline:none;border-color:var(--accent)}
.ct-input::placeholder{color:rgba(244,241,234,.4)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .wrap,.hero__copy,.page-hero{padding-left:22px;padding-right:22px}
  .nav{display:none}
  .burger{display:flex}
  .h1{font-size:39px}.h2{font-size:30px}.quote{font-size:27px}
  .hero__ghost{display:none}
  .hero{min-height:auto;justify-content:flex-start;padding-top:104px}
  .hero__portrait{position:relative;left:auto;bottom:auto;transform:none;margin:14px auto -1px}
  .hero__portrait img{max-height:54vh}
  .hero__grid{grid-template-columns:1fr;gap:20px}
  .hero__copy{padding-bottom:0;display:flex;flex-direction:column}
  .hero__copy .col-text{order:1}
  .numbers__grid{grid-template-columns:1fr 1fr}
  .footer-cta{grid-template-columns:1fr;gap:28px}
  .two-col{grid-template-columns:1fr!important;gap:36px!important}
  .bio-sticky{position:static!important;top:auto!important}
}