/* ══════════ TOKENS — black & white. Colour comes from the logo only. ══════════ */
:root{
  --ground:#FFFFFF;
  --ground-2:#F4F4F4;
  --ink:#0B0B0B;
  --ink-2:#3D3D3D;
  --ink-soft:#727272;
  --hairline:#E3E3E3;
  --panel:#FFFFFF;
  --invert-ground:#0B0B0B;
  --invert-ink:#FFFFFF;
  --invert-soft:#9A9A9A;
  --invert-line:#2B2B2B;

  /* logo palette — used as accents only, never as surfaces */
  --c1:#E8382B; --c2:#F26C21; --c3:#F9B217; --c4:#3AA94B;
  --c5:#23A8E0; --c6:#8B5FA8; --c7:#A62089;

  --step--1:clamp(.76rem,.73rem + .16vw,.83rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.08rem);
  --step-1:clamp(1.15rem,1.08rem + .34vw,1.35rem);
  --step-2:clamp(1.5rem,1.32rem + .82vw,2rem);
  --step-3:clamp(2rem,1.66rem + 1.5vw,3rem);
  --step-4:clamp(2.6rem,1.9rem + 3.1vw,4.6rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B0B0B; --ground-2:#151515; --ink:#F7F7F7; --ink-2:#C9C9C9;
    --ink-soft:#8E8E8E; --hairline:#262626; --panel:#131313;
    --invert-ground:#F7F7F7; --invert-ink:#0B0B0B; --invert-soft:#5E5E5E; --invert-line:#D6D6D6;
  }
}
:root[data-theme="dark"]{
  --ground:#0B0B0B; --ground-2:#151515; --ink:#F7F7F7; --ink-2:#C9C9C9;
  --ink-soft:#8E8E8E; --hairline:#262626; --panel:#131313;
  --invert-ground:#F7F7F7; --invert-ink:#0B0B0B; --invert-soft:#5E5E5E; --invert-line:#D6D6D6;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--step-0); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{margin:0; letter-spacing:-.028em; line-height:1.02; text-wrap:balance;
  font-family:"Archivo Black",Archivo,"Helvetica Neue",Arial,sans-serif; font-weight:400}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

.wrap{width:min(1200px,90vw); margin-inline:auto}
.label{font-family:"DM Mono",ui-monospace,SFMono-Regular,monospace; font-size:var(--step--1);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.rule{height:1px; background:var(--hairline); border:0; margin:0}

/* the only colour on the page, at 8px */
.pip{width:8px; height:8px; border-radius:2px; display:inline-block; flex:none}

/* ══════════ NAV ══════════ */
.nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline)}
.nav-in{display:flex; align-items:center; gap:2rem; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto}
.brand img{width:38px; height:38px}
.brand b{display:block; font-family:"Archivo Black",sans-serif; font-size:1.2rem; letter-spacing:-.05em}
.brand span{display:block; font-family:"DM Mono",monospace; font-size:.58rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:-3px}
.nav-links{display:flex; gap:1.9rem; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; font-size:.93rem; font-weight:500; padding:.25rem 0; position:relative}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--nc,var(--ink)); transition:right .28s cubic-bezier(.4,0,.2,1)}
.nav-links a:hover::after{right:0}
.nav-cta{text-decoration:none; font-size:.9rem; font-weight:600; padding:.62rem 1.15rem;
  background:var(--ink); color:var(--ground); border:1px solid var(--ink); transition:.18s ease}
.nav-cta:hover{background:transparent; color:var(--ink)}
@media(max-width:880px){.nav-links{display:none}}

/* ══════════ HERO ══════════ */
.hero{padding:clamp(3.5rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.eyebrow{display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem}
.hero h1{font-size:var(--step-4); letter-spacing:-.045em}
.hero h1 em{font-style:normal; color:var(--ink-soft)}
.hero-sub{max-width:52ch; margin-top:1.6rem; font-size:var(--step-1); color:var(--ink-2); line-height:1.55}
.hero-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:600;
  font-size:.95rem; padding:.85rem 1.5rem; border:1px solid var(--ink); transition:.18s ease}
.btn-solid{background:var(--ink); color:var(--ground)}
.btn-solid:hover{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--ground)}
.hero-mark{justify-self:center}
.hero-mark img{width:min(300px,55vw)}

