:root{
  --ink:#141618; --ink-2:#1D2023; --graphite:#2B2F33; --charcoal:var(--ink-2);
  --orange:#E8752A; --orange-2:#C25B18; --orange-deep:var(--orange-2); --orange-soft:rgba(232,117,42,.12);
  --paper:#F6F4F0; --paper-2:#EAE6DF; --concrete:#C4C0B9; --oak:#B0805A; --steel:#B4BBC0;
  --rule:#D9D4CB; --line-dark:rgba(246,244,240,.12); --mute:#6C7176;
  --orange-text:#B24C10; /* orange for text on paper (WCAG AA) */
  --u:6px; --max:1360px; --gutter:clamp(20px,5vw,64px);
  /* One family for headings and text (Instrument Sans, 400 to 700); mono for the small caps labels.
     Archivo stays only for the CONTRACTORS wordmark, which is part of the logo. */
  --body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:var(--body);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-display:var(--display); --f-caps:var(--mono); --f-body:var(--body); --f-brand:'Archivo',var(--body); --f-mono:var(--mono);
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
/* never allow sideways scrolling (the heading reveal masks can spill a pixel past the edge) */
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--f-body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.label{font:500 11.5px/1.4 var(--f-mono);letter-spacing:.19em;text-transform:uppercase;color:var(--mute)}
.label--accent{color:var(--orange-text)}
.display-xl,.display-l,.display-m{font-family:var(--f-display);font-weight:600;letter-spacing:-.028em;margin:0;text-wrap:balance}
.display-xl em,.display-l em,.display-xl i,.display-l i{font-style:normal;color:var(--orange-text)}
.display-xl{font-size:clamp(2.7rem,7.4vw,6.1rem);line-height:1.02;font-weight:600}
.display-l{font-size:clamp(2.05rem,4.6vw,3.85rem);line-height:1.02}
.display-m{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.14;letter-spacing:-.02em}
.lede{font-size:clamp(18px,1.6vw,21px);max-width:52ch;color:#3B4045}
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 24px;background:var(--orange);color:var(--ink);border:0;border-radius:2px;
  font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn .arrow{width:18px;height:2px;background:currentColor;position:relative}
.btn .arrow::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border:2px solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.section{padding-top:clamp(96px,14vw,192px);padding-bottom:clamp(96px,14vw,192px)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
@media (max-width:900px){.grid12{grid-template-columns:repeat(6,1fr);gap:18px}}

/* ---------- v1 drawing-set vocabulary ---------- */
.sheet{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.sheet__no{font:600 .7rem/1 var(--mono);letter-spacing:.16em;color:var(--orange);border:1px solid var(--orange);padding:4px 9px;flex:none}
.sheet__ttl{font:500 .7rem/1.3 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--mute)}
.sheet__rule{flex:1;height:1px;background:var(--rule)}
.dark .sheet__ttl{color:rgba(246,244,240,.55)} .dark .sheet__rule{background:var(--line-dark)}
/* full-bleed section colour even when the section itself is a .wrap */
.dark,.paper2{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);background:var(--bg)}
.dark{--bg:var(--ink);color:var(--paper)}
.paper2{--bg:var(--paper-2)}
.dark .lede,.dark p{color:rgba(246,244,240,.78)}
.dark .label{color:rgba(246,244,240,.55)}
.dark .rule,.dark [class*="__list"]{border-color:var(--line-dark)}
.dark .btn--ghost{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--paper)}
.grid-bg{position:relative}
.grid-bg::before{content:"";position:absolute;inset:0 -100vmax;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(20,22,24,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,22,24,.05) 1px,transparent 1px);background-size:38px 38px}
.dark.grid-bg::before{background-image:linear-gradient(rgba(246,244,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(246,244,240,.05) 1px,transparent 1px)}
.grid-bg>*{position:relative;z-index:1}