/* Tropical Bay Rentals: shared polish (motion only; every page keeps its own colours, fonts and layout).
 Moved from the homepage (POLISH v1, 2026-10-30) and extended to every page 2026-10-31. Animations always play (owner rule). */
:root{--ease-out:cubic-bezier(.2,.8,.2,1)}
/* ----- HERO CLOUDS -----
   Soft clouds drifting left to right across the sky, behind the sun, palms, headline and bike.
   Each .cloud is a full-width track that slides by 100% + the cloud width (transform only, GPU-cheap);
   the puff inside starts just off the left edge, so it enters from off-screen left and leaves off-screen right.
   Negative delays stagger them so the sky is never empty or crowded. Always plays (owner rule). */
.hero-clouds{position:absolute;left:0;right:0;top:0;height:60%;z-index:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;left:0;width:100%;top:var(--y);will-change:transform;
  animation:cloudDrift var(--t) linear infinite;animation-delay:var(--dl)}
.cloud i{position:absolute;left:calc(-1 * var(--w));top:0;width:var(--w);aspect-ratio:5/2;opacity:var(--o);
  background:
    radial-gradient(ellipse 22% 42% at 30% 58%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 26% 56% at 52% 42%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 20% 40% at 72% 58%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.5) 45%,rgba(255,255,255,0) 72%),
    radial-gradient(ellipse 46% 26% at 50% 70%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 75%)}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(calc(100% + var(--w)))}}
.cloud-1{--w:clamp(170px,24vw,380px);--y:6%;--o:.6;--t:120s;--dl:-60s}
.cloud-2{--w:clamp(110px,14vw,230px);--y:24%;--o:.42;--t:85s;--dl:-21s}
.cloud-3{--w:clamp(200px,30vw,460px);--y:38%;--o:.32;--t:140s;--dl:-120s}
.cloud-4{--w:clamp(90px,11vw,180px);--y:14%;--o:.5;--t:65s;--dl:-8s}
.cloud-5{--w:clamp(140px,18vw,290px);--y:30%;--o:.38;--t:105s;--dl:-78s}
@media(max-width:768px){.hero-clouds{height:45%}.cloud i{opacity:calc(var(--o) * .8)}}
/* ----- BUTTONS: light sweep, lift, soft glow, satisfying press ----- */
:is(.btn-white,.btn-outline,.btn-water,.btn-wizard,.btn-book,.btn-blog,.nav-cta,.nav-call,.cta-row a,.cta-mega,.wizard-nav-btn.primary,.wizard-copy-btn,.ptab){
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .25s,border-color .25s,color .25s,opacity .25s}
.floating-cta{overflow:hidden;isolation:isolate}
.quick-form button.btn-book{border:none;cursor:pointer;font-family:inherit}
:is(.btn-white,.btn-outline,.btn-water,.btn-wizard,.btn-book,.btn-blog,.nav-cta,.nav-call,.cta-row a,.cta-mega,.wizard-nav-btn.primary,.wizard-copy-btn,.ptab,.floating-cta)::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:55%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 85%);
  transform:translateX(-190%) skewX(-18deg)}
/* light buttons get a sea-glass tint instead of white */
:is(.btn-white,.cta-row .cta-call,.wizard-copy-btn,.ptab:not(.active):not(.ptab-jetski))::after{
  background:linear-gradient(100deg,rgba(95,212,234,0) 15%,rgba(95,212,234,.38) 50%,rgba(95,212,234,0) 85%)}
:is(.btn-white,.btn-outline,.btn-water,.btn-wizard,.btn-book,.btn-blog,.nav-cta,.nav-call,.cta-row a,.cta-mega,.wizard-nav-btn.primary:not(:disabled),.wizard-copy-btn,.ptab,.floating-cta):hover::after{
  transform:translateX(280%) skewX(-18deg);transition:transform .95s var(--ease-out)}
/* lift + glow */
:is(.btn-wizard,.cta-row .cta-build,.nav-cta,.cta-mega,.btn-book.warm,.wizard-nav-btn.primary:not(:disabled)):hover{
  transform:translateY(-3px);opacity:1;box-shadow:0 14px 30px -8px rgba(255,90,31,.6),0 0 0 5px rgba(255,140,66,.16)}
:is(.btn-book:not(.warm),.btn-blog,.btn-water):hover{
  transform:translateY(-3px);opacity:1;box-shadow:0 14px 30px -10px rgba(0,107,166,.55),0 0 0 5px rgba(95,212,234,.2)}
