/* Option 1: The Architectural Group. Design system tokens first, then components. Fonts: Newsreader (headings), Archivo (interface and text). Both OFL, bundled. */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* colour */
  --paper:#EDEFEC; --paper-2:#E2E5E1; --ink:#16181B; --ink-2:#464B52; --line:#B9BEB9; --line-2:#16181B;
  --acc:#2536C4; --acc-2:#1B2899; --on-acc:#FFFFFF; --note-bg:#FFF3C4; --note-ink:#4A3A00;
  /* type */
  --f-head:"Newsreader",Georgia,"Times New Roman",serif; --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --t-s:.8125rem; --t-b:1.0625rem; --t-l:1.375rem; --t-h3:1.5rem; --t-h2:clamp(2rem,1.3rem + 2.4vw,3.25rem); --t-h1:clamp(2.6rem,1.2rem + 5.4vw,5.6rem);
  /* space, 8px base */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:112px;
  --gut:clamp(16px,4vw,48px); --max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:150px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-b)/1.62 var(--f-ui);overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-head);font-weight:380;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.012em}
h1{font-size:var(--t-h1);letter-spacing:-.025em;line-height:1.0}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:450}
p{margin:0 0 var(--s2);max-width:68ch}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--acc)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-80px;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:100}
.skip:focus{top:var(--s1)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.small{font-size:var(--t-s);color:var(--ink-2)}
.ph-note{background:var(--note-bg);color:var(--note-ink);padding:0 .35em;font-size:.88em;border:1px dashed #9A7B00}
.concept{background:var(--ink);color:#E8EAE6;font-size:var(--t-s)}
.concept p{margin:0 auto;max-width:var(--max);padding:8px var(--gut)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:500 .9375rem/1.2 var(--f-ui);text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.sm{min-height:40px;padding:8px 16px}
.cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0;max-width:none}
.more{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.more:hover{color:var(--acc)}
.more-w{margin-top:var(--s4)}

/* header and the five-brand rail (signature navigation) */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line-2)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:60px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.mark-g{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mark-t{font:500 1.125rem/1.1 var(--f-head);letter-spacing:-.005em}
.menu-btn{display:none;min-height:44px;padding:8px 16px;background:transparent;border:1px solid var(--ink);color:var(--ink);font:500 .9375rem var(--f-ui);cursor:pointer}
.nav-l{display:flex;align-items:center;gap:var(--s4)}
.nav-l a{text-decoration:none;font-weight:500;font-size:.9375rem;padding:8px 0;border-bottom:2px solid transparent}
.nav-l a[aria-current=page]{border-bottom-color:var(--acc)}
.nav-l a.btn{border-bottom:1px solid var(--ink);padding:8px 16px;color:var(--paper)}
.nav-l a.btn:hover{color:var(--on-acc)}
.nav-h,.nav-b{display:none}
.rail{border-top:1px solid var(--line)}
.rail-l{display:grid;grid-template-columns:repeat(5,1fr)}
.rail-a{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 0;text-decoration:none;color:var(--ink-2);border-left:0;position:relative}
.rail-a .glyph{flex:none;color:var(--ink);transition:color .15s}
.rail-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.rail-t strong{font-weight:500;font-size:.875rem;color:var(--ink)}
.rail-t small{font-size:.75rem;color:var(--ink-2)}
.rail-a::after{content:"";position:absolute;left:0;right:12px;bottom:-1px;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.rail-a:hover::after,.rail-a[aria-current=page]::after,.rail-a:focus-visible::after{transform:scaleX(1)}
.rail-a:hover .glyph,.rail-a[aria-current=page] .glyph{color:var(--acc)}
.rail-a:hover{color:var(--ink)}

/* section grid: label column and statement column */
.sec{padding-block:var(--s6);border-top:1px solid var(--line)}
.sg{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);margin-bottom:var(--s5)}
.sg-l{grid-column:1 / span 4}.sg-r{grid-column:5 / span 8}
.sh{font:500 var(--t-s)/1.3 var(--f-ui);letter-spacing:.01em;color:var(--ink);padding-top:6px;border-top:3px solid var(--acc);display:inline-block;min-width:8rem}
.lede{font:380 var(--t-l)/1.45 var(--f-head);color:var(--ink);max-width:56ch}
.sg-r .lede{font-size:clamp(1.375rem,1rem + 1.4vw,2.125rem);line-height:1.28}
.h3{font-size:var(--t-h3);font-weight:450;margin-bottom:var(--s3)}
.lede .ph-note{font:400 .8125rem/1.4 var(--f-ui);vertical-align:middle}
.xl{font-size:var(--t-h2)}

/* hero */
.hero{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line-2)}
.hero-g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);align-items:end}
.hero-t{grid-column:1 / span 9}
.hero-s{grid-column:10 / span 3;font:italic 400 1.125rem/1.35 var(--f-head);color:var(--ink-2);margin:0;align-self:end;border-top:1px solid var(--line-2);padding-top:var(--s1)}
.hero-p{font:380 var(--t-l)/1.45 var(--f-head);margin-top:var(--s3);max-width:44ch}
.elev-wrap{margin-top:var(--s5)}
.elev-scroll{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:linear-gradient(var(--paper),var(--paper-2));overflow-x:auto}
.elev{display:block;width:100%;height:auto;min-width:0;color:var(--ink)}
.elev-s{cursor:pointer;opacity:.62;transition:opacity .2s}
.elev-s.on,.elev-s:hover{opacity:1}
.elev-s.on g,.elev-s:hover g{stroke:var(--acc)}
.elev-s.on .elev-dot{fill:var(--acc);stroke:var(--acc)}
.elev-s.on .elev-n{fill:#fff}
.elev-s:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.elev-ui{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);margin-top:var(--s3)}
.elev-legend{grid-column:1 / span 7;display:grid;grid-template-columns:repeat(5,auto);gap:var(--s1) var(--s3);align-content:start;justify-content:start}
.elev-legend a{display:flex;gap:8px;text-decoration:none;font-size:.875rem;padding:6px 0;border-bottom:2px solid transparent}
.elev-legend a[aria-current=true]{border-bottom-color:var(--acc)}
.ln{color:var(--ink-2);font-variant-numeric:tabular-nums}
.elev-panel{grid-column:8 / span 5;border-left:3px solid var(--acc);padding-left:var(--s3);min-height:9rem}
.ep-kind{font-size:var(--t-s);color:var(--ink-2);margin:0}
.ep-name{font:450 1.75rem/1.1 var(--f-head);margin:4px 0 8px}
.ep-blurb{margin-bottom:12px}
.drawn{font-size:var(--t-s);color:var(--ink-2);margin:var(--s2) 0 0}

/* the group */
.rec{border-top:1px solid var(--line-2);padding-top:var(--s2)}
.rec-h{font-weight:500;margin-bottom:var(--s2)}
.rec ul{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s2)}
.rec li{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line-2);padding-left:var(--s2)}
.rec strong{font:450 1.125rem/1.25 var(--f-head)}
.rec span{font-size:var(--t-s);color:var(--ink-2)}

