/* ==========================================================================
   BUILT BY TOBY — v2.0 "The Set"
   Concept: the site is set out as a construction drawing set. Title blocks,
   setout grids, registers and programs carry real data. Zero radius, hairline
   rules, notation in mono, brand palette locked per Brand Guidelines v2.0.
   ========================================================================== */

:root{
  /* Locked brand palette */
  --navy:#0F172A;
  --navy-deep:#0A1020;
  --graphite:#334155;
  --gold:#C8A96B;
  --gold-dim:#A98B52;
  --gold-ink:#8A6F3C;
  --offwhite:#F8FAFC;
  --paper:#FFFFFF;

  /* Derived rules & tints only — no new hues */
  --rule:rgba(15,23,42,.11);
  --rule-mid:rgba(15,23,42,.20);
  --rule-strong:rgba(15,23,42,.38);
  --rule-lt:rgba(248,250,252,.14);
  --rule-lt-mid:rgba(248,250,252,.26);
  --ink-60:rgba(15,23,42,.60);
  --paper-70:rgba(248,250,252,.70);
  --paper-50:rgba(248,250,252,.50);

  /* Type */
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Metrics */
  --gutter:28px;
  --max:1220px;
  --nav-h:72px;
  --sheet-y:clamp(72px,9vw,132px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--offwhite);
  color:var(--graphite);
  font-size:16px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* -------------------------------------------------- type ----------------- */
h1,h2,h3,h4{color:var(--navy);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.35rem);font-weight:900;text-transform:uppercase}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.015em}
h3{font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:700;letter-spacing:-.005em;line-height:1.3}
h4{font-size:.94rem;font-weight:700;line-height:1.4}
p{text-wrap:pretty}
strong{color:var(--navy);font-weight:700}

.lede{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.7;max-width:62ch}
.body-lg{font-size:1.02rem}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--offwhite)}
.on-dark{color:var(--paper-70)}
.on-dark strong{color:var(--offwhite)}

/* notation = the drafting voice. Mono, wide-tracked, small. */
.note{font-family:var(--mono);font-size:.725rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.note-sm{font-family:var(--mono);font-size:.725rem;letter-spacing:.16em;text-transform:uppercase}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.725rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:500;margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.hero .eyebrow,.band-cap p{text-shadow:0 1px 3px rgba(10,16,32,.85),0 0 1px rgba(10,16,32,.6)}
.hero .eyebrow,
.art-head .eyebrow,
.on-dark .eyebrow{color:var(--gold)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:var(--navy);
  padding:12px 20px;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0}

/* -------------------------------------------------- layout --------------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 var(--gutter);width:100%}

.sheet{padding:var(--sheet-y) 0;position:relative}
.sheet--tight{padding:calc(var(--sheet-y) * .58) 0}
.sheet--paper{background:var(--paper);border-block:1px solid var(--rule)}
.sheet--ink{background:var(--navy);border-block:1px solid rgba(255,255,255,.06)}
.sheet--ink-deep{background:var(--navy-deep)}

.sheet-head{max-width:70ch;margin-bottom:clamp(38px,5vw,60px)}
.sheet-head .lede{margin-top:20px}
.sheet-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  flex-wrap:wrap;max-width:none}

.cols{display:grid;gap:clamp(34px,5vw,72px)}
.cols--2{grid-template-columns:1fr 1fr}
.cols--7-5{grid-template-columns:7fr 5fr}
.cols--5-7{grid-template-columns:5fr 7fr}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--3eq{grid-template-columns:1fr 1fr 1fr;align-items:start}
@media(max-width:1000px){.cols--3eq{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.cols--3eq{grid-template-columns:1fr}}
/* cols--flip keeps the source order (image first for the alternating rhythm)
   but restores text-first reading order when the grid collapses */
@media(max-width:820px){
  .cols--flip > *:first-child{order:2}
  .cols--flip > *:last-child{order:1}
}
@media(max-width:900px){
  .cols--2,.cols--7-5,.cols--5-7,.cols--3{grid-template-columns:1fr}
}

/* -------------------------------------------------- title block ---------- */
/* The recurring structural device. Every field carries real data. */
.titleblock{display:grid;grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--rule-mid)}
@media(max-width:820px){.titleblock{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.titleblock{grid-template-columns:1fr}}
.titleblock > div{padding:14px 16px;border-right:1px solid var(--rule-mid);min-width:0}
.titleblock > div:last-child{border-right:0}
.titleblock dt{font-family:var(--mono);font-size:.695rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:6px}
.titleblock dd{font-size:.78rem;font-weight:700;color:var(--navy);line-height:1.35;letter-spacing:.01em}
.titleblock--ink{border-color:var(--rule-lt-mid)}
.titleblock--ink > div{border-color:var(--rule-lt-mid)}
.titleblock--ink dt{color:var(--paper-50)}
.titleblock--ink dd{color:var(--offwhite)}
@media(max-width:760px){
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock > div:nth-child(2n){border-right:0}
  .titleblock > div:nth-child(-n+2){border-bottom:1px solid var(--rule-mid)}
  .titleblock--ink > div:nth-child(-n+2){border-bottom-color:var(--rule-lt-mid)}
}

/* -------------------------------------------------- nav ------------------ */
.nav{position:fixed;inset:0 0 auto;z-index:300;height:var(--nav-h);
  background:rgba(10,16,32,.86);backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--rule-lt);transition:background .3s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;
  max-width:1400px;margin:0 auto;padding:0 var(--gutter);gap:20px}
.brand{display:flex;align-items:center;flex:none;padding-block:3px;min-height:26px}
/* v4.0 stacked lockup — mark over wordmark, so the header carries no separate
   mono word and no divider rule. Height drives it; width follows the 2.794:1
   artwork. Shipped at 136px tall for a 34px box, i.e. clean to 4x. */
.brand-lockup{height:34px;width:auto;flex:none;display:block}
.brand-lockup--foot{height:40px}
@media(max-width:420px){.brand-lockup{height:30px}}

.nav-links{display:flex;list-style:none;gap:0}
.nav-links a{position:relative;display:block;padding:26px 14px;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(248,250,252,.7);transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:22px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--gold)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.nav-toggle{display:none;width:44px;height:44px;place-items:center;color:#fff}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:22px;height:1.5px;background:currentColor;transition:.3s}
.nav-toggle span::before{transform:translateY(-7px)}
.nav-toggle span::after{transform:translateY(5.5px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg) translateY(-1px)}

/* WCAG 2.5.8 asks 24x24 minimum. Bare text links were 15px tall. */
@media(max-width:980px){
  .nav-toggle{display:grid}
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;
    background:var(--navy-deep);border-bottom:1px solid var(--rule-lt);
    padding:8px var(--gutter) 22px;
    display:none}
  .nav-links.is-open{display:flex}
  .nav-links a{padding:16px 0;border-bottom:1px solid var(--rule-lt);font-size:.82rem}
  .nav-links a::after{display:none}
}

