@charset "utf-8";

/* ==========================================================================
   Compartis Passive Fire · site stylesheet, v3

   Grounds. Every section declares one: white, paper, petrol or ink. Each
   ground sets four variables and every component reads them, so a component
   never needs a second rule to work on a dark section:

     --fg    text
     --mut   secondary text
     --line  hairlines and rules
     --key   mono numbering and keys

   Brass is the seal. It marks a statement, a sealed element and the numbering
   on dark grounds, and it does nothing else. Teal is screen only, and appears
   only in a focus halo.

   Space Grotesk speaks. Source Serif explains. Space Mono labels.
   Nothing here introduces a colour, typeface or size that is not declared.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/SourceSerif4-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Space Mono";src:url("fonts/SpaceMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* --- Tokens --------------------------------------------------------------- */

:root{
  --ink:#0E1216;
  --petrol:#12414D;
  --slate:#5B6770;
  --paper:#F6F7F5;
  --white:#FFFFFF;
  --brass:#C08A2D;
  --teal:#2FA4B8;

  --pass:#1F8A4C;
  --remediate:#C08A2D;
  --replace:#B5342B;

  --hairline:#D5D8D6;
  --rule:#B9BDBB;
  --on-ink:#F6F7F5;
  --on-ink-mut:#9AA3A8;

  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --wrap:1280px;
  --y:clamp(4rem,7.5vw,7rem);
}

/* --- Reset ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.66;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:2px;
  box-shadow:0 0 0 5px rgba(47,164,184,.45)}
::selection{background:var(--brass);color:var(--ink)}
[id]{scroll-margin-top:6.5rem}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brass);
  color:var(--ink);padding:.8rem 1.25rem;font-family:var(--font-display);
  font-weight:500;text-decoration:none}
.skip:focus{left:0}

/* --- Grounds -------------------------------------------------------------- */

.section{
  --bg:var(--white);
  --fg:var(--ink);
  --mut:var(--slate);
  --line:var(--hairline);
  --key:var(--petrol);
  background:var(--bg);color:var(--fg);
  padding-block:var(--y);
}
.section + .section{border-top:1px solid var(--line)}
.section.paper{--bg:var(--paper)}
/* Petrol takes a paper key rather than a brass one: brass on petrol is 3.66:1,
   which is fine for a mark and short of AA for mono at this size. Brass still
   carries the statement square and the lock-up marks, which are graphics. */
.section.petrol{
  --bg:var(--petrol);--fg:var(--on-ink);
  --mut:rgba(246,247,245,.78);--line:rgba(246,247,245,.30);--key:var(--on-ink);
}
.section.ink{
  --bg:var(--ink);--fg:var(--on-ink);
  --mut:var(--on-ink-mut);--line:rgba(246,247,245,.26);--key:var(--brass);
}
/* A change of ground is its own separator. */
.section.paper + .section,.section.petrol + .section,.section.ink + .section,
.section + .section.paper,.section + .section.petrol,.section + .section.ink{
  border-top:0}

/* --- Type ----------------------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .6em;color:var(--fg);
  text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.1rem,4.6vw,3.55rem);font-weight:600;line-height:1.06;
  letter-spacing:-.03em;max-width:19ch}
h2{font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:500;line-height:1.18;
  letter-spacing:-.021em;max-width:26ch}
h3{font-size:1.0625rem;font-weight:600;line-height:1.35;letter-spacing:-.008em;
  margin-bottom:.35em}
p{margin:0 0 1.05em;max-width:66ch}
p:last-child{margin-bottom:0}
b,strong{font-weight:600}

.lead{font-size:clamp(1.15rem,1.6vw,1.34rem);line-height:1.56;max-width:56ch;
  margin-bottom:1.1em}
.note{color:var(--mut);font-size:.975rem;line-height:1.6}
.hint{color:var(--mut);font-size:.875rem;line-height:1.55;max-width:52ch}
.fine{color:var(--mut);font-size:.9rem;margin-top:1rem}

.eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--key);margin:0 0 1.6rem}

/* The statement. Reserved for the sentences that carry the position.
   Used once per page at most. */
.statement{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.22;letter-spacing:-.02em;
  max-width:20ch;margin:0;position:relative;padding-top:1.5rem;color:var(--fg)}
.statement::before{content:"";position:absolute;left:0;top:0;
  width:12px;height:12px;background:var(--brass)}
