/* www.marshhomes.au: the approved prototype's stylesheet (www/reference/prototype-2026-09-20.html),
   converted on 27 September 2026 so that it names only tokens from tokens.css.
   Rules and their order are the prototype's; only values changed. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:var(--text-16);line-height:1.55}
a{color:var(--brand);text-underline-offset:var(--space-5)}
button,input,select,textarea{font:inherit}
button,a,input,select{touch-action:manipulation}
button,.button{min-height:var(--size-44);border:1px solid var(--brand);border-radius:var(--radius);background:var(--brand);color:var(--paper);padding:var(--space-12) var(--space-20);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-10);text-decoration:none}
button:hover,.button:hover{filter:brightness(.92)}
.secondary{background:transparent;color:var(--brand)}
.on-dark{border-color:var(--paper);color:var(--paper);background:transparent}
.small{font-size:var(--text-13)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:var(--space-4)}
header{background:var(--paper);border-bottom:1px solid var(--stone);padding:var(--space-18) var(--gutter);display:flex;gap:var(--space-24);align-items:center;position:relative;z-index:10}
.brand{padding:var(--space-12) var(--space-16);flex-shrink:0}
.brand img{width:var(--size-176);height:auto;display:block}
header nav{display:flex;gap:var(--space-25);margin-left:auto;align-items:center}
header nav a{font-size:var(--text-14);font-weight:600;text-decoration:none;color:var(--ink)}
header nav a[aria-current]{text-decoration:underline;color:var(--brand)}
.header-contact{display:flex;gap:var(--space-20);align-items:center}
.phone{white-space:nowrap;font-weight:600;font-size:var(--text-14)}
.menu-button{display:none}
.skip{position:absolute;left:var(--size-12);top:calc(-1 * var(--size-100));z-index:99;background:var(--paper);padding:var(--space-14)}
.skip:focus{top:var(--size-12)}
.review-bar{font-size:var(--text-12);text-align:center;padding:var(--space-7) var(--space-15);background:var(--stone)}
main{min-height:60vh}
section{padding:var(--space-65) var(--gutter);scroll-margin-top:var(--space-20)}
.container{max-width:var(--size-1320);margin:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:var(--text-12);font-weight:600;margin:0 0 var(--space-18)}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--brand);margin:0 0 var(--space-20);line-height:1.2}
h1{font-size:clamp(var(--text-26),3vw,var(--text-32));max-width:var(--size-850)}
h2{font-size:var(--text-22)}
h3{font-size:var(--text-18)}
h4{font-size:var(--text-16)}
p{margin:0 0 var(--space-20);max-width:75ch}
.lead{font-size:clamp(var(--text-18),2vw,var(--text-22));line-height:1.45}
.hero{padding:0;position:relative;background:var(--brand);color:var(--paper)}
.hero-copy{padding:var(--space-55) var(--gutter) var(--space-50);max-width:var(--size-770)}
.hero h1{font-size:clamp(var(--text-36),4.3vw,var(--text-56));line-height:1.03;letter-spacing:-.035em;color:var(--paper)}
.hero .eyebrow{color:var(--paper)}
.hero-image{width:100%;aspect-ratio:2.6;object-fit:cover;display:block;object-position:50% 60%}
.hero .actions{margin-top:var(--space-28)}
.hero .button{background:var(--paper);color:var(--brand)}
.hero .secondary{background:transparent;color:var(--paper);border-color:var(--paper)}
.trust{padding:var(--space-22) var(--gutter);background:var(--paper);display:flex;gap:var(--space-25);flex-wrap:wrap;font-size:var(--text-13);align-items:center}
.actions{display:flex;gap:var(--space-12);flex-wrap:wrap;align-items:center}
.section-head{display:flex;gap:var(--space-24);align-items:end;justify-content:space-between;margin-bottom:var(--space-30)}
.section-head h2{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper);border:1px solid var(--stone);border-radius:var(--radius);overflow:hidden;min-width:0}
.card-content{padding:var(--space-24)}
.design-card{display:block;text-decoration:none;color:var(--ink);transition:transform .2s}
.design-card:hover{transform:translateY(calc(-1 * var(--space-3)))}
.design-card img{aspect-ratio:1.5;object-fit:cover;width:100%;height:auto;display:block}
.design-card h3{font-size:var(--text-24);margin-bottom:var(--space-10)}
.stats{display:flex;gap:var(--space-16);flex-wrap:wrap;font-size:var(--text-14);margin-bottom:var(--space-12)}
.muted{font-size:var(--text-13);opacity:.85}
.disclaimer{font-size:var(--text-12);max-width:100%;margin-top:var(--space-20)}
.band{background:var(--brand);color:var(--paper)}
.band h2,.band h3{color:var(--paper)}
.band a{color:var(--paper)}
.stone{background:var(--stone)}
.sage{background:var(--accent)}
.sage h2,.sage h3{color:var(--ink)}
.feature{padding:var(--space-35);background:var(--brand);color:var(--paper)}
.feature h2,.feature h3{color:var(--paper)}
.feature a{color:var(--paper)}
.feature .lead{max-width:48ch}
.todo{display:block;border:1px dashed currentColor;padding:var(--space-8) var(--space-10);font-size:var(--text-12);line-height:1.45;margin:var(--space-8) 0;overflow-wrap:anywhere}
.todo:before{content:'Needs content · ';font-weight:700}
.note{border-left:3px solid var(--brand);padding:var(--space-16) var(--space-20);background:var(--stone);margin:var(--space-22) 0}
.note p:last-child{margin-bottom:0}
.notice{font-size:var(--text-13)}
/* The enquiry form: a field people cannot see (a script fills it and is thanked for nothing), and the security check. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.turnstile{margin:var(--space-15) 0}
.page-intro{padding-bottom:var(--space-30)}
.page-intro .eyebrow{margin-bottom:var(--space-16)}
.subnav{display:flex;flex-wrap:wrap;gap:var(--space-12);margin:var(--space-22) 0}
.subnav a{font-weight:600}
.gallery-main{width:100%;height:auto;aspect-ratio:2.1;object-fit:cover;display:block}
.gallery-thumbs{display:flex;gap:var(--space-10);overflow-x:auto;margin-top:var(--space-12);padding-bottom:var(--space-8)}
.gallery-thumbs button{padding:0;background:var(--paper);flex:0 0 var(--space-110);border:2px solid transparent}
.gallery-thumbs button[aria-pressed=true]{border-color:var(--brand)}
.gallery-thumbs img{width:var(--size-110);height:var(--size-70);object-fit:cover;display:block}
.summary-strip{display:flex;gap:var(--space-28);flex-wrap:wrap;border-block:var(--space-1) solid var(--stone);padding:var(--space-24) 0;margin-top:var(--space-24)}
.summary-strip strong{display:block;font-family:var(--font-head);font-size:var(--text-24);color:var(--brand)}
.summary-strip span{font-size:var(--text-13)}
.filter{display:flex;gap:var(--space-10);flex-wrap:wrap;margin-bottom:var(--space-30)}
.filter button[aria-pressed=false]{background:transparent;color:var(--brand)}
details{border-bottom:1px solid var(--stone);padding:var(--space-20) 0}
details.card{padding:var(--space-20) var(--space-24)}
summary{cursor:pointer;color:var(--brand);font-weight:600;min-height:var(--size-30)}
details p{margin-top:var(--space-16);margin-bottom:var(--space-8)}
.model-frame{position:relative;min-height:var(--size-360);background:var(--stone);border-radius:var(--radius);overflow:hidden}
.model-poster{width:100%;height:var(--size-440);object-fit:cover;display:block}
.model-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:var(--shadow)}
model-viewer{width:100%;height:var(--size-500);background:var(--ground)}
.hotspot{padding:var(--space-6) var(--space-10);min-height:var(--size-44);font-size:var(--text-12);border-radius:var(--radius-22);background:var(--paper);color:var(--brand);box-shadow:var(--shadow)}
.inclusion{padding:var(--space-24);background:var(--paper);border:1px solid var(--stone);scroll-margin-top:var(--space-24)}
.inclusion .benefit{font-weight:600}
.inclusion .spec{font-size:var(--text-14);margin-bottom:var(--space-8)}
.inclusion .source{font-size:var(--text-11);opacity:.75}
.text-controls{display:flex;gap:var(--space-8);flex-wrap:wrap;margin:var(--space-20) 0}
.text-controls button{font-size:var(--text-13);padding:var(--space-8) var(--space-12)}
.plan-viewport{overflow:auto;width:min(100%,calc(var(--size-plan-view) * var(--plan-ratio)));margin-inline:auto;max-height:calc(var(--size-plan-view) + 2px);background:var(--paper);border:1px solid var(--stone)}
.plan-canvas{position:relative;width:100%;min-width:0}
.plan-canvas img{width:100%;height:auto;display:block}
.plan-pin{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:var(--size-36);height:var(--size-36);min-height:var(--size-36);padding:0;font-size:var(--text-12);box-shadow:var(--shadow)}
.plan-pin:focus-visible{z-index:5}
.table-wrap{max-width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{padding:var(--space-18);vertical-align:top;border-bottom:1px solid var(--stone)}
th{color:var(--brand);font-weight:600;background:var(--stone)}
td p{font-size:var(--text-14);margin:0;min-width:var(--size-220)}
.badge{display:inline-block;padding:var(--space-6) var(--space-10);background:var(--stone);font-size:var(--text-12);font-weight:600;color:var(--ink);white-space:nowrap}
.tick{color:var(--brand);font-size:var(--text-24)}
.timeline details{padding:var(--space-24) 0}
.timeline summary{display:flex;align-items:center;gap:var(--space-20)}
.step-number{display:inline-flex;border:1px solid var(--brand);border-radius:50%;min-width:var(--size-40);height:var(--size-40);justify-content:center;align-items:center}
.timeline details p{margin-left:var(--space-60)}
form{max-width:var(--size-840)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-22)}
.field{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.field.full{grid-column:1/-1}
label{font-weight:600;font-size:var(--text-14)}
input,select,textarea{width:100%;min-height:var(--size-48);padding:var(--space-12);border:1px solid var(--brand);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
fieldset{border:1px solid var(--stone);padding:var(--space-20);min-width:0}
legend{font-weight:600}
.error{font-weight:600;border:2px solid var(--ink);padding:var(--space-12);margin:var(--space-15) 0}
.checker{display:grid;grid-template-columns:var(--space-340) minmax(0,1fr);gap:var(--space-40)}
.checker .fields{gap:var(--space-14)}
.block-svg{display:block;width:100%;height:var(--size-510);max-height:70vh;background:var(--paper);border:1px solid var(--stone);touch-action:none}
.checker-result{padding:var(--space-18);background:var(--stone);margin-top:var(--space-16);font-weight:600}
.map{width:100%;max-height:var(--size-470);background:var(--stone);border-radius:var(--radius)}
.councils{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-18)}
.councils a{font-weight:600}
.councils p{font-size:var(--text-13);margin:var(--space-7) 0 0}
.qa-pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--stone);padding:var(--space-20);font-size:var(--text-12)}
.qa-status{font-size:var(--text-12);display:inline-block;padding:var(--space-4) var(--space-8);border:1px solid var(--brand)}
footer{background:var(--ink);color:var(--paper);padding:var(--space-55) var(--gutter) var(--space-30)}
footer a{color:var(--paper)}
footer .brand{display:inline-block;padding-left:0}
footer .grid{grid-template-columns:1.4fr 1fr 1fr}
footer nav{display:flex;flex-direction:column;gap:var(--space-12);font-size:var(--text-14)}
.legal{border-top:1px solid var(--paper-a25);margin-top:var(--space-40);padding-top:var(--space-24);font-size:var(--text-12)}
.mobile-bar{display:none}
.share-output{font-size:var(--text-13);overflow-wrap:anywhere}
.hide,[hidden]{display:none!important}
img{max-width:100%}
ul{padding-left:var(--space-22)}
li{margin-bottom:var(--space-8)}
.print-only{display:none}
@media(min-width:1100px){.hero{min-height:var(--size-560);display:grid;grid-template-columns:1fr 1.08fr}
.hero-copy{padding-right:var(--space-50);align-self:center}
.hero-image{height:100%;aspect-ratio:auto;object-position:45% center}
}
@media(max-width:1100px){header{gap:var(--space-8);padding:var(--space-12) var(--space-22)}
header nav{gap:var(--space-18)}
.header-contact .phone{display:none}
.brand{padding:var(--space-10)}
.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.checker{grid-template-columns:var(--space-280) minmax(0,1fr)}
}
@media(max-width:800px){header{flex-wrap:wrap}
.brand img{width:var(--size-160)}
.menu-button{display:flex;margin-left:auto;background:transparent;color:var(--brand);padding:var(--space-8) var(--space-12)}
.header-contact{display:none}
header nav{display:none;width:100%;margin:0;padding:var(--space-15) var(--space-10);flex-direction:column;align-items:start;gap:var(--space-18)}
header nav.open{display:flex}
.grid,.grid.two,.grid.four{grid-template-columns:1fr}
.hero-copy{padding-top:var(--space-40);padding-bottom:var(--space-35)}
.hero-image{aspect-ratio:1.7}
.hero .lead{font-size:var(--text-18)}
.trust{gap:var(--space-10);align-items:start;flex-direction:column}
section{padding:var(--space-42) var(--gutter)}
.section-head{align-items:start;flex-direction:column;gap:var(--space-14)}
.fields{grid-template-columns:1fr}
.checker{grid-template-columns:1fr;gap:var(--space-24)}
.block-svg{height:var(--size-440)}
.councils{grid-template-columns:1fr}
.gallery-main{aspect-ratio:1.45}
.model-poster,model-viewer{height:var(--size-330)}
.model-frame{min-height:var(--size-330)}
.model-load{min-width:var(--size-180)}
.summary-strip{gap:var(--space-20)}
.summary-strip strong{font-size:var(--text-20)}
.feature{padding:var(--space-26)}
footer{padding-bottom:var(--space-110)}
footer .grid{grid-template-columns:1fr;gap:var(--space-32)}
.mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--paper);padding:var(--space-10) var(--space-16) max(var(--space-10),env(safe-area-inset-bottom));gap:var(--space-10);border-top:1px solid var(--stone)}
.mobile-bar a{flex:1;padding:var(--space-10);font-size:var(--text-14)}
.timeline details p{margin-left:0}
.plan-pin{width:var(--size-32);height:var(--size-32);min-height:var(--size-32)}
.phone-mobile{display:block}
.table-wrap table{min-width:var(--size-650)}
body{padding-bottom:var(--space-60)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important;animation:none!important}
}
@media print{header,footer,.mobile-bar,.review-bar,.actions,.gallery-thumbs,.text-controls,.model-frame,.skip,.no-print{display:none!important}
body{background:var(--paper);padding:0;font-size:10pt}
section{padding:var(--space-15) 0;break-inside:avoid}
.grid,.grid.two{display:block}
.inclusion{break-inside:avoid;margin-bottom:var(--space-10)}
.gallery-main{max-height:var(--size-250);object-fit:contain}
.plan-viewport{overflow:visible;max-height:none}
.plan-canvas{width:100%!important}
.plan-pin{display:none}
.print-only{display:block}
h1{font-size:24pt}
h2{font-size:16pt}
.todo{font-size:9pt}
details>*{display:block!important}
}
h1[tabindex="-1"]:focus{outline:none}
.hero .actions .button:last-child{background:transparent;color:var(--paper);border-color:var(--paper)}
/* Only transform and opacity animate; reduced motion removes every effect. */
.hero-media,.gallery-open{display:block;position:relative;padding:0;border:0;width:100%;overflow:hidden;background:var(--stone);border-radius:0;cursor:zoom-in;color:var(--paper)}
.hero-media:hover,.gallery-open:hover{filter:none}
.gallery-open .gallery-main{display:block;margin:0;width:100%}
.zoom-hint{position:absolute;bottom:var(--size-18);right:var(--size-18);display:flex;align-items:center;gap:var(--space-8);padding:var(--space-10) var(--space-14);border:1px solid var(--paper-a50);border-radius:var(--radius-3);background:var(--ink-a90);color:var(--paper);font-size:var(--text-13);font-weight:500;pointer-events:none}
.hero-media:focus-visible,.gallery-open:focus-visible{outline:3px solid var(--accent);outline-offset:calc(-1 * var(--space-6))}
.gallery-thumbs button{transition:border-color 160ms ease-out,opacity 160ms ease-out}
.gallery-thumbs button[aria-pressed=true]{outline:2px solid var(--brand);outline-offset:2px}
.viewer-open{overflow:hidden}
.render-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;border:0;margin:0;background:var(--night);color:var(--ground);overflow:hidden}
.render-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.render-viewer::backdrop{background:var(--night)}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);padding:var(--space-14) var(--space-24)}
.viewer-top h2{margin:0;font-size:var(--text-16);color:var(--ground)}
.render-viewer button{background:transparent;border-color:var(--line-strong);color:var(--ground);padding:var(--space-8) var(--space-14);min-width:var(--size-44);min-height:var(--size-44);transition:background-color 160ms ease-out}
.render-viewer button:hover{background:var(--paper-a09);filter:none}
.render-viewer button:disabled{opacity:.35;cursor:default}
.render-viewer :focus-visible{outline-color:var(--accent)}
.viewer-stage{display:flex;justify-content:center;align-items:center;overflow:hidden;touch-action:none;min-height:0;position:relative;user-select:none}
.viewer-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;flex-shrink:0;transform-origin:center;user-select:none}
.viewer-bottom{padding:var(--space-12) var(--space-24) var(--space-18)}
.viewer-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-10);flex-wrap:wrap}
#viewer-counter,#viewer-scale{font-size:var(--text-13);font-variant-numeric:tabular-nums;min-width:var(--size-55);text-align:center}
#viewer-help{margin:var(--space-12) auto 0;text-align:center;font-size:var(--text-12);color:var(--line);max-width:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.design-card img{transition:transform 300ms cubic-bezier(.2,.65,.3,1)}
.design-card:hover img{transform:scale(1.025)}
button:active,.button:active{transform:scale(.985)}
.gallery-open:active,.hero-media:active{transform:none}
}
@media(max-width:600px){.viewer-top{padding:var(--space-10) var(--space-12)}
.viewer-bottom{padding:var(--space-10) var(--space-10) var(--space-16)}
.viewer-controls{gap:var(--space-6)}
.render-viewer button{padding:var(--space-8) var(--space-10)}
.zoom-hint{bottom:var(--size-12);right:var(--size-12);padding:var(--space-8) var(--space-10)}
.viewer-top h2{font-size:var(--text-14)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.design-card:hover,.design-card:hover img{transform:none}
}
@media print{.render-viewer,.zoom-hint{display:none!important}
.viewer-open{overflow:visible}
}
/* Clear pointer feedback, with equivalent keyboard focus styling. */
button,.button{transition:background-color 160ms ease-out,color 160ms ease-out,border-color 160ms ease-out,box-shadow 160ms ease-out,transform 160ms ease-out}
@media(hover:hover){
 button:not(:disabled):not(.hero-media):not(.gallery-open):not(.hotspot):hover,.button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 0 0 var(--space-3) var(--accent-a44);filter:none}
 button.secondary:not(:disabled):hover,.button.secondary:hover{background:var(--brand);color:var(--paper);border-color:var(--brand)}
 .hero .button:hover,.band .button:hover,.on-dark:hover,.render-viewer button:not(:disabled):hover{background:var(--accent);color:var(--ink);border-color:var(--accent);box-shadow:0 0 0 var(--space-3) var(--accent-a31);filter:none}
 header nav a:hover{color:var(--brand);background:var(--stone);box-shadow:0 0 0 var(--space-8) var(--stone);border-radius:var(--radius-2);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:var(--space-6)}
 main a:not(.button):not(.design-card):hover,footer a:not(.button):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:var(--space-5)}
 .gallery-thumbs button:not(:disabled):hover{outline:3px solid var(--brand);outline-offset:2px;box-shadow:none}
 .hero-media:hover .zoom-hint,.gallery-open:hover .zoom-hint{background:var(--accent);color:var(--ink);border-color:var(--accent)}
 summary:hover{color:var(--brand);background:var(--accent-a25)}
 .button.sister-ground-projects:hover{background:var(--ground-projects-dark);color:var(--ground-projects-light);border-color:var(--ground-projects-dark)}
 .button.sister-living-canvas:hover{background:var(--living-canvas-dark);color:var(--living-canvas-light);border-color:var(--living-canvas-dark)}
 .button.sister-otetto:hover{background:var(--otetto-dark);color:var(--otetto-light);border-color:var(--otetto-dark)}
}
button:focus-visible,.button:focus-visible{box-shadow:0 0 0 var(--space-3) var(--accent-a44)}
@media(prefers-reduced-motion:reduce){button,.button{transition:none!important}
}
/* Marsh Homes / Collection direction. Brand colours, architectural scale. */
body{background:var(--ground);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:500;letter-spacing:-.045em;text-wrap:balance}
h1{font-size:clamp(var(--text-44),5.7vw,var(--text-84));line-height:1.03;max-width:var(--size-1050)}
h2{font-size:clamp(var(--text-28),3.6vw,var(--text-52));line-height:1.12;max-width:var(--size-900)}
h3{font-size:var(--text-24);letter-spacing:-.025em}
p{line-height:1.7}
.eyebrow{font-size:var(--text-11);letter-spacing:.15em;font-weight:600}
.lead{font-size:clamp(var(--text-20),2vw,var(--text-27));line-height:1.4}
.container{max-width:var(--size-1500)}
section{padding-block:var(--space-90)}
button,.button{border-radius:var(--radius-100);padding:var(--space-14) var(--space-23);font-size:var(--text-14);font-weight:500;min-height:var(--size-48)}
.button:not(.secondary){background:var(--brand)}
/* The sister companies' buttons on the About page, in their own brands' colours. */
.button.sister-ground-projects{background:var(--ground-projects-mid);color:var(--ground-projects-dark);border-color:var(--ground-projects-mid)}
.button.sister-living-canvas{background:var(--ground-projects-light);color:var(--living-canvas-dark);border-color:var(--living-canvas-dark)}
.button.sister-otetto{background:var(--otetto-mid);color:var(--otetto-black);border-color:var(--otetto-mid)}
.text-cta{display:inline-block;font-weight:600;font-size:var(--text-14);text-decoration:none;border-bottom:1px solid currentColor;padding-block:var(--space-8)}
header{position:sticky;top:0;background:var(--ground-a96);backdrop-filter:blur(var(--space-16));padding:var(--space-17) var(--gutter);border:0;z-index:30;gap:var(--space-32)}
.brand{padding:0}
.brand img{width:var(--size-166)}
.brand:hover{filter:none}
header nav{gap:var(--space-30)}
header nav a{font-size:var(--text-13);font-weight:500}
header nav a[aria-current]{text-underline-offset:var(--space-9);text-decoration-thickness:2px}
.header-contact .button{padding:var(--space-13) var(--space-23)}
.review-bar{background:var(--stone);font-size:var(--text-10);letter-spacing:.03em;padding:var(--space-6) var(--space-20);display:flex;align-items:center;justify-content:center;gap:var(--space-16);flex-wrap:wrap}
.review-bar a{font-weight:600;color:var(--ink)}
/* An expansive heading leads into an uninterrupted architectural view. */
.creative-hero{display:block;background:var(--ground);color:var(--ink);padding:var(--space-58) var(--gutter) 0;min-height:0}
.creative-hero .hero-copy{display:grid;grid-template-columns:1.7fr 1fr;gap:7vw;max-width:var(--size-1500);margin:auto;padding:0 0 var(--space-52);align-items:end}
.creative-hero h1{font-size:clamp(var(--text-42),5.5vw,var(--text-86));line-height:1.02;color:var(--brand);font-weight:500;letter-spacing:-.055em;margin:0}
.creative-hero h1 span{color:var(--ink)}
.creative-hero .eyebrow{color:var(--brand);margin-bottom:var(--space-22)}
.creative-hero .hero-aside{max-width:var(--size-370);padding-bottom:var(--space-6)}
.creative-hero .hero-aside .lead{font-size:var(--text-23);color:var(--brand);letter-spacing:-.025em}
.creative-hero .hero-aside p:not(.lead){font-size:var(--text-14)}
.creative-hero .actions{gap:var(--space-14);margin-top:var(--space-25)}
.creative-hero .hero-aside .button:first-child{background:var(--brand);color:var(--paper);border-color:var(--brand)}
.creative-hero .hero-aside .button:last-child{background:transparent;color:var(--brand);border-color:var(--brand)}
.hero-scene{position:relative;max-width:var(--size-1500);margin:auto;border-radius:var(--radius-20);overflow:hidden;background:var(--stone)}
.creative-hero .hero-media{border-radius:var(--radius-20);aspect-ratio:2.18;display:block}
.creative-hero .hero-image{width:100%;height:100%;object-fit:cover;object-position:50% 58%;aspect-ratio:auto}
.hero-caption{position:absolute;bottom:var(--size-25);left:var(--size-25);display:flex;align-items:center;gap:var(--space-32);padding:var(--space-23) var(--space-27);background:var(--ground);border-radius:var(--radius-12);box-shadow:0 var(--space-8) var(--space-30) var(--ink-a10);max-width:calc(100% - var(--size-180))}
.hero-caption .eyebrow{display:block;margin-bottom:var(--space-6);font-size:var(--text-9)}
.hero-caption strong{font-family:var(--font-head);font-size:var(--text-31);line-height:1;letter-spacing:-.04em;color:var(--brand);font-weight:500}
.hero-caption>span{font-size:var(--text-12);line-height:1.5}
.hero-design-link{display:flex;align-items:center;min-height:var(--size-44);font-size:var(--text-13);font-weight:600;text-decoration:none}
.hero-image-credit{position:absolute;left:var(--size-25);top:var(--size-20);color:var(--paper);font-size:var(--text-10);background:var(--ink-a68);border-radius:var(--radius-30);padding:var(--space-6) var(--space-10);pointer-events:none}
.zoom-hint{border-radius:var(--radius-40);font-size:var(--text-11);padding:var(--space-12) var(--space-15);right:var(--size-25);bottom:var(--size-25);transition:background-color 160ms,color 160ms}
.trust{background:transparent;justify-content:space-between;padding:var(--space-27) var(--gutter) var(--space-35);font-size:var(--text-11);gap:var(--space-15);border-bottom:1px solid var(--stone)}
.investment-section{padding-block:var(--space-110)}
.investment-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:12vw;margin-bottom:var(--space-40)}
.investment-statement h2{font-size:clamp(var(--text-30),3.5vw,var(--text-48))}
.investment-statement>p:not(.eyebrow){font-size:var(--text-15);max-width:49ch}
.investment-details{padding-top:var(--space-25)}
.investment-details summary{font-size:var(--text-19);letter-spacing:-.025em;font-weight:500;padding-right:var(--space-16)}
.investment-details details{padding:var(--space-25) 0}
.investment-details>p{margin-top:var(--space-30)}
.investment-details p{font-size:var(--text-14)}
.investment-layout~p{font-size:var(--text-12);opacity:.85}
.featured-section{background:var(--stone);border-radius:var(--radius-30) var(--radius-30) 0 0}
.featured-section h2{font-size:clamp(var(--text-42),5vw,var(--text-70))}
.featured-section h2 span{color:var(--ink)}
.section-head{margin-bottom:var(--space-46)}
.featured-grid{grid-template-columns:1.25fr 1fr;gap:var(--space-35)}
.featured-grid .design-card:first-child{grid-row:span 2}
.featured-grid .design-card:first-child .card-image{aspect-ratio:.96}
.featured-grid .design-card:first-child img{height:100%;aspect-ratio:auto}
.featured-grid .design-card:not(:first-child){display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-20)}
.featured-grid .design-card:not(:first-child) .card-image{height:100%;min-height:var(--size-230)}
.featured-grid .design-card:not(:first-child) img{height:100%;aspect-ratio:auto}
.featured-grid .design-card:not(:first-child) .card-content{padding-top:var(--space-10)}
/* Collection selector: one house at a time, a tangible invitation to explore. */
.collection-page{padding-top:var(--space-58)}
.collection-intro{display:grid;grid-template-columns:1.6fr 1fr;gap:7vw;align-items:end;margin-bottom:var(--space-55)}
.collection-intro h1{font-size:clamp(var(--text-52),7.3vw,var(--text-110));font-weight:500;margin:0;letter-spacing:-.06em}
.collection-intro h1 span{color:var(--ink)}
.collection-intro-copy{max-width:var(--size-350);padding-bottom:var(--space-7)}
.collection-intro-copy p:not(.lead){font-size:var(--text-14)}
.collection-feature{position:relative;display:grid;grid-template-columns:1fr 2fr;min-height:var(--size-490);background:var(--brand);border-radius:var(--radius-20);overflow:hidden;color:var(--paper)}
.collection-photo{grid-column:2;grid-row:1;min-width:0;position:relative;overflow:hidden}
.collection-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.visualisation-label{position:absolute;right:var(--size-20);bottom:var(--size-18);background:var(--ink-a80);color:var(--paper);border-radius:var(--radius-30);padding:var(--space-5) var(--space-11);font-size:var(--text-10)}
/* On a design page the zoom hint holds the bottom corner, so the label sits at the top. */
.gallery-open .visualisation-label{right:auto;bottom:auto;left:var(--size-25);top:var(--size-20)}
.collection-info{grid-column:1;grid-row:1;padding:var(--space-42) var(--space-34);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.collection-info h2{font-size:clamp(var(--text-27),2.6vw,var(--text-39));color:var(--paper);letter-spacing:-.045em;line-height:1.15}
.collection-info .eyebrow{color:var(--mint)}
.collection-specs{display:flex;flex-wrap:wrap;gap:var(--space-20);margin:var(--space-15) 0 var(--space-30)}
.collection-specs span{font-size:var(--text-10);color:var(--mint)}
.collection-specs strong{display:block;font-weight:500;font-size:var(--text-23);letter-spacing:-.03em;color:var(--paper);line-height:1.2;margin-bottom:var(--space-6)}
.collection-info .button{background:var(--ground);color:var(--brand);border-color:var(--ground)}
.collection-note{font-size:var(--text-11);margin:var(--space-13) 0 0;color:var(--mint)}
.collection-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-8);padding:var(--space-15) 0 0}
.collection-tabs .collection-tab{border:1px solid transparent;border-radius:var(--radius-8);background:transparent;color:var(--brand);position:relative;font-size:var(--text-14);padding:var(--space-17) var(--space-10)}
.collection-tabs .collection-tab[aria-pressed=true]{background:var(--stone);border-color:var(--stone)}
.collection-tabs .collection-tab[aria-pressed=true]:before{content:'';width:var(--size-5);height:var(--size-5);border-radius:50%;background:var(--brand);margin-right:var(--space-2)}
.collection-list-head{display:flex;justify-content:space-between;gap:var(--space-30);align-items:end;margin:var(--space-100) 0 var(--space-40)}
.collection-list-head h2{font-size:clamp(var(--text-28),3.1vw,var(--text-42));margin:0}
.filter{margin:0;gap:var(--space-5);padding:var(--space-5);border:1px solid var(--stone);border-radius:var(--radius-100);flex-wrap:nowrap}
.filter button{padding:var(--space-9) var(--space-17);min-height:var(--size-42);font-size:var(--text-12);border:0;white-space:nowrap}
.filter button[aria-pressed=true]{background:var(--brand);color:var(--paper)}
.collection-grid{grid-template-columns:1fr 1fr;gap:var(--space-55) var(--space-35);margin-bottom:var(--space-45)}
.design-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;transition:none}
.design-card:hover{transform:none}
.card-image{overflow:hidden;border-radius:var(--radius-14);position:relative;aspect-ratio:1.58;background:var(--stone)}
.design-card img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto}
.card-content{padding:var(--space-22) 0 0}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)}
.card-heading h3{font-size:var(--text-36);margin:0 0 var(--space-12);font-weight:500}
.card-arrow{border:1px solid var(--brand-a38);border-radius:50%;width:var(--size-43);height:var(--size-43);display:grid;place-items:center;color:var(--brand);font-size:var(--text-23);transition:background-color .18s,color .18s}
.design-card .stats{gap:0;color:var(--brand);font-size:var(--text-12)}
.design-card .stats>span+span:before{content:'·';padding-inline:var(--space-12)}
.design-card .card-content>p{font-size:var(--text-13);margin:0 0 var(--space-16)}
.card-explore{position:absolute;inset:auto var(--size-15) var(--size-15);display:flex;align-items:center;justify-content:space-between;background:var(--ground-a94);color:var(--brand);border-radius:var(--radius-8);font-size:var(--text-12);padding:var(--space-12) var(--space-15);opacity:0;transform:translateY(var(--space-8));transition:opacity 200ms,transform 200ms;pointer-events:none}
.card-explore span{font-size:var(--text-18)}
.design-card .todo{font-size:var(--text-10);border:0;border-left:2px solid var(--brand-a31);padding:var(--space-3) var(--space-10);opacity:.8;max-width:100%}
.card:focus-visible{outline-offset:var(--space-8)}
/* Detail pages retain all the technical content, with a clearer visual hierarchy. */
main[data-route^="/designs/"] #render-and-gallery{padding-top:var(--space-50)}
main[data-route^="/designs/"] h1{font-size:clamp(var(--text-64),8vw,var(--text-112));font-weight:500;margin-bottom:var(--space-15)}
main[data-route^="/designs/"] #render-and-gallery .lead{margin-bottom:var(--space-40);max-width:none;white-space:nowrap}
.gallery-open{border-radius:var(--radius-18)}
.gallery-main{aspect-ratio:2;object-position:center}
.gallery-thumbs{gap:var(--space-12);margin-top:var(--space-18);padding:var(--space-4) var(--space-3) var(--space-12)}
.gallery-thumbs button{border-radius:var(--radius-7);overflow:hidden}
.summary-strip{justify-content:space-between;padding-block:var(--space-32)}
.summary-strip strong{font-size:var(--text-34);font-weight:500;letter-spacing:-.04em}
.summary-strip span{font-size:var(--text-12)}
.subnav{gap:var(--space-12) var(--space-25);align-items:center;border-top:1px solid var(--stone);padding-top:var(--space-25)}
.subnav>a:not(.button){font-size:var(--text-13);text-decoration:none}
.inclusion{border-radius:var(--radius-12);border:0;padding:var(--space-30)}
.inclusion h3{font-size:var(--text-21)}
.inclusion h4{font-size:var(--text-18)}
.inclusion .benefit{font-weight:500}
.model-frame{border-radius:var(--radius-18)}
.model-load{border-radius:var(--radius-100)}
.plan-viewport{border-radius:var(--radius-14)}
.plan-pin,.hotspot{border-radius:50%;padding:0}
.hotspot{width:var(--size-44)}
.todo{border-style:solid;border-color:var(--brand-a25);border-radius:var(--radius-6);background:var(--stone-a25);color:var(--ink)}
.band .todo,.feature .todo{color:var(--paper);background:transparent}
.review-notes{margin-top:var(--space-30)}
.review-notes summary{font-size:var(--text-12)}
.review-notes .todo{font-size:var(--text-11)}
.note{border-radius:0 var(--radius-12) var(--radius-12) 0}
input,select,textarea{border-color:var(--brand-a44);border-radius:var(--radius-8)}
.fields{gap:var(--space-25)}
.table-wrap{border-radius:var(--radius-12)}
th{font-size:var(--text-13)}
.timeline summary{font-weight:500;font-size:var(--text-20)}
.timeline .step-number{font-size:var(--text-14)}
.timeline details{padding:var(--space-28) 0}
.creative-closing{padding-block:var(--space-100);border-radius:var(--radius-30) var(--radius-30) 0 0;background:var(--brand)}
.closing-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:7vw;align-items:end}
.closing-layout h2{font-size:clamp(var(--text-34),4.5vw,var(--text-68));font-weight:500;margin-bottom:0}
.closing-layout h2 span{color:var(--stone)}
.closing-layout .actions{gap:var(--space-20)}
.closing-layout .button{background:var(--ground);color:var(--brand);border-color:var(--ground)}
.closing-layout p:not(.eyebrow){font-size:var(--text-15)}
.closing-layout .text-cta{font-size:var(--text-15);white-space:nowrap}
.creative-closing+.band{border-radius:0}
footer{padding-top:var(--space-65)}
footer .brand img{width:var(--size-200)}
footer p{font-size:var(--text-13)}
footer nav{font-size:var(--text-12);gap:var(--space-15)}
.legal{font-size:var(--text-10);line-height:1.8}
.render-viewer button{border-radius:var(--radius-30)}
.viewer-top h2{font-family:var(--font-body);font-weight:500;letter-spacing:0}
@media(hover:hover){.design-card:hover .card-arrow{background:var(--brand);color:var(--paper)}
.design-card:hover .card-explore,.design-card:focus-visible .card-explore{opacity:1;transform:none}
.design-card:hover img{transform:scale(1.04)}
.collection-tabs .collection-tab:hover{background:var(--stone)!important;color:var(--brand)!important;box-shadow:none!important;border-color:var(--stone)!important}
.creative-hero .hero-aside .button:hover,.collection-info .button:hover,.closing-layout .button:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hero-media:hover,.gallery-open:hover{box-shadow:none}
.hero-design-link:hover{text-decoration:underline}
.plan-pin:active{transform:translate(-50%,-50%)}
.model-load:active{transform:translate(-50%,-50%)}
}
@media(max-width:1100px){header{gap:var(--space-18)}
header nav{gap:var(--space-18)}
.brand img{width:var(--size-148)}
.phone-mobile{display:none}
.creative-hero .hero-copy{grid-template-columns:1.5fr 1fr;gap:4vw}
.creative-hero .hero-aside .lead{font-size:var(--text-20)}
.hero-caption{gap:var(--space-20);padding:var(--space-17) var(--space-20)}
.hero-caption>span{display:none}
.collection-feature{grid-template-columns:1fr 1.65fr;min-height:var(--size-450)}
.collection-info{padding:var(--space-30) var(--space-24)}
.collection-info h2{font-size:var(--text-30)}
.collection-specs{gap:var(--space-14)}
.collection-specs strong{font-size:var(--text-21)}
.collection-list-head{align-items:start;flex-direction:column;gap:var(--space-25)}
.featured-grid .design-card:not(:first-child){display:block}
.featured-grid{align-items:start}
.featured-grid .design-card:first-child{grid-row:auto}
.featured-grid .design-card:first-child .card-image{aspect-ratio:1.3}
.featured-grid .design-card:not(:first-child) .card-image{height:auto;min-height:0;aspect-ratio:1.3}
.featured-grid .design-card:last-child{grid-column:2}
.investment-layout{gap:7vw}
}
@media(max-width:800px){header{padding:var(--space-16) var(--space-22);gap:0}
.brand img{width:var(--size-144)}
header nav{gap:var(--space-24);padding:var(--space-28) 0 var(--space-15)}
.phone-mobile{display:block}
.menu-button{min-height:var(--size-42);padding:var(--space-8) var(--space-15)}
.review-bar{font-size:var(--text-9);gap:var(--space-10);padding-block:var(--space-7)}
.creative-hero{padding-top:var(--space-38)}
.creative-hero .hero-copy{grid-template-columns:1fr;gap:var(--space-27);padding-bottom:var(--space-32)}
.creative-hero h1{font-size:clamp(var(--text-39),8.8vw,var(--text-68));letter-spacing:-.05em;line-height:1.07}
.creative-hero .hero-aside{max-width:100%;padding:0}
.creative-hero .hero-aside .lead{font-size:var(--text-20);margin-bottom:var(--space-9)}
.creative-hero .hero-aside p:not(.lead){font-size:var(--text-13);max-width:42ch}
.creative-hero .actions{margin-top:var(--space-20)}
.creative-hero .button{font-size:var(--text-12);padding:var(--space-12) var(--space-17)}
.creative-hero .hero-media{aspect-ratio:1.25;border-radius:var(--radius-14)}
.hero-scene{border-radius:var(--radius-14)}
.hero-caption{position:static;background:var(--stone);border-radius:0;padding:var(--space-18);max-width:none;justify-content:space-between}
.hero-caption strong{font-size:var(--text-27)}
.hero-caption .eyebrow{margin-bottom:var(--space-5)}
.hero-design-link{font-size:var(--text-11)}
.hero-image-credit{left:var(--size-12);top:var(--size-12);font-size:var(--text-9)}
.creative-hero .zoom-hint{bottom:var(--size-18);right:var(--size-14);padding:var(--space-9) var(--space-12);font-size:var(--text-10)}
.trust{font-size:var(--text-10);gap:var(--space-9);padding-block:var(--space-25)}
.investment-section{padding-block:var(--space-60)}
.investment-layout{grid-template-columns:1fr;gap:var(--space-20);margin-bottom:var(--space-30)}
.investment-statement h2{font-size:var(--text-34)}
.investment-details{padding:0}
.investment-details summary{font-size:var(--text-18)}
section{padding-block:var(--space-55)}
.featured-section{border-radius:var(--radius-20) var(--radius-20) 0 0}
.featured-grid{grid-template-columns:1fr;gap:var(--space-34)}
.featured-grid .design-card:last-child{grid-column:auto}
.featured-grid .design-card:first-child .card-image,.featured-grid .design-card:not(:first-child) .card-image{aspect-ratio:1.5}
.featured-grid .design-card:not(:first-child) .card-content{padding-top:var(--space-20)}
.section-head{gap:var(--space-20);margin-bottom:var(--space-30)}
.featured-section h2{font-size:var(--text-48)}
.collection-page{padding-top:var(--space-38)}
.collection-intro{grid-template-columns:1fr;gap:var(--space-25);margin-bottom:var(--space-32)}
.collection-intro h1{font-size:clamp(var(--text-52),12vw,var(--text-80))}
.collection-intro-copy{max-width:100%}
.collection-intro-copy .lead{font-size:var(--text-20);margin-bottom:var(--space-9)}
.collection-intro-copy p:not(.lead){font-size:var(--text-13);max-width:43ch}
.collection-feature{display:flex;flex-direction:column;min-height:0;border-radius:var(--radius-14)}
.collection-photo{aspect-ratio:1.5}
.collection-photo img{position:static;display:block}
.collection-info{padding:var(--space-25)}
.collection-info h2{font-size:var(--text-28);max-width:100%;margin-bottom:var(--space-18)}
.collection-info .eyebrow{margin-bottom:var(--space-12)}
.collection-specs{margin:0 0 var(--space-20);gap:var(--space-30)}
.collection-note{display:none}
.collection-tabs{grid-template-columns:repeat(3,1fr);gap:var(--space-5);padding-top:var(--space-10)}
.collection-tabs .collection-tab{padding:var(--space-11) var(--space-8);min-height:var(--size-44);font-size:var(--text-12)}
.collection-list-head{margin-top:var(--space-60);margin-bottom:var(--space-30)}
.collection-list-head h2{font-size:var(--text-31)}
.filter{max-width:100%;width:100%;justify-content:space-between}
.filter button{padding:var(--space-8) var(--space-12);font-size:var(--text-11);flex:1}
.collection-grid{grid-template-columns:1fr;gap:var(--space-37)}
.card-heading h3{font-size:var(--text-31)}
.card-content{padding-top:var(--space-18)}
.card-explore{display:none}
.collection-grid .card-image{aspect-ratio:1.5}
main[data-route^="/designs/"] #render-and-gallery{padding-top:var(--space-32)}
main[data-route^="/designs/"] h1{font-size:var(--text-70)}
main[data-route^="/designs/"] #render-and-gallery .lead{font-size:var(--text-20);margin-bottom:var(--space-30)}
.gallery-main{aspect-ratio:1.35}
.gallery-open{border-radius:var(--radius-12)}
.gallery-thumbs button{flex-basis:var(--size-85);min-height:0}
.gallery-thumbs img{width:var(--size-85);height:var(--size-58)}
.summary-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-22)}
.summary-strip strong{font-size:var(--text-28)}
.subnav{gap:var(--space-18)}
.subnav .button{font-size:var(--text-12)}
.creative-closing{padding-block:var(--space-65);border-radius:var(--radius-20) var(--radius-20) 0 0}
.closing-layout{grid-template-columns:1fr;gap:var(--space-30)}
.closing-layout h2{font-size:var(--text-39)}
.closing-layout .actions{gap:var(--space-15)}
.mobile-bar{background:var(--ground-a96);backdrop-filter:blur(var(--space-12))}
.mobile-bar a{border-radius:var(--radius-100);font-size:var(--text-12)}
.inclusion{padding:var(--space-24)}
.timeline summary{font-size:var(--text-17)}
.model-load{font-size:var(--text-12);min-width:var(--size-160)}
.text-controls button{font-size:var(--text-11);padding:var(--space-9) var(--space-12)}
.render-viewer .viewer-top{position:relative;z-index:1}
}
@media(max-width:360px){.creative-hero .actions{gap:var(--space-9)}
.creative-hero .button{padding:var(--space-11) var(--space-12);font-size:var(--text-11)}
.hero-design-link{font-size:var(--text-10)}
.collection-info{padding:var(--space-22)}
.collection-specs{gap:var(--space-24)}
.filter button{padding-inline:var(--space-8)}
.closing-layout h2{font-size:var(--text-34)}
}
@media(prefers-reduced-motion:reduce){.card-explore{transition:none;transform:none}
.design-card:hover img{transform:none}
}
@media print{header,.hero-caption,.collection-tabs,.review-notes,.zoom-hint,.card-explore{display:none!important}
.collection-feature,.creative-hero .hero-copy,.closing-layout,.investment-layout{display:block}
.collection-photo img{position:static}
.collection-info{color:var(--ink);background:var(--paper)}
.collection-info h2,.collection-specs strong{color:var(--ink)}
.creative-hero h1,main[data-route^="/designs/"] h1{font-size:30pt}
.creative-hero{padding:0}
.creative-closing{color:var(--ink);background:var(--paper)}
.creative-closing h2{color:var(--ink);font-size:24pt}
}
/* Allow nested image grids to shrink within their allocated columns. */
.design-card,.card-image,.card-content{min-width:0}
.featured-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.featured-grid .design-card:not(:first-child){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
@media(max-width:800px){.featured-grid{grid-template-columns:minmax(0,1fr)}
}
section[id]{scroll-margin-top:var(--space-105)}
.featured-grid .design-card:not(:first-child) .card-image{width:100%;aspect-ratio:auto;align-self:stretch}
@media(max-width:1100px){.featured-grid .design-card:not(:first-child) .card-image{aspect-ratio:1.3}
}
@media(max-width:800px){.featured-grid .design-card:not(:first-child) .card-image{aspect-ratio:1.5}
}
@media(hover:hover){.timeline details:hover>summary{color:var(--brand)}
.timeline details:hover .step-number{background:var(--brand);color:var(--paper)}
.timeline details[open]>:not(summary){animation:process-reveal 180ms ease-out}
}
@keyframes process-reveal{from{opacity:0;transform:translateY(calc(-1 * var(--space-5)))}
to{opacity:1;transform:translateY(0)}
}
/* September 2026 review: preserve the original palette, type and components. */
.review-location{justify-content:center;text-align:center}
.collection-intro h1{font-size:clamp(var(--text-48),6.8vw,var(--text-96))}
.collection-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-18) var(--space-24)}
.collection-specs>span{min-width:0}
.councils>h3{grid-column:1/-1}
.review-about-image{margin:var(--space-24) 0}
.review-about-image img{width:100%;max-height:var(--size-640);object-fit:cover;border-radius:var(--radius-18)}
.review-contract-cost{margin-top:var(--space-48);border-top:1px solid var(--brand);padding-top:var(--space-30)}
.review-feature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-14);margin:var(--space-24) 0 var(--space-40)}
.review-feature{position:relative;border:1px solid var(--line);border-radius:var(--radius-14);padding:var(--space-22) var(--space-16);background:var(--ground)}
.review-feature svg{width:var(--size-42);height:var(--size-42);color:var(--brand)}
.review-feature h4{margin:var(--space-14) 0 var(--space-6);font-size:var(--text-17)}
.review-feature p{font-size:var(--text-14);margin:0}
.review-feature-tick{position:absolute;right:var(--size-14);top:var(--size-18);border:1px solid var(--brand);border-radius:var(--radius-4);width:var(--size-22);height:var(--size-22);display:grid;place-items:center;color:var(--brand)}
@media(max-width:800px){.review-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.collection-intro h1{font-size:clamp(var(--text-44),9vw,var(--text-68))}
}
.review-spec-item{display:block;margin-bottom:.65em}
.review-planning-hints{margin:var(--space-28) 0;padding:var(--space-20) var(--space-28);background:var(--ground);border-left:3px solid var(--brand)}
.review-planning-hints li{margin:.8em 0;line-height:1.65}

