/* ═══════════════════════════════════════════════════════════
   Adventurous Programmer — adventurousprogrammer.com
   Palette + type carried directly from the printed card.
   Deliberately single-theme (dark). Every colour is explicit.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#0A0D10;
  --bg-2:#0E1319;
  --bg-3:#121922;
  --line:#1A222A;
  --line-2:#26313B;
  --ink:#E7ECF2;
  --ink-2:#A9BAC8;
  --ink-3:#798794;
  --ink-4:#727F8A;
  --acc:#4ADE80;
  --acc-dim:#2E8F55;
  --acc-glow:rgba(74,222,128,.13);

  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --pad:clamp(20px,5vw,64px);
  --max:1080px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

a{color:inherit}
.mono{font-family:var(--mono)}
.dim{color:var(--ink-4)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--acc);color:#06140C;padding:10px 16px;
  font-family:var(--mono);font-size:13px;font-weight:500;
}
.skip:focus{left:12px;top:12px}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

/* ── accent tick (the card's mark) ───────────────────────── */
.tick{width:7px;height:7px;background:var(--acc);flex:none;display:inline-block}

/* ── scroll rail ─────────────────────────────────────────── */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:2px;z-index:60;
  background:var(--line);pointer-events:none;
}
.rail span{
  display:block;width:100%;height:0;background:var(--acc);
  box-shadow:0 0 12px var(--acc-glow);
}
@media (max-width:720px){.rail{display:none}}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:16px var(--pad);
  background:rgba(10,13,16,0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
  opacity:0;
}
.nav.lit{
  background:rgba(10,13,16,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav.shown{opacity:1;transition:opacity .6s var(--ease) .1s,background .35s var(--ease),border-color .35s var(--ease)}

.brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);white-space:nowrap;
}
.brand b{color:var(--acc);font-weight:700}
.brand-t{transition:opacity .2s var(--ease)}
.brand:hover .brand-t{opacity:.72}

.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:lowercase;
  color:var(--ink-3);text-decoration:none;position:relative;padding:3px 0;
  transition:color .2s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--acc);
  transition:right .28s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
@media (max-width:820px){.nav-links{display:none}}
@media (max-width:820px){.nav .btn-sm{margin-left:auto}}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  --bt:#06140C;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;color:var(--bt);background:var(--acc);
  padding:12px 20px;border:1px solid var(--acc);border-radius:3px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--ease),box-shadow .28s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#6BF29B;
  transform:translateY(101%);transition:transform .34s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(74,222,128,.55)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 15px;font-size:12px}
.btn-lg{padding:16px 26px;font-size:15px}

.btn-ghost{
  --bt:var(--ink);
  background:transparent;border-color:var(--line-2);color:var(--ink-2);
}
.btn-ghost::before{background:var(--bg-3)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-4);box-shadow:none}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--pad) 90px;
  overflow:hidden;
}
.field{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;
}
.hero::after{ /* keeps type readable on the left, lets the field breathe on the right */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(101deg, rgba(10,13,16,.95) 0%, rgba(10,13,16,.80) 32%, rgba(10,13,16,.26) 64%, rgba(10,13,16,.06) 100%),
    linear-gradient(to bottom, rgba(10,13,16,.88) 0%, rgba(10,13,16,0) 20%, rgba(10,13,16,0) 76%, rgba(10,13,16,.8) 100%);
}
@media (max-width:820px){
  .hero::after{
    background:
      linear-gradient(to bottom, rgba(10,13,16,.9) 0%, rgba(10,13,16,.55) 30%, rgba(10,13,16,.55) 70%, rgba(10,13,16,.9) 100%);
  }
}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:26px;
}
.hero-h{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(30px,7.4vw,68px);line-height:1.04;letter-spacing:-.035em;
  color:#fff;display:flex;align-items:center;flex-wrap:wrap;gap:.14em;
}
.hero-h .chev{color:var(--acc);font-weight:700}
.cur{
  width:.34ch;height:.8em;background:var(--acc);display:inline-block;
  animation:blink 1.1s steps(1,end) infinite;
  box-shadow:0 0 16px var(--acc-glow);
}
@keyframes blink{0%,52%{opacity:1}52.01%,100%{opacity:0}}
.cur.done{animation:blink 1.1s steps(1,end) infinite}

