@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- brand tokens (single deliberate dark world — gold + charcoal) ---------- */
:root{
  --bg:#161313;
  --bg-2:#1c1818;
  --surface:#201b1b;
  --surface-2:#2a2424;
  --border:rgba(245,242,238,.12);
  --border-strong:rgba(245,242,238,.22);
  --text:#f5f2ee;
  --text-dim:rgba(245,242,238,.68);
  --text-faint:rgba(245,242,238,.45);
  --gold:#de972f;
  --gold-2:#f0ac47;
  --gold-soft:rgba(222,151,47,.15);
  --gold-line:rgba(222,151,47,.5);
  --shadow:rgba(8,6,5,.5);

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --fs-h1: clamp(2.3rem, 5vw, 4rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.3rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.05rem, 1.6vw, 1.2rem);
  --gutter: max(20px, 5vw);
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 90% -10%, var(--gold-soft), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  padding-inline:var(--gutter);
}
img{max-width:100%;}
[hidden]{display:none!important;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; line-height:1.1; font-weight:600;}
p{margin:0;}
ul{margin:0; padding:0;}
:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px; border-radius:4px;}
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint);
}
.wrap{max-width:1180px; margin-inline:auto;}
section{padding-block:clamp(44px,7vw,80px);}
.tnums{font-variant-numeric:tabular-nums;}

/* ---------- nav ---------- */
nav.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:14px;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand img.brand-lockup{display:block; height:32px; width:auto;}
.nav-links{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; font-size:.92rem; color:var(--text-dim);}
.nav-links > li{position:relative;}
.nav-links > li > a, .nav-links > li > button.nav-top-link{
  display:inline-flex; align-items:center; gap:5px; text-decoration:none; padding:10px 12px; border-radius:8px;
  background:none; border:none; font:inherit; color:inherit; cursor:pointer;
}
.nav-links > li > a:hover, .nav-links > li > button.nav-top-link:hover, .nav-links > li.open > button.nav-top-link{color:var(--text); background:var(--surface);}
.nav-links .caret{width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7;}
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:8px;
  box-shadow:0 24px 50px -20px var(--shadow);
  display:none; flex-direction:column; gap:2px;
}
.nav-links li.open .dropdown{display:flex;}
.dropdown a{display:block; padding:10px 12px; border-radius:8px; text-decoration:none; font-size:.9rem; color:var(--text-dim);}
.dropdown a:hover{background:var(--surface-2); color:var(--text);}
.dropdown a .d-sub{display:block; font-size:.78rem; color:var(--text-faint); margin-top:2px;}
.nav-right{display:flex; align-items:center; gap:14px;}
.menu-toggle{display:none; flex:0 0 auto; background:none; border:1px solid var(--border-strong); border-radius:8px; padding:8px 10px; color:var(--text);}
.nav-links li.nav-cta{display:none;}
@media (max-width:860px){
  .nav-links{display:none;}
  .menu-toggle{display:inline-flex;}
  nav.top.mobile-open .nav-links{
    display:flex; flex-direction:column; align-items:stretch; position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--border); padding:10px var(--gutter) 18px; gap:2px;
  }
  nav.top.mobile-open .dropdown{position:static; box-shadow:none; margin:0 0 6px 14px; display:none;}
  nav.top.mobile-open li.open .dropdown{display:flex;}
  nav.top.mobile-open .nav-links li.nav-cta{display:block; margin-top:8px;}
  nav.top.mobile-open .nav-links li.nav-cta a{background:var(--gold); color:#1b1300; border-radius:999px; text-align:center; font-weight:600;}
}
@media (max-width:640px){
  .brand .brand-word{font-size:1.05rem;}
  .nav-right .btn-primary{display:none;}
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  padding:12px 22px; border-radius:999px; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--gold); color:#1b1300;}
.btn-primary:hover{background:var(--gold-2);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--gold-line); color:var(--gold-2);}

/* ---------- breadcrumb / page hero ---------- */
.page-hero{padding-top:clamp(40px,7vw,72px);}
.breadcrumb{font-family:var(--font-mono); font-size:.78rem; color:var(--text-faint); display:flex; gap:8px; align-items:center;}
.breadcrumb a{text-decoration:none; color:var(--text-faint);}
.breadcrumb a:hover{color:var(--gold-2);}
.page-hero h1{margin-top:14px;}
.page-hero p.lead{margin-top:18px; font-size:var(--fs-lead); color:var(--text-dim); max-width:60ch;}
.page-hero .hero-actions{display:flex; gap:16px; margin-top:28px; flex-wrap:wrap;}

