.elementor-354 .elementor-element.elementor-element-7eb714c{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-7eb714c:not(.elementor-motion-effects-element-type-background), .elementor-354 .elementor-element.elementor-element-7eb714c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background:url("https://dev.palmillabeach.com/wp-content/uploads/2026/07/beach-bg.jpg") 50% 50%;background-size:cover;}.elementor-354 .elementor-element.elementor-element-ac3cca6{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-d1bf96a{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-c251152{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-1f4fe55{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-529d452{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-1fd82d6{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-373d880{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-b363e31{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-18481e2{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-304e1b5{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-fdbc6e5{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-fe6a800{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-ad69325{--e-n-carousel-swiper-slides-to-display:4;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}.elementor-354 .elementor-element.elementor-element-8d7283f{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-354 .elementor-element.elementor-element-4958a31{margin:45px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-354 .elementor-element.elementor-element-757b4ec{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:230px 230px;--row-gap:230px;--column-gap:230px;--padding-top:130px;--padding-bottom:130px;--padding-left:40px;--padding-right:40px;}.elementor-354 .elementor-element.elementor-element-757b4ec:not(.elementor-motion-effects-element-type-background), .elementor-354 .elementor-element.elementor-element-757b4ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F5EF;background-image:url("https://dev.palmillabeach.com/wp-content/uploads/2026/09/Background-gradient-scaled.jpg");background-position:bottom center;background-size:cover;}.elementor-354 .elementor-element.elementor-element-757b4ec::before, .elementor-354 .elementor-element.elementor-element-757b4ec > .elementor-background-video-container::before, .elementor-354 .elementor-element.elementor-element-757b4ec > .e-con-inner > .elementor-background-video-container::before, .elementor-354 .elementor-element.elementor-element-757b4ec > .elementor-background-slideshow::before, .elementor-354 .elementor-element.elementor-element-757b4ec > .e-con-inner > .elementor-background-slideshow::before, .elementor-354 .elementor-element.elementor-element-757b4ec > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-354 .elementor-element.elementor-element-0184c3e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-354 .elementor-element.elementor-element-0184c3e.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-354 .elementor-element.elementor-element-9c6ca75{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-354 .elementor-element.elementor-element-de18455 .elementor-accordion-item{border-width:0px;}.elementor-354 .elementor-element.elementor-element-de18455 .elementor-accordion-item .elementor-tab-content{border-width:0px;}.elementor-354 .elementor-element.elementor-element-de18455 .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:0px;}.elementor-354 .elementor-element.elementor-element-e8ea37d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-354 .elementor-element.elementor-element-e8ea37d > .elementor-shape-top .elementor-shape-fill, .elementor-354 .elementor-element.elementor-element-e8ea37d > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#FAF6F2;}.elementor-354 .elementor-element.elementor-element-e8ea37d > .elementor-shape-top svg, .elementor-354 .elementor-element.elementor-element-e8ea37d > .e-con-inner > .elementor-shape-top svg{width:calc(100% + 1.3px);height:80px;}.elementor-354 .elementor-element.elementor-element-e8ea37d > .elementor-shape-top, .elementor-354 .elementor-element.elementor-element-e8ea37d > .e-con-inner > .elementor-shape-top{z-index:2;pointer-events:none;}.elementor-354 .elementor-element.elementor-element-62a075b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:100px;--padding-bottom:120px;--padding-left:40px;--padding-right:40px;}.elementor-354 .elementor-element.elementor-element-62a075b:not(.elementor-motion-effects-element-type-background), .elementor-354 .elementor-element.elementor-element-62a075b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:1024px){.elementor-354 .elementor-element.elementor-element-1e8c1e3{margin:-35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-354 .elementor-element.elementor-element-ad69325{--e-n-carousel-swiper-slides-to-display:3;}.elementor-354 .elementor-element.elementor-element-757b4ec{--gap:60px 60px;--row-gap:60px;--column-gap:60px;--padding-top:80px;--padding-bottom:80px;--padding-left:30px;--padding-right:30px;}.elementor-354 .elementor-element.elementor-element-e8ea37d > .elementor-shape-top svg, .elementor-354 .elementor-element.elementor-element-e8ea37d > .e-con-inner > .elementor-shape-top svg{width:calc(200% + 1.3px);height:60px;}.elementor-354 .elementor-element.elementor-element-e8ea37d{--padding-top:45px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-354 .elementor-element.elementor-element-62a075b{--padding-top:100px;--padding-bottom:90px;--padding-left:30px;--padding-right:30px;}}@media(max-width:767px){.elementor-354 .elementor-element.elementor-element-ad69325{--e-n-carousel-swiper-slides-to-display:1;}.elementor-354 .elementor-element.elementor-element-757b4ec{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:60px;--padding-bottom:60px;--padding-left:30px;--padding-right:30px;}.elementor-354 .elementor-element.elementor-element-0184c3e{--width:100%;}.elementor-354 .elementor-element.elementor-element-e8ea37d > .elementor-shape-top svg, .elementor-354 .elementor-element.elementor-element-e8ea37d > .e-con-inner > .elementor-shape-top svg{height:20px;}.elementor-354 .elementor-element.elementor-element-e8ea37d{--padding-top:35px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-354 .elementor-element.elementor-element-62a075b{--padding-top:80px;--padding-bottom:70px;--padding-left:30px;--padding-right:30px;}}@media(min-width:768px){.elementor-354 .elementor-element.elementor-element-0184c3e{--width:330px;}}@media(max-width:1024px) and (min-width:768px){.elementor-354 .elementor-element.elementor-element-0184c3e{--width:300px;}}/* Start custom CSS for container, class: .elementor-element-7eb714c *//* Hero video fade-in. Elementor gives Vimeo backgrounds no loading state, so the iframe popped in over the poster. The embed class arrives when the player is ready (~0.35 s before playback), so fade from there; the poster stays underneath. `both` holds opacity 0 through the delay, and if animations are ever disabled the iframe simply stays visible. */
@keyframes pbHeroVideoFade{from{opacity:0}to{opacity:1}}
.elementor-354 .elementor-element.elementor-element-7eb714c .elementor-background-video-embed{animation:pbHeroVideoFade 1.1s ease-out .3s both;}
@media(prefers-reduced-motion:reduce){.elementor-354 .elementor-element.elementor-element-7eb714c .elementor-background-video-embed{animation:none;}}/* End custom CSS */
/* Start custom CSS *//* ===== explore banners (matched to the Events "While You're Here" cards) ===== */
body.elementor-page-354 #beach-explore{width:100%;max-width:1494px;margin:60px auto 0;padding:0;display:flex;border-radius:20px;overflow:hidden;position:relative;}
body.elementor-page-354 #beach-banner-1,body.elementor-page-354 #beach-banner-2{position:relative;overflow:hidden;flex:1 1 0%;min-width:0;display:block;height:clamp(290px,27vw,450px);padding:0;}
body.elementor-page-354 #beach-banner-2{border-left:2px solid rgba(255,255,255,0.8);}
body.elementor-page-354 #beach-banner-1>img,body.elementor-page-354 #beach-banner-2>img{position:absolute;top:0;left:0;width:100%!important;max-width:none;height:100%;object-fit:cover;z-index:0;transition:transform 350ms;}
body.elementor-page-354 #beach-banner-1>img{object-position:15% 82%;}
body.elementor-page-354 #beach-banner-2>img{object-position:0% 100%;}
body.elementor-page-354 #beach-banner-1::after,body.elementor-page-354 #beach-banner-2::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,0.58),rgba(0,0,0,0.06) 65%);transition:background 250ms;z-index:1;pointer-events:none;border:none!important;}
body.elementor-page-354 #beach-banner-1:hover::after,body.elementor-page-354 #beach-banner-2:hover::after,body.elementor-page-354 #beach-banner-1:focus-within::after,body.elementor-page-354 #beach-banner-2:focus-within::after{background:linear-gradient(0deg,rgba(0,0,0,0.7),rgba(0,0,0,0.16) 72%);}
body.elementor-page-354 #beach-banner-1:hover>img,body.elementor-page-354 #beach-banner-2:hover>img{transform:scale(1.025);}
body.elementor-page-354 #beach-banner-1>div,body.elementor-page-354 #beach-banner-2>div{position:absolute;left:42px;bottom:38px;z-index:2;padding:0;display:flex;flex-direction:column;gap:2px;transition:transform 250ms;}
body.elementor-page-354 #beach-banner-1:hover>div,body.elementor-page-354 #beach-banner-2:hover>div,body.elementor-page-354 #beach-banner-1:focus-within>div,body.elementor-page-354 #beach-banner-2:focus-within>div{transform:translateY(-4px);}
body.elementor-page-354 #beach-banner-1>div>p,body.elementor-page-354 #beach-banner-2>div>p{font-style:italic;margin:0;}
body.elementor-page-354 #beach-banner-1 h3,body.elementor-page-354 #beach-banner-2 h3{margin:0;}
body.elementor-page-354 #beach-banner-link-1,body.elementor-page-354 #beach-banner-link-2{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;display:block;width:100%!important;height:100%!important;max-width:none!important;background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;margin:0!important;font-size:0!important;line-height:0!important;color:transparent!important;overflow:hidden;box-shadow:none!important;}
body.elementor-page-354 #beach-banner-link-1:focus-visible,body.elementor-page-354 #beach-banner-link-2:focus-visible{outline:none;}
body.elementor-page-354 #beach-banner-1:focus-within,body.elementor-page-354 #beach-banner-2:focus-within{outline:3px solid #FFFFFF;outline-offset:-6px;}
@media(max-width:767px){
body.elementor-page-354 #beach-explore{flex-direction:column;gap:0;border-radius:20px;overflow:hidden;margin-top:40px;}
body.elementor-page-354 #beach-banner-1,body.elementor-page-354 #beach-banner-2{height:300px;width:100%;border-radius:0;flex:0 0 auto;}
body.elementor-page-354 #beach-banner-2{border-left:none;border-top:2px solid rgba(255,255,255,0.8);}
body.elementor-page-354 #beach-banner-1>div,body.elementor-page-354 #beach-banner-2>div{left:26px;bottom:26px;}
}
@media(prefers-reduced-motion:reduce){
body.elementor-page-354 #beach-banner-1>img,body.elementor-page-354 #beach-banner-2>img,body.elementor-page-354 #beach-banner-1>div,body.elementor-page-354 #beach-banner-2>div{transition:none;}
}

/* ===== FAQ accordion - shared house style (matches Home Collections #hc-accordion) ===== */
body.elementor-page-354 .rental-faq{width:100%;}
body.elementor-page-354 .rental-faq .elementor-accordion{border:0;}
body.elementor-page-354 .rental-faq .elementor-accordion-item{border:0!important;border-bottom:1px solid rgba(99,93,88,.45)!important;background:transparent;}
body.elementor-page-354 .rental-faq .elementor-tab-title{padding:24px 0!important;display:block;font:700 14px/18px 'nexa',sans-serif;letter-spacing:2.1px;text-transform:uppercase;color:#18948d;background:transparent!important;border:0!important;}
body.elementor-page-354 .rental-faq .elementor-accordion-title{color:#18948d;font:inherit;}
body.elementor-page-354 .rental-faq .elementor-accordion-icon{float:right;width:24px;margin-left:20px;}
body.elementor-page-354 .rental-faq .elementor-accordion-icon svg{width:7px;height:15px;}
body.elementor-page-354 .rental-faq .elementor-accordion-icon-closed svg{transform:rotate(180deg);}
body.elementor-page-354 .rental-faq .elementor-accordion-icon-opened svg{transform:rotate(-90deg);}
body.elementor-page-354 .rental-faq .elementor-tab-content{padding:0 60px 28px 0!important;border:0!important;background:transparent!important;color:#635d58;font:400 16px/22px 'nunito',sans-serif;}
body.elementor-page-354 .rental-faq .elementor-tab-content p{margin:0;}
@media(max-width:767px){
body.elementor-page-354 .rental-faq .elementor-tab-title{font-size:12px;line-height:19px;letter-spacing:1.5px;}
body.elementor-page-354 .rental-faq .elementor-tab-content{padding-right:0!important;}
}

/* ==========================================================================
   EXPERIENCE  — built from Figma 1UGtSN4jy8ocNSPmUG2z5N node 1442:3606
   ("26-PB - Experience 5", 1682 x 9378).  Everything ABOVE this banner is the
   pre-existing CSS for the FAQ accordion and the two explore banners — leave
   it alone.

   Governing rule: every band is a full-bleed photo, so the copy beside it is
   derived from the SAME 1682 frame (left 128 -> 7.61vw, right 1030 ->
   61.237vw) instead of the house centred container.  Mixing a proportional
   photo with a container-based column matches at exactly one viewport.
   ========================================================================== */

/* --- the five wave shapes ------------------------------------------------
   Fingerprinting all ten band vectors showed only FIVE distinct paths: golf,
   beach (photo AND scrim) and oasis (photo AND scrim) are one shape used five
   times.  All five masks were re-expressed in 1682 frame coordinates, so each
   one is simply `100% <height>vw` at `center top`.
   Parks deliberately uses ONE shape for photo and scrim; Figma draws them
   1823.644 and 1816 wide, which is the fringe bug drawn into the file. ---- */
body.elementor-page-354{
--exp-wave-intro:url('/wp-content/uploads/2026/09/experience-wave-mask-intro-band-frame-1682x761-572.svg');
--exp-wave-a:url('/wp-content/uploads/2026/09/experience-wave-mask-a-golf-beach-oasis-frame-1682x791-577.svg');
--exp-wave-pools:url('/wp-content/uploads/2026/09/experience-wave-mask-pools-band-frame-1682x773-1.svg');
--exp-wave-dining:url('/wp-content/uploads/2026/09/experience-wave-mask-dining-band-frame-1682x1224-1.svg');
--exp-wave-parks:url('/wp-content/uploads/2026/09/experience-wave-mask-parks-band-frame-1682x775-1.svg');
}

/* ===== shared scaffolding ===== */
body.elementor-page-354 #experience-hero,
body.elementor-page-354 #experience-intro,
body.elementor-page-354 #experience-golf,
body.elementor-page-354 #experience-beach,
body.elementor-page-354 #experience-pools,
body.elementor-page-354 #experience-oasis,
body.elementor-page-354 #experience-dining,
body.elementor-page-354 #experience-parks{
padding:0;width:100%;max-width:none;position:relative;overflow:hidden;
display:grid;grid-template-columns:100%;align-items:center;
}
body.elementor-page-354 #experience-hero>*,
body.elementor-page-354 #experience-intro>*,
body.elementor-page-354 #experience-golf>*,
body.elementor-page-354 #experience-beach>*,
body.elementor-page-354 #experience-pools>*,
body.elementor-page-354 #experience-oasis>*,
body.elementor-page-354 #experience-dining>*,
body.elementor-page-354 #experience-parks>*{grid-area:1/1;min-width:0;}
body.elementor-page-354 #experience-img-sizes{display:none!important;}

/* Figma's layer order is NOT the DOM order: the intro sits above both the
   hero and golf, and beach sits above pools.  Everything else stacks in
   source order.  Hence the z ladder rather than relying on painting order. */
body.elementor-page-354 #experience-hero{z-index:1;min-height:54.043vw;}
body.elementor-page-354 #experience-intro{z-index:4;min-height:45.278vw;margin-top:-11.118vw;}
body.elementor-page-354 #experience-golf{z-index:2;min-height:47.062vw;margin-top:-6.455vw;}
body.elementor-page-354 #experience-beach{z-index:4;min-height:47.062vw;margin-top:-6.752vw;}
body.elementor-page-354 #experience-pools{z-index:2;min-height:45.957vw;margin-top:-6.158vw;}
body.elementor-page-354 #experience-oasis{z-index:5;min-height:47.062vw;margin-top:-7.075vw;}
body.elementor-page-354 #experience-dining{z-index:6;min-height:72.771vw;margin-top:-6.574vw;}
body.elementor-page-354 #experience-parks{z-index:7;min-height:46.076vw;margin-top:-31.353vw;}

/* ===== masks =====
   mask-size is `100% 100%`, not `100% <figma>vw`: the copy can make a section
   TALLER than its Figma height at narrow desktop widths, and a fixed-height
   mask would leave that extra strip transparent — which is what clipped the
   intro headline at 1025.  At 1682 the section height IS the vw figure, so
   nothing changes at the design width. */
body.elementor-page-354 #experience-intro{
background:#FFFFFF;
-webkit-mask-image:var(--exp-wave-intro);mask-image:var(--exp-wave-intro);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center top;mask-position:center top;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body.elementor-page-354 #experience-golf{
background:#FFFFFF;
-webkit-mask-image:var(--exp-wave-a);mask-image:var(--exp-wave-a);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center top;mask-position:center top;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body.elementor-page-354 #experience-pools{
background:#FFFFFF;
-webkit-mask-image:var(--exp-wave-pools);mask-image:var(--exp-wave-pools);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center top;mask-position:center top;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body.elementor-page-354 #experience-dining{
background:#FFFFFF;
-webkit-mask-image:var(--exp-wave-dining);mask-image:var(--exp-wave-dining);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center top;mask-position:center top;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* the three scrim bands mask the PHOTO and the SCRIM, not the section, so the
   copy beside them is never clipped by the wave */
body.elementor-page-354 #experience-beach-photo,body.elementor-page-354 #experience-beach-scrim,
body.elementor-page-354 #experience-oasis-photo,body.elementor-page-354 #experience-oasis-scrim{
-webkit-mask-image:var(--exp-wave-a);mask-image:var(--exp-wave-a);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center top;mask-position:center top;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body.elementor-page-354 #experience-parks-photo,body.elementor-page-354 #experience-parks-scrim{
-webkit-mask-image:var(--exp-wave-parks);mask-image:var(--exp-wave-parks);
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center top;mask-position:center top;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ===== photos ===== */
body.elementor-page-354 #experience-hero-photo,
body.elementor-page-354 #experience-intro-photo,
body.elementor-page-354 #experience-golf-photo,
body.elementor-page-354 #experience-beach-photo,
body.elementor-page-354 #experience-pools-photo,
body.elementor-page-354 #experience-oasis-photo,
body.elementor-page-354 #experience-dining-photo,
body.elementor-page-354 #experience-parks-photo{
align-self:stretch;height:100%;min-width:0;line-height:0;padding:0;
}
body.elementor-page-354 #experience-hero-photo img,
body.elementor-page-354 #experience-intro-photo img,
body.elementor-page-354 #experience-golf-photo img,
body.elementor-page-354 #experience-beach-photo img,
body.elementor-page-354 #experience-pools-photo img,
body.elementor-page-354 #experience-oasis-photo img,
body.elementor-page-354 #experience-dining-photo img,
body.elementor-page-354 #experience-parks-photo img{
display:block;width:100%;height:100%;object-fit:cover;
}
body.elementor-page-354 #experience-hero-photo img{object-position:center bottom;}
body.elementor-page-354 #experience-intro-photo img{object-position:0% center;}
body.elementor-page-354 #experience-golf-photo img{object-position:100% center;}
body.elementor-page-354 #experience-beach-photo img{object-position:center 45%;}
body.elementor-page-354 #experience-oasis-photo img{object-position:center 67%;}
body.elementor-page-354 #experience-parks-photo img{object-position:center 32%;}
/* pools and dining are drawn MIRRORED in Figma — the CROP fill carries a
   negative x-scale.  Verified against the rendered frame: mean|diff| 4.6 and
   3.9 mirrored, against 60 and 76 un-mirrored. */
body.elementor-page-354 #experience-pools-photo img,
body.elementor-page-354 #experience-dining-photo img{transform:scaleX(-1);}
/* scaleX(-1) flips the element AFTER object-position has chosen the crop, so
   the position must still be expressed in the IMAGE's own axis — inverting it
   showed the left of the photo where Figma shows the right.  These two values
   were solved by sweeping object-position against the rendered Figma band and
   taking the minimum mean|diff|, which agrees with the transform algebra. */
body.elementor-page-354 #experience-pools-photo img{object-position:97% center;}
body.elementor-page-354 #experience-dining-photo img{object-position:100% center;}

/* ===== scrims =====
   Two separately masked layers can never cover each other cleanly: along the
   antialiased edge a fraction a*(1-a) of the photo survives and traces a 1px
   fringe round the whole wave.  The fix needs BOTH halves — identical box
   geometry, and a centre-scale so the scrim's opaque edge lands outside the
   photo's on all four sides.  transform does not affect layout. */
body.elementor-page-354 #experience-beach-scrim,
body.elementor-page-354 #experience-oasis-scrim,
body.elementor-page-354 #experience-parks-scrim{
align-self:stretch;height:100%;width:100%;padding:0;z-index:1;pointer-events:none;
transform:scale(1.004);transform-origin:center;
}
/* converted from the Figma linearGradient endpoints (beach/oasis 1443,352 ->
   529,804; parks 1333,484.854 -> 305.706,351.577).  The 243.7deg result
   reproduces the angle already shipped on Groups, which is a useful check. */
body.elementor-page-354 #experience-beach-scrim,
body.elementor-page-354 #experience-oasis-scrim{
background-image:linear-gradient(243.7deg,#FFFFFF 0%,#FFFFFF 26.9%,rgba(255,255,255,0) 77%);
}
body.elementor-page-354 #experience-parks-scrim{
background-image:linear-gradient(277.4deg,#FFFFFF 0%,#FFFFFF 27.2%,rgba(255,255,255,0) 81.7%);
}

/* ===== typography ===== */
body.elementor-page-354 #experience-hero h1{
font-family:"richmond-display",Georgia,serif;font-weight:400;font-style:italic;
font-size:65px;line-height:54px;letter-spacing:0;color:#FFFFFF;margin:0;text-align:center;
}
body.elementor-page-354 #experience-hero h1 em{
display:block;font-family:nexa,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;
font-size:24px;line-height:40px;letter-spacing:3.6px;text-transform:uppercase;color:#FFFFFF;
}
body.elementor-page-354 #experience-intro h2,
body.elementor-page-354 #experience-golf h2,
body.elementor-page-354 #experience-beach h2,
body.elementor-page-354 #experience-pools h2,
body.elementor-page-354 #experience-oasis h2,
body.elementor-page-354 #experience-dining h2,
body.elementor-page-354 #experience-parks h2{
font-family:"richmond-display",Georgia,serif;font-weight:300;font-style:normal;
font-size:42px;line-height:42px;letter-spacing:1.26px;color:#000000;margin:0;
}
body.elementor-page-354 #experience-intro h2 em,
body.elementor-page-354 #experience-golf h2 em,
body.elementor-page-354 #experience-beach h2 em,
body.elementor-page-354 #experience-pools h2 em,
body.elementor-page-354 #experience-oasis h2 em,
body.elementor-page-354 #experience-dining h2 em,
body.elementor-page-354 #experience-parks h2 em{font-style:italic;font-weight:300;}
body.elementor-page-354 #experience-intro-body,
body.elementor-page-354 #experience-golf-body,
body.elementor-page-354 #experience-beach-body,
body.elementor-page-354 #experience-pools-body,
body.elementor-page-354 #experience-oasis-body,
body.elementor-page-354 #experience-dining-body,
body.elementor-page-354 #experience-parks-body{
font-family:nunito,Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:22px;
color:#000000;margin:0;
}

/* ===== copy blocks =====
   Figma runs seven different heading->body gaps (20/21/22/24/24/25/29) and six
   different body->button gaps (29/29/32/34/37/46).  That is text-box leading,
   not design, so the house scale is applied throughout: 22 and 40. */
body.elementor-page-354 #experience-intro-copy,
body.elementor-page-354 #experience-golf-copy,
body.elementor-page-354 #experience-beach-copy,
body.elementor-page-354 #experience-pools-copy,
body.elementor-page-354 #experience-oasis-copy,
body.elementor-page-354 #experience-dining-copy,
body.elementor-page-354 #experience-parks-copy{
display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;position:relative;z-index:2;
}
body.elementor-page-354 #experience-intro-body,
body.elementor-page-354 #experience-golf-body,
body.elementor-page-354 #experience-beach-body,
body.elementor-page-354 #experience-pools-body,
body.elementor-page-354 #experience-oasis-body,
body.elementor-page-354 #experience-dining-body,
body.elementor-page-354 #experience-parks-body{margin-top:22px;}
body.elementor-page-354 #experience-golf-btn,
body.elementor-page-354 #experience-beach-btn,
body.elementor-page-354 #experience-pools-btn,
body.elementor-page-354 #experience-oasis-btn,
body.elementor-page-354 #experience-dining-btn,
body.elementor-page-354 #experience-parks-btn{margin-top:40px;}
body.elementor-page-354 #experience-intro-nav{margin-top:30px;}
body.elementor-page-354 #experience-hero-copy{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 30px;position:relative;z-index:2;
}

@media(min-width:1025px){
/* A grid child sized `height:100%` against an auto-height row just falls back
   to the image's own aspect, which made the hero 1121px instead of 909.  The
   photos and scrims are therefore taken out of flow, so section height is the
   Figma band height (min-height) and the copy is what can grow it. */
body.elementor-page-354 #experience-hero-photo,
body.elementor-page-354 #experience-intro-photo,
body.elementor-page-354 #experience-golf-photo,
body.elementor-page-354 #experience-beach-photo,
body.elementor-page-354 #experience-pools-photo,
body.elementor-page-354 #experience-oasis-photo,
body.elementor-page-354 #experience-dining-photo,
body.elementor-page-354 #experience-parks-photo,
body.elementor-page-354 #experience-beach-scrim,
body.elementor-page-354 #experience-oasis-scrim,
body.elementor-page-354 #experience-parks-scrim{
position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;
}
/* the hard vertical edges, straight off the Figma frame */
body.elementor-page-354 #experience-intro-photo{right:auto;width:55.737vw;}
body.elementor-page-354 #experience-golf-photo{left:auto;width:50vw;}
body.elementor-page-354 #experience-pools-photo{left:auto;width:49.798vw;}
body.elementor-page-354 #experience-dining-photo{left:auto;width:47.491vw;}

/* Left column 128/1682 = 7.61vw, right column 1030/1682 = 61.237vw, and BOTH
   are plain proportional figures.  They used to carry a `calc()` floor meant to
   guarantee the copy a minimum measure, and on the RIGHT column that was
   actively wrong: `calc(100vw - 470px)` beats 61.237vw for every width under
   1212, so between 1025 and 1212 the copy was dragged up to 73px LEFT of where
   the design puts it — 16px INSIDE the intro photograph at 1025, and off the
   white end of the beach/oasis/parks scrims onto the photographs themselves.
   The photo edges and the scrim gradients are all proportional to the viewport,
   so the copy has to be too: any px floor breaks the relationship.  (The left
   column's floor only bound below a 708px viewport, i.e. never on desktop, but
   it is the same trap and is gone as well.) */
body.elementor-page-354 #experience-golf-copy,
body.elementor-page-354 #experience-pools-copy,
body.elementor-page-354 #experience-dining-copy{
padding-left:7.61vw;padding-right:4vw;
}
body.elementor-page-354 #experience-intro-copy,
body.elementor-page-354 #experience-beach-copy,
body.elementor-page-354 #experience-oasis-copy,
body.elementor-page-354 #experience-parks-copy{
padding-left:61.237vw;padding-right:2.2vw;
}
/* absolute type in a proportional column needs more measure below the design
   width, so the headline is tied to the column and the measures are capped. */
body.elementor-page-354 #experience-intro h2,
body.elementor-page-354 #experience-golf h2,
body.elementor-page-354 #experience-beach h2,
body.elementor-page-354 #experience-pools h2,
body.elementor-page-354 #experience-oasis h2,
body.elementor-page-354 #experience-dining h2,
body.elementor-page-354 #experience-parks h2{font-size:min(42px,2.95vw);line-height:1.02;}
/* Every measure is its own Figma text box.  A single shared cap put the intro
   paragraph at 481px where Figma draws 412.
   The HEADLINES keep Figma's ABSOLUTE width rather than a proportional one:
   the type is absolute, so scaling the measure by viewport re-breaks the line.
   At 1440 that put "Coastal Golf On The Shores Of Port Aransas" and "Parks
   Where The Fun Finds You" onto three lines where Figma has two.  The copy
   block below is capped to the photo's edge instead, which is what stops the
   absolute measure over-running the photo at 1025. */
body.elementor-page-354 #experience-intro h2{max-width:min(100%,435px);}
body.elementor-page-354 #experience-golf h2{max-width:min(100%,435px);}
body.elementor-page-354 #experience-beach h2{max-width:min(100%,522px);}
body.elementor-page-354 #experience-pools h2{max-width:min(100%,508px);}
body.elementor-page-354 #experience-oasis h2{max-width:min(100%,442px);}
body.elementor-page-354 #experience-dining h2{max-width:min(100%,508px);}
body.elementor-page-354 #experience-parks h2{max-width:min(100%,327px);}
/* bound each left-hand copy block to its photo's edge, so an absolute measure
   can never run under the photograph as the viewport narrows */
body.elementor-page-354 #experience-golf-copy{max-width:calc(50vw - 24px);}
body.elementor-page-354 #experience-pools-copy{max-width:calc(50.202vw - 24px);}
body.elementor-page-354 #experience-dining-copy{max-width:calc(52.509vw - 24px);}
body.elementor-page-354 #experience-intro-body{max-width:min(100%,clamp(300px,32.104vw,540px));}
body.elementor-page-354 #experience-golf-body{max-width:min(100%,clamp(300px,32.104vw,540px));}
body.elementor-page-354 #experience-beach-body{max-width:min(100%,clamp(300px,32.104vw,540px));}
body.elementor-page-354 #experience-pools-body{max-width:min(100%,clamp(300px,32.104vw,540px));}
body.elementor-page-354 #experience-oasis-body{max-width:min(100%,clamp(300px,32.104vw,540px));}
body.elementor-page-354 #experience-dining-body{max-width:min(100%,clamp(300px,32.104vw,540px));}
body.elementor-page-354 #experience-parks-body{max-width:min(100%,clamp(300px,32.104vw,540px));}
/* Dining is the one band whose copy is NOT centred in Figma.  Its wave is
   1223.5 tall against everyone else's ~791, and the parks band starts 696 into
   it, so the design puts the copy in the upper third: title top 4423 against a
   band top of 4170 = 253/1682 = 15.041vw.  Centring it (the other six bands are
   centred to within 1-4% of their height) dropped it 205px and read as bottom
   aligned. */
body.elementor-page-354 #experience-dining-copy{align-self:start;}

/* ===== band clearance =====
   The type is ABSOLUTE and the bands are PROPORTIONAL, so every band gets
   tighter as the viewport narrows: measured against each wave's own opaque
   edge (the mask rasterised at the band's rendered size and scanned over the
   copy's x-range, not the element box), the intro ran 150px of clearance at
   1682, 29 at 1440, and **-3 at 1025** — the headline was being cut off by its
   own mask.  Padding the copy block makes the SECTION grow when the copy needs
   it (min-height still wins at 1682, so the design width is untouched), and
   the mask-size change above lets the wave follow that growth.
   96px was chosen as the largest value that changes nothing at 1682. */
body.elementor-page-354 #experience-intro-copy,
body.elementor-page-354 #experience-golf-copy,
body.elementor-page-354 #experience-beach-copy,
body.elementor-page-354 #experience-pools-copy,
body.elementor-page-354 #experience-oasis-copy,
body.elementor-page-354 #experience-parks-copy{padding-top:96px;padding-bottom:96px;}
/* Dining cannot use padding: its copy is anchored to the band TOP, and the
   parks band eats the bottom 31.353vw, so the copy has to fit in the first
   41.418vw.  At 1025 that region is 425px against 337px of copy — the Learn
   More button was 66px UNDER the parks photo, which paints over it (z 7 vs 6).
   The band therefore gets an 880px floor, and the offset keeps Figma's 253/1682
   while there is room and gives way to the available region when there is not. */
body.elementor-page-354 #experience-dining{min-height:max(880px,72.771vw);}
body.elementor-page-354 #experience-dining-copy{
margin-top:max(96px,min(15.041vw,calc(41.418vw - 430px)));
}
}

/* ===== hero scrim =====
   The hero is now a video, so the backdrop under the title changes every frame
   and the scrim has to hold for the worst of them.  White over the brightest
   possible backdrop (pure white — the pergola and the overcast sky both get
   close) needs a 41.6% black wash to reach the 3:1 both lines require as WCAG
   large text; 45% lands at 3.4:1 with margin.
   It is a VERTICAL BAND, not the ellipse this section carried when it was a
   still.  Over a flat sky an ellipse reads as a dark smudge on the picture —
   clearly visible in the overcast beach frame — while a band that is uniform
   across the width reads as ordinary cinematic grading.  The still (media 183)
   keeps the same treatment: it only appears while the player loads, or under
   prefers-reduced-motion / Save-Data, and it clears 3:1 easily either way. */
body.elementor-page-354 #experience-hero::after{
content:'';position:absolute;inset:0;top:auto!important;bottom:0;height:100%;
z-index:1;pointer-events:none;border:none!important;
background:linear-gradient(180deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.45) 54%,rgba(0,0,0,.24) 82%,rgba(0,0,0,.10) 100%);
}

