/* fx layer: transform-only motion (content always visible), 3D tilt, WebGL canvas, render-skipping for speed */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main section:nth-of-type(n+4){content-visibility:auto;contain-intrinsic-size:auto 640px}
footer{content-visibility:auto;contain-intrinsic-size:auto 420px}
.fx-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.2s ease}
.fx-gl.on{opacity:1}
.hero{position:relative;overflow:hidden}
.fx-on [data-rv]{transform:translate3d(0,28px,0) scale(.985);transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);will-change:transform}
.fx-on [data-rv].in{transform:none;will-change:auto}
.fx-tilt{transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .25s;will-change:transform}
.fx-tilt.tl{transition:transform .08s linear}
.fx-tilt:hover{box-shadow:0 22px 48px rgba(11,39,35,.22)}
.btn,.m-hwa,.m-evb{transition:transform .18s ease,box-shadow .2s ease,filter .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active,.m-evb:active{transform:scale(.97)}
.btn-wa,.btn-gold{position:relative;overflow:hidden}
.btn-wa::after,.btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:fxsh 4.5s ease-in-out infinite;pointer-events:none}
@keyframes fxsh{0%,70%{left:-60%}100%{left:130%}}
.hero-media img{will-change:translate}
.fx-prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#E7C873,#25D366);z-index:9999;pointer-events:none}
@media (max-width:760px){.fx-on [data-rv]{transform:translate3d(0,18px,0)}.fx-gl{opacity:.8}}
@media (prefers-reduced-motion:reduce){.fx-on [data-rv]{transform:none;transition:none}.btn-wa::after,.btn-gold::after{animation:none;display:none}.fx-gl{display:none}}
/* hero: two full square photos, larger, overlapping */
.hero-media .grid{display:block!important;position:relative}
.hero-media .grid img{aspect-ratio:1/1!important;width:76%!important;height:auto!important;object-fit:cover;display:block;border-radius:28px!important;margin:0!important}
.hero-media .grid img:nth-child(2){margin:14px 0 0 auto!important;border:4px solid #fff}
@media (max-width:900px){.hero-media{max-width:460px}.hero-media .grid img{width:80%!important}}
/* "Get quote" button on pictures */
.wa-pic{position:absolute;z-index:5;transform:translate(calc(-100% - 8px),calc(-100% - 8px));display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#073b1c;font:700 13px/1 Inter,system-ui,sans-serif;padding:9px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;min-height:36px;transition:transform .15s,filter .15s}
.wa-pic:hover,.wa-pic:focus-visible{filter:brightness(1.07);transform:translate(calc(-100% - 8px),calc(-100% - 10px))}
.wa-pic:focus-visible{outline:3px solid #fff}
@media (max-width:640px){.wa-pic{font-size:12px;padding:8px 10px;gap:5px}}
@media print{.wa-pic{display:none!important}}
.call-float{display:none;position:fixed;left:14px;bottom:18px;z-index:60;align-items:center;gap:6px;background:#1E4A40;color:#fff;padding:10px 14px;border-radius:999px;font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@media (max-width:900px){.call-float{display:inline-flex}body:has(#sticky-book.show) .call-float{bottom:90px}}
@media print{.call-float{display:none}}