/* One Calodyne: static rebuild of the Elementor layout (header 33, home 2, footer 37, popup 524), copied from One West.
   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. One Calodyne's kit text is 17px on desktop and 13px from 1024px down;
   widget sizes are em of that (headings 2em, eyebrows 1em, buttons 0.6-0.8em). */
.t-display { font-family: 'Megafield', sans-serif; font-size: 34px; font-weight: 300; line-height: 1.5; letter-spacing: 1px; }
.t-eyebrow { font-family: 'Maxima Nouva', sans-serif; font-size: 17px; font-weight: 300; text-transform: uppercase; line-height: 1; letter-spacing: 5px; }
/* Text-editor widgets fall back to the system font on the live site (no kit body font) */
.t-body { font-size: 17px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; margin-bottom: .9rem; }

/* Buttons */
.btn { display: inline-block; max-width: 100%; font-family: 'Maxima Nouva', sans-serif; font-size: 13.6px; font-weight: 700; text-transform: uppercase; line-height: 1.2em; letter-spacing: 4px; text-align: center; color: var(--white); background: var(--primary); border: 0; border-radius: 0; padding: 15px 40px; transition: all .3s; }
.btn-line:hover, .btn-line:focus { background: var(--sage); color: var(--white); }
.btn-solid, .btn-fill { font-size: 10.2px; padding: 15px; color: var(--white); background: var(--sage); }
.btn-solid:hover, .btn-solid:focus, .btn-fill:hover, .btn-fill: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: center; padding: 1vw 3vw; 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; }
.hdr-brand a { display: block; }
.hdr-brand img { width: 226px; }
.hdr-right { display: flex; flex: 1; justify-content: flex-end; align-items: center; gap: 20px; }
.hdr-nav ul { display: flex; }
.hdr-nav a { position: relative; display: block; font-family: 'Maxima Nouva', sans-serif; font-size: 11.9px; font-weight: 500; text-transform: uppercase; line-height: 20px; letter-spacing: 4.4px; color: var(--white); padding: 0; margin: 0 12px; 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: 1px; background: var(--cream); opacity: 0; transition: opacity .3s; }
.hdr-nav a:hover, .hdr-nav a:focus, .hdr-nav a.is-active { color: var(--cream); }
.hdr-nav a:hover::after, .hdr-nav a:focus::after, .hdr-nav a.is-active::after { opacity: 1; }
.hdr-cta { align-self: center; }
.hdr-toggle { display: none; align-items: center; justify-content: center; padding: 8px; font-size: 22px; line-height: 1; border: 0; border-radius: 0; background: var(--sage); color: var(--white); 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: 500; text-transform: uppercase; line-height: 20px; letter-spacing: 2px; color: var(--white); padding: 10px 20px; border-inline-start: 8px solid transparent; }
.hdr-drop a:hover, .hdr-drop a:focus { background: var(--sage); color: var(--white); }

/* ---- Hero: background video, optional multiply tint (white = none), Explore at the bottom ---- */
.hero { position: relative; display: flex; flex-direction: column; min-height: 90vh; padding: 1vw 5vw; 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; padding: 10px; text-align: center; }
.hero-line { width: 2px; margin: 0 auto; }
.hero-explore { font-family: 'Maxima Nouva', sans-serif; font-size: 17px; 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: 8vw; 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: 40px; width: 100%; max-width: 600px; }
.intro-title { text-align: center; color: var(--light); }
.intro-text { text-align: center; color: var(--text); }

