/* ═══════════════════════════════════════════════════════════
   GLASSBOX — design version
   Cool ground, no boxes, no numbering, no keyword stacks.
   Structure comes from a hanging margin, hairline rules and
   one asymmetric measure. Colour appears only where a claim
   is being marked.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ground and ink: warm neutrals, so the page and the photographs share a temperature */
  --paper:#F3F1ED;
  --paper-2:#EDEAE4;     /* specimen tint, for evidence exhibits only */
  --ink:#14120F;
  --muted:#5C5852;       /* running prose: 7.0:1 on paper */
  --faint:#6B655E;       /* furniture only; 5.0:1, still legible as a label */
  --rule:#C6C1B8;        /* structural rules */
  --hair:#DEDAD3;        /* rules inside a block */
  --edge:#E6E2DB;        /* full-bleed section rules */
  --accent:#BE3A22;
  --invert:#14120F;
  --on-dark:#F3F1ED;

  --gut:22px;
  --side:190px;          /* hanging margin */
  --measure:574px;       /* text column: ~66 characters at 18px */
  --page:1180px;

  /* type: ten steps, each a perceptible jump */
  --t-micro:11px;
  --t-label:12px;
  --t-fine:13.5px;
  --t-small:15px;
  --t-body:18px;
  --t-body-lg:20px;
  --t-deck:22px;
  --t-lede:25px;
  --lh-body:1.62;
  --ls-caps:.14em;

  /* space: one scale, six steps */
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:56px; --s6:88px;

  --display:"Libre Franklin",system-ui,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Charter,"Iowan Old Style",Georgia,serif;
  --sans:"Libre Franklin",system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:var(--t-body);line-height:var(--lh-body);font-optical-sizing:auto;
  text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.invert :focus-visible,.private :focus-visible{outline-color:var(--on-dark)}

.private{background:var(--ink);color:rgba(242,243,243,.72);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:8px 16px}

/* ── header ── */
.top{max-width:var(--page);margin:0 auto;padding:30px 40px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.mark{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-.022em;
  text-decoration:none;display:inline-flex;align-items:center;gap:11px;color:var(--ink)}
.mark svg{width:23px;height:23px;flex:none}
.top nav{display:flex;gap:26px}
.top nav a{font-size:14px;color:var(--muted);text-decoration:none;padding:6px 0 7px;
  border-bottom:2px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

/* ── tab panels: hash-routed; without JS every panel shows, stacked ── */
.js .panel{display:none}
.js[data-tab="overview"] #overview,.js[data-tab="services"] #services,
.js[data-tab="method"] #method,.js[data-tab="team"] #team{display:block}

/* ── opening ── */
.open{max-width:var(--page);margin:0 auto;padding:72px 40px 56px;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);
  gap:0 50px;align-items:start}
.open-copy{grid-column:1 / -1;max-width:none}
.hero{grid-column:1 / -1;width:100%;max-width:none;margin:34px 0 32px}
.open-more{grid-column:1 / -1;max-width:none}
.open-more .lead{max-width:720px;text-wrap:balance}
/* one line on desktop; sized to the page measure */
h1.type{white-space:nowrap;font-size:clamp(1.5rem,3.25vw,2.6rem);letter-spacing:-.022em}
/* the headline types itself in, left to right */
.type .ch{transition:opacity .04s linear}
@keyframes tch{to{opacity:1}}
.type.typing::after,.type.done::after{content:"";display:inline-block;width:3px;height:.82em;margin-left:.12em;vertical-align:-.06em;background:var(--accent)}
.type.typing::after{opacity:0}
.type.done::after{animation:caret 1.1s steps(1) 3;opacity:0}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.type .ch{animation:none;opacity:1}.type::after{display:none!important}
  /* reduce motion asks us not to move things; a single cross-fade is not movement,
     so the headline still arrives rather than just being there */
  .type.softin{animation:softin .55s ease-out both}}
@keyframes softin{from{opacity:0}to{opacity:1}}
.hero img{width:100%;height:auto;display:block;
  box-shadow:0 2px 3px -2px rgba(15,17,18,.18), 2px 16px 32px -18px rgba(15,17,18,.26)}

/* everything mounted in the body column: the note and the plates share one measure */
.mount{max-width:var(--page);margin:0 auto;padding:0 40px 96px;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:0 50px}
.mount > *{grid-column:2;max-width:var(--measure)}
.over{grid-column:1 / -1;font-family:var(--sans);font-weight:500;font-size:15.5px;
  line-height:1.5;letter-spacing:.01em;color:var(--ink);margin:0 0 14px;align-self:start}
.over::before{content:"";display:block;width:22px;height:2px;background:var(--accent);margin-bottom:12px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(1.95rem,3.7vw,3rem);
  line-height:1.13;letter-spacing:-.028em;margin-bottom:26px;text-wrap:balance}
.lead{font-family:var(--serif);font-size:var(--t-lede);line-height:1.44;color:var(--ink);
  max-width:30ch;letter-spacing:-.005em}