/* -------------------------------------------------- hero (full bleed) ---- */
/* The photograph runs the whole width at full brightness and the copy sits in
   the frame's own negative space, scrimmed from that side only. These frames
   were shot with the subject to one side and open ground to the other; the old
   two-column split cropped that away to a panel and put the copy on flat navy
   beside it. `--crop` and the hero--left / hero--right class come from
   HERO_LAYOUT in build.py, set per frame with thirds guides over it. */
.hero{position:relative;background:var(--navy-deep);overflow:hidden;
  border-bottom:1px solid var(--rule-lt)}
.hero-frame{position:absolute;inset:0;z-index:0}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-vid.is-missing{display:none}

/* The scrim comes in from the copy side and stops before it reaches the
   subject, so the frame is never flattened to make type legible. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(var(--scrim-angle,258deg),rgba(10,16,32,.93) 0%,rgba(10,16,32,.82) 18%,
      rgba(10,16,32,.44) 40%,rgba(10,16,32,.1) 60%,rgba(10,16,32,0) 76%),
    linear-gradient(180deg,rgba(10,16,32,.7) 0%,rgba(10,16,32,.08) 22%,
      rgba(10,16,32,.08) 55%,rgba(10,16,32,.86) 100%)}
.hero--right{--scrim-angle:258deg}
.hero--left{--scrim-angle:102deg}

.hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
  padding:calc(var(--nav-h) + clamp(64px,8vw,120px)) var(--gutter) clamp(40px,5vw,68px);
  min-height:clamp(560px,58vw,900px);display:flex;flex-direction:column;
  justify-content:flex-end}
.hero-copy{position:relative;min-width:0}
.hero-copy-in{position:relative;z-index:2}
.hero-setout{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.28;
  pointer-events:none}
.hero--right .hero-copy{margin-left:auto;width:min(600px,58%);text-align:right}
.hero--left  .hero-copy{margin-right:auto;width:min(600px,58%);text-align:left}

.hero h1{color:#fff;font-size:clamp(2rem,4vw,3.8rem);line-height:1.02;
  letter-spacing:-.025em;margin-top:22px;text-wrap:balance;
  text-shadow:0 2px 24px rgba(10,16,32,.5)}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .lede{color:rgba(248,250,252,.86);margin-top:20px;
  font-size:clamp(.98rem,1.15vw,1.06rem);max-width:44ch;line-height:1.65}
.hero--right .lede{margin-left:auto}
.hero-reg{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--mono);
  font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);flex-wrap:wrap}
.hero-reg::before{content:"";width:8px;height:8px;background:var(--gold);flex:none;
  transform:rotate(45deg)}
.hero-actions{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
/* right-aligned copy: the eyebrow rule, reg marker and buttons all flip */
.hero--right .eyebrow,.hero--right .hero-reg,.hero--right .hero-actions{justify-content:flex-end}
.hero--right .hero-reg::before{order:2}
.hero-block{position:relative;z-index:2;border-top:1px solid var(--rule-lt-mid);
  background:rgba(10,16,32,.74);backdrop-filter:blur(6px)}

/* thanks.html and 404.html carry no photograph, so they get the setout grid on
   flat navy and none of the scrim or full-bleed geometry above */
.hero--plain{background:var(--navy);
  padding:calc(var(--nav-h) + clamp(60px,7.5vw,108px)) 0 clamp(56px,7vw,96px)}
.hero--plain::before{display:none}
.hero--plain .hero-setout{opacity:.5}
.hero--plain .hero-inner{position:relative;z-index:2}
.hero--plain .hero-body{max-width:58ch}
.hero--plain .lede{max-width:52ch}
@media(max-width:900px){
  .hero--plain{display:block;padding:calc(var(--nav-h) + 44px) 0 52px}
}

@media(max-width:900px){
  /* Full bleed does not survive a phone with this much copy — the headline
     lands on his face, and a scrim heavy enough to read against washes the
     photograph out. So it stacks: the frame gets its own panel, the copy sits
     on solid navy beneath it, and the scrim only touches the image. */
  .hero{display:flex;flex-direction:column}
  .hero::before{display:none}
  .hero-frame{position:relative;inset:auto;height:clamp(290px,58vw,400px);
    margin-top:var(--nav-h);flex:none}
  .hero-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,16,32,.4) 0%,rgba(10,16,32,0) 34%,
      rgba(10,16,32,0) 62%,rgba(10,16,32,.88) 100%)}
  .hero-img{object-position:var(--crop-mob) !important}
  .hero-in{min-height:0;padding:clamp(28px,5.5vw,40px) var(--gutter) clamp(34px,6vw,50px);
    background:var(--navy-deep)}
  .hero--right .hero-copy,.hero--left .hero-copy{width:100%;margin:0;text-align:left}
  .hero--right .eyebrow,.hero--right .hero-reg,.hero--right .hero-actions{justify-content:flex-start}
  .hero--right .hero-reg::before{order:0}
  .hero--right .lede{margin-left:0}
  /* once the reg line wraps, the marker must go inline or it sits on a line of
     its own above the words */
  .hero-reg{display:block;line-height:1.7}
  .hero-reg::before{display:inline-block;margin-right:9px;vertical-align:middle;
    position:relative;top:-1px}
  .hero-setout{display:none}
}

/* -------------------------------------------------- buttons -------------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;padding:17px 30px;border:1px solid var(--navy);
  color:var(--navy);background:transparent;transition:background .22s,color .22s,border-color .22s;
  position:relative}
.btn:hover{background:var(--navy);color:#fff}
.btn::after{content:"→";font-family:var(--mono);font-size:.9em;transition:transform .22s}
.btn:hover::after{transform:translateX(4px)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn--gold:hover{background:var(--gold-dim);border-color:var(--gold-dim);color:var(--navy)}
.btn--ghost{border-color:var(--rule-lt-mid);color:var(--offwhite)}
.btn--ghost:hover{background:var(--offwhite);color:var(--navy);border-color:var(--offwhite)}
.btn--bare{padding:0;border:0;color:var(--navy);letter-spacing:.14em}
.btn--bare:hover{background:none;color:var(--gold-ink)}
.on-dark .btn--bare{color:var(--gold)}

/* -------------------------------------------------- measured band -------- */
/* Survey strip: figures as measurements, hairline dividers, no cards. */
.measured{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule)}
.measured > div{padding:30px 22px 32px;border-right:1px solid var(--rule)}
.measured > div:last-child{border-right:0}
.measured b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,2.5vw,2rem);font-weight:500;color:var(--navy);line-height:1;letter-spacing:-.03em}
.measured span{display:block;margin-top:12px;font-family:var(--mono);font-size:.695rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-60);line-height:1.5}
.sheet--ink .measured{border-color:var(--rule-lt)}
.sheet--ink .measured > div{border-color:var(--rule-lt)}
.sheet--ink .measured b{color:var(--offwhite)}
.sheet--ink .measured span{color:var(--paper-50)}
@media(max-width:1080px){.measured{grid-template-columns:repeat(3,1fr)}
  .measured > div:nth-child(3n){border-right:0}
  .measured > div:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .sheet--ink .measured > div:nth-child(-n+3){border-bottom-color:var(--rule-lt)}}
