@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ── Tokens ───────────────────────────────────────────────────────────
   Monochrome only. No accent colour anywhere: emphasis comes from
   weight, scale and space. Black on white is 21:1, so every contrast
   requirement is met by construction.                                   */
:root{
  --ink:#000000;
  --body:#2b2b2b;
  --mute:#6e6e6e;
  --faint:#a8a8a8;
  --line:#e2e2e2;
  --paper:#ffffff;
  --reverse:#0a0a0a;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --max:1040px;
  --gut:28px;
  --lab:132px;          /* left label column */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  font-family:var(--sans);font-size:16.5px;line-height:1.62;font-weight:400;
  color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"cv08" 1;
}
h1,h2,h3{color:var(--ink);font-weight:650;letter-spacing:-0.025em;line-height:1.14}
a{color:inherit}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}
img,svg{display:block;max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:200}
.skip:focus{left:0}

/* Utility type -------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
}
.h2{font-size:clamp(1.55rem,3.1vw,2.15rem);margin-top:12px}
.lede{font-size:1.12rem;color:var(--mute);max-width:60ch;margin-top:18px}

/* Sections ------------------------------------------------------------ */
.band{padding:96px 0;border-top:1px solid var(--line)}
.band--first{border-top:0}
.band--tight{padding:72px 0}
@media(max-width:640px){.band{padding:64px 0}}

/* Two-column label + content row */
.row{display:grid;grid-template-columns:var(--lab) 1fr;gap:40px;align-items:start}
@media(max-width:820px){.row{grid-template-columns:1fr;gap:14px}}

/* ── Masthead ─────────────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
.wordmark{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-weight:650;font-size:.98rem;letter-spacing:-0.022em;white-space:nowrap;
}
.wordmark svg{flex:none}
.mast-nav{display:flex;align-items:center;gap:26px;list-style:none}
.mast-nav a{text-decoration:none;font-size:.9rem;font-weight:450;color:var(--mute)}
.mast-nav a:hover{color:var(--ink)}
.mast-nav a[aria-current="page"]{color:var(--ink);font-weight:550}
@media(max-width:560px){
  .mast-nav{gap:18px}
  .mast-nav a{font-size:.84rem}
  .wordmark span{display:none}
}

/* ── Hero: the three-verb thesis ──────────────────────────────────────
   The verb column is the structural device and it encodes something
   true — three distinct ways a client engages us, not decoration.      */
.hero{padding:104px 0 84px}
@media(max-width:640px){.hero{padding:60px 0 52px}}

