:root{--ink:#10231d;--court:#143b30;--court2:#1d5244;--sand:#f5efe4;--sand2:#ebe2d2;--sun:#e2683c;--ball:#d8f35a;--muted:#5d6b64;--r:22px;--serif:'Fraunces',Georgia,serif;--sans:'Inter',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--sand);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:17px}
img{display:block;max-width:100%;height:auto}a{color:inherit}

header.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,56px);transition:.35s;color:#fff}
header.nav.solid{background:rgba(245,239,228,.92);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06);padding-top:12px;padding-bottom:12px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font:600 15px/1.05 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.brand i{width:30px;height:30px;border-radius:50%;background:var(--ball);box-shadow:inset 0 0 0 3px var(--court);position:relative}
.brand i:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--court)}
.nav ul{display:flex;gap:30px;list-style:none;font-size:15px}.nav ul a{text-decoration:none;opacity:.9}.nav ul a:hover{opacity:1}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;border-radius:999px;padding:14px 26px;font:600 15px var(--sans);text-decoration:none;transition:.25s}
.btn.ball{background:var(--ball);color:var(--court)}.btn.ball:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(216,243,90,.35)}
.btn.dark{background:var(--court);color:#fff}.btn.ghost{border:1.5px solid currentColor;background:transparent;color:inherit}
.menu-btn{display:none;background:none;border:0;color:inherit;font:600 14px var(--sans);letter-spacing:.1em}
/* hero */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 22s ease-out forwards;transform-origin:60% 40%}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.15) 55%,rgba(8,24,19,.85) 100%),linear-gradient(90deg,rgba(8,24,19,.55) 0%,rgba(8,24,19,0) 60%)}
.hero .in{position:relative;z-index:2;width:100%;padding:0 clamp(20px,4vw,56px) clamp(60px,9vh,110px)}
.eyebrow{font:600 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ball)}
.hero h1{font:400 clamp(56px,9vw,148px)/.88 var(--serif);letter-spacing:-.03em;margin:18px 0 22px;max-width:12ch}
.hero h1 em{font-style:italic;color:var(--ball)}
.hero .tag{font:300 clamp(26px,3vw,44px)/1.1 var(--serif);max-width:none;opacity:1;margin:-4px 0 20px}.hero .tag em{font-style:italic;color:var(--ball)}
.hero p{font-size:clamp(17px,1.5vw,20px);max-width:36em;opacity:.92}
.bookbar{position:absolute;z-index:3;left:50%;bottom:34px;transform:translateX(-50%);width:min(980px,calc(100% - 40px));background:rgba(255,255,255,.97);color:var(--ink);border-radius:999px;display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;padding:8px 8px 8px 30px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.bookbar label{display:block;font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 16px;border-right:1px solid var(--sand2)}
.bookbar input,.bookbar select{display:block;border:0;background:none;font:500 16px var(--sans);color:var(--ink);width:100%;padding-top:3px;outline:none}
.bookbar label:nth-child(3){border:0}
/* stats */
.stats{background:var(--court);color:#fff;display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding:26px 20px}
.stats div{padding:6px 30px;text-align:center;border-right:1px solid rgba(255,255,255,.15)}.stats div:last-child{border:0}
.stats b{display:block;font:400 30px/1.1 var(--serif);color:var(--ball)}.stats span{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
/* sections */
section{padding:clamp(80px,11vw,160px) clamp(20px,4vw,56px)}
.wrap{max-width:1240px;margin:0 auto}
h2{font:400 clamp(40px,5.6vw,84px)/1 var(--serif);letter-spacing:-.025em;margin:16px 0 26px}
h2 em{font-style:italic;color:var(--sun)}
h3{font:500 26px/1.15 var(--serif)}
.lede{font:300 clamp(24px,2.7vw,38px)/1.3 var(--serif);max-width:24em}
.lede .w{opacity:.18;transition:opacity .4s}.lede .w.on{opacity:1}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center}
.rounded{border-radius:var(--r);overflow:hidden}
.rounded img{width:100%;height:100%;object-fit:cover}
.reveal{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.7,.2,1)}.reveal.on{opacity:1;transform:none}
/* court day/night */
.court{background:var(--ink);color:#fff}
.toggle{display:inline-flex;background:rgba(255,255,255,.1);border-radius:999px;padding:5px;margin-bottom:26px}
.toggle button{border:0;background:none;color:#fff;font:600 14px var(--sans);padding:10px 22px;border-radius:999px;cursor:pointer}
.toggle button.on{background:var(--ball);color:var(--court)}
.dn{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden}
.dn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s}
.dn img.night{opacity:0}.dn.night img.night{opacity:1}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}
.feat div{border-top:1px solid rgba(255,255,255,.2);padding-top:18px}.feat p{opacity:.75;font-size:15px}
/* rooms rail */
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px clamp(20px,4vw,56px) 30px;margin:0 calc(-1*clamp(20px,4vw,56px));scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 min(420px,82vw);scroll-snap-align:start}
.card .rounded{aspect-ratio:4/5}.card h3{margin:18px 0 6px}.card p{color:var(--muted);font-size:15px}
.railnav{display:flex;gap:10px}.railnav button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:none;cursor:pointer;font-size:18px}
.rowhead{display:flex;justify-content:space-between;align-items:end;gap:20px}
/* gallery */
.gal{columns:3 280px;column-gap:16px}.gal a{display:block;margin-bottom:16px;border-radius:14px;overflow:hidden;break-inside:avoid;cursor:zoom-in}
.gal img{width:100%;transition:transform .8s}.gal a:hover img{transform:scale(1.04)}
.lb{position:fixed;inset:0;z-index:90;background:rgba(6,14,11,.95);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}.lb img{max-width:92vw;max-height:86vh;border-radius:10px}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;padding:20px}
.lb .x{top:10px;right:10px}.lb .p{left:0}.lb .n{right:0}.lb .c{position:absolute;bottom:18px;color:#fff;opacity:.7;font-size:14px}
/* host */
.host{background:var(--sand2)}
.reels{display:flex;gap:18px;margin-top:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:24px;scrollbar-width:thin}
.reel{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(20,59,48,.12)}
.reel{height:520px;flex:0 0 300px;scroll-snap-align:start}.reel iframe{width:100%;height:640px;border:0;display:block}
.gal a:nth-child(n+10){display:none}.galmore{margin-top:26px}
.offer{margin-top:44px;background:var(--court);color:#fff;border-radius:var(--r);padding:34px 40px;display:flex;gap:30px;align-items:center}
.offer img{width:120px;border-radius:8px;transform:rotate(-4deg);box-shadow:0 20px 40px rgba(0,0,0,.4)}
.offer h3{color:var(--ball)}
/* area */
.area{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.area div{background:#fff;border-radius:18px;padding:26px}.area b{font:400 40px/1 var(--serif);color:var(--sun);display:block}
.area span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.area p{margin-top:10px;font-weight:500}
/* direct */
.direct{background:var(--court);color:#fff;text-align:center}
.direct .perks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:50px 0;text-align:left}
.direct .perks div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:28px}
.direct .perks b{display:block;font:400 24px var(--serif);color:var(--ball);margin-bottom:8px}.direct .perks p{opacity:.8;font-size:15px}
.widget{background:#fff;color:var(--ink);border-radius:var(--r);padding:30px;max-width:1000px;margin:0 auto;text-align:left;min-height:200px}
/* faq */
details{border-bottom:1px solid var(--sand2);padding:22px 0}summary{cursor:pointer;list-style:none;font:500 21px var(--serif);display:flex;justify-content:space-between}
summary:after{content:"+";font-family:var(--sans);font-weight:300;font-size:26px;transition:.3s}details[open] summary:after{transform:rotate(45deg)}
details p{margin-top:12px;color:var(--muted);max-width:52em}
footer{background:var(--ink);color:rgba(255,255,255,.75);padding:60px clamp(20px,4vw,56px) 110px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}footer b{color:#fff}
.mbar{display:none}
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:12px}
.dots a{width:9px;height:9px;border-radius:50%;background:rgba(120,120,120,.45);transition:.3s}.dots a.on{background:var(--sun);height:26px;border-radius:6px}
@media (max-width:900px){
 body{font-size:16px}.nav ul,.nav .btn,.dots{display:none}.menu-btn{display:block}
 .nav.open ul{display:flex;position:fixed;inset:0;background:var(--court);color:#fff;flex-direction:column;justify-content:center;align-items:center;font:400 38px var(--serif);gap:22px}
 .hero .in{padding-bottom:110px}.hero h1{font-size:64px}.hero .tag{font-size:28px}.bookbar{display:none}
 .split,.feat,.reels,.area,.direct .perks{grid-template-columns:1fr}
 .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:30px -20px 0;padding:0 20px 20px;scrollbar-width:none}.reel{flex:0 0 78vw;scroll-snap-align:center;height:520px}.area{grid-template-columns:1fr 1fr}
 .gal{columns:2}.gal a:nth-child(n+7){display:none}
 .stats div{padding:8px 16px;border:0;width:33%}.stats b{font-size:24px}
 .offer{flex-direction:column;text-align:center;padding:30px 24px}
 .mbar{display:flex;position:fixed;z-index:55;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;border-radius:999px;padding:8px 8px 8px 22px;align-items:center;justify-content:space-between;box-shadow:0 14px 40px rgba(0,0,0,.35);font-size:14px}
 .mbar b{display:block;font:500 16px var(--serif)}
}
/* subpages */
.sub section.wrap{max-width:1240px;margin:0 auto;padding:clamp(60px,8vw,110px) clamp(20px,4vw,56px) 0}
.sub .page-intro h2{max-width:18ch}.sub .lede{color:var(--muted);font-size:clamp(20px,2vw,26px)}
.sub h2{font-size:clamp(34px,4.4vw,60px)}.sub h3,.sub .amen h2{font:500 24px var(--serif);margin:26px 0 10px}
.sub .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.sub .gallery.g2{grid-template-columns:repeat(2,1fr)}
.sub .gallery img{border-radius:14px;aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.sub .split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.sub .rounded img{border-radius:var(--r)}
.sub ul{list-style:none}.sub ul li{padding:10px 0;border-bottom:1px solid var(--sand2)}
.sub .amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.sub .drives li{display:flex;justify-content:space-between;gap:20px}
.sub .steps li{font:400 22px var(--serif)}
.sub p{max-width:46em;margin:10px 0}
.sub details summary{font-size:20px}
.sub section:last-child{padding-bottom:clamp(60px,8vw,110px)}
@media (max-width:900px){.sub .gallery,.sub .gallery.g2,.sub .split{grid-template-columns:1fr}.sub .amen-grid{grid-template-columns:1fr 1fr}}
br.mb{display:none}
@media (max-width:900px){.hero .dk{display:none}br.mb{display:inline}}

.concierge{background:linear-gradient(135deg,#0f2c24,#1d5244);color:#fff}
.concierge .eyebrow{color:var(--ball)}
.chat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:30px;display:flex;flex-direction:column;gap:12px;max-width:460px;justify-self:end;width:100%}
.msg{padding:12px 16px;border-radius:18px;font-size:15px;max-width:85%;line-height:1.4}
.msg.g{background:#fff;color:var(--ink);align-self:flex-end;border-bottom-right-radius:4px}
.msg.c{background:var(--ball);color:var(--court);align-self:flex-start;border-bottom-left-radius:4px}
.chat .note{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;text-align:center;margin-top:8px}

@media (max-width:900px){.chat{justify-self:stretch}.stats div{width:25%}}
.split>*{min-width:0}body{overflow-x:clip}.chat .note{white-space:normal}
.credit{background:#fff;padding:0 clamp(20px,4vw,56px) 90px}.creditcard{max-width:760px;margin:0 auto;text-align:center;border:1px solid rgba(0,0,0,.1);border-radius:28px;padding:44px clamp(22px,4vw,56px);background:var(--cream,#f7f1e6)}.creditcard h3{font-family:var(--serif,serif);font-size:clamp(28px,4vw,42px);margin:10px 0 12px;line-height:1.1}.creditcard p{max-width:520px;margin:0 auto 24px;opacity:.8}
#design{scroll-margin-top:110px;padding-top:10px}
/* contrast fix */
.hero .eyebrow,.hero h1,.hero .tag,.hero p{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.45)}
.hero p{opacity:1;font-weight:400;color:#fff}
.hero .eyebrow{font-weight:700}
.hero .eyebrow,.hero h1,.hero .tag,.hero p{text-shadow:0 0 2px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.7),0 0 8px rgba(0,0,0,.45)}

.hero{height:auto;min-height:max(100svh,640px);padding-top:104px}

.reel{position:relative;display:block;background:#0e2a22;color:#fff;text-decoration:none}
.reel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.reel:hover img{transform:scale(1.03)}
.reel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.reel .play{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 6px 24px rgba(0,0,0,.3)}
.reel .play:before{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #143b30;border-top:12px solid transparent;border-bottom:12px solid transparent}
.reel .rl{position:absolute;z-index:2;left:18px;bottom:16px;font:600 13px var(--sans);letter-spacing:.04em}

.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin-top:34px}
.rv{margin:0;padding:26px 24px;border-radius:18px;background:#faf7f0;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;gap:14px}
.rv-stars{color:#e8a317;letter-spacing:3px;font-size:18px}
.rv blockquote{margin:0;font-size:16px;line-height:1.6}
.rv figcaption{font-weight:700;margin-top:auto}.rv figcaption span{font-weight:400;opacity:.6}
.rv-note{margin-top:22px;font-size:14px;opacity:.6}

/* mobile menu overlay fix: the scrolled header's backdrop-filter makes the
   header a containing block, so the fixed open menu collapsed into the header
   strip and its links floated over page content. While the menu is open, drop
   the filter so the overlay covers the viewport again, and keep the menu
   button visible above the overlay so it can close it. */
@media (max-width:900px){
 header.nav.open{-webkit-backdrop-filter:none;backdrop-filter:none}
 header.nav.open .menu-btn{position:relative;z-index:2;color:#fff}
}
body:has(header.nav.open) .mbar{display:none}