
/* V8 MOTION LUXURY – Progressive enhancement over the original V7.
   All effects preserve original pixels, brand colors and page content. */
:root{--v8-spring:cubic-bezier(.19,1,.22,1);--v8-smooth:cubic-bezier(.22,1,.36,1);--v8-shift:0px;--v8-progress:0;--v8-mx:50%;--v8-my:45%;}
/* slim, intentional reading indicator; never obstructs controls */
.read-progress{position:fixed;z-index:110;inset:0 0 auto;height:3px;pointer-events:none;overflow:hidden;background:transparent}
.read-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--sage),var(--turquoise),var(--champagne));box-shadow:0 0 8px #43bdb580}
@supports(animation-timeline:scroll(root)){.read-progress span{animation:v8-reading linear both;animation-timeline:scroll(root);}}
@keyframes v8-reading{to{transform:scaleX(1)}}
/* glass header introduced on scroll; no layout shift */
.site-header{position:sticky;top:0;z-index:70;transition:box-shadow .5s ease,background .5s ease,border-color .5s ease;backdrop-filter:blur(0px);border-bottom:1px solid transparent}
.site-header.v8-scrolled{background:rgba(247,242,234,.90);box-shadow:0 10px 35px rgba(32,43,69,.075);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:rgba(216,195,170,.6)}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;bottom:-7px;left:0;right:0;height:1px;background:var(--turquoise);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--v8-smooth)}
.desktop-nav a:hover::after,.desktop-nav a.is-current::after{transform:scaleX(1)}
/* HERO / photo untouched, transformation applies to display box only */
.hero{--mx:50%;--my:40%;box-shadow:0 28px 70px rgba(32,43,69,.08)}
.hero-photo{transform:translate3d(0,var(--v8-shift),0);will-change:transform}
.hero-photo img{animation:v8-hero-arrival 2.3s var(--v8-spring) both;transform-origin:50% 45%}
@keyframes v8-hero-arrival{from{transform:scale(1.095);opacity:.75}to{transform:scale(1.025);opacity:1}}
.hero-lights{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.hero-lights__halo{position:absolute;width:min(700px,55vw);height:min(700px,55vw);border-radius:50%;left:calc(var(--mx) - 350px);top:calc(var(--my) - 350px);background:radial-gradient(circle,rgba(67,189,181,.17),rgba(216,195,170,.07) 24%,transparent 65%);opacity:.75;transition:opacity .6s ease;will-change:transform}
.hero-lights__beam{position:absolute;inset:-110% -90%;background:linear-gradient(113deg,transparent 44.5%,rgba(247,242,234,.05) 48%,rgba(216,195,170,.10) 50%,transparent 52%);transform:translateX(-60%) rotate(-5deg);animation:v8-hero-beam 16s ease-in-out 2.1s infinite;opacity:.60}
@keyframes v8-hero-beam{0%,35%{transform:translateX(-60%) rotate(-5deg)}62%,100%{transform:translateX(58%) rotate(-5deg)}}
.hero::after{content:'';position:absolute;inset:18px;z-index:2;border:1px solid rgba(247,242,234,.17);pointer-events:none;clip-path:polygon(0 0,20% 0,20% 1px,80% 1px,80% 0,100% 0,100% 100%,0 100%);opacity:.60}
.hero-frame-corner{position:absolute;z-index:2;width:41px;height:41px;right:26px;bottom:27px;border-right:1px solid rgba(216,195,170,.7);border-bottom:1px solid rgba(216,195,170,.7);pointer-events:none}
.headline-line{display:block;overflow:hidden;padding-bottom:.085em;margin-bottom:-.085em}
.headline-line__inner{display:block;animation:v8-line-enter 1.15s var(--v8-spring) both;animation-delay:calc(.20s + var(--line)*.15s)}
@keyframes v8-line-enter{0%{opacity:0;transform:translate3d(0,100%,0) rotate(1.4deg);filter:blur(7px)}100%{opacity:1;transform:translate3d(0,0,0) rotate(0);filter:blur(0)}}
.hero-inner>.eyebrow,.hero-inner>p,.hero-actions{animation:v8-hero-fade 1s var(--v8-smooth) both}
.hero-inner>.eyebrow{animation-delay:.13s}.hero-inner>p{animation-delay:.62s}.hero-actions{animation-delay:.78s}
@keyframes v8-hero-fade{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.hero-caption{animation:v8-hero-fade 1.15s var(--v8-smooth) 1.05s both}
/* overlays and sheen on all actionable elements, using brand palette */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .46s var(--v8-spring),box-shadow .4s,background .3s,border-color .3s}
.btn::before{content:'';position:absolute;inset:-90% -100%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 39%,rgba(247,242,234,.18) 48%,rgba(255,255,255,.32) 51%,transparent 58%);transform:translate3d(-65%,0,0) rotate(8deg);transition:transform .95s var(--v8-spring)}
.btn:hover::before{transform:translate3d(68%,0,0) rotate(8deg)}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 29px rgba(32,43,69,.15)}
.btn:active{transform:scale(.975)}
.quick-nav a{position:relative;transition:background .35s ease,transform .45s var(--v8-spring),box-shadow .4s ease}
.quick-nav a:hover{transform:translateY(-3px);box-shadow:0 9px 18px #202b4512}
/* typography progressively reveals; no hidden elements without JS opt-in */
.motion-ready .motion-target{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--v8-smooth),transform 1s var(--v8-spring);transition-delay:var(--stagger,0ms)}
.motion-ready .motion-target.in-view{opacity:1;transform:translate3d(0,0,0)}
.motion-ready .section-header h2.motion-target,.motion-ready .about-copy h2.motion-target{transform:translate3d(0,33px,0)}
.motion-ready .section-header h2.motion-target.in-view,.motion-ready .about-copy h2.motion-target.in-view{transform:none}
.motion-ready .section-header .eyebrow.motion-target{transform:translateX(-16px)}
.motion-ready .section-header .eyebrow.motion-target.in-view{transform:translateX(0)}
/* component animations */
.service-card,.approach-card,.gallery-card,.comfort-photo,.about-photo,.closing{backface-visibility:hidden}
.service-card:after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--card-x,50%) var(--card-y,50%),rgba(247,242,234,.20),transparent 66%);opacity:0;transition:opacity .45s ease}
.service-card:hover:after{opacity:1}
.service-card img{transition:transform 1.2s var(--v8-spring)}
@media(hover:hover) and (pointer:fine){.service-card.is-visible:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px);transition:transform .5s var(--v8-spring),opacity .7s ease;box-shadow:0 24px 46px #202b4521;z-index:2}}
.service-card:hover img{transform:scale(1.095)}
.service-card .mini-circle{transition:transform .55s var(--v8-spring),background .45s ease}
.service-card:hover .mini-circle{transform:rotate(45deg);background:rgba(247,242,234,.2)}
.service-card .on-photo-link{transition:letter-spacing .35s ease,border-color .35s ease}
.service-card:hover .on-photo-link{letter-spacing:.135em;border-color:var(--champagne)}
.approach-card{position:relative;transition:box-shadow .55s var(--v8-smooth),transform .65s var(--v8-spring),border-color .5s ease}
.approach-card:hover{transform:translateY(-5px);box-shadow:0 20px 39px #202b4514;z-index:1}
.approach-shot{position:relative;overflow:hidden}
.approach-shot:after{content:'';inset:0;position:absolute;pointer-events:none;background:linear-gradient(132deg,transparent 38%,rgba(247,242,234,.21) 49%,transparent 60%);transform:translateX(-110%);transition:transform 1.25s var(--v8-spring)}
.approach-card:hover .approach-shot:after{transform:translateX(105%)}
.approach-shot img{transition:transform 1.15s var(--v8-spring)}
.approach-card:hover img{transform:scale(1.07)}
.gallery-card{position:relative;isolation:isolate;transition:transform .7s var(--v8-spring),box-shadow .6s ease}
.gallery-card img{transition:transform 1.1s var(--v8-spring)}
.gallery-card:hover img{transform:scale(1.07)}
.gallery-card:hover{box-shadow:0 17px 35px #202b4521}
.gallery-card figcaption{transition:transform .6s var(--v8-spring),opacity .5s ease}
.gallery-card:hover figcaption{transform:translateY(-5px)}
.snap-track{scroll-behavior:smooth;scroll-padding-inline:10px;cursor:grab}
.snap-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.snap-track.is-dragging *{user-select:none}
.slider-arrow{transition:transform .4s var(--v8-spring),background .3s,border-color .3s,box-shadow .3s}
.slider-arrow:hover{transform:scale(1.09);box-shadow:0 10px 26px #202b451b}
.slider-arrow:active{transform:scale(.92)}
/* sophisticated moving brand-signature band */
.signature-band{background:var(--champagne);height:44px;display:flex;align-items:center;overflow:hidden;isolation:isolate;user-select:none}
.signature-band__track{display:flex;white-space:nowrap;width:max-content;animation:v8-marquee 48s linear infinite;will-change:transform}
.signature-band__track>span{flex-shrink:0;font-size:10px;letter-spacing:.27em;font-weight:780;color:var(--navy);padding-left:24px}
@keyframes v8-marquee{to{transform:translateX(-50%)}}
/* manifesto and closing: kinetic light, never tinted original pixels */
.statement,.closing{--mx:55%;--my:45%;isolation:isolate}
.statement::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(720px circle at var(--mx) var(--my),rgba(67,189,181,.10),transparent 70%);opacity:.85}
.statement-inner{position:relative;z-index:1}
.statement h2 em,.closing h2 em{background:linear-gradient(95deg,var(--champagne),#f7f2ea,var(--champagne));background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:v8-champagne 12s ease-in-out infinite}
@keyframes v8-champagne{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.closing>img{transition:transform 1.4s var(--v8-spring)}
.closing:hover>img{transform:scale(1.035)}
.closing::after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:radial-gradient(550px circle at var(--mx) var(--my),rgba(216,195,170,.13),transparent 65%)}
.closing-inner{position:relative;z-index:2}
.about-photo img,.comfort-photo img{transition:transform 1.5s var(--v8-spring)}
.about-photo:hover img,.comfort-photo:hover img{transform:scale(1.045)}
.about-band .about-copy{transition:background .55s ease}
.comfort-oval{position:relative;overflow:hidden}
.comfort-oval::before{content:'';position:absolute;inset:8%;border:1px solid rgba(32,43,69,.13);border-radius:50%;animation:v8-breathe 7s ease-in-out infinite;pointer-events:none}
@keyframes v8-breathe{0%,100%{transform:scale(.94);opacity:.46}50%{transform:scale(1.045);opacity:1}}
.benefit-grid>div{position:relative;isolation:isolate;transition:background .35s ease,transform .4s var(--v8-spring)}
.benefit-grid>div:hover{transform:translateY(-3px);background:var(--cream)}
.journey article{position:relative;overflow:hidden;transition:transform .55s var(--v8-spring),background .4s ease}
.journey article::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .65s var(--v8-spring)}
.journey article:hover{transform:translateY(-5px)}
.journey article:hover::after{transform:scaleX(1)}
/* FAQ height movement remains native, with progressive detail reveal */
.faq-item summary .plus,.faq-item .plus{transition:transform .4s var(--v8-spring)}
.faq-item[open] .plus{transform:rotate(45deg)}
.faq-item[open]>p{animation:v8-faq-in .5s var(--v8-smooth) both}
@keyframes v8-faq-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
/* Finishing details */
.footer-wordmark{transition:letter-spacing .85s var(--v8-spring),opacity .8s ease}
.footer-wordmark:hover{letter-spacing:-.045em;opacity:.92}
.motion-switch{border:1px solid rgba(247,242,234,.34);color:var(--cream);background:transparent;font-size:9px;letter-spacing:.10em;border-radius:40px;padding:10px 13px;cursor:pointer;transition:background .25s ease,color .25s ease}
.motion-switch:hover{color:var(--navy);background:var(--cream)}
/* keep motion small, battery-friendly and unobtrusive on small screens */
@media(max-width:767px){.hero-lights__halo{width:420px;height:420px;left:calc(var(--mx) - 210px);top:calc(var(--my) - 210px);opacity:.28}.hero-lights__beam{opacity:.25;animation-duration:23s}.hero::after{inset:9px;border-color:rgba(247,242,234,.12)}.hero-frame-corner{display:none}.motion-ready .motion-target{transform:translate3d(0,14px,0);transition-duration:.7s}.motion-ready .section-header h2.motion-target{transform:translate3d(0,19px,0)}.signature-band{height:37px}.signature-band__track>span{font-size:9px;letter-spacing:.2em}.site-header.v8-scrolled{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.motion-switch{font-size:9px}.read-progress{height:2px}}
/* scroll-driven images are progressive enhancements only, never essential */
@supports(animation-timeline:view()){
 @media(min-width:768px) and (prefers-reduced-motion:no-preference){
   .about-photo img{animation:v8-about-scroll linear both;animation-timeline:view();animation-range:entry 0% exit 100%;}
   @keyframes v8-about-scroll{from{transform:scale(1.07) translateY(-1.5%)}to{transform:scale(1.07) translateY(1.5%)}}
 }
}
/* Contrast and motion accessibility */
@media(prefers-reduced-motion:reduce){.read-progress span{animation:none!important}.hero-photo img,.headline-line__inner,.hero-inner>.eyebrow,.hero-inner>p,.hero-actions,.hero-caption{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}.hero-photo{transform:none!important}.signature-band__track,.hero-lights__beam,.statement h2 em,.closing h2 em,.comfort-oval::before{animation:none!important}.motion-ready .motion-target{opacity:1!important;transform:none!important}.btn::before,.approach-shot::after{display:none}.snap-track{scroll-behavior:auto}.service-card,.gallery-card,.approach-card,.about-photo img,.comfort-photo img,.closing>img{transition:none!important;transform:none!important}}
body.motion-off .motion-target,body.motion-off .reveal{opacity:1!important;transform:none!important;transition:none!important}
body.motion-off .read-progress span{animation:none!important}
body.motion-off .hero-photo,body.motion-off .hero-photo img,body.motion-off .headline-line__inner,body.motion-off .hero-inner>.eyebrow,body.motion-off .hero-inner>p,body.motion-off .hero-actions,body.motion-off .hero-caption{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}
body.motion-off .signature-band__track,body.motion-off .hero-lights__beam,body.motion-off .statement h2 em,body.motion-off .closing h2 em,body.motion-off .comfort-oval::before{animation:none!important}
body.motion-off .btn::before,body.motion-off .approach-shot:after{display:none!important}
body.motion-off .service-card,body.motion-off .approach-card,body.motion-off .gallery-card,body.motion-off .about-photo img,body.motion-off .comfort-photo img,body.motion-off .closing>img,body.motion-off .btn{transform:none!important;transition:none!important}
body.motion-off .snap-track{scroll-behavior:auto!important}

/* V8.2: reduced CPU footprint on narrow touch screens. */
@media(max-width:650px),(pointer:coarse){.hero-lights__beam{animation-duration:22s;opacity:.35}.hero-photo{will-change:auto}.hero-lights__halo{will-change:auto}.service-card:after{display:none}.headline-line__inner{animation-duration:.85s}.signature-band__track{animation-duration:68s}}

