/* JavaScript enables this layout only after installing the page controls. */
html:has(body.screen-layout){height:100%;overflow:hidden}
body.screen-layout{height:var(--screen-height,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column}
.screen-layout>header{position:relative;z-index:10;flex:none;min-height:0;padding:12px 4%;gap:18px}
.screen-layout .brand-house-emblem{width:42px;height:46px}
.screen-layout .brand-with-emblem{gap:12px;flex-shrink:0}
.screen-layout .brand{font-size:19px}
.screen-layout .brand small{font-size:8px;letter-spacing:4px;margin-top:5px}
.screen-layout>header nav{gap:15px;align-items:center}
.screen-layout>header nav a{font-size:10px;letter-spacing:.6px;white-space:nowrap}
.site-menu-toggle{display:none;border:1px solid #a6b3a0;color:var(--teal);background:transparent;padding:11px 16px;font-size:12px;min-height:44px}
.screen-layout>.page-wayfinding{display:none}
.screen-layout>.page-viewport{flex:1;min-height:0;margin:0 4%;overflow:hidden;position:relative}
.screen-layout .page-flow{height:100%;width:100%;min-height:0;margin:0;padding:0;display:block;column-width:var(--column-width);column-gap:32px;column-fill:auto;overflow:visible}
.screen-layout .page-flow .section,.screen-layout .page-flow .about-ian,.screen-layout .page-flow .approach,.screen-layout .page-flow .instagram-section{display:block;padding:16px 0;margin:0;gap:0;break-inside:auto;background:transparent;border:0}
.screen-layout .page-flow .section-top,.screen-layout .page-flow .contact-page-heading,.screen-layout .page-flow .contact-page-layout{display:block;margin:0 0 18px}
.screen-layout .page-flow h1,.screen-layout .page-flow h2{font:normal clamp(26px,3vw,40px)/1.12 Georgia;margin:8px 0 16px;letter-spacing:-.5px}
.screen-layout .page-flow h3{font-size:23px;margin:14px 0 10px}
.screen-layout .page-flow p,.screen-layout .page-flow li{font-size:14px;line-height:1.7}
.screen-layout .page-flow .eyebrow{font-size:9px;letter-spacing:2px;margin:6px 0 10px}
.screen-layout .page-flow .bodycopy{max-width:none;margin:0 0 18px}
.screen-layout .page-flow .button{font-size:10px;padding:13px 18px;gap:18px;margin-top:12px}
.screen-layout .page-flow .services,.screen-layout .page-flow .brand-grid,.screen-layout .page-flow .portfolio-grid,.screen-layout .page-flow .quote-grid{display:block;margin:0;padding:0}
.screen-layout .page-flow .service{display:inline-block;width:calc(33.333% - 18px);margin:0 18px 20px 0;vertical-align:top;break-inside:avoid;padding-top:14px}
.screen-layout .page-flow .service h3{margin:12px 0}
.screen-layout .page-flow .supplier-card{display:inline-flex;width:calc(25% - 12px);margin:0 12px 12px 0;vertical-align:top;break-inside:avoid}
.screen-layout .page-flow .supplier-card .brand-tile{min-height:105px;padding:10px 8px;gap:7px}
.screen-layout .page-flow .brand-tile img{height:45px}
.screen-layout .page-flow .brand-tile span{font-size:9px}
.screen-layout .page-flow .supplier-copy{font-size:10px;padding:7px;min-height:36px}
.screen-layout .page-flow .project{display:inline-block;width:calc(50% - 16px);margin:0 16px 16px 0;vertical-align:top;break-inside:avoid}
.screen-layout .page-flow #recent-work .open-room-gallery>img{width:100%;height:min(230px,calc(var(--content-height)*.52));object-fit:contain;aspect-ratio:auto}
.screen-layout .page-flow .project-label{padding:12px 0}
.screen-layout .page-flow .project-label strong{font-size:20px;margin:8px 0}
.screen-layout .page-flow .project-label small{font-size:8px}
.screen-layout .page-flow .project[open]{display:block;width:100%;break-inside:auto}
.screen-layout .page-flow .project[open] summary{break-inside:avoid}
.screen-layout .page-flow .gallery{display:block}
.screen-layout .page-flow .gallery a{display:inline-block;width:calc(50% - 10px);margin:0 10px 10px 0;break-inside:avoid}
.screen-layout .page-flow .gallery img{height:140px;object-fit:contain}
.screen-layout .page-flow .client-quote{display:inline-block;vertical-align:top;width:calc(50% - 24px);margin:0 24px 24px 0;padding:18px 0;break-inside:avoid}
.screen-layout .page-flow .client-quote blockquote{font-size:20px;line-height:1.5;margin-bottom:16px}
.screen-layout .page-flow .ian-photo,.screen-layout .page-flow .detail-image{min-height:0;height:auto;max-height:min(280px,calc(var(--content-height)*.6));margin:0 0 20px;break-inside:avoid;background:transparent}
.screen-layout .page-flow .ian-photo video,.screen-layout .page-flow .detail-image img{display:block;width:100%;height:min(280px,calc(var(--content-height)*.6));max-height:100%;object-fit:contain}
.screen-layout .page-flow .ian-copy,.screen-layout .page-flow .approach-copy{padding:0}
.screen-layout .page-flow .word-definition{display:block;padding:24px 16px;margin:18px 0;break-inside:avoid}
.screen-layout .page-flow .word-definition h2{font-size:34px}
.screen-layout .page-flow .word-definition .word-meaning{font-size:20px;line-height:1.5}
.screen-layout .page-flow .measure-topic{margin:0 0 12px;break-inside:auto}
.screen-layout .page-flow .measure-topic summary{break-inside:avoid;padding:15px 0}
.screen-layout .page-flow .measure-content,.screen-layout .page-flow .measure-diagrams{display:block}
.screen-layout .page-flow .measure-content{padding:12px 0}
.screen-layout .page-flow .measure-content li{break-inside:avoid}
.screen-layout .page-flow .measure-content figure{display:inline-block;vertical-align:top;width:calc(50% - 12px);margin:0 12px 14px 0;break-inside:avoid}
.screen-layout .page-flow .measure-content img{height:140px;max-width:100%;object-fit:contain}
.screen-layout .page-flow .instagram-frame{break-inside:avoid;margin:18px 0 0}
.screen-layout .page-flow .instagram-frame iframe{display:block;width:100%;height:calc(var(--content-height) - 85px);max-height:500px}
.screen-layout .page-flow .contact-page-heading>p{margin:0 0 18px}
.screen-layout .page-flow .enquiry-form{padding-top:16px;break-inside:auto}
.screen-layout .page-flow .field{break-inside:avoid;margin-bottom:14px}
.screen-layout .page-flow .field label{margin-bottom:6px}
.screen-layout .page-flow .field input,.screen-layout .page-flow .field textarea{padding:9px 12px;font-size:16px}
.screen-layout .page-flow .field textarea{min-height:65px}
.screen-layout .page-flow .field #enquiry-message{min-height:110px}
.screen-layout .page-flow .form-buttons{break-inside:avoid}
.screen-layout .page-flow .contact-sidebar{margin:20px 0;padding:20px;break-inside:auto}
.screen-layout .page-flow .page-enquiry{display:block;margin:20px 0;padding:20px 16px;break-inside:avoid}
.screen-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:8px 4%;border-top:1px solid #d8d6cb;background:var(--cream);color:var(--teal)}
.screen-controls button{border:1px solid #a6b3a0;background:transparent;color:var(--teal);padding:10px 16px;min-height:42px;font-size:11px;letter-spacing:.6px}
.screen-controls button:disabled{opacity:.3;cursor:default}
.screen-controls p{font-size:11px;margin:0;text-align:center}
.screen-controls[hidden]{display:none}
.screen-layout>footer{flex:none;padding:9px 4%;font-size:8px;gap:12px}
.screen-layout>.ribbon{flex:none;font-size:17px;padding:9px 12px}
.screen-layout>.home-marquee{flex:none}
.screen-layout>.home-marquee .home-marquee-viewport{padding:8px 0}
.screen-layout>.home-marquee .home-marquee-group li{font-size:17px;line-height:1.4}
.screen-layout>.home-marquee .home-marquee-controls{padding:0 4% 6px}
.screen-layout>.home-marquee .home-marquee-toggle{padding:3px 9px;font-size:9px}
.screen-layout .page-flow>.hero{height:100%;min-height:0;break-inside:avoid}
.screen-layout .page-flow .hero-copy{padding:20px 7%;min-width:0}
.screen-layout .page-flow .hero h1{font-size:clamp(28px,3.4vw,48px);line-height:1.08;margin:16px 0}
.screen-layout .page-flow .hero .intro{font-size:13px;line-height:1.7;margin:0;max-width:400px}
.screen-layout .page-flow .hero .hero-image{height:100%;align-items:center}
.screen-layout .page-flow .hero .hero-image img{width:100%;height:100%;object-fit:contain}
@media(max-width:1100px){
 .screen-layout>header{flex-direction:row;justify-content:space-between;padding:10px 4%}
 .site-menu-toggle{display:block}
 .screen-layout>header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid #bdb9aa;box-shadow:0 12px 22px #243c3614;padding:18px 5%;grid-template-columns:1fr 1fr;gap:8px 20px}
 .screen-layout>header.is-menu-open nav{display:grid}
 .screen-layout>header nav a{display:block!important;padding:10px 0;font-size:12px}
}
@media(max-width:760px){
 .screen-layout .brand{font-size:16px}.screen-layout .brand-house-emblem{width:33px;height:38px}
 .screen-layout .page-flow .service,.screen-layout .page-flow .project,.screen-layout .page-flow .client-quote{width:100%;margin-right:0}
 .screen-layout .page-flow .supplier-card{width:calc(50% - 10px);margin-right:10px}
 .screen-layout .page-flow .section h2{font-size:28px}
 .screen-layout .page-flow .client-quote blockquote{font-size:19px}
 .screen-layout .page-flow>.hero{display:block;height:auto;break-inside:auto}
 .screen-layout .page-flow .hero-copy,.screen-layout .page-flow .hero .hero-image{height:var(--content-height);break-inside:avoid;margin:0}
 .screen-layout .page-flow .hero-copy{padding:14px 4%;justify-content:center}
 .screen-layout .page-flow .hero h1{font-size:clamp(28px,8vw,40px);margin:12px 0}
 .screen-layout .page-flow .hero .intro{font-size:13px;line-height:1.6}
 .screen-layout .page-flow .hero .eyebrow{font-size:8px;letter-spacing:1.4px}
 .screen-layout>footer{display:none}
 .screen-layout>.ribbon{font-size:14px;padding:7px 10px}
 .screen-controls{padding:6px 4%}.screen-controls button{padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){.screen-layout>.home-marquee .home-marquee-group{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding:0 12px}.screen-layout>.home-marquee .home-marquee-viewport{overflow-x:auto}.screen-layout>.home-marquee .home-marquee-group li{white-space:nowrap}}

/* The home introduction, complete photograph and enquiry button share one screen. */
.screen-layout.home-single-screen .page-flow{columns:auto;overflow:hidden}
.screen-layout.home-single-screen .page-flow>.hero{height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;align-items:center;break-inside:auto}
.screen-layout.home-single-screen .page-flow .hero-copy{height:auto;min-height:0;padding:16px 3%;justify-content:center}
.screen-layout.home-single-screen .page-flow .hero .hero-image{height:100%;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;background:transparent;overflow:hidden;padding:0}
.screen-layout.home-single-screen .page-flow .hero .hero-image img{display:block;position:static;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:transparent}
.screen-layout.home-single-screen .page-flow .hero h1{font-size:clamp(28px,3vw,44px)}
@media(max-width:760px){
 .screen-layout.home-single-screen .page-flow>.hero{display:flex;flex-direction:column;gap:0;align-items:stretch}
 .screen-layout.home-single-screen .page-flow .hero .hero-image{order:-1;flex:1 1 0;height:auto;min-height:0}
 .screen-layout.home-single-screen .page-flow .hero-copy{flex:0 0 auto;height:auto;padding:8px 1% 10px;min-height:0}
 .screen-layout.home-single-screen .page-flow .hero h1{font-size:clamp(25px,6.5vw,32px);line-height:1.05;margin:8px 0}
 .screen-layout.home-single-screen .page-flow .hero .eyebrow{font-size:8px;letter-spacing:1.1px;margin:0 0 5px;line-height:1.5}
 .screen-layout.home-single-screen .page-flow .hero .intro{font-size:12px;line-height:1.45;max-width:none}
 .screen-layout.home-single-screen .page-flow .hero .button{font-size:9px;padding:11px 14px;margin-top:10px;gap:14px}
}