@media(max-width:560px){.measured{grid-template-columns:repeat(2,1fr)}
  .measured > div{padding:22px 16px 24px}
  .measured > div:nth-child(3n){border-right:1px solid var(--rule)}
  .measured > div:nth-child(2n){border-right:0}
  .measured > div:not(:nth-last-child(-n+2)){border-bottom:1px solid var(--rule)}}

/* -------------------------------------------------- matrix --------------- */
/* The delivery record instrument: NCC class × sector, filterable. */
.matrix-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px}
.chip{font-family:var(--mono);font-size:.725rem;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--rule-mid);color:var(--graphite);
  transition:.2s;white-space:nowrap}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--offwhite)}
.matrix-count{font-family:var(--mono);font-size:.725rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-60);margin-left:auto}

.matrix{border:1px solid var(--rule-mid);background:var(--paper)}
.mrow{display:grid;grid-template-columns:132px 1fr;border-bottom:1px solid var(--rule)}
.mrow:last-child{border-bottom:0}
.mrow--head{background:var(--navy)}
.mrow--head > *{color:var(--offwhite) !important;font-family:var(--mono);font-size:.695rem;
  letter-spacing:.18em;text-transform:uppercase;padding:12px 18px}
.mkey{padding:20px 18px;border-right:1px solid var(--rule);background:rgba(15,23,42,.025)}
.mkey h3{font-family:var(--mono);font-size:.94rem;font-weight:500;color:var(--navy);
  letter-spacing:-.01em;line-height:1.2}
.mkey span{display:block;margin-top:5px;font-size:.725rem;line-height:1.45;color:var(--ink-60)}
.mcells{display:flex;flex-wrap:wrap;gap:0}
.mcell{flex:1 1 232px;min-width:0;padding:18px;border-right:1px solid var(--rule);
  transition:background .2s}
.mcell:last-child{border-right:0}
.mcell:hover{background:rgba(200,169,107,.07)}
.mcell h4{font-size:.85rem;margin-bottom:6px}
.mcell p{font-size:.74rem;line-height:1.55;color:var(--graphite)}
.mcell .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tag{font-family:var(--mono);font-size:.665rem;letter-spacing:.11em;text-transform:uppercase;
  padding:3px 7px;border:1px solid var(--rule-mid);color:var(--ink-60)}
.mrow.is-hidden,.mcell.is-hidden{display:none}
.matrix-empty{padding:44px 18px;text-align:center;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);display:none}
.matrix-empty.is-shown{display:block}
@media(max-width:720px){
  .mrow{grid-template-columns:1fr}
  .mkey{border-right:0;border-bottom:1px solid var(--rule)}
  .mrow--head{display:none}
  .mcell{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--rule)}
  .mcell:last-child{border-bottom:0}
}

/* -------------------------------------------------- program (gantt) ------ */
/* Career record drawn in the notation of its own trade: a two-pane program
   with activity column, time scale, bars and a live "now" line. */
.program{border:1px solid var(--rule-lt-mid);background:rgba(255,255,255,.02)}
.program-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pgrid{min-width:840px}
.prow{display:grid;grid-template-columns:262px 1fr;border-bottom:1px solid var(--rule-lt)}
.prow:last-child{border-bottom:0}
.prow--scale{background:rgba(255,255,255,.03)}
.pinfo{padding:17px 20px;border-right:1px solid var(--rule-lt-mid);min-width:0}
.pinfo b{display:block;color:var(--offwhite);font-size:.85rem;font-weight:700;line-height:1.35;
  letter-spacing:-.005em}
.pinfo span{display:block;margin-top:6px;font-family:var(--mono);font-size:.695rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.prow--scale .pinfo{padding-block:12px}
.prow--scale .pinfo b{font-family:var(--mono);font-size:.695rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper-50)}
.ptrack{position:relative;padding:19px 0;
  background-image:repeating-linear-gradient(90deg,var(--rule-lt) 0 1px,transparent 1px 23.809%)}
.prow--scale .ptrack{padding:0;height:41px}
.pmark{position:absolute;top:13px;font-family:var(--mono);font-size:.695rem;letter-spacing:.12em;
  color:var(--paper-50);padding-left:8px}
.pmark--end{padding-left:0;padding-right:8px;transform:translateX(-100%)}
.pfill{position:relative;height:24px;background:rgba(200,169,107,.15);
  border:1px solid rgba(200,169,107,.45);border-left:3px solid var(--gold);
  display:flex;align-items:center;padding:0 10px;transition:background .22s,border-color .22s}
.prow:hover .pfill{background:rgba(200,169,107,.3);border-color:rgba(200,169,107,.75)}
.pfill--current{background:rgba(200,169,107,.34)}
.pfill em{font-family:var(--mono);font-style:normal;font-size:.695rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--offwhite);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pfill--narrow{justify-content:flex-end}
/* A short bar carries its caption outside itself. Bars that start near the left
   push the caption to the RIGHT, so it can never print over the role title. */
.pfill--narrow em{position:absolute;right:calc(100% + 12px);color:var(--paper-70);
  overflow:visible;white-space:nowrap}
.pfill--capright{justify-content:flex-start}
.pfill--capright em{right:auto;left:calc(100% + 12px)}
.ptrack{padding-inline:0}
.ptoday{position:absolute;top:0;bottom:0;width:1px;background:var(--gold);z-index:3;opacity:.75}
.prow--scale .ptoday::after{content:"NOW";position:absolute;top:26px;right:7px;font-family:var(--mono);
  font-size:.665rem;letter-spacing:.16em;color:var(--gold)}
.program-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);
  font-size:.695rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-50)}
.program-legend span{display:flex;align-items:center;gap:8px}
.program-legend i{width:16px;height:8px;border:1px solid rgba(200,169,107,.6);
  border-left:3px solid var(--gold);background:rgba(200,169,107,.2);flex:none}
.program-legend i.now{width:1px;height:12px;background:var(--gold);border:0}

/* -------------------------------------------------- register ------------- */
.register{width:100%;border-collapse:collapse;border:1px solid var(--rule-mid);background:var(--paper)}
.register caption{text-align:left;font-family:var(--mono);font-size:.725rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);padding-bottom:12px}
.register th,.register td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--rule);
  vertical-align:top;font-size:.8rem}
.register thead th{background:var(--navy);color:var(--offwhite);font-family:var(--mono);
  font-size:.695rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500;border-bottom:0}
