/* ============================================================
   MYKONOS BEACH HOTEL — Design System v3
   Inspired by Aguas de Ibiza luxury aesthetic
   ============================================================ */

:root {
    /* Colors */
    --navy: #253056;
    --navy-light: #3a4a7a;
    --navy-dark: #1a2240;
    --cream: #F9F8F6;
    --white: #FFFFFF;
    --dark: #202020;
    --text: #4a4a4a;
    --text-light: rgba(255,255,255,0.85);
    --text-muted: #8a8a8a;
    --border: rgba(0,0,0,0.08);
    --border-light: rgba(255,255,255,0.15);
    --menu-bg: var(--navy-dark);

    /* Typography */
    --font-serif: 'Cormorant Garamond', 'Georgia', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --header-height: 70px;
    --container-width: 1360px;
    --container-padding: 48px;
    --section-padding: 120px;

    /* Transitions */
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.19, 0.88, 0.22, 1);
    --dur: 0.4s;
    --dur-fast: 0.3s;
}

/* --- RESET --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:17px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body { font-family:var(--font-sans); font-weight:200; color:var(--text); background:var(--cream); line-height:1.6; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; cursor:pointer; }
button { background:none; border:none; cursor:pointer; font-family:inherit; }
ul,ol { list-style:none; }
input,textarea,select { font-family:inherit; font-size:inherit; }

/* --- CONTAINER --- */
.container { max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding); width:100%; }
.section { padding:var(--section-padding) 0; position:relative; }
.section--cream { background:var(--cream); }
.section--white { background:var(--white); }
.section--navy { background:var(--navy); color:var(--text-light); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader { position:fixed; top:0; left:0; width:100%; height:100vh; background:var(--navy); display:flex; align-items:center; justify-content:center; z-index:99999; transition:opacity 0.6s var(--ease-out), visibility 0.6s; }
.preloader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.preloader__spinner { width:48px; height:48px; border:1.5px solid transparent; border-top-color:rgba(255,255,255,0.8); border-radius:50%; animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   HEADER — Two states: transparent (hero) + scrolled (sticky)
   ============================================================ */
.header {
    position:fixed; top:0; left:0; width:100%; z-index:9990;
    background:transparent; border-bottom:1px solid transparent;
    transition:background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.header.is-scrolled {
    background:rgba(255,255,255,0.98);
    border-bottom:1px solid rgba(0,0,0,0.08);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.header__inner {
    width:100%; padding:0 32px;
    height:var(--header-height); display:flex; align-items:center; justify-content:space-between;
    position:relative;
}

/* Left: hotel name + lang */
.header__left { display:flex; align-items:center; gap:0; }

.header__brand-text {
    font-family:var(--font-sans); font-size:9px; font-weight:300;
    letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.8);
    white-space:pre-line; line-height:1.35;
    transition:color 0.4s ease;
}
.header.is-scrolled .header__brand-text { color:var(--dark); }

.header__arrow { display:none; }

.header__lang { display:flex; gap:8px; margin-left:18px; padding-left:18px; border-left:1px solid rgba(255,255,255,0.2); }
.header.is-scrolled .header__lang { border-left-color:rgba(0,0,0,0.12); }
.header__lang-item {
    font-size:9px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(255,255,255,0.45); transition:color 0.4s ease; cursor:pointer;
}
.header__lang-item.is-active { color:rgba(255,255,255,0.9); }
.header.is-scrolled .header__lang-item { color:var(--text-muted); }
.header.is-scrolled .header__lang-item.is-active { color:var(--navy); }

/* Center: logo — two versions stacked */
.header__logo {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.header__logo-img { width:auto; max-width:100%; transition:height 0.4s ease; object-fit:contain; }
.header__logo-img--white { height:100px; display:block; }
.header__logo-img--blue { height:100px; display:none; }
.header.is-scrolled .header__logo-img--white { display:none; }
.header.is-scrolled .header__logo-img--blue { display:block; }

/* Right: Book Now + hamburger */
.header__right { display:flex; align-items:center; gap:20px; }

.header__book-btn {
    font-size:12px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase;
    color:#fff; padding:10px 22px;
    border:1px solid rgba(255,255,255,0.5); transition:all var(--dur-fast) ease;
}
.header__book-btn:hover { background:rgba(255,255,255,0.15); }
.header.is-scrolled .header__book-btn {
    color:var(--navy); border-color:var(--navy);
}
.header.is-scrolled .header__book-btn:hover { background:var(--navy); color:#fff; }

/* Hamburger */
.header__hamburger {
    display:flex; flex-direction:column; justify-content:center;
    gap:6px; width:26px; height:26px; padding:0;
}
.header__hamburger span {
    display:block; height:1px; width:100%; background:#fff;
    transition:all var(--dur-fast) ease;
}
.header.is-scrolled .header__hamburger span { background:var(--dark); }

/* ============================================================
   FULLSCREEN MENU — Aguas de Ibiza style overlay
   ============================================================ */
.mobile-menu {
    position:fixed; top:0; left:0; width:100%; height:100vh; z-index:9995;
    background:var(--menu-bg);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.5s var(--ease-out), visibility 0.5s;
}
.mobile-menu.is-active { opacity:1; visibility:visible; pointer-events:all; }

.mobile-menu__inner {
    position:relative; width:100%; height:100%; overflow-y:auto;
}

/* Close button — top left */
.mobile-menu__close {
    position:absolute; top:24px; left:32px; width:32px; height:32px; cursor:pointer; z-index:2;
    display:flex; align-items:center; justify-content:center;
}
.mobile-menu__close span {
    display:block; height:1px; width:100%; background:rgba(255,255,255,0.7);
    position:absolute; top:50%;
}
.mobile-menu__close span:first-child { transform:rotate(45deg); }
.mobile-menu__close span:nth-child(2) { transform:rotate(-45deg); }
.mobile-menu__close-text {
    position:absolute; left:42px; top:50%; transform:translateY(-50%);
    font-family:var(--font-sans); font-size:11px; font-weight:300;
    letter-spacing:0.08em; text-transform:uppercase;
    color:rgba(255,255,255,0.6); font-style:normal;
    white-space:nowrap;
}

/* Book now — top right */
.mobile-menu__top-right {
    position:absolute; top:20px; right:32px; z-index:2;
}

/* Left column: main nav — large serif links */
.mobile-menu__nav { display:flex; flex-direction:column; gap:4px; }
.mobile-menu__link {
    font-family:var(--font-serif); font-size:clamp(26px,3.5vw,38px); font-weight:300;
    color:rgba(255,255,255,0.7); padding:6px 0;
    transition:color var(--dur-fast) ease; display:block;
}
.mobile-menu__link:hover { color:#fff; }

/* Room subcategory — nested under Rooms link */
.mobile-menu__sub { display:none; flex-direction:column; gap:2px; padding:4px 0 8px 20px; }
.mobile-menu__sub.is-open { display:flex; }
.mobile-menu__sub-link {
    font-family:var(--font-sans); font-size:14px; font-weight:200;
    color:rgba(255,255,255,0.5); padding:4px 0;
    transition:color var(--dur-fast) ease;
}
.mobile-menu__sub-link:hover { color:#fff; }

/* Parent link with toggle arrow */
.mobile-menu__link--has-sub {
    cursor:pointer; background:none; border:none;
    font-family:var(--font-serif); font-size:clamp(26px,3.5vw,38px); font-weight:300;
    color:rgba(255,255,255,0.7); padding:6px 0; text-align:left;
    display:block; width:auto;
}
.mobile-menu__link--has-sub::after {
    content:'+'; display:inline-block; margin-left:12px;
    font-family:var(--font-sans); font-size:18px; font-weight:200;
    vertical-align:middle; transition:transform 0.3s ease;
}
.mobile-menu__link--has-sub.is-open::after { content:'\2212'; }

/* Center column: preview image */
.mobile-menu__preview {
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.mobile-menu__preview-img {
    width:100%; height:65vh; max-height:520px; object-fit:cover;
    transition:opacity 0.4s ease;
}

/* Right column: secondary nav + info + socials */
.mobile-menu__secondary { display:flex; flex-direction:column; justify-content:space-between; }
.mobile-menu__secondary-nav { display:flex; flex-direction:column; gap:10px; }
.mobile-menu__secondary-link {
    font-size:14px; font-weight:300; color:rgba(255,255,255,0.5);
    transition:color var(--dur-fast) ease;
}
.mobile-menu__secondary-link:hover { color:#fff; }

.mobile-menu__cta { margin-top:24px; }
.mobile-menu__book-btn {
    display:inline-block; font-size:12px; font-weight:400; letter-spacing:0.1em;
    text-transform:uppercase; color:#fff; padding:14px 28px;
    border:1px solid rgba(255,255,255,0.3); transition:all var(--dur-fast) ease;
}
.mobile-menu__book-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.6); }

.mobile-menu__info { margin-top:24px; }
.mobile-menu__info p { font-size:13px; color:rgba(255,255,255,0.4); line-height:1.7; margin-bottom:8px; }
.mobile-menu__info a { color:rgba(255,255,255,0.55); }
.mobile-menu__info a:hover { color:#fff; }

.mobile-menu__socials {
    display:flex; gap:20px; margin-top:auto; padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.1);
}
.mobile-menu__socials a {
    font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(255,255,255,0.4); transition:color var(--dur-fast) ease;
}
.mobile-menu__socials a:hover { color:#fff; }

.mobile-menu__lang {
    display:flex; gap:16px; padding-top:16px;
}
.mobile-menu__lang-item {
    font-size:12px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(255,255,255,0.4); cursor:pointer; transition:color var(--dur-fast) ease;
}
.mobile-menu__lang-item.is-active { color:#fff; }
.mobile-menu__lang-item:hover { color:rgba(255,255,255,0.8); }

/* ============================================================
   HERO — full viewport video with title overlay
   ============================================================ */
.hero { position:relative; height:100vh; min-height:600px; display:flex; align-items:flex-end; overflow:hidden; }
.hero__video-wrap { position:absolute; top:0; left:0; width:100%; height:100%; }
.hero__video { width:100%; height:100%; object-fit:cover; }
.hero__overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(20,20,40,0.25) 0%, rgba(20,20,40,0.15) 40%, rgba(20,20,40,0.55) 100%); }
/* ESPA banner — middle right of hero, hides on scroll */
.espa-banner {
    position:absolute; right:0; bottom:0;
    z-index:3; display:block;
    transition:opacity 0.4s ease, visibility 0.4s ease;
}
.espa-banner.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.espa-banner__img {
    height:120px; width:auto; display:block;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,0.2));
}

@media (max-width:540px) {
    .espa-banner__img { height:80px; }
}

/* Sound toggle */
.hero__sound-toggle {
    position:absolute; bottom:32px; right:32px; z-index:3;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
    color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.3s ease; backdrop-filter:blur(6px);
}
.hero__sound-toggle:hover { background:rgba(255,255,255,0.25); }
.hero__sound-icon { width:18px; height:18px; }
.hero__sound-icon--on { display:none; }
.hero__sound-toggle.is-unmuted .hero__sound-icon--off { display:none; }
.hero__sound-toggle.is-unmuted .hero__sound-icon--on { display:block; }

.hero__content { position:relative; z-index:2; color:#fff; padding:0 32px 120px; width:100%; }

/* ============================================================
   REVIEW BAR — dark navy strip below hero on all pages
   ============================================================ */
.review-bar {
    background:var(--navy-dark); display:flex; align-items:center;
    justify-content:center; gap:0; height:56px; width:100%;
    position:relative; z-index:3;
}
.review-bar__item {
    display:flex; align-items:center; gap:10px; padding:0 32px;
    border-right:1px solid rgba(255,255,255,0.1);
    height:100%;
}
.review-bar__item:last-child { border-right:none; }
.review-bar__score {
    font-family:var(--font-sans); font-size:20px; font-weight:400;
    color:#fff;
}
.review-bar__details {
    display:flex; flex-direction:column; gap:0;
}
.review-bar__source {
    font-family:var(--font-sans); font-size:11px; font-weight:300;
    color:rgba(255,255,255,0.7); letter-spacing:0.02em;
}
.review-bar__count {
    font-family:var(--font-sans); font-size:10px; font-weight:200;
    color:rgba(255,255,255,0.4);
}
/* 360 virtual tour link */
.review-bar__tour {
    display:flex; align-items:center; gap:8px; padding:0 32px;
    font-family:var(--font-sans); font-size:11px; font-weight:300;
    letter-spacing:0.06em; text-transform:uppercase;
    color:rgba(255,255,255,0.7); cursor:pointer;
    transition:color 0.3s ease; height:100%;
    border-left:1px solid rgba(255,255,255,0.1);
}
.review-bar__tour:hover { color:#fff; }
.review-bar__tour svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.5; fill:none; }

/* Matterport modal */
.matterport-modal {
    position:fixed; top:0; left:0; width:100%; height:100vh;
    background:rgba(0,0,0,0.85); z-index:99999;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
}
.matterport-modal.is-active { opacity:1; visibility:visible; }
.matterport-modal__inner {
    width:90vw; height:80vh; max-width:1400px; position:relative;
}
.matterport-modal__close {
    position:absolute; top:-40px; right:0; width:32px; height:32px;
    cursor:pointer; color:rgba(255,255,255,0.7); font-size:28px;
    font-family:var(--font-sans); font-weight:200;
    transition:color 0.3s ease; z-index:2;
}
.matterport-modal__close:hover { color:#fff; }
.matterport-modal iframe {
    width:100%; height:100%; border:none;
}

@media (max-width:768px) {
    .review-bar { flex-wrap:wrap; height:auto; padding:12px 0; }
    .review-bar__item { padding:8px 20px; border-right:none; }
    .review-bar__tour { border-left:none; }
}

/* ============================================================
   GALLERY — 3-column square grid with lightbox
   ============================================================ */
.gallery-square-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:15px;
    padding:0 32px;
}
.gallery-square-grid__item {
    overflow:hidden; aspect-ratio:1/1; cursor:pointer;
}
.gallery-square-grid__item img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform 0.6s var(--ease);
}
.gallery-square-grid__item:hover img { transform:scale(1.05); }

@media (max-width:1024px) {
    .gallery-square-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:540px) {
    .gallery-square-grid { grid-template-columns:1fr; gap:10px; padding:0 20px; }
}

/* Gallery video + motto side by side */
.gallery-video-motto {
    padding:120px 32px; background:var(--cream);
}
.gallery-video-motto__inner {
    display:flex; align-items:center; gap:80px;
    max-width:1400px; margin:0 auto;
}
.gallery-video-motto__video {
    flex:0 0 auto; width:420px; overflow:hidden;
}
.gallery-video-motto__video video {
    width:100%; height:auto; display:block;
}
.gallery-video-motto__text { flex:1; }
.gallery-video-motto__title {
    font-family:var(--font-serif); font-size:clamp(30px,4vw,52px);
    font-weight:300; line-height:1.2; color:var(--dark); margin-bottom:28px;
}
.gallery-video-motto__desc {
    font-family:var(--font-sans); font-size:17px; font-weight:200;
    line-height:1.85; color:var(--text-muted);
}

/* Gallery filter: hide items not matching */
.gallery-square-grid__item[data-category] { transition:opacity 0.3s ease; }
.gallery-square-grid__item.is-hidden { display:none; }

@media (max-width:1024px) {
    .gallery-video-motto__inner { flex-direction:column; gap:40px; }
    .gallery-video-motto__video { width:100%; max-width:500px; }
}
@media (max-width:540px) {
    .gallery-video-motto { padding:60px 20px; }
    .gallery-video-motto__video { width:100%; }
}

/* ============================================================
   LEGAL CONTENT — privacy, terms pages
   ============================================================ */
.legal-content {
    max-width:800px; margin:0 auto; width:100%;
}
.legal-content h2 {
    font-family:var(--font-serif); font-size:24px; font-weight:400;
    color:var(--dark); margin:40px 0 16px; line-height:1.3;
}
.legal-content h2:first-child { margin-top:0; }
.legal-content p {
    font-family:var(--font-sans); font-size:15px; font-weight:200;
    line-height:1.85; color:var(--text-muted); margin-bottom:16px;
}
.legal-content a {
    color:var(--navy); border-bottom:1px solid rgba(37,48,86,0.2);
    transition:border-color 0.3s ease;
}
.legal-content a:hover { border-color:var(--navy); }

/* ============================================================
   ENQUIRY FORM — contact page
   ============================================================ */
.enquiry {
    max-width:780px; margin:0 auto; padding:0 32px;
}
.enquiry__title {
    font-family:var(--font-serif); font-size:clamp(28px,3.5vw,42px);
    font-weight:300; color:var(--dark); margin-bottom:16px;
}
.enquiry__subtitle {
    font-family:var(--font-sans); font-size:15px; font-weight:200;
    color:var(--text-muted); line-height:1.7; margin-bottom:40px;
}
.enquiry__form { display:flex; flex-direction:column; gap:16px; }

/* Rows */
.enquiry__row { display:flex; gap:16px; }
.enquiry__row--3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* Inputs & selects */
.enquiry__input, .enquiry__select {
    flex:1; padding:16px 20px;
    font-family:var(--font-sans); font-size:14px; font-weight:200;
    color:var(--dark); background:rgba(0,0,0,0.03);
    border:1px solid rgba(0,0,0,0.08); outline:none;
    transition:border-color 0.3s ease;
    -webkit-appearance:none; appearance:none;
}
.enquiry__input:focus, .enquiry__select:focus { border-color:var(--navy); }
.enquiry__input::placeholder { color:var(--text-muted); }
.enquiry__input--full, .enquiry__select--full { width:100%; }

/* Date inputs */
.enquiry__input--date { color:var(--text-muted); }
.enquiry__input--date::-webkit-calendar-picker-indicator { opacity:0.4; }

/* Select arrow */
.enquiry__select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a8a' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}

/* Textarea */
.enquiry__textarea-wrap { position:relative; }
.enquiry__textarea {
    width:100%; min-height:140px; padding:16px 20px; resize:vertical;
    font-family:var(--font-sans); font-size:14px; font-weight:200;
    color:var(--dark); background:transparent;
    border:1px solid rgba(0,0,0,0.12); outline:none;
    transition:border-color 0.3s ease;
}
.enquiry__textarea:focus { border-color:var(--navy); }
.enquiry__textarea::placeholder { color:var(--text-muted); }
.enquiry__char-count {
    position:absolute; bottom:12px; right:16px;
    font-family:var(--font-sans); font-size:11px; font-weight:200;
    color:var(--text-muted);
}

/* Labels */
.enquiry__label {
    font-family:var(--font-sans); font-size:13px; font-weight:300;
    color:var(--text-muted); margin-top:8px;
}

/* Checkboxes */
.enquiry__checkboxes { display:flex; gap:24px; margin-bottom:8px; }
.enquiry__checkbox {
    display:flex; align-items:flex-start; gap:10px; cursor:pointer;
    font-family:var(--font-sans); font-size:13px; font-weight:200; color:var(--text);
}
.enquiry__checkbox input[type="checkbox"] {
    width:18px; height:18px; margin-top:1px; flex-shrink:0;
    accent-color:var(--navy); cursor:pointer;
}
.enquiry__checkbox a { color:var(--navy); text-decoration:underline; }

/* Agreements */
.enquiry__agreements { display:flex; flex-direction:column; gap:16px; margin-top:16px; }

/* Submit */
.enquiry__submit {
    width:100%; padding:18px; margin-top:16px;
    font-family:var(--font-sans); font-size:13px; font-weight:400;
    letter-spacing:0.15em; text-transform:uppercase;
    color:#fff; background:var(--dark); border:none; cursor:pointer;
    transition:background 0.3s ease;
}
.enquiry__submit:hover { background:var(--navy); }

/* ============================================================
   OFFER CARDS — alternating image + text layout
   ============================================================ */
.offer-card {
    display:flex; align-items:center; gap:80px;
    padding:0 32px; max-width:1400px; margin:0 auto;
}
.offer-card--reverse { flex-direction:row-reverse; }

.offer-card__media { flex:1.2; overflow:hidden; }
.offer-card__media img {
    width:100%; height:560px; object-fit:cover; display:block;
    transition:transform 0.8s var(--ease);
}
.offer-card:hover .offer-card__media img { transform:scale(1.03); }

.offer-card__content { flex:1; }
.offer-card__eyebrow {
    font-family:var(--font-sans); font-size:12px; font-weight:400;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--navy);
    margin-bottom:20px;
}
.offer-card__title {
    font-family:var(--font-serif); font-size:clamp(30px,4vw,52px);
    font-weight:300; line-height:1.2; color:var(--dark); margin-bottom:24px;
}
.offer-card__text {
    font-family:var(--font-sans); font-size:16px; font-weight:200;
    line-height:1.85; color:var(--text-muted); margin-bottom:16px;
}
.offer-card__text a {
    color:var(--navy); border-bottom:1px solid rgba(37,48,86,0.2);
    transition:border-color 0.3s ease;
}
.offer-card__text a:hover { border-color:var(--navy); }
.offer-card__terms {
    font-family:var(--font-sans); font-size:12px; font-weight:200;
    color:var(--text-muted); font-style:italic; margin-bottom:28px;
}
.offer-card__btn {
    display:inline-block; font-family:var(--font-sans); font-size:12px; font-weight:400;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--navy);
    padding:14px 32px; border:1px solid var(--navy);
    transition:all 0.3s ease;
}
.offer-card__btn:hover { background:var(--navy); color:#fff; }

@media (max-width:1024px) {
    .offer-card, .offer-card--reverse { flex-direction:column; gap:40px; }
    .offer-card__media img { height:400px; }
}
@media (max-width:540px) {
    .offer-card__media img { height:280px; }
}

@media (max-width:540px) {
    .enquiry__row, .enquiry__row--3 { flex-direction:column; display:flex; }
    .enquiry__checkboxes { flex-direction:column; gap:12px; }
}

/* ============================================================
   HOTEL / FACILITIES PAGE — split sections, full images, cards
   ============================================================ */
.hotel-split {
    display:flex; align-items:center; gap:80px;
    padding:0 32px; max-width:1400px; margin:0 auto;
}
.hotel-split--reverse { flex-direction:row-reverse; }
.hotel-split__media { flex:1.1; overflow:hidden; }
.hotel-split__media img {
    width:100%; height:520px; object-fit:cover; display:block;
    transition:transform 0.8s var(--ease);
}
.hotel-split__media:hover img { transform:scale(1.03); }
.hotel-split__content { flex:1; }
.hotel-split__eyebrow {
    font-family:var(--font-sans); font-size:12px; font-weight:400;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--navy);
    margin-bottom:20px;
}
.hotel-split__title {
    font-family:var(--font-serif); font-size:clamp(34px,4.5vw,60px);
    font-weight:300; line-height:1.2; color:var(--dark); margin-bottom:28px;
}
.hotel-split__text {
    font-family:var(--font-sans); font-size:17px; font-weight:200;
    line-height:1.85; color:var(--text-muted);
}

/* Full-width image */
.hotel-fullimg { padding:0 32px; max-width:1400px; margin:0 auto; }
.hotel-fullimg img {
    width:100%; height:600px; object-fit:cover; display:block;
}

/* 3 CTA cards */
.hotel-cards {
    display:flex; gap:15px; padding:0 32px; max-width:1400px; margin:0 auto;
}
.hotel-cards__item {
    flex:1; padding:60px 40px; text-align:center; text-decoration:none;
    border:1px solid var(--border); transition:all 0.4s ease;
}
.hotel-cards__item:hover { border-color:var(--dark); }
.hotel-cards__eyebrow {
    font-family:var(--font-sans); font-size:13px; font-weight:400;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted);
    margin-bottom:16px;
}
.hotel-cards__title {
    font-family:var(--font-serif); font-size:clamp(26px,3vw,40px);
    font-weight:300; color:var(--dark); line-height:1.25;
}

/* Facilities list — 4 columns */
.hotel-facilities-list {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:48px;
    padding:0 32px; max-width:1400px; margin:0 auto;
}
.hotel-facilities-list__col h3 {
    font-family:var(--font-serif); font-size:24px; font-weight:400;
    color:var(--dark); margin-bottom:24px;
}
.hotel-facilities-list__col ul { display:flex; flex-direction:column; gap:14px; }
.hotel-facilities-list__col li {
    font-family:var(--font-sans); font-size:16px; font-weight:200;
    color:var(--text-muted); line-height:1.6;
}

@media (max-width:1024px) {
    .hotel-split, .hotel-split--reverse { flex-direction:column; gap:40px; }
    .hotel-split__media img { height:380px; }
    .hotel-fullimg img { height:400px; }
    .hotel-cards { flex-direction:column; }
    .hotel-facilities-list { grid-template-columns:repeat(2, 1fr); gap:32px; }
}
@media (max-width:540px) {
    .hotel-split__media img { height:280px; }
    .hotel-fullimg img { height:260px; }
    .hotel-facilities-list { grid-template-columns:1fr; }
}
.hero__title { font-family:var(--font-serif); font-size:clamp(48px,7vw,80px); font-weight:300; line-height:1.15; margin-bottom:16px; }
.hero__subtitle { font-size:15px; font-weight:200; letter-spacing:0.04em; color:rgba(255,255,255,0.7); margin-bottom:8px; }
.hero__scroll-text { font-size:13px; font-weight:300; color:rgba(255,255,255,0.5); letter-spacing:0.04em; display:flex; align-items:center; gap:6px; cursor:pointer; }
.hero__scroll-text::after { display:none; }

/* Reveal animations */
.reveal-up { opacity:0; transform:translateY(30px); animation:revealUp 0.8s var(--ease-out) forwards; }
@keyframes revealUp { to { opacity:1; transform:translateY(0); } }

/* ============================================================
   ABOUT BANNER — large image with overlay text + numbered pagination
   ============================================================ */
.about-banner {
    position:relative; padding:0 32px;
    display:flex; flex-direction:column; align-items:center;
}
.about-banner__slider { position:relative; overflow:visible; }
.about-banner__track { position:relative; }
.about-banner__slide { position:relative; display:none; }
.about-banner__slide.is-active { display:block; }

/* Image — centered at 1650x748 */
.about-banner__slide { position:relative; }
.about-banner__img {
    width:1630px; max-width:100%; height:728px; object-fit:cover; display:block;
    margin:0 auto;
}

/* Text — half over image right edge, half over background, white layer */
.about-banner__content {
    position:absolute; top:50%; right:-80px; transform:translateY(-50%);
    width:480px; padding:48px 44px;
    z-index:2;
    background:rgba(255,255,255,0.92);
}
.about-banner__eyebrow {
    font-family:var(--font-sans); font-size:11px; font-weight:300;
    letter-spacing:0.06em; color:var(--dark); margin-bottom:16px;
    opacity:0.5;
}
.about-banner__title {
    font-family:var(--font-serif); font-size:clamp(40px,5.5vw,72px);
    font-weight:300; line-height:1.15; color:var(--dark);
    margin-bottom:28px;
}
.about-banner__link {
    font-family:var(--font-sans); font-size:14px; font-weight:200;
    color:var(--dark); border-bottom:1px solid rgba(0,0,0,0.2);
    display:inline-block; padding-bottom:3px;
    transition:border-color 0.3s ease;
}
.about-banner__link:hover { border-color:var(--dark); }

/* Numbered pagination */
.about-banner__numbers {
    display:flex; gap:28px; padding:16px 0 0;
    width:1630px; max-width:100%; margin:0 auto;
}
.about-banner__num {
    font-family:var(--font-sans); font-size:14px; font-weight:200;
    color:var(--text-muted); cursor:pointer; padding:4px 0;
    position:relative; transition:color 0.3s ease;
}
.about-banner__num.is-active { color:var(--dark); font-weight:400; }
.about-banner__num.is-active::after {
    content:''; position:absolute; bottom:0; left:0; width:100%;
    height:1px; background:var(--dark);
}
/* Slide transition for about banner */
.about-banner__slide { animation:slideFromLeft 0.6s var(--ease-out); }
@keyframes slideFromLeft { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }

@media (max-width:1024px) {
    .about-banner { padding:0 32px; }
    .about-banner__img { height:500px; }
    .about-banner__content { right:-40px; width:400px; padding:36px 32px; }
}
@media (max-width:540px) {
    .about-banner { padding:0 20px; }
    .about-banner__img { height:auto; aspect-ratio:4/3; }
    .about-banner__content { position:relative; width:100%; top:auto; right:auto; transform:none; padding:24px 0 0; }
}

/* ============================================================
   BOOKING WIDGET — hidden (no check-in/check-out)
   ============================================================ */
.booking-widget { display:none; }

/* ============================================================
   ROOMS HERO — image slider behind hero
   ============================================================ */
.rooms-hero .hero__video-wrap { position:absolute; top:0; left:0; width:100%; height:100%; }
.rooms-hero__slider { position:relative; width:100%; height:100%; }
.rooms-hero__slide {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-size:cover; background-position:center;
    opacity:0; transition:opacity 1s ease;
}
.rooms-hero__slide.is-active { opacity:1; }

/* ============================================================
   ROOMS BROWSER — left nav + right content
   ============================================================ */
.rooms-browser { background:var(--cream); }
.rooms-browser__divider {
    width:1px; height:60px; background:var(--border);
    margin:0 auto;
}
.rooms-browser__inner {
    display:grid; grid-template-columns:0.35fr 0.65fr;
    min-height:70vh; padding:0 32px;
}

/* Left nav — room names */
.rooms-browser__nav {
    display:flex; flex-direction:column; gap:8px;
    padding:60px 40px 60px 0;
    border-right:1px solid var(--border);
}
.rooms-browser__name {
    font-family:var(--font-serif); font-size:clamp(22px,2.5vw,34px); font-weight:300;
    color:var(--text-muted); background:none; border:none; cursor:pointer;
    text-align:left; padding:8px 0; transition:color 0.3s ease;
}
.rooms-browser__name:hover { color:var(--dark); }
.rooms-browser__name.is-active {
    color:var(--dark); font-weight:400;
}

/* Right content — room details */
.rooms-browser__details { padding:60px 0 60px 60px; }
.rooms-browser__room { display:none; }
.rooms-browser__room.is-active { display:block; animation:fadeSlide 0.4s ease; }

.rooms-browser__img-wrap {
    overflow:hidden; margin-bottom:32px; position:relative;
}
.rooms-browser__img-wrap::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:var(--cream); z-index:1;
    transform:translateX(100%);
}
.rooms-browser__room.is-revealing .rooms-browser__img-wrap::before {
    transform:translateX(0);
    animation:revealLeft 0.8s var(--ease-out) forwards;
}
.rooms-browser__img {
    width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
}

@keyframes revealLeft {
    from { transform:translateX(0); }
    to { transform:translateX(100%); }
}

.rooms-browser__info {
    display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-bottom:32px;
}
.rooms-browser__text {
    font-family:var(--font-sans); font-size:15px; font-weight:200;
    line-height:1.8; color:var(--text-muted);
}
.rooms-browser__amenities {
    display:flex; flex-direction:column; gap:12px;
    font-family:var(--font-sans); font-size:15px; font-weight:200; color:var(--dark);
}

.rooms-browser__actions {
    display:flex; gap:24px; align-items:center;
}
.rooms-browser__link {
    font-family:var(--font-sans); font-size:14px; font-weight:200;
    color:var(--dark); border-bottom:1px solid rgba(0,0,0,0.2);
    padding-bottom:3px; transition:border-color 0.3s ease;
}
.rooms-browser__link:hover { border-color:var(--dark); }
.rooms-browser__book {
    font-family:var(--font-sans); font-size:12px; font-weight:400;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--navy);
    padding:12px 24px; border:1px solid var(--navy);
    transition:all 0.3s ease;
}
.rooms-browser__book:hover { background:var(--navy); color:#fff; }

/* ============================================================
   ROOMS PAGE GALLERY — 1500x750 centered with numbers
   ============================================================ */
.rooms-page-gallery {
    max-width:1500px; margin:0 auto; padding:0 32px;
}
.rooms-page-gallery { position:relative; }
.rooms-page-gallery__slider { overflow:hidden; position:relative; height:750px; }
.rooms-page-gallery__track { position:relative; width:100%; height:100%; }
.rooms-page-gallery__slide {
    position:absolute; top:0; left:0; width:100%; height:100%;
    opacity:0; pointer-events:none;
    transition:opacity 0.5s ease;
}
.rooms-page-gallery__slide:first-child { opacity:1; pointer-events:auto; }
.rooms-page-gallery__slide.is-active { opacity:1; pointer-events:auto; z-index:1; }
.rooms-page-gallery__slide img {
    width:100%; height:100%; object-fit:cover; display:block;
}
/* Slide-in from left animation */
.rooms-page-gallery__slide.is-sliding {
    animation:gallerySlideIn 0.7s var(--ease-out) forwards;
}
@keyframes gallerySlideIn {
    from { opacity:0; transform:translateX(-60px); }
    to { opacity:1; transform:translateX(0); }
}
.rooms-page-gallery__numbers {
    display:flex; gap:28px; padding:16px 0 0; justify-content:flex-start;
}
.rooms-page-gallery__num {
    font-family:var(--font-sans); font-size:15px; font-weight:200;
    color:var(--text-muted); cursor:pointer; padding:4px 0;
    position:relative; transition:color 0.3s ease;
}
.rooms-page-gallery__num.is-active { color:var(--dark); font-weight:400; }
.rooms-page-gallery__num.is-active::after {
    content:''; position:absolute; bottom:0; left:0; width:100%;
    height:1px; background:var(--dark);
}

/* ============================================================
   ROOM DETAIL PAGE — name+text left | amenities right
   ============================================================ */
.room-detail { background:var(--cream); padding:80px 0; }
.room-detail__inner {
    display:grid; grid-template-columns:0.4fr 1px 1fr;
    gap:0; padding:0 32px; max-width:1400px; margin:0 auto;
}
.room-detail__left { padding:0 60px 0 0; }
.room-detail__name {
    font-family:var(--font-serif); font-size:clamp(32px,4vw,52px); font-weight:300;
    color:var(--dark); margin-bottom:28px; line-height:1.2;
}
.room-detail__text {
    font-family:var(--font-sans); font-size:15px; font-weight:200;
    line-height:1.85; color:var(--text-muted);
}
.room-detail__divider { background:var(--border); width:1px; }
.room-detail__right {
    display:grid; grid-template-columns:1fr 1fr; gap:60px;
    padding:0 0 0 60px; align-content:start;
}
.room-detail__amenities-col {
    display:flex; flex-direction:column; gap:20px;
}
.room-detail__amenity {
    font-family:var(--font-sans); font-size:17px; font-weight:200;
    color:var(--dark); display:block;
}

@media (max-width:1024px) {
    .room-detail__inner { grid-template-columns:1fr; gap:32px; }
    .room-detail__left { padding:0; }
    .room-detail__divider { display:none; }
    .room-detail__right { padding:0; gap:40px; }
}
@media (max-width:540px) {
    .room-detail__right { grid-template-columns:1fr; }
}

@media (max-width:1024px) {
    .rooms-browser__inner { grid-template-columns:1fr; }
    .rooms-browser__nav { flex-direction:row; flex-wrap:wrap; gap:12px; padding:32px 0; border-right:none; border-bottom:1px solid var(--border); }
    .rooms-browser__details { padding:32px 0; }
    .rooms-browser__info { grid-template-columns:1fr; gap:24px; }
    .rooms-page-gallery__slider { height:450px; }
    .rooms-page-gallery__slide img { height:450px; }
}
@media (max-width:540px) {
    .rooms-browser__name { font-size:20px; }
    .rooms-page-gallery__slider { height:300px; }
    .rooms-page-gallery__slide img { height:300px; }
}

/* Page hero link */
.page-hero__link { font-size:14px; font-weight:300; color:rgba(255,255,255,0.65); margin-top:12px; display:inline-block; transition:color var(--dur-fast) ease; }
.page-hero__link:hover { color:#fff; }

/* Section eyebrow + title */
.section__eyebrow { font-size:12px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--navy); margin-bottom:16px; width:100%; text-align:center; }
.section__title { font-family:var(--font-serif); font-size:clamp(30px,4vw,48px); font-weight:300; color:var(--dark); margin-bottom:48px; width:100%; text-align:center; }

/* ============================================================
   INTRO / GENERAL TEXT
   ============================================================ */
.intro { max-width:700px; margin:0 auto; text-align:center; }
.intro__eyebrow { font-size:12px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--navy); margin-bottom:20px; }
.intro__title { font-family:var(--font-serif); font-size:clamp(30px,4vw,48px); font-weight:300; line-height:1.35; color:var(--dark); margin-bottom:28px; }
.intro__title--italic { font-style:italic; }
.intro__text { font-size:17px; font-weight:200; line-height:1.85; color:var(--text-muted); margin-bottom:36px; }
.intro__text p { margin-bottom:14px; }

