@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
--bg:#071414;
--bg2:#0c2422;
--panel:#102c2a;
--cream:#f5efe3;
--muted:#aebdb7;
--gold:#d8b36a;
--gold2:#f1d38d;
--aqua:#72d8cf;
--line:rgba(216,179,106,.22)
}
* {
box-sizing:border-box;
margin:0;
padding:0
}
html {
scroll-behavior:smooth
}
body {
background:var(--bg);
color:var(--cream);
font-family:Manrope,Arial,sans-serif
}
a {
color:inherit;
text-decoration:none
}
button,input,select {
font:inherit
}
.wrap {
width:min(1380px,92%);
margin:auto
}
.kicker {
font-size:10px;
font-weight:800;
letter-spacing:.32em;
color:var(--gold2);
text-transform:uppercase;
margin-bottom:14px
}
h2 {
font:600 clamp(45px,6vw,80px)/.88 "Cormorant Garamond",serif
}
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 21px;
border:1px solid var(--gold);
font-size:10px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
transition:.3s
}
.btn.gold {
background:var(--gold);
color:#0a1514
}
.btn:hover {
transform:translateY(-2px)
}
.btn.outline:hover {
background:var(--gold);
color:#0a1514
}
.top {
height:38px;
background:#040d0d;
border-bottom:1px solid #172523;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 4%;
font-size:14px;
letter-spacing:.13em;
text-transform:uppercase;
color:#aeb8b4
}
.dot {
display:inline-block;
width:6px;
height:6px;
background:var(--gold);
border-radius:50%;
margin-right:8px
}
header {
position:fixed;
top:38px;
left:0;
right:0;
z-index:20;
transition:.3s
}
header.scrolled {
top:0;
background:rgba(5,17,16,.9);
backdrop-filter:blur(16px);
border-bottom:1px solid var(--line)
}
nav {
height:84px;
width:min(1400px,92%);
margin:auto;
display:flex;
align-items:center;
justify-content:space-between
}
.logo {
display:flex;
align-items:center;
gap:13px
}
.mark {
width:48px;
height:48px;
border:1px solid var(--gold);
transform:rotate(45deg);
display:grid;
place-items:center
}
.mark span {
transform:rotate(-45deg);
font:600 26px "Cormorant Garamond",serif;
color:var(--gold2)
}
.logo strong {
display:block;
font:700 28px "Cormorant Garamond",serif;
letter-spacing:.12em
}
.logo small {
display:block;
font-size:10px;
color:var(--gold);
letter-spacing:.38em
}
.links {
display:flex;
gap:25px;
align-items:center
}
.links a {
font-size:15px;
text-transform:uppercase;
letter-spacing:.13em;
color:#d3dcd8
}
.links a:hover {
color:var(--gold2)
}
.menu {
display:none;
background:none;
border:0;
color:var(--cream);
font-size:27px
}
.hero {
min-height:100vh;
display:flex;
align-items:center;
padding:160px 4% 80px;
background:linear-gradient(90deg,rgba(3,13,13,.96),rgba(3,13,13,.62),rgba(3,13,13,.25)),url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2200&q=85') center/cover
}
.hero-inner {
width:min(1380px,100%);
margin:auto
}
.hero h1 {
font:600 clamp(70px,10vw,145px)/.75 "Cormorant Garamond",serif;
text-transform:uppercase;
letter-spacing:-.04em
}
.hero h1 em {
font-style:normal;
color:transparent;
-webkit-text-stroke:1px var(--gold2)
}
.hero p {
max-width:650px;
color:#c3cfca;
line-height:1.9;
font-size:14px;
margin:32px 0
}
.actions {
display:flex;
gap:10px;
flex-wrap:wrap
}
.stats {
display:flex;
gap:40px;
margin-top:55px
}
.stats b {
display:block;
font:600 32px "Cormorant Garamond",serif;
color:var(--gold2)
}
.stats span {
font-size:9px;
letter-spacing:.13em;
text-transform:uppercase;
color:#b8c2be
}
section {
padding:110px 0
}
.dark {
background:#081716
}
.light {
background:#f2eee4;
color:#17211f
}
.light .kicker {
color:#92702f
}
.head {
display:flex;
justify-content:space-between;
gap:40px;
align-items:end;
margin-bottom:45px
}
.head p {
max-width:470px;
color:var(--muted);
font-size:13px;
line-height:1.8
}
.light .head p {
color:#68736e
}
.about {
display:grid;
grid-template-columns:1fr 1fr;
gap:65px;
align-items:center
}
.about p {
color:var(--muted);
font-size:14px;
line-height:1.9;
margin:22px 0
}
.about-img {
height:500px;
border:1px solid var(--line);
border-radius:28px;
background:url('https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=1400&q=85') center/cover
}
.grid3 {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}
.card {
background:var(--panel);
border:1px solid var(--line);
border-radius:25px;
overflow:hidden;
transition:.3s
}
.card:hover {
transform:translateY(-6px);
border-color:rgba(216,179,106,.55)
}
.photo {
height:270px;
background-size:cover;
background-position:center
}
.p1 {
background-image:url('https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=1200&q=85')
}
.p2 {
background-image:url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1200&q=85')
}
.p3 {
background-image:url('https://images.unsplash.com/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=1200&q=85')
}
.body {
padding:26px
}
.body h3 {
font:600 34px "Cormorant Garamond",serif
}
.body p {
color:var(--muted);
font-size:12px;
line-height:1.75;
margin:10px 0 20px
}
.meta {
border-top:1px solid #ffffff12;
padding-top:13px;
display:flex;
justify-content:space-between;
font-size:10px;
color:#c4ceca
}
.features {
display:grid;
grid-template-columns:1fr 1fr;
gap:18px
}
.feature {
height:470px;
border-radius:27px;
background-size:cover;
background-position:center;
display:flex;
align-items:end;
position:relative;
overflow:hidden;
border:1px solid rgba(115,216,208,.25)
}
.feature:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(2,12,12,.92),transparent 65%)
}
.f1 {
background-image:url('https://images.unsplash.com/photo-1572331165267-854da2b10ccc?auto=format&fit=crop&w=1500&q=85')
}
.f2 {
background-image:url('https://images.unsplash.com/photo-1560089000-7433a4ebbd64?auto=format&fit=crop&w=1500&q=85')
}
.feature-content {
position:relative;
z-index:1;
padding:32px
}
.feature h3 {
font:600 52px "Cormorant Garamond",serif
}
.feature p {
font-size:12px;
line-height:1.8;
color:#d1dad7;
max-width:500px;
margin:8px 0 20px
}
.activities {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px
}
.activity {
min-height:220px;
padding:26px;
background:#faf7ef;
border:1px solid #d8d0c1;
display:flex;
flex-direction:column;
justify-content:space-between;
transition:.3s
}
.activity:hover {
background:#e8dfcd;
transform:translateY(-4px)
}
.activity .ico {
font-size:32px;
color:#92702f
}
.activity h3 {
font:600 28px "Cormorant Garamond",serif
}
.activity p {
font-size:11px;
line-height:1.65;
color:#65706b
}
.facilities {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:20px
}
.family-img {
min-height:570px;
border-radius:27px;
background:url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1500&q=85') center/cover
}
.facility-box {
padding:48px;
background:var(--panel);
border:1px solid var(--line);
border-radius:27px
}
.facility-box p {
color:var(--muted);
font-size:13px;
line-height:1.8;
margin:17px 0
}
.list {
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:var(--line)
}
.list div {
background:var(--panel);
padding:15px;
font-size:11px;
color:#d0d9d5
}
.list b {
color:var(--gold2);
margin-right:7px
}
.dining-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}
.dish {
height:390px;
border-radius:27px;
background-size:cover;
background-position:center;
display:flex;
align-items:end;
position:relative;
overflow:hidden
}
.dish:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,#000c,transparent 65%)
}
.d1 {
background-image:url('https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=1200&q=85')
}
.d2 {
background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=85')
}
.d3 {
background-image:url('https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=1200&q=85')
}
.dish div {
position:relative;
z-index:1;
padding:28px;
color:white
}
.dish h3 {
font:600 37px "Cormorant Garamond",serif
}
.dish p {
font-size:11px;
color:#d6ddda;
line-height:1.6
}
.well {
display:grid;
grid-template-columns:1fr 1fr;
gap:18px
}
.wellbox {
padding:42px;
background:var(--panel);
border:1px solid var(--line);
border-radius:27px
}
.wellbox p {
color:var(--muted);
font-size:13px;
line-height:1.85;
margin:15px 0
}
.treat div {
display:flex;
justify-content:space-between;
border-bottom:1px solid #ffffff10;
padding:13px 0;
font-size:11px
}
.treat span {
color:var(--gold2)
}
.gallery {
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
grid-template-rows:220px 220px;
gap:10px
}
.g {
border-radius:17px;
background-size:cover;
background-position:center
}
.g1 {
grid-row:span 2;
background-image:url('https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&w=1400&q=85')
}
.g2 {
background-image:url('https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?auto=format&fit=crop&w=1000&q=85')
}
.g3 {
background-image:url('https://images.unsplash.com/photo-1540541338287-41700207dee6?auto=format&fit=crop&w=1000&q=85')
}
.g4 {
background-image:url('https://images.unsplash.com/photo-1501117716987-c8e1ecb210cf?auto=format&fit=crop&w=1000&q=85')
}
.g5 {
background-image:url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1000&q=85')
}
.booking {
background:linear-gradient(135deg,#0b2523,#123a35)
}
.book {
display:grid;
grid-template-columns:1fr 1.4fr;
gap:45px;
align-items:center
}
.book p {
color:var(--muted);
font-size:13px;
line-height:1.8;
margin-top:18px
}
.form {
display:grid;
grid-template-columns:1fr 1fr;
gap:9px
}
.field {
border:1px solid var(--line);
padding:13px;
background:#0002
}
.field label {
display:block;
color:var(--gold2);
font-size:8px;
letter-spacing:.18em;
text-transform:uppercase;
margin-bottom:7px
}
.field input,.field select {
width:100%;
border:0;
outline:0;
background:transparent;
color:var(--cream);
font-size:12px
}
.field select option {
background:#0b211f
}
.full {
grid-column:1/-1
}
footer {
padding:65px 0 25px;
background:#030b0b;
border-top:1px solid var(--line)
}
.foot {
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:35px
}
.foot h4 {
font-size:9px;
color:var(--gold2);
letter-spacing:.2em;
margin-bottom:15px
}
.foot li {
list-style:none;
color:#929e99;
font-size:11px;
margin:9px 0
}
.foot p {
color:#7e8b86;
font-size:11px;
line-height:1.8;
max-width:340px;
margin-top:14px
}
.copy {
border-top:1px solid #ffffff0d;
margin-top:40px;
padding-top:18px;
display:flex;
justify-content:space-between;
color:#64706b;
font-size:9px;
letter-spacing:.08em
}
.copy a {
color:var(--gold)
}
.toast {
position:fixed;
bottom:22px;
left:50%;
transform:translate(-50%,30px);
background:var(--gold);
color:#071313;
padding:12px 18px;
font-size:11px;
font-weight:800;
opacity:0;
transition:.3s;
z-index:50
}
.toast.show {
opacity:1;
transform:translate(-50%,0)
}
@media(max-width:1050px) {
.links {
display:none
}
.menu {
display:block
}
.grid3,.dining-grid {
grid-template-columns:1fr 1fr
}
.activities {
grid-template-columns:1fr 1fr
}
.foot {
grid-template-columns:1fr 1fr
}

}
@media(max-width:700px) {
.top {
display:none
}
header {
top:0
}
nav {
height:72px
}
.hero {
padding:125px 4% 65px;
min-height:850px
}
.hero h1 {
font-size:72px
}
.stats {
gap:22px
}
.stats b {
font-size:25px
}
section {
padding:78px 0
}
.head {
display:block
}
.head p {
margin-top:17px
}
.about,.features,.facilities,.well,.book {
grid-template-columns:1fr
}
.grid3,.dining-grid {
grid-template-columns:1fr
}
.feature {
height:390px
}
.activities {
grid-template-columns:1fr 1fr
}
.gallery {
grid-template-columns:1fr 1fr;
grid-template-rows:200px 200px 200px
}
.g1 {
grid-row:span 2
}
.form {
grid-template-columns:1fr
}
.full {
grid-column:auto
}
.foot {
grid-template-columns:1fr 1fr
}
.copy {
flex-direction:column;
gap:8px;
line-height:1.6
}

}
@media(max-width:430px) {
.hero h1 {
font-size:59px
}
.activities,.list,.foot {
grid-template-columns:1fr
}
.logo strong {
font-size:23px
}
.mark {
width:42px;
height:42px
}

}
/* ===== PREMIUM ENHANCEMENTS ===== */
html {
overflow-x:hidden
}
body {
overflow-x:hidden
}
::selection {
background:var(--gold);
color:#071414
}
.reveal {
opacity:0;
transform:translateY(35px);
transition:opacity .8s ease,transform .8s ease
}
.reveal.visible {
opacity:1;
transform:none
}
.water-fx {
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:0
}
.water-fx span {
position:absolute;
border:1px solid rgba(114,216,207,.16);
border-radius:50%;
animation:ripple 8s linear infinite
}
.water-fx span:nth-child(1) {
width:180px;
height:180px;
right:7%;
bottom:8%
}
.water-fx span:nth-child(2) {
width:340px;
height:340px;
right:0%;
bottom:-10%;
animation-delay:2s
}
.water-fx span:nth-child(3) {
width:520px;
height:520px;
right:-8%;
bottom:-22%;
animation-delay:4s
}
@keyframes ripple {
0% {
transform:scale(.82);
opacity:0
}
20% {
opacity:1
}
100% {
transform:scale(1.12);
opacity:0
}

}
.wave {
position:absolute;
bottom:-2px;
left:-5%;
width:110%;
height:90px;
background:radial-gradient(70px 22px at 20% 10%,rgba(114,216,207,.18),transparent 70%),radial-gradient(90px 25px at 55% 30%,rgba(114,216,207,.14),transparent 70%);
filter:blur(2px);
animation:waveMove 7s ease-in-out infinite alternate
}
@keyframes waveMove {
to {
transform:translateX(35px) scaleY(1.08)
}

}
.hero {
position:relative;
overflow:hidden
}
.hero-inner {
position:relative;
z-index:2
}
.hero:before {
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent 35%,rgba(114,216,207,.08),transparent 62%);
transform:translateX(-100%);
animation:shine 9s infinite
}
@keyframes shine {
45%,100% {
transform:translateX(100%)
}

}
.menu-panel {
display:none;
position:fixed;
inset:0;
background:rgba(3,12,12,.98);
z-index:40;
padding:110px 8% 40px;
overflow:auto
}
.menu-panel.open {
display:block;
animation:menuIn .35s ease
}
@keyframes menuIn {
from {
opacity:0;
transform:translateX(20px)
}
to {
opacity:1;
transform:none
}

}
.menu-panel .close-menu {
position:absolute;
right:7%;
top:28px;
background:none;
border:1px solid var(--line);
color:var(--gold2);
width:44px;
height:44px;
font-size:24px
}
.menu-panel a {
display:block;
padding:18px 0;
border-bottom:1px solid #ffffff10;
font:600 38px "Cormorant Garamond",serif;
color:var(--cream)
}
.menu-panel a:hover {
color:var(--gold2);
padding-left:8px
}
.booking-modal,.lightbox {
position:fixed;
inset:0;
background:rgba(0,0,0,.78);
backdrop-filter:blur(12px);
z-index:60;
display:none;
align-items:center;
justify-content:center;
padding:20px
}
.booking-modal.open,.lightbox.open {
display:flex;
animation:fadeIn .25s ease
}
@keyframes fadeIn {
from {
opacity:0
}
to {
opacity:1
}

}
.modal-box {
width:min(720px,100%);
background:#0a201e;
border:1px solid var(--line);
border-radius:25px;
padding:35px;
position:relative;
box-shadow:0 25px 90px #000
}
.modal-box h3 {
font:600 52px/1 "Cormorant Garamond",serif
}
.modal-box p {
color:var(--muted);
font-size:12px;
line-height:1.7;
margin:10px 0 22px
}
.close-modal {
position:absolute;
right:20px;
top:20px;
width:40px;
height:40px;
border:1px solid var(--line);
background:transparent;
color:var(--gold2);
font-size:22px
}
.modal-form {
display:grid;
grid-template-columns:1fr;
gap:10px
}
.modal-form .field {
background:#071715
}
.wa {
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid #57d68d;
color:#8bf0b1;
padding:14px 18px;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase
}
.wa:hover {
background:#57d68d;
color:#062014
}
.pool-cards {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}
.pool-card {
min-height:390px;
border:1px solid var(--line);
border-radius:25px;
overflow:hidden;
position:relative;
background-size:cover;
background-position:center;
transition:.45s
}
.pool-card:hover {
transform:translateY(-8px) scale(1.01);
border-color:var(--aqua)
}
.pool-card:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(2,12,12,.95),transparent 65%)
}
.pc1 {
background-image:url('https://images.unsplash.com/photo-1602002418082-a4443e081dd1?auto=format&fit=crop&w=1300&q=85')
}
.pc2 {
background-image:url('https://images.unsplash.com/photo-1572331165267-854da2b10ccc?auto=format&fit=crop&w=1300&q=85')
}
.pc3 {
background-image:url('https://images.unsplash.com/photo-1560089000-7433a4ebbd64?auto=format&fit=crop&w=1300&q=85')
}
.pool-content {
position:absolute;
z-index:2;
bottom:0;
padding:28px
}
.pool-content h3 {
font:600 40px "Cormorant Garamond",serif
}
.pool-content p {
color:#c8d4d0;
font-size:11px;
line-height:1.7;
margin:8px 0
}
.offer-grid {
display:grid;
grid-template-columns:1.15fr .85fr;
gap:18px
}
.offer {
padding:38px;
border:1px solid var(--line);
border-radius:25px;
background:linear-gradient(135deg,#102f2c,#0b1e1c);
position:relative;
overflow:hidden
}
.offer:before {
content:"";
position:absolute;
width:230px;
height:230px;
border-radius:50%;
right:-100px;
top:-100px;
border:1px solid rgba(216,179,106,.2)
}
.offer h3 {
font:600 45px "Cormorant Garamond",serif
}
.offer p {
color:var(--muted);
font-size:12px;
line-height:1.8;
margin:10px 0 20px
}
.badge {
display:inline-block;
background:var(--gold);
color:#071414;
padding:6px 9px;
font-size:8px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:18px
}
.event {
display:grid;
grid-template-columns:1fr 1fr;
border:1px solid var(--line);
border-radius:27px;
overflow:hidden;
background:var(--panel)
}
.event-img {
min-height:460px;
background:url('https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=1500&q=85') center/cover
}
.event-copy {
padding:48px
}
.event-copy h3 {
font:600 58px/.9 "Cormorant Garamond",serif
}
.event-copy p {
color:var(--muted);
font-size:13px;
line-height:1.8;
margin:18px 0
}
.event-list {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:22px 0
}
.event-list span {
font-size:10px;
padding:11px;
border:1px solid #ffffff10;
color:#d1dad7
}
.map {
height:380px;
border:1px solid var(--line);
border-radius:25px;
overflow:hidden
}
.map iframe {
width:100%;
height:100%;
border:0;
filter:grayscale(.75) contrast(1.1) brightness(.75)
}
.social-rail {
position:fixed;
right:12px;
top:50%;
transform:translateY(-50%);
z-index:50;
display:flex;
align-items:center;
gap:0
}
.lamp {
position:relative;
width:116px;
height:205px;
pointer-events:none
}
.lamp-shade {
position:absolute;
right:0;
top:15px;
width:108px;
height:58px;
background:linear-gradient(180deg,#d8b36a,#8f6a2d);
clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
box-shadow:0 10px 35px rgba(216,179,106,.18);
pointer-events:none
}
.lamp-glow {
position:absolute;
right:10px;
top:61px;
width:88px;
height:125px;
background:radial-gradient(ellipse at top,rgba(241,211,141,.28),transparent 68%);
filter:blur(7px);
pointer-events:none
}
.lamp-stem {
position:absolute;
right:51px;
top:65px;
width:5px;
height:70px;
background:linear-gradient(#d8b36a,#80602a);
pointer-events:none
}
.lamp-base {
position:absolute;
right:21px;
bottom:8px;
width:66px;
height:11px;
border-radius:50%;
background:#c89f55;
box-shadow:0 4px 14px rgba(0,0,0,.5);
pointer-events:none
}
.pull-cord {
position:absolute;
right:58px;
top:77px;
width:2px;
height:104px;
background:#d8b36a;
transform-origin:top;
cursor:grab;
pointer-events:auto;
z-index:4
}
.pull-cord:before {
content:"";
position:absolute;
top:-7px;
left:-5px;
width:12px;
height:12px;
border-radius:50%;
background:#f1d38d;
box-shadow:0 0 12px rgba(241,211,141,.55)
}
.pull-knob {
position:absolute;
bottom:-14px;
left:-7px;
width:16px;
height:22px;
border-radius:8px 8px 12px 12px;
background:linear-gradient(#f1d38d,#b68132);
box-shadow:0 5px 15px #000
}
.pull-cord.pulling {
animation:cordPull .42s ease
}
@keyframes cordPull {
50% {
transform:translateY(22px)
}
100% {
transform:translateY(0)
}

}
.social-links {
width:78px;
padding:10px 9px;
background:rgba(7,20,20,.94);
border:1px solid var(--line);
border-radius:18px 0 0 18px;
backdrop-filter:blur(12px);
display:flex;
flex-direction:column;
gap:8px;
opacity:0;
transform:translateX(22px);
pointer-events:none;
transition:.35s;
box-shadow:0 12px 45px rgba(0,0,0,.4)
}
.social-rail.open .social-links {
opacity:1;
transform:translateX(0);
pointer-events:auto
}
.social-links a {
height:58px;
border:1px solid rgba(216,179,106,.25);
display:grid;
place-items:center;
color:var(--gold2);
transition:.25s
}
.social-links a:hover {
background:var(--gold);
color:#071414;
transform:translateX(-4px)
}
.social-links svg {
width:25px;
height:25px;
fill:currentColor
}
.lightbox img {
max-width:min(1100px,94vw);
max-height:86vh;
border:1px solid var(--line);
box-shadow:0 25px 90px #000
}
.gallery .g {
cursor:zoom-in;
transition:.35s
}
.gallery .g:hover {
filter:brightness(1.15);
transform:scale(.985)
}
@media(max-width:800px) {
.social-links {
width:64px
}
.social-links a {
height:49px
}
.lamp {
transform:scale(.82);
transform-origin:right center;
margin-left:-20px
}
.pool-cards,.offer-grid,.event {
grid-template-columns:1fr
}
.event-img {
min-height:300px
}
.event-copy {
padding:30px
}
.event-copy h3 {
font-size:48px
}
.modal-form {
grid-template-columns:1fr
}
.modal-box {
padding:27px
}
.modal-box h3 {
font-size:43px
}

}
@media(max-width:520px) {
.social-rail {
right:4px
}
.social-links {
width:55px;
padding:7px
}
.social-links a {
height:43px
}
.social-links svg {
width:21px
}
.lamp {
transform:scale(.68);
margin-left:-34px
}
.hero {
background-position:58% center
}
.hero p {
font-size:13px
}

}
/* =========================================================
   SUPORNA RESPONSIVE SYSTEM
   Desktop → Tablet → Mobile
   ========================================================= */

html,
body {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}
img,
svg,
video,
iframe {
max-width: 100%;
}
button,
a,
input,
select,
textarea {
-webkit-tap-highlight-color: transparent;
}
.wrap,
.hero-inner {
width: min(1380px, 92%);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1201px) {
.wrap,
  .hero-inner {
width: min(1380px, 92%);
}
.nav {
display: flex;
}
.menu {
display: none;
}
.hero-inner {
min-height: 100vh;
}
.pool-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.offer-grid {
grid-template-columns: 1.15fr 0.85fr;
}
.event {
grid-template-columns: 1fr 1fr;
}
.modal-form {
grid-template-columns: 1fr;
}

}
@media (min-width: 701px) and (max-width: 1200px) {
header {
top: 24px;
}
.nav {
display: none;
}
.menu {
display: block;
}
.wrap,
  .hero-inner {
width: min(940px, 90%);
}
.hero-inner {
padding-top: 110px;
padding-bottom: 90px;
}
.pool-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pool-card:last-child {
grid-column: 1 / -1;
}
.offer-grid {
grid-template-columns: 1fr;
}
.event {
grid-template-columns: 1fr;
}
.event-img {
min-height: 360px;
}
.social-rail {
right: 8px;
}
.modal-box {
width: min(650px, 94vw);
}

}
@media (max-width: 700px) {
header {
top: 12px;
}
.wrap,
  .hero-inner {
width: min(94%, 560px);
}
.hero-inner {
padding-top: 105px;
padding-bottom: 80px;
}
.nav {
display: none;
}
.menu {
display: block;
}
.pool-cards,
  .offer-grid,
  .event,
  .event-list {
grid-template-columns: 1fr;
}
.pool-card {
min-height: 330px;
}
.event-img {
min-height: 280px;
}
.event-copy {
padding: 28px;
}
.event-copy h3 {
font-size: clamp(40px, 12vw, 54px);
}
.modal-box {
width: 94vw;
max-height: 90vh;
overflow-y: auto;
padding: 25px;
}
.modal-form {
grid-template-columns: 1fr;
}
.modal-form .full {
grid-column: 1 / -1;
}
.social-rail {
right: 5px;
}
.social-links {
width: 55px;
}
.social-links a {
height: 45px;
}
.social-toggle {
width: 32px;
height: 88px;
}

}
@media (max-width: 430px) {
.wrap,
  .hero-inner {
width: calc(100% - 28px);
}
.hero-inner {
padding-top: 95px;
padding-bottom: 65px;
}
.menu-panel {
padding-left: 24px;
padding-right: 24px;
}
.menu-panel a {
font-size: 32px;
}
.pool-card {
min-height: 285px;
}
.offer {
padding: 26px;
}
.offer h3 {
font-size: 38px;
}
.event-copy {
padding: 24px;
}
.modal-box h3 {
font-size: 40px;
}
.modal-box {
padding: 21px;
}
.social-links {
width: 49px;
padding: 6px;
}
.social-links a {
height: 41px;
}
.social-links svg {
width: 20px;
height: 20px;
}

}


/* =========================================================
   SUPORNA FINAL HERO + LAMP FIX
   Only CSS changes — HTML/JS untouched
   ========================================================= */

/* Keep hero content inside the safe visual area */
.hero-inner {
  position: relative;
  z-index: 2;
  width: min(1380px, 92%);
  max-width: 1380px;
  margin-left: 0;
  margin-right: auto;
  padding-right: 180px;
}

/* Prevent the main hero heading from running underneath
   the lamp/social rail */
.hero h1 {
  max-width: 980px;
  width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

/* Lamp: move it slightly downward */
.social-rail {
  top: calc(50% + 90px);
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1200px) {
  .hero-inner {
    width: min(940px, 90%);
    padding-right: 150px;
  }

  .hero h1 {
    max-width: 760px;
    font-size: clamp(60px, 9vw, 105px);
  }

  .social-rail {
    top: calc(50% + 110px);
  }
}

/* Mobile */
@media (max-width: 700px) {
  .hero-inner {
    width: min(94%, 560px);
    padding-right: 95px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(52px, 14vw, 78px);
    line-height: .82;
    letter-spacing: -.035em;
  }

  .social-rail {
    top: calc(50% + 105px);
  }
}

/* Small mobile */
@media (max-width: 430px) {
  .hero-inner {
    width: calc(100% - 28px);
    padding-right: 78px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(46px, 14vw, 61px);
    line-height: .84;
  }

  .social-rail {
    top: calc(50% + 95px);
  }
}

/* Very narrow phones */
@media (max-width: 360px) {
  .hero-inner {
    padding-right: 68px;
  }

  .hero h1 {
    font-size: 48px;
  }
}


/* =========================================================
   SUPARNA — FINAL CLEAN RESPONSIVE OVERRIDE
   Fixes:
   1) Top strip stays one clean line per side on mobile
   2) Header sits below the top strip
   3) STAY.PLAY.REMEMBER. never breaks "REMEMBER"
   4) Hero title stays inside the viewport on all widths
   5) Map remains visible and responsive
   6) Water ripple effect cycles every 3 seconds
   ========================================================= */

/* Global safety */
html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------------- TOP INFORMATION STRIP ---------------- */

.top {
  position: relative !important;
  z-index: 50 !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 0 4% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.top > span {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.top > span:last-child {
  justify-content: flex-end !important;
  text-align: right !important;
}

.top .dot {
  flex: 0 0 6px !important;
}

/* ---------------- HEADER ---------------- */

header {
  top: 38px !important;
  z-index: 40 !important;
}

header.scrolled {
  top: 0 !important;
}

/* ---------------- HERO ---------------- */

.hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.hero-inner {
  position: relative !important;
  z-index: 5 !important;
  width: min(1380px, 92vw) !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/*
  The complete title is kept together.
  Font size scales down enough on narrow screens to fit.
*/
.hero h1 {
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 !important;
  font-size: clamp(34px, 7.9vw, 118px) !important;
  line-height: .86 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.hero h1 em {
  display: inline !important;
  white-space: nowrap !important;
}

/* Description stays readable and never becomes full-screen wide */
.hero p {
  width: min(650px, 100%) !important;
  max-width: 650px !important;
}

/* ---------------- MAP ---------------- */

.map {
  position: relative !important;
  width: 100% !important;
  height: 380px !important;
  min-height: 300px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 25px !important;
  border: 1px solid var(--line) !important;
  background: #10201f !important;
}

.map iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 300px !important;
  border: 0 !important;
}

/* ---------------- WATER EFFECT: 3 SECOND CYCLE ---------------- */

.water-fx span {
  animation-duration: 3s !important;
}

.water-fx span:nth-child(1) {
  animation-delay: 0s !important;
}

.water-fx span:nth-child(2) {
  animation-delay: 1s !important;
}

.water-fx span:nth-child(3) {
  animation-delay: 2s !important;
}

/* ---------------- TABLET ---------------- */

@media (min-width: 701px) and (max-width: 1200px) {
  .hero-inner {
    width: 90vw !important;
    max-width: 1080px !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(48px, 7.8vw, 92px) !important;
    letter-spacing: -.05em !important;
  }

  .map {
    height: 360px !important;
  }
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 700px) {

  /* Keep BOTH requested texts visible on top */
  .top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    text-transform: none !important;
  }

  .top > span {
    max-width: 100% !important;
    font-size: 8px !important;
    letter-spacing: .07em !important;
  }

  .top > span:last-child {
    justify-content: flex-end !important;
  }

  .top .dot {
    width: 5px !important;
    height: 5px !important;
    flex-basis: 5px !important;
    margin-right: 5px !important;
  }

  /* Header must start BELOW the 40px top strip */
  header {
    top: 40px !important;
  }

  header.scrolled {
    top: 0 !important;
  }

  nav {
    width: calc(100% - 24px) !important;
    height: 72px !important;
  }

  .hero {
    min-height: 100svh !important;
    padding: 132px 0 55px !important;
    align-items: center !important;
  }

  .hero-inner {
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /*
    9.2vw gives a title small enough to stay on one line
    even on narrow phones.
  */
  .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(30px, 9.2vw, 62px) !important;
    line-height: .92 !important;
    letter-spacing: -.05em !important;
    white-space: nowrap !important;
  }

  .hero p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .stats {
    flex-wrap: wrap !important;
  }

  .map {
    height: 320px !important;
    min-height: 320px !important;
    border-radius: 18px !important;
  }

  .map iframe {
    min-height: 320px !important;
  }
}

/* ---------------- SMALL PHONES ---------------- */

@media (max-width: 430px) {

  .top {
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: 7px !important;
    letter-spacing: .045em !important;
  }

  .top > span {
    font-size: 7px !important;
    letter-spacing: .045em !important;
  }

  nav {
    width: calc(100% - 18px) !important;
  }

  .hero {
    padding-top: 126px !important;
  }

  .hero-inner {
    width: calc(100% - 22px) !important;
  }

  .hero h1 {
    font-size: clamp(27px, 8.8vw, 38px) !important;
    letter-spacing: -.048em !important;
  }

  .hero p {
    font-size: 12px !important;
  }

  .map {
    height: 300px !important;
    min-height: 300px !important;
  }

  .map iframe {
    min-height: 300px !important;
  }
}

/* ---------------- VERY SMALL PHONES ---------------- */

@media (max-width: 360px) {

  .top {
    padding: 0 7px !important;
    gap: 3px !important;
  }

  .top > span,
  .top {
    font-size: 6.5px !important;
    letter-spacing: .025em !important;
  }

  .hero-inner {
    width: calc(100% - 18px) !important;
  }

  .hero h1 {
    font-size: 26px !important;
    letter-spacing: -.045em !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .water-fx span {
    animation: none !important;
  }
}