:is(.btn-outline,.nav-call):hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(1,42,99,.5),0 0 0 5px rgba(255,255,255,.12)}
:is(.btn-white,.cta-row .cta-call,.wizard-copy-btn):hover{transform:translateY(-3px);box-shadow:0 12px 26px -10px rgba(0,107,166,.4),0 0 0 5px rgba(95,212,234,.18)}
.ptab:hover{transform:translateY(-2px)}
/* press */
:is(.btn-white,.btn-outline,.btn-water,.btn-wizard,.btn-book,.btn-blog,.nav-cta,.nav-call,.cta-row a,.cta-mega,.wizard-nav-btn.primary:not(:disabled),.wizard-copy-btn,.ptab):active{
  transform:translateY(0) scale(.96);transition-duration:.09s;box-shadow:0 4px 12px -4px rgba(1,42,99,.35)}
/* Call buttons: a slow periodic glint so the phone number catches the eye */
:is(.hero .btn-outline,.cta-row .cta-call,.nav-cta,.cta-mega,.floating-cta)::after{animation:glint 7s ease-in-out 2.5s infinite}
.cta-row .cta-call::after{animation-delay:3.4s}
.cta-mega::after{animation-delay:1.6s}
@keyframes glint{0%{transform:translateX(-190%) skewX(-18deg)}13%,100%{transform:translateX(280%) skewX(-18deg)}}
/* ----- CARDS: smooth hover lift ----- */
.step,.testi-card,.blog-card,.contact-card,.price-card,.faq-item,.map-card,.addon-card,.area-tag,.perk-pill{
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .3s,border-color .3s,color .3s}
.step:hover,.testi-card:hover,.blog-card:hover{transform:translateY(-7px);box-shadow:0 22px 44px -18px rgba(0,107,166,.38)}
.price-card:hover{box-shadow:0 24px 48px -18px rgba(0,107,166,.38)}
.contact-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px -16px rgba(0,0,0,.45)}
.faq-item:hover{transform:translateY(-2px);box-shadow:0 10px 28px -12px rgba(0,107,166,.3)}
.map-card:hover{transform:translateY(-4px)}
.area-tag:hover,.perk-pill:hover{transform:translateY(-2px)}
.step-icon{transition:transform .5s var(--ease-out)}
.step:hover .step-icon{transform:translateY(-3px) scale(1.06)}
.blog-card-img{transition:transform .8s var(--ease-out)}
.blog-card:hover .blog-card-img{transform:scale(1.05)}
/* ----- BUILD YOUR RENTAL: a nicer "picked" moment ----- */
.wizard-option,.wizard-item{position:relative;transition:transform .3s var(--ease-out),background-color .25s,border-color .25s,box-shadow .3s var(--ease-out)}
.wizard-option::after,.wizard-item::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--ocean-light,#5fd4ea);opacity:0;pointer-events:none}
.wizard-option.selected,.wizard-item.active{animation:wPick .5s var(--ease-out);box-shadow:0 10px 24px -10px rgba(1,42,99,.55)}
.wizard-option.selected::after,.wizard-item.active::after{animation:wRing .75s var(--ease-out)}
.wizard-option.selected .wemoji,.wizard-item.active .wemoji{display:inline-block;animation:wEmoji .65s var(--ease-out)}
@keyframes wPick{0%{transform:scale(.94)}55%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes wRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
@keyframes wEmoji{0%{transform:scale(.6) rotate(-14deg)}60%{transform:scale(1.22) rotate(6deg)}100%{transform:none}}
.wizard-progress-bar{position:relative;overflow:hidden}
.wizard-progress-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));animation:barShine 3.2s ease-in-out infinite}
@keyframes barShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}
.wizard-dot{transition:width .35s var(--ease-out),background-color .3s}
/* ----- SCROLL-IN REVEALS (classes added by the small script at the end of the page) ----- */
.rv{opacity:0}
.rv.rv-in{animation:rvIn .85s var(--ease-out) var(--rv-d,0s) both}
@keyframes rvIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
/* ----- ANIMATED SECTION BACKGROUNDS -----
   One beach language in the site's own colours: drifting wave bands, sun-glint sparkles, caustic light,
   rising bubbles, sand ripples, sun glows. Built by the script at the end of the page, sit behind the content,
   move with transform/opacity only, and pause while their section is off screen. */