/* ===== jump nav ===== */
body.elementor-page-354 #experience-intro-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
body.elementor-page-354 #experience-intro-nav li{margin:0;padding:0;}
body.elementor-page-354 #experience-intro-nav a{
font-family:nexa,Helvetica,Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:3px;
text-transform:uppercase;color:#000000;text-decoration:none;line-height:26px;
display:inline-flex;align-items:center;gap:7px;transition:color .2s ease;
}
body.elementor-page-354 #experience-intro-nav a::after{content:'\203A';font-size:15px;line-height:1;position:relative;top:-1px;}
body.elementor-page-354 #experience-intro-nav a:hover{color:#097173;}

/* ===== buttons =====
   Figma's "Learn More" is 142x37 with a 7.9px label — that size is an artefact
   of a component scaled down on the canvas, so the label is set to a legible
   11px and the box grows to suit (~142 as drawn).  The kit forces 272px /
   #126472 / a white chevron on every .elementor-button, so each property has
   to be reclaimed with !important.  The painted box stays 37px; an invisible
   ::after supplies the 44px touch target without changing how it looks. */
body.elementor-page-354 .experience-btn .elementor-button{
width:auto!important;min-width:0!important;max-width:none!important;
height:37px;min-height:0;padding:0 33px 0 23px!important;
background-color:#126472!important;border:none!important;border-radius:3px!important;
font-family:nexa,Helvetica,Arial,sans-serif!important;font-weight:700!important;
font-size:11px!important;letter-spacing:1.65px!important;text-transform:uppercase!important;
line-height:1!important;color:#FFFFFF!important;
display:inline-flex!important;align-items:center;justify-content:flex-start;
background-position:right 16px center!important;background-repeat:no-repeat!important;
position:relative;transition:background-color .2s ease;
}
body.elementor-page-354 .experience-btn .elementor-button:hover{background-color:#097173!important;}
body.elementor-page-354 .experience-btn .elementor-button::after{
content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
height:44px;border:none!important;background:none!important;
}

/* ===== tablet + phone =====
   The bands stop overlapping and become [photo][white copy panel].  That makes
   the copy block's own padding-bottom the visible gap under the button, which
   is the Dining trap — so it is the house 56px to the next hard edge. */
@media(max-width:1024px){
body.elementor-page-354 #experience-intro,
body.elementor-page-354 #experience-golf,
body.elementor-page-354 #experience-beach,
body.elementor-page-354 #experience-pools,
body.elementor-page-354 #experience-oasis,
body.elementor-page-354 #experience-dining,
body.elementor-page-354 #experience-parks{
display:block;min-height:0;margin-top:0;
-webkit-mask-image:none!important;mask-image:none!important;background:#FFFFFF;
}
body.elementor-page-354 #experience-hero{min-height:clamp(430px,68vw,560px);}
body.elementor-page-354 #experience-intro-photo,
body.elementor-page-354 #experience-golf-photo,
body.elementor-page-354 #experience-beach-photo,
body.elementor-page-354 #experience-pools-photo,
body.elementor-page-354 #experience-oasis-photo,
body.elementor-page-354 #experience-dining-photo,
body.elementor-page-354 #experience-parks-photo{
width:100%!important;height:clamp(300px,42vw,430px);}
body.elementor-page-354 #experience-intro-photo img,
body.elementor-page-354 #experience-golf-photo img,
body.elementor-page-354 #experience-beach-photo img,
body.elementor-page-354 #experience-pools-photo img,
body.elementor-page-354 #experience-oasis-photo img,
body.elementor-page-354 #experience-dining-photo img,
body.elementor-page-354 #experience-parks-photo img{height:100%;}
/* each photo keeps its own wave, now stretched to its box */
body.elementor-page-354 #experience-intro-photo{
-webkit-mask-image:var(--exp-wave-intro);mask-image:var(--exp-wave-intro);}
body.elementor-page-354 #experience-golf-photo,
body.elementor-page-354 #experience-beach-photo,
body.elementor-page-354 #experience-oasis-photo{
-webkit-mask-image:var(--exp-wave-a);mask-image:var(--exp-wave-a);}
body.elementor-page-354 #experience-pools-photo{
-webkit-mask-image:var(--exp-wave-pools);mask-image:var(--exp-wave-pools);}
body.elementor-page-354 #experience-dining-photo{
-webkit-mask-image:var(--exp-wave-dining);mask-image:var(--exp-wave-dining);}
body.elementor-page-354 #experience-parks-photo{
-webkit-mask-image:var(--exp-wave-parks);mask-image:var(--exp-wave-parks);}
body.elementor-page-354 #experience-intro-photo,
body.elementor-page-354 #experience-golf-photo,
body.elementor-page-354 #experience-beach-photo,
body.elementor-page-354 #experience-pools-photo,
body.elementor-page-354 #experience-oasis-photo,
body.elementor-page-354 #experience-dining-photo,
body.elementor-page-354 #experience-parks-photo{
-webkit-mask-size:100% 100%;mask-size:100% 100%;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* the copy is no longer over the photo, so the scrims have nothing to do */
body.elementor-page-354 #experience-beach-scrim,
body.elementor-page-354 #experience-oasis-scrim,
body.elementor-page-354 #experience-parks-scrim{display:none;}
body.elementor-page-354 #experience-intro-copy,
body.elementor-page-354 #experience-golf-copy,
body.elementor-page-354 #experience-beach-copy,
body.elementor-page-354 #experience-pools-copy,
body.elementor-page-354 #experience-oasis-copy,
body.elementor-page-354 #experience-dining-copy,
body.elementor-page-354 #experience-parks-copy{
padding:30px 30px 56px 30px!important;width:100%;max-width:none;
}
body.elementor-page-354 #experience-intro h2,
body.elementor-page-354 #experience-golf h2,
body.elementor-page-354 #experience-beach h2,
body.elementor-page-354 #experience-pools h2,
body.elementor-page-354 #experience-oasis h2,
body.elementor-page-354 #experience-dining h2,
body.elementor-page-354 #experience-parks h2{font-size:36px;line-height:38px;max-width:min(100%,640px);}
body.elementor-page-354 #experience-intro-body,
body.elementor-page-354 #experience-golf-body,
body.elementor-page-354 #experience-beach-body,
body.elementor-page-354 #experience-pools-body,
body.elementor-page-354 #experience-oasis-body,
body.elementor-page-354 #experience-dining-body{max-width:min(100%,540px);}
body.elementor-page-354 #experience-parks-body{max-width:min(100%,540px);}
body.elementor-page-354 #experience-hero h1{font-size:46px;line-height:44px;}
body.elementor-page-354 #experience-hero h1 em{font-size:18px;line-height:32px;letter-spacing:2.7px;}
/* 26px line-height is not a 44px touch target */
body.elementor-page-354 #experience-intro-nav a{padding-block:9px;}
}

