@font-face {
    font-family: 'Roxborough CF';
    src: url('../fonts/RoxboroughCF-Thin.woff2') format('woff2'),
         url('../fonts/RoxboroughCF-Thin.woff') format('woff');
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Beautiful Delicious';
    src: url('../fonts/BeautifulDelicious-Thin.woff2') format('woff2'),
         url('../fonts/BeautifulDelicious-Thin.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

:root {
    --orange: #b7624a;
    --orange-dark: #B3552E;
    --dark-terracota: #1b080a;
    --cream: #f6ebe4;
    --sage: #678482;
    --ink: #1b080a;
    --muted: #5c6b68;
    --line: #e7ded3;
    --radius: 14px;
    --container: 1180px;
    --font-logo: 'Roxborough CF', Georgia, serif;    
    --font-title: 'Beautiful Delicious', 'Brush Script MT', cursive;
    --font-body: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body {
    margin: 0; font-weight:300; font-family: var(--font-body); color: var(--ink); line-height: 1.6; background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
}
h1, h2, h3 { font-weight: 50; line-height: 1.2; margin: 0 0 .6em; }
h2 { font-size: clamp(1.3rem, 3.5vw, 1.9rem); text-align: center; }
a { color: inherit; }
img { max-width: 100%; display: block; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }

.prose { max-width: 700px; margin: 0 auto; text-align: center; }
.prose--left { max-width: none; text-align: left; margin: 0; }
.prose--on-dark { color: #d8e2df; }
.prose p { margin: 0 0 1em; }
.page-header { text-align: center; padding: 3rem 1rem 0rem; font-family: var(--font-body); font-weight: 300; font-size: 1.1rem; color: var(--ink); }

.page-header h1 {
    font-family: var(--font-body);
    font-size: clamp(2.2rem, 6vw, 1.5rem);
    margin: 0 0 -0.5rem;
}

/* Section widths fill the browser edge-to-edge; .section__inner limits the
   readable content column. This is what makes backgrounds go full-bleed. */
.section { width: 100%; padding: 3.5rem 0; position: relative; }
.section__inner { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.section__inner--split { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
@media (min-width: 800px) { .section__inner--split { grid-template-columns: 1.1fr 1fr; } }
.section__feature-img { border-radius: var(--radius); width: 100%; height: 340px; object-fit: cover; }

.section--orange { background: var(--orange); color: #fff; }
.section--cream { background: var(--cream); color: var(--ink); }
.section--dark { background: var(--dark-terracota); color: #fff; }
.section--sage { background: var(--sage); color: #fff; overflow: hidden; }

.eyebrow-heading {
    text-align: center; font-family: var(--font-title); font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--orange);
    margin-bottom: 1.5rem;
}


/* Script-style headings ("the house", "contact us") */
.script-heading { text-align: center; margin-bottom: 2rem; }
.script-heading h2 { font-family: var(--font-logo); color: var(--orange); font-size: clamp(2.2rem, 6vw, 3.5rem); margin-bottom: -0.2em;}
.script-heading p { font-family: var(--font-logo); color: var(--orange); margin: 0; font-size: 1.2rem; }
.script-heading--compact { margin-bottom: 1.25rem; }
.script-heading--compact h2 { font-size: 3.5rem; }

/* --- Wave dividers: a fixed-height strip pulled up over the previous
   section, clipped into an irregular hand-drawn-looking curve. Tweak the
   clip-path points directly if you want a different curve shape. --- */
.wave { height: 60px; margin-top: -59px; }
.wave--into-cream {
    background: var(--cream);
    clip-path: polygon(0 55%, 8% 35%, 20% 50%, 34% 30%, 50% 52%, 66% 32%, 82% 50%, 92% 38%, 100% 45%, 100% 100%, 0 100%);
}
.wave--into-dark {
    background: var(--dark-terracota);
    clip-path: polygon(0 90%, 20% 55%, 40% 68%, 58% 35%, 78% 50%, 100% 25%, 100% 100%, 0 100%);
}
.wave--into-sage {
    background: var(--sage);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
}

/* --- Header / nav --- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    background: transparent; border-bottom: none;
    transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header__brand { font-family: var(--font-logo); font-weight: 400; font-size: 1.4rem; text-decoration: none; color: var(--orange); }

.site-header__home-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
    order: 3;
    transition: opacity .2s ease;
}
.site-header__home-icon svg { width: 22px; height: 22px; }
.site-header.is-dark .site-header__home-icon { color: #fff; }
.site-header.is-orange .site-header__home-icon { color: var(--cream); }

.nav-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; order: 2; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); transition: background-color .25s ease, transform .3s ease, opacity .3s ease; }

.site-nav a {text-decoration: none; font-size: .92rem; color: var(--ink); transition: color .25s ease;}

.site-header__cta {
    background: var(--orange); color: #fff !important; padding: .55rem 1.3rem;
    border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9rem; white-space: nowrap; order: 1;
}
.site-header.is-dark .nav-toggle span { background: #fff; }
.site-header.is-orange .site-header__cta { background: var(--ink); }
.site-header.is-orange .nav-toggle span { background: var(--cream); }

/* On every page except the homepage */
body:not(.has-hero) .site-header {
    background-image: linear-gradient(rgba(183, 98, 74, 0.85), rgba(183, 98, 74, 0.85)), url('../img/header-bg.jpg');
    background-size: cover;
    background-position: center;
}
/* Terms, Privacy, and Consumer Disputes */
body.legal-page .site-header {
    background-image: linear-gradient(rgba(39, 38, 37, 0.85), rgba(22, 22, 21, 0.85)), url('../img/header-bg.jpg');
}

body:not(.has-hero) .site-header .site-nav a {
    color: #fff;
}
body:not(.has-hero) .site-header .site-header__cta {
    background: var(--ink);
}
body.legal-page .site-header .site-header__cta {
    background: var(--orange);
}
body:not(.has-hero) .site-header .nav-toggle span {
    background: #fff;
}

/* ============================================================
   DESKTOP hiden mobile nav toggle and social icons
   ============================================================ */
.nav-close { display: none; }
.site-nav__socials { display: none; }
.site-nav__logo { display: none; }
.site-nav__book-btn { display: none; }

/* ============================================================
   MOBILE (below 880px)
   ============================================================ */
@media (max-width: 1069px) {
    .nav-toggle {
        width: 30px; height: 20px; justify-content: center; gap: 5px; z-index: 60;
    }

    .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
        display: flex; flex-direction: column; align-items: flex-end;
        position: fixed; top: 0; left: auto; right: -300px;
        width: 280px; height: 100vh; margin: 0;
        background: var(--orange); border-bottom: none;
        padding: 4rem 1.75rem 2rem; gap: 1.1rem;
        box-shadow: 0px 10px 20px rgba(0,0,0,.15);
        transition: right .4s ease;
        overflow-y: auto; z-index: 50;
    }
    .site-nav.is-open { right: 0; }
    .site-nav a {
        font-size: 1rem;
        color: var(--cream) !important;
    }
    .site-nav__logo { display: block; }
    .site-nav__logo h2 {
        margin-bottom: 0.1rem;
        font-size: 1.25rem;
        color:  #d59685 !important;
        font-family: var(--font-logo);
        text-align: right;
    }
    .site-nav__logo h3 {
        margin-top: -0.2rem;
        font-size: 0.875rem;
        color: #d59685 !important;
        font-family: var(--font-logo);
        text-align: right;
    }
    .ig-dm-btn.is-nav-open { display: none; }
    .site-header__home-icon { display: flex; }
    .site-header__home-icon.is-nav-open { opacity: 0; pointer-events: none; }

    .site-header {
        position: fixed; top:0; left: 0; right: 0; z-index: 20;
        background: transparent; border-bottom: none;
        transition: box-shadow .25s ease;
    }
    .site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }

    .site-header__cta {display: none}

    .site-nav a.site-nav__book-btn {
        display: block;
        text-align: right;
        background: var(--cream);
        color: var(--orange) !important;
        text-decoration: none;
        font-weight: 500;
        padding: 0.5rem 1.25rem;
        margin-top: auto;
        margin-bottom: 0rem;
        margin-left: -1.75rem;
        margin-right: -1.75rem;
        width: calc(100% + 3.5rem);
        box-shadow: 0 -4px 12px rgba(0,0,0,.15);
    }

    .nav-close { display: none; }
    
    .site-nav__socials {
        display: flex;
        gap: .9rem;
        margin-right: -.75rem;
        margin-top: .5rem;
        padding-top: 0rem;
    }
    .site-nav__social-icon {
        width: 36px; height: 36px; border-radius: 50%;
        background: var(--orange);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .site-nav__social-icon img {
        width: 18px; height: 18px;
        filter: brightness(0) invert(1);
    }
}

@media (min-width: 1070px) {
    .nav-toggle { display: none; }
    .site-nav {
        display: flex; position: absolute; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%);
        flex-direction: row; align-items: center; border: none; padding: 0; gap: 1.4rem; background: transparent;
    }
    .site-header__cta { order: 2; }
    .site-header.is-dark .site-nav a { color: #fff; }
    .site-header.is-dark .nav-toggle span { background: #fff; }
}

body { padding-top: 78px; }
body.has-hero { padding-top: 0; }

/* --- Hero --- */
.hero {
    position: relative; min-height: calc(100vh - (var(--floating-bar-height, 290px) / 2) - 6rem); overflow: visible; color: #fff;
    background-color: var(--orange);
    --hero-scale: 7.5rem;
}

.hero__bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    max-width: none;
    max-height: none;
}
.hero__bg.is-active { display: block; }

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--orange);
    opacity: .10;
}

.hero__content {
    position: relative;
    z-index: 2;

    min-height: calc(
        100vh
        - 98px
        - (var(--floating-bar-height, 290px) / 2)
        - 6rem
    );

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 0 0rem;

    transform: translateY(-1rem);
}

.hero__eyebrow {
    position: relative;
    font-family: var(--font-title);
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: calc(var(--hero-scale) * 0.1875);
    margin: 0 0 calc(var(--hero-scale) * -0.1875);
    align-self: center;
}

.hero__eyebrow::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    bottom: 0.4rem;
    left: -0.2rem;
    right: 0.2rem;
    background: transparent;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: -1;
}

.hero__logo {
    position: relative;
    font-family: var(--font-logo);
    color: var(--orange);
    font-size: var(--hero-scale);
    line-height: 1;
    margin: 0;
}

.hero__logo::before {
    content: "";
    position: absolute;

    top: 1.9rem;
    bottom: 0.4rem;
    left: 0.5rem;
    right: 0.5rem;

    background: transparent;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    z-index: -1;
}

.hero__tagline {
    position: relative;
    font-family: var(--font-logo);
    color: var(--ink);
    font-size: calc(var(--hero-scale) * 0.225);
    letter-spacing: .25em;
    margin: 0 0 0;
}

.hero__tagline::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    bottom: 0.3rem;
    left: -0.1rem;
    right: 0.2rem;
    background: transparent;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: -1;
}

@media (max-width: 490px) {
    .hero { --hero-scale: 4.5rem; }
}


/* --- Hero entrance --- */

@media (prefers-reduced-motion: no-preference) {
    .hero__eyebrow-inner, .hero__logo-inner, .hero__tagline-inner {
        display: inline-block;
        opacity: 0;
        animation: hero-rise-in .9s cubic-bezier(.22, .61, .36, 1) forwards;
    }
    .hero__eyebrow-inner { animation-delay: .05s; }
    .hero__logo-inner { animation-delay: .2s; }
    .hero__tagline-inner { animation-delay: .4s; }

    .hero__eyebrow::before,
    .hero__logo::before,
    .hero__tagline::before {
        opacity: 0;
        animation: hero-blur-reveal .7s ease forwards;
    }
    .hero__eyebrow::before { animation-delay: .95s; }
    .hero__logo::before { animation-delay: 1.1s; }
    .hero__tagline::before { animation-delay: 1.3s; }

    .floating-bar { opacity: 0; animation: hero-fade-in 1s ease .6s forwards; }

    @keyframes hero-rise-in {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes hero-blur-reveal {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* --- Floating booking bar --- */
.floating-bar {
    position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); z-index: 3;
    max-width: 1000px; width: calc(100% - 2.5rem);
    background: rgba(255,255,255,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: 999px; padding: 1.1rem 1.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.15);
    display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; justify-content: center;
}

.floating-bar__field { display: flex; flex-direction: column; font-size: .8rem; }
.floating-bar__field label { text-transform: lowercase; color: var(--muted); margin-bottom: .1rem; }
.floating-bar__field input { border: none; background: transparent; font-weight: 600; font-family: inherit; font-size: .9rem; padding: 0; color: var(--ink); width: 150px; }
.floating-bar__divider { width: 1.1px; height: 30px; background: var(--line); }
.floating-bar .button { margin-left: auto; padding: .6rem 1.5rem; }
@media (max-width: 1070px) {
    .floating-bar {
        border-radius: var(--radius);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .75rem 1rem;
        align-items: stretch;
        transform: translate(-50%, 50%);
    }
    .floating-bar__field { min-width: 0; }
    .floating-bar__field input { width: 100%; font-size: .85rem; }
    .floating-bar__field label { font-size: .75rem; }
    .floating-bar__divider { display: none; }
    .floating-bar .button {
        grid-column: 1 / -1;
        margin-left: 0;
        width: 100%;
    }
}

/* Extra-narrow phones: shrink text a bit further so both columns
   still fit comfortably without wrapping. */
@media (max-width: 360px) {
    .floating-bar__field label { font-size: .68rem; }
    .floating-bar__field input { font-size: .78rem; }
}

/* --- About section --- */
.about {
    width: 100%;
    padding: 3.5rem 0 6rem;
    background: var(--orange);
    color: var(--cream);
}
@media (max-width: 860px) {
    .about { padding-top: 8rem; }
}
.about__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.about__heading {
    text-align: center;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--cream);
    margin: 4rem 0 2.5rem;
    text-transform: uppercase;
}
.about__body--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: center;
}
@media (min-width: 800px) {
    .about__body--split { grid-template-columns: 70fr 30fr; }
}
.about__body--centered {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.about__text { text-align: left; font-size: 1.1rem}
.about__body--centered .about__text { text-align: center; }
.about__text p { margin: 0 0 1em; }
.about__image {
    border-radius: var(--radius);
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.about__read-more {
    display: none;
}

@media (max-width: 700px) {
    .about__text { font-size: 1rem; }
    .about__text-more {
        display: none;
    }
    .about__text-more.is-open {
        display: block;
    }
    .about__read-more {
        display: inline-block;
        background: none;
        border: none;
        color: var(--cream);
        text-decoration: underline;
        font-weight: 500;
        cursor: pointer;
        padding: 0;
        margin-top: .5rem;
        font-family: inherit;
        font-size: 1rem;
    }

    .about__image {
        height:260px;
        object-position: center 90%;
    }
}
/* --- Buttons --- */
.button { display: inline-block; padding: .75rem 1.6rem; border-radius: 999px; text-decoration: none; font-weight: 600; border: 2px solid transparent; cursor: pointer; font-size: .9rem; font-family: var(--font-body); }
.button--primary { background: var(--orange); color: #fff; }
.button--primary:hover { background: var(--orange-dark); }
.button--outline { background: transparent; border-color: var(--orange); color: var(--orange); display: inline-block; width: fit-content; margin: 0; }
/* --- Amenities (Light / Nature / Art / Connection) --- */
.amenities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; text-align: center; }
@media (min-width: 700px) { .amenities-grid { grid-template-columns: repeat(4, 1fr); } }

.amenity-item {
    text-align: center;
}

.amenity-item__icon-circle {
    width: 56px;
    height: 56px;
    margin: 0 auto .8rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--ink);
    border-radius: 50%;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.18),
        0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

.amenity-item:hover .amenity-item__icon-circle {
    transform: translateY(-5px);
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.14);
}

.amenity-item__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.amenity-item h3 { font-size: 1rem; margin-bottom: .3rem; }
.amenity-item p { font-size: 1rem; color: var(--muted); margin: 0; }


/* --- House section (image + thumbnails + details) --- */
.house-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .house-layout { grid-template-columns: 1.1fr 1fr; } }
.house-layout__main-image {
    width: 100%; height: 350px; object-fit: cover; border-radius: var(--radius);
    margin-bottom: .6rem; cursor: pointer;
}
.house-layout__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.house-layout__thumb { height: 70px; width: 100%; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .8; transition: opacity .15s; }
.house-layout__thumb:hover { opacity: 1; }
.house-layout__thumb.is-active {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.house-layout__gallery-btn { margin-top: 1.2rem; }
.house-layout__specs { font-size: 1rem; color: #cfe0dc; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); padding: .6rem 0; margin-bottom: 1rem; }
.house-layout__amenities { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; font-size: 1rem; margin: 1.25rem 0; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.25); }

.house-amenities__more {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-block;
    grid-column: 1 / -1;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-weight: inherit;
}

.house-amenities__more:hover { color: var(--orange); }

.amenities-modal__card {
    position: relative;
    background: #fff;
    color: var(--ink);
    border-radius: var(--radius);
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2.5rem 2rem 2rem;
}

.amenities-modal__card .lightbox-close {
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
}

.amenities-modal__card .lightbox-close::before,
.amenities-modal__card .lightbox-close::after {
    background: var(--ink);
    width: 20px;
}
.amenities-modal__card .lightbox-close:hover::before,
.amenities-modal__card .lightbox-close:hover::after {
    background: #c0392b;
}

.amenities-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
}
@media (min-width: 600px) {
    .amenities-modal__grid { grid-template-columns: repeat(3, 1fr); }
}
.amenities-modal__grid h4 {
    color: var(--orange);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 .5rem;
}
.amenities-modal__grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.7;
}

.house-layout__checkinout { display: flex; gap: 2rem; font-size: 1rem; margin-top: -0.5rem; }

.house-layout__main-wrap { position: relative; }

.house-layout__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.4); border: none; cursor: pointer;
    opacity: .8; transition: opacity .2s ease;
}
.house-layout__nav:hover { opacity: 1; }
.house-layout__nav--prev { left: 12px; }
.house-layout__nav--next { right: 12px; }

.house-layout__nav--prev::before,
.house-layout__nav--next::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 10px; height: 10px;
    border-top: 2px solid #fff; border-left: 2px solid #fff;
}
.house-layout__nav--prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.house-layout__nav--next::before { transform: translate(-70%, -50%) rotate(135deg); }

.house-layout__amenities,
.house-layout__checkinout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1.5rem;
}

.house-layout__amenities span {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.house-amenities__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.house-layout__checkinout > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.house-layout__checkinout img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.house-layout__checkinout strong {
    margin-bottom: 0rem;
}
/* --- Booking confirmation page: 3 columns (gallery / summary / host note) --- */
.success-strip {
    display: flex;
    gap: .6rem;
    margin-bottom: 1rem;
    margin-top: -1.9rem;
}
.success-strip img {
    flex: 1;
    min-width: 0;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius);
}
@media (max-width: 700px) {
    .success-strip { flex-wrap: wrap; }
    .success-strip img { flex: 1 1 45%; height: 90px; }
}

.success-page-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2.5rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "photos photos"
        "note details";
}
.success-strip { grid-area: photos; }
.success-layout__note { grid-area: note; }
.quote-box { grid-area: details; }

@media (max-width: 699px) {
    .success-page-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "details"
            "photos"
            "note";
    }
    .success-page-layout .quote-box {
        text-align: center;
        padding-bottom: 2.5rem;
    }
}

@media (max-width: 699px) {
    body.book-success-page .section {
        padding-top: 0rem;
    }
}

.success-layout__note {
    position: relative;
    background: var(--cream);
    border-radius: var(--radius);
    padding: 1.5rem;
    overflow: hidden;
}
/* The host photo sits behind the text as a soft circular accent in the
   top-right corner, rather than a full banner image above the message. */
.success-layout__note-photo {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 0;
    opacity: .85;
}
.success-layout__note-text {
    position: relative;
    z-index: 1;
}

.success-layout__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Extra breathing room above the title, only on the booking confirmation page. */
body.book-success-page .page-header {
    padding-top: 5rem;
}

/* Only on the payment-cancelled page: more room under the title,
   pulled tight above the buttons. */
body.book-cancelled-page .page-header h1 {
    margin-bottom: 1.5rem;
}
body.book-cancelled-page .page-header p {
    margin-bottom: -0.5rem;
}

/* --- Experiences section: fully self-contained, mirrors .hero/.about -
   own classes only, nothing shared with other sections. --- */
.experiences {
    width: 100%;
    padding: 3.5rem 0;
    background: var(--cream);
    color: var(--ink);
}
.experiences__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.experiences__heading {
    text-align: center;
    font-family: var(--font-title);
    font-weight: 500;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--ink);
    margin: 0 0 1.5rem;
    text-transform: uppercase;

}
.experiences__text {
    max-width: var(--container);
    margin: 0 auto;
    text-align: center;
}
.experiences__text p { margin: 0 0 1em; }

