/* LetsBuild — shared stylesheet for index.html and for-architects.html.
   Extracted from the two inline <style> blocks. Home is the base; arch-only
   rules are appended; the three genuinely per-page declarations are scoped
   with .page-home / .page-arch on <body>. */
/* Self-hosted webfonts — no third-party connection, no GDPR question.
   latin + latin-ext only; cyrillic and vietnamese subsets dropped.
   Paths are relative to /assets/site.css. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-italic-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-italic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/newsreader-italic-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/newsreader-italic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/schibsted-grotesk-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/schibsted-grotesk-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/schibsted-grotesk-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/schibsted-grotesk-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/schibsted-grotesk-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/schibsted-grotesk-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── shared base (from homepage) ──────────────────────────────────────── */
:root{--paper:#FBF9F3;--paper2:#F2EBDC;--ink:#221F19;--soft:#6A6255;--line:#E3DBC9;
  --gum:#46523E;--gumdeep:#36402F;--brass:#A9885A;--brassdeep:#8C6E42;
  --disp:'Schibsted Grotesk',system-ui,sans-serif;--body:'Schibsted Grotesk',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:clamp(15px,1.2vw,16.5px);line-height:1.68;overflow-x:hidden}
::selection{background:var(--gum);color:var(--paper)}
a{color:inherit;text-decoration:none}
.eyebrow{font-family:var(--disp);font-weight:500;font-size:14px;letter-spacing:.22em;
  text-transform:uppercase;color:#57503F;margin-bottom:1.9rem;display:flex;
  align-items:center;gap:16px}
.eyebrow::before{content:"";width:0;height:9px;flex:none;
  border-left:1px solid var(--brass);border-right:1px solid var(--brass);
  background:linear-gradient(to bottom,transparent 4px,var(--brass) 4px,var(--brass) 5px,transparent 5px);
  transition:width .9s cubic-bezier(.16,1,.3,1)}
.eyebrow.drawn::before{width:46px}
.fcue .eyebrow::before,.bcue .eyebrow::before,.rm .eyebrow::before{width:46px}
@media(prefers-reduced-motion:reduce){
  .eyebrow::before{width:46px;transition:none}}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(2.8rem,6.8vw,5.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;font-size:1.05em;color:var(--gumdeep)}
.sub{max-width:31em;color:var(--soft);margin-top:1.2rem}
.sub strong{color:var(--ink);font-weight:500}
.line{display:block;overflow:hidden}.li{display:block}
.btn{display:inline-block;font-weight:500;font-size:14.5px;padding:13px 26px;
  border-radius:3px;will-change:transform;transition:background .25s,color .25s}
.btn-gum{background:var(--gum);color:var(--paper);border:1px solid var(--gumdeep)}
.btn-gum:hover{background:var(--gumdeep)}
.btn-ink{border:1px solid var(--ink);color:var(--ink);background:rgba(251,249,243,.65)}
.btn-ink:hover{background:var(--paper)}
.cta-row{display:flex;gap:14px;margin-top:1.8rem;flex-wrap:wrap}

nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:16px clamp(18px,4vw,48px);
  transition:background .4s,backdrop-filter .4s,border-color .4s,box-shadow .4s;
  border-bottom:1px solid transparent}
nav.solid{background:rgba(251,249,243,.82);backdrop-filter:blur(12px);
  border-color:var(--line);box-shadow:0 8px 30px rgba(34,31,25,.05)}
.logo{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.02em}
.logo em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.12em;
  color:var(--brassdeep)}