@media(max-width:767px){
body.elementor-page-354 #experience-intro h2,
body.elementor-page-354 #experience-golf h2,
body.elementor-page-354 #experience-beach h2,
body.elementor-page-354 #experience-pools h2,
body.elementor-page-354 #experience-oasis h2,
body.elementor-page-354 #experience-dining h2,
body.elementor-page-354 #experience-parks h2{font-size:32px;line-height:34px;}
body.elementor-page-354 #experience-hero h1{font-size:clamp(34px,10vw,40px);line-height:1.06;}
body.elementor-page-354 #experience-hero h1 em{font-size:clamp(14px,4vw,16px);line-height:28px;letter-spacing:2.1px;}
body.elementor-page-354 .experience-btn{width:100%;}
body.elementor-page-354 .experience-btn .elementor-button{width:100%!important;height:44px;}
}
/* A landscape phone is ~390 tall, where the hero's 68vw asks for 574 — the
   section would be the whole screen and then some before the copy even starts. */
@media(max-width:1024px) and (orientation:landscape) and (max-height:500px){
body.elementor-page-354 #experience-hero{min-height:min(clamp(430px,68vw,560px),88vh);}
}

/* ===== a11y ===== */
body.elementor-page-354 a:focus-visible,
body.elementor-page-354 .elementor-button:focus-visible{outline:3px solid #097173;outline-offset:3px;border-radius:3px;}
body.elementor-page-354 #experience-hero-copy a:focus-visible{outline-color:#FFFFFF;}
body.elementor-page-354 .experience-hero-video-toggle:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;}
body.elementor-page-354 #experience-golf,
body.elementor-page-354 #experience-beach,
body.elementor-page-354 #experience-pools,
body.elementor-page-354 #experience-oasis,
body.elementor-page-354 #experience-dining,
body.elementor-page-354 #experience-parks,
body.elementor-page-354 #experience-amenities{scroll-margin-top:100px;}
@media(prefers-reduced-motion:reduce){
body.elementor-page-354 #experience-intro-nav a,
body.elementor-page-354 .experience-btn .elementor-button{transition:none!important;}
}