/* logo colour bar — a quiet nod, 3px tall */
.spectrum{display:flex; height:3px; margin-top:clamp(2.5rem,5vw,3.5rem)}
.spectrum i{flex:1}

/* ══════════ SECTIONS ══════════ */
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.sec-head{display:grid; grid-template-columns:.9fr 1.1fr; gap:2rem; align-items:end;
  margin-bottom:clamp(2rem,4vw,3rem)}
@media(max-width:800px){.sec-head{grid-template-columns:1fr; align-items:start}}
.sec-head h2{font-size:var(--step-3); max-width:14ch}
.sec-head p{color:var(--ink-soft); max-width:46ch; justify-self:end}
@media(max-width:800px){.sec-head p{justify-self:start}}

/* services — hairline grid, no boxes, no shadows */
.services{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline)}
@media(max-width:1000px){.services{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.services{grid-template-columns:1fr}}
.svc{padding:2rem 1.6rem 2.2rem; border-bottom:1px solid var(--hairline);
  border-right:1px solid var(--hairline); display:flex; flex-direction:column; gap:.65rem;
  position:relative; transition:background .2s ease}
.svc:hover{background:var(--ground-2)}
.svc::before{content:""; position:absolute; top:-1px; left:0; width:0; height:2px;
  background:var(--c); transition:width .3s cubic-bezier(.4,0,.2,1)}
.svc:hover::before{width:100%}
.services .svc:nth-child(4n){border-right:0}
@media(max-width:1000px){.services .svc:nth-child(4n){border-right:1px solid var(--hairline)}
  .services .svc:nth-child(2n){border-right:0}}
@media(max-width:600px){.services .svc{border-right:0}}
.svc .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.svc .n{font-family:"DM Mono",monospace; font-size:.72rem; letter-spacing:.12em; color:var(--ink-soft)}
.svc h3{font-size:1.12rem; letter-spacing:-.02em}
.svc p{font-size:.93rem; color:var(--ink-soft); line-height:1.55}

/* about */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem)}
@media(max-width:880px){.about{grid-template-columns:1fr}}
.about p{color:var(--ink-2); font-size:var(--step-1); line-height:1.55; max-width:56ch}
.about p+p{margin-top:1.1rem}
.about strong{color:var(--ink); font-weight:700}
.pull{border-left:2px solid var(--ink); padding-left:1.6rem}
.pull q{quotes:none; font-family:"Archivo Black",sans-serif; font-size:var(--step-2);
  line-height:1.1; letter-spacing:-.03em; display:block}
.pull .label{margin-top:1.2rem; display:block}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline);
  margin-top:clamp(2.5rem,5vw,4rem)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:1.8rem 1.4rem; border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.stats .stat:last-child{border-right:0}
@media(max-width:700px){.stats .stat:nth-child(2n){border-right:0}}
.stat b{display:block; font-family:"Archivo Black",sans-serif; font-size:var(--step-3);
  line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:.6rem; font-family:"DM Mono",monospace; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}

/* clients */
.clients{display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline)}
@media(max-width:900px){.clients{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.clients{grid-template-columns:repeat(2,1fr)}}
.client{padding:2.2rem 1rem; text-align:center; border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline); font-family:"Archivo Black",sans-serif;
  font-size:.98rem; letter-spacing:-.02em; color:var(--ink-soft); transition:color .2s ease}
.client:hover{color:var(--ink)}

/* process — a real sequence, so it's numbered */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,3vw,2.5rem)}
@media(max-width:820px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.process{grid-template-columns:1fr}}
.step{border-top:2px solid var(--ink); padding-top:1.1rem}
.step .label{display:block; margin-bottom:.6rem}
.step h3{font-size:1.08rem; margin-bottom:.45rem}
.step p{font-size:.93rem; color:var(--ink-soft); line-height:1.55}