.navlinks{display:flex;gap:clamp(14px,3vw,34px);font-family:var(--disp);font-weight:500;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.navlinks a{position:relative;padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:820px){.navlinks{display:none}}
nav .btn{padding:9px 16px;font-size:13px}

/* film block component */
.filmblock{position:relative;height:100vh;overflow:hidden;background:#EAE4D5}
.filmblock video,.filmblock .fposter{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.filmblock video{opacity:0}
.filmblock .fscrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(251,249,243,.5),transparent 14%,transparent 72%,rgba(34,31,25,.12) 100%)}
.filmblock .fcue{position:absolute;left:6vw;bottom:9vh;max-width:36em;opacity:0;
  visibility:hidden;z-index:3;background:rgba(251,249,243,.74);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid rgba(255,255,255,.55);border-radius:4px;
  padding:clamp(1.3rem,2.4vw,2rem) clamp(1.5rem,2.8vw,2.4rem);
  box-shadow:0 14px 44px rgba(34,31,25,.14)}
.filmblock .fcue.center{left:5vw;right:5vw;top:auto;bottom:6vh;transform:none;
  width:auto;max-width:none;text-align:left;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:clamp(1.4rem,2.6vw,2.6rem);row-gap:1.2rem;align-items:center}
.filmblock .fcue.center .eyebrow{grid-column:1;grid-row:1;margin:0}
.filmblock .fcue.center .fhint{grid-column:2/-1;grid-row:1;justify-self:end;margin:0}
.filmblock .fcue.center h1{grid-column:1;grid-row:2;
  font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.06}
.filmblock .fcue.center .sub{grid-column:2;grid-row:2;margin:0;font-size:15px;
  max-width:none;border-left:1px solid rgba(34,31,25,.14);
  padding-left:clamp(1.4rem,2.6vw,2.6rem)}
.filmblock .fcue.center .cta-row{grid-column:3;grid-row:2;margin:0;
  flex-direction:column;align-items:stretch;gap:10px;
  border-left:1px solid rgba(34,31,25,.14);
  padding-left:clamp(1.4rem,2.6vw,2.6rem)}
.filmblock .fcue.center .cta-row .btn{white-space:nowrap;text-align:center}
@media(max-width:920px){
  .filmblock .fcue.center{display:block;bottom:7vh}
  .filmblock .fcue.center .fhint{display:none}
  .filmblock .fcue.center .sub{border-left:0;padding-left:0;margin-top:.9rem}
  .filmblock .fcue.center .cta-row{border-left:0;padding-left:0;
    flex-direction:row;margin-top:1.2rem}}
.filmblock .fcue .cta-row{justify-content:inherit;pointer-events:auto}
.filmblock .fcue.center .cta-row{justify-content:center}
.filmblock .fload{position:absolute;left:50%;top:74px;transform:translateX(-50%);
  z-index:3;font-family:var(--disp);font-weight:500;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.filmblock .fload b{color:var(--brassdeep);font-weight:500}
.filmblock .fbar{position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:rgba(227,219,201,.7);z-index:3}
.filmblock .fbar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--brass),var(--gum))}
.fhint{font-family:var(--disp);font-weight:500;font-size:11px;color:var(--soft);
  letter-spacing:.22em;text-transform:uppercase;margin-top:2.2rem}
/* legibility over footage: paper halos + darker cue copy */
.filmblock .fcue h1,.filmblock .fcue h2,.filmblock .fcue .sub,
.filmblock .fcue .eyebrow,.filmblock .fhint{text-shadow:none}
.filmblock .fcue .sub{color:var(--soft)}
.filmblock .fcue .sub strong{color:var(--ink)}
.filmblock .fcue .eyebrow{color:var(--soft)}
.filmblock .fhint{color:var(--soft)}

/* full-bleed chapter band — audience pivot */
.band{position:relative;height:46vh;min-height:330px;overflow:hidden;background:#EAE4D5}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.band .bscrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(251,249,243,.5),transparent 26%,transparent 60%,rgba(34,31,25,.14))}
.band .bcue{position:absolute;left:6vw;bottom:8vh;max-width:32em;
  background:rgba(251,249,243,.74);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid rgba(255,255,255,.55);border-radius:4px;
  padding:clamp(1.1rem,2vw,1.6rem) clamp(1.3rem,2.4vw,2.1rem);
  box-shadow:0 14px 44px rgba(34,31,25,.14)}
.band .bcue .eyebrow{margin-bottom:1rem}
.band .bcue h3{font-family:var(--disp);font-weight:400;letter-spacing:-.02em;
  line-height:1.06;font-size:clamp(1.5rem,2.8vw,2.3rem)}
.content{padding:15vh 7vw;max-width:1080px;margin:0 auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
/* schedule rows (contract-schedule register) */
.schedule{margin-top:3.4rem;border-bottom:1px solid var(--line)}
.card{border-top:1px solid var(--line);padding:24px 0;display:grid;
  grid-template-columns:64px 1fr;gap:4px 18px;align-items:baseline}
.card b{grid-column:1;grid-row:1;font-family:var(--disp);font-size:12px;
  color:var(--brassdeep);letter-spacing:.2em;font-weight:500}
.card h4{grid-column:2;grid-row:1;font-family:var(--disp);font-weight:500;font-size:1.1rem}
.card p{grid-column:2;grid-row:2;font-size:13.5px;color:var(--soft);max-width:38em}
@media(max-width:560px){.card{grid-template-columns:44px 1fr}}
/* what we build — interactive schematic plan */
.plan-wrap{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.2vw,3.2rem);margin-top:2.6rem;align-items:stretch}
@media(max-width:900px){.plan-wrap{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column}
.sheet{flex:1;display:flex;flex-direction:column}
.sheet-body{flex:1;min-height:340px}
#planSvg{width:100%;height:100%;display:block}
.sheet-tb{margin-top:clamp(.9rem,2vw,1.3rem);padding-top:.9rem;
  border-top:1px solid var(--line);display:flex;align-items:baseline;gap:12px;
  font-family:var(--disp);font-weight:500;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft)}
.sheet-tb i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);
  font-style:normal;min-width:20px}