.exp-filter-bar {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
    margin: 2rem 0 1.5rem;
}
.exp-filter-bar__btn {
    background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: .4rem 1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    cursor: pointer; color: var(--ink); font-family: inherit;
}
.exp-filter-bar__btn.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }

.exp-carousel { display: flex; align-items: center; gap: 1rem; }
.exp-carousel__track { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) {
    .exp-carousel__track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .exp-carousel__track { grid-template-columns: 1fr; }
}
.exp-carousel__nav {
    background: var(--orange); color: #fff; border: none; border-radius: 50%;
    width: 40px; height: 40px; font-size: 1.4rem; cursor: pointer; flex-shrink: 0;
}
.exp-carousel__nav:disabled { opacity: .3; cursor: default; }

.exp-card { text-align: center;}

.exp-card__flip { perspective: 1200px; -webkit-perspective: 1200px; cursor: pointer; position: relative; }
.exp-card__flip-inner {
    position: relative;
    height: 320px;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.exp-card__flip.is-flipped .exp-card__flip-inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }

.exp-card__face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 999px 999px 75px 75px;
}

/* Some browsers (Safari on iPhone, Chrome with some graphics cards) don't
   hide the front's white-filtered icon when the card turns: it showed through
   on the back, mirrored and black. So each face is also hidden outright once
   it has turned away. The switch happens at the exact moment the card is
   edge-on (90deg): with this easing curve that's .12s into the .6s flip (not
   halfway - the turn starts fast and slows down), in both directions. Any
   later and the card would briefly vanish; any earlier and it would pop. */