/* ---------- hero (home) ---------- */
header.hero{padding-top:clamp(48px,8vw,96px); padding-bottom:0;}
.hero-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,5vw,60px); align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero-copy h1{margin-top:14px;}
.hero-copy h1 em{font-style:italic; font-weight:500; color:var(--gold-2);}
.hero-copy p.lead{margin-top:20px; font-size:var(--fs-lead); color:var(--text-dim); max-width:46ch;}
.hero-actions{display:flex; align-items:center; gap:22px; margin-top:32px; flex-wrap:wrap;}
.hero-actions .link-more{font-size:.9rem; color:var(--text-dim); text-decoration:none; border-bottom:1px solid var(--border-strong);}
.hero-actions .link-more:hover{color:var(--gold-2); border-color:var(--gold-line);}

.console{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:20px 22px; box-shadow:0 24px 60px -30px var(--shadow);
}
.console-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.console-dots{display:flex; gap:6px;}
.console-dots span{width:9px; height:9px; border-radius:50%; background:var(--border-strong); display:block;}
.console-log{font-family:var(--font-mono); font-size:.8rem; line-height:1.9; color:var(--text-dim); min-height:9.5em;}
.console-log .t{color:var(--text-faint); margin-right:.6em;}
.console-log .a{color:var(--gold-2); margin-right:.6em;}
.console-log .ok{color:var(--gold);}
.console-log .cursor{display:inline-block; width:.55em; height:1em; background:var(--gold-2); vertical-align:-2px; animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ .console-log .cursor{animation:none;} }

.ticker{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-top:clamp(40px,7vw,72px); padding-block:16px;
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline;
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-faint);
}
.ticker b{color:var(--text-dim); font-weight:500;}

/* ---------- section headers ---------- */
.sec-head{max-width:60ch; margin-bottom:clamp(30px,5vw,48px);}
.sec-head .row{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;}
.sec-head h2{margin-top:10px;}
.sec-head p{margin-top:14px; color:var(--text-dim); font-size:var(--fs-lead);}
.sec-head .see-all{font-size:.88rem; text-decoration:none; color:var(--text-dim); border-bottom:1px solid var(--border-strong); white-space:nowrap;}
.sec-head .see-all:hover{color:var(--gold-2); border-color:var(--gold-line);}

/* ---------- service cards (grid) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden;}
@media (max-width:900px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-grid{grid-template-columns:1fr;} }
.svc{background:var(--surface); padding:30px 26px; display:flex; flex-direction:column; gap:14px; min-height:200px; text-decoration:none; color:inherit;}
.svc:hover{background:var(--surface-2);}
.svc .mark{width:38px; height:38px;}
.svc h3{font-size:var(--fs-h3);}
.svc p{color:var(--text-dim); font-size:.94rem;}
.svc .more{margin-top:auto; font-family:var(--font-mono); font-size:.76rem; color:var(--gold-2);}

/* ---------- industries ---------- */
.pill-row{display:flex; flex-wrap:wrap; gap:12px;}
.pill{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em;
  border:1px solid var(--gold-line); border-radius:999px; padding:9px 18px;
  color:var(--gold-2); background:var(--gold-soft);
}

/* ---------- process ---------- */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:860px){ .process{grid-template-columns:1fr;} }
.step{border-top:2px solid var(--border-strong); padding-top:18px;}
.step .num{font-family:var(--font-mono); font-size:.8rem; color:var(--gold);}
.step h3{margin-top:10px; font-size:1.35rem;}
.step p{margin-top:10px; color:var(--text-dim); font-size:.95rem;}

