:root {
    --brown-900: #2c1c13;
    --brown-800: #3a261c;
    --brown-700: #55392a;
    --tan-500: #b98354;
    --cream-100: #f8f2e9;
    --cream-200: #f1e6d5;
    --ink: #382b22;
    --ink-soft: #6b5d51;
    --header-h: 100px;
    --nav-link-color: var(--ink);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: #fff;
}

.display-heading,
.section-heading,
.room-card-title,
.package-title,
.service-title,
.house-rule-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--brown-900);
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--brown-800);
    color: #eee2d3;
}
.topbar-link {
    color: #eee2d3;
    text-decoration: none;
}
.topbar-link:hover {
    color: #fff;
}

/* ---------- Header / nav ---------- */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eee2d3;
    z-index: 1030;
}
.brand-logo {
    max-height: 60px;
}
.navbar-nav .nav-link {
    color: var(--nav-link-color);
    font-weight: 500;
    padding: 0.5rem 0.9rem !important;
    transition: color 0.2s ease;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--tan-500);
}

.btn-cta {
    background: var(--brown-800);
    border: 1px solid var(--brown-800);
    color: #fff !important;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    transition: background 0.15s ease;
}
.btn-cta:hover {
    background: var(--brown-900);
    color: #fff;
}
.btn-cta-outline {
    background: transparent;
    border: 1px solid var(--brown-800);
    color: var(--brown-800) !important;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-cta-outline:hover {
    background: var(--brown-800);
    color: #fff !important;
}

/* ---------- Transparent header over hero sections ---------- */
.site-header.header-overlay {
    background: transparent;
    border-bottom-color: transparent;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* While the header is still transparent (floating over the hero), nav
   links default to white instead of the site's usual ink color; once
   scrolled past the hero the header goes solid again and links revert.
   Scoped to .nav-light (set only on the homepage) — other hero pages use
   a plain light-colored page-hero band, where white text would be just
   as unreadable as it is once the header goes solid, so they keep the
   normal ink color throughout. */
.site-header.header-overlay.nav-light:not(.is-scrolled) {
    --nav-link-color: #fff;
}
.site-header.header-overlay.is-scrolled {
    background: #fff;
    border-bottom: 1px solid var(--cream-200);
    box-shadow: 0 2px 14px rgba(44, 28, 19, 0.08);
}
/* Pull the hero section up underneath the transparent header so the hero
   background shows through the header's height, while the topbar above it
   stays solid and in normal flow. */
.site-header.header-overlay ~ .hero {
    margin-top: calc(-1 * var(--header-h));
}
.site-header.header-overlay ~ .page-hero {
    margin-top: calc(-1 * var(--header-h));
    padding-top: calc(4rem + var(--header-h));
}
/* Give the open mobile menu a solid backing so links stay readable over the hero photo/gradient.
   Force nav links back to the normal ink color here, since white text on this white panel
   would be unreadable even while the header itself is still in its transparent state. */
.site-header.header-overlay .navbar-collapse.show {
    --nav-link-color: var(--ink);
    background: #fff;
    margin: 0.75rem -0.5rem 0;
    padding: 1rem 0.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(44, 28, 19, 0.12);
}

/* ---------- Eyebrow / section headings ---------- */
.eyebrow {
    display: inline-block;
    background: var(--cream-200);
    color: var(--brown-700);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}
.section-heading {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    margin-bottom: 0.75rem;
}
.section-subtext {
    max-width: 560px;
}
.section-pad {
    padding: 4.5rem 0;
}
.bg-warm {
    background: var(--cream-100);
}
@media (max-width: 767.98px) {
    .section-pad {
        padding: 2.75rem 0;
    }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 700px;
    padding: 6.5rem 0 5.5rem;
    background: linear-gradient(150deg, var(--cream-100) 0%, var(--cream-200) 60%, #e9d9bd 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero--image {
    background-color: var(--brown-900);
}
.hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(44, 28, 19, 0.3) 0%, rgba(44, 28, 19, 0.68) 100%);
}
.hero--image .container {
    position: relative;
    z-index: 1;
}
.hero--image .eyebrow {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.hero--image .display-heading {
    color: #fff;
}
.hero--image .hero-lead {
    color: rgba(255, 255, 255, 0.88);
}
.hero--image .btn-cta-outline {
    border-color: #fff;
    color: #fff !important;
}
.hero--image .btn-cta-outline:hover {
    background: #fff;
    color: var(--brown-900) !important;
}
.hero-inner {
    max-width: 720px;
}
@media (max-width: 767px) {
    .hero {
        min-height: 560px;
    }
}
.display-heading {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.1;
}
.hero-lead {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 560px;
}

.page-hero {
    background: var(--cream-100);
    padding: 4rem 0 3rem;
}
.page-hero .hero-lead {
    margin: 0 auto;
    max-width: 620px;
}

/* ---------- Placeholder photo ---------- */
.ph-photo {
    background: linear-gradient(135deg, var(--cream-200), #e2cfa8);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tan-500);
    font-size: 2rem;
    width: 100%;
    aspect-ratio: 4 / 3;
}
.story-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
}

/* ---------- Room cards ---------- */
.room-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(44, 28, 19, 0.07);
    display: flex;
    flex-direction: column;
}
.room-card-photo,
.room-card .ph-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}
.room-card-body {
    padding: 1.4rem;
}
.room-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}
.room-card-meta {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.room-card-price {
    font-weight: 600;
    color: var(--brown-800);
    margin-bottom: 0.85rem;
}

/* ---------- Trust / stats grid ---------- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.trust-photo,
.trust-photo .ph-photo {
    border-radius: 16px;
    aspect-ratio: 1 / 1;
    width: 100%;
}
.trust-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.trust-card {
    background: var(--cream-100);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.trust-number {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--brown-800);
    margin-bottom: 0.25rem;
}
.trust-label {
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.trust-text {
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .trust-grid { grid-template-columns: 1fr; }
}

/* ---------- Services ---------- */
.service-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.4rem;
    height: 100%;
    box-shadow: 0 6px 24px rgba(44, 28, 19, 0.06);
}
.service-icon {
    font-size: 1.8rem;
    color: var(--tan-500);
    margin-bottom: 0.75rem;
}
.service-card-photo,
.service-card .ph-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
}