.register tbody tr:last-child th,.register tbody tr:last-child td{border-bottom:0}
.register tbody tr:hover{background:rgba(200,169,107,.06)}
.register tbody th{font-weight:700;color:var(--navy);width:34%}
.register td.jur{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;white-space:nowrap}
.register td.status{white-space:nowrap}
.status-dot{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.725rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--navy)}
.status-dot::before{content:"";width:6px;height:6px;background:var(--gold);flex:none;transform:rotate(45deg)}
.register-note{font-family:var(--mono);font-size:.725rem;letter-spacing:.1em;color:var(--ink-60);
  margin-top:14px;line-height:1.7}
.table-scroll{overflow-x:auto}
@media(max-width:720px){
  .register thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .register tbody tr{display:block;border-bottom:1px solid var(--rule-mid)}
  .register tbody tr:last-child{border-bottom:0}
  .register tbody th,.register tbody td{display:block;width:auto;border-bottom:0;padding:4px 16px}
  .register tbody th{padding-top:16px}
  .register tbody td:last-child{padding-bottom:16px}
}

/* -------------------------------------------------- discipline cards ----- */
.disciplines{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-lt)}
@media(max-width:860px){.disciplines{grid-template-columns:1fr}}
.disc{background:var(--navy);padding:clamp(28px,3.4vw,42px);position:relative}
.disc-code{font-family:var(--mono);font-size:.695rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;display:flex;justify-content:space-between;gap:14px}
.disc h3{color:var(--offwhite);font-size:clamp(1.1rem,1.7vw,1.32rem);margin-bottom:14px}
.disc p{font-size:.88rem;color:var(--paper-70)}
.holds{list-style:none;margin-top:24px;border-top:1px solid var(--rule-lt);padding-top:20px}
.holds li{position:relative;padding:7px 0 7px 26px;font-size:.78rem;color:var(--paper-70);line-height:1.6}
.holds li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;
  border:1px solid var(--gold)}
.holds li::after{content:"";position:absolute;left:2.5px;top:16.5px;width:4px;height:4px;background:var(--gold)}

/* -------------------------------------------------- aperture (photo) ----- */
/* Optional photo slot. If no file is present it reads as a drawn aperture,
   never as a broken or "missing asset" panel. */
.aperture{position:relative;background:var(--navy);overflow:hidden;
  border:1px solid var(--rule-lt-mid);aspect-ratio:4/3}
.aperture--tall{aspect-ratio:3/4}
.aperture--portrait{aspect-ratio:4/5}
.aperture--wide{aspect-ratio:21/9}
.aperture-mark{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.aperture-mark span{font-weight:900;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:.02em;
  color:rgba(248,250,252,.07);line-height:1}
.aperture-mark span i{color:rgba(200,169,107,.18);font-style:normal}
.aperture::before,.aperture::after{content:"";position:absolute;width:22px;height:22px;z-index:2;
  border-color:rgba(200,169,107,.4);border-style:solid}
.aperture::before{top:12px;left:12px;border-width:1px 0 0 1px}
.aperture::after{bottom:12px;right:12px;border-width:0 1px 1px 0}
.aperture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.aperture img.is-missing{display:none}
.aperture video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.aperture video.is-missing{display:none}
.figcap{font-family:var(--mono);font-size:.725rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-60);padding-top:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.on-dark .figcap{color:var(--paper-50)}


/* -------------------------------------------------- compliance plate ----- */
/* Modelled on the rating plate fixed to a switchboard: fixed fields, riveted
   corners, no adjectives. Carries the credentials a client actually checks. */
.plate{position:relative;background:var(--navy);border:1px solid rgba(200,169,107,.34);
  padding:24px 24px 20px;
  background-image:
    radial-gradient(circle 2.5px at 11px 11px,rgba(200,169,107,.55) 96%,transparent),
    radial-gradient(circle 2.5px at calc(100% - 11px) 11px,rgba(200,169,107,.55) 96%,transparent),
    radial-gradient(circle 2.5px at 11px calc(100% - 11px),rgba(200,169,107,.55) 96%,transparent),
    radial-gradient(circle 2.5px at calc(100% - 11px) calc(100% - 11px),rgba(200,169,107,.55) 96%,transparent);
  background-repeat:no-repeat}
.plate-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:0 0 15px;margin-bottom:2px;border-bottom:1px solid var(--rule-lt-mid)}
.plate-head b{font-weight:900;font-size:1.16rem;color:#fff;line-height:1;letter-spacing:.01em}
.plate-head b i{color:var(--gold);font-style:normal}
.plate-head span{font-family:var(--mono);font-size:.665rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.plate dl{display:grid}
.plate dl > div{padding:13px 0;border-bottom:1px solid var(--rule-lt)}
.plate dt{font-family:var(--mono);font-size:.665rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--paper-50);margin-bottom:6px}
.plate dd{font-size:.83rem;font-weight:600;color:var(--offwhite);line-height:1.45}
.plate dd em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--gold);
  display:block;margin-top:4px;letter-spacing:.06em}
.plate-foot{padding-top:15px;font-family:var(--mono);font-size:.665rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper-50);line-height:1.7}


/* -------------------------------------------------- photography layer ---- */
/* Photographs load as CSS background images: a missing file simply does not
   paint. No broken icons, no layout shift, no JavaScript required. */

/* full-bleed divider: image band when a photograph exists, labelled navy strip
   when it does not */
.band{position:relative;overflow:hidden;
  min-height:clamp(190px,22vw,330px);
  background:linear-gradient(180deg,var(--band-top,transparent) 0%,
    var(--band-bot,transparent) 100%)}
/* the photograph sits on its own layer and is masked to nothing at the top and
   bottom edges, so it dissolves into whatever section sits above or below
   rather than ending on a line */
.band-img{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,16,32,.50) 0%,rgba(10,16,32,.08) 32%,
    rgba(10,16,32,.66) 74%,rgba(10,16,32,.38) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.band-cap{position:relative;z-index:2;display:flex;align-items:flex-end;
  min-height:clamp(190px,22vw,330px);padding-bottom:clamp(34px,4.6vw,68px)}
.band-cap .wrap{padding-block:0}
.band-cap p{text-shadow:0 1px 14px rgba(10,16,32,.75)}
.band-cap p{font-family:var(--mono);font-size:.695rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-70);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0}

/* thumbnail on publishing programme rows */
.pub-thumb{display:block;width:132px;aspect-ratio:16/10;background-color:var(--navy);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid var(--rule)}
@media(max-width:700px){
  .pub-thumb{display:none}
}

/* local preview marker — delete this rule and the badge markup before launch */
.preview-badge{position:fixed;bottom:0;left:0;z-index:500;background:#8E3B3B;color:#fff;
  font-family:var(--mono);font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 13px;line-height:1.2}
@media print{.preview-badge{display:none}}

/* -------------------------------------------------- record cards --------- */
.records{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-lt)}
@media(max-width:980px){.records{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.records{grid-template-columns:1fr}}
.record{background:var(--navy-deep);padding:30px 26px 28px;position:relative;
  transition:background .25s}
.record:hover{background:var(--navy)}
.record .cat{font-family:var(--mono);font-size:.695rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:16px}
.record h3{color:var(--offwhite);margin-bottom:10px}
.record p{font-size:.8rem;color:var(--paper-70)}
.record .loc{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-lt);
  font-family:var(--mono);font-size:.695rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-50)}