.statement + .note{margin-top:1.5rem}

/* The aside. A measured sentence closing a section, set as a footnote
   rather than as a claim. */
.aside{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);
  color:var(--mut);font-size:.975rem;max-width:74ch}

/* --- Layout --------------------------------------------------------------- */

.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.hero{padding-block:clamp(3.5rem,6.5vw,6rem) clamp(3.5rem,5.5vw,5.5rem)}
/* The landing headline is set in Medium rather than SemiBold and a step
   smaller than an inner-page h1. On a dark ground the lighter weight reads
   as confidence; the heavier weight reads as shouting. */
.hero h1{font-size:clamp(2rem,4vw,3.1rem);font-weight:500;letter-spacing:-.026em}
.hero-sm{padding-block:clamp(3.25rem,6vw,5.5rem) clamp(2.5rem,4.5vw,4rem)}
.hero-b{margin-top:2rem}

/* The landing hero. One column, no eyebrow, no graphics. Typography carries
   it: the headline, three short lines that set the problem, the sentence that
   answers them, and the promise. Everything else on this section is space. */
.hero-home{padding-block:clamp(5rem,10vw,9rem) clamp(4.5rem,8vw,7.5rem)}
.hero-home h1{font-size:clamp(2.2rem,5.1vw,4.05rem);font-weight:500;
  line-height:1.04;letter-spacing:-.032em;max-width:17ch;margin:0}

.hero-say{margin-top:clamp(3rem,5.5vw,4.75rem)}
.hs-l{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;letter-spacing:-.012em;
  color:var(--mut);margin:0 0 .3rem;max-width:none}
/* The answer sits under the three, not beside them, so the three read as one
   run and the sentence lands as the reply to all of it. */
.hs-r{margin:clamp(1.75rem,2.5vw,2.4rem) 0 0;
  font-size:clamp(1.2rem,1.75vw,1.45rem);line-height:1.5;max-width:46ch;
  color:var(--fg)}

.hero-promise{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.2;letter-spacing:-.022em;
  color:var(--brass);margin:clamp(3.25rem,6vw,5rem) 0 0;padding-top:1.75rem;
  border-top:1px solid var(--line);max-width:none}

@media (max-width:820px){
  .hero-say{margin-top:clamp(2.25rem,7vw,3rem)}
}

/* The capability strip. Full bleed along the bottom edge of the hero, moving
   slowly enough to read rather than to be noticed. Each word carries the brass
   seal, so it reads as the lock-up does. Masked at both ends so words arrive
   and leave rather than being cut off at the frame. */
.ticker{margin-top:clamp(3.5rem,6vw,5.5rem);
  margin-bottom:calc(0rem - clamp(4.5rem,8vw,7.5rem));
  padding-block:1.15rem;overflow:hidden;
  border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tk-track{display:flex;width:max-content;will-change:transform;
  animation:tk 75s linear infinite}
.tk-track span{font-family:var(--font-display);font-weight:400;font-size:.95rem;
  letter-spacing:.005em;line-height:1.2;color:var(--mut);white-space:nowrap;
  padding-inline:clamp(1.6rem,3vw,2.75rem);position:relative}
.tk-track span::before{content:"";position:absolute;left:0;top:50%;
  width:6px;height:6px;margin-top:-3px;background:var(--brass)}
@keyframes tk{from{transform:translate3d(0,0,0)}
              to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none}}
@media (max-width:820px){
  .ticker{margin-top:clamp(2.75rem,8vw,3.5rem);padding-block:.95rem}
  .tk-track span{font-size:.9rem}
}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1.5rem,3vw,3rem);row-gap:2.5rem}
.grid.gap{margin-top:4rem}
.c1-4{grid-column:1/5}
.c1-5{grid-column:1/6}
.c1-6{grid-column:1/7}
.c1-7{grid-column:1/8}
.c5-12{grid-column:5/13}
.c6-12{grid-column:6/13}
.c7-12{grid-column:7/13}
.c8-12{grid-column:8/13}

/* The rail. Every section is numbered and named, the way a controlled
   document is. This is the site's structural signature. */
.rail{display:flex;align-items:baseline;gap:.9rem;margin-bottom:2.6rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase}
.rail-n{color:var(--key)}
.rail-n::after{content:"";display:inline-block;width:18px;height:1px;
  background:var(--line);vertical-align:.32em;margin-left:.9rem}
