/* ============================================================
   Emmanuel Thompson — AI Automation & Workflow Engineer
   Design system: graphite / slate / signal-teal
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
:root{
  --ink:#0B0F14;        /* primary dark bg */
  --ink-2:#111823;      /* raised dark surface */
  --ink-3:#182130;      /* card on dark */
  --line-dk:rgba(226,232,240,.10);
  --paper:#F4F6F8;       /* light bg — cool, not cream */
  --paper-2:#EAEEF2;
  --ink-text:#0B0F14;
  --slate:#5B6B7D;       /* muted text on light */
  --slate-dk:#8A97A8;    /* muted text on dark */
  --line:#DCE2E8;
  --signal:#2DD4BF;      /* teal accent — "system online" */
  --signal-dim:#1AA391;
  --amber:#F2A65A;       /* secondary accent — warnings/AI */
  --white:#FFFFFF;
  --disp:'Space Grotesk',-apple-system,sans-serif;
  --body:'Inter',-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1180px;
}
body{
  background:var(--paper);color:var(--ink-text);
  font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.pg{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-dim);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--signal-dim);}
.eyebrow.on-dark{color:var(--signal);}
.eyebrow.on-dark::before{background:var(--signal);}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.01em;}
.sh{font-size:clamp(26px,3.4vw,42px);font-weight:600;line-height:1.15;}
.sh-w{color:var(--white);}
.sub{font-size:16px;color:var(--slate);max-width:60ch;margin-top:14px;line-height:1.7;}
.sub-w{color:rgba(255,255,255,.55);}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:64px;
  display:flex;align-items:center;background:rgba(11,15,20,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dk);}
.nav-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;}
.nav-logo{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--white);}
.nav-logo span{color:var(--signal);}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:13px;color:rgba(255,255,255,.6);transition:color .2s;}
.nav-links a:hover{color:var(--white);}
.nav-cta{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);background:var(--signal);padding:9px 18px;transition:background .2s;
}
.nav-cta:hover{background:#5EEBD9;}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.ham span{width:20px;height:1.5px;background:#fff;}
.mob{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(11,15,20,.98);
  padding:32px 24px;z-index:190;flex-direction:column;}
.mob.open{display:flex;}
.mob a{font-size:19px;color:rgba(255,255,255,.82);padding:16px 0;border-bottom:1px solid var(--line-dk);}

/* ── HERO ── */
#hero{background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 70%,#0E1A22 100%);
  padding:140px 0 88px;position:relative;overflow:hidden;}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
h1.hname{font-size:clamp(38px,5vw,60px);font-weight:700;line-height:1.05;color:var(--white);margin-bottom:20px;}
h1.hname .hi{color:var(--signal);}
.hero-vp{font-size:clamp(16px,1.6vw,18px);color:rgba(255,255,255,.6);max-width:52ch;margin-bottom:34px;}
.hero-vp b{color:rgba(255,255,255,.88);font-weight:600;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
.btn-p{display:inline-flex;align-items:center;height:48px;background:var(--signal);color:var(--ink);
  padding:0 26px;font-family:var(--mono);font-size:13px;font-weight:600;transition:background .2s,transform .15s;}
.btn-p:hover{background:#5EEBD9;transform:translateY(-1px);}
.btn-s{display:inline-flex;align-items:center;height:48px;border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.75);padding:0 26px;font-family:var(--mono);font-size:13px;transition:.2s;}
.btn-s:hover{border-color:rgba(255,255,255,.5);color:#fff;}
.hero-stack{display:flex;flex-wrap:wrap;gap:8px;}
.stk{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.4);border:1px solid var(--line-dk);
  padding:5px 10px;}

/* Signature: animated node chain */
.chain-wrap{background:var(--ink-3);border:1px solid var(--line-dk);padding:26px 22px;}
.chain-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-dk);margin-bottom:18px;}
.chain{display:flex;flex-direction:column;gap:0;}
.cnode{display:flex;align-items:center;gap:14px;padding:12px 0;position:relative;}
.cdot{width:11px;height:11px;border-radius:50%;background:var(--ink);border:2px solid var(--signal-dim);
  flex-shrink:0;position:relative;z-index:2;animation:pulse 2.8s ease-in-out infinite;}