/* capabilities: architectural grid */
.capgrid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.cap{grid-column:span 2;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;background:var(--paper)}
.cap:nth-child(n+4){grid-column:span 3}
.cap-m{display:block;border-bottom:1px solid var(--line)}
.cap-m .media{margin:0}
.cap-b{padding:var(--s3);display:flex;flex-direction:column;gap:8px;flex:1}
.cap-b p{margin:0}
.cap-b .more{align-self:flex-start;margin-top:auto}
.cap-k{font-size:var(--t-s);color:var(--ink-2);margin:0 0 4px}
.cap h3 a{text-decoration:none}
.cap h3 a:hover{color:var(--acc)}
.cap:hover{background:var(--paper-2)}

/* media: image treatments. Plates sit flat on paper. Scenes are rendered in a cool monochrome and return to colour on hover. */
.media{position:relative;margin:0;background:var(--paper-2);overflow:hidden}
.media img{display:block;width:100%;height:auto}
.media .tag{position:absolute;left:0;bottom:0;background:var(--paper);color:var(--ink);font-size:.6875rem;padding:3px 8px;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.media.tone img{filter:grayscale(1) contrast(1.05) brightness(.95);mix-blend-mode:multiply;transition:filter .3s}
.pcard:hover .media.tone img{filter:none;mix-blend-mode:normal}
.media.plate img{background:var(--paper)}

/* finder */
.finder{margin-top:var(--s5);border:1px solid var(--line-2);padding:var(--s4);background:var(--paper)}
.finder h3,.finder .h3{margin-bottom:var(--s3)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{min-height:44px;padding:8px 16px;background:transparent;border:1px solid var(--ink);color:var(--ink);font:500 .9375rem var(--f-ui);cursor:pointer;transition:background .15s,color .15s}
.chip:hover{background:var(--paper-2)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.f-out{margin-top:var(--s3)}
.f-out:empty{display:none}
.f-lead{font-weight:500;margin-bottom:var(--s1)}
.f-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s2);margin-bottom:var(--s2)}
.f-list a{display:flex;flex-direction:column;gap:2px;padding:var(--s2);border:1px solid var(--line-2);text-decoration:none;height:100%}
.f-list a:hover{background:var(--paper-2);border-color:var(--acc)}
.f-list span{font-size:var(--t-s);color:var(--ink-2)}
.f-note{font-size:var(--t-s);color:var(--ink-2)}
.f-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);max-width:none}
.lnk{font-weight:500}