.rail-l{color:var(--mut)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem;
  margin-top:2rem}

/* inline-flex with a unit line-height so the label is centred by the box
   rather than by the baseline, whatever the surrounding link styles do. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:500;line-height:1;
  font-size:.95rem;letter-spacing:.005em;background:var(--fg);
  color:var(--bg);padding:.95rem 1.6rem;text-align:center;text-decoration:none;
  border:1px solid var(--fg);
  transition:background .15s ease,color .15s ease}
.btn:hover{background:transparent;color:var(--fg)}
.btn-sm{padding:.62rem 1.05rem;font-size:.85rem}

.link{font-family:var(--font-display);font-weight:500;font-size:.95rem;
  color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--brass);padding-bottom:2px}
.link::after{content:" \2192"}
.link:hover{border-bottom-width:2px}

/* --- Header --------------------------------------------------------------- */

.site-header{border-bottom:1px solid var(--hairline);background:var(--white);
  position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:flex-end;
  gap:1.5rem;padding-block:1.05rem}
.brand{margin-right:auto}
.brand img{width:148px;height:auto}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.75rem);flex-wrap:wrap;
  justify-content:flex-end}
.nav a:not(.btn){font-family:var(--font-display);font-size:.875rem;font-weight:400;
  text-decoration:none;color:var(--ink);padding-bottom:2px;
  border-bottom:1px solid transparent}
.nav a:not(.btn):hover{border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{border-bottom-color:var(--brass)}
.nav-cta{background:var(--ink);color:var(--on-ink);border:1px solid var(--ink);
  flex:none}
.nav-cta:hover{background:transparent;color:var(--ink)}

/* --- Keyed list ----------------------------------------------------------- */

.keyed{display:grid;gap:0}
.k-row{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;
  padding-block:1.15rem;border-top:1px solid var(--line)}
.k-row:first-child{border-top:0;padding-top:0}
.k-n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key);padding-top:.32rem}
.k-b h3{margin-bottom:.28em}
.k-b p{margin:0;color:var(--mut);font-size:.975rem;line-height:1.58;max-width:58ch}

/* --- Ladder: the eight stages, compact ------------------------------------ */

.ladder{list-style:none;margin:0;padding:0}
.ladder li{display:grid;grid-template-columns:3.2rem minmax(0,15rem) 1fr;
  gap:1rem;padding-block:1.05rem;border-top:1px solid var(--line);
  align-items:baseline}
.ladder li:first-child{border-top:0;padding-top:0}
.l-n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key)}
.l-t{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
  line-height:1.3}
.l-g{color:var(--mut);font-size:.95rem;line-height:1.55}

/* --- Stages: the full treatment ------------------------------------------- */

.stages{display:grid;gap:0;counter-reset:stage}
.stage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1.5rem,3vw,3rem);padding-block:2.1rem;
  border-top:1px solid var(--line);counter-increment:stage}
.stage:first-child{border-top:0;padding-top:0}
.stage h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:500;line-height:1.24;
  letter-spacing:-.015em;margin:0;position:relative;padding-left:2.9rem}
.stage h3::before{content:"0" counter(stage);position:absolute;left:0;top:.3em;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key)}
.s-b{display:grid;gap:1.1rem}
.s-b p{margin:0;max-width:58ch}
.s-l{display:block;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
  margin-bottom:.4rem}
.s-b p:last-child{color:var(--mut)}

/* --- Decisions ------------------------------------------------------------ */

/* The title holds the left four columns and the argument runs in the right
   eight. The usual response is set back; ours is set forward. */
.decisions{display:grid;gap:0}
.decision{padding-block:2.6rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1.5rem,3vw,3rem)}
.decision:first-child{border-top:0;padding-top:0}
.d-head{display:flex;align-items:baseline;gap:1rem}
.d-n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key);flex:none}
.d-head h3{font-family:var(--font-display);font-size:clamp(1.2rem,1.9vw,1.6rem);
  font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:0;max-width:18ch}
.decision dl{margin:0;display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:.4rem clamp(1.25rem,2vw,2rem)}
.decision dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);padding-top:.42em}
.decision dd{margin:0 0 1.15rem;max-width:56ch}
.decision dd:last-child{margin-bottom:0}
.d-usual{color:var(--mut);font-style:italic}
.d-ours{font-weight:600}

/* --- Register extract ----------------------------------------------------- */

