/* Self-host Poppins so first paint and text animations never depend on Google
   Fonts being reachable. These are the same Latin glyphs and weights that the
   previous Google Fonts request supplied. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/poppins/poppins-latin-900.woff2') format('woff2');
}


:root {
    --black: #1A1A1A;
    --black-soft: #242424;
    --black-light: #3A3A3A;

    --white: #F8F7F4;
    --white-soft: #F3F1ED;
    --white-light: #E8E6E1;

    --gray-dark: #6B6B6B;
    --gray: #A8A8A8;
    --gray-light: #D9D9D9;

    /* RGB triplets, for the theme's rgba(var(--x-rgb), a) patterns */
    --black-rgb: 26, 26, 26;
    --white-rgb: 248, 247, 244;

    /* Accent used by the footer/gallery detail rules below */
    --accent: var(--white);
}


* {
    --body-font: 'Poppins', sans-serif;
    --heading-font: 'Poppins', sans-serif;
    --alt-font-1: 'Poppins', sans-serif;
    --tl-ff-heading: 'Poppins', sans-serif;

    --primary-color: var(--black);
    --primary-color-rgb: var(--black-rgb);
    --secondary-color: var(--black);
    --secondary-color-rgb: var(--black-rgb);

    /* Backgrounds */
    --bg-default: var(--white);
    --bg-light: var(--white-soft);
    --bg-dark-1: var(--black);
    --bg-dark-2: var(--black-soft);
    --bg-dark-3: var(--black-light);
    --bg-dark-1-rgb: var(--black-rgb);
    --bg-grey: var(--white-light);
    --bg-color-even: var(--white-light);
    --bg-color-odd: var(--white-soft);

    /* Text + borders. The theme ships a warm brown (#341F16) for headings and
       body copy; both are re-pointed at the neutral palette here. */
    --body-font-color: rgba(26, 26, 26, .75);
    --body-font-color-bg-dark: rgba(255, 255, 255, .8);
    --heading-font-color: var(--black);
    --heading-font-color-bg-dark: var(--white);
    --subtitle-color: var(--gray-dark);
    --subtitle-color-dark: var(--white);
    --border-color: var(--gray-light);
    --border-default: solid 1px var(--black);

    /* Buttons */
    --btn-color: var(--white);
    --btn-hover-color: var(--white);
    --btn-hover-bg: var(--black-light);

    --footer-background-color: var(--black);
}

/* Poppins has a smaller visual body at the theme's inherited 30px leading.
   Tighten regular paragraphs only; component-specific paragraph spacing below
   (hero, cards, contact, etc.) continues to take precedence. */
p {
    line-height: 1.5;
}

.bg-color,
section.bg-color,
.bg-id-color,
.btn-main,
.btn-primary {
    background-color: var(--black);
    color: var(--white);
}

.id-color,
a.id-color {
    color: var(--black);
}

.text-light .id-color,
.section-dark .id-color,
.bg-dark .id-color,
.bg-dark-1 .id-color,
.bg-dark-2 .id-color,
.bg-dark-3 .id-color {
    color: var(--white);
}

/* --- Preloader --- */
.preloader {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    --preloader-clip: 0;
    clip-path: inset(0 0 0 var(--preloader-clip));
}

.preloader span {
    font-family: 'Poppins', sans-serif;
    font-size: 80px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    overflow-x: hidden;
}

.site-name {
    width: 100%;
    height: 100%;
    text-align: center;
    align-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #111;
}

.preloader-gutters {
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
}

.preloader-gutters .bar {
    width: 12.5%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    position: relative;
}

.preloader-gutters .inner-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #fff;
}

@media only screen and (max-width: 767px) {
    .site-name span {
        font-size: 40px;
    }
}


/* --- Footer --- */
/* Two bands only: the copyright bar and the watermark under it. */
.footer-section {
    position: relative;
    z-index: 1;
    overflow-x: clip;
    background-color: #0F0F0F;
    padding: 0;
}

/* Soft blend into the section above instead of a hard-edged panel. */
.footer-section .footer-shade {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 100%);
    height: 160px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}


/* --- Copyright bar ---
   Three zones: social icons left, copyright centred, email + phone right. */
.copyright-area {
    position: relative;
    z-index: 1;
    padding: 34px 0 30px;
}

.copyright-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 30px;
}

.footer-copy {
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.6;
}

.footer-copy a {
    color: rgba(255, 255, 255, .78);
    transition: color .25s ease-in-out;
}

.footer-copy a:hover {
    color: var(--accent);
}

/* Matching flex basis on both flanks is what keeps .footer-copy optically
   centred in the bar, rather than centred on whatever space is left over. The
   basis has to clear the widest flank's own content — the contact details run
   ~344px with their icons and divider — or that flank outgrows the basis and
   drags the copyright line off centre. */
.footer-social,
.footer-contact {
    flex: 0 1 350px;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social {
    gap: 10px;
}

.footer-contact {
    justify-content: flex-end;
    gap: 26px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .7);
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.footer-social svg {
    width: 17px;
    height: 17px;
    display: block;
}

.footer-social a:hover {
    color: var(--black);
    background-color: var(--white);
    border-color: var(--white);
    transform: translateY(-3px);
}

/* Flex, not the default inline flow: the divider below is inline text while
   the link is an inline-flex box wrapping an SVG, and letting those two share
   a baseline stretches the line box and knocks the items out of line with
   each other. As flex items they simply centre. */
.footer-contact li {
    display: flex;
    align-items: center;
}

/* Divider between the two contact details. Drawn on the list item rather than
   the link so the link's hover underline stays the link's own width. */
.footer-contact li + li:before {
    content: "|";
    margin-right: 26px;
    color: rgba(255, 255, 255, .28);
    font-size: 14px;
}

.footer-contact a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    white-space: nowrap;
    transition: color .25s ease-in-out;
}