/* ============================================================
   MOTTO / DIVIDER SECTIONS
   ============================================================ */
.motto-section {
    text-align:center; padding:120px 32px; background:var(--cream);
}
.motto-section__title {
    font-family:var(--font-serif); font-size:clamp(32px,4.5vw,60px); font-weight:300;
    color:var(--dark); line-height:1.25; max-width:1000px; margin:0 auto;
}
.motto-section__link {
    display:inline-block; margin-top:32px;
    font-family:var(--font-sans); font-size:16px; font-weight:200; letter-spacing:0.02em; color:var(--text-muted);
    border-bottom:1px solid rgba(0,0,0,0.2); padding-bottom:4px;
    transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.motto-section__link:hover { color:var(--dark); border-color:var(--dark); }

/* Motto with circle image — text left, round image right */
.motto-circle {
    padding:120px 32px; background:var(--cream);
}
.motto-circle__inner {
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:60px;
}
.motto-circle__text { width:100%; max-width:1090px; flex-shrink:1; }
.motto-circle__title {
    font-family:var(--font-serif); font-size:clamp(28px,3.5vw,48px);
    font-weight:300; line-height:1.25; color:var(--dark);
    margin-bottom:24px;
}
.motto-circle__desc {
    font-family:var(--font-sans); font-size:15px; font-weight:200;
    line-height:1.8; color:var(--text-muted);
}

.motto-circle__img-wrap {
    width:690px; height:690px; flex-shrink:0;
    border-radius:50%; overflow:hidden;
}
.motto-circle__img {
    width:100%; height:100%; object-fit:cover;
}

@media (max-width:1024px) {
    .motto-circle__inner { gap:48px; }
    .motto-circle__img-wrap { width:400px; height:400px; }
}
@media (max-width:540px) {
    .motto-circle__inner { flex-direction:column; gap:40px; text-align:center; }
    .motto-circle__img-wrap { width:280px; height:280px; }
}

/* ============================================================
   ISLANDS — Delos & Mykonos dual cards
   ============================================================ */
.islands-section {
    padding:120px 0; background:var(--cream);
}
.islands-grid {
    display:flex; gap:15px; justify-content:center;
    padding:0 80px;
}
.islands-card {
    display:block; text-decoration:none; width:946px; flex-shrink:0;
}
.islands-card__img-wrap {
    position:relative; overflow:hidden; width:946px; height:811px;
}
/* Video fills the card */
.islands-card__video {
    position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
}
.islands-card__img { display:none; }

/* Name centered */
.islands-card__name {
    position:absolute; top:42%; left:50%; transform:translate(-50%,-50%);
    font-family:var(--font-serif); font-size:clamp(48px,6vw,88px); font-weight:600;
    color:#000; text-align:center; z-index:2;
    letter-spacing:0.02em;
}

/* Excerpt — inside, reveal on hover */
.islands-card__excerpt {
    position:absolute; top:56%; left:50%; transform:translate(-50%, 0);
    font-family:var(--font-sans); font-size:16px; font-weight:300;
    line-height:1.7; text-align:center; color:rgba(0,0,0,0.7);
    max-width:420px; z-index:2;
    opacity:0; transition:opacity 0.4s ease;
}
.islands-card:hover .islands-card__excerpt { opacity:1; }

/* ============================================================
   GUEST MOMENTS — heading + masonry gallery
   ============================================================ */
.guest-moments {
    padding:120px 0 0; background:var(--cream);
}
.guest-moments__text {
    text-align:center; padding:0 32px 80px; max-width:1000px; margin:0 auto;
}
.guest-moments__eyebrow {
    font-family:var(--font-sans); font-size:12px; font-weight:400;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--navy);
    margin-bottom:24px;
}
.guest-moments__title {
    font-family:var(--font-serif); font-size:clamp(32px,4.5vw,60px);
    font-weight:300; line-height:1.25; color:var(--dark); margin-bottom:32px;
}
.guest-moments__links {
    display:flex; align-items:center; justify-content:center; gap:16px;
    font-family:var(--font-serif); font-size:clamp(20px,2.5vw,32px); font-weight:300; color:var(--text-muted);
}
.guest-moments__links a {
    color:var(--dark); border-bottom:1px solid rgba(0,0,0,0.2); padding-bottom:2px;
    transition:border-color 0.3s ease;
}
.guest-moments__links a:hover { border-color:var(--dark); }
.guest-moments__links span { color:var(--text-muted); }