/* ---------- CTA band ---------- */
.cta-band {
    background: var(--brown-900);
    padding: 4rem 0;
}
.cta-band .section-heading {
    color: #fff;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--cream-100);
    border-top: 1px solid var(--cream-200);
}
.footer-logo {
    max-height: 40px;
}
.footer-heading {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--brown-900);
    margin-bottom: 0.85rem;
}
.footer-link {
    color: var(--ink-soft);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--brown-800);
}
.footer-divider {
    border-color: var(--cream-200);
}

/* ---------- Room detail ---------- */
.room-detail-photo,
.room-detail-photo.ph-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
}
/* Room feature grid — capacity/bed/size/bathroom/accessibility/price, each
   with an icon, replacing a plain definition-list table. */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--cream-200);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}
.feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-100);
    color: var(--tan-500);
    border-radius: 50%;
    font-size: 1.05rem;
}
.feature-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-bottom: 0.2rem;
}
.feature-value {
    font-weight: 600;
    color: var(--brown-900);
    font-size: 0.95rem;
    line-height: 1.35;
}
.feature-item--full {
    grid-column: 1 / -1;
}
.feature-item--price {
    grid-column: 1 / -1;
    background: var(--cream-100);
    border-color: var(--cream-100);
}
.feature-item--price .feature-icon {
    background: #fff;
}
.feature-item--price .feature-value {
    font-family: var(--font-heading);
    font-size: 30px;
}
.feature-value-suffix {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
}
@media (max-width: 420px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}
.amenity-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}
.amenity-list li {
    padding: 0.2rem 0;
    color: var(--ink-soft);
}