.cnode:nth-child(1) .cdot{animation-delay:0s;}
.cnode:nth-child(2) .cdot{animation-delay:.4s;}
.cnode:nth-child(3) .cdot{animation-delay:.8s;}
.cnode:nth-child(4) .cdot{animation-delay:1.2s;}
.cnode:nth-child(5) .cdot{animation-delay:1.6s;}
@keyframes pulse{
  0%,100%{background:var(--ink);border-color:var(--signal-dim);box-shadow:0 0 0 0 rgba(45,212,191,0);}
  35%{background:var(--signal);border-color:var(--signal);box-shadow:0 0 0 5px rgba(45,212,191,.14);}
}
.cnode:not(:last-child)::after{content:'';position:absolute;left:5px;top:28px;width:1px;height:calc(100% - 4px);
  background:var(--line-dk);z-index:1;}
.clabel{font-size:13px;color:rgba(255,255,255,.75);font-weight:500;}
.cnote{font-family:var(--mono);font-size:10px;color:var(--slate-dk);margin-top:2px;}
@media (prefers-reduced-motion:reduce){.cdot{animation:none;background:var(--signal-dim);}}

/* ── SECTIONS ── */
.sec{padding:88px 0;}
.sec-dk{background:var(--ink);}
.sec-alt{background:var(--paper-2);}
.sec-d{border-bottom:1px solid var(--line);}
.sec-ddk{border-bottom:1px solid var(--line-dk);}
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.rv.on{opacity:1;transform:translateY(0);}

/* ── PROOF STRIP ── */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);}
.pstat{background:var(--ink);padding:26px 20px;}
.pnum{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--signal);}
.plabel{font-family:var(--mono);font-size:11px;color:var(--slate-dk);margin-top:4px;}

/* ── CASE STUDY CARDS ── */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:44px;}
.cs-card{background:var(--white);padding:30px 26px;transition:background .2s;display:flex;flex-direction:column;}
.cs-card:hover{background:var(--paper-2);}
.cs-num{font-family:var(--mono);font-size:11px;color:var(--signal-dim);font-weight:600;margin-bottom:12px;}
.cs-t{font-family:var(--disp);font-size:19px;font-weight:600;margin-bottom:10px;line-height:1.25;}
.cs-d{font-size:13.5px;color:var(--slate);line-height:1.65;margin-bottom:16px;flex-grow:1;}
.cs-stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.cs-tg{font-family:var(--mono);font-size:10px;color:var(--slate);border:1px solid var(--line);padding:3px 8px;}
.cs-link{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--signal-dim);
  display:inline-flex;align-items:center;gap:6px;transition:gap .2s;}
.cs-card:hover .cs-link{gap:10px;}

/* ── PRINCIPLES / CHECKLIST ── */
.prin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);margin-top:40px;}
.prin{background:var(--ink-2);padding:24px 24px;}
.prin-t{font-size:14.5px;font-weight:600;color:var(--white);margin-bottom:6px;display:flex;gap:10px;align-items:flex-start;}
.prin-t::before{content:'✓';color:var(--signal);font-family:var(--mono);flex-shrink:0;}
.prin-d{font-size:13px;color:rgba(255,255,255,.45);line-height:1.6;margin-left:24px;}

/* ── PACKAGES TEASER ── */
.pkg-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:44px;}
.pkgt{background:var(--white);padding:28px 24px;text-align:center;}
.pkgt.mid{background:var(--ink);}
.pkgt.mid .pt-t,.pkgt.mid .pt-p{color:var(--white);}
.pkgt.mid .pt-l{color:var(--signal);}
.pt-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);}
.pt-t{font-family:var(--disp);font-size:17px;font-weight:600;margin:8px 0 4px;}
.pt-p{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--signal-dim);}