.footer-contact__icon {
    width: 16px;
    height: 16px;
    flex: none;
    opacity: .8;
    transition: opacity .25s ease-in-out;
}

.footer-contact a:hover .footer-contact__icon {
    opacity: 1;
}

/* Underline wipes in from the left on hover. */
.footer-contact a:before {
    background-color: var(--accent);
    content: "";
    width: 0;
    height: 1px;
    position: absolute;
    bottom: -3px;
    left: 0;
    transition: width .3s ease-in-out;
}

.footer-contact a:hover {
    color: var(--accent);
}

.footer-contact a:hover:before {
    width: 100%;
}

@media (max-width: 991px) {
    .copyright-content {
        flex-direction: column;
        gap: 24px;
    }

    .footer-social,
    .footer-contact {
        flex: 0 0 auto;
        justify-content: center;
    }

    /* Contact details lead on narrow screens; the legal line closes. */
    .footer-contact {
        order: -1;
    }

    .footer-copy {
        order: 1;
    }
}

@media (max-width: 575px) {
    .footer-contact {
        flex-direction: column;
        gap: 12px;
    }

    /* Stacked, the details no longer read as one line, so the divider between
       them has nothing left to divide. */
    .footer-contact li + li:before {
        content: none;
    }
}


/* --- Watermark --- */
/* Kept in normal flow (rather than absolutely positioned) so it sits below the
   copyright bar instead of colliding with it, and reserves no dead space. */
.footer-text {
    position: relative;
    z-index: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.footer-text span {
    font-family: 'Poppins', sans-serif;
    /* Tracks the viewport at every width rather than capping out, so the word
       spans the footer on a 2560px monitor exactly as it does on a phone. The
       ratio is tuned to "CREYA VILLA" at this font — it fills ~88% of the line
       and never reaches the edges. */
    font-size: 13vw;
    letter-spacing: .02em;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 250, 242, .4) 0%, rgba(255, 251, 244, .03) 94%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    line-height: .9;
    display: block;
    /* Crops the empty space under the glyphs for a flush bottom edge. */
    margin-bottom: -.14em;
}

.gallary-section {
    /* padding-top: 250px; */
    padding-bottom: 130px;
    position: relative;
    z-index: 1
}

.main-title {
    text-transform: capitalize !important;
}

#rooms .rooms-title-line {
    display: inline-block;
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1399px) {
    #rooms .main-title {
        font-size: 46px;
    }
}

#back-to-top {
    border-radius: 0 !important;
}

@media only screen and (max-width: 767px) {
    .gallary-section {
        padding: 70px 0
    }
}

.gallary-section .gallary-text {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1
}

.gallary-section .gallary-text span {
    font-family: var(--tl-ff-heading);
    font-size: 390px;
    font-weight: 400;
    color: var(--tl-color-grey-2);
    line-height: 1;
    opacity: .18
}

@media only screen and (max-width: 767px) {
    .gallary-section .gallary-text span {
        font-size: 100px
    }
}

.gallary-wrap {
    overflow: hidden;
    display: flex
}

.gallary-wrap .gallery-scroll-wrap {
    display: flex;
    gap: 30px;
    padding: 0;
    will-change: transform;
    align-items: flex-end
}

@media only screen and (max-width: 767px) {
    .gallary-wrap .gallery-scroll-wrap {
        gap: 10px
    }
}

.gallary-wrap.gallery-scroll-direction-ltr {
    justify-content: flex-end
}

.gallary-wrap.wrap-1 {
    margin-bottom: 40px
}

@media only screen and (max-width: 767px) {
    .gallary-wrap.wrap-1 {
        margin-bottom: 10px
    }
}

.gallary-scroll-item {
    flex: 0 0 auto;
    width: 380px;
    height: 200px;
    overflow: hidden;
    transition: transform .3s linear
}

@media(max-width: 1199px) {
    .gallary-scroll-item {
        width: 280px;
        height: 150px
    }
}

@media only screen and (max-width: 992px) {
    .gallary-scroll-item {
        width: 280px;
        height: 200px
    }
}

@media only screen and (max-width: 767px) {
    .gallary-scroll-item {
        width: 100px;
        height: 50px
    }
}

.gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+2) {
    width: 480px;
    height: 280px
}

@media(max-width: 1199px) {
    .gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+2) {
        width: 380px;
        height: 180px
    }
}

@media only screen and (max-width: 992px) {
    .gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+2) {
        width: 280px;
        height: 200px
    }
}

@media only screen and (max-width: 767px) {
    .gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+2) {
        width: 80px;
        height: 50px
    }
}

.gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+3) {
    width: 680px;
    height: 360px
}

@media(max-width: 1199px) {
    .gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+3) {
        width: 480px;
        height: 260px
    }
}

@media only screen and (max-width: 992px) {
    .gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+3) {
        width: 480px;
        height: 300px
    }
}

@media only screen and (max-width: 767px) {
    .gallery-scroll-wrap .gallary-scroll-item:nth-child(3n+3) {
        width: 120px;
        height: 80px
    }
}

.gallery-scroll-wrap .gallary-scroll-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 24px; */
    /* border-radius: 10px */
}

#about,
#island,
#contact,
#faq,
#rooms,
.gallary-section {
    background: white !important;
}

.hero-section {
    height: 100vh;
}

.hero-headline {
    inset: 0;
    display: flex;
    align-items: center;
    transform: none;
}

.hero-headline>.container {
    width: 100%;
}

/* The display face leaves visible space before its oversized K. Pull only the
   first hero line into the shared container edge used by the intro, notes,
   header and page sections below. */
.hero-titles .text-start h1 {
    margin-inline-start: -.045em;
}

