:root{
  --bg:#08090C;
  --bg-soft:#0B0D11;
  --panel:#0D1015;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.15);
  --ink:#EAECEF;
  --ink-2:#B7BEC8;
  --muted:#7C8593;
  --brass:#C6A15B;
  --brass-soft:rgba(198,161,91,.32);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:1.5rem;
  --maxw:1140px;
}
@media (min-width:56rem){ :root{ --pad:2.5rem; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

a{color:inherit}
::selection{background:rgba(198,161,91,.24)}
:focus-visible{outline:1.5px solid var(--brass);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--panel);color:var(--ink);padding:.7rem 1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-strong);
}
.skip:focus{left:1rem;top:1rem}

/* ---------- shared type ---------- */
.label{
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.label .num{color:var(--brass)}

.serif-h{
  font-family:var(--serif);
  font-weight:300;
  letter-spacing:-.018em;
  line-height:1.14;
  margin:0;
}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(8,9,12,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
.site-head.stuck{border-bottom-color:var(--line)}
.head-in{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:4.25rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.brand svg{display:block;flex-shrink:0}
.brand-name{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.nav{display:none;align-items:center;gap:2rem}
@media (min-width:56rem){ .nav{display:flex} }
.nav a{
  font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;transition:color .2s ease;
}
.nav a:hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding:.62rem 1.05rem;
  border:1px solid var(--line-strong);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
  white-space:nowrap;
}
.btn:hover{border-color:var(--brass);color:var(--brass);background:rgba(198,161,91,.05)}
.btn .arw{transition:transform .25s ease}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{position:relative;padding:5rem 0 3.5rem;overflow:hidden}
@media (min-width:56rem){ .hero{padding:7.5rem 0 5rem} }
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:80%;
  background:radial-gradient(58% 62% at 62% 34%,rgba(198,161,91,.075),transparent 70%);
  pointer-events:none;
}
.hero-grid{position:relative;display:grid;gap:3.5rem;align-items:center}
@media (min-width:60rem){ .hero-grid{grid-template-columns:1.12fr .88fr;gap:4.5rem} }

.eyebrow{display:flex;align-items:center;gap:.85rem;margin-bottom:1.9rem}
.eyebrow .rule{width:2rem;height:1px;background:var(--brass-soft);flex-shrink:0}
.eyebrow span{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}
h1{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(2.5rem,6.2vw,4.1rem);
  line-height:1.06;letter-spacing:-.024em;
  margin:0 0 1.6rem;max-width:15ch;
}
h1 em{font-style:italic;font-weight:300;color:var(--brass)}
.lede{
  font-size:clamp(1.02rem,1.6vw,1.16rem);
  line-height:1.62;color:var(--ink-2);
  max-width:44ch;margin:0 0 1.1rem;
}
.lede-2{font-size:.95rem;color:var(--muted);max-width:46ch;margin:0 0 2.4rem;line-height:1.62}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.btn-ghost{border-color:var(--line);color:var(--muted)}
.btn-ghost:hover{border-color:var(--line-strong);color:var(--ink);background:transparent}

.surface-wrap{justify-self:center;width:100%;max-width:28rem}
#surface{display:block;width:100%;aspect-ratio:1/1}
.surface-cap{
  display:block;margin-top:1.15rem;text-align:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(140,149,163,.8);
}
@media (max-width:40rem){ .surface-wrap{max-width:19rem} }

/* ---------- coverage strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.strip-in{display:grid;grid-template-columns:1fr 1fr}
@media (min-width:56rem){ .strip-in{grid-template-columns:repeat(4,1fr)} }
.strip-cell{padding:1.6rem 1.25rem 1.7rem 1.25rem;border-right:1px solid var(--line)}
.strip-cell:nth-child(odd){padding-left:0}
.strip-cell:nth-child(even){border-right:0;padding-right:0}
.strip-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
@media (min-width:56rem){
  .strip-cell{padding-left:1.5rem;padding-right:1.5rem}
  .strip-cell:nth-child(odd){padding-left:1.5rem}
  .strip-cell:first-child{padding-left:0}
  .strip-cell:nth-child(even){border-right:1px solid var(--line);padding-right:1.5rem}
  .strip-cell:last-child{border-right:0;padding-right:0}
  .strip-cell:nth-child(-n+2){border-bottom:0}
}
.strip-v{
  font-family:var(--serif);font-size:1.14rem;font-weight:300;color:var(--ink);
  letter-spacing:-.012em;display:block;line-height:1.2;
}
.strip-k{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:.6rem;line-height:1.5;
}

/* ---------- sections ---------- */
section{border-bottom:1px solid var(--line)}
section[id]{scroll-margin-top:4.5rem}
.hero,.contact-sec{border-bottom:0}
.sec{padding-top:4.5rem;padding-bottom:4.5rem}
@media (min-width:56rem){ .sec{padding-top:6.5rem;padding-bottom:6.5rem} }
.sec-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){ .sec-grid{grid-template-columns:13rem 1fr;gap:4rem} }
.sec-head{align-self:start}
@media (min-width:56rem){ .sec-head{position:sticky;top:7rem} }
.sec-head .label{display:block;margin-bottom:.6rem}
.sec-title{font-family:var(--serif);font-size:1.5rem;font-weight:300;letter-spacing:-.015em;margin:0;line-height:1.2}
.sec-note{font-size:.86rem;color:var(--muted);margin:.9rem 0 0;max-width:26ch;line-height:1.6}

/* ---------- capability cards ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:44rem){ .cards{grid-template-columns:1fr 1fr} }
.card{
  background:var(--bg);
  padding:1.85rem 1.6rem 2rem;
  transition:background .3s ease;
}
.card:hover{background:var(--panel)}
.card-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--brass);display:block;margin-bottom:1.1rem}
.card h3{
  font-family:var(--serif);font-size:1.22rem;font-weight:400;letter-spacing:-.012em;
  margin:0 0 .7rem;line-height:1.25;color:var(--ink);
}
.card p{margin:0;font-size:.9rem;line-height:1.68;color:var(--muted)}

/* ---------- approach ---------- */
.matrix-block{
  border:1px solid var(--line);
  background:var(--bg-soft);
  padding:1.75rem;
  display:grid;gap:1.75rem;align-items:center;
  margin-bottom:2.75rem;
}
@media (min-width:40rem){ .matrix-block{grid-template-columns:auto 1fr;gap:2.5rem;padding:2rem 2.25rem} }
.matrix{
  display:grid;grid-template-columns:auto auto;
  border:1px solid var(--line);
  min-width:14.5rem;
}
.mcell{
  padding:.95rem 1rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.mcell:nth-child(2n){border-right:0}
.mcell:nth-child(n+3){border-bottom:0}
.mcell.diag{background:rgba(198,161,91,.06)}
.mterm{font-family:var(--mono);font-size:.84rem;font-weight:500;color:var(--ink);display:block;letter-spacing:-.01em}
.mgloss{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.5rem}
.diag .mgloss{color:var(--brass)}
.quote{
  font-family:var(--serif);font-size:1.2rem;font-weight:300;line-height:1.46;
  letter-spacing:-.012em;color:var(--ink-2);margin:0;
}
.quote strong{font-weight:400;color:var(--ink);font-style:italic}

.principles{margin:0;border-top:1px solid var(--line)}
.principles > div{
  display:grid;gap:.4rem 2rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:44rem){ .principles > div{grid-template-columns:14rem 1fr;gap:0 2.5rem} }
.principles dt{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding-top:.1rem;
}
.principles dd{margin:0;font-size:.9rem;line-height:1.68;color:var(--muted);max-width:52ch}

/* ---------- infrastructure ---------- */
.stack-group{padding:1.5rem 0;border-bottom:1px solid var(--line)}
.stack-group:first-child{padding-top:0}
.stack-group:last-child{border-bottom:0;padding-bottom:0}
.stack-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  font-family:var(--mono);font-size:.74rem;color:var(--ink-2);
  border:1px solid var(--line);padding:.38rem .72rem;
  transition:border-color .25s ease,color .25s ease;
}
.chip:hover{border-color:var(--brass-soft);color:var(--ink)}

/* ---------- engagement ---------- */
.eng{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.eng li{padding:1.6rem 0;border-bottom:1px solid var(--line)}
.eng h3{font-family:var(--serif);font-size:1.16rem;font-weight:400;margin:0 0 .5rem;letter-spacing:-.012em;color:var(--ink)}
.eng p{margin:0;font-size:.9rem;line-height:1.68;color:var(--muted);max-width:56ch}
.eng-note{margin:2.25rem 0 0;font-size:.9rem;line-height:1.7;color:var(--muted);max-width:54ch}

/* ---------- contact ---------- */
.contact{padding-top:5.5rem;padding-bottom:6rem;text-align:left}
@media (min-width:56rem){ .contact{padding-top:7.5rem;padding-bottom:8rem} }
.contact .label{display:block}
.contact h2{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.12;letter-spacing:-.022em;margin:1.6rem 0 1.4rem;max-width:19ch;
}
.contact p{color:var(--muted);font-size:.95rem;max-width:46ch;margin:0 0 2.4rem;line-height:1.68}
.mail{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:clamp(.85rem,2.2vw,1rem);
  letter-spacing:.02em;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--brass-soft);padding-bottom:.4rem;
  transition:border-color .25s ease,color .25s ease;
}
.mail:hover{border-color:var(--brass);color:var(--brass)}
.elsewhere{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.8rem;
  margin-top:3.2rem;padding-top:1.5rem;
  border-top:1px solid var(--line);max-width:34rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
}
.elsewhere .k{color:var(--muted)}
.elsewhere a{
  color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;
  transition:color .2s ease;
}
.elsewhere a:hover{color:var(--brass)}
.elsewhere svg{width:13px;height:13px;fill:currentColor;opacity:.8;flex-shrink:0}
.elsewhere a:hover svg{opacity:1}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-soft)}
.foot-in{
  padding-top:2.3rem;padding-bottom:2.3rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.foot-row{
  display:flex;flex-wrap:wrap;gap:1.1rem 2rem;
  justify-content:space-between;align-items:center;
}
.foot-brand{display:flex;align-items:center;gap:.6rem;color:var(--ink-2)}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.7rem}
.foot-in a{
  color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:color .2s ease;
}
.foot-in a:hover{color:var(--ink)}
.foot-links svg{width:13px;height:13px;fill:currentColor;opacity:.8;flex-shrink:0}
.foot-in a:hover svg{opacity:1}
.foot-legal{
  margin-top:1.8rem;padding-top:1.35rem;
  border-top:1px solid var(--line);
  font-size:.62rem;color:rgba(124,133,147,.85);
}