#planSvg text{font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:1.5px}
#planSvg .dim{font-size:10.5px;fill:var(--brassdeep);letter-spacing:1px}
#planSvg [data-zone]{cursor:pointer}
.zone rect{fill:transparent;transition:fill .4s}
.zone.on rect{fill:rgba(70,82,62,.12)}
.zone .zedge{fill:none;stroke:var(--brass);stroke-width:1.4;opacity:0;transition:opacity .4s}
.zone.on .zedge{opacity:1}
.upper{opacity:0;transition:opacity .4s}
.upper.on{opacity:1}
.plan-cap{margin-top:1rem;font-size:12px;color:var(--soft)}
.svcs{border-bottom:1px solid var(--line)}
.svc{border-top:1px solid var(--line);padding:17px 0;cursor:pointer}
.svc:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.svc .hd{display:flex;align-items:baseline;gap:14px}
.svc .no{font-size:11px;letter-spacing:.2em;color:var(--brassdeep);font-weight:500}
.svc h4{font-family:var(--disp);font-weight:500;font-size:1.08rem;white-space:nowrap;
  transition:color .25s}
.svc.on h4{color:var(--gumdeep)}
.svc .ld{flex:1;border-bottom:1px dotted var(--brass);opacity:.5;
  transform:translateY(-4px);min-width:20px}
.svc .body{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s ease,opacity .35s,margin-top .45s}
.svc.on .body{max-height:200px;opacity:1;margin-top:.8rem}
.svc .body p{font-size:14px;color:var(--soft);max-width:34em}
.svc .prog{display:flex;align-items:baseline;gap:12px;margin-top:.9rem;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.svc .prog i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);
  font-style:normal;min-width:20px}

/* scrubbing clip — a film treated like the plan and map diagrams:
   same column, same title-block strip. Non-pinned; scrubs across its
   parent block's travel. data-reverse plays the master back-to-front. */
