:root{
  --ground:#f1f2ef; --ink:#14171a; --muted:#5f6a6d; --line:#d3d7d1;
  --accent:#2f5d62; --panel:#191d1e; --panel-ink:#eef0ec; --panel-muted:#9aa6a4;
  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#131615; --ink:#e8eae6; --muted:#98a09c; --line:#282d2b;
    --accent:#86b8b6; --panel:#1e2322; --panel-ink:#eef0ec; --panel-muted:#9aa6a4; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#131615; --ink:#e8eae6; --muted:#98a09c; --line:#282d2b;
  --accent:#86b8b6; --panel:#1e2322; --panel-ink:#eef0ec; --panel-muted:#9aa6a4; color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:500; text-wrap:balance; letter-spacing:-0.02em; line-height:1.12}
p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.wrap{max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px)}

.label{font-family:var(--mono); font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}

/* header */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--ground); border-bottom:1px solid var(--line)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem}
.wordmark{font-weight:600; letter-spacing:-.01em; text-decoration:none; font-size:1.0625rem}
.head-nav{display:flex; align-items:center; gap:clamp(.9rem,2.5vw,1.75rem)}
.head-nav a{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); text-decoration:none}
.head-nav a:hover{color:var(--ink)}
.nav-hide{display:none}
@media(min-width:640px){.nav-hide{display:inline}}
.ctl{display:inline-block; text-decoration:none; font-family:var(--mono); font-size:.72rem; line-height:1.4; letter-spacing:.12em; background:none; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:.3rem 0; min-width:2.4rem; text-align:center; cursor:pointer}
.ctl:hover{border-color:var(--ink)}
#theme{font-size:.9rem; letter-spacing:0}

/* section skeleton */
section{border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.pad{padding-block:clamp(3.5rem,8vw,6.5rem)}
.row{display:grid; gap:1.5rem}
@media(min-width:800px){.row{grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:3.5rem}}

/* hero */
.hero h1{font-size:clamp(2.5rem,6.2vw,4.5rem); letter-spacing:-.035em; max-width:16ch}
.hero .lead{font-size:clamp(1.125rem,2vw,1.35rem); line-height:1.5; color:var(--muted); max-width:52ch; margin-top:1.5rem}
.eyebrow{display:block; margin-bottom:1.75rem}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem}
.btn{display:inline-block; padding:.8rem 1.4rem; border-radius:2px; text-decoration:none; font-size:.95rem; font-weight:500; border:1px solid var(--ink); transition:opacity .15s}
.btn-fill{background:var(--ink); color:var(--ground)}
.btn-fill:hover{opacity:.82}
.btn-line{color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--ground)}
.facts{display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.75rem; color:var(--muted)}
.facts b{font-weight:500; color:var(--ink)}

/* services: hairline rows, not cards */
.svc{display:grid; gap:.85rem; padding-block:2.25rem; border-top:1px solid var(--line)}
.svc:first-child{border-top:0; padding-top:0}
.svc:last-child{padding-bottom:0}
@media(min-width:800px){.svc{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:.85rem 3rem}
  .svc h3{grid-row:span 2}}
.svc h3{font-size:clamp(1.5rem,2.6vw,1.95rem)}
.svc p{color:var(--muted); max-width:56ch}
.tags{font-family:var(--mono); font-size:.73rem; color:var(--muted); line-height:1.8}
.tags span{white-space:nowrap}

/* work */
.grid2{display:grid; gap:2.25rem}
@media(min-width:720px){.grid2{grid-template-columns:1fr 1fr; gap:2.5rem 3.5rem}}
.work{border-top:1px solid var(--line); padding-top:1.25rem; display:grid; gap:.6rem; align-content:start}
.work h3{font-size:1.2rem; font-weight:600}
.work p{color:var(--muted); font-size:.98rem}
.metric{font-family:var(--mono); font-size:.8rem; color:var(--accent); font-weight:500; margin-top:.15rem}

/* process: numbered because it genuinely is a sequence */
.steps{display:grid; gap:2rem}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr); gap:3rem}}
.step{display:grid; gap:.55rem; align-content:start}
.step .num{font-family:var(--mono); font-size:.8rem; color:var(--accent); font-weight:500}
.step h3{font-size:1.15rem; font-weight:600}
.step p{color:var(--muted); font-size:.98rem}

/* about */
.about p{max-width:62ch; color:var(--muted)}
.about p + p{margin-top:1.1rem}
.about strong{color:var(--ink); font-weight:500}

/* contact: the one filled surface on the page */
.panel{background:var(--panel); color:var(--panel-ink); border-radius:3px; padding:clamp(2rem,5vw,3.5rem)}
.panel h2{font-size:clamp(1.9rem,4vw,2.8rem); letter-spacing:-.03em; max-width:18ch}
.panel p{color:var(--panel-muted); max-width:46ch; margin-top:1.1rem}
.panel .label{color:var(--panel-muted)}
.panel .btn{border-color:var(--panel-ink)}
.panel .btn-fill{background:var(--panel-ink); color:var(--panel)}
.panel .btn-line{color:var(--panel-ink)}
.panel .btn-line:hover{background:var(--panel-ink); color:var(--panel)}
.note{font-family:var(--mono); font-size:.75rem; color:var(--panel-muted); margin-top:1.75rem}

/* footer */
footer{border-top:1px solid var(--line); padding-block:2.5rem 3.5rem; font-size:.9rem; color:var(--muted)}
.foot-grid{display:grid; gap:1.75rem}
@media(min-width:800px){.foot-grid{grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:3.5rem}}
footer a{color:var(--muted)}
.colophon{font-family:var(--mono); font-size:.73rem; line-height:1.7}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}