/* project cards */
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4) var(--s3)}
.pgrid .pcard{grid-column:span 4}
.pgrid:not(.three) .pcard{grid-column:span 4}
.pgrid:not(.three) .pcard.lead{grid-column:span 8;grid-row:span 2}
.pgrid.three .pcard{grid-column:span 4}
.pcard{display:flex;flex-direction:column;border-top:1px solid var(--line-2);padding-top:var(--s2);min-width:0}
.pcard[hidden]{display:none}
.pc-b{padding-top:var(--s2);display:flex;flex-direction:column;gap:6px;flex:1}
.pc-b p{margin:0}
.pc-b h3{font-size:1.375rem}
.pcard.lead h3{font-size:2rem}
.pc-meta{font-size:var(--t-s);color:var(--ink-2)}
.pc-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag-brand{font-size:.8125rem;border:1px solid var(--ink);padding:2px 8px;text-decoration:none;background:transparent}
.tag-brand:hover{background:var(--ink);color:var(--paper)}
.pc-note{font-size:var(--t-s);color:var(--ink-2)}
.pc-b .more{align-self:flex-start;margin-top:auto}

/* why, how, people */
.why-g{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line-2)}
.why-i,.pil{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--line)}
.why-i:nth-child(odd){border-right:1px solid var(--line);margin-right:var(--s3)}
.why-i p,.pil p{margin-bottom:var(--s1)}
.ph-line{font-size:var(--t-s)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s;border-top:1px solid var(--line-2)}
.steps li{counter-increment:s;padding:var(--s3) var(--s3) var(--s3) 0;border-right:1px solid var(--line);margin-right:var(--s3)}
.steps li:last-child{border-right:0;margin-right:0}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--acc);color:var(--acc);border-radius:50%;font-weight:500;margin-bottom:var(--s2)}
.steps h3{font-size:1.25rem;margin-bottom:var(--s1)}
.steps p{font-size:.9375rem}
.ppl{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--s3);margin-top:var(--s3)}
.p-img{aspect-ratio:4/5;background:repeating-linear-gradient(45deg,var(--paper-2) 0 10px,var(--paper) 10px 20px);border:1px solid var(--line-2);margin-bottom:var(--s1)}
.p-n{margin-bottom:4px}
.person p{margin-bottom:4px}