.arch-wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
.clip-col{align-self:start;position:sticky;top:96px}
@media(max-width:900px){.clip-col{position:static}}
.clip{position:relative;aspect-ratio:21/9;overflow:hidden;border-radius:3px;
  background:#EAE4D5}
.clip img,.clip video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.clip video{opacity:0}
/* engagement rows — alternatives, not a sequence, so an entry point
   replaces the number */
.engage{border-top:1px solid var(--line)}
.eng{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.eng h4{grid-column:1;font-family:var(--disp);font-weight:500;font-size:1.1rem}
.eng .from{grid-column:2;grid-row:1;font-family:var(--disp);font-weight:500;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brassdeep);white-space:nowrap}
.eng p{grid-column:1/-1;font-size:14px;color:var(--soft);max-width:44em}
@media(max-width:560px){.eng{grid-template-columns:1fr}
  .eng .from{grid-column:1;grid-row:auto}}
/* legend rows with dotted leaders (drawing-legend register) */
.receipts{margin-top:1.4rem;border-top:1px solid var(--line)}
.rc{display:flex;align-items:baseline;gap:14px;padding:18px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.rc:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.rc .no{font-size:11px;letter-spacing:.2em;color:var(--brassdeep);font-weight:500}
.rc .rgn{display:flex;flex-direction:column;gap:3px}
.rc h4{font-family:var(--disp);font-weight:500;font-size:1.1rem;white-space:nowrap;
  transition:color .25s}
.rc.on h4{color:var(--gumdeep)}
.rc .rgn span{font-size:12.5px;color:var(--soft)}
.rc .ld{flex:1;border-bottom:1px dotted var(--brass);opacity:.55;
  transform:translateY(-4px);min-width:20px}
.rc p{font-family:var(--disp);font-size:12.5px;letter-spacing:.02em;color:var(--soft);
  text-align:right;max-width:44%}
@media(max-width:560px){.rc{flex-wrap:wrap}.rc p{max-width:100%;text-align:left}}
/* locality diagram */
.area-wrap{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
#mapSvg{width:100%;height:100%;display:block}
#mapSvg text{font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:1.5px}
#mapSvg .mlabel{font-size:9.5px;letter-spacing:1.4px;fill:var(--soft);opacity:.85}
#mapSvg .dim{font-size:10.5px;fill:var(--brassdeep);letter-spacing:1px}
#mapSvg [data-region]{cursor:pointer}
.map-zone rect{fill:rgba(106,98,85,.07);stroke:var(--line);stroke-width:1;
  transition:fill .35s,stroke .35s}
.map-zone.on rect{fill:rgba(70,82,62,.17);stroke:var(--brass)}
.map-zone text{fill:var(--soft);transition:fill .35s}
.map-zone.on text{fill:var(--brassdeep)}
/* annotation line */
.annot{margin-top:3rem;font-family:var(--disp);font-weight:500;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.annot::before{content:"";width:30px;height:7px;flex:none;
  border-left:1px solid var(--brass);border-right:1px solid var(--brass);
  background:linear-gradient(to bottom,transparent 3px,var(--brass) 3px,var(--brass) 4px,transparent 4px)}
/* title-block plate */
.stamp{display:inline-block;margin-top:3rem;border:1px solid var(--brass);
  border-radius:2px;padding:15px 28px;font-family:var(--disp);font-weight:500;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brassdeep);opacity:0;background:transparent}
.stamp.slam{animation:slam .5s ease both}
@keyframes slam{0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:none}}
#cta{text-align:center}
#cta .cta-row{justify-content:center}
.audits{margin:3.4rem auto 0;display:grid;border-top:1px solid var(--line);
  max-width:640px;text-align:left}
.audit{display:grid;grid-template-columns:110px 1fr;gap:4px 18px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.audit span{grid-column:1;grid-row:1;font-family:var(--disp);font-weight:500;
  font-size:10.5px;color:var(--brassdeep);letter-spacing:.2em}
.audit h4{grid-column:2;grid-row:1;font-family:var(--disp);font-weight:500;font-size:1.1rem}
.audit p{grid-column:2;grid-row:2;font-size:13.5px;color:var(--soft)}
@media(max-width:560px){.audit{grid-template-columns:84px 1fr}}
footer{padding:5vh 7vw 7vh;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem}
.foot-note{font-family:var(--disp);font-size:12px;color:var(--soft);max-width:46em}
#glow{position:fixed;width:520px;height:520px;border-radius:50%;z-index:2;
  pointer-events:none;transform:translate(-50%,-50%);display:none}
.grade{position:fixed;inset:0;pointer-events:none;z-index:2}
#grain{opacity:.03;mix-blend-mode:multiply}
.badge{position:fixed;z-index:60;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--soft);background:rgba(251,249,243,.85);
  border:1px solid var(--line);border-radius:3px;padding:6px 10px}
#badge-perf{bottom:14px;right:14px}
#badge-perf b{color:var(--brassdeep);font-weight:500}
.rm .filmblock{height:64vh}
.rm .filmblock video,.rm .fload,.rm .fbar,.rm #glow{display:none!important}
.rm .fcue{position:static!important;opacity:1!important;visibility:visible!important;
  transform:none!important;padding:8vh 7vw}
.rm .stamp{opacity:1}

/* ── MOBILE PORTRAIT — letterbox any block WITHOUT a portrait master ──
   :not([data-src-mobile]) means a block opts out of this the moment a
   portrait film is wired to it. Cover-cropping 21:9 into a phone is just a
   zoom; contain shows the whole composition, sat high in the frame so the
   cue panel has clear paper beneath it. The pin and scrub are untouched —
   only the framing changes. */
@media(max-width:768px) and (orientation:portrait){
  /* 92px tucks the film directly under the 75px header — a % here moves with
     Safari's URL-bar viewport changes, a length does not. The cue is shown
     from arrival on portrait (see the engines), so the paper below the film
     is always occupied, never a void. */
  .filmblock:not([data-src-mobile]) video,
  .filmblock:not([data-src-mobile]) .fposter{
    object-fit:contain;object-position:center 92px;background:var(--paper)}
  .filmblock:not([data-src-mobile]) .fscrim{background:
    linear-gradient(180deg,rgba(251,249,243,.35),transparent 9%,
    transparent 34%,rgba(251,249,243,.55))}
  .band:not([data-src-mobile]) img,
  .band:not([data-src-mobile]) video{
    object-fit:contain;object-position:center 34%;background:var(--paper)}
  .band:not([data-src-mobile]) .bscrim{background:none}
}

/* ── architect-page additions ─────────────────────────────────────────── */
.tl-wrap{margin-top:2.6rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
#tlSvg{width:100%;min-width:660px;height:auto;display:block}
#tlSvg text{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:1.4px}
#tlSvg .ph{font-size:10.5px;letter-spacing:1.6px;fill:var(--soft);opacity:.9}
.tl-bar rect{fill:rgba(106,98,85,.07);stroke:var(--line);stroke-width:1;
  transition:fill .35s,stroke .35s}
.tl-bar.on rect{fill:rgba(70,82,62,.17);stroke:var(--brass)}
.tl-bar text{fill:var(--soft);transition:fill .35s}
.tl-bar.on text{fill:var(--ink)}
#tlSvg [data-model]{cursor:pointer}
.tl-hint{margin-top:.9rem;font-size:12px;color:var(--soft)}
.eng:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.eng.on h4{color:var(--gumdeep)}
.tbc{color:var(--brassdeep);border-bottom:1px dashed var(--brass);padding-bottom:1px}
.tbc{color:var(--brassdeep);border-bottom:1px dashed var(--brass);padding-bottom:1px}
.build{position:relative;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
#bldSvg{width:min(92vw,860px);height:auto;display:block;overflow:visible}
#bldSvg path,#bldSvg line{vector-effect:non-scaling-stroke}
.pl{fill:none;stroke:var(--brass);stroke-width:1.4}
.sl-top{fill:rgba(242,235,220,.9);stroke:var(--ink);stroke-opacity:.75;stroke-width:1.4}
.sl-side{fill:rgba(106,98,85,.13);stroke:var(--ink);stroke-opacity:.6;stroke-width:1.2}
.st{stroke:var(--ink);stroke-opacity:.62;stroke-width:1.15}
.pt{fill:none;stroke:var(--ink);stroke-opacity:.8;stroke-width:1.8}
.rf{stroke:var(--ink);stroke-opacity:.55;stroke-width:1.1}
.rg{stroke:var(--brassdeep);stroke-width:1.8}
.bld-cue{position:absolute;left:6vw;bottom:9vh;z-index:3;pointer-events:none}
.bld-cue .st-lbl{position:relative;height:2.6em}
.bld-cue h3{position:absolute;left:0;top:0;font-family:var(--disp);font-weight:400;
  letter-spacing:-.02em;font-size:clamp(1.6rem,3.4vw,2.6rem);opacity:0}
.bld-cue p{margin-top:.4rem;font-size:14px;color:var(--soft);max-width:26em}
.bld-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:rgba(227,219,201,.7);z-index:3}
.bld-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--brass),var(--gum))}
.rm .build{height:auto;padding:10vh 0}
.rm .bld-cue{position:static;padding:0 6vw}
.rm .bld-cue h3{position:static;opacity:1}
.rm .bld-cue h3+h3,.rm .bld-cue h3+h3+h3,.rm .bld-cue h3+h3+h3+h3{display:none}
.todo{border:1px dashed var(--brass);border-radius:3px;padding:14px 18px;
  margin-top:1.2rem;background:rgba(169,136,90,.05)}