/* Masonry 4-column gallery */
.guest-moments__gallery { padding:0 32px; }
.guest-moments__masonry {
    column-count:4; column-gap:15px;
}
.guest-moments__item {
    break-inside:avoid; margin-bottom:15px; overflow:hidden;
}
.guest-moments__item img {
    width:100%; height:auto; display:block;
    transition:transform 0.6s var(--ease);
}
.guest-moments__item:hover img { transform:scale(1.04); }

@media (max-width:1024px) {
    .guest-moments__masonry { column-count:3; }
}
@media (max-width:540px) {
    .guest-moments__masonry { column-count:2; }
}

/* SVG Animations */
@keyframes rotateSlow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:0.15; } 50% { transform:scale(1.15); opacity:0.05; } }
@keyframes floatUp { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-20px); } }
@keyframes waveMove { 0% { transform:translateX(0); } 100% { transform:translateX(-240px); } }
@keyframes windDrift { 0% { transform:translateX(0); opacity:0.1; } 50% { transform:translateX(40px); opacity:0.2; } 100% { transform:translateX(0); opacity:0.1; } }

.anim-rotate-slow { animation:rotateSlow 40s linear infinite; transform-origin:center; }
.anim-pulse { animation:pulse 4s ease-in-out infinite; transform-origin:center; }
.anim-pulse-delay { animation:pulse 4s ease-in-out 1.5s infinite; transform-origin:center; }
.anim-float { animation:floatUp 6s ease-in-out infinite; }
.anim-float-delay { animation:floatUp 6s ease-in-out 2s infinite; }
.anim-wave { animation:waveMove 8s linear infinite; }
.anim-wave-delay { animation:waveMove 8s linear 2s infinite; }
.anim-wind { animation:windDrift 5s ease-in-out infinite; }
.anim-wind-delay { animation:windDrift 5s ease-in-out 1.5s infinite; }

