@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 .rows{display:block;position:relative}
/* One unbroken edge, not one per row. On the gate the two halves meet along a
   single seam that runs the full height; a border on each object would break
   it into ticks wherever a row's text is shorter than its row. */
.thesis .rows::before{
  content:"";position:absolute;left:132px;top:0;bottom:0;width:1px;
  background:var(--line);
}
.thesis .line{
  display:grid;grid-template-columns:132px 1fr;gap:0;align-items:baseline;
  padding:22px 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;padding-right:24px;
}
.thesis .obj{
  /* The seam. On the gate two halves meet at a hard vertical edge; here the
     same edge runs down the hero, dividing the verb from what it acts on. */
  padding-left:30px;
  font-size:clamp(1.85rem,5vw,3.45rem);font-weight:650;letter-spacing:-0.038em;
  line-height:1.06;color:var(--ink);
}
@media(max-width:600px){
  .thesis .line{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .thesis .verb{font-size:.66rem;padding-right:0}
  .thesis .obj{padding-left:0}
  .thesis .rows::before{display:none}
}

.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)}
/* When the list IS the section (the about page), the band padding is
   already the space above it. */
.items:first-child{margin-top:0}
.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)}
.contact .after-mail{margin-top:28px;font-size:.95rem}
.contact .after-mail a{color:var(--mute)}
.contact .after-mail a:hover{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);
}

/* ── Arrival from the gate ─────────────────────────────────────────────
   The standing direction of 2026-08-01 governs the opening block: both
   pages open reversed and the masthead stays light, so the black band
   reads as a deliberate opening rather than a theme. That already gives
   continuity from the gate's dark half, so nothing here re-paints it.
   What carries the gate inward instead is the seam and the scale.       */
