:root{--arrival-photo:0;--arrival-services:0;--arrival-area:0;--arrival-trust:0;--arrival-reviews:0;--arrival-contact:0;--tablet:0;--phone:0;--roof:1;--roof-glow:0;--craft-progress:0;--craft-visible:0}
.architecture{opacity:calc(.23 + var(--photo)*.77);filter:none}
.architecture-art image{filter:none}.architecture-art{filter:saturate(calc(.18 + var(--design)*.82)) brightness(calc(.74 + var(--design)*.26))}
.roofline{stroke-dashoffset:calc(1 - var(--roof));stroke-width:calc(1.65 + var(--roof-glow)*1.6);opacity:calc(.48 + var(--roof-glow)*.5);filter:none;stroke:color-mix(in srgb,#55c5c2 calc((1 - var(--design))*100%),#c77943)}
.roofline-return{stroke-width:calc(1 + var(--roof-glow));opacity:calc(.24 + var(--roof-glow)*.45)}
.architecture::after{content:'';position:absolute;inset:8% 3%;border:1px solid #86d3ca;opacity:var(--arrival-photo);transform:scale(calc(1.025 - var(--arrival-photo)*.025));background:linear-gradient(110deg,transparent,#d4e9d014,transparent);pointer-events:none}
[data-receives=Services]{position:relative;--arrival:var(--arrival-services)}
[data-receives="Service Area"]{position:relative;--arrival:var(--arrival-area)}
[data-receives=Trust]{position:relative;--arrival:var(--arrival-trust)}
[data-receives=Reviews]{position:relative;--arrival:var(--arrival-reviews)}
[data-receives=Contact]{position:relative;--arrival:var(--arrival-contact)}
[data-receives]:not(.architecture)::after{content:'';position:absolute;inset:-7px -8px;border:1px solid #80cfc6;border-radius:2px;opacity:var(--arrival,0);background:linear-gradient(110deg,#55c5c205,#91d2c522,transparent);transform:scale(calc(1.055 - var(--arrival,0)*.055));pointer-events:none}
.craft-signal{position:absolute;inset:0;width:100%;height:100%;z-index:5;fill:none;stroke:#79cfc4;stroke-width:1.1;pointer-events:none;opacity:var(--craft-visible)}
.craft-bed{opacity:.16;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--craft-progress))}.craft-flow{stroke-width:1.5;stroke-dasharray:.16 1;stroke-dashoffset:calc(.16 - var(--craft-progress))}
.craft-signal[data-pass=design]{stroke:#c77943}.craft-signal[data-pass=development]{opacity:0}
/* The same real layout interpolates across devices. No breakpoint switch of main composition. */
.morph-layout .northline-site{min-height:450px}
.morph-layout .architecture{left:calc(23% - var(--tablet)*18% - var(--phone)*5%);bottom:calc(var(--phone)*26%)}
.morph-layout .architecture-art{width:calc(100% + var(--phone)*35%);margin-left:calc(var(--phone)*-29%)}
.morph-layout header{margin:0 calc(44px - var(--tablet)*12px - var(--phone)*6px);height:calc(94px - var(--tablet)*9px - var(--phone)*5px)}
.morph-layout main{left:calc(55px - var(--tablet)*17px - var(--phone)*12px);right:calc(36px - var(--tablet)*4px - var(--phone)*6px);top:calc(26% + var(--tablet)*6% + var(--phone)*8%);bottom:auto}
.morph-layout h1{font-size:calc(86px - var(--tablet)*10px - var(--phone)*19px);line-height:calc(.98 + var(--phone)*.05);margin-top:calc(28px - var(--tablet)*4px - var(--phone)*3px);width:100%;filter:none}
.morph-layout h1 em{margin-left:calc(49px - var(--tablet)*34px - var(--phone)*15px);font-size:calc(1.04em - var(--phone)*.03em);max-width:100%;line-height:1.07}
.morph-layout .northline-detail{margin-top:calc(26px + var(--tablet)*4px - var(--phone)*11px);gap:calc(15px - var(--phone)*4px)}
.morph-layout .northline-description{font-size:calc(11px + var(--tablet)*1px - var(--phone)*1px);line-height:1.75}
.morph-layout .northline-actions{display:block;position:relative;width:100%;height:calc(47px + var(--phone)*38px);margin-top:calc(23px + var(--tablet)*4px - var(--phone)*4px)}
.morph-layout .northline-actions>button:first-child{width:calc(180px*(1 - var(--phone)) + 100%*var(--phone));min-height:calc(43px + var(--tablet)*4px - var(--phone)*1px);font-size:calc(10px + var(--tablet)*1px);justify-content:space-between;padding:0 16px;gap:8px}
.morph-layout .call-button{position:absolute;top:calc(var(--phone)*51px);left:calc((1 - var(--phone))*205px);min-height:29px;font-size:calc(10px - var(--phone)*1px);padding:9px 0;white-space:nowrap}
.morph-layout nav{gap:calc(27px - var(--phone)*14px)}.morph-layout nav>button:first-child{display:block;width:calc((1 - var(--phone))*48px);padding:0;white-space:nowrap;overflow:hidden;opacity:calc(1 - var(--phone))}
.morph-layout nav .nav-quote{font-size:calc(10px*(1 - var(--phone)));gap:calc(25px*(1 - var(--phone)));width:calc(165px - var(--phone)*132px);height:37px;border:0;border-bottom:1px solid #eee7dc68;border-radius:calc(var(--phone)*18px);justify-content:space-between}
.morph-layout nav .nav-quote span{font-size:16px}.morph-layout .northline-bottom{left:calc(44px - var(--tablet)*12px - var(--phone)*6px);right:calc(44px - var(--tablet)*12px - var(--phone)*6px)}
.morph-layout .image-signature{opacity:calc(var(--design)*(1 - var(--phone)));top:auto;bottom:105px}
.paused .craft-signal{transition:none}