/* ===== 9. Other Amenities =====
   The sand field is media 2754 (groups-sand-bg.jpg): numerically the SAME
   composed artwork as Figma's "Sand Background" group — mean |diff| 0.26 and
   identical 1682x1432 dimensions — so it is reused rather than re-exported.
   Figma starts it at y5287, i.e. BEHIND the parks band, and it fades out to
   white at its own bottom, so the hand-off into §10 needs nothing at all.
   The section is padded to the artwork's own 1432/1682 so `100% auto` lands
   exactly; never `cover`, which would scale the grain. */
body.elementor-page-354 #experience-amenities{
position:relative;z-index:1;margin-top:-21.041vw;padding:27.229vw 0 6.883vw 0;
display:flex;flex-direction:column;align-items:flex-start;
background-color:#FFFFFF;
background-image:url('/wp-content/uploads/2026/09/groups-sand-bg.jpg');
background-repeat:no-repeat;background-position:center top;background-size:100% auto;
}
body.elementor-page-354 #experience-amenities h2{
font-family:"richmond-display",Georgia,serif;font-weight:300;font-size:42px;line-height:42px;
letter-spacing:1.26px;color:#000000;margin:0 0 0 7.61vw;
}
body.elementor-page-354 #experience-amenities h2 em{font-style:italic;font-weight:300;}
/* Figma puts the section title at x128 and the cards at x122.  They are meant
   to line up, so both sit on 7.61vw rather than keeping the 6px drift. */