.hero-intro p {
    font-size: 15px;
    line-height: 1.4;
}

@media only screen and (min-width: 992px) {
    .hero-headline .row {
        position: relative;
    }

    .hero-titles .text-start h1 {
        transform: scaleX(1.08);
        transform-origin: left center;
    }

    .hero-titles .text-lg-end h1 {
        transform: scaleX(1.08);
        transform-origin: right center;
    }

    .hero-intro {
        position: absolute;
        top: 140px;
        left: 0;
    }
}

.hero-notes {
    padding-bottom: clamp(20px, 3vh, 32px);
}

.hero-notes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 72px);
}

.hero-note {
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.35;
}

.hero-note span {
    display: inline-block;
    padding-top: 5px;
    border-top: 2px solid rgba(255, 255, 255, .55);
}

.hero-note:nth-child(2) {
    text-align: center;
}

.hero-note:nth-child(3) {
    text-align: right;
}

.hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    contain: paint;
    isolation: isolate;
    background: var(--black) url("../images/hero/1.webp") center / cover no-repeat;
}

.hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center bottom;
    backface-visibility: hidden;
    will-change: transform;
}

.hero-media .sw-overlay {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

footer {
    padding-top: 0 !important;
}

.gallary-section {
    padding-bottom: 100px !important;
}


/* =====================================================================
   Sticky header button
   The header sits on a dark bar once stuck, so the default black button
   disappears into it — invert to white for contrast.
   ===================================================================== */
/* Keep the desktop menu grouped with the Contact Us button after removing
   the duplicate Contact menu item. Mobile retains the theme's own layout. */
header #mainmenu > li > a,
header .menu_side_area .btn-main {
    letter-spacing: var(--body-font-letter-spacing);
    line-height: var(--body-font-line-height);
}

@media only screen and (min-width: 993px) {
    header .header-col-mid {
        margin-left: auto;
        margin-right: clamp(16px, 2vw, 32px);
    }
}

header.smaller a.btn-main {
    background: var(--white);
    color: var(--black);
}

header.smaller a.btn-main:hover {
    background: var(--white-light);
    color: var(--black);
}


/* =====================================================================
   Ghost section titles

   An oversized, very low-opacity word set behind each section heading —
   the same idea as the "gallery" watermark, applied site-wide. It sits
   under the real subtitle/heading and deliberately overlaps them, which
   is what gives the layout its editorial feel.
   ===================================================================== */
#about,
#rooms,
#island,
#testimonials,
#contact,
#faq {
    position: relative;
    /* clip, not hidden: the word runs wide but must not create a scrollbar
       or trap the carousels' overflow. */
    overflow-x: clip;
}

/* Real content must always sit above the ghost. */
#about>.container,
#rooms>.container,
#island>.container,
#contact>.container,
#faq>.container {
    position: relative;
    z-index: 1;
}

.ghost-title {
    position: absolute;
    top: 34px;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.ghost-title span {
    display: block;
    max-width: var(--container-max-width, 1240px);
    margin: 0 auto;
    padding: 0 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(52px, 8vw, 124px);
    line-height: .85;
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--black);
    opacity: .06;
    /* Fades out toward the baseline so the heading reads cleanly on top. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, .25) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, .25) 100%);
    will-change: transform;
}

.ghost-title--center span {
    text-align: center;
}

/* On the dark testimonial section and the two banners the word is light. */
.ghost-title--light span {
    color: #fff;
    opacity: .08;
}

/* Hosts that are already inset from the page edges (the banners) don't get the
   shared container width — centring a 1240px word inside a near-full-bleed box
   would push it well right of the copy it sits behind. Align it to the host's
   own padding instead. */
.ghost-title--inset span {
    max-width: none;
    margin: 0;
    padding: 0 70px;
}

/* Tracks .banner-split__text's own padding step at the same breakpoint. */
@media (max-width: 991px) {
    .ghost-title--inset span {
        padding: 0 28px;
    }
}

@media (max-width: 767px) {
    .ghost-title {
        top: 24px;
    }

    .ghost-title span {
        font-size: 46px;
    }
}

a.btn-main,
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited,
.btn-main,
input[type=button].btn-main,
a.btn-line,
#mainmenu li ul.mega a.btn-main {
    background: none !important;
    border: 1px solid white !important;
    color: white !important;
}

a.btn-main.btn-review,
a.btn-main.btn-review:active,
a.btn-main.btn-review:focus,
a.btn-main.btn-review:visited {
    margin-top: 28px;
    background: var(--white);
    color: var(--black);
}

#about .ghost-title {
    left: 370px;
}

a.btn-main.btn-review:hover {
    background: var(--white-light);
    color: var(--black);
}


/* =====================================================================
   Parallax banner (between Rooms and Amenities)
   ===================================================================== */
.banner-parallax {
    /* padding: 40px 0; */
    background: white;
}

/* Inset from the page edges rather than full-bleed. */
.banner-parallax .container {
    padding-left: 10px;
    padding-right: 10px;
}