.acts{margin-top:36px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.go{display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 30px;background:var(--ink);color:var(--paper);
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:background .18s ease}
.go:hover{background:var(--accent);color:var(--paper)}
.go:active{background:var(--accent)}
.quiet{font-size:15px;color:var(--muted);text-decoration:none;padding-bottom:4px;
  box-shadow:0 1px 0 var(--rule)}
.quiet:hover{color:var(--ink);box-shadow:0 1px 0 var(--ink)}

/* ── the note: defined by rules, not a box ── */
.note{background:#F6F6F6 url(/img/paper.jpg) center/cover;
  padding:22px 26px 24px;
  box-shadow:
    inset 0 0 0 1px rgba(15,17,18,.045),
    0 2px 3px -2px rgba(15,17,18,.20),
    2px 16px 32px -16px rgba(15,17,18,.30),
    7px 9px 0 -1px #EEEFEF,
    8px 11px 16px -9px rgba(15,17,18,.16)}
.note-head{border-top:2px solid var(--ink);padding-top:12px}
.note-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.01em;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.note-head span{letter-spacing:.02em}
.note-head em{font-family:var(--sans);font-style:normal;font-weight:400;color:var(--faint);font-size:11.5px}
.note-ref{padding:11px 0;border-bottom:1px solid var(--hair);display:grid;gap:4px}
.note-ref div{display:grid;grid-template-columns:82px 1fr;gap:16px;align-items:baseline}
.note-ref dt{font-family:var(--sans);font-weight:500;font-size:11.5px;color:var(--faint)}
.note-ref dd{font-family:var(--display);font-size:14px}
.note-verdict{font-family:var(--display);font-weight:400;font-size:16.5px;line-height:1.28;padding:12px 0;
  border-bottom:1px solid var(--hair)}
.note-verdict span{color:var(--accent);box-shadow:0 2px 0 var(--accent)}
.note-body{padding-top:11px}
.note-lab{font-family:var(--sans);font-weight:500;font-size:11.5px;color:var(--faint);
  margin:0 0 6px}
.note-body p + .note-lab{margin-top:13px}
.note-body p:not(.note-lab){font-family:var(--display);font-size:13.5px;line-height:1.42;
  color:var(--muted);padding-left:15px;position:relative;margin-bottom:6px}
.note-body p:not(.note-lab)::before{content:"";position:absolute;left:0;top:.7em;
  width:8px;height:1px;background:var(--rule)}
.note figcaption{margin-top:13px;padding-top:8px;border-top:1px solid var(--hair);
  font-size:12px;line-height:1.45;color:var(--faint)}

/* engagement sequence — ordered by reading, not by numerals */
.seq{list-style:none;margin:4px 0 8px}
.seq li{padding:16px 0;border-top:1px solid var(--hair);
  font-size:15.5px;line-height:1.52;color:var(--muted)}
.seq li:first-child{border-top:1px solid var(--rule)}
.seq b{color:var(--ink);font-weight:500}

/* contextual CTA — a marked line, not a second primary button */
.nudge{margin-top:38px}
.nudge a{display:flex;align-items:center;min-height:52px;
  border-top:2px solid var(--ink);padding-top:14px;
  font-size:16px;font-weight:500;letter-spacing:-.005em;
  color:var(--ink);text-decoration:none}
.nudge a:hover{color:var(--accent);border-top-color:var(--accent)}

/* skip link — visible only on keyboard focus */
.skip{position:absolute;left:-9999px;top:0;z-index:20}
.skip:focus{left:0;width:auto;display:inline-flex;align-items:center;min-height:44px;
  padding:0 20px;background:var(--ink);color:var(--paper);
  font-size:14px;text-decoration:none}
main:focus{outline:none}

.totop{display:inline-flex;align-items:center;min-height:44px;color:inherit;
  text-decoration:none;box-shadow:0 1px 0 var(--rule);margin-left:6px}
.totop:hover{color:var(--ink);box-shadow:0 1px 0 var(--ink)}

/* ── overview: compact services + onward links ── */
.offer.compact div{position:relative;padding:18px 0 18px 80px}
.offer.compact dt{font-size:17px;margin-bottom:5px}
.offer.compact dd{font-size:15.5px}
.offer.compact dt{font-size:17px;line-height:1.4}
.offer.compact dd b{color:var(--ink);font-weight:500}
.more{margin-top:22px}
.more a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;
  color:var(--ink);text-decoration:none;box-shadow:0 1px 0 var(--rule)}
