:root {
  /* Earthy palette: forest green primary, clay brown accent, warm paper */
  --paper:    #f6f1e7;
  --paper-2:  #efe6d6;
  --card:     #fffdf8;
  --forest:   #14573c;
  --forest-2: #1c6e4b;
  --moss:     #3f9b6d;
  --moss-soft:#d9eadf;
  --clay:     #8a4f2d;
  --clay-2:   #b06a3c;
  --clay-soft:#efd9c6;
  --bark:     #2c2014;
  --ink:      #23302a;
  --ink-2:    #46544c;
  --muted:    #6b766d;
  --line:     rgba(44,32,20,0.12);
  --line-2:   rgba(44,32,20,0.07);
  --shadow:   0 1px 2px rgba(44,32,20,.05), 0 10px 30px -12px rgba(20,87,60,.18);
  --shadow-lg:0 30px 60px -24px rgba(20,87,60,.30);
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* The header is sticky at 72px, so an anchor target would otherwise land
   with its heading hidden underneath it. */
[id] { scroll-margin-top: 88px; }

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 500px at 88% -8%, rgba(63,155,109,.18), transparent 60%),
    radial-gradient(700px 500px at -5% 12%, rgba(176,106,60,.14), transparent 55%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain overlay for warmth/texture */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- WebGL artifact layers ---- */
.fx-fixed { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; border-radius: inherit; }
.has-fx { position: relative; }
.cta-band > h2, .cta-band > p, .cta-band > .cta { position: relative; z-index: 1; }

h1, h2, h3, .display { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
a { color: inherit; }

.accent { color: var(--clay-2); font-style: italic; }
/* Section label. Deliberately not a pill: a short rule and quiet small caps
   reads as editorial rather than as a template badge. */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: .95rem; font-weight: 500; font-style: italic;
  letter-spacing: 0; text-transform: none;
  color: var(--clay);
  background: none; border: 0; border-radius: 0; padding: 0;
  margin: 0 0 .3rem;
}
.eyebrow::before {
  content: ""; width: 2rem; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}
.eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 4px rgba(63,155,109,.18); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; cursor: pointer; border: none;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--forest); color: #fdfaf2; box-shadow: 0 10px 24px -10px rgba(20,87,60,.6); }
.btn-primary:hover { background: var(--forest-2); transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(20,87,60,.65); }
.btn-ghost { background: transparent; color: var(--bark); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: rgba(44,32,20,.04); border-color: rgba(44,32,20,.25); transform: translateY(-2px); }
.btn-clay { background: var(--clay); color: #fdf3ea; }
.btn-clay:hover { background: var(--clay-2); transform: translateY(-2px); }

/* ===================== HEADER ===================== */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px); background: rgba(246,241,231,.78);
  border-bottom: 1px solid var(--line-2);
}
nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; color: var(--bark); }
.logo .mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, var(--forest), var(--moss));
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.logo .mark svg { width: 22px; height: 22px; }
.logo small { display: block; font-family: 'Hanken Grotesk', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: -2px; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 500; }
.nav-links a { color: var(--ink-2); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--forest); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* ===================== HERO ===================== */
.hero { padding: 26px 0 64px; position: relative; }
.hero-panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 34px; padding: 78px 60px; background: #0a2c1e;
  box-shadow: var(--shadow-lg); color: #e7f0ea;
}
/* hairline glow border */
.hero-panel { border: 1px solid rgba(124,224,168,.14); }
/* scrim so text stays legible over the live mesh */
.hero-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(102deg, rgba(6,26,17,.80) 0%, rgba(6,26,17,.42) 44%, rgba(6,26,17,0) 78%);
}
.hero-panel .fx { z-index: 0; border-radius: 0; }
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; margin: 22px 0 22px; max-width: 16ch; font-weight: 600; color: #fbf7ee; }
.hero p.lead { font-size: clamp(17px, 1.5vw, 19.5px); color: #cbe0d3; max-width: 52ch; margin-bottom: 32px; }
.hero p.lead strong { color: #eef6ef; }
.hero .accent { color: #ecc39c; }
/* lively shimmer sweep across the accent word */
.hero h1 .accent {
  background: linear-gradient(100deg, #ecc39c 30%, #fff2df 50%, #ecc39c 70%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 220% 100%; animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .eyebrow { color: #d9c3a8; background: none; border: 0; }
.hero .eyebrow .pulse { background: #7ce0a8; box-shadow: 0 0 0 4px rgba(124,224,168,.22); }
.hero .btn-primary {
  background: linear-gradient(100deg, #ecc39c, #e7a978); background-size: 200% 100%;
  color: #1c2a1c; box-shadow: 0 12px 30px -10px rgba(0,0,0,.55); animation: ctaflow 6s ease infinite;
}
@keyframes ctaflow { 0%,100%{background-position:0 0} 50%{background-position:100% 0} }
.hero .btn-primary:hover { background-image: linear-gradient(100deg, #f3d3b3, #eeb98c); transform: translateY(-2px) scale(1.015); }
.hero .btn-ghost { color: #f0f6f0; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
.hero .trust { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: #a7c2b2; }
.hero .trust b { color: #f0f6f0; font-weight: 600; }
.trust .sep { width: 4px; height: 4px; border-radius: 50%; background: #ecc39c; }
/* device lifts and tilts to feel alive */
.hero .device { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.hero .device:hover { transform: translateY(-6px) rotateZ(-.4deg); }

/* staggered reveal */
.reveal-up { opacity: 0; transform: translateY(18px); animation: revealUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes revealUp { to { opacity: 1; transform: none; } }
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}.d5{animation-delay:.5s}

/* ===================== DASHBOARD MOCKUP ===================== */
.device {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px;
  box-shadow: var(--shadow-lg); position: relative;
}
.device::after { content:""; position:absolute; inset:0; border-radius:22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); pointer-events:none; }
.device .bar { display: flex; align-items: center; gap: 7px; padding: 4px 6px 14px; }
.device .bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.device .bar .t { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.dash-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.dash-head h4 { font-family:'Fraunces',serif; font-size: 17px; }
.dash-head span { font-size: 12px; color: var(--moss); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--paper); border: 1px solid var(--line-2); border-radius: 13px; padding: 12px 13px; }
.kpi .lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.kpi .val { font-family:'Fraunces',serif; font-size: 20px; font-weight: 600; margin-top: 3px; }
.kpi .chg { font-size: 11px; font-weight: 600; margin-top: 2px; }
.chg.up { color: var(--forest-2); } .chg.dn { color: var(--clay); }
.dash-low { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.panel { background: var(--paper); border: 1px solid var(--line-2); border-radius: 13px; padding: 14px; }
.panel .pt { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 12px; letter-spacing:.02em; }
.bars { display: flex; align-items: flex-end; gap: 9px; height: 96px; }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bars .bk { width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(var(--moss), var(--forest)); animation: grow 1.1s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
.bars .col:nth-child(even) .bk { background: linear-gradient(var(--clay-2), var(--clay)); }
.bars .col span { font-size: 9.5px; color: var(--muted); font-weight: 600; }
@keyframes grow { from { transform: scaleY(0); } }
.donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; }
.legend { font-size: 10.5px; color: var(--ink-2); display: grid; gap: 5px; width: 100%; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: middle; }
.legend div { display: flex; align-items: center; }
.legend b { margin-left: auto; font-weight: 700; }

.float-badge {
  position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 14px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 600;
  animation: floaty 5s ease-in-out infinite;
}
.float-badge .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.float-badge small { display:block; font-weight: 500; color: var(--muted); font-size: 11px; }
.fb-1 { top: -22px; right: -18px; }
.fb-2 { bottom: -24px; left: -22px; animation-delay: -2.5s; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ===================== MARQUEE / SECTORS STRIP ===================== */
.strip { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(255,253,248,.5); overflow: hidden; }
.strip-inner { display: flex; gap: 0; align-items: center; white-space: nowrap; animation: slide 26s linear infinite; }
.strip-inner:hover { animation-play-state: paused; }
.strip span { font-family:'Fraunces',serif; font-size: 17px; color: var(--ink-2); padding: 18px 34px; display: inline-flex; align-items: center; gap: 14px; }
.strip span::after { content:"✦"; color: var(--clay-2); font-size: 12px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ===================== SECTION SHELL ===================== */
section.block { padding: 92px 0; }
.head { max-width: 640px; margin-bottom: 52px; }
.head .eyebrow { margin-bottom: 18px; }
.head h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; }
.head p { color: var(--ink-2); font-size: 17px; margin-top: 16px; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.center .eyebrow { display: inline-flex; }

/* fade-in on scroll */
.obs { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.obs.in { opacity: 1; transform: none; }

/* ===================== INDUSTRIES ===================== */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ind {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s; position: relative; overflow: hidden;
}
.ind::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--forest), var(--clay-2)); transform: scaleX(0); transform-origin:left; transition: transform .3s; }
.ind:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(20,87,60,.3); }
.ind:hover::before { transform: scaleX(1); }
.ind .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; }
.ind .ic svg { width: 26px; height: 26px; }
.ind h3 { font-size: 21px; margin-bottom: 8px; }
.ind p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 16px; }
.ind ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.ind li { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 10px; }
.ic-green { background: rgba(63,155,109,.14); color: var(--forest); }
.ic-clay  { background: rgba(176,106,60,.16); color: var(--clay); }

/* ===================== CAPABILITIES ===================== */
.cap-section { background: var(--bark); color: #ece3d3; border-radius: 34px; margin: 0 24px; position: relative; overflow: hidden; }
.cap-section .wrap { padding-top: 88px; padding-bottom: 88px; }
.cap-section .head h2 { color: #fbf6ec; }
.cap-section .head p { color: #c4b6a1; }
.cap-section .eyebrow { color: #9fe0bd; background: rgba(63,155,109,.16); border-color: rgba(159,224,189,.3); }
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cap { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 24px; transition: background .25s, transform .25s; }
.cap:hover { background: rgba(255,255,255,.08); transform: translateY(-4px); }
.cap .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(63,155,109,.18); color: #9fe0bd; display: grid; place-items: center; margin-bottom: 16px; }
.cap .ic svg { width: 23px; height: 23px; }
.cap h3 { font-size: 17px; color: #fbf6ec; margin-bottom: 7px; }
.cap p { font-size: 13.5px; color: #b9ab96; line-height: 1.55; }

/* ===================== ANALYTICS FEATURE ===================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feat-list { display: grid; gap: 22px; margin-top: 28px; }
.feat { display: flex; gap: 16px; }
.feat .fic { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; background: rgba(20,87,60,.1); color: var(--forest); }
.feat .fic svg { width: 21px; height: 21px; }
.feat h4 { font-family:'Fraunces',serif; font-size: 18px; margin-bottom: 3px; }
.feat p { font-size: 14.5px; color: var(--ink-2); }

/* ===================== PRODUCTS ===================== */
.prod-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.prod {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 36px;
  position: relative; transition: border-color .25s, box-shadow .25s;
}
.prod.live { background: linear-gradient(155deg, #16523a, #1c6e4b); color: #ecf6ef; border: none; box-shadow: var(--shadow-lg); }
.prod .status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; }
.prod.live .status { background: rgba(255,255,255,.16); color: #c8f3d9; }
.prod .status .dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 4px rgba(110,231,168,.2); }
.prod h3 { font-size: 30px; margin: 18px 0 12px; }
.prod.live p { color: #c9e4d3; }
.prod p { color: var(--ink-2); font-size: 15px; max-width: 48ch; }
.prod .feats { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.prod .feats span { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.prod.live .feats span { background: rgba(255,255,255,.12); color: #ddf2e4; }
.prod .feats span.t { background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2); }
.soon-card { display: flex; flex-direction: column; justify-content: center; }
.soon-card .pip { display: grid; gap: 14px; margin-top: 8px; }
.soon-card .pip div { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.soon-card .pip div:last-child { border: none; padding-bottom: 0; }
.soon-card .pip .tag { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--clay-2); background: rgba(176,106,60,.12); padding: 4px 9px; border-radius: 6px; }
.soon-card .pip .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(20,87,60,.08); color: var(--forest); display: grid; place-items: center; flex:none; }
.soon-card .pip .ic svg { width: 19px; height: 19px; }

/* ===================== WEB SERVICES ===================== */
/* The recent-work pair sits under the three service cards in the same
   section, so it needs the gap the .ind-grid above it does not provide. */
.work-grid { margin-top: 18px; }
/* .prod.live owns the green "Live now" pill; client work is clay, so the
   two read as different lines of business rather than two products.
   Both selectors are qualified with .prod because the base rules
   (.prod .status .dot) are, and would otherwise win on specificity. */
.prod .status.status-clay { background: var(--clay-soft); color: var(--clay); }
.prod .status.status-clay .dot { background: var(--clay-2); box-shadow: 0 0 0 4px rgba(176,106,60,.22); }
.prod .status.status-quiet { background: var(--paper); border: 1px solid var(--line-2); color: var(--muted); }
/* .soon-card is a column flex container, so an inline-flex pill would
   stretch to the full card width without this. */
.work-grid .soon-card .status, .work-grid .soon-card .btn { align-self: flex-start; }
.work-grid .soon-card .btn { margin-top: 22px; }

/* ===================== WHY KENYA ===================== */
.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.why { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; text-align: left; }
.why .ic { width: 46px; height:46px; border-radius: 12px; background: rgba(176,106,60,.13); color: var(--clay); display:grid; place-items:center; margin-bottom: 16px; }
.why .ic svg { width: 23px; height: 23px; }
.why h3 { font-size: 17.5px; margin-bottom: 7px; }
.why p { font-size: 14px; color: var(--ink-2); }

/* ===================== STATS BANNER ===================== */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stat .n { font-family:'Fraunces',serif; font-size: clamp(34px,5vw,52px); font-weight: 600; color: var(--forest); line-height: 1; }
.stat .n em { font-style: normal; color: var(--clay-2); }
.stat .l { font-size: 14px; color: var(--ink-2); margin-top: 8px; font-weight: 500; }

/* ===================== CTA ===================== */
.cta-band { background: linear-gradient(145deg, var(--forest), #0e4630 70%); border-radius: 34px; color: #ecf6ef; padding: 64px; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; width: 340px; height: 340px; border-radius:50%; background: radial-gradient(circle, rgba(176,106,60,.5), transparent 65%); top: -120px; right: -80px; }
.cta-band::after { content:""; position:absolute; width: 300px; height: 300px; border-radius:50%; background: radial-gradient(circle, rgba(63,155,109,.45), transparent 65%); bottom: -140px; left: -60px; }
.cta-band h2 { font-size: clamp(30px,4.5vw,46px); position: relative; max-width: 20ch; margin: 0 auto 16px; }
.cta-band p { color: #c5e0cf; font-size: 17px; max-width: 52ch; margin: 0 auto 32px; position: relative; }
.cta-band .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ===================== FOOTER ===================== */
footer { background: var(--bark); color: #c9bca7; padding: 72px 0 32px; margin-top: 96px; position: relative; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-grid .logo { color: #fbf6ec; margin-bottom: 16px; }
.foot-brand p { font-size: 14px; max-width: 34ch; line-height: 1.6; }
.foot-col h5 { font-family:'Hanken Grotesk'; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #9fe0bd; margin-bottom: 16px; font-weight: 700; }
.foot-col a { display: block; color: #c9bca7; text-decoration: none; font-size: 14px; margin-bottom: 11px; transition: color .15s; }
.foot-col a:hover { color: #fbf6ec; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 26px; font-size: 13px; color: #9c8f7c; }
.foot-bottom .made { display: inline-flex; align-items: center; gap: 8px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 920px) {
  .hero-inner, .split { grid-template-columns: 1fr; gap: 44px; }
  .hero-panel { padding: 48px 32px; border-radius: 26px; }
  .hero .device { max-width: 460px; }
  .ind-grid, .cap-grid, .why-grid, .stats, .prod-grid, .foot-grid { grid-template-columns: repeat(2,1fr); }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .ind-grid, .cap-grid, .why-grid, .stats, .prod-grid, .foot-grid, .dash-low, .kpis { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(3,1fr); }
  .cap-section, .cta-band { margin: 0 14px; border-radius: 24px; }
  .cta-band { padding: 44px 26px; }
  .hero { padding: 14px 0 48px; }
  .hero-panel { padding: 38px 22px; border-radius: 22px; }
  section.block { padding: 64px 0; }
  .nav-cta .btn-ghost { display: none; }
  .float-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .reveal-up, .obs { opacity: 1 !important; transform: none !important; }
}

/* ===================================================================
   Multipage additions
   Components introduced when the single landing page became a six page
   site. Everything below reuses the existing earthy tokens.
   =================================================================== */

/* Accessibility helpers */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--forest); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 .6rem 0; font-weight: 600;
}
.skip:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Current page in the nav */
.nav-links a.active {
  color: var(--forest);
  font-weight: 600;
}
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Interior page hero: shorter than the home hero, same atmosphere */
.page-hero {
  position: relative;
  padding: clamp(7rem, 14vw, 10.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line-2);
}
.page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.3rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: .6rem 0 0;
  color: var(--forest);
}
.page-hero h1 em { font-style: normal; color: var(--clay); }
.page-hero .lede {
  max-width: 60ch;
  margin-top: 1.1rem;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--ink-2);
  line-height: 1.65;
}

.section-lede {
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.7;
  margin: .6rem 0 0;
}
.wrap.narrow { max-width: 780px; }
.block-cta {
  margin-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
}
.role {
  color: var(--clay);
  font-weight: 600;
  letter-spacing: .01em;
  margin: .1rem 0 0;
}

/* Home hero proof strip */
.hero-proof {
  list-style: none; padding: 0;
  margin: 2.6rem 0 0;
  display: flex; flex-wrap: wrap; gap: 2.4rem;
}
.hero-proof li { display: flex; flex-direction: column; }
.hero-proof strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.9rem; font-weight: 600; color: var(--forest); line-height: 1;
}
.hero-proof span {
  font-size: .82rem; color: var(--ink-2); margin-top: .3rem;
  letter-spacing: .02em;
}

/* Generic grids */
.grid-2, .grid-3 { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  margin-top: 1.6rem;
}

/* Tick lists */
.ticks { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.ticks li {
  position: relative; padding-left: 1.6rem;
  color: var(--ink-2); line-height: 1.6;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 3px var(--moss-soft);
}

/* Service cards */
.svc {
  background: rgba(255,255,255,.62);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.6rem 1.5rem;
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, transform .2s ease;
}
.svc:hover { border-color: rgba(63,155,109,.5); transform: translateY(-2px); }
.svc h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.28rem; font-weight: 600; color: var(--forest); margin: 0 0 .5rem;
}
.svc p { color: var(--ink-2); line-height: 1.65; margin: 0; }

/* Project cards */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.proj {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 1.6rem 1.5rem;
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.proj:hover {
  border-color: rgba(63,155,109,.55);
  box-shadow: 0 14px 34px -22px rgba(20,87,60,.55);
  transform: translateY(-3px);
}
.proj-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.proj-tag {
  font-family: 'Fraunces', Georgia, serif;
  font-size: .9rem; font-style: italic; font-weight: 500;
  color: var(--clay);
}
.proj-live {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; padding: 0;
}
.proj-live::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--moss); box-shadow: 0 0 0 3px rgba(63,155,109,.22);
}
.proj h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem; font-weight: 600; color: var(--forest);
  margin: .7rem 0 .5rem;
}
.proj > p { color: var(--ink-2); line-height: 1.65; margin: 0; flex: 1; }

.proj-metrics {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-2);
}
.proj-metrics div { display: flex; flex-direction: column; }
.proj-metrics strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem; font-weight: 600; color: var(--forest); line-height: 1;
}
.proj-metrics span { font-size: .74rem; color: var(--ink-2); margin-top: .25rem; }

.proj-stack {
  list-style: none; padding: 0;
  margin: 1.1rem 0 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.proj-stack li {
  font-size: .78rem; color: var(--ink-2);
}
.proj-stack li:not(:last-child)::after {
  content: "·"; margin-left: .45rem; opacity: .5;
}
.proj-actions {
  margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.proj-host {
  font-size: .78rem; color: var(--ink-2);
  margin: .7rem 0 0;
}

/* Stat + profile cards */
.stat-card, .profile-card {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 1.6rem 1.5rem;
  backdrop-filter: blur(6px);
}
.stat-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.stat-card div { display: flex; flex-direction: column; }
.stat-card strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem; font-weight: 600; color: var(--forest); line-height: 1;
}
.stat-card span { font-size: .8rem; color: var(--ink-2); margin-top: .35rem; }

.profile-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem; font-weight: 600; color: var(--forest);
  margin: 0 0 .8rem;
}
.profile-card h3 + .chips + h3 { margin-top: 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0; line-height: 1.9; }
.chips span {
  font-size: .82rem; color: var(--ink-2);
  background: none; border: 0;
  padding: 0; border-radius: 0;
}
.chips span:not(:last-child)::after {
  content: "·"; margin: 0 .1rem 0 .55rem; opacity: .45;
}

/* Closing call to action band */
.cta-band { text-align: center; }
.cta-band .section-lede { margin-left: auto; margin-right: auto; }
.cta-band .block-cta { justify-content: center; }

@media (max-width: 920px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .hero-proof { gap: 1.5rem; }
  .stat-card { grid-template-columns: 1fr 1fr; }
}

/* Hero proof stats inside the dark panel */
.hero-panel .hero-proof {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem;
}
.hero-panel .hero-proof strong { color: #fbf7ee; font-size: 1.75rem; }
.hero-panel .hero-proof span { color: #b9d3c4; }

/* Light ghost button, for use on the dark hero panel */
.btn-ghost-light {
  color: #eaf3ed;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(198,236,213,.34);
}
.btn-ghost-light:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(198,236,213,.6);
}

@media (max-width: 920px) {
  .hero-panel .hero-proof { grid-template-columns: 1fr 1fr; margin-top: 2rem; }
}


/* ===================================================================
   Editorial pass
   The page had settled into one repeating shape: label, heading, lede,
   then a row of identical cards. These rules break that rhythm so the
   sections read as different kinds of content rather than one template
   filled in six times.
   =================================================================== */

/* Industries as a numbered editorial list, not a card grid. */
.list-editorial { counter-reset: item; margin-top: 2.4rem; border-top: 1px solid var(--line-2); }
.list-editorial > li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 14rem) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-2);
}
.list-editorial > li::before {
  content: counter(item, decimal-leading-zero);
  font-family: 'Fraunces', Georgia, serif;
  font-size: .95rem; color: var(--clay); opacity: .75;
}
.list-editorial h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem; font-weight: 600; color: var(--forest); margin: 0;
}
.list-editorial p { margin: 0; color: var(--ink-2); line-height: 1.7; }

/* Capabilities as a definition grid: quieter than six bordered boxes. */
.defs { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 3rem; }
.defs > div { border-top: 2px solid var(--moss); padding-top: 1rem; }
.defs h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.18rem; font-weight: 600; color: var(--forest); margin: 0 0 .4rem;
}
.defs p { margin: 0; color: var(--ink-2); line-height: 1.65; }

/* Section headings: slightly tighter, less uniform than the old rhythm. */
.block h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  color: var(--forest); margin: .2rem 0 0; max-width: 22ch;
}
.cta-band h2 { max-width: none; }

@media (max-width: 920px) {
  .list-editorial > li { grid-template-columns: 2.5rem 1fr; }
  .list-editorial p { grid-column: 2; }
  .defs { grid-template-columns: 1fr; gap: 1.6rem; }
}


/* ===================================================================
   Legibility over the live layers
   The WebGL canvases animate behind content, so their brightness moves
   under the text. Content sits above them on a translucent ground of the
   page colour, which keeps every measured contrast ratio stable instead
   of depending on which frame is painted.
   =================================================================== */
.has-fx > .wrap {
  position: relative;
  z-index: 1;
}
.has-fx > .wrap::before {
  content: "";
  position: absolute;
  inset: -2.5rem -2rem;
  z-index: -1;
  background: radial-gradient(120% 100% at 50% 40%,
              rgba(246,241,231,.94) 0%,
              rgba(246,241,231,.86) 55%,
              rgba(246,241,231,0) 100%);
  pointer-events: none;
}
/* The dark sections keep their own ground. */
.block.dark.has-fx > .wrap::before,
.cap-section.has-fx > .wrap::before { background: none; }

/* The fixed page mesh sat at full strength behind every page. Held back so
   long form text is never read against a moving gradient. */
.fx-fixed { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .fx, .fx-fixed { opacity: .3; }
}


/* ===================================================================
   Section rhythm
   The generated pages use .block for every section, but the class was
   never defined, so sections had no vertical spacing of their own and
   relied on whatever margins their children happened to carry. This is
   the spacing system: one scale, applied once.
   =================================================================== */
.block {
  position: relative;
  padding: clamp(3.75rem, 8vw, 6.5rem) 0;
}
/* Alternating sections get a slightly deeper paper so the eye can find the
   seam without a hard rule. */
.block.alt { background: var(--paper-2); }
.block.alt + .block.alt { padding-top: 0; }

/* Heading stack: label, heading, lede. Spacing set here rather than on each
   element, so every section opens identically. */
.block > .wrap > .eyebrow { margin-bottom: .55rem; }
.block h2 + .section-lede { margin-top: .9rem; }
.page-hero + .block { padding-top: clamp(2.75rem, 6vw, 4.5rem); }

/* Content that follows the heading stack. */
.block .proj-grid,
.block .grid-2,
.block .list-editorial,
.block .defs { margin-top: clamp(2rem, 4vw, 3rem); }

/* The closing band should feel like a landing, not another section. */
.block.cta-band { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.block.cta-band + footer { margin-top: 0; }

/* Anchor targets clear the sticky header (72px tall plus breathing room). */
[id] { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }