:root{
  --ink:#1c1714;
  --paper:#f2ecde;
  --muted:#6b5f56;
  --hairline:#ddd4c2;
  --stamp:#be3b2d;
  --hairline-dark:#3a322c;
  --muted-dark:#a89a8d;

  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;

  --measure:64ch;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --band:clamp(4rem,10vw,7.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.0625rem,0.98rem + 0.4vw,1.1875rem);
  line-height:1.65;
  font-weight:400;
}
h1,h2,h3,.u-sans{font-family:var(--sans);font-weight:500;letter-spacing:-0.02em;line-height:1.12;margin:0}
p{margin:0 0 1.1em}
a{color:inherit}

.wrap{max-width:74rem;margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--measure)}

/* ---------- header ---------- */
.masthead{background:var(--ink);color:var(--paper)}
.masthead .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding-block:1.35rem;flex-wrap:wrap}
.wordmark{font-family:var(--sans);font-weight:700;font-size:1.0625rem;letter-spacing:-0.03em;text-decoration:none}
.wordmark .dot{color:var(--stamp)}
.nav{display:flex;gap:clamp(1rem,3vw,2rem);font-family:var(--sans);font-size:0.9375rem;font-weight:400}
.nav a{color:var(--muted-dark);text-decoration:none;padding-block:0.15rem;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--paper);border-bottom-color:var(--hairline-dark)}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);padding-block:clamp(3.5rem,9vw,6.5rem) clamp(4rem,10vw,7rem)}
.hero h1{
  font-size:clamp(2.1rem,1.35rem + 3.4vw,4rem);
  max-width:19ch;
  text-wrap:balance;
}
.hero-lede{
  font-size:clamp(1.15rem,1.05rem + 0.5vw,1.4rem);
  color:#ded3c0;
  max-width:52ch;
  margin-top:1.6rem;
  line-height:1.55;
}
.hero-meta{
  margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--hairline-dark);
  display:flex;gap:2rem 3rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:0.9375rem;color:var(--muted-dark);
}
.hero-meta strong{display:block;color:var(--paper);font-weight:500;margin-bottom:0.15rem}

/* ---------- bands ---------- */
.band{padding-block:var(--band)}
.band--dark{background:var(--ink);color:var(--paper)}
.band--dark .lede{color:#ded3c0}
.band--edge{border-top:1px solid var(--hairline)}

.band-head{max-width:46ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.band-head h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.4rem);text-wrap:balance}
.lede{color:var(--muted);margin-top:1rem;max-width:56ch}

/* ---------- doors ---------- */
.doors{display:grid;gap:1px;background:var(--hairline);border-block:1px solid var(--hairline)}
@media(min-width:52rem){.doors{grid-template-columns:1fr 1fr}}
.door{background:var(--paper);padding:clamp(1.75rem,4vw,2.75rem)}
.door h3{font-size:clamp(1.3rem,1.1rem + 0.8vw,1.7rem);margin-bottom:0.9rem}
.door p{color:var(--muted);margin-bottom:1.4rem}
.door ul{margin:0 0 1.6rem;padding-left:1.1rem;color:var(--muted);font-size:0.9875rem}
.door li{margin-bottom:0.4rem}

/* ---------- link + button ---------- */
.link{
  font-family:var(--sans);font-size:0.9375rem;font-weight:500;
  text-decoration:none;color:var(--stamp);
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.link:hover,.link:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
.band--dark .link:hover,.band--dark .link:focus-visible{color:var(--paper);border-bottom-color:var(--paper)}

.button{
  display:inline-block;font-family:var(--sans);font-size:0.9375rem;font-weight:500;
  text-decoration:none;background:var(--stamp);color:#fff;
  padding:0.85rem 1.6rem;border:1px solid var(--stamp);
}
.button:hover,.button:focus-visible{background:transparent;color:var(--stamp)}
.band--dark .button:hover,.band--dark .button:focus-visible{color:#e8897e;border-color:#e8897e;background:transparent}

/* ---------- services (editorial list, not cards) ---------- */
.services{border-top:1px solid var(--hairline-dark)}
.service{
  display:grid;gap:0.5rem 2.5rem;
  padding-block:clamp(1.6rem,3.5vw,2.2rem);
  border-bottom:1px solid var(--hairline-dark);
  text-decoration:none;
}
@media(min-width:52rem){.service{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;align-items:baseline}}
.service h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);letter-spacing:0}
.service p{color:var(--muted-dark);margin:0;font-size:1rem;max-width:52ch}
.service-go{font-family:var(--sans);font-size:0.875rem;color:var(--muted-dark);white-space:nowrap}
.service:hover h3,.service:focus-visible h3{color:#e8897e}
.service:hover .service-go,.service:focus-visible .service-go{color:var(--paper)}

/* ---------- process ---------- */
.steps{counter-reset:step;margin:0;padding:0;list-style:none;border-top:1px solid var(--hairline)}
.step{
  counter-increment:step;
  display:grid;gap:0.35rem 2rem;
  padding-block:1.5rem;border-bottom:1px solid var(--hairline);
}
@media(min-width:46rem){.step{grid-template-columns:3.5rem minmax(0,1fr)}}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--sans);font-size:0.875rem;color:var(--stamp);
  padding-top:0.35rem;
}
.step h3{font-size:1.15rem;margin-bottom:0.3rem}
.step p{color:var(--muted);margin:0;font-size:1rem;max-width:56ch}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--hairline)}
.qa{padding-block:clamp(1.5rem,3vw,2rem);border-bottom:1px solid var(--hairline)}
.qa h3{font-size:clamp(1.1rem,1rem + 0.5vw,1.3rem);margin-bottom:0.7rem;max-width:42ch}
.qa p{color:var(--muted);max-width:var(--measure);margin-bottom:0.8em}
.qa p:last-child{margin-bottom:0}