@media (max-width: 767px) {
    .banner-parallax .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.banner-parallax-inner {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-radius: 12px; */
}

@media (max-width: 767px) {
    .banner-parallax-inner {
        min-height: 300px;
    }
}

.banner-parallax-content {
    padding: 60px 30px;
}

.banner-parallax-content h2 {
    color: #fff;
    margin-bottom: 0;
}

.banner-parallax-content .subtitle {
    color: rgba(255, 255, 255, .75);
}


/* ---------------------------------------------------------------------
   Banners that carry body copy or pillar cards, not just a headline.
   The --wide variant caps its own width, so the rows inside stay
   readable without a Bootstrap .container (which .banner-parallax
   .container would squeeze to a 10px gutter).
   --------------------------------------------------------------------- */
/* .banner-parallax-inner is a flex row, and jarallax only takes its <img> out
   of the flow once its JS runs. Until then the full-size image is a flex item
   competing for width and squeezing the text column to ~290px. Layout used to
   settle once jarallax kicked in, but SplitType measures line breaks on load —
   it would freeze them at the squeezed width and stack one word per line. Take
   the image out of flow up front so the column is full width from the start. */
.banner-parallax-inner .jarallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-parallax-content--wide {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 90px 30px;
}

@media (max-width: 767px) {
    .banner-parallax-content--wide {
        padding: 60px 24px;
    }
}

/* Narrower than the banner itself so the two columns sit as one tight block
   in the middle, rather than drifting out to the left and right edges. */
/* --- Line-by-line reveal ---------------------------------------------
   SplitType wraps each rendered line in a .line div. Clipping those lines
   turns the theme's slide-up into a mask reveal: the text rises out of
   nothing rather than sliding across the photo. The negative margin /
   padding pair gives descenders (g, y, p) room so the clip never shaves
   them off. */
.banner-reveal .line {
    overflow: hidden;
    padding-bottom: .18em;
    margin-bottom: -.18em;
}

/* Eyebrow gets its own settle: it fades up and its tracking tightens.
   Keyed to .animated (added by WOW.js on scroll-in) rather than firing on
   load, so it reveals with the lines below it instead of ahead of them. */
.banner-eyebrow.animated {
    animation: bannerEyebrow 1.1s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes bannerEyebrow {
    from {
        opacity: 0;
        letter-spacing: .5em;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        letter-spacing: normal;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner-eyebrow.animated {
        animation: none;
    }
}

/* --- Split banner: text left, image right ---------------------------
   Stays dark so the page keeps its light/dark section rhythm. The image
   column stretches to whatever height the text needs. */
.banner-split {
    position: relative;
    background: var(--black);
}

/* The ghost word is absolute at z-index 0; the columns are static, so without
   a stacking position of their own the word would paint over the copy. */
.banner-split>.row {
    position: relative;
    z-index: 1;
}

.banner-split__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 90px 70px;
}

.banner-split__text .subtitle {
    color: rgba(255, 255, 255, .75);
}

.banner-split__text h2 {
    color: #fff;
}

.banner-split__text p {
    color: rgba(255, 255, 255, .78);
}

.banner-split__body {
    margin: 28px 0 20px;
}

.banner-split__media {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 480px;
}

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

@media (max-width: 991px) {
    .banner-split__text {
        padding: 60px 28px;
    }

    .banner-split__media {
        min-height: 320px;
    }
}

/* Closing line — sits under the copy as the section's last word. */
.banner-closing {
    margin: 32px 0 0;
    font-size: 22px;
    line-height: 1.4;
    color: #fff;
}

@media (max-width: 767px) {
    .banner-closing {
        font-size: 19px;
    }
}

/* --- Journey rail + pillar cards on the parallax ---------------------
   The three steps are one arc through a stay, so they hang off a shared
   hairline: a dot per step sits on the rail, the rail draws across on
   scroll-in (site-custom.js), and each card is a stop along it rather
   than a card in a row.

   The layout is a fixed vertical chain and the numbers below depend on
   each other: the rail sits at RAIL_Y (7px) inside .banner-journey, the
   cards start at PAD (46px) because of the padding-top, and each dot is
   pulled back up onto the rail from its own card. Change one, retune the
   dot's `top`. Bootstrap's g-4 gutter cancels out — .row's -24px margin
   and the column's +24px padding leave the card top at exactly PAD. */
.banner-journey {
    position: relative;
    margin-top: 60px;
    padding-top: 46px;
}

.banner-journey__rail {
    position: absolute;
    top: 7px;
    /* Flush with the wrapper, which is also where the outer cards land: the
       row's -12px gutter margin and the column's +12px padding cancel. */
    left: 0;
    right: 0;
    height: 1px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .16);
}

.banner-journey__rail-line {
    display: block;
    width: 100%;
    height: 100%;
    /* Brightest in the middle, so the rail reads as lit rather than ruled. */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, .18) 0%,
            rgba(255, 255, 255, .75) 50%,
            rgba(255, 255, 255, .18) 100%);
    transform-origin: left center;
}

/* Stacked, there is no row left for a horizontal rail to span. */
@media (max-width: 767px) {
    .banner-journey {
        margin-top: 40px;
        padding-top: 0;
    }

    .banner-journey__rail,
    .banner-pillar__dot {
        display: none;
    }
}

/* jarallax sets `will-change: transform, opacity` on its image, which promotes
   it to its own compositing layer. backdrop-filter cannot sample a separately
   composited layer, so the pillars below would blur an empty backdrop and show
   no frost at all. Dropping the hint keeps the parallax transform working while
   letting the blur see the image. Scoped to this one banner so the other
   jarallax sections keep their layer promotion. */
.banner-parallax-inner--glass .jarallax-img {
    will-change: auto;
}

/* Dark tint over the blur: the tint carries the contrast for the white text,
   the blur softens the photo behind it. */
.banner-pillar {
    position: relative;
    /* Guarantees the stacking context the spotlight's z-index:-1 relies on.
       backdrop-filter would usually supply one, but not in the @supports
       fallback below. */
    isolation: isolate;
    padding: 32px 28px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(26, 26, 26, .42);
    -webkit-backdrop-filter: blur(30px) saturate(120%);
    backdrop-filter: blur(30px) saturate(120%);
    transition: transform .45s ease, background-color .45s ease, border-color .45s ease;
}

.banner-pillar:hover {
    transform: translateY(-6px);
    background: rgba(26, 26, 26, .58);
    border-color: rgba(255, 255, 255, .4);
}