/* enquiry call */
.enq-s{background:var(--ink);color:var(--paper)}
.enq-s a:hover{color:#fff}
.enq-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.enq-g .xl{margin-bottom:var(--s2)}
.enq-s .lede{color:#E4E6E2}
.enq-s .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.enq-s .btn:hover{background:#fff;color:var(--acc)}
.enq-s :focus-visible{outline-color:#fff}
.enq-s .small{color:#C9CCC7}
.enq-s .ph-note{color:var(--note-ink)}
.q{font-weight:500;margin-bottom:var(--s1)}
.enq-l{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s2)}
.enq-l a{display:inline-block;border:1px solid var(--paper);padding:10px 16px;text-decoration:none;min-height:44px}
.enq-l a:hover{background:var(--paper);color:var(--ink)}

/* inner pages */
.pagehead{padding:var(--s5) 0 var(--s5);border-top:0}
.pagehead h1{margin:var(--s3) 0}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--t-s);color:var(--ink-2)}
.crumb li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumb a{color:var(--ink-2)}
.brows{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-2)}
.brow{display:grid;grid-template-columns:5fr 7fr;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line-2);align-items:center}
.brow h2{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);margin:4px 0 var(--s2)}
.brow h2 a{text-decoration:none}
.sm-h{font:500 var(--t-s) var(--f-ui);margin:var(--s3) 0 var(--s1)}
.inl{display:flex;flex-wrap:wrap;gap:4px 16px}
.inl li{position:relative}
.inl li+li::before{content:"";position:absolute;left:-9px;top:.7em;width:3px;height:3px;background:var(--ink-2);border-radius:50%}
.brandhead{border-bottom:1px solid var(--line-2)}
.bh-g,.bd-g{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);align-items:center}
.bd-g{align-items:start}
.facts div{display:grid;grid-template-columns:9rem 1fr;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line)}
.facts dt{font-size:var(--t-s);color:var(--ink-2)}
.facts dd{margin:0}
.facts small{display:block;color:var(--ink-2);margin-top:4px}
.facts{margin:0}
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s2)}
.other{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);border:1px solid var(--line-2);text-decoration:none;height:100%}
.other:hover{border-color:var(--acc);background:var(--paper-2)}
.other span{display:flex;flex-direction:column;line-height:1.25}
.other small{color:var(--ink-2)}
.fbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);align-items:flex-end;margin-bottom:var(--s2)}
.fsel{display:flex;flex-direction:column;gap:4px}
.fsel label{font-size:var(--t-s);font-weight:500}
select,input[type=text],input[type=email],input[type=tel],input[type=date],textarea{width:100%;min-height:48px;padding:10px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:0;font:inherit}
textarea{resize:vertical}
select{min-width:14rem}
.count{font-size:var(--t-s);color:var(--ink-2)}
.empty{padding:var(--s4);border:1px dashed var(--ink)}

/* case study */
.cs-hero .wrap{padding-bottom:var(--s4)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin:var(--s4) 0 0;border-top:1px solid var(--line-2)}
.meta div{padding-top:var(--s1)}
.meta dt{font-size:var(--t-s);color:var(--ink-2)}
.meta dd{margin:2px 0 0}
.wrapfig{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);background:none}
.wrapfig img{width:100%}
.wrapfig .tag{left:var(--gut)}
.cs-g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3)}
.cs-g .sh{grid-column:1 / span 4;align-self:start}
.cs-t{grid-column:5 / span 8}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s3)}
.slot{margin:0;border:1px dashed var(--ink);display:flex;flex-direction:column;background:repeating-linear-gradient(135deg,var(--paper) 0 14px,var(--paper-2) 14px 28px)}
.slot-i{display:grid;place-items:center;aspect-ratio:3/2;color:var(--ink-2)}
.slot.r16x9 .slot-i{aspect-ratio:16/9}
.slot.r4x5 .slot-i{aspect-ratio:4/5}
.slot figcaption{padding:var(--s2);display:flex;flex-direction:column;gap:4px;background:var(--paper);border-top:1px dashed var(--ink);flex:1}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
caption{text-align:left;font-size:var(--t-s);color:var(--ink-2);padding-bottom:var(--s1)}
th,td{text-align:left;padding:12px 16px 12px 0;border-top:1px solid var(--line);font-weight:400}
thead th{font-weight:500;border-top:1px solid var(--line-2)}
tbody th{font-weight:500}

