@font-face{font-family:Cormorant;src:url('cormorant.woff') format('woff'),url('cormorant.ttf') format('truetype');font-display:block;font-style:normal;font-weight:400}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#f0efe6;color:#514e43;font:16px/1.55 'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif}h1,h2,h3,p,figure{margin:0}h1,h2,h3,nav,.text-link,.header-end,.landing-scroll{font-family:Cormorant,Georgia,serif;font-weight:400}h1{font-size:clamp(46px,5.2vw,82px);line-height:1.02;letter-spacing:-.035em}h2{font-size:clamp(34px,3.1vw,50px);line-height:1.08;letter-spacing:-.025em}h3{font-size:32px;line-height:1.15}p{max-width:39ch;margin:24px 0;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button{background:none;border:0;padding:0}a:focus-visible,button:focus-visible{outline:2px solid #713737;outline-offset:5px}img{width:100%;display:block;object-fit:cover}a img{transition:transform .65s ease}a:hover img{transform:scale(1.015)}.skip{position:fixed;top:-100px;z-index:100;background:#fff;padding:12px}.skip:focus{top:10px}.header{height:78px;position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 2.3vw;background:rgba(249,249,244,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#39372f}.brand{font-size:22px;line-height:1.02;letter-spacing:-.035em;white-space:nowrap}.brand span{display:block;font-size:13px;letter-spacing:.045em;margin-top:3px}.header nav{display:flex;gap:30px;align-items:center;font-size:19px}.header-end{display:flex;gap:32px;align-items:center;font-size:17px}.languages{display:flex;gap:12px}.languages [aria-current]{text-decoration:underline;text-underline-offset:5px}.nav-link{position:relative}.nav-link:after{content:'';position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .3s}.nav-link:hover:after{right:0}.dropdown{position:relative}.dropdown-toggle{display:flex;align-items:center;gap:10px}.dropdown-panel{position:absolute;top:40px;left:-24px;min-width:200px;background:rgba(245,244,236,.98);padding:20px 24px;box-shadow:0 12px 24px #0000000b}.dropdown-panel a{display:block;padding:7px 0}.dropdown-panel a:hover{text-decoration:underline;text-underline-offset:5px}.mobile-toggle{display:none}.landing{height:100svh;min-height:530px;position:relative;background:#b4bcb6;overflow:hidden}.landing>img{height:100%;object-position:50% 35%;animation:appear 1.4s both}.landing-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:#fff;font-size:18px;text-shadow:0 1px 12px #000;display:flex;align-items:center;gap:20px}.landing-scroll span{font-family:Arial;font-size:22px}.split{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center;padding:100px 5vw}.split>div:first-child{max-width:500px}.intro{min-height:90svh;padding:100px 8vw 100px 5vw;gap:8vw}.intro>img{height:62svh;min-height:360px;max-height:700px;width:90%;justify-self:end}.intro h1{max-width:8ch}.intro p{max-width:36ch}.text-link{font-size:20px;display:inline-block;border-bottom:1px solid currentColor;line-height:1.25;padding-bottom:3px}.text-link:hover{color:#713737}.project-stage{height:125svh;position:relative}.project-frame{height:100svh;position:sticky;top:0;overflow:hidden;background:#222}.project-photo{height:110%;position:absolute;top:-5%;object-position:center;will-change:transform,opacity}.project-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0005,transparent 65%);pointer-events:none}.project-caption{position:relative;z-index:2;color:white;padding:140px 5vw 50px;width:490px;text-shadow:0 1px 18px #0003;will-change:opacity}.project-caption h2{font-size:clamp(44px,4.5vw,68px);max-width:10ch;line-height:1.02}.project-caption p{font-size:15px;max-width:31ch;line-height:1.6}.eyebrow{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:24px}.project-caption .text-link:hover{color:white;opacity:.7}.services-scroll{position:relative;padding:110px 5vw 60px;display:grid;grid-template-columns:1fr 1fr;column-gap:7vw}.service-menu{position:sticky;top:125px;height:260px;grid-column:1;grid-row:1;z-index:2;width:80%}.service-menu h2{margin-bottom:24px}.service-menu nav{display:flex;flex-direction:column;align-items:flex-start;font-size:23px;line-height:1.25}.service-menu nav a{margin-bottom:4px;text-decoration-thickness:1px;text-underline-offset:5px}.service-menu [aria-current=true]{text-decoration:underline}.service-chapters{grid-column:1/-1;grid-row:1}.service-chapter{display:grid;grid-template-columns:1fr 1fr;gap:7vw;min-height:90svh;align-items:center;scroll-margin-top:100px}.service-copy{padding-top:280px;padding-bottom:65px}.service-copy h3{font-size:30px;max-width:20ch}.service-copy p{max-width:39ch}.service-chapter>img{height:69svh;max-height:760px;min-height:350px;object-position:center}.principles>h2{padding:38px 5vw}.principle-grid{background:#713737;color:#f0e9db;padding:70px 3vw 80px;display:grid;grid-template-columns:repeat(3,1fr)}.principle-grid article{padding:0 3vw;text-align:center}.principle-grid article+article{border-left:1px solid #ffffff22}.number{font-family:Cormorant;font-size:25px;display:block;margin-bottom:32px}.principle-grid h3{font-size:34px}.principle-grid h3 em{display:block;font-size:25px;font-weight:400}.principle-grid p{font-size:14px;line-height:1.7;margin:30px auto 0;max-width:33ch}.contact-section{padding:100px 5vw 110px;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}.contact-section>div{padding-top:5px}.contact-section p{max-width:31ch}.contact-image{width:70%;max-width:490px;position:relative;overflow:hidden}.contact-image img{height:400px}.contact-image span{position:absolute;bottom:25px;left:25px;color:#fff;font-family:Cormorant;font-size:30px;text-shadow:0 2px 10px #222}.phone{display:block;margin-top:18px;font-size:15px}footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:7vw;background:#713737;color:#f0e9db;padding:46px 3vw 38px;font-size:13px}footer h2{font-family:'Avenir Next',Arial;font-size:12px;letter-spacing:0;line-height:1.4}footer p{line-height:1.8;margin:18px 0}.footer-brand>a{font:40px/.7 Cormorant;display:block}.footer-brand>a span{font-size:30px}.footer-brand p{max-width:27ch;font-size:12px;margin-top:30px}footer small{display:block;font-size:10px;margin-top:38px}.inner main{padding-top:78px}.page-top{padding:65px 5vw 45px}.page-top p{max-width:43ch}.portfolio-grid{padding:0 3vw 65px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:35px}.card{overflow:hidden}.card img{aspect-ratio:1.3;object-fit:cover}.card h3{font-size:31px;margin:14px 0 40px}.portfolio-grid .card:nth-child(3n+1) img{aspect-ratio:1.1}.portfolio-grid .card:nth-child(even){padding-top:70px}.service-detail{padding-top:60px;align-items:start;min-height:76svh}.service-detail>img{height:640px;max-height:78svh}.service-detail.image-first>img{grid-column:1;grid-row:1}.service-detail.image-first>div{grid-column:2}.service-detail h1{font-size:64px}.tagline{font-size:35px;margin-top:30px;max-width:18ch}.service-detail p{font-size:16px}.detail-secondary{padding-top:25px;padding-bottom:80px}.detail-secondary img{height:360px}.related{padding:20px 3vw 30px}.related>h2{margin-bottom:35px}.project-hero{height:80svh;overflow:hidden}.project-hero img{height:100%}.project-intro{align-items:start}.project-intro>img{height:580px}.gallery{display:flex;gap:25px;padding:0 3vw;align-items:start}.gallery img{width:0;flex:1;min-width:0;height:460px;object-fit:cover}.gallery img:nth-child(2){margin-top:45px}.back-link{padding:60px 5vw;text-align:center}.story-lead{padding:70px 25vw 30px;text-align:center}.story-lead p{margin:30px auto;max-width:44ch}.story-body{padding-top:40px}.story-images{display:flex;gap:24px}.story-images img{width:calc(50% - 12px);height:410px}.story-images img:nth-child(2){margin-top:0}.blog-list{padding:0 5vw 70px}.blog-list article{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;border-top:1px solid #514e4329;padding:50px 0}.blog-list img{aspect-ratio:1.35}.blog-list h2{max-width:17ch}.blog-list article:nth-child(even)>a{grid-column:2;grid-row:1}.blog-list article:nth-child(even)>div{grid-column:1;grid-row:1}.article header{max-width:820px;padding:70px 25px 50px;margin:auto;text-align:center}.article-image{max-height:80svh;width:90%;margin:auto}.article-copy{max-width:670px;margin:60px auto;padding:0 25px}.article-copy p{max-width:none;font-size:18px}.contact-page{min-height:65svh}.contact-page .contact-section{padding-top:75px}.editor-content p{max-width:none}body.admin-bar .header{top:32px}[hidden]{display:none!important}@keyframes appear{from{opacity:0}to{opacity:1}}@media(min-width:1600px){body{font-size:18px}.header{height:90px}.header nav{font-size:22px}.brand{font-size:26px}.header-end{font-size:20px}.service-copy p{font-size:18px}}@media(max-width:1050px){.header{gap:18px}.header nav{gap:18px;font-size:18px}.brand{font-size:19px}.header-end{gap:18px}.contact-nav{display:none}.split{gap:6vw}.service-menu{top:115px}.service-copy{padding-top:270px}.service-chapter{min-height:95svh}.service-chapter>img{height:65svh}.principle-grid article{padding:0 2vw}.principle-grid h3{font-size:28px}}@media(max-width:760px){body{font-size:16px}.header{height:70px;padding:0 20px;gap:16px;background:#f9f9f480}.brand{font-size:19px;white-space:normal}.brand span{font-size:12px}.header-end{margin-left:auto;font-size:16px}.languages{gap:9px}.mobile-toggle{display:block;order:3;font-family:Cormorant;font-size:19px}.header nav{display:none;position:absolute;top:70px;left:0;right:0;max-height:calc(100svh - 70px);overflow:auto;padding:32px 25px;background:#f0efe6;align-items:stretch;gap:22px;font-size:27px}.header nav.open{display:flex;flex-direction:column}.dropdown-toggle{font-size:27px}.dropdown-panel{position:static;box-shadow:none;padding:15px 0 0 18px;font-size:23px}.landing{min-height:480px}.landing>img{object-position:45% 40%}.landing-scroll{white-space:nowrap;font-size:17px}.split{grid-template-columns:1fr;gap:38px;padding:65px 25px}.intro{min-height:0}.intro h1{font-size:64px}.intro>img{width:76%;height:390px;min-height:0;justify-self:end}.project-stage{height:110svh}.project-caption{width:100%;padding:110px 25px 35px}.project-caption h2{font-size:49px;max-width:11ch}.project-caption p{font-size:15px}.project-frame:after{background:linear-gradient(180deg,#0006,transparent 70%)}.project-photo{object-position:57% center}.services-scroll{padding:0 25px 50px;display:block}.service-menu{top:70px;height:auto;width:calc(100% + 50px);margin-left:-25px;padding:20px 25px 16px;background:#f0efe6f5;z-index:3}.service-menu h2{font-size:32px;margin-bottom:14px}.service-menu nav{flex-direction:row;gap:18px;overflow:auto;font-size:19px;padding-bottom:8px}.service-menu nav a{white-space:nowrap}.service-chapter{display:flex;flex-direction:column;gap:28px;min-height:0;padding:36px 0 65px;scroll-margin-top:195px}.service-copy{padding:0;order:1;width:100%}.service-copy p{margin:20px 0}.service-chapter>img{order:0;height:430px;min-height:0;max-height:58svh}.principles>h2{padding:30px 25px}.principle-grid{grid-template-columns:1fr;padding:20px 25px}.principle-grid article{padding:35px 10px}.principle-grid article+article{border-left:0;border-top:1px solid #ffffff22}.number{margin-bottom:18px}.principle-grid h3{font-size:35px}.principle-grid p{font-size:15px;margin-top:20px}.contact-section{grid-template-columns:1fr;padding:60px 25px;gap:40px}.contact-image{width:80%;justify-self:end}.contact-image img{height:350px}footer{grid-template-columns:1fr 1fr;padding:40px 25px;gap:35px 20px}.footer-brand{grid-column:1/-1}.footer-brand p{max-width:32ch}footer p{font-size:12px}footer small{font-size:10px}.inner main{padding-top:70px}.page-top{padding:50px 25px 25px}.portfolio-grid{padding:0 25px 30px}.cards{gap:20px}.card h3{font-size:25px;margin-bottom:25px}.portfolio-grid .card:nth-child(even){padding-top:45px}.service-detail{padding-top:45px}.service-detail.image-first>div,.service-detail.image-first>img{grid-column:auto;grid-row:auto}.service-detail>img{height:470px;max-height:65svh;order:1}.service-detail h1{font-size:57px}.detail-secondary img{height:300px}.related{padding:20px 25px}.project-hero{height:60svh}.project-intro>img{height:440px}.gallery{padding:0 25px;gap:16px;flex-wrap:wrap}.gallery img{width:calc(50% - 8px);flex:auto;height:320px}.gallery img:nth-child(2){margin-top:35px}.gallery img:last-child:nth-child(odd){width:100%;height:360px}.story-lead{padding:50px 25px 10px}.story-images{gap:16px}.story-images img{width:calc(50% - 8px);height:300px}.blog-list{padding:0 25px 30px}.blog-list article{display:flex;flex-direction:column;gap:30px;align-items:stretch;padding:35px 0}.blog-list h2{font-size:39px}.article header{padding:50px 25px 35px}.article h1{font-size:49px}.article-image{width:100%;height:55svh}.article-copy{margin:35px auto}.article-copy p{font-size:17px}.contact-page .contact-section{padding-top:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.project-stage{height:100svh}.project-photo{transform:none!important;opacity:1!important}.project-caption{opacity:1!important}}
/* A single pinned composition; scroll changes opacity, never panel position. */
.services-sticky{display:contents}
.services-scroll.is-pinned{display:block;padding:0 5vw;height:var(--service-runway)}
.is-pinned .services-sticky{display:block;position:sticky;top:var(--service-top);height:var(--service-height)}
.is-pinned .service-menu{position:absolute;top:42px;left:0;height:auto;width:43%;margin:0;padding:0;background:none}
.is-pinned .service-menu nav a{position:relative;text-decoration:none}
.is-pinned .service-menu nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:0;transition:opacity .2s}
.is-pinned .service-menu nav a[aria-current=true]:after{opacity:1}
.is-pinned .service-chapters{display:grid;height:100%}
.is-pinned .service-chapter{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:7vw;height:100%;min-height:0;padding:42px 0;opacity:0;pointer-events:none;will-change:opacity;align-items:stretch}
.is-pinned .service-chapter:first-child{opacity:1}
.is-pinned .service-copy{align-self:end;padding:0 0 12px}
.is-pinned .service-copy h3{font-size:30px}
.is-pinned .service-copy p{margin:22px 0}
.is-pinned .service-chapter>img{height:100%;min-height:0;max-height:none;align-self:stretch}
.is-pinned .service-chapter.is-active{pointer-events:auto}
@media(max-width:760px){
.services-scroll.is-pinned{padding:0 25px}
.is-pinned .service-menu{top:20px;left:0;width:100%;z-index:4}
.is-pinned .service-menu h2{margin-bottom:12px}
.is-pinned .service-menu nav{flex-wrap:wrap;overflow:visible;gap:6px 17px;padding-bottom:0;font-size:18px}
.is-pinned .service-chapter{display:flex;flex-direction:column;gap:20px;padding:var(--service-menu-space) 0 26px}
.is-pinned .service-chapter>img{height:clamp(130px,25svh,240px);flex:none;width:100%;object-position:center;order:0}
.is-pinned .service-copy{padding:0;align-self:stretch;order:1}
.is-pinned .service-copy h3{font-size:26px;max-width:none}
.is-pinned .service-copy p{margin:14px 0;max-width:none;line-height:1.45}
.is-pinned .service-copy .text-link{font-size:19px}
}