/* ---- Full-width image bands (background-image containers, 90vh / 60vh / 30vh) ---- */
.band { display: flex; flex-direction: column; }
.band > img { width: 100%; }
.band-bg { min-height: 90vh; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* ---- Two-column sections (text + image): 5% padding, columns in % with a 20px gap ---- */
.split { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; padding: 5vw; background-position: center; background-repeat: no-repeat; background-size: cover; }
.split > .col { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; }
.split > .col-text { width: 45%; padding: 10px; }
.split > .col-media { width: 55%; }
.col-text > p, .col-text > h2, .col-text > h3 { max-width: 100%; text-align: center; }
.col-media > img { width: 100%; }
.col-media > img.cover { height: 70vh; object-fit: cover; object-position: center center; }
.symbol { width: 100px; }

.s-vision, .s-perspective { background-color: var(--light); color: var(--primary); }
.s-vision .t-body, .s-perspective .t-body { color: var(--text); }
.s-pool, .s-residences { background-color: var(--primary); }
.s-pool .t-display, .s-residences .t-display { color: var(--secondary); }
.s-pool .t-body, .s-residences .t-body { color: var(--cream); }
.s-residences .t-eyebrow { color: var(--white); }
.s-pool > .col-text { padding: 0; }
.s-residences > .col-text, .s-penthouses > .col-text { width: 35%; }
.s-residences > .col-media, .s-penthouses > .col-media { width: 60%; }
.s-penthouses { background-color: #E8E0CF; color: var(--text); }
.s-penthouses .t-eyebrow { color: var(--primary); }
.s-location { background-color: var(--accent-alt); color: var(--white); }
.s-location > .col-text { width: 32%; }
.s-location .t-display em { display: block; }

/* ---- Activities (pictures + labels, boxed 1220px) ---- */
.acts { display: flex; gap: 80px; padding: 4.44vw max(5vw, calc((100% - 1220px) / 2)) 1.85vw; background-color: var(--activities-bg); }
.act { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 20px; min-width: 0; }
.act > img { width: 100%; }
.act-label { max-width: 100%; text-align: center; color: var(--accent); }

/* ---- Map ---- */
.map { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 3vw 5vw 5vw; background-color: var(--activities-bg); }
.map > img { width: 100%; }
.map-title { text-align: center; color: var(--text); }

/* ---- Register your interest band (#brochure) ---- */
.register { display: flex; flex-direction: column; padding: 4.44vw 5vw; background-color: var(--primary); background-position: center; background-repeat: no-repeat; background-size: cover; }
.register-inner { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 900px; margin: 0 auto; }
.register-title, .popup-title { font-family: 'Megafield', sans-serif; font-size: 40px; font-weight: 300; line-height: 1.5; letter-spacing: 1px; text-align: center; color: var(--white); }
.register-text { font-family: 'Megafield', sans-serif; font-size: 25px; font-weight: 300; font-style: italic; line-height: 1.5; letter-spacing: 1px; text-align: center; color: var(--white); }
.register-btn { text-align: center; }

/* ---- 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; letter-spacing: 1px; text-align: center; color: #fff; } /* kit body letter-spacing is inherited here */

/* ---- 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: 70vh; 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: 5% 8%; 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: 900px; margin: 0 auto; }
.popup-title { margin-bottom: 40px; }
.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: 1px solid var(--white); 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; } }


/* ================= Tablet (<=1024px) ================= */
@media (max-width: 1024px) {
  .t-display { font-size: 26px; }
  .t-eyebrow { font-size: 13px; }
  .t-body { font-size: 13px; }
  .btn { font-size: 10.4px; }
  .btn-solid, .btn-fill { font-size: 7.8px; }
  .hdr-brand img { width: 150px; }
  .hdr-nav { display: none; }
  .hdr-toggle { display: flex; }
  .hdr-drop { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 9997; visibility: hidden; background: var(--light); 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 { min-height: 60vh; }
  .hero-explore { font-size: 13px; }
  .intro-inner { gap: 30px; }
  .split > .col { gap: 30px; }
  .s-residences > .col-text { gap: 40px; }
  .band-bg { min-height: 60vh; }
  .s-pool img.cover, .s-perspective img.cover { height: 50vh; }
  .s-residences { flex-direction: column; }
  .s-residences > .col-text, .s-residences > .col-media { width: 100%; }
  .s-location { align-items: center; }
  .map-title { font-size: 26px; }
  .register-title, .popup-title { font-size: 30px; }
  .register-text { font-size: 20px; }
  .ftr { padding: 15px; }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .s-penthouses > .col-text { width: 50%; }
  .s-location > .col-text { width: 45%; }
  .s-residences .symbol, .s-penthouses .symbol { display: none; }
  .s-pool .symbol { width: 90px; }
}

/* ================= Mobile (<=767px) ================= */
@media (max-width: 767px) {
  .t-eyebrow { font-size: 22px; line-height: 1.7; }
  .hdr { padding: 10px; }
  .hdr-brand img { width: 180px; }
  .hdr-cta { display: none; }
  .hero { padding: 15px; }
  .hero-inner { gap: 7px; }
  .hero-line { width: 1px; }
  .intro { padding: 40px 15px; }
  .band-bg { min-height: 30vh; }
  .split { flex-direction: column; padding: 40px 15px; }
  .split > .col, .s-location > .col-text { width: 100%; }
  .s-pool { flex-direction: column-reverse; }
  .s-residences > .col-text, .s-penthouses > .col-text, .s-location > .col-text { gap: 20px; }
  .s-pool .symbol { width: 80px; }
  .s-residences .symbol, .s-penthouses .symbol { width: 40px; }
  .acts { flex-direction: column; gap: 30px; padding: 40px 15px; }
  .act-label { padding-bottom: 40px; }
  .map { padding: 40px 15px; }
  .register { padding: 40px 15px 80px; }
  .register-btn .btn { padding: 14px 28px; letter-spacing: 3px; } /* live hides it on phones; shown on request (Ludovic 2026-10-22) so phones can reach the form */
  .ftr-row { flex-direction: column; }
  .ftr-logo, .ftr-tag, .ftr-links { width: 100%; }
  .ftr-logo { padding: 40px; }
  .ftr-logo img { width: 100%; }
  .ftr-copy div { font-size: 13px; }
  .popup-box { min-height: 100vh; padding: 40px 15px 80px; }
  .popup-title { font-size: 20px; }
  .field.w50, .field.w33 { width: 100%; }
}