body.elementor-page-354 #experience-moments{margin-top:6px;padding:0 7.61vw;}
body.elementor-page-354 #experience-moments .swiper-pagination{display:none!important;}
/* each slide's own v3 container arrives with Elementor's default 40px of side
   padding — that is what shrank a 349px card to 269px.  The padding is on the
   container INSIDE .swiper-slide, not on the slide itself. */
body.elementor-page-354 #experience-moments .swiper-slide>.e-con{padding:0!important;}

/* --- the amenity cards --------------------------------------------------
   The same component as Groups' "Bring Everyone Together By The Beach":
   349x760 at radius 51, a teal veil that fades in over the photo and a
   description that opens with it.  Figma draws the veil rgba(24,148,141,.8),
   which is the value Groups measured at 3.29:1 and replaced — the accessible
   rgba(9,113,115,.88) is used here instead.
   The 50px margin-top is Home's staggered hover lift: it reserves the travel
   so the card rises into it instead of pushing the row. */
body.elementor-page-354 #experience-card-1,
body.elementor-page-354 #experience-card-2,
body.elementor-page-354 #experience-card-3,
body.elementor-page-354 #experience-card-4{
position:relative;display:block;width:100%;padding:0;overflow:hidden;
border-radius:51px;height:min(45.198vw,760px);margin-top:50px;
transition:transform .85s ease-in-out;
}
body.elementor-page-354 #experience-card-1-photo,
body.elementor-page-354 #experience-card-2-photo,
body.elementor-page-354 #experience-card-3-photo,
body.elementor-page-354 #experience-card-4-photo{position:absolute;inset:0;padding:0;line-height:0;}
body.elementor-page-354 #experience-card-1-photo img,
body.elementor-page-354 #experience-card-2-photo img,
body.elementor-page-354 #experience-card-3-photo img,
body.elementor-page-354 #experience-card-4-photo img{display:block;width:100%;height:100%;object-fit:cover;}
/* At rest Figma paints the card title white straight onto the photo.  Sampled
   on canvas over each card's own pixels, in the title's own rows, that is
   2.78 / 3.17 / 4.55 / 2.63:1 on average and 1.98 / 1.89 / 3.10 / 1.41:1 at
   the brightest spot — 16px uppercase is normal-size text and needs 4.5:1.
   A photographic fade over the bottom 45% takes the worst case to 4.60:1 and
   the averages to 7.6-10.8:1.  It sits under the panel, so the teal veil still
   covers it on hover and on touch. */
