/* One West: static rebuild of the Elementor layout (header 33, home 2, footer 37, popup 417).
   Every value is ported from the live Elementor CSS. Breakpoints are Elementor's:
   laptop <=1480px, tablet <=1024px, mobile <=767px.
   Colours come from the :root block each template writes from globals.colours. */

@font-face { font-family: 'Megafield'; font-style: normal; font-weight: 400; font-display: auto; src: url('/fonts/megafield-regular.woff2') format('woff2'); }
@font-face { font-family: 'Megafield'; font-style: normal; font-weight: 300; font-display: auto; src: url('/fonts/megafield-light.woff2') format('woff2'); }
@font-face { font-family: 'Megafield'; font-style: italic; font-weight: 300; font-display: auto; src: url('/fonts/megafield-light-italic.woff2') format('woff2'); }
@font-face { font-family: 'Maxima Nouva'; font-style: normal; font-weight: 400; font-display: auto; src: url('/fonts/maxima-nouva-regular.woff2') format('woff2'); }
@font-face { font-family: 'Maxima Nouva'; font-style: normal; font-weight: 600; font-display: auto; src: url('/fonts/maxima-nouva-semibold.woff2') format('woff2'); }

/* ---- Base (Hello Elementor reset) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 1rem; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: #c36; text-decoration: none; background: transparent; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, textarea { font: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { clip: auto; width: auto; height: auto; margin: 0; padding: 12px 24px; z-index: 100000; top: 5px; left: 5px; background: #fff; color: #333; }

/* Shared type (Elementor heading widgets: line-height in em of their own size) */
.t-display { font-family: 'Megafield', sans-serif; font-size: 34px; font-weight: 300; line-height: 1.5; }
.t-eyebrow { font-family: 'Maxima Nouva', sans-serif; font-size: 20px; font-weight: 500; text-transform: uppercase; line-height: 1.6; letter-spacing: 5px; }
.t-body { font-family: 'Maxima Nouva', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; }

/* Buttons */
.btn { display: inline-block; max-width: 100%; font-family: 'Maxima Nouva', sans-serif; font-size: 16px; font-weight: 500; text-transform: uppercase; line-height: 18px; letter-spacing: 4px; text-align: center; color: var(--white); background: transparent; border: 2px solid var(--light); border-radius: 0; padding: 10px 40px; transition: all .3s; }
.btn-line:hover, .btn-line:focus { background: var(--light); color: var(--primary); border-color: var(--light); }
.btn-solid { font-size: 11px; font-weight: 400; color: #fff; background: var(--primary); border: 0; padding: 12px 20px; }
.btn-solid:hover, .btn-solid:focus { background: var(--accent); color: #fff; }

/* ---- Header (sticky, Elementor Pro sticky "top" with shadow effect) ---- */
.hdr { position: sticky; top: 0; z-index: 99; display: flex; justify-content: space-between; align-items: stretch; padding: 20px 100px; background: var(--light); transition: box-shadow .3s; }
.hdr.is-stuck { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); }
.hdr-brand { display: flex; align-items: center; width: 23%; }
.hdr-brand a { display: block; width: 100%; }
.hdr-brand img { width: 300px; }
.hdr-right { display: flex; justify-content: flex-end; align-items: center; gap: 50px; width: 75%; }
.hdr-nav ul { display: flex; }
.hdr-nav a { position: relative; display: block; font-family: 'Maxima Nouva', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; line-height: 20px; letter-spacing: 3px; color: var(--text); padding: 10px 0; margin: 0 12.5px; transition: color .4s; }
.hdr-nav li:first-child a { margin-left: 0; }
.hdr-nav li:last-child a { margin-right: 0; }
.hdr-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); opacity: 0; transition: opacity .3s; }
.hdr-nav a:hover, .hdr-nav a:focus, .hdr-nav a.is-active { color: var(--primary); }
.hdr-nav a:hover::after, .hdr-nav a:focus::after, .hdr-nav a.is-active::after { opacity: 1; }
.hdr-cta { align-self: center; margin-bottom: 6px; }
.hdr-toggle { display: none; align-items: center; justify-content: center; padding: 5.5px; font-size: 22px; line-height: 1; border: 0; border-radius: 3px; background: var(--secondary); color: var(--light); cursor: pointer; }
.hdr-toggle svg { width: 1em; height: 1em; fill: currentColor; }
.hdr-toggle .ic-close, .hdr.menu-open .hdr-toggle .ic-open { display: none; }
.hdr.menu-open .hdr-toggle .ic-close { display: block; }
.hdr-drop { display: none; }
.hdr-drop a { display: flex; justify-content: center; font-family: 'Maxima Nouva', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; line-height: 20px; letter-spacing: 2px; color: #33373d; padding: 10px 20px; border-inline-start: 8px solid transparent; }
.hdr-drop a:hover, .hdr-drop a:focus { background: #3f444b; color: #fff; }

/* ---- Hero: background video, multiply tint, content at the bottom ---- */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; margin-top: -92px; padding: 120px 100px 0; background-position: 50% 50%; background-size: cover; }
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%); opacity: .4; mix-blend-mode: multiply; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; width: 100%; max-width: 1220px; margin: 0 auto; text-align: center; }
.hero-title { font-family: 'Megafield', sans-serif; font-size: 48px; font-weight: 300; line-height: 1.7; color: var(--white); }
.hero-title em { display: block; }
.hero-line { margin: 0 auto; }
.hero-explore { font-family: 'Maxima Nouva', sans-serif; font-size: 20px; font-weight: 300; text-transform: uppercase; line-height: 1; letter-spacing: 5px; }
.hero-explore a { color: var(--white); }

