/*
Theme Name: Gaithumalabs
Theme URI: https://gaithumalabs.com
Author: Gaithumalabs
Author URI: https://gaithumalabs.com
Description: A custom corporate theme for Gaithumalabs, an applied AI lab in Nairobi, Kenya building custom LLMs and production AI systems. Design language: "bedrock" — geological strata, core-sample depth markers and a live signal rail, built for a technical, credible enterprise audience.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gaithumalabs
Tags: one-column, custom-colors, custom-logo, custom-menu, footer-widgets, full-width-template, threaded-comments, translation-ready
*/

/* =====================================================================
   0. DESIGN TOKENS
   ===================================================================== */
:root{
  /* -- Bedrock palette -- */
  --basalt:        #14120f;   /* volcanic rock, primary dark ground */
  --basalt-raised:  #1c1914;   /* slightly lifted panels on basalt */
  --bone:           #f2ede4;   /* ash / bone, primary light ground */
  --bone-dim:       #e8e0d2;   /* recessed panels on bone */
  --oxide:          #b3441e;   /* murram / iron oxide — primary accent */
  --oxide-bright:   #d15427;
  --ochre:          #d9a441;   /* savanna gold — secondary accent */
  --highland:       #2f4f45;   /* highland green — tertiary ground */
  --highland-light: #3d6456;
  --strata:         #746a58;   /* strata grey-brown — captions, rules */
  --strata-soft:    #b8ac96;

  --ink:            #17140f;   /* body text on light */
  --paper:          #f6f2ea;   /* body text on dark */

  /* -- Type -- */
  --f-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --f-body:    'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* -- Rhythm -- */
  --rail-w: 34px;
  --gutter: clamp(20px, 5vw, 64px);
  --edge: clamp(1.4rem, 4vw, 3.4rem);
  --radius: 3px;
}

/* =====================================================================
   1. RESET & BASE
   ===================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{
  margin:0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-left: var(--rail-w);
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
::selection{ background: var(--oxide); color: var(--paper); }

.container{
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width: 7px; height:7px;
  background: currentColor;
  display:inline-block;
  border-radius:1px;
}

.section-tag{
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .1em;
}

.h-display{
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--f-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration:none;
  padding: 0.95em 1.5em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn svg{ width:14px; height:14px; transition: transform .25s ease; }
.btn:hover svg{ transform: translateX(3px); }

.btn-solid{
  background: var(--oxide);
  border-color: var(--oxide);
  color: var(--paper);
}
.btn-solid:hover{ background: var(--oxide-bright); border-color: var(--oxide-bright); }

.btn-ghost-dark{ color: var(--bone); }
.btn-ghost-dark:hover{ background: var(--bone); color: var(--basalt); }

.btn-ghost-light{ color: var(--basalt); }
.btn-ghost-light:hover{ background: var(--basalt); color: var(--bone); }

/* grain overlay used inside dark sections */
.grain{ position:relative; isolation:isolate; }
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   2. STRATA RAIL — the signature element
   fixed vertical core-sample rail: colour bands per section + live
   depth readout + a quiet seismograph line.
   ===================================================================== */
#strata-rail{
  position: fixed;
  top:0; left:0; bottom:0;
  width: var(--rail-w);
  z-index: 500;
  background: var(--basalt);
  border-right: 1px solid rgba(242,237,228,.08);
  overflow: hidden;
}
#strata-rail .band{
  position:absolute; left:0; width:100%;
  transition: background-color .5s ease;
}
#strata-rail canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.55;
  mix-blend-mode: screen;
}
#strata-rail .depth-readout{
  position:absolute;
  bottom: 14px; left:0; width:100%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--bone);
  opacity:.85;
  white-space: nowrap;
}
#strata-rail .depth-readout b{ font-weight:600; }

@media (max-width: 640px){
  :root{ --rail-w: 16px; }
  #strata-rail .depth-readout{ display:none; }
}

/* =====================================================================
   3. HEADER / NAV
   ===================================================================== */
#site-header{
  position: sticky; top:0; z-index:400;
  background: rgba(20,18,15,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(242,237,228,.1);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none; color: var(--bone);
  font-family: var(--f-display); font-weight:600; font-size:1.15rem;
  letter-spacing: -0.01em;
}
.brand svg{ width:30px; height:30px; }
.brand span em{
  font-style:normal; color: var(--ochre);
}