@media (max-width:1024px) {
    .islands-grid { padding:0 32px; }
    .islands-card { width:auto; flex:1; }
    .islands-card__img-wrap { width:100%; height:auto; aspect-ratio:946/811; }
}
@media (max-width:540px) {
    .islands-grid { flex-direction:column; padding:0 32px; }
    .islands-card__img-wrap { aspect-ratio:4/3; }
}

/* ============================================================
   ROOMS HORIZONTAL CAROUSEL
   ============================================================ */
/* Room types — horizontal scrollable row, drag to see more */
.room-types-grid {
    display:flex; gap:15px; padding:0 32px;
    overflow-x:auto; cursor:grab;
    -ms-overflow-style:none; scrollbar-width:none;
}
.room-types-grid::-webkit-scrollbar { display:none; }
.room-types-grid:active { cursor:grabbing; }

.room-type {
    display:block; position:relative; overflow:hidden; text-decoration:none;
    width:625px; min-width:625px; flex-shrink:0;
}

/* Image wrapper — 625x812 */
.room-type__img-wrap {
    position:relative; overflow:hidden; width:625px; height:812px;
}
.room-type__img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.7s var(--ease);
}
.room-type:hover .room-type__img { transform:scale(1.04); }

/* Room name — centered on the image */
.room-type__name {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:var(--font-serif); font-size:clamp(28px,3vw,42px); font-weight:300;
    color:#fff; text-align:center; white-space:nowrap;
    text-shadow:0 2px 20px rgba(0,0,0,0.15);
    z-index:2; pointer-events:none;
}

