@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --atlantis-teal: #00AEC1;
    --atlantis-teal-light: #C9E7E9;
    --atlantis-abyss: #05262E;
    --atlantis-aqua: #7FD0D4;
    --atlantis-charcoal: #58595B;
    --atlantis-silver: #A7A9AC;
    --atlantis-bone: #F5F2EC;
    --atlantis-bone-2: #EDE9E1;
    --atlantis-ink: #1A2B2E;
    --atlantis-gold: #B79457;
    --max: 1400px;
    --ease: cubic-bezier(.22, 1, .36, 1)
}

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

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--atlantis-bone);
    color: var(--atlantis-ink);
    /* font-family: "Figtree", sans-serif; */
    font-family: "Plus Jakarta Sans", sans-serif;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased
}
body.modal-open {
    overflow: hidden
}

img,
video {
    display: block;
    max-width: 100%
}

button,
input,
select,
textarea {
    font: inherit
}

button,
a {
    color: inherit
}

button {
    cursor: pointer
}

a {
    text-decoration: none
}

h1,
h2,
h3,
p {
    margin-top: 0
}

.container {
    width: min(var(--max), calc(100% - 200px));
    margin-inline: auto
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--atlantis-teal);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .45em;
    text-transform: uppercase
}

.eyebrow::before {
    content: "";
    width: 40px;
    height: 1px;
    background: rgba(0, 174, 193, .6)
}

.section-title {
    font-size: clamp(24px, 3vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: .06em;
    text-transform: uppercase
}

.on-dark {
    color: #fff
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

:focus-visible {
    outline: none;
}

.icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7
}

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    opacity: 0;
    transform: translateY(-40px);
    animation: nav-in 1.2s var(--ease) forwards
}

.nav__bar {
    border-bottom: 1px solid transparent;
    transition: .7s
}

.nav.scrolled .nav__bar,
.nav.inner .nav__bar {
    background: rgba(5, 38, 46, .9);
    border-color: rgba(0, 174, 193, .15);
    backdrop-filter: blur(24px);
    box-shadow: 0 4px 24px rgba(5, 38, 46, .6)
}

.nav__inner {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .7s
}

.nav.scrolled .nav__inner,
.nav.inner .nav__inner {
    height: 66px
}

.nav__logos,
.nav__actions {
    display: flex;
    align-items: center
}

.nav__logos {
    gap: 16px
}

.nav__logos img {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1)
}

.nav__divider {
    height: 24px;
    width: 1px;
    background: rgba(255, 255, 255, .25)
}

.nav__atlantis {
    display: none !important;
    max-width: 160px
}

.nav.scrolled .nav__partners {
    display: none
}

.nav.scrolled .nav__atlantis,
.nav.inner .nav__atlantis {
    display: block !important
}

.nav.inner .nav__partners {
    display: none
}

.nav__actions {
    gap: 22px;
    color: #fff
}

.nav__link {
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    border-bottom: 1px solid transparent;
    padding-bottom: 4px
}

.nav__link:hover {
    color: white;
    border-color: var(--atlantis-teal)
}

.sound {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .65)
}

.sound:hover {
    color: var(--atlantis-teal);
    border-color: var(--atlantis-teal)
}

.btn {
    border: 1px solid var(--atlantis-teal);
    padding: 14px 24px;
    background: var(--atlantis-teal);
    color: var(--atlantis-abyss);
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    transition: .45s;
    position: relative;
    overflow: hidden
}

.btn:hover {
    background: transparent;
    color: var(--atlantis-teal)
}

.reveal {
    opacity: 0;
    transform: translateY(42px);
    filter: blur(6px);
    transition: opacity 1.15s var(--ease), transform 1.15s var(--ease), filter 1.15s var(--ease)
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 174, 193, .4), transparent)
}

.modal {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%
}

.modal::backdrop {
    background: rgba(5, 38, 46, .58);
    backdrop-filter: blur(12px)
}

.modal__position {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 16px
}