.exp-card__face--front { transition: visibility 0s linear .12s; }
.exp-card__flip.is-flipped .exp-card__face--front { visibility: hidden; }
.exp-card__face--back { visibility: hidden; transition: visibility 0s linear .12s; }
.exp-card__flip.is-flipped .exp-card__face--back { visibility: visible; }

.exp-card__back-overlay {
    position: absolute;
    inset: 0;
    background: var(--ink);
    opacity: .8;
    border-radius: inherit;
}
.exp-card__face--back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.exp-card__back-text {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
    width: 68%;
    margin: 1.5rem auto 0;
    padding: 1rem 0;
    max-height: 85%;
    overflow-y: auto;
}

.exp-card__tags { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--orange); margin: .75rem 0 .3rem; }
.exp-card__title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 400; margin-top: -0.25rem; }

.exp-card__front-overlay {
    position: absolute;
    inset: 0;
    background: var(--ink);
    opacity: .70;
    border-radius: inherit;
}
/* The icon sits ON TOP of the card, outside the part that turns (Safari
   draws images inside a 3D-rotating element wrongly), and simply fades out
   as the card turns / back in when the front comes round again.
   It's painted white THROUGH the icon file used as a mask (the file's own
   shape, same resolution) instead of with filter: brightness(0) invert(1) -
   Safari drew the first frame of a fading-in filtered image unfiltered, so
   the icon flashed black for an instant. */
.exp-card__front-icon {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 85px;
    height: 85px;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity .15s ease .14s, transform .35s cubic-bezier(.22, .61, .36, 1), filter .35s ease;
}
.exp-card__front-icon-shape {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.exp-card__flip.is-flipped .exp-card__front-icon { opacity: 0; transition: opacity .1s ease 0s; }

/* Lift + shadow on mouse hover only (not on phones, where a tap flips the card). */
@media (hover: hover) {
    .exp-card__flip:not(.is-flipped):hover .exp-card__front-icon {
        transform: translate(-50%, -50%) translateY(-5px);
        filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
    }
}

.spot-card { perspective: 1000px; -webkit-perspective: 1000px; height: 220px; margin-bottom: 1rem; cursor: pointer; }
.spot-card__inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.spot-card.is-flipped .spot-card__inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }

.spot-card__front, .spot-card__back {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius);
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.spot-card__front {
    background: var(--cream); color: var(--ink);
    align-items: center; justify-content: center; text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.spot-card__front h4 { font-family: var(--font-title); font-size: 1.1rem; color: var(--orange); margin: 0 0 .4rem; }
.spot-card__hint { font-size: .75rem; color: var(--muted); text-decoration: underline; }

.spot-card__back {
    background: var(--orange); color: #fff;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    justify-content: flex-start; text-align: left;
}
/* Same safeguard as the experience cards above. */
.spot-card__front, .spot-card__back { transition: visibility 0s linear .12s; }
.spot-card.is-flipped .spot-card__front { visibility: hidden; }
.spot-card__back { visibility: hidden; }
.spot-card.is-flipped .spot-card__back { visibility: visible; }
.spot-card__back h4 { font-size: 1rem; margin: 0 0 .5rem; }
.spot-card__back p { font-size: .85rem; line-height: 1.5; margin: 0; }

.experiences-spots__note {
    text-align: center; font-size: .8rem; font-style: italic;
    color: var(--muted); margin-top: 1rem;
}
.experiences__image {
    border-radius: var(--radius);
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* --- Image grids (Experiences, generic) --- */
.image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: -0.5rem; }
.image-grid--full { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.image-grid img { border-radius: var(--radius); width: 100%; height: 200px; object-fit: cover; }
@media (min-width: 700px) { .image-grid:not(.image-grid--full) { grid-template-columns: repeat(3, 1fr); } }

/* --- Cards (kept for /gallery, /book if reused) --- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem;}
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; }
.card img { height: 180px; width: 100%; object-fit: cover; }
.card__body { padding: 1rem; }
.card__meta { font-size: .8rem; color: var(--muted); }

/* --- Testimonials masonry with giant background words --- */
.giant-word {
    position: absolute; left: 0; right: 0; text-align: right;
    font-family: var(--font-logo); font-size: 10rem; color: rgba(0, 0, 0, 0.05);
    white-space: nowrap; pointer-events: none; z-index: 0; line-height: 1;
}
.giant-word--top { top: -3.8rem; text-align: right; }
.giant-word--bottom { bottom: -0.3rem; text-align: left;}

@media (max-width: 900px) {
    .giant-word { font-size: 8rem; }
    .giant-word--top { top: -2.8rem; text-align: right; }
    .giant-word--bottom { bottom: -0.3rem; text-align: left;}
}

@media (max-width: 582px) {
    .giant-word--top { font-size: 22vw; }
    .giant-word--bottom { font-size: 22vw; }
    .giant-word--top { top: -2.2rem; text-align: right; }
    .giant-word--bottom { bottom: -0.3rem; text-align: left;}
}

.testimonial-masonry { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0; }
@media (min-width: 900px) { .testimonial-masonry { grid-template-columns: repeat(3, 1fr); } }
.testimonial { margin: 0; text-align: center; font-size: .95rem; }
@media (min-width: 900px) {
    .testimonial--offset-1 { margin-top: 3rem; }
    .testimonial--offset-2 { margin-top: 6rem; }
}
.testimonial footer { margin-top: .8rem; font-size: .85rem; opacity: .85; }

.testimonial-carousel__nav { display: none; }

@media (max-width: 582px) {
    .testimonial-masonry {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 320px;
        position: relative;
    }
    .testimonial { display: none; margin: 0 !important; padding: 0 3.75rem; }
    .testimonial.is-active { display: block; }

    .testimonial-carousel__nav {
        display: contents;
    }
    .testimonial-carousel__nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,.15);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
        cursor: pointer;
        z-index: 1;
    }
    .testimonial-carousel__nav button:first-child { left: 1.25rem; }
    .testimonial-carousel__nav button:last-child { right: 1.25rem; }
}

/* --- Contact section: full-bleed photo with a glass card --- */
.section--photo { background-size: cover; background-position: center; padding: 4rem 1.25rem; display: flex; justify-content: center; }
.contact-glass {
    max-width: 620px; width: 100%; background: rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 24px; padding: 2.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.15);
}
.glass-form { display: flex; flex-direction: column; gap: .35rem; }
.glass-form label { font-size: .8rem; font-weight: 600; color: var(--orange); text-transform: lowercase; margin-top: .6rem; }
.glass-form input, .glass-form textarea {
    padding: .7rem 1rem; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-family: inherit;
    background: rgba(255,255,255,.6);
}
.glass-form textarea { border-radius: 18px; resize: vertical; }
.glass-form button { margin-top: 1rem; align-self: center; }

@media (max-width: 490px) {
    .section--photo {
        padding: 2rem 0.75rem;
    }
    .contact-glass {
        padding: 1.5rem;
    }
}

/* --- Scroll reveal --- */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
        transition-delay: var(--reveal-delay, 0s);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* --- Footer --- */
.site-footer { background: var(--orange); color: #fff; position: relative; overflow: hidden; padding: 3rem 0 1rem; }
.site-footer__watermark {
    position: absolute; bottom: -.3em; left: 0; font-family: var(--font-logo); font-size: clamp(3rem, 12vw, 8rem);
    color: rgba(255,255,255,.12); white-space: nowrap; line-height: 1; z-index: 0;
}
.site-footer__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 1.3fr; } }
.site-footer__col h4 { margin: 0 0 .8rem; }
.site-footer__col a { display: block; text-decoration: none; color: #fff; opacity: .9; margin-bottom: .5rem; font-size: .9rem; }
.site-footer__col a.site-footer__contact-link { display: inline-flex; }

.site-footer__contact-line { margin: 0 0 .4rem; font-size: .9rem; }
.site-footer__address { font-size: .9rem; margin: 1rem 0 .5rem; }
.site-footer__legal-id { font-size: .8rem; opacity: .8; }
.site-footer__rights { position: relative; z-index: 1; text-align: right; max-width: var(--container); margin: 0.2rem auto 0; padding: 0 1.25rem; font-size: .8rem; opacity: .85; }
.site-footer__contact-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
    transition: opacity .2s ease;
}
.site-footer__contact-link:hover { opacity: .75; text-decoration: underline; }
.site-footer__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    /* Forces a plain-black/dark SVG or PNG icon to render white, so it
       matches the footer's white text regardless of the icon's original
       colour. Skip this line if you upload icons that are already white. */
    filter: brightness(0) invert(1);
}