body.elementor-page-354 #experience-card-1-photo::after,
body.elementor-page-354 #experience-card-2-photo::after,
body.elementor-page-354 #experience-card-3-photo::after,
body.elementor-page-354 #experience-card-4-photo::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:45%;z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,.62) 100%);
pointer-events:none;
}
body.elementor-page-354 #experience-card-1-panel,
body.elementor-page-354 #experience-card-2-panel,
body.elementor-page-354 #experience-card-3-panel,
body.elementor-page-354 #experience-card-4-panel{
position:absolute;left:0;right:0;bottom:0;z-index:1;
display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 26px;
background:rgba(24,148,141,0);transition:background .35s ease-in-out;
}
body.elementor-page-354 #experience-card-1-title,
body.elementor-page-354 #experience-card-2-title,
body.elementor-page-354 #experience-card-3-title,
body.elementor-page-354 #experience-card-4-title{
font-family:nunito,Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:24px;
letter-spacing:2.4px;text-transform:uppercase;color:#FFFFFF;margin:0;text-align:center;
}
body.elementor-page-354 #experience-card-1-title a,
body.elementor-page-354 #experience-card-2-title a,
body.elementor-page-354 #experience-card-3-title a,
body.elementor-page-354 #experience-card-4-title a{color:inherit;text-decoration:none;}
/* the title's own anchor is stretched over the whole card, so the card is one
   click target and one focus stop rather than carrying a second, silent link */
