/* ==========================================================================
   Sun & Sand Twin Beach Resort
   Design system — deep sea, warm teak, island light.
   No external fonts or images: everything ships with the site.
   ========================================================================== */

:root {
    /* Core palette, pulled from the resort's own photography */
    --ink: #062330;
    --deep: #0d3a4e;
    --teal: #17738a;
    --aqua: #45b3ac;
    --aqua-soft: #d9efec;
    --sand: #e3d5bd;
    --sand-soft: #f4ecdf;
    --cream: #fcfaf6;
    --gold: #b8974f;
    --line: #e2dbd0;

    --text: #123141;
    --muted: #5f7a87;
    --faint: #8ba0aa;

    --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --shell: 1240px;
    --gutter: 24px;
    --radius: 4px;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Suite story — a completely new room-detail composition. */
body.suite-page {
    background: #f5f0e7;
    color: #173632;
}

.suite-page .masthead,
.suite-page .masthead.is-stuck {
    border-bottom: 1px solid rgba(23, 54, 50, .12);
    background: rgba(248, 244, 236, .96);
}

.suite-main { overflow: hidden; }

.suite-label,
.suite-kicker span {
    display: block;
    color: #a66f47;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.suite-label--light { color: #deb98f; }

.suite-hero {
    padding: 144px 0 104px;
    background: #f5f0e7;
}

.suite-hero__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 62px;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(23, 54, 50, .17);
    color: #6f7771;
    font-size: .61rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.suite-hero__topline a { color: #173632; }
.suite-hero__topline a:hover { color: #a66f47; }

.suite-hero__grid {
    display: grid;
    grid-template-columns: minmax(340px, .76fr) minmax(0, 1.24fr);
    align-items: center;
    gap: clamp(55px, 7vw, 110px);
}

.suite-hero__copy { max-width: 525px; }

.suite-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}

.suite-kicker::after {
    order: 2;
    width: 55px;
    height: 1px;
    margin-left: auto;
    background: rgba(166, 111, 71, .52);
    content: '';
}

.suite-kicker b {
    order: 3;
    color: #a66f47;
    font-family: var(--at-serif, Georgia, serif);
    font-size: .78rem;
    font-weight: 400;
    font-style: italic;
}

.suite-hero h1 {
    max-width: 8.5ch;
    margin: 0;
    color: #173632;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(3.8rem, 5.8vw, 6.25rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .92;
}

.suite-hero__copy > p {
    max-width: 445px;
    margin: 30px 0 0;
    color: #65716c;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.08rem;
    line-height: 1.72;
}

.suite-hero__rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px;
    margin-top: 47px;
    padding-top: 25px;
    border-top: 1px solid rgba(23, 54, 50, .19);
}

.suite-hero__rate small,
.suite-hero__rate span {
    display: block;
    color: #87867f;
    font-size: .56rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.suite-hero__rate strong {
    display: block;
    margin: 7px 0 4px;
    color: #173632;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.65rem;
    font-weight: 400;
}

.suite-hero__rate > a {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 22px;
    background: #173632;
    color: #fff;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.suite-hero__rate > a:hover { background: #a66f47; color: #fff; }

.suite-hero__pictures {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31%;
    align-items: end;
    gap: 14px;
    min-width: 0;
}

.suite-hero__pictures figure {
    position: relative;
    isolation: isolate;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(23, 54, 50, .12);
    background: #ddd2c1;
}

.suite-hero__pictures figure::before,
.suite-journal__photo figure::before {
    position: absolute;
    z-index: -1;
    inset: -22px;
    background: var(--suite-image) center / cover no-repeat;
    content: '';
    filter: blur(18px) saturate(.72);
    opacity: .25;
    transform: scale(1.08);
}

.suite-hero__primary { height: clamp(455px, 41vw, 585px); }
.suite-hero__secondary { height: clamp(285px, 27vw, 375px); }

.suite-hero__pictures img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.suite-hero__secondary::after {
    position: absolute;
    z-index: 1;
    top: 13px;
    right: 13px;
    width: 28px;
    height: 28px;
    border-top: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(255, 255, 255, .75);
    content: '';
}

.suite-facts {
    background: #173632;
    color: #f7f1e7;
}

.suite-facts__grid {
    display: grid;
    grid-template-columns: .8fr 1fr 1.15fr 1.35fr;
}

.suite-facts__grid > div {
    min-width: 0;
    padding: 31px clamp(20px, 3vw, 45px);
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.suite-facts__grid > div:first-child { padding-left: 0; border-left: 0; }
.suite-facts small { display: block; margin-bottom: 8px; color: #d9ad7f; font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; }
.suite-facts strong { display: block; overflow: hidden; font-family: var(--at-serif, Georgia, serif); font-size: 1rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

.suite-story { padding: clamp(90px, 10vw, 145px) 0; background: #fbf8f2; }

.suite-story__grid {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    gap: clamp(60px, 10vw, 150px);
}

.suite-story h2,
.suite-journal h2,
.suite-details h2,
.suite-book h2,
.suite-related h2 {
    margin: 18px 0 0;
    color: #173632;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(2.8rem, 4.5vw, 4.7rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1;
}

.suite-story__body { padding-top: 30px; border-top: 1px solid rgba(23, 54, 50, .18); }

.suite-story__body > p {
    margin: 0;
    color: #53645f;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(1.08rem, 1.45vw, 1.3rem);
    line-height: 1.85;
}

.suite-story__body > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 38px;
    padding-bottom: 8px;
    border-bottom: 1px solid #a66f47;
    color: #173632;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.suite-journal { padding: clamp(85px, 9vw, 130px) 0; background: #e9dfd0; }

.suite-journal__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: end;
    gap: 45px;
    margin-bottom: 53px;
}

.suite-journal__head > p {
    margin: 0 0 7px;
    color: #756e64;
    font-size: .74rem;
    line-height: 1.7;
}

.suite-journal__viewport {
    overflow-x: auto;
    padding-bottom: 18px;
    scrollbar-color: #a66f47 rgba(23, 54, 50, .1);
    scrollbar-width: thin;
}

.suite-journal__track {
    display: flex;
    width: max-content;
    gap: 14px;
}

.suite-journal__photo {
    display: grid;
    width: clamp(255px, 23vw, 335px);
    gap: 10px;
    color: #173632;
}

.suite-journal__photo:nth-child(1),
.suite-journal__photo:nth-child(4) { width: clamp(320px, 30vw, 440px); }

.suite-journal__photo > span {
    font-family: var(--at-serif, Georgia, serif);
    font-size: .7rem;
    font-style: italic;
}

.suite-journal__photo figure {
    position: relative;
    isolation: isolate;
    height: 315px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(23, 54, 50, .12);
    background: #d7cabb;
}

.suite-journal__photo img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s ease;
}

.suite-journal__photo:hover img { transform: scale(1.015); }

.suite-details { padding: clamp(90px, 10vw, 145px) 0; background: #fbf8f2; }

.suite-details__grid {
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: clamp(65px, 10vw, 150px);
}

.suite-details header > p {
    max-width: 430px;
    margin: 28px 0 0;
    color: #68736e;
    font-size: .9rem;
    line-height: 1.8;
}

.suite-details__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.suite-details__lists article { border-top: 1px solid rgba(23, 54, 50, .22); }
.suite-details__lists h3 { margin: 0; padding: 20px 0; border-bottom: 1px solid rgba(23, 54, 50, .15); color: #a66f47; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.suite-details__lists ul { margin: 0; padding: 0; list-style: none; }
.suite-details__lists li { display: flex; gap: 12px; padding: 17px 0; border-bottom: 1px solid rgba(23, 54, 50, .12); color: #445a54; font-size: .78rem; line-height: 1.5; }
.suite-details__lists li > span { flex: 0 0 20px; color: #a66f47; }
.suite-details__lists li b { display: block; margin-bottom: 3px; color: #173632; font-size: .72rem; font-weight: 600; }
.suite-details__lists li small { display: block; color: #7a817c; font-size: .67rem; line-height: 1.5; }

.suite-book { padding: clamp(80px, 9vw, 125px) 0; background: #173632; color: #fff; }

.suite-book__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: clamp(70px, 12vw, 180px); }
.suite-book h2 { max-width: 700px; color: #fff; font-size: clamp(3rem, 4.8vw, 5.1rem); }
.suite-book__grid > div > p { max-width: 620px; margin: 27px 0 0; color: rgba(255, 255, 255, .62); font-size: .88rem; line-height: 1.8; }

.suite-book__action { padding-left: 35px; border-left: 1px solid rgba(255, 255, 255, .18); }
.suite-book__action small,
.suite-book__action > span { display: block; color: rgba(255, 255, 255, .5); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.suite-book__action strong { display: block; margin: 12px 0 6px; color: #f5dfc4; font-family: var(--at-serif, Georgia, serif); font-size: 2.2rem; font-weight: 400; }
.suite-book__action > a { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, .22); border-bottom: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.suite-book__action > a:last-child { justify-content: flex-start; margin-top: 14px; padding: 4px 0; border: 0; color: #dfbd94; letter-spacing: .06em; text-transform: none; }

.suite-related { padding: clamp(85px, 9vw, 125px) 0; background: #f5f0e7; }
.suite-related header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 45px; }
.suite-related h2 { font-size: clamp(2.8rem, 4vw, 4.2rem); }
.suite-related__list { border-top: 1px solid rgba(23, 54, 50, .2); }
.suite-related__list > a { display: grid; grid-template-columns: 55px minmax(0, 1fr) 190px 24px; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(23, 54, 50, .17); color: #173632; transition: padding .25s ease, color .25s ease; }
.suite-related__list > a:hover { padding-left: 12px; color: #a66f47; }
.suite-related__list span { color: #a66f47; font-family: var(--at-serif, Georgia, serif); font-size: .72rem; font-style: italic; }
.suite-related__list h3 { margin: 0; font-family: var(--at-serif, Georgia, serif); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 400; }
.suite-related__list p { margin: 0; color: #737a75; font-size: .68rem; letter-spacing: .06em; }
.suite-related__list b { font-size: .9rem; font-weight: 400; }
.suite-related__all { display: inline-block; margin-top: 32px; padding-bottom: 7px; border-bottom: 1px solid currentColor; color: #173632; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

@media (max-width: 980px) {
    .suite-hero__grid { grid-template-columns: .88fr 1.12fr; gap: 45px; }
    .suite-hero__pictures { grid-template-columns: 1fr; }
    .suite-hero__secondary { display: none; }
    .suite-story__grid,
    .suite-details__grid { gap: 65px; }
    .suite-book__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 65px; }
}

@media (max-width: 760px) {
    .suite-hero { padding: 108px 0 70px; }
    .suite-hero__topline { margin-bottom: 38px; }
    .suite-hero__topline > span { display: none; }
    .suite-hero__grid { grid-template-columns: 1fr; gap: 52px; }
    .suite-hero__copy { max-width: none; }
    .suite-hero h1 { max-width: 9ch; font-size: clamp(3.1rem, 14vw, 4.2rem); }
    .suite-hero__copy > p { margin-top: 22px; font-size: .97rem; }
    .suite-hero__rate { margin-top: 34px; }
    .suite-hero__primary { height: min(102vw, 420px); }
    .suite-facts__grid { grid-template-columns: 1fr 1fr; }
    .suite-facts__grid > div { padding: 23px 15px; border-bottom: 1px solid rgba(255, 255, 255, .13); }
    .suite-facts__grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .suite-facts__grid > div:nth-child(even) { padding-right: 0; }
    .suite-facts strong { font-size: .88rem; white-space: normal; }
    .suite-story__grid,
    .suite-details__grid,
    .suite-book__grid { grid-template-columns: 1fr; gap: 45px; }
    .suite-story h2,
    .suite-journal h2,
    .suite-details h2,
    .suite-book h2,
    .suite-related h2 { font-size: clamp(2.55rem, 11vw, 3.35rem); }
    .suite-story__body { padding-top: 24px; }
    .suite-journal__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 38px; }
    .suite-journal__head > p { max-width: 280px; }
    .suite-journal__photo,
    .suite-journal__photo:nth-child(1),
    .suite-journal__photo:nth-child(4) { width: 74vw; max-width: 290px; }
    .suite-journal__photo figure { height: 275px; }
    .suite-details__lists { grid-template-columns: 1fr; gap: 45px; }
    .suite-book__action { padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); border-left: 0; }
    .suite-related header { display: block; }
    .suite-related__list > a { grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 12px; }
    .suite-related__list p { display: none; }
    .suite-related__list h3 { font-size: 1.45rem; }
}

@media (max-width: 480px) {
    .suite-hero__rate { grid-template-columns: 1fr; align-items: stretch; }
    .suite-hero__rate > a { width: 100%; }
    .suite-hero__primary { height: 350px; }
    .suite-story,
    .suite-journal,
    .suite-details,
    .suite-book,
    .suite-related { padding: 72px 0; }
}

/* Villas 2026 — compact editorial stay directory. */
body:has(.stay-hero) .masthead:not(.is-stuck) {
    border-bottom-color: rgba(255,255,255,.22);
    background: transparent;
    backdrop-filter: none;
}

body:has(.stay-hero) .masthead:not(.is-stuck) .brand__light { display: block !important; }
body:has(.stay-hero) .masthead:not(.is-stuck) .brand__dark { display: none !important; }
body:has(.stay-hero) .masthead:not(.is-stuck) .brand__wordmark b,
body:has(.stay-hero) .masthead:not(.is-stuck) .nav a { color: #fff; }
body:has(.stay-hero) .masthead:not(.is-stuck) .brand__wordmark small { color: rgba(255,255,255,.7); }
body:has(.stay-hero) .masthead:not(.is-stuck) .brand__wordmark::before { background: rgba(218,174,117,.65); }
body:has(.stay-hero) .masthead:not(.is-stuck) .nav a::after { background: #d7a66b; }
body:has(.stay-hero) .masthead:not(.is-stuck) .btn--ghost { border-color: rgba(255,255,255,.65); color: #fff; }
body:has(.stay-hero) .masthead:not(.is-stuck) .burger span { background: #fff; }

.stay-kicker {
    display: block;
    color: #a96f37;
    font-family: var(--at-sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .24em;
    line-height: 1.5;
    text-transform: uppercase;
}

.stay-hero {
    position: relative;
    height: clamp(600px, 73vh, 720px);
    min-height: 600px;
    overflow: hidden;
    background: #173b35;
}

.stay-hero > img,
.stay-hero__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.stay-hero > img {
    object-fit: cover;
    object-position: center 53%;
    transform: scale(1.015);
}

.stay-hero__veil {
    background:
        linear-gradient(90deg, rgba(8,38,35,.72) 0%, rgba(8,38,35,.25) 50%, rgba(8,38,35,.08) 75%),
        linear-gradient(0deg, rgba(6,31,29,.55) 0%, transparent 52%);
}

.stay-hero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding-top: 150px;
    padding-bottom: 55px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}

.stay-hero__copy { max-width: 690px; }
.stay-hero__copy .stay-kicker { color: #edc492; }

.stay-hero__copy h1 {
    margin: 24px 0 20px;
    color: #fff;
    font-family: var(--at-serif);
    font-size: clamp(4.3rem, 7vw, 6.6rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .82;
}

.stay-hero__copy p {
    max-width: 480px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-family: var(--at-serif);
    font-size: 1.14rem;
    line-height: 1.55;
}

.stay-hero__facts {
    width: min(480px, 42vw);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255,255,255,.42);
    border-bottom: 1px solid rgba(255,255,255,.42);
}

.stay-hero__facts div { padding: 18px 17px 17px; }
.stay-hero__facts div + div { border-left: 1px solid rgba(255,255,255,.25); }
.stay-hero__facts strong,
.stay-hero__facts span { display: block; }
.stay-hero__facts strong { color: #fff; font-family: var(--at-serif); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.stay-hero__facts span { margin-top: 8px; color: rgba(255,255,255,.68); font-size: .55rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.stay-guide {
    position: relative;
    padding: clamp(78px, 7vw, 104px) 0 clamp(72px, 6.5vw, 95px);
    overflow: hidden;
    background: #f8f4eb;
}

.stay-guide::after {
    position: absolute;
    top: -145px;
    right: -105px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(169,111,55,.18);
    border-radius: 50%;
    content: "";
}

.stay-guide__intro {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .62fr 1.12fr 1fr;
    align-items: end;
    gap: clamp(28px, 4vw, 70px);
}

.stay-guide__intro h2,
.stay-collection__head h2,
.stay-concierge__copy h2 {
    margin: 0;
    color: #173a35;
    font-family: var(--at-serif);
    font-weight: 400;
    letter-spacing: -.038em;
}

.stay-guide__intro h2 { font-size: clamp(3.15rem, 5vw, 5rem); line-height: .92; }
.stay-guide__intro p { margin: 0; color: #586b64; font-size: 1rem; line-height: 1.8; }
.stay-guide__intro small { display: block; margin-top: 19px; color: #8b7b68; font-size: .72rem; line-height: 1.65; }

.stay-guide__nav {
    position: relative;
    z-index: 1;
    display: grid;
    margin-top: clamp(48px, 5vw, 72px);
    border-top: 1px solid rgba(116,90,57,.27);
    border-bottom: 1px solid rgba(116,90,57,.27);
    grid-template-columns: repeat(3, 1fr);
}

.stay-guide__nav a {
    position: relative;
    min-height: 115px;
    padding: 23px 46px 21px 20px;
    display: grid;
    align-content: center;
    color: #173a35;
    transition: color .3s ease, background .3s ease;
}

.stay-guide__nav a + a { border-left: 1px solid rgba(116,90,57,.27); }
.stay-guide__nav i { margin-bottom: 8px; color: #ae783f; font-size: .57rem; font-style: normal; letter-spacing: .17em; }
.stay-guide__nav span { font-family: var(--at-serif); font-size: 1.24rem; line-height: 1.15; }
.stay-guide__nav small { margin-top: 8px; color: #9b7047; font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stay-guide__nav b { position: absolute; right: 20px; bottom: 20px; color: #a96f37; font-size: .95rem; font-weight: 400; }
.stay-guide__nav a:hover { background: #173a35; color: #fff; }
.stay-guide__nav a:hover small,
.stay-guide__nav a:hover i,
.stay-guide__nav a:hover b { color: #efc895; }

.stay-collection {
    padding: clamp(56px, 4.5vw, 72px) 0 clamp(60px, 5.5vw, 82px);
    scroll-margin-top: 92px;
    background: #eee5d7;
}

.stay-collection:nth-child(even) { background: #faf7f0; }

.stay-collection__head {
    display: grid;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(116,90,57,.28);
    grid-template-columns: 1.2fr .65fr auto;
    align-items: end;
    gap: 34px;
}

.stay-collection__head .stay-kicker { margin-bottom: 14px; }
.stay-collection__head h2 { font-size: clamp(2.8rem, 4.35vw, 4.45rem); line-height: .94; }
.stay-collection__head > p { max-width: 360px; margin: 0; color: #66746d; line-height: 1.7; }
.stay-collection__head > small { padding-bottom: 4px; color: #a96f37; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.stay-collection__swipe { display: none; }

.stay-grid {
    display: grid;
    margin-top: 28px;
    gap: 26px 20px;
}

.stay-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stay-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.villa-tile {
    min-width: 0;
    border: 1px solid rgba(116,90,57,.22);
    background: rgba(255,255,255,.24);
    box-shadow: 0 14px 35px rgba(53,44,31,.045);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.villa-tile:hover {
    border-color: rgba(116,90,57,.34);
    box-shadow: 0 18px 42px rgba(53,44,31,.08);
    transform: translateY(-3px);
}

.stay-card__visual {
    position: relative;
    height: clamp(320px, 27vw, 380px);
    display: block;
    overflow: hidden;
    background: #cabfae;
}

.stay-grid--2 .stay-card__visual { height: clamp(330px, 27vw, 400px); }

.stay-card__visual::after {
    display: none;
    content: none;
}

.stay-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.75,.25,1), filter .6s ease;
}

.villa-tile:hover .stay-card__visual img { transform: scale(1.045); filter: saturate(1.06); }

.stay-card__number,
.stay-card__arrow {
    position: absolute;
    z-index: 2;
    top: 18px;
    color: #fff;
}

.stay-card__number { left: 18px; font-size: .58rem; font-weight: 700; letter-spacing: .15em; }
.stay-card__arrow {
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.66);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .85rem;
    transition: background .25s ease, color .25s ease;
}
.villa-tile:hover .stay-card__arrow { background: #fff; color: #173a35; }

.stay-card__copy {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 24px;
    left: 24px;
    color: #fff;
}

.stay-card__copy > small { color: #efc895; font-size: .57rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.stay-card__copy h3 { margin: 9px 0 19px; color: #fff; font-family: var(--at-serif); font-size: clamp(2rem, 2.7vw, 2.8rem); font-weight: 400; letter-spacing: -.03em; line-height: .96; }
.stay-grid--3 .stay-card__copy h3 { font-size: clamp(1.8rem, 2.25vw, 2.35rem); }

.stay-card__price {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.35);
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.stay-card__price span { color: rgba(255,255,255,.68); font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stay-card__price strong { color: #fff; font-size: 1.08rem; font-weight: 600; letter-spacing: .02em; }

.villa-tile__body {
    padding: 18px 20px 14px;
}

.villa-tile__eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.villa-tile__eyebrow small,
.villa-tile__eyebrow span {
    color: #a96f37;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.villa-tile__eyebrow span {
    color: #988773;
    font-family: var(--at-serif);
    font-size: .74rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .04em;
}

.villa-tile__body h3 {
    margin: 8px 0 7px;
    color: #173a35;
    font-family: var(--at-serif);
    font-size: clamp(1.72rem, 2.2vw, 2.24rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.02;
}

.stay-grid--3 .villa-tile__body h3 { font-size: clamp(1.65rem, 1.85vw, 2rem); }
.villa-tile__body h3 a { color: inherit; }
.villa-tile__body > p {
    min-height: 2.55em;
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    color: #65736c;
    font-size: .78rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.villa-tile__rate {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid rgba(116,90,57,.24);
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.villa-tile__rate span,
.villa-tile__rate small {
    color: #8d806f;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.villa-tile__rate strong {
    color: #173a35;
    font-family: var(--at-sans);
    font-size: 1.06rem;
    font-weight: 650;
    letter-spacing: -.015em;
}

.stay-card__foot {
    min-height: 50px;
    padding: 11px 20px;
    border-top: 1px solid rgba(116,90,57,.18);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.stay-card__foot > span { display: inline-flex; align-items: center; gap: 7px; color: #65736c; font-size: .68rem; }
.stay-card__foot svg { color: #a96f37; }
.stay-card__foot > a { margin-left: auto; color: #173a35; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.stay-card__foot > a b { margin-left: 5px; color: #a96f37; font-size: .8rem; }

.stay-concierge {
    min-height: 520px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    background: #173a35;
}

.stay-concierge__media { min-height: 520px; overflow: hidden; }
.stay-concierge__media img { width: 100%; height: 100%; object-fit: cover; }
.stay-concierge__copy { padding: clamp(60px, 8vw, 120px); align-self: center; }
.stay-concierge__copy .stay-kicker { color: #e5b77e; }
.stay-concierge__copy h2 { margin-top: 20px; color: #fff; font-size: clamp(3.2rem, 5vw, 5.2rem); line-height: .91; }
.stay-concierge__copy p { max-width: 440px; margin: 25px 0 33px; color: rgba(255,255,255,.72); line-height: 1.75; }
.stay-concierge__copy .btn--ghost { border-color: rgba(255,255,255,.65); color: #fff; }

@media (max-width: 1050px) {
    .stay-hero__inner { gap: 35px; }
    .stay-hero__facts { width: 390px; }
    .stay-guide__intro { grid-template-columns: .5fr 1.05fr 1fr; gap: 30px; }
    .stay-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stay-grid--3 .stay-card__visual { height: 360px; }
    .stay-collection__head { grid-template-columns: 1fr .65fr auto; gap: 28px; }
}

@media (max-width: 700px) {
    body:has(.stay-hero) .masthead:not(.is-stuck) { background: linear-gradient(180deg, rgba(8,35,32,.56), transparent); }
    .stay-hero { height: 610px; min-height: 610px; }
    .stay-hero > img { object-position: 58% center; }
    .stay-hero__veil { background: linear-gradient(0deg, rgba(7,34,31,.82) 0%, rgba(7,34,31,.28) 72%, rgba(7,34,31,.2)); }
    .stay-hero__inner { padding-top: 110px; padding-bottom: 33px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 30px; }
    .stay-hero__copy h1 { margin: 16px 0 14px; font-size: clamp(3.65rem, 16vw, 4.6rem); line-height: .86; }
    .stay-hero__copy p { max-width: 320px; font-size: .98rem; }
    .stay-hero__facts { width: 100%; }
    .stay-hero__facts div { padding: 14px 9px 13px; }
    .stay-hero__facts strong { font-size: 1.25rem; }
    .stay-hero__facts span { font-size: .44rem; letter-spacing: .1em; }

    .stay-guide { padding: 66px 0 64px; }
    .stay-guide::after { top: -90px; right: -155px; width: 260px; height: 260px; }
    .stay-guide__intro { grid-template-columns: 1fr; align-items: start; gap: 18px; }
    .stay-guide__intro h2 { font-size: clamp(2.85rem, 13vw, 3.55rem); }
    .stay-guide__intro p { font-size: .92rem; line-height: 1.7; }
    .stay-guide__intro small { margin-top: 15px; }
    .stay-guide__nav {
        margin-right: -15px;
        margin-top: 36px;
        border: 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(78vw, 300px);
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .stay-guide__nav::-webkit-scrollbar { display: none; }
    .stay-guide__nav a { min-height: 108px; padding: 18px 42px 17px 18px; border: 1px solid rgba(116,90,57,.27) !important; scroll-snap-align: start; }
    .stay-guide__nav span { font-size: 1.08rem; }

    .stay-collection { padding: 48px 0 54px; scroll-margin-top: 76px; overflow: hidden; }
    .stay-collection__head { padding-bottom: 20px; grid-template-columns: 1fr auto; gap: 16px; }
    .stay-collection__head > div { grid-column: 1 / -1; }
    .stay-collection__head h2 { max-width: 330px; font-size: clamp(2.45rem, 11.5vw, 3.05rem); }
    .stay-collection__head > p { max-width: 285px; font-size: .85rem; line-height: 1.6; }
    .stay-collection__head > small { align-self: end; }
    .stay-collection__swipe { margin: 18px 0 0; display: block; color: #9b7047; font-size: .57rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .stay-collection__swipe span { margin-left: 7px; font-size: .8rem; }

    .stay-grid,
    .stay-grid--2,
    .stay-grid--3 {
        margin: 17px -15px 0 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(82vw, 315px);
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-left: 0;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .stay-grid::-webkit-scrollbar { display: none; }
    .stay-grid .villa-tile { scroll-snap-align: start; }
    .stay-grid .villa-tile.reveal { opacity: 1; transform: none; }
    .stay-card__visual,
    .stay-grid--2 .stay-card__visual,
    .stay-grid--3 .stay-card__visual { height: clamp(275px, 80vw, 325px); }
    .stay-card__copy { right: 20px; bottom: 20px; left: 20px; }
    .stay-card__copy h3,
    .stay-grid--3 .stay-card__copy h3 { font-size: 2.05rem; }
    .villa-tile__body { padding: 16px 16px 12px; }
    .villa-tile__body h3,
    .stay-grid--3 .villa-tile__body h3 { font-size: 1.72rem; }
    .villa-tile__body > p { font-size: .78rem; }
    .villa-tile__rate { margin-top: 12px; padding-top: 10px; }
    .stay-card__foot { min-height: 52px; padding: 11px 16px; gap: 12px; }
    .stay-card__foot > span { font-size: .61rem; }
    .stay-card__foot > span:nth-child(2) { display: none; }

    .stay-concierge { min-height: 0; grid-template-columns: 1fr; }
    .stay-concierge__media { min-height: 340px; }
    .stay-concierge__copy { padding: 61px 30px 67px; }
    .stay-concierge__copy h2 { font-size: clamp(3rem, 13vw, 3.7rem); }
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--ink);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.shell--wide { max-width: 1560px; }
.shell--narrow { max-width: 860px; }

.section { padding: 110px 0; position: relative; }
.section--tight { padding: 78px 0; }
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand-soft); }
.section--deep { background: var(--ink); color: #dfeaee; }
.section--deep h2, .section--deep h3 { color: #fff; }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
    display: inline-block;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 18px;
}

.section--deep .eyebrow { color: var(--aqua); }

.display {
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    letter-spacing: -.02em;
}

.title { font-size: clamp(1.8rem, 3.4vw, 2.65rem); }
.subtitle { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.lead {
    font-size: 1.18rem;
    line-height: 1.75;
    color: var(--muted);
}

.section--deep .lead { color: #b6ccd4; }

.muted { color: var(--muted); }

/* A hairline flourish under section headings */
.flourish {
    width: 74px;
    height: 1px;
    background: var(--gold);
    margin: 26px 0 0;
    position: relative;
}

.flourish::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -2px;
    width: 5px;
    height: 5px;
    background: var(--gold);
    transform: rotate(45deg) translateX(-50%);
}

.flourish--center { margin-left: auto; margin-right: auto; }

.head-center { text-align: center; max-width: 720px; margin: 0 auto 64px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 16px 32px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .35s var(--ease);
    white-space: nowrap;
}

.btn--solid { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); }

.btn--gold { background: var(--gold); color: #1d1403; border-color: var(--gold); }
.btn--gold:hover { background: #a5853f; border-color: #a5853f; }

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--line { border-color: var(--line); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--teal);
    border-bottom: 1px solid rgba(23, 115, 138, .3);
    padding-bottom: 4px;
    transition: all .3s var(--ease);
}

.link-more:hover { color: var(--ink); border-color: var(--ink); }
.link-more svg { transition: transform .3s var(--ease); }
.link-more:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.masthead {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    padding: 22px 0;
    transition: background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}

.masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(6, 35, 48, .55), transparent);
    opacity: 1;
    transition: opacity .45s var(--ease);
    pointer-events: none;
}

.masthead.is-stuck {
    background: rgba(252, 250, 246, .96);
    padding: 12px 0;
    box-shadow: 0 1px 0 var(--line), 0 12px 30px rgba(6, 35, 48, .07);
}

.masthead.is-stuck::before { opacity: 0; }

.masthead__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    position: relative;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 76px; width: auto; transition: height .45s var(--ease); }
.masthead.is-stuck .brand img { height: 58px; }
.brand__light { display: block; }
.brand__dark { display: none; }
.masthead.is-stuck .brand__light { display: none; }
.masthead.is-stuck .brand__dark { display: block; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 34px; }

.nav a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    padding: 6px 0;
    transition: color .3s var(--ease);
}

.masthead.is-stuck .nav a { color: var(--ink); }

.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .35s var(--ease);
}

.nav a:hover::after, .nav a.is-active::after { width: 100%; }

.masthead .btn { padding: 13px 26px; }
.masthead.is-stuck .btn--ghost { border-color: var(--ink); color: var(--ink); }
.masthead.is-stuck .btn--ghost:hover { background: var(--ink); color: #fff; }

.burger {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.burger span {
    display: block;
    height: 1.5px;
    background: #fff;
    margin: 5px auto;
    width: 24px;
    transition: all .3s var(--ease);
}

.masthead.is-stuck .burger span { background: var(--ink); }

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
}

.drawer.is-open { opacity: 1; visibility: visible; }

.drawer a {
    font-family: var(--serif);
    font-size: 1.9rem;
    color: #fff;
    padding: 10px 0;
}

.drawer__close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--ink);
}

.hero__media { position: absolute; inset: 0; }

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
    from { transform: scale(1.02); }
    to { transform: scale(1.13); }
}

.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(6, 35, 48, .55) 0%, rgba(6, 35, 48, .18) 40%, rgba(6, 35, 48, .72) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; padding: 150px 0 120px; }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 26px;
}

.hero__eyebrow::before {
    content: '';
    width: 46px;
    height: 1px;
    background: var(--gold);
}

.hero h1 {
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    line-height: 1.02;
    letter-spacing: -.025em;
    max-width: 15ch;
}

.hero h1 em { font-style: italic; color: var(--sand); }

.hero__text {
    color: rgba(255, 255, 255, .84);
    font-size: 1.12rem;
    max-width: 52ch;
    margin: 28px 0 40px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.hero__scroll i {
    display: block;
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .8), transparent);
    animation: sink 2.4s ease-in-out infinite;
}

@keyframes sink {
    0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Booking strip
   -------------------------------------------------------------------------- */
.booking {
    position: relative;
    z-index: 5;
    margin-top: -58px;
}

.booking__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 26px 60px rgba(6, 35, 48, .13);
    padding: 26px 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 22px;
    align-items: end;
}

.field label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 8px;
}

.field input, .field select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    padding: 6px 0;
    outline: none;
    transition: border-color .3s var(--ease);
}

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

/* --------------------------------------------------------------------------
   Watermark motif
   -------------------------------------------------------------------------- */
.watermark {
    position: absolute;
    pointer-events: none;
    user-select: none;
    opacity: .045;
    width: min(620px, 62vw);
    z-index: 0;
}

.watermark--right { right: -110px; top: 50%; transform: translateY(-50%); }
.watermark--left { left: -130px; bottom: -60px; }
.section--deep .watermark { opacity: .07; }

.section > .shell { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Split feature (text + arch image)
   -------------------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 84px;
    align-items: center;
}

.split--flip .split__media { order: -1; }

.arch {
    position: relative;
    border-radius: 340px 340px 6px 6px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.arch img { width: 100%; height: 100%; object-fit: cover; }

.arch--wide { aspect-ratio: 4 / 3; border-radius: 260px 260px 6px 6px; }

/* A small offset photo layered on the main one */
.stack { position: relative; }

.stack__sub {
    position: absolute;
    right: -46px;
    bottom: -46px;
    width: 46%;
    border: 8px solid var(--cream);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(6, 35, 48, .16);
}

.stack__sub img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.stat__value {
    font-family: var(--serif);
    font-size: 2.1rem;
    color: var(--teal);
    line-height: 1;
}

.stat__label {
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--muted);
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Room cards
   -------------------------------------------------------------------------- */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 34px;
}

.room-card {
    overflow: hidden;
    border: 1px solid rgba(184, 151, 79, .2);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 18px 55px rgba(6, 35, 48, .055);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

.room-card:hover {
    transform: translateY(-7px);
    border-color: rgba(184, 151, 79, .48);
    box-shadow: 0 28px 70px rgba(6, 35, 48, .12);
}

.room-card__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
}

.room-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.room-card:hover .room-card__media img { transform: scale(1.07); }

.room-card__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(252, 250, 246, .94);
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 2px;
}

.room-card__rate {
    position: absolute;
    right: 16px;
    bottom: 16px;
    min-width: 158px;
    background: rgba(6, 35, 48, .93);
    color: #fff;
    padding: 11px 15px 10px;
    border-radius: 2px;
    font-size: 13px;
    letter-spacing: .04em;
}

.room-card__rate small { display: block; margin-bottom: 1px; color: var(--sand); font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.room-card__rate b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.2; }
.room-card__rate span { display: block; font-size: 9px; letter-spacing: .12em; opacity: .68; text-transform: uppercase; }

.room-card__body { padding: 24px 25px 27px; }
.room-card__body h3 { font-size: 1.42rem; margin-bottom: 9px; }
.room-card__body p { color: var(--muted); font-size: 15px; margin-bottom: 16px; }

.room-card__price {
    margin: -2px 0 13px;
    color: var(--gold);
    font-family: var(--serif);
    font-size: 1.12rem;
}

.room-card__price span { color: var(--faint); font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 12.5px;
    color: var(--faint);
    margin-bottom: 18px;
}

.room-meta span { display: inline-flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------------
   Experience tiles
   -------------------------------------------------------------------------- */
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.exp {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
}

.exp img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.exp:hover img { transform: scale(1.06); }

.exp::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 35, 48, .9) 8%, rgba(6, 35, 48, .25) 52%, transparent 78%);
}

.exp__body { position: relative; z-index: 2; padding: 34px; color: #fff; }
.exp__body h3 { color: #fff; font-size: 1.5rem; margin-bottom: 12px; }
.exp__body p { color: rgba(255, 255, 255, .82); font-size: 14.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Inclusions
   -------------------------------------------------------------------------- */
.inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }

.inc {
    background: var(--cream);
    padding: 42px 34px;
    transition: background .4s var(--ease);
}

.inc:hover { background: #fff; }
.inc__icon { color: var(--teal); margin-bottom: 20px; }
.inc h3 { font-size: 1.18rem; margin-bottom: 10px; }
.inc p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   Facilities pills
   -------------------------------------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }

.pill {
    border: 1px solid rgba(255, 255, 255, .22);
    color: #cfe0e6;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 100px;
    transition: all .3s var(--ease);
}

.pill:hover { border-color: var(--aqua); color: #fff; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.gal-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 1 / 1;
    display: block;
}

.gal-item--tall { grid-row: span 2; aspect-ratio: 1 / 2.07; }
.gal-item--wide { grid-column: span 2; aspect-ratio: 2.07 / 1; }

.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gal-item:hover img { transform: scale(1.06); }

.gal-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6, 35, 48, 0);
    transition: background .4s var(--ease);
}

.gal-item:hover::after { background: rgba(6, 35, 48, .22); }

.gal-item__caption {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 15px;
    left: 18px;
    overflow: hidden;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
    opacity: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    transform: translateY(7px);
    transition: all .35s var(--ease);
    white-space: nowrap;
}

.gal-item:hover .gal-item__caption { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 20, 28, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
}

.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 3px; }

.lightbox__close {
    position: absolute;
    top: 22px;
    right: 28px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: all .3s var(--ease);
}

.lightbox__nav:hover { background: #fff; color: var(--ink); }
.lightbox__prev { left: 26px; }
.lightbox__next { right: 26px; }

/* --------------------------------------------------------------------------
   Dining
   -------------------------------------------------------------------------- */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }

.menu-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 38px 32px;
}

.menu-card h3 { font-size: 1.45rem; }

.menu-card__time {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 8px 0 22px;
}

.menu-card ul { list-style: none; margin: 0; padding: 0; }

.menu-card li {
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 15px;
    color: var(--muted);
}

.menu-card li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Page banner (inner pages)
   -------------------------------------------------------------------------- */
.banner {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    background: var(--ink);
    overflow: hidden;
}

.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 35, 48, .85), rgba(6, 35, 48, .3));
}

.banner__inner { position: relative; z-index: 2; padding: 0 0 68px; width: 100%; }
.banner h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.9rem); }

.crumbs {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-top: 18px;
}

.crumbs a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta {
    position: relative;
    padding: 118px 0;
    text-align: center;
    overflow: hidden;
    background: var(--ink);
}

.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.cta::after { content: ''; position: absolute; inset: 0; background: rgba(6, 35, 48, .5); }
.cta .shell { position: relative; z-index: 2; }
.cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); }
.cta p { color: rgba(255, 255, 255, .82); max-width: 56ch; margin: 22px auto 36px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }

.contact-line {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.contact-line__icon { color: var(--teal); flex: 0 0 auto; margin-top: 3px; }
.contact-line h4 { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.contact-line p { margin: 0; font-size: 16px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: #9fb8c2; padding: 88px 0 0; position: relative; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 56px; position: relative; z-index: 1; }
.footer img.footer__logo { height: 62px; width: auto; margin-bottom: 22px; }
.footer p { font-size: 14.5px; line-height: 1.75; }

.footer h4 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 22px;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 12px; font-size: 14.5px; }
.footer a:hover { color: var(--aqua); }

.footer__bottom {
    margin-top: 68px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Wave divider
   -------------------------------------------------------------------------- */
.wave { display: block; width: 100%; height: 60px; }
.wave path { fill: currentColor; }
.wave-top { color: var(--cream); margin-bottom: -1px; }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero__media img { animation: none; }
    .hero__scroll i { animation: none; }
    html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .split { gap: 52px; }
    .exp-grid { grid-template-columns: 1fr 1fr; }
    .exp { min-height: 420px; }
    .inc-grid { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .booking__card { grid-template-columns: repeat(2, 1fr); }
    .booking__card .btn { width: 100%; justify-content: center; grid-column: span 2; }
}

@media (max-width: 900px) {
    body { font-size: 16px; }
    .section { padding: 78px 0; }
    .nav, .masthead .btn { display: none; }
    .burger { display: block; }
    .split { grid-template-columns: 1fr; gap: 44px; }
    .split--flip .split__media { order: 0; }
    .stack__sub { right: -14px; bottom: -22px; width: 40%; border-width: 6px; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .menu-grid { grid-template-columns: 1fr; }
    .gal-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-row { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .booking { margin-top: 0; padding-top: 34px; }
    .booking__card { box-shadow: 0 14px 34px rgba(6, 35, 48, .1); }
}

@media (max-width: 620px) {
    :root { --gutter: 18px; }
    .exp-grid, .inc-grid { grid-template-columns: 1fr; }
    .exp { min-height: 360px; }
    .rooms-grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .booking__card { grid-template-columns: 1fr; }
    .booking__card .btn { grid-column: span 1; }
    .gal-item--wide { grid-column: span 2; }
    .gal-item--tall { grid-row: span 1; aspect-ratio: 1 / 1; }
    .hero__inner { padding: 130px 0 100px; }
}

/* ========================================================================== 
   Sea-inspired coastal redesign — clean, bold and editorial
   ========================================================================== */
:root {
    --coast-ink: #062c35;
    --coast-deep: #00242c;
    --coast-cyan: #21c1dc;
    --coast-cyan-dark: #08a9c7;
    --coast-ice: #eaf8fd;
    --coast-orange: #ff7d3c;
    --coast-line: rgba(6, 44, 53, .14);
}

html { scroll-padding-top: 76px; }
body { background: #fff; color: var(--coast-ink); font-family: "Segoe UI", Arial, sans-serif; }
h1, h2, h3, h4, .display, .title { font-family: "Segoe UI", Arial, sans-serif; font-style: normal; }
h1 em, h2 em, h3 em, .display em, .title em { font-family: inherit; font-style: normal; }
.shell { width: min(1200px, calc(100% - 56px)); }
.shell--wide { width: min(1440px, calc(100% - 64px)); }

.masthead, .masthead.is-stuck {
    inset: 0 0 auto;
    padding: 0;
    background: #fff;
    border-bottom: 1px solid rgba(6, 44, 53, .08);
    box-shadow: none;
    z-index: 1000;
}
.masthead__inner, .masthead.is-stuck .masthead__inner {
    min-height: 76px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
.brand img, .masthead.is-stuck .brand img { width: auto; height: 54px; }
.brand__light { display: none !important; }
.brand__dark { display: block !important; }
.brand__wordmark b { color: var(--coast-ink); font-family: inherit; font-size: 1rem; letter-spacing: -.02em; }
.brand__wordmark small { color: #608089; font-size: .57rem; letter-spacing: .18em; }
.nav { gap: clamp(20px, 2.2vw, 40px); }
.nav a, .masthead.is-stuck .nav a { color: var(--coast-ink); font-size: .77rem; font-weight: 700; letter-spacing: .08em; }
.nav a::after { height: 2px; background: var(--coast-cyan); }
.nav a:hover, .nav a.is-active, .masthead.is-stuck .nav a:hover, .masthead.is-stuck .nav a.is-active { color: var(--coast-cyan-dark); }
.masthead .btn--ghost, .masthead.is-stuck .btn--ghost {
    min-height: 46px;
    padding: 0 24px;
    color: var(--coast-ink);
    border: 0;
    border-radius: 100px;
    background: var(--coast-cyan);
    font-size: .72rem;
}
.masthead .btn--ghost:hover { color: var(--coast-ink); background: #77e4f1; }

.coast-kicker { display: block; color: #fff; font-size: .71rem; font-weight: 800; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; }
.coast-kicker--dark { color: var(--coast-cyan-dark); }
.coast-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 27px;
    border: 0;
    border-radius: 100px;
    background: var(--coast-cyan);
    color: var(--coast-ink);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .25s ease, transform .25s ease;
}
.coast-button:hover { background: #74e2ef; color: var(--coast-ink); transform: translateY(-2px); }
.coast-button--dark { background: var(--coast-ink); color: #fff; }
.coast-button--dark:hover { color: #fff; background: #0c4a56; }
.coast-textlink { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--coast-ink); color: var(--coast-ink); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.coast-textlink:hover { color: var(--coast-cyan-dark); border-color: var(--coast-cyan-dark); }

.coast-hero { position: relative; min-height: 100svh; margin-top: 76px; overflow: hidden; background: var(--coast-deep); color: #fff; }
.coast-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coast-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 28, 35, .62) 0%, rgba(0, 28, 35, .14) 62%, rgba(0, 28, 35, .05)), linear-gradient(0deg, rgba(0, 27, 34, .77), transparent 48%); }
.coast-hero__content { position: relative; z-index: 1; display: flex; min-height: calc(100svh - 76px); padding: clamp(100px, 15vh, 170px) 0 146px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.coast-hero h1 { max-width: 980px; margin: 17px 0 20px; color: #fff; font-size: clamp(4rem, 7.6vw, 8.1rem); font-weight: 800; letter-spacing: -.075em; line-height: .85; }
.coast-hero h1 span { color: var(--coast-cyan); }
.coast-hero__content > p { max-width: 560px; margin: 0; color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.7; }
.coast-hero__rail { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 28px; min-height: 94px; border-top: 1px solid rgba(255,255,255,.26); }
.coast-hero__rail > span, .coast-hero__rail > a:not(.coast-button) { display: flex; align-items: center; gap: 9px; color: #fff; font-size: .77rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.coast-booking { padding: 27px 0; border-bottom: 1px solid var(--coast-line); background: #fff; }
.coast-booking__form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0; align-items: end; }
.coast-booking .field { padding: 0 28px; border-right: 1px solid var(--coast-line); }
.coast-booking .field:first-child { padding-left: 0; }
.coast-booking label { color: #628089; font-size: .65rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.coast-booking input, .coast-booking select { height: 34px; padding: 0; border: 0; background: transparent; color: var(--coast-ink); font-family: inherit; font-size: .95rem; font-weight: 700; }
.coast-booking .coast-button { margin-left: 28px; }

.coast-intro { position: relative; padding: clamp(110px, 12vw, 190px) 0; overflow: hidden; background: var(--coast-ice); }
.coast-intro::before { position: absolute; top: -17px; left: 0; width: 100%; height: 36px; content: ""; background: radial-gradient(28px 19px at 28px 19px, #fff 98%, transparent 100%) 0 0/56px 38px repeat-x; }
.coast-intro__grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(70px, 9vw, 140px); }
.coast-intro__visual { position: relative; min-height: 650px; }
.coast-intro__main { width: 83%; height: 600px; border-radius: 18px; object-fit: cover; }
.coast-intro__small { position: absolute; right: 0; bottom: -22px; width: 43%; aspect-ratio: .86; border: 9px solid var(--coast-ice); border-radius: 18px; object-fit: cover; }
.coast-intro__seal { position: absolute; top: 35px; right: 2%; display: grid; width: 128px; height: 128px; place-content: center; border-radius: 50%; background: var(--coast-orange); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .12em; line-height: 1.6; text-align: center; text-transform: uppercase; transform: rotate(7deg); }
.coast-intro__seal b { font-size: .8rem; }
.coast-intro h2, .coast-heading h2, .coast-story h2, .coast-gallery-preview h2 { margin: 18px 0 30px; color: var(--coast-ink); font-size: clamp(3.1rem, 5.6vw, 6.25rem); font-weight: 800; letter-spacing: -.07em; line-height: .92; }
.coast-intro h2 span, .coast-heading h2 span, .coast-story h2 span, .coast-gallery-preview h2 span { color: var(--coast-cyan-dark); }
.coast-intro__copy > p { max-width: 590px; color: #59727a; font-size: .98rem; line-height: 1.82; }
.coast-intro__copy .coast-lead { color: var(--coast-ink); font-size: 1.12rem; }
.coast-intro__copy .coast-textlink { margin-top: 18px; }
.coast-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; padding-top: 28px; border-top: 1px solid var(--coast-line); }
.coast-stats strong { display: block; color: var(--coast-ink); font-size: 2.25rem; font-weight: 800; letter-spacing: -.05em; }
.coast-stats span { display: block; margin-top: 4px; color: #68828a; font-size: .65rem; font-weight: 700; letter-spacing: .09em; line-height: 1.45; text-transform: uppercase; }
.coast-lineart { pointer-events: none; }
.coast-lineart--sun { position: absolute; top: 70px; right: -55px; width: 210px; height: 210px; border: 3px solid var(--coast-orange); border-radius: 50%; opacity: .65; }
.coast-lineart--sun::before, .coast-lineart--sun::after { position: absolute; top: 50%; left: -60px; width: 330px; height: 3px; content: ""; background: var(--coast-orange); transform: rotate(28deg); }
.coast-lineart--sun::after { transform: rotate(-28deg); }

.coast-rooms { position: relative; padding: clamp(115px, 12vw, 180px) 0 120px; overflow: hidden; background: var(--coast-deep); color: #fff; }
.coast-heading { max-width: 900px; margin-bottom: 64px; }
.coast-heading--center { margin-right: auto; margin-left: auto; text-align: center; }
.coast-rooms .coast-heading h2 { color: #fff; }
.coast-rooms .coast-heading h2 span { color: var(--coast-cyan); }
.coast-heading > p { max-width: 650px; margin: 0 auto; color: #98b5bc; font-size: 1.03rem; line-height: 1.7; }
.coast-room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 42px); }
.coast-room__image { position: relative; display: block; aspect-ratio: .83; overflow: hidden; border-radius: 18px; background: #163d45; }
.coast-room__image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(0,30,37,.52), transparent 45%); opacity: 0; transition: opacity .3s ease; }
.coast-room__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.coast-room__image > span { position: absolute; z-index: 2; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 9px; color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; opacity: 0; text-transform: uppercase; transform: translateY(8px); transition: .3s ease; }
.coast-room:hover .coast-room__image img { transform: scale(1.035); }
.coast-room:hover .coast-room__image::after, .coast-room:hover .coast-room__image > span { opacity: 1; }
.coast-room:hover .coast-room__image > span { transform: none; }
.coast-room__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 0 18px; }
.coast-room__title h3 { max-width: 58%; margin: 0; color: #fff; font-size: clamp(1.35rem, 1.8vw, 1.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.coast-room__title h3 a { color: inherit; }
.coast-room__title strong { flex: none; color: var(--coast-cyan); font-size: .95rem; text-align: right; }
.coast-room__title small { display: block; margin-top: 4px; color: #8ba9b0; font-size: .63rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.coast-room__meta { display: flex; flex-wrap: wrap; gap: 7px 16px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.15); color: #91aeb5; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.coast-center { margin-top: 64px; text-align: center; }
.coast-lineart--palm { position: absolute; right: -10px; bottom: 0; width: 250px; height: 300px; color: var(--coast-orange); opacity: .75; transform: rotate(-7deg); }
.coast-lineart--palm b { position: absolute; right: 78px; bottom: -40px; width: 4px; height: 260px; border-radius: 50%; background: currentColor; transform: rotate(15deg); }
.coast-lineart--palm i { position: absolute; right: 75px; top: 30px; width: 135px; height: 60px; border-top: 4px solid currentColor; border-radius: 50%; transform-origin: right center; }
.coast-lineart--palm i:nth-child(2) { transform: rotate(38deg); }
.coast-lineart--palm i:nth-child(3) { transform: rotate(-44deg); }

.coast-marquee { overflow: hidden; padding: 31px 0 34px; border-top: 1px solid rgba(255,255,255,.1); background: #011b22; color: #fff; white-space: nowrap; }
.coast-marquee > div { display: flex; width: max-content; align-items: center; gap: 30px; animation: coast-marquee 28s linear infinite; }
.coast-marquee span { font-size: clamp(2.8rem, 6vw, 6rem); font-weight: 800; letter-spacing: -.065em; line-height: 1; text-transform: lowercase; }
.coast-marquee i { color: var(--coast-cyan); font-size: 2rem; font-style: normal; }
@keyframes coast-marquee { to { transform: translateX(-50%); } }

.coast-story { padding: clamp(115px, 13vw, 190px) 0; overflow: hidden; background: #fff; }
.coast-story__grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(75px, 10vw, 160px); }
.coast-story__copy .coast-lead { max-width: 580px; margin-bottom: 34px; color: #5c767e; font-size: 1.08rem; line-height: 1.82; }
.coast-story__pictures { position: relative; min-height: 680px; }
.coast-story__pictures img:first-child { width: 87%; height: 640px; margin-left: 13%; border-radius: 18px; object-fit: cover; }
.coast-story__pictures img:nth-child(2) { position: absolute; bottom: -35px; left: -8%; width: 39%; aspect-ratio: .84; border: 9px solid #fff; border-radius: 18px; object-fit: cover; }
.coast-story__pictures > span { position: absolute; top: 28px; left: -24px; padding: 20px 23px; border-radius: 12px; background: var(--coast-orange); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .14em; line-height: 1.7; }

.coast-experiences { padding: clamp(105px, 11vw, 165px) 0; background: var(--coast-ice); }
.coast-experiences .coast-heading { margin-bottom: 65px; }
.coast-exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.coast-exp { position: relative; padding-bottom: 28px; border-bottom: 1px solid var(--coast-line); }
.coast-exp img { width: 100%; aspect-ratio: .86; margin-bottom: 28px; border-radius: 16px; object-fit: cover; }
.coast-exp > span { color: var(--coast-orange); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.coast-exp h3 { margin: 11px 0 13px; color: var(--coast-ink); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 750; letter-spacing: -.045em; line-height: 1.12; }
.coast-exp p { margin: 0; color: #638088; font-size: .91rem; line-height: 1.7; }

.coast-gallery-preview { padding: clamp(110px, 12vw, 180px) 0; background: #fff; }
.coast-gallery-preview__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 62px; }
.coast-gallery-preview__head h2 { margin-bottom: 0; }
.coast-gallery-preview__head .coast-textlink { flex: none; margin-bottom: 10px; }
.coast-gallery-mosaic { display: grid; grid-template-columns: 1.15fr .75fr .9fr; grid-template-rows: 270px 270px; gap: 14px; }
.coast-gallery-mosaic a { display: block; overflow: hidden; border-radius: 13px; }
.coast-gallery-mosaic a:first-child { grid-row: 1 / 3; }
.coast-gallery-mosaic a:nth-child(4) { grid-column: 2 / 4; }
.coast-gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.coast-gallery-mosaic a:hover img { transform: scale(1.035); }

/* Inner pages inherit the same visual language. */
.banner { min-height: 590px; margin: 76px 0 0; border-radius: 0; }
.banner::after { background: linear-gradient(90deg, rgba(0,31,38,.68), rgba(0,31,38,.08)), linear-gradient(0deg, rgba(0,31,38,.46), transparent 55%); }
.banner__inner { padding: 110px 0 70px; align-items: flex-end; }
.banner h1 { max-width: 1000px; color: #fff; font-size: clamp(4rem, 7vw, 7.5rem); font-weight: 800; letter-spacing: -.07em; line-height: .88; }
.banner__intro { max-width: 650px; color: rgba(255,255,255,.86); font-size: 1.08rem; line-height: 1.7; }
.crumbs { color: rgba(255,255,255,.72); }
.crumbs a { color: #fff; }
.section { padding: clamp(100px, 10vw, 150px) 0; }
.section--cream { background: #fff; }
.section--sand { margin: 0; border-radius: 0; background: var(--coast-ice); }
.section--deep { margin: 0; border-radius: 0; background: var(--coast-deep); }
.eyebrow { color: var(--coast-cyan-dark); font-size: .69rem; font-weight: 800; letter-spacing: .18em; }
.title, .display { color: var(--coast-ink); font-size: clamp(3rem, 5.3vw, 5.6rem); font-weight: 800; letter-spacing: -.065em; line-height: .93; }
.section--deep .title, .section--deep .display { color: #fff; }
.flourish { width: 70px; height: 3px; background: var(--coast-cyan); }
.flourish::after { display: none; }
.lead { color: #536f77; font-size: 1.06rem; line-height: 1.8; }
.btn { border-radius: 100px; font-family: inherit; font-weight: 800; letter-spacing: .08em; }
.btn--solid, .btn--gold { border-color: var(--coast-cyan); background: var(--coast-cyan); color: var(--coast-ink); }
.btn--solid:hover, .btn--gold:hover { border-color: #74e2ef; background: #74e2ef; color: var(--coast-ink); }
.btn--line { border-color: var(--coast-ink); color: var(--coast-ink); }
.btn--line:hover { border-color: var(--coast-ink); background: var(--coast-ink); color: #fff; }
.room-card, .stay-card, .menu-card, .enquiry { border: 1px solid var(--coast-line); border-radius: 16px; box-shadow: none; }
.room-card__media { border-radius: 15px 15px 0 0; }
.room-card__tag { background: var(--coast-cyan); color: var(--coast-ink); }
.room-card__price, .room-card__rate b { color: var(--coast-cyan-dark); }
.room-card__body h3, .stay-card h3, .menu-card h3 { font-family: inherit; font-weight: 750; letter-spacing: -.04em; }
.gallery-filter { border-radius: 0; box-shadow: none; background: #fff; }
.gallery-filter button { border-radius: 100px; }
.gallery-filter button:hover, .gallery-filter button.is-active { background: var(--coast-cyan); color: var(--coast-ink); }
.gallery-photo { border-radius: 12px; box-shadow: none; }
.panorama, .location-panel, .cta { margin: 0; border-radius: 0; }
.cta::after { background: linear-gradient(90deg, rgba(0,35,43,.8), rgba(0,35,43,.28)); }
.cta h2 { color: #fff; font-family: inherit; font-size: clamp(3.2rem, 6vw, 6.6rem); font-weight: 800; letter-spacing: -.07em; line-height: .9; }
.footer { margin: 0; border-radius: 0; background: #011b22; }
.footer h4 { color: var(--coast-cyan); }

@media (max-width: 1100px) {
    .coast-intro__grid, .coast-story__grid { gap: 60px; }
    .coast-intro__visual { min-height: 560px; }
    .coast-intro__main { height: 520px; }
    .coast-story__pictures { min-height: 580px; }
    .coast-story__pictures img:first-child { height: 550px; }
}

@media (max-width: 900px) {
    .shell, .shell--wide { width: min(100% - 36px, 720px); }
    .masthead, .masthead.is-stuck { inset: 0 0 auto; padding: 0; }
    .masthead__inner, .masthead.is-stuck .masthead__inner { min-height: 68px; padding: 0; }
    .brand img, .masthead.is-stuck .brand img { height: 48px; }
    .burger span, .masthead.is-stuck .burger span { background: var(--coast-ink); }
    .coast-hero { min-height: 850px; margin-top: 68px; }
    .coast-hero__content { min-height: 780px; padding-bottom: 170px; }
    .coast-hero__rail { grid-template-columns: 1fr auto; min-height: 120px; }
    .coast-hero__rail > a:not(.coast-button) { display: none; }
    .coast-booking__form { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
    .coast-booking .field:nth-child(2) { border-right: 0; }
    .coast-booking .field:nth-child(3) { padding-left: 0; }
    .coast-booking .coast-button { margin-left: 28px; }
    .coast-intro__grid, .coast-story__grid { grid-template-columns: 1fr; }
    .coast-intro__visual { width: min(650px, 100%); }
    .coast-intro__copy { max-width: 670px; }
    .coast-room-grid { grid-template-columns: 1fr 1fr; }
    .coast-room:last-child { grid-column: 1 / 3; width: calc(50% - 13px); margin: auto; }
    .coast-story__copy { max-width: 700px; }
    .coast-story__pictures { width: min(700px, 100%); margin-left: auto; }
    .coast-exp-grid { grid-template-columns: 1fr 1fr; }
    .coast-exp:last-child { grid-column: 1 / 3; width: calc(50% - 13px); }
    .banner { min-height: 520px; margin-top: 68px; border-radius: 0; }
    .panorama, .location-panel, .cta, .footer, .section--sand, .section--deep { margin-inline: 0; border-radius: 0; }
}

@media (max-width: 620px) {
    .shell, .shell--wide { width: calc(100% - 30px); }
    .brand__wordmark { display: grid; }
    .coast-hero { min-height: 720px; }
    .coast-hero__shade { background: linear-gradient(0deg, rgba(0,27,34,.83), rgba(0,27,34,.12) 75%); }
    .coast-hero__content { min-height: 655px; padding: 95px 0 150px; justify-content: flex-end; }
    .coast-hero h1 { margin-top: 13px; font-size: clamp(3.25rem, 15vw, 5rem); }
    .coast-hero__content > p { max-width: 90%; font-size: .94rem; }
    .coast-hero__rail { grid-template-columns: 1fr auto; gap: 10px; min-height: 100px; }
    .coast-hero__rail > span { max-width: 120px; font-size: .6rem; line-height: 1.5; }
    .coast-hero__rail .coast-button { min-height: 46px; padding: 0 17px; font-size: .62rem; }
    .coast-booking { padding: 28px 0; }
    .coast-booking__form { grid-template-columns: 1fr 1fr; gap: 20px 0; }
    .coast-booking .field { padding: 0 15px; }
    .coast-booking .field:nth-child(3) { padding-left: 0; }
    .coast-booking .coast-button { grid-column: 1 / 3; width: 100%; margin: 5px 0 0; }
    .coast-intro, .coast-rooms, .coast-story, .coast-experiences, .coast-gallery-preview { padding: 92px 0; }
    .coast-intro__grid { gap: 76px; }
    .coast-intro__visual { min-height: 430px; }
    .coast-intro__main { width: 88%; height: 405px; }
    .coast-intro__small { width: 43%; border-width: 6px; }
    .coast-intro__seal { top: 20px; width: 94px; height: 94px; font-size: .52rem; }
    .coast-intro__seal b { font-size: .61rem; }
    .coast-intro h2, .coast-heading h2, .coast-story h2, .coast-gallery-preview h2 { font-size: clamp(2.8rem, 13vw, 4.35rem); }
    .coast-stats { gap: 10px; }
    .coast-stats strong { font-size: 1.8rem; }
    .coast-room-grid, .coast-exp-grid { grid-template-columns: 1fr; }
    .coast-room:last-child, .coast-exp:last-child { grid-column: auto; width: 100%; }
    .coast-room__image { aspect-ratio: 1 / 1.05; }
    .coast-heading { margin-bottom: 46px; }
    .coast-marquee { padding: 24px 0 27px; }
    .coast-marquee span { font-size: 3rem; }
    .coast-story__grid { gap: 68px; }
    .coast-story__pictures { min-height: 440px; }
    .coast-story__pictures img:first-child { width: 91%; height: 420px; margin-left: 9%; }
    .coast-story__pictures img:nth-child(2) { bottom: -20px; left: -2%; width: 43%; border-width: 6px; }
    .coast-story__pictures > span { top: 18px; left: -5px; padding: 14px; font-size: .56rem; }
    .coast-exp img { aspect-ratio: 1.15; }
    .coast-gallery-preview__head { display: block; }
    .coast-gallery-preview__head .coast-textlink { margin-top: 28px; }
    .coast-gallery-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 250px 190px 190px; gap: 8px; }
    .coast-gallery-mosaic a:first-child { grid-column: 1 / 3; grid-row: auto; }
    .coast-gallery-mosaic a:nth-child(4) { grid-column: auto; }
    .banner { min-height: 500px; }
    .banner h1 { font-size: clamp(3.3rem, 15vw, 5.4rem); }
    .title, .display { font-size: clamp(2.8rem, 13vw, 4.2rem); }
    .cta { padding: 100px 0; }
    .footer { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .coast-marquee > div { animation: none; }
}

/* ========================================================================== 
   Completed inner-page system
   ========================================================================== */

.skip-link {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    background: #fff;
    color: var(--ink);
    transform: translateY(-150%);
    transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 4px;
}

.banner__intro {
    max-width: 56ch;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 1.06rem;
}

.collection-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.collection-nav a {
    padding: 12px 20px;
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: all .3s var(--ease);
}

.collection-nav a:hover { border-color: var(--teal); background: var(--teal); color: #fff; }
.collection { scroll-margin-top: 72px; }

.collection__head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 60px;
    align-items: end;
    padding-bottom: 36px;
    margin-bottom: 42px;
    border-bottom: 1px solid var(--line);
}

.collection__head .eyebrow { margin: 0 0 12px; }
.collection__head p { max-width: 46ch; margin: 0; color: var(--muted); }

.collection__number {
    margin-right: 18px;
    color: var(--gold);
    font-family: var(--serif);
    font-size: 1.05rem;
    font-style: italic;
}

.room-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 90px;
    align-items: start;
}

.stay-card {
    position: sticky;
    top: 104px;
    padding: 36px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 24px 60px rgba(6, 35, 48, .09);
}

.stay-card__label {
    display: block;
    color: var(--faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.stay-card__rate { margin: 7px 0 26px; color: var(--ink); font-family: var(--serif); font-size: 2rem; }
.stay-card__rate small { color: var(--muted); font-family: var(--sans); font-size: 12px; }
.stay-card__meta { display: grid; gap: 12px; margin-bottom: 28px; padding: 24px 0; border-block: 1px solid var(--line); }
.stay-card__meta span { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.stay-card .btn { width: 100%; justify-content: center; }
.stay-card__call { display: block; margin-top: 16px; color: var(--muted); font-size: 12px; text-align: center; }
.stay-card__call:hover { color: var(--teal); }

.room-gallery {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: repeat(2, 245px);
    gap: 14px;
    margin-top: 92px;
}

.room-gallery a { overflow: hidden; }
.room-gallery__main { grid-row: span 2; }
.room-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.room-gallery a:hover img { transform: scale(1.05); }

.feature-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin: 0; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: center; gap: 12px; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #cfe0e6; font-size: 14px; }
.feature-list span { display: inline-flex; color: var(--aqua); }

.menu-card { position: relative; overflow: hidden; }
.menu-card__number { position: absolute; top: 20px; right: 24px; color: var(--sand); font-family: var(--serif); font-size: 3.3rem; font-style: italic; line-height: 1; opacity: .65; }
.dining-feature__image { overflow: hidden; border-radius: 280px 280px 4px 4px; }
.dining-feature__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; background: rgba(255, 255, 255, .12); }
.story-card { padding: 46px 38px; background: var(--ink); }
.story-card > span { color: var(--gold); font-family: var(--serif); font-size: 1rem; font-style: italic; }
.story-card h3 { margin: 24px 0 14px; font-size: 1.55rem; }
.story-card p { margin: 0; color: #aac2cc; font-size: 14.5px; }
.stat-row--three { grid-template-columns: repeat(3, 1fr); }

.gallery-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -20px 0 48px; }
.gallery-filter button { padding: 10px 18px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--faint); font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.gallery-filter button:hover,
.gallery-filter button.is-active { border-color: var(--teal); color: var(--teal); }

.gallery-masonry { columns: 4 250px; column-gap: 14px; }
.gallery-photo { position: relative; display: block; overflow: hidden; margin: 0 0 14px; break-inside: avoid; background: var(--sand-soft); }
.gallery-photo[hidden] { display: none; }
.gallery-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease), filter .5s var(--ease); }
.gallery-photo--tall img { aspect-ratio: 3 / 4; }
.gallery-photo span { position: absolute; right: 18px; bottom: 16px; z-index: 2; color: #fff; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all .35s var(--ease); }
.gallery-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 35, 48, .65), transparent 48%); opacity: 0; transition: opacity .4s var(--ease); }
.gallery-photo:hover img { transform: scale(1.045); }
.gallery-photo:hover::after,
.gallery-photo:hover span { opacity: 1; }
.gallery-photo:hover span { transform: none; }

.enquiry { padding: 46px; border: 1px solid var(--line); background: #fff; box-shadow: 0 24px 60px rgba(6, 35, 48, .08); }
.enquiry__form { display: grid; gap: 23px; margin-top: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field label { color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.form-field input,
.form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 13px 15px; outline: none; transition: border-color .25s ease, background .25s ease; }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--teal); background: #fff; }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field .is-invalid { border-color: #a5443a; }
.form-field small { color: #a5443a; font-size: 12px; }
.enquiry__form .btn { justify-self: start; }

.alert { margin-bottom: 28px; padding: 14px 16px; border-left: 3px solid; font-size: 14px; }
.alert--success { border-color: var(--aqua); background: var(--aqua-soft); color: var(--deep); }
.alert--error { border-color: #a5443a; background: #f9e9e6; color: #74332c; }

.location-panel { position: relative; min-height: 640px; display: flex; align-items: center; justify-content: flex-end; padding: 70px max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))); overflow: hidden; background: var(--ink); }
.location-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.location-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 35, 48, .06), rgba(6, 35, 48, .62)); }
.location-panel__card { position: relative; z-index: 2; width: min(470px, 100%); padding: 48px; background: rgba(252, 250, 246, .95); box-shadow: 0 28px 70px rgba(6, 35, 48, .24); }
.location-panel__card p { margin: 22px 0 28px; color: var(--muted); }

@media (max-width: 1100px) {
    .room-intro { gap: 54px; }
    .room-gallery { grid-template-rows: repeat(2, 190px); }
    .feature-layout { gap: 60px; }
}

@media (max-width: 900px) {
    .collection__head,
    .room-intro,
    .feature-layout { grid-template-columns: 1fr; gap: 38px; }
    .stay-card { position: static; }
    .room-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 320px repeat(2, 190px); margin-top: 58px; }
    .room-gallery__main { grid-column: span 2; grid-row: span 1; }
    .story-grid { grid-template-columns: 1fr; }
    .location-panel { min-height: 560px; align-items: flex-end; }
}

@media (max-width: 620px) {
    .banner { min-height: 72svh; }
    .banner__inner { padding-bottom: 44px; }
    .banner__intro { font-size: .98rem; }
    .collection__head { gap: 20px; }
    .room-gallery { grid-template-rows: 250px repeat(2, 150px); gap: 8px; }
    .feature-list { grid-template-columns: 1fr; }
    .story-card { padding: 36px 26px; }
    .stat-row--three { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .stat-row--three .stat__value { font-size: 1.7rem; }
    .gallery-masonry { columns: 2 140px; column-gap: 8px; }
    .gallery-photo { margin-bottom: 8px; }
    .gallery-filter { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
    .gallery-filter button { flex: 0 0 auto; }
    .enquiry { padding: 32px 22px; }
    .form-row { grid-template-columns: 1fr; }
    .enquiry__form .btn { width: 100%; justify-content: center; }
    .location-panel { padding: 40px var(--gutter); }
    .location-panel__card { padding: 32px 24px; }
}

@media (max-width: 420px) {
    .brand img { height: 64px; }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Signature panorama and visible rate guide
   -------------------------------------------------------------------------- */
.panorama {
    position: relative;
    min-height: 78svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--ink);
}

.panorama > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.panorama:hover > img { transform: scale(1.025); }

.panorama__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 24, 34, .88) 0%, rgba(3, 24, 34, .43) 50%, rgba(3, 24, 34, .12) 100%),
        linear-gradient(0deg, rgba(3, 24, 34, .5), transparent 42%);
}

.panorama__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 84px;
}

.panorama__copy { max-width: 720px; }
.panorama__copy .eyebrow { color: var(--sand); }
.panorama__copy h2 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.03; }
.panorama__copy h2 em { color: var(--sand); font-weight: 400; }
.panorama__copy p { max-width: 57ch; margin: 28px 0 34px; color: rgba(255, 255, 255, .8); }

.panorama__coordinates {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2em;
    white-space: nowrap;
}

.panorama__coordinates i { width: 44px; height: 1px; background: var(--gold); }

.rate-guide {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, 1fr);
    margin-top: 64px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 24px 65px rgba(6, 35, 48, .08);
}

.rate-guide__intro { padding: 34px 36px; background: var(--ink); color: #bfd0d7; }
.rate-guide__intro .eyebrow { margin-bottom: 9px; color: var(--aqua); }
.rate-guide__intro h3 { margin-bottom: 10px; color: #fff; font-size: 1.45rem; }
.rate-guide__intro p { margin: 0; font-size: 12.5px; line-height: 1.65; }

.rate-guide__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    border-left: 1px solid var(--line);
    transition: background .35s var(--ease), color .35s var(--ease);
}

.rate-guide__item::after { content: '→'; position: absolute; right: 22px; bottom: 18px; color: var(--gold); transition: transform .3s var(--ease); }
.rate-guide__item:hover { background: var(--sand-soft); }
.rate-guide__item:hover::after { transform: translateX(4px); }
.rate-guide__item > span { min-height: 37px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; line-height: 1.45; text-transform: uppercase; }
.rate-guide__item strong { margin-top: 12px; color: var(--ink); font-family: var(--serif); font-size: 1.38rem; font-weight: 400; }
.rate-guide__item small { color: var(--faint); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }

/* Full gallery: 117 local photographs, editorial rather than generic tiles. */
.gallery-filter {
    position: sticky;
    z-index: 8;
    top: 76px;
    padding: 14px 18px;
    border: 1px solid rgba(226, 219, 208, .8);
    background: rgba(252, 250, 246, .92);
    box-shadow: 0 14px 35px rgba(6, 35, 48, .06);
    backdrop-filter: blur(14px);
}

.gallery-filter button sup { margin-left: 3px; color: var(--gold); font-size: 8px; vertical-align: super; }
.gallery-masonry { column-gap: 18px; }
.gallery-photo { margin-bottom: 18px; box-shadow: 0 10px 34px rgba(6, 35, 48, .08); }
.gallery-photo img { aspect-ratio: auto; min-height: 230px; max-height: 420px; }
.gallery-photo--tall img { min-height: 440px; max-height: 600px; }

.gallery-photo span {
    right: 20px;
    bottom: 18px;
    left: 20px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-photo span b { color: var(--sand); font-family: var(--serif); font-size: 13px; font-style: italic; font-weight: 400; }
.gallery-photo::after { opacity: .18; }
.gallery-photo:hover::after { opacity: 1; }

@media (max-width: 1100px) {
    .rate-guide { grid-template-columns: 1fr 1fr; }
    .rate-guide__intro { grid-row: span 2; }
}

@media (max-width: 760px) {
    .panorama { min-height: 680px; }
    .panorama__veil { background: linear-gradient(0deg, rgba(3, 24, 34, .9), rgba(3, 24, 34, .12) 85%); }
    .panorama__inner { flex-direction: column; align-items: flex-start; gap: 34px; padding-bottom: 58px; }
    .panorama__coordinates { display: none; }
    .rate-guide { grid-template-columns: 1fr; }
    .rate-guide__intro { grid-row: auto; }
    .rate-guide__item { min-height: 136px; border-top: 1px solid var(--line); border-left: 0; }
    .gallery-filter { top: 68px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
    .gallery-photo img { min-height: 170px; max-height: 320px; }
    .gallery-photo--tall img { min-height: 320px; max-height: 460px; }
}

/* ========================================================================== 
   Tropical beach direction — lagoon light, warm sand and organic shapes
   ========================================================================== */
:root {
    --ink: #063b4b;
    --deep: #07566a;
    --teal: #078a8b;
    --aqua: #3ccbbb;
    --aqua-soft: #dff7f2;
    --sand: #f0d9b5;
    --sand-soft: #fbf1e2;
    --cream: #fffdf8;
    --gold: #efb84b;
    --coral: #f47862;
    --coral-deep: #dc604e;
    --line: #dce9e5;
    --text: #123e49;
    --muted: #58757c;
    --faint: #89a3a7;
    --radius: 22px;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: 'Trebuchet MS', 'Avenir Next', Avenir, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    background:
        radial-gradient(circle at 8% 18%, rgba(60, 203, 187, .08), transparent 22%),
        radial-gradient(circle at 94% 42%, rgba(239, 184, 75, .08), transparent 20%),
        var(--cream);
}

h1, h2, h3, h4 {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: -.035em;
}

.display { font-size: clamp(2.2rem, 4.7vw, 3.8rem); }
.title { font-size: clamp(1.9rem, 3.5vw, 2.85rem); }
.lead { color: var(--muted); }

.eyebrow {
    padding: 8px 13px;
    border: 1px solid rgba(7, 138, 139, .15);
    border-radius: 100px;
    background: rgba(223, 247, 242, .76);
    color: var(--teal);
    font-size: 9px;
    letter-spacing: .22em;
}

.section--deep .eyebrow,
.panorama .eyebrow,
.cta .eyebrow {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .1);
    color: #aaf1e7;
}

.flourish {
    width: 54px;
    height: 5px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--coral), var(--gold));
}

.flourish::after { display: none; }

.btn {
    border-radius: 100px;
    letter-spacing: .14em;
    padding: 16px 28px;
}

.btn--gold {
    border-color: var(--coral);
    background: var(--coral);
    color: #fff;
    box-shadow: 0 12px 30px rgba(244, 120, 98, .3);
}

.btn--gold:hover { border-color: var(--coral-deep); background: var(--coral-deep); color: #fff; transform: translateY(-2px); }
.btn--solid { border-color: var(--teal); background: var(--teal); box-shadow: 0 12px 30px rgba(7, 138, 139, .2); }
.btn--solid:hover { border-color: var(--deep); background: var(--deep); transform: translateY(-2px); }
.btn--line { border-color: rgba(7, 138, 139, .3); color: var(--teal); }
.btn--line:hover { border-color: var(--teal); background: var(--teal); }

/* Floating glass navigation */
.masthead {
    inset: 16px 0 auto;
    padding: 0 18px;
}

.masthead::before { display: none; }

.masthead__inner {
    min-height: 76px;
    padding: 8px 12px 8px 20px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 100px;
    background: rgba(4, 57, 70, .34);
    box-shadow: 0 16px 45px rgba(1, 32, 42, .13);
    backdrop-filter: blur(18px) saturate(130%);
    transition: all .4s var(--ease);
}

.masthead.is-stuck { padding: 0 18px; background: transparent; box-shadow: none; }
.masthead.is-stuck .masthead__inner { min-height: 66px; border-color: rgba(7, 138, 139, .12); background: rgba(255, 253, 248, .94); box-shadow: 0 14px 38px rgba(6, 59, 75, .12); }
.brand { gap: 11px; }
.brand img { height: 56px; }
.masthead.is-stuck .brand img { height: 48px; }

.brand__wordmark { display: grid; color: #fff; line-height: 1; transition: color .3s ease; }
.brand__wordmark b { font-size: 17px; letter-spacing: -.02em; }
.brand__wordmark small { margin-top: 5px; font-size: 7px; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; }
.masthead.is-stuck .brand__wordmark { color: var(--ink); }
.nav { gap: 26px; }
.nav a { font-size: 10px; letter-spacing: .13em; }
.masthead .btn { padding: 14px 23px; border-color: transparent; background: var(--coral); box-shadow: none; }
.masthead .btn:hover { border-color: #fff; background: #fff; color: var(--coral-deep); }
.masthead.is-stuck .btn--ghost { border-color: var(--coral); background: var(--coral); color: #fff; }

/* Brighter, less formal hero */
.hero {
    width: auto;
    min-height: 100svh;
    margin: 0 12px;
    border-radius: 0 0 44px 44px;
}

.hero__media::after {
    background:
        linear-gradient(90deg, rgba(3, 49, 62, .83) 0%, rgba(3, 49, 62, .44) 42%, rgba(3, 49, 62, .08) 72%),
        linear-gradient(0deg, rgba(3, 49, 62, .34), transparent 48%);
}

.hero__inner { padding: 175px 0 140px; }
.hero__eyebrow { padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 100px; background: rgba(255, 255, 255, .1); font-size: 9px; backdrop-filter: blur(10px); }
.hero__eyebrow::before { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(239, 184, 75, .18); }

.hero h1 {
    max-width: 13ch;
    font-family: var(--sans);
    font-size: clamp(3rem, 7.2vw, 6.1rem);
    font-weight: 700;
    letter-spacing: -.065em;
}

.hero h1 em { color: #ffe4ac; font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
.hero__text { max-width: 49ch; color: rgba(255, 255, 255, .9); font-size: 1.08rem; }
.hero__scroll { display: none; }

.hero__island-card {
    position: absolute;
    z-index: 3;
    right: 42px;
    bottom: 84px;
    width: 205px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 24px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: 0 18px 50px rgba(2, 34, 43, .18);
    backdrop-filter: blur(16px);
}

.hero__island-card > span { display: flex; align-items: center; gap: 8px; font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero__island-card b { display: block; margin: 13px 0; padding: 13px 0; border-block: 1px solid rgba(255, 255, 255, .22); font-size: 1.22rem; }
.hero__sun { width: 12px; height: 12px; border: 2px solid #ffe093; border-radius: 50%; }
.hero__sun--set { background: var(--coral); border-color: var(--coral); }

.booking { margin-top: -42px; }
.booking__card { border: 0; border-radius: 24px; box-shadow: 0 25px 65px rgba(6, 59, 75, .14); }
.field input, .field select { border-bottom-color: #cfe2de; }

/* Organic sections and imagery */
.section { padding: 104px 0; }
.section--sand {
    margin: 0 12px;
    border-radius: 44px;
    background:
        radial-gradient(circle at 94% 8%, rgba(60, 203, 187, .14), transparent 24%),
        radial-gradient(circle at 4% 92%, rgba(244, 120, 98, .1), transparent 25%),
        var(--sand-soft);
}

.section--deep {
    margin: 0 12px;
    border-radius: 44px;
    background:
        radial-gradient(circle at 90% 0%, rgba(60, 203, 187, .22), transparent 30%),
        linear-gradient(135deg, #063b4b, #075b69);
}

.watermark { opacity: .035; }
.arch { border-radius: 48% 48% 28px 28px / 30% 30% 28px 28px; box-shadow: 0 28px 70px rgba(6, 59, 75, .15); }
.arch--wide { border-radius: 36px 36px 110px 36px; }
.stack__sub { border: 7px solid var(--cream); border-radius: 28px 8px 28px 28px; }

.stat-row { border-top-color: #d6e6e2; }
.stat__value { color: var(--coral); font-family: var(--sans); font-weight: 700; }

.room-card { border: 0; border-radius: 26px; background: #fff; box-shadow: 0 18px 55px rgba(6, 59, 75, .09); }
.room-card:hover { box-shadow: 0 30px 75px rgba(6, 59, 75, .16); }
.room-card__media { margin: 8px; border-radius: 20px; }
.room-card__tag { top: 14px; left: 14px; border-radius: 100px; background: rgba(255, 253, 248, .91); color: var(--teal); }
.room-card__rate { right: 14px; bottom: 14px; border-radius: 17px; background: rgba(6, 59, 75, .9); backdrop-filter: blur(8px); }
.room-card__rate small { color: #aaf1e7; }
.room-card__price { color: var(--coral-deep); font-family: var(--sans); font-weight: 700; }
.room-card__body h3 { font-size: 1.34rem; }

.exp { min-height: 500px; border-radius: 30px; }
.exp:nth-child(2) { transform: translateY(26px); }
.exp::after { background: linear-gradient(to top, rgba(3, 49, 62, .9) 4%, rgba(3, 49, 62, .08) 70%); }
.exp__body h3 { font-family: var(--sans); font-weight: 700; }

.inc-grid { gap: 14px; background: transparent; }
.inc { border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.inc:hover { border-color: rgba(7, 138, 139, .28); box-shadow: 0 20px 50px rgba(6, 59, 75, .08); }
.inc__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; background: var(--aqua-soft); }

.pill { border-color: rgba(170, 241, 231, .25); border-radius: 100px; background: rgba(255, 255, 255, .06); }

/* Tropical inner-page banners */
.banner {
    min-height: 74svh;
    margin: 0 12px;
    border-radius: 0 0 44px 44px;
}

.banner::after { background: linear-gradient(90deg, rgba(3, 49, 62, .84), rgba(3, 49, 62, .28) 56%, rgba(3, 49, 62, .06)); }
.banner__inner { padding-bottom: 64px; }
.banner h1 { max-width: 15ch; font-family: var(--sans); font-size: clamp(2.7rem, 5.8vw, 4.8rem); font-weight: 700; letter-spacing: -.055em; }
.banner__intro { color: rgba(255, 255, 255, .9); }

.collection-nav a { border-color: rgba(7, 138, 139, .2); border-radius: 100px; background: #fff; }
.collection-nav a:hover { border-color: var(--teal); background: var(--teal); }
.rate-guide { overflow: hidden; border: 0; border-radius: 28px; box-shadow: 0 24px 65px rgba(6, 59, 75, .11); }
.rate-guide__intro { background: linear-gradient(145deg, var(--teal), var(--deep)); }
.rate-guide__item:hover { background: var(--aqua-soft); }

.stay-card { border: 0; border-radius: 26px; box-shadow: 0 25px 65px rgba(6, 59, 75, .12); }
.room-gallery { gap: 10px; }
.room-gallery a { border-radius: 22px; }

.menu-card { border: 0; border-radius: 26px; box-shadow: 0 18px 50px rgba(6, 59, 75, .08); }
.menu-card__number { color: #bdeee6; }
.story-grid { gap: 14px; background: transparent; }
.story-card { border: 1px solid rgba(255, 255, 255, .1); border-radius: 26px; background: rgba(255, 255, 255, .06); }
.story-card > span { color: #aaf1e7; }

.panorama { margin: 12px; border-radius: 44px; }
.panorama__veil { background: linear-gradient(90deg, rgba(3, 49, 62, .84), rgba(3, 49, 62, .18) 68%); }
.panorama__copy h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.055em; }
.panorama__copy h2 em { color: #ffe4ac; font-family: var(--serif); }

.gal-item { border-radius: 24px; }
.gallery-filter { border: 1px solid rgba(7, 138, 139, .12); border-radius: 100px; background: rgba(255, 253, 248, .91); }
.gallery-filter button { border-radius: 100px; }
.gallery-filter button:hover, .gallery-filter button.is-active { border-color: transparent; background: var(--aqua-soft); color: var(--teal); }
.gallery-photo { border-radius: 24px; box-shadow: 0 12px 36px rgba(6, 59, 75, .1); }

.enquiry { border: 0; border-radius: 28px; box-shadow: 0 25px 65px rgba(6, 59, 75, .11); }
.form-field input, .form-field textarea { border-color: #d8e7e3; border-radius: 14px; background: #f9fcfa; }
.location-panel { margin: 0 12px; border-radius: 44px; }
.location-panel__card { border-radius: 28px; }

.cta { margin: 12px; border-radius: 44px; }
.cta::after { background: linear-gradient(135deg, rgba(3, 49, 62, .83), rgba(7, 138, 139, .48)); }
.cta h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.045em; }

.footer { margin: 70px 12px 12px; border-radius: 44px; background: linear-gradient(140deg, #043643, #07586a); }
.footer h4 { color: #aaf1e7; }

@media (max-width: 1100px) {
    .brand__wordmark { display: none; }
    .hero__island-card { display: none; }
}

@media (max-width: 900px) {
    .masthead { inset: 10px 0 auto; padding: 0 10px; }
    .masthead.is-stuck { padding: 0 10px; }
    .masthead__inner { min-height: 68px; padding: 6px 12px 6px 16px; }
    .brand img { height: 51px; }
    .brand__wordmark { display: grid; }
    .masthead.is-stuck .brand img { height: 45px; }
    .hero, .banner { margin: 0 6px; border-radius: 0 0 30px 30px; }
    .hero__inner { padding-top: 150px; }
    .section--sand, .section--deep, .panorama, .cta, .location-panel { margin-inline: 6px; border-radius: 30px; }
    .footer { margin-inline: 6px; border-radius: 30px; }
    .exp:nth-child(2) { transform: none; }
    .gallery-filter { border-radius: 18px; }
}

@media (max-width: 380px) {
    .brand__wordmark { display: none; }
}

@media (max-width: 620px) {
    .section { padding: 76px 0; }
    .hero h1 { font-size: clamp(2.75rem, 13vw, 4rem); }
    .hero__text { font-size: 1rem; }
    .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
    .booking { padding-top: 24px; }
    .booking__card { border-radius: 22px; }
    .head-center { margin-bottom: 46px; }
    .room-card__media { aspect-ratio: 1 / .82; }
    .gal-grid { gap: 8px; }
    .gal-item { border-radius: 16px; }
    .gallery-photo { border-radius: 16px; }
    .panorama__copy h2 { font-size: 2.55rem; }
    .cta { padding: 84px 0; }
    .footer { margin-top: 40px; padding-top: 68px; }
}

/* Final cascade lock: keeps the coastal system above legacy theme layers. */
body { background: #fff; color: var(--coast-ink); font-family: "Segoe UI", Arial, sans-serif; }
h1, h2, h3, h4, .display, .title { font-family: "Segoe UI", Arial, sans-serif; }
.masthead, .masthead.is-stuck { inset: 0 0 auto; padding: 0; background: #fff; border-bottom: 1px solid rgba(6,44,53,.08); box-shadow: none; }
.masthead__inner, .masthead.is-stuck .masthead__inner { min-height: 76px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.brand img, .masthead.is-stuck .brand img { height: 54px; }
.brand__light { display: none !important; }
.brand__dark { display: block !important; }
.brand__wordmark b { color: var(--coast-ink); font-family: inherit; }
.brand__wordmark small { color: #608089; }
.nav a, .masthead.is-stuck .nav a { color: var(--coast-ink); }
.nav a:hover, .nav a.is-active, .masthead.is-stuck .nav a:hover, .masthead.is-stuck .nav a.is-active { color: var(--coast-cyan-dark); }
.nav a::after { background: var(--coast-cyan); }
.masthead .btn--ghost, .masthead.is-stuck .btn--ghost { min-height: 46px; padding: 0 24px; border: 0; border-radius: 100px; background: var(--coast-cyan); color: var(--coast-ink); }
.masthead .btn--ghost:hover { background: #74e2ef; color: var(--coast-ink); }
.coast-button { border-radius: 100px; background: var(--coast-cyan); color: var(--coast-ink); }
.coast-button:hover { background: #74e2ef; color: var(--coast-ink); }
.coast-button--dark { background: var(--coast-ink); color: #fff; }
.coast-button--dark:hover { background: #0c4a56; color: #fff; }
.banner { margin: 76px 0 0; border-radius: 0; }
.section--sand, .section--deep, .panorama, .location-panel, .cta { margin-inline: 0; border-radius: 0; }
.section--sand { background: var(--coast-ice); }
.section--deep { background: var(--coast-deep); }
.room-card, .stay-card, .menu-card, .enquiry { border-radius: 16px; box-shadow: none; }
.gallery-photo { border-radius: 12px; box-shadow: none; }
.cta h2 { font-family: inherit; font-weight: 800; }
.footer { margin: 0; border-radius: 0; background: #011b22; }

@media (max-width: 900px) {
    .masthead, .masthead.is-stuck { inset: 0 0 auto; padding: 0; }
    .masthead__inner, .masthead.is-stuck .masthead__inner { min-height: 68px; padding: 0; }
    .brand img, .masthead.is-stuck .brand img { height: 48px; }
    .burger span, .masthead.is-stuck .burger span { background: var(--coast-ink); }
    .banner { margin-top: 68px; border-radius: 0; }
    .section--sand, .section--deep, .panorama, .location-panel, .cta, .footer { margin-inline: 0; border-radius: 0; }
}

@media (max-width: 620px) {
    .footer { margin-top: 0; }
}

/* ========================================================================== 
   ATELIER ISLAND — quiet luxury direction
   ========================================================================== */
:root {
    --at-ink: #18312f;
    --at-deep: #102826;
    --at-ivory: #f7f4ed;
    --at-sand: #e9e1d3;
    --at-bronze: #a67b4f;
    --at-muted: #6f7874;
    --at-rule: rgba(24, 49, 47, .17);
    --at-serif: "Iowan Old Style", "Palatino Linotype", Baskerville, Georgia, serif;
    --at-sans: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

body { background: var(--at-ivory); color: var(--at-ink); font-family: var(--at-sans); }
h1, h2, h3, h4, .display, .title { font-family: var(--at-serif); font-weight: 400; }
.shell { width: min(1180px, calc(100% - 64px)); }
.shell--wide { width: min(1400px, calc(100% - 72px)); }

.masthead, .masthead.is-stuck { position: fixed; inset: 0 0 auto; padding: 0; border: 0; border-bottom: 1px solid rgba(24,49,47,.1); background: rgba(247,244,237,.96); box-shadow: none; backdrop-filter: blur(14px); }
.masthead__inner, .masthead.is-stuck .masthead__inner { min-height: 86px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.brand { gap: 13px; }
.brand img, .masthead.is-stuck .brand img { width: 40px; height: 66px; object-fit: contain; }
.brand__light { display: none !important; }
.brand__dark { display: block !important; }
.brand__wordmark b { color: var(--at-ink); font-family: var(--at-serif); font-size: 1.18rem; font-weight: 400; letter-spacing: .01em; }
.brand__wordmark small { margin-top: 6px; color: #78827e; font-family: var(--at-sans); font-size: .54rem; letter-spacing: .24em; }
.nav { gap: clamp(22px, 2.45vw, 43px); }
.nav a, .masthead.is-stuck .nav a { color: var(--at-ink); font-size: .67rem; font-weight: 600; letter-spacing: .18em; }
.nav a::after { bottom: -11px; height: 1px; background: var(--at-bronze); }
.nav a:hover, .nav a.is-active, .masthead.is-stuck .nav a:hover, .masthead.is-stuck .nav a.is-active { color: var(--at-bronze); }
.masthead .btn--ghost, .masthead.is-stuck .btn--ghost { min-height: 44px; padding: 0 22px; border: 1px solid var(--at-ink); border-radius: 0; background: transparent; color: var(--at-ink); font-size: .64rem; font-weight: 600; letter-spacing: .17em; }
.masthead .btn--ghost:hover { background: var(--at-ink); color: #fff; }

.atelier-home .masthead:not(.is-stuck) { border-bottom-color: rgba(255,255,255,.25); background: transparent; backdrop-filter: none; }
.atelier-home .masthead:not(.is-stuck) .brand__light { display: block !important; }
.atelier-home .masthead:not(.is-stuck) .brand__dark { display: none !important; }
.atelier-home .masthead:not(.is-stuck) .brand__wordmark b, .atelier-home .masthead:not(.is-stuck) .nav a { color: #fff; }
.atelier-home .masthead:not(.is-stuck) .brand__wordmark small { color: rgba(255,255,255,.68); }
.atelier-home .masthead:not(.is-stuck) .btn--ghost { border-color: rgba(255,255,255,.62); color: #fff; }
.atelier-home .masthead:not(.is-stuck) .btn--ghost:hover { border-color: #fff; background: #fff; color: var(--at-ink); }

.atelier-label { display: block; color: rgba(255,255,255,.78); font-size: .63rem; font-weight: 600; letter-spacing: .28em; line-height: 1.5; text-transform: uppercase; }
.atelier-label--dark { color: var(--at-bronze); }
.atelier-link { display: inline-flex; align-items: center; gap: 20px; padding-bottom: 8px; border-bottom: 1px solid currentColor; color: var(--at-ink); font-size: .67rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.atelier-link span { font-size: .9rem; transition: transform .25s ease; }
.atelier-link:hover { color: var(--at-bronze); }
.atelier-link:hover span { transform: translate(3px, -3px); }
.atelier-link--light { color: #fff; }
.atelier-link--light:hover { color: #e7d2b7; }
.atelier-button { display: inline-flex; min-height: 54px; padding: 0 30px; align-items: center; justify-content: center; border: 1px solid #eee5d7; background: #eee5d7; color: var(--at-ink); font-size: .67rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transition: .25s ease; }
.atelier-button:hover { border-color: #fff; background: #fff; color: var(--at-ink); }

.atelier-hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--at-deep); color: #fff; }
.atelier-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; transform: scale(1.01); }
.atelier-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,31,29,.7) 0%, rgba(9,31,29,.18) 57%, rgba(9,31,29,.12)), linear-gradient(0deg, rgba(8,27,26,.55), transparent 48%); }
.atelier-hero__copy { position: relative; z-index: 1; display: flex; min-height: 100svh; padding-top: 150px; padding-bottom: 112px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.atelier-hero h1 { max-width: 910px; margin: 20px 0 28px; color: #fff; font-family: var(--at-serif); font-size: clamp(4.3rem, 7.2vw, 7.6rem); font-weight: 400; letter-spacing: -.055em; line-height: .87; }
.atelier-hero h1 em { color: #ead7bd; font-family: inherit; font-weight: 400; }
.atelier-hero__copy > p { max-width: 535px; margin: 0 0 34px; color: rgba(255,255,255,.8); font-family: var(--at-serif); font-size: clamp(1.06rem, 1.4vw, 1.28rem); line-height: 1.65; }
.atelier-hero__aside { position: absolute; z-index: 2; right: 32px; top: 50%; display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.72); font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; transform: rotate(90deg) translateX(50%); transform-origin: right top; }
.atelier-hero__aside i { width: 50px; height: 1px; background: rgba(255,255,255,.5); }
.atelier-hero__scroll { position: absolute; z-index: 2; right: 55px; bottom: 32px; display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.68); font-size: .57rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.atelier-hero__scroll i { width: 38px; height: 1px; background: currentColor; }

.atelier-reserve { position: relative; z-index: 5; margin-top: -1px; border-bottom: 1px solid var(--at-rule); background: var(--at-ivory); }
.atelier-reserve form { display: grid; min-height: 112px; grid-template-columns: repeat(4, 1fr) 1.25fr; align-items: stretch; }
.atelier-reserve form > div { display: flex; padding: 24px 30px; border-right: 1px solid var(--at-rule); flex-direction: column; justify-content: center; }
.atelier-reserve form > div:first-child { padding-left: 0; }
.atelier-reserve label { color: var(--at-bronze); font-size: .56rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.atelier-reserve input, .atelier-reserve select { width: 100%; height: 37px; padding: 0; border: 0; background: transparent; color: var(--at-ink); font-family: var(--at-serif); font-size: 1rem; }
.atelier-reserve button { display: flex; align-items: center; justify-content: space-between; padding: 0 35px; border: 0; background: var(--at-deep); color: #fff; font-family: var(--at-sans); font-size: .62rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; transition: background .25s ease; }
.atelier-reserve button:hover { background: #294744; }
.atelier-reserve button span { font-size: 1rem; }

.atelier-welcome { position: relative; padding: clamp(120px, 13vw, 205px) 0; overflow: hidden; background: var(--at-ivory); }
.atelier-ghost { position: absolute; top: 70px; right: -20px; color: rgba(166,123,79,.055); font-family: var(--at-serif); font-size: clamp(12rem, 29vw, 32rem); line-height: 1; }
.atelier-statement { position: relative; z-index: 1; max-width: 980px; margin: 0 auto clamp(75px, 9vw, 130px); text-align: center; }
.atelier-statement h2 { margin: 20px 0 0; color: var(--at-ink); font-family: var(--at-serif); font-size: clamp(3.1rem, 5.5vw, 6rem); font-weight: 400; letter-spacing: -.055em; line-height: .97; }
.atelier-statement h2 em { color: var(--at-bronze); font-family: inherit; font-weight: 400; }
.atelier-welcome__grid { position: relative; display: grid; grid-template-columns: .8fr .9fr 1.15fr; align-items: center; gap: clamp(35px, 5vw, 80px); }
.atelier-welcome__portrait { position: relative; align-self: end; margin-bottom: 75px; }
.atelier-welcome__portrait img { width: 100%; aspect-ratio: .72; object-fit: cover; }
.atelier-welcome__portrait > span, .atelier-welcome figcaption { display: block; margin-top: 13px; color: #78817d; font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.atelier-welcome__copy { padding: 20px 0; }
.atelier-welcome__copy > p { color: var(--at-muted); font-family: var(--at-serif); font-size: 1rem; line-height: 1.85; }
.atelier-welcome__copy .atelier-dropcap { margin-bottom: 24px; color: var(--at-ink); font-size: 1.34rem; line-height: 1.65; }
.atelier-dropcap::first-letter { float: left; margin: 6px 8px 0 0; color: var(--at-bronze); font-size: 3.9rem; line-height: .7; }
.atelier-welcome__copy .atelier-link { margin-top: 18px; }
.atelier-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 55px 0 0; padding-top: 25px; border-top: 1px solid var(--at-rule); }
.atelier-facts dt { color: var(--at-bronze); font-family: var(--at-serif); font-size: 1.75rem; }
.atelier-facts dd { margin: 5px 0 0; color: #737e79; font-size: .56rem; font-weight: 600; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
.atelier-welcome__landscape { align-self: start; margin: 45px 0 0; }
.atelier-welcome__landscape img { width: 100%; aspect-ratio: .9; object-fit: cover; }

.atelier-stays { padding: clamp(110px, 11vw, 175px) 0; background: #ece5da; }
.atelier-section-head { display: grid; grid-template-columns: 1.3fr .8fr auto; align-items: end; gap: 60px; margin-bottom: 66px; }
.atelier-section-head h2 { margin: 11px 0 0; color: var(--at-ink); font-family: var(--at-serif); font-size: clamp(3.4rem, 5.2vw, 5.6rem); font-weight: 400; letter-spacing: -.055em; line-height: .92; }
.atelier-section-head > p { max-width: 410px; margin: 0; color: var(--at-muted); font-family: var(--at-serif); font-size: 1.05rem; line-height: 1.7; }
.atelier-room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.5vw, 38px); }
.atelier-room__media { position: relative; display: block; aspect-ratio: .77; overflow: hidden; background: #ced0c9; }
.atelier-room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.atelier-room__media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(12,37,35,.52), transparent 45%); opacity: 0; transition: opacity .35s ease; }
.atelier-room__media > span { position: absolute; z-index: 2; right: 21px; bottom: 18px; color: #fff; font-size: .6rem; font-weight: 600; letter-spacing: .18em; opacity: 0; text-transform: uppercase; transform: translateY(6px); transition: .35s ease; }
.atelier-room:hover .atelier-room__media img { transform: scale(1.025); }
.atelier-room:hover .atelier-room__media::after, .atelier-room:hover .atelier-room__media > span { opacity: 1; }
.atelier-room:hover .atelier-room__media > span { transform: none; }
.atelier-room__top { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; padding: 23px 0 16px; border-bottom: 1px solid var(--at-rule); }
.atelier-room__top > span { padding-top: 6px; color: var(--at-bronze); font-family: var(--at-serif); font-size: .78rem; font-style: italic; }
.atelier-room__top h3 { margin: 0; color: var(--at-ink); font-family: var(--at-serif); font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.atelier-room__top h3 a { color: inherit; }
.atelier-room__top p { margin: 7px 0 0; color: #737d79; font-size: .54rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.atelier-room__top strong { color: var(--at-ink); font-family: var(--at-serif); font-size: .92rem; font-weight: 400; text-align: right; white-space: nowrap; }
.atelier-room__top small { display: block; margin-top: 5px; color: #7c8581; font-family: var(--at-sans); font-size: .5rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.atelier-room__meta { display: flex; gap: 19px; padding-top: 13px; color: #69746f; font-size: .53rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.atelier-pause { position: relative; min-height: 760px; overflow: hidden; background: var(--at-deep); color: #fff; }
.atelier-pause > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.atelier-pause__veil { position: absolute; inset: 0; background: rgba(12,34,32,.47); }
.atelier-pause__copy { position: relative; z-index: 1; display: flex; min-height: 760px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.atelier-pause__copy > img { width: 62px; height: 105px; margin-bottom: 36px; object-fit: contain; opacity: .85; }
.atelier-pause blockquote { max-width: 900px; margin: 0 0 30px; font-family: var(--at-serif); font-size: clamp(2.7rem, 4.5vw, 5.1rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
.atelier-pause__copy > span { color: #dec8ab; font-size: .61rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }

.atelier-rhythm { padding: clamp(120px, 13vw, 200px) 0; background: var(--at-ivory); }
.atelier-rhythm__grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: clamp(35px, 6vw, 90px); }
.atelier-rhythm figure { margin: 0; }
.atelier-rhythm__large > img { width: 100%; height: 790px; object-fit: cover; }
.atelier-rhythm figcaption { display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; padding-top: 20px; }
.atelier-rhythm figcaption b { grid-row: 1 / 3; color: var(--at-bronze); font-family: var(--at-serif); font-size: .82rem; font-style: italic; font-weight: 400; }
.atelier-rhythm figcaption span { color: var(--at-ink); font-family: var(--at-serif); font-size: 1.55rem; }
.atelier-rhythm figcaption p { max-width: 440px; margin: 3px 0 0; color: var(--at-muted); font-size: .82rem; line-height: 1.65; }
.atelier-rhythm__stack { display: grid; grid-template-rows: auto 1fr; gap: 70px; padding-top: 140px; }
.atelier-rhythm__stack figure img { width: 68%; aspect-ratio: .77; object-fit: cover; }
.atelier-rhythm__note { max-width: 440px; align-self: end; padding: 0 0 30px 45px; border-left: 1px solid var(--at-bronze); }
.atelier-rhythm__note > p { margin: 18px 0 28px; color: var(--at-ink); font-family: var(--at-serif); font-size: 1.35rem; line-height: 1.65; }

.atelier-included { padding: 105px 0 115px; background: var(--at-deep); color: #fff; }
.atelier-included > .shell > .atelier-label { margin-bottom: 50px; color: #cfb797; }
.atelier-included__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); }
.atelier-included article { min-height: 230px; padding: 31px 34px; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.atelier-included article > span { color: #c6aa87; font-family: var(--at-serif); font-size: .72rem; font-style: italic; }
.atelier-included h3 { margin: 35px 0 12px; color: #fff; font-family: var(--at-serif); font-size: 1.55rem; font-weight: 400; }
.atelier-included p { max-width: 310px; margin: 0; color: rgba(255,255,255,.59); font-size: .79rem; line-height: 1.65; }

.atelier-journal { padding: clamp(110px, 12vw, 180px) 0; background: var(--at-ivory); }
.atelier-journal .atelier-section-head { grid-template-columns: 1fr auto; }
.atelier-journal__grid { display: grid; grid-template-columns: 1.15fr .85fr .7fr; grid-template-rows: 310px 310px; gap: 12px; }
.atelier-journal__grid a { position: relative; display: block; overflow: hidden; }
.atelier-journal__grid a:first-child { grid-row: 1 / 3; }
.atelier-journal__grid a:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 3; margin: 85px 0; }
.atelier-journal__grid a:nth-child(5) { display: none; }
.atelier-journal__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.atelier-journal__grid a:hover img { transform: scale(1.025); }
.atelier-journal__grid a > span { position: absolute; right: 14px; bottom: 12px; display: grid; width: 32px; height: 32px; place-items: center; background: rgba(247,244,237,.92); color: var(--at-ink); font-family: var(--at-serif); font-size: .7rem; }

.atelier-final { position: relative; min-height: 720px; overflow: hidden; background: var(--at-deep); color: #fff; }
.atelier-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.atelier-final__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,31,29,.78), rgba(10,31,29,.23)); }
.atelier-final > .shell { position: relative; z-index: 1; display: flex; min-height: 720px; flex-direction: column; align-items: flex-start; justify-content: center; }
.atelier-final h2 { max-width: 950px; margin: 20px 0 40px; color: #fff; font-family: var(--at-serif); font-size: clamp(3.8rem, 6.4vw, 7rem); font-weight: 400; letter-spacing: -.055em; line-height: .92; }
.atelier-final h2 em { color: #ead7bd; font-family: inherit; font-weight: 400; }
.atelier-final > .shell > div { display: flex; align-items: center; gap: 32px; }

/* The same quiet-luxury language across every inner page. */
.banner { min-height: 680px; margin-top: 86px; border-radius: 0; background: var(--at-deep); }
.banner::after { background: linear-gradient(90deg, rgba(12,35,33,.72), rgba(12,35,33,.1) 72%), linear-gradient(0deg, rgba(12,35,33,.38), transparent 55%); }
.banner__inner { padding: 115px 0 80px; }
.banner .hero__eyebrow { padding: 0; border: 0; background: transparent; color: #dfc7a8; font-size: .61rem; font-weight: 600; letter-spacing: .25em; }
.banner .hero__eyebrow::before { display: none; }
.banner h1 { max-width: 930px; margin: 20px 0 24px; color: #fff; font-family: var(--at-serif); font-size: clamp(4rem, 6.6vw, 7rem); font-weight: 400; letter-spacing: -.055em; line-height: .91; }
.banner__intro { max-width: 590px; color: rgba(255,255,255,.77); font-family: var(--at-serif); font-size: 1.15rem; line-height: 1.65; }
.crumbs { margin-top: 28px; color: rgba(255,255,255,.55); font-size: .56rem; letter-spacing: .18em; }
.crumbs a { color: rgba(255,255,255,.82); }
.section { padding: clamp(110px, 11vw, 170px) 0; }
.section--cream { background: var(--at-ivory); }
.section--sand { background: #ece5da; }
.section--deep { background: var(--at-deep); }
.eyebrow { padding: 0; border: 0; background: transparent; color: var(--at-bronze); font-size: .6rem; font-weight: 600; letter-spacing: .23em; }
.eyebrow::before { display: none; }
.title, .display { color: var(--at-ink); font-family: var(--at-serif); font-size: clamp(3.2rem, 5.2vw, 5.7rem); font-weight: 400; letter-spacing: -.055em; line-height: .95; }
.section--deep .title, .section--deep .display { color: #fff; }
.flourish { width: 45px; height: 1px; margin-top: 28px; background: var(--at-bronze); }
.lead { color: #5f6f6a; font-family: var(--at-serif); font-size: 1.12rem; line-height: 1.8; }
.muted { color: #78817d; }
.arch, .arch--wide, .stack__sub, .room-gallery a, .dining-feature__image { border-radius: 0; }
.watermark { opacity: .025; }
.btn { min-height: 50px; border-radius: 0; font-family: var(--at-sans); font-size: .62rem; font-weight: 600; letter-spacing: .17em; }
.btn--solid, .btn--gold { border-color: var(--at-deep); background: var(--at-deep); color: #fff; }
.btn--solid:hover, .btn--gold:hover { border-color: #294744; background: #294744; color: #fff; }
.btn--line { border-color: var(--at-ink); color: var(--at-ink); }
.btn--line:hover { border-color: var(--at-ink); background: var(--at-ink); color: #fff; }
.section--deep .btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.section--deep .btn--ghost:hover { border-color: #fff; background: #fff; color: var(--at-ink); }
.head-center { max-width: 900px; }
.collection-nav { gap: 9px; }
.collection-nav a { border: 1px solid var(--at-rule); border-radius: 0; background: transparent; color: var(--at-ink); font-size: .56rem; letter-spacing: .15em; }
.collection-nav a:hover { border-color: var(--at-ink); background: var(--at-ink); color: #fff; }
.rate-guide { border: 1px solid var(--at-rule); border-radius: 0; box-shadow: none; }
.rate-guide__intro { background: var(--at-deep); }
.rate-guide__item { background: var(--at-ivory); }
.rate-guide__item strong { color: var(--at-ink); font-family: var(--at-serif); font-weight: 400; }
.rate-guide__item:hover { background: #e7dece; }
.collection__number { color: var(--at-bronze); font-family: var(--at-serif); font-style: italic; }
.room-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.room-card__media { border-radius: 0; }
.room-card__tag { top: 16px; left: 16px; max-width: 120px; padding: 9px 12px; border-radius: 0; background: rgba(247,244,237,.9); color: var(--at-ink); font-size: .52rem; }
.room-card__rate { right: 0; bottom: 0; border-radius: 0; background: rgba(16,40,38,.94); }
.room-card__rate b, .room-card__price { color: var(--at-bronze); font-family: var(--at-serif); font-weight: 400; }
.room-card__body { padding: 24px 0 0; }
.room-card__body h3 { font-family: var(--at-serif); font-size: 2rem; font-weight: 400; }
.room-card__body > p { color: var(--at-muted); }
.room-meta { border-color: var(--at-rule); }
.stay-card, .menu-card, .enquiry { border: 1px solid var(--at-rule); border-radius: 0; background: rgba(255,255,255,.34); box-shadow: none; }
.stay-card h3, .menu-card h3 { font-family: var(--at-serif); font-weight: 400; }
.menu-card__number { color: rgba(166,123,79,.25); font-family: var(--at-serif); }
.story-grid { gap: 0; border: 1px solid rgba(255,255,255,.16); }
.story-card { border: 0; border-right: 1px solid rgba(255,255,255,.16); border-radius: 0; background: transparent; }
.story-card:last-child { border-right: 0; }
.story-card > span { color: #c9ad8a; font-family: var(--at-serif); font-style: italic; }
.gallery-filter { border: 1px solid var(--at-rule); border-radius: 0; background: var(--at-ivory); box-shadow: none; }
.gallery-filter button { border-radius: 0; color: var(--at-muted); }
.gallery-filter button:hover, .gallery-filter button.is-active { background: var(--at-deep); color: #fff; }
.gallery-photo { border-radius: 0; box-shadow: none; }
.form-field input, .form-field textarea { border-color: var(--at-rule); border-radius: 0; background: rgba(255,255,255,.42); }
.contact-line { border-color: var(--at-rule); }
.contact-line__icon { color: var(--at-bronze); }
.location-panel, .panorama, .cta { margin: 0; border-radius: 0; }
.cta { min-height: 670px; padding: 120px 0; }
.cta::after { background: rgba(13,36,34,.68); }
.cta h2 { color: #fff; font-family: var(--at-serif); font-size: clamp(3.8rem, 6vw, 6.4rem); font-weight: 400; letter-spacing: -.055em; line-height: .93; }
.cta p { max-width: 680px; color: rgba(255,255,255,.72); font-family: var(--at-serif); font-size: 1.08rem; }
.footer { margin: 0; padding-top: 105px; border-radius: 0; background: #0c2422; }
.footer__logo { width: 72px; height: 120px; object-fit: contain; }
.footer h4 { color: #ccb08e; font-size: .59rem; letter-spacing: .2em; }
.footer p, .footer li, .footer a { color: rgba(255,255,255,.64); }
.footer a:hover { color: #fff; }
.footer__bottom { border-color: rgba(255,255,255,.13); }

@media (max-width: 1100px) {
    .atelier-section-head { grid-template-columns: 1fr 1fr; }
    .atelier-section-head > .atelier-link { grid-column: 2; }
    .atelier-welcome__grid { grid-template-columns: .8fr 1fr; }
    .atelier-welcome__landscape { grid-column: 1 / 3; width: 62%; margin: 20px 0 0 auto; }
    .atelier-welcome__landscape img { aspect-ratio: 1.4; }
}

@media (max-width: 900px) {
    .shell, .shell--wide { width: min(100% - 40px, 720px); }
    .masthead__inner, .masthead.is-stuck .masthead__inner { min-height: 72px; }
    .brand img, .masthead.is-stuck .brand img { width: 34px; height: 56px; }
    .burger span { background: var(--at-ink); }
    .atelier-home .masthead:not(.is-stuck) .burger span { background: #fff; }
    .atelier-reserve form { grid-template-columns: 1fr 1fr; padding: 20px 0; }
    .atelier-reserve form > div:nth-child(2) { border-right: 0; }
    .atelier-reserve form > div:nth-child(3) { padding-left: 0; }
    .atelier-reserve button { grid-column: 1 / 3; min-height: 65px; margin-top: 15px; }
    .atelier-room-grid { grid-template-columns: 1fr 1fr; }
    .atelier-room:last-child { grid-column: 1 / 3; width: calc(50% - 12px); margin: auto; }
    .atelier-rhythm__large > img { height: 650px; }
    .atelier-rhythm__stack { padding-top: 80px; }
    .atelier-included__grid { grid-template-columns: 1fr 1fr; }
    .banner { min-height: 590px; margin-top: 72px; }
}

@media (max-width: 620px) {
    .shell, .shell--wide { width: calc(100% - 30px); }
    .masthead__inner, .masthead.is-stuck .masthead__inner { min-height: 68px; }
    .brand { gap: 8px; }
    .brand img, .masthead.is-stuck .brand img { width: 30px; height: 51px; }
    .brand__wordmark b { font-size: .98rem; }
    .brand__wordmark small { font-size: .45rem; }
    .atelier-hero__copy { padding-bottom: 100px; }
    .atelier-hero h1 { font-size: clamp(3.55rem, 16vw, 5rem); line-height: .9; }
    .atelier-hero__copy > p { max-width: 90%; font-size: 1rem; }
    .atelier-hero__aside { display: none; }
    .atelier-hero__scroll { right: 16px; bottom: 25px; }
    .atelier-reserve form > div { padding: 18px 14px; }
    .atelier-reserve form > div:first-child, .atelier-reserve form > div:nth-child(3) { padding-left: 3px; }
    .atelier-welcome, .atelier-stays, .atelier-rhythm, .atelier-journal { padding: 95px 0; }
    .atelier-statement { margin-bottom: 65px; text-align: left; }
    .atelier-statement h2 { font-size: clamp(3rem, 13.5vw, 4.25rem); }
    .atelier-welcome__grid { display: flex; flex-direction: column; gap: 55px; }
    .atelier-welcome__portrait { width: 83%; margin: 0 auto 0 0; }
    .atelier-welcome__copy { order: 2; }
    .atelier-welcome__landscape { order: 3; width: 88%; margin: 0 0 0 auto; }
    .atelier-welcome__landscape img { aspect-ratio: 1; }
    .atelier-section-head { display: block; margin-bottom: 45px; }
    .atelier-section-head h2 { font-size: 3.7rem; }
    .atelier-section-head > p { margin-top: 20px; }
    .atelier-section-head > .atelier-link { margin-top: 25px; }
    .atelier-room-grid { grid-template-columns: 1fr; gap: 55px; }
    .atelier-room:last-child { grid-column: auto; width: 100%; }
    .atelier-room__media { aspect-ratio: .85; }
    .atelier-room__top { grid-template-columns: auto 1fr; }
    .atelier-room__top strong { grid-column: 2; text-align: left; }
    .atelier-room__top small { display: inline; margin-left: 4px; }
    .atelier-pause, .atelier-pause__copy { min-height: 620px; }
    .atelier-pause blockquote { font-size: 2.8rem; }
    .atelier-rhythm__grid { grid-template-columns: 1fr; }
    .atelier-rhythm__large > img { height: 590px; }
    .atelier-rhythm__stack { gap: 60px; padding-top: 10px; }
    .atelier-rhythm__stack figure img { width: 78%; margin-left: auto; }
    .atelier-rhythm__note { padding-left: 24px; }
    .atelier-included { padding: 88px 0; }
    .atelier-included__grid { grid-template-columns: 1fr; }
    .atelier-included article { min-height: 190px; }
    .atelier-journal__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 310px 220px 220px; gap: 7px; }
    .atelier-journal__grid a:first-child { grid-column: 1 / 3; grid-row: auto; }
    .atelier-journal__grid a:nth-child(2) { grid-column: auto; grid-row: auto; margin: 0; }
    .atelier-journal__grid a:nth-child(5) { display: block; }
    .atelier-final, .atelier-final > .shell { min-height: 650px; }
    .atelier-final h2 { font-size: 3.75rem; }
    .atelier-final > .shell > div { align-items: flex-start; flex-direction: column; }
    .banner { min-height: 540px; margin-top: 68px; }
    .banner h1 { font-size: clamp(3.4rem, 14.5vw, 5rem); }
    .section { padding: 95px 0; }
    .title, .display { font-size: clamp(3rem, 13vw, 4.3rem); }
    .story-card { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
    .story-card:last-child { border-bottom: 0; }
    .cta { min-height: 600px; padding: 95px 0; }
    .footer { padding-top: 80px; }
}

.drawer { background: var(--at-deep); }
.drawer::before { position: absolute; top: 45px; left: 50%; width: 42px; height: 72px; content: ""; background: url('../images/brand/logo-white.png') center/contain no-repeat; transform: translateX(-50%); opacity: .9; }
.drawer a { color: #f4eee5; font-family: var(--at-serif); font-size: clamp(2.1rem, 9vw, 3.4rem); font-weight: 400; letter-spacing: -.035em; }
.drawer a:hover { color: #d6bb98; }
.drawer__close { color: #f4eee5; }

/* Editorial photography — layered, cinematic and intentionally asymmetric. */
.atelier-welcome__editorial {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
    align-items: center;
    gap: clamp(64px, 8vw, 128px);
}

.atelier-welcome__gallery {
    position: relative;
    min-height: 650px;
}

.atelier-welcome__gallery::before {
    position: absolute;
    z-index: 0;
    top: -22px;
    left: -22px;
    width: 76%;
    height: 72%;
    border: 1px solid rgba(166, 123, 79, .32);
    content: "";
}

.atelier-welcome__gallery figure { margin: 0; }

.atelier-welcome__hero-photo {
    position: relative;
    z-index: 1;
    width: 86%;
    padding: 10px;
    background: #fffdf8;
    box-shadow: 0 24px 65px rgba(28, 45, 42, .1);
}

.atelier-welcome__hero-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1.18;
    object-fit: cover;
    object-position: center 46%;
}

.atelier-welcome__floating-photo {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 4px;
    width: 38%;
    padding: 8px 8px 12px;
    background: #fffdf8;
    box-shadow: 0 28px 70px rgba(21, 43, 40, .2);
}

.atelier-welcome__floating-photo img {
    display: block;
    width: 100%;
    aspect-ratio: .68;
    object-fit: cover;
    object-position: center;
}

.atelier-welcome__hero-photo figcaption,
.atelier-welcome__floating-photo figcaption {
    margin: 11px 3px 0;
    color: #66726e;
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.atelier-welcome__folio {
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 12px;
    color: var(--at-bronze);
    font-family: var(--at-serif);
    font-size: .75rem;
    font-style: italic;
    letter-spacing: .05em;
}

.atelier-welcome__editorial .atelier-welcome__copy {
    max-width: 390px;
    padding-top: 42px;
}

.atelier-room-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: clamp(24px, 2.3vw, 38px);
}

.atelier-room { grid-column: span 3; }
.atelier-room:first-child { grid-column: span 6; }
.atelier-room:nth-child(2) { margin-top: 86px; }
.atelier-room:nth-child(3) { margin-top: 26px; }

.atelier-room__media {
    aspect-ratio: .69;
    border: 9px solid #f8f4ec;
    box-shadow: 0 20px 45px rgba(27, 48, 44, .1);
}

.atelier-room:first-child .atelier-room__media { aspect-ratio: 1.1; }
.atelier-room:first-child .atelier-room__media img { object-position: center 56%; }
.atelier-room:nth-child(2) .atelier-room__media img { object-position: center 42%; }
.atelier-room:nth-child(3) .atelier-room__media img { object-position: center 48%; }

.atelier-room:not(:first-child) .atelier-room__top {
    grid-template-columns: auto 1fr;
}

.atelier-room:not(:first-child) .atelier-room__top strong {
    grid-column: 2;
    text-align: left;
}

.atelier-room__media::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    border: 1px solid rgba(255,255,255,.35);
    content: "";
    pointer-events: none;
}

@media (max-width: 1100px) {
    .atelier-welcome__editorial {
        grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
        gap: 58px;
    }
    .atelier-welcome__gallery { min-height: 560px; }
    .atelier-welcome__hero-photo { width: 88%; }
    .atelier-welcome__floating-photo { width: 39%; }
    .atelier-room:first-child { grid-column: 1 / 13; width: 73%; }
    .atelier-room:nth-child(2), .atelier-room:nth-child(3) { grid-column: span 6; margin-top: 0; }
    .atelier-room:nth-child(2) { padding-left: 10%; }
    .atelier-room:nth-child(3) { padding-right: 10%; }
    .atelier-room:not(:first-child) .atelier-room__media { aspect-ratio: .84; }
}

@media (max-width: 760px) {
    .atelier-welcome__editorial { display: block; }
    .atelier-welcome__gallery { min-height: 610px; margin-bottom: 70px; }
    .atelier-welcome__hero-photo { width: 88%; }
    .atelier-welcome__hero-photo img { aspect-ratio: 1.02; }
    .atelier-welcome__floating-photo { width: 41%; }
    .atelier-welcome__editorial .atelier-welcome__copy { max-width: 560px; padding-top: 0; }
}

@media (max-width: 620px) {
    .atelier-welcome__gallery { min-height: 460px; margin-top: -5px; margin-bottom: 58px; }
    .atelier-welcome__gallery::before { top: -12px; left: -8px; }
    .atelier-welcome__hero-photo { width: 91%; padding: 6px; }
    .atelier-welcome__hero-photo img { aspect-ratio: 1.02; }
    .atelier-welcome__floating-photo { right: 1px; bottom: 0; width: 43%; padding: 5px 5px 9px; }
    .atelier-welcome__folio { bottom: 8px; left: 4px; }
    .atelier-room-grid { display: block; }
    .atelier-room, .atelier-room:first-child, .atelier-room:last-child {
        width: 100%;
        margin: 0 0 64px;
        padding: 0;
    }
    .atelier-room:last-child { margin-bottom: 0; }
    .atelier-room__media,
    .atelier-room:first-child .atelier-room__media,
    .atelier-room:not(:first-child) .atelier-room__media { aspect-ratio: .92; border-width: 6px; }
    .atelier-room:first-child .atelier-room__media { aspect-ratio: 1.08; }
}

/* Gallery rhythm — a dense magazine spread instead of equal thumbnail columns. */
.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 76px;
    gap: 14px;
    columns: unset;
}

.gallery-masonry .gallery-photo {
    grid-column: span 3;
    grid-row: span 4;
    height: 100%;
    margin: 0;
    background: #e8e0d3;
    box-shadow: none;
}

.gallery-masonry .gallery-photo--tall { grid-row: span 6; }

.gallery-masonry .gallery-photo:nth-child(9n + 1) {
    grid-column: span 6;
    grid-row: span 6;
}

.gallery-masonry .gallery-photo:nth-child(13n + 7) {
    grid-column: span 6;
    grid-row: span 5;
}

.gallery-masonry .gallery-photo img,
.gallery-masonry .gallery-photo--tall img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
}

.gallery-masonry .gallery-photo:nth-child(9n + 1) span {
    right: auto;
    bottom: 24px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 1;
    transform: none;
}

.gallery-masonry .gallery-photo:nth-child(9n + 1)::after { opacity: .36; }

@media (max-width: 1100px) {
    .gallery-masonry {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-auto-rows: 70px;
        gap: 11px;
    }
    .gallery-masonry .gallery-photo { grid-column: span 2; }
    .gallery-masonry .gallery-photo:nth-child(9n + 1),
    .gallery-masonry .gallery-photo:nth-child(13n + 7) { grid-column: span 4; }
}

@media (max-width: 760px) {
    .gallery-masonry {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 62px;
        gap: 8px;
    }
    .gallery-masonry .gallery-photo { grid-column: span 2; grid-row: span 4; }
    .gallery-masonry .gallery-photo--tall { grid-row: span 5; }
    .gallery-masonry .gallery-photo:nth-child(9n + 1),
    .gallery-masonry .gallery-photo:nth-child(13n + 7) { grid-column: span 4; grid-row: span 5; }
}

@media (max-width: 430px) {
    .gallery-masonry { grid-auto-rows: 55px; gap: 6px; }
    .gallery-masonry .gallery-photo { grid-row: span 3; }
    .gallery-masonry .gallery-photo--tall { grid-row: span 5; }
    .gallery-masonry .gallery-photo:nth-child(9n + 1),
    .gallery-masonry .gallery-photo:nth-child(13n + 7) { grid-row: span 5; }
}

/* Island journal — immersive dark-room photo essay. */
.atelier-journal {
    position: relative;
    padding: clamp(110px, 11vw, 175px) 0;
    overflow: hidden;
    background: #0d2927;
    color: #fff;
}

.atelier-journal::before {
    position: absolute;
    top: 50%;
    right: -2vw;
    color: rgba(255,255,255,.025);
    content: "ISLAND";
    font-family: var(--at-serif);
    font-size: clamp(10rem, 23vw, 25rem);
    line-height: .7;
    pointer-events: none;
    transform: translateY(-50%);
}

.atelier-journal__head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr .65fr;
    align-items: end;
    gap: clamp(50px, 8vw, 130px);
    margin-bottom: clamp(58px, 7vw, 105px);
}

.atelier-journal__head .atelier-label { color: #c7a57c; }

.atelier-journal__head h2 {
    margin: 18px 0 0;
    color: #f8f3e9;
    font-family: var(--at-serif);
    font-size: clamp(4rem, 6.4vw, 7rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .84;
}

.atelier-journal__head h2 em {
    color: #d8b98e;
    font-family: inherit;
    font-weight: 400;
}

.atelier-journal__intro {
    max-width: 470px;
    padding-left: 30px;
    border-left: 1px solid rgba(216,185,142,.5);
}

.atelier-journal__intro p {
    margin: 0 0 28px;
    color: rgba(255,255,255,.66);
    font-family: var(--at-serif);
    font-size: 1.08rem;
    line-height: 1.75;
}

.atelier-journal__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.34fr .66fr .66fr;
    grid-template-rows: 310px 310px;
    gap: 14px;
}

.atelier-journal__grid .atelier-journal__photo {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #173633;
}

.atelier-journal__photo--1 { grid-column: 1; grid-row: 1 / 3; }
.atelier-journal__photo--2 { grid-column: 2; grid-row: 1 / 3; }
.atelier-journal__photo--3 { grid-column: 3; grid-row: 1; }
.atelier-journal__photo--4 { grid-column: 3; grid-row: 2; }

.atelier-journal__grid .atelier-journal__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.atelier-journal__photo--1 img { object-position: center; }
.atelier-journal__photo--2 img { object-position: center; }
.atelier-journal__photo--3 img { object-position: center 60%; }
.atelier-journal__photo--4 img { object-position: center 45%; }

.atelier-journal__grid .atelier-journal__photo::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(5,25,23,.74), transparent 55%);
    opacity: .72;
    transition: opacity .4s ease;
}

.atelier-journal__grid .atelier-journal__photo:hover img { transform: scale(1.035); }
.atelier-journal__grid .atelier-journal__photo:hover::after { opacity: .42; }

.atelier-journal__grid .atelier-journal__photo > span {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    left: 22px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    width: auto;
    height: auto;
    margin: 0;
    background: transparent;
    color: #fff;
    opacity: 1;
    transform: none;
}

.atelier-journal__photo > span b {
    color: #d8b98e;
    font-family: var(--at-serif);
    font-size: .72rem;
    font-style: italic;
    font-weight: 400;
}

.atelier-journal__photo > span em {
    overflow: hidden;
    font-family: var(--at-sans);
    font-size: .54rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .15em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.atelier-journal__photo > span i {
    font-size: .8rem;
    font-style: normal;
    transition: transform .3s ease;
}

.atelier-journal__photo:hover > span i { transform: translate(3px, -3px); }

@media (max-width: 980px) {
    .atelier-journal__head { grid-template-columns: 1fr .75fr; gap: 45px; }
    .atelier-journal__grid {
        grid-template-columns: 1.2fr .8fr;
        grid-template-rows: 430px 250px 250px;
    }
    .atelier-journal__photo--1 { grid-column: 1; grid-row: 1 / 3; }
    .atelier-journal__photo--2 { grid-column: 2; grid-row: 1; }
    .atelier-journal__photo--3 { grid-column: 2; grid-row: 2; }
    .atelier-journal__photo--4 { grid-column: 1 / 3; grid-row: 3; }
}

@media (max-width: 620px) {
    .atelier-journal { padding: 95px 0; }
    .atelier-journal::before { top: 28%; right: -8vw; font-size: 9rem; }
    .atelier-journal__head { display: block; margin-bottom: 52px; }
    .atelier-journal__head h2 { font-size: clamp(3.8rem, 17vw, 5rem); }
    .atelier-journal__intro { margin-top: 36px; padding-left: 20px; }
    .atelier-journal__intro p { font-size: 1rem; }
    .atelier-journal__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 340px 250px 210px;
        gap: 7px;
    }
    .atelier-journal__photo--1 { grid-column: 1 / 3; grid-row: 1; }
    .atelier-journal__photo--2 { grid-column: 1; grid-row: 2; }
    .atelier-journal__photo--3 { grid-column: 2; grid-row: 2; }
    .atelier-journal__photo--4 { grid-column: 1 / 3; grid-row: 3; }
    .atelier-journal__grid .atelier-journal__photo > span { right: 12px; bottom: 12px; left: 12px; gap: 8px; }
    .atelier-journal__photo > span em { font-size: .46rem; }
}

/* Journal layout revision: retain the original light section, change photos only. */
.atelier-journal {
    position: relative;
    padding: clamp(110px, 12vw, 180px) 0;
    overflow: hidden;
    background: var(--at-ivory);
    color: var(--at-ink);
}

.atelier-journal::before { content: none; }
.atelier-journal .atelier-section-head { grid-template-columns: 1fr auto; }

.atelier-journal__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(6, 96px);
    gap: 14px;
}

.atelier-journal__grid a,
.atelier-journal__grid a:first-child,
.atelier-journal__grid a:nth-child(2),
.atelier-journal__grid a:nth-child(3),
.atelier-journal__grid a:nth-child(4),
.atelier-journal__grid a:nth-child(5) {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: hidden;
    background: #e4ddd0;
}

.atelier-journal__grid a:first-child { grid-column: 1 / 7; grid-row: 1 / 7; }
.atelier-journal__grid a:nth-child(2) {
    grid-column: 7 / 10;
    grid-row: 2 / 6;
    border: 8px solid #fffdf8;
    box-shadow: 0 24px 55px rgba(24,49,47,.14);
}
.atelier-journal__grid a:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 3; }
.atelier-journal__grid a:nth-child(4) { grid-column: 10 / 13; grid-row: 3 / 5; }
.atelier-journal__grid a:nth-child(5) { grid-column: 10 / 13; grid-row: 5 / 7; }

.atelier-journal__grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.2,.7,.2,1);
}

.atelier-journal__grid a:first-child img { object-position: center; }
.atelier-journal__grid a:nth-child(2) img { object-position: center; }
.atelier-journal__grid a:nth-child(3) img { object-position: center 58%; }
.atelier-journal__grid a:nth-child(4) img { object-position: center; }
.atelier-journal__grid a:nth-child(5) img { object-position: center 48%; }
.atelier-journal__grid a:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
    .atelier-journal__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: 420px 210px 210px 230px;
        gap: 10px;
    }
    .atelier-journal__grid a:first-child { grid-column: 1 / 7; grid-row: 1; }
    .atelier-journal__grid a:nth-child(2) { grid-column: 1 / 4; grid-row: 2 / 4; }
    .atelier-journal__grid a:nth-child(3) { grid-column: 4 / 7; grid-row: 2; }
    .atelier-journal__grid a:nth-child(4) { grid-column: 4 / 7; grid-row: 3; }
    .atelier-journal__grid a:nth-child(5) { grid-column: 1 / 7; grid-row: 4; }
}

@media (max-width: 620px) {
    .atelier-journal { padding: 95px 0; }
    .atelier-journal__grid {
        grid-template-rows: 300px 160px 160px 205px;
        gap: 7px;
    }
    .atelier-journal__grid a:nth-child(2) { border-width: 5px; }
}

/* Journal viewer — one calm cinematic frame with a tactile photo index. */
.atelier-journal__viewer { position: relative; }

.atelier-journal__slides {
    position: relative;
    height: clamp(520px, 48vw, 690px);
    overflow: hidden;
    background: #ded8cb;
}

.atelier-journal__slide {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.015);
    transition: opacity .7s ease, transform 1s cubic-bezier(.2,.7,.2,1);
    visibility: hidden;
}

.atelier-journal__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    visibility: visible;
}

.atelier-journal__slide > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atelier-journal__slide:nth-child(1) > img { object-position: center; }
.atelier-journal__slide:nth-child(2) > img { object-position: center 48%; }
.atelier-journal__slide:nth-child(3) > img { object-position: center 42%; }
.atelier-journal__slide:nth-child(4) > img { object-position: center 58%; }
.atelier-journal__slide:nth-child(5) > img { object-position: center 48%; }

.atelier-journal__slide::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(10,31,29,.68), transparent 48%);
}

.atelier-journal__slide > span {
    position: absolute;
    z-index: 2;
    right: clamp(24px, 4vw, 60px);
    bottom: clamp(24px, 4vw, 54px);
    left: clamp(24px, 4vw, 60px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 18px;
    color: #fff;
}

.atelier-journal__slide > span b {
    color: #e0c39b;
    font-family: var(--at-serif);
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
}

.atelier-journal__slide > span em {
    font-family: var(--at-serif);
    font-size: clamp(1.45rem, 2.3vw, 2.5rem);
    font-style: normal;
    line-height: 1;
}

.atelier-journal__slide > span i {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.7);
    font-family: var(--at-sans);
    font-size: .54rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.atelier-journal__controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    margin-top: 22px;
}

.atelier-journal__arrow {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--at-rule);
    background: transparent;
    color: var(--at-ink);
    cursor: pointer;
    font-size: 1rem;
    place-items: center;
    transition: .25s ease;
}

.atelier-journal__arrow:hover { border-color: var(--at-ink); background: var(--at-ink); color: #fff; }

.atelier-journal__thumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.atelier-journal__thumb {
    position: relative;
    width: clamp(82px, 8.2vw, 122px);
    height: clamp(58px, 5.8vw, 84px);
    padding: 4px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    opacity: .48;
    transition: opacity .3s ease, border-color .3s ease, transform .3s ease;
}

.atelier-journal__thumb:hover { opacity: .78; }
.atelier-journal__thumb.is-active { border-color: var(--at-bronze); opacity: 1; transform: translateY(-3px); }
.atelier-journal__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atelier-journal__thumb > span {
    position: absolute;
    right: 7px;
    bottom: 6px;
    color: #fff;
    font-family: var(--at-serif);
    font-size: .6rem;
    font-style: italic;
    text-shadow: 0 1px 8px rgba(0,0,0,.75);
}

@media (max-width: 620px) {
    .atelier-journal__slides { height: 430px; }
    .atelier-journal__slide > span { right: 20px; bottom: 20px; left: 20px; grid-template-columns: auto 1fr; gap: 10px; }
    .atelier-journal__slide > span em { font-size: 1.45rem; }
    .atelier-journal__slide > span i { display: none; }
    .atelier-journal__controls { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 8px; margin-top: 14px; }
    .atelier-journal__arrow { width: 38px; height: 38px; }
    .atelier-journal__thumbs { justify-content: flex-start; gap: 6px; overflow-x: auto; padding: 5px 1px 8px; scrollbar-width: none; }
    .atelier-journal__thumbs::-webkit-scrollbar { display: none; }
    .atelier-journal__thumb { width: 64px; height: 50px; flex: 0 0 64px; padding: 3px; }
}

/* Journal art wall — photographs presented as collected island prints. */
.atelier-journal__artboard {
    position: relative;
    height: 820px;
    margin-top: -8px;
    background:
        linear-gradient(90deg, transparent 49.96%, rgba(166,123,79,.1) 50%, transparent 50.04%),
        linear-gradient(0deg, transparent 49.96%, rgba(166,123,79,.08) 50%, transparent 50.04%);
}

.atelier-journal__art-card {
    position: absolute;
    z-index: 2;
    display: block;
    padding: 9px 9px 42px;
    background: #fffdf8;
    box-shadow: 0 24px 65px rgba(27,46,43,.16);
    transition: box-shadow .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}

.atelier-journal__art-card::before {
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(24,49,47,.08);
    content: "";
    pointer-events: none;
}

.atelier-journal__art-card img {
    display: block;
    width: 100%;
    object-fit: cover;
    filter: saturate(.92) contrast(1.02);
    transition: filter .4s ease;
}

.atelier-journal__art-card > span {
    position: absolute;
    right: 13px;
    bottom: 12px;
    left: 13px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--at-ink);
}

.atelier-journal__art-card > span b {
    color: var(--at-bronze);
    font-family: var(--at-serif);
    font-size: .68rem;
    font-style: italic;
    font-weight: 400;
}

.atelier-journal__art-card > span em {
    overflow: hidden;
    font-family: var(--at-serif);
    font-size: .78rem;
    font-style: italic;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atelier-journal__art-card:hover { z-index: 8; box-shadow: 0 35px 80px rgba(27,46,43,.24); }
.atelier-journal__art-card:hover img { filter: saturate(1.05) contrast(1.02); }

.atelier-journal__art-card--aerial { top: 64px; left: 0; width: 43%; transform: rotate(-1.8deg); }
.atelier-journal__art-card--aerial img { aspect-ratio: 1.48; }
.atelier-journal__art-card--aerial:hover { transform: rotate(-.4deg) translateY(-8px); }

.atelier-journal__art-card--light { z-index: 4; top: 0; left: 39%; width: 26%; transform: rotate(1.4deg); }
.atelier-journal__art-card--light img { aspect-ratio: .69; }
.atelier-journal__art-card--light:hover { transform: rotate(.2deg) translateY(-9px); }

.atelier-journal__art-card--night { top: 55px; right: 0; width: 30%; transform: rotate(1.9deg); }
.atelier-journal__art-card--night img { aspect-ratio: 1.27; }
.atelier-journal__art-card--night:hover { transform: rotate(.4deg) translateY(-8px); }

.atelier-journal__art-card--sunset { z-index: 5; bottom: 18px; left: 10%; width: 24%; transform: rotate(1.25deg); }
.atelier-journal__art-card--sunset img { aspect-ratio: .7; }
.atelier-journal__art-card--sunset:hover { transform: rotate(.1deg) translateY(-9px); }

.atelier-journal__art-card--dining { z-index: 5; right: 9%; bottom: 0; width: 23%; transform: rotate(-1.6deg); }
.atelier-journal__art-card--dining img { aspect-ratio: .7; }
.atelier-journal__art-card--dining:hover { transform: rotate(-.2deg) translateY(-9px); }

.atelier-journal__scribble {
    position: absolute;
    z-index: 1;
    bottom: 73px;
    left: 40%;
    color: rgba(166,123,79,.36);
    font-family: var(--at-serif);
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    font-style: italic;
    line-height: .9;
    transform: rotate(-7deg);
}

.atelier-journal__seal {
    position: absolute;
    z-index: 6;
    bottom: 8px;
    left: 47%;
    display: grid;
    width: 98px;
    height: 98px;
    border: 1px solid rgba(166,123,79,.5);
    border-radius: 50%;
    color: var(--at-bronze);
    place-content: center;
    text-align: center;
    transform: rotate(8deg);
}

.atelier-journal__seal::before { position: absolute; inset: 5px; border: 1px solid rgba(166,123,79,.28); border-radius: inherit; content: ""; }
.atelier-journal__seal b { font-family: var(--at-serif); font-size: 1rem; font-weight: 400; }
.atelier-journal__seal small { margin-top: 4px; font-size: .45rem; letter-spacing: .1em; line-height: 1.45; }

@media (max-width: 1050px) {
    .atelier-journal__artboard { height: 700px; }
    .atelier-journal__art-card { padding: 7px 7px 37px; }
    .atelier-journal__art-card--aerial { width: 42%; }
    .atelier-journal__art-card--light { left: 38%; width: 27%; }
    .atelier-journal__art-card--sunset { width: 25%; }
    .atelier-journal__art-card--dining { width: 24%; }
    .atelier-journal__seal { width: 82px; height: 82px; }
}

@media (max-width: 700px) {
    .atelier-journal__artboard {
        display: flex;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
        padding: 16px 0 10px;
        background: none;
    }
    .atelier-journal__scribble { display: none; }
    .atelier-journal__art-card,
    .atelier-journal__art-card--aerial,
    .atelier-journal__art-card--light,
    .atelier-journal__art-card--night,
    .atelier-journal__art-card--sunset,
    .atelier-journal__art-card--dining {
        position: relative;
        inset: auto;
        flex: none;
        margin-top: -6px;
    }
    .atelier-journal__art-card--aerial { width: 94%; margin-top: 0; align-self: flex-start; transform: rotate(-1.5deg); }
    .atelier-journal__art-card--light { z-index: 4; width: 72%; align-self: flex-end; transform: rotate(1.8deg); }
    .atelier-journal__art-card--night { z-index: 3; width: 83%; align-self: flex-start; transform: rotate(-1.3deg); }
    .atelier-journal__art-card--sunset { z-index: 4; width: 71%; align-self: flex-end; transform: rotate(1.5deg); }
    .atelier-journal__art-card--dining { z-index: 5; width: 70%; align-self: flex-start; transform: rotate(-1.7deg); }
    .atelier-journal__seal { position: relative; inset: auto; width: 84px; height: 84px; align-self: flex-end; margin: -35px 8% 0 0; }
}

/* Footer — restrained island luxury with a generous typographic finish. */
.footer {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: #0b2623;
    color: #f5f0e7;
}

.footer::before {
    position: absolute;
    top: -180px;
    right: -120px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(211,181,142,.1);
    border-radius: 50%;
    content: "";
}

.footer::after {
    position: absolute;
    top: -120px;
    right: -60px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(211,181,142,.06);
    border-radius: 50%;
    content: "";
}

.footer > .shell { position: relative; z-index: 1; }

.footer__invitation {
    display: grid;
    grid-template-columns: 1.25fr .65fr;
    align-items: end;
    gap: clamp(60px, 9vw, 145px);
    padding: clamp(105px, 10vw, 155px) 0 clamp(80px, 8vw, 120px);
}

.footer__eyebrow {
    display: block;
    color: #cfad82;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.footer__invitation h2 {
    max-width: 850px;
    margin: 20px 0 0;
    color: #f8f3e9;
    font-family: var(--at-serif);
    font-size: clamp(4.2rem, 6.5vw, 7.2rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .88;
}

.footer__invitation h2 em { color: #d8b98e; font-family: inherit; font-weight: 400; }

.footer__invitation-copy {
    max-width: 470px;
    padding: 6px 0 5px 30px;
    border-left: 1px solid rgba(211,181,142,.38);
}

.footer .footer__invitation-copy > p {
    margin: 0 0 32px;
    color: rgba(255,255,255,.66);
    font-family: var(--at-serif);
    font-size: 1.08rem;
    line-height: 1.75;
}

.footer__invitation-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; }

.footer a.footer__reserve {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    gap: 26px;
    padding: 0 24px;
    border: 1px solid #d1b087;
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: .3s ease;
}

.footer a.footer__reserve:hover { background: #d1b087; color: #102826; }
.footer a.footer__text-link { padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.5); color: rgba(255,255,255,.82); font-size: .61rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.footer a.footer__text-link:hover { border-color: #fff; color: #fff; }

.footer__rule { height: 1px; background: rgba(255,255,255,.15); }

.footer__details {
    display: grid;
    grid-template-columns: 1.1fr 1fr .85fr;
    align-items: start;
    gap: clamp(45px, 7vw, 110px);
    padding: 68px 0 55px;
}

.footer__identity { display: flex; align-items: center; gap: 23px; }
.footer img.footer__logo { width: 58px; height: 96px; margin: 0; object-fit: contain; opacity: .94; }
.footer__identity > div { display: flex; flex-direction: column; }
.footer__identity b { color: #fff; font-family: var(--at-serif); font-size: 1.55rem; font-weight: 400; }
.footer__identity span { margin-top: 5px; color: #cfad82; font-size: .5rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }
.footer__identity small { margin-top: 19px; color: rgba(255,255,255,.42); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; }

.footer__navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.footer .footer__navigation a {
    display: flex;
    min-height: 43px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.11);
    color: rgba(255,255,255,.7);
    font-family: var(--at-serif);
    font-size: 1rem;
    transition: color .25s ease, padding-left .25s ease;
}
.footer .footer__navigation a:hover { padding-left: 5px; color: #d8b98e; }

.footer__contact { display: flex; flex-direction: column; font-style: normal; }
.footer__contact > span { margin-bottom: 15px; color: #cfad82; font-size: .55rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.footer .footer__contact a { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 10px; color: rgba(255,255,255,.78); font-size: .77rem; }
.footer .footer__contact a:hover { color: #fff; }
.footer__contact a small { color: rgba(255,255,255,.36); font-size: .48rem; letter-spacing: .13em; text-transform: uppercase; }
.footer .footer__contact p { max-width: 310px; margin: 11px 0 0; color: rgba(255,255,255,.43); font-size: .7rem; line-height: 1.65; }

.footer__wordmark {
    margin: clamp(50px, 6vw, 90px) 0 34px;
    color: rgba(255,255,255,.95);
    font-family: var(--at-serif);
    font-size: clamp(6rem, 14vw, 13.5rem);
    font-weight: 400;
    letter-spacing: -.075em;
    line-height: .7;
    text-align: center;
    white-space: nowrap;
}

.footer__wordmark i { color: #d3b58e; font-family: inherit; font-weight: 400; }

.footer .footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 26px 0 30px;
    border-top: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.38);
    font-size: .49rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.footer__bottom span:nth-child(2) { text-align: center; }
.footer__bottom span:last-child { text-align: right; }

@media (max-width: 900px) {
    .footer__invitation { grid-template-columns: 1fr .75fr; gap: 48px; }
    .footer__details { grid-template-columns: 1fr 1fr; }
    .footer__contact { grid-column: 2; }
    .footer__identity { grid-row: 1 / 3; }
}

@media (max-width: 620px) {
    .footer__invitation { display: block; padding: 92px 0 75px; }
    .footer__invitation h2 { font-size: clamp(3.9rem, 17vw, 5rem); }
    .footer__invitation-copy { margin-top: 42px; padding-left: 20px; }
    .footer__invitation-copy > div { align-items: flex-start; flex-direction: column; }
    .footer__details { display: flex; flex-direction: column; gap: 46px; padding: 55px 0 30px; }
    .footer__identity, .footer__navigation, .footer__contact { width: 100%; }
    .footer__navigation { gap: 0 20px; }
    .footer__wordmark { margin: 62px -3px 30px; font-size: 18.5vw; letter-spacing: -.085em; }
    .footer .footer__bottom { display: flex; align-items: flex-start; gap: 10px; padding: 23px 0 27px; text-align: left; }
    .footer__bottom span:nth-child(2), .footer__bottom span:last-child { text-align: left; }
}

/* Coastal footer revision — photographic invitation over a warm paper base. */
.footer {
    padding: 0;
    background: var(--at-ivory);
    color: var(--at-ink);
}

.footer::before,
.footer::after { content: none; }

.footer__feature {
    display: grid;
    min-height: 570px;
    grid-template-columns: 1.16fr .84fr;
    background: var(--at-deep);
}

.footer__feature-image { position: relative; min-height: 570px; margin: 0; overflow: hidden; }
.footer__feature-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 55%, rgba(12,40,37,.28)); }
.footer__feature-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.footer:hover .footer__feature-image img { transform: scale(1.018); }
.footer__feature-image figcaption {
    position: absolute;
    z-index: 2;
    bottom: 25px;
    left: 34px;
    color: rgba(255,255,255,.8);
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.footer__feature-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(65px, 7vw, 115px);
    background: #11312e;
    color: #fff;
}

.footer__feature-copy .footer__eyebrow { color: #d5b48b; }
.footer__feature-copy h2 {
    max-width: 650px;
    margin: 22px 0 28px;
    color: #fff;
    font-family: var(--at-serif);
    font-size: clamp(3.35rem, 4.5vw, 5.3rem);
    font-weight: 400;
    letter-spacing: -.052em;
    line-height: .92;
}
.footer__feature-copy h2 em { color: #dfc39d; font-family: inherit; font-weight: 400; }
.footer .footer__feature-copy > p { max-width: 520px; margin: 0 0 34px; color: rgba(255,255,255,.66); font-family: var(--at-serif); font-size: 1rem; line-height: 1.72; }
.footer__feature-copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }

.footer__paper { border-top: 1px solid var(--at-rule); background: var(--at-ivory); }
.footer__paper-grid {
    display: grid;
    grid-template-columns: 1.15fr .9fr .85fr;
    align-items: start;
    gap: clamp(45px, 7vw, 105px);
    padding: clamp(75px, 8vw, 115px) 0 72px;
}

.footer__paper .footer__identity { align-items: flex-start; }
.footer__paper .footer__identity > div { padding-top: 8px; }
.footer__paper img.footer__logo { width: 53px; height: 88px; filter: none; }
.footer__paper .footer__identity b { color: var(--at-ink); }
.footer__paper .footer__identity span { color: var(--at-bronze); }
.footer .footer__identity p { max-width: 330px; margin: 20px 0 0; color: #75807b; font-family: var(--at-serif); font-size: .86rem; line-height: 1.65; }

.footer__paper .footer__navigation a {
    border-color: var(--at-rule);
    color: #596964;
}
.footer__paper .footer__navigation a:hover { color: var(--at-bronze); }

.footer__paper .footer__contact > span { color: var(--at-bronze); }
.footer__paper .footer__contact a { color: #435651; }
.footer__paper .footer__contact a:hover { color: var(--at-ink); }
.footer__paper .footer__contact a small { color: #8b938f; }
.footer__paper .footer__contact p { color: #7b8581; }

.footer__paper .footer__bottom {
    grid-template-columns: 1fr auto 1fr;
    border-top-color: var(--at-rule);
    color: #818a86;
}
.footer__paper .footer__bottom a { color: #818a86; text-align: right; }
.footer__paper .footer__bottom a:hover { color: var(--at-bronze); }

@media (max-width: 960px) {
    .footer__feature { grid-template-columns: 1fr 1fr; }
    .footer__feature-copy { padding: 60px 44px; }
    .footer__paper-grid { grid-template-columns: 1fr 1fr; }
    .footer__paper .footer__identity { grid-row: 1 / 3; }
    .footer__paper .footer__contact { grid-column: 2; }
}

@media (max-width: 680px) {
    .footer__feature { display: flex; min-height: 0; flex-direction: column; }
    .footer__feature-image { min-height: 330px; }
    .footer__feature-image::after { background: linear-gradient(0deg, rgba(12,40,37,.28), transparent 55%); }
    .footer__feature-image figcaption { bottom: 18px; left: 20px; }
    .footer__feature-copy { min-height: 455px; padding: 65px 33px 70px; }
    .footer__feature-copy h2 { font-size: clamp(3.35rem, 14.5vw, 4.35rem); }
    .footer__feature-copy > div { align-items: flex-start; flex-direction: column; }
    .footer__paper-grid { display: flex; flex-direction: column; gap: 48px; padding: 70px 0 52px; }
    .footer__paper .footer__identity,
    .footer__paper .footer__navigation,
    .footer__paper .footer__contact { width: 100%; }
    .footer__paper .footer__bottom { align-items: flex-start; flex-direction: column; }
    .footer__paper .footer__bottom a { text-align: left; }
}

/* Rhythm of a day — layered resort editorial. */
.atelier-rhythm {
    position: relative;
    padding: clamp(120px, 12vw, 185px) 0;
    overflow: hidden;
    background: #f5f0e7;
}

.atelier-rhythm .atelier-statement { margin-bottom: clamp(78px, 9vw, 125px); }

.atelier-rhythm__grid {
    position: relative;
    display: grid;
    min-height: 900px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
}

.atelier-rhythm__grid::before {
    position: absolute;
    z-index: 0;
    top: 86px;
    right: -90px;
    bottom: 0;
    width: 61%;
    background: #12312e;
    content: "";
}

.atelier-rhythm__grid::after {
    position: absolute;
    z-index: 1;
    top: 55px;
    right: -45px;
    width: 47%;
    height: 70%;
    border: 1px solid rgba(202,166,121,.28);
    content: "";
    pointer-events: none;
}

.atelier-rhythm__large {
    position: relative;
    z-index: 2;
    grid-column: 1 / 8;
    grid-row: 1;
    padding-bottom: 88px;
}

.atelier-rhythm__large > img {
    display: block;
    width: 82%;
    height: 790px;
    border: 10px solid #fffdf8;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 28px 70px rgba(24,49,47,.17);
}

.atelier-rhythm .atelier-rhythm__large figcaption {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 20px;
    display: grid;
    width: 58%;
    grid-template-columns: auto 1fr;
    gap: 5px 18px;
    padding: 30px 34px;
    background: #fffdf8;
    box-shadow: 0 18px 45px rgba(24,49,47,.13);
}

.atelier-rhythm__stack {
    position: relative;
    z-index: 2;
    display: block;
    grid-column: 7 / 13;
    grid-row: 1;
    padding: 0;
}

.atelier-rhythm__stack > figure { position: absolute; top: 72px; right: 42px; width: 58%; margin: 0; }
.atelier-rhythm__stack figure img {
    display: block;
    width: 100%;
    aspect-ratio: .72;
    border: 8px solid #f8f3e9;
    object-fit: cover;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
}

.atelier-rhythm .atelier-rhythm__stack figcaption {
    grid-template-columns: auto 1fr;
    padding-top: 18px;
}

.atelier-rhythm__stack figcaption span { color: #fff; }
.atelier-rhythm__stack figcaption b { color: #d7b68d; }

.atelier-rhythm__note {
    position: absolute;
    bottom: 64px;
    left: 88px;
    width: 90%;
    max-width: 470px;
    margin: 0;
    padding: 7px 0 6px 31px;
    border-left: 1px solid #cda979;
}

.atelier-rhythm__note .atelier-label { color: #d2b087; }
.atelier-rhythm__note > p { margin: 17px 0 27px; color: rgba(255,255,255,.78); font-size: 1.28rem; line-height: 1.6; }
.atelier-rhythm__note .atelier-link { border-color: rgba(255,255,255,.65); color: #fff; }
.atelier-rhythm__note .atelier-link:hover { color: #d7b68d; }

@media (max-width: 980px) {
    .atelier-rhythm__grid { min-height: 830px; }
    .atelier-rhythm__large > img { width: 88%; height: 700px; }
    .atelier-rhythm__stack > figure { top: 78px; right: 16px; width: 65%; }
    .atelier-rhythm__note { bottom: 52px; left: 48px; }
    .atelier-rhythm .atelier-rhythm__large figcaption { width: 66%; }
}

@media (max-width: 700px) {
    .atelier-rhythm { padding: 95px 0; }
    .atelier-rhythm__grid { display: block; min-height: 0; }
    .atelier-rhythm__grid::before,
    .atelier-rhythm__grid::after { content: none; }
    .atelier-rhythm__large { padding: 0; }
    .atelier-rhythm__large > img { width: 100%; height: 570px; border-width: 6px; }
    .atelier-rhythm .atelier-rhythm__large figcaption {
        position: relative;
        right: auto;
        bottom: auto;
        width: 91%;
        margin: -38px 0 0 auto;
        padding: 24px 23px;
    }
    .atelier-rhythm__stack { position: relative; margin-top: 58px; padding: 64px 25px 70px; background: #12312e; }
    .atelier-rhythm__stack > figure { position: relative; inset: auto; width: 80%; margin-left: auto; }
    .atelier-rhythm__stack figure img { border-width: 5px; }
    .atelier-rhythm__note { position: relative; inset: auto; width: 100%; margin-top: 58px; padding-left: 22px; }
}

/* Rhythm refinement — quiet, minimal and image-led. */
.atelier-rhythm { padding: clamp(120px, 12vw, 185px) 0; background: var(--at-ivory); }
.atelier-rhythm .atelier-statement { max-width: 1080px; margin-bottom: clamp(75px, 8vw, 115px); }

.atelier-rhythm__grid {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1.22fr) minmax(290px, .58fr);
    align-items: start;
    gap: clamp(55px, 7vw, 105px);
}

.atelier-rhythm__grid::before,
.atelier-rhythm__grid::after { content: none; }

.atelier-rhythm__large {
    position: relative;
    display: block;
    grid-column: auto;
    grid-row: auto;
    padding: 0;
}

.atelier-rhythm__large > img {
    width: 100%;
    height: 760px;
    border: 0;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
}

.atelier-rhythm .atelier-rhythm__large figcaption {
    position: static;
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr;
    gap: 5px 20px;
    margin: 0;
    padding: 24px 0 0;
    border-bottom: 1px solid var(--at-rule);
    background: transparent;
    box-shadow: none;
}

.atelier-rhythm .atelier-rhythm__large figcaption p { padding-bottom: 23px; }

.atelier-rhythm__stack {
    position: static;
    display: flex;
    grid-column: auto;
    grid-row: auto;
    padding: 92px 0 0;
    flex-direction: column;
}

.atelier-rhythm__stack > figure {
    position: static;
    width: 82%;
    margin: 0 0 0 auto;
}

.atelier-rhythm__stack figure img {
    width: 100%;
    aspect-ratio: .72;
    border: 0;
    object-fit: cover;
    box-shadow: none;
}

.atelier-rhythm .atelier-rhythm__stack figcaption { padding: 19px 0 0; border-bottom: 1px solid var(--at-rule); }
.atelier-rhythm__stack figcaption span { padding-bottom: 18px; color: var(--at-ink); }
.atelier-rhythm__stack figcaption b { color: var(--at-bronze); }

.atelier-rhythm__note {
    position: static;
    width: 100%;
    max-width: 430px;
    margin: 80px 0 0;
    padding: 0 0 0 27px;
    border-left: 1px solid var(--at-bronze);
}

.atelier-rhythm__note .atelier-label { color: var(--at-bronze); }
.atelier-rhythm__note > p { margin: 17px 0 27px; color: var(--at-ink); font-size: 1.22rem; line-height: 1.65; }
.atelier-rhythm__note .atelier-link { border-color: var(--at-ink); color: var(--at-ink); }
.atelier-rhythm__note .atelier-link:hover { color: var(--at-bronze); }

@media (max-width: 900px) {
    .atelier-rhythm__grid { grid-template-columns: 1fr .72fr; gap: 42px; }
    .atelier-rhythm__large > img { height: 660px; }
    .atelier-rhythm__stack { padding-top: 65px; }
    .atelier-rhythm__stack > figure { width: 90%; }
}

@media (max-width: 700px) {
    .atelier-rhythm { padding: 95px 0; }
    .atelier-rhythm__grid { display: block; }
    .atelier-rhythm__large > img { height: 560px; border: 0; }
    .atelier-rhythm .atelier-rhythm__large figcaption { width: 100%; margin: 0; padding: 21px 0 0; }
    .atelier-rhythm__stack { margin: 72px 0 0; padding: 0; background: transparent; }
    .atelier-rhythm__stack > figure { width: 82%; margin-left: auto; }
    .atelier-rhythm__stack figure img { border: 0; }
    .atelier-rhythm__note { width: 100%; margin-top: 60px; padding-left: 22px; }
}

/* Rhythm art direction — sculptural arch and circular portrait. */
.atelier-rhythm {
    background: #efe7da;
}

.atelier-rhythm__grid {
    position: relative;
    display: grid;
    min-height: 930px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 0;
}

.atelier-rhythm__grid::before {
    position: absolute;
    z-index: 0;
    top: 40px;
    right: -20px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(166,123,79,.25);
    border-radius: 50%;
    content: "";
}

.atelier-rhythm__grid::after {
    position: absolute;
    z-index: 0;
    top: 82px;
    right: 22px;
    width: 345px;
    height: 345px;
    border: 1px solid rgba(166,123,79,.13);
    border-radius: 50%;
    content: "";
}

.atelier-rhythm__large {
    position: relative;
    z-index: 2;
    grid-column: 1 / 8;
}

.atelier-rhythm__large::before {
    position: absolute;
    z-index: -1;
    top: -18px;
    right: 9%;
    bottom: 95px;
    left: -18px;
    border: 1px solid rgba(166,123,79,.36);
    border-radius: 360px 360px 0 0;
    content: "";
}

.atelier-rhythm__large > img {
    width: 88%;
    height: 760px;
    border-radius: 360px 360px 0 0;
    object-fit: cover;
    object-position: center;
}

.atelier-rhythm .atelier-rhythm__large figcaption {
    width: 88%;
    padding-top: 25px;
    border-bottom: 0;
}

.atelier-rhythm .atelier-rhythm__large figcaption p {
    max-width: 460px;
    padding-bottom: 0;
}

.atelier-rhythm__stack {
    position: relative;
    z-index: 2;
    display: flex;
    grid-column: 8 / 13;
    padding: 82px 0 0;
    flex-direction: column;
}

.atelier-rhythm__stack > figure {
    position: relative;
    width: 77%;
    margin: 0 0 0 auto;
}

.atelier-rhythm__stack figure img {
    width: 100%;
    aspect-ratio: 1;
    border: 8px solid #f8f3e9;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 58%;
    box-shadow: 0 24px 60px rgba(50,49,40,.14);
}

.atelier-rhythm .atelier-rhythm__stack figcaption {
    width: 88%;
    margin-left: auto;
    padding-top: 20px;
    border-bottom: 0;
}

.atelier-rhythm__stack figcaption span { padding-bottom: 0; }

.atelier-rhythm__note {
    position: relative;
    max-width: 430px;
    margin: 105px 0 0 6%;
    padding: 31px 0 0;
    border-top: 1px solid var(--at-bronze);
    border-left: 0;
}

.atelier-rhythm__note::before {
    position: absolute;
    top: -6px;
    left: 0;
    width: 11px;
    height: 11px;
    border: 1px solid var(--at-bronze);
    border-radius: 50%;
    background: #efe7da;
    content: "";
}

.atelier-rhythm__note > p { font-size: 1.28rem; }

@media (max-width: 960px) {
    .atelier-rhythm__grid { min-height: 820px; }
    .atelier-rhythm__large > img { height: 660px; }
    .atelier-rhythm__stack { padding-top: 72px; }
    .atelier-rhythm__stack > figure { width: 84%; }
    .atelier-rhythm__note { margin-top: 75px; }
}

@media (max-width: 700px) {
    .atelier-rhythm__grid { display: block; min-height: 0; }
    .atelier-rhythm__grid::before { top: 790px; right: -80px; width: 310px; height: 310px; }
    .atelier-rhythm__grid::after { top: 825px; right: -45px; width: 240px; height: 240px; }
    .atelier-rhythm__large::before { top: -10px; right: 4%; bottom: 90px; left: -8px; border-radius: 230px 230px 0 0; }
    .atelier-rhythm__large > img { width: 96%; height: 570px; border-radius: 230px 230px 0 0; }
    .atelier-rhythm .atelier-rhythm__large figcaption { width: 96%; }
    .atelier-rhythm__stack { margin-top: 92px; padding: 0; background: transparent; }
    .atelier-rhythm__stack > figure { width: 78%; margin-left: auto; }
    .atelier-rhythm__stack figure img { border-width: 6px; }
    .atelier-rhythm__note { width: 92%; margin: 75px 0 0; padding: 28px 0 0; }
}

/* A day on film — full-bleed cinematic sequence. */
.rhythm-film {
    position: relative;
    padding: clamp(115px, 11vw, 175px) 0 clamp(105px, 10vw, 155px);
    overflow: hidden;
    background: #0d2927;
    color: #f5efe4;
}

.rhythm-film::before {
    position: absolute;
    top: -7vw;
    right: -1vw;
    color: transparent;
    content: "24";
    font-family: var(--at-serif);
    font-size: clamp(16rem, 31vw, 35rem);
    font-weight: 400;
    letter-spacing: -.09em;
    line-height: 1;
    opacity: .12;
    pointer-events: none;
    -webkit-text-stroke: 1px #e8dac4;
}

.rhythm-film__head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .48fr);
    align-items: end;
    gap: clamp(65px, 9vw, 150px);
    padding-top: 25px;
    border-top: 1px solid rgba(238,221,196,.3);
}

.rhythm-film .atelier-label { color: #d5ab79; }

.rhythm-film__head h2 {
    max-width: 1100px;
    margin: 24px 0 0;
    color: #fffaf1;
    font-family: var(--at-serif);
    font-size: clamp(4rem, 7.2vw, 8rem);
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: .84;
}

.rhythm-film__head h2 em {
    color: #d5ab79;
    font-family: inherit;
    font-weight: 400;
}

.rhythm-film__intro {
    margin-bottom: 6px;
    padding: 5px 0 2px 26px;
    border-left: 1px solid rgba(213,171,121,.65);
}

.rhythm-film__intro span {
    display: block;
    margin-bottom: 18px;
    color: #d5ab79;
    font-size: .68rem;
    letter-spacing: .18em;
    line-height: 1.5;
    text-transform: uppercase;
}

.rhythm-film__intro p {
    margin: 0;
    color: rgba(255,250,241,.68);
    font-family: var(--at-serif);
    font-size: 1.11rem;
    line-height: 1.65;
}

.rhythm-film__frames {
    position: relative;
    z-index: 2;
    display: grid;
    height: clamp(630px, 52vw, 830px);
    margin-top: clamp(75px, 8vw, 125px);
    grid-template-columns: 1.34fr .78fr .64fr;
    gap: 4px;
    background: #0d2927;
}

.rhythm-film__frame {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #071b1a;
}

.rhythm-film__frame::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,20,19,.02) 35%, rgba(5,20,19,.82) 100%);
    content: "";
    pointer-events: none;
}

.rhythm-film__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2,.65,.25,1), filter .7s ease;
}

.rhythm-film__frame--day img { object-position: center; }
.rhythm-film__frame--dusk img { object-position: 43% center; }
.rhythm-film__frame--night img { object-position: center; }

.rhythm-film__frame:hover img {
    filter: saturate(1.08);
    transform: scale(1.035);
}

.rhythm-film__frame figcaption {
    position: absolute;
    z-index: 2;
    right: clamp(22px, 2.6vw, 42px);
    bottom: clamp(24px, 3vw, 48px);
    left: clamp(22px, 2.6vw, 42px);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 6px 17px;
    color: #fff;
}

.rhythm-film__frame figcaption b {
    grid-row: 1 / 3;
    color: transparent;
    font-family: var(--at-serif);
    font-size: clamp(3rem, 5vw, 6.2rem);
    font-weight: 400;
    letter-spacing: -.08em;
    line-height: .7;
    opacity: .7;
    -webkit-text-stroke: 1px rgba(255,255,255,.76);
}

.rhythm-film__frame figcaption time {
    color: #e7bd89;
    font-size: .62rem;
    letter-spacing: .2em;
}

.rhythm-film__frame figcaption span {
    font-family: var(--at-serif);
    font-size: clamp(1.1rem, 1.65vw, 1.65rem);
    line-height: 1.1;
}

.rhythm-film__foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 30px 0 0;
    border-top: 1px solid rgba(238,221,196,.3);
}

.rhythm-film__foot p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,250,241,.66);
    font-family: var(--at-serif);
    font-size: clamp(1rem, 1.35vw, 1.3rem);
    line-height: 1.55;
}

.rhythm-film__foot p span {
    margin-right: 15px;
    color: #d5ab79;
    font-family: var(--at-sans);
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.rhythm-film__foot a {
    flex: none;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,250,241,.65);
    color: #fffaf1;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.rhythm-film__foot a span { margin-left: 9px; color: #d5ab79; }

@media (max-width: 900px) {
    .rhythm-film__head { grid-template-columns: 1fr; gap: 45px; }
    .rhythm-film__intro { max-width: 540px; margin-left: auto; }
    .rhythm-film__frames { height: 670px; grid-template-columns: 1.15fr .8fr .7fr; }
    .rhythm-film__frame figcaption { display: block; }
    .rhythm-film__frame figcaption b { display: block; margin-bottom: 17px; }
    .rhythm-film__frame figcaption time { display: block; margin-bottom: 8px; }
}

@media (max-width: 700px) {
    .rhythm-film { padding: 95px 0 90px; }
    .rhythm-film::before { top: 25px; right: -18px; font-size: 14rem; opacity: .08; }
    .rhythm-film__head { gap: 38px; padding-top: 20px; }
    .rhythm-film__head h2 { margin-top: 20px; font-size: clamp(3.35rem, 15.5vw, 4.45rem); line-height: .87; }
    .rhythm-film__intro { width: 86%; margin: 0 0 0 auto; }
    .rhythm-film__frames {
        display: grid;
        height: 610px;
        margin: 68px calc(50% - 50vw) 0;
        padding: 0 8vw;
        grid-auto-columns: 82vw;
        grid-template-columns: none;
        grid-auto-flow: column;
        gap: 5px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 8vw;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }
    .rhythm-film__frames::-webkit-scrollbar { display: none; }
    .rhythm-film__frame { scroll-snap-align: start; }
    .rhythm-film__frame figcaption { right: 25px; bottom: 30px; left: 25px; }
    .rhythm-film__frame figcaption b { font-size: 4.6rem; }
    .rhythm-film__frame figcaption span { font-size: 1.45rem; }
    .rhythm-film__foot { align-items: flex-start; flex-direction: column; padding-top: 26px; }
}

/* Island breeze — clean, image-first resort story. */
.rhythm-breeze {
    position: relative;
    padding: clamp(115px, 10vw, 165px) 0 clamp(125px, 11vw, 180px);
    overflow: hidden;
    background: #edf8fb;
}

.rhythm-breeze__sketch {
    position: absolute;
    z-index: 0;
    width: 230px;
    height: auto;
    fill: none;
    opacity: .9;
    pointer-events: none;
    stroke: #ed783b;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.rhythm-breeze__sketch--sun { right: -48px; top: 76px; }
.rhythm-breeze__sketch--palm { bottom: -36px; left: -48px; width: 245px; }

.rhythm-breeze .shell { position: relative; z-index: 1; }

.rhythm-breeze__head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .7fr);
    align-items: end;
    gap: clamp(70px, 9vw, 150px);
}

.rhythm-breeze__head > div:first-child > span {
    display: block;
    margin-bottom: 25px;
    color: #0c8291;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.rhythm-breeze__head h2 {
    max-width: 890px;
    margin: 0;
    color: #184c57;
    font-family: var(--at-sans);
    font-size: clamp(3.4rem, 5.7vw, 6rem);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: .96;
}

.rhythm-breeze__intro {
    max-width: 530px;
    padding-bottom: 7px;
}

.rhythm-breeze__intro p {
    margin: 0 0 30px;
    color: #758e94;
    font-family: var(--at-sans);
    font-size: 1.02rem;
    line-height: 1.75;
}

.rhythm-breeze__intro a {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 15px 22px;
    border-radius: 999px;
    background: #0a91a3;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: background .25s ease, transform .25s ease;
}

.rhythm-breeze__intro a:hover { background: #ed783b; transform: translateY(-2px); }

.rhythm-breeze__gallery {
    display: grid;
    min-height: 680px;
    margin-top: clamp(72px, 8vw, 120px);
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(17px, 2vw, 30px);
}

.rhythm-breeze__gallery figure {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #cfe5e9;
}

.rhythm-breeze__gallery figure::after {
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, transparent, rgba(4,32,36,.72));
    content: "";
    pointer-events: none;
}

.rhythm-breeze__gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.65,.25,1);
}

.rhythm-breeze__gallery figure:hover img { transform: scale(1.035); }

.rhythm-breeze__pair {
    display: grid;
    grid-template-rows: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(17px, 2vw, 30px);
}

.rhythm-breeze__pair figure:first-child img { object-position: center 60%; }
.rhythm-breeze__pair figure:last-child img { object-position: 42% center; }
.rhythm-breeze__portrait img { object-position: center; }
.rhythm-breeze__night img { object-position: center; }

.rhythm-breeze__gallery figcaption {
    position: absolute;
    z-index: 2;
    right: 25px;
    bottom: 24px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.rhythm-breeze__gallery figcaption b {
    display: grid;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    place-items: center;
    font-family: var(--at-sans);
    font-size: .59rem;
    font-weight: 600;
}

.rhythm-breeze__gallery figcaption span {
    font-family: var(--at-sans);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .rhythm-breeze__head { grid-template-columns: 1fr .72fr; gap: 50px; }
    .rhythm-breeze__gallery { min-height: 590px; }
    .rhythm-breeze__gallery figcaption { right: 18px; bottom: 18px; left: 18px; }
    .rhythm-breeze__gallery figcaption b { display: none; }
}

@media (max-width: 700px) {
    .rhythm-breeze { padding: 95px 0 110px; }
    .rhythm-breeze__sketch--sun { top: 16px; right: -85px; width: 190px; opacity: .65; }
    .rhythm-breeze__sketch--palm { bottom: -25px; left: -74px; width: 205px; opacity: .7; }
    .rhythm-breeze__head { grid-template-columns: 1fr; gap: 36px; }
    .rhythm-breeze__head > div:first-child > span { margin-bottom: 20px; }
    .rhythm-breeze__head h2 { font-size: clamp(3rem, 13.5vw, 3.9rem); line-height: .98; }
    .rhythm-breeze__intro { width: 88%; margin-left: auto; }
    .rhythm-breeze__intro p { font-size: .95rem; }
    .rhythm-breeze__gallery { display: block; min-height: 0; margin-top: 62px; }
    .rhythm-breeze__pair { display: grid; height: 620px; margin-bottom: 17px; grid-template-rows: .75fr 1.25fr; gap: 17px; }
    .rhythm-breeze__portrait,
    .rhythm-breeze__night { height: 520px; margin-top: 17px !important; }
    .rhythm-breeze__gallery figure { border-radius: 18px; }
    .rhythm-breeze__gallery figcaption b { display: grid; }
}

/* Villas index — large image-first accommodation showcase. */
.villa-overview {
    position: relative;
    padding: clamp(115px, 10vw, 165px) 0 clamp(95px, 8vw, 135px);
    overflow: hidden;
    background: #f8f6f0;
}

.villa-overview::after {
    position: absolute;
    top: 70px;
    right: -80px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(10,145,163,.14);
    border-radius: 50%;
    content: "";
}

.villa-overview__head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
    align-items: end;
    gap: clamp(70px, 10vw, 165px);
}

.villa-overview__head div > span,
.villa-collection__head div > span {
    display: block;
    margin-bottom: 22px;
    color: #0a8797;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.villa-overview__head h2 {
    margin: 0;
    color: #174b56;
    font-family: var(--at-sans);
    font-size: clamp(4rem, 7vw, 7.4rem);
    font-weight: 600;
    letter-spacing: -.065em;
    line-height: .86;
}

.villa-overview__head > p {
    max-width: 510px;
    margin: 0 0 9px;
    color: #718b91;
    font-family: var(--at-sans);
    font-size: 1.04rem;
    line-height: 1.8;
}

.villa-overview__nav {
    position: relative;
    z-index: 1;
    display: grid;
    margin-top: clamp(75px, 8vw, 120px);
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #cbdadd;
    border-bottom: 1px solid #cbdadd;
}

.villa-overview__nav a {
    position: relative;
    display: flex;
    min-height: 118px;
    padding: 27px clamp(20px, 2.4vw, 38px);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    color: #174b56;
    transition: background .25s ease, color .25s ease;
}

.villa-overview__nav a + a { border-left: 1px solid #cbdadd; }
.villa-overview__nav a:hover { background: #0a91a3; color: #fff; }

.villa-overview__nav span {
    font-family: var(--at-sans);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 650;
    letter-spacing: -.025em;
}

.villa-overview__nav small {
    margin-top: 9px;
    color: #ed783b;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.villa-overview__nav a:hover small { color: #fff; }

.villa-overview__included {
    margin: 23px 0 0;
    color: #80959a;
    font-family: var(--at-sans);
    font-size: .78rem;
    text-align: center;
}

.villa-collection {
    padding: clamp(115px, 10vw, 165px) 0 clamp(125px, 11vw, 185px);
    scroll-margin-top: 85px;
}

.villa-collection--blue { background: #edf8fb; }
.villa-collection--light { background: #fff; }

.villa-collection__head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .55fr);
    align-items: end;
    gap: clamp(65px, 9vw, 145px);
    padding-top: 28px;
    border-top: 1px solid rgba(23,75,86,.22);
}

.villa-collection__head h2 {
    margin: 0;
    color: #174b56;
    font-family: var(--at-sans);
    font-size: clamp(3.2rem, 5.4vw, 5.7rem);
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: .94;
}

.villa-collection__head > p {
    max-width: 450px;
    margin: 0 0 8px;
    color: #718b91;
    font-family: var(--at-sans);
    font-size: 1rem;
    line-height: 1.7;
}

.villa-list {
    display: flex;
    margin-top: clamp(75px, 8vw, 120px);
    flex-direction: column;
    gap: clamp(105px, 10vw, 155px);
}

.villa-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    align-items: center;
    gap: clamp(55px, 7vw, 110px);
}

.villa-feature:nth-child(even) { grid-template-columns: minmax(300px, .55fr) minmax(0, 1.45fr); }
.villa-feature:nth-child(even) .villa-feature__media { grid-column: 2; grid-row: 1; }
.villa-feature:nth-child(even) .villa-feature__copy { grid-column: 1; grid-row: 1; }

.villa-feature__media {
    position: relative;
    display: block;
    height: clamp(520px, 45vw, 710px);
    overflow: hidden;
    border-radius: 27px;
    background: #cbdfe3;
}

.villa-feature__media::after {
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(180deg, transparent, rgba(5,34,37,.3));
    content: "";
    pointer-events: none;
}

.villa-feature__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .9s cubic-bezier(.2,.65,.25,1);
}

.villa-feature:nth-child(2) .villa-feature__media img { object-position: center 45%; }
.villa-feature__media:hover img { transform: scale(1.035); }

.villa-feature__media > span {
    position: absolute;
    z-index: 2;
    right: 25px;
    bottom: 24px;
    display: inline-flex;
    padding: 14px 18px;
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.92);
    color: #174b56;
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.villa-feature__media > span b { color: #ed783b; font-size: .9rem; }

.villa-feature__copy { max-width: 480px; }
.villa-feature:nth-child(even) .villa-feature__copy { margin-left: auto; }

.villa-feature__topline {
    display: flex;
    margin-bottom: 25px;
    align-items: center;
    gap: 14px;
    color: #0a8797;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.villa-feature__topline span:first-child {
    display: grid;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(10,135,151,.35);
    border-radius: 50%;
    place-items: center;
}

.villa-feature__copy h3 {
    margin: 0;
    color: #174b56;
    font-family: var(--at-sans);
    font-size: clamp(2.5rem, 4vw, 4.35rem);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: .94;
}

.villa-feature__copy > p {
    margin: 26px 0;
    color: #718b91;
    font-family: var(--at-sans);
    font-size: 1rem;
    line-height: 1.75;
}

.villa-feature__meta {
    display: flex;
    padding: 19px 0;
    border-top: 1px solid rgba(23,75,86,.18);
    border-bottom: 1px solid rgba(23,75,86,.18);
    flex-wrap: wrap;
    gap: 14px 28px;
}

.villa-feature__meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #456b73;
    font-family: var(--at-sans);
    font-size: .76rem;
}

.villa-feature__rate {
    display: grid;
    margin-top: 27px;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
}

.villa-feature__rate small {
    align-self: center;
    color: #ed783b;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.villa-feature__rate strong {
    color: #174b56;
    font-family: var(--at-sans);
    font-size: clamp(1.8rem, 2.5vw, 2.65rem);
    font-weight: 650;
    letter-spacing: -.04em;
    line-height: 1;
}

.villa-feature__rate span {
    grid-column: 2;
    color: #82969a;
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.villa-feature__link {
    display: inline-flex;
    margin-top: 29px;
    padding-bottom: 7px;
    border-bottom: 1px solid #174b56;
    align-items: center;
    gap: 14px;
    color: #174b56;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.villa-feature__link span { color: #ed783b; font-size: .9rem; }

@media (max-width: 900px) {
    .villa-overview__head,
    .villa-collection__head { grid-template-columns: 1fr .72fr; gap: 50px; }
    .villa-feature,
    .villa-feature:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 45px; }
    .villa-feature__media { height: 560px; }
}

@media (max-width: 700px) {
    .villa-overview { padding: 95px 0 85px; }
    .villa-overview::after { top: 40px; right: -130px; width: 250px; height: 250px; }
    .villa-overview__head,
    .villa-collection__head { grid-template-columns: 1fr; gap: 35px; }
    .villa-overview__head h2 { font-size: clamp(3.6rem, 16vw, 4.7rem); }
    .villa-overview__head > p { width: 88%; margin-left: auto; }
    .villa-overview__nav { margin-top: 62px; grid-template-columns: 1fr; }
    .villa-overview__nav a { min-height: 92px; padding: 22px 5px; }
    .villa-overview__nav a + a { border-top: 1px solid #cbdadd; border-left: 0; }
    .villa-overview__included { line-height: 1.65; text-align: left; }
    .villa-collection { padding: 95px 0 115px; }
    .villa-collection__head h2 { font-size: clamp(3rem, 14vw, 4rem); }
    .villa-collection__head > p { width: 88%; margin-left: auto; }
    .villa-list { margin-top: 62px; gap: 92px; }
    .villa-feature,
    .villa-feature:nth-child(even) { display: flex; gap: 34px; flex-direction: column; }
    .villa-feature:nth-child(even) .villa-feature__media,
    .villa-feature:nth-child(even) .villa-feature__copy { grid-column: auto; grid-row: auto; }
    .villa-feature__media { width: 100%; height: 470px; border-radius: 21px; }
    .villa-feature__copy,
    .villa-feature:nth-child(even) .villa-feature__copy { width: 100%; max-width: none; margin: 0; }
    .villa-feature__copy h3 { font-size: clamp(2.5rem, 11.5vw, 3.35rem); }
    .villa-feature__copy > p { margin: 21px 0; }
}

/* Villas refinement — compact two-column grid in the resort's gold palette. */
.villa-overview {
    padding: clamp(90px, 8vw, 125px) 0 clamp(78px, 7vw, 105px);
    background: #f8f4eb;
}

.villa-overview::after { border-color: rgba(177,129,75,.2); }

.villa-overview__head div > span,
.villa-collection__head div > span,
.villa-feature__topline { color: #a8733d; }

.villa-overview__head h2,
.villa-collection__head h2,
.villa-feature__copy h3,
.villa-feature__rate strong,
.villa-feature__link { color: #173a35; }

.villa-overview__head h2 {
    font-size: clamp(3.15rem, 4.9vw, 5.15rem);
    line-height: .92;
}

.villa-collection__head h2 {
    font-size: clamp(2.75rem, 4vw, 4.2rem);
    line-height: .98;
}

.villa-overview__head > p,
.villa-collection__head > p,
.villa-feature__copy > p { color: #6f7972; }

.villa-overview__nav {
    margin-top: clamp(58px, 6vw, 85px);
    border-color: rgba(119,91,55,.27);
}

.villa-overview__nav a { min-height: 100px; color: #173a35; }
.villa-overview__nav a + a { border-color: rgba(119,91,55,.27); }
.villa-overview__nav a:hover { background: #173a35; }
.villa-overview__nav small,
.villa-feature__rate small,
.villa-feature__link span { color: #b2773f; }
.villa-overview__included { color: #807b70; }

.villa-collection {
    padding: clamp(88px, 8vw, 125px) 0 clamp(95px, 9vw, 140px);
}

.villa-collection--blue { background: #eee5d7; }
.villa-collection--light { background: #faf7f0; }
.villa-collection__head { border-color: rgba(119,91,55,.28); }

.villa-list {
    display: grid;
    margin-top: clamp(58px, 6vw, 88px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(70px, 7vw, 105px) clamp(26px, 3vw, 44px);
}

.villa-feature,
.villa-feature:nth-child(even) {
    display: block;
}

.villa-feature:nth-child(even) .villa-feature__media,
.villa-feature:nth-child(even) .villa-feature__copy {
    grid-column: auto;
    grid-row: auto;
}

.villa-feature__media {
    height: clamp(400px, 32vw, 510px);
    border-radius: 20px;
    background: #ded4c3;
}

.villa-feature__media > span {
    right: 20px;
    bottom: 20px;
    padding: 12px 16px;
    color: #173a35;
}

.villa-feature__copy,
.villa-feature:nth-child(even) .villa-feature__copy {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 28px 3px 0;
}

.villa-feature__topline { margin-bottom: 19px; }
.villa-feature__topline span:first-child { border-color: rgba(168,115,61,.38); }

.villa-feature__copy h3 {
    font-size: clamp(1.95rem, 2.7vw, 2.7rem);
    line-height: 1.03;
}

.villa-feature__copy > p {
    max-width: 560px;
    margin: 19px 0 21px;
    line-height: 1.65;
}

.villa-feature__meta {
    padding: 15px 0;
    border-color: rgba(119,91,55,.22);
}

.villa-feature__meta span { color: #596c65; }
.villa-feature__rate { margin-top: 21px; }
.villa-feature__link { margin-top: 23px; border-color: #173a35; }

@media (max-width: 900px) {
    .villa-list { gap: 75px 25px; }
    .villa-feature__media { height: 440px; }
}

@media (max-width: 700px) {
    .villa-overview { padding: 82px 0 72px; }
    .villa-overview__nav { margin-top: 52px; }
    .villa-collection { padding: 80px 0 95px; }
    .villa-list { display: grid; grid-template-columns: 1fr; gap: 68px; }
    .villa-feature,
    .villa-feature:nth-child(even) { display: block; }
    .villa-feature__media { height: 420px; }
    .villa-feature__copy,
    .villa-feature:nth-child(even) .villa-feature__copy { padding-top: 24px; }
    .villa-overview__head h2 { font-size: clamp(3rem, 13vw, 3.65rem); }
    .villa-collection__head h2 { font-size: clamp(2.55rem, 11vw, 3.15rem); }
    .villa-feature__copy h3 { font-size: clamp(2rem, 9vw, 2.45rem); }
}

/* Villas art polish — warm stagger, quiet framing and tactile depth. */
.villa-list {
    padding-bottom: 28px;
    gap: clamp(58px, 5.5vw, 82px) clamp(28px, 3.2vw, 48px);
}

.villa-feature {
    position: relative;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(130,93,51,.2);
}

.villa-feature:nth-child(even) { transform: translateY(28px); }

.villa-feature__media {
    border: 6px solid rgba(255,252,246,.78);
    border-radius: 58px 18px 18px 18px;
    box-shadow: 0 23px 58px rgba(72,57,37,.13);
}

.villa-feature:nth-child(even) .villa-feature__media {
    border-radius: 18px 58px 18px 18px;
}

.villa-feature__media img {
    filter: saturate(.92) contrast(1.02) sepia(.035);
}

.villa-feature__media:hover img { filter: saturate(1.02) contrast(1.02); }

.villa-feature__media > span {
    border: 1px solid rgba(177,129,75,.25);
    box-shadow: 0 10px 28px rgba(38,42,34,.13);
}

.villa-feature__copy,
.villa-feature:nth-child(even) .villa-feature__copy { padding-right: 11px; padding-left: 11px; }

.villa-feature__topline span:first-child {
    background: rgba(177,129,75,.08);
}

.villa-feature__copy h3 { font-weight: 580; }

.villa-collection__head::after {
    align-self: end;
    width: 44px;
    height: 44px;
    margin: 0 0 8px auto;
    border: 1px solid rgba(177,129,75,.42);
    border-radius: 50%;
    content: "";
    box-shadow: inset 0 0 0 8px transparent, inset 0 0 0 9px rgba(177,129,75,.16);
}

.villa-collection__head { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .48fr) auto; }

@media (max-width: 900px) {
    .villa-collection__head { grid-template-columns: 1fr .72fr; }
    .villa-collection__head::after { display: none; }
    .villa-feature:nth-child(even) { transform: translateY(20px); }
}

@media (max-width: 700px) {
    .villa-list { padding-bottom: 0; gap: 64px; }
    .villa-collection__head { grid-template-columns: 1fr; }
    .villa-feature,
    .villa-feature:nth-child(even) { padding-bottom: 22px; transform: none; }
    .villa-feature__media,
    .villa-feature:nth-child(even) .villa-feature__media {
        border-width: 4px;
        border-radius: 34px 14px 14px 14px;
    }
    .villa-feature__copy,
    .villa-feature:nth-child(even) .villa-feature__copy { padding-right: 4px; padding-left: 4px; }
}

/* Villas editorial composition — asymmetric resort lookbook. */
.villa-list {
    display: grid;
    padding-bottom: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: clamp(58px, 6vw, 88px) clamp(22px, 2.5vw, 38px);
}

.villa-feature,
.villa-feature:nth-child(even) {
    grid-column: span 7;
    margin: 0;
    padding: 0;
    border: 0;
    transform: none;
}

.villa-feature:nth-child(4n + 2),
.villa-feature:nth-child(4n + 3) { grid-column: span 5; }

.villa-feature:nth-child(4n + 2),
.villa-feature:nth-child(4n + 4) { margin-top: 72px; }

.villa-feature__media,
.villa-feature:nth-child(even) .villa-feature__media {
    height: clamp(480px, 39vw, 610px);
    border: 0;
    border-radius: 20px;
    box-shadow: none;
}

.villa-feature:nth-child(4n + 2) .villa-feature__media,
.villa-feature:nth-child(4n + 3) .villa-feature__media {
    height: clamp(430px, 33vw, 520px);
}

.villa-feature__media::before {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 22px;
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,.78);
    content: "";
    box-shadow: 0 6px 0 rgba(255,255,255,.42);
}

.villa-feature__media img { filter: saturate(.96) contrast(1.015); }

.villa-feature__copy,
.villa-feature:nth-child(even) .villa-feature__copy {
    position: relative;
    z-index: 3;
    width: 88%;
    max-width: none;
    margin: -68px 0 0 auto;
    padding: 27px clamp(24px, 2.5vw, 38px) 30px;
    border-top: 2px solid #b78249;
    background: rgba(250,247,240,.97);
    box-shadow: 0 24px 55px rgba(70,55,35,.12);
    backdrop-filter: blur(10px);
}

.villa-feature:nth-child(even) .villa-feature__copy {
    margin-right: auto;
    margin-left: 0;
}

.villa-feature:nth-child(4n + 2) .villa-feature__copy,
.villa-feature:nth-child(4n + 3) .villa-feature__copy { width: 94%; }

.villa-feature__topline { margin-bottom: 16px; }

.villa-feature__copy h3 {
    max-width: 580px;
    font-size: clamp(1.9rem, 2.55vw, 2.55rem);
}

.villa-feature__copy > p {
    margin: 16px 0 18px;
    font-size: .93rem;
}

.villa-feature__meta { padding: 13px 0; }
.villa-feature__rate { margin-top: 18px; }
.villa-feature__rate strong { font-size: clamp(1.6rem, 2vw, 2.15rem); }
.villa-feature__link { margin-top: 19px; }

.villa-collection__head::after {
    width: 58px;
    height: 1px;
    border: 0;
    border-radius: 0;
    background: #b78249;
    box-shadow: 0 7px 0 rgba(183,130,73,.28);
}

@media (max-width: 1000px) {
    .villa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .villa-feature,
    .villa-feature:nth-child(even),
    .villa-feature:nth-child(4n + 2),
    .villa-feature:nth-child(4n + 3) { grid-column: auto; }
    .villa-feature:nth-child(4n + 2),
    .villa-feature:nth-child(4n + 4) { margin-top: 35px; }
    .villa-feature__media,
    .villa-feature:nth-child(even) .villa-feature__media,
    .villa-feature:nth-child(4n + 2) .villa-feature__media,
    .villa-feature:nth-child(4n + 3) .villa-feature__media { height: 460px; }
    .villa-feature__copy,
    .villa-feature:nth-child(even) .villa-feature__copy { width: 94%; }
}

@media (max-width: 700px) {
    .villa-list { grid-template-columns: 1fr; gap: 62px; }
    .villa-feature,
    .villa-feature:nth-child(even),
    .villa-feature:nth-child(4n + 2),
    .villa-feature:nth-child(4n + 3),
    .villa-feature:nth-child(4n + 4) { margin-top: 0; }
    .villa-feature__media,
    .villa-feature:nth-child(even) .villa-feature__media,
    .villa-feature:nth-child(4n + 2) .villa-feature__media,
    .villa-feature:nth-child(4n + 3) .villa-feature__media {
        height: 430px;
        border: 0;
        border-radius: 18px;
    }
    .villa-feature__copy,
    .villa-feature:nth-child(even) .villa-feature__copy,
    .villa-feature:nth-child(4n + 2) .villa-feature__copy,
    .villa-feature:nth-child(4n + 3) .villa-feature__copy {
        width: 93%;
        margin: -52px 0 0 auto;
        padding: 23px 22px 25px;
    }
    .villa-feature__copy h3 { font-size: clamp(1.85rem, 8.6vw, 2.3rem); }
}

/* Header scale and global back-to-top control. */
.masthead__inner,
.masthead.is-stuck .masthead__inner { min-height: 96px; }

.brand img,
.masthead.is-stuck .brand img {
    width: auto;
    height: 68px;
}

.brand__emblem {
    width: 46px;
    height: 68px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand__emblem img,
.masthead.is-stuck .brand__emblem img {
    position: static;
    width: auto;
    max-width: none;
    height: 68px;
    transform: none;
}

.brand__wordmark {
    position: relative;
    padding-left: 15px;
}

.brand__wordmark::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 1px;
    background: rgba(174, 125, 71, .45);
}

.brand__wordmark b {
    font-size: 1.2rem;
    line-height: .92;
    letter-spacing: .015em;
}

.brand__wordmark small {
    margin-top: 8px;
    color: #8d745c;
    font-size: .5rem;
    letter-spacing: .26em;
}

.back-to-top {
    position: fixed;
    z-index: 65;
    right: 24px;
    bottom: 24px;
    display: grid;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(169,116,61,.62);
    border-radius: 50%;
    background: rgba(250,247,240,.94);
    color: #173a35;
    box-shadow: 0 14px 35px rgba(36,46,38,.16);
    opacity: 0;
    place-items: center;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease, background .25s ease, color .25s ease;
    backdrop-filter: blur(10px);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    border-color: #173a35;
    background: #173a35;
    color: #fff;
}

.back-to-top:focus-visible { outline: 2px solid #b78249; outline-offset: 4px; }

.back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

@media (max-width: 700px) {
    .masthead__inner,
    .masthead.is-stuck .masthead__inner { min-height: 76px; }
    .brand { gap: 10px; }
    .brand img,
    .masthead.is-stuck .brand img { width: auto; height: 60px; }
    .brand__emblem { width: 41px; height: 60px; flex-basis: 41px; }
    .brand__emblem img,
    .masthead.is-stuck .brand__emblem img { width: auto; height: 60px; }
    .brand__wordmark { padding-left: 11px; }
    .brand__wordmark b { font-size: 1rem; }
    .brand__wordmark small { margin-top: 6px; font-size: .43rem; letter-spacing: .22em; }
    .back-to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}

/* Villas imagery — clean editorial triptychs with no copy over photography. */
.villa-tile__gallery {
    position: relative;
    height: 430px;
    padding: 7px;
    border: 1px solid rgba(126,94,56,.24);
    display: grid;
    grid-template-columns: minmax(0, 2.12fr) minmax(105px, .88fr);
    gap: 7px;
    background: rgba(250,247,240,.82);
    box-shadow: 0 20px 48px rgba(67,53,36,.1);
}

.stay-grid--2 .villa-tile__gallery { height: clamp(450px, 35vw, 525px); }

.villa-tile:nth-child(even) .villa-tile__gallery {
    grid-template-columns: minmax(105px, .88fr) minmax(0, 2.12fr);
}

.villa-tile:nth-child(even) .stay-card__visual { order: 2; }
.villa-tile:nth-child(even) .villa-tile__details { order: 1; }

.villa-tile__gallery .stay-card__visual,
.stay-grid--2 .villa-tile__gallery .stay-card__visual,
.stay-grid--3 .villa-tile__gallery .stay-card__visual {
    height: 100%;
    min-height: 0;
}

.villa-tile__details {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.villa-tile__details a {
    min-height: 0;
    display: block;
    overflow: hidden;
    background: #cfc4b3;
}

.villa-tile__details img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.94) contrast(1.015);
    transition: transform .75s cubic-bezier(.2,.75,.25,1), filter .5s ease;
}

.villa-tile__details a:hover img {
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.055);
}

.villa-tile__gallery::after {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 38%;
    height: 38%;
    border-right: 1px solid rgba(169,111,55,.48);
    border-bottom: 1px solid rgba(169,111,55,.48);
    content: "";
    pointer-events: none;
}

@media (max-width: 700px) {
    .villa-tile__gallery,
    .stay-grid--2 .villa-tile__gallery {
        height: 355px;
        padding: 5px;
        grid-template-columns: minmax(0, 2.05fr) minmax(88px, .95fr);
        gap: 5px;
        box-shadow: 0 14px 34px rgba(67,53,36,.1);
    }

    .villa-tile:nth-child(even) .villa-tile__gallery {
        grid-template-columns: minmax(88px, .95fr) minmax(0, 2.05fr);
    }

    .villa-tile__details { gap: 5px; }
}

/* Villas imagery — single-photo asymmetric gallery wall. */
.villa-tile__gallery,
.stay-grid--2 .villa-tile__gallery,
.villa-tile:nth-child(even) .villa-tile__gallery {
    height: auto;
    padding: 0;
    border: 0;
    display: block;
    background: transparent;
    box-shadow: none;
}

.villa-tile__gallery .stay-card__visual,
.stay-grid--2 .villa-tile__gallery .stay-card__visual,
.stay-grid--3 .villa-tile__gallery .stay-card__visual {
    width: 100%;
    height: 420px;
    border: 1px solid rgba(126,94,56,.24);
    order: initial;
    box-shadow: 0 20px 46px rgba(67,53,36,.11);
}

.villa-tile__gallery::after {
    right: -8px;
    bottom: -9px;
    width: 72px;
    height: 1px;
    border: 0;
    background: rgba(169,111,55,.65);
}

.stay-grid--2 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
}

.stay-grid--2 .villa-tile:first-child { grid-column: span 7; }
.stay-grid--2 .villa-tile:nth-child(2) { grid-column: span 5; margin-top: 72px; }
.stay-grid--2 .villa-tile:first-child .stay-card__visual { height: 520px; }
.stay-grid--2 .villa-tile:nth-child(2) .stay-card__visual { height: 440px; }

.stay-grid--3 { align-items: start; }
.stay-grid--3 .villa-tile:nth-child(3n + 1) .stay-card__visual { height: 430px; }
.stay-grid--3 .villa-tile:nth-child(3n + 2) { margin-top: 48px; }
.stay-grid--3 .villa-tile:nth-child(3n + 2) .stay-card__visual { height: 370px; }
.stay-grid--3 .villa-tile:nth-child(3n + 3) { margin-top: 18px; }
.stay-grid--3 .villa-tile:nth-child(3n + 3) .stay-card__visual { height: 405px; }

@media (max-width: 1050px) {
    .stay-grid--2 .villa-tile:first-child,
    .stay-grid--2 .villa-tile:nth-child(2) { grid-column: span 6; }
    .stay-grid--3 .villa-tile:nth-child(3n + 1),
    .stay-grid--3 .villa-tile:nth-child(3n + 2),
    .stay-grid--3 .villa-tile:nth-child(3n + 3) { margin-top: 0; }
    .stay-grid--3 .villa-tile:nth-child(3n + 1) .stay-card__visual,
    .stay-grid--3 .villa-tile:nth-child(3n + 2) .stay-card__visual,
    .stay-grid--3 .villa-tile:nth-child(3n + 3) .stay-card__visual { height: 420px; }
}

@media (max-width: 700px) {
    .stay-grid--2 { grid-template-columns: none; }
    .stay-grid--2 .villa-tile:first-child,
    .stay-grid--2 .villa-tile:nth-child(2),
    .stay-grid--3 .villa-tile:nth-child(3n + 1),
    .stay-grid--3 .villa-tile:nth-child(3n + 2),
    .stay-grid--3 .villa-tile:nth-child(3n + 3) {
        grid-column: auto;
        margin-top: 0;
    }

    .villa-tile__gallery .stay-card__visual,
    .stay-grid--2 .villa-tile:first-child .stay-card__visual,
    .stay-grid--2 .villa-tile:nth-child(2) .stay-card__visual,
    .stay-grid--3 .villa-tile:nth-child(3n + 1) .stay-card__visual,
    .stay-grid--3 .villa-tile:nth-child(3n + 2) .stay-card__visual,
    .stay-grid--3 .villa-tile:nth-child(3n + 3) .stay-card__visual {
        height: 370px;
        box-shadow: 0 14px 34px rgba(67,53,36,.1);
    }
}

/* Villas selector showcase — one clean image at a time. */
.villa-showcase {
    min-height: 650px;
    margin-top: 38px;
    border: 1px solid rgba(116,90,57,.28);
    display: grid;
    grid-template-columns: minmax(270px, .34fr) minmax(0, 1fr);
    background: #f9f5ed;
    box-shadow: 0 24px 60px rgba(67,53,36,.09);
}

.villa-showcase__rail {
    position: relative;
    padding: 25px 0 22px 25px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #173a35;
}

.villa-showcase__rail::before {
    position: absolute;
    right: -115px;
    bottom: -115px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(229,183,126,.18);
    border-radius: 50%;
    content: "";
}

.villa-showcase__rail::after {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 24px;
    color: rgba(255,255,255,.4);
    content: "Sun & Sand · Saint Martin's";
    font-size: .49rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.villa-showcase__rail-head {
    position: relative;
    z-index: 1;
    padding: 2px 25px 23px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #e8bd87;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.villa-showcase__rail-head small { color: rgba(255,255,255,.46); font-size: .5rem; }

.villa-showcase__tab {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 79px;
    padding: 15px 20px 15px 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.16);
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: padding .3s ease, color .3s ease, background .3s ease;
}

.villa-showcase__tab > i { color: #d9aa72; font-size: .56rem; font-style: normal; letter-spacing: .12em; }
.villa-showcase__tab > span,
.villa-showcase__tab strong,
.villa-showcase__tab small { display: block; }
.villa-showcase__tab strong { overflow: hidden; font-family: var(--at-serif); font-size: 1.1rem; font-weight: 400; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.villa-showcase__tab small { margin-top: 6px; color: rgba(255,255,255,.5); font-size: .49rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.villa-showcase__tab > b { color: #d9aa72; font-size: .9rem; font-weight: 400; }

.villa-showcase__tab.is-active {
    margin-left: -10px;
    padding-right: 24px;
    padding-left: 14px;
    background: #f9f5ed;
    color: #173a35;
}

.villa-showcase__tab.is-active small { color: #9b7047; }
.villa-showcase__tab:focus-visible { outline: 1px solid #e8bd87; outline-offset: -4px; }

.villa-showcase__stage {
    min-width: 0;
    padding: 18px;
}

.villa-showcase__panel { animation: villaPanelIn .45s cubic-bezier(.2,.7,.2,1) both; }

@keyframes villaPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.villa-showcase__image {
    height: 465px;
    display: block;
    overflow: hidden;
    background: #cfc4b3;
}

.villa-showcase__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.2,.75,.25,1), filter .6s ease;
}

.villa-showcase__image:hover img { filter: saturate(1.04); transform: scale(1.025); }

.villa-showcase__caption {
    min-height: 150px;
    padding: 23px 5px 4px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(190px, .55fr);
    align-items: start;
    gap: 15px 40px;
}

.villa-showcase__caption > div:first-child > small {
    color: #a96f37;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.villa-showcase__caption h3 {
    margin: 8px 0 7px;
    color: #173a35;
    font-family: var(--at-serif);
    font-size: clamp(2rem, 2.75vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .96;
}

.villa-showcase__caption h3 a { color: inherit; }
.villa-showcase__caption p { margin: 0; color: #65736c; font-size: .8rem; line-height: 1.55; }

.villa-showcase__booking { padding-left: 26px; border-left: 1px solid rgba(116,90,57,.24); }
.villa-showcase__booking > span,
.villa-showcase__booking > small { color: #8d806f; font-size: .51rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.villa-showcase__booking > strong { display: block; margin: 6px 0 12px; color: #173a35; font-size: 1.25rem; font-weight: 650; }
.villa-showcase__booking > a { padding-bottom: 4px; border-bottom: 1px solid #173a35; color: #173a35; font-size: .55rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.villa-showcase__booking > a b { margin-left: 6px; color: #a96f37; }

.villa-showcase__meta {
    grid-column: 1 / -1;
    display: flex;
    gap: 20px;
}

.villa-showcase__meta span { display: inline-flex; align-items: center; gap: 7px; color: #69766f; font-size: .65rem; }
.villa-showcase__meta svg { color: #a96f37; }

@media (max-width: 900px) {
    .villa-showcase { grid-template-columns: minmax(240px, .38fr) minmax(0, 1fr); }
    .villa-showcase__image { height: 430px; }
    .villa-showcase__caption { grid-template-columns: 1fr; }
    .villa-showcase__booking { padding: 14px 0 0; border-top: 1px solid rgba(116,90,57,.24); border-left: 0; }
}

@media (max-width: 700px) {
    .villa-showcase {
        min-height: 0;
        margin: 24px -15px 0 0;
        border-right: 0;
        display: block;
        box-shadow: none;
    }

    .villa-showcase__rail {
        padding: 10px 0 10px 10px;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: min(64vw, 245px);
        gap: 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .villa-showcase__rail::-webkit-scrollbar { display: none; }
    .villa-showcase__rail::before,
    .villa-showcase__rail::after,
    .villa-showcase__rail-head { display: none; }
    .villa-showcase__tab,
    .villa-showcase__tab.is-active {
        min-height: 78px;
        margin: 0;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.16);
        grid-template-columns: 24px minmax(0, 1fr) auto;
        scroll-snap-align: start;
    }
    .villa-showcase__tab strong { font-size: 1rem; }
    .villa-showcase__stage { padding: 7px 7px 10px; }
    .villa-showcase__image { height: 355px; }
    .villa-showcase__caption { min-height: 0; padding: 20px 12px 9px; display: grid; grid-template-columns: 1fr; gap: 17px; }
    .villa-showcase__caption h3 { font-size: 2.05rem; }
    .villa-showcase__booking { padding-top: 14px; }
    .villa-showcase__booking > strong { display: inline-block; margin: 0 8px; }
    .villa-showcase__meta { grid-column: auto; }
}

/* ==========================================================================
   Villas index — card refinement
   The tiles carried four stacked bands of small text under the photo, which
   read as clutter. Rate moves onto the image; the body keeps one clear
   hierarchy: kind, name, line of description, then a single meta foot.
   ========================================================================== */

.stay-grid { gap: 34px 26px; margin-top: 34px; }

.villa-tile {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    overflow: hidden;
    background: #fffdf9;
    border-color: rgba(116, 90, 57, .18);
}

.stay-card__visual { height: clamp(300px, 25vw, 360px); }
.stay-grid--2 .stay-card__visual { height: clamp(360px, 31vw, 460px); }

/* Legible chrome over any photograph */
.stay-card__number,
.stay-card__arrow,
.stay-card__tag { text-shadow: 0 1px 8px rgba(10, 26, 24, .45); }

.stay-card__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(10, 26, 24, .34) 0%, rgba(10, 26, 24, 0) 26%,
                rgba(10, 26, 24, 0) 58%, rgba(10, 26, 24, .55) 100%);
    pointer-events: none;
}

.stay-card__tag {
    position: absolute;
    z-index: 2;
    left: 18px;
    bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: #fff;
}

.stay-card__tag small {
    color: rgba(255, 255, 255, .72);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.stay-card__tag strong {
    font-family: var(--at-sans);
    font-size: 1.16rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.villa-tile__body { padding: 22px 22px 18px; flex: 1 1 auto; }

.villa-tile__kind {
    display: block;
    margin-bottom: 10px;
    color: #a96f37;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.villa-tile__body h3 { margin: 0 0 10px; }

.villa-tile__body > p {
    min-height: 0;
    color: #6b7a73;
    font-size: .84rem;
    line-height: 1.62;
    -webkit-line-clamp: 3;
}

.stay-card__foot {
    min-height: 0;
    padding: 13px 22px 15px;
    gap: 20px;
    border-top-color: rgba(116, 90, 57, .16);
}

.stay-card__foot > span { font-size: .72rem; white-space: nowrap; }

/* Collection heading: the stay count was too faint to register */
.stay-collection__head > small {
    padding: 6px 13px;
    border: 1px solid rgba(169, 111, 55, .35);
    border-radius: 100px;
}

@media (max-width: 900px) {
    .stay-grid--2, .stay-grid--3 { grid-template-columns: 1fr; }
    .stay-grid--2 .stay-card__visual,
    .stay-card__visual { height: clamp(260px, 58vw, 340px); }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .stay-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Villas index polish — preserve the editorial rhythm, keep photography clean. */
.stay-card__visual::before,
.stay-card__visual::after { display: none; content: none; }

.villa-tile {
    border: 1px solid rgba(116,90,57,.2);
    border-radius: 0;
    background: #fffdf9;
    box-shadow: 0 20px 52px rgba(67,53,36,.09);
    transition: box-shadow .35s ease, transform .35s ease;
}

.villa-tile:hover {
    box-shadow: 0 28px 68px rgba(67,53,36,.14);
    transform: translateY(-4px);
}

.stay-card__visual {
    border: 0;
    box-shadow: none;
}

.stay-card__visual img {
    filter: saturate(.96) contrast(1.015);
    transition: transform .8s cubic-bezier(.2,.75,.25,1), filter .55s ease;
}

.villa-tile:hover .stay-card__visual img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.025);
}

.villa-tile__body {
    min-height: 190px;
    padding: 25px 25px 22px;
    background: #fffdf9;
}

.villa-tile__topline {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.villa-tile__kind { margin: 0; }

.villa-tile__topline i {
    color: #a28f78;
    font-family: var(--at-serif);
    font-size: .75rem;
    font-style: italic;
}

.villa-tile__body h3 {
    margin: 0 0 9px;
    color: #173a35;
    font-family: var(--at-serif);
    font-size: clamp(2rem, 2.65vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .98;
}

.stay-grid--3 .villa-tile__body h3 { font-size: clamp(1.8rem, 2.2vw, 2.3rem); }
.villa-tile__body > p { color: #6a766f; font-size: .82rem; line-height: 1.55; }

.villa-tile__rate {
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid rgba(116,90,57,.2);
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.villa-tile__rate span,
.villa-tile__rate small {
    color: #8d806f;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.villa-tile__rate strong {
    color: #173a35;
    font-family: var(--at-sans);
    font-size: 1.16rem;
    font-weight: 650;
}

.stay-card__foot {
    padding: 14px 25px 16px;
    border-top: 1px solid rgba(116,90,57,.16);
    background: #fffdf9;
}

@media (min-width: 901px) {
    .villa-tile:nth-child(even) .villa-tile__body { order: 0; }
    .villa-tile:nth-child(even) .stay-card__foot { order: 1; }
    .villa-tile:nth-child(even) .stay-card__visual { order: 2; }
}

@media (max-width: 900px) {
    .villa-tile,
    .villa-tile:hover { transform: none; }
    .villa-tile .stay-card__visual { order: 0 !important; }
    .villa-tile .villa-tile__body { min-height: 0; order: 1 !important; }
    .villa-tile .stay-card__foot { order: 2 !important; }
}

@media (max-width: 700px) {
    .villa-tile__body { padding: 21px 20px 18px; }
    .villa-tile__body h3,
    .stay-grid--3 .villa-tile__body h3 { font-size: 2rem; }
    .villa-tile__rate { margin-top: 14px; padding-top: 12px; }
    .stay-card__foot { padding: 13px 20px 15px; }
}

/* Villas final view — simple, consistent and easy to compare. */
.stay-grid,
.stay-grid--2,
.stay-grid--3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 30px 26px;
}

.stay-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stay-grid .villa-tile,
.stay-grid .villa-tile:nth-child(even),
.stay-grid--2 .villa-tile:first-child,
.stay-grid--2 .villa-tile:nth-child(2),
.stay-grid--3 .villa-tile:nth-child(3n + 1),
.stay-grid--3 .villa-tile:nth-child(3n + 2),
.stay-grid--3 .villa-tile:nth-child(3n + 3) {
    grid-column: auto;
    margin-top: 0;
    transform: none;
}

.stay-grid .villa-tile {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(116,90,57,.2);
    background: #fffdf9;
    box-shadow: 0 12px 32px rgba(67,53,36,.075);
}

.stay-grid .villa-tile:hover {
    box-shadow: 0 18px 44px rgba(67,53,36,.11);
    transform: none;
}

.stay-grid .villa-tile .stay-card__visual,
.stay-grid--2 .villa-tile:first-child .stay-card__visual,
.stay-grid--2 .villa-tile:nth-child(2) .stay-card__visual,
.stay-grid--3 .villa-tile:nth-child(3n + 1) .stay-card__visual,
.stay-grid--3 .villa-tile:nth-child(3n + 2) .stay-card__visual,
.stay-grid--3 .villa-tile:nth-child(3n + 3) .stay-card__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    order: 0 !important;
}

.stay-grid .villa-tile .villa-tile__body {
    min-height: 0;
    padding: 23px 23px 20px;
    flex: 1 1 auto;
    order: 1 !important;
}

.stay-grid .villa-tile .stay-card__foot {
    order: 2 !important;
}

.stay-grid .villa-tile__body h3,
.stay-grid--3 .villa-tile__body h3 {
    font-size: clamp(1.85rem, 2.25vw, 2.35rem);
}

.stay-grid .villa-tile__body > p {
    min-height: 2.9em;
    -webkit-line-clamp: 2;
}

@media (max-width: 1050px) {
    .stay-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .stay-grid,
    .stay-grid--2,
    .stay-grid--3 {
        margin-right: 0;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        gap: 24px;
        overflow: visible;
    }

    .stay-grid .villa-tile .stay-card__visual { aspect-ratio: 1.2 / 1; }
    .stay-grid .villa-tile .villa-tile__body { padding: 21px 20px 18px; }
    .stay-grid .villa-tile__body h3,
    .stay-grid--3 .villa-tile__body h3 { font-size: 2rem; }
}

/* Villa detail — editorial room story */
body.villa-detail-page {
    background: var(--at-ivory, #f4efe5);
}

.villa-detail-page .masthead:not(.is-stuck) {
    background: linear-gradient(180deg, rgba(2, 29, 28, .55), transparent);
    border-bottom-color: rgba(255, 255, 255, .2);
    backdrop-filter: none;
}

.villa-detail-page .masthead:not(.is-stuck) .brand__light { display: block !important; }
.villa-detail-page .masthead:not(.is-stuck) .brand__dark { display: none !important; }
.villa-detail-page .masthead:not(.is-stuck) .brand__wordmark b,
.villa-detail-page .masthead:not(.is-stuck) .nav a,
.villa-detail-page .masthead:not(.is-stuck) .btn--ghost,
.villa-detail-page .masthead:not(.is-stuck) .burger { color: #fff; }
.villa-detail-page .masthead:not(.is-stuck) .brand__wordmark small { color: rgba(255, 255, 255, .68); }
.villa-detail-page .masthead:not(.is-stuck) .nav a::after { background: #fff; }
.villa-detail-page .masthead:not(.is-stuck) .btn--ghost { border-color: rgba(255, 255, 255, .55); }
.villa-detail-page .masthead:not(.is-stuck) .burger span { background: #fff; }

.villa-detail-label {
    display: block;
    margin-bottom: 20px;
    color: var(--at-bronze, #a86d2b);
    font-family: var(--at-sans, sans-serif);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.villa-detail-label--light { color: #d9a96c; }

.villa-detail-hero {
    position: relative;
    display: flex;
    min-height: min(850px, 94vh);
    align-items: flex-end;
    overflow: hidden;
    background: #062d2b;
}

.villa-detail-hero__image,
.villa-detail-hero__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.villa-detail-hero__image {
    object-fit: cover;
    animation: villa-hero-enter 1.25s cubic-bezier(.2, .65, .25, 1) both;
}

.villa-detail-hero__veil {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(2, 28, 27, .78) 0%, rgba(2, 28, 27, .22) 62%, rgba(2, 28, 27, .36) 100%),
        linear-gradient(0deg, rgba(2, 25, 24, .92) 0%, transparent 63%);
}

.villa-detail-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: end;
    gap: clamp(45px, 7vw, 110px);
    padding-top: clamp(180px, 23vh, 260px);
    padding-bottom: clamp(58px, 7vw, 100px);
}

.villa-detail-hero__copy { max-width: 920px; }

.villa-detail-back {
    display: inline-flex;
    margin-bottom: clamp(55px, 8vh, 90px);
    color: rgba(255, 255, 255, .82);
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.villa-detail-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 760px;
    margin-bottom: 17px;
    color: #e1b378;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.villa-detail-hero__eyebrow i {
    color: rgba(255, 255, 255, .72);
    font-family: var(--at-serif, serif);
    font-size: .86rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: .04em;
}

.villa-detail-hero h1 {
    max-width: 950px;
    margin: 0;
    color: #fffdf7;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(4.3rem, 7.2vw, 7.8rem);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .88;
}

.villa-detail-hero__copy > p {
    max-width: 570px;
    margin: 27px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.04rem;
    line-height: 1.7;
}

.villa-detail-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 30px;
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
}

.villa-detail-hero__facts span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.villa-detail-hero__booking {
    padding: 30px 29px 28px;
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(8, 41, 39, .42);
    color: #fff;
    backdrop-filter: blur(14px);
}

.villa-detail-hero__booking small,
.villa-detail-hero__booking > span {
    display: block;
    color: rgba(255, 255, 255, .65);
    font-size: .67rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.villa-detail-hero__booking strong {
    display: block;
    margin: 11px 0 5px;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 2.25rem;
    font-weight: 400;
}

.villa-detail-hero__booking a {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.villa-detail-overview,
.villa-detail-others {
    padding: clamp(85px, 9vw, 140px) 0;
    background: var(--at-ivory, #f4efe5);
}

.villa-detail-overview__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(55px, 9vw, 140px);
    align-items: start;
}

.villa-detail-overview__copy h2,
.villa-detail-section-head h2,
.villa-detail-features h2,
.villa-detail-booking__copy h2 {
    margin: 0;
    color: var(--at-ink, #073b38);
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(3.25rem, 5.1vw, 5.6rem);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98;
}

.villa-detail-overview__copy > p {
    max-width: 750px;
    margin: 33px 0 0;
    color: #596a66;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(1.13rem, 1.4vw, 1.35rem);
    line-height: 1.75;
}

.villa-detail-at-a-glance {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(50px, 6vw, 75px);
    border-top: 1px solid var(--at-rule, #cbbda8);
    border-bottom: 1px solid var(--at-rule, #cbbda8);
}

.villa-detail-at-a-glance > div {
    min-width: 0;
    padding: 24px 20px 25px 0;
}

.villa-detail-at-a-glance small,
.villa-detail-reserve__rate small {
    display: block;
    margin-bottom: 8px;
    color: #9a7650;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.villa-detail-at-a-glance strong {
    display: block;
    overflow: hidden;
    color: var(--at-ink, #073b38);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.06rem;
    font-weight: 400;
    text-overflow: ellipsis;
}

.villa-detail-reserve {
    position: sticky;
    top: 120px;
    padding: 34px;
    border: 1px solid rgba(116, 90, 57, .22);
    background: #fffdf9;
    box-shadow: 0 20px 50px rgba(50, 43, 32, .07);
}

.villa-detail-reserve h3 {
    margin: 0 0 16px;
    color: var(--at-ink, #073b38);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 2.05rem;
    font-weight: 400;
    line-height: 1.05;
}

.villa-detail-reserve > p {
    margin: 0;
    color: #71807c;
    font-size: .87rem;
    line-height: 1.75;
}

.villa-detail-reserve__rate {
    margin: 27px 0;
    padding: 23px 0;
    border-top: 1px solid #ded4c5;
    border-bottom: 1px solid #ded4c5;
}

.villa-detail-reserve__rate strong {
    color: var(--at-ink, #073b38);
    font-family: var(--at-serif, Georgia, serif);
    font-size: 2rem;
    font-weight: 400;
}

.villa-detail-reserve__rate span { color: #8a8176; font-size: .72rem; }

.villa-detail-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 20px;
    background: var(--at-ink, #073b38);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .25s ease, color .25s ease;
}

.villa-detail-button:hover { background: var(--at-bronze, #a86d2b); color: #fff; }

.villa-detail-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 17px;
    color: var(--at-ink, #073b38);
    font-size: .71rem;
    font-weight: 700;
}

.villa-detail-photos {
    scroll-margin-top: 90px;
    padding: clamp(85px, 9vw, 135px) 0;
    background: #e9e0d2;
}

.villa-detail-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: clamp(45px, 6vw, 75px);
}

.villa-detail-section-head > p {
    max-width: 320px;
    margin: 0 0 8px;
    color: #7d7469;
    font-size: .78rem;
    line-height: 1.7;
}

.villa-detail-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(210px, 20vw, 310px);
    gap: 10px;
}

.villa-detail-gallery__item {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    background: #173d3a;
}

.villa-detail-gallery__item--1 { grid-column: 1 / span 7; grid-row: span 2; }
.villa-detail-gallery__item--2,
.villa-detail-gallery__item--3 { grid-column: 8 / span 5; }
.villa-detail-gallery__item--4 { grid-column: 1 / span 6; }
.villa-detail-gallery__item--5 { grid-column: 7 / span 6; }

.villa-detail-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .6, .25, 1), opacity .4s ease;
}

.villa-detail-gallery__item::after {
    position: absolute;
    inset: auto 0 0;
    height: 40%;
    background: linear-gradient(transparent, rgba(3, 25, 24, .62));
    content: '';
    pointer-events: none;
}

.villa-detail-gallery__item > span {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 18px;
    left: 20px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    opacity: .88;
    text-transform: uppercase;
}

.villa-detail-gallery__item > span b { color: #e1b378; font-weight: 700; }
.villa-detail-gallery__item:hover img { transform: scale(1.035); }

.villa-detail-features {
    padding: clamp(90px, 10vw, 150px) 0;
    background: var(--at-deep, #052e2b);
    color: #fff;
}

.villa-detail-features__layout {
    display: grid;
    grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
    gap: clamp(60px, 10vw, 150px);
}

.villa-detail-features h2 { color: #fffdf7; }

.villa-detail-features header > p {
    max-width: 420px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: .88rem;
    line-height: 1.75;
}

.villa-detail-feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0 38px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.villa-detail-feature-list > div {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 12px;
    padding: 23px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.villa-detail-feature-list span {
    color: #d9a96c;
    font-family: var(--at-serif, Georgia, serif);
    font-size: .78rem;
    font-style: italic;
}

.villa-detail-feature-list p { margin: 0; color: rgba(255, 255, 255, .88); font-size: .9rem; }

.villa-detail-inclusions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 45px;
    margin-top: clamp(75px, 9vw, 125px);
}

.villa-detail-inclusions article {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 15px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.villa-detail-inclusions article > span { color: #d9a96c; }
.villa-detail-inclusions h3 { margin: 0 0 8px; color: #fff; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.villa-detail-inclusions p { margin: 0; color: rgba(255, 255, 255, .52); font-size: .76rem; line-height: 1.65; }

.villa-detail-booking {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    min-height: 650px;
    background: #d9ccb9;
}

.villa-detail-booking__image { min-height: 620px; overflow: hidden; }
.villa-detail-booking__image img { width: 100%; height: 100%; object-fit: cover; }

.villa-detail-booking__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(55px, 8vw, 125px);
}

.villa-detail-booking__copy > p {
    max-width: 500px;
    margin: 31px 0 38px;
    color: #566a64;
    font-size: .94rem;
    line-height: 1.8;
}

.villa-detail-booking__copy > div {
    display: flex;
    align-items: center;
    gap: 25px;
}

.villa-detail-booking__copy .villa-detail-button { min-width: 220px; }

.villa-detail-text-link,
.villa-detail-section-head > a {
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    color: var(--at-ink, #073b38);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.villa-detail-section-head--center { align-items: center; }
.villa-detail-others .rooms-grid { margin-top: 0; }

@keyframes villa-hero-enter {
    from { opacity: .35; transform: scale(1.035); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1050px) {
    .villa-detail-hero__inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 35px; }
    .villa-detail-overview__layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 50px; }
    .villa-detail-at-a-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .villa-detail-at-a-glance > div:nth-child(-n+2) { border-bottom: 1px solid var(--at-rule, #cbbda8); }
    .villa-detail-inclusions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .villa-detail-hero { min-height: 760px; }
    .villa-detail-hero__veil {
        background:
            linear-gradient(90deg, rgba(2, 28, 27, .54), rgba(2, 28, 27, .18)),
            linear-gradient(0deg, rgba(2, 25, 24, .96) 0%, rgba(2, 25, 24, .18) 78%);
    }
    .villa-detail-hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 155px;
        padding-bottom: 34px;
    }
    .villa-detail-back { margin-bottom: 55px; }
    .villa-detail-hero h1 {
        width: 100%;
        max-width: 9.5ch;
        overflow-wrap: normal;
        white-space: normal;
        font-size: clamp(3.15rem, 14.5vw, 4.5rem);
    }
    .villa-detail-hero__copy > p { margin-top: 19px; font-size: .9rem; }
    .villa-detail-hero__facts { margin-top: 21px; gap: 10px 18px; font-size: .69rem; }
    .villa-detail-hero__booking { padding: 20px 21px; }
    .villa-detail-hero__booking strong { display: inline-block; margin-right: 7px; font-size: 1.7rem; }
    .villa-detail-hero__booking > span { display: inline; }
    .villa-detail-hero__booking a { margin-top: 16px; padding-top: 15px; }
    .villa-detail-overview__layout { grid-template-columns: 1fr; gap: 40px; }
    .villa-detail-overview__copy h2,
    .villa-detail-section-head h2,
    .villa-detail-features h2,
    .villa-detail-booking__copy h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
    .villa-detail-overview__copy > p { font-size: 1.03rem; }
    .villa-detail-at-a-glance { margin-top: 42px; }
    .villa-detail-at-a-glance > div { padding: 19px 10px 19px 0; }
    .villa-detail-reserve { position: static; padding: 27px; }
    .villa-detail-section-head { display: block; }
    .villa-detail-section-head > p { margin-top: 22px; }
    .villa-detail-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 190px;
        gap: 7px;
    }
    .villa-detail-gallery__item--1 {
        grid-column: 1 / span 2;
        grid-row: span 1;
        height: 330px;
    }
    .villa-detail-gallery__item--2,
    .villa-detail-gallery__item--3,
    .villa-detail-gallery__item--4,
    .villa-detail-gallery__item--5 { grid-column: auto; grid-row: auto; }
    .villa-detail-gallery__item--5 { grid-column: 1 / span 2; }
    .villa-detail-gallery__item > span { right: 12px; bottom: 12px; left: 12px; font-size: .57rem; }
    .villa-detail-features__layout { grid-template-columns: 1fr; gap: 48px; }
    .villa-detail-feature-list { grid-template-columns: 1fr; }
    .villa-detail-inclusions { grid-template-columns: 1fr; gap: 15px; margin-top: 65px; }
    .villa-detail-booking { grid-template-columns: 1fr; min-height: 0; }
    .villa-detail-booking__image { min-height: 370px; }
    .villa-detail-booking__copy { padding: 65px 24px 72px; }
    .villa-detail-booking__copy > div { width: 100%; flex-direction: column; align-items: stretch; gap: 20px; }
    .villa-detail-booking__copy .villa-detail-button { width: 100%; }
    .villa-detail-text-link { align-self: flex-start; }
    .villa-detail-section-head--center > a { display: inline-block; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .villa-detail-hero__image { animation: none; }
}

/* Gallery — a quiet editorial wall with room for every photograph. */
.gallery-showcase {
    padding-top: clamp(72px, 8vw, 118px);
}

.gallery-showcase .head-center {
    margin-bottom: clamp(42px, 5vw, 68px);
}

.gallery-showcase .head-center .display {
    max-width: 11ch;
    margin-inline: auto;
    font-size: clamp(3.4rem, 6.2vw, 6.7rem);
    line-height: .91;
}

.gallery-showcase .gallery-filter {
    position: sticky;
    z-index: 12;
    top: 96px;
    display: flex;
    justify-content: center;
    gap: clamp(22px, 3.1vw, 52px);
    margin: 0 0 clamp(34px, 4vw, 54px);
    padding: 0 22px;
    overflow-x: auto;
    border: 0;
    border-top: 1px solid rgba(15, 57, 52, .18);
    border-bottom: 1px solid rgba(15, 57, 52, .18);
    background: rgba(247, 244, 237, .94);
    box-shadow: 0 10px 26px rgba(17, 43, 38, .035);
    scrollbar-width: none;
    backdrop-filter: blur(12px);
}

.gallery-showcase .gallery-filter::-webkit-scrollbar { display: none; }

.gallery-showcase .gallery-filter button {
    position: relative;
    flex: 0 0 auto;
    padding: 20px 0 18px;
    border: 0;
    background: transparent;
    color: #536862;
    font-size: .62rem;
    letter-spacing: .17em;
}

.gallery-showcase .gallery-filter button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: #a96f38;
    content: '';
    opacity: 0;
    transform: scaleX(.25);
    transition: opacity .25s ease, transform .25s ease;
}

.gallery-showcase .gallery-filter button:hover,
.gallery-showcase .gallery-filter button.is-active {
    background: transparent;
    color: #0c3935;
}

.gallery-showcase .gallery-filter button.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.gallery-showcase .gallery-filter sup {
    margin-left: 4px;
    color: #b47a43;
    font-size: .48rem;
}

.gallery-showcase .gallery-masonry {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 86px;
    gap: 14px;
    margin-top: 0;
    columns: unset;
}

.gallery-showcase .gallery-masonry .gallery-photo,
.gallery-showcase .gallery-masonry .gallery-photo--tall {
    position: relative;
    grid-column: span 1;
    grid-row: span 3;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 5px solid #fbf9f4;
    outline: 1px solid rgba(74, 75, 62, .18);
    background: #d8d2c6;
    box-shadow: 0 16px 34px rgba(25, 45, 40, .07);
}

.gallery-showcase .gallery-masonry .gallery-photo--tall {
    grid-row: span 5;
}

.gallery-showcase .gallery-masonry .gallery-photo:nth-child(11n + 1) {
    grid-column: span 2;
    grid-row: span 5;
}

.gallery-showcase .gallery-masonry .gallery-photo:nth-child(11n + 6) {
    grid-column: span 2;
    grid-row: span 4;
}

.gallery-showcase .gallery-photo::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(3, 29, 27, .72));
    content: '';
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.gallery-showcase .gallery-photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
}

.gallery-showcase .gallery-photo > span {
    z-index: 2;
    right: 20px;
    bottom: 18px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: .62rem;
    line-height: 1.4;
    letter-spacing: .12em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}

.gallery-showcase .gallery-photo > span b {
    color: #efc58f;
    font-family: var(--at-serif, Georgia, serif);
    font-size: .75rem;
    font-style: italic;
}

.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1)::after {
    opacity: 0;
}

.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1) > span {
    right: 20px;
    bottom: 18px;
    left: 20px;
    opacity: 0;
    transform: translateY(8px);
}

.gallery-showcase .gallery-photo:hover::after,
.gallery-showcase .gallery-photo:focus-visible::after,
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1):hover::after,
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1):focus-visible::after {
    opacity: 1;
}

.gallery-showcase .gallery-photo:hover img,
.gallery-showcase .gallery-photo:focus-visible img {
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.025);
}

.gallery-showcase .gallery-photo:hover > span,
.gallery-showcase .gallery-photo:focus-visible > span,
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1):hover > span,
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1):focus-visible > span {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 980px) {
    .gallery-showcase .gallery-filter {
        top: 76px;
        justify-content: flex-start;
    }

    .gallery-showcase .gallery-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 78px;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .gallery-showcase {
        padding-top: 62px;
    }

    .gallery-showcase .head-center {
        margin-bottom: 36px;
    }

    .gallery-showcase .head-center .display {
        max-width: 8ch;
        font-size: clamp(3rem, 14vw, 4.3rem);
    }

    .gallery-showcase .gallery-filter {
        top: 75px;
        gap: 28px;
        margin-right: -24px;
        margin-bottom: 28px;
        margin-left: -24px;
        padding: 0 24px;
        border-color: rgba(15, 57, 52, .15);
    }

    .gallery-showcase .gallery-filter button {
        padding: 17px 0 15px;
        font-size: .58rem;
    }

    .gallery-showcase .gallery-masonry {
        grid-auto-rows: 54px;
        gap: 7px;
    }

    .gallery-showcase .gallery-masonry .gallery-photo,
    .gallery-showcase .gallery-masonry .gallery-photo--tall {
        grid-column: span 1;
        grid-row: span 4;
        border-width: 3px;
        box-shadow: 0 9px 20px rgba(25, 45, 40, .06);
    }

    .gallery-showcase .gallery-masonry .gallery-photo--tall {
        grid-row: span 6;
    }

    .gallery-showcase .gallery-masonry .gallery-photo:nth-child(11n + 1) {
        grid-column: span 2;
        grid-row: span 5;
    }

    .gallery-showcase .gallery-masonry .gallery-photo:nth-child(11n + 6) {
        grid-column: span 2;
        grid-row: span 4;
    }

    .gallery-showcase .gallery-masonry .gallery-photo::after,
    .gallery-showcase .gallery-masonry .gallery-photo > span,
    .gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1)::after,
    .gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1) > span {
        display: none;
    }
}

/* Gallery correction — preserve every photograph's full original composition. */
.gallery-showcase .gallery-masonry {
    display: block;
    margin-top: 0;
    columns: 3 340px;
    column-gap: 18px;
}

.gallery-showcase .gallery-masonry .gallery-photo,
.gallery-showcase .gallery-masonry .gallery-photo--tall,
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1),
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(11n + 1),
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(11n + 6),
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(13n + 7) {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 0 18px;
    overflow: hidden;
    break-inside: avoid;
    border: 4px solid #fffdf8;
    outline: 1px solid rgba(68, 76, 66, .16);
    background: #fffdf8;
    box-shadow: 0 12px 28px rgba(22, 48, 43, .065);
    vertical-align: top;
}

.gallery-showcase .gallery-masonry .gallery-photo img,
.gallery-showcase .gallery-masonry .gallery-photo--tall img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
}

.gallery-showcase .gallery-masonry .gallery-photo::after,
.gallery-showcase .gallery-masonry .gallery-photo > span,
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1)::after,
.gallery-showcase .gallery-masonry .gallery-photo:nth-child(9n + 1) > span {
    display: none;
}

.gallery-showcase .gallery-masonry .gallery-photo:hover img,
.gallery-showcase .gallery-masonry .gallery-photo:focus-visible img {
    filter: saturate(1.035) contrast(1.01);
    transform: scale(1.012);
}

.gallery-showcase .gallery-masonry .gallery-photo[hidden] {
    display: none;
}

@media (max-width: 980px) {
    .gallery-showcase .gallery-masonry {
        columns: 2 280px;
        column-gap: 12px;
    }

    .gallery-showcase .gallery-masonry .gallery-photo,
    .gallery-showcase .gallery-masonry .gallery-photo--tall {
        margin-bottom: 12px;
    }
}

@media (max-width: 560px) {
    .gallery-showcase .gallery-masonry {
        columns: 1;
    }

    .gallery-showcase .gallery-masonry .gallery-photo,
    .gallery-showcase .gallery-masonry .gallery-photo--tall {
        margin-bottom: 14px;
        border-width: 3px;
    }
}

/* Full-screen photograph viewer: always show the complete image inside the viewport. */
.lightbox {
    z-index: 2000;
    box-sizing: border-box;
    padding: clamp(48px, 7vh, 76px) clamp(72px, 7vw, 118px);
}

.lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.lightbox__close {
    top: 20px;
    right: 24px;
    z-index: 2;
}

.lightbox__nav {
    z-index: 2;
}

@media (max-width: 640px) {
    .lightbox {
        padding: 62px 14px 76px;
    }

    .lightbox img {
        max-width: 100%;
        max-height: 100%;
    }

    .lightbox__nav {
        top: auto;
        bottom: 15px;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .lightbox__prev { left: calc(50% - 52px); }
    .lightbox__next { right: calc(50% - 52px); }
}

/* About page — an editorial island story. */
.about-page {
    background: #f5f0e7;
}

.about-page .banner img {
    object-position: center 48%;
}

.about-page .banner h1 {
    max-width: 13ch;
    font-size: clamp(3.4rem, 5.4vw, 5.7rem);
    line-height: .96;
}

.about-origin,
.about-day,
.about-welcome {
    position: relative;
    overflow: hidden;
}

.about-origin {
    padding: clamp(105px, 10vw, 160px) 0 clamp(95px, 9vw, 145px);
    background: #f7f4ed;
}

.about-origin__mark {
    position: absolute;
    top: 105px;
    left: -78px;
    width: clamp(260px, 25vw, 440px);
    opacity: .025;
    pointer-events: none;
}

.about-index {
    display: block;
    margin-top: 18px;
    color: #968b7c;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .2em;
}

.about-origin__head,
.about-day__head,
.about-welcome__statement {
    display: grid;
    grid-template-columns: minmax(190px, 3fr) minmax(0, 9fr);
    gap: clamp(42px, 7vw, 110px);
    align-items: start;
}

.about-origin__head {
    padding-bottom: clamp(60px, 7vw, 100px);
    border-bottom: 1px solid rgba(26, 65, 60, .2);
}

.about-origin__head h2,
.about-day__head h2,
.about-welcome__copy h2 {
    margin: 0;
    color: #103b37;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(3.15rem, 4.45vw, 4.75rem);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .94;
}

.about-origin__head h2 em,
.about-day__head h2 em {
    color: #ad7745;
    font-weight: 400;
}

.about-origin__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, .68fr);
    gap: clamp(48px, 7vw, 108px);
    align-items: start;
    padding-top: clamp(58px, 7vw, 100px);
}

.about-origin__image {
    margin: 0;
}

.about-origin__image img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 25px 60px rgba(20, 45, 40, .11);
}

.about-origin__image figcaption {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 14px;
    color: #8c8174;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.about-origin__copy {
    padding-top: clamp(0px, 3vw, 42px);
}

.about-origin__copy p,
.about-welcome__copy > p {
    margin: 0 0 21px;
    color: #6e766f;
    font-size: .9rem;
    line-height: 1.85;
}

.about-origin__copy .about-origin__lead {
    color: #264b46;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(1.12rem, 1.4vw, 1.4rem);
    line-height: 1.55;
}

.about-rule {
    width: 42px;
    height: 1px;
    margin: 30px 0;
    background: #b47b45;
}

.about-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 15px;
    padding-bottom: 7px;
    border-bottom: 1px solid currentColor;
    color: #103b37;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.about-text-link span {
    color: #ad7745;
    font-size: .8rem;
    transition: transform .25s ease;
}

.about-text-link:hover span { transform: translate(3px, -3px); }

.about-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(70px, 8vw, 115px);
    border-top: 1px solid rgba(26, 65, 60, .2);
    border-bottom: 1px solid rgba(26, 65, 60, .2);
}

.about-facts > div {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 128px;
    padding: 24px clamp(18px, 2.4vw, 38px);
    border-right: 1px solid rgba(26, 65, 60, .2);
}

.about-facts > div:last-child { border-right: 0; }

.about-facts strong {
    color: #103b37;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(2.2rem, 3.2vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -.05em;
}

.about-facts span {
    color: #837a6d;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.6;
    text-transform: uppercase;
}

.about-day {
    padding: clamp(105px, 10vw, 160px) 0 clamp(100px, 10vw, 155px);
    background: #0d302e;
    color: #fff;
}

.about-day__head {
    grid-template-columns: minmax(190px, 2.6fr) minmax(360px, 5fr) minmax(250px, 3.2fr);
    align-items: end;
    padding-bottom: clamp(58px, 7vw, 95px);
}

.about-day .eyebrow { color: #d6a46d; }
.about-day .about-index { color: rgba(255, 255, 255, .4); }

.about-day__head h2 {
    color: #fffdf8;
    font-size: clamp(3.1rem, 4.25vw, 4.45rem);
}

.about-day__head h2 em { color: #e4b981; }

.about-day__head > p {
    margin: 0 0 5px;
    color: rgba(255, 255, 255, .6);
    font-size: .84rem;
    line-height: 1.8;
}

.about-day__panorama {
    margin: 0;
}

.about-day__panorama img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(255, 255, 255, .12);
}

.about-day__panorama figcaption {
    padding: 14px 0 0;
    color: rgba(255, 255, 255, .45);
    font-family: var(--at-serif, Georgia, serif);
    font-size: .74rem;
    font-style: italic;
    text-align: right;
}

.about-day__timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(58px, 6vw, 88px);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.about-day__timeline article {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 18px;
    padding: 35px clamp(22px, 3vw, 48px) 6px 0;
    border-right: 1px solid rgba(255, 255, 255, .18);
}

.about-day__timeline article:not(:first-child) { padding-left: clamp(22px, 3vw, 48px); }
.about-day__timeline article:last-child { border-right: 0; }

.about-day__timeline article > span {
    color: #e4b981;
    font-family: var(--at-serif, Georgia, serif);
    font-size: .78rem;
    font-style: italic;
}

.about-day__timeline small {
    color: rgba(255, 255, 255, .42);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.about-day__timeline h3 {
    margin: 10px 0 12px;
    color: #fff;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.65rem;
    font-weight: 400;
}

.about-day__timeline p {
    margin: 0;
    color: rgba(255, 255, 255, .54);
    font-size: .75rem;
    line-height: 1.75;
}

.about-welcome {
    padding: clamp(105px, 10vw, 160px) 0 clamp(120px, 12vw, 190px);
    background: #e8ddce;
}

.about-welcome__statement {
    padding-bottom: clamp(75px, 9vw, 125px);
}

.about-welcome__statement blockquote {
    max-width: 970px;
    margin: 0;
    color: #103b37;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(2.8rem, 4.15vw, 4.35rem);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: 1.02;
}

.about-welcome__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .72fr);
    gap: clamp(60px, 9vw, 135px);
    align-items: center;
}

.about-welcome__pictures {
    position: relative;
    padding: 0 18% 15% 0;
}

.about-welcome__pictures figure { margin: 0; }

.about-welcome__main img,
.about-welcome__detail img {
    display: block;
    width: 100%;
    height: auto;
}

.about-welcome__main img {
    box-shadow: 0 30px 70px rgba(28, 48, 41, .14);
}

.about-welcome__detail {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 43%;
    padding: 7px;
    background: #f8f4ed;
    box-shadow: 0 24px 55px rgba(28, 48, 41, .18);
}

.about-welcome__detail figcaption {
    padding: 10px 8px 5px;
    color: #796f63;
    font-family: var(--at-serif, Georgia, serif);
    font-size: .7rem;
    font-style: italic;
}

.about-welcome__number {
    display: block;
    margin-bottom: 20px;
    color: rgba(173, 119, 69, .26);
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(5rem, 8vw, 9rem);
    line-height: .7;
}

.about-welcome__copy h2 {
    margin-bottom: 28px;
    font-size: clamp(2.75rem, 3.55vw, 3.8rem);
}

.about-welcome__copy .about-welcome__lead {
    color: #294c47;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.25rem;
    line-height: 1.55;
}

.about-welcome__notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 32px 0 18px;
    border-top: 1px solid rgba(26, 65, 60, .2);
}

.about-welcome__notes span {
    padding: 15px 12px 15px 0;
    border-bottom: 1px solid rgba(26, 65, 60, .2);
    color: #536a64;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-welcome__notes span:nth-child(odd) {
    border-right: 1px solid rgba(26, 65, 60, .2);
}

.about-welcome__notes span:nth-child(even) { padding-left: 16px; }

@media (max-width: 1050px) {
    .about-origin__head,
    .about-welcome__statement { grid-template-columns: 210px 1fr; gap: 45px; }
    .about-origin__layout { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 55px; }
    .about-day__head { grid-template-columns: 180px 1fr; gap: 38px 50px; }
    .about-day__head > p { grid-column: 2; max-width: 570px; }
    .about-facts > div { align-items: flex-start; flex-direction: column; gap: 7px; }
    .about-day__timeline article { grid-template-columns: 1fr; }
    .about-welcome__layout { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 55px; }
}

@media (max-width: 760px) {
    .about-origin,
    .about-day,
    .about-welcome { padding: 85px 0; }

    .about-origin__mark { display: none; }

    .about-origin__head,
    .about-day__head,
    .about-welcome__statement {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .about-origin__head h2,
    .about-day__head h2 {
        font-size: clamp(2.55rem, 10.5vw, 3.35rem);
    }

    .about-origin__layout {
        grid-template-columns: 1fr;
        gap: 46px;
        padding-top: 54px;
    }

    .about-origin__copy { padding-top: 0; }

    .about-origin__image figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .about-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 65px;
    }

    .about-facts > div {
        min-height: 118px;
        padding: 20px 16px;
    }

    .about-facts > div:nth-child(2) { border-right: 0; }
    .about-facts > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(26, 65, 60, .2); }

    .about-day__head > p {
        grid-column: auto;
        font-size: .82rem;
    }

    .about-day__panorama figcaption { text-align: left; }

    .about-day__timeline {
        grid-template-columns: 1fr;
        margin-top: 54px;
    }

    .about-day__timeline article,
    .about-day__timeline article:not(:first-child) {
        grid-template-columns: 62px 1fr;
        padding: 27px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .about-day__timeline article:last-child { border-bottom: 0; }

    .about-welcome__statement blockquote {
        font-size: clamp(2.35rem, 9.8vw, 3.05rem);
    }

    .about-welcome__layout {
        grid-template-columns: 1fr;
        gap: 62px;
    }

    .about-welcome__pictures {
        display: grid;
        grid-template-columns: 1fr 42%;
        align-items: end;
        gap: 8px;
        padding: 0;
    }

    .about-welcome__detail {
        position: static;
        width: auto;
        padding: 4px;
    }

    .about-welcome__detail figcaption { display: none; }

    .about-welcome__number { margin-top: 15px; }

    .about-page .banner h1 {
        max-width: 12ch;
        font-size: clamp(2.75rem, 11.5vw, 3.65rem);
    }

    .about-welcome__copy h2 {
        font-size: clamp(2.5rem, 10vw, 3.2rem);
    }
}

@media (max-width: 430px) {
    .about-origin__head,
    .about-welcome__statement { padding-bottom: 52px; }
    .about-facts strong { font-size: 2.4rem; }
    .about-facts span { font-size: .54rem; }
    .about-day__head { padding-bottom: 52px; }
    .about-welcome__pictures { grid-template-columns: 1fr; }
    .about-welcome__detail { width: 55%; margin: -45px 12px 0 auto; }
}

/* Room media — room-specific photographs, shown without gallery cropping. */
.villa-detail-hero--portrait {
    background: #082e2c;
}

.villa-detail-hero--portrait .villa-detail-hero__image {
    object-fit: contain;
    object-position: center;
    background: #082e2c;
}

.villa-detail-hero--portrait .villa-detail-hero__veil {
    background:
        linear-gradient(90deg, rgba(3, 30, 29, .96) 0%, rgba(3, 30, 29, .58) 31%, rgba(3, 30, 29, .08) 50%, rgba(3, 30, 29, .7) 79%, rgba(3, 30, 29, .96) 100%),
        linear-gradient(0deg, rgba(3, 30, 29, .72), transparent 55%);
}

.villa-detail-viewer {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    max-width: 1060px;
    margin: 0 auto;
    box-shadow: 0 26px 70px rgba(39, 55, 49, .1);
}

.villa-detail-photos .villa-detail-section-head h2 {
    font-size: clamp(3.25rem, 5.8vw, 5.6rem);
}

.villa-detail-viewer__stage {
    position: relative;
    isolation: isolate;
    display: flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    height: clamp(370px, 36vw, 480px);
    overflow: hidden;
    background: #d9cdbd;
    cursor: zoom-in;
}

.villa-detail-viewer__stage::before {
    position: absolute;
    z-index: -2;
    inset: -28px;
    background: var(--viewer-image) center / cover no-repeat;
    content: '';
    filter: blur(22px) saturate(.72);
    opacity: .3;
    transform: scale(1.08);
}

.villa-detail-viewer__stage::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(241, 235, 226, .28);
    content: '';
}

.villa-detail-viewer__stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.villa-detail-viewer__controls {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 38px 30px 30px;
    background: #103a36;
    color: #f4eee4;
}

.villa-detail-viewer__eyebrow {
    color: #d8a86d;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.villa-detail-viewer__count {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 27px;
    font-family: var(--at-serif, Georgia, serif);
}

.villa-detail-viewer__count b {
    color: #fffaf1;
    font-size: 2.65rem;
    font-weight: 400;
    line-height: 1;
}

.villa-detail-viewer__count i {
    width: 30px;
    height: 1px;
    background: rgba(229, 189, 137, .7);
}

.villa-detail-viewer__count span { color: rgba(255, 255, 255, .46); font-size: .78rem; }

.villa-detail-viewer__controls > p {
    max-width: 145px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .56);
    font-size: .72rem;
    line-height: 1.75;
}

.villa-detail-viewer__arrows {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.villa-detail-viewer__arrows button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.villa-detail-viewer__arrows button:hover {
    border-color: #d8a86d;
    background: #d8a86d;
    color: #103a36;
}

.villa-detail-viewer__pagination {
    display: flex;
    gap: 6px;
    margin-top: 25px;
}

.villa-detail-viewer__pagination button {
    width: 22px;
    height: 2px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .24);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.villa-detail-viewer__pagination button.is-active {
    width: 38px;
    background: #d8a86d;
}

.villa-detail-booking__image {
    background: #0b302e;
}

.villa-detail-booking__image img {
    object-fit: contain;
}

@media (max-width: 760px) {
    .villa-detail-hero--portrait .villa-detail-hero__image {
        opacity: .82;
    }

    .villa-detail-hero--portrait .villa-detail-hero__veil {
        background: linear-gradient(0deg, rgba(3, 30, 29, .98) 0%, rgba(3, 30, 29, .5) 50%, rgba(3, 30, 29, .12) 100%);
    }

    .villa-detail-photos {
        padding: 68px 0 76px;
    }

    .villa-detail-viewer {
        grid-template-columns: 1fr;
        box-shadow: 0 18px 45px rgba(39, 55, 49, .1);
    }

    .villa-detail-viewer__stage {
        grid-column: 1;
        grid-row: 1;
        height: min(82vw, 320px);
    }

    .villa-detail-photos .villa-detail-section-head h2 {
        font-size: clamp(2.55rem, 12vw, 3.15rem);
    }

    .villa-detail-viewer__controls {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 14px 18px;
        padding: 19px 20px 18px;
    }

    .villa-detail-viewer__eyebrow,
    .villa-detail-viewer__controls > p { display: none; }

    .villa-detail-viewer__count { margin: 0; }
    .villa-detail-viewer__count b { font-size: 2rem; }
    .villa-detail-viewer__count i { width: 22px; }

    .villa-detail-viewer__arrows {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .villa-detail-viewer__arrows button { width: 40px; height: 40px; }

    .villa-detail-viewer__pagination {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

/* Premium room page — image-led luxury layout with a clear booking journey. */
body.premium-room-page {
    background: #f7f3eb;
    color: #163633;
}

.premium-room-page .masthead,
.premium-room-page .masthead.is-stuck {
    border-bottom-color: rgba(22, 54, 51, .12);
    background: rgba(249, 246, 239, .97);
}

.premium-room { overflow: hidden; }

.premium-label {
    display: block;
    color: #aa7448;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.premium-room__hero {
    position: relative;
    isolation: isolate;
    height: clamp(490px, 61vh, 650px);
    margin-top: 86px;
    overflow: hidden;
    background: #cfc3b2;
}

.premium-room__hero::before {
    position: absolute;
    z-index: -1;
    inset: -35px;
    background: var(--room-image) center / cover no-repeat;
    content: '';
    filter: blur(24px) saturate(.72);
    opacity: .45;
    transform: scale(1.08);
}

.premium-room__hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 48, 44, .08), transparent 35%, transparent 65%, rgba(18, 48, 44, .08));
    content: '';
    pointer-events: none;
}

.premium-room__hero > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.premium-room__summary {
    position: relative;
    z-index: 3;
    margin-top: -88px;
}

.premium-summary-card {
    background: #fffdf8;
    box-shadow: 0 28px 80px rgba(25, 45, 40, .14);
}

.premium-summary-card__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: clamp(60px, 10vw, 150px);
    padding: clamp(48px, 6vw, 82px);
}

.premium-back {
    display: inline-block;
    margin-bottom: 35px;
    color: #64736d;
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.premium-back:hover { color: #aa7448; }

.premium-summary-card h1 {
    max-width: 11ch;
    margin: 17px 0 0;
    color: #163633;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(3.4rem, 4.9vw, 5.25rem);
    font-weight: 400;
    letter-spacing: -.05em;
    line-height: .92;
}

.premium-summary-card__main > div > p {
    max-width: 620px;
    margin: 26px 0 0;
    color: #64726d;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.04rem;
    line-height: 1.7;
}

.premium-summary-card__booking {
    align-self: center;
    padding-left: 35px;
    border-left: 1px solid rgba(22, 54, 51, .17);
}

.premium-summary-card__booking small,
.premium-summary-card__booking > span {
    display: block;
    color: #868a84;
    font-size: .56rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.premium-summary-card__booking strong {
    display: block;
    margin: 13px 0 6px;
    color: #163633;
    font-family: var(--at-serif, Georgia, serif);
    font-size: 2.3rem;
    font-weight: 400;
}

.premium-summary-card__booking > a {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding: 0 20px;
    background: #163633;
    color: #fff;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.premium-summary-card__booking > a:hover { background: #aa7448; color: #fff; }

.premium-summary-card__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(22, 54, 51, .13);
}

.premium-summary-card__facts > div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 24px 28px;
    border-left: 1px solid rgba(22, 54, 51, .13);
}

.premium-summary-card__facts > div:first-child { border-left: 0; }
.premium-summary-card__facts span { grid-row: 1 / 3; color: #aa7448; }
.premium-summary-card__facts small { color: #92938d; font-size: .51rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.premium-summary-card__facts b { overflow: hidden; color: #294a45; font-family: var(--at-serif, Georgia, serif); font-size: .9rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

.premium-room__story { padding: clamp(85px, 8vw, 120px) 0; }

.premium-room__story-grid {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    gap: clamp(65px, 11vw, 165px);
}

.premium-room__story h2,
.premium-gallery-head h2,
.premium-amenities-head h2,
.premium-reserve-copy h2,
.premium-room__related h2 {
    margin: 19px 0 0;
    color: #163633;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(2.8rem, 4vw, 4.25rem);
    font-weight: 400;
    letter-spacing: -.047em;
    line-height: .98;
}

.premium-room__story-copy {
    padding-top: 28px;
    border-top: 1px solid rgba(22, 54, 51, .2);
}

.premium-room__story-copy > p {
    margin: 0;
    color: #566963;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    line-height: 1.85;
}

.premium-room__story-copy > div { display: flex; align-items: center; gap: 18px; margin-top: 44px; }
.premium-room__story-copy i { width: 48px; height: 1px; background: #aa7448; }
.premium-room__story-copy span { color: #78817c; font-size: .58rem; font-weight: 600; letter-spacing: .11em; line-height: 1.7; text-transform: uppercase; }

.premium-room__gallery { padding: clamp(82px, 8vw, 118px) 0; background: #e8dfd1; }

.premium-gallery-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: end;
    gap: 50px;
    margin-bottom: 55px;
}

.premium-gallery-head > p { margin: 0 0 7px; color: #756f66; font-size: .72rem; line-height: 1.7; }

.premium-gallery {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 62px;
    align-items: center;
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}

.premium-gallery__stage {
    position: relative;
    isolation: isolate;
    display: flex;
    height: clamp(390px, 42vw, 525px);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #cfc3b5;
    cursor: zoom-in;
}

.premium-gallery__stage::before {
    position: absolute;
    z-index: -1;
    inset: -30px;
    background: var(--gallery-image) center / cover no-repeat;
    content: '';
    filter: blur(22px) saturate(.75);
    opacity: .35;
    transform: scale(1.08);
}

.premium-gallery__stage img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }

.premium-gallery__arrow {
    display: grid;
    width: 58px;
    height: 58px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(22, 54, 51, .38);
    border-radius: 50%;
    background: transparent;
    color: #163633;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.premium-gallery__arrow:hover { border-color: #163633; background: #163633; color: #fff; }

.premium-gallery__footer {
    display: flex;
    grid-column: 2;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(22, 54, 51, .19);
}

.premium-gallery__footer > div { display: flex; align-items: center; gap: 10px; color: #aa7448; font-family: var(--at-serif, Georgia, serif); font-size: .72rem; }
.premium-gallery__footer b { font-size: 1rem; font-weight: 400; }
.premium-gallery__footer i { width: 32px; height: 1px; background: rgba(170, 116, 72, .55); }
.premium-gallery__footer p { margin: 0; color: #827a70; font-size: .57rem; letter-spacing: .07em; text-transform: uppercase; }

.premium-room__amenities { padding: clamp(88px, 8.5vw, 125px) 0; background: #faf7f0; }
.premium-amenities-head { max-width: 790px; margin-bottom: 60px; }
.premium-amenities-head > p { max-width: 540px; margin: 26px 0 0; color: #697570; font-size: .87rem; line-height: 1.8; }
.premium-amenities-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 16px; }

.premium-amenities-card {
    padding: clamp(32px, 4vw, 54px);
    border: 1px solid rgba(22, 54, 51, .14);
    background: #f3ecdf;
}

.premium-amenities-card > span { color: #aa7448; font-family: var(--at-serif, Georgia, serif); font-size: .72rem; font-style: italic; }
.premium-amenities-card h3 { margin: 17px 0 32px; color: #163633; font-family: var(--at-serif, Georgia, serif); font-size: 2rem; font-weight: 400; }
.premium-amenities-card ul { margin: 0; padding: 0; list-style: none; }
.premium-amenities-card li { padding: 16px 0; border-top: 1px solid rgba(22, 54, 51, .14); color: #4f625c; font-size: .76rem; }

.premium-amenities-card--included { background: #fffdf8; }
.premium-amenities-card--included > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.premium-amenities-card--included section { display: grid; grid-template-columns: 27px 1fr; gap: 11px; padding: 16px 0; border-top: 1px solid rgba(22, 54, 51, .14); }
.premium-amenities-card--included i { color: #aa7448; font-style: normal; }
.premium-amenities-card--included p { margin: 0; }
.premium-amenities-card--included b { display: block; margin-bottom: 4px; color: #294a45; font-size: .72rem; font-weight: 600; }
.premium-amenities-card--included small { display: block; color: #7b8580; font-size: .65rem; line-height: 1.5; }

.premium-room__reserve { background: #163633; }
.premium-reserve-grid { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 560px; }

.premium-reserve-grid > figure {
    position: relative;
    isolation: isolate;
    min-height: 520px;
    margin: 0;
    overflow: hidden;
    background: #203f3a;
}

.premium-reserve-grid > figure::before { position: absolute; z-index: -1; inset: -28px; background: var(--reserve-image) center / cover no-repeat; content: ''; filter: blur(20px) saturate(.72); opacity: .36; transform: scale(1.08); }
.premium-reserve-grid > figure img { width: 100%; height: 100%; object-fit: contain; }

.premium-reserve-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(55px, 7vw, 105px); color: #fff; }
.premium-reserve-copy .premium-label { color: #dfb384; }
.premium-reserve-copy h2 { color: #fff; font-size: clamp(2.8rem, 3.8vw, 4.1rem); }
.premium-reserve-copy > p { margin: 28px 0 0; color: rgba(255, 255, 255, .62); font-size: .84rem; line-height: 1.8; }
.premium-reserve-copy__price { margin: 34px 0 24px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .17); border-bottom: 1px solid rgba(255, 255, 255, .17); }
.premium-reserve-copy__price small,
.premium-reserve-copy__price span { color: rgba(255, 255, 255, .48); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.premium-reserve-copy__price strong { margin: 0 9px; color: #f0d3b1; font-family: var(--at-serif, Georgia, serif); font-size: 1.85rem; font-weight: 400; }
.premium-reserve-copy > a { display: flex; min-height: 55px; align-items: center; justify-content: space-between; padding: 0 21px; background: #f0dfc9; color: #163633; font-size: .61rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.premium-reserve-copy > a:hover { background: #fff; color: #163633; }
.premium-reserve-copy > a:last-child { display: inline-block; min-height: 0; margin-top: 17px; padding: 0; background: transparent; color: rgba(255, 255, 255, .65); font-size: .59rem; letter-spacing: .05em; text-transform: none; }

.premium-room__related { padding: clamp(82px, 8vw, 115px) 0; }
.premium-room__related header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 45px; }
.premium-room__related h2 { font-size: clamp(2.9rem, 4.2vw, 4.4rem); }
.premium-room__related header > a { padding-bottom: 7px; border-bottom: 1px solid currentColor; color: #163633; font-size: .59rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.premium-related-list { border-top: 1px solid rgba(22, 54, 51, .19); }
.premium-related-list > a { display: grid; grid-template-columns: 45px minmax(0, 1fr) 190px 20px; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(22, 54, 51, .16); color: #163633; transition: padding .25s ease, color .25s ease; }
.premium-related-list > a:hover { padding-left: 10px; color: #aa7448; }
.premium-related-list span { color: #aa7448; font-family: var(--at-serif, Georgia, serif); font-size: .7rem; font-style: italic; }
.premium-related-list h3 { margin: 0; font-family: var(--at-serif, Georgia, serif); font-size: 1.65rem; font-weight: 400; }
.premium-related-list p { margin: 0; color: #747d78; font-size: .66rem; letter-spacing: .05em; }
.premium-related-list b { font-weight: 400; }

@media (max-width: 980px) {
    .premium-summary-card__main { grid-template-columns: minmax(0, 1fr) 270px; gap: 50px; }
    .premium-summary-card__facts { grid-template-columns: 1fr 1fr; }
    .premium-summary-card__facts > div:nth-child(3) { border-left: 0; }
    .premium-summary-card__facts > div:nth-child(n+3) { border-top: 1px solid rgba(22, 54, 51, .13); }
    .premium-room__story-grid { gap: 65px; }
    .premium-reserve-grid { grid-template-columns: .9fr 1.1fr; }
}

@media (max-width: 760px) {
    .premium-room__hero { height: 420px; margin-top: 68px; }
    .premium-room__summary { margin-top: -38px; }
    .premium-summary-card__main { grid-template-columns: 1fr; gap: 38px; padding: 36px 27px; }
    .premium-back { margin-bottom: 28px; }
    .premium-summary-card h1 { font-size: clamp(2.9rem, 12vw, 3.65rem); }
    .premium-summary-card__main > div > p { font-size: .94rem; }
    .premium-summary-card__booking { padding: 25px 0 0; border-top: 1px solid rgba(22, 54, 51, .17); border-left: 0; }
    .premium-summary-card__booking strong { font-size: 1.9rem; }
    .premium-summary-card__facts { grid-template-columns: 1fr 1fr; }
    .premium-summary-card__facts > div { grid-template-columns: 24px minmax(0, 1fr); padding: 18px 14px; }
    .premium-summary-card__facts > div:nth-child(odd) { border-left: 0; }
    .premium-summary-card__facts b { font-size: .75rem; white-space: normal; }
    .premium-room__story-grid { grid-template-columns: 1fr; gap: 42px; }
    .premium-room__story h2,
    .premium-gallery-head h2,
    .premium-amenities-head h2,
    .premium-reserve-copy h2,
    .premium-room__related h2 { font-size: clamp(2.45rem, 10.5vw, 3.05rem); }
    .premium-gallery-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 38px; }
    .premium-gallery-head > p { max-width: 270px; }
    .premium-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
    .premium-gallery__stage { grid-column: 1 / -1; grid-row: 1; height: min(84vw, 330px); }
    .premium-gallery__arrow { width: 44px; height: 44px; }
    .premium-gallery__arrow--prev { grid-column: 1; justify-self: start; }
    .premium-gallery__arrow--next { grid-column: 2; justify-self: end; }
    .premium-gallery__footer { grid-column: 1 / -1; padding-top: 10px; }
    .premium-gallery__footer p { display: none; }
    .premium-amenities-grid { grid-template-columns: 1fr; }
    .premium-amenities-card { padding: 30px 25px; }
    .premium-amenities-card--included > div { grid-template-columns: 1fr; }
    .premium-reserve-grid { grid-template-columns: 1fr; min-height: 0; }
    .premium-reserve-grid > figure { min-height: 360px; }
    .premium-reserve-copy { padding: 58px 28px 65px; }
    .premium-room__related header { display: block; }
    .premium-room__related header > a { display: inline-block; margin-top: 24px; }
    .premium-related-list > a { grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 10px; }
    .premium-related-list p { display: none; }
    .premium-related-list h3 { font-size: 1.4rem; }
}

/* Amanpulo-inspired room page: quiet framing, photography first. */
body.aman-room-page { background: #f5f1e9; color: #242321; }
.aman-room-page .masthead,
.aman-room-page .masthead.is-stuck { border-bottom: 1px solid rgba(34, 32, 29, .13); background: rgba(247, 243, 235, .98); }
.aman-room { overflow: hidden; padding-top: 86px; }

.aman-room__intro { padding: 92px 0 70px; text-align: center; }
.aman-room__intro span,
.aman-room__story article > span,
.aman-room__included-grid > div > span,
.aman-room__amenities-grid > div > span { color: #9d673f; font-size: .57rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.aman-room__intro h1 { margin: 18px 0 0; color: #26231f; font-family: var(--at-serif, Georgia, serif); font-size: clamp(2.8rem, 4.2vw, 4.5rem); font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.aman-room__intro > div > a { display: inline-block; margin-top: 43px; padding-bottom: 8px; border-bottom: 1px solid #34302b; color: #34302b; font-family: var(--at-serif, Georgia, serif); font-size: .82rem; }
.aman-room__intro p { margin: 23px 0 0; color: #77716a; font-size: .61rem; letter-spacing: .11em; text-transform: uppercase; }
.aman-room__intro p strong { color: #2a2824; font-family: var(--at-serif, Georgia, serif); font-size: 1.02rem; font-weight: 400; letter-spacing: 0; }

.aman-room__gallery { padding-bottom: 35px; }
.aman-room__gallery.is-landscape [data-premium-gallery] { width: min(1180px, calc(100% - 64px)); }
.aman-gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; padding: 16px; background: #173a34; box-shadow: 0 28px 70px rgba(29, 42, 37, .18); }
.aman-gallery-stage {
    position: relative;
    isolation: isolate;
    display: flex;
    height: clamp(500px, 56vw, 680px);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #cfc5b7;
    cursor: zoom-in;
}
.aman-room__gallery.is-landscape .aman-gallery-stage { height: auto; aspect-ratio: 4 / 3; }
.aman-gallery-stage::before { position: absolute; z-index: -1; inset: -35px; background: var(--gallery-image) center / cover no-repeat; content: ''; filter: blur(26px) saturate(.86); opacity: .42; transform: scale(1.08); }
.aman-gallery-stage img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(1.08) contrast(1.035) brightness(1.025); }
.aman-gallery-rail { display: grid; min-height: 0; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 9px; }
.aman-gallery-tile { position: relative; isolation: isolate; display: flex; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: hidden; padding: 0; border: 0; background: #cfc5b7; cursor: pointer; }
.aman-gallery-tile::before { position: absolute; z-index: -1; inset: -20px; background: var(--gallery-image) center / cover no-repeat; content: ''; filter: blur(18px) saturate(.72); opacity: .3; transform: scale(1.08); }
.aman-gallery-tile::after { position: absolute; inset: 0; border: 0 solid #ddb27e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); content: ''; pointer-events: none; transition: border-width .25s ease, box-shadow .25s ease; }
.aman-gallery-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.09) contrast(1.04) brightness(1.035); transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .35s ease; }
.aman-gallery-tile:hover img { filter: saturate(1.16) contrast(1.04) brightness(1.06); transform: scale(1.045); }
.aman-gallery-tile.is-active::after { border-width: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.aman-gallery-meta { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 17px; border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; background: #173a34; box-shadow: 0 18px 44px rgba(29, 42, 37, .12); }
.aman-gallery-meta > p { margin: 0; color: rgba(255, 255, 255, .86); font-family: var(--at-serif, Georgia, serif); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.aman-gallery-meta > div { display: flex; align-items: center; gap: 12px; }
.aman-gallery-meta small { margin-right: 8px; color: #9d673f; font-size: .52rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.aman-gallery-meta span { margin-right: 16px; color: rgba(255, 255, 255, .84); font-family: var(--at-serif, Georgia, serif); font-size: .72rem; }
.aman-gallery-meta span b { font-weight: 400; }
.aman-gallery-meta button { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: transparent; color: #fff; font-family: var(--at-serif, Georgia, serif); font-size: 1.2rem; cursor: pointer; transition: background .25s ease, color .25s ease; }
.aman-gallery-meta button:hover { background: #f3e9dc; color: #173a34; }

.aman-room__story { padding: 45px 0 112px; }
.aman-room__story-grid { display: grid; grid-template-columns: .9fr .9fr 1fr; align-items: start; gap: clamp(22px, 3.5vw, 48px); }
.aman-room__story figure { position: relative; isolation: isolate; height: 520px; margin: 0; overflow: hidden; border: 1px solid rgba(55, 48, 40, .1); background: #d2c8ba; box-shadow: 0 18px 42px rgba(47, 39, 31, .07); }
.aman-room__story:not(.is-portrait) figure { height: auto; aspect-ratio: 4 / 3; }
.aman-room__story figure::before { position: absolute; z-index: -1; inset: -25px; background: var(--story-image) center / cover no-repeat; content: ''; filter: blur(20px) saturate(.72); opacity: .28; transform: scale(1.08); }
.aman-room__story figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aman-room__story article { padding: 8px 0 0 18px; }
.aman-room__story article h2 { margin: 19px 0 0; color: #2b2824; font-family: var(--at-serif, Georgia, serif); font-size: clamp(1.6rem, 2.35vw, 2.45rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.18; }
.aman-room__story article > p { margin: 28px 0 0; color: #58534d; font-family: var(--at-serif, Georgia, serif); font-size: .94rem; line-height: 1.75; }
.aman-room__story article > a { display: inline-block; margin-top: 33px; padding: 0 0 8px; border-bottom: 1px solid #36312c; color: #302d29; font-size: .64rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.aman-room__story--copy { padding: 94px 0 108px; }
.aman-room__story-copy { display: grid; grid-template-columns: .55fr 1.1fr .9fr; align-items: start; gap: clamp(42px, 7vw, 105px); }
.aman-room__story-copy header { padding-top: 7px; }
.aman-room__story-copy header span { display: block; color: #9d673f; font-size: .57rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.aman-room__story-copy header small { display: block; margin-top: 20px; color: #8b8379; font-family: var(--at-serif, Georgia, serif); font-size: .68rem; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.aman-room__story-copy > h2 { margin: 0; color: #2b2824; font-family: var(--at-serif, Georgia, serif); font-size: clamp(1.85rem, 2.7vw, 2.9rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.16; }
.aman-room__story-copy article { padding: 3px 0 0; }
.aman-room__story-copy article > p { margin: 0; color: #58534d; font-family: var(--at-serif, Georgia, serif); font-size: .94rem; line-height: 1.78; }

.aman-room__facts { border-top: 1px solid rgba(35, 32, 28, .13); border-bottom: 1px solid rgba(35, 32, 28, .13); background: #eee7dc; }
.aman-room__facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aman-room__facts-grid > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 27px 24px; border-left: 1px solid rgba(35, 32, 28, .13); }
.aman-room__facts-grid > div:first-child { border-left: 0; }
.aman-room__facts-grid span { grid-row: 1 / 3; color: #9d673f; }
.aman-room__facts-grid small { color: #8d857c; font-size: .5rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.aman-room__facts-grid strong { overflow: hidden; color: #393530; font-family: var(--at-serif, Georgia, serif); font-size: .88rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }

.aman-room__included { padding: 110px 0; }
.aman-room__included-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(70px, 11vw, 165px); }
.aman-room__included h2,
.aman-room__amenities h2,
.aman-room__others h2 { margin: 19px 0 0; color: #282521; font-family: var(--at-serif, Georgia, serif); font-size: clamp(2.4rem, 3.8vw, 4rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.aman-room__included ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin: 0; padding: 0; border-top: 1px solid rgba(35, 32, 28, .16); list-style: none; }
.aman-room__included li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid rgba(35, 32, 28, .13); }
.aman-room__included li i { color: #9d673f; font-style: normal; }
.aman-room__included li p { margin: 0; }
.aman-room__included li strong { display: block; color: #393530; font-size: .7rem; font-weight: 600; }
.aman-room__included li small { display: block; margin-top: 4px; color: #7f7971; font-size: .62rem; line-height: 1.45; }

.aman-room__amenities { padding: 100px 0; background: #2e2c29; color: #fff; }
.aman-room__amenities-grid { display: grid; grid-template-columns: .75fr 1fr 310px; align-items: start; gap: clamp(55px, 8vw, 115px); }
.aman-room__amenities-grid > div > span { color: #d4aa82; }
.aman-room__amenities h2 { color: #fff; font-size: clamp(2.3rem, 3.5vw, 3.7rem); }
.aman-room__amenities ul { margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .2); list-style: none; }
.aman-room__amenities li { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .17); color: rgba(255, 255, 255, .76); font-size: .73rem; }
.aman-room__amenities aside { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .19); }
.aman-room__amenities aside small,
.aman-room__amenities aside > span { display: block; color: rgba(255, 255, 255, .5); font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; }
.aman-room__amenities aside strong { display: block; margin: 12px 0 5px; color: #f2d4b5; font-family: var(--at-serif, Georgia, serif); font-size: 2rem; font-weight: 400; }
.aman-room__amenities aside > a { display: block; margin-top: 25px; padding: 17px 18px; background: #f4eee5; color: #2e2c29; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.aman-room__amenities aside > a:last-child { margin-top: 13px; padding: 0; background: transparent; color: rgba(255, 255, 255, .65); font-size: .57rem; letter-spacing: .04em; text-transform: none; }

.aman-room__others { padding: 105px 0; }
.aman-room__others header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 40px; }
.aman-room__others h2 { margin: 0; font-size: 3rem; }
.aman-room__others header > a { padding-bottom: 7px; border-bottom: 1px solid #393530; color: #393530; font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.aman-room__others > div > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(35, 32, 28, .16); }
.aman-room__others > div > div > a { display: flex; min-width: 0; flex-direction: column; padding: 30px; background: #f5f1e9; color: #302d29; }
.aman-room__others a span { font-family: var(--at-serif, Georgia, serif); font-size: 1.5rem; }
.aman-room__others a small { margin-top: 12px; color: #837c73; font-size: .61rem; }
.aman-room__others a b { margin-top: 28px; font-size: .59rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.aman-room__mobile-reserve { display: none; }

@media (max-width: 900px) {
    .aman-room__story-copy { grid-template-columns: .65fr 1.35fr; }
    .aman-room__story-copy article { grid-column: 2; }
    .aman-room__story-grid { grid-template-columns: 1fr 1fr; }
    .aman-room__story article { grid-column: 1 / 3; max-width: 720px; padding: 35px 0 0; }
    .aman-room__story figure { height: 430px; }
    .aman-room__story:not(.is-portrait) figure { height: auto; }
    .aman-room__included-grid { gap: 60px; }
    .aman-room__amenities-grid { grid-template-columns: 1fr 1fr; }
    .aman-room__amenities aside { grid-column: 1 / 3; padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .19); border-left: 0; }
}

@media (max-width: 620px) {
    .aman-room { padding-top: 68px; padding-bottom: 66px; }
    .aman-room__intro { padding: 44px 0 45px; }
    .aman-room__intro span { display: none; }
    .aman-room__intro h1 { margin: 0; font-size: 2.25rem; }
    .aman-room__intro > div > a { margin-top: 34px; font-size: .76rem; }
    .aman-room__intro p { margin-top: 18px; font-size: .54rem; }
    .aman-room__gallery.is-landscape [data-premium-gallery] { width: calc(100% - 30px); }
    .aman-gallery-grid { display: block; padding: 8px; }
    .aman-gallery-rail { display: grid; grid-template-rows: 58px; grid-auto-columns: 78px; grid-auto-flow: column; gap: 7px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
    .aman-gallery-rail::-webkit-scrollbar { display: none; }
    .aman-gallery-tile { aspect-ratio: auto; scroll-snap-align: start; }
    .aman-gallery-stage { height: 270px; }
    .aman-room__gallery.is-landscape .aman-gallery-stage { height: auto; }
    .aman-gallery-meta { min-height: 64px; align-items: center; padding: 0 10px; }
    .aman-gallery-meta > p { max-width: 195px; font-size: .58rem; line-height: 1.55; }
    .aman-gallery-meta > div { gap: 5px; }
    .aman-gallery-meta small { display: none; }
    .aman-gallery-meta span { margin-right: 6px; }
    .aman-room__gallery { padding-bottom: 37px; }
    .aman-room__story { padding: 0 0 75px; }
    .aman-room__story--copy { padding: 67px 0 74px; }
    .aman-room__story-copy { grid-template-columns: 1fr; gap: 29px; }
    .aman-room__story-copy header small { margin-top: 12px; }
    .aman-room__story-copy > h2 { font-size: 1.75rem; }
    .aman-room__story-copy article { grid-column: 1; padding: 0; }
    .aman-room__story-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .aman-room__story figure { height: 155px; }
    .aman-room__story:not(.is-portrait) figure { height: auto; }
    .aman-room__story article { grid-column: 1 / 3; padding-top: 34px; }
    .aman-room__story article h2 { font-size: 1.6rem; }
    .aman-room__story article > p { margin-top: 20px; font-size: .87rem; }
    .aman-room__story-copy article { grid-column: 1; padding: 0; }
    .aman-room__story-copy article > p { margin-top: 0; }
    .aman-room__facts-grid { grid-template-columns: 1fr 1fr; }
    .aman-room__facts-grid > div { padding: 20px 12px; }
    .aman-room__facts-grid > div:nth-child(odd) { border-left: 0; }
    .aman-room__facts-grid > div:nth-child(n+3) { border-top: 1px solid rgba(35, 32, 28, .13); }
    .aman-room__facts-grid strong { font-size: .72rem; white-space: normal; }
    .aman-room__included { padding: 72px 0; }
    .aman-room__included-grid { grid-template-columns: 1fr; gap: 38px; }
    .aman-room__included h2,
    .aman-room__amenities h2 { font-size: 2.65rem; }
    .aman-room__included ul { grid-template-columns: 1fr; }
    .aman-room__amenities { padding: 72px 0; }
    .aman-room__amenities-grid { grid-template-columns: 1fr; gap: 38px; }
    .aman-room__amenities aside { grid-column: 1; }
    .aman-room__others { padding: 72px 0; }
    .aman-room__others header { display: block; }
    .aman-room__others header > a { display: inline-block; margin-top: 22px; }
    .aman-room__others > div > div { grid-template-columns: 1fr; }
    .aman-room__others > div > div > a { padding: 24px 20px; }
    .aman-room__mobile-reserve { position: fixed; z-index: 900; right: 15px; bottom: 10px; left: 15px; display: flex; min-height: 50px; align-items: center; justify-content: center; background: #2e2c29; color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .2); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
}

/* ==========================================================================
   Villa detail page (.vd-*)
   Replaces the earlier stage+rail gallery, whose fixed stage height could not
   agree with a mixed landscape/portrait set and left the container half empty.
   Every photograph now sits in a fixed cell with object-fit: cover.
   ========================================================================== */

.vd-page { background: var(--at-ivory, #f7f4ed); }

/* ---------- Hero ---------- */
.vd-hero {
    position: relative;
    min-height: 92svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--at-ink, #18312f);
}

.vd-hero > img {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
}

.vd-hero__backdrop {
    position: absolute;
    inset: -36px;
    background-position: center;
    background-size: cover;
    filter: blur(26px) saturate(.8);
    opacity: .58;
    transform: scale(1.08);
}

.vd-hero--portrait > img {
    z-index: 2;
    inset: 108px max(28px, 4vw) 34px auto;
    width: min(38vw, 470px);
    height: calc(100% - 142px);
    padding: 5px;
    object-fit: contain;
    object-position: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 12px;
    background: rgba(9, 22, 20, .78);
    box-shadow: 0 28px 80px rgba(4, 15, 14, .42);
}

.vd-hero--portrait .vd-hero__veil {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(10, 25, 23, .96) 0%, rgba(10, 25, 23, .9) 38%, rgba(10, 25, 23, .32) 69%, rgba(10, 25, 23, .18) 100%),
        linear-gradient(to top, rgba(10, 25, 23, .72), transparent 55%);
}

.vd-hero--portrait .vd-hero__inner {
    z-index: 3;
    padding-right: min(43vw, 560px);
}

.vd-hero__veil {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 26, 24, .88) 0%, rgba(12, 26, 24, .34) 46%, rgba(12, 26, 24, .5) 100%);
}

.vd-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 54px;
}

.vd-hero__back {
    display: inline-block;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, .74);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: color .3s ease;
}

.vd-hero__back:hover { color: #fff; }

.vd-hero__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: #e6c79b;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.vd-hero h1 {
    margin: 0;
    color: #fff;
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(2.6rem, 6vw, 5.1rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: .96;
}

.vd-hero__inner > p {
    max-width: 46ch;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: 1.02rem;
    line-height: 1.7;
}

.vd-hero__bar {
    margin-top: 34px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 3px;
    background: rgba(14, 30, 28, .42);
    backdrop-filter: blur(9px);
}

.vd-hero__bar > span { display: flex; align-items: baseline; gap: 8px; }
.vd-hero__bar small { color: rgba(255, 255, 255, .6); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.vd-hero__bar strong { color: #fff; font-family: var(--at-sans, sans-serif); font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
.vd-hero__bar > i { width: 1px; height: 26px; background: rgba(255, 255, 255, .2); }

.vd-hero__bar > a {
    margin-left: auto;
    padding: 13px 30px;
    border-radius: 2px;
    background: #e6c79b;
    color: #23342d;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: background .3s ease, color .3s ease;
}

.vd-hero__bar > a:hover { background: #fff; }

.vd-hero__scroll {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: 26px;
    height: 40px;
    display: grid;
    place-items: center;
}

.vd-hero__scroll i {
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .85), transparent);
    animation: vd-sink 2.4s ease-in-out infinite;
}

@keyframes vd-sink {
    0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .35; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ---------- Story ---------- */
.vd-story { padding: clamp(70px, 8vw, 118px) 0 clamp(50px, 5vw, 76px); }

.vd-story__grid {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(30px, 5vw, 74px);
}

.vd-story__aside { border-top: 1px solid rgba(24, 49, 47, .2); padding-top: 16px; }
.vd-story__aside span { display: block; color: #a67b4f; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vd-story__aside b { display: block; margin-top: 10px; color: rgba(24, 49, 47, .22); font-family: var(--at-serif, Georgia, serif); font-size: 3.4rem; font-weight: 400; line-height: 1; }

.vd-story__copy h2 {
    margin: 0 0 24px;
    max-width: 20ch;
    color: var(--at-ink, #18312f);
    font-family: var(--at-serif, Georgia, serif);
    font-size: clamp(1.8rem, 3.2vw, 2.85rem);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1.08;
}

.vd-story__copy > p { max-width: 66ch; margin: 0; color: #5d6b65; font-size: 1rem; line-height: 1.86; }

.vd-story__features {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 34px;
}

.vd-story__features li {
    padding: 13px 0 13px 22px;
    border-top: 1px solid rgba(24, 49, 47, .13);
    position: relative;
    color: #45544e;
    font-size: .88rem;
}

.vd-story__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 21px;
    width: 9px;
    height: 1px;
    background: #a67b4f;
}

/* ---------- Gallery mosaic ---------- */
.vd-gallery { padding: clamp(30px, 4vw, 56px) 0 clamp(70px, 8vw, 112px); }

.vd-gallery__head { margin-bottom: 30px; }
.vd-gallery__head span { display: block; color: #a67b4f; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vd-gallery__head h2 { margin: 10px 0 0; color: var(--at-ink, #18312f); font-family: var(--at-serif, Georgia, serif); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.vd-gallery__head small { display: block; margin-top: 12px; color: #8a9691; font-size: .7rem; letter-spacing: .04em; }

.vd-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(190px, 19vw, 268px);
    gap: 14px;
}

/* Two wide landscapes stacked left, two portraits standing full height right */
.vd-mosaic > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.vd-mosaic > :nth-child(2) { grid-column: 1 / span 2; grid-row: 2; }
.vd-mosaic > :nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
.vd-mosaic > :nth-child(4) { grid-column: 4; grid-row: 1 / span 2; }
.vd-mosaic > :nth-child(n + 5) { grid-column: span 2; }

.vd-frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 3px;
    background: #d9d2c4;
}

.vd-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .75, .25, 1);
}

.vd-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(14, 30, 28, 0);
    transition: background .4s ease;
}

.vd-frame:hover img { transform: scale(1.055); }
.vd-frame:hover::after { background: rgba(14, 30, 28, .22); }

.vd-frame__zoom {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    color: #fff;
    font-size: .95rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
}

.vd-frame:hover .vd-frame__zoom { opacity: 1; transform: none; }

/* ---------- Included ---------- */
.vd-included { padding: clamp(64px, 7vw, 104px) 0; background: #efe9dc; }

.vd-included__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(34px, 5vw, 78px);
}

.vd-included span { display: block; color: #a67b4f; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vd-included h2 { margin: 12px 0 16px; color: var(--at-ink, #18312f); font-family: var(--at-serif, Georgia, serif); font-size: clamp(1.85rem, 3.2vw, 2.75rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.06; }
.vd-included__grid > div > p { margin: 0; max-width: 34ch; color: #62706a; font-size: .92rem; line-height: 1.75; }

.vd-included ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0 34px;
}

.vd-included li { display: flex; gap: 14px; padding: 17px 0; border-top: 1px solid rgba(24, 49, 47, .13); }
.vd-included li i { flex: 0 0 auto; color: #a67b4f; }
.vd-included li strong { display: block; color: var(--at-ink, #18312f); font-family: var(--at-sans, sans-serif); font-size: .84rem; font-weight: 650; }
.vd-included li small { display: block; margin-top: 4px; color: #6c7a74; font-size: .76rem; line-height: 1.55; }

/* ---------- Reserve ---------- */
.vd-reserve { position: relative; overflow: hidden; background: var(--at-ink, #18312f); }
.vd-reserve > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-reserve__veil { position: absolute; inset: 0; background: linear-gradient(to right, rgba(12, 26, 24, .92) 12%, rgba(12, 26, 24, .58) 100%); }

.vd-reserve__inner {
    position: relative;
    z-index: 2;
    padding-top: clamp(66px, 8vw, 112px);
    padding-bottom: clamp(66px, 8vw, 112px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    align-items: center;
    gap: clamp(34px, 5vw, 70px);
}

.vd-reserve__inner > div > span { color: #e6c79b; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vd-reserve h2 { margin: 14px 0 14px; color: #fff; font-family: var(--at-serif, Georgia, serif); font-size: clamp(1.95rem, 3.6vw, 3.1rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.04; }
.vd-reserve__inner > div > p { margin: 0; max-width: 42ch; color: rgba(255, 255, 255, .78); font-size: .95rem; line-height: 1.75; }

.vd-reserve__card {
    padding: 30px 28px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 3px;
    background: rgba(14, 30, 28, .5);
    backdrop-filter: blur(9px);
    text-align: center;
}

.vd-reserve__card > small { display: block; color: rgba(255, 255, 255, .62); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.vd-reserve__card > strong { display: block; margin: 9px 0 4px; color: #fff; font-family: var(--at-serif, Georgia, serif); font-size: 2.1rem; font-weight: 400; letter-spacing: -.02em; }
.vd-reserve__card > span { display: block; color: rgba(255, 255, 255, .58); font-size: .62rem; font-weight: 400; letter-spacing: .06em; text-transform: none; }

.vd-reserve__cta {
    display: block;
    margin: 22px 0 12px;
    padding: 15px 20px;
    border-radius: 2px;
    background: #e6c79b;
    color: #23342d;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: background .3s ease;
}

.vd-reserve__cta:hover { background: #fff; }
.vd-reserve__call { color: rgba(255, 255, 255, .68); font-size: .74rem; }
.vd-reserve__call:hover { color: #fff; }

/* ---------- Other villas ---------- */
.vd-others { padding: clamp(66px, 8vw, 108px) 0; }

.vd-others__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 34px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(24, 49, 47, .16);
}

.vd-others__head span { display: block; color: #a67b4f; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vd-others__head h2 { margin: 10px 0 0; color: var(--at-ink, #18312f); font-family: var(--at-serif, Georgia, serif); font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.vd-others__head > a { color: var(--at-ink, #18312f); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid rgba(24, 49, 47, .3); padding-bottom: 4px; }
.vd-others__head > a:hover { color: #a67b4f; border-color: #a67b4f; }

.vd-others__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.vd-other { display: block; }

.vd-other__media {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    height: clamp(230px, 22vw, 310px);
    background: #d9d2c4;
}

.vd-other__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .75, .25, 1); }
.vd-other:hover .vd-other__media img { transform: scale(1.055); }

.vd-other__body { display: block; padding-top: 16px; }
.vd-other__body strong { display: block; color: var(--at-ink, #18312f); font-family: var(--at-serif, Georgia, serif); font-size: 1.32rem; font-weight: 400; letter-spacing: -.02em; }
.vd-other__body small { display: block; margin-top: 6px; color: #7d8b85; font-size: .74rem; letter-spacing: .04em; }

/* ---------- Sticky reserve (small screens) ---------- */
.vd-sticky { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .vd-story__grid { grid-template-columns: 1fr; }
    .vd-story__aside { display: flex; align-items: baseline; gap: 16px; }
    .vd-story__aside b { margin: 0; font-size: 2rem; }
    .vd-included__grid { grid-template-columns: 1fr; }
    .vd-reserve__inner { grid-template-columns: 1fr; }
    .vd-reserve__card { max-width: 360px; }
    .vd-others__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .vd-hero { min-height: 82svh; }
    .vd-hero--portrait { min-height: max(920px, 100svh); }
    .vd-hero--portrait > img {
        inset: 86px 18px auto;
        width: calc(100% - 36px);
        height: min(46svh, 410px);
        padding: 4px;
        border-radius: 8px;
    }
    .vd-hero--portrait .vd-hero__veil {
        background: linear-gradient(to bottom, rgba(10, 25, 23, .14) 8%, rgba(10, 25, 23, .22) 40%, rgba(10, 25, 23, .92) 62%, rgba(10, 25, 23, .98) 100%);
    }
    .vd-hero--portrait .vd-hero__inner {
        padding-right: 0;
        padding-bottom: 34px;
    }
    .vd-hero__bar { gap: 12px 18px; }
    .vd-hero__bar > i { display: none; }
    .vd-hero__bar > a { margin-left: 0; width: 100%; text-align: center; }

    /* Portraits can no longer stand two rows tall beside the landscapes */
    .vd-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 42vw; }
    .vd-mosaic > :nth-child(1),
    .vd-mosaic > :nth-child(2),
    .vd-mosaic > :nth-child(3),
    .vd-mosaic > :nth-child(4),
    .vd-mosaic > :nth-child(n + 5) { grid-column: auto; grid-row: auto; }
    .vd-mosaic > :nth-child(1) { grid-column: 1 / span 2; }

    .vd-others__grid { grid-template-columns: 1fr; }

    .vd-sticky {
        position: fixed;
        z-index: 55;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 18px;
        background: rgba(18, 34, 31, .96);
        backdrop-filter: blur(8px);
    }

    .vd-sticky span { color: #fff; font-family: var(--at-serif, Georgia, serif); font-size: .98rem; line-height: 1.2; }
    .vd-sticky small { display: block; margin-top: 3px; color: rgba(255, 255, 255, .64); font-family: var(--at-sans, sans-serif); font-size: .66rem; }
    .vd-sticky b { padding: 11px 20px; border-radius: 2px; background: #e6c79b; color: #23342d; font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

    body.vd-page .back-to-top { bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
    .vd-hero > img { animation: none; }
    .vd-hero__scroll i { animation: none; }
}