.elementor-3399 .elementor-element.elementor-element-7881c5f{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3399 .elementor-element.elementor-element-6a5125b{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3399 .elementor-element.elementor-element-17f6d49{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-16c95f3{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3399 .elementor-element.elementor-element-a165304{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-8ea5634{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3399 .elementor-element.elementor-element-9c91121{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-d7da3a2{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3399 .elementor-element.elementor-element-45641b2{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-3b690f0{--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-3399 .elementor-element.elementor-element-5687913{--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:40px;--padding-right:40px;}@media(max-width:1024px){.elementor-3399 .elementor-element.elementor-element-17f6d49{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-a165304{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-9c91121{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-45641b2{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-5687913{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-3399 .elementor-element.elementor-element-17f6d49{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-a165304{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-9c91121{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-45641b2{--e-image-carousel-slides-to-show:1;}.elementor-3399 .elementor-element.elementor-element-5687913{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS *//* ===== explore banners (matched to the Events "While You're Here" cards) ===== */
body.elementor-page-3399 #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-3399 #beach-banner-1,body.elementor-page-3399 #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-3399 #beach-banner-2{border-left:2px solid rgba(255,255,255,0.8);}
body.elementor-page-3399 #beach-banner-1>img,body.elementor-page-3399 #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-3399 #beach-banner-1>img{object-position:15% 82%;}
body.elementor-page-3399 #beach-banner-2>img{object-position:0% 100%;}
body.elementor-page-3399 #beach-banner-1::after,body.elementor-page-3399 #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-3399 #beach-banner-1:hover::after,body.elementor-page-3399 #beach-banner-2:hover::after,body.elementor-page-3399 #beach-banner-1:focus-within::after,body.elementor-page-3399 #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-3399 #beach-banner-1:hover>img,body.elementor-page-3399 #beach-banner-2:hover>img{transform:scale(1.025);}
body.elementor-page-3399 #beach-banner-1>div,body.elementor-page-3399 #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-3399 #beach-banner-1:hover>div,body.elementor-page-3399 #beach-banner-2:hover>div,body.elementor-page-3399 #beach-banner-1:focus-within>div,body.elementor-page-3399 #beach-banner-2:focus-within>div{transform:translateY(-4px);}
body.elementor-page-3399 #beach-banner-1>div>p,body.elementor-page-3399 #beach-banner-2>div>p{font-style:italic;margin:0;}
body.elementor-page-3399 #beach-banner-1 h3,body.elementor-page-3399 #beach-banner-2 h3{margin:0;}
body.elementor-page-3399 #beach-banner-link-1,body.elementor-page-3399 #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-3399 #beach-banner-link-1:focus-visible,body.elementor-page-3399 #beach-banner-link-2:focus-visible{outline:none;}
body.elementor-page-3399 #beach-banner-1:focus-within,body.elementor-page-3399 #beach-banner-2:focus-within{outline:3px solid #FFFFFF;outline-offset:-6px;}
@media(max-width:767px){
body.elementor-page-3399 #beach-explore{flex-direction:column;gap:0;border-radius:20px;overflow:hidden;margin-top:40px;}
body.elementor-page-3399 #beach-banner-1,body.elementor-page-3399 #beach-banner-2{height:300px;width:100%;border-radius:0;flex:0 0 auto;}
body.elementor-page-3399 #beach-banner-2{border-left:none;border-top:2px solid rgba(255,255,255,0.8);}
body.elementor-page-3399 #beach-banner-1>div,body.elementor-page-3399 #beach-banner-2>div{left:26px;bottom:26px;}
}
@media(prefers-reduced-motion:reduce){
body.elementor-page-3399 #beach-banner-1>img,body.elementor-page-3399 #beach-banner-2>img,body.elementor-page-3399 #beach-banner-1>div,body.elementor-page-3399 #beach-banner-2>div{transition:none;}
}

/* ==========================================================================
   POOLS - built from Figma 1UGtSN4jy8ocNSPmUG2z5N node 1153:4916
   ("26-PB - Pools", 1682 x 4796).  The block ABOVE this banner is the explore
   banner component copied verbatim from Golf (546) / Experience (354).  It
   keys off beach-* ids - leave the names alone.

   The bands are Experience's hard-edge bands.  Every horizontal reference is
   derived from the 1682 frame (left column 128 -> 7.61vw, right column 1030
   -> 61.237vw) and carries NO px term.  No scripting anywhere on this page:
   the four carousels are the native Image Carousel widget, autoplay off.
   ========================================================================== */

body.elementor-page-3399{
--pools-wave-intro:url('/wp-content/uploads/2026/09/experience-wave-mask-intro-band-frame-1682x761-572.svg');
--pools-wave-oasis:url('/wp-content/uploads/2026/09/pools-wave-mask-oasis-band-frame-1682x830-1.svg');
--pools-wave-sand:url('/wp-content/uploads/2026/09/pools-wave-mask-intro-sand-top-edge-frame-1682x60-1.svg');
}

/* ===== shared scaffolding: hero and the three bands are single-cell grids ===== */
body.elementor-page-3399 #pools-hero,
body.elementor-page-3399 #pools-seaside,
body.elementor-page-3399 #pools-oasis,
body.elementor-page-3399 #pools-cabanas{
padding:0;width:100%;max-width:none;position:relative;overflow:hidden;
display:grid;grid-template-columns:100%;align-items:center;
}
body.elementor-page-3399 #pools-hero>*,
body.elementor-page-3399 #pools-seaside>*,
body.elementor-page-3399 #pools-oasis>*,
body.elementor-page-3399 #pools-cabanas>*{grid-area:1/1;min-width:0;}

/* Figma's layer order is NOT the DOM order: Seaside sits above BOTH the intro
   and The Oasis, Cabanas above The Oasis and the CTA.  Overlaps are Figma's. */
body.elementor-page-3399 #pools-hero{z-index:1;min-height:40.369vw;}
body.elementor-page-3399 #pools-intro{z-index:2;min-height:62.426vw;margin-top:-2.319vw;}
body.elementor-page-3399 #pools-seaside{z-index:4;min-height:45.279vw;margin-top:-18.312vw;}
body.elementor-page-3399 #pools-oasis{z-index:3;min-height:49.346vw;margin-top:-5.589vw;}
body.elementor-page-3399 #pools-cabanas{z-index:5;min-height:45.279vw;margin-top:-6.54vw;}
body.elementor-page-3399 #pools-cta{z-index:1;margin-top:-9.75vw;}

/* ===== hero - a still, painted here so the rendition is ours to choose
   (an Elementor background control always serves the ORIGINAL file) ===== */
body.elementor-page-3399 #pools-hero{
background-color:#CFDDE3;background-repeat:no-repeat;background-position:center center;background-size:cover;
background-image:url('/wp-content/uploads/2026/09/1ec53b9d-4e42-42c1-8bc0-316c2950a7e0-2048x827-1-1536x620.jpeg');
}
@media(min-width:1601px){
body.elementor-page-3399 #pools-hero{background-image:url('/wp-content/uploads/2026/09/1ec53b9d-4e42-42c1-8bc0-316c2950a7e0-2048x827-1.jpeg');}
}
/* white type over a bright pool deck: sampled under the H1's own rows the bare
   photo gives 2.1:1 at the 5th percentile; a 32% wash gives 4.3:1 */
body.elementor-page-3399 #pools-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,.12) 0%,rgba(0,0,0,.32) 34%,rgba(0,0,0,.32) 60%,rgba(0,0,0,.14) 86%,rgba(0,0,0,.06) 100%);
    opacity:.5;
}
body.elementor-page-3399 #pools-hero-copy{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 30px 2.4vw 30px;position:relative;z-index:2;pointer-events:none;
}
body.elementor-page-3399 #pools-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-3399 #pools-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;
}

/* ===== intro - Beach's sand and palm-shadow band =====
   The texture is a JPG (35 KB at 1536) instead of Beach's 511 KB alpha PNG.
   Only the TOP wave is ever visible (Seaside covers the bottom one), so the
   mask is that one edge as a 60px-tall strip pinned to the top at its Figma
   depth, unioned with a solid layer for everything below.  The strip is
   opaque along its whole bottom row, so the two layers meet without a seam
   and the section can grow to any height at any width. */
body.elementor-page-3399 #pools-intro{
position:relative;width:100%;max-width:none;overflow:hidden;
display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0;
padding:6.897vw 4vw 23.424vw 7.61vw;
background-color:#F9F5EC;
background-image:url('/wp-content/uploads/2026/09/15370f6d-2399-4057-9419-d4f8ac986d51-1536x989.jpeg');
background-repeat:no-repeat;background-position:center top;background-size:max(100%,1682px) auto;
-webkit-mask-image:var(--pools-wave-sand),linear-gradient(#000,#000);mask-image:var(--pools-wave-sand),linear-gradient(#000,#000);
-webkit-mask-size:100% 3.567vw,100% calc(100% - 3.567vw + 1px);mask-size:100% 3.567vw,100% calc(100% - 3.567vw + 1px);
-webkit-mask-position:center top,center bottom;mask-position:center top,center bottom;
-webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
}
body.elementor-page-3399 #pools-intro-card{
position:relative;flex:0 0 53.448vw;width:53.448vw;aspect-ratio:899/540;padding:0;margin:0;
border-radius:20px;overflow:hidden;display:block;background:#DDE6E4;
}
body.elementor-page-3399 #pools-intro-copy{
flex:1 1 0%;min-width:0;margin-left:2.2vw;padding:0;
display:flex;flex-direction:column;align-items:flex-start;gap:0;
}

/* ===== carousels - the native widget, made to FILL its slot ===== */
body.elementor-page-3399 #pools-seaside-photo,
body.elementor-page-3399 #pools-oasis-photo,
body.elementor-page-3399 #pools-cabanas-photo{
position:relative;align-self:stretch;height:100%;min-width:0;line-height:0;padding:0;margin:0;overflow:hidden;display:block;
}
/* the widget wrapper carries Elementor's own width:100%, which beats a plain
   width:auto and left the Oasis carousel 1682 wide from its 44.55vw offset */
body.elementor-page-3399 .pools-carousel{position:absolute;top:0;right:0;bottom:0;left:0;width:auto!important;max-width:none!important;height:auto;margin:0;padding:0;line-height:0;}
body.elementor-page-3399 .pools-carousel>.elementor-widget-container,
body.elementor-page-3399 .pools-carousel .elementor-image-carousel-wrapper,
body.elementor-page-3399 .pools-carousel .elementor-image-carousel,
body.elementor-page-3399 .pools-carousel .swiper-slide,
body.elementor-page-3399 .pools-carousel .swiper-slide-inner{height:100%!important;margin:0;padding:0;}
body.elementor-page-3399 .pools-carousel .swiper-slide-inner{position:relative;overflow:hidden;display:block;}
body.elementor-page-3399 .pools-carousel .swiper-slide-image{
display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:center center;border-radius:0;
}
body.elementor-page-3399 .pools-carousel .swiper-lazy-preloader{top:50%;left:50%;}

/* slide 1 of each carousel reproduces Figma's own crop, zoom included: the img
   is sized to the inverse of the window the design shows and offset by its
   origin.  Slides 2-5 are placeholders and are plain centre-cover. */
@media(min-width:1025px){
body.elementor-page-3399 #pools-intro-carousel .swiper-slide[data-swiper-slide-index="0"] .swiper-slide-image{position:absolute;width:126%!important;height:118%!important;left:-11.6%;top:-14.8%;}
body.elementor-page-3399 #pools-seaside-carousel .swiper-slide[data-swiper-slide-index="0"] .swiper-slide-image{position:absolute;width:155.5%!important;height:122.8%!important;left:-29.9%;top:-14.2%;}
body.elementor-page-3399 #pools-oasis-carousel .swiper-slide[data-swiper-slide-index="0"] .swiper-slide-image{position:absolute;width:132.4%!important;height:104%!important;left:0;top:0;}
body.elementor-page-3399 #pools-cabanas-carousel .swiper-slide[data-swiper-slide-index="0"] .swiper-slide-image{position:absolute;width:153%!important;height:118.3%!important;left:-23.6%;top:-9.4%;}
}

/* arrows: Elementor's own elements are kept - they carry role, tabindex and
   the accessible name - and are given a 44px box */
body.elementor-page-3399 .pools-carousel .elementor-swiper-button{
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
top:50%;transform:translateY(-50%);z-index:3;cursor:pointer;color:#F5F3EF;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
body.elementor-page-3399 .pools-carousel .elementor-swiper-button-prev{left:18px;}
body.elementor-page-3399 .pools-carousel .elementor-swiper-button-next{right:18px;}
/* Figma's arrow is a thin open chevron; the widget's own glyph is a heavy
   filled one, so it is hidden and the chevron is drawn on the button itself */
body.elementor-page-3399 .pools-carousel .elementor-swiper-button svg,
body.elementor-page-3399 .pools-carousel .elementor-swiper-button i{display:none;}
body.elementor-page-3399 .pools-carousel .elementor-swiper-button::before{
content:'';display:block;width:24px;height:24px;box-sizing:border-box;
border-left:1.5px solid #F5F3EF;border-bottom:1.5px solid #F5F3EF;
}
body.elementor-page-3399 .pools-carousel .elementor-swiper-button-prev::before{transform:translateX(7px) rotate(45deg);}
body.elementor-page-3399 .pools-carousel .elementor-swiper-button-next::before{transform:translateX(-7px) rotate(-135deg);}
/* a white ring alone disappears on a bright photo, so keyboard focus also drops
   a dark disc behind the chevron */
body.elementor-page-3399 .pools-carousel .elementor-swiper-button:focus-visible{outline:3px solid #FFFFFF;outline-offset:-2px;border-radius:50%;background:rgba(9,62,71,.62);}
/* the carousels do not loop (it halves what Swiper preloads), so the arrow at
   either end is inert: Swiper marks it aria-disabled and takes it out of the tab
   order, and it should not look clickable either */
body.elementor-page-3399 .pools-carousel .elementor-swiper-button.swiper-button-disabled{opacity:.35;cursor:default;}
/* dots: 9px, teal when active, white otherwise, soft shadow; each carries an
   invisible 24 x 44 hit area */
body.elementor-page-3399 .pools-carousel .swiper-pagination{
position:absolute;left:0;right:0;top:auto!important;bottom:16%!important;width:100%;z-index:3;line-height:0;
display:flex;align-items:center;justify-content:center;gap:0;transform:none;
}
body.elementor-page-3399 #pools-intro-carousel .swiper-pagination{bottom:calc(5.5% - 4px)!important;}
body.elementor-page-3399 #pools-oasis-carousel .swiper-pagination{bottom:19%!important;}
body.elementor-page-3399 .pools-carousel .swiper-pagination-bullet{
position:relative;width:9px;height:9px;margin:0 7.5px!important;border-radius:50%;opacity:1;
background:#FFFFFF;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.4);
}
body.elementor-page-3399 .pools-carousel .swiper-pagination-bullet::after{content:'';position:absolute;left:-7.5px;right:-7.5px;top:-17.5px;bottom:-17.5px;}
body.elementor-page-3399 .pools-carousel .swiper-pagination-bullet-active{background:#18948D;}
body.elementor-page-3399 .pools-carousel .swiper-pagination-bullet:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;}

/* ===== masks - always 100% 100% so the wave follows a band the copy has made
   taller than its Figma height.  Seaside and Cabanas mask the SECTION (photo
   and white half alike); The Oasis masks the photo slot only. ===== */
body.elementor-page-3399 #pools-seaside,
body.elementor-page-3399 #pools-cabanas{
background:#FFFFFF;
-webkit-mask-image:var(--pools-wave-intro);mask-image:var(--pools-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-3399 #pools-oasis-photo{
-webkit-mask-image:var(--pools-wave-oasis);mask-image:var(--pools-wave-oasis);
-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;
}

/* ===== typography ===== */
body.elementor-page-3399 #pools-intro h2,
body.elementor-page-3399 #pools-seaside h2,
body.elementor-page-3399 #pools-oasis h2,
body.elementor-page-3399 #pools-cabanas 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-3399 #pools-intro h2 em,
body.elementor-page-3399 #pools-seaside h2 em,
body.elementor-page-3399 #pools-oasis h2 em,
body.elementor-page-3399 #pools-cabanas h2 em{font-style:italic;font-weight:300;}
body.elementor-page-3399 #pools-intro h2 em{display:block;}
body.elementor-page-3399 #pools-intro-body,
body.elementor-page-3399 #pools-seaside-body,
body.elementor-page-3399 #pools-oasis-body,
body.elementor-page-3399 #pools-cabanas-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-3399 #pools-intro-body{color:#635D58;}
body.elementor-page-3399 #pools-oasis-eyebrow{
font-family:nexa,Helvetica,Arial,sans-serif;font-weight:700;font-size:14px;line-height:18px;
letter-spacing:3.5px;text-transform:uppercase;color:#097173;margin:22px 0 0 0;
}
body.elementor-page-3399 #pools-oasis-body{margin-top:18px;}
body.elementor-page-3399 #pools-oasis-more,
body.elementor-page-3399 #pools-oasis-more a{
font-family:nunito,Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:22px;color:#097173;text-decoration:none;
}
body.elementor-page-3399 #pools-oasis-more{margin:22px 0 0 0;}
body.elementor-page-3399 #pools-oasis-more a{display:inline-block;padding:11px 0;margin:-11px 0;}
body.elementor-page-3399 #pools-oasis-more a:hover{text-decoration:underline;}
body.elementor-page-3399 #pools-oasis-callout{
font-family:nunito,Helvetica,Arial,sans-serif;font-weight:400;font-size:14px;line-height:19px;color:#097173;
background:#FFFFFF;box-shadow:0 2px 4px rgba(0,0,0,.25);
margin:17px 0 0 0;padding:11px 20px 11px 21px;box-sizing:border-box;width:100%;max-width:447px;
}
body.elementor-page-3399 #pools-oasis-callout strong{font-weight:700;}

/* ===== copy blocks - house scale: heading->body 22, body->button 40 =====
   Each copy block spans the whole grid cell, so left alone it would swallow
   every click meant for the carousel arrows underneath it. */
body.elementor-page-3399 #pools-seaside-copy,
body.elementor-page-3399 #pools-oasis-copy,
body.elementor-page-3399 #pools-cabanas-copy{
display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;position:relative;z-index:2;
pointer-events:none;
}
body.elementor-page-3399 #pools-seaside-copy>*,
body.elementor-page-3399 #pools-oasis-copy>*,
body.elementor-page-3399 #pools-cabanas-copy>*{pointer-events:auto;}
body.elementor-page-3399 #pools-seaside-btn,
body.elementor-page-3399 #pools-cabanas-btn{margin-top:40px;}
body.elementor-page-3399 #pools-oasis-btns{
display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 16px;padding:0;margin-top:18px;
}

/* ===== buttons - Experience's small button, at this page's 39px =====
   Figma fills them #18948D; white 11px on that is 3.6:1, so they ship in the
   kit's #126472 with #097173 on hover, as Experience does.  The kit already
   paints the chevron as a background-image. */
body.elementor-page-3399 .pools-btn .elementor-button{
width:207px!important;min-width:0!important;max-width:none!important;
height:39px;min-height:0;padding:0 33px 0 17px!important;
background-color:#126472!important;border:none!important;border-radius:4px!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:#F5F3EF!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-3399 .pools-btn-wide .elementor-button{width:216px!important;}
body.elementor-page-3399 .pools-btn .elementor-button:hover{background-color:#097173!important;}
body.elementor-page-3399 .pools-btn .elementor-button::after{
content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
height:44px;border:none!important;background:none!important;
}

@media(min-width:1025px){
body.elementor-page-3399 #pools-seaside-photo,
body.elementor-page-3399 #pools-oasis-photo,
body.elementor-page-3399 #pools-cabanas-photo{position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;}
/* the hard vertical edges, straight off the Figma frame: 899, 883 and 749 */
body.elementor-page-3399 #pools-seaside-photo{right:auto;width:53.448vw;}
body.elementor-page-3399 #pools-cabanas-photo{right:auto;width:52.497vw;}
/* The Oasis mask is drawn on the 1682 frame, so the masked slot stays full
   width and the carousel inside it starts at the photo's edge */
body.elementor-page-3399 #pools-oasis-carousel{left:44.55vw;}

/* plain proportional columns - never a px floor in an offset */
body.elementor-page-3399 #pools-seaside-copy,
body.elementor-page-3399 #pools-cabanas-copy{padding-left:61.237vw;padding-right:2.2vw;}
body.elementor-page-3399 #pools-oasis-copy{padding-left:7.61vw;padding-right:0;max-width:calc(44.55vw - 24px);}
body.elementor-page-3399 #pools-intro h2,
body.elementor-page-3399 #pools-seaside h2,
body.elementor-page-3399 #pools-oasis h2,
body.elementor-page-3399 #pools-cabanas h2{font-size:min(42px,2.95vw);line-height:1.02;}
/* every measure is its own Figma text box, and ABSOLUTE */
body.elementor-page-3399 #pools-intro-body{max-width:min(100%,398px);}
body.elementor-page-3399 #pools-seaside-body{max-width:min(100%,335px);}
body.elementor-page-3399 #pools-oasis-body{max-width:min(100%,450px);}
body.elementor-page-3399 #pools-cabanas-body{max-width:min(100%,366px);}

/* band clearance: absolute type in proportional bands */
body.elementor-page-3399 #pools-seaside-copy,
body.elementor-page-3399 #pools-cabanas-copy{padding-top:clamp(96px,calc(7.6vw + 65px),150px);padding-bottom:clamp(96px,calc(7.6vw + 65px),150px);}
/* The Oasis is squeezed from both sides (Seaside above it, Cabanas below), and
   Figma sets its copy 47px above the band centre; the extra 5.5vw under the
   copy reproduces that and keeps the buttons clear of the Cabanas wave */
body.elementor-page-3399 #pools-oasis-copy{padding-top:clamp(110px,calc(7.6vw + 60px),170px);padding-bottom:calc(clamp(110px,calc(7.6vw + 60px),170px) + 5.5vw);}
}

/* ===== CTA - Find Your Way To Palmilla Beach =====
   The sand, palm and highlight layers are one flattened JPG with its wave
   baked on white.  That is exact: the CTA sits UNDER the Cabanas band and
   over the white page, so white is what the wave cuts to. */
body.elementor-page-3399 #pools-cta{
position:relative;width:100%;max-width:none;
padding:15.1vw 0 clamp(56px,7.313vw,123px) 0;
background-color:#FFFFFF;
background-image:url('/wp-content/uploads/2026/09/b29b3d1c-d154-45f4-9ba4-8f44041d7fc3-1536x972.jpeg');
background-repeat:no-repeat;background-position:center 3.329vw;background-size:100% auto;
}
/* The banner component's stock gradient was tuned on other photographs.  Over
   these two, composited on canvas, the 18-20px label dipped to 4.2:1 (p5) at
   tablet, under the 4.5:1 it needs; this page deepens the resting gradient. */
body.elementor-page-3399 #beach-banner-1::after,body.elementor-page-3399 #beach-banner-2::after{background:linear-gradient(0deg,rgba(0,0,0,.70),rgba(0,0,0,.10) 68%);}
body.elementor-page-3399 #beach-banner-1:hover::after,body.elementor-page-3399 #beach-banner-2:hover::after,body.elementor-page-3399 #beach-banner-1:focus-within::after,body.elementor-page-3399 #beach-banner-2:focus-within::after{background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.18) 74%);}
body.elementor-page-3399 #pools-cta h2{text-align:center;margin:0!important;line-height:42px!important;letter-spacing:1.26px;}
body.elementor-page-3399 #beach-explore{margin-top:58px;}
/* Figma sets a chevron after each label */
body.elementor-page-3399 #beach-banner-1 h3::after,
body.elementor-page-3399 #beach-banner-2 h3::after{
content:'';display:inline-block;width:.6em;height:.6em;margin-left:.9em;vertical-align:.08em;
border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);
}

/* ===== tablet + phone =====
   The bands stop overlapping and become [carousel][copy panel].  The copy
   block's own padding-bottom is then the visible gap to the next hard edge
   (the next band's photo), so it is the house 56px. */
@media(max-width:1024px){
body.elementor-page-3399 #pools-hero{min-height:clamp(430px,68vw,560px);}
body.elementor-page-3399 #pools-hero-copy{align-self:center;padding-bottom:0;}
body.elementor-page-3399 #pools-hero h1{font-size:46px;line-height:44px;}
body.elementor-page-3399 #pools-hero h1 em{font-size:18px;line-height:32px;letter-spacing:2.7px;}

body.elementor-page-3399 #pools-seaside,
body.elementor-page-3399 #pools-oasis,
body.elementor-page-3399 #pools-cabanas{
display:block;min-height:0;margin-top:0;
-webkit-mask-image:none!important;mask-image:none!important;background:#FFFFFF;
}
body.elementor-page-3399 #pools-seaside-photo,
body.elementor-page-3399 #pools-oasis-photo,
body.elementor-page-3399 #pools-cabanas-photo{width:100%!important;height:clamp(300px,42vw,430px);}
body.elementor-page-3399 #pools-seaside-photo,
body.elementor-page-3399 #pools-cabanas-photo{
-webkit-mask-image:var(--pools-wave-intro);mask-image:var(--pools-wave-intro);
-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 Oasis mask starts 12px into the 1682 frame; stretched over a full-width
   stacked photo that is a sliver of white down the left edge */
body.elementor-page-3399 #pools-oasis-photo{-webkit-mask-size:101.5% 100%;mask-size:101.5% 100%;-webkit-mask-position:right center;mask-position:right center;}
body.elementor-page-3399 #pools-cta h2{font-size:36px!important;line-height:38px!important;text-wrap:balance;}
body.elementor-page-3399 #pools-seaside-copy,
body.elementor-page-3399 #pools-oasis-copy,
body.elementor-page-3399 #pools-cabanas-copy{padding:30px 30px 56px 30px!important;width:100%;max-width:none;}
body.elementor-page-3399 #pools-intro h2,
body.elementor-page-3399 #pools-seaside h2,
body.elementor-page-3399 #pools-oasis h2,
body.elementor-page-3399 #pools-cabanas h2{font-size:36px;line-height:38px;max-width:min(100%,640px);text-wrap:balance;}
body.elementor-page-3399 #pools-intro-body,
body.elementor-page-3399 #pools-seaside-body,
body.elementor-page-3399 #pools-oasis-body,
body.elementor-page-3399 #pools-cabanas-body{max-width:min(100%,540px);}

/* intro: card over copy, on the sand.  The sand is the one stacked panel that
   is not white, so Seaside is tucked up under it by 15% of its photo height
   (the wave's top edge spans 3-14% of it) and the wave cuts into the real
   texture, as it does on desktop; the intro's bottom padding grows by the same
   amount so the copy is still 56px from the photo. */
body.elementor-page-3399 #pools-intro{
flex-direction:column;align-items:flex-start;min-height:0;
padding:calc(3.567vw + 40px) 30px calc(56px + clamp(300px,42vw,430px) * .15) 30px;
background-image:linear-gradient(180deg,rgba(249,245,236,0) 780px,#F9F5EC 1060px),url('/wp-content/uploads/2026/09/15370f6d-2399-4057-9419-d4f8ac986d51-1024x659.jpeg');
background-size:100% 100%,1682px auto;background-position:center top,center top;
}
/* full width, like the band photos below it: capped, the card sat against the
   left gutter on a tablet with a third of the row empty beside it */
body.elementor-page-3399 #pools-intro-card{flex:0 0 auto;width:100%;max-width:none;}
body.elementor-page-3399 #pools-intro-copy{flex:0 0 auto;width:100%;margin:30px 0 0 0;}
body.elementor-page-3399 #pools-seaside{margin-top:calc(clamp(300px,42vw,430px) * -.15);}

body.elementor-page-3399 #pools-cta{margin-top:0;padding:calc(6vw + 70px) 30px 56px 30px;background-position:center top;background-size:max(100%,1100px) auto;
background-image:url('/wp-content/uploads/2026/09/b29b3d1c-d154-45f4-9ba4-8f44041d7fc3-1024x648.jpeg');}
}

@media(max-width:767px){
body.elementor-page-3399 #pools-hero{background-position:62% center;}
body.elementor-page-3399 #pools-hero h1{font-size:clamp(34px,10vw,40px);line-height:1.06;}
body.elementor-page-3399 #pools-hero h1 em{font-size:clamp(14px,4vw,16px);line-height:28px;letter-spacing:2.1px;}
body.elementor-page-3399 #pools-intro h2,
body.elementor-page-3399 #pools-seaside h2,
body.elementor-page-3399 #pools-oasis h2,
body.elementor-page-3399 #pools-cabanas h2{font-size:32px;line-height:34px;}
body.elementor-page-3399 #pools-cta h2{font-size:32px!important;line-height:34px!important;}
body.elementor-page-3399 .pools-btn{width:100%;}
body.elementor-page-3399 .pools-btn .elementor-button{width:100%!important;height:44px;}
body.elementor-page-3399 #pools-oasis-btns{flex-direction:column;align-items:stretch;width:100%;gap:14px;}
body.elementor-page-3399 #pools-oasis-callout{max-width:none;}
body.elementor-page-3399 .pools-carousel .elementor-swiper-button-prev{left:6px;}
body.elementor-page-3399 .pools-carousel .elementor-swiper-button-next{right:6px;}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:500px){
body.elementor-page-3399 #pools-hero{min-height:min(clamp(430px,68vw,560px),88vh);}
}

/* ===== a11y ===== */
body.elementor-page-3399 a:focus-visible,
body.elementor-page-3399 .elementor-button:focus-visible{outline:3px solid #097173;outline-offset:3px;border-radius:3px;}
@media(prefers-reduced-motion:reduce){
body.elementor-page-3399 .pools-btn .elementor-button{transition:none!important;}
/* slides change instantly instead of sweeping across */
body.elementor-page-3399 .pools-carousel .swiper-wrapper{transition-duration:0ms!important;}
}/* End custom CSS */