#primary-menu{
  display:flex; gap: 2.2rem;
}
#primary-menu a{
  text-decoration:none;
  color: var(--strata-soft);
  font-family: var(--f-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition: color .2s ease;
}
#primary-menu a:hover, #primary-menu .current-menu-item a{ color: var(--bone); }

.header-cta{ display:flex; align-items:center; gap:1.6rem; }

.menu-toggle{
  display:none; background:none; border:none; color:var(--bone);
  width:26px; height:20px; position:relative;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:currentColor; transition: all .25s ease;
}
.menu-toggle span{ top:9px; }
.menu-toggle span::before{ top:-8px; }
.menu-toggle span::after{ top:8px; }

@media (max-width: 880px){
  #primary-menu{ display:none; }
  .menu-toggle{ display:block; }
}

/* =====================================================================
   4. HERO
   ===================================================================== */
.hero{
  background: var(--basalt);
  color: var(--bone);
  padding: clamp(3.6rem, 9vw, 7.5rem) 0 clamp(3rem,7vw,5.5rem);
  position: relative;
  overflow:hidden;
}
.hero-coords{
  font-family: var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  color: var(--strata-soft); text-transform:uppercase;
  display:flex; align-items:center; gap:.9rem; margin-bottom: 2.2rem;
}
.hero-coords::after{ content:""; height:1px; flex:1; background: rgba(242,237,228,.18); }

.hero-grid{
  display:grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items:end;
}
.hero h1{
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  color: var(--bone);
}
.hero h1 i{ font-style: italic; color: var(--ochre); font-weight:400; }
.hero-sub{
  max-width: 30ch; color: var(--strata-soft); font-size:1.05rem; margin-top:1.6rem;
}
.hero-cta{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

.hero-signal{
  align-self:stretch; display:flex; flex-direction:column; justify-content:flex-end;
  border-left: 1px solid rgba(242,237,228,.15);
  padding-left: 2rem;
}
.hero-signal canvas{ width:100%; height:120px; }
.hero-signal p{
  font-family: var(--f-mono); font-size:.76rem; color: var(--strata-soft);
  line-height:1.7; margin-top:1rem;
}
.hero-signal p b{ color: var(--ochre); font-weight:500; }

@media (max-width: 880px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-signal{ border-left:none; padding-left:0; padding-top:2rem; border-top:1px solid rgba(242,237,228,.15); }
}

/* =====================================================================
   5. SECTION SCAFFOLDING
   ===================================================================== */
.section{ padding: clamp(3.4rem, 8vw, 6.5rem) 0; position:relative; }
.section.on-basalt{ background: var(--basalt); color: var(--bone); }
.section.on-bone{ background: var(--bone); color: var(--ink); }
.section.on-highland{ background: var(--highland); color: var(--bone); }
.section.on-bone-dim{ background: var(--bone-dim); color: var(--ink); }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
  flex-wrap:wrap;
}
.section-head h2{ font-size: clamp(1.9rem, 3.6vw, 3.1rem); max-width: 16ch; }
.section-head .lede{ max-width: 34ch; font-size: .98rem; opacity:.82; }

/* =====================================================================
   6. SERVICES — depth-ordered strata blocks
   ===================================================================== */
.strata-list{ display:flex; flex-direction:column; }
.strata-item{
  display:grid; grid-template-columns: 130px 1.1fr 1.5fr;
  gap: 2rem;
  padding: 2.2rem 0;
  border-top: 1px solid var(--strata-soft);
  align-items:start;
}
.strata-item:last-child{ border-bottom: 1px solid var(--strata-soft); }
.strata-item .depth{
  font-family: var(--f-mono); font-size:.82rem; color: var(--oxide); letter-spacing:.04em; padding-top:.3rem;
}
.strata-item h3{ font-family: var(--f-display); font-size: 1.5rem; font-weight:600; }
.strata-item .swatch{ width:22px; height:8px; display:inline-block; margin-bottom:.9rem; border-radius:1px; }
.strata-item p{ font-size:.96rem; opacity:.85; max-width: 46ch; }
.strata-item ul{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem .5rem; }
.strata-item ul li{
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.03em;
  border:1px solid var(--strata-soft); padding:.32em .7em; border-radius:20px; opacity:.85;
}

@media (max-width: 780px){
  .strata-item{ grid-template-columns: 1fr; gap:.6rem; }
}

/* =====================================================================
   7. PROCESS — four-stage pipeline
   ===================================================================== */