/* ---------- narrow screens ---------- */
.cta-short{display:none}
@media (max-width:34rem){
  .head-in{height:3.7rem;gap:.75rem}
  .brand svg{width:19px;height:19px}
  .brand-name{font-size:.63rem;letter-spacing:.14em}
  .btn{font-size:.62rem;letter-spacing:.12em;padding:.55rem .8rem;gap:.4rem}
  .eyebrow{align-items:flex-start}
  .eyebrow .rule{width:1.25rem;margin-top:.5rem}
  .eyebrow span{font-size:.6rem;letter-spacing:.14em}
  .matrix{min-width:0;width:100%}
  .matrix-block{padding:1.4rem}
  .mcell{padding:.85rem .5rem}
  .mterm{font-size:.76rem}
}
@media (max-width:26rem){
  .cta-long{display:none}
  .cta-short{display:inline}
}

/* ---------- reveal ---------- */
.js .r{opacity:0;transform:translateY(12px)}
.js .r.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js .r{opacity:1;transform:none}
  .js .r.in{transition:none}
}

/* ---------- multi-page additions ---------- */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.head-right{display:flex;align-items:center;gap:.6rem}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{
  content:"";display:block;height:1px;margin-top:.35rem;background:var(--brass-soft);
}

/* mobile menu: the nav is hidden below 56rem, so it needs a replacement */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.35rem;padding:0;
  background:none;border:1px solid var(--line-strong);
  color:var(--ink);cursor:pointer;
  transition:border-color .25s ease,color .25s ease;
}
.nav-toggle:hover{border-color:var(--brass);color:var(--brass)}
.nav-toggle-bars{display:block;width:15px;position:relative}
.nav-toggle-bars span{
  display:block;height:1px;background:currentColor;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .2s ease;
}
.nav-toggle-bars span:first-child{margin-bottom:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child{transform:translateY(-3px) rotate(-45deg)}
@media (min-width:56rem){ .nav-toggle{display:none} }

.nav-panel{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.nav-panel-in{display:flex;flex-direction:column;padding-top:.5rem;padding-bottom:1.1rem}
.nav-panel a{
  font-family:var(--mono);font-size:.74rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;padding:.85rem 0;
  border-bottom:1px solid var(--line);
  transition:color .2s ease;
}
.nav-panel a:last-child{border-bottom:0}
.nav-panel a:hover{color:var(--ink)}
.nav-panel a[aria-current="page"]{color:var(--brass)}
@media (min-width:56rem){ .nav-panel{display:none} }
@media (prefers-reduced-motion:reduce){ .nav-toggle-bars span{transition:none} }

/* ---------- interior pages ---------- */

.page-head{
  padding-top:4.5rem;padding-bottom:3rem;
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
@media (min-width:56rem){ .page-head{padding-top:7rem;padding-bottom:4.5rem} }
.page-head::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:100%;
  background:radial-gradient(50% 60% at 30% 30%,rgba(198,161,91,.06),transparent 70%);
  pointer-events:none;
}
.page-head .wrap{position:relative}
.page-head h1{
  font-size:clamp(2.1rem,5vw,3.4rem);
  max-width:19ch;margin-bottom:1.5rem;
}

.prose{
  font-size:1rem;line-height:1.72;color:var(--ink-2);
  max-width:62ch;margin:0 0 1.15rem;
}
.prose:last-child{margin-bottom:0}
.prose em{font-style:italic;color:var(--ink)}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass-soft)}
.prose a:hover{color:var(--brass);border-color:var(--brass)}