/* enquiry form */
.enq-wrap{max-width:1100px}
.enq-cols{display:grid;grid-template-columns:7fr 4fr;gap:var(--s5);align-items:start}
.prog-wrap{margin-bottom:var(--s4)}
.prog-label{font-weight:500;margin-bottom:8px}
.bar{height:3px;background:var(--line);margin-bottom:var(--s2)}
.bar span{display:block;height:100%;width:var(--p,0%);background:var(--acc);transition:width .3s}
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.prog li{display:flex;gap:8px;align-items:center;color:var(--ink-2);font-size:.875rem}
.pn{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--ink-2);border-radius:50%;font-size:.8125rem;flex:none}
.prog li.on{color:var(--ink);font-weight:500}.prog li.on .pn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.prog li.done .pn{background:var(--acc);border-color:var(--acc);color:#fff}
.demo-note{border:1px dashed var(--ink);background:var(--note-bg);color:var(--note-ink);padding:var(--s2);font-size:.9375rem}
.errsum{border:2px solid #A31515;background:#FBEAEA;color:#5E0B0B;padding:var(--s2);margin:var(--s2) 0}
.errsum[hidden]{display:none}.errsum ul{margin-top:8px;padding-left:20px;list-style:disc}.errsum a{color:#5E0B0B}
.step{margin-top:var(--s3)}
.step[hidden]{display:none}
.step h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);margin-bottom:var(--s3)}
.step h2:focus{outline:none}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s1)}
.choices.three{grid-template-columns:repeat(3,1fr)}
.choice{position:relative;display:flex;flex-direction:column;gap:2px;padding:var(--s2);border:1px solid var(--ink);cursor:pointer;background:var(--paper)}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice:hover{background:var(--paper-2)}
.choice:has(input:checked){background:var(--ink);color:var(--paper)}
.choice:has(input:checked) .c-d{color:#D4D7D2}
.choice:has(input:focus-visible){outline:3px solid var(--acc);outline-offset:3px}
.c-t{font-weight:500}.c-d{font-size:var(--t-s);color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s2)}
.field label,.q{font-weight:500}
.hint{font-size:var(--t-s);color:var(--ink-2)}
.opt-tag{font-weight:400;color:var(--ink-2);font-size:var(--t-s)}
.err{margin:0;color:#A31515;font-size:.9375rem;font-weight:500;min-height:0}
.err:empty{display:none}
[data-bad=true] input,[data-bad=true] select,[data-bad=true] textarea{border:2px solid #A31515}
[data-bad=true] .choice{border-color:#A31515}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:44px}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--acc);flex:none}
.actions{display:flex;gap:var(--s2);margin-top:var(--s4)}
.actions [hidden]{display:none}
.side{border:1px solid var(--line-2);padding:var(--s3);position:sticky;top:160px}
.side h2{font:500 1.125rem var(--f-ui);margin-bottom:var(--s2)}
.brief{margin:0}
.brief div{padding:8px 0;border-top:1px solid var(--line)}
.brief dt{font-size:var(--t-s);color:var(--ink-2)}
.brief dd{margin:0;word-break:break-word}
.dash{color:var(--ink-2)}
.route-note{font-size:var(--t-s);margin-top:var(--s2)}
.confirm{border:1px solid var(--ink);padding:var(--s4);margin-top:var(--s3)}
.confirm[hidden]{display:none}
.confirm h2{font-size:2rem;margin-bottom:var(--s2)}.confirm h2:focus{outline:none}
.confirm h3{font:500 1rem var(--f-ui);margin:var(--s3) 0 var(--s1)}
.route{list-style:disc;padding-left:20px}

/* footer */
.foot{background:var(--paper-2);border-top:1px solid var(--line-2);padding:var(--s5) 0 var(--s4);margin-top:0}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s4)}
.f-name{font:500 1.25rem var(--f-head)}
.f-h{font-weight:500;font-size:var(--t-s)}
.foot li{padding:3px 0}.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot-note{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s2)}
.foot-note p{font-size:var(--t-s);color:var(--ink-2);max-width:90ch}

