:root{
  /* brand palette */
  --cream:#EDE4D4;
  --gold:#C9973F;
  --terracotta:#9C4F30;
  --maroon:#7C3D34;
  --teal:#486A63;
  --ink-brand:#2A2724;
  /* cream ramp */
  --cream-50:#FEFDFC; --cream-100:#FCFBF9; --cream-200:#F9F6F1; --cream-300:#F6F2EA;
  --cream-400:#F2ECE0; --cream-500:#EDE4D4; --cream-600:#C7C0B2; --cream-700:#A19B90;
  --cream-800:#7B776E; --cream-900:#55524C;
  /* ink ramp */
  --ink-50:#EEEEED; --ink-100:#DFDFDE; --ink-200:#BBBAB9; --ink-300:#959392;
  --ink-400:#666361; --ink-500:#2A2724; --ink-600:#23211E; --ink-700:#1D1B18;
  --ink-800:#161413; --ink-900:#0F0E0D;
  /* gold ramp */
  --gold-300:#E4CB9F; --gold-400:#D8B475; --gold-600:#A97F35; --gold-700:#89672B;
  /* type */
  --display:Inter,system-ui,sans-serif;
  --sans:Inter,system-ui,sans-serif;
  --pad:50px;
  /* section accent, overridden per page */
  --accent:#9C4F30;
  --accent-soft:#B8806A;

  /* BRIGHT (default) */
  --paper:#F9F6F1;
  --sand:#F2ECE0;
  --plate:#EDE4D4;
  --ink:#2A2724;
  --muted:#666361;
  --line:rgba(42,39,36,.16);
  --pp:0px;
  --night:#1D1B18;
  --on-night:#EDE4D4;
  --chip:rgba(42,39,36,.06);
  --dash:rgba(42,39,36,.34);
  --topbar-glass:rgba(249,246,241,.92);
  --map-street:rgba(42,39,36,.26);
  --map-street-lite:rgba(42,39,36,.13);
  --brass:var(--accent);
  --brass-raw:var(--gold);
  --brass-light:var(--gold-600);
  --eau:var(--teal);
}
html[data-theme="dark"]{
  --paper:#1D1B18;
  --sand:#23211E;
  --plate:#161413;
  --ink:#EDE4D4;
  --muted:#BBBAB9;
  --line:rgba(237,228,212,.16);
  --night:#0F0E0D;
  --on-night:#EDE4D4;
  --chip:rgba(237,228,212,.08);
  --dash:rgba(237,228,212,.34);
  --topbar-glass:rgba(29,27,24,.9);
  --map-street:rgba(237,228,212,.26);
  --map-street-lite:rgba(237,228,212,.12);
  --accent:var(--gold);
  --accent-soft:var(--gold-300);
  --brass:var(--gold);
  --brass-light:var(--gold-300);
}
/* section accents */
body[data-accent="community"]{--accent:#486A63;--accent-soft:#7B948F}
body[data-accent="history"]{--accent:#A97F35;--accent-soft:#C9973F}
body[data-accent="building"]{--accent:#9C4F30;--accent-soft:#B8806A}
body[data-accent="siteplan"]{--accent:#7C3D34;--accent-soft:#A1736D}
body[data-accent="hello"]{--accent:#2A2724;--accent-soft:#666361}
body[data-accent="questions"]{--accent:#486A63;--accent-soft:#7B948F}
html[data-theme="dark"] body[data-accent="community"]{--accent:#7B948F;--accent-soft:#A4B5B1}
html[data-theme="dark"] body[data-accent="building"]{--accent:#B8806A;--accent-soft:#CEA798}
html[data-theme="dark"] body[data-accent="siteplan"]{--accent:#A1736D;--accent-soft:#BE9E9A}
html[data-theme="dark"] body[data-accent="hello"]{--accent:#C9973F;--accent-soft:#E4CB9F}
html[data-theme="dark"] body[data-accent="questions"]{--accent:#7B948F;--accent-soft:#A4B5B1}
*{box-sizing:border-box}

body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3,h4{text-wrap:balance;font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.06;margin:0}
p{text-wrap:pretty;margin:0}
::selection{background:var(--gold);color:#2A2724}

.wrap{width:100%;padding-left:var(--pad);padding-right:var(--pad)}
@media(max-width:640px){:root{--pad:24px}}

.kicker{font:600 12px/1.4 var(--display);letter-spacing:.07em;color:var(--accent);text-transform:uppercase}
.caption{font:400 14.5px/1.6 var(--sans);letter-spacing:0;color:var(--muted)}
.lede{font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.6;color:var(--ink)}
.body-muted{color:var(--muted)}
.textlink{font:600 14px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);padding-bottom:8px;border-bottom:1px solid var(--accent);display:inline-block}
.textlink:hover{color:var(--ink);border-color:var(--ink)}

/* ---- transparent top bar ---- */
.topbar{position:fixed;top:var(--pp);left:var(--pp);right:var(--pp);z-index:90;color:var(--ink);background:transparent;transition:background .35s ease}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:10px;padding-bottom:10px;border:0}
.wordmark{display:flex;flex-direction:column;gap:5px}
.wordmark .wm-1{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.3em;line-height:1}
.wordmark .wm-2{font:500 8.5px/1 var(--sans);letter-spacing:.42em;color:var(--muted)}
.topbar-right{display:flex;align-items:center;gap:clamp(20px,2.8vw,40px)}
.era-toggle{display:flex;align-items:center;gap:14px;font:600 12px/1 var(--display);letter-spacing:.07em;text-transform:uppercase}
.era-toggle a{color:var(--muted);padding-bottom:4px;border-bottom:1px solid transparent;letter-spacing:inherit}
.era-toggle a.active{color:var(--ink);border-bottom-color:var(--accent)}
.era-toggle a:hover{color:var(--ink)}
.era-div{width:1px;height:12px;background:var(--line)}
.burger{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;width:32px;height:32px}
.burger span{display:block;height:1.5px;background:currentColor;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease,width .5s cubic-bezier(.2,.8,.2,1)}
.burger span:nth-child(1){width:30px}
.burger span:nth-child(2){width:21px}
.burger span:nth-child(3){width:26px}
body.menu-open .burger span:nth-child(1){width:30px;transform:translateY(7.5px) rotate(32deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){width:30px;transform:translateY(-7.5px) rotate(-32deg)}
.topbar.on-dark{color:var(--cream)}
.topbar.on-dark .wm-2{color:rgba(242,237,228,.65)}
.topbar.on-dark .era-toggle a{color:rgba(242,237,228,.55)}
.topbar.on-dark .era-toggle a.active{color:var(--cream);border-bottom-color:var(--accent-soft)}
.topbar.on-dark .era-toggle a:hover{color:var(--cream)}
.topbar.on-dark .era-div{background:rgba(255,255,255,.2)}
@media(max-width:700px){
  .era-toggle{display:none}
  .topbar-right{gap:12px}
  .topbar-right .btn-sm{min-height:44px;padding:11px 17px;font-size:12px;letter-spacing:.07em}
}
@media(max-width:420px){
  .topbar-right .btn-sm{min-height:44px;padding:10px 14px;font-size:11.5px}
  .topbar-right .btn-sm svg{display:none}
}
@media(max-width:480px){.btn-community{padding:11px 14px;letter-spacing:.07em}.wordmark .wm-1{font-size:14px;letter-spacing:.24em}}

/* ---- 3/4 page slideout ---- */
#menu-scrim{position:fixed;inset:0;z-index:80;background:rgba(12,10,15,.4);opacity:0;pointer-events:none;transition:opacity .5s ease}
body.menu-open #menu-scrim{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:var(--pp);right:var(--pp);bottom:var(--pp);width:75vw;z-index:85;background:var(--night);color:var(--on-night);border-left:1px solid rgba(255,255,255,.08);transform:translateX(103%);transition:transform .75s cubic-bezier(.16,.9,.2,1);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);overflow:hidden}
.drawer.open{transform:none}
.drawer-media{position:relative;overflow:hidden;border-right:1px solid rgba(237,228,212,.12);display:flex;align-items:center;justify-content:center;padding:clamp(28px,3vw,56px);background:var(--night)}
.drawer-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.drawer-media .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(24,20,29,.85) 0%,rgba(24,20,29,.05) 55%)}
.drawer-media .drawer-caption{position:absolute;left:30px;bottom:28px;right:30px;font:400 11px/1.8 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:rgba(242,237,228,.6)}
.drawer-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(70px,12vh,130px) clamp(36px,4.5vw,84px) 44px;display:flex;flex-direction:column;justify-content:space-between;gap:44px;overflow-y:auto}
.drawer-nav a{display:block;font-family:var(--sans);font-weight:500;letter-spacing:-.015em;font-size:clamp(24px,2.7vw,42px);line-height:1.15;padding:13px 0;color:var(--cream)}
.drawer-nav a:hover{color:var(--accent-soft)}
.drawer-nav a.active{color:var(--gold)}
.drawer-meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;font:300 13px/1.9 var(--sans);color:rgba(242,237,228,.6)}
.drawer-meta a{color:var(--accent-soft)}
@media(max-width:860px){.drawer{grid-template-columns:1fr}.drawer-media{display:none}.drawer{width:86vw}}
@media(max-width:640px){.drawer{width:100vw;border-left:0}}
@media(prefers-reduced-motion:reduce){.drawer{transition:none}#menu-scrim{transition:none}.burger span{transition:none}}

/* ---- immersive hero ---- */
.hero-full{position:relative;color:#fff;padding-top:150px;padding-bottom:120px;background:#15121a;overflow:hidden}
.hero-full .hf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-full .hf-sketch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;will-change:opacity}
.hero-full .hf-scrim{position:absolute;inset:0;background:linear-gradient(rgba(12,10,15,.45),rgba(12,10,15,.45))}
.hero-full .hf-inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:90vh}
.hero-full h1{font-size:clamp(39px,5.8vw,86px);line-height:1.03;max-width:1000px;color:#fff}
.hero-full .kicker{color:var(--accent-soft)}
.hero-full .hf-sub{max-width:820px;font:400 clamp(19px,1.8vw,26px)/1.5 var(--sans);color:#fff}
.hero-full .hero-ctas{display:flex;gap:32px;align-items:center;margin-top:34px;flex-wrap:wrap}
.hero-full .textlink{color:#fff;border-color:rgba(255,255,255,.65)}
.hero-full .textlink:hover{color:var(--accent-soft);border-color:var(--accent-soft)}
.hero-full .hf-credit{display:block;margin-top:26px;color:rgba(255,255,255,.55)}
@media(max-width:991px){.hero-full{padding-top:120px;padding-bottom:100px}.hero-full .hf-inner{gap:72vh}}
@media(max-width:767px){.hero-full{padding-top:100px}.hero-full .hf-inner{gap:60vh}}
@media(max-width:479px){.hero-full .hf-inner{gap:40vh}.hero-full .hf-bg,.hero-full .hf-sketch{object-position:80% 50%}}

/* ---- pinned night chapter ---- */
.chapter{background:var(--night);color:var(--cream)}
.chapter-track{height:340vh;position:relative}
.chapter-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.chapter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,90px);align-items:center;width:100%}
.chapter-copy .kicker{display:block;margin-bottom:24px;color:var(--accent-soft)}
.chapter-copy h2{font-size:clamp(30px,3.4vw,54px);line-height:1.1;max-width:16ch;color:var(--cream)}
.chapter-copy p{margin-top:24px;max-width:46ch;color:rgba(242,237,228,.62)}
.chapter-copy .textlink{margin-top:34px;color:var(--cream);border-color:rgba(242,237,228,.5)}
.chapter-copy .textlink:hover{color:var(--accent-soft);border-color:var(--accent-soft)}
.chapter-arches{position:relative;height:min(74vh,700px)}
.arch{position:absolute;overflow:hidden;border-radius:999px 999px 0 0;background:#FBF9F4;opacity:0;transform:translateY(80px);will-change:transform,opacity}
.arch img{width:100%;height:100%;object-fit:cover}
.arch-1{width:47%;height:82%;left:0;bottom:0}
.arch-2{width:34%;height:60%;left:44%;bottom:22%}
.arch-3{width:27%;height:46%;right:0;bottom:0}
.chapter-progress{position:absolute;left:var(--pad);bottom:44px;width:170px;height:1px;background:rgba(242,237,228,.2)}
.chapter-progress span{display:block;height:100%;width:0;background:var(--accent-soft)}
@media(max-width:900px){
  .chapter-grid{grid-template-columns:1fr;gap:40px;align-content:center}
  .chapter-copy h2{font-size:clamp(26px,6vw,38px)}
  .chapter-arches{height:38vh}
}
@media(prefers-reduced-motion:reduce){
  .chapter-track{height:auto}
  .chapter-stage{position:static;height:auto;padding:clamp(80px,13vh,170px) 0}
  .arch{opacity:1;transform:none}
  .chapter-progress{display:none}
}

/* ---- full-bleed panels ---- */
.panel{position:relative;overflow:hidden;height:min(88vh,900px);margin-top:clamp(40px,7vh,84px)}
.panel img{position:absolute;left:0;right:0;top:-6%;width:100%;height:112%;object-fit:cover}
.panel.short{height:min(80vh,820px)}
.bleed{margin-top:clamp(36px,6vh,64px)}
.bleed img{width:100%;height:auto}
.bleed-caption{display:flex;justify-content:space-between;gap:24px;padding-top:14px;flex-wrap:wrap}

html[data-theme="light"] img.sketch{mix-blend-mode:multiply}

/* stats */
.stats{padding-top:clamp(56px,9vh,110px)}
.stats .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);border-top:1px solid var(--line);padding-top:clamp(28px,4vh,44px)}
.stat .n{font-family:var(--display);font-weight:700;letter-spacing:-.035em;font-size:clamp(38px,4.4vw,66px);line-height:1}
.stat .l{margin-top:12px;font:400 13px/1.6 var(--sans);letter-spacing:.06em;color:var(--muted);max-width:24ch}
@media(max-width:700px){.stats .stat-row{grid-template-columns:1fr;gap:28px}}

/* generic section rhythm */
section{padding:clamp(80px,13vh,170px) 0;scroll-margin-top:64px}
.section-head .kicker{display:block;margin-bottom:26px}
.section-head h2{font-size:clamp(29px,3.5vw,56px);line-height:1.06;max-width:22ch}
.section-head .intro{margin-top:26px;max-width:62ch}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,72px);margin-top:clamp(44px,7vh,80px)}
.pillar h3{font-size:clamp(20px,1.7vw,26px);line-height:1.3}
.pillar p{margin-top:14px;color:var(--muted);font-size:15.5px}
.pillar .rule{width:44px;height:2px;background:var(--accent);margin-bottom:22px}
@media(max-width:860px){.pillars{grid-template-columns:1fr;gap:40px}}

/* immersive rooms */
.room{padding:clamp(56px,9vh,110px) 0 0}
.room-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,80px);align-items:end}
.room-head h3{font-size:clamp(27px,3vw,48px);line-height:1.06;max-width:17ch}
.room-head .kicker{display:block;margin-bottom:20px}
.room-head p{color:var(--muted);max-width:52ch}
@media(max-width:900px){.room-head{grid-template-columns:1fr;gap:20px}}

/* split rows */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,96px);align-items:center}
.split img{width:100%;height:auto}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* two-up photo band */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px);margin-top:clamp(36px,6vh,64px)}
.twoup img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.twoup{grid-template-columns:1fr}}

