/* One centered canvas across every route, with fluid gutters and readable columns. */
:root{--site-width:1600px;--gutter:clamp(20px,5vw,80px);--scene-height:min(100svh,900px)}
html{background:var(--paper)}
body{width:100%;max-width:var(--site-width);margin-inline:auto;min-width:0}
header,section,.manifesto-strip,footer{padding-inline:var(--gutter)}
.page-heading{max-width:none}
.intro-grid{grid-template-columns:minmax(0,1fr) minmax(220px,290px);gap:clamp(28px,4vw,64px)}
.intro h1{font-size:clamp(38px,5.6vw,80px)}
.section-heading{gap:28px}
.section-heading>.text-link{flex-shrink:0}
.stats,.project-pagination,.article-meta,.article-layout{padding-inline:var(--gutter)}
.article-cover{margin-inline:var(--gutter)}
.article-layout{grid-template-columns:230px minmax(0,810px);justify-content:center;gap:clamp(35px,5vw,80px)}
.legal-copy{max-width:1000px}
:where(.intro-grid,.archive-grid,.project-overview,.service-detail,.article-layout,.about-layout,.contact-layout,.contact-grid,.footer-navigation,.stats,.sitemap-grid,.nav-dialog-grid)>*{min-width:0}
.scene-story,.scene-story:not(.home-story){--step-height:calc(var(--scene-height)*.82);height:calc(var(--scene-count)*var(--step-height) + var(--scene-height))}
.scene-story:not(.home-story){--step-height:calc(var(--scene-height)*.65)}
.scene-sticky{height:var(--scene-height)}
.scene-steps{padding-bottom:var(--scene-height)}
.scene-story .scene-step{height:var(--step-height)}
.scene-top,.scene-copy,.scene-bottom{left:var(--gutter);right:var(--gutter)}
.scene-copy{max-width:none}
.scene-copy h2{font-size:clamp(38px,6vw,84px)}
.floating-contact{right:max(22px,calc((100vw - var(--site-width))/2 + 22px));bottom:max(22px,env(safe-area-inset-bottom))}
.cookie-notice{left:max(20px,calc((100vw - var(--site-width))/2 + 20px));max-width:calc(100vw - 40px)}
.reading-progress{max-width:var(--site-width);margin-inline:auto}
.rich-body table{display:block;max-width:100%;overflow-x:auto}
.rich-body iframe,.rich-body video{max-width:100%}
.enquiry-form input,.enquiry-form textarea{font-size:16px}
.footer-navigation a,.footer-navigation p{overflow-wrap:anywhere}
.dialog-close{z-index:2}
dialog h2{padding-right:34px}
.lightbox{max-width:1600px}
.lightbox-top h2{padding-right:0}
.lightbox-top{min-height:55px;height:auto;flex-shrink:0}
.lightbox[open]{display:flex;flex-direction:column}
.lightbox-stage{flex:1;min-height:0;height:auto}
#gallery-thumbnails,.lightbox-help{flex-shrink:0}
#gallery-thumbnails{min-height:76px}
button,input,textarea{max-width:100%}
@media(max-width:1100px){
 .intro-grid{grid-template-columns:minmax(0,1fr) 240px;gap:28px}
 .intro h1{font-size:clamp(38px,5.6vw,62px)}
 .differentiator-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media(max-width:900px){
 .article-layout{display:block;max-width:900px}
 .sitemap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .section-heading{align-items:start}
 .section-heading>.text-link{flex-shrink:1}
}
@media(max-width:760px){
 :root{--gutter:clamp(20px,6vw,40px)}
 .intro-grid{display:block}
 .intro h1{font-size:clamp(36px,8vw,59px)}
 .intro-aside{flex-wrap:wrap}
 .section-heading>.text-link{margin-top:22px}
 .scene-story{--step-height:calc(var(--scene-height)*.65)}
 .scene-story:not(.home-story){--step-height:calc(var(--scene-height)*.60)}
 .scene-copy h2{font-size:clamp(34px,7vw,48px)}
 .scene-top{gap:10px}
 .scene-top .eyebrow{flex:1;min-width:0}
 .motion-toggle{white-space:normal;max-width:155px;min-height:44px}
 .scene-index{min-width:0;flex:1;justify-content:flex-end}
 .scene-dot{min-width:0;min-height:44px;flex:1;max-width:44px;text-align:center}
 .scene-bottom{gap:12px}
 .scene-count{flex-shrink:0}
 .project-pagination{position:static;inset:auto}
 .project-pagination a{min-width:0;overflow-wrap:anywhere}
 .stats{gap:12px}
 .stats strong{font-size:clamp(31px,8.5vw,50px)}
 .stats span{letter-spacing:.4px}
 .contact-grid h2{font-size:clamp(38px,9vw,54px)}
 .sitemap-grid{grid-template-columns:1fr}
 .journal-tools input{min-width:0;font-size:16px}
 .floating-contact{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));min-height:44px}
 .cookie-notice{left:12px;right:12px;width:auto;max-width:none;bottom:calc(72px + env(safe-area-inset-bottom));max-height:45svh;overflow:auto;align-items:start}
 .cookie-notice button{min-height:44px}
 .filter-bar button,.share-row button,.menu-toggle{min-height:44px}
 .lightbox{width:100%;max-width:100%;height:100svh;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .lightbox-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding-bottom:12px}
 .lightbox-top h2{grid-column:1/3;max-width:none;font-size:14px}
 .lightbox-top>span{grid-column:1;grid-row:2}
 .lightbox-close{grid-column:3;grid-row:1}
 #zoom-image{grid-column:2/4;grid-row:2}
 .lightbox-top button{min-height:44px}
 .lightbox-stage{grid-template-columns:36px minmax(0,1fr) 36px}
 .lightbox-stage>button{width:36px;min-height:44px}
}
@media(max-width:390px){
 .related-projects .archive-grid{grid-template-columns:1fr}
 .differentiator-grid{gap:24px 16px}
 .contact-button{padding:17px;gap:12px}
 .cookie-notice{display:block}
 .cookie-notice button{margin-top:10px}
}
@media(max-height:550px) and (min-width:600px){
 .scene-top{top:14px}
 .scene-copy,.scene-story:not(.home-story) .scene-copy{bottom:83px}
 .scene-copy h2,.scene-story:not(.home-story) .scene-copy h2{font-size:32px;margin:8px 0 12px}
 .scene-bottom{bottom:14px}
 .scene-label{font-size:10px}
 .scene-top .eyebrow{font-size:9px}
 .scene-link{font-size:12px}
 .lightbox-top{padding-bottom:6px;min-height:44px}
 #gallery-thumbnails{height:56px;min-height:56px;padding-top:6px}
 #gallery-thumbnails button{height:45px}
 .lightbox-help{display:none}
}

