:root{
  --ink: #0E2A3D;
  --ink-deep: #081C2B;
  --paper: #F6F3EC;
  --line: rgba(14,42,61,0.14);
  --line-light: rgba(232,241,242,0.16);
  --cyan: #4FD1C5;
  --amber: #F5A623;
  --text-dark: #16222B;
  --text-light: #E8F1F2;
  --muted: rgba(22,34,43,0.65);
  --muted-light: rgba(232,241,242,0.7);
  --display: 'Space Grotesk', sans-serif;
  --body: 'Source Serif 4', serif;
  --mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  color: var(--text-dark);
  background: var(--paper);
  line-height: 1.6;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
h1,h2,h3,.logo,.mono-tag,.eyebrow,.btn,.nav a,.step-num{font-family:var(--display);}
.eyebrow,.mono-tag,.step-num{font-family:var(--mono);}

/* faint blueprint grid over whole page */
.grid-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.35;
}

/* header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(14,42,61,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-light);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{color:var(--cyan);text-decoration:none;font-weight:700;font-size:1.1rem;letter-spacing:0.02em;}
.nav{display:flex;gap:28px;align-items:center;}
.nav a{color:var(--muted-light);text-decoration:none;font-size:0.92rem;letter-spacing:0.02em;}
.nav a:hover, .nav a:focus-visible{color:var(--text-light);}
.nav-cta{border:1px solid var(--cyan);color:var(--cyan) !important;padding:7px 14px;border-radius:2px;}
.nav-toggle{display:none;background:none;border:none;color:var(--text-light);font-size:1.4rem;cursor:pointer;}

/* hero */
.hero{padding:150px 0 100px;position:relative;z-index:1;background:var(--ink);color:var(--text-light);}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.eyebrow{color:var(--cyan);font-size:0.8rem;letter-spacing:0.08em;margin-bottom:16px;}
.eyebrow.light{color:var(--cyan);}
h1{font-size:clamp(2.1rem,4vw,3.1rem);font-weight:700;line-height:1.15;margin-bottom:20px;}
.lede{font-size:1.1rem;color:var(--muted-light);max-width:44ch;margin-bottom:32px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.btn{display:inline-block;padding:13px 24px;border-radius:2px;font-weight:500;font-size:0.95rem;text-decoration:none;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--amber);color:var(--ink-deep);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{border-color:var(--line-light);color:var(--text-light);background:transparent;}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}

/* hero SVG blueprint animation */
.hero-art svg{width:100%;height:auto;}
.draw{fill:none;stroke:var(--cyan);stroke-width:2;}
.browser-frame{stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 1.8s ease forwards;}
line.draw{stroke-dasharray:440;stroke-dashoffset:440;animation:draw 1.2s ease forwards 0.4s;}
.dot{fill:var(--cyan);stroke:none;opacity:0;animation:fadeIn 0.4s ease forwards 1.6s;}
.fill-block{fill:var(--muted-light);opacity:0;transform:scaleX(0);transform-origin:left;animation:fillIn 0.5s ease forwards;}
.b1{animation-delay:1.8s;fill:var(--cyan);}
.b2{animation-delay:2.0s;}
.b3{animation-delay:2.2s;fill:var(--amber);}
.b4{animation-delay:1.9s;}
.b5{animation-delay:2.3s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fadeIn{to{opacity:1;}}
@keyframes fillIn{to{opacity:1;transform:scaleX(1);}}

/* generic sections */
section{padding:88px 0;position:relative;z-index:1;}
h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:40px;}
h2.light{color:var(--text-light);}

/* services */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{background:#fff;border:1px solid var(--line);padding:28px;border-radius:2px;}
.mono-tag{display:inline-block;font-size:0.75rem;color:var(--ink);background:var(--cyan);padding:4px 8px;margin-bottom:14px;letter-spacing:0.05em;}
.card h3{margin-bottom:10px;font-size:1.15rem;}
.card p{color:var(--muted);font-size:0.96rem;}

/* process */
.process{background:var(--ink);color:var(--text-light);}
.process-list{list-style:none;border-left:1px dashed var(--line-light);}
.process-list li{display:flex;gap:20px;padding:22px 0 22px 28px;position:relative;}
.step-num{color:var(--amber);font-size:0.9rem;position:relative;top:2px;}
.process-list h3{font-size:1.1rem;margin-bottom:4px;}
.process-list p{color:var(--muted-light);font-size:0.95rem;}

/* work */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.work-card{background:#fff;border:1px solid var(--line);border-radius:2px;overflow:hidden;}
.mini-browser{display:flex;gap:5px;padding:10px 12px;background:var(--ink);}
.mini-browser span{width:7px;height:7px;border-radius:50%;background:var(--muted-light);}
.mini-body{padding:16px;background:#fafaf7;}
.mb-line{height:8px;background:var(--line);border-radius:2px;margin-bottom:8px;}
.mb-line.w1{width:70%;}
.mb-line.w2{width:45%;}
.mb-block{height:44px;background:var(--cyan);opacity:0.25;border-radius:2px;margin-top:10px;}
.work-card h3{padding:16px 16px 4px;font-size:1.05rem;}
.work-card p{padding:0 16px 18px;color:var(--muted);font-size:0.92rem;}
.work-note{margin-top:24px;font-size:0.85rem;color:var(--muted);font-style:italic;}

/* about */
.about{background:var(--ink);color:var(--text-light);}
.about-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;}
.about-copy{color:var(--muted-light);max-width:46ch;margin-top:16px;}
.stat-list{display:flex;flex-direction:column;gap:22px;border-left:1px solid var(--line-light);padding-left:24px;}
.stat-list strong{display:block;font-family:var(--display);color:var(--cyan);font-size:1.2rem;}
.stat-list span{color:var(--muted-light);font-size:0.9rem;}

/* contact */
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.contact-direct{margin-top:24px;color:var(--muted);}
.contact-direct a{color:var(--ink);}
.quote-form{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line);padding:28px;border-radius:2px;}
.quote-form label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:0.8rem;color:var(--muted);}
.quote-form input,.quote-form select,.quote-form textarea{
  font-family:var(--body);font-size:1rem;padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--text-dark);
}
.quote-form input:focus-visible,.quote-form select:focus-visible,.quote-form textarea:focus-visible{outline:2px solid var(--cyan);}
.form-status{font-family:var(--body);font-size:0.9rem;color:var(--cyan);min-height:1.2em;}

/* footer */
.site-footer{background:var(--ink-deep);color:var(--muted-light);padding:28px 0;font-size:0.85rem;position:relative;z-index:1;}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* responsive */
@media (max-width:860px){
  .hero-inner,.about-inner,.contact-inner{grid-template-columns:1fr;}
  .card-grid,.work-grid{grid-template-columns:1fr;}
  .nav{position:fixed;top:64px;left:0;right:0;background:var(--ink);flex-direction:column;padding:20px 24px;gap:18px;
       transform:translateY(-120%);transition:transform 0.3s ease;border-bottom:1px solid var(--line-light);}
  .nav.open{transform:translateY(0);}
  .nav-toggle{display:block;}
}

@media (prefers-reduced-motion: reduce){
  .draw,line.draw,.dot,.fill-block,.reveal{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important;}
}