/* Excerpt — hidden by default, revealed on hover below the name */
.room-type__excerpt {
    position:absolute; top:50%; left:0; width:100%; z-index:2;
    padding:52px 32px 0; text-align:center;
    transform:translate(0, 0);
    opacity:0; transition:opacity 0.4s var(--ease);
    pointer-events:none;
}
.room-type__excerpt p {
    font-family:var(--font-sans); font-size:13px; font-weight:200;
    color:rgba(255,255,255,0.8); line-height:1.7;
    max-width:320px; margin:0 auto;
}
.room-type:hover .room-type__excerpt { opacity:1; }

/* Subtle dark overlay on hover to make text readable */
.room-type__img-wrap::after {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:rgba(20,20,40,0); transition:background 0.4s ease;
    z-index:1;
}
.room-type:hover .room-type__img-wrap::after {
    background:rgba(20,20,40,0.25);
}

/* View all rooms link — centered under arrows */
.room-types-viewall {
    display:flex; justify-content:center; padding:24px 32px 0;
}

/* Arrows — centered, minimal */
.room-types-nav {
    display:flex; gap:32px; justify-content:center; padding:28px 32px 0;
}
.room-types-nav__btn {
    width:auto; height:auto; border:none; background:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:opacity 0.3s ease; color:var(--text-muted); opacity:0.4;
}
.room-types-nav__btn:hover { opacity:1; }
.room-types-nav__btn svg { width:56px; height:56px; stroke:currentColor; stroke-width:0.8; fill:none; }

/* ============================================================
   ROOM CARDS — overview grid (legacy /rooms/ style)
   ============================================================ */