body.elementor-page-354 #experience-card-1-title a::after,
body.elementor-page-354 #experience-card-2-title a::after,
body.elementor-page-354 #experience-card-3-title a::after,
body.elementor-page-354 #experience-card-4-title a::after{content:'';position:absolute;inset:0;z-index:2;}
body.elementor-page-354 #experience-card-1-body,
body.elementor-page-354 #experience-card-2-body,
body.elementor-page-354 #experience-card-3-body,
body.elementor-page-354 #experience-card-4-body{
font-family:nunito,Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:22px;
color:#FFFFFF;margin:0;text-align:center;max-height:0;opacity:0;overflow:hidden;
transition:max-height .85s ease-in-out,opacity .85s ease-in-out;
}
/* The lift and the reveal-on-hover are DESKTOP ONLY.  `hover:hover` alone was
   not enough: a desktop browser narrowed to phone width still reports it, so
   the cards were lifting on mouseover at sizes where the 50px of travel is not
   reserved and the card ran up under the heading. */
@media(hover:hover) and (min-width:1025px){
body.elementor-page-354 #experience-card-1:hover,
body.elementor-page-354 #experience-card-2:hover,
body.elementor-page-354 #experience-card-3:hover,
body.elementor-page-354 #experience-card-4:hover{transform:translateY(-50px);}
body.elementor-page-354 #experience-card-1:hover #experience-card-1-panel,
body.elementor-page-354 #experience-card-2:hover #experience-card-2-panel,
body.elementor-page-354 #experience-card-3:hover #experience-card-3-panel,
body.elementor-page-354 #experience-card-4:hover #experience-card-4-panel{background:rgba(9,113,115,.88);}
body.elementor-page-354 #experience-card-1:hover #experience-card-1-body,
body.elementor-page-354 #experience-card-2:hover #experience-card-2-body,
body.elementor-page-354 #experience-card-3:hover #experience-card-3-body,
body.elementor-page-354 #experience-card-4:hover #experience-card-4-body{max-height:220px;opacity:1;}
}
/* keyboard gets the same reveal as the mouse, at every hover capability */
body.elementor-page-354 #experience-card-1:focus-within #experience-card-1-panel,
body.elementor-page-354 #experience-card-2:focus-within #experience-card-2-panel,
body.elementor-page-354 #experience-card-3:focus-within #experience-card-3-panel,
body.elementor-page-354 #experience-card-4:focus-within #experience-card-4-panel{background:rgba(9,113,115,.88);}
body.elementor-page-354 #experience-card-1:focus-within #experience-card-1-body,
body.elementor-page-354 #experience-card-2:focus-within #experience-card-2-body,
body.elementor-page-354 #experience-card-3:focus-within #experience-card-3-body,
body.elementor-page-354 #experience-card-4:focus-within #experience-card-4-body{max-height:220px;opacity:1;}
/* Below 1025, and on any touch device at any width, there is no hover state at
   all — the card simply rests in what used to be the hover state: teal veil,
   description open, and no lift. */
@media(hover:none),(max-width:1024px){
body.elementor-page-354 #experience-card-1-panel,
body.elementor-page-354 #experience-card-2-panel,
body.elementor-page-354 #experience-card-3-panel,
body.elementor-page-354 #experience-card-4-panel{background:rgba(9,113,115,.88);}
body.elementor-page-354 #experience-card-1-body,
body.elementor-page-354 #experience-card-2-body,
body.elementor-page-354 #experience-card-3-body,
body.elementor-page-354 #experience-card-4-body{max-height:240px;opacity:1;}
}

/* ===== 10. More To Do =====
   Copy 240 wide at x128, map 1192 at x420 — both off the 1682 frame.  The
   map artwork carries its own white margin and square corners (sampled at the
   rect's corners in the Figma render), so no border-radius is applied. */
body.elementor-page-354 #experience-more{
position:relative;z-index:1;display:flex;flex-direction:row;align-items:center;
gap:3.091vw;padding:0 4.161vw max(56px,4.459vw) 7.61vw;
}
body.elementor-page-354 #experience-more-copy{
display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;
flex:0 0 auto;width:14.268vw;min-width:250px;
}
body.elementor-page-354 #experience-more h2{
font-family:"richmond-display",Georgia,serif;font-weight:300;font-size:42px;line-height:42px;
letter-spacing:1.26px;color:#000000;margin:0;
}
body.elementor-page-354 #experience-more h2 em{font-style:italic;font-weight:300;}
body.elementor-page-354 #experience-more-body{
font-family:nunito,Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:22px;
color:#000000;margin:22px 0 0 0;
}
body.elementor-page-354 #experience-more-map{flex:1 1 0%;min-width:0;padding:0;line-height:0;}
/* The map opens in the lightbox, so WordPress wraps the img in an <a>.  That
   anchor is inline-block and shrink-to-fit, and `width:100%` on the img then
   resolves against a zero-width parent — the map vanished entirely.  The
   anchor has to be a block of its own before the img can fill it. */
body.elementor-page-354 #experience-more-map a{display:block;width:100%;}
body.elementor-page-354 #experience-more-map img{display:block;width:100%;height:auto;}
/* Below ~1240 the copy is TALLER than the map, so the copy — not the map — sets
   the section height, and with no padding its last line sat exactly on the FAQ
   panel's cream edge (measured gap: 0px at 1240 and 1025).  40px on the copy
   plus the section's own bottom gutter above gives 96px at every desktop width
   and reproduces Figma's 75px map->FAQ and 170px copy->FAQ at 1682 exactly. */
@media(min-width:1025px){
body.elementor-page-354 #experience-more-copy{padding-top:40px;padding-bottom:40px;}
}

/* ===== 9 + 10 at tablet and phone ===== */
@media(max-width:1024px){
body.elementor-page-354 #experience-amenities{
margin-top:0;padding:60px 0;background-size:1400px auto;
}
body.elementor-page-354 #experience-amenities h2{margin-left:30px;font-size:36px;line-height:38px;}
body.elementor-page-354 #experience-moments{margin-top:24px;padding:0 30px;}
/* The stagger is a desktop affordance; it only adds dead space here.  The
   height also stops being proportional: 348.81/760.23 against a 330px phone
   card is 719px of card, most of it empty photo.  490px is the house value —
   the same figure the Home/Groups `home-moments-box` drops to at <=1024. */
body.elementor-page-354 #experience-card-1,
body.elementor-page-354 #experience-card-2,
body.elementor-page-354 #experience-card-3,
body.elementor-page-354 #experience-card-4{margin-top:0;height:490px;}
/* the arrows are the only way to reach cards 2+ on a phone, and Elementor
   ships them at roughly 16x34 */
body.elementor-page-354 #experience-moments .elementor-swiper-button,
body.elementor-page-354 #experience-moments .swiper-button-prev,
body.elementor-page-354 #experience-moments .swiper-button-next{
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:#FFFFFF;color:#097173;
box-shadow:0 2px 8px rgba(0,0,0,.16);
}
body.elementor-page-354 #experience-moments .elementor-swiper-button svg{width:11px;height:20px;fill:currentColor;}
body.elementor-page-354 #experience-moments .elementor-swiper-button i{font-size:17px;}
body.elementor-page-354 #experience-more{
flex-direction:column;align-items:flex-start;gap:30px;padding:60px 30px;
}
body.elementor-page-354 #experience-more-copy{width:100%;flex:0 0 auto;}
body.elementor-page-354 #experience-more-body{max-width:min(100%,540px);}
body.elementor-page-354 #experience-more h2{font-size:36px;line-height:38px;}
body.elementor-page-354 #experience-more-map{width:100%;}
}
@media(max-width:767px){
/* One card per view, so from ~480 up the card would stretch to the full
   gutter width — 707px wide by 490 tall at 766, which is landscape where the
   design is portrait.  Capped and centred instead; at 390 the card is already
   330 and nothing changes. */
body.elementor-page-354 #experience-card-1,
body.elementor-page-354 #experience-card-2,
body.elementor-page-354 #experience-card-3,
body.elementor-page-354 #experience-card-4{max-width:400px;margin-left:auto;margin-right:auto;}
body.elementor-page-354 #experience-amenities{padding:50px 0;background-size:1682px auto;}
body.elementor-page-354 #experience-amenities h2{font-size:32px;line-height:34px;}
body.elementor-page-354 #experience-more{padding:50px 30px;}
body.elementor-page-354 #experience-more h2{font-size:32px;line-height:34px;}
}
@media(prefers-reduced-motion:reduce){
body.elementor-page-354 #experience-card-1,
body.elementor-page-354 #experience-card-2,
body.elementor-page-354 #experience-card-3,
body.elementor-page-354 #experience-card-4,
body.elementor-page-354 #experience-card-1-panel,
body.elementor-page-354 #experience-card-2-panel,
body.elementor-page-354 #experience-card-3-panel,
body.elementor-page-354 #experience-card-4-panel,
body.elementor-page-354 #experience-card-1-body,
body.elementor-page-354 #experience-card-2-body,
body.elementor-page-354 #experience-card-3-body,
body.elementor-page-354 #experience-card-4-body{transition:none!important;}
}