.todo b{display:block;font-family:var(--disp);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brassdeep);
  margin-bottom:.4rem}
.todo p{font-size:13.5px;color:var(--soft)}
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.6rem}
.ref{border-top:1px solid var(--line);padding-top:1.2rem}
.ref blockquote{font-family:var(--serif);font-style:italic;font-size:1.15rem;
  line-height:1.45;color:var(--ink)}
.ref cite{display:block;margin-top:.9rem;font-family:var(--disp);font-style:normal;
  font-weight:500;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft)}

/* ── additions carried forward from the deployed build ───────────────────── */
/* dev perf badge — hidden for production. The element MUST stay in the DOM:
   the engine writes into #tier and #fps and will throw if they are gone. */
#badge-perf{display:none}
/* client logo in the nav; explicit img box keeps CLS at zero */
.logo-img{display:flex;align-items:center;line-height:0}
.logo-img img{display:block;height:28px;width:auto}
@media(max-width:520px){.logo-img img{height:24px}}
/* film 03 · assembly action lands centre-bottom, so this panel holds the
   top-left corner and enters from it */
.filmblock .fcue.topleft{top:clamp(94px,13vh,150px);bottom:auto}
@media(max-width:920px){
  .filmblock .fcue.topleft{right:6vw;top:clamp(112px,15vh,170px)}}