/* Generous full-page pauses, with native proximity snapping between scenes. */
html.home-snap{scroll-snap-type:y proximity;scroll-padding-top:0}
.home .landing,.home .intro,.home .project-stage,.home .contact-section{scroll-snap-align:start;scroll-snap-stop:always}
.home .landing,.home .project-stage{scroll-margin-top:0}
.home .intro,.home .contact-section{scroll-margin-top:78px}
.home .intro{min-height:100svh;padding-top:130px;padding-bottom:130px}
.home .project-stage{height:140svh}
.home .services-scroll{margin-top:100px;margin-bottom:100px}
.home .contact-section{min-height:85svh;align-items:center;padding-top:120px;padding-bottom:140px}
.service-snap-stop{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--service-top)}
@media(min-width:1600px){.home .intro,.home .contact-section{scroll-margin-top:90px}}
@media(max-width:760px){
 .home .intro,.home .contact-section{scroll-margin-top:70px}
 .home .intro{min-height:100svh;padding-top:85px;padding-bottom:90px}
 .home .project-stage{height:130svh}
 .home .services-scroll{margin-top:60px;margin-bottom:70px}
 .home .contact-section{min-height:90svh;padding-top:80px;padding-bottom:95px}
}
@media(prefers-reduced-motion:reduce){html.home-snap{scroll-snap-type:none}.home .project-stage{height:100svh}}