.modal__panel {
    position: relative;
    width: min(448px, 100%);
    background: white;
    color: var(--atlantis-ink);
    padding: 36px 32px 32px;
    box-shadow: 0 40px 100px rgba(5, 38, 46, .45);
    animation: modal-in .5s var(--ease)
}

.modal__close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(5, 38, 46, .15);
    background: white;
    display: grid;
    place-items: center
}
.modal__close:hover {
    border-color: var(--atlantis-teal);
}
.modal__close:hover .icon {
    stroke: var(--atlantis-teal);
}

.modal__logo {
    height: 36px;
    width: auto;
    margin: 0 auto 20px
}

.modal h2 {
    text-align: center;
    font-size: 19px;
    letter-spacing: .04em;
    text-transform: uppercase
}

.form-grid {
    display: grid;
    gap: 18px
}

.field {
    display: grid;
    gap: 8px
}

.field span {
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--atlantis-teal)
}

.field input,
.field textarea,
.field select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(26, 43, 46, .18);
    padding: 5px 0 11px;
    background: transparent;
    outline: none
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--atlantis-teal)
}

.success {
    text-align: center;
    padding: 30px 0
}

.success__mark {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0, 174, 193, .5);
    display: grid;
    place-items: center;
    margin: 0 auto 20px
}

.success__mark::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--atlantis-teal)
}

.sticky-cta {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: end;
}

.sticky-cta a {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: rgba(5, 38, 46, .94);
    border: 1px solid rgba(0, 174, 193, .4);
    color: #fff;
    box-shadow: -8px 0 40px rgba(5, 38, 46, .4);
    backdrop-filter: blur(20px)
}

.sticky-cta .label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    transition: .5s;
    display:block;
}

.sticky-cta a:hover > .label {
    max-width: 220px;
    padding-left: 20px;
    opacity: 1
}

.sticky-cta .ico {
    width: 56px;
    display: grid;
    place-items: center;
    color: var(--atlantis-teal)
}

.sticky-cta .ico img{width:18px;height:18px;object-fit:contain}

/* Each floating action owns its width; hovering one must not expand its sibling. */
.sticky-cta>a{width:56px;transition:width .5s var(--ease),border-color .5s,background-color .5s}
.sticky-cta>a .label{width:0;max-width:none;padding-left:0;opacity:0;transition:width .5s var(--ease),padding-left .5s var(--ease),opacity .3s ease;flex:0 0 auto}
.sticky-cta>a:hover,.sticky-cta>a:focus-visible{width:280px}
.sticky-cta>a:hover .label,.sticky-cta>a:focus-visible .label{width:224px;max-width:none;padding-left:24px;opacity:1}
.sticky-cta>a:not(:hover):not(:focus-visible) .label{width:0;max-width:0;padding-left:0;opacity:0}

.footer {
    position: relative;
    background: var(--atlantis-abyss);
    color: #fff;
    padding: 92px 0 36px
}

.footer__brands {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 48px
}

.footer__main-logo {
    height: 100px;
    filter: brightness(0) invert(1)
}

.footer__partners {
    display: flex;
    gap: 36px
}

.footer__partners img {
    height: 60px;
    filter: brightness(0) invert(1)
}

.footer__grid {
    display: grid;
    grid-template-columns: 5fr 4fr 3fr;
    gap: 40px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 50px
}

.footer p,
.footer address {
    font-style: normal;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .58)
}

.socials {
    display: flex;
    gap: 10px
}

.socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12)
}

.rera {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px;
    color: rgba(255, 255, 255, .4)
}

.rera__copy {
    display: flex;
    gap: 20px
}

.rera img {
    width: 64px;
    height: 64px;
    background: white;
    padding: 5px
}

.click-ripple {
    position: fixed;
    border: 1px solid rgba(0, 174, 193, .65);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: ripple-out 1.2s ease-out forwards
}