.thesis{margin:0;font-weight:400}
.thesis .line{
  display:grid;grid-template-columns:104px 1fr;gap:24px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--line);
}
.thesis .line:last-child{border-bottom:1px solid var(--line)}
.thesis .verb{
  font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.thesis .obj{
  font-size:clamp(1.7rem,4.4vw,2.85rem);font-weight:650;letter-spacing:-0.035em;
  line-height:1.1;color:var(--ink);
}
@media(max-width:600px){
  .thesis .line{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .thesis .verb{font-size:.66rem}
}

.hero .lede{margin-top:34px;font-size:1.16rem;color:var(--body);max-width:56ch}
.hero-meta{
  margin-top:30px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}

/* Buttons -------------------------------------------------------------- */
.cta-row{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-block;text-decoration:none;font-size:.95rem;font-weight:550;
  padding:13px 26px;border:1px solid var(--ink);transition:background .15s,color .15s;
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--paper);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* ── Item list (capabilities, comparisons) ────────────────────────── */
.items{margin-top:44px;border-top:1px solid var(--line)}
.item{
  display:grid;grid-template-columns:var(--lab) 1fr;gap:40px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.item h3{font-size:1.08rem;font-weight:650;letter-spacing:-0.015em}
.item p{color:var(--mute);max-width:60ch}
.item .meta{
  margin-top:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}
@media(max-width:820px){.item{grid-template-columns:1fr;gap:10px;padding:24px 0}}

/* Numbered sequence — used ONLY where order genuinely carries meaning */
.seq{margin-top:44px;border-top:1px solid var(--line);counter-reset:step}
.seq-step{
  display:grid;grid-template-columns:56px var(--lab) 1fr;gap:28px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.seq-step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--faint);
}
.seq-step h3{font-size:1.02rem}
.seq-step p{color:var(--mute);max-width:58ch}
@media(max-width:820px){
  .seq-step{grid-template-columns:44px 1fr;gap:16px 18px}
  .seq-step h3{grid-column:2}
  .seq-step p{grid-column:2}
}

/* Split: what you do / what we do ------------------------------------ */
.split{margin-top:44px;border-top:1px solid var(--line)}
.split-row{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.split-head{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:12px;
}
.split-head span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);
}
.split-row p{color:var(--body)}
.split-row p:last-child{color:var(--mute)}
@media(max-width:700px){
  .split-head{display:none}
  .split-row{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .split-row p::before{
    display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint);margin-bottom:4px;
  }
  .split-row p:first-child::before{content:"You"}
  .split-row p:last-child::before{content:"We"}
}

/* ── Reverse band ─────────────────────────────────────────────────── */
/* Scoped to .statement, NOT to `.reverse p` — an element-qualified rule here
   would out-specify .eyebrow and blow the label up to display size. */
.reverse{background:var(--reverse);color:var(--paper);padding:88px 0;border:0}
.reverse .statement{
  margin-top:18px;
  font-size:clamp(1.45rem,3.4vw,2.25rem);line-height:1.26;letter-spacing:-0.03em;
  font-weight:650;color:var(--paper);max-width:24ch;
}
.reverse .statement span{color:#7c7c7c}
.reverse .eyebrow{color:#7c7c7c}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq{margin-top:44px;max-width:76ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:baseline;gap:24px;padding:22px 2px;
}
.faq summary::-webkit-details-marker{display:none}
.faq h3{font-size:1rem;font-weight:550;letter-spacing:-0.01em}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1rem;color:var(--faint);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 2px 24px;color:var(--mute);max-width:66ch}
.faq details p + p{padding-top:0;margin-top:-8px}

/* ── Contact ───────────────────────────────────────────────────────── */
.contact h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.contact .mail{
  display:inline-block;margin-top:26px;text-decoration:none;color:var(--ink);
  font-size:clamp(1.15rem,2.6vw,1.6rem);font-weight:650;letter-spacing:-0.025em;
  border-bottom:2px solid var(--line);padding-bottom:5px;transition:border-color .15s;
}
.contact .mail:hover{border-bottom-color:var(--ink)}

/* ── Footer ────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:36px 0 40px}
.foot-in{display:flex;flex-wrap:wrap;gap:18px 32px;justify-content:space-between;align-items:center}
.foot-nav{display:flex;flex-wrap:wrap;gap:22px;list-style:none}
.foot-nav a{text-decoration:none;font-size:.88rem;color:var(--mute)}
.foot-nav a:hover{color:var(--ink)}
.foot-legal{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}

/* ── Signature: the section index ──────────────────────────────────────
   A quiet register of the page pinned to the right edge — a table of
   contents that doubles as a position indicator. The name is North
   Quant: a bearing and a measure. Desktop only, purely additive, and
   the page is complete without it.                                      */
.index{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:50;
  /* Difference blend against whatever scrolls beneath: the rail reads black
     on the white sections and white on the reverse band, with no state to
     track. Without this it vanishes entirely over the black band. */
  mix-blend-mode:difference;
}
.index ol{list-style:none}
.index li{display:flex;align-items:center;justify-content:flex-end;gap:9px;height:25px}
/* Colours are INVERTED because of the difference blend above: a white source
   resolves to black on the white sections and stays white on the reverse
   band. Using --ink here would make the active item invisible on white. */
.index a{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8a8a;transition:color .18s;
}
.index .tick{display:block;width:13px;height:1px;background:#8a8a8a;transition:width .18s,background .18s}
.index .name{opacity:0;transition:opacity .18s}
.index a:hover .name,.index a:focus-visible .name{opacity:1}
.index a:hover,.index a:focus-visible{color:#ffffff}
.index a:focus-visible{outline-color:#ffffff}
.index li[aria-current="true"] a{color:#ffffff}
.index li[aria-current="true"] .tick{width:26px;background:#ffffff}
.index li[aria-current="true"] .name{opacity:1}
@media(max-width:1239px){.index{display:none}}

/* ══ Black hero ══════════════════════════════════════════════════════
   Owner direction 2026-08-01. The opening block is reversed on both
   pages; everything below it stays on white. The masthead stays light,
   so the black band reads as a deliberate opening rather than a theme. */
.hero{background:var(--reverse);padding:104px 0 100px}
/* The name leads the hero. It is the largest thing on the page, and the verb
   rows step down beneath it so the two don't compete for the same rank. */
.hero .brand{
  display:block;margin-bottom:46px;
  font-size:clamp(2rem,6.4vw,4.5rem);font-weight:650;
  letter-spacing:-0.045em;line-height:1;color:#ffffff;
}
.hero .thesis .obj{font-size:clamp(1.4rem,3.2vw,2.05rem)}
.hero .thesis .line{border-top-color:#22252b}
.hero .thesis .line:last-child{border-bottom-color:#22252b}
.hero .thesis .verb{color:#8d949f}
.hero .thesis .obj{color:#ffffff}
.hero .lede,.hero .sub{color:#b6bdc6}
.hero .quiet,.hero .hero-meta{color:#868d98}
.hero .btn--solid{background:#ffffff;color:var(--ink);border-color:#ffffff}
.hero .btn--solid:hover{background:transparent;color:#ffffff}
.hero .btn--ghost{color:#ffffff;border-color:#3b4048}
.hero .btn--ghost:hover{background:#ffffff;color:var(--ink);border-color:#ffffff}
.hero a:focus-visible{outline-color:#ffffff}
.hero ::selection{background:#ffffff;color:var(--ink)}
@media(max-width:640px){.hero{padding:64px 0 60px}}

/* ══ Service level tiers ═════════════════════════════════════════════ */
.tiers{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tier{border:1px solid var(--line);padding:32px 28px 34px;display:flex;flex-direction:column;background:var(--paper)}
.tier--feature{border-color:var(--ink);border-width:2px}
.tier .name{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
/* min-height keeps the rule under each heading on one shared baseline */
.tier .who{margin-top:16px;font-size:1.14rem;font-weight:650;color:var(--ink);letter-spacing:-0.02em;line-height:1.25;min-height:3.75em}
.tier .price{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted,var(--mute))}
.tier ul{list-style:none;margin-top:20px;flex:1}
.tier li{position:relative;padding-left:20px;margin-bottom:11px;font-size:.95rem;color:var(--body)}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--ink)}
.tier li.off{color:var(--faint)}
.tier li.off::before{background:var(--faint)}
.tier .btn{margin-top:26px;text-align:center;padding:12px 20px;font-size:.92rem}
.tier-note{margin-top:26px;font-size:.92rem;color:var(--muted,var(--mute));max-width:64ch}
@media(max-width:900px){.tiers{grid-template-columns:1fr;gap:18px}.tier .who{min-height:0}}