.rooms-overview-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
    max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding);
}
.room-card-link {
    display:block; position:relative; overflow:hidden; aspect-ratio:3/4; cursor:pointer;
}
.room-card-link__img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.7s var(--ease);
}
.room-card-link:hover .room-card-link__img { transform:scale(1.04); }
.room-card-link__overlay {
    position:absolute; bottom:0; left:0; width:100%; padding:40px 28px;
    background:linear-gradient(to top, rgba(20,20,40,0.6) 0%, transparent 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    transition:opacity var(--dur-fast) ease;
}
.room-card-link__name {
    font-family:var(--font-serif); font-size:clamp(24px,2.5vw,34px); font-weight:300;
    color:#fff; line-height:1.2;
}
.room-card-link__view {
    font-size:13px; font-weight:300; letter-spacing:0.06em; color:rgba(255,255,255,0.7);
    margin-top:8px; opacity:0; transform:translateY(8px);
    transition:all var(--dur-fast) ease;
}
.room-card-link:hover .room-card-link__view { opacity:1; transform:translateY(0); }

/* ============================================================
   EXPLORE GRID — 2-column large images with overlay
   ============================================================ */
.explore-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
    max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding);
}
.explore-card {
    position:relative; overflow:hidden; aspect-ratio:3/4; cursor:pointer;
}
.explore-card__img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.7s var(--ease);
}
.explore-card:hover .explore-card__img { transform:scale(1.04); }
.explore-card__overlay {
    position:absolute; bottom:0; left:0; width:100%; padding:40px 32px;
    background:linear-gradient(to top, rgba(20,20,40,0.55) 0%, transparent 100%);
}
.explore-card__title {
    font-family:var(--font-serif); font-size:clamp(24px,3vw,36px); font-weight:300;
    color:#fff; line-height:1.25; margin-bottom:8px;
}
.explore-card__link {
    font-size:13px; font-weight:300; letter-spacing:0.06em; color:rgba(255,255,255,0.7);
    border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:2px;
    transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.explore-card__link:hover { color:#fff; border-color:#fff; }

/* ============================================================
   PROMOTIONS GRID — 3-column promo cards
   ============================================================ */
.promo-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
    max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding);
}
.promo-card {
    position:relative; overflow:hidden; aspect-ratio:3/4; cursor:pointer;
}
.promo-card__img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.7s var(--ease);
}
.promo-card:hover .promo-card__img { transform:scale(1.04); }
.promo-card__overlay {
    position:absolute; top:0; left:0; width:100%; height:100%; padding:32px 28px;
    background:linear-gradient(to bottom, rgba(20,20,40,0.4) 0%, transparent 50%);
    display:flex; flex-direction:column; justify-content:flex-start;
}
.promo-card__title {
    font-family:var(--font-serif); font-size:clamp(22px,2.5vw,30px); font-weight:300;
    color:#fff; line-height:1.25; margin-bottom:6px;
}
.promo-card__subtitle {
    font-size:13px; font-weight:200; color:rgba(255,255,255,0.7);
}

/* ============================================================
   PROMO OFFERS — 3 columns, same size as room cards
   ============================================================ */
.promo-offers {
    display:flex; gap:15px; justify-content:center;
    max-width:calc(625px * 3 + 15px * 2 + 64px); margin:0 auto; padding:0 32px;
}
.promo-offer {
    display:block; flex:1; text-decoration:none; position:relative;
}
.promo-offer__img-wrap {
    position:relative; overflow:hidden; aspect-ratio:2/3; max-height:812px;
}
.promo-offer__img {
    width:100%; height:100%; object-fit:cover;
    transition:transform 0.7s var(--ease);
}
.promo-offer:hover .promo-offer__img { transform:scale(1.04); }

/* Offer name — centered on image, white bold */
.promo-offer__name {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-family:var(--font-serif); font-size:clamp(28px,3vw,42px); font-weight:700;
    color:#fff; text-align:center; z-index:2;
    text-shadow:0 2px 24px rgba(0,0,0,0.25);
    transition:opacity 0.4s ease;
}
.promo-offer:hover .promo-offer__name { opacity:0; }

/* Hover overlay — white mask with parallelogram frame */
.promo-offer__hover {
    position:absolute; top:0; left:0; width:100%; height:100%; z-index:3;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.92);
    opacity:0; transition:opacity 0.4s ease;
}
.promo-offer:hover .promo-offer__hover { opacity:1; }

/* Parallelogram frame */
.promo-offer__frame {
    text-align:center; padding:40px 36px; max-width:380px;
    position:relative;
}
.promo-offer__frame::before {
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%) skewX(-4deg);
    width:calc(100% - 20px); height:100%;
    border:1.5px solid var(--navy); z-index:-1;
}
.promo-offer__frame-title {
    font-family:var(--font-serif); font-size:clamp(22px,2.5vw,32px); font-weight:600;
    color:var(--navy); margin-bottom:20px; line-height:1.2;
}
.promo-offer__frame-text {
    font-family:var(--font-sans); font-size:14px; font-weight:200;
    color:var(--text); line-height:1.75; margin-bottom:24px;
}
.promo-offer__frame-btn {
    display:inline-block; font-family:var(--font-sans); font-size:12px; font-weight:400;
    letter-spacing:0.12em; text-transform:uppercase; color:var(--navy);
    padding:12px 28px; border:1px solid var(--navy);
    transition:all 0.3s ease;
}
.promo-offer__frame-btn:hover { background:var(--navy); color:#fff; }

@media (max-width:1024px) {
    .promo-offers { flex-direction:column; gap:24px; }
    .promo-offer__img-wrap { max-height:500px; }
}

/* ============================================================
   MASONRY GALLERY — social/guest photos
   ============================================================ */
.masonry-gallery {
    column-count:4; column-gap:8px;
    max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding);
}
.masonry-gallery__item {
    break-inside:avoid; margin-bottom:8px; overflow:hidden; cursor:pointer;
}
.masonry-gallery__item img {
    width:100%; display:block;
    transition:transform 0.6s var(--ease);
}
.masonry-gallery__item:hover img { transform:scale(1.04); }

/* ============================================================
   INDIVIDUAL ROOM PAGE — /room/premier/ style
   ============================================================ */
/* Room hero: large title on image */
.room-hero {
    position:relative; height:75vh; min-height:480px;
    display:flex; align-items:flex-end; overflow:hidden;
    background-size:cover; background-position:center;
}
.room-hero__overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(20,20,40,0.15) 0%, rgba(20,20,40,0.5) 100%); }
.room-hero__content { position:relative; z-index:2; padding:0 var(--container-padding) 60px; max-width:var(--container-width); margin:0 auto; width:100%; color:#fff; }
.room-hero__title { font-family:var(--font-serif); font-size:clamp(42px,5.5vw,72px); font-weight:300; line-height:1.15; margin-bottom:16px; }
.room-hero__book-link { font-size:14px; font-weight:300; color:rgba(255,255,255,0.7); display:flex; align-items:center; gap:6px; }
.room-hero__book-link::after { content:'\2193'; }

/* Room details: 3-column layout */
.room-details { max-width:var(--container-width); margin:0 auto; padding:60px var(--container-padding); display:grid; grid-template-columns:1fr 1px 1fr 1fr; gap:0; }
.room-details__desc { padding-right:48px; }
.room-details__desc-title { font-family:var(--font-serif); font-size:32px; font-weight:300; font-style:italic; color:var(--dark); margin-bottom:20px; line-height:1.3; }
.room-details__desc-text { font-size:17px; font-weight:200; line-height:1.85; color:var(--text-muted); }
.room-details__divider { background:var(--border); width:1px; }
.room-details__amenities { padding-left:48px; display:flex; flex-direction:column; gap:20px; }
.room-details__amenity { font-size:17px; font-weight:200; color:var(--dark); display:flex; align-items:center; gap:12px; }
.room-details__amenity-icon { width:20px; height:20px; flex-shrink:0; opacity:0.5; }

/* Room gallery slider */
.room-gallery { position:relative; max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding); }
.room-gallery__slider { position:relative; overflow:hidden; }
.room-gallery__track { display:flex; transition:transform 0.5s var(--ease); }
.room-gallery__slide { min-width:100%; }
.room-gallery__slide img { width:100%; aspect-ratio:16/9; object-fit:cover; }
/* Numbered pagination under gallery */
.room-gallery__numbers { display:flex; gap:24px; padding-top:16px; }
.room-gallery__num {
    font-size:15px; font-weight:200; color:var(--text-muted); cursor:pointer;
    padding:4px 0; transition:color var(--dur-fast) ease;
    position:relative;
}
.room-gallery__num.is-active { color:var(--dark); font-weight:400; }
.room-gallery__num.is-active::after {
    content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:var(--dark);
}

/* ============================================================
   SPLIT SECTIONS (pool, breakfast, etc.)
   ============================================================ */
.split { display:flex; align-items:center; max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding); gap:80px; }
.split--reverse { flex-direction:row-reverse; }
.split__media { flex:1; overflow:hidden; }
.split__media img { width:100%; height:500px; object-fit:cover; transition:transform 0.8s var(--ease); }
.split__media:hover img { transform:scale(1.03); }
.split__content { flex:1; }
.split__eyebrow { font-size:12px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--navy); margin-bottom:16px; }
.split__title { font-family:var(--font-serif); font-size:clamp(30px,3.5vw,44px); font-weight:300; line-height:1.25; color:var(--dark); margin-bottom:20px; }
.split__text { font-size:16px; font-weight:200; line-height:1.85; color:var(--text-muted); }

/* ============================================================
   PARALLAX BANNER
   ============================================================ */
