:root{
  --graphite:#23262A; --gold:#D08A21; --dgold:#96621A; --bone:#F6F4F0;
  --slate:#6B7078; --mist:#A7ABB2; --rule:#E2E0DD; --paper:#FFFFFF;
  --ink:#23262A; --ink-2:#3A3F45; --muted:#6B7078; --ground:#FFFFFF;
  --panel:#F6F4F0; --line:#E2E0DD; --accent:#96621A; --accent-bright:#D08A21;
  --dark-ground:#23262A; --dark-ink:#F6F4F0; --dark-muted:#A7ABB2; --dark-panel:#2E3238;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --wrap:1080px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1A1D20; --panel:#23262A; --ink:#F0EEEA; --ink-2:#CFD3D8;
    --muted:#9AA0A7; --line:#33383E; --accent:#E0A03A; --accent-bright:#E0A03A;
    --dark-ground:#121416; --dark-panel:#1E2124;
  }
}
:root[data-theme="dark"]{
  --ground:#1A1D20; --panel:#23262A; --ink:#F0EEEA; --ink-2:#CFD3D8;
  --muted:#9AA0A7; --line:#33383E; --accent:#E0A03A; --accent-bright:#E0A03A;
  --dark-ground:#121416; --dark-panel:#1E2124;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:var(--dark-ground); border-bottom:1px solid rgba(255,255,255,.08);
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding-block:14px;
}
.brand{display:flex; align-items:center; gap:0; text-decoration:none}
.brand img{width:172px}
.brand:focus-visible{outline:2px solid var(--gold); outline-offset:6px}
nav{display:flex; gap:4px; flex-wrap:wrap}
nav a{
  display:inline-block; text-decoration:none;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dark-muted); background:none;
  border:0; border-bottom:2px solid transparent; padding:7px 10px;
  cursor:pointer; transition:color .15s, border-color .15s;
}
nav a:hover{color:var(--bone)}
nav a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
nav a[aria-current="page"]{color:var(--gold); border-bottom-color:var(--gold)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px;
}
.eyebrow.on-dark{color:var(--gold)}
h1,h2,h3{text-wrap:balance; margin:0; letter-spacing:-.015em}
h1{font-size:clamp(2rem,5.2vw,3.2rem); line-height:1.1; font-weight:700}
h2{font-size:clamp(1.55rem,3.4vw,2.1rem); line-height:1.18; font-weight:700}
h3{font-size:1.06rem; line-height:1.35; font-weight:600}
.lede{font-size:1.16rem; line-height:1.55; color:var(--ink-2); max-width:62ch}
p{margin:0; max-width:66ch}
.hairline{width:56px; height:3px; background:var(--gold); border:0; margin:26px 0}
.stack{display:flex; flex-direction:column; gap:18px}

/* ---------- hero ---------- */
.hero{background:var(--dark-ground); color:var(--dark-ink); position:relative; overflow:hidden}
.hero .wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px;
  align-items:center; padding-block:68px;
}
.hero h1{color:var(--bone)}
.hero p{color:var(--dark-muted)}
.hero-figure{border-radius:2px; overflow:hidden}
.hero-figure img{width:100%}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:34px; padding-block:46px}
}

/* ---------- buttons ---------- */
.cta{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; padding:13px 22px; border-radius:2px; cursor:pointer;
  background:var(--gold); color:#1A1206; border:0; text-decoration:none;
  transition:background .15s;
}
.cta:hover{background:#E09B2F}
.cta:focus-visible{outline:2px solid var(--bone); outline-offset:3px}
.cta.ghost{background:none; color:var(--accent); border:1px solid var(--line)}
.cta.ghost:hover{background:var(--panel)}
.cta.ghost:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- blocks ---------- */
.band{padding-block:64px; border-top:1px solid var(--line)}
.band.tint{background:var(--panel)}
.band:first-of-type{border-top:0}
.pitch{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:38px; margin-top:34px}
.pitch article{display:flex; flex-direction:column; gap:12px}
.pitch img{width:34px; height:34px}
.pitch p{color:var(--muted); font-size:.96rem}
/* keep the three body blocks on one baseline when a heading runs to two lines */
@media (min-width:760px){ .pitch h3{min-height:2.7em} }

.surfaces{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0 40px; margin-top:8px}
.surfaces li{
  list-style:none; padding:16px 0 16px 20px; border-top:1px solid var(--line);
  position:relative; color:var(--ink-2); font-size:.99rem; line-height:1.5;
}
.surfaces li::before{
  content:""; position:absolute; left:0; top:24px;
  width:9px; height:3px; background:var(--gold);
}
.surfaces{padding:0; margin-inline:0}

.audience{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding:0}
.audience li{
  list-style:none; font-family:var(--mono); font-size:12px; letter-spacing:.07em;
  color:var(--ink-2); border:1px solid var(--line); border-radius:2px; padding:8px 14px;
}

/* ---------- services ---------- */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:30px 44px; margin-top:34px}
.service{display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start}
.service img{width:34px; height:34px}
.service p{color:var(--muted); font-size:.94rem; margin-top:3px}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px; margin-top:34px; padding:0}
.step{list-style:none; display:flex; flex-direction:column; gap:10px}
.step .n{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--accent-bright); letter-spacing:.1em}
.step img{width:30px; height:30px}
.step p{color:var(--muted); font-size:.94rem}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr; gap:34px}}
.details{border-top:1px solid var(--line); margin-top:26px}
.details div{display:flex; flex-wrap:wrap; gap:6px 18px; padding:15px 0; border-bottom:1px solid var(--line)}
.details dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); min-width:92px; margin:0;
}
.details dd{margin:0; font-size:1rem; word-break:break-word}
.details a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line)}
.details a:hover{border-bottom-color:var(--accent)}

/* ---------- closer + footer ---------- */
.closer{background:var(--dark-ground); color:var(--dark-ink); padding-block:56px}
.closer h2{color:var(--bone); max-width:20ch}
.closer p{color:var(--dark-muted)}
.closer .inner{display:flex; gap:34px; align-items:center; justify-content:space-between; flex-wrap:wrap}
footer{background:var(--dark-ground); color:var(--dark-muted); padding-block:26px; border-top:1px solid rgba(255,255,255,.08)}
footer .inner{display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em}
footer a{color:var(--dark-muted); text-decoration:none}
footer a:hover{color:var(--gold)}
.tag{color:var(--gold)}

figure{margin:0}
figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-top:10px}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}