/* reveal: used sparingly, on cards only */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:1100px){
  .rail-t small{display:none}
  .capgrid{grid-template-columns:repeat(2,1fr)}.cap,.cap:nth-child(n+4){grid-column:span 1}.cap:nth-child(5){grid-column:span 2}
  .steps{grid-template-columns:repeat(3,1fr)}.steps li:nth-child(3){border-right:0;margin-right:0}
  .pgrid .pcard,.pgrid.three .pcard,.pgrid:not(.three) .pcard{grid-column:span 6}.pgrid:not(.three) .pcard.lead{grid-column:span 12;grid-row:auto}
  .rec ul{grid-template-columns:repeat(2,1fr)}
  .slots{grid-template-columns:repeat(2,1fr)}
  .enq-cols{grid-template-columns:1fr}.side{position:static}
}
@media (max-width:899px){
  .rail{display:none}
  .menu-btn{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line-2);padding:var(--s2) var(--gut) var(--s3);display:none;max-height:calc(100vh - 110px);overflow-y:auto}
  .nav.open{display:block}
  .nav-l{flex-direction:column;align-items:stretch;gap:0}
  .nav-l li{border-bottom:1px solid var(--line)}
  .nav-l a{display:block;padding:14px 0;min-height:48px}
  .nav-l a.btn{display:flex;margin:var(--s2) 0}
  .nav-l .nav-cta{border:0}
  .nav-h{display:block;font-size:var(--t-s);color:var(--ink-2);margin:var(--s2) 0 var(--s1)}
  .nav-b{display:block}
  .nav-b a{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:var(--s2);padding:8px 0;text-decoration:none;min-height:48px}
  .sg-l,.sg-r,.hero-t,.hero-s{grid-column:1 / -1}
  .hero-s{margin-top:var(--s2)}
  .elev-legend{grid-column:1 / -1;grid-template-columns:repeat(2,auto)}
  .elev-panel{grid-column:1 / -1}
  .elev{min-width:640px}
  .enq-g,.bh-g,.bd-g,.brow{grid-template-columns:1fr;gap:var(--s3)}
  .why-g{grid-template-columns:1fr}.why-i:nth-child(odd){border-right:0;margin-right:0}
  .cs-g .sh,.cs-t{grid-column:1 / -1}
  .meta{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}.f-about{grid-column:1 / -1}
}
@media (max-width:640px){
  .sec{padding-block:var(--s5)}
  .capgrid{grid-template-columns:1fr}.cap,.cap:nth-child(n+4),.cap:nth-child(5){grid-column:span 1}
  .pgrid .pcard,.pgrid.three .pcard,.pgrid:not(.three) .pcard{grid-column:1 / -1}
  .steps{grid-template-columns:1fr}.steps li{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}
  .rec ul{grid-template-columns:1fr}
  .choices,.choices.three,.grid2{grid-template-columns:1fr}
  .prog{grid-template-columns:repeat(2,1fr)}
  .slots{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:2px}
  .finder,.confirm{padding:var(--s2)}
  .foot-in{grid-template-columns:1fr}
  .actions .btn,.cta .btn{flex:1 1 100%}
  .meta{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media (forced-colors:active){.btn,.chip{border:2px solid ButtonText}}