/* Portrait stacks every cue into the paper below the letterboxed band — the
   corner placements only exist to keep off the desktop footage. After the
   920px rule so it wins on phones. */
@media(max-width:768px) and (orientation:portrait){
  .filmblock .fcue.topleft{top:auto;bottom:9vh;left:6vw;right:6vw}}
/* title-block strip is label · leader · label on one flex line; below ~900px the
   two uppercase labels overflow the sheet and force horizontal scroll */
@media(max-width:900px){
  .sheet-tb{flex-wrap:wrap;row-gap:.35rem}
  .sheet-tb span{min-width:0}}
/* The architect block is class="plan-wrap arch-wrap". .plan-wrap has a 900px
   stacking rule, but .arch-wrap re-declares grid-template-columns AFTER that
   media query at equal specificity, so the two-column value won at every width
   and pushed the engagement rows 8px past a 390px viewport. Restate the stack
   here, after both. */
@media(max-width:900px){.arch-wrap{grid-template-columns:1fr}}

/* ── per-page overrides (these three declarations genuinely differ) ───────── */
.page-home .engage{margin-top:0}
/* Pages whose engagement rows drive a diagram: the rows are interactive, so
   they take the pointer and the hover transition. Listed rather than made the
   default because the homepage's rows are static copy. */
.page-arch .engage,.page-process .engage{margin-top:2.6rem}
.page-arch .eng,.page-process .eng{cursor:pointer}
.page-arch .eng h4,.page-process .eng h4{transition:color .25s}

/* ── renovations pillar ──────────────────────────────────────────────────────
   The plan is the index: each service row is a link out to its own page. */
.svc-link{text-decoration:none;display:block}
.svc-link .svc{transition:background .25s}
.svc-link:hover .svc,.svc-link:focus-visible .svc{background:rgba(70,82,62,.04)}
.svc-link:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
.svc .go{font-family:var(--disp);font-weight:500;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brassdeep);
  opacity:0;transform:translateX(-6px);
  transition:opacity .25s,transform .25s}
.svc-link:hover .go,.svc-link:focus-visible .go{opacity:1;transform:none}
/* The service rows carry a "view" badge on this page, so the row becomes a
   grid to seat it top-right. Scoped to .page-reno: the homepage's service list
   is a plain expanding block and must not be turned into a grid. The supplied
   rules assumed a grid that never existed — .svc has no display:grid in the
   base sheet, so the badge would have flowed inline between header and body. */
.page-reno .svc{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:18px;align-items:baseline}
.page-reno .svc .hd{grid-column:1;grid-row:1}
.page-reno .svc .go{grid-column:2;grid-row:1;justify-self:end;white-space:nowrap}
.page-reno .svc .body{grid-column:1/-1;grid-row:2}

/* ── slide-in index panel ────────────────────────────────────────────────────
   Behaviour borrowed from the Greenline drawer (title + description per link,
   so a destination explains itself before you commit to it), drawn in this
   site's register instead: paper ground, hairline rules, uppercase brass group
   heads. Available at every width — below 820px the inline nav links are
   hidden, so before this existed the site had no mobile navigation at all. */