.reg{margin:3.5rem 0 0;padding:0}
.reg figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.1rem;
  margin-bottom:1rem}
.reg-ref{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--key)}
.reg-t{font-family:var(--font-display);font-weight:600;font-size:1rem}
.reg-d{color:var(--mut);font-size:.9rem;flex:1 1 20rem;min-width:0}
.reg-scroll{overflow-x:auto;background:var(--white);
  border:1px solid var(--hairline)}
.reg table{border-collapse:collapse;width:100%;min-width:52rem;
  font-family:var(--font-display);font-size:.82rem;color:var(--ink)}
.reg thead th{background:var(--petrol);color:var(--on-ink);text-align:left;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;padding:.75rem .85rem;
  white-space:nowrap}
.reg td{padding:.7rem .85rem;border-top:1px solid var(--hairline);
  vertical-align:middle;white-space:nowrap}
.reg tbody tr:nth-child(even){background:var(--paper)}
.reg .mono{font-family:var(--font-mono);font-size:.78rem}
/* Status is a mark in the status colour with an ink label, so the text reads
   at full contrast and the accent stays small. */
.chip{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;flex:none}
.chip-pass::before{background:var(--pass)}
.chip-rem::before{background:var(--remediate)}
.chip-replace::before{background:var(--replace)}

/* --- Rules list ----------------------------------------------------------- */

.rules{display:grid;gap:0}
.rules p{margin:0;padding-block:1rem;border-top:1px solid var(--line);
  max-width:64ch;position:relative;padding-left:1.6rem}
.rules p:first-child{border-top:0;padding-top:0}
.rules p::before{content:"";position:absolute;left:0;top:1.55rem;width:7px;
  height:1px;background:var(--brass)}
.rules p:first-child::before{top:.55rem}

/* --- Specs ---------------------------------------------------------------- */

.specs{display:grid;gap:0;font-variant-numeric:tabular-nums}
.specs > div{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;
  padding-block:.95rem;border-top:1px solid var(--line)}
.specs > div:first-child{border-top:0;padding-top:0}
.specs .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key);padding-top:.22rem}
.specs p{margin:0;font-size:.975rem;line-height:1.58;max-width:58ch}

/* --- Disciplines ---------------------------------------------------------- */

.disc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem clamp(1.5rem,3vw,3rem)}
.disc > div{border-top:1px solid var(--line);padding-top:1.1rem}
.disc p{color:var(--mut);font-size:.975rem;line-height:1.58;margin:0}

/* --- Audience ------------------------------------------------------------- */

.aud{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,3vw,3rem)}
.aud li{padding-block:1.1rem;border-top:1px solid var(--line);
  color:var(--mut);font-size:.975rem;line-height:1.56}
.aud li b{display:block;font-family:var(--font-display);font-size:1rem;
  font-weight:600;color:var(--fg);margin-bottom:.3rem;line-height:1.3}

/* --- Contents (The Method) ------------------------------------------------ */

.contents{list-style:none;margin:3rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,3vw,3rem);
  max-width:56rem}
.contents li{border-top:1px solid var(--line)}
.contents a{display:flex;gap:1rem;align-items:baseline;padding-block:.8rem;
  font-family:var(--font-display);font-size:.95rem;text-decoration:none}
.contents a:hover{color:var(--brass)}
.c-n{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--key)}

/* --- Panel: the certification position ------------------------------------ */

.panel{background:var(--ink);color:var(--on-ink);
  padding:clamp(1.75rem,4vw,3.25rem);border-left:4px solid var(--brass)}
.panel-lead{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.22;letter-spacing:-.018em;
  margin:0 0 1.75rem;max-width:22ch;color:var(--on-ink)}
.panel-b{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.75rem clamp(1.5rem,3vw,3rem)}
.panel-b p{max-width:52ch}
.p-note{color:var(--on-ink-mut);font-size:.975rem;line-height:1.6}
.p-list{grid-column:1/-1;list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(246,247,245,.24);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.5rem,3vw,3rem)}
.p-list li{padding-block:.95rem;border-bottom:1px solid rgba(246,247,245,.14);
  font-size:.95rem;line-height:1.55;color:var(--on-ink-mut);
  position:relative;padding-left:1.5rem}
.p-list li::before{content:"";position:absolute;left:0;top:1.5rem;width:7px;
  height:7px;background:var(--brass)}

/* --- People --------------------------------------------------------------- */