/* ---- llankelly map ---- */
.map-band{background:var(--sand);margin-top:clamp(48px,8vh,90px);padding:clamp(60px,9vh,110px) 0}
.map-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(36px,5vw,90px);align-items:center}
.map-list .kicker{display:block;margin-bottom:10px}
.map-item{padding:18px 0;border-top:1px solid var(--line)}
.map-item:first-of-type{margin-top:18px}
.map-item .t{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(16px,1.4vw,21px);line-height:1.3}
.map-item .d{margin-top:4px;font:400 13px/1.6 var(--sans);color:var(--muted)}
.map-stage svg{width:100%;height:auto;display:block}
.map-stage .street{stroke:var(--map-street);stroke-width:1;fill:none}
.map-stage .street-lite{stroke:var(--map-street-lite);stroke-width:1;fill:none}
.map-stage .route{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round}
.map-stage .pin-dot{fill:var(--accent)}
.map-stage .pin-label{font:500 12px var(--display);letter-spacing:.07em;text-transform:uppercase;fill:var(--ink)}
.map-stage .pin-note{font:400 9.5px var(--sans);letter-spacing:.08em;fill:var(--muted)}
.map-stage .pin{opacity:0;transition:opacity .7s ease,transform .7s ease;transform:translateY(8px)}
.map-stage.in .pin{opacity:1;transform:none}
.map-stage.in .pin:nth-of-type(3){transition-delay:.9s}
.map-stage.in .pin:nth-of-type(4){transition-delay:1.15s}
.map-stage.in .pin:nth-of-type(5){transition-delay:1.4s}
.map-stage.in .pin:nth-of-type(6){transition-delay:1.65s}
.map-stage.in .pin:nth-of-type(7){transition-delay:1.9s}
.map-stage.in .pin:nth-of-type(8){transition-delay:2.1s}
.map-stage .route{stroke-dasharray:1200;stroke-dashoffset:1200}
.map-stage.in .route{animation:routedraw 1.6s cubic-bezier(.4,0,.2,1) .25s forwards}
@keyframes routedraw{to{stroke-dashoffset:0}}
@media(max-width:900px){.map-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .map-stage .pin{opacity:1;transform:none;transition:none}
  .map-stage .route{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}

/* sand band cross-link */
.era-cross{background:var(--sand)}

/* timeline */
.tl{margin-top:clamp(44px,7vh,80px)}
.tl-row{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,48px);padding:30px 0;border-top:1px solid var(--line);align-items:baseline}
.tl-row:last-child{border-bottom:1px solid var(--line)}
.tl-when{font:400 15px/1.5 var(--display);letter-spacing:0;color:var(--muted)}
.tl-what{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(16px,1.4vw,21px);line-height:1.32}
.tl-status{font:600 11.5px/1 var(--display);letter-spacing:.07em;text-align:right;color:var(--muted)}
.tl-row.done .tl-status,.tl-row.done .tl-when{color:var(--accent)}
.tl-row.next .tl-status{color:var(--ink)}
.tl-row.twocol{grid-template-columns:minmax(150px,220px) 1fr}
@media(max-width:700px){.tl-row,.tl-row.twocol{grid-template-columns:1fr;gap:10px}.tl-status{text-align:left}}

/* future pages */
.coming{margin-top:clamp(56px,9vh,100px)}
.coming-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);margin-top:36px}
.coming-item{border-top:1px solid var(--line);padding-top:22px}
.coming-item .t{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(16px,1.35vw,20px);line-height:1.28}
.coming-item .d{margin-top:10px;font-size:14px;color:var(--muted)}
@media(max-width:900px){.coming-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.coming-grid{grid-template-columns:1fr}}

/* contact */
section.contact{background:var(--sand);text-align:center}
section.contact h2{font-size:clamp(30px,3.5vw,56px);max-width:22ch;margin:26px auto 0}
section.contact p{max-width:52ch;margin:24px auto 0;color:var(--muted)}
section.contact .mail{display:inline-block;margin-top:44px;font-family:var(--sans);font-weight:500;letter-spacing:-.01em;font-size:clamp(18px,2.1vw,32px);color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:10px}
section.contact .mail:hover{color:var(--ink);border-color:var(--ink)}

/* footer (BYQ Ark Studio adaptation, fixed dark both themes) */
footer{background:var(--night);color:var(--on-night);padding:38px 0 30px}
.ft-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}
.ft-nav{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px)}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.ft-col a{font-family:var(--display);font-weight:600;color:var(--on-night);text-transform:uppercase;font-size:clamp(13px,1.1vw,16px);letter-spacing:.07em}
.ft-col a:hover{color:var(--gold)}
.ft-up{width:64px;height:64px;border:1px solid rgba(237,228,212,.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-night);flex:none}
.ft-up:hover{border-color:var(--gold);color:var(--gold)}
.ft-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:44px;padding:36px 0;border-top:1px solid rgba(237,228,212,.25);border-bottom:1px solid rgba(237,228,212,.25);color:var(--on-night)}
.ft-cta .t{font-family:var(--display);font-size:clamp(42px,7.8vw,112px);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.ft-cta svg{width:clamp(36px,4vw,56px);height:auto;flex:none;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ft-cta:hover{color:var(--gold)}
.ft-cta:hover svg{transform:translateX(10px)}
.ft-info{display:grid;grid-template-columns:1fr;gap:24px;padding:32px 0;border-bottom:1px solid rgba(237,228,212,.25)}
.ft-info .blk{font-size:clamp(15px,1.3vw,19px);line-height:1.6;color:rgba(237,228,212,.85);max-width:52ch}
.ft-info a{color:var(--on-night)}
.ft-info a:hover{color:var(--gold)}
.ft-legal{padding-top:20px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13.5px;line-height:1.7;color:rgba(237,228,212,.6)}
.ft-legal .ack{max-width:76ch}
@media(max-width:991px){.ft-top{flex-direction:column;gap:48px}.ft-up{order:-1}.ft-nav{width:100%;grid-template-columns:1fr 1fr}}
@media(max-width:479px){footer{padding:52px 0}.ft-nav{grid-template-columns:1fr;row-gap:16px}.ft-info{grid-template-columns:1fr;row-gap:28px}.ft-cta .t{font-size:15vw}}

/* motion */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-par]{transform:none !important}
  .menu-card,.menu-card.open,#menu-scrim{transition:none}
}

/* ---- page hero (interior pages) ---- */
.page-hero{padding-top:clamp(160px,22vh,240px);padding-bottom:clamp(40px,6vh,70px)}
.page-hero .kicker{display:block;margin-bottom:26px}
.page-hero h1{font-size:clamp(37px,4.6vw,76px);line-height:1.02;max-width:16ch}
.page-hero .intro{margin-top:28px;max-width:60ch}

/* proposal elements */
.elements{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,64px);margin-top:clamp(44px,7vh,80px)}
.element{border-top:1px solid var(--line);padding-top:24px}
.element h3{font-size:clamp(21px,1.9vw,28px);line-height:1.3}
.element p{margin-top:12px;color:var(--muted);font-size:15.5px;max-width:44ch}
@media(max-width:760px){.elements{grid-template-columns:1fr}}

/* big standalone statement */
.statement{font-family:var(--display);font-weight:700;letter-spacing:-.022em;font-size:clamp(23px,2.5vw,37px);line-height:1.18;max-width:26ch}
.statement .hold{color:inherit}

/* note block */
.note{border-top:1px solid var(--line);padding-top:22px;max-width:62ch;font-size:14.5px;color:var(--muted)}

/* consultation events */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px);margin-top:clamp(44px,7vh,80px)}
.event{background:var(--sand);padding:clamp(26px,3vw,40px)}
.event .when{font:600 12px/1.6 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.event h3{font-size:clamp(21px,1.9vw,27px);line-height:1.25;margin-top:14px}
.event p{margin-top:12px;color:var(--muted);font-size:15px}
@media(max-width:860px){.events{grid-template-columns:1fr}}

/* faq accordions */
.faq{margin-top:clamp(40px,6vh,70px);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:26px 0;font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.6vw,23px);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:22px;color:var(--accent);flex:none;transition:transform .35s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 28px;max-width:64ch;color:var(--muted)}



/* ---- desk flight stage ---- */
.desk-stage{position:relative;height:520vh;padding:0}
.desk-sticky{position:sticky;top:0;height:100vh;padding:0;overflow:hidden}
.desk-frame{position:relative;width:100%;height:100%;overflow:hidden;border:0;background:#F2ECE0;color:#2A2724}
.desk-grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.desk-beats{position:absolute;inset:0;pointer-events:none}
.desk-beat{position:absolute;opacity:0;color:#2A2724}
.desk-kicker{font:600 12px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#9C4F30;margin-bottom:14px}
.desk-beat h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:clamp(33px,4.3vw,70px);line-height:1.04;margin:0;max-width:15ch}
.desk-beat h2{font-family:var(--display);font-weight:700;letter-spacing:-.028em;font-size:clamp(26px,2.9vw,48px);line-height:1.05;margin:0}
.desk-beat p{font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.5vw,24px);line-height:1.35;margin:0}
.desk-beat .sub{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.15vw,16.5px);line-height:1.6;color:rgba(27,26,23,.66);max-width:44ch;margin-top:18px}
.desk-beat .textlink{pointer-events:auto;color:#7E5F30;border-color:#7E5F30}
.desk-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:600 11px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#666361;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,6px);opacity:1}}
.desk-fallback{display:none;position:absolute;inset:0}
.desk-fallback img{width:100%;height:100%;object-fit:cover}
.no-webgl .desk-stage{height:100vh}
.no-webgl desk-scene{display:none}
.no-webgl .desk-fallback{display:block}
@media(prefers-reduced-motion:reduce){.desk-stage{height:100vh}.desk-cue{animation:none}}

/* static night band variant of the chapter */
.chapter.static .chapter-track{height:auto}
.chapter.static .chapter-stage{position:static;height:auto;padding:clamp(80px,13vh,170px) 0;overflow:visible}
.chapter.static .arch{opacity:1;transform:none}
.chapter.static .chapter-arches{height:min(60vh,560px)}



/* ---- theme switch (in drawer) ---- */
.drawer-theme{display:flex;align-items:center;gap:18px;font:600 12px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;margin-bottom:30px}
.drawer-theme .lbl{color:rgba(237,228,212,.45)}
.drawer-theme button{color:rgba(237,228,212,.5);padding-bottom:4px;border-bottom:1px solid transparent;letter-spacing:inherit}
.drawer-theme button.active{color:var(--on-night);border-bottom-color:var(--gold)}
.drawer-theme button:hover{color:var(--cream)}


/* ---- about band (BYQ About-B adaptation) ---- */
.about-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(48px,8vh,96px);max-width:1000px}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100vw;padding:9px 16px;font:600 11.5px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.about-head h2{font-size:clamp(32px,4.1vw,66px);line-height:1.04;letter-spacing:-.005em;max-width:1000px}
.about-head h2 .dim{color:inherit}
.about-halves{display:grid;grid-template-columns:1fr 1.5fr;gap:32px;align-items:end}
.about-left{max-width:430px;display:flex;flex-direction:column;gap:28px}
.about-left p{color:var(--muted)}
.about-media{position:relative;overflow:hidden;border-radius:0;height:512px}
.about-media img{position:absolute;left:0;right:0;top:-10%;width:100%;height:120%;object-fit:cover}
.about-right .caption{display:block;margin-top:14px}
@media(max-width:767px){.about-halves{grid-template-columns:1fr}.about-media{height:440px}}
@media(max-width:479px){.about-media{height:240px}.about-head{margin-bottom:32px}}