.fx-host{position:relative;isolation:isolate}
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.fx-host:not(.fx-live) .fx *{animation-play-state:paused!important}
@keyframes fxDrift{to{transform:translateX(calc(-1 * var(--tile)))}}
@keyframes fxDrift2{to{transform:translate(calc(-1 * var(--tile)),calc(-1 * var(--tile)))}}
@keyframes fxDrift3{to{transform:translate(var(--tile),calc(-1 * var(--tile)))}}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes fxRise{0%{transform:translate3d(0,0,0) scale(.55);opacity:0}12%,80%{opacity:var(--o,.6)}100%{transform:translate3d(var(--x,12px),calc(-1 * var(--h,700px)),0) scale(1.05);opacity:0}}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.25) rotate(0deg)}50%{opacity:var(--o,.85);transform:scale(1) rotate(45deg)}}
@keyframes fxGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-22px) scale(1.12)}}
@keyframes fxRay{0%,100%{transform:rotate(14deg) translateX(-14px);opacity:.35}50%{transform:rotate(20deg) translateX(14px);opacity:.75}}
@keyframes fxSheen{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
/* wave bands (wizard + area swells) */
.fx-wave{position:absolute;left:0;bottom:var(--bt,0);height:var(--bh,120px);width:calc(100% + var(--tile));--tile:720px;background-repeat:repeat-x;background-size:var(--tile) 100%;animation:fxDrift var(--t,60s) linear infinite;will-change:transform}
.fx-wave.rev{animation-direction:reverse}
.fx-wave.c1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C120 40 240 40 360 70S600 100 720 70V120H0Z' fill='%235fd4ea' fill-opacity='.2'/%3E%3C/svg%3E")}
.fx-wave.c2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C120 40 240 40 360 70S600 100 720 70V120H0Z' fill='%230096c7' fill-opacity='.1'/%3E%3C/svg%3E")}
.fx-wave.c3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C120 40 240 40 360 70S600 100 720 70V120H0Z' fill='%23ffffff' fill-opacity='.55'/%3E%3C/svg%3E")}
.fx-bob{position:absolute;inset:0;animation:fxBob 9s ease-in-out infinite}
/* caustic light net */
.fx-net{position:absolute;top:calc(-1 * var(--tile));left:calc(-1 * var(--tile));width:calc(100% + 3 * var(--tile));height:calc(100% + 3 * var(--tile));--tile:300px;background-size:var(--tile) var(--tile);animation:fxDrift2 var(--t,50s) linear infinite;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M0 60Q75 18 150 66T300 60'/%3E%3Cpath d='M0 212Q80 170 150 222T300 212'/%3E%3Cpath d='M62 0Q18 75 70 150T62 300'/%3E%3Cpath d='M214 0Q170 80 222 150T214 300'/%3E%3C/g%3E%3C/svg%3E")}
.fx-net.n2{--tile:380px;animation-name:fxDrift3;animation-duration:70s;opacity:.7}
.fx-caustic{opacity:.34}
/* wave bands fade out before the section ends, so the seam into the next band stays exactly as before */
.wizard-band>.fx,.area>.fx{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent)}
.contact .fx-caustic{opacity:.08}
/* sand ripples */
.fx-ripples{position:absolute;top:-64px;left:0;width:calc(100% + var(--tile));height:calc(100% + 128px);--tile:400px;background-size:var(--tile) 64px;animation:fxDrift 90s linear infinite;will-change:transform;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64'%3E%3Cpath d='M0 32Q100 14 200 32T400 32' fill='none' stroke='%23e8c98a' stroke-opacity='.55' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
/* sun glows */
.fx-glow{position:absolute;width:var(--sz,480px);height:var(--sz,480px);left:var(--l);top:var(--tp);border-radius:50%;background:radial-gradient(circle,var(--c,rgba(255,224,102,.42)),rgba(255,224,102,0) 66%);animation:fxGlow var(--t,20s) ease-in-out var(--dl,0s) infinite;will-change:transform}
/* sun-glint sparkles */
.fx-spark{position:absolute;left:var(--l);top:var(--tp);width:var(--sz,14px);height:var(--sz,14px);opacity:0;animation:fxTwinkle var(--t,4s) ease-in-out var(--dl,0s) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10C13 11 11 13 10 20C9 13 7 11 0 10C7 9 9 7 10 0Z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.fx-spark.gold{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10C13 11 11 13 10 20C9 13 7 11 0 10C7 9 9 7 10 0Z' fill='%23ffc94a'/%3E%3C/svg%3E");filter:drop-shadow(0 0 4px rgba(255,201,74,.7))}
/* rising bubbles */
.fx-bub{position:absolute;bottom:-40px;left:var(--l);width:var(--sz);height:var(--sz);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.2) 16% 60%,rgba(0,107,166,.08) 61%);box-shadow:inset 0 0 0 1.5px rgba(0,107,166,.2);
  animation:fxRise var(--t) linear var(--dl) infinite}
.contact .fx-bub{background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.8) 0 14%,rgba(255,255,255,.08) 16% 60%,rgba(255,255,255,.04) 61%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
/* sun shafts through water */
.fx-ray{position:absolute;top:-20%;height:150%;width:var(--w,140px);left:var(--l);transform-origin:50% 0;border-radius:0 0 50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 80%);animation:fxRay var(--t,14s) ease-in-out var(--dl,0s) infinite}
/* trust bar: a slow sheen */
.fx-sheen{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,0));animation:fxSheen 11s ease-in-out infinite}