/* ---------- work placeholder ---------- */
.work-note{
  border:1px solid var(--hairline);
  padding:clamp(1.5rem,4vw,2.25rem);
  max-width:var(--measure);
}
.work-note p{color:var(--muted);margin-bottom:1.2rem}
.work-note p:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:2.5rem}
@media(min-width:52rem){.contact-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:4rem}}
.contact-list{font-family:var(--sans);font-size:0.9875rem;line-height:1.9;margin:0;padding:0;list-style:none}
.contact-list dt{color:var(--muted-dark);font-size:0.875rem}
.contact-list dd{margin:0 0 1.1rem}
.contact-list a{text-decoration:none;border-bottom:1px solid var(--hairline-dark)}
.contact-list a:hover,.contact-list a:focus-visible{border-bottom-color:var(--paper)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hairline);padding-block:2.5rem 3.5rem;font-family:var(--sans);font-size:0.875rem;color:var(--muted)}
.foot-rows{display:flex;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap}
.foot a{text-decoration:none;border-bottom:1px solid var(--hairline)}
.foot a:hover,.foot a:focus-visible{border-bottom-color:var(--ink)}

/* ---------- a11y ---------- */
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
.band--dark :focus-visible{outline-color:#e8897e}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:0.75rem;z-index:9;background:var(--paper);color:var(--ink);padding:0.6rem 1rem;font-family:var(--sans);font-size:0.9375rem}

/* single orchestrated page-load reveal, hero only */
@media(prefers-reduced-motion:no-preference){
  .hero h1,.hero-lede,.hero-meta{animation:rise 0.7s cubic-bezier(.2,.7,.3,1) both}
  .hero-lede{animation-delay:.09s}
  .hero-meta{animation-delay:.17s}
  @keyframes rise{from{opacity:0;transform:translateY(0.7rem)}to{opacity:1;transform:none}}
}

/* ---------- breadcrumb ---------- */
.crumbs{font-family:var(--sans);font-size:0.875rem;color:var(--muted-dark);padding-block:1.1rem 0}
.crumbs a{color:var(--muted-dark);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--paper);border-bottom-color:var(--hairline-dark)}
.crumbs span{color:var(--paper)}

/* ---------- page intro (sub-page hero) ---------- */
.pagehead{background:var(--ink);color:var(--paper);padding-block:0 clamp(3.25rem,8vw,5.5rem)}
.pagehead h1{
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.25rem);
  max-width:20ch;text-wrap:balance;margin-top:clamp(2rem,5vw,3rem);
}
.pagehead .answer{
  font-size:clamp(1.1rem,1.02rem + 0.45vw,1.3rem);
  color:#ded3c0;max-width:58ch;margin-top:1.5rem;line-height:1.6;
}

/* ---------- detailed service blocks ---------- */
.detail{border-top:1px solid var(--hairline);padding-block:clamp(2.5rem,6vw,4rem)}
.detail:first-of-type{border-top:0;padding-top:0}
.detail-grid{display:grid;gap:1.5rem 3.5rem}
@media(min-width:56rem){.detail-grid{grid-template-columns:minmax(0,20rem) minmax(0,1fr)}}
.detail h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,2.05rem);text-wrap:balance}
.detail-aside{font-family:var(--sans);font-size:0.9375rem;color:var(--muted);margin-top:1rem}
.detail-aside div{padding-block:0.5rem;border-top:1px solid var(--hairline)}
.detail-aside b{display:block;color:var(--ink);font-weight:500}
.detail p{max-width:var(--measure)}
.detail .includes{margin:0 0 1.5rem;padding-left:1.1rem;color:var(--muted);max-width:var(--measure)}
.detail .includes li{margin-bottom:0.45rem}

/* ---------- pull statement ---------- */
.pull{
  font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);
  line-height:1.4;max-width:34ch;margin:0;text-wrap:balance;
}
.pull-mark{color:var(--stamp)}

/* ---------- honest comparison (suits / does not suit) ---------- */
.compare{display:grid;gap:1px;background:var(--hairline);border-block:1px solid var(--hairline)}
@media(min-width:52rem){.compare{grid-template-columns:1fr 1fr}}
.compare>div{background:var(--paper);padding:clamp(1.6rem,4vw,2.5rem)}
.compare h3{font-size:1.2rem;margin-bottom:1.1rem}
.compare ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:1rem}
.compare li{margin-bottom:0.6rem;max-width:44ch}
.compare .mark{color:var(--stamp);font-family:var(--sans);font-size:0.8125rem;display:block;margin-bottom:0.5rem}

/* ---------- spec rows ---------- */
.spec{margin:0;border-top:1px solid var(--hairline-dark)}
.spec>div{display:grid;gap:0.35rem 2.5rem;padding-block:1.15rem;border-bottom:1px solid var(--hairline-dark)}
@media(min-width:46rem){.spec>div{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}}
.spec dt{font-family:var(--sans);font-size:0.9375rem;color:var(--paper)}
.spec dd{margin:0;color:var(--muted-dark);font-size:1rem;max-width:56ch}