/* Aligned portfolio frames with quiet, on-image hover titles. */
.portfolio-grid .cards{align-items:start;gap:28px}
.portfolio-grid .card:nth-child(n){position:relative;display:block;aspect-ratio:3/2;padding:0;overflow:hidden;background:#d8d6cc}
.portfolio-grid .card:nth-child(n) img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
.portfolio-grid .card:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3);opacity:0;transition:opacity .35s ease;pointer-events:none}
.portfolio-grid .card h3{position:absolute;z-index:1;left:6%;right:6%;top:50%;transform:translateY(-50%);margin:0;color:#fff;text-align:center;font-size:clamp(28px,3vw,46px);line-height:1.1;text-shadow:0 1px 16px #0003;opacity:0;transition:opacity .35s ease;pointer-events:none}
.portfolio-grid .card:hover h3,.portfolio-grid .card:focus-visible h3,.portfolio-grid .card:hover:after,.portfolio-grid .card:focus-visible:after{opacity:1}
.portfolio-grid .card:focus-visible{outline-offset:5px}
@media(max-width:760px){.portfolio-grid .cards{grid-template-columns:1fr;gap:24px}.portfolio-grid .card h3{font-size:32px}}
@media(hover:none){.portfolio-grid .card h3,.portfolio-grid .card:after{opacity:1}}
/* Solid navigation with direction-aware reveal on every page. */
.header{background:#f0efe6;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .32s cubic-bezier(.22,.61,.36,1);will-change:transform}
.header.is-hidden{transform:translateY(calc(-100% - 1px))}
.header:focus-within{transform:translateY(0)}
.header nav,.header-end,.header .mobile-toggle,.header .dropdown-toggle{font-family:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:15px;line-height:1.45;letter-spacing:0}
.header .dropdown-panel{background:#fff}
/* Give the footer its own reachable end anchor instead of snapping back to Contact. */
html.home-snap{scroll-padding-bottom:0}
.home .contact-section{scroll-snap-stop:normal;min-height:0;padding-top:100px;padding-bottom:100px}
.home>footer{scroll-snap-align:end;scroll-snap-stop:normal;scroll-margin:0}
@media(min-width:1600px){.header nav,.header-end,.header .dropdown-toggle{font-size:16px}}
@media(max-width:760px){
 .header nav{background:#fff;font-size:22px}
 .header .dropdown-toggle{font-size:22px}
 .header .dropdown-panel{font-size:20px}
 .header .mobile-toggle,.header-end{font-size:14px}
 .home .contact-section{min-height:0;padding-top:75px;padding-bottom:75px}
}

/* Contact is a separate, full-height scene after the services sequence. */
.home .services-scroll{margin-bottom:clamp(180px,26svh,340px)}
.home .contact-section{min-height:100svh;scroll-margin-top:0;align-content:center;align-items:center;padding-top:clamp(100px,13svh,180px);padding-bottom:clamp(100px,13svh,180px)}
@media(max-width:760px){
 .home .services-scroll{margin-bottom:clamp(120px,20svh,220px)}
 .home .contact-section{min-height:100svh;scroll-margin-top:0;padding-top:90px;padding-bottom:90px}
}
/* Centred contact form, shared by the homepage and Contact page. */
.contact-form-section{padding:95px 25px 115px;min-height:calc(100svh - 78px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:42px;scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:0}
.contact-form-intro{text-align:center;width:100%;max-width:620px}
.contact-form-intro h2{font-size:clamp(44px,4.5vw,64px)}
.contact-form-intro p{margin:22px auto 0;max-width:43ch}
.contact-form-wrap{width:100%;max-width:650px}
.enquiry-form{display:grid;gap:23px}
.enquiry-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.enquiry-form label{display:block;font-size:14px;margin-bottom:8px}
.enquiry-form input,.enquiry-form textarea,.contact-form-wrap div.wpforms-container .wpforms-field input,.contact-form-wrap div.wpforms-container .wpforms-field textarea{width:100%;max-width:100%;border:1px solid #514e4345;border-radius:0;background:#ffffff65;color:#514e43;font:inherit;padding:12px 14px;box-shadow:none}
.enquiry-form input{height:48px}.enquiry-form textarea{resize:vertical;min-height:135px}
.enquiry-form input:focus,.enquiry-form textarea:focus{outline:1px solid #713737;outline-offset:2px}
.form-actions{text-align:center;margin-top:5px}
.enquiry-form button,.contact-form-wrap div.wpforms-container .wpforms-submit{padding:13px 35px;background:#713737;color:#fff;border:1px solid #713737;border-radius:0;font:inherit;font-size:15px;cursor:pointer}
.enquiry-form button:hover{background:#5e2e2e}
.enquiry-form .form-help{font-size:13px;line-height:1.5;max-width:45ch;margin:16px auto 0}
.contact-form-wrap div.wpforms-container{margin:0;width:100%}
.contact-form-wrap div.wpforms-container .wpforms-submit-container{text-align:center}
.home .contact-form-section{min-height:100svh}
@media(max-width:760px){.contact-form-section{padding:80px 25px;gap:32px}.enquiry-form .form-row{grid-template-columns:1fr;gap:23px}.enquiry-form input,.enquiry-form textarea{font-size:16px}}
/* Contact and the footer share one final screen and one clear entry anchor. */
.contact-form-section,.home .contact-form-section{min-height:calc(100svh - var(--contact-footer-height,180px) - var(--contact-header-height,78px));padding:24px 25px;gap:20px;scroll-margin-top:var(--contact-header-height,78px);scroll-snap-align:start;scroll-snap-stop:always}
.contact-form-intro h2{font-size:44px}
.contact-form-intro p{margin-top:12px;font-size:15px;line-height:1.5}
.enquiry-form{gap:12px}
.enquiry-form label{margin-bottom:5px}
.enquiry-form input{height:40px;padding:8px 12px}
.enquiry-form textarea{height:85px;min-height:85px;padding:8px 12px}
.enquiry-form button{padding:10px 30px}
.enquiry-form .form-help{margin-top:8px}
body:has(.contact-form-section)>footer{padding-top:24px;padding-bottom:24px;gap:5vw}
body:has(.contact-form-section)>footer p{margin:12px 0;line-height:1.6}
body:has(.contact-form-section)>footer small{margin-top:14px}
body:has(.contact-form-section)>footer .footer-brand p{margin-top:18px;margin-bottom:0}
@media(max-width:760px){
 .contact-form-section,.home .contact-form-section{padding:28px 25px;scroll-margin-top:var(--contact-header-height,70px)}
 .enquiry-form .form-row{gap:12px}
 body:has(.contact-form-section)>footer{gap:24px 20px}
}

/* Supporting pages and compact footer navigation. */
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px;font:inherit;font-size:14px;line-height:1.5}
.footer-links a:hover,.info-content a:hover{text-decoration:underline;text-underline-offset:4px}
.info-page{max-width:980px;margin:0 auto;padding:85px 5vw 100px}
.info-page>header{margin-bottom:64px}.info-page>header p{max-width:52ch}
.info-content p{max-width:68ch}.info-content>section{margin:0 0 44px}.info-content h2{font-size:clamp(28px,3vw,38px)}
.faq-item{border-top:1px solid #514e4338}.faq-item:last-of-type{border-bottom:1px solid #514e4338}
.faq-item summary{position:relative;list-style:none;padding:23px 44px 23px 0;cursor:pointer;font:inherit;font-size:18px;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:'+';position:absolute;right:4px;top:23px;font-size:24px;line-height:1}
.faq-item[open] summary:after{content:'−'}.faq-item summary:focus-visible{outline:2px solid #713737;outline-offset:4px}
.faq-item p{margin:0 34px 26px 0}.info-content a{text-decoration:underline;text-underline-offset:4px}.info-crosslink{margin-top:30px}
.official-documents ul{padding-left:20px}.official-documents li{margin:14px 0}.info-contact{border-top:1px solid #514e4338;padding-top:38px;margin-top:64px}.info-contact h2{font-size:32px;margin-bottom:20px}
@media(max-width:760px){.info-page{padding:50px 25px 70px}.info-page>header{margin-bottom:40px}.info-page h1{font-size:46px}.faq-item summary{font-size:16px}.info-contact{margin-top:44px}}

/* Footer order: brand, information, address, contact. */
body>footer{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr);column-gap:4vw}
footer>.footer-links{flex-direction:column;align-items:flex-start;align-self:start;gap:12px;margin:0;min-width:0;font-family:inherit}
@media(max-width:760px){body>footer{grid-template-columns:1fr 1fr}footer>.footer-links{grid-column:1/-1;flex-direction:row;gap:12px 24px}}

/* Our story opens with the studio portrait above the centred introduction. */
.story-lead{padding:72px 5vw 30px}.story-portrait{width:min(46vw,960px);height:auto;margin:0 auto 55px;object-fit:contain}
.story-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.story-images img{width:100%;height:410px;margin:0;object-fit:cover}
@media(max-width:760px){.story-lead{padding:45px 25px 10px}.story-portrait{width:100%;max-width:620px;margin-bottom:36px}.story-images img{height:300px}}

/* Three anchored chapters on Our story. */
html.story-snap{scroll-snap-type:y proximity;scroll-padding-top:78px}
.story-lead,.story-body,.principles{scroll-margin-top:78px;scroll-snap-align:start;scroll-snap-stop:always}
.story-lead{padding-bottom:100px}
.principles{background:#713737;color:#f0e9db;padding:40px 0 45px;min-height:65svh;display:flex;flex-direction:column;justify-content:center}
.principles>h2{text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;padding:0 25px 45px;font-size:clamp(34px,3.1vw,50px)}
.principle-grid{padding-top:0;padding-bottom:0}.principle-grid h3 em{font-style:italic}
.story-body{min-height:calc(100svh - 78px);padding-top:110px;padding-bottom:110px}
html.story-snap .contact-form-section{scroll-snap-align:start;scroll-snap-stop:always}
html.story-snap body>footer{scroll-snap-align:end;scroll-snap-stop:normal}
@media(max-width:760px){html.story-snap{scroll-padding-top:70px}.story-lead,.story-body,.principles{scroll-margin-top:70px}.story-lead{padding-bottom:70px}.principles{min-height:0;padding:40px 0}.principles>h2{padding-bottom:20px}.story-body{min-height:0;padding-top:70px;padding-bottom:70px}}

/* Align both photographs with the body copy rather than the heading. */
@media(min-width:761px){
.story-body{align-items:start;align-content:center;row-gap:24px}
.story-body>div:first-child{display:contents}
.story-body h2{grid-column:1;grid-row:1;max-width:500px}
.story-body p{grid-column:1;grid-row:2;margin:0;max-width:39ch}
.story-body .story-images{grid-column:2;grid-row:2;align-self:start}
}

/* Enlarge the paired studio images by 1.5 while retaining body-copy alignment. */
@media(min-width:761px){
.story-body{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}
.story-body h2{grid-column:1/-1}
.story-body .story-images{gap:36px}
.story-body .story-images img{height:615px}
}
@media(max-width:760px){.story-body .story-images img{height:450px}}

.story-copy .text-link{margin-top:24px}
@media(min-width:761px){.story-body .story-copy{grid-column:1;grid-row:2;max-width:39ch}.story-body .story-copy p{margin:0}}

/* Extension page follows the supplied composition and Our story typography. */
.extension-lead,.extension-help{align-items:start;gap:9vw;padding:110px 5vw;min-height:calc(100svh - 78px)}
.extension-lead h1,.extension-help h2{font-size:clamp(34px,3.1vw,50px);line-height:1.08;letter-spacing:-.025em}
.extension-lead .extension-intro-copy{margin-top:80px}
.extension-lead>img,.extension-help>img{height:clamp(440px,46vw,690px);width:100%;object-fit:cover}
.extension-lead p,.extension-help p{font-size:inherit;max-width:39ch}
.extension-lead .extension-intro-copy p:first-child{margin-top:0}
.extension-rules{background:#304d37;color:#f0e9db;padding:55px 5vw 65px}
.extension-rules>h2{text-align:center;margin-bottom:50px}
.extension-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7vw}
.extension-rule-grid article{text-align:center;min-width:0}
.extension-rule-grid .number{margin-bottom:24px}
.extension-rule-grid h3{font-size:34px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.extension-rule-grid p{text-align:left;margin:28px auto 0;font-size:inherit;max-width:36ch}
.extension-source{display:block;width:fit-content;margin:38px auto 0;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.extension-help h2{margin-bottom:55px}
.extension-related{padding:20px 5vw 100px}
.extension-related>h2{margin-bottom:40px}
.extension-lead,.extension-rules,.extension-help{scroll-margin-top:78px}
@media(max-width:1050px){.extension-lead,.extension-help{gap:6vw}.extension-rule-grid{gap:4vw}}
@media(max-width:760px){.extension-lead,.extension-help{min-height:0;padding:65px 25px;gap:38px}.extension-lead .extension-intro-copy{margin-top:36px}.extension-lead>img,.extension-help>img{height:440px;max-height:65svh}.extension-help>img{order:1}.extension-help h2{margin-bottom:30px}.extension-rules{padding:45px 25px}.extension-rules>h2{margin-bottom:35px}.extension-rule-grid{grid-template-columns:1fr;gap:40px}.extension-rule-grid p{max-width:39ch}.extension-related{padding:20px 25px 65px}}

/* Five comfortable scroll stops on the extension page. */
html.extension-snap{scroll-snap-type:y proximity;scroll-padding-top:0}
.extension-lead,.extension-rules,.extension-help,.extension-related{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:78px;min-height:calc(100svh - 78px)}
.extension-lead,.extension-help{padding-top:clamp(60px,9svh,110px);padding-bottom:clamp(60px,9svh,110px);align-content:center}
.extension-lead>img,.extension-help>img{height:clamp(360px,64svh,690px)}
.extension-rules{display:flex;flex-direction:column;justify-content:center;padding-top:clamp(55px,8svh,85px);padding-bottom:clamp(55px,8svh,85px)}
.extension-related{display:flex;flex-direction:column;justify-content:center;padding-top:80px;padding-bottom:80px}
html.extension-snap .contact-form-section{scroll-snap-align:start;scroll-snap-stop:always}
html.extension-snap body>footer{scroll-snap-align:end;scroll-snap-stop:normal}
@media(max-width:760px){.extension-lead,.extension-rules,.extension-help,.extension-related{min-height:0;scroll-margin-top:70px;scroll-snap-stop:normal}.extension-lead,.extension-help{padding-top:65px;padding-bottom:65px}.extension-rules{padding-top:55px;padding-bottom:55px}.extension-related{padding-top:65px;padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){html.extension-snap{scroll-behavior:auto}}

/* Bring the project selection and contact together. */
.extension-related{min-height:0;padding-bottom:64px;justify-content:flex-start}
.extension-related+.contact-form-section{justify-content:flex-start;padding-top:64px}
@media(max-width:760px){.extension-related{padding-bottom:44px}.extension-related+.contact-form-section{padding-top:44px}}

/* The renovation process shares the extension page's green screen. */
.renovation-process>h2{margin-bottom:20px}
.renovation-process .process-intro{text-align:center;max-width:60ch;margin:0 auto 48px}
.renovation-process .extension-rule-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4vw}
.renovation-process .extension-rule-grid h3{font-size:34px;hyphens:auto}
@media(min-width:761px) and (max-width:1050px){.renovation-process .extension-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
@media(max-width:760px){.renovation-process .extension-rule-grid{grid-template-columns:1fr;gap:40px}.renovation-process .process-intro{margin-bottom:35px}}

/* Full viewport colour chapters, including their own accessible overflow on small screens. */
html.extension-snap{scroll-padding-top:0}
html.extension-snap .extension-rules{height:100dvh;min-height:100dvh;max-height:100dvh;scroll-margin-top:0;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;padding:90px 5vw 40px;justify-content:safe center}
.extension-rules>h2{flex-shrink:0}
.extension-rules .extension-rule-grid{flex-shrink:0}
.extension-rules .band-next{display:block;flex-shrink:0;width:fit-content;margin:30px auto 0;text-decoration:underline;text-underline-offset:5px;font-size:14px}
@media(max-width:760px){html.extension-snap .extension-rules{padding:86px 25px 35px}.extension-rules .extension-rule-grid,.renovation-process .extension-rule-grid{grid-template-columns:1fr;gap:30px}.extension-rules>h2{margin-bottom:24px}.renovation-process .process-intro{margin-bottom:28px}}

/* Shared typography for all pages. */
:root{--font-body:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;--font-heading:Cormorant,Georgia,serif;--text:#514e43;--text-inverse:#f0e9db;--heading-size:clamp(34px,3.1vw,50px);--subheading-size:clamp(27px,2.2vw,34px);--navy:#203746}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text)}
body main h1,body main h2{font-family:var(--font-heading);font-size:var(--heading-size);font-weight:400;line-height:1.08;letter-spacing:-.025em;color:inherit}
body main h3,body main .extension-rule-grid h3,body main .service-copy h3{font-family:var(--font-heading);font-size:var(--subheading-size);font-weight:400;line-height:1.15;letter-spacing:-.015em;color:inherit}
body main p,body main .principle-grid p,body main .extension-rule-grid p{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:inherit}
body main .principle-grid h3 em{font-size:1.5rem;line-height:1.25}
body a,body a h1,body a h2,body a h3,body a span,body main a,body main a h3{font-family:var(--font-body)}
body .text-link,body .phone,body .landing-scroll,body .extension-source,body .extension-rules .band-next{font-size:1rem;line-height:1.5;font-weight:400;letter-spacing:0}
body .header{color:var(--text)}
body .header nav,body .header-end,body .header .dropdown-toggle,body .header .mobile-toggle,body .header .dropdown-panel{font-family:var(--font-body);font-size:1rem}
body .brand{font-size:clamp(16px,1.5vw,22px);letter-spacing:-.025em}
body main .portfolio-grid .card h3{font-family:var(--font-body);color:var(--text-inverse);font-size:var(--subheading-size)}
body main .project-caption,body .landing-scroll,body .contact-image{color:var(--text-inverse)}
body .principles,body .principle-grid,body .extension-rules,body>footer{color:var(--text-inverse)}
body>footer,body>footer p,body>footer h2,body>footer .footer-brand p,body>footer .footer-links{font-family:var(--font-body);font-size:.875rem;line-height:1.6}
body>footer small,body main .eyebrow,body main .enquiry-form .form-help{font-family:var(--font-body);font-size:.8125rem;line-height:1.5}
body .footer-brand>a{font-family:var(--font-body)}
body .extension-rules.band-navy{background:var(--navy)}
html.story-snap{scroll-padding-top:0}
html.story-snap .principles{height:100dvh;min-height:100dvh;max-height:100dvh;scroll-margin-top:0;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;padding:90px 0 40px;justify-content:safe center}
.principles>h2,.principles>.principle-grid{flex-shrink:0}
.band-scroll-fade{opacity:var(--band-opacity,1);will-change:opacity}
.band-scroll-fade:focus-within{opacity:1}
@media(max-width:760px){html.story-snap .principles{padding-top:86px;padding-bottom:35px}body .header-end,body .header .mobile-toggle{font-size:.875rem}body .brand{max-width:190px}body .header nav,body .header .dropdown-toggle{font-size:1.125rem}}
@media(prefers-reduced-motion:reduce){.band-scroll-fade{opacity:1;will-change:auto}}

/* Explicit link typography, with the footer wordmark as the serif exception. */
body a,body a *,body .text-link,body main .text-link{font-family:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif!important}
body .footer-brand>a,body .footer-brand>a *{font-family:Cormorant,Georgia,serif!important}
.band-contact{display:block;flex-shrink:0;width:fit-content;margin:36px auto 0;text-align:center}

/* Compact scenes and a consistent project-caption scale. */
body>footer{background:#642b30}
body .header .brand{font-family:var(--font-body)!important}
body main .blog-list h2,body main .blog-list h2 a,body main .article h1{font-family:Cormorant,Georgia,serif!important}
body main .portfolio-grid .card h3,body main .related .card h3{font-size:clamp(16.2px,1.32vw,20.4px)}
body .home .services-scroll,.home .services-scroll{margin-top:24px;margin-bottom:24px}
.home .intro{padding-top:60px;padding-bottom:60px;min-height:calc(100dvh - 78px)}
.home .project-stage{height:115dvh}
.story-lead{padding-top:45px;padding-bottom:45px}
.story-portrait{margin-bottom:32px}
.story-body,.extension-lead,.extension-help{padding-top:45px;padding-bottom:45px}
.extension-lead .extension-intro-copy{margin-top:40px}
.extension-help h2{margin-bottom:30px}
.extension-related{padding-top:40px;padding-bottom:35px}
.extension-related+.contact-form-section{padding-top:35px}
@media(min-width:761px){
 .story-body{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);align-items:start}
 .story-body>div:first-child{display:block;grid-column:1;grid-row:1}
 .story-body h2{margin-bottom:24px}
 .story-body .story-images{grid-column:2;grid-row:1;align-self:start}
 .extension-rule-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .renovation-process .extension-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 6vw}
 .extension-rule-grid .number{margin-bottom:10px}
 .extension-rule-grid p{margin-top:16px;max-width:48ch}
 .renovation-process .process-intro{margin-bottom:24px}
 .extension-rules .band-contact{margin-top:24px}
}
@media(max-width:760px){.home .services-scroll{margin:20px 0}.story-body,.extension-lead,.extension-help{padding-top:35px;padding-bottom:35px}.extension-related{padding-top:30px;padding-bottom:25px}}
.scene-fade{opacity:var(--scene-opacity,1);will-change:opacity}
.scene-fade:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.scene-fade{opacity:1;will-change:auto}}

body .header a.brand{font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif!important;font-weight:400;letter-spacing:0}

body .header a.brand,body .header a.brand *{font-family:Cormorant,Georgia,serif!important;font-weight:400;letter-spacing:-.025em}

/* One visible title spans the landing photograph and the introduction. */
.home .intro h1.journey-title-source, .project-page .project-story h1.journey-title-source{opacity:0!important}
.home .journey-title, .project-page .journey-title{position:fixed;z-index:35;margin:0;padding:0;border:0;pointer-events:none;color:#fff;white-space:normal;box-sizing:border-box}
.home .journey-title[hidden], .project-page .journey-title[hidden]{display:none!important}

/* Short page introductions stay readable; they are not full-screen fade scenes. */
body main>.page-top{opacity:1!important;will-change:auto}

/* Team portraits left, introduction right, aligned at the top. */
.team-screen{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:7vw;align-items:start;align-content:center;min-height:calc(100dvh - 78px);padding:45px 5vw;scroll-margin-top:78px;scroll-snap-align:start;scroll-snap-stop:always}
.team-portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.team-portraits img{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover}
.team-portraits .team-portrait-left{object-position:left center}
.team-portraits .team-portrait-right{object-position:right center}
.team-copy h2{margin-bottom:24px}.team-copy p{max-width:39ch}.team-copy p:first-of-type{margin-top:0}
@media(max-width:760px){.team-screen{grid-template-columns:1fr;gap:32px;padding:35px 25px;min-height:calc(100dvh - 70px);scroll-margin-top:70px}.team-portraits{gap:16px}.team-copy p{max-width:none}}

/* Centre the project images themselves within a complete, ruled screen. */
body main .extension-related,body main .related{
 position:relative;display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(90px,1fr) auto minmax(90px,1fr);
 min-height:100dvh;padding:40px 5vw;margin:0;gap:0;
 scroll-margin-top:0;scroll-snap-align:start;scroll-snap-stop:always;
}
body main .extension-related>h2,body main .related>h2{grid-row:1;align-self:end;margin:0 0 32px}
body main .extension-related>.cards,body main .related>.cards{grid-row:2;width:100%;align-self:center}
body main .extension-related::before,body main .extension-related::after,
body main .related::before,body main .related::after{content:'';position:absolute;left:5vw;right:5vw;height:1px;background:#514e4355;pointer-events:none}
body main .extension-related::before,body main .related::before{top:0}
body main .extension-related::after,body main .related::after{bottom:0}
@media(max-width:760px){
 body main .extension-related,body main .related{padding:28px 25px;grid-template-rows:minmax(76px,1fr) auto minmax(76px,1fr)}
 body main .extension-related>h2,body main .related>h2{margin-bottom:24px}
 body main .extension-related::before,body main .extension-related::after,body main .related::before,body main .related::after{left:25px;right:25px}
}

/* Give the two-paragraph mission a comfortable reading width. */
.home .intro p{max-width:54ch}

/* Clear hover feedback and direct footer contact actions. */
body .header a.brand:hover,body .header a.brand:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
body>footer .footer-action{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
body>footer a[href^="tel:"]:hover,body>footer a[href^="mailto:"]:hover{text-decoration:underline;text-underline-offset:4px}

.team-portraits.team-photo{display:block}.team-portraits.team-photo img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

/* Show the complete personal-involvement images, higher in the screen. */
body main .story-body{align-content:start;align-items:start;padding-top:24px}
body main .story-body .story-images{align-self:start;align-items:start}
body main .story-body .story-images img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center top;margin-top:0}
@media(min-width:761px){body main .story-body>div:first-child{grid-column:1;grid-row:1}body main .story-body .story-images{grid-column:2;grid-row:1}}
@media(max-width:760px){body main .story-body{padding-top:24px}}

/* Longer studio story introduction. */
.story-lead p{max-width:66ch}

/* Give the principle copy more room without changing typography. */
body main .principle-grid p{max-width:42ch}
@media(min-width:761px){body main .principle-grid article{padding-left:1.5vw;padding-right:1.5vw}}

/* Share heading rows across the three principles, including wrapped text. */
@media(min-width:761px){
 body main .principle-grid{grid-template-rows:auto auto auto;align-items:stretch}
 body main .principle-grid article{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
 body main .principle-grid h3{display:flex;flex-direction:column;justify-content:space-between}
 body main .principle-grid h3 em{margin-top:.2em}
 body main .principle-grid p{align-self:start}
}

/* Single-page project stories, following the supplied artboard compositions. */
body.project-page main{padding-top:0}
.project-landing{position:relative;height:100svh;min-height:520px;scroll-snap-align:start;scroll-margin-top:0;overflow:hidden}
.project-landing>img{width:100%;height:100%;object-fit:cover}
.project-landing:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 70%);pointer-events:none}
.project-scroll{position:absolute;right:5vw;bottom:35px;z-index:1;color:white}
.project-story{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:7vw;align-items:center;min-height:100svh;padding:60px 5vw;scroll-snap-align:start;scroll-margin-top:0}
.project-story-copy h1{max-width:15ch;margin:0 0 28px}
.project-story-copy p{max-width:46ch;margin:0 0 24px}
.project-story-image{max-height:calc(100svh - 170px);width:100%;height:auto;object-fit:contain;object-position:top right}
.project-image-screen{min-height:100svh;padding:65px 5vw;display:flex;align-items:center;scroll-snap-align:start;scroll-margin-top:0}
.project-image-screen img{width:auto;max-width:78%;height:auto;max-height:calc(100svh - 130px);object-fit:contain}
.project-image-screen.image-left{justify-content:flex-start}
.project-image-screen.image-right{justify-content:flex-end}
.project-return{text-align:center;padding:30px 5vw}
body main .project-story .editor-content{max-width:none}
@media(max-width:760px){
 .project-landing{min-height:480px}
 .project-story{grid-template-columns:1fr;gap:32px;padding:60px 25px;min-height:100svh}
 .project-story-copy h1{font-size:clamp(34px,8vw,46px);max-width:17ch}
 .project-story-image{max-height:68svh;max-width:100%;justify-self:end}
 .project-image-screen{padding:50px 25px;min-height:85svh}
 .project-image-screen img{max-width:100%;max-height:75svh}
 .project-scroll{right:25px}
}

html.project-snap{scroll-snap-type:y proximity;scroll-padding-top:0}
body.project-page .project-story{scroll-margin-top:0}

/* Responsive homepage hero uses the supplied mobile composition. */
.landing>picture{display:block;width:100%;height:100%;position:absolute;inset:0}.landing>picture>img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.landing>picture>img{object-position:center}}

.project-landing>picture{display:block;width:100%;height:100%}.project-landing>picture>img{display:block;width:100%;height:100%;object-fit:cover}

/* Centre the title and description as one block; the landing title follows its measured position. */
.project-story-copy .editor-content>p:last-child{margin-bottom:0}
@media(max-width:760px){.project-story-copy{min-height:calc(100svh - 120px);display:flex;flex-direction:column;justify-content:center}}

/* Precisely aligned image pair beside project copy. */
.project-story-toggle{display:grid;grid-template-areas:"image";width:100%;aspect-ratio:3/4;max-height:calc(100svh - 170px);padding:0;border:0;background:transparent;cursor:pointer;align-self:center;overflow:hidden}
.project-story-toggle img{grid-area:image;width:100%;height:100%;min-height:0;object-fit:contain;object-position:center;opacity:0;pointer-events:none}
.project-story-toggle img.is-active{opacity:1}
.project-story-toggle:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:760px){.project-story-toggle{max-height:68svh}}

/* Registered kitchen pair: keep the unchanged reference outside the open niche. */
.project-story-toggle:has(img[src*="less-is-more-open-aligned-v2"]){width:min(100%,calc((100svh - 170px)*.75));max-height:none;justify-self:center}
.project-story-toggle:has(img[src*="less-is-more-open-aligned-v2"]) img:first-child{opacity:1}
.project-story-toggle img[src*="less-is-more-open-aligned-v2"]{clip-path:inset(18.3% 36.7% 55.5% 36.7%)}
@media(max-width:760px){.project-story-toggle:has(img[src*="less-is-more-open-aligned-v2"]){width:min(100%,51svh);max-height:none}}

.project-story-toggle:has(img[src*="classic-contemporary-open"]){aspect-ratio:1299/1211;width:min(100%,calc((100svh - 170px)*1.072667));max-height:none;justify-self:center}
@media(max-width:760px){.project-story-toggle:has(img[src*="classic-contemporary-open"]){width:min(100%,73svh)}}

/* Keep the fixed surroundings registered when the doors open. */
.project-story-toggle:has(img[src*="classic-contemporary-open"]) img:first-child{opacity:1}
.project-story-toggle img[src*="classic-contemporary-open"]{clip-path:polygon(10.8% 23.5%,26.8% 21%,55.2% 11.7%,75.5% 7%,75.5% 79.7%,55.2% 76.2%,26.8% 70%,10.8% 68.5%)}

/* Project thumbnail captions: white serif title and sans-serif summary, top left. */
body main .cards .card{position:relative;display:block;padding:0;overflow:hidden}
body main .cards .card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0005,transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
body main .cards .card .project-card-copy{position:absolute;z-index:2;top:24px;left:28px;right:28px;color:#fff;opacity:0;transition:opacity .3s;pointer-events:none;text-align:left}
body main .cards .card .project-card-copy h3{position:static;transform:none;margin:0 0 8px;padding:0;opacity:1;color:#fff;font-family:Cormorant,Georgia,serif!important;font-size:clamp(28px,2.5vw,48px);line-height:1.05;letter-spacing:-.02em;text-align:left;text-shadow:0 1px 12px #0002}
body main .cards .card .project-card-subtitle{font-family:var(--font-body);font-size:1rem;line-height:1.6;margin:0;max-width:40ch;color:#fff;text-shadow:0 1px 12px #0002}
body main .cards .card:hover .project-card-copy,body main .cards .card:focus-visible .project-card-copy,body main .cards .card:hover:after,body main .cards .card:focus-visible:after{opacity:1}
.project-hero-subtitle{position:absolute;left:5vw;top:55%;z-index:2;color:#fff;max-width:40ch;margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.6;text-shadow:0 1px 14px #0003;pointer-events:none}
body.project-page .project-hero-subtitle.journey-subtitle{position:fixed;z-index:35;margin:0;max-width:none;will-change:opacity}
.project-hero-subtitle[hidden]{display:none!important}
@media(hover:none),(max-width:760px){body main .cards .card .project-card-copy,body main .cards .card:after{opacity:1}body main .cards .card .project-card-copy{top:18px;left:20px;right:20px}body main .cards .card .project-card-copy h3{font-size:30px}body main .cards .card .project-card-subtitle{font-size:1rem}}
@media(prefers-reduced-motion:reduce){body main .cards .card .project-card-copy,body main .cards .card:after{transition:none}}

/* Match the project description screen: full photograph, generous image column. */
body.home .intro{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:7vw;min-height:100svh;padding:60px 5vw;align-items:center}
body.home .intro>img{width:100%;height:auto;min-height:0;max-height:calc(100svh - 170px);object-fit:contain;object-position:top right;justify-self:end}
@media(max-width:760px){body.home .intro{grid-template-columns:1fr;gap:32px;padding:60px 25px}body.home .intro>img{max-height:68svh;max-width:100%}}

/* Align the full-height introduction and its title handoff with the viewport. */
body.home .intro{scroll-margin-top:0;scroll-snap-align:start}

/* Preserve the complete uploaded extension photograph. */
#maatwerk-uitbouw>img{height:auto;min-height:0;max-height:calc(100svh - 150px);object-fit:contain;object-position:right center;align-self:center}
@media(max-width:760px){#maatwerk-uitbouw>img{max-height:65svh}}

/* Fit renovation photographs within their screens, preserving the complete images. */
body main .renovation-lead,body main .renovation-help{align-items:center}
body main .renovation-lead>img,body main .renovation-help>img{display:block;width:100%;height:auto;min-height:0;max-height:calc(100svh - 150px);object-fit:contain;object-position:center;align-self:center}
@media(max-width:760px){body main .renovation-lead>img,body main .renovation-help>img{height:auto;max-height:65svh}}

/* Renovation stages follow the principles layout from Ons verhaal. */
.renovation-process-compact .extension-rule-grid{width:100%;max-width:1280px;margin:0 auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.renovation-process-compact .extension-rule-grid article{padding:0 1.5vw;text-align:center}
.renovation-process-compact .extension-rule-grid article+article{border-left:1px solid #ffffff22}
.renovation-process-compact .extension-rule-grid h3{font-size:28px;line-height:1.15}
.renovation-process-compact .extension-rule-grid p{max-width:42ch;margin:30px auto 0}
.renovation-process-compact .band-contact{margin:36px auto 0}
@media(min-width:761px){.renovation-process-compact .extension-rule-grid{grid-template-rows:auto auto auto;align-items:stretch}.renovation-process-compact .extension-rule-grid article{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}.renovation-process-compact .extension-rule-grid p{align-self:start}}
@media(min-width:761px) and (max-width:1050px){.renovation-process-compact .extension-rule-grid{max-width:850px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.renovation-process-compact .extension-rule-grid article:nth-child(3){border-left:0}}
@media(max-width:760px){.renovation-process-compact .extension-rule-grid{max-width:42ch;grid-template-columns:1fr;gap:0}.renovation-process-compact .extension-rule-grid article{padding:35px 10px}.renovation-process-compact .extension-rule-grid article+article{border-left:0;border-top:1px solid #ffffff22}.renovation-process-compact .extension-rule-grid h3{font-size:35px}.renovation-process-compact .extension-rule-grid p{margin-top:20px}}

.renovation-process-compact .extension-rule-grid h3{display:flex;flex-direction:column;justify-content:space-between}
.renovation-process-compact .extension-rule-grid h3 em{display:block;font-size:1.5rem;line-height:1.25;font-style:italic;font-weight:400;margin-top:.2em}

/* Subject process bands share the extension page's typography and centered composition. */
.opgave-process-styled .extension-rule-grid{width:100%;max-width:1280px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 0}
.opgave-process-styled .extension-rule-grid article{padding:0 clamp(24px,4vw,64px);text-align:center}
.opgave-process-styled .extension-rule-grid article:nth-child(even){border-left:1px solid #ffffff22}
.opgave-process-styled .extension-rule-grid h3{min-height:2.3em;display:flex;align-items:center;justify-content:center;hyphens:none}
.opgave-process-styled .extension-rule-grid p{text-align:center;max-width:42ch;margin:20px auto 0}
.opgave-process-styled .band-contact{align-self:center;margin:36px auto 0}
@media(max-width:760px){.opgave-process-styled .extension-rule-grid{grid-template-columns:1fr;max-width:42ch;gap:0}.opgave-process-styled .extension-rule-grid article{padding:28px 0}.opgave-process-styled .extension-rule-grid article:nth-child(even){border-left:0}.opgave-process-styled .extension-rule-grid article+article{border-top:1px solid #ffffff22}.opgave-process-styled .extension-rule-grid h3{min-height:0}}

/* Reuse the actual Onze principes grid for the extension process. */
body main .extension-principles{padding-left:0;padding-right:0}
body main .extension-principles>h2{margin-bottom:0}
body main .extension-principles .principle-grid{background:transparent}
html.extension-snap .extension-rules.extension-principles{padding-left:0;padding-right:0}

/* Four phases share one desktop row and the original principles styling. */
@media(min-width:761px){body main .principle-grid-four{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}}

/* Keep complete subject-page photographs visible at their original proportions. */
body main .extension-lead>img,body main .extension-help>img{display:block;width:100%;height:auto;min-height:0;max-height:calc(100svh - 150px);aspect-ratio:auto;object-fit:contain;object-position:center;align-self:center}
@media(max-width:760px){body main .extension-lead>img,body main .extension-help>img{height:auto;max-height:65svh}}

/* Contact follows Blog in the expanded mobile navigation. */
.service-faq{max-width:900px;margin:0 auto;padding:5rem 5vw;min-height:0!important}.service-faq h2{font-size:clamp(1.8rem,3vw,2.8rem)}.service-faq p{line-height:1.7;max-width:70ch}.service-faq .info-crosslink a{text-decoration:underline;text-underline-offset:4px}.service-faq>.text-link,.project-contact-cta{margin-top:2rem}.card:focus-visible .project-card-copy{opacity:1!important}.card:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:380px){.header{padding-left:12px;padding-right:12px;gap:8px}.header .brand{font-size:21px}.header-end{gap:6px}.languages{gap:4px}}
.header nav .mobile-contact-link{display:none}
@media(max-width:760px){.header nav .mobile-contact-link{display:block}}

footer .footer-instagram{display:flex;align-items:center;gap:10px;margin:20px 0;font-family:Arial,Helvetica,sans-serif;font-size:inherit;color:inherit}footer a.footer-instagram{text-decoration:underline;text-underline-offset:4px}footer .footer-instagram svg{flex-shrink:0}

/* Compact project facts, based on confirmed project copy. */
.project-facts{margin:30px 0 0;padding:0;border-top:1px solid #514e4333;font-size:14px;line-height:1.55;max-width:48ch}
.project-facts>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid #514e4322}
.project-facts dt{font-weight:500}.project-facts dd{margin:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){.project-facts{max-width:none}.project-facts>div{grid-template-columns:95px minmax(0,1fr);gap:12px}}

/* User-supplied mobile project compositions; desktop images remain the fallback. */
.project-frame>picture.project-photo-source{display:block;position:absolute;inset:0}
@media(max-width:760px){.project-photo-source>.project-photo{object-position:center}}
.extension-principles>.process-intro{max-width:64ch;margin:0 auto 30px;padding:0 24px;text-align:center}

/* Phones use a single native document scroll and stable viewport-sized photographs. */
@media(max-width:760px){
 html,html.home-snap,html.story-snap,html.extension-snap,html.project-snap{
  scroll-snap-type:none;scroll-padding-top:82px;scroll-padding-bottom:0;
 }
 body main [id]{scroll-margin-top:0!important;scroll-snap-stop:normal}
 body.home main .service-chapter[id]{scroll-margin-top:var(--mobile-service-menu-height,120px)!important}
 .landing,.project-landing{height:100svh;min-height:0}
 body.home .project-stage{height:100svh;min-height:0;margin:0;overflow:hidden}
 .project-stage .project-frame{height:100%;position:relative;top:auto}
 .project-stage .project-photo{height:100%;top:0;object-position:center;transform:none!important;opacity:1!important;will-change:auto}
 .project-stage .project-caption{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;padding:88px 25px 40px;opacity:1!important;will-change:auto}
 body main .project-caption h2{font-size:clamp(34px,10.8vw,46px);max-width:none;overflow-wrap:break-word}
 .project-caption .text-link{align-self:flex-start}
 .home .services-scroll{height:auto;margin:24px 0;padding:0 25px 32px}
 .home .services-sticky{display:block;position:relative;height:auto}
 .home .service-menu{position:sticky;top:70px;background:#f0efe6;z-index:4;transition:top .32s cubic-bezier(.22,.61,.36,1)}
 .home:has(>.header.is-hidden) .service-menu{top:0}
 .home .service-chapter{opacity:1;min-height:0}
 html.extension-snap .extension-rules,html.story-snap .principles{
  height:auto;min-height:100svh;max-height:none;overflow:visible;justify-content:flex-start;
 }
 .team-screen{min-height:calc(100svh - 70px)}
 body main .extension-related,body main .related{min-height:100svh}
 .scene-fade{opacity:1;will-change:auto}
}
@media(max-width:760px) and (max-height:520px){
 body.home .project-stage{height:auto;min-height:100svh}
 .project-stage .project-frame{height:auto;min-height:100svh}
 .project-stage .project-caption{height:auto;min-height:100svh;padding-top:80px;padding-bottom:30px}
}

/* Content photographs keep their own proportions and share a centred mobile axis. */
@media(max-width:760px){
 body main .cards .card .project-card-subtitle,
 .project-hero-subtitle,
 .project-caption>p{display:none!important}
}

@media(max-width:760px){
 body.project-page .project-image-screen{
  min-height:0;height:auto;padding:20px 25px;justify-content:center;align-items:center;
 }
 body.project-page .project-image-screen>img,
 body.project-page .project-story>img{
  display:block;width:auto;height:auto;min-height:0;max-width:100%;max-height:calc(100svh - 110px);
  margin:0 auto;object-fit:contain;object-position:center;align-self:center;justify-self:center;
 }
 body.home .intro>img,
 body main .extension-lead>img,
 body main .extension-help>img,
 body #maatwerk-uitbouw>img{
  display:block;width:auto;height:auto;min-height:0;max-width:100%;max-height:calc(100svh - 110px);
  margin-left:auto;margin-right:auto;object-fit:contain;object-position:center;align-self:center;justify-self:center;
 }
 .home .service-chapter>img{
  display:block;width:auto;height:auto;min-height:0;max-width:100%;
  max-height:calc(100svh - var(--mobile-service-menu-height,120px) - 94px);
  flex:none;object-fit:contain;object-position:center;align-self:center;margin:0 auto;
 }
}
/* Direct access to assignment-page questions, using the existing page scroll offset. */
.service-quick-links{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.service-faq{scroll-snap-align:start;scroll-snap-stop:normal}
.service-faq .faq-item:target summary{font-weight:500}
/* Footer supplied by the studio: wordmark left, three compact columns right. */
body>footer,body:has(.contact-form-section)>footer{
 display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
 gap:40px;padding:22px 2.8vw 38px;background:#642b30;
 border:1px solid #f0e9db44;border-top:0;border-radius:0 0 24px 24px;
}
body>footer .footer-brand{grid-column:auto;min-width:0}
body>footer .footer-brand .footer-wordmark{display:inline-flex;flex-direction:column;font-size:36px;line-height:.88;letter-spacing:-.04em;font-weight:400}
body>footer .footer-wordmark span{font-size:inherit;line-height:inherit}
body>footer .footer-wordmark-bottom{display:flex;gap:15px;margin-top:2px}
body>footer .footer-brand p,body:has(.contact-form-section)>footer .footer-brand p{margin:17px 0 0;max-width:none}
body>footer .footer-brand small,body:has(.contact-form-section)>footer .footer-brand small{margin-top:23px}
body>footer .footer-columns{display:grid;grid-template-columns:repeat(3,auto);justify-self:end;align-self:start;margin-top:24px}
body>footer .footer-column{min-width:0;padding:0 30px;align-self:stretch}
body>footer .footer-column:first-child{padding-left:0}
body>footer .footer-column:last-child{padding-right:0}
body>footer .footer-column+.footer-column{border-left:1px solid #f0e9db66}
body>footer .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;white-space:nowrap}
body>footer .footer-instagram{margin:3px 0 0;gap:10px;font:inherit;text-decoration:none}
body>footer .footer-instagram svg{width:17px;height:17px}
body>footer .footer-column p,body:has(.contact-form-section)>footer .footer-column p{margin:12px 0 0;line-height:1.6}
body>footer .footer-column h2{margin:0;white-space:nowrap}
@media(min-width:761px) and (max-width:1100px){
 body>footer,body:has(.contact-form-section)>footer{gap:25px;padding-left:25px;padding-right:25px}
 body>footer .footer-column{padding-left:18px;padding-right:18px}
 body>footer .footer-links{white-space:normal}
}
@media(max-width:760px){
 body>footer,body:has(.contact-form-section)>footer{grid-template-columns:1fr;gap:30px;padding:30px 25px 36px;border-radius:0 0 20px 20px}
 body>footer .footer-columns{grid-template-columns:minmax(0,1fr);justify-self:stretch;margin-top:0}
 body>footer .footer-column,body>footer .footer-column:first-child,body>footer .footer-column:last-child{padding:22px 0;border-left:0}
 body>footer .footer-column:first-child{border-top:1px solid #f0e9db66}
 body>footer .footer-column+.footer-column{border-left:0;border-top:1px solid #f0e9db66}
 body>footer .footer-column:last-child{padding-bottom:0}
 body>footer .footer-brand small,body:has(.contact-form-section)>footer .footer-brand small{margin-top:20px}
}
/* Match the site background across the full header, without a divider. */
body > .header,
body > .header nav,
body > .header .dropdown-panel{
 background:#f0efe6;
 box-shadow:none;
 border:0;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
/* Contact reference: left-aligned copy and more space before the form. */
.contact-form-section,.home .contact-form-section{gap:80px}
.contact-form-intro p{max-width:500px;text-align:left;margin:20px auto 0}
.contact-form-intro p+p{margin-top:16px}
.contact-form-intro p a:hover,.contact-form-intro p a:focus-visible{text-decoration:underline}
@media(max-width:760px){
 .contact-form-section,.home .contact-form-section{gap:40px}
 .contact-form-intro p{max-width:100%}
}
/* Project titles share one anchor; story length cannot shift the opening title. */
body.project-page .project-story{align-items:start;padding-top:var(--project-title-anchor,max(128px,28svh))}
body.project-page .project-story-image,
body.project-page .project-story-toggle{max-height:calc(100svh - var(--project-title-anchor,max(128px,28svh)) - 60px)}
/* FAQ fragments use one header offset and stay fully legible at every block height. */
html.faq-anchor-active{scroll-snap-type:none!important;scroll-padding-top:var(--faq-anchor-offset,90px)!important}
body main .service-faq,body main .service-faq .faq-item{scroll-margin-top:0!important}
body main .service-faq{opacity:1!important;will-change:auto}
/* Keep desktop assignment navigation readable when the full pinned layout cannot fit. */
@media(min-width:761px){
 .home .service-menu nav{height:auto;min-height:min-content;flex-shrink:0}
 .home .service-menu nav a{display:block;flex:0 0 auto;line-height:1.4}
 .home .service-copy h3{max-width:none}
 .home .service-copy p{max-width:60ch}
 .home .services-scroll:not(.is-pinned){display:block}
 .home .services-scroll:not(.is-pinned) .services-sticky{display:block}
 .home .services-scroll:not(.is-pinned) .service-menu{
  position:sticky;top:var(--service-top,78px);width:100%;height:auto;margin:0;
  padding:20px 0 24px;background:#f0efe6;z-index:4;
 }
 .home .services-scroll:not(.is-pinned) .service-menu nav{flex-direction:row;flex-wrap:wrap;gap:10px 24px}
 .home .services-scroll:not(.is-pinned) .service-menu nav a{margin:0}
 .home .services-scroll:not(.is-pinned) .service-chapters{display:block}
 .home .services-scroll:not(.is-pinned) .service-chapter{padding:36px 0;min-height:calc(100svh - var(--service-top,78px));scroll-margin-top:var(--service-fallback-offset,260px)}
 .home .services-scroll:not(.is-pinned) .service-copy{padding:0;min-width:0}
 .home .services-scroll.is-pinned.has-compact-menu .service-menu nav{flex-direction:row;flex-wrap:wrap;gap:6px 20px;align-items:flex-start}
 .home .services-scroll.is-pinned.has-compact-menu .service-menu nav a{margin:0;white-space:nowrap}
}

/* iPad/touch tablets: one native page scroll and stable anchor geometry. */
html.home-snap.tablet-service-scroll{scroll-snap-type:none;scroll-padding-top:0}
@media(min-width:761px){
 .home .services-scroll.is-native-scroll{height:auto;padding-top:24px;padding-bottom:24px}
 .home .services-scroll.is-native-scroll .services-sticky{position:relative;height:auto}
 .home .services-scroll.is-native-scroll .service-menu{top:var(--service-top,78px);transition:none}
 .home .services-scroll.is-native-scroll.is-service-menu-stuck .service-menu{isolation:isolate}
 .home .services-scroll.is-native-scroll.is-service-menu-stuck .service-menu::before{
  content:"";position:absolute;top:calc(-1 * var(--service-top,78px));bottom:0;
  left:-5vw;right:-5vw;background:#f0efe6;z-index:-1;pointer-events:none;
 }
 .home .services-scroll.is-native-scroll .service-menu nav{flex-wrap:nowrap;overflow-x:auto;gap:24px;padding-bottom:8px}
 .home .services-scroll.is-native-scroll .service-menu nav a{flex:none;white-space:nowrap}
 .home .services-scroll.is-native-scroll .service-chapter{
  min-height:0;padding:36px 0 64px;opacity:1;transform:none;align-items:start;
  scroll-margin-top:var(--service-fallback-offset,260px);
 }
 .home .services-scroll.is-native-scroll .service-chapter>img{
  height:auto;min-height:0;max-height:70svh;object-fit:contain;object-position:top center;
 }
}
@media(min-width:761px) and (max-width:1024px){
 .home .services-scroll.is-native-scroll .service-chapter{display:flex;flex-direction:column;gap:28px}
 .home .services-scroll.is-native-scroll .service-chapter>img{order:0;width:100%;max-height:55svh}
 .home .services-scroll.is-native-scroll .service-copy{order:1;width:100%}
}