.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem)}
.portrait{width:100%;max-width:280px;filter:grayscale(1) contrast(1.04);
  margin-bottom:1.35rem}
.person h3{font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:500;
  letter-spacing:-.015em;margin-bottom:.15em}
.role{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--key);margin-bottom:1.1rem}
.person p{font-size:.975rem;line-height:1.6;max-width:44ch}

/* --- Notes (Insights) ----------------------------------------------------- */

.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.5rem,3vw,3rem)}
.notes article{padding-block:1.4rem;border-top:1px solid var(--line)}
.notes h3{font-size:1.0625rem;font-weight:600;max-width:32ch}
.notes p{color:var(--mut);font-size:.975rem;line-height:1.58;margin:0;
  max-width:46ch}

/* --- Lock-up band --------------------------------------------------------- */

.lockup{display:flex;flex-wrap:wrap;gap:1rem clamp(2rem,6vw,5rem);
  list-style:none;margin:0;padding:0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.1rem,2vw,1.55rem);letter-spacing:-.015em}
.lockup li{position:relative;padding-left:1.5rem}
.lockup li::before{content:"";position:absolute;left:0;top:.62em;width:9px;
  height:9px;background:var(--brass)}

/* --- Closing band --------------------------------------------------------- */

.cta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.75rem,3vw,3rem);align-items:start}
.cta p{max-width:48ch;color:var(--mut)}
.cta-a{justify-self:start}
.band .btn{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.band .btn:hover{background:transparent;color:var(--brass)}

/* --- Form ----------------------------------------------------------------- */

.f{margin-bottom:1.6rem;border:0;padding:0}
.f label,.f legend{display:block;font-family:var(--font-display);
  font-size:.875rem;font-weight:500;margin-bottom:.5rem;padding:0}
.opt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-left:.5rem}
.f input[type=text],.f input[type=email],.f input[type=tel],.f textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);padding:.7rem .85rem;
  border-radius:0}
.f textarea{resize:vertical;line-height:1.55}
.f input:focus,.f textarea:focus{border-color:var(--petrol)}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}
.checks label{display:flex;align-items:center;gap:.55rem;font-family:var(--font-body);
  font-size:.975rem;font-weight:400;margin:0}
.checks input{accent-color:var(--petrol);width:1rem;height:1rem;flex:none}
.f .hint{margin-top:.5rem}
form .hint{margin-top:1rem}
.hp{position:absolute;left:-9999px}

/* The document request. Three fields, on the paper ground, laid out so it does
   not look like a lead-capture form pretending to be a page. */
.dl{max-width:34rem}
.dl .f{margin-bottom:1.15rem}
@media (min-width:700px){
  .dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.5rem;align-items:end}
  .dl .hp{grid-column:1/-1}
  .dl .f:nth-of-type(3),.dl .btn,.dl .hint{grid-column:1/-1}
  .dl .btn{justify-self:start;margin-top:.35rem}
}

.direct{display:grid;gap:1.25rem;margin-block:1.5rem 2rem}
.direct p{margin:0;font-size:.975rem}
.nm{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem}

/* --- Footer --------------------------------------------------------------- */

.site-footer{background:var(--ink);color:var(--on-ink);
  padding-block:var(--y) 2.5rem}
.foot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2.5rem clamp(1.5rem,3vw,3rem)}
.foot-grid h2{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);font-weight:400;margin-bottom:1rem;
  max-width:none}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-grid a{font-size:.95rem;text-decoration:none;
  border-bottom:1px solid transparent}
.foot-grid a:hover{border-bottom-color:var(--brass)}
.foot-grid p{font-size:.95rem;color:var(--on-ink-mut);margin:0}
.foot-contact{display:grid;gap:1.1rem;font-size:.95rem}
.foot-end{margin-top:3.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(246,247,245,.2);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:1.5rem clamp(1.5rem,3vw,3rem);align-items:start}
.strap-b{display:grid;gap:.55rem}
.strap{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin:0}
.promise{font-family:var(--font-display);font-weight:500;font-size:1.05rem;
  letter-spacing:-.012em;color:var(--on-ink);margin:0}
.legal p{font-size:.8rem;line-height:1.6;color:var(--on-ink-mut);margin:0 0 .5rem;
  max-width:68ch}
.legal p:last-child{margin-bottom:0}

/* --- Narrow --------------------------------------------------------------- */