.more a:hover{color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.more a span,.nudge a span{margin-left:.4em}

/* ── people: photo placeholders (swap <span class="ph"> for <img>) ── */
.ph{position:relative;display:flex;align-items:center;justify-content:center;flex:none;aspect-ratio:1;
  background:#F6F6F6 url(/img/paper.jpg) center/cover;
  font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.05em;color:var(--faint);
  box-shadow:inset 0 0 0 1px rgba(15,17,18,.07)}
.ph b{font-weight:400}
/* watercolour portraits: multiplied onto the paper and feathered, so they read as painted on the page */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%;
  mix-blend-mode:darken;
  -webkit-mask-image:radial-gradient(ellipse 86% 80% at 50% 46%,#000 62%,transparent 100%);
          mask-image:radial-gradient(ellipse 86% 80% at 50% 46%,#000 62%,transparent 100%)}
.ph:has(img){background:none;box-shadow:none}
.ph:has(img) b{display:none}
.roster .ph,.who article .ph{aspect-ratio:3/4}
.roster .ph img,.who article .ph img{object-position:50% 20%}
.strip{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:8px}
.strip li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:2px 13px;align-items:center;
  padding-top:16px;border-top:1px solid var(--hair)}
.strip .ph{width:60px;height:60px;grid-row:1/3;font-size:16px}
.strip b{font-family:var(--display);font-weight:500;font-size:15.5px;letter-spacing:-.01em;color:var(--ink);align-self:end}
.strip span:not(.ph){font-size:12.5px;color:var(--faint);line-height:1.3;align-self:start}
.roster{list-style:none;margin-top:8px}
.roster li{scroll-margin-top:24px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 28px;
  padding:24px 0;border-top:1px solid var(--rule)}
.roster .ph{width:150px;height:200px;grid-row:1/span 4}
.roster h3{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.012em;margin-bottom:3px}
.roster .role{font-size:13px;color:var(--faint);margin-bottom:10px}
.roster p{font-size:14.5px;color:var(--muted);line-height:1.56}
.lead1{font-size:15.5px;color:var(--ink)}
.who .lead1{font-size:16.5px}
.bio{margin-top:6px}
.bio summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink);box-shadow:0 1px 0 var(--rule)}
.bio summary::-webkit-details-marker{display:none}
.bio summary::after{content:"+";margin-left:8px;color:var(--faint)}
.bio[open] summary::after{content:"–"}
.bio summary:hover{color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.bio p{margin-top:8px}
/* larger disclosures for optional depth */
.reveal{margin-top:30px;border-top:1px solid var(--rule)}
.reveal summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  min-height:56px;font-family:var(--display);font-weight:500;font-size:17px;color:var(--ink)}
.reveal summary::-webkit-details-marker{display:none}
.reveal summary::after{content:"+";font-size:22px;font-weight:300;color:var(--faint);margin-left:16px}
.reveal[open] summary::after{content:"–"}
.reveal summary:hover{color:var(--accent)}
.reveal > :not(summary){margin-top:8px}
.contactline{margin-top:22px}
.roster .tbc{color:var(--faint)}

/* the diligence note, when it sits inside a panel body rather than under the hero */
.mount.inpanel{display:block;max-width:none;padding:0;margin:12px 0 0}
.mount.inpanel > *{max-width:none}

/* ── the row: hanging margin + measure ── */
.row{max-width:var(--page);margin:0 auto;padding:56px 40px 60px;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:0 50px;align-items:start}
.row.last{padding-bottom:72px}
.side{font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);position:sticky;top:32px}
.side::before{content:"";display:block;width:22px;height:2px;background:var(--ink);margin-bottom:12px}
.side.light::before{background:rgba(242,243,243,.55)}
.side.light{color:rgba(242,243,243,.5)}
/* overview: a sticky "on this page" rail in the margin; the per-section labels give way to it on desktop */
.rail{position:sticky;top:32px;height:0;overflow:visible;z-index:3;max-width:var(--page);margin:0 auto;padding:0 40px}
.rail ol{list-style:none;width:var(--side);padding-top:4px}
.rail::before{content:"";display:block;width:22px;height:2px;background:currentColor;margin-bottom:12px}
/* ink on the page; flips to paper while it overlaps the dark band (toggled by script, no blend modes) */
.rail{color:var(--ink);transition:color .15s linear,opacity .2s linear}
.rail.off{opacity:0;pointer-events:none}
.rail.on-dark{color:var(--paper)}
.rail.jump a{color:var(--ink);opacity:1;font-size:13px;border-left-color:transparent}
.rail.jump a:hover{color:var(--ink);border-left-color:var(--ink)}
.rail.jump a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--ink)}
.rail.jump.on-dark a{color:var(--paper)}
.rail.jump.on-dark a:hover,.rail.jump.on-dark a[aria-current="true"]{color:var(--paper);border-left-color:var(--paper)}
.rail.on-dark::before{background:var(--paper)}
#overview .row > .side,#overview .invert-in > .side{visibility:hidden}
.jb{display:none}
/* sticky service index in the margin */
.jump ol{list-style:none;margin-top:16px;display:grid;gap:2px}
.jump a{display:block;font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:0;
  text-transform:none;color:var(--faint);text-decoration:none;padding:6px 0 6px 12px;
  border-left:2px solid transparent;line-height:1.35}
.jump a:hover{color:var(--ink)}
.jump a[aria-current="true"]{color:var(--ink);border-left-color:var(--accent)}
.svcline{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-family:var(--display);
  font-size:16px;font-weight:500;letter-spacing:-.008em;color:var(--ink);text-decoration:none;box-shadow:0 1px 0 var(--rule)}
.svcline::after{content:"→";margin-left:.45em;color:var(--faint)}
.si{display:block;width:56px;height:56px;color:var(--accent);stroke-width:2.5px}
.si *{vector-effect:non-scaling-stroke}
.offer.compact dt .glyph{position:absolute;left:0;top:22px;color:var(--accent)}
.offer.compact dt .glyph:hover{color:var(--ink)}
.offer.full dt .si{position:absolute;left:0;top:25px}
.svcline:hover{color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.svcline:hover::after{color:var(--accent)}
.offer.compact dd .svcline{display:flex;width:max-content;max-width:100%}
.body{max-width:var(--measure)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.3vw,1.8rem);
  line-height:1.26;letter-spacing:-.018em;margin-bottom:26px}
.body p{color:var(--muted);margin-bottom:19px}
.body p:last-child{margin-bottom:0}
.stand{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.55;
  color:var(--ink)!important;margin-bottom:26px!important}
.foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--hair);
  font-size:14.5px;color:var(--faint)!important}

/* ── the claim ── */

/* pencil markup — the phrases the reading below takes apart */

/* ── exhibits ── */
.exhibit{margin:48px 0 0;padding-top:26px;border-top:1px solid var(--rule)}
.exhibit.wide{margin-top:44px}
.ex-lab{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--faint)!important;
  margin-bottom:26px!important}
.ex-note{margin-top:24px!important;font-size:14.5px;color:var(--faint)!important;max-width:52ch}

/* evidence chain */
.chain{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:34px}
.chain li{position:relative;padding-top:26px;padding-right:18px;font-family:var(--sans);
  font-size:var(--t-fine);line-height:1.35;color:var(--muted)}
.chain li.held{color:var(--ink)}
.chain li::after{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:var(--rule)}
.chain li.unreached::after{background:repeating-linear-gradient(90deg,var(--muted) 0 3px,transparent 3px 7px)}
.chain li:last-child{padding-right:0}
.chain li:last-child::after{right:50%}
.chain i{position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--ink);background:var(--ink);z-index:2}
.chain li.unreached{color:var(--faint)}
.chain li.unreached i{background:var(--paper);border-color:var(--muted)}
.chain li.edge i{border-color:var(--accent);border-width:2px}
.chain li.edge::before{content:"Funding decision taken here";position:absolute;top:-27px;left:0;
  right:auto;width:max-content;white-space:nowrap;
  padding-top:8px;border-top:1px solid var(--accent);font-weight:600;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}

/* coverage matrix */

/* a document photographed, not a design element — the shadow is in the picture */
figure.sheet{margin:34px 0 6px}
figure.sheet img{width:100%;height:auto;display:block}
figure.sheet figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);
  font-family:var(--sans);font-size:var(--t-fine);line-height:1.45;color:var(--faint)}

/* ── photographic plates ── */
figure.plate{max-width:var(--page);margin:0 auto 30px;padding:0 40px;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:0 50px}
figure.plate > *{grid-column:2;max-width:var(--measure)}
figure.plate img{width:100%;height:230px;object-fit:cover;display:block;
  box-shadow:0 2px 3px -2px rgba(15,17,18,.18), 2px 16px 32px -18px rgba(15,17,18,.26)}
figure.plate figcaption{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hair);
  font-family:var(--sans);font-size:var(--t-fine);line-height:1.45;color:var(--faint)}
.stand.mt{margin-top:34px!important;padding-top:26px;border-top:1px solid var(--rule)}
.row.after-plate{border-top:0}

/* ── exhibits read as one family with the note ── */
.exhibit{border-top:2px solid var(--ink)}
.ex-lab{font-size:11.5px!important;letter-spacing:.14em;text-transform:uppercase}

/* ── footer section index ── */
.index{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;width:100%;margin-bottom:18px}
.index a{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--faint);
  text-decoration:none;border-top:1px solid var(--hair)}
.index a:hover{color:var(--ink)}
.tocontact{display:none}

/* an end-mark: the aperture used once more, to close the document */
.colophon{display:inline-flex;align-items:center;gap:9px}
.endmark{width:14px;height:14px;flex:none;color:#9EA4A6}

/* ── old inset ── */
.inset{margin:52px 0 0}
.inset img{width:100%;height:clamp(200px,26vw,300px);object-fit:cover;object-position:50% 42%}
.inset figcaption{margin-top:13px;font-family:var(--sans);font-size:13.5px;color:var(--faint)}

/* ── practice ── */
.para{font-family:var(--sans);font-weight:600;font-size:var(--t-label);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--faint)!important;padding-bottom:0;border-bottom:0;
  margin:var(--s5) 0 var(--s2)!important}
