/* ==========================================================================
   Wawwa Consulting — design system
   Type:  Source Serif 4 (display) / Inter (text)
   Built: September 2026
   ========================================================================== */

:root{
  /* --- brand --- */
  --navy:#1C2B39;
  --navy-deep:#141F2A;
  --teal:#00B4A6;          /* accent on dark grounds only */
  --teal-ink:#00706A;      /* accessible teal for text/links on light */
  --teal-wash:#E6F5F3;

  /* --- neutrals, biased slightly toward the teal --- */
  --ground:#F5F8F8;
  --panel:#FFFFFF;
  --ink:#16232F;
  --ink-soft:#4E5D69;
  --ink-faint:#78868F;
  --line:#DEE7EA;
  --line-strong:#C6D3D8;

  /* --- type scale --- */
  --step--1:15px;
  --step-0:17.5px;
  --step-1:21px;
  --step-2:clamp(24px,2.6vw,28px);
  --step-3:clamp(28px,3.4vw,36px);
  --step-4:clamp(34px,4.6vw,50px);

  --measure:66ch;
  --gutter:clamp(20px,4vw,32px);
  --shell:1080px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#0B1218;
    --navy-deep:#070C11;
    --teal:#3ADACA;
    --teal-ink:#3ADACA;
    --teal-wash:#0F2A28;
    --ground:#0E151B;
    --panel:#16212B;
    --ink:#E9F0F4;
    --ink-soft:#A6B5C0;
    --ink-faint:#7F8E9A;
    --line:#26343F;
    --line-strong:#33434F;
  }
}
:root[data-theme="dark"]{
  --navy:#0B1218; --navy-deep:#070C11;
  --teal:#3ADACA; --teal-ink:#3ADACA; --teal-wash:#0F2A28;
  --ground:#0E151B; --panel:#16212B;
  --ink:#E9F0F4; --ink-soft:#A6B5C0; --ink-faint:#7F8E9A;
  --line:#26343F; --line-strong:#33434F;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  color:var(--ink);
  line-height:1.15;
  text-wrap:balance;
  margin:0;
}
h1{font-size:var(--step-4);font-weight:700;letter-spacing:-.012em}
h2{font-size:var(--step-3);font-weight:700}
h3{font-size:var(--step-1);font-weight:600;line-height:1.3}
p{margin:0}

a{color:var(--teal-ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--panel);
  padding:10px 16px;border-radius:4px;border:1px solid var(--line-strong)}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-ink);margin:0 0 18px;
}
.on-dark .eyebrow{color:var(--teal)}

/* ---------- header ---------- */
.site-head{background:var(--navy);position:sticky;top:0;z-index:20}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--shell);margin:0 auto;padding:16px var(--gutter);
}
.brand{
  color:#fff;text-decoration:none;font-weight:700;font-size:19px;
  letter-spacing:.18em;font-family:Inter,sans-serif;
}
.brand span{display:block;width:44px;height:3px;background:var(--teal);margin-top:6px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:#fff;text-decoration:none;font-size:15.5px}
.nav-links a:hover{color:var(--teal)}
.nav-links .cta{
  background:var(--teal);color:#04201D;font-weight:600;
  padding:9px 20px;border-radius:4px;
}
.nav-links .cta:hover{color:#04201D;filter:brightness(1.08)}

/* ---------- dark bands ---------- */
.on-dark{background:var(--navy);color:#fff}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark p{color:#C0CEd8}
.on-dark strong{color:#fff}
.on-dark a:not(.btn){color:var(--teal)}

.hero{padding:clamp(56px,8vw,92px) 0 clamp(48px,7vw,76px)}
.hero .kicker{
  font-family:Inter,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
  margin:0 0 20px;
}
.hero h1{max-width:20ch}
.hero .lede{font-size:var(--step-1);margin:24px 0 0;max-width:58ch;color:#C0CED8}
.hero .proof{margin:22px 0 0;max-width:58ch;font-size:16.5px;color:#C0CED8}
.hero .proof b{color:#fff;font-weight:600}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{
  display:inline-block;padding:13px 28px;border-radius:4px;text-decoration:none;
  font-weight:600;font-size:16px;background:var(--teal);color:#04201D;border:1.5px solid var(--teal);
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--teal)}

/* ---------- sections ---------- */
section{padding:clamp(52px,7vw,80px) 0}
.section-lede{font-size:var(--step-1);color:var(--ink-soft);margin:18px 0 0;max-width:62ch}
.on-dark .section-lede{color:#C0CED8}
.body-copy{margin:18px 0 0;color:var(--ink-soft);max-width:var(--measure)}
.body-copy + .body-copy{margin-top:16px}

/* ---------- capability grid ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:40px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px 24px}
.tile h3{margin-bottom:8px}
.tile p{color:var(--ink-soft);font-size:16px}

/* ---------- route / steps ---------- */
.steps{display:grid;gap:2px;margin-top:40px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--panel);padding:26px 24px}
.step-when{
  font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-ink);margin:0 0 10px;
  font-variant-numeric:tabular-nums;
}
.step h3{margin-bottom:10px}
.step ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:16px;line-height:1.6}
.step li{margin-bottom:7px}

/* ---------- case note ---------- */
.case{
  background:var(--panel);border-left:5px solid var(--teal);
  border-radius:0 6px 6px 0;padding:30px 32px;margin-top:36px;
}
.case h3{margin-bottom:10px}
.case p{color:var(--ink-soft)}

/* ---------- insight cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:40px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  transition:border-color .15s ease;
}
.card:hover{border-color:var(--teal)}
.card .pad{padding:26px 24px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:16px}
.card .more{display:block;margin-top:16px;color:var(--teal-ink);font-weight:600;font-size:15.5px}

/* ---------- form ---------- */
form{max-width:620px;margin-top:34px}
label{display:block;font-weight:600;margin:20px 0 6px;font-size:15.5px;color:var(--ink)}
input,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line-strong);border-radius:4px;
  font-family:inherit;font-size:16.5px;background:var(--panel);color:var(--ink);
}
input:focus,textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)}
form .btn{margin-top:26px;cursor:pointer}
.form-note{margin-top:16px;font-size:14.5px;color:var(--ink-faint);max-width:56ch}