/* ---------- global / ruler ---------- */
.ruler-panel{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:clamp(22px,4vw,40px); overflow:hidden;}
.ruler{position:relative; height:150px; margin-top:44px;}
.ruler-line{position:absolute; left:0; right:0; top:70px; height:1px; background:var(--border-strong);}
.pin{position:absolute; top:70px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; width:104px;}
.pin.above{flex-direction:column-reverse; top:18px;}
.pin .dot{width:9px; height:9px; border-radius:50%; background:var(--gold-2); border:2px solid var(--bg); box-shadow:0 0 0 1px var(--gold-line); margin-top:-5px;}
.pin .city{font-size:.78rem; font-weight:600; text-align:center;}
.pin .cc{font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint);}
.pin .time{font-family:var(--font-mono); font-size:.86rem; margin-top:2px; color:var(--gold);}
.grid-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 28px; margin-top:16px; padding-top:28px; border-top:1px solid var(--border);}
@media (max-width:760px){ .grid-facts{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .grid-facts{grid-template-columns:1fr;} }
.fact dt{font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em;}
.fact dd{margin:6px 0 0; font-family:var(--font-display); font-size:1.5rem;}
@media (max-width:700px){
  .ruler{height:auto; display:flex; flex-wrap:wrap; gap:22px 10px; justify-content:flex-start;}
  .ruler-line{display:none;}
  .pin{position:static; transform:none; flex:0 0 30%; width:auto;}
  .pin.above{flex-direction:column;}
}

/* ---------- service detail page components ---------- */
.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden;}
@media (max-width:700px){ .feature-list{grid-template-columns:1fr;} }
.feature-list .item{background:var(--surface); padding:26px; display:flex; flex-direction:column; gap:10px;}
.feature-list .item.span-2{grid-column:1 / -1;}
@media (max-width:700px){ .feature-list .item.span-2{grid-column:auto;} }
.feature-list .item h3{font-size:1.1rem;}
.feature-list .item p{color:var(--text-dim); font-size:.94rem;}

.usecase-list{list-style:none; display:flex; flex-direction:column; gap:14px;}
.usecase-list li{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text-dim); font-size:.95rem;}
.usecase-list li::before{content:"—"; color:var(--gold); flex:0 0 auto;}

.chip-row{display:flex; flex-wrap:wrap; gap:10px;}
.chip{font-family:var(--font-mono); font-size:.78rem; border:1px solid var(--border-strong); border-radius:8px; padding:7px 12px; color:var(--text-dim);}

.approach-panel{background:linear-gradient(135deg, var(--gold-soft), transparent 60%), var(--surface); border:1px solid var(--border); border-radius:18px; padding:clamp(24px,4vw,36px);}
.approach-panel p{color:var(--text-dim); font-size:var(--fs-lead); max-width:65ch;}

.related-row{display:flex; flex-wrap:wrap; gap:12px;}
.related-row a{
  font-size:.88rem; text-decoration:none; color:var(--text-dim); border:1px solid var(--border-strong);
  border-radius:999px; padding:9px 16px;
}
.related-row a:hover{color:var(--gold-2); border-color:var(--gold-line);}

/* ---------- projects / products ---------- */
.project-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.project-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .project-grid.cols-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){ .project-grid{grid-template-columns:1fr;} }
.project-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:14px;}
.project-card .tag{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-2); background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:999px; padding:5px 12px; align-self:flex-start;}
.project-card h3{font-size:1.3rem;}
.project-card p{color:var(--text-dim); font-size:.95rem;}
.project-card .status{margin-top:auto; font-family:var(--font-mono); font-size:.76rem; color:var(--text-faint);}

/* ---------- cta banner ---------- */
.cta-banner{
  border:1px solid var(--border); border-radius:22px;
  padding:clamp(32px,6vw,60px); text-align:left;
  background:linear-gradient(135deg, var(--gold-soft), transparent 55%), var(--surface);
  display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
}
.cta-banner h2{max-width:20ch;}
.cta-banner .side{max-width:40ch; color:var(--text-dim);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border); padding-block:44px; margin-top:20px;}
.foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px;}
.foot-brand{max-width:34ch; color:var(--text-dim); font-size:.9rem;}
.foot-brand .foot-logo{display:block; height:36px; width:auto; margin-bottom:12px;}
.foot-brand .tagline{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1rem; color:var(--text-faint); margin-bottom:16px;
}
.foot-cols{display:flex; gap:56px; flex-wrap:wrap;}
.foot-col h4{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin:0 0 12px;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.9rem; color:var(--text-dim);}
.foot-col a{text-decoration:none;} .foot-col a:hover{color:var(--gold-2);}
.foot-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:var(--text-faint); font-family:var(--font-mono);}