.fig{
  margin:0 0 2rem;
  border:1px solid var(--line);
  background:var(--bg-soft);
  padding:1.25rem 1.25rem 0;
}
.fig canvas{
  display:block;width:100%;height:auto;
  aspect-ratio:16/7;
}
@media (max-width:40rem){ .fig canvas{aspect-ratio:4/3} }
.fig figcaption{
  font-family:var(--mono);font-size:.66rem;line-height:1.7;
  letter-spacing:.06em;color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:1.1rem;padding:.85rem 0 1rem;
}

.vendor-note{
  font-family:var(--mono);font-size:.62rem;line-height:1.8;
  letter-spacing:.04em;color:var(--muted);
  max-width:62ch;margin:1.8rem 0 0;
  padding-top:1.1rem;border-top:1px solid var(--line);
}

/* ---------- notes ---------- */

.note-meta{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:1.5rem 0 0;
}
.note-body{padding-top:3rem}
.note-body > *{max-width:74ch}
@media (min-width:56rem){ .note-body{padding-top:4rem} }
.note-body h2{
  font-family:var(--serif);font-size:1.5rem;font-weight:300;
  letter-spacing:-.015em;line-height:1.25;color:var(--ink);
  margin:3rem 0 1.1rem;
}
.note-body h2:first-child{margin-top:0}
.note-body p{
  font-size:1rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.2rem;
}
.note-body strong{color:var(--ink);font-weight:400}
.note-body em{font-style:italic;color:var(--ink)}
.note-body a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass-soft)}
.note-body a:hover{color:var(--brass);border-color:var(--brass)}
.note-body ul{margin:0 0 1.2rem;padding-left:1.1rem;list-style:none}
.note-body li{
  position:relative;font-size:1rem;line-height:1.75;color:var(--ink-2);margin-bottom:.9rem;
}
.note-body li::before{
  content:"";position:absolute;left:-1.1rem;top:.72em;
  width:4px;height:1px;background:var(--brass-soft);
}
.note-foot{padding-bottom:5rem}
@media (min-width:56rem){ .note-foot{padding-bottom:7rem} }

.note-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.note-list li{border-bottom:1px solid var(--line)}
.note-list a{
  display:block;padding:1.6rem 0;text-decoration:none;
  transition:opacity .2s ease;
}
.note-list a:hover{opacity:.72}
.note-list-title{
  display:block;font-family:var(--serif);font-size:1.22rem;font-weight:400;
  letter-spacing:-.012em;color:var(--ink);margin-bottom:.5rem;
}
.note-list-sum{
  display:block;font-size:.9rem;line-height:1.68;color:var(--muted);max-width:60ch;
}

.more{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  margin-top:1.6rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--brass-soft);
  transition:color .25s ease,border-color .25s ease;
}
.more:hover{color:var(--brass);border-color:var(--brass)}
.more .arw{transition:transform .25s ease}
.more:hover .arw{transform:translateX(3px)}