@font-face{font-family:Gilroy;src:url('/assets/fonts/Gilroy-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url('/assets/fonts/Gilroy-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url('/assets/fonts/Gilroy-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url('/assets/fonts/Gilroy-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url('/assets/fonts/Gilroy-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url('/assets/fonts/Gilroy-Extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url('/assets/fonts/Gilroy-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/vendor/WorkSans-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/vendor/WorkSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/vendor/WorkSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/vendor/WorkSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Work Sans';src:url('/assets/vendor/WorkSans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

.bgvid{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
 contain:paint}
/* The phone rule for background video is emitted per container, not here:
   the iframe is only dropped where Elementor's fallback image actually exists
   to take its place. Blanket-hiding it left the Stays and Homes and News heroes
   as 633px of nothing, because their fallback is a placeholder that is not in
   the media library. */
.bgvid iframe,.bgvid video{position:absolute;top:50%;left:50%;border:0;pointer-events:none;
 width:max(100%,calc(100vh * 16 / 9));height:max(100%,calc(100vw * 9 / 16));
 transform:translate(-50%,-50%) scale(1.4);object-fit:cover}
.bgvid video{width:100%;height:100%;transform:translate(-50%,-50%);object-fit:cover}
section{padding:0}
.rt p:last-child{margin-bottom:0}
/* Image widgets. Measured off live: each figure is a flex item whose base size
   is the image's intrinsic width, so a row of images shrinks proportionally and
   then all of them stretch to the tallest one's height. Live uses object-fit
   fill and visibly distorts the shorter image; cover is used here so the same
   boxes are filled without squashing, which matters for the Villa Kaba photos
   that are not authored to the original box aspect. */
.img{margin:0;min-width:0}
.img img{display:block;width:100%;height:100%;object-fit:cover}
.iconbox{display:flex;flex-direction:column;gap:10px;min-width:0}
/* Elementor renders the title as an h3 and the description as a p, so both are
   block-level and fill the content column; as inline spans they were hugging
   their text (154px instead of 643px). #7A7A7A is Elementor's own default
   description colour, which the build was not applying. */
/* Live renders an icon-box title as an h3, so a widget that sets no title
   size inherits the theme's h3: 18.24px at 1.3 line-height. The stat tiles
   on the home page are exactly that case and were coming out at 16px.
   A widget that does set a size emits its own higher-specificity rule. */
.ib-t{display:block;margin:0;font-weight:600;font-size:24px;line-height:1.3}
@media(max-width:767px){.ib-t{font-size:18.24px}}
.ib-d{display:block;margin:0;color:#7A7A7A}
.ib-c{min-width:0;flex:1 1 auto;display:flex;flex-direction:column}
.ib-i{flex:none;display:inline-flex;align-items:center;justify-content:center}
.ilist{list-style:none;margin:0;padding:0}
/* Font Awesome is shipped from the backup (same version live serves), so the
   icons are the real glyphs. The stand-in CSS dot that used to sit here was
   drawing a bullet in place of every icon, including the Instagram mark. */
.iconbox i[class^="fa"],.iconbox i[class*=" fa"],
.socials i[class^="fa"],.socials i[class*=" fa"]{font-style:normal;flex:none}
.carousel{width:100%;overflow:hidden}
.carousel ul{display:flex;gap:16px;list-style:none;margin:0;padding:0 0 12px;
 overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
 scrollbar-width:thin}
.carousel li{flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center}
.carousel img{display:block}
/* card metrics measured off the live posts widget: image 66%, text pad 20/24/28 */
.postgrid{width:100%}
.pc{display:flex;flex-direction:column;min-width:0;
 box-shadow:0 0 6px 0 rgba(204,204,204,.5)}
.pc-l{display:block}
.pc .ph{display:block;overflow:hidden;background:#EFEFEF}
.pc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.pc:hover .ph img{transform:scale(1.04)}
.pc-b{padding:20px 24px 28px;min-width:0;flex:1 1 auto}
/* side-thumbnail cards (the More Posts rail) need tighter gutters */
.pc[data-side] .pc-b,.postgrid.side .pc-b{padding:0}
.postgrid.side .pc{gap:14px;margin-bottom:26px}
.postgrid.side .pc-t{font-size:.95rem;line-height:1.3;margin:0 0 6px}
.postgrid.side .pc-x p{font-size:.78rem;line-height:1.5}
.postgrid.side .pc-c{margin-bottom:6px}
.pc-c{display:block;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;
 color:#A8A29A;font-weight:500;margin:0 0 10px}
.pc-t{margin:0 0 10px;text-transform:none;letter-spacing:0;font-weight:400}
.pc-t,.pc-t a{font-family:Gilroy,sans-serif;font-size:18px;line-height:1.3;font-weight:700;
 color:#1A1A1A;text-decoration:none;transition:color .25s ease}
.pc-t a:hover{color:#A67C52}
.pc-x{margin:0 0 10px}
.pc-x p{margin:0;font-family:'Work Sans',sans-serif;font-size:13px;line-height:1.55;
 color:#6B6B6B}
@media(max-width:767px){
 .pc-b{padding:16px 18px 22px}
 .pc-x p{font-size:14px}
}
.rawhtml{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rawhtml>*{max-width:100%}
img,svg,video,iframe:not(.bgvid iframe){max-width:100%}
/* Elementor's own breakpoints are tablet <=1024 and mobile <=767, and it only
   changes what the page data says to change. Blanket !important collapses here
   used to steamroll the real responsive design, so they are gone. Anything
   below is a genuine overflow guard, not a layout opinion. */
@media(max-width:1024px){
 section[id^="c"],section [id^="c"]{max-width:100%}
}
@media(max-width:767px){
 /* Measured on live at 390px: containers keep their own flex-direction and
    simply wrap (Elementor sets --flex-wrap-mobile: wrap). Forcing every section
    to a column was the old guard here, and it flattened hand-written blocks —
    one Stays and Homes section went from 877px to 4601px. */
 #content section[id],#content section [id],
 .site-foot section[id],.site-foot section [id]{flex-wrap:wrap}
 #content section[id],.site-foot section[id]{max-width:100%}
 /* Nothing may exceed the screen. This clamps without changing layout:
    a few widgets keep a desktop width that is wider than a phone. */
 #content [id],.site-foot [id],#content img,#content figure{max-width:100%}
 /* Final guarantee that a phone never scrolls sideways. clip rather than
    hidden so it creates no scroll container and leaves sticky alone. The
    only things it trims are the horizontal carousels, which are meant to
    be clipped, and a background video that is deliberately oversized. */
 #content{overflow-x:clip}
 /* A Swiper track must never wrap: it scrolls. The wrap rule above was
    putting all eight Stays and Homes slides on their own row, turning a
    538px carousel into a 4254px stack. */
 #content .swiper-wrapper{flex-wrap:nowrap!important}
 /* Grid collapse is handled per container from the page data now: Elementor
    drops a grid to one column at mobile unless grid_columns_grid_mobile says
    otherwise. The blanket !important rule that used to live here also flattened
    the six grids that do carry an override -- the villa spec strip is four
    across on live at 390px and was stacking into four full-width rows. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Gilroy, Helvetica, Arial, sans-serif;color:#334155;background:#FFFFFF;max-width:100vw;
 font-size:16px;line-height:1.65;font-weight:400;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
/* Heading defaults match the live theme, not a house style: weight 600,
   line-height 1.3, no letter-spacing and no forced uppercase. The build used to
   force text-transform:uppercase on every h2, which changed real copy — live
   renders "What Guests Are Saying" in sentence case. Elementor emits its own
   per-widget rules wherever a heading is meant to differ. */
h1,h2,h3,h4{margin:0;color:#343434;font-weight:600;line-height:1.3;
 letter-spacing:normal;text-transform:none;overflow-wrap:break-word}
h1{font-size:clamp(2.4rem,5.2vw,65px)}
h2{font-size:clamp(1.8rem,3.6vw,48px)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
p{margin:0 0 1em}
strong,b{font-weight:700}
.wrap{max-width:1024px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#7A8794;
 font-weight:500;margin:0 0 14px}
.lede{font-size:.92rem;color:#7A8794;max-width:46ch}
.btn{display:inline-block;padding:12px 25px;border:0 solid transparent;border-radius:3px;
 color:#262626;font-size:12px;line-height:1;letter-spacing:1.4px;text-transform:uppercase;
 font-weight:700;transition:.18s}
.btn-w{line-height:0;font-size:0}
.btn{align-self:flex-start}
.btn:hover{background:#343434;color:#fff;border-color:#343434}
.btn-solid{background:#343434;color:#fff;border-color:#343434}
.btn-solid:hover{background:#000;border-color:#000}
.btn-light{color:#fff}
.btn-light:hover{background:#fff;color:#343434}
.band-dark{background:#343434;color:#fff}
.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:rgba(255,255,255,.55)}
.band-dark .lede{color:rgba(255,255,255,.68)}
.band-sage{background:#D7E0D4}
.band-mint{background:#DCE8D5}
.two-col{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.row-end{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.split-pad{padding:72px 56px}
.split img{width:100%;height:100%;object-fit:cover;min-height:420px}
/* Header. Transcribed from the live site's <style id="fabric-header-css">
   plus the body.header-solid block in <style id="wp-custom-css">. Every value
   here is measured, not guessed: min-height is viewport-relative (11vh over a
   hero, 8vh once solid), the three columns are fixed-percentage, and the logo
   shrinks by transform rather than by width. */
.site-head{position:fixed;top:0;left:0;right:0;z-index:9999}
.site-head>section{background:transparent!important;padding:20px 50px!important;
 min-height:11vh!important;display:flex;align-items:center;box-sizing:border-box;
 box-shadow:none;
 transition:background-color .35s ease,padding .35s ease,min-height .35s ease,
 box-shadow .35s ease}
/* the generated per-id container rule carries an id selector, so both the
   stuck state and the always-solid state have to out-rank it explicitly */
.site-head.header-scrolled>section,
body.header-solid .site-head>section{background:#FAFAFA!important;
 padding:10px 50px!important;min-height:8vh!important;
 box-shadow:rgba(0,0,0,.06) 0 4px 15px}
#container-for-off-canvas-elementor{flex:0 0 33%!important;display:flex!important;
 align-items:start!important;justify-content:center!important}
#container-for-logo-fabric{flex:0 0 34%!important;display:flex!important;
 align-items:center!important;justify-content:center!important}
#container-for-text-booking{flex:0 0 33%!important;display:flex!important;
 align-items:end!important;justify-content:center!important}
@media(max-width:767px){
 .site-head>section{padding:15px 20px!important}
 .site-head.header-scrolled>section{padding:8px 20px!important}
 /* header-solid is not inside the media query on live either, so its 50px
    side padding wins on mobile too. Kept deliberately: it is what renders. */
 #container-for-off-canvas-elementor{flex:0 0 25%!important}
 #container-for-logo-fabric{flex:0 0 50%!important}
 #container-for-text-booking{flex:0 0 25%!important}
}
/* Every one of these is scoped to .site-head on purpose. The footer uses the
   same .brandmark markup, so the unscoped versions were swapping the footer
   logo to the black mark on a black background and shrinking it too. */
.brandmark{display:flex;align-items:center;justify-content:center;width:100%}
.brandmark img{height:auto;display:block;max-width:100%}
.brandmark .lg-dark{display:none}
.site-head .brandmark img{width:30%;transition:transform .35s ease}
@media(max-width:767px){.site-head .brandmark img{width:70%}}
.site-head.header-scrolled .brandmark img,
body.header-solid .site-head .brandmark img{transform:scale(.8)}
.site-head.header-scrolled .brandmark .lg-light,
body.header-solid .site-head .brandmark .lg-light{display:none}
.site-head.header-scrolled .brandmark .lg-dark,
body.header-solid .site-head .brandmark .lg-dark{display:block}
.site-head.header-scrolled .oc-btn img,
body.header-solid .oc-btn img{filter:none}
/* Content offset. On a header-solid page live pads #content by the header's
   own height so nothing sits under the fixed bar. The CSS value below is the
   pre-JS fallback; shell.js replaces it with the measured height. */
body.header-solid #content{padding-top:max(8vh,60px);transition:padding-top .35s ease}
.site-foot{display:block;background:#000;color:#fff}
.site-foot h2,.site-foot h3,.site-foot h4{color:#fff}
.site-foot a{color:inherit}
/* Off-canvas. Transcribed from the live <style id="fabric-header-css">:
   panel is a fixed pixel width that steps down at 1024 and 767, the overlay is
   75% black, and the panel type is 20px/14px on desktop, 18px/10px on mobile. */
.oc{display:flex;align-items:center}
.oc-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
 width:40px;height:40px;line-height:40px;flex-shrink:0;border:0;background:transparent;
 padding:0;color:#fff;font-size:0}
.oc-btn img{width:40px;height:40px;display:block;transition:filter .35s ease;
 filter:brightness(0) invert(1)}
.oc-bars{display:block;width:26px;height:1.5px;background:currentColor;position:relative}
.oc-bars::before,.oc-bars::after{content:'';position:absolute;left:0;width:26px;height:1.5px;
 background:currentColor}
.oc-bars::before{top:-8px} .oc-bars::after{top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.oc-wrap{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.oc-wrap.open{visibility:visible;pointer-events:auto}
.oc-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);opacity:0;
 transition:opacity .45s ease}
.oc-wrap.open .oc-overlay{opacity:1}
.oc-panel{position:absolute;top:0;left:0;bottom:0;width:400px;max-width:100vw;
 background:#fcfcfc;color:#222;overflow-y:auto;box-sizing:border-box;padding:30px 15px;
 transform:translateX(-100%);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.oc-wrap.open .oc-panel{transform:translateX(0)}
@media(max-width:1024px){.oc-panel{width:250px}}
@media(max-width:767px){.oc-panel{width:200px;padding:24px 15px}}
.oc-close{position:absolute;top:26px;right:24px;width:40px;height:40px;
 display:flex;align-items:center;justify-content:center;
 font-family:Arial,Helvetica,sans-serif;font-size:32px;line-height:1;color:#222;
 text-decoration:none;cursor:pointer;border:0;background:transparent;padding:0;
 transition:color .25s ease,transform .25s ease;z-index:5}
.oc-close:hover{color:#858585;transform:rotate(90deg)}
/* Panel type. The generated per-id rules carry an id selector, so these have to
   out-rank them. */
.oc-panel h2,.oc-panel h3,.oc-panel h4{font-family:Gilroy,sans-serif!important;
 font-weight:700!important;font-size:14px!important;letter-spacing:4px!important;
 color:#222!important;text-transform:uppercase!important;line-height:1.3!important;
 border-bottom:1px solid #e0e0e0;padding-bottom:25px!important;margin:0 0 25px!important}
.oc-panel .navmenu{list-style:none!important;padding:0!important;margin:0!important}
.oc-panel .navmenu li{margin-bottom:25px!important;padding:0!important}
.oc-panel .navmenu a{font-family:Gilroy,sans-serif!important;font-weight:600!important;
 font-size:20px!important;letter-spacing:2.5px!important;color:#222!important;
 text-transform:uppercase!important;text-decoration:none;display:block;
 padding:0!important;line-height:1.3!important;transition:color .3s ease}
.oc-panel .navmenu a:hover{color:#a0a0a0!important}
.oc-panel .navmenu li:nth-child(3),.oc-panel .navmenu li:nth-child(5){
 padding-bottom:25px!important;border-bottom:1px solid #e0e0e0;margin-bottom:25px!important}
@media(max-width:767px){
 .oc-panel .navmenu a{font-size:18px!important}
 .oc-panel h2,.oc-panel h3,.oc-panel h4{font-size:10px!important}
}
/* menus */
.navmenu{list-style:none;margin:0;padding:0}
.navmenu a{text-decoration:none;transition:.18s}
.socials{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.gmap{border:0;display:block;width:100%}
.menu-btn{background:none;border:0;color:#fff;font:inherit;font-size:.72rem;letter-spacing:.14em;
 text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:9px;padding:0}
.menu-btn span{display:block;width:22px;height:1.5px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{content:'';position:absolute;left:0;width:22px;
 height:1.5px;background:currentColor}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}
nav.main{display:none;position:fixed;inset:0;background:#343434;z-index:40;
 flex-direction:column;align-items:center;justify-content:center;gap:6px}
nav.main.open{display:flex}
nav.main a{color:#fff;font-size:1.6rem;font-weight:300;text-transform:uppercase;letter-spacing:.05em;padding:10px}
nav.main a:hover{color:#C1AD7F}
.nav-close{position:absolute;top:26px;right:26px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}
/* hero */
.hero{position:relative;min-height:653px;display:flex;align-items:center;justify-content:center;
 text-align:center;color:#fff;overflow:hidden}
.hero img.bg,.hero .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0}
.hero .vid{pointer-events:none}
.hero .vidwrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero .vidwrap iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
 min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.75);z-index:1}
.hero .inner{position:relative;z-index:2;padding:0 24px}
.hero h1{color:#fff;font-weight:300}
.hero h1 em{font-style:italic;font-weight:300}
/* the live strip scrolls its items left on a loop */
@keyframes imsScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
#item-mobile-slide{overflow:hidden}
#ims-track{display:flex;flex-wrap:nowrap;width:max-content;align-items:center;
 gap:0;animation:imsScroll 45s linear infinite}
/* The track is the same width everywhere but the type shrinks on a phone,
   so 45s covers less ground and reads as crawling. !important because the
   home page carries its own #ims-track rule in a body <style>, which the
   cascade puts after this file. */
@media(max-width:767px){#ims-track{animation-duration:20s!important}}
#ims-track>*{flex:0 0 auto;padding:0 5px}
@media(prefers-reduced-motion:reduce){#ims-track{animation:none}}
/* marquee strip */
.strip{border-top:1px solid #E2E5E8;border-bottom:1px solid #E2E5E8;padding:15px 0;
 font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#7A8794;overflow:hidden}
.strip ul{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.strip li{display:flex;align-items:center;gap:34px}
.strip li::before{content:'';width:4px;height:4px;border-radius:50%;background:#343434}
/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
 border:1px solid #E2E5E8}
.stat{padding:32px 28px;border-right:1px solid #E2E5E8}
.stat:last-child{border-right:0}
.stat .fig{font-size:2rem;font-weight:300;color:#343434;letter-spacing:-.01em}
.stat .fig i{font-style:normal;color:#3FA34D}
.stat .lab{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
 margin:10px 0 12px;color:#343434}
.stat p{font-size:.8rem;color:#7A8794;margin:0}
/* inline metric grid (dark panel) */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:30px 0 28px;max-width:440px}
.metrics div{padding:14px 18px;border-left:2px solid rgba(255,255,255,.28)}
.metrics .n{font-size:1.32rem;font-weight:400}
.metrics .l{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.62;margin-top:3px}
/* icon grid */
.icons{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #E2E5E8}
.icons div{padding:34px 20px;text-align:center;border-right:1px solid #E2E5E8;
 border-bottom:1px solid #E2E5E8}
.icons div:nth-child(3n){border-right:0}
.icons div:nth-child(n+4){border-bottom:0}
.icons img{height:34px;margin:0 auto 16px;opacity:.8}
.icons span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
 line-height:1.5;display:block}
.icons .gold{background:#C1AD7F;color:#fff}
.icons .gold img{filter:brightness(0) invert(1);opacity:1}
/* villa cards */
.villas{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.villa{border:1px solid #E2E5E8;display:flex;flex-direction:column}
.villa .ph{position:relative;aspect-ratio:16/11;background:#f1f3f4;overflow:hidden}
.villa .ph img{width:100%;height:100%;object-fit:cover}
.villa .sold{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,.18))}
.villa .sold span{width:132px;height:132px;border:2px solid #fff;border-radius:50%;color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:.76rem;letter-spacing:.2em;font-weight:600;
 text-shadow:0 1px 6px rgba(0,0,0,.4);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.villa .body{padding:20px 22px 0}
.villa .loc{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#7A8794}
.villa h3{margin:7px 0 9px;font-weight:400;font-size:1.3rem}
.villa .cfg{font-size:.76rem;color:#7A8794;padding-bottom:12px;border-bottom:1px solid #E2E5E8}
.villa .lease{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#7A8794;margin:12px 0}
.villa .badge{display:inline-block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
 color:#E06A5A;border:1px solid #E06A5A;padding:4px 9px;font-weight:600}
.villa .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 20px}
.villa .specs div{font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:#7A8794}
.villa .specs b{display:block;font-size:.9rem;color:#343434;font-weight:400;margin-top:7px;letter-spacing:0}
.villa .cta{margin-top:auto;display:block;text-align:center;background:#343434;color:#fff;
 padding:15px;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.villa .cta:hover{background:#000}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;
 border:1px solid rgba(255,255,255,.16)}
.steps div{padding:30px 26px;border-right:1px solid rgba(255,255,255,.16)}
.steps div:last-child{border-right:0}
.steps .n{font-size:1.7rem;font-weight:300;opacity:.55}
.steps h3{font-size:1.02rem;font-weight:500;margin:12px 0 9px}
.steps p{font-size:.82rem;opacity:.66;margin:0}
/* reasons */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}
.reasons .n{font-size:.68rem;letter-spacing:.16em;color:#7A8794;font-weight:600}
.reasons h3{font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin:11px 0 10px}
.reasons p{font-size:.84rem;color:#7A8794;margin:0}
/* posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.post .ph{aspect-ratio:16/10;overflow:hidden;background:#f1f3f4}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:.4s}
.post:hover .ph img{transform:scale(1.04)}
.post h3{font-size:1rem;font-weight:500;margin:16px 0 8px;line-height:1.35;text-transform:none}
.post p{font-size:.82rem;color:#7A8794}
.legal-hero{background:#343434;color:#fff;padding:170px 24px 70px}
.legal-hero-in{max-width:860px;margin:0 auto}
.legal-hero h1{color:#fff;font-size:clamp(2rem,4vw,2.7rem);font-weight:300;margin:0}
.legal-hero .eyebrow{color:rgba(255,255,255,.55)}
.legal{padding:64px 24px 100px;max-width:860px;margin:0 auto}
.legal .lede{font-size:.82rem;color:#7A8794;max-width:none;margin:0 0 2.4em}
.legal .article{max-width:none}
@media(max-width:767px){.legal-hero{padding:130px 20px 50px}.legal{padding:44px 20px 70px}}
/* Blog article body. Transcribed from the live <style id="wp-custom-css">
   block for .elementor-widget-theme-post-content: Gilroy headings, Work Sans
   body at 18/30, and the brown-accented table treatment. The build was running
   everything at Gilroy 16px, which is what made the articles read wrong. */
.article{max-width:none;color:#2B2B2B}
.article h2,.article h2.wp-block-heading{font-family:Gilroy,sans-serif;font-weight:600;
 font-size:26px;line-height:34px;color:#1A1A1A;letter-spacing:.2px;margin:55px 0 21px;
 text-transform:none}
.article h3,.article h3.wp-block-heading{font-family:Gilroy,sans-serif;font-weight:600;
 font-size:22px;line-height:30px;color:#1A1A1A;margin:34px 0 13px;text-transform:none}
.article p{font-family:'Work Sans',sans-serif;font-weight:400;font-size:18px;
 line-height:30px;color:#3D3D3D;margin:0 0 21px}
.article p strong{font-weight:600;color:#1A1A1A}
.article p em{font-style:italic;color:#555}
.article ul,.article ol{font-family:'Work Sans',sans-serif;font-weight:400;font-size:18px;
 line-height:30px;color:#3D3D3D;margin:0 0 21px;padding-left:22px}
.article li{margin-bottom:8px}
.article li strong{font-weight:600;color:#1A1A1A}
.article a{color:#A67C52;text-decoration:underline;text-underline-offset:3px;
 text-decoration-thickness:1px;transition:color .25s ease}
.article a:hover{color:#7D5C3C}
.article hr{border:0;border-top:1px solid #E5E0DA;margin:20px 0}
.article figure{margin:1.8em 0}
/* tables */
.article .wp-block-table{margin:55px 0;border-radius:12px;overflow:hidden;
 border:1px solid #E8E3DB;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.article table{width:100%;border-collapse:collapse;font-family:'Work Sans',sans-serif;
 background:#fff;border:none}
.article table td,.article table th{border:none!important;
 border-bottom:1px solid #F0ECE5!important}
.article table tr:first-child td,.article table th{font-family:Gilroy,sans-serif;
 font-weight:600;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
 color:#A67C52;background:#FAF7F2;padding:18px 28px;text-align:left;
 border-bottom:1px solid #E8E3DB!important}
.article table tr:not(:first-child) td{font-size:16px;line-height:1.5;color:#2B2B2B;
 padding:20px 28px;vertical-align:middle}
.article table tr:last-child td{border-bottom:none!important}
.article table tr:not(:first-child):nth-child(even){background:#FCFBF9}
.article table td:first-child{width:55%}
.article table td:last-child{width:45%;color:#6B4A2F;font-weight:500}
.article table tr:not(:first-child):hover td{background:#F7F2EA!important;
 transition:background .2s ease}
@media(max-width:767px){
 .article h2,.article h2.wp-block-heading{font-size:22px;line-height:30px;margin:34px 0 13px}
 .article h3,.article h3.wp-block-heading{font-size:19px;line-height:27px;margin:21px 0 8px}
 .article p,.article ul,.article ol{font-size:16px;line-height:27px}
 /* cards, not a scrolling table */
 .article .wp-block-table{border:none;box-shadow:none;border-radius:0;overflow:visible}
 .article table,.article tbody,.article tr,.article td{display:block;width:100%!important}
 .article table tr:first-child{display:none}
 .article table tr:not(:first-child){display:block;background:#fff;
  border:1px solid #E8E3DB!important;border-radius:12px;padding:18px 20px;
  margin-bottom:13px;box-shadow:0 2px 10px rgba(0,0,0,.03)}
 .article table tr:not(:first-child):nth-child(even){background:#fff}
 .article table td{padding:0!important;border:none!important}
 .article table td:first-child{font-family:Gilroy,sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.8px;text-transform:uppercase;color:#A67C52;margin-bottom:6px}
 .article table td:last-child{font-size:17px;font-weight:500;color:#2B2B2B}
 .article table tr:not(:first-child):hover td{background:transparent!important}
}
/* whatsapp */
.wa{position:fixed;right:24px;bottom:24px;z-index:9998;background:rgba(24,24,24,.95);
 color:#fff;border:1px solid rgba(214,179,106,.28);border-radius:999px;
 padding:10px 12px 10px 10px;display:flex;align-items:center;gap:12px;
 font-size:15px;font-weight:600;box-shadow:rgba(0,0,0,.22) 0 15px 45px;
 font-family:'Work Sans',Helvetica,Arial,sans-serif;line-height:1.1;
 backdrop-filter:blur(6px)}
.wa .wa-ring{width:38px;height:38px;border-radius:50%;flex:none;display:flex;
 align-items:center;justify-content:center;border:1px solid rgba(214,179,106,.45);
 background:rgba(214,179,106,.08)}
.wa svg{width:21px;height:21px;fill:#D6B36A;flex:none}
@media(max-width:767px){
 .wa{padding:9px;gap:0}
 .wa .wa-label{display:none}
}
@media(max-width:900px){
 .split{grid-template-columns:1fr} .split-pad{padding:52px 26px}
 .villas,.posts,.steps,.reasons{grid-template-columns:1fr}
 .two-col{grid-template-columns:1fr;gap:34px}
 .icons{grid-template-columns:1fr 1fr} .icons div{border-right:0!important;border-bottom:1px solid #E2E5E8!important}
 .steps div{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
 .metrics{max-width:none}
 .stat{border-right:0;border-bottom:1px solid #E2E5E8}
}