/* Space above a second heading in a long page (was an inline style in the prototype). */
.section-gap{margin-top:var(--space-40)}
/* Space above the box under the block checker (was an inline style in the prototype). */
.feature-gap{margin-top:var(--space-35)}
/* The Contact page opening (was an inline style in the prototype). */
.contact-intro{padding-left:var(--gutter);padding-top:var(--space-40)}
/* Partner login: a button beside "Check my block" on wide screens, a line in the menu on phones. */
.nav-partner{display:none}
@media(max-width:800px){.nav-partner{display:block}
}

/* The comparison on /process: each tick sits in its own narrow column, level with its item. */
.compare-table td{vertical-align:middle}
.compare-table th:last-child,.compare-table td.compare-tick{width:var(--size-280);text-align:center}
.compare-table tbody tr:nth-child(even){background:var(--paper)}
.compare-table .tick{line-height:1}

/* A design's tagline sits on one line on a wide screen and wraps on a phone. */
@media (max-width:800px){main[data-route^="/designs/"] #render-and-gallery .lead{white-space:normal}}

/* A heading Jake asked to keep on one line: smaller than other section headings, so it fits a
   desktop screen; it wraps as usual below that. */
@media (min-width:1100px){h2.one-line{white-space:nowrap;max-width:none;font-size:clamp(var(--text-30),2.5vw,var(--text-39))}}