/* -------------------------------------------------- publishing program --- */
.pubs{border:1px solid var(--rule-mid);background:var(--paper)}
.pub{display:grid;grid-template-columns:44px 132px minmax(0,1fr) 118px;gap:22px;
  align-items:start;
  padding:24px 24px;border-bottom:1px solid var(--rule);transition:background .2s}
.pub:last-child{border-bottom:0}
.pub:hover{background:rgba(15,23,42,.02)}
.pub .idx{font-family:var(--mono);font-size:.92rem;color:var(--gold-ink);font-weight:500;padding-top:2px}
.pub h3{font-size:.95rem;line-height:1.4;margin-bottom:9px}
.pub .pillar{font-family:var(--mono);font-size:.695rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-60)}
.pub .state{font-family:var(--mono);font-size:.695rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--graphite);text-align:right;padding-top:3px;white-space:nowrap}
@media(max-width:900px){
  .pub{grid-template-columns:44px 104px minmax(0,1fr);gap:16px}
  .pub .state{grid-column:2 / -1;text-align:left;padding-top:4px}
  .pub-thumb{width:104px}
}
@media(max-width:620px){
  .pub{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .pub-thumb{display:none}
  .pub .state{grid-column:2;padding-top:8px}
}

/* -------------------------------------------------- brings grid ---------- */
.brings{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
@media(max-width:900px){.brings{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.brings{grid-template-columns:1fr}}
.bring{background:var(--paper);padding:30px 26px}
.bring .k{font-family:var(--mono);font-size:.695rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:14px}
.bring h3{margin-bottom:9px;font-size:.98rem}
.bring p{font-size:.79rem;line-height:1.62}

/* -------------------------------------------------- callout -------------- */
.callout{border-left:3px solid var(--gold);padding:4px 0 4px 24px;max-width:60ch}
.callout p{font-size:.95rem}
.pullquote{font-size:clamp(1.15rem,2.1vw,1.6rem);font-weight:600;color:var(--navy);
  line-height:1.35;letter-spacing:-.015em;max-width:38ch}
.on-dark .pullquote{color:var(--offwhite)}

/* -------------------------------------------------- form ----------------- */
.form-shell{background:var(--paper);border:1px solid var(--rule-mid);padding:clamp(26px,3.5vw,42px)}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:.695rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:9px}
.field .req{color:var(--gold-ink)}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:.92rem;
  color:var(--navy);background:var(--offwhite);border:1px solid var(--rule-mid);padding:14px 15px;
  transition:border-color .2s,background .2s}
.field textarea{min-height:150px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy);
  background:var(--paper)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#9B3A3A}
.field .hint{font-size:.72rem;color:var(--ink-60);margin-top:8px;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.honey{position:absolute;left:-9999px}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.form-foot .note-sm{color:var(--ink-60)}

.contact-facts{list-style:none;border-top:1px solid var(--rule)}
.contact-facts li{padding:20px 0;border-bottom:1px solid var(--rule)}
.contact-facts dt{font-family:var(--mono);font-size:.695rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:7px}
.contact-facts dd{font-size:.92rem;color:var(--navy);font-weight:600}
.contact-facts a:hover{color:var(--gold-ink)}

.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 26px 46px;border-left:1px solid var(--rule-lt);
  margin-left:12px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-13px;top:-3px;
  width:26px;height:26px;display:grid;place-items:center;background:var(--gold);color:var(--navy);
  font-family:var(--mono);font-size:.695rem;font-weight:500}
.steps h3{color:var(--offwhite);margin-bottom:6px}
.steps p{font-size:.82rem;color:var(--paper-70)}

/* -------------------------------------------------- footer --------------- */
.foot-cta{background:var(--gold);padding:clamp(40px,5vw,64px) 0}
.foot-cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.foot-cta h2{color:var(--navy);max-width:24ch}
.foot-cta .btn{border-color:var(--navy);color:var(--navy)}
.foot-cta .btn:hover{background:var(--navy);color:var(--gold)}

.foot{background:var(--navy-deep);color:var(--paper-70);padding:clamp(48px,6vw,76px) 0 0}
.foot-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:44px}
@media(max-width:820px){.foot-main{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.foot-main{grid-template-columns:1fr}}
.foot-main p{font-size:.8rem;margin-top:16px;max-width:34ch;line-height:1.7}
.foot h3{color:var(--offwhite);font-family:var(--mono);font-size:.695rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;margin-bottom:18px}
.foot ul{list-style:none}
.foot ul li{margin-bottom:3px}
/* WCAG 2.5.8: a bare inline text link is ~15px tall. Block + padding takes the
   footer links, and the brand lockups, past the 24px minimum on touch. */
.foot ul a{display:block;padding:6px 0;font-size:.82rem;transition:color .2s}
.foot ul a:hover{color:var(--gold)}
.foot-base{border-top:1px solid var(--rule-lt);padding:22px 0 26px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.695rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper-50)}
.foot-base a:hover{color:var(--gold)}

/* -------------------------------------------------- motion --------------- */
/* Reveals only hide themselves when scripting is live. The class comes from a
   one-line script in <head>; without it every revealed block sat at opacity 0
   with no observer coming to turn it on, which took the whole page down with
   JavaScript disabled — the assembly drawing included. */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),
  transform .7s cubic-bezier(.22,.61,.36,1)}