/* Spotlight that tracks the pointer (--mx/--my come from site-custom.js).
   backdrop-filter makes .banner-pillar a stacking context, so a negative
   z-index lands this above the card's own tint but under its text — no
   positioning needed on the content itself. Without JS the vars fall back to
   a centred glow, which is a fine resting state. */
.banner-pillar:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
            rgba(255, 255, 255, .16),
            rgba(255, 255, 255, 0) 70%);
    transition: opacity .45s ease;
}

.banner-pillar:hover:after {
    opacity: 1;
}

.banner-pillar__dot {
    position: absolute;
    /* Pulled from the card back up onto the rail — see the chain on
       .banner-journey. Measured from the card's padding box, which the 1px
       border already pushes down by 1, so this is 44 rather than 43 to land
       the dot's centre on the rail's. */
    top: -44px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    transition: transform .45s ease, background-color .45s ease, box-shadow .45s ease;
}

/* The card lifts 6px on hover and the dot rides with it, so cancel that lift
   here: the dot stays welded to the rail while its card comes forward. */
.banner-pillar:hover .banner-pillar__dot {
    transform: translateY(6px) scale(1.15);
    background-color: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .14);
}

/* No backdrop-filter means no frost, so lean harder on the tint alone. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .banner-pillar {
        background: rgba(26, 26, 26, .72);
    }
}

@media (prefers-reduced-motion: reduce) {

    .banner-pillar,
    .banner-pillar__dot {
        transition: none;
    }

    .banner-pillar:hover {
        transform: none;
    }

    /* No lift to cancel, so the dot only brightens. */
    .banner-pillar:hover .banner-pillar__dot {
        transform: none;
    }
}

.banner-pillar__marker {
    display: block;
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .6);
    transition: color .45s ease;
}

.banner-pillar:hover .banner-pillar__marker {
    color: rgba(255, 255, 255, .9);
}

.banner-pillar h3 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #fff;
}

.banner-pillar p {
    margin-bottom: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
}


/* =====================================================================
   Amenity cards (The Island)

   Photo-led tiles: the image is the card, a black scrim carries the
   contrast, and the name is the only text on it.
   ===================================================================== */
.amenity-card {
    display: block;
    position: relative;
    overflow: hidden;
    /* A fixed ratio, so a row of cards lines up regardless of how each source
       photo is cropped. Landscape keeps the tiles low without cropping the
       photos any harder than a portrait frame would. */
    aspect-ratio: 4 / 3;
    background-color: var(--black);
    color: var(--white);
    isolation: isolate;
}

.amenity-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform 1s cubic-bezier(.2, .7, .3, 1);
}

/* Black from the baseline up, clearing high enough that the photo still reads
   as a photo. The flat tint on top holds the whole card together and deepens
   on hover. */
.amenity-card__scrim {
    position: absolute;
    inset: 0;
    /* Stops are proportional, so they track the 4:3 frame. They run deeper than
       a name alone would need because the body copy sits under it — the line
       has to stay legible over whatever the photo is doing at that height. */
    background:
        linear-gradient(0deg,
            rgba(15, 15, 15, .94) 0%,
            rgba(15, 15, 15, .72) 34%,
            rgba(15, 15, 15, .3) 62%,
            rgba(15, 15, 15, 0) 92%),
        rgba(15, 15, 15, .2);
    transition: background-color .5s ease, opacity .5s ease;
}

.amenity-card__body {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: 24px 24px 22px;
    z-index: 1;
}

.amenity-card__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    color: #fff;
    position: relative;
    padding-bottom: 12px;
}

/* One line on what's actually there. Sits under the name's hairline, so the
   rule reads as a divider between the two rather than an underline. */
.amenity-card__text {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    transition: color .4s ease;
}

/* Hairline under the name, drawn in on hover. */
.amenity-card__title:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: var(--white);
    transition: width .55s cubic-bezier(.4, 0, .2, 1);
}

.amenity-card:hover .amenity-card__img {
    transform: scale(1.07);
}

.amenity-card:hover .amenity-card__scrim {
    background-color: rgba(15, 15, 15, .34);
}

.amenity-card:hover .amenity-card__text {
    color: #fff;
}

.amenity-card:hover .amenity-card__title:after {
    width: 46px;
}

.amenity-card:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {

    .amenity-card__img,
    .amenity-card__scrim,
    .amenity-card__text,
    .amenity-card__title:after {
        transition: none;
    }

    .amenity-card:hover .amenity-card__img {
        transform: none;
    }
}


/* =====================================================================
   FAQ accordion — boxed cards
   ===================================================================== */
.accordion .accordion-section-title {
    padding: 20px 26px;
    margin-bottom: 12px;
    border: 1px solid var(--gray-light);
    /* border-radius: 10px; */
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    transition: border-color .25s ease, background .25s ease, border-radius .25s ease;
}

.accordion .accordion-section-title:hover {
    border-color: var(--black);
}

.accordion .accordion-section-title:before {
    color: var(--black);
    transition: transform .3s ease;
}

/* Open: the title squares off its bottom corners and joins the answer box. */
.accordion .accordion-section-title.active {
    margin-bottom: 0;
    border-color: var(--black);
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion .accordion-section-content {
    padding: 20px 26px 24px;
    margin-bottom: 12px;
    border: 1px solid var(--black);
    /* The divider the user asked for, between question and answer. */
    border-top: 1px solid var(--gray-light);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* border-radius: 0 0 10px 10px; */
    background: #fff;
    color: var(--gray-dark);
    font-size: 15px;
    line-height: 1.7;
}


/* =====================================================================
   Overlay (gallery lightbox)
   ===================================================================== */
/* html must be locked too: when <html> is the scrolling element, overflow on
   <body> alone does not stop the wheel from scrolling the page behind. */
html.has-overlay,
body.has-overlay {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}

.lightbox[hidden] {
    display: none;
}

.lightbox.is-open {
    opacity: 1;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, .72);
    backdrop-filter: blur(6px);
    cursor: pointer;
}