.parallax-banner { position:relative; height:65vh; min-height:380px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.parallax-banner__bg { position:absolute; top:-20%; left:0; width:100%; height:140%; background-size:cover; background-position:center; will-change:transform; }
.parallax-banner__overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(20,20,40,0.5); }
.parallax-banner__content { position:relative; z-index:2; color:#fff; padding:0 var(--container-padding); max-width:700px; }
.parallax-banner__eyebrow { font-size:12px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:16px; }
.parallax-banner__title { font-family:var(--font-serif); font-size:clamp(30px,4.5vw,50px); font-weight:300; line-height:1.3; margin-bottom:16px; }
.parallax-banner__text { font-size:16px; font-weight:200; line-height:1.7; color:rgba(255,255,255,0.65); }

/* ============================================================
   FACILITIES — minimal line icons (SVG inline)
   ============================================================ */
.facilities { width:100%; text-align:center; }
.facilities__eyebrow { font-size:12px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--navy); margin-bottom:16px; }
.facilities__title { font-family:var(--font-serif); font-size:clamp(30px,4vw,48px); font-weight:300; color:var(--dark); margin-bottom:56px; }
.facilities__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:48px 40px; text-align:center; }
.facilities__item { padding:24px 16px; }
.facilities__icon { margin:0 auto 16px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.facilities__icon svg { width:28px; height:28px; stroke:var(--dark); stroke-width:1.2; fill:none; opacity:0.55; }
.facilities__item h3 { font-family:var(--font-serif); font-size:20px; font-weight:400; margin-bottom:10px; color:var(--dark); }
.facilities__item p { font-size:15px; font-weight:200; color:var(--text-muted); line-height:1.6; }

/* ============================================================
   REVIEWS SLIDER
   ============================================================ */
.reviews { width:100%; max-width:700px; margin:0 auto; text-align:center; }
.reviews__eyebrow { font-size:12px; font-weight:400; letter-spacing:0.25em; text-transform:uppercase; color:var(--navy); margin-bottom:16px; }
.reviews__title { font-family:var(--font-serif); font-size:clamp(30px,4vw,48px); font-weight:300; color:var(--dark); margin-bottom:48px; }
.reviews__slide { display:none; padding:0 20px; }
.reviews__slide.is-active { display:block; animation:fadeSlide 0.5s ease; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.reviews__quote { font-family:var(--font-serif); font-size:clamp(20px,2.5vw,28px); font-weight:300; font-style:italic; line-height:1.65; color:var(--dark); margin-bottom:20px; }
.reviews__author { font-size:13px; font-weight:300; color:var(--text-muted); }
.reviews__dots { display:flex; justify-content:center; gap:10px; margin-top:28px; }
.reviews__dot { width:7px; height:7px; border-radius:50%; background:var(--border); border:none; cursor:pointer; transition:all var(--dur-fast) ease; padding:0; }
.reviews__dot.is-active { background:var(--navy); transform:scale(1.3); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner { position:relative; height:55vh; min-height:360px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.cta-banner__bg { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; }
.cta-banner__overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(20,20,40,0.5); }
.cta-banner__content { position:relative; z-index:2; color:#fff; padding:0 var(--container-padding); }
.cta-banner__title { font-family:var(--font-serif); font-size:clamp(30px,4.5vw,50px); font-weight:300; line-height:1.3; margin-bottom:14px; }
.cta-banner__text { font-size:16px; font-weight:200; color:rgba(255,255,255,0.65); margin-bottom:28px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display:inline-block; font-size:12px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; padding:14px 32px; border:1px solid; transition:all var(--dur-fast) ease; cursor:pointer; }
.btn--dark { color:var(--dark); border-color:rgba(0,0,0,0.2); }
.btn--dark:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--navy { color:#fff; background:var(--navy); border-color:var(--navy); }
.btn--navy:hover { background:var(--navy-dark); }
.btn--light { color:#fff; border-color:rgba(255,255,255,0.3); }
.btn--light:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.6); }
.btn--lg { padding:18px 44px; font-size:13px; }

/* ============================================================
   GALLERY PAGE — masonry layout with filter buttons
   ============================================================ */
.gallery-filters { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.gallery-filter-btn {
    font-size:13px; font-weight:300; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-muted); padding:6px 2px; border:none; background:none; cursor:pointer;
    position:relative; transition:color var(--dur-fast) ease;
}
.gallery-filter-btn.is-active { color:var(--dark); font-weight:400; }
.gallery-filter-btn.is-active::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:var(--dark); }
.gallery-filter-btn:hover { color:var(--dark); }

.gallery-grid {
    column-count:4; column-gap:8px;
    padding:0 var(--container-padding);
    max-width:var(--container-width); margin:0 auto;
}
.gallery-grid__item {
    break-inside:avoid; margin-bottom:8px; overflow:hidden; cursor:pointer;
}
.gallery-grid__item img { width:100%; display:block; transition:transform 0.6s var(--ease); }
.gallery-grid__item:hover img { transform:scale(1.05); }
.gallery-grid__item[data-category] { }
.gallery-grid__item.is-hidden { display:none; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox { position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.92); z-index:99999; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease; }
.lightbox.is-active { opacity:1; visibility:visible; }
.lightbox__img { max-width:90vw; max-height:85vh; object-fit:contain; }
.lightbox__close { position:absolute; top:24px; right:24px; width:36px; height:36px; cursor:pointer; }
.lightbox__close::before, .lightbox__close::after { content:''; position:absolute; width:22px; height:1px; background:rgba(255,255,255,0.7); top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); }
.lightbox__close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); font-size:28px; cursor:pointer; user-select:none; transition:color var(--dur-fast) ease; }
.lightbox__nav:hover { color:#fff; }
.lightbox__nav--prev { left:20px; }
.lightbox__nav--next { right:20px; }

/* ============================================================
   PAGE HERO (sub-pages)
   ============================================================ */
.page-hero { position:relative; height:55vh; min-height:360px; display:flex; align-items:flex-end; overflow:hidden; background-size:cover; background-position:center; }
.page-hero__overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(20,20,40,0.2) 0%, rgba(20,20,40,0.5) 100%); }
.page-hero__content { position:relative; z-index:2; color:#fff; padding:0 var(--container-padding) 60px; max-width:var(--container-width); margin:0 auto; width:100%; }
.page-hero__eyebrow { font-size:12px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:12px; }
.page-hero__title { font-family:var(--font-serif); font-size:clamp(40px,5.5vw,66px); font-weight:300; line-height:1.15; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding); }
.contact-info__title { font-family:var(--font-serif); font-size:34px; font-weight:300; color:var(--dark); margin-bottom:28px; }
.contact-info__block { margin-bottom:24px; }
.contact-info__label { font-size:11px; font-weight:400; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.contact-info__text { font-size:16px; font-weight:200; line-height:1.7; color:var(--text); }
.contact-info__text a { border-bottom:1px solid var(--border); transition:border-color var(--dur-fast) ease; }
.contact-info__text a:hover { border-color:var(--dark); }

.contact-form__group { margin-bottom:24px; }
.contact-form__label { display:block; font-size:11px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.contact-form__input, .contact-form__textarea { width:100%; padding:12px 0; border:none; border-bottom:1px solid var(--border); background:transparent; font-size:16px; font-weight:200; color:var(--text); outline:none; transition:border-color var(--dur-fast) ease; }
.contact-form__input:focus, .contact-form__textarea:focus { border-color:var(--navy); }
.contact-form__textarea { resize:vertical; min-height:100px; }
.contact-form__submit { display:inline-block; font-size:12px; font-weight:400; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--navy); padding:14px 36px; border:none; cursor:pointer; transition:background var(--dur-fast) ease; }
.contact-form__submit:hover { background:var(--navy-dark); }

.contact-map { width:100%; height:380px; filter:grayscale(0.2); }
.contact-map iframe { width:100%; height:100%; border:none; }

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item__question {
    width:100%; padding:24px 0; display:flex; justify-content:space-between; align-items:center;
    font-family:var(--font-serif); font-size:20px; font-weight:400; color:var(--dark);
    background:none; border:none; cursor:pointer; text-align:left; transition:color var(--dur-fast) ease;
}
.faq-item__question:hover { color:var(--navy); }
.faq-item__icon { font-size:20px; color:var(--text-muted); transition:transform var(--dur-fast) ease; flex-shrink:0; margin-left:16px; }
.faq-item.is-open .faq-item__icon { transform:rotate(45deg); }
.faq-item__answer { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease); }
.faq-item.is-open .faq-item__answer { max-height:500px; }
.faq-item__answer-inner { padding:0 0 24px; font-size:16px; font-weight:200; line-height:1.85; color:var(--text-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--navy-dark); color:rgba(255,255,255,0.55); padding:72px 0 0; }
.footer__inner { max-width:var(--container-width); margin:0 auto; padding:0 var(--container-padding); display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; }
.footer__col--brand { text-align:center; }
.footer__logo { height:100px; width:auto; margin:0 auto 12px; display:block; opacity:0.6; filter:brightness(10); }
.footer__tagline { font-size:13px; font-weight:200; font-style:italic; color:rgba(255,255,255,0.35); text-align:center; margin-bottom:24px; }