html.js .reveal.is-in{opacity:1;transform:none}
.draw{stroke-dasharray:1;stroke-dashoffset:1}
.hero-setout.is-drawn .draw{animation:draw 1.5s cubic-bezier(.33,1,.68,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-fade{opacity:0;animation:none}
.hero-setout.is-drawn .hero-fade{animation:fadein .9s ease .55s forwards}
@keyframes fadein{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;
    transition-duration:.001ms !important}
  html.js .reveal,.reveal{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
  .hero-fade{opacity:1}
}

/* -------------------------------------------------- utility -------------- */
.stack-sm > * + *{margin-top:14px}
.stack > * + *{margin-top:22px}
.stack-lg > * + *{margin-top:38px}
.mt-l{margin-top:clamp(34px,4.5vw,56px)}
.mt-m{margin-top:26px}
.hr{height:1px;background:var(--rule);border:0;margin:clamp(34px,4.5vw,56px) 0}
.on-dark .hr,.sheet--ink .hr{background:var(--rule-lt)}
.center{text-align:center}
.sheet-ref{position:absolute;top:calc(var(--nav-h) + 22px);right:var(--gutter);
  font-family:var(--mono);font-size:.695rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(248,250,252,.34);z-index:3}
.sheet-ref--ink{color:rgba(15,23,42,.34)}
@media(max-width:700px){.sheet-ref{display:none}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media print{
  .nav,.foot-cta,.hero-setout,.matrix-bar{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .sheet{padding:18pt 0}
  .sheet--ink,.sheet--ink-deep,.disc,.record,.foot{background:#fff !important}
  .on-dark,.on-dark p,.record p,.disc p{color:#222 !important}
  .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.disc h3,.record h3{color:#000 !important}
}

/* ==========================================================================
   v2.2 — image-led rhythm, classification explorer, video hero
   ========================================================================== */

/* -------------------------------------------------- hero video ----------- */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video video{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero-video video.is-missing{display:none}

/* -------------------------------------------------- trust bar ------------ */
.trustbar{background:var(--navy-deep);border-top:1px solid rgba(200,169,107,.28)}
/* inside the full-bleed hero the frame and its scrim are absolute over the whole
   header, so anything after the copy has to lift itself above them */
.hero > .trustbar{position:relative;z-index:2}
.trustbar ul{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.trustbar li{display:flex;align-items:center;gap:12px;padding:22px 18px 22px 0;min-width:0;
  border-right:1px solid var(--rule-lt)}
.trustbar li:last-child{border-right:0}
.trustbar svg{width:22px;height:22px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.4}
.trustbar span{font-family:var(--mono);font-size:.695rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper-70);line-height:1.45}
@media(max-width:1080px){.trustbar ul{grid-template-columns:repeat(3,1fr)}
  .trustbar li:nth-child(3n){border-right:0}
  .trustbar li:nth-child(-n+3){border-bottom:1px solid var(--rule-lt)}}
@media(max-width:620px){.trustbar ul{grid-template-columns:repeat(2,1fr)}
  .trustbar li{padding-right:12px}
  .trustbar li:nth-child(3n){border-right:1px solid var(--rule-lt)}
  .trustbar li:nth-child(2n){border-right:0}
  .trustbar li:not(:nth-last-child(-n+2)){border-bottom:1px solid var(--rule-lt)}}

/* -------------------------------------------------- classification explorer */
/* The spine of the site: what he is licensed to build, and what he has built.
   Six NCC classes as selectable cards driving one detail panel. Without
   JavaScript every panel is visible and the page still reads correctly. */
.explorer{border:1px solid var(--rule-mid);background:var(--paper)}
/* the classification explorer was removed in v2.6 - see build.py */
.explorer-note{font-family:var(--mono);font-size:.695rem;letter-spacing:.1em;color:var(--ink-60);
  margin-top:16px;line-height:1.7}

/* -------------------------------------------------- image-led cards ------ */
/* v1 rhythm: photograph on top, substance underneath. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--paper);display:flex;flex-direction:column}
.tile-img{aspect-ratio:16/10;background-color:var(--navy);background-size:cover;
  background-position:center;position:relative}
.tile-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,32,.15),rgba(10,16,32,.55))}
.tile-body{padding:24px 22px 26px;flex:1}
.tile-body .tcode{font-family:var(--mono);font-size:.665rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-ink);display:block;margin-bottom:12px}
.tile-body h3{font-size:1rem;margin-bottom:10px}
.tile-body p{font-size:.8rem;line-height:1.62}

.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-lt)}
@media(max-width:920px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.projects{grid-template-columns:1fr}}
.project{background:var(--navy-deep);display:flex;flex-direction:column;
  transition:background .25s}
.project:hover{background:var(--navy)}
.project-img{aspect-ratio:16/10;background-color:var(--navy);background-size:cover;
  background-position:center;position:relative}
.project-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,32,.2),rgba(10,16,32,.6))}
.project-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.project-body .cat{font-family:var(--mono);font-size:.665rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:11px}
.project-body h3{color:var(--offwhite);margin-bottom:9px;font-size:.98rem}
.project-body p{font-size:.79rem;color:var(--paper-70);flex:1}
.project-body .loc{margin-top:16px;padding-top:13px;border-top:1px solid var(--rule-lt);
  font-family:var(--mono);font-size:.695rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-50)}

/* ==========================================================================
   v2.3 — ASSEMBLY SEQUENCE
   A building constructed in real trade order, stage by stage. The sequence is
   the point: any studio can fade layers in; only a builder sequences them the
   way the job actually runs.
   ========================================================================== */
.assembly{background:var(--navy);border:1px solid var(--rule-lt-mid)}
.asm-top{display:grid;grid-template-columns:1fr 320px;gap:0;border-bottom:1px solid var(--rule-lt)}
@media(max-width:960px){.asm-top{grid-template-columns:1fr}}

.asm-stage{position:relative;padding:22px 24px;min-width:0;
  background-image:
    linear-gradient(rgba(248,250,252,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(248,250,252,.028) 1px,transparent 1px);
  background-size:34px 34px}
.asm-stage svg{width:100%;height:auto;display:block}

/* ---- the axonometric ----------------------------------------------------
   Every system, annotation layer and callout layer is in the markup. The
   builder emits the built look as presentation attributes; these classes
   recolour it. No JavaScript means no classes, which means the finished
   building with its stage-07 annotation — which is the right default.
   -------------------------------------------------------------------------- */
.asm-sys path{transition:stroke .4s ease,fill .4s ease}
.asm-sys{transition:opacity .4s ease}

/* not yet built, or stripped back off */
.asm-sys.is-off{opacity:.26}
.asm-sys.is-off path{stroke:#5d6d8d;stroke-dasharray:3 3;fill:none}
.asm-sys.is-off .asm-bub,.asm-sys.is-off text{opacity:0}
/* the system being read */
.asm-sys.is-now path{stroke:var(--gold)}
.asm-sys.is-now circle{stroke:var(--gold)}
/* services sit inside the building; at full weight they read as an error once
   the envelope is on, so they drop back unless they are the system being read */
.asm-sys[data-sys="6"].is-done{opacity:.5}

/* One annotation layer and one callout layer at a time. Without JavaScript the
   :not(.js) rule leaves stage 07 showing, which matches the finished building
   the systems already draw. */
.asm .asm-ann,.asm .asm-call{display:none}
.asm:not(.js) .asm-ann[data-ann="7"],
.asm:not(.js) .asm-call[data-call="7"]{display:block}
.asm.js .asm-ann.is-on,.asm.js .asm-call.is-on{display:block}

.asm .t-ann{fill:#8fa0bd;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em}
.asm .t-anng{fill:var(--gold);font-family:var(--mono);font-size:9.5px;letter-spacing:.13em}
.asm .t-dim{fill:#8fa0bd;font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.asm .t-bub{fill:var(--offwhite);font-family:var(--mono);font-size:10px}
.asm .t-call{fill:var(--offwhite);font-family:var(--sans);font-size:12.5px;font-weight:600}

/* Below 860px the sheet scales down far enough that 9px annotation becomes
   about 3px. Dimensions, datums and callouts come off and the drawing itself
   carries the reading. */
@media(max-width:860px){
  .asm .asm-ann,.asm .asm-call,
  .asm:not(.js) .asm-ann[data-ann="7"],.asm:not(.js) .asm-call[data-call="7"],
  .asm.js .asm-ann.is-on,.asm.js .asm-call.is-on{display:none}
  .asm-sys[data-sys="2"] .asm-bub{display:none}
  /* sheet border, header and scale bar are sized for the wide sheet */
  .asm .asm-sheet{display:none}
  .asm-stage{padding:14px 12px}
}

/* legend */
.asm-key{list-style:none;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--rule-lt);display:grid;gap:8px}
.asm-key li{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-50)}
.asm-key .k{width:16px;height:0;border-top:2px solid;flex:none}
.asm-key .k--now{border-color:var(--gold)}
.asm-key .k--built{border-color:var(--offwhite)}
.asm-key .k--off{border-top-style:dashed;border-color:#5d6d8d}
.asm-key .k--set{border-top-style:dotted;border-color:#7d8fb3}

/* The drawing turns, so it says so and it grabs. Only meaningful once the
   renderer is in — the static fallback cannot rotate. */
.asm-turn{display:none}
html.js .asm-turn{display:block;color:var(--paper-70)}
html.js .asm-stage{cursor:grab}
html.js .asm-stage.is-turning{cursor:grabbing}
html.js .asm-stage:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
@media(max-width:760px){.asm-turn{display:none !important}}
.asm-plain{color:var(--offwhite) !important;font-weight:600;margin-bottom:12px}

.asm-read{padding:26px 26px 28px;border-left:1px solid var(--rule-lt);display:flex;
  flex-direction:column}
@media(max-width:960px){.asm-read{border-left:0;border-top:1px solid var(--rule-lt)}}
.asm-read .sno{font-family:var(--mono);font-size:.695rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.asm-read h3{color:var(--offwhite);font-size:1.12rem;margin-bottom:12px;line-height:1.25}
.asm-read p{font-size:.85rem;color:var(--paper-70);line-height:1.65}
.asm-read .role{margin-top:auto;padding-top:20px;border-top:1px solid var(--rule-lt)}
.asm-read .role dt{font-family:var(--mono);font-size:.665rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--paper-50);margin-bottom:7px}
.asm-read .role dd{font-size:.8rem;color:var(--offwhite);font-weight:600;line-height:1.5}

/* stage scrubber */
.asm-scrub{padding:18px 24px 22px}
.asm-track{position:relative;display:grid;gap:0;margin-bottom:4px}
.asm-track::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;
  background:var(--rule-lt-mid)}
.asm-fill{position:absolute;left:0;top:11px;height:1px;background:var(--gold);
  transition:width .45s ease;width:0}
.asm-steps{position:relative;display:flex;list-style:none;gap:0}
.asm-steps li{flex:1;min-width:0}
.asm-steps button{width:100%;padding:0;text-align:left;display:block;position:relative}
.asm-steps .dot{display:block;width:11px;height:11px;margin:6px 0 12px;
  background:var(--navy);border:1px solid var(--rule-lt-mid);transform:rotate(45deg);
  transition:background .3s,border-color .3s}
.asm-steps .lb{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-50);line-height:1.45;padding-right:10px;
  transition:color .3s}
.asm-steps button:hover .lb{color:var(--paper-70)}
.asm-steps button:hover .dot{border-color:var(--gold)}
.asm-steps li.done .dot{background:var(--gold-dim);border-color:var(--gold-dim)}
.asm-steps li.active .dot{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(200,169,107,.18)}
.asm-steps li.active .lb{color:var(--gold)}
/* Seven stops will not fit across a phone. Wrapping them left the rail drawn
   across the first row only and the diamonds reading as a grid of loose marks,
   so on a phone the stops become a plain two-column list with the rail off and
   the diamond inline with its label. */
/* dragging the rail is a desktop affordance; the rail is not drawn on a phone */
.asm-hint .hint-narrow{display:none}
@media(max-width:760px){
  .asm-hint .hint-wide{display:none}
  .asm-hint .hint-narrow{display:inline}
  .asm-track{cursor:default}
  .asm-track::before,.asm-fill{display:none}
  .asm-steps{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .asm-steps li{flex:none;border-top:1px solid var(--rule-lt)}
  .asm-steps li:nth-child(2n){border-left:1px solid var(--rule-lt)}
  .asm-steps button{display:flex;align-items:center;gap:10px;padding:11px 2px}
  .asm-steps .dot{margin:0}
  .asm-steps .lb{font-size:.615rem}
}
.asm-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:0 24px 22px}
.asm-foot .note-sm{color:var(--paper-50)}
.asm-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.695rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--offwhite);
  border:1px solid var(--rule-lt-mid);padding:10px 16px;transition:.2s}
.asm-btn:hover{border-color:var(--gold);color:var(--gold)}

/* jurisdiction scope strip */
.scope{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule-mid);margin-bottom:clamp(30px,4vw,46px)}
@media(max-width:720px){.scope{grid-template-columns:1fr}}
.scope > div{background:var(--paper);padding:24px 26px 26px}
.scope .juris{font-family:var(--mono);font-size:.695rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:14px}
.scope h3{font-size:1.05rem;margin-bottom:10px}
.scope p{font-size:.83rem;line-height:1.62}
.scope .badge{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.665rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--navy);background:var(--gold);
  padding:5px 10px}


/* ==========================================================================
   v2.6 — deconstruction assembly, hero motion, environments, 404 index
   ========================================================================== */

/* ---- hero photograph -----------------------------------------------------
   No drift animation. Animating background-size/position repaints the whole
   image every frame, which reads as judder rather than movement. The motion on
   this site belongs to the drawing. */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-vid.is-missing{display:none}

/* ---- assembly: ghosted removed work ------------------------------------
   Layers are never hidden. Present systems are solid; systems that have been
   stripped stay on the sheet at low opacity, the way an alterations drawing
   leaves demolished work visible. */
.asm.js g[data-stage]{opacity:.085;transition:opacity .5s ease}
.asm.js g[data-stage].is-on{opacity:1}
.asm{outline-offset:2px}
.asm .lead{fill:none;stroke:rgba(248,250,252,.34);stroke-width:1;
  stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
/* glazing reads as glass: cool, distinct from the warm gold of the services
   and from the neutral fill of the structure */
.asm .glass{fill:rgba(148,186,214,.17);stroke:rgba(178,210,232,.62);stroke-width:1.1;
  vector-effect:non-scaling-stroke}
/* the entry is a void with a gold reveal, not a slab of white */
.asm .entry{fill:var(--navy-deep);stroke:var(--gold);stroke-width:1.4;
  vector-effect:non-scaling-stroke}

.asm-read .sno{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.asm-mode{margin-left:auto;font-family:var(--mono);font-size:.665rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-50);border:1px solid var(--rule-lt-mid);
  padding:3px 8px;white-space:nowrap}
.asm-strip{margin-top:12px;font-family:var(--mono);font-size:.725rem;letter-spacing:.06em;
  line-height:1.6;color:var(--gold)}
.asm-strip span{display:block;font-size:.665rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--paper-50);margin-bottom:4px}
.asm-hint{margin-top:14px;font-family:var(--mono);font-size:.665rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--paper-50);line-height:1.6}

/* the scrubber is draggable; keep vertical page scroll working over it */
.asm-track{cursor:ew-resize;touch-action:pan-y}
.asm-steps button{cursor:pointer}
.asm-steps li.stripped .dot{background:transparent;border-color:var(--rule-lt);opacity:.5}
.asm-steps li.stripped .lb{color:var(--paper-50)}
.asm-steps li.done .lb{color:var(--paper-70)}

/* ---- environments (capability) ----------------------------------------- */
.envs{display:grid;gap:1px;background:var(--rule-lt);border:1px solid var(--rule-lt-mid)}
.env{display:grid;grid-template-columns:78px 1fr;background:var(--navy);
  padding:24px 26px 26px;gap:0}
@media(max-width:640px){.env{grid-template-columns:1fr;gap:10px}}
.env-no{font-family:var(--mono);font-size:1.05rem;font-weight:500;color:var(--gold);
  letter-spacing:.06em;line-height:1}
.env h3{color:var(--offwhite);font-size:1.04rem;margin-bottom:9px}
.env p{font-size:.85rem;color:var(--paper-70);line-height:1.65;max-width:64ch}
.env-ev{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-lt);
  font-size:.79rem !important;color:var(--paper-50) !important}
.env-ev span{display:block;font-family:var(--mono);font-size:.665rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-dim);margin-bottom:6px}

/* ---- 404: the whole page set ------------------------------------------- */
.lost-links{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;background:var(--rule-lt);border:1px solid var(--rule-lt-mid);margin-top:30px}
.lost-links a{display:block;background:var(--navy);padding:17px 18px;font-family:var(--mono);
  font-size:.725rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-70);
  transition:background .2s,color .2s}
.lost-links a:hover{background:var(--navy-deep);color:var(--gold)}

/* ---- plate: jurisdiction now sits in the term, so allow two lines ------ */
.plate dl dt{white-space:normal}

/* ---- mobile: the programme scroller starts at the current role --------- */
@media(max-width:760px){
  .program-scroll{scroll-snap-type:x proximity}
  .program-legend{flex-wrap:wrap}
}

/* contact page: the email is the single most important link on the site */
.contact-facts a{display:inline-block;padding-block:5px}


/* ==========================================================================
   v2.7 — article pages
   ========================================================================== */
.wrap--narrow{max-width:760px}

.art-head{background:var(--navy);padding-top:calc(var(--nav-h) + clamp(40px,5vw,72px));
  padding-bottom:clamp(34px,4vw,52px);border-bottom:1px solid var(--rule-lt)}
.art-crumb{font-family:var(--mono);font-size:.695rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px}
.art-crumb a{display:inline-block;padding-block:6px;color:var(--paper-70);text-decoration:none;
  border-bottom:1px solid transparent;transition:.2s}
.art-crumb a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.art-head h1{color:var(--offwhite);text-transform:none;letter-spacing:-.015em;
  font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.1;font-weight:800;text-wrap:balance}
.art-stand{margin-top:22px;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.6;
  color:var(--paper-70);max-width:62ch}
.art-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--rule-lt)}
.art-meta > div{padding:15px 18px 15px 0;border-right:1px solid var(--rule-lt)}
.art-meta > div:last-child{border-right:0}
.art-meta dt{font-family:var(--mono);font-size:.665rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--paper-50);margin-bottom:6px}
.art-meta dd{font-size:.8rem;color:var(--offwhite);font-weight:600;line-height:1.4}