/* ---- Intro (#first-screen) ---- */
.intro { display: flex; flex-direction: column; align-items: center; padding: 60px 100px; background-color: var(--primary); background-position: center; background-repeat: no-repeat; background-size: cover; }
.intro-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 1220px; }
.intro-title { width: 500px; max-width: 100%; text-align: center; color: var(--light); }
.intro-text { width: 624px; max-width: 100%; margin-bottom: 10px; text-align: center; color: var(--light); }

/* ---- Full-width image bands ---- */
.band { display: flex; flex-direction: column; }
.band > img { width: 100%; }
.band-60 { min-height: 60vh; }

/* ---- Two-column sections (text + image) ---- */
.split { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 90px 100px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.split > .col { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 50%; }
.split > .col-text { justify-content: center; gap: 40px; }
.col-text > p, .col-text > h2, .col-text > h3 { max-width: 100%; text-align: center; }
.col-text > .t-eyebrow { width: 1000px; }
.col-text > .t-body { margin-bottom: 60px; }
.col-media > img.cover { width: 100%; object-fit: cover; object-position: center center; }
.symbol { width: 120px; }

.s-vision { background-color: var(--light); color: var(--primary); }
.s-vision .t-display { width: 475px; }
.s-vision .t-body { width: 596px; }
.s-vision img.cover { height: 550px; }

.s-pool { background-color: var(--primary); color: var(--light); }
.s-pool .col-text { gap: 50px; }
.s-pool .t-display { width: 474px; }
.s-pool .t-body { width: 555px; }
.s-pool img.cover { height: 550px; object-position: top center; }

.s-perspective { background-color: var(--light); color: var(--primary); }
.s-perspective .t-display { width: 500px; }
.s-perspective .t-body { width: 464px; }
.s-perspective img.cover { height: 600px; }

.s-residences { justify-content: flex-start; background-color: var(--primary); color: var(--light); }
.s-residences .t-display { width: 490px; }
.s-residences .t-body { width: 481px; }

.s-penthouses { align-items: center; background-color: var(--light); color: var(--accent); }
.s-penthouses .t-display { width: 488px; }
.s-penthouses .t-body { width: 494px; }
.s-penthouses img.cover { height: 600px; }

.s-location { background-color: var(--accent-alt); color: var(--white); }
.s-location .col-text { width: 32%; }
.s-location .col-media { width: 64%; }
.s-location .t-display { width: 656px; }
.s-location .t-display em { display: block; }
.s-location .t-body { width: 314px; line-height: 1.6; }

/* ---- Activities (4 pictures) ---- */
.acts { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 90px 100px 45px; background-color: var(--activities-bg); }
.acts::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: .5; }
.act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 22%; }
.act-label { width: 1000px; max-width: 100%; margin-top: 20px; text-align: left; color: var(--accent); }