/* =====================================================================
   Contact section

   A dark editorial introduction gives the enquiry form the same visual
   weight as the split banners elsewhere on the page. The form remains a
   self-contained white panel so its custom controls stay clear and usable.
   ===================================================================== */
.contact-section {
    position: relative;
    background: var(--white-soft);
}

.contact-heading {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 52px;
    text-align: center;
}

.contact-heading .subtitle {
    margin-bottom: 14px;
}

.contact-heading .main-title {
    margin-bottom: 18px;
}

.contact-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--gray-dark);
    font-size: 16px;
    line-height: 1.7;
}

.contact-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(340px, .82fr) minmax(0, 1.48fr);
    align-items: stretch;
    border: 1px solid var(--black);
    background: #fff;
    box-shadow: 0 32px 90px rgba(26, 26, 26, .08);
}

.contact-media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--black);
}

.contact-media__picture,
.contact-media__image {
    display: block;
    width: 100%;
    height: 100%;
}

.contact-media__image {
    object-fit: cover;
    object-position: center;
    transform-origin: center;
}

.contact-form-panel {
    min-width: 0;
    padding: 42px 46px 44px;
    background: #fff;
}

.contact-form-panel__head {
    margin-bottom: 28px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--black);
    color: var(--black);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.contact-form-panel__head span:last-child {
    color: var(--gray-dark);
    font-weight: 400;
    letter-spacing: .08em;
}

.contact-form .form-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
}

/* GSAP leaves each revealed form row in its own stacking context. Lift the
   complete row while the guest list is open so later fields cannot paint over
   the dropdown. */
.contact-form .form-row.has-open-select {
    z-index: 200;
}

@media (max-width: 575px) {
    .contact-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .contact-form .form-row > .form-field {
        flex: 0 0 auto;
        width: 100%;
    }
}

.contact-form .form-field {
    /* Basis, not flex:1 — lets the four-up row wrap instead of crushing its
       fields on narrow viewports. */
    flex: 1 1 190px;
    margin-bottom: 12px;
    min-width: 0;
}

.contact-form .form-field--guests {
    flex: 1 1 180px;
}

.contact-form .form-field--dates {
    flex: 2 1 360px;
}

.contact-form .form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 8px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gray-light);
    background: #fff;
    color: var(--black);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--gray);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--black);
    background: #fff;
    box-shadow: inset 3px 0 0 var(--black);
}

.contact-form textarea {
    resize: vertical;
    min-height: 92px;
}

@media (max-width: 1199px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-media {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 767px) {
    .contact-heading {
        margin-bottom: 38px;
        padding: 0 10px;
    }

    .contact-heading .main-title {
        margin-bottom: 14px;
    }

    .contact-heading p {
        font-size: 15px;
        line-height: 1.6;
    }

    .contact-form-panel {
        padding: 40px 24px;
    }

    .contact-media {
        aspect-ratio: 4 / 3;
    }

    .contact-form-panel__head {
        margin-bottom: 30px;
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 399px) {
    .contact-form-panel {
        padding-right: 20px;
        padding-left: 20px;
    }
}

.contact-form input.is-invalid,
.contact-form select.is-invalid,
.contact-form textarea.is-invalid {
    border-color: var(--black);
    background: #fff;
}

/* --- Select --- */
.contact-form .cm-select {
    position: relative;
}

.contact-form .cm-select.is-open {
    z-index: 201;
}

.contact-form .cm-select.is-customized select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.cm-select__trigger {
    width: 100%;
    min-height: 47px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--gray-light);
    background: #fff;
    color: var(--gray);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.cm-select__trigger:hover,
.cm-select__trigger:focus-visible,
.cm-select__trigger[aria-expanded="true"],
.cm-select__trigger.is-invalid {
    outline: none;
    border-color: var(--black);
}

.cm-select__trigger.has-value {
    color: var(--black);
}

.cm-select__arrow {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.5px solid var(--black);
    border-bottom: 1.5px solid var(--black);
    transform: rotate(45deg);
    transition: transform .2s ease, margin .2s ease;
}

.cm-select__trigger[aria-expanded="true"] .cm-select__arrow {
    margin-top: 4px;
    transform: rotate(225deg);
}

.cm-select__menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 120;
    padding: 6px;
    border: 1px solid var(--black);
    border-top: 0;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.cm-select__menu[hidden] {
    display: none;
}

.cm-select__option {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: var(--black);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.cm-select__option:hover,
.cm-select__option:focus-visible {
    outline: none;
    background: rgba(26, 26, 26, .07);
}

.cm-select__option.is-selected,
.cm-select__option[aria-selected="true"] {
    background: var(--black);
    color: var(--white);
}

/* --- Date range calendar --- */
.date-range {
    position: relative;
}

.date-range__trigger {
    width: 100%;
    min-height: 47px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--gray-light);
    background: #fff;
    color: var(--gray);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
}

.date-range__trigger:hover,
.date-range__trigger:focus-visible,
.date-range__trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--black);
}

.date-range__trigger.has-value {
    color: var(--black);
}

.date-range__trigger.is-invalid {
    border-color: var(--black);
}

.date-range__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-range__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--gray-dark);
}

.date-range__popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    width: min(380px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--black);
    background: #fff;
    color: var(--black);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .16);
}

.date-range__popover[hidden] {
    display: none;
}

.date-range__popover.is-portal {
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    border-top: 0;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

.date-range__header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 auto 10px;
}

.date-range__month {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
}