.art-body{padding-block:clamp(40px,5vw,72px)}
.art-body h2{font-size:clamp(1.15rem,2vw,1.5rem);text-transform:none;letter-spacing:-.01em;
  margin:clamp(30px,3.6vw,46px) 0 14px;line-height:1.2}
.art-body h2:first-child{margin-top:0}
.art-body p{font-size:1.02rem;line-height:1.78;margin-bottom:18px;max-width:66ch}
.art-body p strong{color:var(--navy);font-weight:600}
.art-body em{font-style:italic}
.art-list{margin:0 0 22px;padding-left:0;list-style:none;max-width:66ch;
  border-left:2px solid var(--gold);padding-left:22px}
.art-list li{font-size:.98rem;line-height:1.7;margin-bottom:12px;position:relative}
.art-list li:last-child{margin-bottom:0}
.art-note{margin-top:clamp(34px,4vw,50px);padding:18px 20px;background:var(--paper);
  border:1px solid var(--rule-mid);border-left:3px solid var(--rule-strong);
  font-size:.84rem !important;line-height:1.65;color:var(--ink-60)}
.art-src{margin-top:clamp(30px,3.6vw,44px);padding-top:22px;border-top:1px solid var(--rule-mid)}
.art-src h2{font-family:var(--mono);font-size:.695rem !important;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-60);margin:0 0 12px !important}
.art-src ul{list-style:none;padding:0}
.art-src li{margin-bottom:8px;font-size:.85rem;line-height:1.55}
.art-src a{display:inline-block;padding-block:5px;color:var(--gold-ink);
  border-bottom:1px solid rgba(169,139,82,.4)}