/* ---- Map ---- */
.map { position: relative; display: flex; flex-direction: column; align-items: center; padding: 85px 100px 90px; background-color: var(--light); }
.map::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: .5; }
.map > * { position: relative; }
.map-title { width: 100%; padding-bottom: 40px; font-size: 40px; text-align: center; color: var(--primary); }

/* ---- Register your interest band (#brochure) ---- */
.register { display: flex; flex-direction: column; padding: 80px 100px; background-color: var(--primary); background-position: center; background-repeat: no-repeat; background-size: cover; }
.register-inner { display: flex; flex-direction: column; width: 100%; max-width: 877px; margin: 0 auto; }
.register-title, .popup-title { padding-bottom: 20px; font-family: 'Megafield', sans-serif; font-size: 34px; font-weight: 300; line-height: 1.5; text-align: center; color: var(--white); }
.register-text { padding-bottom: 20px; font-family: 'Megafield', sans-serif; font-size: 24px; font-weight: 300; font-style: italic; line-height: 1.5; letter-spacing: 1.4px; text-align: center; color: var(--white); }
.register-btn { margin-top: 20px; text-align: center; }
.register-btn .btn { padding: 10px 20px; }

/* ---- Footer ---- */
.ftr { display: flex; flex-direction: column; background: var(--accent-alt); }
.ftr-inner { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1021px; margin: 0 auto; }
.ftr-row { display: flex; justify-content: space-between; align-items: stretch; padding: 60px 0; }
.ftr-logo, .ftr-tag { background-position: center right; background-repeat: no-repeat; }
.ftr-logo { display: flex; align-items: flex-start; width: 36%; padding: 40px 40px 40px 0; }
.ftr-logo img { width: 300px; }
.ftr-tag { display: flex; justify-content: center; align-items: center; width: 32%; padding: 40px; }
.ftr-tag h2 { width: 270px; max-width: 100%; font-family: 'Megafield', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.6; color: #fff; }
.ftr-links { display: flex; justify-content: flex-start; align-items: center; width: 32%; padding: 0 40px; }
.ftr-links li:not(:last-child) { margin-bottom: 11px; }
.ftr-links a { display: block; font-family: 'Maxima Nouva', sans-serif; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 20px; letter-spacing: 2px; color: #fff; }
.ftr-copy { display: flex; flex-direction: column; padding: 30px 0; border-top: 1px solid #fff; }
.ftr-copy div { font-family: 'Wulkan', sans-serif; font-size: 14px; font-weight: 500; line-height: 23px; text-align: center; color: #fff; }

/* ---- Text pages + 404 (Hello Elementor page template) ---- */
.site-main { width: 100%; margin: 0 auto; }
.page-header .entry-title { width: 100%; margin: .5rem auto 1rem; font-size: 2.5rem; font-weight: 500; line-height: 1.2; color: #333; }
.page-content p { margin: 0 0 .9rem; }
@media (max-width: 575px) { .site-main, .page-header .entry-title { padding-inline: 10px; } }
@media (min-width: 576px) { .site-main, .page-header .entry-title { max-width: 500px; } }
@media (min-width: 768px) { .site-main, .page-header .entry-title { max-width: 600px; } }
@media (min-width: 992px) { .site-main, .page-header .entry-title { max-width: 800px; } }
@media (min-width: 1200px) { .site-main, .page-header .entry-title { max-width: 1140px; } }

/* ---- Virtual tour ---- */
.tour-frame { display: block; width: 100%; height: 85vh; border: 0; }

/* ---- Popup (Register your interest form) ---- */
.popup { position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .8); }
.popup[hidden] { display: none; }
.popup-box { position: relative; width: 984px; max-width: 100%; max-height: 100%; overflow: auto; padding: 50px 100px; background-color: var(--primary); background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); }
.popup-inner { max-width: 780px; margin: 0 auto; }
.popup-close { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; padding: 0; font-size: 23px; line-height: 1; background: none; border: 0; color: var(--white); cursor: pointer; }
.popup-close svg { width: 1em; height: 1em; fill: currentColor; }
.fields { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.field { width: 100%; padding: 0 5px; margin-bottom: 10px; }
.field.w50 { width: 50%; }
.field.w33 { width: 33.333%; }
.field input[type=text], .field input[type=email], .field textarea { display: block; width: 100%; min-height: 40px; padding: 5px 16px; font-family: 'Maxima Nouva', sans-serif; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 1.4; color: var(--text); background: transparent; border: 1px solid var(--white); border-radius: 0; outline: 0; }
.field textarea { resize: vertical; }
.field ::placeholder { color: #fff; opacity: 1; }
.consent { color: var(--white); }
.consent input { vertical-align: middle; margin: 0; }
.consent label { font-family: 'Maxima Nouva', sans-serif; font-size: 12px; font-weight: 400; }
.submit { display: flex; justify-content: center; }
.btn-submit { min-height: 40px; padding: 0 24px; font-family: 'Maxima Nouva', sans-serif; font-size: 15px; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: 5px; color: #fff; background: transparent; border: 2px solid var(--light); border-radius: 0; cursor: pointer; transition: all .3s; }
.btn-submit:hover { background: var(--accent); border-color: var(--accent); }
.btn-submit:disabled { opacity: .5; cursor: default; }
.form-msg { margin: 10px 0; font-family: 'Maxima Nouva', sans-serif; font-size: 1em; line-height: 1; }
.form-msg.ok { color: #5cb85c; }
.form-msg.err { color: #d9534f; }

/* ---- Video lightbox (Movie button) ---- */
.vlb { position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, .87); }
.vlb[hidden] { display: none; }
.vlb video { width: min(90vw, 160vh * .9); aspect-ratio: 16 / 9; background: #000; }
.vlb-close { position: absolute; top: 15px; right: 15px; padding: 0; font-size: 28px; line-height: 1; background: none; border: 0; color: rgba(238, 238, 238, .9); cursor: pointer; }
.vlb-close svg { width: 1em; height: 1em; fill: currentColor; }

/* ---- Entrance animations (Elementor fadeIn / slideInUp, 1.25s) ---- */
.js [data-anim] { visibility: hidden; }
.js [data-anim].animated { visibility: visible; animation-duration: 1.25s; animation-fill-mode: both; }
.fadeIn { animation-name: fadeIn; }
.slideInUp { animation-name: slideInUp; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .js [data-anim] { visibility: visible; } .js [data-anim].animated { animation: none; } }

/* ================= Laptop (<=1480px) ================= */
@media (max-width: 1480px) {
  .hdr { min-height: 100px; padding: 20px 30px; }
  .hdr-right { gap: 30px; }
  .hdr-nav a { letter-spacing: 2px; padding: 5px 0; margin: 0 10px; }
  .hdr-cta { padding: 10px 20px; }
  .hero { margin-top: -100px; }
  .hero-title { font-size: 44px; }
  .intro { padding: 50px 30px; }
  .split { padding: 90px 30px; }
  .s-vision img.cover, .s-pool img.cover { height: 500px; }
  .s-pool .symbol, .s-residences .symbol { width: 100px; }
  .s-perspective img.cover { height: 400px; }
  .s-residences { justify-content: space-between; align-items: center; }
  .acts { padding: 90px 30px 45px; }
  .map { padding: 45px 30px 90px; }
  .register { padding: 50px 30px; }
  .ftr { padding: 0 30px 30px; }
  .ftr-logo { width: 32%; }
  .ftr-logo img { width: 200px; }
  .ftr-tag h2 { font-size: 18px; }
  .popup-box { padding: 50px 30px; }
}
@media (max-width: 1480px) and (min-width: 768px) {
  .split > .col { width: 48%; }
  .s-location .col-text { width: 40%; }
  .s-location .col-media { width: 58%; }
  .hdr-brand { width: 20%; }
  .hdr-right { width: 78%; }
}

/* ================= Tablet (<=1024px) ================= */
@media (max-width: 1024px) {
  .hdr-brand img { width: 150px; }
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-toggle { display: flex; border-radius: 0; }
  .hdr-drop { display: block; position: absolute; left: 0; right: 0; top: calc(50% + 26.5px); z-index: 9997; visibility: hidden; background: #fff; transform-origin: top; transform: scaleY(0); max-height: 0; overflow: hidden; transition: max-height .3s, transform .3s, visibility 0s .3s; }
  .hdr.menu-open .hdr-drop { visibility: visible; transform: scaleY(1); max-height: 100vh; transition-delay: 0s; }
  .hero { padding: 100px 20px 40px; }
  .hero-inner { max-width: 1024px; }
  .hero-title { font-size: 34px; }
  .hero-line { height: 50px; }
  .intro { padding: 50px 20px; }
  .intro-inner { max-width: 1024px; }
  .t-display { font-size: 28px; }
  .s-penthouses .t-display, .s-location .t-display { font-size: 30px; }
  .band-60 { min-height: 0; }
  .s-residences .symbol, .s-penthouses .symbol { width: 50px; }
  .acts { align-items: flex-start; }
  .act-label { font-size: 17px; }
  .map-title { font-size: 30px; }
  .register-title, .popup-title { font-size: 30px; }
  .register-text { font-size: 20px; }
  .ftr-tag h2 { font-size: 14px; }
}

/* ================= Mobile (<=767px) ================= */
@media (max-width: 767px) {
  .hdr-brand, .hdr-right { width: 100%; }
  .hdr-brand img { width: 100%; }
  .hero { min-height: 90vh; margin-top: 0; padding: 40px 20px; }
  .hero-inner, .intro-inner { max-width: 767px; }
  .hero-title { font-size: 30px; }
  .hero-explore { margin-top: 30px; font-size: 16px; }
  .t-eyebrow { font-size: 22px; line-height: 1.7; }
  .t-body, .s-location .t-body { line-height: 1.7; }
  .split > .col, .s-location .col-text, .s-location .col-media { width: 100%; }
  .s-vision, .s-perspective { padding: 60px 30px; }
  .s-pool { padding: 60px 30px 0; }
  .s-residences, .s-location { padding: 60px 30px 30px; }
  .s-penthouses { padding: 30px; }
  .s-vision .col-text, .s-pool .col-text, .s-residences .col-text, .s-location .col-text { gap: 20px; }
  .s-penthouses .col-text { gap: 10px; }
  .s-vision img.cover, .s-pool img.cover { height: 300px; }
  .s-pool .col-media img { margin-bottom: 30px; }
  .s-pool .symbol { width: 50px; }
  .s-perspective img.cover { height: 200px; }
  .s-residences .col-media img { margin-bottom: 50px; }
  .s-penthouses img.cover { height: 206px; margin-bottom: 40px; }
  .acts { padding: 30px; }
  .act { width: 100%; }
  .act-label { margin: 0 0 40px; font-size: 18px; line-height: 1.7; }
  .register-inner { max-width: 767px; }
  .ftr-inner { max-width: 767px; }
  .ftr-row { flex-direction: column; }
  .ftr-logo { width: 100%; padding: 0 0 40px; }
  .ftr-tag { width: 100%; justify-content: flex-start; align-items: flex-start; padding: 0; }
  .ftr-tag h2 { font-size: 12px; text-align: left; }
  .ftr-links { width: 100%; padding: 30px 0 0; }
  .ftr-links ul { width: 100%; }
  .ftr-copy div { font-size: 13px; }
  .field.w50, .field.w33 { width: 100%; }
}