.navtrig{display:inline-flex;align-items:center;gap:10px;background:none;
  border:1px solid var(--line);border-radius:3px;padding:8px 14px;cursor:pointer;
  font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--soft);
  transition:border-color .25s,color .25s}
.navtrig:hover{color:var(--ink);border-color:var(--brass)}
.navtrig:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
.navtrig-bars{display:flex;flex-direction:column;gap:3px;width:14px}
.navtrig-bars i{display:block;height:1px;background:currentColor;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.navtrig[aria-expanded="true"] .navtrig-bars i:first-child{transform:translateY(2px) rotate(45deg)}
.navtrig[aria-expanded="true"] .navtrig-bars i:last-child{transform:translateY(-2px) rotate(-45deg)}

.navscrim{position:fixed;inset:0;z-index:70;background:rgba(34,31,25,.32);
  opacity:0;transition:opacity .4s ease}
.navscrim.on{opacity:1}

.navpanel{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(420px,88vw);
  background:var(--paper);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(34,31,25,.14);
  transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;overscroll-behavior:contain}
.navpanel.on{transform:none}
@media(prefers-reduced-motion:reduce){
  .navpanel{transition:none}.navscrim{transition:none}}
.navpanel-in{padding:22px clamp(20px,4vw,32px) 32px}
.navpanel-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.np-title{font-family:var(--disp);font-weight:500;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brassdeep)}
.np-close{background:none;border:0;cursor:pointer;font-family:var(--disp);
  font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft);padding:4px 0;transition:color .25s}
.np-close:hover{color:var(--ink)}
.np-close:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
.np-group{margin-top:1.8rem}
.np-head{display:block;font-family:var(--disp);font-weight:500;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brassdeep);
  margin-bottom:.5rem}
.np-group a{display:block;padding:13px 0;border-top:1px solid var(--line);
  transition:padding-left .25s}
.np-group a:hover,.np-group a:focus-visible{padding-left:8px}
.np-group a:focus-visible{outline:1px solid var(--brass);outline-offset:2px}
.np-group a b{display:block;font-family:var(--disp);font-weight:500;
  font-size:1.02rem;color:var(--ink);transition:color .25s}
.np-group a:hover b{color:var(--gumdeep)}
.np-group a small{display:block;font-size:12.5px;color:var(--soft);margin-top:2px;
  line-height:1.5}
.np-group a[aria-current="page"] b{color:var(--brassdeep)}
.np-group a[aria-current="page"] b::after{content:" ·";color:var(--brass)}
.np-foot{margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--disp);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--soft)}
/* the panel is the nav below 820px, so the trigger must never be the thing that
   collapses — it stays visible at every width */
@media(max-width:520px){.navtrig-label{display:none}.navtrig{padding:9px 11px}}

/* footer legal / utility links */
.foot-links{display:flex;gap:20px;font-family:var(--disp);font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.foot-links a{position:relative;padding-bottom:2px;transition:color .25s}
.foot-links a:hover{color:var(--ink)}
.foot-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .3s}
.foot-links a:hover::after{transform:scaleX(1);transform-origin:left}
@media(max-width:620px){.foot-links{order:3;width:100%}}

/* ── projects index ──────────────────────────────────────────────────────────
   Fewer, larger. Six projects shown properly beats forty thumbnails — the grid
   is deliberately two-up on desktop rather than three. */
.filters{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:2.6rem;
  border-top:1px solid var(--line);padding-top:1.4rem}
.fgroup{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fgroup > span{font-family:var(--disp);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brassdeep)}
.chip{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.06em;
  color:var(--soft);background:none;border:1px solid var(--line);border-radius:3px;
  padding:6px 12px;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.chip:hover{color:var(--ink);border-color:var(--brass)}
.chip[aria-pressed="true"]{color:var(--paper);background:var(--gum);
  border-color:var(--gumdeep)}
.chip:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.4vw,3rem);
  margin-top:2.8rem}
@media(max-width:820px){.pgrid{grid-template-columns:1fr}}
.pcard{display:block;text-decoration:none}
.pcard .shot{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:3px;
  background:var(--paper2);border:1px solid var(--line)}
.pcard .shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pcard:hover .shot img{transform:scale(1.03)}
.pcard .meta{display:flex;align-items:baseline;gap:12px;margin-top:1rem}
.pcard h3{font-family:var(--disp);font-weight:500;font-size:1.15rem;
  letter-spacing:-.01em;transition:color .25s}