/* contact — inverted block */
.contact{background:var(--invert-ground); color:var(--invert-ink); padding:clamp(3.5rem,7vw,5.5rem) 0}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact h2{font-size:var(--step-4); color:var(--invert-ink)}
.contact .lead{margin-top:1.3rem; max-width:44ch; font-size:var(--step-1); color:var(--invert-soft)}
.contact .label{color:var(--invert-soft)}
.details{display:flex; flex-direction:column; border-top:1px solid var(--invert-line)}
.detail{display:flex; align-items:center; gap:1rem; padding:1.25rem .2rem; text-decoration:none;
  border-bottom:1px solid var(--invert-line); transition:padding .2s ease}
a.detail:hover{padding-left:1rem}
.detail .txt{display:flex; flex-direction:column}
.detail small{font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--invert-soft)}
.detail b{font-size:1.06rem; font-weight:600; letter-spacing:-.01em}
.detail .arw{margin-left:auto; color:var(--invert-soft); transition:transform .2s ease}
a.detail:hover .arw{transform:translateX(4px); color:var(--invert-ink)}

/* footer */
.footer{padding:2.2rem 0; display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between}
.socials{display:flex; gap:.5rem}
.socials a{width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--hairline); text-decoration:none; transition:.18s ease}
.socials a:hover{border-color:var(--ink); background:var(--ink)}
.socials svg{width:16px; height:16px; fill:var(--ink-soft); transition:fill .18s ease}
.socials a:hover svg{fill:var(--ground)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important}
}

/* ══════════════════════════════════════════════════════════════
   SERVICE PAGES — same system, three extra patterns
   ══════════════════════════════════════════════════════════════ */

/* breadcrumb */
.crumb{display:flex; align-items:center; gap:.55rem; padding:1.3rem 0 0;
  font-family:"DM Mono",monospace; font-size:var(--step--1); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); flex-wrap:wrap}
.crumb a{text-decoration:none; border-bottom:1px solid var(--hairline)}
.crumb a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.crumb span[aria-current]{color:var(--ink)}

/* service hero — the number and accent carry the identity, nothing else */
.svc-hero{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--hairline)}
.svc-hero-grid{display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,5vw,4rem); align-items:end}
@media(max-width:880px){.svc-hero-grid{grid-template-columns:1fr; align-items:start}}
.svc-hero h1{font-size:var(--step-4); letter-spacing:-.045em; margin-top:1.4rem}
.svc-hero .lead{margin-top:1.5rem; max-width:54ch; font-size:var(--step-1);
  color:var(--ink-2); line-height:1.55}
.svc-hero .accent-rule{height:4px; background:var(--c); width:64px; margin-bottom:1.4rem}
.facts{display:flex; flex-direction:column; border-top:1px solid var(--hairline)}
.fact{display:flex; justify-content:space-between; gap:1.5rem; padding:.9rem 0;
  border-bottom:1px solid var(--hairline)}
.fact dt{font-family:"DM Mono",monospace; font-size:var(--step--1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:0}
.fact dd{margin:0; font-weight:600; text-align:right}

/* included — a checklist, hairline separated */
.included{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,5vw,4rem)}
@media(max-width:760px){.included{grid-template-columns:1fr}}
.inc{display:flex; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--hairline)}
.inc .tick{width:18px; height:18px; flex:none; margin-top:.25rem; border:1px solid var(--ink);
  display:grid; place-items:center}
.inc .tick::after{content:""; width:8px; height:8px; background:var(--c); border-radius:2px}
.inc h3{font-size:1rem; letter-spacing:-.015em; font-family:Archivo,sans-serif; font-weight:700}
.inc p{font-size:.92rem; color:var(--ink-soft); line-height:1.5; margin-top:.28rem}

/* deliverables — plain tag row */
.tags{display:flex; flex-wrap:wrap; gap:.5rem}
.tag{font-family:"DM Mono",monospace; font-size:.76rem; letter-spacing:.08em;
  padding:.45rem .85rem; border:1px solid var(--hairline); color:var(--ink-2)}

/* faq */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none; cursor:pointer; padding:1.25rem 0; display:flex;
  align-items:center; gap:1rem; font-weight:600; font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-family:"DM Mono",monospace;
  color:var(--ink-soft); font-size:1.2rem; transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg); color:var(--ink)}
.faq .ans{padding:0 0 1.35rem; color:var(--ink-soft); max-width:66ch; line-height:1.6}