/* Shared SVG stroke language for navigation and actions. */
.ui-icon{display:inline-block;width:1.2em;height:1.2em;flex:none;vertical-align:-.2em;pointer-events:none}
.card-arrow .ui-icon,.dialog-close .ui-icon,.lightbox-close .ui-icon{width:20px;height:20px}
.dialog-close,.lightbox-close,.search-toggle{display:inline-flex;align-items:center;justify-content:center}
.search-toggle .ui-icon{width:22px;height:22px}
.menu-toggle .ui-icon{width:21px;height:21px}
.service-list .plus{display:flex;align-items:center;justify-content:center;width:28px;height:28px}
.service-list .plus .ui-icon{width:22px;height:22px}
.scene-link .ui-icon,.image-explore .ui-icon{margin-left:8px}
.project-pagination span .ui-icon{width:16px;height:16px}

.floating-contact{gap:10px}.floating-contact .whatsapp-icon{display:block;width:21px;height:21px;flex:none}

.design-credit{margin-top:26px;font-size:12px;line-height:1.8;color:#d4dfd4}.design-credit a{color:#fff;letter-spacing:.07em;border-bottom:1px solid #ffffff50;padding-bottom:3px}.design-credit a:hover{border-color:#cf9566}

@supports not (height:100svh){:root{--scene-height:min(100vh,900px)}}