/* ---------- article ---------- */
.article-head{background:var(--navy);color:#fff;padding:clamp(48px,7vw,72px) 0 clamp(36px,5vw,54px)}
.article-head h1{max-width:24ch;font-size:var(--step-3)}
.article-head .meta{margin-top:16px;color:#9DAFBB;font-size:15px;font-family:Inter,sans-serif}
.prose{max-width:min(720px,100%);margin:0 auto;padding:clamp(40px,6vw,64px) var(--gutter) clamp(56px,8vw,88px);background:var(--panel)}
.prose p{margin:0 0 18px;color:var(--ink-soft)}
.prose h2{font-size:var(--step-2);margin:38px 0 14px}
.prose ul{margin:0 0 20px;padding-left:22px;color:var(--ink-soft)}
.prose li{margin-bottom:9px}
.pull{
  border-left:5px solid var(--teal);background:var(--ground);
  padding:20px 24px;border-radius:0 6px 6px 0;margin:30px 0;
  font-family:"Source Serif 4",Georgia,serif;font-size:var(--step-1);
  line-height:1.4;color:var(--ink);
}
.pull cite{
  display:block;margin-top:10px;font-family:Inter,sans-serif;font-style:normal;
  font-size:13px;color:var(--ink-faint);letter-spacing:.02em;
}
.checked{
  margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-faint);
}
.backlink{color:var(--teal-ink);font-weight:600;text-decoration:none}

/* ---------- footer ---------- */
.site-foot{background:var(--navy-deep);color:#B4C3CE;padding:52px 0 40px;font-size:15.5px}
.foot-cols{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
.foot-brand{color:#fff;font-weight:700;letter-spacing:.18em;font-size:17px}
.site-foot p{margin:12px 0 0;max-width:44ch}
.site-foot a{color:var(--teal);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-small{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  color:#7E909C;font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px}

@media(max-width:720px){
  .nav-links{gap:16px}
  .nav-links a:not(.cta){display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- figures ---------- */
.figure{
  margin:36px 0 0;padding:26px 26px 20px;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;color:var(--ink);
}
.figure svg{width:100%;max-width:100%;height:auto;display:block}
.figure figcaption{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:62ch;
}
.figure-scroll{overflow-x:auto}

/* ---------- bio ---------- */
.bio{display:grid;gap:32px;align-items:start}
@media(min-width:780px){.bio{grid-template-columns:280px 1fr;gap:44px}}
.bio-photo{
  width:100%;max-width:280px;height:auto;border-radius:6px;
  border:1px solid var(--line);background:var(--panel);
}
.bio-text h2{margin-bottom:4px}
.bio-text .body-copy:first-of-type{margin-top:14px}

.actions-note{
  margin-top:20px;max-width:52ch;font-size:16px;line-height:1.6;
  color:#9FB2BF;border-left:2px solid var(--teal);padding-left:16px;
}