/* other services — compact links */
.more{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline)}
@media(max-width:900px){.more{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.more{grid-template-columns:1fr}}
.more a{display:flex; flex-direction:column; gap:.35rem; padding:1.4rem 1.2rem;
  text-decoration:none; border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline); transition:background .2s ease; position:relative}
.more a:hover{background:var(--ground-2)}
.more a::before{content:""; position:absolute; top:-1px; left:0; width:0; height:2px;
  background:var(--c); transition:width .3s cubic-bezier(.4,0,.2,1)}
.more a:hover::before{width:100%}
.more .n{font-family:"DM Mono",monospace; font-size:.72rem; letter-spacing:.12em; color:var(--ink-soft)}
.more b{font-family:"Archivo Black",sans-serif; font-weight:400; font-size:1rem; letter-spacing:-.02em}

/* service cards are links on the homepage */
a.svc{text-decoration:none; color:inherit}
a.svc h3{transition:transform .2s cubic-bezier(.4,0,.2,1)}
a.svc:hover h3{transform:translateX(4px)}
a.svc::after{content:"\2192"; position:absolute; right:1.6rem; bottom:1.9rem;
  color:var(--ink-soft); opacity:0; transform:translateX(-6px); transition:.22s ease}
a.svc:hover::after{opacity:1; transform:none; color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   SERVICE PAGE ACCENT — each page carries one logo colour (--c),
   used at low strength so the site still reads black and white.
   ══════════════════════════════════════════════════════════════ */

/* hero sits on a faint wash of its own colour */
.svc-page .svc-hero{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--c) 9%, var(--ground)) 0%,
    var(--ground) 100%);
  border-bottom-color:color-mix(in srgb, var(--c) 30%, var(--hairline));
}
.svc-page .svc-hero .accent-rule{width:80px; height:5px}
.svc-page .svc-hero .label{color:color-mix(in srgb, var(--c) 78%, var(--ink-soft))}
.svc-page .fact dt{color:color-mix(in srgb, var(--c) 62%, var(--ink-soft))}
.svc-page .facts{border-top-color:color-mix(in srgb, var(--c) 40%, var(--hairline))}

/* every section heading gets a short accent rule above it */
.svc-page .sec-head h2{position:relative; padding-top:1.15rem}
.svc-page .sec-head h2::before{
  content:""; position:absolute; top:0; left:0; width:42px; height:4px; background:var(--c);
}

/* checklist ticks — outlined and checked in the accent */
.svc-page .inc .tick{border-color:var(--c); background:transparent}
.svc-page .inc .tick::after{
  content:""; width:5px; height:9px; background:none; border-radius:0;
  border:solid var(--c); border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.svc-page .inc{border-bottom-color:color-mix(in srgb, var(--c) 18%, var(--hairline))}

/* scope of work — a tinted band, not another black one */
.svc-page .scope{
  background:color-mix(in srgb, var(--c) 10%, var(--ground));
  padding-block:clamp(2.5rem,5vw,3.5rem);
  border-block:1px solid color-mix(in srgb, var(--c) 28%, var(--hairline));
}
.svc-page .scope .label{color:color-mix(in srgb, var(--c) 85%, var(--ink))}
.svc-page .tag{
  border-color:color-mix(in srgb, var(--c) 42%, var(--hairline));
  background:var(--ground); transition:.18s ease;
}
.svc-page .tag:hover{border-color:var(--c); color:var(--c)}

/* process — accent rules and accent stage labels */
.svc-page .step{border-top-color:var(--c)}
.svc-page .step .label{color:color-mix(in srgb, var(--c) 82%, var(--ink-soft))}

/* faq — accent marker, and an accent spine on the open item */
.svc-page .faq{border-top-color:color-mix(in srgb, var(--c) 35%, var(--hairline))}
.svc-page .faq summary::after{color:var(--c)}
.svc-page .faq details[open]{box-shadow:inset 3px 0 0 var(--c)}
.svc-page .faq details[open] summary,
.svc-page .faq details[open] .ans{padding-left:1.15rem}
.svc-page .faq summary,.svc-page .faq .ans{transition:padding-left .2s ease}
.svc-page .faq details[open] summary::after{color:var(--c)}