/* =====================================================================================================
   EVERY OTHER PAGE (2026-10-31): the same motion language on rentals, jet skis, all pages, the town and
   guide pages, the blog and the legal pages. Each page keeps its own colours; these rules add motion only.
   ===================================================================================================== */
.fx-bub.on-dark{background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.8) 0 14%,rgba(255,255,255,.08) 16% 60%,rgba(255,255,255,.04) 61%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.fx-caustic.soft{opacity:.08}
.fx-caustic.faint{opacity:.05}
.fx.fx-dim{opacity:.16}
.fx.fx-fade-end{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 90px),transparent)}

/* ----- hero clouds on the inner pages' sky headers (built by polish.js) ----- */
.hero-clouds--page{height:100%}
.hero-clouds--page .cloud-1{--w:clamp(130px,17vw,300px);--y:8%}
.hero-clouds--page .cloud-2{--w:clamp(90px,11vw,190px);--y:30%}
.hero-clouds--page .cloud-3{--w:clamp(150px,21vw,360px);--y:46%}
.hero-clouds--page .cloud-4{--w:clamp(80px,9vw,150px);--y:16%}
.hero-clouds--page .cloud-5{--w:clamp(110px,14vw,240px);--y:38%}
.hero-clouds--dim{height:55%;opacity:.38}
.above-clouds{position:relative;z-index:1}

/* ----- buttons on the inner pages: the same light sweep, lift and press ----- */
:is(.btn-primary,.btn-ghost,.btn-amber,.btn-dark,.btn-gold,.btn-gold-big,.btn-big,.back,.wizard-shortcut-btn,.filter-btn,.nav-cta,.blog-cta a,.mobile-float a,.cta-section a[class^="btn"]){
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .25s,border-color .25s,color .25s,opacity .25s}
:where(.btn-amber,.btn-ghost,.btn-gold){display:inline-block}
:is(.btn-primary,.btn-ghost,.btn-amber,.btn-dark,.btn-gold,.btn-gold-big,.btn-big,.back,.wizard-shortcut-btn,.filter-btn,.blog-cta a,.mobile-float a)::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:55%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 85%);
  transform:translateX(-190%) skewX(-18deg)}
:is(.btn-primary,.btn-ghost,.btn-amber,.btn-dark,.btn-gold,.btn-gold-big,.btn-big,.back,.wizard-shortcut-btn,.filter-btn,.blog-cta a,.mobile-float a):hover::after{
  transform:translateX(280%) skewX(-18deg);transition:transform .95s var(--ease-out)}