.process-rail{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(246,242,234,.16); }
.process-step{ background: var(--highland); padding: 2.2rem 1.7rem 2.4rem; position:relative; }
.process-step .num{ font-family: var(--f-mono); font-size:.75rem; color: var(--ochre); }
.process-step h3{ font-family: var(--f-display); font-size:1.35rem; margin-top:1.1rem; font-weight:600; }
.process-step p{ font-size:.9rem; opacity:.82; margin-top:.8rem; }
.process-step::after{
  content:""; position:absolute; bottom:0; left:1.7rem; right:1.7rem; height:2px; background: var(--ochre);
  transform: scaleX(0); transform-origin:left; transition: transform .5s ease;
}
.process-step.is-in::after{ transform: scaleX(1); }

@media (max-width: 880px){ .process-rail{ grid-template-columns:1fr; } }

/* =====================================================================
   8. SPEC / CAPABILITY SHEET
   ===================================================================== */
.spec-sheet{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(242,237,228,.18);
  border-left: 1px solid rgba(242,237,228,.18);
}
.spec-cell{
  border-right: 1px solid rgba(242,237,228,.18);
  border-bottom: 1px solid rgba(242,237,228,.18);
  padding: 2rem 1.6rem;
}
.spec-cell .val{ font-family: var(--f-display); font-size: 2.1rem; color: var(--ochre); }
.spec-cell .lbl{ font-family: var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin-top:.6rem; }
@media (max-width: 880px){ .spec-sheet{ grid-template-columns: repeat(2,1fr); } }

/* =====================================================================
   9. INDUSTRIES
   ===================================================================== */
.industry-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1px; background: var(--strata-soft); }
.industry-card{
  background: var(--bone); padding: 2.1rem 1.7rem; min-height: 190px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: background .3s ease;
}
.industry-card:hover{ background: var(--bone-dim); }
.industry-card .idx{ font-family: var(--f-mono); font-size:.7rem; color: var(--oxide); }
.industry-card h3{ font-family: var(--f-display); font-size:1.28rem; font-weight:600; margin-top: 2.2rem; }
@media (max-width: 880px){ .industry-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .industry-grid{ grid-template-columns: 1fr; } }

/* =====================================================================
   10. QUOTE / STATEMENT BAND
   ===================================================================== */
.statement{
  padding: clamp(4rem,10vw,8rem) 0;
  background: var(--oxide); color: var(--bone);
}
.statement blockquote{
  font-family: var(--f-display); font-weight:500; font-style:italic;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height:1.25; max-width: 20ch;
}
.statement cite{ display:block; margin-top:1.6rem; font-family: var(--f-mono); font-size:.78rem; font-style:normal; letter-spacing:.06em; opacity:.85; }

/* =====================================================================
   11. CONTACT / CTA FOOTER BAND
   ===================================================================== */