/* --- Book page: form + gallery/pricing two-column layout --- */
.book-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: -3rem; }
@media (min-width: 900px) {
    .book-layout { grid-template-columns: 1.2fr 1fr; }   /* was: 1fr 1.1fr */
}
.book-layout__form-col { display: flex; flex-direction: column; }
.book-layout__form-col .booking-form { max-width: none; margin: 0; width: 100%; flex: 1; }

/* NEW - a bit more breathing room on the sides than the site default, so the
   two-column form doesn't feel cramped up against the edges. */
.book-layout-wrap { padding: 0 1.5rem; }

.book-pricing {
    margin-top: 1.5rem;
    background: var(--cream);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
.book-pricing h3 { margin: 0 0 .75rem; text-align: left; }
.book-pricing__row {
    display: flex; justify-content: space-between;
    padding: .5rem 0; border-bottom: 1px solid var(--line);
    font-size: .9rem;
}
.book-pricing__row:last-child { border-bottom: none; }

/* --- Forms shared by /book and /contact (if used outside the glass card) --- */
.booking-form, .contact-form {
    display: flex; flex-direction: column; gap: .6rem; max-width: 600px; margin: 0 auto;
    background: var(--cream); padding: 1.5rem; border-radius: var(--radius);
}
.booking-form label, .contact-form label { font-size: .85rem; font-weight: 600; }
.booking-form input, .booking-form select, .booking-form textarea, .contact-form input, .contact-form textarea {
    padding: .6rem; border: 1px solid var(--line); border-radius: 8px; font-family: inherit;
}
/* On the Book page, the form splits into two side-by-side columns once
   there's room: a narrower one for dates/party size, a slightly wider one
   for contact details + comments. Both stack into one column on narrow
   screens. The submit button (.booking-form__submit) sits below, spanning
   the full width of both. */
.booking-form__columns { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 620px) {
    .booking-form__columns { flex-direction: row; align-items: flex-start; gap: 1.75rem; }
}
.booking-form__col { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
@media (min-width: 620px) {
    .booking-form__col--dates { flex: 0.85 1 0; }
    .booking-form__col--details { flex: 1.15 1 0; }
}
.booking-form__submit { margin-top: .5rem; }
.alert { padding: .8rem 1rem; border-radius: 8px; max-width: 600px; margin: 0 auto 1rem; text-align: center; }
.alert--success { background: #e6f4ea; color: #2e7d32; }
.alert--error { background: #fdecea; color: #b3261e; }
.quote-box { background: #fff; border-radius: 8px; padding: 1rem; font-size: .9rem; color: var(--ink); }
.quote-box p { margin: .2rem 0; }
.quote-box__error { color: #b3261e; }

.prose .alert {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- "Available on request" info box (extra bed / crib) on the Book page --- */
.booking-extras-note p,
.booking-extras-note li {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 350;
    line-height: 1.5;
}
.booking-extras-note p { margin: 0 0 .3rem; }
.booking-extras-note ul { margin: 0; padding-left: 1.2rem; }
.booking-extras-note li { margin-bottom: .2rem; }

/* --- Gallery --- */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;
}

.lightbox.is-open {
    display: flex;
}

.lightbox img {
    display: block;

    max-width: 92vw;
    max-height: 92vh;

    width: auto;
    height: auto;

    object-fit: contain;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

/* Controls */

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;

    background: none;
    border: none;

    cursor: pointer;
    padding: 0;

    font-size: 0;
    opacity: 0.8;

    transition: opacity .25s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: 1;
}

/* Close */

.lightbox-close {
    top: 30px;
    right: 35px;

    width: 28px;
    height: 28px;
}

.lightbox-close::before,
.lightbox-close::after {
    content: "";
    position: absolute;

    top: 50%;
    left: 50%;

    width: 26px;
    height: 1px;

    background: #fff;
}

.lightbox-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Previous */

.lightbox-prev {
    left: 40px;
    top: 50%;

    width: 24px;
    height: 24px;

    transform: translateY(-50%);
}

.lightbox-prev::before {
    content: "";

    position: absolute;
    inset: 0;

    border-top: 1px solid #fff;
    border-left: 1px solid #fff;

    transform: rotate(-45deg);
}

/* Next */

.lightbox-next {
    right: 40px;
    top: 50%;

    width: 24px;
    height: 24px;

    transform: translateY(-50%);
}

.lightbox-next::before {
    content: "";

    position: absolute;
    inset: 0;

    border-top: 1px solid #fff;
    border-right: 1px solid #fff;

    transform: rotate(45deg);
}

/* Instagram button pop up */

.ig-dm-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0rem;
    height: 52px;
    padding: 1rem 1rem;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(27, 8, 10, .28);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: background-color .3s ease, color .3s ease, box-shadow .25s ease, transform .3s ease, opacity .3s ease;
}
.ig-dm-btn.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ig-dm-btn svg { width: 24px; height: 24px; flex: 0 0 24px; color: inherit; }
.ig-dm-btn__label {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .01em;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .3s ease, opacity .2s ease;
}
.ig-dm-btn:hover,
.ig-dm-btn:focus-visible,
.ig-dm-btn.is-expanded {
    box-shadow: 0 8px 24px rgba(27, 8, 10, .34);
    transform: translateY(-2px);
    gap: .55rem;
}
.ig-dm-btn:hover .ig-dm-btn__label,
.ig-dm-btn:focus-visible .ig-dm-btn__label,
.ig-dm-btn.is-expanded .ig-dm-btn__label {
    max-width: 100px;
    opacity: 1;
}

/* Over dark sections (hero, "the house", testimonials, contact photo band) */
.ig-dm-btn.is-on-dark {
    background: var(--cream);
    color: var(--orange);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* Over the orange "about us" band specifically */
.ig-dm-btn.is-on-orange {
    background: var(--dark-terracota);
    color: var(--cream);
}

/* Hidden on the booking form page - keeps the form as the sole focus. */
body.book-page .ig-dm-btn {
    display: none;
}

.prose--left h2 { text-align: left; font-family: var(--font-body); font-weight: 500; font-size: 1.15rem; color: var(--orange); margin-top: 1.75rem; }
.prose--left ul { margin: 0 0 1em; padding-left: 1.25rem; }
.prose--left li { margin-bottom: .4em; }

.legal-content { max-width: var(--container); margin: -1rem auto 3rem; text-align: left; }
.legal-content a { color: var(--orange); text-decoration: underline; }
.legal-content a:hover { color: var(--orange-dark); }

/* --- FAQ accordion (native <details>/<summary>, no JS needed) --- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}
.faq-item__question {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
    content: "+";
    font-size: 1.4rem;
    color: var(--orange);
    transition: transform .2s ease;
    margin-left: 1rem;
}
.faq-item[open] .faq-item__question::after {
    transform: rotate(45deg);
}
.faq-item__answer {
    margin-top: .75rem;
    color: var(--muted);
    line-height: 1.6;
}

/* Tighter spacing under the subtitle, only on the FAQs page. */
body.faqs-page .page-header {
    padding-bottom: 0;
}
body.faqs-page .page-header p {
    margin-bottom: 0;
}
body.faqs-page .section {
    padding-top: 2rem;
}


/* --- Online Check-in (public page) - reuses .contact-form/.page-header,
   just needs a small style for the list of travelers already added --- */
.checkin-guest-list { max-width: 600px; margin: 0 auto 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.checkin-guest-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    background: var(--cream); border-radius: 8px; padding: .9rem 1rem;
}
.checkin-guest-card__tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--orange); font-weight: 700; }
.checkin-guest-card__meta { font-size: .82rem; color: var(--ink); opacity: .75; }
.checkin-guest-card__remove { background: none; border: none; color: #b3261e; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 .2rem; }

.checkin-add-traveler {
    text-align: center;
    margin-top: 1.5rem;
}
.checkin-add-traveler summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
}
.checkin-add-traveler summary::-webkit-details-marker {
    display: none;
}

/* --- Online check-in: "Send Form" final action ----------------------------- */
.checkin-send-form {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,.08);
}
.checkin-send-form__hint {
    font-size: .8rem;
    color: var(--ink-soft, #6b5f55);
    margin-top: .5rem;
}
.checkin-guest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
/* ============================================================
   Language switcher (EN | PT) - desktop: right side of the header bar;
   mobile: inside the slide-out menu, above the social icons.
   ============================================================ */
.lang-switch { display: flex; align-items: center; gap: .4rem; font-size: .85rem; letter-spacing: .04em; }
.lang-switch a { text-decoration: none; color: inherit; opacity: .7; transition: opacity .2s ease; }
.lang-switch a:hover, .lang-switch a.is-active { opacity: 1; }
.lang-switch a.is-active { font-weight: 600; }
.lang-switch__sep { opacity: .5; }

.lang-switch--header { order: 3; color: var(--ink); }
.site-header.is-dark .lang-switch--header { color: #fff; }
.site-header.is-orange .lang-switch--header { color: var(--cream); }
body:not(.has-hero) .site-header .lang-switch--header { color: #fff; }
.lang-switch--menu { display: none; }

@media (max-width: 1069px) {
    .lang-switch--header { display: none; }
    .lang-switch--menu { display: flex; color: var(--cream); margin-top: .5rem; }
    .site-nav .lang-switch--menu a { font-size: .95rem; }
}


/* Touch screens: form fields at 16px. iPhones zoom the whole page in when you
   tap a field whose text is smaller than 16px (and it stays zoomed). */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .floating-bar__field input,
    .glass-form input, .glass-form textarea,
    .booking-form input, .booking-form select, .booking-form textarea,
    .contact-form input, .contact-form textarea { font-size: 16px; }

    /* The booking bar's fields keep the size they had before: they're 16px
       (so no zoom) but drawn smaller with scale(), with the width widened to
       match so nothing gets cut ("Escolher data" on small phones). */
    .floating-bar__field input { transform-origin: left center; transform: scale(.9); width: calc(150px / .9); }
}
@media (hover: none) and (pointer: coarse) and (max-width: 1070px) {
    .floating-bar__field input { transform: scale(.85); width: calc(100% / .85); }
}
@media (hover: none) and (pointer: coarse) and (max-width: 360px) {
    .floating-bar__field input { transform: scale(.78); width: calc(100% / .78); }
}