.date-range__nav {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-light);
    background: #fff;
    color: var(--black);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.date-range__nav:hover:not(:disabled),
.date-range__nav:focus-visible {
    outline: none;
    border-color: var(--black);
    background: var(--black);
    color: var(--white);
}

.date-range__nav:disabled {
    opacity: .25;
    cursor: not-allowed;
}

.date-range__nav span {
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
}

.date-range__nav--prev span {
    transform: rotate(-135deg);
}

.date-range__nav--next span {
    transform: rotate(45deg);
}

.date-range__weekdays,
.date-range__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.date-range__weekdays {
    width: 100%;
    margin: 0 auto 2px;
    color: var(--gray-dark);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.date-range__weekdays span {
    padding: 3px 0;
}

.date-range__days {
    width: 100%;
    margin: 0 auto;
    gap: 1px 0;
}

.date-range__blank,
.date-range__day {
    height: 30px;
}

.date-range__day {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--black);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.date-range__day:hover:not(:disabled),
.date-range__day:focus-visible {
    z-index: 1;
    outline: 1px solid var(--black);
    outline-offset: -1px;
}

.date-range__day:disabled {
    color: rgba(26, 26, 26, .25);
    cursor: not-allowed;
}

.date-range__day.is-today:not(.is-selected):after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 3px;
    height: 3px;
    transform: translateX(-50%);
    background: currentColor;
    border-radius: 50%;
}

.date-range__day.is-in-range {
    background: rgba(26, 26, 26, .07);
}

.date-range__day.is-selected {
    background: var(--black);
    color: var(--white);
}

.date-range__footer {
    width: 100%;
    margin: 10px auto 0;
    padding-top: 10px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--gray-light);
}

.date-range__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 16px;
    color: var(--gray-dark);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.date-range__summary span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-range__summary strong {
    color: var(--black);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.date-range__clear {
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid var(--black);
    background: transparent;
    color: var(--black);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 575px) {
    .date-range__popover {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        padding: 14px;
    }
}

.contact-form .form-error {
    display: block;
    min-height: 12px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--gray-dark);
}

/* Netlify's honeypot stays available to unsophisticated bots without being
   visible or keyboard-reachable for guests. */
.netlify-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

button.btn-main {
    background: var(--primary-color);
    color: var(--btn-color);
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    padding: var(--btn-padding);
    text-transform: var(--btn-text-transform);
    border: none;
    position: relative;
    display: inline-block;
    text-align: center;
    outline: 0;
    cursor: pointer;
}

button.btn-main.fx-slide {
    overflow: hidden;
}

button.btn-main.fx-slide span {
    display: block;
    position: relative;
    transition: all .3s ease-in-out;
}

button.btn-main.fx-slide:before {
    content: attr(data-hover);
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translate(0, -100%);
    transition: all .3s ease-in-out;
}

button.btn-main.fx-slide:hover span {
    transform: translate(0, 40px);
    opacity: 0;
}

button.btn-main.fx-slide:hover:before {
    opacity: 1;
    transform: translate(0, 0);
}

/* Submit and its status message share a row, so a success note appears beside
   the button rather than shunting the footer down. */
.contact-form__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 4px;
}

.contact-form__submit {
    padding: 14px 42px;
}

.contact-form__submit:disabled {
    opacity: .6;
    cursor: wait;
}

.contact-form__submit:disabled:hover span {
    transform: none;
    opacity: 1;
}

.contact-form__submit:disabled:hover:before {
    opacity: 0;
}

.contact-form__status {
    margin: 0;
    font-size: 14px;
    color: var(--gray-dark);
}

.contact-form__status.is-success {
    color: var(--black);
    font-weight: 600;
}

.contact-form__status.is-error {
    color: #8b1e1e;
    font-weight: 600;
}


/* =====================================================================
   Netlify form confirmation page
   ===================================================================== */
.thank-you-page {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #fff;
    color: var(--black);
    font-family: 'Poppins', sans-serif;
}

.thank-you-hero {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: clamp(24px, 4vw, 52px);
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 12%, rgba(26, 26, 26, .035), transparent 28%),
        radial-gradient(circle at 88% 88%, rgba(26, 26, 26, .025), transparent 25%),
        #fff;
}

.thank-you-hero:before {
    content: "KYRELIA";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    color: rgba(26, 26, 26, .05);
    font-size: clamp(110px, 23vw, 360px);
    font-weight: 600;
    letter-spacing: -.08em;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.thank-you-logo {
    display: inline-block;
    margin-bottom: clamp(28px, 4vh, 40px);
}

.thank-you-logo img {
    width: clamp(210px, 19vw, 270px);
    height: auto;
    display: block;
    filter: brightness(0);
}

.thank-you-content {
    width: 100%;
    display: grid;
    place-items: center;
    text-align: center;
}

.thank-you-content__inner {
    width: min(760px, 100%);
}

.thank-you-title {
    max-width: 760px;
    margin: 0 auto clamp(16px, 2.8vh, 26px);
    color: var(--black);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(40px, min(5vw, 8vh), 72px);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.thank-you-lead {
    max-width: 650px;
    margin: 0 auto clamp(22px, 3.5vh, 34px);
    color: rgba(26, 26, 26, .66);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.65;
}

.thank-you-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.thank-you-back.btn-main,
.thank-you-back.btn-main:active,
.thank-you-back.btn-main:focus,
.thank-you-back.btn-main:visited {
    min-width: 245px;
    box-sizing: border-box;
    padding: 14px 42px;
    overflow: hidden;
    background: var(--black) !important;
    border: 1px solid var(--black) !important;
    color: var(--white) !important;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
}

.thank-you-back.btn-main:hover {
    background: var(--black-light) !important;
    border-color: var(--black-light) !important;
    color: var(--white) !important;
}

.thank-you-back.fx-slide span {
    display: block;
    position: relative;
    transition: all .3s ease-in-out;
}

.thank-you-back.fx-slide:before {
    content: attr(data-hover);
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(-100%);
    transition: all .3s ease-in-out;
}

.thank-you-back.fx-slide:hover span {
    opacity: 0;
    transform: translateY(40px);
}

.thank-you-back.fx-slide:hover:before {
    opacity: 1;
    transform: translateY(0);
}

.thank-you-email {
    margin: 0;
    color: rgba(26, 26, 26, .56);
    font-size: 13px;
    line-height: 1.6;
}

.thank-you-email a {
    margin-left: 3px;
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 26, 26, .4);
}

@media (max-width: 520px) {
    .thank-you-hero {
        padding: 92px 22px 72px;
    }

    .thank-you-logo img {
        width: 200px;
    }

    .thank-you-title {
        font-size: clamp(34px, 10vw, 43px);
    }

    .thank-you-back {
        width: min(270px, 100%);
    }

}

@media (max-height: 680px) {
    .thank-you-hero {
        padding-top: 76px;
        padding-bottom: 56px;
    }

    .thank-you-logo img {
        width: 180px;
    }

    .thank-you-title {
        font-size: clamp(32px, min(5vw, 7vh), 54px);
    }

    .thank-you-lead {
        line-height: 1.5;
    }

}


/* --- Lightbox --- */
.lightbox__backdrop {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .1), transparent 48%),
        rgba(10, 10, 10, .94);
    backdrop-filter: blur(14px) saturate(.75);
}

