/*
Theme Name: Khula Ventures
Theme URI: https://khulaventures.co.za
Author: Khula Ventures
Description: Custom theme for the Khula Ventures digital venture studio site.
Version: 1.0
Text Domain: khula-ventures
*/

:root{
  --ink:#12151a;
  --muted:#5b6169;
  --soft:#eef2fc;
  --line:#3d6fd6;
  --accent:#3d6fd6;
  --border:#e5e7eb;
}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:#ffffff;
}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px;}

/* --- nav --- */
.site-nav{border-bottom:1px solid var(--border);}
.nav-inner{
  max-width:1080px;margin:0 auto;padding:22px 18px;
  display:flex;justify-content:space-between;align-items:center;
}
.brand{font-size:18px;font-weight:800;letter-spacing:.01em;text-decoration:none;color:var(--ink);}
.site-nav nav{display:flex;gap:8px;}
.site-nav nav a{
  text-decoration:none;font-size:14px;font-weight:700;color:var(--muted);
  padding:8px 12px;border-radius:6px;
}
.site-nav nav a:hover{color:var(--ink);}
.site-nav nav a[aria-current="page"]{color:var(--accent);}

/* --- footer --- */
.site-footer{border-top:1px solid var(--border);margin-top:90px;}
.footer-inner{
  max-width:1080px;margin:0 auto;padding:28px 18px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}
.footer-inner span{color:var(--muted);font-size:13px;}
.footer-inner nav{display:flex;gap:20px;}
.footer-inner nav a{text-decoration:none;font-size:13px;font-weight:600;color:var(--muted);}
.footer-inner nav a:hover{color:var(--accent);}

/* --- hero --- */
.eyebrow{
  color:var(--accent);font-size:14px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 8px;
}
.hero{padding:56px 0 52px;}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.03;margin:0;max-width:820px;}
.hero h1::after{
  content:"";display:block;width:54px;height:5px;margin:12px 0 16px;
  background:var(--ink);transform:rotate(-3deg);
}
.hero .intro{color:var(--muted);font-size:17px;line-height:1.7;margin:20px 0 0;max-width:640px;}

/* --- buttons --- */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.btn{
  display:inline-block;text-decoration:none;font-size:14px;font-weight:800;
  padding:13px 22px;border:2px solid var(--ink);letter-spacing:.02em;
  font-family:inherit;cursor:pointer;
}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-outline{background:#fff;border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-primary:hover{opacity:.9;}

/* --- stat blocks --- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:44px 0;}
.stat{
  background:var(--soft);border:1px solid var(--accent);
  box-shadow:8px 8px 0 var(--ink);
  padding:20px 22px;min-height:112px;
  display:flex;flex-direction:column;justify-content:center;
}
.stat strong{display:block;font-size:38px;font-weight:900;line-height:1;margin-bottom:8px;color:var(--accent);}
.stat span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}

/* --- section tabs / category nav --- */
.tabs{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.tab{
  text-decoration:none;border-bottom:3px solid transparent;
  color:var(--ink);font-size:13px;font-weight:900;letter-spacing:.04em;
  padding:8px 2px 9px;text-transform:uppercase;
}
.tab[aria-current="page"]{border-color:var(--accent);color:var(--accent);}
.tab:hover{color:var(--accent);}

/* --- portfolio groups --- */
.group{margin:0 0 44px;}
.group-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;margin-bottom:16px;
}
.group h2{font-size:clamp(22px,3vw,30px);margin:0;}
.group h2 a{text-decoration:none;color:inherit;}
.group h2 a:hover{color:var(--accent);}
.group-note{color:var(--muted);font-size:14px;line-height:1.55;margin:8px 0 0;max-width:600px;}
.group-total{color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.list{border-top:2px solid var(--line);list-style:none;margin:0;padding:0;}
.item{
  display:grid;grid-template-columns:70px minmax(180px,1fr) minmax(150px,.5fr);
  gap:18px;align-items:center;min-height:74px;padding:16px 0;
  border-bottom:2px solid var(--line);
}
.num{color:var(--accent);font-size:13px;font-weight:900;letter-spacing:.08em;}
.item h3{font-size:19px;margin:0 0 6px;}
.item p{color:var(--muted);font-size:15px;line-height:1.4;margin:0;}
.status{
  justify-self:start;font-size:11px;font-weight:900;letter-spacing:.04em;min-width:140px;
  padding:7px 10px;text-align:center;text-transform:uppercase;border:2px solid transparent;
  background:#fff;border-color:var(--ink);color:var(--ink);
}
.status[data-tone="active"]{background:var(--accent);border-color:var(--accent);color:#fff;}
.status[data-tone="dev"]{background:var(--soft);border-color:var(--accent);color:var(--accent);}

.rollup{
  display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;
  padding:16px 0;border-bottom:2px solid var(--line);
}
.rollup p{margin:0;color:var(--muted);font-size:14.5px;font-style:italic;}
.rollup p b{color:var(--accent);font-style:normal;font-weight:800;}

.back-link{
  display:inline-block;margin-bottom:26px;color:var(--muted);text-decoration:none;
  font-size:13px;font-weight:700;
}
.back-link:hover{color:var(--accent);}

/* --- generic content sections --- */
.section{padding:50px 0;border-top:1px solid var(--border);}
.section-head{max-width:640px;margin-bottom:30px;}
.section-head h2{font-size:clamp(22px,3vw,30px);margin:0 0 12px;}
.section-head p{color:var(--muted);font-size:15px;line-height:1.7;margin:0;}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.info-card{border:1px solid var(--border);padding:26px 24px;}
.info-card .step{color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;}
.info-card h3{font-size:18px;margin:0 0 10px;}
.info-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;}

.portfolio-teaser{
  border:1px solid var(--accent);background:var(--soft);
  padding:34px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.portfolio-teaser p{margin:0;color:var(--muted);font-size:15px;max-width:480px;}
.portfolio-teaser h3{margin:0 0 8px;font-size:20px;}

.pill-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.pill-links a{
  text-decoration:none;font-size:13px;font-weight:700;color:var(--ink);
  border:2px solid var(--ink);padding:9px 16px;
}
.pill-links a:hover{border-color:var(--accent);color:var(--accent);}

.privacy{color:var(--muted);font-size:13px;line-height:1.6;margin:30px 0 0;padding-top:20px;border-top:1px solid #eee;}

/* --- contact form --- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:20px;}
.contact-info h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:0 0 10px;}
.contact-info p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 26px;}
.contact-info a.email{font-size:20px;font-weight:800;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);}
form.contact-form{display:flex;flex-direction:column;gap:16px;}
form.contact-form label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;display:block;}
form.contact-form input,form.contact-form textarea{
  width:100%;border:2px solid var(--ink);padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);
}
form.contact-form input:focus,form.contact-form textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}
form.contact-form textarea{min-height:130px;resize:vertical;}
form.contact-form button{align-self:flex-start;margin-top:6px;}
.form-notice{
  border:2px solid var(--accent);background:var(--soft);color:var(--ink);
  padding:16px 18px;font-size:14px;font-weight:600;margin-bottom:22px;
}
.form-notice.error{border-color:#b3261e;background:#fdecea;}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .cards-3{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
}
@media (max-width:820px){
  .item{grid-template-columns:24px 1fr;}
  .status{grid-column:2;margin-top:-2px;}
  .rollup{grid-template-columns:24px 1fr;}
}