/* Weather + time widget */
.footer__weather {
    display:flex; align-items:center; gap:14px; justify-content:center;
}
.footer__weather-icon svg { width:22px; height:22px; stroke:rgba(255,255,255,0.5); stroke-width:1.5; fill:none; }
.footer__weather-temp {
    font-family:var(--font-sans); font-size:20px; font-weight:200; color:rgba(255,255,255,0.65);
}
.footer__weather-desc {
    font-family:var(--font-sans); font-size:10px; font-weight:200; color:rgba(255,255,255,0.3);
    text-transform:uppercase; letter-spacing:0.06em;
}
.footer__weather-sep {
    width:1px; height:28px; background:rgba(255,255,255,0.1);
}
.footer__weather-time {
    font-family:var(--font-sans); font-size:18px; font-weight:200; color:rgba(255,255,255,0.55);
}
.footer__weather-label {
    font-family:var(--font-sans); font-size:10px; font-weight:200; color:rgba(255,255,255,0.3);
    text-transform:uppercase; letter-spacing:0.06em;
}
.footer__heading { font-size:11px; font-weight:400; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:16px; }
.footer__col p { font-size:14px; font-weight:200; line-height:1.7; margin-bottom:6px; }
.footer__col a { transition:color var(--dur-fast) ease; }
.footer__col a:hover { color:#fff; }
.footer__nav { display:flex; flex-direction:column; gap:8px; }
.footer__nav a { font-size:14px; font-weight:200; }
.footer__socials { display:flex; flex-direction:column; gap:8px; }
.footer__socials a { font-size:14px; font-weight:200; }
.footer__bottom { max-width:var(--container-width); margin:48px auto 0; padding:16px var(--container-padding); border-top:1px solid rgba(255,255,255,0.06); text-align:center; }
.footer__bottom p { font-size:12px; font-weight:200; color:rgba(255,255,255,0.25); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.scroll-reveal { opacity:0; transform:translateY(35px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.scroll-reveal.is-visible { opacity:1; transform:translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
    :root { --section-padding:88px; --container-padding:24px; }
    .header__brand-text { display:none; }
    .header__arrow { display:none; }
    .header__lang { display:none; }
    .rooms-overview-grid { grid-template-columns:repeat(2, 1fr); }
    .room-type { width:45vw; min-width:45vw; }
    .room-type__img-wrap { width:100%; height:58vw; }
    .explore-grid { grid-template-columns:1fr; }
    .promo-grid { grid-template-columns:repeat(2, 1fr); }
    .masonry-gallery { column-count:3; }
    .gallery-grid { column-count:3; }
    .split, .split--reverse { flex-direction:column; gap:48px; }
    .split__media img { height:360px; }
    .facilities__grid { grid-template-columns:repeat(2, 1fr); gap:32px; }
    .room-details { grid-template-columns:1fr; gap:32px; }
    .room-details__divider { display:none; }
    .room-details__amenities { padding-left:0; }
    .footer__inner { grid-template-columns:1fr 1fr; gap:36px; }
    .contact-grid { grid-template-columns:1fr; gap:48px; }

    /* Fullscreen menu: stack vertically on tablet */
    .mobile-menu__inner { grid-template-columns:1fr; gap:32px; padding-top:80px; align-content:start; overflow-y:auto; }
    .mobile-menu__preview { display:none; }
}

@media (max-width:540px) {
    :root { --section-padding:56px; --header-height:60px; --container-padding:20px; }
    .header__logo-img--white { height:80px; }
    .header__logo-img--blue { height:50px; }
    .header__book-btn { display:none; }
    .rooms-overview-grid { grid-template-columns:1fr; }
    .room-type { width:80vw; min-width:80vw; }
    .room-type__img-wrap { width:100%; height:100vw; }
    .explore-grid { grid-template-columns:1fr; }
    .promo-grid { grid-template-columns:1fr; }
    .masonry-gallery { column-count:2; }
    .gallery-grid { column-count:2; }
    .split__media img { height:260px; }
    .facilities__grid { grid-template-columns:1fr; gap:20px; }
    .footer__inner { grid-template-columns:1fr; gap:28px; }
    .room-gallery__numbers { gap:16px; }
    .motto-section { padding:60px var(--container-padding); }

    /* Fullscreen menu: single column vertical */
    .mobile-menu__inner { grid-template-columns:1fr; gap:24px; padding:80px 24px 32px; }
    .mobile-menu__preview { display:none; }
    .mobile-menu__secondary { gap:20px; }
}

/* ============================================================
   GDPR COOKIE BANNER
   ============================================================ */
.cookie-banner {
    position:fixed; bottom:0; left:0; width:100%; z-index:99990;
    background:var(--navy-dark); color:rgba(255,255,255,0.8);
    transform:translateY(100%); transition:transform 0.5s var(--ease-out);
}
.cookie-banner.is-visible { transform:translateY(0); }
.cookie-banner__inner {
    max-width:1400px; margin:0 auto; padding:24px 32px;
    display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.cookie-banner__text {
    font-family:var(--font-sans); font-size:13px; font-weight:200;
    line-height:1.7; flex:1;
}
.cookie-banner__text a {
    color:#fff; border-bottom:1px solid rgba(255,255,255,0.3);
    transition:border-color 0.3s ease;
}
.cookie-banner__text a:hover { border-color:#fff; }
.cookie-banner__actions { display:flex; gap:12px; flex-shrink:0; }
.cookie-banner__btn {
    font-family:var(--font-sans); font-size:11px; font-weight:400;
    letter-spacing:0.1em; text-transform:uppercase; padding:12px 24px;
    border:none; cursor:pointer; transition:all 0.3s ease;
}
.cookie-banner__btn--accept {
    background:#fff; color:var(--navy-dark);
}
.cookie-banner__btn--accept:hover { background:rgba(255,255,255,0.85); }
.cookie-banner__btn--decline {
    background:transparent; color:rgba(255,255,255,0.6);
    border:1px solid rgba(255,255,255,0.2);
}
.cookie-banner__btn--decline:hover { border-color:rgba(255,255,255,0.5); color:#fff; }

@media (max-width:540px) {
    .cookie-banner__inner { flex-direction:column; gap:16px; text-align:center; }
    .cookie-banner__actions { width:100%; }
    .cookie-banner__btn { flex:1; }
}

/* ============================================================
   ACCESSIBILITY BUTTON — bottom left
   ============================================================ */
.a11y-btn {
    position:fixed; bottom:24px; left:24px; z-index:99980;
    width:44px; height:44px; border-radius:50%;
    background:var(--navy); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 12px rgba(0,0,0,0.15);
    transition:all 0.3s ease;
}
.a11y-btn:hover { background:var(--navy-light); transform:scale(1.08); }
.a11y-btn svg { width:22px; height:22px; stroke:#fff; stroke-width:1.5; fill:none; }

/* A11y panel */
.a11y-panel {
    position:fixed; bottom:80px; left:24px; z-index:99981;
    background:#fff; border:1px solid var(--border);
    box-shadow:0 8px 32px rgba(0,0,0,0.12);
    padding:28px 24px; width:280px;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:all 0.3s ease;
}
.a11y-panel.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.a11y-panel__title {
    font-family:var(--font-sans); font-size:13px; font-weight:400;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--dark);
    margin-bottom:20px;
}
.a11y-panel__option {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0; border-bottom:1px solid var(--border);
    font-family:var(--font-sans); font-size:14px; font-weight:200; color:var(--text);
}
.a11y-panel__option:last-child { border-bottom:none; }
.a11y-panel__toggle {
    width:40px; height:22px; background:rgba(0,0,0,0.1);
    border-radius:11px; border:none; cursor:pointer;
    position:relative; transition:background 0.3s ease;
}
.a11y-panel__toggle::after {
    content:''; position:absolute; top:2px; left:2px;
    width:18px; height:18px; border-radius:50%; background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:transform 0.3s ease;
}
.a11y-panel__toggle.is-on { background:var(--navy); }
.a11y-panel__toggle.is-on::after { transform:translateX(18px); }

@media (max-width:540px) {
    .a11y-btn { bottom:16px; left:16px; width:38px; height:38px; }
    .a11y-panel { left:16px; bottom:66px; width:calc(100vw - 32px); }
}

/* Accessibility mode body classes — apply to main content wrapper, not body */
body.a11y-high-contrast .header,
body.a11y-high-contrast main,
body.a11y-high-contrast .footer,
body.a11y-high-contrast .review-bar,
body.a11y-high-contrast .mobile-menu,
body.a11y-high-contrast .cookie-banner { filter:contrast(1.4); }

body.a11y-large-text { font-size:20px !important; }
body.a11y-large-text .hero__title { font-size:clamp(52px,8vw,90px) !important; }
body.a11y-large-text .motto-section__title { font-size:clamp(36px,5vw,68px) !important; }

body.a11y-grayscale .header,
body.a11y-grayscale main,
body.a11y-grayscale .footer,
body.a11y-grayscale .review-bar,
body.a11y-grayscale .mobile-menu,
body.a11y-grayscale .cookie-banner { filter:grayscale(1); }

body.a11y-underline-links a { text-decoration:underline !important; }

/* Keep a11y button and panel always visible */
.a11y-btn, .a11y-panel { filter:none !important; }

/* Skip to content — accessibility */
.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;
}
.sr-only--focusable:focus {
    position:fixed; top:8px; left:8px; z-index:999999;
    width:auto; height:auto; padding:12px 24px; margin:0;
    overflow:visible; clip:auto; white-space:normal;
    background:var(--navy); color:#fff; font-family:var(--font-sans);
    font-size:14px; font-weight:400; letter-spacing:0.05em;
    text-decoration:none;
}