/* ============================================================
   Digital Navigators — digitalnavigators.tech
   Single stylesheet. No framework, no build step.
   ============================================================ */

:root{
  --paper:#EDEFF3;
  --paper-2:#E2E6EC;
  --paper-3:#D8DDE5;
  --ink:#0E1421;
  --ink-2:#39404F;
  --muted:#697182;
  --rule:#C7CCD6;
  --accent:#1450E0;
  --accent-dark:#0D39A8;
  --accent-on-dark:#4D93FF;
  --dark:#131B2E;
  --dark-2:#222D46;
  --dark-3:#0B1120;
  --dark-ink:#F1F4FA;
  --dark-body:#A8B2C6;
  --dark-muted:#7F899E;

  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad-x:clamp(20px,6vw,100px);
  --pad-y:clamp(56px,7vw,88px);
  --rail:160px;
  --maxw:1440px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--sans);margin:0;text-wrap:balance}
p{margin:0}
ol,ul,dl,dd,dt{margin:0;padding:0}
li{list-style:none}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
strong{font-weight:600;color:var(--ink)}

/* ---------- primitives ---------- */
.mono{font-family:var(--mono)}
.lbl{
  font-family:var(--mono);
  font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.accent{color:var(--accent)}
.note{font-size:14px;color:var(--muted)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:14px;padding:12px 20px;
}
.skip:focus{left:0;text-decoration:none;color:var(--paper)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.grid{display:grid;grid-template-columns:var(--rail) 1fr}
.rail{padding-top:10px}
.col{display:flex;flex-direction:column;gap:40px;min-width:0}

.sec{padding-top:var(--pad-y);padding-bottom:var(--pad-y);border-bottom:1px solid var(--rule)}
.sec--hero{padding-top:clamp(56px,7.5vw,96px)}

.sec h2{font-size:clamp(28px,3.3vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.12;max-width:18em}
.sec h3{font-weight:600;letter-spacing:-.015em}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:16px 28px;line-height:1.2;
  transition:background .15s ease;
}
.btn:hover{text-decoration:none}
.btn--accent{background:var(--accent);color:#F7F9FC}
.btn--accent:hover{background:var(--accent-dark);color:#F7F9FC}
.btn--dark{background:var(--ink);color:var(--paper);font-size:13px;padding:10px 18px}
.btn--dark:hover{background:#000;color:var(--paper)}

.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav__inner{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-top:24px;padding-bottom:24px}
.nav__brand{display:flex;align-items:baseline;gap:12px;color:inherit}
.nav__mark{width:19px;height:19px;flex:none;align-self:center;margin-right:-2px}
.nav__brand:hover{text-decoration:none;color:inherit}
.nav__name{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.nav__place{color:var(--accent)}
.nav__links{display:flex;align-items:center;gap:32px}
.nav__links a.lbl{color:var(--ink-2)}
.nav__links a.lbl:hover{color:var(--accent);text-decoration:none}

/* ---------- hero ---------- */
.sec--hero h1{
  font-size:clamp(38px,5.4vw,78px);
  font-weight:700;line-height:1.02;letter-spacing:-.035em;
}
.sec--hero .col{gap:30px;max-width:900px}
.deck{font-size:clamp(19px,1.7vw,24px);line-height:1.45;color:var(--ink-2);max-width:30em}
.deck--sm{font-size:clamp(17px,1.4vw,19px);line-height:1.5;max-width:44em}

.stats{
  display:flex;flex-wrap:wrap;gap:24px 0;
  border-top:1px solid var(--rule);padding-top:20px;margin-top:8px;
}
.stats>div{flex:1 1 140px}
.stats dd{
  font-family:var(--sans);font-size:26px;font-weight:600;
  letter-spacing:-.02em;margin-top:6px;
}

/* ---------- cards ---------- */
.cards{display:grid;gap:40px}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--top{border-top:1px solid var(--rule);padding-top:32px;gap:32px}
.card{display:flex;flex-direction:column;gap:8px}
.card h3{font-size:17px}
.card p{font-size:15px;color:var(--ink-2)}
.card--rule{border-top:2px solid var(--ink);padding-top:18px;gap:12px}
.card__viz{height:52px;display:flex;align-items:flex-end;color:var(--accent);margin-bottom:4px}
.card__viz svg{display:block}
.bars{display:flex;align-items:flex-end;gap:5px;height:52px}
.bars i{display:block;width:11px;background:var(--rule)}
.bars i:nth-child(3){background:#A9B2C2}
.bars i:nth-child(4){background:#5C6B86}
.bars i:last-child{background:var(--accent)}
.card--rule h3{font-size:20px}
.card--rule p{font-size:16px}

.pull{
  background:var(--paper-2);
  padding:28px 32px;
  border-left:3px solid var(--accent);
  max-width:46em;
}
.pull p{font-size:18px}

/* ---------- dark sections ---------- */
.sec--dark{
  background:var(--dark);
  color:#E9EDF4;
  border-bottom:none;
}
.sec--dark h2{color:var(--dark-ink)}
.sec--dark h3{color:var(--dark-ink)}
.sec--dark .rail{color:var(--dark-muted)}
.sec--dark p{color:var(--dark-body)}
.sec--dark strong{color:var(--dark-ink)}
.sec--dark .accent{color:var(--accent-on-dark)}
.sec--dark a{color:var(--accent-on-dark)}
.sec--dark a:hover{color:#8FBAFF}
.sec--dark .steps__n{color:var(--accent-on-dark)}
.sec--dark .ico{stroke:var(--accent-on-dark)}

/* steps */
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--dark-2);
}
.steps>li{
  background:var(--dark);
  padding:28px 26px 32px;
  display:flex;flex-direction:column;gap:14px;
}
.steps__n{
  font-size:34px;font-weight:600;color:var(--accent);letter-spacing:-.04em;line-height:1;
}
.steps h3{font-size:19px}
.steps p{font-size:15px;line-height:1.55}

.paths{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
  border-top:1px solid var(--dark-2);padding-top:26px;
  font-size:13px;color:var(--dark-muted);
}
.paths span+span::before{content:"\2022";color:#39435C;margin-right:18px}

/* ---------- what we build ---------- */
.matrix{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.matrix article{background:var(--paper);padding:26px 28px;display:flex;flex-direction:column;gap:10px}
.matrix h3{display:flex;align-items:center;gap:10px;font-size:18px}
.matrix p{font-size:15px;color:var(--ink-2)}
.ico{
  width:18px;height:18px;flex:none;
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.also{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.also .mono{font-size:13px;color:var(--ink-2)}

/* ---------- work ---------- */
.case{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:start}
.case>div:first-child{display:flex;flex-direction:column;gap:18px}
.case h2{font-size:clamp(26px,2.9vw,36px);line-height:1.14}
.case p{font-size:17px;color:var(--ink-2)}
.placeholder{
  font-size:13px;color:var(--muted);
  background:var(--paper-2);padding:10px 14px;border-left:2px solid var(--accent);
}
.spec{border:1px solid var(--rule)}
.spec>div{padding:18px 22px;border-bottom:1px solid var(--rule)}
.spec>div:last-child{border-bottom:none}
.spec dd{font-size:15px;margin-top:5px}

.proof{display:flex;align-items:center;gap:40px;background:var(--paper-2);padding:26px 32px;flex-wrap:wrap}
.proof__score{display:flex;flex-direction:column;padding-right:40px;border-right:1px solid var(--rule)}
.proof__score strong{font-family:var(--sans);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--accent)}
.proof>p:not(.proof__score){font-size:16px;color:var(--ink-2);max-width:44em}

/* ---------- team ---------- */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.person{display:flex;gap:24px;align-items:flex-start}
.person>div:last-child{display:flex;flex-direction:column;gap:10px}
.person h3{font-size:22px;letter-spacing:-.02em}
.person p{font-size:15px;color:var(--ink-2);line-height:1.55}
.person a{font-size:13px}
.person__photo{
  width:132px;height:168px;flex:none;
  background:var(--paper-3);border:1px solid var(--rule);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.person__photo .mono{font-size:10px;color:#8891A3;letter-spacing:.1em}
.pair{border-top:1px solid var(--rule);padding-top:28px;max-width:52em;font-size:18px;line-height:1.55}

/* ---------- contact ---------- */
.sec--contact{padding-top:clamp(56px,7.5vw,96px)}
.h2--xl{
  font-size:clamp(32px,4.2vw,56px)!important;
  font-weight:700;letter-spacing:-.032em;line-height:1.05;max-width:15em;
}
.sec--contact .deck{color:var(--dark-body);max-width:34em}
.sec--contact .note{color:var(--dark-body)}
.meta{
  display:flex;flex-wrap:wrap;gap:24px 64px;
  border-top:1px solid var(--dark-2);padding-top:30px;margin-top:6px;
}
.meta dd{font-size:15px;margin-top:6px;color:#E9EDF4}
.meta .lbl{color:var(--dark-muted)}

/* ---------- footer ---------- */
.foot{background:var(--dark-3)}
.foot__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;padding-bottom:24px}
.foot p{font-size:12px;color:#6C778C}
.foot__reg{color:#4A5468}


/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq article{
  display:grid;grid-template-columns:1fr 1.35fr;gap:48px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--rule);
}
.faq h3{font-size:19px;letter-spacing:-.015em;max-width:15em;text-wrap:balance}
.faq p{font-size:16px;color:var(--ink-2)}

@media (max-width:860px){
  .faq article{grid-template-columns:1fr;gap:10px;padding:22px 0}
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:1080px){
  :root{--rail:120px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case{grid-template-columns:1fr;gap:36px}
  .proof__score{border-right:none;padding-right:0}
}

@media (max-width:860px){
  .cards--3{grid-template-columns:1fr;gap:28px}
  .matrix{grid-template-columns:1fr}
  .people{grid-template-columns:1fr;gap:32px}
  .nav__links a.lbl{display:none}
  .nav__links{gap:16px}
}

@media (max-width:640px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr;gap:20px}
  .rail{padding-top:0}
  .rail br{display:none}
  .nav__name{font-size:17px}
  .nav__inner{gap:10px 16px}
  .btn--dark{padding:9px 14px;font-size:12px}
  .col{gap:30px}
  .steps{grid-template-columns:1fr;gap:1px}
  .pull{padding:22px 24px}
  .proof{gap:20px;padding:22px 24px}
  .proof__score{border-right:none;padding-right:0}
  .person{flex-direction:column;gap:16px}
  .person__photo{width:150px;height:190px}
  .btn{padding:14px 22px;font-size:14px}
  .cta-row{gap:14px}
  .stats{gap:20px 0}
  .stats>div{flex:1 1 45%}
  .meta{gap:20px 40px}
  .foot__inner{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- print / motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ---------- contact facts ---------- */
.facts{border:1px solid var(--dark-2);width:100%;max-width:560px}
.facts>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:15px 22px;border-bottom:1px solid var(--dark-2);
}
.facts>div:last-child{border-bottom:none}
.facts dt{flex:none}
.facts dd{font-family:var(--mono);font-size:14px;color:var(--dark-ink);margin:0;text-align:right}
@media (max-width:640px){
  .facts>div{padding:13px 16px;gap:14px}
  .facts dd{font-size:13px}
}