.pcard:hover h3{color:var(--gumdeep)}
.pcard .tag{font-family:var(--disp);font-weight:500;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brassdeep);
  white-space:nowrap;margin-left:auto}
.pcard p{font-size:13.5px;color:var(--soft);margin-top:.3rem;max-width:34em}
.pcard[hidden]{display:none}
.pempty{margin-top:2.4rem;font-size:14px;color:var(--soft)}
/* placeholder shot — a drawing-set holding frame until photography lands */
.shot.placeholder{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,transparent,transparent 9px,
    rgba(169,136,90,.07) 9px,rgba(169,136,90,.07) 18px)}
.shot.placeholder span{font-family:var(--disp);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brassdeep)}

/* ── case study detail ───────────────────────────────────────────────────── */
.pmeta{display:flex;flex-wrap:wrap;gap:0 2.4rem;margin-top:2rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.2rem 0}
.pmeta div{display:flex;flex-direction:column;gap:3px;padding:.4rem 0}
.pmeta dt,.pmeta .k{font-family:var(--disp);font-weight:500;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brassdeep)}
.pmeta dd,.pmeta .v{font-family:var(--disp);font-size:14px;color:var(--ink)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:2.6rem}
.gallery figure:first-child{grid-column:1/-1}
/* .pair is a gallery of equally-weighted photographs with no lead shot, so the
   full-bleed first child above would leave the second figure orphaned at half
   width. project-detail keeps the hero-then-grid behaviour; about opts out. */
.gallery.pair figure:first-child{grid-column:auto}
@media(max-width:700px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0}
.gallery .shot{aspect-ratio:3/2}
/* real photography inside a gallery frame — the placeholder styling only ever
   had to hold an empty box, so it never styled an actual <img> */
.gallery .shot img,.band > img.photo{width:100%;height:100%;object-fit:cover;display:block}
/* a photograph credited to a real project earns a suburb line rather than a
   decorative caption; .credit is what distinguishes it from the AI films */
.credit{font-family:var(--disp);font-weight:500;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brassdeep)}
.credit + .note{font-size:12.5px;color:var(--soft);margin-top:.25rem}
.gallery figcaption{font-size:12px;color:var(--soft);margin-top:.6rem}
.quote{border-top:1px solid var(--line);margin-top:3rem;padding-top:1.8rem;
  max-width:44em}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:1.25rem;
  line-height:1.5;color:var(--ink)}
.quote cite{display:block;font-family:var(--disp);font-style:normal;font-size:12px;
  letter-spacing:.06em;color:var(--soft);margin-top:1rem}

/* ── enquiry forms ───────────────────────────────────────────────────────────
   Built from the existing drawing-set tokens rather than a new visual language:
   labels take the same uppercase brass register as .audit span, fields are
   hairline-ruled like the schedule rows. */
.forks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  margin-top:3rem;align-items:start}
@media(max-width:860px){.forks{grid-template-columns:1fr}}
.fork{border-top:1px solid var(--line);padding-top:1.6rem}
.fork > h3{font-family:var(--disp);font-weight:400;letter-spacing:-.02em;
  line-height:1.06;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.fork > p.lede{font-size:14px;color:var(--soft);margin-top:.7rem;max-width:34em}
.field{display:flex;flex-direction:column;gap:6px;margin-top:1.4rem}
.field label{font-family:var(--disp);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brassdeep)}
.field label .opt{color:var(--soft);letter-spacing:.14em}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:rgba(251,249,243,.55);border:1px solid var(--line);border-radius:3px;
  padding:11px 13px;width:100%;transition:border-color .25s,background .25s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brass);background:var(--paper)}
.field input:invalid:not(:placeholder-shown){border-color:#9C5B3F}
.field .hint{font-size:12px;color:var(--soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.fork .cta-row{margin-top:1.8rem}
/* honeypot — never shown, never announced; a bot filling it is discarded */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* FAQ — a clause schedule that opens */
.faqs{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 0;cursor:pointer;list-style:none;display:flex;
  align-items:baseline;gap:16px;font-family:var(--disp);font-weight:500;
  font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--brassdeep);
  font-weight:400;font-size:1.2rem;line-height:1;transition:transform .3s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px 0;font-size:14.5px;color:var(--soft);max-width:46em}