:is(.btn-primary,.wizard-shortcut-btn,.blog-cta a):hover{transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(255,90,31,.6),0 0 0 5px rgba(255,140,66,.16)}
:is(.btn-amber,.btn-gold,.btn-gold-big,.btn-big,.btn-dark,.back):hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(0,0,0,.45)}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(0,0,0,.5),0 0 0 5px rgba(255,255,255,.08)}
.filter-btn:hover{transform:translateY(-2px)}
:is(.btn-primary,.btn-ghost,.btn-amber,.btn-dark,.btn-gold,.btn-gold-big,.btn-big,.back,.wizard-shortcut-btn,.filter-btn,.nav-cta,.blog-cta a,.mobile-float a):active{
  transform:translateY(0) scale(.96);transition-duration:.09s;box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
/* guide-page call buttons glint now and then, like the homepage's */
:is(.hero .btn-ghost[href^="tel:"],.btn-primary[href^="tel:"],.mobile-float a)::after{animation:glint 7s ease-in-out 2.5s infinite}
/* the guide pages' own "Book Now" pill gets the sweep too (the shared nav-cta rules above cover the main-site pills) */
nav[aria-label="Guide menu"] .nav-cta::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:55%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 85%);transform:translateX(-190%) skewX(-18deg)}
nav[aria-label="Guide menu"] .nav-cta:hover::after{transform:translateX(280%) skewX(-18deg);transition:transform .95s var(--ease-out)}
nav[aria-label="Guide menu"] .nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}

/* ----- cards on the inner pages: the same smooth hover lift ----- */
:is(.spot-card,.why-card,.how-step,.review-card,.tip-card,.time-card,.reach-card,.pack-card,.wildlife-card,.inc-card,.req-item,.page-card,.rental-card,.product-block,.snowbird-stat,.route-card,.compare-card,.hotel-card,.ride-card,.fact-card,.idea-card,.festival-card,.neighborhood-card,.bird-card){
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .3s,border-color .3s,color .3s}
:is(.spot-card,.why-card,.how-step,.review-card,.tip-card,.time-card,.reach-card,.pack-card,.wildlife-card,.inc-card,.page-card,.route-card,.compare-card,.hotel-card,.ride-card,.fact-card,.idea-card,.festival-card,.neighborhood-card,.bird-card):hover{
  transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(0,0,0,.35)}
:is(.req-item,.snowbird-stat):hover{transform:translateY(-2px)}
:is(.rental-card,.product-block):hover{box-shadow:0 24px 48px -18px rgba(0,107,166,.38)}
:is(.rental-img img,.product-img-wrap img,.blog-card img,.soro-blog-card-image){transition:transform .8s var(--ease-out)}
:is(.rental-card:hover .rental-img img,.product-block:hover .product-img-wrap img,.soro-blog-card:hover .soro-blog-card-image){transform:scale(1.04)}
.page-card .card-arrow{transition:transform .4s var(--ease-out)}
.page-card:hover .card-arrow{transform:translateX(4px)}
.faq-item{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .3s,border-color .3s}
.rprice,.pprice{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .25s,border-color .25s}
:is(.rprice,.pprice):hover{transform:translateY(-3px)}
/* sections on the shared page background: light fades in and out at the edges instead of stopping in a line */
.fx.fx-soft{-webkit-mask-image:linear-gradient(180deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(180deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
/* blog list: the article cards (drawn by the blog embed) and the "More Guides" cards lift like every other card */
#soro-blog .soro-blog-card,.guide-card{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
#soro-blog .soro-blog-card:hover,.guide-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(0,107,166,.38)}
/* ----- HERO "Call or Text" pill (owner 2026-10-31): the top menu is hidden until scroll, so pages whose hero had no
   phone link get this small one. Same orange pill as the menu's call button (#ff5a1f, 50px radius, bold, page font)
   with the same sweep, lift, glow and press as the other orange buttons. 44px tall; the number drops on narrow phones. */
.hero-call-row{margin-top:1.1rem;position:relative;z-index:2}
.inner > .hero-call-row{margin:.25rem 0 1.75rem}
a.hero-call{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;box-sizing:border-box;max-width:100%;
  background:#ff5a1f;color:#fff;padding:.6rem 1.5rem;border-radius:50px;font-family:inherit;font-weight:700;font-size:.9rem;line-height:1.2;
  text-decoration:none;white-space:nowrap;box-shadow:0 4px 15px rgba(255,90,31,.4);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .25s}
a.hero-call::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:55%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 15%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 85%);
  transform:translateX(-190%) skewX(-18deg);animation:glint 7s ease-in-out 2.5s infinite}
a.hero-call:hover{background:#e85520;color:#fff;transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(255,90,31,.6),0 0 0 5px rgba(255,140,66,.16)}
a.hero-call:hover::after{animation:none;transform:translateX(280%) skewX(-18deg);transition:transform .95s var(--ease-out)}
a.hero-call:active{transform:translateY(0) scale(.96);transition-duration:.09s;box-shadow:0 4px 12px -4px rgba(1,42,99,.35)}
@media(max-width:379px){.hero-call-num{display:none}}