/* Amenities, presented as a grid of small chips rather than a bare bullet list. */
.amenity-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.amenity-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--cream-100);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.3;
}
.amenity-chip i {
    color: var(--tan-500);
    font-size: 1.05rem;
    flex-shrink: 0;
}
@media (max-width: 420px) {
    .amenity-grid {
        grid-template-columns: 1fr;
    }
}

/* Room gallery — extra photos and videos below the main room content. */
.room-gallery-section {
    /* margin-top: 3.5rem; */
    padding-top: 20px;
    /* border-top: 1px solid var(--cream-200); */
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.gallery-grid-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cream-100);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.gallery-grid-item img,
.gallery-grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.gallery-grid-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(44, 28, 19, 0.15);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.gallery-grid-item:hover::after,
.gallery-grid-item:focus-visible::after {
    opacity: 1;
}
.gallery-grid-item:hover img,
.gallery-grid-item:hover video,
.gallery-grid-item:focus-visible img,
.gallery-grid-item:focus-visible video {
    transform: scale(1.05);
}
.gallery-grid-item:focus-visible {
    outline: 2px solid var(--tan-500);
    outline-offset: 2px;
}
.gallery-video-badge,
.gallery-zoom-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 28, 19, 0.65);
    color: #fff;
    border-radius: 50%;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}
.gallery-video-badge {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    background: rgba(44, 28, 19, 0.55);
}

/* Full-size preview modal for gallery images/videos. */
.gallery-modal .modal-content {
    background: #000;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
}
.gallery-modal .modal-body img,
.gallery-modal .modal-body video {
    max-height: 85vh;
    width: 100%;
    object-fit: contain;
    background: #000;
}
.gallery-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.9;
    padding: 0.5rem;
}

@media (max-width: 767.98px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .room-gallery-section {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }
}
.amenity-list i {
    color: var(--tan-500);
    margin-right: 0.4rem;
}

/* ---------- Rates & packages ---------- */
.rate-table thead {
    background: var(--cream-100);
}
.rate-table th,
.rate-table td {
    padding: 0.9rem 1rem;
}
.package-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 6px 24px rgba(44, 28, 19, 0.06);
}

.pricing-notes {
    background: var(--cream-100);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}
.pricing-notes p {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}
.pricing-notes p:last-child {
    margin-bottom: 0;
}
.pricing-notes i {
    color: var(--tan-500);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

/* Below md, the rate table becomes a stack of cards instead of a cramped
   horizontally-scrolling table — one card per room, using the td's
   data-label attribute to reintroduce the (now-hidden) column headings. */
@media (max-width: 767.98px) {
    .rate-table {
        border: 0;
    }
    .rate-table thead {
        display: none;
    }
    .rate-table,
    .rate-table tbody,
    .rate-table tr,
    .rate-table td {
        display: block;
        width: 100%;
    }
    .rate-table tr {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(44, 28, 19, 0.07);
        padding: 1rem 1.15rem;
        margin-bottom: 1rem;
    }
    .rate-table tr:last-child {
        margin-bottom: 0;
    }
    .rate-table td {
        border: 0;
        padding: 0.3rem 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .rate-table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .rate-table td:first-child {
        font-family: var(--font-heading);
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--brown-900);
        padding-bottom: 0.6rem;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid var(--cream-200);
    }
    .rate-table td:last-child {
        padding-top: 0.75rem;
        display: block;
    }
    .rate-table td:last-child .btn {
        width: 100%;
    }
    .pricing-notes {
        padding: 1.1rem 1.25rem;
    }
}

/* ---------- Contact ---------- */
.map-embed {
    border-radius: 14px;
    overflow: hidden;
}
.map-embed iframe {
    border: 0;
}
.contact-form .form-control,
.contact-form .form-select {
    border-radius: 8px;
}

/* ---------- Legal pages ---------- */
.legal-content h2 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-top: 1.75rem;
    color: var(--brown-900);
}
.legal-content {
    max-width: 780px;
}

/* ---------- Admin table thumbs (shared class name safety) ---------- */
.admin-thumb {
    object-fit: cover;
}