.cta-band{ background: var(--basalt); color: var(--bone); padding: clamp(3.6rem,9vw,6.5rem) 0; }
.cta-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; }
.cta-grid h2{ font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 14ch; }
.cta-grid .lede{ max-width:40ch; opacity:.78; margin-top:1.2rem; }
.cta-form{ display:flex; flex-direction:column; gap:.9rem; }
.cta-form label{ font-family: var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.cta-form input, .cta-form textarea{
  background: transparent; border:none; border-bottom:1px solid rgba(242,237,228,.3);
  color: var(--bone); font-family: var(--f-body); font-size:1rem; padding: .6em .1em;
  width:100%;
}
.cta-form input:focus, .cta-form textarea:focus{ outline:none; border-bottom-color: var(--ochre); }
.cta-form .btn{ align-self:flex-start; margin-top:.6rem; }
@media (max-width: 880px){ .cta-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   12. SITE FOOTER
   ===================================================================== */
#site-footer{ background: var(--basalt); color: var(--strata-soft); border-top:1px solid rgba(242,237,228,.1); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; padding: 1.7rem 0; font-family: var(--f-mono); font-size:.72rem; letter-spacing:.03em; flex-wrap:wrap; gap:1rem; }
.footer-inner a{ text-decoration:none; }
.footer-inner nav ul{ display:flex; gap:1.4rem; }
.footer-inner nav a:hover{ color: var(--bone); }

/* =====================================================================
   13. GENERIC PAGE / BLOG CONTENT
   ===================================================================== */
.page-hero{ background: var(--basalt); color: var(--bone); padding: clamp(3.4rem,8vw,6rem) 0 3.4rem; }
.page-hero h1{ font-size: clamp(2.1rem,5vw,3.6rem); }
.content-wrap{ padding: clamp(2.6rem,6vw,4.5rem) 0; }
.content-wrap .entry-content{ max-width: 72ch; font-size: 1.05rem; line-height:1.75; }
.content-wrap .entry-content h2{ font-family: var(--f-display); font-size:1.7rem; margin-top:2.2rem; margin-bottom:.8rem; font-weight:600; }
.content-wrap .entry-content h3{ font-family: var(--f-display); font-size:1.3rem; margin-top:1.8rem; margin-bottom:.6rem; font-weight:600; }
.content-wrap .entry-content p{ margin: 1rem 0; }
.content-wrap .entry-content a{ color: var(--oxide); text-decoration-thickness:1px; }
.content-wrap .entry-content ul, .content-wrap .entry-content ol{ margin:1rem 0 1rem 1.3rem; list-style: disc; }
.content-wrap .entry-content ol{ list-style: decimal; }
.content-wrap .entry-content blockquote{ border-left:3px solid var(--oxide); padding-left:1.2rem; font-style:italic; opacity:.85; margin:1.4rem 0; }
.content-wrap .entry-content img{ border-radius: var(--radius); margin: 1.4rem 0; }
.content-wrap .entry-content pre{ background: var(--basalt); color: var(--bone); padding:1.2rem; overflow:auto; font-family: var(--f-mono); font-size:.85rem; border-radius: var(--radius); }
.content-wrap .entry-content code{ font-family: var(--f-mono); background: var(--bone-dim); padding:.15em .4em; border-radius:2px; }

.post-list{ display:flex; flex-direction:column; }
.post-item{ border-top:1px solid var(--strata-soft); padding: 2rem 0; display:grid; grid-template-columns: 140px 1fr; gap:2rem; }
.post-item:last-child{ border-bottom:1px solid var(--strata-soft); }
.post-item time{ font-family: var(--f-mono); font-size:.75rem; color: var(--oxide); }
.post-item h2{ font-family: var(--f-display); font-size:1.5rem; font-weight:600; }
.post-item h2 a{ text-decoration:none; }
.post-item p{ margin-top:.6rem; opacity:.8; font-size:.95rem; }
@media (max-width:640px){ .post-item{ grid-template-columns:1fr; gap:.5rem; } }

.pagination{ display:flex; gap:1rem; margin-top:2.5rem; font-family: var(--f-mono); font-size:.8rem; }
.pagination a{ text-decoration:none; border-bottom:1px solid currentColor; }

.comments-area{ margin-top:3rem; border-top:1px solid var(--strata-soft); padding-top:2rem; max-width:72ch; }
.comment-list{ display:flex; flex-direction:column; gap:1.5rem; }
.comment-body{ border-bottom:1px solid var(--bone-dim); padding-bottom:1.5rem; }
.comment-meta{ font-family: var(--f-mono); font-size:.72rem; color: var(--strata); margin-bottom:.4rem; }
.comment-form input, .comment-form textarea{ width:100%; border:1px solid var(--strata-soft); padding:.7em; font-family: var(--f-body); border-radius: var(--radius); margin-bottom:1rem; }
.comment-form label{ font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.3rem; }

.error-404{ text-align:center; padding: 6rem 0; }
.error-404 .code{ font-family: var(--f-mono); color: var(--oxide); font-size:1rem; letter-spacing:.1em; }
.error-404 h1{ font-family: var(--f-display); font-size: clamp(3rem,10vw,6rem); margin-top:1rem; }

/* widgets */
.widget{ margin-bottom: 2.4rem; }
.widget-title{ font-family: var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; opacity:.7; }
.footer-widgets{ background: var(--basalt-raised); padding: 3rem 0; border-top:1px solid rgba(242,237,228,.08); }
.footer-widgets .container{ display:grid; grid-template-columns: repeat(4,1fr); gap:2rem; color: var(--bone); }
.footer-widgets ul li{ margin-bottom:.5rem; font-size:.88rem; }
@media (max-width:780px){ .footer-widgets .container{ grid-template-columns: repeat(2,1fr);} }

/* scroll reveal */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* skip link */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--oxide); color:var(--bone); padding:1em; z-index:1000; }
.skip-link:focus{ left: var(--rail-w); }

/* visible focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--ochre); outline-offset: 2px;
}