/* ===== hero background video (2026-09-18) =====
   "Experience Page Sizzle 3" — Vimeo 1224018905, 16:9, 51s.  The still
   (media 183) stays underneath as the poster: it holds the box so nothing
   shifts while the player loads, and it is the whole picture under
   prefers-reduced-motion or Save-Data, where the script never assigns src and
   the player is never downloaded at all.
   Stacking inside the hero is photo 0 -> video 0 (later in source) -> the
   contrast scrim ::after 1 -> the copy 2. */
body.elementor-page-354 #experience-hero-video{
position:absolute;inset:0;z-index:0;padding:0;margin:0;overflow:hidden;
pointer-events:none;container-type:size;
}
body.elementor-page-354 #experience-hero-video>.elementor-widget-container{position:absolute;inset:0;}
body.elementor-page-354 .experience-hero-video-inner{
position:absolute;inset:0;opacity:0;transition:opacity .9s ease;
}
body.elementor-page-354 #experience-hero-video.experience-video-live .experience-hero-video-inner{opacity:1;}
/* The theme clamps every iframe to max-width:100%, which silently cancels a
   cover crop — the video just letterboxes and nothing errors.  Releasing both
   maxima is load-bearing.  The cqw/cqh pair covers every breakpoint and every
   box aspect in one rule; the plain 100%/100% above it is the fallback. */
body.elementor-page-354 .experience-hero-video-frame{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;
width:100%;height:100%;max-width:none!important;max-height:none!important;
}
@supports (width:1cqw){
body.elementor-page-354 .experience-hero-video-frame{
width:max(100cqw,177.7778cqh);height:max(100cqh,56.25cqw);
}
}
/* WCAG 2.2.2: motion that starts on its own needs a way to stop it.  The
   control rides with the video, so it is absent whenever the video is. */
/* TOP right, not bottom: the intro band sits at z-index 4 with margin-top
   -11.118vw, so it covers the hero's bottom 160px at 1440 and swallowed every
   click on a bottom-right control (elementFromPoint returned the intro). */
body.elementor-page-354 .experience-hero-video-toggle{
position:absolute;right:16px;top:16px;width:44px;height:44px;padding:0;
display:flex;align-items:center;justify-content:center;
border:none;border-radius:50%;background:rgba(9,62,71,.62);color:#FFFFFF;
cursor:pointer;pointer-events:auto;z-index:2;transition:background .2s ease;
}
body.elementor-page-354 .experience-hero-video-toggle:hover{background:rgba(9,62,71,.9);}
body.elementor-page-354 .experience-hero-video-label{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
body.elementor-page-354 .experience-hero-video-icon{width:17px;height:17px;fill:currentColor;display:none;}
body.elementor-page-354 .experience-hero-video-pause{display:block;}
body.elementor-page-354 #experience-hero-video.experience-video-paused .experience-hero-video-pause{display:none;}
body.elementor-page-354 #experience-hero-video.experience-video-paused .experience-hero-video-play{display:block;}
/* the copy shares the grid cell and spans it, so it would swallow every click
   meant for the toggle; nothing inside it is interactive */
body.elementor-page-354 #experience-hero-copy{pointer-events:none;}
@media(prefers-reduced-motion:reduce){
body.elementor-page-354 .experience-hero-video-inner,
body.elementor-page-354 .experience-hero-video-toggle{transition:none!important;}
}

/* ===== amenity cards: Figma's stagger (2026-09-18) =====
   The four cards are drawn at y 5843 / 5891.68 / 5811 / 5878 — odd cards high,
   even cards ~50-67 lower.  Reproduced with the Home/Groups pattern, where the
   base 50px is also the room the card rises into on hover and the even cards
   sit one lift lower.  Desktop only: below 1025 the cards are already zeroed,
   because a stagger in a 1- or 3-up carousel is just dead space. */
@media(min-width:1025px){
body.elementor-page-354 #experience-card-2,
body.elementor-page-354 #experience-card-4{margin-top:100px;}
/* four slides, four per view — both arrows are permanently inert up here and
   Elementor still paints them at 30% */
body.elementor-page-354 #experience-moments .elementor-swiper-button.swiper-button-disabled{display:none;}
}

/* ===== tablet card type (2026-09-18) =====
   768-1024 is the only range where the carousel runs 3-up off a narrow box:
   229px of card leaves 177px of measure, where a 16px uppercase title with
   2.4px tracking wraps mid-word.  16 -> 14 keeps every title to two lines. */
@media(min-width:768px) and (max-width:1024px){
body.elementor-page-354 #experience-card-1-title,
body.elementor-page-354 #experience-card-2-title,
body.elementor-page-354 #experience-card-3-title,
body.elementor-page-354 #experience-card-4-title{font-size:14px;line-height:20px;letter-spacing:1.9px;}
body.elementor-page-354 #experience-card-1-body,
body.elementor-page-354 #experience-card-2-body,
body.elementor-page-354 #experience-card-3-body,
body.elementor-page-354 #experience-card-4-body{font-size:14px;line-height:19px;}
body.elementor-page-354 #experience-card-1-panel,
body.elementor-page-354 #experience-card-2-panel,
body.elementor-page-354 #experience-card-3-panel,
body.elementor-page-354 #experience-card-4-panel{padding:24px 18px;gap:10px;}
}

/* ===== card focus ring (2026-09-18) =====
   The title's anchor is stretched over the whole card by a ::after, so the
   default outline traced the two-word title while the target was the card.
   :has() moves the ring onto the card; the :focus-within rule underneath is
   the fallback where :has() is not supported. */
body.elementor-page-354 #experience-card-1:focus-within,
body.elementor-page-354 #experience-card-2:focus-within,
body.elementor-page-354 #experience-card-3:focus-within,
body.elementor-page-354 #experience-card-4:focus-within{
outline:3px solid #097173;outline-offset:-4px;
}
@supports body.elementor-page-354(:has(a)){
body.elementor-page-354 #experience-card-1:focus-within,
body.elementor-page-354 #experience-card-2:focus-within,
body.elementor-page-354 #experience-card-3:focus-within,
body.elementor-page-354 #experience-card-4:focus-within{outline:none;}
body.elementor-page-354 #experience-card-1:has(a:focus-visible),
body.elementor-page-354 #experience-card-2:has(a:focus-visible),
body.elementor-page-354 #experience-card-3:has(a:focus-visible),
body.elementor-page-354 #experience-card-4:has(a:focus-visible){
outline:3px solid #097173;outline-offset:-4px;
}
}
body.elementor-page-354 #experience-card-1-title a:focus-visible,
body.elementor-page-354 #experience-card-2-title a:focus-visible,
body.elementor-page-354 #experience-card-3-title a:focus-visible,
body.elementor-page-354 #experience-card-4-title a:focus-visible{outline:none;}

/* ===== reduced motion: hero background video (2026-09-21) =====
   The hero is Elementor's native container background video, which has no
   motion switch of its own.  Hiding the player leaves the fallback image
   (media 183), so reduced-motion visitors get the still instead. */
@media(prefers-reduced-motion:reduce){
body.elementor-page-354 #experience-hero .elementor-background-video-container{display:none;}
}/* End custom CSS */