.art-src a:hover{border-bottom-color:var(--gold-dim)}
.art-back{margin-top:clamp(34px,4vw,50px)}

/* the index: a published item is a link, an unpublished one is not */
a.pub--live{text-decoration:none}
a.pub--live:hover{background:rgba(200,169,107,.06)}
a.pub--live:hover h3{color:var(--gold-ink)}
.state--live{color:var(--gold-ink) !important;font-weight:600}
a.pub--live .state--live::after{content:" \2192"}


/* ==========================================================================
   v2.9 — photographs are real <img> elements, not CSS backgrounds, so Google
   Images can index them. Each fills its frame with object-fit.
   ========================================================================== */
.band-img{background-image:none !important}
.band-photo{width:100%;height:100%;object-fit:cover;display:block}
.tile-img{position:relative;overflow:hidden;background-image:none !important}
.tile-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pub-thumb{position:relative;overflow:hidden;background-image:none !important}
.pub-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the aperture portrait already used <img>; keep its crop behaviour explicit */
.aperture img{width:100%;height:100%;object-fit:cover}

/* footer profile links — selectors must out-rank `.foot ul a`, which sets
   display:block for the page lists above */
.foot ul.socials{list-style:none;display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.foot ul.socials li{margin-bottom:0}
.foot ul.socials a.soc{display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;border:1px solid var(--rule-lt-mid);color:var(--paper-70);
  font-family:var(--mono);font-size:.665rem;letter-spacing:.13em;text-transform:uppercase;
  line-height:1;transition:border-color .2s,color .2s}
.foot ul.socials a.soc svg{width:15px;height:15px;min-width:15px;fill:currentColor;
  flex:none;display:block}
.foot ul.socials a.soc:hover{border-color:var(--gold);color:var(--gold)}