.cursor-layer{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:0;transition:opacity .2s}.cursor-layer.is-visible{opacity:1}.cursor-ring,.cursor-dot{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}.cursor-ring{width:32px;height:32px;border:1px solid rgba(127,208,212,.48);background:radial-gradient(circle,rgba(201,233,230,.18),rgba(201,233,230,0) 70%);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,background .3s}.cursor-dot{width:6px;height:6px;background:#c9e7e9;box-shadow:0 0 12px rgba(201,233,230,.8)}.cursor-layer.is-hovering .cursor-ring{width:46px;height:46px;border-color:rgba(0,174,193,.75);background:rgba(0,174,193,.08)}.cursor-layer.is-pressed .cursor-ring{width:25px;height:25px}.button-ripple{position:absolute!important;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(0,174,193,.5) 0%,rgba(201,231,233,.22) 55%,transparent 75%);transform-origin:center;animation:button-ripple-out .7s var(--ease) forwards}.btn>*:not(.button-ripple),.residence-cta>*:not(.button-ripple){position:relative;z-index:1}
@media(hover:none),(pointer:coarse){.cursor-layer{display:none}}
.residence-cta,.sound,.arrow,.config-tab,.plan-tab{position:relative;overflow:hidden}

/* Footer — source-accurate hierarchy and spacing. */
.footer{overflow:hidden;padding:96px 0 40px;background:var(--atlantis-abyss);background-image:radial-gradient(ellipse at top,rgba(0,174,193,.05),transparent 50%)}
.footer__brands{align-items:flex-start;gap:32px;margin-bottom:48px}.footer__main-logo{width:auto;height:112px;max-width:280px;object-fit:contain}.footer__partners{align-items:center;align-self:flex-start;gap:40px;padding-top:8px}.footer__partners img{width:auto;height:64px;object-fit:contain}.footer__grid{grid-template-columns:5fr 4fr 3fr;gap:40px;padding-top:56px;border-top:1px solid rgba(255,255,255,.08)}
.footer-tagline{margin-bottom:16px;color:rgba(0,174,193,.55);font-size:13px;font-weight:700;letter-spacing:.4em;text-transform:uppercase}.footer__grid>div:first-child>p{max-width:384px;margin:0;color:rgba(255,255,255,.5);font-size:14px;line-height:1.9}.footer-contact{display:grid;align-content:start;gap:20px}.footer-contact>div{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.55);font-size:13px;line-height:1.8}.footer-contact>div:first-child{align-items:flex-start}.footer-contact img{width:14px;height:14px;flex:none;opacity:.55}.footer-contact>div:first-child img{margin-top:5px}.footer-contact a{color:rgba(255,255,255,.55);transition:color .4s}.footer-contact a:hover{color:var(--atlantis-teal)}
.footer-follow{margin-bottom:20px;color:rgba(255,255,255,.3);font-size:13px;font-weight:700;letter-spacing:.4em;text-transform:uppercase}.socials{gap:12px}.socials a{width:36px;height:36px;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);transition:border-color .5s,background-color .5s}.socials a:hover{border-color:rgba(0,174,193,.45);background:rgba(0,174,193,.08)}.socials img{width:14px;height:14px;opacity:.5;transition:opacity .5s,filter .5s}.socials a:hover img{opacity:1;filter:brightness(0) saturate(100%) invert(54%) sepia(83%) saturate(1617%) hue-rotate(142deg) brightness(89%)}
.rera{align-items:flex-start;gap:32px;margin-top:56px;padding-top:32px}.rera__copy{align-items:stretch;gap:24px;max-width:760px}.rera__qr{display:flex;align-items:center;flex:none;padding:6px;background:#fff;border:1px solid rgba(255,255,255,.1)}.rera .rera__qr img{width:52px;height:52px;padding:0;background:transparent;object-fit:contain}.rera__text{max-width:672px}.rera__text p,.rera__disclaimer p{margin:0 0 8px;color:rgba(255,255,255,.35);font-size:11px;line-height:1.8;letter-spacing:.08em}.rera__text p+ p{color:rgba(255,255,255,.3)}.rera__text a{color:rgba(0,174,193,.65);text-decoration:underline;text-decoration-color:rgba(0,174,193,.25);text-underline-offset:4px}.rera>span{flex:none;padding-top:4px;color:rgba(255,255,255,.3);font-size:11px;letter-spacing:.15em}.rera__disclaimer{margin-top:12px}
.followpart{display: none;}