.hero .thesis .rows::before{background:#22252b}

/* ── The ledger: the one thing here nobody else can print ──────────────
   Every other section on this page is a claim about what we do. This is
   a measurement of the market the reader already competes in, taken from
   the public record, and it is set as a record rather than as marketing:
   mono numerals, hairlines, a source line, no adjectives.               */
.ledger{
  --line:#242424;
  background:var(--reverse);color:var(--paper);border-top:0;padding:96px 0;
}
.ledger .h2{color:var(--paper)}
.ledger .eyebrow{color:#7c7c7c}
.ledger .lede{color:#a4a4a4}
.figs{
  margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #242424;
}
.fig{padding:30px 24px 34px;border-left:1px solid #242424}
.fig:first-child{border-left:0;padding-left:0}
.fig .n{
  font-family:var(--mono);font-weight:400;color:var(--paper);
  font-size:clamp(1.9rem,4.2vw,3rem);letter-spacing:-0.045em;line-height:1;
}
.fig .k{margin-top:14px;font-size:.88rem;line-height:1.5;color:#8f8f8f;max-width:24ch}
@media(max-width:900px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig{padding:26px 20px 28px}
  .fig:nth-child(odd){border-left:0;padding-left:0}
  .fig:nth-child(n+3){border-top:1px solid #242424}
}
@media(max-width:520px){
  .figs{grid-template-columns:1fr}
  .fig{border-left:0;padding:22px 0 24px;border-top:1px solid #242424}
  .fig:first-child{border-top:0}
  .fig .k{max-width:none}
}

/* ── 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}}

/* ── About page opener ────────────────────────────────────────────────
   Same reversed band as the two service pages, at a lower rank: this
   page states who we are, it does not sell. No thesis rows, no CTA. */
.hero--short{padding:88px 0 84px}
.hero--short .eyebrow{color:#7c7c7c}
.hero--short .h1-plain{
  margin-top:14px;color:#ffffff;
  font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-0.04em;line-height:1.08;max-width:18ch;
}
.hero--short .lede{margin-top:26px;color:#b6bdc6;max-width:58ch}
.hero--short a{color:#ffffff}
@media(max-width:640px){.hero--short{padding:56px 0 52px}}

/* ══ Service level tiers ═════════════════════════════════════════════ */
/* The price is the first thing a contractor looks for, so it is set at
   display size and the sales line sits under it, not the other way round.
   Owner direction 2026-08-19: the cards were a wall of text and the number
   they exist to state was the smallest type in them. */
.tiers{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tier{border:1px solid var(--line);padding:34px 30px 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);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.tier .flag{
  font-size:.58rem;letter-spacing:.16em;padding:3px 7px 2px;
  background:var(--ink);color:var(--paper);
}
.price-group{margin-top:18px}
.tier .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tier .amt{font-size:clamp(2.1rem,3.4vw,2.7rem);font-weight:650;letter-spacing:-0.045em;line-height:1;color:var(--ink)}
.tier .per{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tier .price-add{margin-top:9px;font-size:.94rem;color:var(--body)}
.tier .who{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
  font-size:1rem;line-height:1.45;color:var(--mute);
}
.tier ul{list-style:none;margin-top:22px;flex:1}
.tier li{position:relative;padding-left:20px;margin-bottom:11px;font-size:.95rem;line-height:1.5;color:var(--body)}
.tier li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;background:var(--ink)}
.tier .btn{margin-top:28px;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}
/* Subgrid puts the price, the sales line, the list and the button of all
   three cards on the same baselines, so the middle card's second price
   line cannot knock the others out of alignment. Flex above is the
   fallback where subgrid is unsupported; nothing breaks without it. */
@supports (grid-template-rows: subgrid){
  @media(min-width:901px){
    .tiers{grid-template-rows:auto auto auto 1fr auto}
    .tier{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
    .tier ul{margin-top:22px}
  }
}
@media(max-width:900px){.tiers{grid-template-columns:1fr;gap:18px}}


/* ── Documents: policies of record ────────────────────────────────────
   The published text of a signed corporate document. Same monochrome
   tokens as the rest of the site; the only new job is long-form prose
   with numbered clauses and a data table, which no other page needs.  */
.doc{max-width:74ch}
.doc h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:52px 0 0}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.02rem;font-weight:650;margin:34px 0 0;letter-spacing:-0.015em}
.doc p{margin-top:16px}
.doc p strong,.doc li strong{color:var(--ink);font-weight:600}
.doc em{font-style:italic}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.doc a:hover{text-decoration-thickness:2px}
.doc ul{margin:16px 0 0;padding:0;list-style:none}
.doc ul li{position:relative;padding-left:22px;margin-top:11px}
.doc ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--faint);
}
.doc > *:first-child{margin-top:0}
/* A document body that follows its download line needs the gap back. */
.doc-file + .doc,.doc-file + .doc-table{margin-top:40px}
.doc + .doc-table{margin-top:26px}
.doc-table + .doc{margin-top:34px}

/* Header block of a document: adopted / owner / review / status */
.doc-meta{
  margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.doc-meta div{background:var(--paper);padding:16px 18px}
.doc-meta dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);
}
.doc-meta dd{margin-top:6px;font-size:.94rem;color:var(--ink);font-weight:550}

/* Download row */
.doc-file{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;
}
.doc-file .kind{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);
}

/* Data table (GHG inventory, KPI plan) */
.doc-table{margin-top:22px;overflow-x:auto}
.doc-table table{border-collapse:collapse;width:100%;font-size:.92rem}
.doc-table caption{
  text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);padding-bottom:12px;
}
.doc-table th,.doc-table td{
  text-align:left;vertical-align:top;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--line);
}
.doc-table thead th{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);font-weight:400;border-bottom:1px solid var(--ink);
}
.doc-table tbody th{font-weight:600;color:var(--ink)}
.doc-table td:last-child,.doc-table th:last-child{padding-right:0}
.doc-table .num{white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-table tr.total th,.doc-table tr.total td{
  border-bottom:0;border-top:1px solid var(--ink);color:var(--ink);font-weight:650;
}

/* Signature / adoption block closing a document */
.doc-sign{
  margin-top:48px;padding-top:26px;border-top:1px solid var(--line);
  font-size:.94rem;color:var(--mute);
}
.doc-sign .name{display:block;margin-top:10px;color:var(--ink);font-weight:600}
.doc-sign .held{display:block;margin-top:6px;font-size:.9rem;color:var(--mute)}

.doc-note{margin-top:18px;font-size:.92rem;color:var(--mute)}

@media(max-width:640px){
  .doc h2{margin-top:40px}
  .doc-table table{font-size:.86rem}
  .doc-table th,.doc-table td{padding:10px 12px 10px 0}
}

/* A five-column plan is a table on a desktop and a list on a phone. Below
   720px the rows stack and each cell carries its own column label, so the
   content is read rather than scrolled sideways past its last column. */
@media(max-width:720px){
  .doc-table--stack table,.doc-table--stack tbody,.doc-table--stack tr,
  .doc-table--stack th,.doc-table--stack td{display:block;width:auto}
  .doc-table--stack thead{position:absolute;left:-9999px}
  .doc-table--stack tr{
    padding:22px 0;border-bottom:1px solid var(--line);
  }
  .doc-table--stack tr:last-child{border-bottom:0}
  .doc-table--stack tbody th{
    padding:0;border:0;font-family:var(--mono);font-size:.62rem;
    letter-spacing:.18em;color:var(--mute);font-weight:400;
  }
  .doc-table--stack td{padding:0;border:0;margin-top:12px}
  .doc-table--stack td::before{
    content:attr(data-l);display:block;font-family:var(--mono);font-size:.6rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:3px;
  }
  .doc-table--stack td[data-l="Objective"]::before{display:none}
  .doc-table--stack td[data-l="Objective"]{
    margin-top:6px;font-size:1.02rem;font-weight:650;color:var(--ink);
    letter-spacing:-0.015em;
  }
}

/* ── 2026-09-09 rebuild: nav dropdown, cards, tables, questions, form ── */
.mast-nav .has-menu{position:relative}
.menu summary{
  list-style:none;cursor:pointer;font-size:.9rem;font-weight:450;color:var(--mute);
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:" ▾";color:var(--faint)}
.menu summary:hover{color:var(--ink)}
.menu-list{
  list-style:none;position:absolute;left:-14px;top:calc(100% + 10px);z-index:80;
  background:var(--paper);border:1px solid var(--line);padding:10px 0;min-width:290px;
}
.menu-list li{padding:0}
.menu-list a{display:block;padding:8px 16px;font-size:.88rem;color:var(--body);text-decoration:none}
.menu-list a:hover{background:#f5f5f5;color:var(--ink)}
@media(max-width:820px){
  .masthead .wrap{height:auto;padding-top:10px;padding-bottom:10px}
  .mast-nav{flex-wrap:wrap;gap:14px}
  .menu-list{position:static;border:0;padding:6px 0 0;min-width:0}
  .menu-list a{padding:6px 0}
}

.crumbs{border-bottom:1px solid var(--line);font-size:.82rem;color:var(--mute)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.crumbs li+li::before{content:"· ";color:var(--faint)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}

.hero h1{font-size:clamp(2rem,4.6vw,3rem)}
.hero--sub{padding:64px 0 40px}
.hero-meta{margin-top:22px}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.door{display:block;border:1px solid var(--line);padding:28px;text-decoration:none;color:inherit}
.door:hover{border-color:var(--ink)}
.door .h2{font-size:1.3rem;margin-top:0}
.door p{margin-top:14px;color:var(--body)}
.door-link{display:inline-block;margin-top:18px;font-weight:550;color:var(--ink);border-bottom:1px solid var(--ink)}
@media(max-width:820px){.doors{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}
.card{display:block;border:1px solid var(--line);padding:22px;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--ink)}
.card h3{font-size:1.06rem}
.card p{margin-top:10px;font-size:.95rem}
.card .ticks{margin-top:12px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

.ticks{list-style:none;margin-top:10px}
.ticks li{position:relative;padding-left:20px;margin-top:9px}
.ticks li::before{content:"·";position:absolute;left:4px;color:var(--faint);font-weight:700}

.tbl{width:100%;border-collapse:collapse;margin-top:24px;font-size:.93rem}
.tbl th,.tbl td{border-top:1px solid var(--line);padding:12px 14px 12px 0;text-align:left;vertical-align:top}
.tbl thead th{border-top:0;border-bottom:1px solid var(--ink);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.tbl tbody th{font-weight:600;color:var(--ink)}
@media(max-width:760px){
  .tbl,.tbl tbody,.tbl tr,.tbl td,.tbl th{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{border-top:1px solid var(--line);padding:12px 0}
  .tbl th,.tbl td{border:0;padding:2px 0}
}

.qa{margin-top:26px;max-width:70ch}
.qa-item{padding-top:22px;margin-top:22px;border-top:1px solid var(--line)}
.qa-item:first-child{border-top:0;margin-top:0}
.qa-item h3{font-size:1.02rem}
.qa-anchor{text-decoration:none}
.qa-item p{margin-top:8px}

.cta-band{border-top:1px solid var(--line)}
.cta-row{margin-top:20px}
.btn{display:inline-block;padding:12px 20px;border:1px solid currentColor;text-decoration:none;font-size:.92rem;font-weight:550}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:var(--body)}
.btn--sm{padding:7px 14px;font-size:.85rem}
.reverse .btn{color:var(--paper)}

.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.form{max-width:52ch}
.field{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.field label{font-size:.82rem;font-weight:550;color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;color:var(--body);background:var(--paper);
  border:1px solid var(--line);padding:10px 12px;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.field--hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.contact-aside p{margin-top:10px}

/* Contrast and link-name fixes measured with Lighthouse, 2026-09-09 */
.hero{background:var(--reverse);color:var(--paper)}
.hero h1,.hero .h2,.hero h2{color:var(--paper)}
.hero .lede{color:#cfcfcf}
.hero .eyebrow{color:#9d9d9d}
.hero--sub{padding:56px 0 46px}
.reverse h2,.reverse .h2,.reverse h3{color:var(--paper)}
.reverse p{color:#e4e4e4}
.mast-nav a.btn--solid{color:var(--paper);background:var(--ink)}
.foot-legal span{color:var(--mute)}
.crumbs{background:var(--paper)}