/* ── FOOTER ── */
footer{background:var(--ink);padding:56px 0 28px;}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:32px;
  border-bottom:1px solid var(--line-dk);}
.ft-name{font-family:var(--disp);color:var(--white);font-size:17px;font-weight:600;margin-bottom:6px;}
.ft-role{font-size:13px;color:rgba(255,255,255,.4);}
.ft-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate-dk);margin-bottom:14px;}
.ft-col a{display:block;font-size:13px;color:rgba(255,255,255,.55);padding:6px 0;transition:color .2s;}
.ft-col a:hover{color:var(--signal);}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;}
.ft-copy{font-size:12px;color:rgba(255,255,255,.3);}
.ft-alt{font-size:12px;color:rgba(255,255,255,.3);}
.ft-alt a{color:var(--signal-dim);}

@media(max-width:860px){
  .hero-in{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .ham{display:flex;}
  .proof{grid-template-columns:repeat(2,1fr);}
  .prin-grid{grid-template-columns:1fr;}
  .pkg-teaser{grid-template-columns:1fr;}
  .ft-grid{grid-template-columns:1fr;gap:28px;}
}

/* ── CASE STUDY PRICE TAG ── */
.cs-price{font-family:var(--mono);font-size:11px;color:var(--signal-dim);font-weight:600;margin-bottom:6px;}

/* ── STACK SECTION ── */
.stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:40px;}
.stack-cat h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-dk);margin-bottom:12px;}
.stack-cat .stk{color:var(--slate);border-color:var(--line);}

/* ── EXPERIENCE SECTION ── */
.exp-item{border-left:2px solid var(--signal-dim);padding-left:24px;margin-top:8px;}
.exp-date{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.exp-role{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--white);}
.exp-org{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:14px;}
.exp-list{list-style:disc;padding-left:20px;}
.exp-list li{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:8px;}

/* ── TESTIMONIALS ── */
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:44px;}
.test-card{background:var(--white);padding:30px 26px;display:flex;flex-direction:column;}
.test-org{font-family:var(--mono);font-size:11px;color:var(--signal-dim);font-weight:600;margin-bottom:4px;}
.test-proj{font-size:13px;color:var(--slate);margin-bottom:16px;}
.test-q{font-size:14.5px;color:var(--ink-text);line-height:1.7;font-style:italic;margin-bottom:16px;flex-grow:1;}
.test-a{font-size:13px;font-weight:600;color:var(--ink-text);}
.test-stats{display:flex;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap;}
.test-stat{font-family:var(--mono);font-size:11px;color:var(--slate);}
.test-stat b{color:var(--signal-dim);font-size:13px;}

/* ── HOW IT WORKS ── */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:44px;}
.how-step{background:var(--white);padding:30px 26px;}
.how-num{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--signal-dim);margin-bottom:10px;}
.how-t{font-family:var(--disp);font-size:16px;font-weight:600;margin-bottom:8px;}
.how-d{font-size:13.5px;color:var(--slate);line-height:1.65;}

/* ── CONTACT FORM ── */
.cform{margin-top:32px;display:flex;flex-direction:column;gap:18px;max-width:480px;}
.cform .fgrp{display:flex;flex-direction:column;gap:6px;}
.cform label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);}
.cform input,.cform select,.cform textarea{
  font-family:var(--body);font-size:14px;color:var(--ink-text);background:var(--white);
  border:1px solid var(--line);padding:12px 14px;width:100%;transition:border-color .2s;
}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--signal-dim);}
.cform textarea{resize:vertical;min-height:110px;}
.cform button{align-self:flex-start;border:none;cursor:pointer;}
.hp-field{position:absolute;left:-9999px;top:-9999px;}
.form-note{font-size:12px;color:var(--slate);margin-top:8px;}
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
@media(max-width:860px){
  .how-grid{grid-template-columns:1fr;}
  .contact-split{grid-template-columns:1fr;gap:36px;}
}