.offer div{padding:26px 0;border-top:1px solid var(--hair)}
.offer div:first-child{border-top:1px solid var(--rule)}
.offer dt{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.012em;margin-bottom:7px}
.offer dd{font-size:16px;color:var(--muted);line-height:1.62}
.offer dt .k{display:block;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.offer.full div{position:relative;padding:24px 0 24px 80px;scroll-margin-top:24px}
.offer.full dt{font-size:20px;margin-bottom:10px}
.offer.full dd p+p{margin-top:12px}
.offer.full .get{color:var(--ink);font-size:15px;line-height:1.5}

/* ── inverted band ── */
.invert{background:var(--invert);color:rgba(242,243,243,.76);padding:100px 0 106px}
.invert-in{max-width:var(--page);margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:0 50px;align-items:start}
.invert h2{color:#F2F3F3}
.invert .body p{color:rgba(242,243,243,.76)}

/* ── five questions ── */
.five{list-style:none;margin:4px 0 30px}
.five li{font-family:var(--display);font-weight:400;font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.42;padding:17px 0;border-top:1px solid var(--hair);color:var(--ink)}
.five .k{display:block;font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.five li:first-child{border-top:1px solid var(--rule)}
.five.why{margin-bottom:6px}
/* the five questions as a ladder: each one set in from the last, joined by a thin elbow */
.five.steps{--step:30px;border-top:1px solid var(--rule);padding-top:6px}
.five.steps li{border-top:0;padding:14px 0 14px 0;margin-left:calc(var(--i,0) * var(--step));position:relative}
.five.steps li:nth-child(2){--i:1}.five.steps li:nth-child(3){--i:2}.five.steps li:nth-child(4){--i:3}.five.steps li:nth-child(5){--i:4}
.five.steps li + li::before{content:"";position:absolute;left:calc(var(--step) * -1 + 1px);top:-20px;width:calc(var(--step) - 10px);height:calc(20px + 14px + 8px);
  border-left:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.five.steps li:first-child{border-top:0}

/* ── who calls us ── */
.recognise{list-style:none;margin-top:4px}
.recognise li{font-family:var(--display);font-weight:400;font-size:clamp(1rem,1.55vw,1.16rem);
  line-height:1.55;letter-spacing:-.008em;color:var(--ink);
  padding:24px 0;border-top:1px solid var(--hair)}
.recognise li:first-child{border-top:1px solid var(--rule)}

/* ── commitments ── */
.values{margin-top:6px}
.values div{padding:26px 0;border-top:1px solid var(--dark-rule,rgba(242,243,243,.2))}
.values div:first-child{border-top:1px solid rgba(242,243,243,.34)}
.values dt{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper);margin-bottom:10px}
.values dd{font-size:16.5px;line-height:1.68;color:rgba(242,243,243,.8);max-width:60ch}

/* ── asked ── */
.asked{list-style:none;margin-top:6px}
.asked li{font-family:var(--display);font-size:16.5px;line-height:1.45;color:var(--muted);
  padding:15px 0 15px 22px;border-top:1px solid var(--hair);position:relative}
.asked li:first-child{border-top:1px solid var(--rule)}
.asked li::before{content:"";position:absolute;left:0;top:1.45em;width:10px;height:1px;background:var(--accent)}

/* ── band image ── */
.band{margin:0}
.band img{width:100%;height:clamp(210px,30vw,380px);object-fit:cover}
.band figcaption{max-width:var(--page);margin:0 auto;padding:16px 40px 0;
  font-family:var(--sans);font-size:14px;color:var(--faint)}

/* ── firm ── */
.who{display:grid;gap:34px;margin-top:8px}
.who article{scroll-margin-top:24px;padding-top:22px;border-top:1px solid var(--rule);display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 28px}
.who article .ph{width:150px;height:200px;grid-row:1/span 4}
.who h3{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-.014em;
  margin-bottom:10px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.pn{font-size:10.5px;font-weight:600;letter-spacing:.13em;color:var(--faint);
  text-transform:uppercase;white-space:nowrap;margin-left:.9em}
.who p{font-size:16px;color:var(--muted)}
.who .role{font-size:13px;color:var(--faint);margin:-4px 0 10px}

/* ── markets + contact ── */
h2.places{font-size:clamp(1.25rem,2.1vw,1.65rem);line-height:1.28;max-width:19ch}
.mailto{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.015em;text-decoration:none;
  color:var(--ink);box-shadow:0 1.5px 0 var(--rule);padding-bottom:6px;overflow-wrap:anywhere}
.mailto:hover{box-shadow:0 1.5px 0 var(--accent);color:var(--accent)}

.dlwrap{margin-top:26px}
.dlwrap + .foot{margin-top:10px!important;padding-top:0;border-top:0}
.dl{display:inline-block;color:var(--ink);box-shadow:0 1px 0 var(--rule);padding-bottom:3px;text-decoration:none}
.dl:hover{box-shadow:0 1px 0 var(--accent);color:var(--accent)}

/* ── end ── */
.end{max-width:var(--page);margin:0 auto;padding:22px 40px 48px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--faint)}


/* ═══════════════════════════════════════════════════════════
   DESIGN PASS — two voices, one scale, finished detail
   Serif carries sentences a reader reads for argument.
   The grotesque carries every heading, label and control,
   so the identity (mark, small caps, red rule, dark band)
   is untouched. Nothing here adds ornament for its own sake.
   ═══════════════════════════════════════════════════════════ */

/* ── voice: prose in serif ── */
.body p,.offer dd,.offer dd p,.who p,.roster p,.lead,.stand,
.five li,.recognise li,.asked li,.seq li,.ex-note,.values dd,
.note-verdict,.bio p{font-family:var(--serif)}

/* ── voice: grotesque for everything that labels, names or acts ── */
h1,h2,h3,.over,.side,p.ex-lab,p.para,.offer dt,.offer dt .k,.five .k,
.who h3,.roster h3,p.role,.who p.role,.roster p.role,.pn,.top nav a,.go,.quiet,.jump a,.jb,
.svcline,.more a,.nudge a,.bio summary,.reveal summary,.mailto,.dl,
.end,.index a,.private,.strip b,.strip span:not(.ph),.note-head,
.note-ref dt,p.note-lab,.note-head,.chain li,.values dt,p.foot,.foot,.lead1,
figure.plate figcaption,figure.sheet figcaption,.note figcaption,
.exhibit figcaption{font-family:var(--sans)}
/* reversed serif hairlines get eaten on the dark band */
.invert .body p,.values dd{font-family:var(--sans)}

/* ── scale: every size is a token, so the smear cannot come back ── */
h2{font-size:clamp(1.5rem,2.4vw,1.94rem);letter-spacing:-.016em;text-wrap:balance}
.stand{font-size:var(--t-deck)!important;line-height:1.45}
.five li,.recognise li{font-size:var(--t-body-lg);line-height:1.5}
.offer dt,.roster h3{font-size:var(--t-body-lg);letter-spacing:-.012em}
.offer.full dt,.who h3{font-size:var(--t-body-lg)}
.offer dd,.offer.compact dd,.offer.full dd,.who p,.roster p,
.asked li,.values dd{font-size:var(--t-body);line-height:var(--lh-body)}
.offer.compact dt{font-size:var(--t-body-lg);line-height:1.34}
.seq li,.foot,.offer.full .get,.lead1,.who .lead1{font-size:var(--t-small)}
.role,.who .role,.roster .role,.end,.index a,.jump a,.chain li,
.strip span:not(.ph),figure.plate figcaption,figure.sheet figcaption,
.note figcaption{font-size:var(--t-fine)}
.top nav a,.quiet,.more a,.bio summary,.strip b,.svcline{font-size:var(--t-small)}
.side,.ex-lab,.offer dt .k,.five .k,.values dt,.note-ref dt,.note-lab,.go,.para{
  font-size:var(--t-label)!important;letter-spacing:var(--ls-caps)}
.pn,.private{font-size:var(--t-micro);letter-spacing:.16em}

/* prose colour and widow control */
.body p,.offer dd,.who p,.roster p{color:var(--muted);text-wrap:pretty}
h1,h2,h3,.stand,figcaption{text-wrap:balance}
.lead,.five li,.recognise li,.asked li{text-wrap:pretty}

/* ── rules: three weights that actually differ ── */
.row{border-top-color:var(--edge)}
.end{border-top-color:var(--edge)}
.offer div:first-child,.five li:first-child,.recognise li:first-child,
.asked li:first-child,.seq li:first-child,.five.steps{border-top-color:var(--rule)}

/* ── links: real underlines that skip descenders, not stuck-on shadows ── */
.quiet,.totop,.bio summary,.dl,.mailto,.more a,.svcline{
  box-shadow:none;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:var(--rule)}
.quiet:hover,.totop:hover,.bio summary:hover,.dl:hover,.mailto:hover,
.more a:hover,.svcline:hover{text-decoration-color:var(--accent)}
.mailto{text-underline-offset:6px;text-decoration-thickness:1.5px}

/* ── the arrow: drawn, so it never falls back to another font ── */
.svcline::after,.more a span,.nudge a span{
  content:"";display:inline-block;width:1.05em;height:.62em;margin-left:.5em;
  background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;
          mask:var(--arrow) no-repeat center/contain;
  opacity:.55;transition:opacity .15s linear,transform .15s ease}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 7h21M16 1.5L22 7l-6 5.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.more a span,.nudge a span{margin-left:.5em;vertical-align:-.02em}
.svcline:hover::after,.more a:hover span,.nudge a:hover span{opacity:1;transform:translateX(3px)}

/* ── figures: one edge and one caption rule for every photograph ── */
.hero img,figure.plate img,figure.sheet img{
  box-shadow:0 1px 0 0 rgba(20,18,15,.10), 0 18px 34px -22px rgba(20,18,15,.30)}
figure.plate img{height:260px}

/* ── evidence exhibits sit on the specimen tint ── */
.exhibit{background:var(--paper-2);padding:26px 26px 28px;margin-inline:-26px;
  border-top:2px solid var(--ink)}
.exhibit .ex-lab{margin-bottom:22px!important}

/* ── disclosure marks: same width open or closed, so nothing jumps ── */
.bio summary::after,.reveal summary::after{
  content:"";display:inline-block;width:9px;height:9px;margin-left:10px;flex:none;
  background:currentColor;
  -webkit-mask:var(--plus) no-repeat center/contain;mask:var(--plus) no-repeat center/contain}
.bio[open] summary::after,.reveal[open] summary::after{
  -webkit-mask:var(--minus) no-repeat center/contain;mask:var(--minus) no-repeat center/contain}
:root{
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0v10M0 5h10' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 5h10' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E")}
.reveal summary::after{width:14px;height:14px;color:var(--ink);opacity:.75}
.bio summary::after{color:var(--ink);opacity:.6}

/* ── the accent gets one structural job: the tab you are on ── */
.top nav a[aria-current="page"]{border-bottom-color:var(--accent)}

/* ── the dark band: warmed, and its own hairlines ── */
.invert{background:var(--invert);color:rgba(243,241,237,.78)}
.invert h2{color:var(--on-dark)}
.invert .body p{color:rgba(243,241,237,.78)}
.values div{border-top-color:rgba(243,241,237,.18)}
.values div:first-child{border-top-color:rgba(243,241,237,.32)}
.values dd{color:rgba(243,241,237,.82)}
.side.light{color:rgba(243,241,237,.55)}
.side.light::before{background:rgba(243,241,237,.55)}

/* ── portraits: warmed a touch so they sit on the same paper as the photographs ── */
.ph img{filter:sepia(.22) saturate(.92) brightness(1.015)}

/* ── selection: the accent, not a black bar ── */
::selection{background:rgba(190,58,34,.16);color:var(--ink)}

/* ── numerals: lining and tabular wherever figures are compared ── */
.chain li,.note-ref dd,.values dt,.five .k,.pn,.end{font-variant-numeric:lining-nums tabular-nums}

/* ── the hanging label aligns to the headline it annotates ── */
.side{color:var(--faint)}
.side::before{background:var(--ink)}


/* ── section rhythm: the first row of a panel opens under the masthead rule,
      so it must not draw a second one; later rows get the full step ── */
.panel > .row:first-child,.panel > .invert:first-child{border-top:0;padding-top:var(--s5)}
.row{padding-top:var(--s6);padding-bottom:var(--s6)}
.row.last{padding-bottom:calc(var(--s6) + 16px)}
.invert{padding:var(--s6) 0}
h2{margin-bottom:var(--s3)}
.stand{margin-bottom:var(--s3)!important}
/* the masthead carries one hairline on every tab */
.top{border-bottom:1px solid var(--edge);padding-bottom:0}
.top nav a{padding-bottom:11px;margin-bottom:-1px}


/* the overview rail must clear the section rule it sticks beneath */
.rail{padding:20px 40px 0}
/* the side label's cap-line sits with the headline it annotates */
.row > .side,.invert-in > .side{padding-top:4px}
/* the service index's current item: one colour, the accent, everywhere */
.rail.jump a[aria-current="true"]{border-left-color:var(--accent)}
/* long index entries wrap without losing their marker */
.jump a{padding-left:14px}


/* the panel is secondary to the principals, and says so in the type
   rather than by being set too small to read */
.roster p{font-size:16.5px;line-height:1.58}
.roster h3{font-size:18.5px}
.roster li{padding:var(--s4) 0}
.who{gap:var(--s4)}


/* ── people blocks earn a second left edge: the portrait sits in the
      margin so the bio itself gets the prose measure, not 46 characters ── */
#firm > .body{max-width:calc(var(--measure) + 178px)}
#firm > .body > h2,#firm > .body > .stand,#firm > .body > p{max-width:var(--measure)}
.who article,.roster li{grid-template-columns:150px minmax(0,1fr);gap:0 28px}


/* rules inside the Team panel span the people blocks, not the prose measure */
#firm > .body > .stand.mt{border-top:0;position:relative}
#firm > .body > .stand.mt::before{content:"";position:absolute;top:0;left:0;
  width:calc(var(--measure) + 178px);max-width:100vw;height:1px;background:var(--rule)}

/* ── responsive ── */
@media(max-width:1000px){
  :root{--side:150px}
  .open{grid-template-columns:1fr;gap:52px}
  .note{max-width:600px}
}
@media(max-width:760px){
  .row,.invert-in,.mount,figure.plate,.open{grid-template-columns:minmax(0,1fr);gap:14px}
  .open{align-items:start}
  .mount > *,figure.plate > *,.open-copy,.open-more,.over,.hero{grid-column:auto}
  .open-copy,.open-more{max-width:none}
  .over{font-size:14px;margin-bottom:22px}
  h1.type{white-space:normal;font-size:30px}
  .five.steps{--step:18px}
  .mount{padding:40px var(--gut) 62px}
  .side{position:static}
  .who{gap:28px}
  /* chain becomes a vertical descent */
  .chain{grid-template-columns:1fr;gap:0}
  .chain li{padding:0 0 20px 26px;font-size:15px}
  .chain li:last-child{padding-bottom:0}
  .chain li::after{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .chain li:last-child::after{bottom:50%;right:auto}
  .chain li.unreached::after{background:repeating-linear-gradient(180deg,var(--rule) 0 3px,transparent 3px 7px)}
  .chain i{top:1px;left:0}
}
@media(max-width:620px){
  body{font-size:16.5px;line-height:1.62}
  .wrap,.top,.open,.row,.invert-in,.end{padding-left:var(--gut);padding-right:var(--gut)}
  .top{padding-top:20px;flex-wrap:nowrap;gap:12px}
  .top{flex-wrap:wrap;align-items:center;row-gap:0}
  .top nav{display:flex;order:3;flex-basis:100%;gap:22px;flex-wrap:wrap;overflow:visible;
    margin-top:12px;border-top:1px solid var(--hair)}
  .top nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
    padding:0;border-bottom:2px solid transparent;margin-bottom:-1px}
  .hero{margin:22px 0 22px}
  .strip{grid-template-columns:1fr 1fr;gap:18px 16px}
  .roster li,.who article{grid-template-columns:1fr;gap:0}
  .who article .ph{grid-row:auto;margin-bottom:12px}
  .roster .ph,.who article .ph{grid-row:auto;width:126px;height:168px;margin-bottom:12px}
  .tocontact{display:inline-flex;align-items:center;min-height:44px;font-size:14px;
    color:var(--muted);text-decoration:none}
  .mark{min-height:44px}
  .private{font-size:11px;letter-spacing:.08em;padding:6px 16px}

  .open{padding-top:44px;padding-bottom:0;gap:32px}
  h1{font-size:30px;line-height:1.16;letter-spacing:-.028em;margin-bottom:22px}
  h2{font-size:1.45rem;line-height:1.24;margin-bottom:18px}
  .lead{font-size:18px;line-height:1.5;max-width:none}
  .acts{margin-top:30px;display:block}
  .go{display:flex;width:100%;min-height:54px;padding:0 20px;font-size:12.5px}

  /* the diligence note: a sheet laid on the ground, not a card */
  .note{margin-left:0;margin-right:0;width:auto;max-width:none;
    padding:17px 16px 19px;border-bottom:0}
  .note-verdict{font-size:16.5px;padding:12px 0}
  .note-ref{gap:8px}
  .note-ref div{grid-template-columns:1fr;gap:1px}
  .note-ref dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
  .note-ref dd{font-size:14px}
  .note-body p:not(.note-lab){font-size:13.5px;line-height:1.42;margin-bottom:6px}

  .row{padding-top:44px;padding-bottom:46px}
  .row.last{padding-bottom:56px}
  .row,.invert-in,.mount,figure.plate,.open{grid-template-columns:minmax(0,1fr);gap:0}
  .mount > *,figure.plate > *,.open-copy,.open-more,.over,.hero{grid-column:auto}
  .open-copy,.open-more{max-width:none}
  .mount{padding:36px var(--gut) 54px}
  .side{position:static;margin-bottom:20px;font-size:12px}
  .ex-lab,.note-lab,.note-ref dt,.note-head em{font-size:12px!important}
  .pn{font-size:11px}

  .rail{height:auto;padding:0;margin:0 0 6px;color:var(--ink)}
  .rail.jump a,.rail.jump.on-dark a{opacity:1;color:var(--ink)}
  .rail.jump a[aria-current="true"],.rail.jump.on-dark a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
  .rail::before{display:none}
  .rail ol{width:auto;padding-top:0}
  #overview .row > .side,#overview .invert-in > .side{visibility:visible}
  .jump{min-width:0;max-width:100vw;overflow:hidden;position:sticky;top:0;z-index:5;background:var(--paper);margin:0 calc(var(--gut)*-1) 18px;
    padding:8px var(--gut) 0;border-bottom:1px solid var(--hair)}
  .jump .jl,.jump::before{display:none}
  .jb{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;
    padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
  .jb .jbl{color:var(--faint);font-weight:500}
  .jb::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
    transform:rotate(45deg);margin:-4px 6px 0 12px;flex:none;transition:transform .15s}
  .jump.open .jb::after{transform:rotate(-135deg);margin-top:4px}
  .jump ol{display:none;margin:0;padding-bottom:6px}
  .jump.open ol{display:grid;gap:0}
  .jump a{white-space:normal;min-height:44px;display:flex;align-items:center;padding:0 0 0 12px;
    border-left:2px solid transparent;border-bottom:0;margin:0}
  .jump a[aria-current="true"]{border-left-color:var(--accent);font-weight:600}
  .body p{margin-bottom:16px}

  /* recognition demoted to body, method promoted to display */
  .recognise li{font-size:16.5px;line-height:1.55;color:var(--muted);padding:14px 0}
  .five li{font-size:18px;line-height:1.4;padding:18px 0}

  .offer div{padding:20px 0}
  .offer dt{font-size:17px;margin-bottom:5px}
  .offer dd{font-size:15.5px;line-height:1.55}
  .si{stroke-width:2px}
  .offer.compact div{padding-left:54px}
  .offer.compact .si{width:40px;height:40px}
  .offer.compact dt .glyph{top:23px}
  .offer.full div{padding-left:0;scroll-margin-top:64px}
  .offer.full dt .si{position:static;width:44px;height:44px;margin:0 0 12px}

  /* matrix: marks first, so the column of absences is scannable */

  /* plates sit in the gutter like everything else */
  figure.plate{padding:0 var(--gut)}
  figure.plate figcaption{padding:11px 0 0}
  figure.plate img{height:180px}
  
  .invert{padding:56px 0 58px;color:rgba(242,243,243,.84)}
  .invert .body p{color:rgba(242,243,243,.84)}
  .values div{padding:22px 0}

  .who{gap:28px}
  .mailto{display:inline-block;padding:8px 0 10px}
  .dl{padding:12px 0 6px}
  .end{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:32px}
  .index{grid-template-columns:1fr 1fr}
}

@media(max-width:760px){
  .chain{margin-top:16px}
  .chain li{padding:0 0 20px 30px;font-size:15px}
  .chain i{width:13px;height:13px;top:1px;left:0}
  .chain li::after{left:6px}
  .chain li.edge{padding-top:38px}
  .chain li.edge::before{top:0;left:0;right:0;width:auto;height:auto;
    padding-top:8px;padding-left:30px;line-height:1.3}
  .chain li.edge i{top:39px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media(max-width:760px){
  #firm > .body > .stand.mt::before{width:100%}
  /* the tinted exhibit must never out-dent past the page gutter */
  .exhibit{margin-inline:calc(var(--gut) * -1);padding:22px var(--gut) 24px}
  figure.plate img{height:200px}
}
@media(max-width:620px){
  body{font-size:17px;line-height:1.6}
  .lead,.open-more .lead{font-size:21px;max-width:none;line-height:1.42}
  .stand{font-size:19.5px!important}
  .five li,.recognise li,.offer dt,.offer.compact dt,.offer.full dt,
  .who h3,.roster h3{font-size:18.5px}
  .offer dd,.offer.compact dd,.offer.full dd,.who p,.roster p,
  .asked li,.values dd{font-size:17px}
  h2{font-size:1.45rem}
  /* hyphenate so a 66-character measure does not leave rivers at 390px */
  .body p,.offer dd,.who p,.roster p{hyphens:auto;-webkit-hyphens:auto}
  .exhibit{margin-inline:calc(var(--gut) * -1);padding:20px var(--gut) 22px}
}