.elementor-2730 .elementor-element.elementor-element-c1f49b4{--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;--overflow:hidden;--padding-top:0px;--padding-bottom:80px;--padding-left:40px;--padding-right:40px;}.elementor-2730 .elementor-element.elementor-element-c1f49b4:not(.elementor-motion-effects-element-type-background), .elementor-2730 .elementor-element.elementor-element-c1f49b4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FBF8F1;}.elementor-2730 .elementor-element.elementor-element-2227a51{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2730 .elementor-element.elementor-element-7b61b4d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2730 .elementor-element.elementor-element-32db695{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2730 .elementor-element.elementor-element-f4a8d74{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2730 .elementor-element.elementor-element-345217c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2730 .elementor-element.elementor-element-d84ed04{--e-n-carousel-swiper-slides-to-display:5;--e-n-carousel-swiper-slides-gap:10px;margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:5;--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-2730 .elementor-element.elementor-element-7e193a1{--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;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-2730 .elementor-element.elementor-element-7e193a1:not(.elementor-motion-effects-element-type-background), .elementor-2730 .elementor-element.elementor-element-7e193a1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2730 .elementor-element.elementor-element-9b41d7c{--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;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:3;}.elementor-2730 .elementor-element.elementor-element-9b41d7c:not(.elementor-motion-effects-element-type-background), .elementor-2730 .elementor-element.elementor-element-9b41d7c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-2730 .elementor-element.elementor-element-ec31228{font-family:"nunito", Sans-serif;font-size:16px;font-weight:400;line-height:22px;color:#635D58;}.elementor-2730 .elementor-element.elementor-element-3bde70d .e-off-canvas__content{background-color:#F8F6F1;}.elementor-2730 .elementor-element.elementor-element-3bde70d .e-off-canvas__overlay{background-color:rgba(0,0,0,.58);}.elementor-2730 .elementor-element.elementor-element-3bde70d{--e-off-canvas-justify-content:flex-end;--e-off-canvas-align-items:flex-start;--e-off-canvas-width:560px;--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-animation-duration:300ms;--e-off-canvas-overlay-opacity:1;}.elementor-2730 .elementor-element.elementor-element-f4974d9{--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:64px;--padding-bottom:48px;--padding-left:50px;--padding-right:50px;}.elementor-2730 .elementor-element.elementor-element-864f93e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;text-align:start;}.elementor-2730 .elementor-element.elementor-element-cd676fb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;}.elementor-2730 .elementor-element.elementor-element-1396697{--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:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:2;}.elementor-2730 .elementor-element.elementor-element-1396697:not(.elementor-motion-effects-element-type-background), .elementor-2730 .elementor-element.elementor-element-1396697 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2730 .elementor-element.elementor-element-da63bb6{--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;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:116px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-2730 .elementor-element.elementor-element-da63bb6:not(.elementor-motion-effects-element-type-background), .elementor-2730 .elementor-element.elementor-element-da63bb6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1ECE1;}.elementor-2730 .elementor-element.elementor-element-1285194 .e-off-canvas__content{background-color:#F8F6F1;}.elementor-2730 .elementor-element.elementor-element-1285194 .e-off-canvas__overlay{background-color:rgba(0,0,0,.58);}.elementor-2730 .elementor-element.elementor-element-1285194{--e-off-canvas-justify-content:flex-end;--e-off-canvas-align-items:flex-start;--e-off-canvas-width:560px;--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-animation-duration:300ms;--e-off-canvas-overlay-opacity:1;}.elementor-2730 .elementor-element.elementor-element-b09a1a4{--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:64px;--padding-bottom:48px;--padding-left:50px;--padding-right:50px;}.elementor-2730 .elementor-element.elementor-element-98aa82b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;text-align:start;}.elementor-2730 .elementor-element.elementor-element-f3b425e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;}.elementor-2730 .elementor-element.elementor-element-5f4e0a4{--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:50px 50px;--row-gap:50px;--column-gap:50px;--padding-top:120px;--padding-bottom:70px;--padding-left:40px;--padding-right:40px;--z-index:3;}.elementor-2730 .elementor-element.elementor-element-5f4e0a4:not(.elementor-motion-effects-element-type-background), .elementor-2730 .elementor-element.elementor-element-5f4e0a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-2730 .elementor-element.elementor-element-a3410b1{--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-2730 .elementor-element.elementor-element-a3410b1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2730 .elementor-element.elementor-element-1bac0e1{--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-2730 .elementor-element.elementor-element-1bac0e1.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-2730 .elementor-element.elementor-element-f47b3db{--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-2730 .elementor-element.elementor-element-cbc64b0{--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-2730 .elementor-element.elementor-element-d8cef24{--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-2730 .elementor-element.elementor-element-d57c050{--e-n-carousel-swiper-slides-to-display:3;--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;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-2730 .elementor-element.elementor-element-c1f49b4{--padding-top:0px;--padding-bottom:60px;--padding-left:30px;--padding-right:30px;}.elementor-2730 .elementor-element.elementor-element-d84ed04{--e-n-carousel-swiper-slides-to-display:3;}.elementor-2730 .elementor-element.elementor-element-f4974d9{--padding-top:56px;--padding-bottom:44px;--padding-left:36px;--padding-right:36px;}.elementor-2730 .elementor-element.elementor-element-1396697{--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;}.elementor-2730 .elementor-element.elementor-element-da63bb6{--padding-top:70px;--padding-bottom:60px;--padding-left:30px;--padding-right:30px;}.elementor-2730 .elementor-element.elementor-element-b09a1a4{--padding-top:56px;--padding-bottom:44px;--padding-left:36px;--padding-right:36px;}.elementor-2730 .elementor-element.elementor-element-5f4e0a4{--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:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:110px;--padding-bottom:60px;--padding-left:30px;--padding-right:30px;}.elementor-2730 .elementor-element.elementor-element-a3410b1{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2730 .elementor-element.elementor-element-d57c050{--e-n-carousel-swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-2730 .elementor-element.elementor-element-c1f49b4{--padding-top:0px;--padding-bottom:50px;--padding-left:24px;--padding-right:24px;}.elementor-2730 .elementor-element.elementor-element-d84ed04{--e-n-carousel-swiper-slides-to-display:1;}.elementor-2730 .elementor-element.elementor-element-f4974d9{--padding-top:54px;--padding-bottom:36px;--padding-left:24px;--padding-right:24px;}.elementor-2730 .elementor-element.elementor-element-da63bb6{--padding-top:60px;--padding-bottom:50px;--padding-left:24px;--padding-right:24px;}.elementor-2730 .elementor-element.elementor-element-b09a1a4{--padding-top:54px;--padding-bottom:36px;--padding-left:24px;--padding-right:24px;}.elementor-2730 .elementor-element.elementor-element-5f4e0a4{--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:90px;--padding-bottom:50px;--padding-left:24px;--padding-right:24px;}.elementor-2730 .elementor-element.elementor-element-d57c050{--e-n-carousel-swiper-slides-to-display:1;}}@media(min-width:768px){.elementor-2730 .elementor-element.elementor-element-da63bb6{--width:39.6%;}.elementor-2730 .elementor-element.elementor-element-a3410b1{--width:30%;}.elementor-2730 .elementor-element.elementor-element-1bac0e1{--width:68%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2730 .elementor-element.elementor-element-da63bb6{--width:100%;}.elementor-2730 .elementor-element.elementor-element-a3410b1{--width:100%;}.elementor-2730 .elementor-element.elementor-element-1bac0e1{--width:100%;}}/* Start custom CSS for nested-carousel, class: .elementor-element-d57c050 *//* Phone/tablet/touch: the arrows sat as thin teal chevrons on the teal band and disappeared. Same white disc as the moments carousel. Positions (left/right -14px) still come from the page CSS. */
@media(max-width:1024px),(hover:none){
.elementor-2730 .elementor-element.elementor-element-d57c050 .elementor-swiper-button{width:44px;height:44px;margin-top:-5px;background-color:#FFFFFF;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.22);color:#18948D;}
.elementor-2730 .elementor-element.elementor-element-d57c050 .elementor-swiper-button svg{width:12px;height:24px;fill:#18948D;}
.elementor-2730 .elementor-element.elementor-element-d57c050 .elementor-swiper-button.swiper-button-disabled{opacity:.45;}
}/* End custom CSS */
/* Start custom CSS *//* ===== shared wave shape =====
   The exact Figma vector path for the wavy photo edge (nodes 1027:5663 / 1027:5666, viewBox 1880.75x791.577), used as an
   ALPHA mask. It replaces media 2716: that PNG (built for the Offers hero) is transparent across its left ~145px, which was
   cutting the left end off every wave band on this page. */
body.elementor-page-2730{--groups-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1880.75 791.577' preserveAspectRatio='none'%3E%3Cpath d='M0 41.0008C297.999 19.0006 507.256 38.5008 1000.26 93.0008C1493.26 147.501 1694.72 35.3733 1872.72 0L1880.75 678.006L1873.97 680.122C1538.59 784.694 1376 835.391 668.755 744.006C239.023 688.479 32.7525 723.764 6.52 729.061C2.69833 729.971 2.65193 729.842 6.52 729.061C6.59682 729.043 6.67515 729.024 6.75502 729.005L0 41.0008Z' fill='%23000'/%3E%3C/svg%3E");}

/* ===== buttons: page scope beats kit (pattern from Rental 1875 / Offers 2634) ===== */
body.elementor-page-2730 .groups-btn .elementor-button{width:272px;max-width:100%;border-radius:4px;border:none;}
@media(max-width:767px){body.elementor-page-2730 .groups-btn{width:100%;}body.elementor-page-2730 .groups-btn .elementor-button{width:100%!important;}}

/* ===== a11y ===== */
body.elementor-page-2730 .elementor-button:focus-visible,body.elementor-page-2730 a:focus-visible{outline:3px solid #097173;outline-offset:3px;}
body.elementor-page-2730 .home-moments-slide:focus-visible{outline-offset:-4px;border-radius:51px;}
@media(prefers-reduced-motion:reduce){body.elementor-page-2730 .home-moments-box,body.elementor-page-2730 .home-moments-text,body.elementor-page-2730 .home-moments-text-container,body.elementor-page-2730 .home-moments-play,body.elementor-page-2730 .home-hero-box-img{transition:none!important;}}

/* ===== hero + intro + moments (#groups-hero) =====
   Two background layers: the Figma hero background group itself (1018:5236 -> media 2060, the palm-shadow sand with its
   own fade to transparent; "large" 825x1024 size keeps the grain at ~2.2 sd and costs 856KB vs 4MB for the full file),
   and the Figma "Sand Background"
   render (groups-sand-bg.jpg, fades to white at its bottom) from 50.42vw down (Figma y 942). The seam sits behind the
   wavy pool photo. Desktop 100% auto; pinned natural widths on tablet/phone so the grain never scales.
   Hero photo keeps Figma's own offset (Vector 28 sits at x -179 of 1682, i.e. -10.64vw, not centred like the other two). */
body.elementor-page-2730 #groups-hero{background-color:#FFFFFF!important;background-image:url('/wp-content/uploads/2026/09/groups-sand-bg.jpg'),url('/wp-content/uploads/2026/08/26420753-4f11-4ea2-b524-5223bf81bf33-825x1024.png')!important;background-size:100% auto,100% auto!important;background-position:center 50.42vw,center top!important;background-repeat:no-repeat,no-repeat!important;}
@media(max-width:1024px){body.elementor-page-2730 #groups-hero{background-size:1400px auto,1400px auto!important;background-position:center 300px,center top!important;}}
/* The sand layer is opaque and starts ~10 tone steps darker (242,236,229) than the cream texture under it (251,248,241),
   so wherever its top edge falls there is a hard horizontal line across the hero. Every other breakpoint parks that edge
   BEHIND the wavy pool photo; the phone rule put it at 200px while the photo does not start until 238-277px, leaving the
   seam out in the open above the photo - that is the 'broken' band.
   The photo is only opaque from ~13px below its own top (the wave mask cuts into that edge), so the safe window is
   184-411 at 767, 233-460 at 600, 251-478 at 390 and 290-517 at 320 - an intersection of 290-411. 350px is the midpoint,
   which leaves ~60px of slack at both ends so the seam stays hidden even if the headline reflows by a line. */
@media(max-width:767px){body.elementor-page-2730 #groups-hero{background-size:1682px auto,1682px auto!important;background-position:center 350px,center top!important;}}
/* The hero photo is a full-bleed flex child: wider than the container, pulled left with a negative margin. Elementor sets
   this boxed container's inner to flex-wrap:wrap on phones, and a WRAPPED flex line takes its cross size from the widest
   item - so the photo's 111.8vw margin box widened the line and every align-items:center sibling (intro heading, intro
   paragraph, the whole moments carousel) was pushed ~14px right, hanging the carousel and its next arrow off the screen
   edge. nowrap pins the line to the container width, which is what it already does at >=768. */
body.elementor-page-2730 #groups-hero>.e-con-inner{flex-wrap:nowrap;}
/* the H1 was rendering SMALLER than the section H2s on phones (34 vs 36) - desktop is 65 vs 42 */
@media(max-width:767px){body.elementor-page-2730 #groups-hero h1{font-size:clamp(40px,10.8vw,46px)!important;line-height:1.08!important;}}
body.elementor-page-2730 #groups-hero-photo{display:block;width:111.8vw;max-width:none;height:auto;margin-left:calc(50% - 60.65vw);-webkit-mask-image:var(--groups-wave);mask-image:var(--groups-wave);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
@media(max-width:767px){body.elementor-page-2730 #groups-hero-photo{height:240px;object-fit:cover;}}
/* intro h2/paragraph are direct children of the boxed container and were measuring 371px in a 342px box on phones */
body.elementor-page-2730 .e-0314bc3-150feeb{max-width:min(100%,1008px)!important;}
body.elementor-page-2730 .e-b2cac38-9656cc1{max-width:min(100%,710px)!important;}

/* moments carousel: hover/reveal behaviour copied verbatim from Home (post 2) page CSS, scoped to this page */
body.elementor-page-2730 .home-swap-img{opacity:0;visibility:hidden;transition:opacity .35s ease;}
body.elementor-page-2730 .home-moments-carousel .swiper-slide .home-moments-box{transition:transform .85s ease-in-out;margin-top:50px;}
body.elementor-page-2730 .home-moments-carousel .swiper-slide:nth-child(even) .home-moments-box{margin-top:100px;}
body.elementor-page-2730 .home-moments-carousel .home-moments-box:hover{transform:translateY(-50px);}
body.elementor-page-2730 .home-swap-img.swap-active{opacity:1;visibility:visible;}
body.elementor-page-2730 .home-hero-box-img{transition:transform .85s ease-in-out;}
body.elementor-page-2730 .home-moments-box:hover .home-hero-box-img{transform:scale(1.1);}
body.elementor-page-2730 .home-moments-text-container{background:rgba(24,148,141,0);transition:background .35s ease-in-out;}
body.elementor-page-2730 .home-moments-text{height:0;opacity:0;transition:all .85s ease-in-out;}
body.elementor-page-2730 .home-moments-box:hover .home-moments-text{height:125px;opacity:1;}
@media screen and (max-width:1350px){body.elementor-page-2730 .home-moments-box:hover .home-moments-text{height:175px;}}
@media screen and (max-width:1023px){body.elementor-page-2730 .home-moments-box:hover .home-moments-text{height:145px;}}
body.elementor-page-2730 .home-moments-play{opacity:0;transition:all .85s ease-in-out;}
body.elementor-page-2730 .home-moments-box:hover .home-moments-play{opacity:1;}
/* Groups-only: Figma shows the FRIEND GROUPS title black on its light photo; it turns white with the teal reveal */
body.elementor-page-2730 .home-moments-box:hover .e-4bc225c-mttl02{color:#FFFFFF;transition:color .35s ease-in-out;}
/* touch / small-screen fallback: reveal state is persistent (Home's 480px rule + hover:none for tablets) */
@media screen and (max-width:480px),(hover:none){
body.elementor-page-2730 .home-moments-carousel .swiper-slide:nth-child(even) .home-moments-box{margin-top:50px;}
body.elementor-page-2730 .home-moments-play{opacity:1;}
body.elementor-page-2730 .home-moments-text,body.elementor-page-2730 .home-moments-box:hover .home-moments-text{height:125px;opacity:1;}
body.elementor-page-2730 .home-moments-carousel .home-moments-box:hover{transform:translateY(0);}
body.elementor-page-2730 .e-4bc225c-mttl02{color:#FFFFFF;}
}
/* moments arrows: Figma Ellipse 66 = white 62px circle + #18948D chevron (same as Rental's carousel) */
body.elementor-page-2730 .home-moments-carousel .elementor-swiper-button{width:62px;height:62px;background-color:#FFFFFF;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.10);color:#18948D;display:flex;align-items:center;justify-content:center;top:50%;}
body.elementor-page-2730 .home-moments-carousel .elementor-swiper-button i{font-size:20px;}
body.elementor-page-2730 .home-moments-carousel .elementor-swiper-button svg{width:12px;height:24px;fill:#18948D;}
body.elementor-page-2730 .home-moments-carousel .elementor-swiper-button-prev{left:0;}
body.elementor-page-2730 .home-moments-carousel .elementor-swiper-button-next{right:0;}
body.elementor-page-2730 .home-moments-carousel .swiper-pagination{display:none;}

/* ===== why groups choose (#groups-why) + group reservations (#groups-reservations) =====
   Four children share ONE grid cell on desktop: [square photo (mobile only)] [wave photo] [white scrim] [copy].
   The band is sized max(111.8vw, 1560px) and centred, so its height (width x 0.4209) is ALWAYS taller than the copy even at
   1025px, where 111.8vw alone would be only 483px against 562px of copy - that was the text spilling out of the band. The
   extra width simply bleeds past the section, which is overflow:hidden. The photo keeps its natural aspect so it never
   distorts and stays pixel-aligned with the mask. (Desktop overrides both figures further down.) */
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo{display:block;height:auto;}
body.elementor-page-2730 #groups-why-scrim,body.elementor-page-2730 #groups-reservations-scrim{aspect-ratio:1880.75/791.577;padding:0;pointer-events:none;}
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo,body.elementor-page-2730 #groups-why-scrim,body.elementor-page-2730 #groups-reservations-scrim{width:max(111.8vw,1560px);max-width:none;-webkit-mask-image:var(--groups-wave);mask-image:var(--groups-wave);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
body.elementor-page-2730 #groups-why-square,body.elementor-page-2730 #groups-reservations-square{display:none;}
body.elementor-page-2730 .groups-list{margin-bottom:24px!important;}
body.elementor-page-2730 .groups-list ul{margin:0 0 0 24px;padding:0;list-style:disc;}
body.elementor-page-2730 .groups-list li{margin:0;padding:0;}

@media(min-width:1025px){
body.elementor-page-2730 #groups-why,body.elementor-page-2730 #groups-reservations{display:grid!important;grid-template-columns:100%;align-items:center;}
body.elementor-page-2730 #groups-why>*,body.elementor-page-2730 #groups-reservations>*{grid-area:1/1;}
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo,body.elementor-page-2730 #groups-why-scrim,body.elementor-page-2730 #groups-reservations-scrim{justify-self:center;}
body.elementor-page-2730 #groups-why-copy,body.elementor-page-2730 #groups-reservations-copy{justify-self:start;position:relative!important;inset:auto!important;transform:none!important;padding-block:40px;}
body.elementor-page-2730 #groups-why-copy{margin-left:max(40px,calc(50% - 675px));}
body.elementor-page-2730 #groups-reservations-copy{margin-left:min(calc(50% + 258px),calc(100% - 444px));}
/* section 3 rides over section 2's bottom wave and over the venues section (Figma Vector 4 layering) */
body.elementor-page-2730 #groups-reservations{margin-top:-6.96vw;}
body.elementor-page-2730 #groups-venues{margin-top:-11.3vw;}
}

@media(max-width:1024px){
body.elementor-page-2730 #groups-why,body.elementor-page-2730 #groups-reservations{display:flex!important;flex-direction:column;}
body.elementor-page-2730 #groups-why-copy,body.elementor-page-2730 #groups-reservations-copy{position:relative!important;inset:auto!important;transform:none!important;}
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo{width:100%;}
body.elementor-page-2730 #groups-why-scrim,body.elementor-page-2730 #groups-reservations-scrim{display:none;}
/* Stacked, the copy is no longer an overlay sitting on the light end of the wave, so it must stop carrying the desktop
   overlay's fixed widths: the block was pinned to 640px and its paragraphs to 414px, which left up to 384px of dead space
   beside the text on a tablet. Full-width block, text capped at a 640px measure. */
body.elementor-page-2730 #groups-why-copy,body.elementor-page-2730 #groups-reservations-copy{width:100%!important;max-width:none!important;}
body.elementor-page-2730 #groups-why-copy>*,body.elementor-page-2730 #groups-reservations-copy>*{max-width:min(100%,640px)!important;}
body.elementor-page-2730 #groups-why-copy>p,body.elementor-page-2730 #groups-reservations-copy>p{width:auto!important;}
}

/* mobile: square crop above the copy, wide wave photo removed (pattern from the Beach dune section) */
@media(max-width:767px){
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo{display:none;}
body.elementor-page-2730 #groups-why-square,body.elementor-page-2730 #groups-reservations-square{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;margin:0 0 26px;}
}

/* ===== venues (#groups-venues) ===== cream panel = the site's sandy noise JPEG (media 2092, FAQ-Section-bg.jpg),
   pinned to a natural 1600px width so the grain never scales, over a flat #F9F6F1 that matches the file. */
body.elementor-page-2730 #groups-venues-panel{padding-left:max(40px,calc(50vw - 694px))!important;background-color:#F9F6F1!important;background-image:url('/wp-content/uploads/2026/08/FAQ-Section-bg.jpg')!important;background-size:1600px auto!important;background-position:center top!important;background-repeat:no-repeat!important;}
body.elementor-page-2730 #groups-venues-photo{display:block;width:60.4%;flex:0 0 60.4%;height:auto;object-fit:cover;}
@media(max-width:1024px){
body.elementor-page-2730 #groups-venues-panel{padding-left:30px!important;width:100%;}
body.elementor-page-2730 #groups-venues-photo{width:100%;flex:0 0 auto;aspect-ratio:1400/1200;}
}
@media(max-width:767px){body.elementor-page-2730 #groups-venues-panel{padding-left:24px!important;}}

/* ===== find a home (#groups-homes) =====
   Band = the Offers teal band JPEG (media 2728, offers-band.jpg), center top, never stretched: 100% wide on desktop and
   pinned to natural widths below 1240 so the grain keeps its scale. Flat #F8F7F2 (the file's own bottom rows) carries any
   height below it. Wavy top = SVG alpha mask (media 2867) unioned with a solid layer.
   NOTE: this container is boxed, so the two columns live in .e-con-inner - that is what has to switch to column below 1240. */
body.elementor-page-2730 #groups-homes{margin-top:-7.8vw;background-color:#F8F7F2!important;background-image:url('/wp-content/uploads/2026/09/offers-band.jpg')!important;background-size:100% auto!important;background-position:center top!important;background-repeat:no-repeat!important;-webkit-mask-image:url('/wp-content/uploads/2026/09/groups-homes-band-wave-top-mask-alpha.svg'),linear-gradient(#000,#000);mask-image:url('/wp-content/uploads/2026/09/groups-homes-band-wave-top-mask-alpha.svg'),linear-gradient(#000,#000);-webkit-mask-size:100% 6vw,100% calc(100% - 5.9vw);mask-size:100% 6vw,100% calc(100% - 5.9vw);-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;}
@media(max-width:1239px){body.elementor-page-2730 #groups-homes>.e-con-inner{flex-direction:column;}body.elementor-page-2730 #groups-homes{background-size:1400px auto!important;}body.elementor-page-2730 #groups-homes-copy{width:100%;padding-top:0!important;}body.elementor-page-2730 #groups-homes-right{width:100%;}}
@media(max-width:767px){body.elementor-page-2730 #groups-homes{background-size:1682px auto!important;}}
body.elementor-page-2730 .groups-homes-carousel .swiper{padding:0 40px;}
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button{width:16px;height:34px;color:#18948D;top:35%;display:flex;align-items:center;justify-content:center;}
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button i{font-size:30px;}
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button svg{width:12px;height:34px;fill:#18948D;}
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button-prev{left:0;}
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button-next{right:0;}
body.elementor-page-2730 .groups-homes-carousel .swiper-pagination{display:none;}
body.elementor-page-2730 .groups-homes-carousel .swiper-slide>.e-con{height:100%;}
body.elementor-page-2730 .groups-home-card{text-decoration:none;}
body.elementor-page-2730 .groups-home-card:hover img{opacity:.92;}
body.elementor-page-2730 .groups-homes-carousel img.e-image-base{width:100%;height:auto;aspect-ratio:296/340;object-fit:cover;display:block;}
@media(max-width:767px){body.elementor-page-2730 .groups-homes-carousel .swiper{padding:0 28px;}}
/* 16x34 is far under the 44px minimum touch target, and these arrows are the only way to reach homes 2 and 3 on a phone.
   Grow the box to 44x44 and pull it back by half the difference so the chevron itself does not move. */
@media(max-width:1024px),(hover:none){
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button{width:44px;height:44px;margin-top:-5px;}
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button-prev{left:-14px;}
body.elementor-page-2730 .groups-homes-carousel .elementor-swiper-button-next{right:-14px;}
}

/* ===== links ===== */
body.elementor-page-2730 p a{color:inherit;text-decoration:none;}
body.elementor-page-2730 p a:hover{color:#097173;}

/* ===== mobile + tablet whitespace pass =====
   The stacked layouts were still carrying the desktop overlay's spacing, which left the rhythm inverted: a 24px gutter
   (every other page here uses 30), 86px of dead air between a section's photo and its heading (26px image margin + 60px
   copy padding), and then only 10px between the last line of that section and the next section's photo. Scale is anchored
   on the Beach dune-crossovers section, the house pattern for photo-above-copy: 30px gutter, 30px photo -> heading,
   60px before the next section. */
@media(max-width:1024px){
/* a real gap before the next section, and a measured one after the photo */
body.elementor-page-2730 #groups-why-copy,body.elementor-page-2730 #groups-reservations-copy{padding:40px 30px 60px!important;}
body.elementor-page-2730 #groups-venues-panel{padding-top:60px!important;padding-bottom:60px!important;padding-right:30px!important;}
/* the venue photo was running 658px tall at 768 and 878px at 1024, nearly all of it sky */
body.elementor-page-2730 #groups-venues-photo{aspect-ratio:3/2;}
}

/* tablet only: the wave band was letterboxing to a 324px strip, so the masked top and bottom curves read as a torn
   banner floating on white rather than as a band. Give it height and let the photo crop instead of the box shrinking. */
@media(min-width:768px) and (max-width:1024px){
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo{height:clamp(380px,50vw,480px);object-fit:cover;}
}

@media(max-width:767px){
/* house gutter: this page was the only one at 24 */
body.elementor-page-2730 #groups-hero,body.elementor-page-2730 #groups-homes{padding-left:30px!important;padding-right:30px!important;}
body.elementor-page-2730 #groups-venues-panel{padding-left:30px!important;padding-right:30px!important;}
body.elementor-page-2730 #groups-why-square,body.elementor-page-2730 #groups-reservations-square{margin-bottom:0!important;}
body.elementor-page-2730 #groups-why-copy,body.elementor-page-2730 #groups-reservations-copy{padding:30px 30px 60px!important;}
/* hero stack ran 27/80/38/60 with no system behind it - now 40/60/24/48 */
body.elementor-page-2730 #groups-hero-photo{margin-top:20px!important;}
body.elementor-page-2730 .e-0314bc3-150feeb{margin-top:40px!important;margin-bottom:4px!important;}
body.elementor-page-2730 .e-b2cac38-9656cc1{margin-bottom:28px!important;}
body.elementor-page-2730 #groups-moments{margin-top:0!important;}
/* the 50px card offset exists for Home's staggered hover lift, which is already switched off at this size - all it did
   here was add 50px of blank space between the intro copy and the first card */
body.elementor-page-2730 .home-moments-carousel .swiper-slide .home-moments-box{margin-top:0;}
}

/* Above ~480 a 1/1 crop is as tall as the screen is wide (744px on an iPad Mini in portrait) - landscape it instead. */
@media(min-width:481px) and (max-width:767px){
body.elementor-page-2730 #groups-why-square,body.elementor-page-2730 #groups-reservations-square{aspect-ratio:4/3;}
}

/* ===== contrast (WCAG AA) =====
   Measured by sampling the band JPEG at each element's OWN row rather than the flat #F8F7F2 behind it, which is what hid
   how bad this was: #18948D read 2.75:1 on the eyebrow, 2.78:1 on the card titles and 3.20:1 on the card meta line - all
   normal-size text, which needs 4.5:1. #097173 is the dark teal this page already uses for buttons and link hovers, and
   takes them to 4.30 / 4.34 / 5.01. The two at ~4.3 are still a shade under AA; closing that last gap is a palette call,
   because /stay/offers/ paints the same band text in #02938D and measures 2.79:1. */
body.elementor-page-2730 #groups-homes-right>p.subhead,
body.elementor-page-2730 .groups-home-card h3,
body.elementor-page-2730 .groups-home-card p{color:#097173;}

/* The moments reveal veil was rgba(24,148,141,.8): white body copy over it measured 3.29-3.79:1 across the five card
   photos and 2.81:1 over their brightest areas. rgba(9,113,115,.88) measures 5.09-5.53:1 average and 4.55:1 against pure
   white, so it clears AA on every card. Home uses the lighter veil - worth carrying these values over when that section
   is rebuilt there. */
body.elementor-page-2730 .home-moments-box:hover .home-moments-text-container{background:rgba(9,113,115,.88);}
@media screen and (max-width:480px),(hover:none){
body.elementor-page-2730 .home-moments-text-container{background:rgba(9,113,115,.88);}
}

/* ===== Figma-exact scrim gradients + wave breathing room (desktop only) =====
   Ported from the white-overlay vectors themselves (1027:5663 "Vector 7" and 1027:5666 "Vector 8"), whose SVG fills are:
     why   - linear x1=541 y1=116 x2=1685 y2=684, stops: white 1.0 / white .543399 @58.26% / white 0 @100%
     resv  - linear x1=1443 y1=352 x2=529 y2=804, stops: white 1.0 @23.56% / white 0 @100%
   Both START AT FULL WHITE and hold it well into the band; the .72 cap I had been using is why the copy sat on a
   washed-out photo instead of a solid white ground. Converting userSpaceOnUse endpoints to CSS percentages on the
   1880.75x791.577 box gives the angles and stop positions below (the solid run to 26.3% matches the 25.9% of baked-in
   white measured in the original Figma jpeg exports). */
body.elementor-page-2730 #groups-why-scrim{background:linear-gradient(116.4deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 26.3%,rgba(255,255,255,.543) 62.9%,rgba(255,255,255,0) 89%);}
body.elementor-page-2730 #groups-reservations-scrim{background:linear-gradient(243.7deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 38.7%,rgba(255,255,255,0) 77%);}

@media(min-width:1025px){
/* The copy was ending 30px above the wave's lower edge (and starting 39px below the upper one). Figma's own geometry -
   band 1880.75x791.577 at y2397, title at y2545, description ending y3023 - works out to ~78px top and ~87px clearance,
   because our four separate blurbs with 18px gaps stack ~85 units taller than Figma's single description block. Rather
   than tighten the type, give the band the height back. The px floor has to rise with the vw figure or the two disagree:
   at 1025 the old 1560px floor still won, the band did not grow at all, and shifting the copy pushed it ABOVE the wave's
   upper edge. 1735px is the same ratio to 120.5vw that 1560 was to 111.8vw, so the band is a constant 1735 from 1025 to
   1440 and vw-driven above that. */
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo,body.elementor-page-2730 #groups-why-scrim,body.elementor-page-2730 #groups-reservations-scrim{width:max(120.5vw,1735px);}
/* Venues: the section was ending too soon under the button, so the homes band's wavy top crowded it. Figma's venue photo
   (Rectangle 82) is 1026x986 - aspect 1.041 - while ours was running at the file's own 1.166, costing the section ~90px
   of height. Restoring the designed aspect pushes the section bottom, and with it the overlapping wave, back down. */
body.elementor-page-2730 #groups-venues-photo{aspect-ratio:1026/986;}
/* Top/bottom edge fringe. Two SEPARATELY masked layers can never cover each other cleanly: along the antialiased edge the
   scrim's own coverage is partial too, so whatever the photo paints at, say, alpha .5 only gets half-covered by the white
   above it - the result is a thin band of un-gradiented photo tracing the whole wave. Two fixes together:
   (1) the photo was taking its box from the FILE (1880x792) while the mask and the scrim use the Figma viewBox
       (1880.75x791.577), making it 0.68px taller and already overhanging the scrim by 0.34px top and bottom;
   (2) the photo carries align-self:flex-start from its own Elementor styles while the scrim inherited the grid's
       align-items:center, so simply making the scrim WIDER only overshot downwards. Pin the scrim to flex-start too so the
       two boxes coincide exactly, then scale it about its centre - a transform does not touch layout, and every boundary
       point of a centre-scaled shape moves outward, so the scrim's opaque edge ends up outside the photo's on all four
       sides (~3.5px horizontally, ~1.5px vertically at 1440).
   The page behind both bands is pure white, so the overshoot lands white-on-white and never shows. */
body.elementor-page-2730 #groups-why-photo,body.elementor-page-2730 #groups-reservations-photo{aspect-ratio:1880.75/791.577;}
body.elementor-page-2730 #groups-why-scrim,body.elementor-page-2730 #groups-reservations-scrim{align-self:flex-start;transform:scale(1.004);transform-origin:center;}
/* The copy is centred in the grid cell, so a bottom margin shifts it up by half its value - 10px biases the slack towards
   the bottom edge the way Figma does (78 top / 87 bottom) without crowding the top at 1025, where slack is tightest.
   Measured after: 32/63 at 1025, 42/59 at 1200, 54/57 at 1440, 145/165 at 1920. */
body.elementor-page-2730 #groups-why-copy{margin-bottom:10px;}
}

/* ===== stacked homes section (<=1239) =====
   Once the two columns stack, the copy was still wearing the desktop column's hard widths - a 420px heading and a 342px
   paragraph marooned in a full-width band, leaving ~600px of empty teal beside them at 1100. Three different left edges
   made it worse: copy at the container edge, cards inset 40 by the carousel's arrow gutter, and the eyebrow inset 55 by a
   hard-coded desktop margin. Inset the copy to the card edge, align the eyebrow to it, and let the text use the width. */
@media(max-width:1239px){
body.elementor-page-2730 #groups-homes-copy{padding-left:40px!important;padding-right:40px!important;}
body.elementor-page-2730 #groups-homes-copy>h2{width:auto!important;max-width:min(100%,780px)!important;}
body.elementor-page-2730 #groups-homes-copy>p{width:auto!important;max-width:min(100%,620px)!important;}
body.elementor-page-2730 #groups-homes-right>p.subhead{margin-left:40px!important;}
}

/* 1024-1239 has enough width for a proper two-column header - heading left, paragraph and button right. That fills the
   band rather than leaving it empty, and it halves the block's height (320px -> 161px at 1239), so the cards sit closer
   to the copy instead of floating below a void. Below 1024 two columns would squeeze the heading, so it stays stacked. */
@media(min-width:1024px) and (max-width:1239px){
body.elementor-page-2730 #groups-homes-copy{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:70px;align-items:start;}
body.elementor-page-2730 #groups-homes-copy>h2{grid-column:1;grid-row:1/span 2;align-self:center;max-width:100%!important;}
body.elementor-page-2730 #groups-homes-copy>p{grid-column:2;grid-row:1;max-width:100%!important;margin:0 0 24px!important;}
body.elementor-page-2730 #groups-homes-copy>.elementor-widget-button{grid-column:2;grid-row:2;}
}

/* On phones the copy stays on the page gutter - indenting it to the carousel's 28px arrow gutter would put it out of line
   with every other section. Only the eyebrow moves, so it sits on the cards' edge instead of its desktop 55px. */
@media(max-width:767px){
body.elementor-page-2730 #groups-homes-copy{padding-left:0!important;padding-right:0!important;}
body.elementor-page-2730 #groups-homes-right>p.subhead{margin-left:28px!important;}
}

/* ===== homes band: wave shape, texture and vertical rhythm =====
   SHAPE. The mask SVG is the whole Figma band traced from "Rectangle 5" (1031:5899), viewBox 1997.66x120. But Figma places
   that 1997.66-wide shape inside a 1682 frame at x=-75, so its wave only reaches y=0 at frame x ~1836 - well OFF the right
   edge - and the flat run from x1910 to the shape's own right edge is entirely off-canvas. Sizing the mask to `100%`
   dragged both into view: that is the kink and the flat-topped wedge in the top right corner. Size it the way Figma does
   instead - 1997.66/1682 = 118.77vw wide, same 120/1997.66 aspect so 7.134vw tall - and offset it right by the shape's own
   off-centre position, ((-75 + 1997.66/2) - 841)/1682 = 4.92vw. The band's top edge now runs 19 / 84 / 27 across a 1440
   viewport as one continuous curve, and the peak stays off screen where the design puts it.
   TEXTURE. offers-band.jpg's grain fades out over its top ~50 rows (row standard deviation 4.6 at y0 rising to 15 by y50),
   so wherever the band's edge sat near y=0 it showed flat untextured colour next to the grained band below - the "portion
   without the gradient". A -1.4vw background offset starts the band below that ramp. */
body.elementor-page-2730 #groups-homes{-webkit-mask-size:118.77vw 7.134vw,100% calc(100% - 7vw);mask-size:118.77vw 7.134vw,100% calc(100% - 7vw);-webkit-mask-position:calc(50% + 4.92vw) top,center bottom;mask-position:calc(50% + 4.92vw) top,center bottom;background-position:center -1.4vw!important;}

/* RHYTHM. The wave's deepest point is 85px at 1440, so the old 120px top padding left only ~35px of clear band above the
   copy. 180/100 gives ~95px clear above against 100px below - optically centred under the curve. */
@media(min-width:1024px){
body.elementor-page-2730 #groups-homes>.e-con-inner{padding-top:180px!important;padding-bottom:100px!important;}
}
/* Only at >=1240, where the inner is still a row - below that it is the stacked column and must stay left-aligned. */
@media(min-width:1240px){
body.elementor-page-2730 #groups-homes>.e-con-inner{align-items:center;}
}

/* ===== moments carousel phone refinement =====
   Touch layouts keep the card copy visible, so remove the desktop stagger and give the photo more room.
   The description now uses its natural height instead of reserving 125px on every card. */
@media(max-width:767px){
body.elementor-page-2730 #groups-moments .swiper-slide .home-moments-box,
body.elementor-page-2730 #groups-moments .swiper-slide:nth-child(even) .home-moments-box{height:520px!important;margin-top:0!important;transform:none;}
body.elementor-page-2730 #groups-moments .home-moments-box>.home-hero-box-img,
body.elementor-page-2730 #groups-moments .home-moments-box>.e-div-block-base{width:100%!important;height:100%!important;object-fit:cover;object-position:center center;}
body.elementor-page-2730 #groups-moments .home-moments-text-container{gap:12px!important;padding:20px 10px 16px!important;}
body.elementor-page-2730 #groups-moments .home-moments-text,
body.elementor-page-2730 #groups-moments .home-moments-box:hover .home-moments-text{height:auto;min-height:0;opacity:1;}
}

/* ===== group inquiry off-canvas forms ===== */
body.elementor-page-2730 .groups-inquiry-offcanvas .e-off-canvas__main{width:min(560px,100vw)!important;max-width:100vw;height:100dvh!important;background:#F8F6F1;box-shadow:-14px 0 40px rgba(0,0,0,.16);}
body.elementor-page-2730 .groups-inquiry-offcanvas .e-off-canvas__content{height:100%;overflow-y:auto;overscroll-behavior:contain;}
body.elementor-page-2730 .groups-drawer-content{position:relative;min-height:100%;}
body.elementor-page-2730 .groups-drawer-title .elementor-heading-title{margin:0;color:#097173;font-family:'richmond-display',serif;font-size:clamp(38px,3vw,52px);font-style:italic;font-weight:400;line-height:1;letter-spacing:1px;}
body.elementor-page-2730 .groups-drawer-intro{margin:12px 0 24px;color:#000;font:400 16px/1.4 'nunito',sans-serif;}
body.elementor-page-2730 .groups-drawer-intro p{margin:0;}
body.elementor-page-2730 .groups-drawer-close{position:absolute;z-index:3;top:14px;right:14px;width:44px!important;}
body.elementor-page-2730 .groups-drawer-close .elementor-button{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px;min-height:44px;padding:0!important;border:0;border-radius:50%;background:#097173!important;color:#fff!important;font-size:0!important;box-shadow:0 2px 8px rgba(0,0,0,.12);}
body.elementor-page-2730 .groups-drawer-close .elementor-button::before{content:'×';font:300 29px/1 Arial,sans-serif;transform:translateY(-1px);}
body.elementor-page-2730 .groups-drawer-close .elementor-button:hover{background:#02938D!important;}
body.elementor-page-2730 .groups-drawer-close .elementor-button:focus-visible{outline:3px solid #7ED7D2!important;outline-offset:3px;}
body.elementor-page-2730 .groups-popup-form p{margin:0;}
body.elementor-page-2730 .groups-popup-form>div{margin-bottom:14px;}
body.elementor-page-2730 .groups-popup-form .contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px;}
body.elementor-page-2730 .groups-popup-form .contact-row>div{min-width:0;}
body.elementor-page-2730 .groups-popup-form input:not([type=hidden]):not([type=submit]):not(.hidden),
body.elementor-page-2730 .groups-popup-form select,
body.elementor-page-2730 .groups-popup-form textarea{display:block;width:100%;min-height:52px;margin:0;padding:14px 16px!important;border:1px solid #D9D9D9;border-radius:4px;background:rgba(255,255,255,.62);color:#000;font:700 11px/18px 'nexa',sans-serif;letter-spacing:1.35px;}
body.elementor-page-2730 .groups-popup-form textarea{min-height:116px;resize:vertical;}
body.elementor-page-2730 .groups-popup-form input::placeholder,
body.elementor-page-2730 .groups-popup-form textarea::placeholder{color:#000;opacity:1;}
body.elementor-page-2730 .groups-popup-form input:focus-visible,
body.elementor-page-2730 .groups-popup-form select:focus-visible,
body.elementor-page-2730 .groups-popup-form textarea:focus-visible{outline:3px solid #7ED7D2;outline-offset:1px;border-color:#097173;}
body.elementor-page-2730 .groups-popup-form input[type=submit]{display:block;width:180px;max-width:100%;min-height:51px;margin:2px 0 0 auto;padding:15px 40px 15px 20px!important;border:0;border-radius:4px;background:#126472 url('/wp-content/uploads/2026/09/home-collections-imgvector7.svg') right 22px center/7px 13px no-repeat!important;color:#fff;font:700 11px/18px 'nexa',sans-serif;letter-spacing:1.65px;text-transform:uppercase;cursor:pointer;}
body.elementor-page-2730 .groups-popup-form input[type=submit]:hover,body.elementor-page-2730 .groups-popup-form input[type=submit]:focus-visible{background-color:#097173!important;}
body.elementor-page-2730 .groups-popup-form .wpcf7-not-valid-tip{margin-top:5px;color:#8A2525;font:700 12px/1.35 'nunito',sans-serif;}
body.elementor-page-2730 .groups-popup-form .wpcf7-response-output{margin:18px 0 0!important;padding:12px 14px!important;font:700 14px/1.4 'nunito',sans-serif;}
body.elementor-page-2730 .groups-popup-form .wpcf7-spinner{margin:12px 0 0 14px;}
@media(max-width:767px){
body.elementor-page-2730 .groups-inquiry-offcanvas .e-off-canvas__main{width:100vw!important;}
body.elementor-page-2730 .groups-drawer-content{padding:54px 24px 36px!important;}
body.elementor-page-2730 .groups-drawer-title .elementor-heading-title{font-size:40px;}
body.elementor-page-2730 .groups-drawer-intro{font-size:15px;margin-bottom:20px;}
body.elementor-page-2730 .groups-popup-form .contact-row{grid-template-columns:1fr;gap:14px;}
body.elementor-page-2730 .groups-popup-form input[type=submit]{width:100%;margin-left:0;}
}

/* Keep the native drawers on the intended right edge. Elementor's generated flex-end rule is not applied on this build. */
body.elementor-page-2730 .groups-inquiry-offcanvas .e-off-canvas__main{left:auto!important;right:0!important;}
/* Elementor leaves its scroll-lock class behind after an Off-Canvas closes. Unlock only when every Off-Canvas is hidden. */
body.elementor-page-2730.e-off-canvas__no-scroll-animation:not(:has(.e-off-canvas[aria-hidden="false"])){overflow:auto!important;}

/* An interrupted Elementor exit animation can leave the drawer translated offscreen when reopened. The open dialog must always place its panel onscreen. */
body.elementor-page-2730 .groups-inquiry-offcanvas[aria-hidden="false"] .e-off-canvas__main{transform:none!important;animation:none!important;visibility:visible!important;opacity:1!important;}/* End custom CSS */