@media (max-width:1000px){
  .aud,.contents,.notes,.disc,.panel-b,.p-list,.checks{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .people{grid-template-columns:1fr;gap:2.5rem}
  .cta{grid-template-columns:1fr}
  .ladder li{grid-template-columns:3.2rem 1fr;row-gap:.35rem}
  .l-g{grid-column:2}
}

@media (max-width:820px){
  /* Two rows rather than four: the mark and the primary action stay together
     on the first line, the navigation wraps beneath it. */
  .site-header{position:static}
  .site-header .wrap{display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:.95rem 1rem;padding-block:.9rem}
  .brand{grid-column:1;grid-row:1;margin-right:0}
  .nav-cta{grid-column:2;grid-row:1}
  .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:.75rem 1.15rem}
  .grid{row-gap:2rem}
  .c1-4,.c1-5,.c1-6,.c1-7,.c5-12,.c6-12,.c7-12,.c8-12{grid-column:1/-1}
  .stage{grid-template-columns:1fr;gap:1.1rem}
  .decision{grid-template-columns:1fr;gap:1.25rem}
  .decision dl{grid-template-columns:1fr;gap:.35rem}
  .decision dt{padding-top:.5rem}
  .decision dd{margin-bottom:.9rem}
  .foot-end{grid-template-columns:1fr}
}

@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .brand img{width:128px}
  .reg table{min-width:44rem}
}

/* --- Print ---------------------------------------------------------------- */

@media print{
  .site-header,.skip,.btn{display:none}
  body{font-size:11pt}
  .section{background:#fff!important;color:#000!important;
    border-top:1px solid #B9BDBB;padding-block:1.5rem}
  .site-footer{background:#fff;color:#000}
  a{text-decoration:none}
}

/* The lock-up band. A thin petrol strip under the hero carrying the three
   verbs, in that order, never reordered and never extended. */
.lockup-band{padding-block:clamp(1.9rem,3vw,2.6rem)}

/* --- The process ---------------------------------------------------------- */

/* Two columns per step: what happens, and what it leaves behind. The second
   column is the argument, so it is marked with the brass seal and never set
   smaller than the first. */
.process{list-style:none;margin:0;padding:0;display:grid;gap:0}
.process li{display:grid;
  grid-template-columns:3.2rem minmax(0,1fr) minmax(0,1fr);
  gap:1rem clamp(1.25rem,2.5vw,2.5rem);
  padding-block:1.6rem;border-top:1px solid var(--line)}
.process li:first-child{border-top:0;padding-top:0}
.pr-n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key);padding-top:.32rem}
.pr-b h3{margin-bottom:.35em}
.pr-b p{margin:0;color:var(--mut);font-size:.975rem;line-height:1.58}
.pr-o{margin:0;font-size:.975rem;line-height:1.58;position:relative;
  padding-left:1.5rem}
.pr-o::before{content:"";position:absolute;left:0;top:1.95rem;width:8px;
  height:8px;background:var(--brass)}
.pr-l{display:block;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
  margin-bottom:.45rem;padding-left:0}

@media (max-width:1000px){
  .process li{grid-template-columns:3.2rem minmax(0,1fr);row-gap:1.2rem}
  .pr-o{grid-column:2}
  .pr-o::before{top:.42rem}
}

/* --- Services ------------------------------------------------------------- */

.services{display:grid;gap:0;margin-top:3.5rem}
.service{padding-block:2.4rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1.5rem,3vw,3rem)}
.service:first-child{border-top:0;padding-top:0}
.sv-head{display:flex;align-items:baseline;gap:1rem}
.sv-n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key);flex:none}
.sv-head h3{font-family:var(--font-display);font-size:clamp(1.2rem,1.9vw,1.55rem);
  font-weight:500;line-height:1.2;letter-spacing:-.02em;margin:0;max-width:16ch}
.service dl{margin:0;display:grid;
  grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:.4rem clamp(1.25rem,2vw,2rem)}
.service dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut);padding-top:.42em}
.service dd{margin:0 0 1.1rem;max-width:56ch}
.service dd:last-child{margin-bottom:0}
/* How it fails is set back; how we manage it is set forward. */
.sv-fail{color:var(--mut);font-style:italic}
.sv-do{font-weight:600}

@media (max-width:820px){
  .service{grid-template-columns:1fr;gap:1.25rem}
  .service dl{grid-template-columns:1fr;gap:.35rem}
  .service dt{padding-top:.5rem}
  .service dd{margin-bottom:.9rem}
}