/* ---- centred about (BYQ About poetic adaptation) ---- */
.hold{color:inherit}
.chip-fill{border:0;background:var(--chip);border-radius:100vw;color:var(--ink)}
.aboutc-pair{display:flex;justify-content:center;align-items:flex-start;gap:12px;max-width:940px;margin:0 auto clamp(48px,8vh,80px)}
.aboutc-pair .im{position:relative;overflow:hidden;border-radius:0;width:100%;max-width:441px;height:441px;will-change:transform,opacity}
.aboutc-pair .im img{position:absolute;left:0;right:0;top:-10%;width:100%;height:120%;object-fit:cover}
.aboutc-pair .im.offset{margin-top:80px}
.aboutc{max-width:669px;margin:0 auto;text-align:center}
.aboutc-tile{display:flex;flex-direction:column;align-items:center;gap:clamp(32px,5vh,56px)}
.aboutc-tile h2{font-size:clamp(30px,3.8vw,54px);line-height:1.05;letter-spacing:-.005em;margin-top:14px}
.dash-div{width:1px;height:clamp(120px,24vh,233px);border-right:1px dashed var(--dash)}
.aboutc .h4{font-weight:500;font-size:clamp(21px,2.2vw,30px);line-height:1.35;letter-spacing:-.01em;color:var(--ink);margin:0}
.aboutc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);text-align:center;margin:clamp(56px,9vh,88px) 0 clamp(48px,7vh,72px)}
.aboutc-grid p{color:var(--muted);font-size:15.5px;line-height:1.7}
.aboutc-mid{position:relative;overflow:hidden;border-radius:0;height:376px;width:100%}
.aboutc-mid img{position:absolute;left:0;right:0;top:-10%;width:100%;height:120%;object-fit:cover}
.aboutc-quote{font-family:var(--display);font-weight:700;letter-spacing:-.028em;font-size:clamp(26px,2.9vw,43px);line-height:1.1;max-width:23ch}
.aboutc-close{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:460px}
.aboutc-close p{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0}
@media(max-width:767px){.aboutc-pair .im{height:340px}.aboutc-mid{height:280px}.aboutc-pair .im.offset{margin-top:48px}}
@media(max-width:479px){.aboutc-pair .im{height:260px}.aboutc-mid{height:200px}.aboutc-grid{grid-template-columns:1fr}}