.hero-role{
  font-family:var(--mono);font-size:clamp(11px,1.9vw,14px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
  margin-top:20px;
}
.hero-lede{
  margin-top:30px;max-width:60ch;
  font-size:clamp(15px,1.9vw,18.5px);color:var(--ink-2);line-height:1.72;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

.scroll-cue{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin:64px auto 0;
  display:flex;align-items:center;gap:12px;
}
.scroll-line{display:block;width:44px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-line::after{
  content:"";position:absolute;inset:0;background:var(--acc);
  animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.scroll-t{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}
@media (max-height:680px){.scroll-cue{display:none}}

/* ── section shell ───────────────────────────────────────── */
.sec{
  max-width:var(--max);margin:0 auto;
  padding:clamp(72px,11vw,132px) var(--pad);
  border-top:1px solid var(--line);
}
.sec:first-of-type{border-top:none}
.sec-head{margin-bottom:clamp(38px,5vw,58px)}
.path{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;
  color:var(--acc-dim);margin-bottom:16px;
}
.sec-h{
  font-size:clamp(26px,4.2vw,42px);font-weight:600;letter-spacing:-.028em;
  line-height:1.12;color:#fff;text-wrap:balance;
}
.sec-sub{margin-top:16px;max-width:58ch;color:var(--ink-3);font-size:clamp(14px,1.7vw,17px)}

/* ── services ────────────────────────────────────────────── */
.svc-grid{
  list-style:none;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);
  grid-template-columns:1fr;
}
@media (min-width:660px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.svc-grid{grid-template-columns:1fr 1fr 1fr}}

.svc{
  background:var(--bg);padding:26px 24px 28px;position:relative;
  transition:background .3s var(--ease);
}
.svc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);
  transform:scaleY(0);transform-origin:top;transition:transform .38s var(--ease);
}
.svc:hover{background:var(--bg-2)}
.svc:hover::before{transform:scaleY(1)}
.svc-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-4);
  display:block;margin-bottom:14px;
}
.svc h3{font-size:17px;font-weight:600;letter-spacing:-.015em;color:#fff;margin-bottom:9px}
.svc p{font-size:14.5px;color:var(--ink-3);line-height:1.68}
/* the outcome-based tile is the differentiator — let it sit slightly forward */
.svc-hero{background:var(--bg-2)}
.svc-hero::before{transform:scaleY(1)}
.svc-hero h3{color:var(--acc)}
.svc-hero p{color:var(--ink-2)}
.svc-foot{
  margin-top:22px;font-size:12.5px;color:var(--ink-3);line-height:1.85;
  letter-spacing:.01em;max-width:64ch;
}

/* ── work ────────────────────────────────────────────────── */
.work-list{list-style:none}
.work{
  display:grid;grid-template-columns:1fr;gap:14px;
  padding:30px 0 32px;border-top:1px solid var(--line);
  position:relative;
}
.work:first-child{border-top:none;padding-top:0}
@media (min-width:820px){
  .work{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:44px;padding:34px 0 36px}
}
.work::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--acc);
  transition:width .55s var(--ease);
}
.work:hover::after{width:100%}
.work:first-child::after{display:none}

.co{
  font-size:clamp(21px,3.1vw,30px);font-weight:600;letter-spacing:-.028em;
  color:#fff;line-height:1.12;
  transition:transform .38s var(--ease);
}
@media (min-width:820px){.work:hover .co{transform:translateX(7px)}}
.co .amp{color:var(--ink-4);font-weight:400;margin:0 2px}
.role{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  color:var(--acc-dim);margin-top:9px;line-height:1.6;
}
.work-r p{color:var(--ink-2);font-size:15px;line-height:1.72;max-width:56ch}
.stack{
  margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:var(--ink-4) !important;
}

/* ── method ──────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.steps{grid-template-columns:1fr 1fr}}
.step{background:var(--bg);padding:30px 28px 32px;position:relative;transition:background .3s var(--ease)}
.step:hover{background:var(--bg-2)}
.step-k{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--acc-dim);
  display:block;margin-bottom:16px;
}
.step h3{font-size:18px;font-weight:600;letter-spacing:-.018em;color:#fff;margin-bottom:11px}
.step p{font-size:14.5px;color:var(--ink-3);line-height:1.72;max-width:48ch}

/* ── contact ─────────────────────────────────────────────── */
.contact{text-align:left}
.contact-in{max-width:60ch}
.contact-h{
  font-size:clamp(30px,5.6vw,54px);font-weight:600;letter-spacing:-.032em;
  line-height:1.08;color:#fff;text-wrap:balance;
}
.contact-p{margin-top:20px;color:var(--ink-2);font-size:clamp(15px,1.9vw,18px);line-height:1.7}
.contact .btn-lg{margin-top:34px;max-width:100%;word-break:break-all}
.contact-alt{
  margin-top:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink-4);
}
.contact-alt a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .2s var(--ease),border-color .2s var(--ease)}
.contact-alt a:hover{color:var(--acc);border-color:var(--acc-dim)}

/* ── footer ──────────────────────────────────────────────── */
.foot{
  max-width:var(--max);margin:0 auto;
  padding:26px var(--pad) 46px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:11.5px;letter-spacing:.09em;color:var(--ink-4);
}

/* ── reveal ──────────────────────────────────────────────── */
.reveal,.r{opacity:0;transform:translateY(16px)}
.reveal.in,.r.in{
  opacity:1;transform:none;
  transition:opacity .78s var(--ease),transform .78s var(--ease);
}
.reveal[data-d="1"].in{transition-delay:.08s}
.reveal[data-d="2"].in{transition-delay:.16s}
.reveal[data-d="3"].in{transition-delay:.24s}
.reveal[data-d="4"].in{transition-delay:.34s}
@media (prefers-reduced-motion:reduce){
  .reveal,.r{opacity:1;transform:none}
}
.no-js .reveal,.no-js .r{opacity:1;transform:none}