/* --- The hero's four questions -------------------------------------------- */

/* The USP, stated as the four questions a building is actually asked. Set as
   four equal columns so the count itself is legible before a word is read. */
.four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.5rem,3vw,3rem)}
.four > div{padding-block:1.15rem;border-top:1px solid var(--line)}
.four > div{display:grid;grid-template-columns:2.6rem 1fr;
  column-gap:.9rem;row-gap:0}
.fq-n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--key);padding-top:.3rem}
.four h3{grid-column:2;margin:0 0 .28em}
.four p{grid-column:2;margin:0;color:var(--mut);font-size:.95rem;
  line-height:1.55;max-width:40ch}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;
  margin-top:2.25rem}
.ink .hero-cta .btn{background:var(--brass);color:var(--ink);
  border-color:var(--brass)}
.ink .hero-cta .btn:hover{background:transparent;color:var(--brass)}

@media (max-width:820px){
  .four{grid-template-columns:1fr}
}

/* --- Sub-navigation ------------------------------------------------------- */

/* The five disciplines sit beneath The Life of a Building. This strip exposes
   the set on those pages so a visitor can move sideways without going back up. */
.subnav{background:var(--paper);border-bottom:1px solid var(--hairline)}
.subnav .wrap{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5rem clamp(1rem,2vw,2rem);padding-block:.8rem}
.sub-up{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--petrol);text-decoration:none;
  white-space:nowrap}
.sub-links{display:flex;flex-wrap:wrap;gap:.5rem clamp(.9rem,1.8vw,1.6rem)}
.subnav a:not(.sub-up){font-family:var(--font-display);font-size:.85rem;
  text-decoration:none;color:var(--slate);padding-bottom:2px;
  border-bottom:1px solid transparent}
.subnav a:not(.sub-up):hover{color:var(--ink);border-bottom-color:var(--rule)}
.subnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}
.sub-up[aria-current="page"]{border-bottom:1px solid var(--brass)}

/* --- Route cards ---------------------------------------------------------- */

/* A gateway page hands the visitor on rather than explaining. A route is a
   link with just enough to choose by. */
.routes{display:grid;gap:0}
.route{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:.3rem clamp(1.25rem,2.5vw,2.5rem);align-items:baseline;
  padding-block:1.15rem;border-top:1px solid var(--line);text-decoration:none}
.route:first-child{border-top:0;padding-top:0}
.rt-t{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
  line-height:1.3;color:var(--fg)}
.rt-t::after{content:" \2192";color:var(--brass);opacity:0;
  transition:opacity .15s ease}
.route:hover .rt-t::after{opacity:1}
.rt-l{color:var(--mut);font-size:.95rem;line-height:1.55;max-width:48ch}
.routes-big .route{padding-block:1.5rem}
.routes-big .rt-t{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.015em;line-height:1.24}

/* --- Points --------------------------------------------------------------- */

.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1.5rem,3vw,3rem)}
.points > div{padding-block:1.15rem;border-top:1px solid var(--line)}
.points h3{margin-bottom:.3em}
.points p{margin:0;color:var(--mut);font-size:.95rem;line-height:1.55;
  max-width:42ch}

/* --- Buyers --------------------------------------------------------------- */

.buyers{display:grid;gap:0}
.buyers > div{display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);
  gap:1rem clamp(1.5rem,3vw,3rem);padding-block:1.6rem;
  border-top:1px solid var(--line)}
.buyers > div:first-child{border-top:0;padding-top:0}
.buyers h3{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.012em;line-height:1.24;
  margin:0;max-width:20ch}
.buyers p{margin:0;font-size:.975rem;line-height:1.58;max-width:42ch}
.by-b{color:var(--fg)}
.by-w{color:var(--mut)}
.by-l{display:block;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
  margin-bottom:.4rem}
/* Each buyer ends at the page that serves them, so a reader who recognises
   themselves here does not have to go back to the navigation. */
.by-h{display:grid;gap:1rem;align-content:start}
.by-n .link{font-size:.9rem}

@media (max-width:1000px){
  .points{grid-template-columns:1fr}
  .buyers > div{grid-template-columns:1fr;row-gap:1rem}
}
@media (max-width:820px){
  .route{grid-template-columns:1fr;row-gap:.3rem}
  .subnav{display:none}
}