/* ---- immersive street hero ---- */
.street-hero{position:relative;height:135vh;overflow:hidden;background:#F9F6F1;color:#2A2724}
.sh-base{position:absolute;left:0;right:0;top:-9%;bottom:-9%;will-change:transform}
.sh-base img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.sh-copy{position:absolute;left:var(--pad);top:28%;max-width:640px;z-index:3;will-change:transform}
.sh-copy::before{content:"";position:absolute;inset:-70px -90px;background:radial-gradient(ellipse at 35% 40%,rgba(251,250,246,.94) 0%,rgba(251,250,246,.6) 48%,rgba(251,250,246,0) 78%);z-index:-1}
.sh-kick{display:block;margin-bottom:22px;color:#7E5F30}
.sh-copy h2{font-size:clamp(36px,4.6vw,76px);line-height:1.04;letter-spacing:-.01em;color:#2A2724;max-width:15ch}
.sh-copy p{margin-top:24px;color:rgba(27,26,23,.68);max-width:44ch}
.sh-card{position:absolute;z-index:2;will-change:transform}
.sh-card .rot{border:1px solid rgba(27,26,23,.14);background:#fff;padding:10px}
.sh-card img{display:block;width:100%}
.sh-card-1{right:7%;top:10%;width:min(300px,23vw)}
.sh-card-1 .rot{transform:rotate(-4deg)}
.sh-card-2{right:15%;bottom:9%;width:min(350px,26vw)}
.sh-card-2 .rot{transform:rotate(2.5deg)}
.sh-credit{position:absolute;right:var(--pad);bottom:26px;z-index:3;color:rgba(27,26,23,.55)}
@media(max-width:900px){.sh-card{display:none}.street-hero{height:110vh}.sh-copy{top:22%}}
@media(prefers-reduced-motion:reduce){.sh-base,.sh-copy,.sh-card{transform:none !important}}


/* full-bleed breakout image inside the centred about column */
.aboutc-bleed{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);height:min(78vh,780px);margin-top:clamp(40px,6vh,64px);margin-bottom:clamp(8px,2vh,20px)}
.aboutc-bleed .par{position:absolute;left:0;right:0;top:-9%;bottom:-9%;will-change:transform}
.aboutc-bleed img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
@media(max-width:767px){.aboutc-bleed{height:46vh}}
@media(prefers-reduced-motion:reduce){.aboutc-bleed .par{transform:none !important}}


/* ---- hear-from-you split hero (BYQ hero-2 adaptation) ---- */
.hear-halves{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 8px;min-height:min(88vh,900px)}
.hear-media{position:relative;overflow:hidden;border-radius:0}
.hear-media img{position:absolute;left:0;right:0;top:-8%;width:100%;height:116%;object-fit:cover}
.hear-media .credit{position:absolute;left:24px;bottom:20px;z-index:2;color:rgba(237,228,212,.78)}
.hear-panel{border-radius:0;background:var(--sand);padding:clamp(64px,11vh,132px) clamp(28px,3.4vw,64px) clamp(40px,6vh,64px) clamp(32px,4.4vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:44px}
.hp-top{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:600px}
.hp-h{font-size:clamp(32px,3.6vw,60px);line-height:1.05;letter-spacing:-.005em}
.hp-p{color:var(--muted);font-size:clamp(16px,1.3vw,20px);line-height:1.55;margin:0}
.btn-big{background:var(--gold);color:#2A2724;border-radius:100vw;padding:15px 30px;font:600 14px/1.4 var(--display);letter-spacing:.07em;text-transform:uppercase;display:inline-block}
.btn-big:hover{background:var(--gold-600);color:#FEFDFC}
.ba-hide{display:block;height:21px;overflow:hidden}
.ba-wrap{display:flex;flex-direction:column;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.btn-big:hover .ba-wrap{transform:translateY(-21px)}
.ba-tile{display:flex;align-items:center;gap:9px;height:21px;white-space:nowrap}
.hear-chip{display:inline-flex;align-items:center;gap:10px;background:var(--chip);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:100vw;padding:5px 16px 5px 5px;align-self:flex-start}
.hear-chip .ic{width:32px;height:32px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none}
.hear-chip a{font-size:14px;color:var(--ink)}
.hear-chip a:hover{color:var(--accent)}
@media(max-width:900px){
  .hear-halves{grid-template-columns:1fr}
  .hear-panel{order:-1}
  .hear-media{height:400px}
}
@media(max-width:479px){.hear-media{height:300px}.hear-panel{padding:80px 20px 44px}}


/* chalk artwork floats directly on the dark ground */
.aboutc-bleed{height:min(74vh,720px)}

/* street hero: sticky boxed text while the sketch scrolls past */
.street-hero{height:175vh}
.sh-base{top:-6%;bottom:-6%}
.sh-copy{position:sticky;top:18vh;margin-left:var(--pad);max-width:620px}
.sh-copy::before{display:none}
.sh-box{background:#2A2724;color:var(--cream);padding:clamp(30px,3.6vw,52px);border-radius:0}
.sh-box h2{color:var(--cream)}
.sh-box p{color:rgba(237,228,212,.75)}
.sh-box .sh-kick{color:var(--gold-300)}
@media(max-width:900px){.street-hero{height:150vh}.sh-copy{top:14vh;margin-right:var(--pad)}}


/* sticky needs the section unclipped; clip the art on an inner layer instead */
.street-hero{overflow:visible;height:200vh}
.sh-clip{position:absolute;inset:0;overflow:hidden}


/* ---- softer glass sticky box ---- */
.sh-copy{max-width:520px}
.sh-box{background:rgba(42,39,36,.82);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border-radius:0;padding:clamp(26px,3vw,42px)}
.sh-box h2{font-size:clamp(26px,2.9vw,43px);line-height:1.06;color:var(--cream)}
.sh-box p{font-size:16px;line-height:1.65;color:rgba(237,228,212,.86);margin-top:18px}

/* ---- the walk: real map + numbered journey ---- */
.map-band{margin-top:0}
.journey .row{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.journey .num{font-family:var(--display);font-weight:700;font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums}
.journey .t{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(16px,1.4vw,21px);line-height:1.3}
.journey .d{margin-top:4px;font:400 13.5px/1.6 var(--sans);color:var(--muted)}
.journey .aside{margin-top:22px;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:40ch}
.mp-street{stroke:var(--ink);opacity:.4;stroke-width:1.4;fill:none;stroke-linecap:round}
.mp-minor{stroke:var(--ink);opacity:.18;stroke-width:1.1;fill:none;stroke-linecap:round}
.mp-name{font:600 11px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;fill:var(--muted)}
.mp-label{font:700 12px Inter,sans-serif;letter-spacing:.07em;text-transform:uppercase;fill:var(--ink)}
.mp-green{fill:#77896E;opacity:.32}
.mp-fountain{fill:none;stroke:var(--muted);stroke-width:1.2}
.mp-station{fill:var(--ink);opacity:.75}
.mp-minerva{fill:var(--gold)}
.mp-route{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:7 7}
.map-stage .mp-route{stroke-dashoffset:1000;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1) .3s}
.map-stage.in .mp-route{stroke-dashoffset:0}
.mp-stop circle{fill:var(--gold)}
.mp-stop text{font:700 11px Inter,sans-serif;fill:#2A2724;text-anchor:middle}
.map-stage .mp-stop{opacity:0;transition:opacity .6s ease}
.map-stage.in .mp-stop{opacity:1}
.map-stage.in .mp-stop:nth-of-type(1){transition-delay:.5s}
.map-stage.in .mp-stop:nth-of-type(2){transition-delay:1.1s}
.map-stage.in .mp-stop:nth-of-type(3){transition-delay:1.7s}
.map-stage.in .mp-stop:nth-of-type(4){transition-delay:2.2s}
@media(prefers-reduced-motion:reduce){.map-stage .mp-route{stroke-dashoffset:0;transition:none}.map-stage .mp-stop{opacity:1;transition:none}}


/* theme-aware chalk/ink artwork */
.art-dark{display:block}
.art-light{display:none}
html[data-theme="light"] .art-dark{display:none}
html[data-theme="light"] .art-light{display:block}




html[data-theme="dark"] img.art-light{display:none}
html[data-theme="light"] img.art-dark{display:none}


/* ---- brand marks (masked SVG, inherits colour) ---- */
.logo-mark{display:block;width:calc(var(--logo-h) * 1.6620);height:var(--logo-h);--logo-h:clamp(42px,4.2vw,56px);background:currentColor;
  -webkit-mask:url(art/logo-minerva.png) left center/contain no-repeat;mask:url(art/logo-minerva.png) left center/contain no-repeat}
.logo-mark:hover{background:var(--accent)}
.foot-logo{width:calc(var(--fl-h) * 1.6620);height:var(--fl-h);--fl-h:clamp(64px,7vw,92px);
  background:currentColor;margin:38px 0 44px;
  -webkit-mask:url(art/logo-minerva.png) left bottom/contain no-repeat;mask:url(art/logo-minerva.png) left bottom/contain no-repeat}
@media(max-width:640px){.logo-mark{--logo-h:36px}.foot-logo{--fl-h:70px}}

/* ---- one button system: pills ---- */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:100vw;padding:14px 26px;white-space:nowrap;
  font:600 13px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn svg{width:7px;height:10px;flex:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover svg{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:#2A2724}
.btn-gold:hover{background:var(--gold-600);color:#FEFDFC}
.btn-green-o{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.btn-green-o:hover{background:var(--teal);color:#EDE4D4}
.topbar.on-dark .btn-green-o{color:#EDE4D4;box-shadow:inset 0 0 0 1px rgba(237,228,212,.55)}
.topbar.on-dark .btn-green-o:hover{background:var(--teal);color:#EDE4D4;box-shadow:inset 0 0 0 1px var(--teal)}
.btn-ghost{background:transparent;color:inherit;border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.topbar.on-dark .btn-ghost{border-color:rgba(237,228,212,.4)}
.topbar.on-dark .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:12px 22px;font-size:12px;letter-spacing:.07em}
@media(max-width:900px){.topbar .btn-ghost{display:none}}
@media(max-width:600px){.topbar .btn-sm{padding:11px 16px;letter-spacing:.1em}}


/* ---- have your say: 75% slide-out, brand green ---- */
#say-scrim{position:fixed;inset:0;z-index:94;background:rgba(15,14,13,.55);opacity:0;pointer-events:none;transition:opacity .5s ease}
body.say-open #say-scrim{opacity:1;pointer-events:auto}
.say{position:fixed;top:var(--pp);right:var(--pp);bottom:var(--pp);z-index:96;width:calc(75vw - (var(--pp) * 2));max-width:1240px;
  background:var(--teal);color:#EDE4D4;transform:translateX(calc(100% + 28px));
  transition:transform .72s cubic-bezier(.16,.9,.2,1);display:flex;flex-direction:column;overflow:hidden}
.say.open{transform:none}
.say-close{position:absolute;top:26px;right:26px;z-index:3;width:46px;height:46px;border:1px solid rgba(237,228,212,.28);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#EDE4D4;background:rgba(237,228,212,.06)}
.say-close:hover{background:#EDE4D4;color:var(--teal);border-color:#EDE4D4}
.say-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:clamp(60px,9vh,120px) clamp(24px,4vw,64px) clamp(48px,7vh,96px)}
.say-inner{width:100%;max-width:912px;margin:0 auto}
.say-headline{text-align:center;margin-bottom:clamp(36px,5vh,64px)}
.say-headline .kicker{display:block;margin-bottom:16px;color:#A4B5B1}
.say-headline h2{font-size:clamp(34px,4vw,58px);line-height:1.02;color:#FEFDFC;letter-spacing:-.03em}
.say-reveal{opacity:0;filter:blur(12px);transition:opacity .7s ease-out,filter .7s ease-out}
.say.open .say-reveal{opacity:1;filter:blur(0)}
.say.open .say-card{transition-delay:.12s}

.say-card{background:#3C5953;border-radius:0;padding:clamp(24px,2.4vw,32px)}
.say-card-top{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(30px,3.6vh,48px)}
.say-card-top .t{font:600 20px/1.4 var(--sans);color:#FEFDFC;letter-spacing:-.01em}
.say-card-top .s{font:400 14px/1.45 var(--sans);color:rgba(237,228,212,.78)}
.say-fields{display:flex;flex-direction:column;gap:16px}
.say-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font:600 12px/1.35 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:rgba(237,228,212,.9)}
.fld .opt{color:rgba(237,228,212,.5);letter-spacing:.04em}
.fld input,.fld select,.fld textarea{width:100%;appearance:none;-webkit-appearance:none;padding:12px 16px;
  border:1px solid rgba(237,228,212,.1);border-radius:0;background:rgba(237,228,212,.08);
  font:400 16px/1.5 var(--sans);color:#FEFDFC;transition:border-color .25s ease,background .25s ease}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(237,228,212,.45)}
.fld select{color:#FEFDFC;background-image:none}
.fld select option{color:#2A2724;background:#EDE4D4}
.fld textarea{min-height:132px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:rgba(237,228,212,.5);background:rgba(237,228,212,.12)}
.sel{position:relative}
.sel .chev{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:rgba(237,228,212,.7);display:flex}
.fld .hint{font:400 13.5px/1.5 var(--sans);color:rgba(237,228,212,.6)}
.say-check{display:flex;align-items:flex-start;gap:12px;margin-top:14px;cursor:pointer}
.say-check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:#EDE4D4;border-radius:0}
.say-check span{font:400 14px/1.5 var(--sans);color:rgba(237,228,212,.86)}
.say-note{font:400 13.5px/1.6 var(--sans);color:rgba(237,228,212,.62);margin:18px 0 0;padding-top:18px;border-top:1px solid rgba(237,228,212,.14)}
.say-submit{margin-top:26px;display:inline-flex;align-items:center;gap:10px;background:#EDE4D4;color:#2A2724;
  border-radius:100vw;padding:15px 30px;font:600 13px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;transition:background .3s ease,color .3s ease}
.say-submit:hover{background:#FEFDFC}
.say-submit svg{width:7px;height:10px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.say-submit:hover svg{transform:translateX(4px)}
.say-alt{display:block;margin-top:18px;font:400 14px/1.6 var(--sans);color:rgba(237,228,212,.7)}
.say-alt a{color:#EDE4D4;border-bottom:1px solid rgba(237,228,212,.5)}
.err{border-color:#E4CB9F !important;background:rgba(228,203,159,.12) !important}
.err-msg{font:400 13.5px/1.5 var(--sans);color:#E4CB9F}
.say-done{display:none;text-align:center;padding:clamp(24px,3vw,44px) 0}
.say.done .say-form{display:none}
.say.done .say-done,.say-done.on{display:block}
.say-done h3{font-size:clamp(26px,2.6vw,38px);color:#FEFDFC;margin-bottom:16px;letter-spacing:-.03em}
.say-done p{font:400 16px/1.65 var(--sans);color:rgba(237,228,212,.82);max-width:46ch;margin:0 auto 24px}
.say-done .btn-ghost{border-color:rgba(237,228,212,.4);color:#EDE4D4}
.say-done .btn-ghost:hover{background:#EDE4D4;color:var(--teal);border-color:#EDE4D4}
@media(max-width:900px){.say{width:calc(100vw - 40px)}.say-grid2{grid-template-columns:1fr}}
@media(max-width:640px){.say{top:0;right:0;bottom:0;width:100vw}.say-close{top:16px;right:16px;width:40px;height:40px}
  .say-body{padding:76px 20px 40px}.say-card{padding:20px}.fld input,.fld select,.fld textarea{font-size:15px;padding:11px 13px}}
@media(prefers-reduced-motion:reduce){.say{transition:none}#say-scrim{transition:none}.say-reveal{opacity:1;filter:none;transition:none}}

/* ---- collage intro (BYQ IntroText adaptation) ---- */
.collage{position:relative;width:100%;min-height:780px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:clamp(70px,11vh,120px) 0;background:linear-gradient(180deg,#F2ECE0 0%,#F2ECE0 46%,var(--paper) 100%)}
.collage-imgs{position:absolute;inset:0}
.collage-imgs figure{position:absolute;margin:0;border-radius:0;overflow:hidden;will-change:transform;
  transition:box-shadow .45s ease}
.collage-imgs figure img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.collage-imgs figure:hover{box-shadow:0 18px 40px rgba(42,39,36,.18)}
.collage-imgs figure:hover img{transform:scale(1.08)}
.collage-imgs img{width:100%;height:100%;object-fit:cover;display:block}
.ci-1{top:12%;left:12%;width:120px;height:120px}
.ci-2{top:28%;left:4%;width:118px;height:145px}
.ci-3{top:54%;left:8%;width:240px;height:150px}
.ci-4{top:22%;right:22%;width:112px;height:112px}
.ci-5{top:10%;right:8%;width:200px;height:148px}
.ci-6{bottom:8%;left:50%;margin-left:-40px;width:80px;height:120px}
.ci-7{top:58%;right:5%;width:116px;height:148px}
.collage-head{position:relative;z-index:2;max-width:940px;margin:0 auto;padding:0 20px;text-align:center}
.collage-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.collage-eyebrow span{font:600 12px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.collage-head h2{font-size:clamp(36px,4.4vw,62px);line-height:1.06;letter-spacing:-.03em;max-width:640px;margin:0 auto;color:var(--ink)}
.collage-desc{padding:clamp(56px,9vh,80px) 0}
.collage-desc .inner{max-width:940px;margin:0 auto;padding:0 20px;text-align:center}
.collage-desc p{font-size:clamp(19px,2vw,26px);line-height:1.55;max-width:40ch;margin:0 auto;color:var(--ink)}
.collage-desc .textlink{margin-top:30px}
.blurin{opacity:0;filter:blur(12px);transform:none;transition:opacity .7s ease-out,filter .7s ease-out}
.blurin.in{opacity:1;filter:blur(0);transform:none}
.collage-imgs.blurin{transition-delay:.2s}
@media(max-width:991px){
  .collage{min-height:660px}
  .ci-1{width:92px;height:92px;left:4%}.ci-2{width:90px;height:112px;left:1%}.ci-3{width:170px;height:108px;left:6%}
  .ci-4{width:86px;height:86px;right:24%}.ci-5{width:150px;height:112px;right:3%}
  .ci-6{width:64px;height:96px;margin-left:-32px}.ci-7{width:90px;height:114px;right:2%}
}
@media(max-width:767px){
  .collage{min-height:auto;padding:clamp(48px,7vh,72px) 0 0;display:block}
  .collage-desc{padding:clamp(24px,3.5vh,34px) 0 clamp(48px,7vh,72px)}
}
@media(prefers-reduced-motion:reduce){.blurin{opacity:1;filter:none;transition:none}}

.drawer-mark{display:block;width:min(100%,300px);aspect-ratio:0.907;background:var(--on-night);
  -webkit-mask:url(art/logo-cross.svg) center/contain no-repeat;mask:url(art/logo-cross.svg) center/contain no-repeat}


/* ---- Q&A inside the have-your-say drawer ---- */
.say-faq{margin-top:clamp(40px,6vh,64px)}
.say-faq h3{font-size:clamp(22px,2.2vw,30px);color:#FEFDFC;letter-spacing:-.025em;margin-bottom:22px}
.say-faq-list{border-top:1px solid rgba(237,228,212,.2)}
.say-faq details{border-bottom:1px solid rgba(237,228,212,.2)}
.say-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:18px 0;font:600 16px/1.4 var(--sans);color:#EDE4D4;letter-spacing:-.005em}
.say-faq summary::-webkit-details-marker{display:none}
.say-faq summary::after{content:"+";font-weight:400;font-size:20px;color:rgba(237,228,212,.7);flex:none;transition:transform .35s ease}
.say-faq details[open] summary::after{transform:rotate(45deg)}
.say-faq details[open] summary{color:#FEFDFC}
.say-faq .a{padding:0 0 20px;max-width:62ch;font:400 15px/1.65 var(--sans);color:rgba(237,228,212,.78)}
.say-faq .say-alt{margin-top:22px}

@media(prefers-reduced-motion:reduce){.aboutc-pair .im{transform:none !important;opacity:1 !important}}

/* ---- expandable consultation cards (BYQ value-features) ---- */
.tp-wrap{display:flex;gap:16px;width:100%;margin-top:clamp(40px,6vh,64px)}
.tp-card{position:relative;flex:1 1 0;height:480px;border-radius:0;overflow:hidden;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1)}
.tp-card:hover{flex-grow:2.1}
.tp-card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.tp-top{position:absolute;inset:0 0 auto;height:45%;background:linear-gradient(180deg,rgba(15,14,13,.72),rgba(15,14,13,0))}
.tp-bot{position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(0deg,rgba(15,14,13,.86),rgba(15,14,13,0))}
.tp-inner{position:relative;z-index:2;height:100%;padding:22px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;color:#EDE4D4}
.tp-when{font:400 14px/1.45 var(--sans);letter-spacing:0;color:rgba(237,228,212,.72)}
.tp-card h3{font-size:clamp(20px,1.8vw,26px);line-height:1.15;color:#FEFDFC;letter-spacing:-.02em;margin-top:10px}
.tp-foot{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.tp-foot p{font:400 15px/1.55 var(--sans);color:rgba(237,228,212,.88);max-width:34ch;margin:0}
.tp-mask{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.tp-card:hover .tp-mask,.tp-card:focus-within .tp-mask{grid-template-rows:1fr}
.tp-mask > div{overflow:hidden}
.tp-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 18px;border:1px solid rgba(237,228,212,.55);
  border-radius:100vw;font:600 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#EDE4D4;transition:background .4s ease,color .4s ease,border-color .4s ease}
.tp-cta:hover{background:#EDE4D4;color:#2A2724;border-color:#EDE4D4}
.tp-cta svg{width:7px;height:10px}
@media(max-width:991px){.tp-card{height:380px}.tp-card:hover{flex-grow:1}.tp-mask{grid-template-rows:1fr}}
@media(max-width:767px){.tp-wrap{flex-direction:column}.tp-card{height:300px}}

/* ---- status pills ---- */
.pill-st{display:inline-flex;align-items:center;padding:6px 13px;border-radius:100vw;
  font:600 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.pill-now{background:var(--teal);color:#EDE4D4}
.pill-done{background:var(--gold);color:#2A2724}
.pill-next{background:rgba(156,79,48,.14);color:var(--terracotta)}
.pill-ahead{background:transparent;color:var(--muted);border:1px solid var(--line)}
html[data-theme="dark"] .pill-next{background:rgba(184,128,106,.2);color:#CEA798}
html[data-theme="dark"] .pill-ahead{color:var(--muted);border-color:rgba(237,228,212,.24)}

/* ---- callout card (BYQ callout block) ---- */
.callout{position:relative;padding:clamp(64px,9vh,120px) 0;background:var(--sand)}
.callout-top{padding-top:clamp(120px,17vh,190px);background:var(--paper)}
.callout-end{background:var(--sand)}
.callout-flip .callout-media{order:-1}
@media(max-width:860px){.callout-flip .callout-media{order:1}}
.callout-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);
  background:var(--night);color:rgba(237,228,212,.88);border-radius:0;padding:clamp(28px,3.4vw,48px);
  opacity:0;filter:blur(12px);transition:opacity .7s ease-out,filter .7s ease-out}
.callout-card.in{opacity:1;filter:blur(0)}
.callout-left{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:32px;max-width:635px}
.callout-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:100vw;background:rgba(237,228,212,.1);
  font:600 10.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:rgba(237,228,212,.9)}
.callout-left h2{font-size:clamp(30px,3.2vw,48px);line-height:1.06;letter-spacing:-.03em;color:#FEFDFC;margin-top:24px}
.callout-left p{font:400 16px/1.6 var(--sans);color:rgba(237,228,212,.86);margin:0}
.callout-media{border-radius:0;overflow:hidden;height:clamp(300px,44vh,560px)}
.callout-media img{width:100%;height:100%;object-fit:cover}
@media(max-width:767px){.callout-card{grid-template-columns:1fr;gap:28px}.callout-media{height:297px;order:-1}}
@media(prefers-reduced-motion:reduce){.callout-card{opacity:1;filter:none;transition:none}}

/* ---------- word collage statement ---------- */
.wc-sec{padding:clamp(90px,13vh,168px) 0 clamp(56px,8vh,104px)}
.wc-pill{display:block;width:max-content;margin:0 auto clamp(30px,4.4vh,54px);padding:7px 17px;border:1px solid var(--line);border-radius:100vw;
  font:600 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.wc{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.26em;row-gap:0;
  max-width:1240px;margin:0 auto;text-align:center;font-size:clamp(29px,4.05vw,58px)}
.wc[data-reveal]{opacity:1;transform:none}
.w{overflow:hidden;display:block;margin-bottom:-.16em;padding-bottom:.16em}
.w-in{display:block;font:700 1em/1.02 var(--sans);letter-spacing:-.03em;color:var(--ink);
  transform:translateY(115%);transition:transform .8s cubic-bezier(.16,.84,.28,1);transition-delay:var(--d,0ms)}
.wc.in .w-in{transform:translateY(0)}
.w-im{display:block;width:1.18em;height:.72em;border-radius:0;overflow:hidden;flex:none;
  opacity:0;transform:scale(.86);transition:opacity .8s ease-out,transform .8s cubic-bezier(.16,.84,.28,1);transition-delay:var(--d,0ms)}
.wc.in .w-im{opacity:1;transform:scale(1)}
.w-im img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.wc{column-gap:.24em}.w-im{width:1.5em;height:.8em}}

/* ---------- contact split ---------- */
.ct-sec{padding:clamp(136px,17vh,190px) 0 clamp(90px,13vh,150px)}
.ct-grid{display:grid;grid-template-columns:2fr 3fr;gap:clamp(32px,4vw,64px);align-items:start}
.ct-left{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,6vh,80px);height:100%}
.ct-head h1{margin:14px 0 0}
.ct-head .lede{margin:22px 0 0;max-width:34ch}
.ct-head .mail{display:inline-block;margin-top:34px;font-family:var(--sans);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(17px,1.55vw,23px);color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:9px;transition:color .25s,border-color .25s}
.ct-head .mail:hover{color:var(--ink);border-color:var(--ink)}
.ct-site{display:flex;gap:20px;align-items:flex-start;background:var(--ink);border-radius:0;padding:20px;color:#EDE4D4}
.ct-site-im{width:98px;height:118px;border-radius:0;overflow:hidden;flex:none}
.ct-site-im img{width:100%;height:100%;object-fit:cover;display:block}
.ct-site-tx{display:flex;flex-direction:column;gap:9px}
.ct-site-k{font:600 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}
.ct-site-tx p{margin:0;font:600 17px/1.38 var(--sans);color:#FEFDFC;letter-spacing:-.01em}
.ct-site-s{font:400 13px/1.5 var(--sans);color:rgba(237,228,212,.66)}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr}.ct-left{height:auto}.ct-head .lede{max-width:56ch}}

/* ---------- proposal: brief ---------- */
.pr-brief{padding:clamp(80px,12vh,150px) 0 0}
.pr-brief-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:clamp(32px,5vw,96px);align-items:start}
.pr-brief-l h2{font-size:clamp(28px,3.1vw,50px);line-height:1.05;letter-spacing:-.03em;margin:20px 0 0;max-width:15ch}
.pr-brief-r .pr-lede{margin:0;font:400 clamp(19px,1.65vw,25px)/1.5 var(--sans);color:var(--ink);letter-spacing:-.012em}
.pr-brief-r p+p{margin:22px 0 0;color:var(--muted);font-size:17px;line-height:1.65}
@media(max-width:860px){.pr-brief-grid{grid-template-columns:1fr;gap:26px}.pr-brief-l h2{max-width:20ch}}

/* ---------- proposal: chapter index ---------- */
.pr-index{padding:clamp(70px,11vh,140px) 0 0}
.ix-head{margin-bottom:clamp(24px,3.4vh,40px)}
.ix-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ix-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:26px 22px 108px;background:var(--paper);overflow:hidden;transition:background .4s ease}
.ix-card:hover{background:var(--sand)}
.ix-t{font:600 clamp(17px,1.5vw,22px)/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.ix-s{font:400 14.5px/1.5 var(--sans);color:var(--muted)}
.ix-im{position:absolute;left:22px;right:22px;bottom:-46px;height:92px;border-radius:0;overflow:hidden;background:var(--sand);
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.ix-go{position:absolute;left:22px;bottom:26px;display:flex;align-items:center;gap:9px;
  font:600 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.ix-go svg{width:7px;height:10px}
.ix-card:hover .ix-go,.ix-card:focus-visible .ix-go{opacity:0;transform:translateY(10px)}
.ix-card:hover .ix-im,.ix-card:focus-visible .ix-im{opacity:1;transform:translateY(-60px)}
.ix-im img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.ix-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ix-grid{grid-template-columns:1fr}.ix-card{padding:22px 20px 54px}.ix-im{display:none}.ix-go{bottom:20px;left:20px}}

/* ---------- proposal: rooms ---------- */
.room-alt .room-head>div{order:2}
.room-alt .room-head p{order:1;justify-self:start}
@media(max-width:860px){.room-alt .room-head>div{order:0}.room-alt .room-head p{order:0}}
.bleed-frame{position:relative;overflow:hidden}
.bleed-frame img{display:block;width:100%;height:auto;transform:scale(1.11);will-change:transform}

/* ---------- proposal: note ---------- */
.pr-note-sec{padding:clamp(80px,12vh,150px) 0 clamp(80px,12vh,150px)}
.pr-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:start;
  border:1px solid var(--line);border-radius:0;padding:clamp(24px,3vw,38px)}
.pr-note-k{font:600 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);white-space:nowrap;padding-top:5px}
.pr-note p{margin:0;font-size:16px;line-height:1.65;color:var(--muted);max-width:70ch}
@media(max-width:640px){.pr-note{grid-template-columns:1fr;gap:14px}}

/* callout: stack and let a long email CTA wrap rather than blow the grid out */
.callout-card>*{min-width:0}
@media(max-width:860px){
  .callout-card{grid-template-columns:1fr;gap:28px}
  .callout-media{height:clamp(220px,32vh,320px)}
}
@media(max-width:560px){
  .callout-left .btn-gold{white-space:normal;text-align:left;line-height:1.35;padding:13px 20px}
}

/* local clip only: these sections hold a blur-in card and images that fly in from outside.
   never clip on html/body, it kills position:sticky on the desk stage. */
#more,.callout{overflow-x:clip}

/* desk flight: the dive dissolves into the auditorium drawing at the end of the scroll */
.desk-finale{position:absolute;inset:0;pointer-events:none;opacity:0;background:#15121a}
.desk-finale-credit{margin-top:4px;max-width:50ch;
  font:400 11.5px/1.5 var(--sans);color:rgba(255,255,255,.6);text-shadow:0 1px 14px rgba(0,0,0,.7)}
.desk-finale img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- menu: a labelled pill, not a bare icon ---------- */
.menu-pill{display:inline-flex;align-items:center;gap:11px;padding:12px 20px 12px 17px;border-radius:100vw;
  border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  font:600 12px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.menu-pill:hover{background:var(--ink);color:var(--paper)}
.menu-bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:14px}
.menu-bars span{display:block;height:1.8px;width:18px;background:currentColor;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
body.menu-open .menu-bars span:nth-child(1){transform:translateY(5.8px) rotate(38deg)}
body.menu-open .menu-bars span:nth-child(2){opacity:0}
body.menu-open .menu-bars span:nth-child(3){transform:translateY(-5.8px) rotate(-38deg)}
.topbar.on-dark .menu-pill{border-color:rgba(237,228,212,.6);color:var(--cream)}
.topbar.on-dark .menu-pill:hover{background:var(--cream);color:var(--ink)}
@media(max-width:700px){.menu-pill{padding:10px 15px 10px 13px;gap:8px;font-size:10.5px}.menu-bars{width:15px}.menu-bars span{width:15px}}
@media(max-width:420px){.menu-pill{padding:9px 13px 9px 11px;gap:7px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.menu-bars span{transition:none}}

/* ---------- home: the headline now lives below the animation ---------- */
.lede-intro{padding:clamp(74px,11vh,132px) 0 clamp(20px,3vh,40px);background:var(--sand)}
.lede-intro h1{margin:16px 0 0;font-size:clamp(38px,5.4vw,82px);line-height:1.01;letter-spacing:-.035em;max-width:16ch}
.lede-intro .lede{margin:28px 0 0;max-width:46ch;font:400 clamp(18px,1.55vw,23px)/1.55 var(--sans);color:var(--muted)}

/* ---------- proposal: brief, rebuilt ---------- */
.pr-brief-l{display:flex;flex-direction:column;gap:clamp(34px,5vh,60px)}
.pr-brief-fig{margin:0}
.pr-brief-fig .bleed-frame{border-radius:0;background:var(--sand)}
.pr-brief-fig figcaption{display:block;margin-top:12px}
.pr-facts{margin:clamp(34px,5vh,56px) 0 0;padding-top:26px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pr-facts div{display:flex;flex-direction:column;gap:8px}
.pr-facts dt{font:600 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.pr-facts dd{margin:0;font:500 15px/1.4 var(--sans);color:var(--ink);letter-spacing:-.01em}
@media(max-width:640px){.pr-facts{grid-template-columns:1fr;gap:20px}}

.pr-statement{padding:clamp(80px,12vh,150px) 0;background:var(--sand);margin-top:clamp(70px,10vh,120px)}
.pr-statement .statement{font-size:clamp(28px,3.6vw,56px);line-height:1.08;max-width:21ch}

/* ---------- narrow phones (320px) ---------- */
@media(max-width:400px){
  .hear-halves{grid-template-columns:1fr}
  .hear-halves>*{min-width:0}
  /* a nowrap pill sets the grid track's min-content width, so let long labels wrap */
  .hear-panel .btn,.hear-panel .btn-big{white-space:normal;text-align:left;line-height:1.35}
  /* the email address is one unbreakable token wider than a 320px phone */
  .hear-chip{min-width:0;flex-wrap:wrap}
  .hear-chip a,.hear-chip span{overflow-wrap:anywhere;min-width:0}
  .foot-logo{--fl-h:62px;max-width:100%}
  .intro a,.lede a,.note a,.pr-note a{overflow-wrap:anywhere}
  /* backstop for the last few px on 320px phones. safe here: no sticky inside #hear */
  #hear{overflow-x:clip}
}

/* the flight lands on the 1939 auditorium and names the project over it */
.fin-title{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(76px,11vh,128px);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:min(900px,68vw)}
.fin-name{font:600 clamp(30px,4.4vw,66px)/1.02 var(--display);letter-spacing:-.035em;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
.fin-place{font:400 clamp(13px,1.15vw,16px)/1.4 var(--display);letter-spacing:0;
  color:rgba(255,255,255,.82);text-shadow:0 1px 16px rgba(0,0,0,.7)}
@media(max-width:700px){.fin-title{bottom:104px;gap:10px;max-width:none}}

/* a timeline row can carry an explanatory note under its label */
.tl-note{display:block;margin-top:10px;font:400 14.5px/1.6 var(--sans);letter-spacing:0;color:var(--muted);max-width:62ch}

/* ---------- feedback form: pick-three groups ---------- */
.pick{border:0;margin:26px 0 0;padding:26px 0 0;border-top:1px solid rgba(237,228,212,.16)}
.pick legend{float:left;width:100%;padding:0;font:600 17px/1.4 var(--sans);letter-spacing:-.01em;color:#FEFDFC;max-width:56ch}
.pick legend+*{clear:both}
.pick-count{margin:8px 0 16px;font:400 13.5px/1.5 var(--sans);color:rgba(237,228,212,.6)}
.pick.full .pick-count{color:var(--gold-300)}
.other-fld{margin-top:14px}
.other-fld[hidden]{display:none}
.pick .err-msg,.say-form .err-msg{display:block;margin-top:10px;font:400 13.5px/1.5 var(--sans);color:#E7A79B}

/* ---------- returning visitors land on the photograph, not the flight ---------- */
.intro-static .desk-stage{height:100vh}
.intro-static .desk-finale{opacity:1 !important}
.intro-static .desk-beats{display:none}
.fin-replay{display:none}
.intro-static .fin-replay{position:absolute;right:var(--pad);bottom:clamp(76px,11vh,128px);
  display:inline-flex;align-items:center;gap:9px;pointer-events:auto;cursor:pointer;
  padding:11px 18px;border-radius:100vw;border:1px solid rgba(255,255,255,.45);background:rgba(20,18,16,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;
  font:600 11px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.intro-static .fin-replay:hover{background:#fff;border-color:#fff;color:var(--ink)}
.fin-replay svg{width:14px;height:14px}
@media(max-width:700px){
  .intro-static .fin-replay{left:var(--pad);right:auto;bottom:40px;font-size:10px;padding:10px 15px}
  }

/* ---------- pick-three as selectable pills ---------- */
.pill-wrap{display:flex;flex-wrap:wrap;gap:10px}
.pill-ck{position:relative;display:inline-flex}
.pill-ck input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill-ck span{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:100vw;
  border:1px solid rgba(237,228,212,.34);color:rgba(237,228,212,.9);background:transparent;
  font:500 14.5px/1.25 var(--sans);letter-spacing:-.005em;
  transition:background .25s ease,border-color .25s ease,color .25s ease,opacity .25s ease}
.pill-ck span::before{content:"";width:0;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-2px);opacity:0;transition:width .2s ease,opacity .2s ease;margin-right:-8px}
.pill-ck:hover span{border-color:rgba(237,228,212,.7);color:#FEFDFC}
.pill-ck input:checked+span{background:#EDE4D4;border-color:#EDE4D4;color:#2A2724;font-weight:600}
.pill-ck input:checked+span::before{width:14px;opacity:1;margin-right:0}
.pill-ck input:focus-visible+span{outline:2px solid var(--gold-300);outline-offset:3px}
.pill-ck input:disabled{cursor:not-allowed}
.pill-ck input:disabled+span{opacity:.34}
.pill-ck:has(input:disabled):hover span{border-color:rgba(237,228,212,.34);color:rgba(237,228,212,.9)}
@media(max-width:560px){.pill-ck span{padding:10px 15px;font-size:13.5px}}

/* ============================================================
   MOBILE PASS
   one rhythm, one alignment, nothing left stranded
   ============================================================ */
@media(max-width:767px){

  /* --- vertical rhythm: sections were stacking 109px + 109px of dead air --- */
  section{padding:clamp(52px,7.5vh,76px) 0}
  .pr-brief{padding:clamp(52px,7.5vh,76px) 0 0}
  .pr-statement{padding:clamp(52px,7.5vh,76px) 0;margin-top:clamp(40px,6vh,64px)}
  .pr-index{padding:clamp(52px,7.5vh,76px) 0 0}
  .pr-note-sec{padding:clamp(52px,7.5vh,76px) 0}
  .ct-sec{padding:clamp(112px,15vh,132px) 0 clamp(56px,8vh,80px)}
  .lede-intro{padding:clamp(56px,8vh,80px) 0 clamp(14px,2vh,24px)}
  .wc-sec{padding:clamp(56px,8vh,80px) 0 clamp(40px,6vh,56px)}
  .callout{padding:clamp(52px,7.5vh,76px) 0}
  .callout-top{padding-top:clamp(104px,14vh,124px)}
  .page-hero{padding-top:clamp(112px,15vh,132px);padding-bottom:clamp(28px,4vh,40px)}
  .dash-div{height:clamp(56px,9vh,88px)}

  /* --- alignment: the rest of the site is left aligned, these were adrift --- */
  .collage-head,.collage-desc .inner,.aboutc,.aboutc-grid,.aboutc-close,.contact .wrap{text-align:left}
  .collage-head,.collage-desc .inner{padding-left:var(--pad);padding-right:var(--pad);margin:0}
  .collage-eyebrow{justify-content:flex-start}
  .collage-head h2,.collage-desc p{margin-left:0;margin-right:0;max-width:none}
  .aboutc,.aboutc-quote,.aboutc-close{margin-left:0;margin-right:0;max-width:none}
  .aboutc-tile{align-items:flex-start}
  .contact .mail{margin-top:26px}

  /* --- the seven photographs return as a swipeable strip. a grid left an
         orphan on the last row whichever way the spans were arranged. --- */
  .collage-imgs{display:flex;position:static;inset:auto;gap:8px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    margin:0 0 clamp(30px,4.5vh,44px);padding:0 0 4px;
    scroll-snap-type:x proximity;scroll-padding-left:var(--pad);-webkit-overflow-scrolling:touch}
  .collage-imgs::-webkit-scrollbar{display:none}
  .collage-imgs figure{position:static;top:auto;left:auto;right:auto;bottom:auto;
    flex:0 0 auto;width:138px;height:170px;margin:0;scroll-snap-align:start}
  .collage-imgs figure:first-child{margin-left:var(--pad)}
  .collage-imgs figure:last-child{margin-right:var(--pad)}

  /* --- the fly-in pair sat at uneven heights and ran past the right edge --- */
  .aboutc-pair{gap:8px;margin-bottom:clamp(36px,6vh,56px)}
  .aboutc-pair .im{height:196px;max-width:none}
  .aboutc-pair .im.offset{margin-top:0}

  /* --- footer: 1180px of it on a 844px screen --- */
  footer{padding:44px 0 32px}
  .ft-top{gap:28px}
  .ft-nav{row-gap:14px}
  .ft-cta{margin-top:32px;padding:26px 0}
  .ft-info{padding:24px 0}
  .ft-up{width:52px;height:52px}
}

@media(max-width:767px){
  /* CRITICAL: in a column flex container `flex:1 1 0` sets the basis on the
     height, which collapsed all three cards to nothing. */
  .tp-wrap{flex-direction:column;gap:12px}
  /* height:auto lets the longest card set its own size, so nothing clips */
  .tp-card{flex:0 0 auto;height:auto;min-height:300px}
  .tp-inner{height:auto;min-height:300px;padding:24px 22px}
  /* the desktop card only scrims top and bottom; on a short card the body
     copy lands mid-image, so darken the whole frame */
  .tp-bot{height:100%;background:linear-gradient(0deg,rgba(15,14,13,.9) 0%,rgba(15,14,13,.72) 45%,rgba(15,14,13,.5) 100%)}
  .tp-foot p{max-width:none}
  .tp-card h3{font-size:22px}
}

@media(max-width:560px){
  .collage-imgs figure{width:122px;height:150px}
  .aboutc-pair .im{height:164px}
  .ct-site{flex-wrap:wrap}
  .ct-site-im{width:84px;height:100px}
}

/* ============================================================
   SSDA SIMPLIFICATION — one page, lighter voice
   ============================================================ */

/* header: FAQs + Have Your Say only */
.topnav-link:hover{color:var(--ink);border-bottom-color:var(--accent)}
.topbar.on-dark .topnav-link{color:rgba(242,237,228,.72)}
.topbar.on-dark .topnav-link:hover{color:var(--cream);border-bottom-color:var(--accent-soft)}

/* the opportunity: words left, one picture right */
.opp{padding:clamp(80px,12vh,150px) 0}
.opp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.opp-text h2{margin:18px 0 0;font-size:clamp(30px,3.4vw,54px);line-height:1.08;letter-spacing:-.03em;max-width:17ch}
.opp-text p{margin:26px 0 0;font:400 clamp(17px,1.5vw,21px)/1.62 var(--sans);color:var(--muted);max-width:46ch}
.opp-media{margin:0;border-radius:0;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.opp-media img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.opp-grid{grid-template-columns:1fr;gap:30px}.opp-media{aspect-ratio:16/11}.opp-text h2,.opp-text p{max-width:none}}
@media(max-width:767px){.opp{padding:clamp(52px,7.5vh,76px) 0}}

/* the fly-in pair is a single image now that the upstairs sketch is out */
.aboutc-solo{max-width:620px}
.aboutc-solo .im{max-width:none}

/* the merged consultation block no longer opens the page */
.callout-merge{background:var(--paper);padding-top:clamp(80px,12vh,150px)}
@media(max-width:767px){.callout-merge{padding-top:clamp(52px,7.5vh,76px)}}

/* client: Inter Bold reads as shouting. lighter until the type package lands. */
h1,h2,h3,.statement,.aboutc-quote,.ft-cta .t,.fin-name,.hp-h,.tl-what,.opp-text h2{font-weight:500}
.collage-head h2,.aboutc-tile h2,.lede-intro h1{font-weight:500}

/* FAQs: a transparent button beside the solid Have Your Say */
.btn-ghost-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(42,39,36,.42)}
.btn-ghost-ink:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.topbar.on-dark .btn-ghost-ink{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(237,228,212,.42)}
.topbar.on-dark .btn-ghost-ink:hover{background:var(--cream);color:var(--ink);box-shadow:inset 0 0 0 1px var(--cream)}
.btn-ghost-ink[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-green-o[aria-current="page"]{box-shadow:inset 0 0 0 1.5px var(--teal)}
.topbar.on-dark .btn-green-o[aria-current="page"]{box-shadow:inset 0 0 0 1.5px rgba(237,228,212,.8)}

/* ============================================================
   FAQ PAGE
   ============================================================ */
.q-hero{padding:clamp(136px,17vh,190px) 0 clamp(48px,7vh,76px)}
.q-hero h1{margin:0;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.035em}
.q-lede{margin:26px 0 0;max-width:44ch;font:400 clamp(17px,1.6vw,22px)/1.6 var(--sans);color:var(--muted)}

.q-sec{padding:0 0 clamp(80px,12vh,140px)}
.q-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:start}

/* sticky topic rail */
.q-rail{align-self:stretch;height:100%}
.q-rail-inner{position:sticky;top:132px;display:flex;flex-direction:column;gap:2px}
.q-rail-k{font:600 10.5px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.q-rail-link{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);color:var(--ink);transition:color .25s ease}
.q-rail-link span{font:500 16px/1.35 var(--sans);letter-spacing:-.01em}
.q-rail-link:hover{color:var(--accent)}
.q-rail-foot{margin-top:28px;display:flex;flex-direction:column;gap:7px}
.q-rail-foot span{font:400 14px/1.5 var(--sans);color:var(--muted)}
.q-rail-foot a{font:500 14px/1.5 var(--sans);color:var(--accent);border-bottom:1px solid rgba(156,79,48,.4);align-self:flex-start;word-break:break-word}

/* groups */
.q-group{padding:0;scroll-margin-top:124px}
.q-group+.q-group{margin-top:clamp(56px,8vh,90px)}
.q-group-t{font:500 clamp(22px,2.2vw,30px)/1.2 var(--display);letter-spacing:-.025em;margin:0 0 6px;color:var(--ink)}
.q-list{border-top:1px solid var(--line)}

/* one question */
.q-item{border-bottom:1px solid var(--line)}
.q-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:clamp(18px,2.4vw,34px);padding:clamp(26px,3.2vh,38px) 0;transition:color .25s ease}
.q-item summary::-webkit-details-marker{display:none}
.q-item summary:hover{color:var(--accent)}
.q-q{font:500 clamp(18px,1.85vw,25px)/1.42 var(--sans);letter-spacing:-.018em;color:inherit}
.q-item[open] .q-q{color:var(--accent)}

/* the plus becomes a minus */
.q-mark{position:relative;width:17px;height:17px;flex:none;margin-top:7px}
.q-mark i{position:absolute;left:0;top:8px;width:17px;height:1.5px;background:currentColor;
  transition:transform .42s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.q-mark i:last-child{transform:rotate(90deg)}
.q-item[open] .q-mark i:last-child{transform:rotate(0deg);opacity:0}

/* answers open on a height animation rather than snapping */
.q-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.q-item[open] .q-wrap{grid-template-rows:1fr}
.q-a{overflow:hidden;font:400 clamp(16px,1.45vw,18px)/1.72 var(--sans);color:var(--muted);
  max-width:64ch;padding-left:0}
.q-item[open] .q-a{padding-bottom:clamp(24px,3vh,34px)}

/* closing card */
.q-close{padding:0 0 clamp(80px,12vh,150px)}
.q-close-card{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;
  background:var(--ink);border-radius:0;padding:clamp(34px,4.4vw,64px)}
.q-close-card>div{position:relative;z-index:1;min-width:0}
.q-close-card h2{margin:22px 0 0;font-size:clamp(26px,2.8vw,42px);line-height:1.08;letter-spacing:-.03em;color:#FEFDFC;font-weight:500}
.q-close-card p{margin:0;font:400 16px/1.65 var(--sans);color:rgba(237,228,212,.84)}

@media(max-width:900px){
  .q-grid{grid-template-columns:1fr;gap:34px}
  .q-rail{align-self:auto;height:auto}
  .q-rail-inner{position:static}
  .q-rail-link{padding:10px 0}
  .q-rail-foot{margin-top:20px}
  .q-close-card{grid-template-columns:1fr;gap:24px}
}
@media(max-width:767px){
  .q-hero{padding:clamp(112px,15vh,132px) 0 clamp(28px,4vh,40px)}
  .q-sec{padding:0 0 clamp(52px,7.5vh,76px)}
  .q-close{padding:0 0 clamp(52px,7.5vh,76px)}

  .q-item summary{gap:14px;padding:22px 0}
}
@media(prefers-reduced-motion:reduce){.q-wrap,.q-mark i{transition:none}}

/* ============================================================
   HOME — one spine. every section left aligned on the same grid.
   ============================================================ */

/* 1. the proposal: words left, the building right */
.intro{padding:clamp(88px,13vh,160px) 0 clamp(70px,10vh,120px);background:var(--sand)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(34px,6vw,96px);align-items:center}
.intro h1{margin:18px 0 0;font-size:clamp(38px,5.2vw,82px);line-height:1.01;letter-spacing:-.035em;max-width:14ch}
.intro .lede{margin:28px 0 0;max-width:42ch;font:400 clamp(17px,1.55vw,22px)/1.6 var(--sans);color:var(--muted)}
.intro-media{margin:0;border-radius:0;overflow:hidden;aspect-ratio:4/3;background:var(--paper)}
.intro-media img{width:100%;height:100%;object-fit:cover;display:block}

/* 2. what is proposed */
.prop{padding:clamp(88px,13vh,160px) 0}
.prop .section-head{margin-bottom:clamp(36px,5vh,60px)}
.prop-lead{margin:0;font:400 clamp(20px,2vw,30px)/1.45 var(--sans);letter-spacing:-.015em;color:var(--ink);max-width:30ch}
.prop-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);margin-top:clamp(34px,5vh,56px)}
.prop-cols p{margin:0;font:400 16.5px/1.7 var(--sans);color:var(--muted)}
.prop-notes{margin-top:clamp(56px,8vh,96px);padding-top:clamp(30px,4vh,44px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.prop-statement{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.028em;
  font-size:clamp(24px,2.8vw,42px);line-height:1.12;color:var(--ink)}
.prop-note{margin:0;font:400 15.5px/1.7 var(--sans);color:var(--muted);max-width:46ch}

/* 3. have your say — the page turns dark here */

/* 4. write to the team */
.write{padding:clamp(70px,10vh,120px) 0 clamp(88px,13vh,160px)}
.write-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);
  padding-top:clamp(30px,4vh,44px);border-top:1px solid var(--line);align-items:start}
.write-row h2{margin:16px 0 0;font-size:clamp(26px,2.9vw,44px);line-height:1.08;letter-spacing:-.03em;max-width:15ch}
.write-row p{margin:0;font:400 16px/1.7 var(--sans);color:var(--muted)}
.write-row .mail{display:inline-block;margin-top:26px;font-family:var(--sans);font-weight:500;
  font-size:clamp(17px,1.6vw,22px);letter-spacing:-.01em;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:8px}
.write-row .mail:hover{color:var(--ink);border-color:var(--ink)}

@media(max-width:860px){
  .intro-grid,.hys-grid,.prop-cols,.prop-notes,.write-row{grid-template-columns:1fr}
  .intro-grid,.hys-grid{gap:30px}
  .prop-cols{gap:22px}
  .prop-notes{gap:22px}
  .write-row{gap:24px}
  .intro h1,.intro .lede,.prop-lead{max-width:none}
  .intro-media{aspect-ratio:16/11}
  .hys-media{aspect-ratio:4/3}
}
@media(max-width:767px){
  .intro{padding:clamp(56px,8vh,80px) 0 clamp(44px,6vh,64px)}
  .prop,.hys{padding:clamp(56px,8vh,80px) 0}
  .write{padding:clamp(44px,6vh,64px) 0 clamp(56px,8vh,80px)}
}


/* the proposal gets the room it is describing */
.prop-plate{margin:clamp(44px,6vh,72px) 0 0}
.prop-plate .bleed-frame{background:var(--sand)}
.prop-plate figcaption{display:block;margin-top:14px}

/* have your say: the one tonal pivot on the page. ink, full bleed, no container. */
.hys{padding:0;background:var(--ink)}
.hys-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;min-height:min(86vh,760px)}
.hys-panel{display:flex;align-items:center;padding:clamp(56px,9vh,110px) clamp(24px,4vw,64px) clamp(56px,9vh,110px) var(--pad)}
.hys-panel-in{max-width:52ch}
.hys .kicker{color:var(--gold)}
.hys h2{margin:20px 0 0;font-size:clamp(40px,5vw,80px);line-height:1;letter-spacing:-.012em;color:#FEFDFC}
.hys p{margin:28px 0 0;font:400 16.5px/1.72 var(--sans);color:rgba(237,228,212,.82)}
.hys-cta{margin-top:34px}
.hys-figure{position:relative;margin:0;overflow:hidden;min-height:340px}
.hys-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);will-change:transform}
@media(max-width:900px){
  .hys-split{grid-template-columns:1fr;min-height:0}
  .hys-figure{order:-1;height:clamp(240px,42vh,360px);min-height:0}
  .hys-panel{padding:clamp(40px,7vh,64px) var(--pad)}
}

/* ============================================================
   TYPE — Clarkson's metrics, in the closest face we can licence.
   The crispness is the weight and the tracking, not the family:
   Light at display size, tight leading, tracking around -.045em.
   ============================================================ */
h1,h2,h3,h4,
.statement,.prop-statement,.aboutc-quote,.q-group-t,.fin-name,
.ft-cta .t,.tp-card h3,.callout-left h2,.q-close-card h2,.hp-h,
.say-headline h2,.opp-text h2{
  font-family:var(--display);
  font-weight:300;
  letter-spacing:-.045em;
  line-height:1.05;
}

/* display */
.intro h1{font-size:clamp(42px,5.8vw,92px);line-height:1.02;letter-spacing:-.05em;max-width:14ch}
.q-hero h1{font-size:clamp(44px,6.4vw,100px);line-height:1.02;letter-spacing:-.05em}
.hys h2{font-size:clamp(38px,4.6vw,74px);line-height:1.04;letter-spacing:-.048em}
.prop .section-head h2,.section-head h2{font-size:clamp(34px,4.2vw,66px);line-height:1.06;letter-spacing:-.045em}
.ft-cta .t{font-size:clamp(46px,8.2vw,118px);line-height:1.02;letter-spacing:-.05em}
.fin-name{font-size:clamp(32px,4.6vw,70px);line-height:1.04;letter-spacing:-.045em}

/* mid */
.sh-box h2,.write-row h2{font-size:clamp(28px,3.2vw,48px);line-height:1.08;letter-spacing:-.04em}
.prop-statement{font-size:clamp(26px,3.2vw,48px);line-height:1.12;letter-spacing:-.04em}
.callout-left h2,.q-close-card h2{font-size:clamp(28px,3.2vw,46px);line-height:1.08;letter-spacing:-.04em}
.q-group-t{font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.045em;font-weight:300;margin-bottom:clamp(10px,1.6vh,18px)}
.tp-card h3{font-size:clamp(22px,1.9vw,28px);line-height:1.16;letter-spacing:-.035em;font-weight:400}

/* questions read as content, so they sit at 400 not 300 */
.q-q{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.15vw,31px);line-height:1.26;letter-spacing:-.038em;color:var(--ink)}
.q-item[open] .q-q,.q-item summary:hover .q-q{font-weight:500}
.tl-what{font-family:var(--display);font-weight:400;letter-spacing:-.03em}
.pick legend{font-family:var(--display);font-weight:500;letter-spacing:-.02em}
.say-card-top .t,.say-done h3{font-family:var(--display);font-weight:400;letter-spacing:-.03em}

/* Light over a photograph needs help, so the title card keeps some body */
.fin-name{font-weight:400;text-shadow:0 2px 40px rgba(0,0,0,.75)}

/* the landing frame is a photograph, so the type it carries needs ground */
.desk-finale::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,.58) 0%,rgba(10,9,8,0) 22%,rgba(10,9,8,0) 42%,rgba(10,9,8,.82) 100%)}
.fin-title{z-index:2}
.desk-finale-credit,.fin-replay{position:relative;z-index:2}
.fin-name{text-shadow:none}
.fin-place{color:rgba(255,255,255,.9);text-shadow:none}
.desk-finale-credit{color:rgba(255,255,255,.72);text-shadow:none}

/* form labels stop shouting too */
.fld label{font:500 13.5px/1.35 var(--sans);letter-spacing:0;text-transform:none;color:rgba(237,228,212,.86)}
.ct-site-k{font:400 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--gold)}

/* ---------- the first section after the flight: a two-panel split ----------
   full bleed, one seam of paper between the photograph and the panel.
   the panel reads top to bottom: what it is, then what you can do,
   then the caveat that frames everything below it. */
.opener{background:var(--paper);padding:8px}
.opener-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch;
  min-height:clamp(500px,68vh,680px)}
.opener-media{position:relative;margin:0;overflow:hidden;background:var(--ink-800)}
.opener-media::after{content:"";position:absolute;inset:auto 0 0;height:32%;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,8,0) 0%,rgba(10,9,8,.72) 100%)}
.opener-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 50%;display:block}
.opener-credit{position:absolute;z-index:2;left:clamp(18px,2vw,26px);bottom:clamp(14px,2vh,20px);right:clamp(18px,2vw,26px);
  color:rgba(255,255,255,.66);text-shadow:0 1px 14px rgba(0,0,0,.85)}
.opener-panel{background:var(--plate);display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(40px,6vh,72px);
  padding:clamp(52px,9vh,116px) clamp(30px,3.2vw,48px) clamp(40px,5.5vh,64px) clamp(32px,4.4vw,72px)}
.opener-top{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.6vh,30px)}
.opener h1{margin:0;font-size:clamp(38px,5.4vw,84px);line-height:1.02;letter-spacing:-.05em;max-width:12ch}
.opener .lede{margin:0;max-width:38ch;font:400 clamp(17px,1.45vw,21px)/1.6 var(--sans);color:var(--muted)}
.opener-act{margin-top:clamp(4px,1vh,10px)}
.opener-foot{margin:0;max-width:44ch;padding-top:clamp(20px,2.6vh,28px);border-top:1px solid var(--line);
  font:400 14.5px/1.62 var(--sans);color:var(--muted)}

@media(max-width:900px){
  .opener-grid{grid-template-columns:1fr;gap:8px;min-height:0}
  .opener-media{height:clamp(320px,52vh,460px)}
  .opener-panel{padding:clamp(38px,6vh,56px) var(--pad) clamp(34px,5vh,48px)}
  .opener h1,.opener .lede,.opener-foot{max-width:none}
}

/* ---------- section three: a header row, then a gallery row ----------
   the header runs on the same three tracks as the gallery, so every left edge
   above an image lines up with the image under it. */
.gal-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(16px,2vw,32px);row-gap:0;
  margin-bottom:clamp(36px,6vh,72px)}
.gal-head h2{grid-column:1/-1;grid-row:1;margin:0;max-width:20ch;
  font-family:var(--display);font-weight:300;
  font-size:clamp(34px,4.2vw,66px);line-height:1.04;letter-spacing:-.048em}
.gal-lead{grid-column:1/-1;grid-row:2;margin:clamp(20px,3vh,34px) 0 0;max-width:70ch;
  font-family:var(--display);font-weight:500;
  font-size:clamp(19px,1.75vw,26px);line-height:1.4;letter-spacing:-.022em;color:var(--ink)}
.gal-p{grid-row:3;margin:clamp(32px,5vh,56px) 0 0;font:400 16.5px/1.7 var(--sans);color:var(--muted)}

.gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.gal-card{margin:0;min-width:0}
.gal-wide{grid-column:span 2}
.gal-shot{overflow:hidden;background:var(--plate);height:clamp(420px,70vh,700px)}
.gal-shot img{width:100%;height:100%;object-fit:cover;display:block}
.gal-card figcaption{display:block;margin-top:14px}

@media(max-width:900px){
  .gal-head{grid-template-columns:1fr;row-gap:0;
    margin-bottom:clamp(30px,5vh,48px)}
  .gal-head h2,.gal-lead,.gal-p{grid-column:auto;grid-row:auto;align-self:auto;max-width:none}
  .gal-lead{margin-top:clamp(16px,2.4vh,24px)}
  .gal-p{margin-top:clamp(20px,3vh,28px)}
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gal-wide{grid-column:span 1}
  .gal-shot{height:clamp(300px,42vh,420px)}
}
@media(max-width:600px){
  .gal-grid{grid-template-columns:1fr;gap:20px}
  .gal-shot{height:clamp(320px,52vh,460px)}
}

/* ---------- relief: the auditorium sketch, full bleed, breathing ----------
   the drawing's paper is pure white, so multiply dissolves it into the page
   and the line work sits on the cream with no box around it. the ground is a
   literal light value, not a theme token, because multiply needs light under it. */
.relief{position:relative;padding:0;overflow:hidden;background:#F9F6F1;
  width:100%;aspect-ratio:1892/1347;height:auto;max-height:1400px}
.relief-art{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 58%;
  mix-blend-mode:multiply;opacity:0;
  will-change:opacity,transform;backface-visibility:hidden}
.relief-credit{position:absolute;right:var(--pad);bottom:clamp(20px,4vh,38px);z-index:2;
  color:#3D3A37;opacity:0}
@media(max-width:900px){
  .relief{width:100%;aspect-ratio:1892/1347;height:auto;max-height:none;min-height:clamp(280px,38vh,360px)}
  .relief-art{object-position:50% 50%}
}
@media(max-width:600px){
  .relief{min-height:clamp(260px,34vh,320px)}
  .relief-art{object-position:50% 50%}
  .relief-credit{left:var(--pad);right:var(--pad);bottom:14px;text-align:left;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .relief-art{opacity:1;transform:none}
  .relief-credit{opacity:1}
}

/* ---------- have your say: the laneway sketch fills the right panel ----------
   pencil on white paper, so the panel carries a light ground and multiply
   dissolves the paper into it. no grayscale filter here: a filter would
   isolate the blend and the paper would come back as a white block. */
.hys-figure-sketch{background:#F9F6F1}
.hys-figure-sketch img{filter:none;mix-blend-mode:multiply;
  object-position:50% 46%;transform:scale(1.22);transform-origin:50% 46%}
.hys-credit{position:absolute;left:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);
  bottom:clamp(14px,2vh,20px);z-index:2;color:#3D3A37}
@media(max-width:900px){
  .hys-figure-sketch img{transform:scale(1.12);object-position:50% 50%}
}

/* ---------- timeline: no Now/Then column, and the status reads as words ---------- */
.pill-st{font:500 12px/1 var(--sans);letter-spacing:0;text-transform:none;padding:7px 14px}
.pill-plan{background:rgba(156,79,48,.13);color:var(--terracotta);border:1px solid transparent}
html[data-theme="dark"] .pill-plan{background:rgba(184,128,106,.2);color:#CEA798}

/* ---------- the write-in block now lives under the footer's big call ---------- */
.ft-write{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,80px);padding:clamp(34px,5vh,54px) 0;
  border-bottom:1px solid rgba(237,228,212,.25)}
.ft-write h2{margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(26px,2.9vw,44px);line-height:1.08;letter-spacing:-.04em;
  color:#FEFDFC;max-width:15ch}
.ft-write p{margin:0;font:400 16px/1.7 var(--sans);color:rgba(237,228,212,.78);max-width:58ch}
.ft-mail{display:inline-block;margin-top:clamp(18px,2.6vh,26px);
  font-family:var(--sans);font-weight:500;font-size:clamp(17px,1.5vw,22px);
  color:var(--gold-300);border-bottom:1px solid rgba(228,203,159,.45);padding-bottom:4px;
  transition:color .25s ease,border-color .25s ease}
.ft-mail:hover{color:#FEFDFC;border-color:#FEFDFC}
@media(max-width:800px){
  .ft-write{grid-template-columns:1fr;gap:18px;padding:clamp(28px,4vh,40px) 0}
  .ft-write h2{max-width:none}
}

/* ---------- footer mark row: logo left, address right ---------- */
.ft-mark{display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(28px,5vw,64px);padding:clamp(22px,3vh,34px) 0;
  border-bottom:1px solid rgba(237,228,212,.25)}
/* the mark is the tallest thing in the row, so it sets the row height and the
   symmetric row padding reads as even air above and below it. width is explicit
   because a stretched flex item with width:auto collapses to zero. */
.ft-mark .foot-logo{margin:0;flex:none;align-self:auto;
  width:clamp(150px,16vw,220px);height:auto;aspect-ratio:1893 / 1139;
  -webkit-mask-position:left center;mask-position:left center}
.ft-mark .ft-info{padding:0;border-bottom:0;text-align:right}
.ft-mark .ft-info .blk{max-width:none}
@media(max-width:700px){
  .ft-mark{flex-direction:column;align-items:flex-start;gap:clamp(24px,4vh,34px)}
  .ft-mark .ft-info{text-align:left}
}

/* ---------- Q&A closing card: a drawing ghosted into the ink ----------
   the sketch is dark lines on white paper. inverted it becomes white lines
   on black, and screen drops the black into the ink so only the lines carry. */
.q-close-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  object-fit:cover;object-position:50% 56%;
  filter:invert(1);mix-blend-mode:screen;opacity:.2}

/* ---------- touch targets: the audience for this site includes older readers,
   so nothing you have to tap is under 44px on a phone ---------- */
@media(max-width:700px){
  .tp-cta{min-height:44px;padding:12px 18px}
  .pill-ck span{min-height:44px;padding-top:12px;padding-bottom:12px}
  .q-item summary{min-height:44px}
  .ft-col a{padding:6px 0}
  .logo-mark{--logo-h:34px}
}

/* ---------- consultation cards now carry real dates and an action ---------- */
.tp-when{max-width:32ch;line-height:1.5}
.tp-plain{font:400 13px/1.5 var(--sans);color:rgba(237,228,212,.74)}
.tp-cta{margin-top:0}

/* multi-part answers need paragraph spacing */
.q-a p{margin:0 0 1.05em}
.q-a p:last-child{margin-bottom:0}
.q-a a{color:var(--accent);border-bottom:1px solid rgba(156,79,48,.4);transition:color .2s ease,border-color .2s ease}
.q-a a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- take-part cards: everything on the photograph reads white ----------
   the stair and marquee plates are bright, so the scrims carry more weight
   and no text sits below full white. */
.tp-top{height:74%;background:linear-gradient(180deg,rgba(12,11,10,.86) 0%,rgba(12,11,10,.64) 34%,rgba(12,11,10,.34) 64%,rgba(12,11,10,0) 100%)}
.tp-bot{height:56%;background:linear-gradient(0deg,rgba(12,11,10,.9) 0%,rgba(12,11,10,.5) 48%,rgba(12,11,10,0) 100%)}
.tp-card > img{filter:grayscale(.15) brightness(.84)}
.tp-when{color:#fff;font-weight:400;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tp-card h3{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.tp-plain{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tp-cta{color:#fff;border-color:rgba(255,255,255,.8);background:rgba(12,11,10,.35);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tp-cta:hover{background:#fff;color:#2A2724;border-color:#fff}

/* FAQ pill is solid so it survives the split-tone bands the transparent header crosses;
   a lighter green on dark keeps it off the ink. */
/* the two header pills are one fixed treatment: green ground, white type,
   no keyline, no background-aware variants. only hover moves. */
.btn-green,.btn-faq{background:var(--teal);color:#fff;box-shadow:none;border:0}
.btn-green:hover,.btn-faq:hover{background:#3C5953;color:#fff}
.topbar.on-dark .btn-green,.topbar.on-dark .btn-faq{background:var(--teal);color:#fff;box-shadow:none}
.topbar.on-dark .btn-green:hover,.topbar.on-dark .btn-faq:hover{background:#3C5953;color:#fff}
.btn-faq[aria-current="page"],.btn-green[aria-current="page"]{box-shadow:none}

/* footer: logo left, address and contact right */
/* a grid item blockifies inline-flex to flex, so the pill stretches to the
   column and the label needs centring explicitly. */
.ft-contact{margin-top:clamp(10px,1.3vh,14px);justify-content:center;text-align:center}
@media(max-width:700px){.ft-contact{min-height:44px}}
/* .ft-info a would otherwise tint the pill cream */
.ft-info a.btn-green,.ft-info a.btn-green:hover{color:#fff}
.ft-info a.btn-green:hover{background:#3C5953}
@media(max-width:700px){.ft-contact{align-self:flex-start}}

/* ---------- workshop registration ---------- */
#reg-scrim{position:fixed;inset:0;z-index:120;background:rgba(15,14,13,.55);opacity:0;pointer-events:none;transition:opacity .35s ease}
body.reg-open #reg-scrim{opacity:1;pointer-events:auto}
.reg{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:var(--pad);opacity:0;pointer-events:none;transition:opacity .3s ease}
.reg.open{opacity:1;pointer-events:auto}
.reg-card{position:relative;width:min(520px,100%);max-height:90vh;overflow:auto;
  background:var(--teal);color:#fff;padding:clamp(30px,4vw,48px)}
.reg-card h2{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(26px,2.8vw,36px);line-height:1.1;letter-spacing:-.035em;color:#fff}
.reg-note{margin:14px 0 clamp(22px,3vh,30px);font:400 15.5px/1.6 var(--sans);color:rgba(255,255,255,.84)}
.reg .fld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.reg .fld label{font:500 13.5px/1.35 var(--sans);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.88)}
.reg .fld input{width:100%;padding:13px 15px;border:1px solid rgba(255,255,255,.3);border-radius:0;
  background:rgba(255,255,255,.07);color:#fff;font:400 16px/1.4 var(--sans)}
.reg .fld input::placeholder{color:rgba(255,255,255,.45)}
.reg .fld input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.12)}
.reg .fld input.err{border-color:#E7A79B}
.reg .err-msg{display:block;margin-top:7px;font:400 13px/1.45 var(--sans);color:#F0C3BA}
.reg-submit{margin-top:10px;background:#fff;color:var(--teal)}
.reg-submit:hover{background:#EDE4D4;color:var(--teal)}
.reg-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:100vw;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.reg-close:hover{background:rgba(255,255,255,.26)}
.reg-done{display:none}
.reg.done #reg-form{display:none}
.reg.done .reg-done{display:block}
.reg-done p{margin:14px 0 0;font:400 15.5px/1.65 var(--sans);color:rgba(255,255,255,.86)}
body.reg-open{overflow:hidden}

/* the registration select matches the Have Your Say one on the green card */
.reg .sel{position:relative}
.reg .sel select{width:100%;padding:13px 40px 13px 15px;border:1px solid rgba(255,255,255,.3);border-radius:0;
  background:rgba(255,255,255,.07);color:#fff;font:400 16px/1.4 var(--sans);appearance:none;-webkit-appearance:none}
.reg .sel select:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.12)}
.reg .sel select.err{border-color:#E7A79B}
.reg .sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:1.5px solid rgba(255,255,255,.75);border-bottom:1.5px solid rgba(255,255,255,.75);
  transform:translateY(-70%) rotate(45deg)}
.reg .sel select option{color:#2A2724}

/* the sketch sits between the words and the photographs, so the two halves of
   that section only pad on their outer edges. */
.prop-words{padding-bottom:clamp(32px,5vh,58px)}
.prop-words .gal-head{margin-bottom:0}
.prop-shots{padding-top:clamp(32px,5vh,58px)}