.lightbox__stage {
    position: relative;
    z-index: 1;
    margin: 0;
    width: min(1240px, calc(100vw - 160px));
    max-width: 100%;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transform: translateY(14px) scale(.98);
    transition: transform .45s cubic-bezier(.2, .75, .25, 1);
    pointer-events: none;
}

.lightbox.is-open .lightbox__stage {
    transform: translateY(0) scale(1);
}

@media (max-width: 767px) {
    .lightbox__stage {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 80px);
    }
}

.lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 225px);
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #111;
    box-shadow:
        0 36px 110px rgba(0, 0, 0, .65),
        0 0 0 10px rgba(255, 255, 255, .025);
    opacity: 1;
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.lightbox.is-loading .lightbox__img {
    opacity: .28;
    filter: blur(3px);
    transform: scale(.995);
}

.lightbox__caption {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    padding-top: 20px;
    color: var(--white);
    opacity: 1;
    transition: opacity .25s ease, transform .25s ease;
}

.lightbox.is-loading .lightbox__caption {
    opacity: .55;
    transform: translateY(4px);
}

.lightbox__details {
    min-width: 0;
    text-align: left;
}

.lightbox__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .52);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.lightbox__title {
    margin: 0;
    color: var(--white);
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1.08;
}

.lightbox__meta {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    line-height: 1.45;
}

.lightbox__counter {
    min-width: 66px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    letter-spacing: .12em;
    text-align: center;
}

.lightbox__close {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .06);
    color: var(--white);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .5);
    transform: rotate(4deg);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    /* border-radius: 50%; */
    background: rgba(255, 255, 255, .06);
    color: var(--white);
    line-height: 1;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
}

.lightbox__nav span {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.lightbox__nav--prev span {
    transform: rotate(-135deg);
}

.lightbox__nav--next span {
    transform: rotate(45deg);
}

.lightbox__nav:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
}

.lightbox__nav--prev {
    left: 28px;
}

.lightbox__nav--next {
    right: 28px;
}

/* A single-image gallery has nothing to page through. */
.lightbox.is-single .lightbox__nav,
.lightbox.is-single .lightbox__counter {
    display: none;
}

@media (max-width: 767px) {
    .lightbox__img {
        max-height: calc(100vh - 245px);
    }

    .lightbox__caption {
        gap: 12px;
        padding-top: 16px;
    }

    .lightbox__title {
        font-size: 22px;
    }

    .lightbox__meta {
        font-size: 12px;
    }

    .lightbox__close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
    }

    .lightbox__nav {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }

    .lightbox__nav--prev {
        left: 8px;
    }

    .lightbox__nav--next {
        right: 8px;
    }
}

/* The gallery images are clickable now, so signal it. */
.gallary-scroll-item a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.gallery-scroll-wrap .gallary-scroll-item img {
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.gallary-scroll-item:hover img {
    transform: scale(1.05);
}

/* Room cards share the gallery lightbox while retaining the Owl carousel. */
#projects-carousel a[data-lightbox-item] {
    cursor: pointer;
}

#projects-carousel a[data-lightbox-item]>img:first-child {
    transition: opacity .3s ease, transform .3s ease;
}

#projects-carousel a[data-lightbox-item]:hover>img:first-child {
    transform: rotate(5deg) scale(1.08);
}

#projects-carousel a[data-lightbox-item]:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -7px;
}

@media (prefers-reduced-motion: reduce) {

    .lightbox,
    .lightbox__stage,
    .lightbox__img,
    .lightbox__caption,
    #projects-carousel a[data-lightbox-item]>img:first-child {
        transition: none;
    }

    #projects-carousel a[data-lightbox-item]:hover>img:first-child {
        transform: none;
    }
}

footer a:hover {
    color: var(--white);
}

/* Give the enquiry a decisive final action while retaining the site's square,
   monochrome button language. */
.contact-form button.btn-main,
.contact-form button.btn-main:focus {
    background: var(--black) !important;
    color: var(--white) !important;
    border: 1px solid var(--primary-color) !important;
}

.contact-form button.btn-main:hover {
    background: var(--black-light) !important;
    color: var(--white) !important;
}

#testimonials .owl-item h2 {
    font-size: 30px !important;
}