/* ==========================================================================
   British House — main stylesheet
   Palette from the original site (maroon + gold), modern & clean.
   ========================================================================== */
:root {
    --maroon: #4a1013;
    --maroon2: #611519;
    --wine: #7d1f24;
    --gold: #c9a04e;
    --gold2: #e6c884;
    --gold-deep: #a9812f;
    --cream: #f7efe4;
    --sand: #efe2cb;
    --paper: #fffdf9;
    --ink: #2a1c15;
    --muted: #6f6257;
    --serif: 'Cormorant Garamond',Georgia,serif;
    --sans: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    --shadow: 0 14px 44px rgba(46,16,12,.16);
    --shadow-sm: 0 4px 18px rgba(46,16,12,.09);
    --cw: 1400px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    overflow-x: hidden
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

h1,h2,h3,h4,.serif {
    font-family: var(--serif)
}

.container {
    max-width: var(--cw);
    margin: 0 auto;
    padding: 0 26px;
    width: 100%
}

.kicker {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 600
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    border: 0;
    border-radius: 100px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 24px;
    transition: transform .15s,box-shadow .15s,filter .15s
}

.btn:active {
    transform: translateY(1px)
}

.btn-gold {
    background: linear-gradient(135deg,var(--gold),var(--gold-deep));
    color: #3a2408;
    box-shadow: 0 8px 20px rgba(169,129,47,.35)
}

.btn-gold:hover {
    filter: brightness(1.05);
    transform: translateY(-2px)
}

.btn-line {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.6)
}

.btn-line:hover {
    background: rgba(255,255,255,.14)
}

.btn-dark {
    background: var(--maroon);
    color: #fff
}

.btn-dark:hover {
    background: var(--maroon2);
    transform: translateY(-2px)
}

.section {
    padding: 78px 0
}

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 36px
}

.sec-head.center {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center
}

.sec-head .tt h2 {
    font-size: clamp(28px,4vw,42px);
    color: var(--maroon);
    margin: 6px 0 0;
    font-weight: 700;
    line-height: 1.1
}

.sec-head .tt p {
    color: var(--muted);
    font-size: 16px;
    margin-top: 8px;
    max-width: 560px
}

.arrows {
    display: flex;
    gap: 10px;
    flex: 0 0 auto
}

.arrows button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--sand);
    background: #fff;
    color: var(--maroon);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .18s
}

.arrows button:hover {
    background: var(--maroon);
    color: #fff;
    border-color: var(--maroon)
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease,transform .6s ease
}

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

/* ---------- Header ---------- */
.hdr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    transition: background .3s,box-shadow .3s,padding .3s
}

.hdr.solid {
    background: rgba(74,16,19,.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 18px rgba(0,0,0,.22)
}

.hdr .inner {
    max-width: var(--cw);
    margin: 0 auto;
    padding: 16px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: padding .3s
}

.hdr.solid .inner {
    padding: 11px 26px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff
}

.brand img {
    height: 40px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.5))
}

.brand b {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1
}

.brand span {
    display: block;
    font-size: 9px;
    letter-spacing: 2.5px;
    color: var(--gold2);
    text-transform: uppercase
}

.nav {
    display: flex;
    align-items: center;
    gap: 30px
}

.nav a {
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
    position: relative
}

.nav a:hover,.nav a.active {
    color: var(--gold2)
}

.nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--gold2);
    border-radius: 2px
}

.lang {
    display: flex;
    gap: 5px;
    align-items: center;
    color: #fff;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 100px;
    padding: 6px 13px;
    cursor: pointer
}

.lang b {
    color: var(--gold2)
}

.language-menu {
    position: relative;
    z-index: 4;
    flex: 0 0 auto
}

.language-current {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 5px 11px 5px 7px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 100px;
    background: rgba(0,0,0,.22);
    color: #fff;
    font-family: var(--sans);
    cursor: pointer
}

.language-current strong {
    font-size: 12px;
    letter-spacing: .7px
}

.language-current svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform .2s
}

.lt-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(255,255,255,.62),0 2px 6px rgba(0,0,0,.14)
}

.lt-flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 230px;
    padding: 8px;
    border: 1px solid rgba(201,160,78,.32);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(28,8,10,.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px);
    transition: .18s
}

.language-menu.open .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none
}

.language-menu.open .language-current svg {
    transform: rotate(180deg)
}

.language-option {
    display: grid;
    grid-template-columns: 31px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600
}

.language-option:hover,.language-option.active {
    background: #f6ead2;
    color: var(--maroon)
}

.language-option .lt-flag {
    width: 27px;
    height: 27px
}

.language-option small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px
}

@media(max-width: 900px) {
    .nav {
        display:none
    }
}

/* ---------- Hero slider (home) ---------- */
.hero {
    position: relative;
    width: 100%;
    height: clamp(500px,64vh,600px);
    overflow: hidden
}

.slides {
    position: absolute;
    inset: 0
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease
}

.slide.active {
    opacity: 1
}

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

.slide::after {
    display: none
}

.hero-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff
}

.hero-inner .kicker {
    color: var(--gold2)
}

.hero-inner h1 {
    font-size: clamp(40px,7vw,78px);
    font-weight: 700;
    line-height: .98;
    margin: 12px 0 14px;
    text-shadow: 0 4px 26px rgba(0,0,0,.4)
}

.hero-inner p {
    font-size: clamp(16px,2vw,20px);
    color: rgba(255,255,255,.92);
    margin-bottom: 26px;
    max-width: 520px
}

.dots {
    position: absolute;
    bottom: 96px;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    gap: 8px;
    justify-content: center
}

.dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: .25s
}

.dots button.on {
    background: var(--gold2);
    width: 26px;
    border-radius: 6px
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
    position: relative;
    width: 100%;
    height: clamp(240px,38vh,360px);
    overflow: hidden
}

.page-hero-slides {
    position: absolute;
    inset: 0
}

.page-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 1s ease,transform 6s ease
}

.page-hero-slide.active {
    opacity: 1;
    transform: scale(1)
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none
}

.page-hero-dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 15px;
    display: flex;
    gap: 6px;
    transform: translateX(-50%)
}

.page-hero-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
    transition: .25s
}

.page-hero-dots i.active {
    width: 20px;
    border-radius: 8px;
    background: #fff
}

.page-hero-caption {
    padding: 28px 0 24px;
    background: var(--paper);
    text-align: center
}

.page-hero-caption h1 {
    font-size: clamp(34px,5vw,52px);
    font-weight: 700;
    line-height: 1.08;
    color: var(--maroon)
}

.crumb {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

.crumb a:hover {
    color: var(--gold2)
}

.crumb span {
    color: var(--gold2)
}

/* ---------- Booking (floats over hero) ---------- */
.book-wrap {
    position: relative;
    z-index: 20;
    margin-top: -58px
}

.booking {
    background: #fff;
    border: 1px solid rgba(201,160,78,.3);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    gap: 14px;
    align-items: end
}

.bk-field {
    min-width: 0
}

.bk-checkin,.bk-checkout {
    grid-column: span 2
}

.bk-room {
    grid-column: span 5
}

.bk-first,.bk-last,.bk-email,.bk-phone {
    grid-column: span 3
}

.bk-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px
}

.bk-field input,.bk-field select {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #e2d7c3;
    border-radius: 11px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: #fff
}

.bk-field input:focus,.bk-field select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,160,78,.18)
}

.booking .btn {
    grid-column: 10/13;
    grid-row: 1;
    height: 47px;
    justify-content: center;
    width: 100%
}

.home-booking-notice {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 10px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid;
    box-shadow: var(--shadow-sm);
    background: #fff
}

.home-booking-notice .notice-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800
}

.home-booking-notice strong {
    display: block;
    font-size: 16px;
    margin-bottom: 2px
}

.home-booking-notice p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45
}

.home-booking-notice.success {
    color: #205f43;
    background: #effaf4;
    border-color: #a9d9c0
}

.home-booking-notice.success .notice-icon {
    color: #fff;
    background: #2d8a61
}

.home-booking-notice.success b {
    color: #541b2b;
    margin-left: 5px;
    white-space: nowrap
}

.home-booking-notice.error {
    color: #8c302c;
    background: #fff3f1;
    border-color: #e4b5b0
}

.home-booking-notice.error .notice-icon {
    color: #fff;
    background: #b64b45
}

/* ---------- Features (elegant pills) ---------- */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px
}

.feature {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 100px;
    padding: 8px 18px 8px 8px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s,box-shadow .15s
}

.feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

.feature .ic {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#f6ead0,#eeddb8);
    color: var(--gold-deep)
}

.feature .ic svg {
    width: 18px;
    height: 18px
}

.feature b {
    font-size: 14px;
    color: var(--maroon);
    line-height: 1
}

.feature span {
    display: none
}

/* ---------- About ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 50px;
    align-items: center
}

.about-img img {
    border-radius: 18px;
    box-shadow: var(--shadow);
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%
}

.about-text h2 {
    font-size: clamp(28px,4vw,40px);
    color: var(--maroon);
    line-height: 1.12;
    margin: 8px 0 16px
}

.about-text p {
    color: var(--muted);
    font-size: 16px;
    margin-bottom: 14px
}

.about-grid-centered {
    display: block;
    max-width: 1040px
}

.about-grid-centered .about-text {
    text-align: center
}

.about-grid-centered .about-text>p {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto
}

.about-grid-centered .home-detail-lists {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-align: left
}

.about-list {
    list-style: none;
    margin: 20px 0 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px
}

.about-list li {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 14.5px;
    font-weight: 500
}

.about-list svg {
    width: 19px;
    height: 19px;
    color: var(--gold-deep);
    flex: 0 0 19px
}

.home-detail-lists {
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
    gap: 22px;
    margin: 20px 0 25px;
    align-items: start
}

.home-detail-lists .about-list {
    width: 100%;
    margin: 0
}

.home-contact-list {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: 13px
}

.home-contact-list li {
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere
}

.home-contact-list svg {
    margin-top: 2px
}

.home-contact-list a {
    color: var(--ink);
    transition: color .2s ease
}

.home-contact-list a:hover {
    color: var(--maroon)
}

.home-benefit-list {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    gap: 11px
}

@media(max-width: 520px) {
    .home-detail-lists {
        grid-template-columns:1fr;
        gap: 15px
    }

    .home-benefit-list {
        grid-column: 1;
        grid-row: 1
    }

    .home-contact-list {
        grid-column: 1;
        grid-row: 2
    }
}

.parking-highlight {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 8px;
    border: 1px solid rgba(24,151,76,.38);
    border-radius: 100px;
    background: rgba(32,171,87,.09);
    color: #147d3d;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 0 0 0 rgba(32,171,87,0);
    animation: parkingPulse 1.7s ease-in-out infinite
}

.parking-highlight::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #21a957;
    box-shadow: 0 0 0 0 rgba(33,169,87,.55);
    animation: parkingDot 1.7s ease-out infinite
}

@keyframes parkingPulse {
    0%,100% {
        color: #147d3d;
        border-color: rgba(24,151,76,.34);
        background: rgba(32,171,87,.08);
        box-shadow: 0 0 0 0 rgba(32,171,87,0);
        transform: scale(1)
    }

    50% {
        color: #0c9a47;
        border-color: rgba(32,171,87,.72);
        background: rgba(32,171,87,.15);
        box-shadow: 0 0 16px rgba(32,171,87,.28);
        transform: scale(1.035)
    }
}

@keyframes parkingDot {
    0% {
        box-shadow: 0 0 0 0 rgba(33,169,87,.58)
    }

    70%,100% {
        box-shadow: 0 0 0 7px rgba(33,169,87,0)
    }
}

@media(prefers-reduced-motion:reduce) {
    .parking-highlight,.parking-highlight::before {
        animation: none;
        transform: none
    }
}

/* ---------- About editorial page ---------- */
.about-editorial-card {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(26px,5vw,58px);
    background: linear-gradient(145deg,#fff 0%,#fffaf2 100%);
    border: 1px solid rgba(201,160,78,.34);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(74,16,19,.12)
}

.about-flow::after {
    content: "";
    display: block;
    clear: both
}

.about-flow-photo {
    float: left;
    width: 44%;
    margin: 0 38px 24px 0
}

.about-flow-photo img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: var(--shadow)
}

.about-flow h2 {
    color: var(--maroon);
    font-size: clamp(30px,4vw,44px);
    line-height: 1.08;
    margin: 0 0 20px
}

.about-flow>p {
    color: #4a3f36;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 17px
}

.about-flow>p strong {
    color: var(--ink);
    font-weight: 650
}

.about-rating {
    padding: 17px 20px;
    border-left: 3px solid var(--gold);
    border-radius: 0 14px 14px 0;
    background: linear-gradient(90deg,#f8edd9,rgba(248,237,217,.3));
    color: var(--maroon)!important
}

.about-full-width {
    clear: both;
    padding-top: 18px
}

.about-contact-lines {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 24px 0 38px
}

.about-contact-lines p {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    line-height: 1.4
}

.about-contact-lines i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg,#f6ead0,#ead3a2);
    color: var(--gold-deep)
}

.about-contact-lines strong {
    font-weight: 600;
    overflow-wrap: anywhere
}

.about-full-width h3 {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 20px;
    color: var(--maroon);
    font-size: 34px;
    text-align: center
}

.about-full-width h3::before,.about-full-width h3::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg,transparent,var(--gold))
}

.about-full-width h3::after {
    background: linear-gradient(90deg,var(--gold),transparent)
}

.about-price-note {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 13px;
    margin-bottom: 20px
}

.about-price-note p {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    margin: 0;
    padding: 16px;
    text-align: center;
    border: 1px solid #ead7b3;
    border-radius: 15px;
    background: linear-gradient(145deg,#f7ecda,#fff8ec);
    color: var(--maroon);
    font-size: 14.5px
}

.about-room-rates {
    overflow: hidden;
    border: 1px solid var(--sand);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm)
}

.about-room-rates p {
    position: relative;
    margin: 0;
    padding: 16px 22px 16px 50px;
    border-bottom: 1px solid #f0e6d7;
    color: #4a3f36;
    font-size: 15.5px
}

.about-room-rates p:last-child {
    border-bottom: 0
}

.about-room-rates p::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--gold);
    border-radius: 2px;
    box-shadow: 0 0 0 4px rgba(201,160,78,.13)
}

.about-amenities-copy {
    margin: 24px 0;
    padding: 24px 28px;
    border-radius: 18px;
    background: var(--cream);
    border: 1px solid var(--sand)
}

.about-amenities-copy p {
    margin: 0 0 14px;
    color: #4a3f36;
    font-size: 15px;
    line-height: 1.7
}

.about-amenities-copy p:last-child {
    margin-bottom: 0;
    color: var(--maroon)
}

.about-important-notes {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 13px
}

.about-important-notes p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg,var(--maroon),var(--maroon2));
    box-shadow: 0 10px 24px rgba(74,16,19,.2);
    color: #fff;
    font-size: 14px;
    line-height: 1.45
}

.about-important-notes i {
    flex: 0 0 auto;
    color: var(--gold2);
    font-size: 19px
}

@media(max-width: 820px) {
    .about-flow-photo {
        float:none;
        width: 100%;
        margin: 0 0 28px
    }

    .about-contact-lines,.about-price-note,.about-important-notes {
        grid-template-columns: 1fr
    }
}

@media(max-width: 520px) {
    .about-editorial-card {
        padding:24px 17px;
        border-radius: 20px
    }

    .about-flow h2 {
        font-size: 30px
    }

    .about-contact-lines p {
        padding: 12px
    }

    .about-room-rates p {
        padding: 14px 12px 14px 40px;
        font-size: 14px
    }

    .about-room-rates p::before {
        left: 18px
    }

    .about-amenities-copy {
        padding: 20px 17px
    }
}

/* ---------- Right-to-left language support ---------- */
html[dir="rtl"] body {
    text-align: right
}

html[dir="rtl"] .sec-head,html[dir="rtl"] .about-flow,html[dir="rtl"] .prose,html[dir="rtl"] .contact-card {
    text-align: right
}

html[dir="rtl"] .sec-head.center,html[dir="rtl"] .page-hero-caption,html[dir="rtl"] .about-grid-centered .about-text,html[dir="rtl"] .cta {
    text-align: center
}

html[dir="rtl"] .home-detail-lists,html[dir="rtl"] .about-contact-lines,html[dir="rtl"] .room-story {
    text-align: right
}

html[dir="rtl"] .about-list li,html[dir="rtl"] .ci,html[dir="rtl"] .foot-ci {
    flex-direction: row
}

html[dir="rtl"] .language-menu {
    direction: rtl
}

html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] a[href^="mailto:"],html[dir="rtl"] a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: embed;
    text-align: left
}

html[dir="rtl"] .home-room-rates {
    padding-right: 16px;
    padding-left: 0;
    border-right: 1px solid var(--sand);
    border-left: 0;
    align-items: flex-start
}

html[dir="rtl"] .faq-q {
    text-align: right
}

/* ---------- Rooms / Gallery ---------- */
.rooms-bg {
    background: linear-gradient(180deg,var(--cream),#fff)
}

#roomsRow {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px
}

#galRow {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px
}

@media(min-width: 901px) {
    .arrows {
        display:none
    }
}

.gallery-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto
}

.gallery-view-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 11px 9px 17px;
    border: 1px solid var(--sand);
    border-radius: 100px;
    background: #fff;
    color: var(--maroon);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: .2s
}

.gallery-view-all span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 100px;
    background: var(--maroon);
    color: #fff;
    font-size: 11px
}

.gallery-view-all:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

.home-room-list {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.home-room-item {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 20px 22px;
    background: linear-gradient(145deg,#fff,#fffbf4);
    border: 1px solid var(--sand);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s,box-shadow .2s,border-color .2s
}

.home-room-item:last-child:nth-child(odd) {
    grid-column: 1/-1
}

.home-room-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(201,160,78,.55)
}

.home-room-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg,#f4e5c8,#e6c884);
    color: var(--maroon);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(169,129,47,.2)
}

.home-room-copy h3 {
    margin: 0;
    color: var(--maroon);
    font-size: 20px;
    line-height: 1.2
}

.home-room-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px
}

.home-room-rates {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding-left: 16px;
    border-left: 1px solid var(--sand);
    white-space: nowrap
}

.home-room-rates span {
    color: var(--muted);
    font-size: 12px
}

.home-room-rates strong {
    margin-left: 5px;
    color: var(--maroon);
    font-family: var(--serif);
    font-size: 23px
}

@media(max-width: 820px) {
    .home-room-list {
        grid-template-columns:1fr
    }

    .home-room-item:last-child:nth-child(odd) {
        grid-column: auto
    }
}

@media(max-width: 520px) {
    .home-room-item {
        grid-template-columns:44px minmax(0,1fr);
        gap: 12px;
        padding: 17px 15px
    }

    .home-room-number {
        width: 42px;
        height: 42px;
        font-size: 17px
    }

    .home-room-copy h3 {
        font-size: 17px
    }

    .home-room-rates {
        grid-column: 2;
        align-items: flex-start;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid var(--sand);
        white-space: normal;
        width: 100%
    }
}

.room {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s,box-shadow .2s;
    display: flex;
    flex-direction: column
}

.room:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow)
}

.room .ph {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden
}

.room .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.room:hover .ph img {
    transform: scale(1.06)
}

.room .price {
    position: absolute;
    top: 13px;
    right: 13px;
    background: rgba(46,16,12,.9);
    color: #fff;
    padding: 6px 13px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600
}

.room .price b {
    color: var(--gold2)
}

.room .body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.room h3 {
    font-size: 22px;
    color: var(--maroon);
    margin-bottom: 6px
}

.room .desc {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 10px
}

.room .am {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 6px 0 16px
}

.room .am span {
    font-size: 12px;
    color: var(--muted);
    background: var(--cream);
    border-radius: 100px;
    padding: 4px 10px
}

.room .rowb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto
}

.room .from {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.3
}

.room .from b {
    font-family: var(--serif);
    font-size: 24px;
    color: var(--maroon)
}

.gtile {
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-sm);
    aspect-ratio: 4/3
}

.gtile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.gtile:hover img {
    transform: scale(1.08)
}

.gtile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 55%,rgba(46,16,12,.5));
    opacity: 0;
    transition: .3s
}

.gtile:hover::after {
    opacity: 1
}

.gtile .zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(.7);
    opacity: 0;
    transition: .3s;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(201,160,78,.92);
    color: #3a2408;
    display: flex;
    align-items: center;
    justify-content: center
}

.gtile:hover .zoom {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1)
}

.gtile .zoom svg {
    width: 22px;
    height: 22px
}

.gallery-extra {
    display: none!important
}

.gallery-more {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(48,14,18,.66);
    color: #fff;
    pointer-events: none;
    backdrop-filter: blur(1.5px)
}

.gallery-more strong {
    font-family: var(--serif);
    font-size: 42px;
    line-height: 1;
    color: var(--gold2);
    text-shadow: 0 3px 16px rgba(0,0,0,.35)
}

.gallery-more small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

@media(max-width: 900px) {
    .gallery-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

.full-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px
}

.full-gallery-card {
    min-width: 0;
    margin: 0
}

.full-gallery-photo {
    aspect-ratio: 4/3
}

.full-gallery-card figcaption {
    margin: 0;
    padding: 10px 3px 0;
    color: #4a3f36;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.45
}

.gallery-empty {
    padding: 40px 0;
    color: var(--muted);
    text-align: center
}

@media(max-width: 640px) {
    .full-gallery-grid {
        gap:9px
    }

    .full-gallery-photo {
        border-radius: 9px;
        box-shadow: none
    }

    .full-gallery-card figcaption {
        display: -webkit-box;
        padding: 6px 1px 0;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
}

.room-details {
    max-width: 920px;
    margin: 30px auto 0;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    text-align: center
}

.room-details p {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 10px
}

.room-details p:last-child {
    margin-bottom: 0
}

.room-details strong {
    color: var(--maroon)
}

.room-copy-card {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(28px,5vw,58px);
    overflow: hidden;
    background: linear-gradient(145deg,#fff 0%,#fffaf2 100%);
    border: 1px solid rgba(201,160,78,.34);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(74,16,19,.12)
}

.room-copy-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 9%;
    right: 9%;
    height: 4px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent)
}

.room-contact-lines {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.room-contact-lines p {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ink)
}

.room-contact-lines i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg,#f6ead0,#ead3a2);
    color: var(--gold-deep)
}

.room-contact-lines strong {
    font-weight: 600;
    overflow-wrap: anywhere
}

.room-story {
    position: relative;
    margin: 38px 0 30px;
    padding: 8px 0 8px 32px;
    border-left: 3px solid var(--gold)
}

.room-story::before {
    content: "“";
    position: absolute;
    left: 12px;
    top: -25px;
    font-family: Georgia,serif;
    font-size: 68px;
    line-height: 1;
    color: rgba(201,160,78,.2)
}

.room-story p {
    position: relative;
    margin: 0 0 16px;
    color: #47372e;
    font-family: var(--serif);
    font-size: clamp(18px,2vw,22px);
    font-weight: 500;
    line-height: 1.55
}

.room-story p:last-child {
    margin-bottom: 0;
    font-size: clamp(16px,1.7vw,19px);
    color: var(--muted)
}

.room-story strong {
    font-weight: 600
}

.room-price-facts {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 13px;
    margin-bottom: 32px
}

.room-price-facts p {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    margin: 0;
    padding: 18px;
    text-align: center;
    border-radius: 16px;
    background: linear-gradient(145deg,#f7ecda,#fff8ec);
    border: 1px solid #ead7b3;
    color: var(--maroon);
    font-size: 14px;
    line-height: 1.45
}

.room-price-facts strong {
    font-weight: 650
}

.room-rate-list {
    overflow: hidden;
    border: 1px solid var(--sand);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm)
}

.room-rate-list p {
    position: relative;
    margin: 0;
    padding: 17px 22px 17px 50px;
    border-bottom: 1px solid #f0e6d7;
    color: #4a3f36;
    font-size: 15.5px;
    line-height: 1.5
}

.room-rate-list p:last-child {
    border-bottom: 0
}

.room-rate-list p::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--gold);
    border-radius: 2px;
    box-shadow: 0 0 0 4px rgba(201,160,78,.13)
}

.room-important-notes {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 14px;
    margin-top: 32px
}

.room-important-notes p {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 20px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg,var(--maroon),var(--maroon2));
    box-shadow: 0 10px 24px rgba(74,16,19,.2);
    color: #fff;
    font-size: 14.5px;
    line-height: 1.45
}

.room-important-notes i {
    flex: 0 0 auto;
    color: var(--gold2);
    font-size: 20px
}

.room-important-notes strong {
    font-weight: 600
}

.room-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.room-gallery-section {
    padding-top: 42px
}

.room-gallery-card {
    min-width: 0;
    margin: 0
}

.room-gallery-item {
    margin: 0
}

.room-gallery-item::after {
    opacity: 0
}

.room-gallery-caption {
    margin: 0;
    padding: 9px 2px 0;
    color: #4a3f36;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.42
}

@media(max-width: 900px) {
    .room-contact-lines,.room-price-facts {
        grid-template-columns:1fr
    }

    .room-important-notes {
        grid-template-columns: 1fr
    }

    .room-gallery-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 14px
    }
}

@media(max-width: 520px) {
    .room-copy-card {
        padding:28px 18px;
        border-radius: 20px
    }

    .room-story {
        padding-left: 22px
    }

    .room-contact-lines p {
        padding: 12px
    }

    .room-rate-list p {
        padding: 15px 14px 15px 42px;
        font-size: 14px
    }

    .room-rate-list p::before {
        left: 19px
    }

    .room-important-notes p {
        padding: 17px
    }

    .room-details {
        padding: 20px 18px
    }

    .section.room-gallery-section {
        padding-top: 24px
    }
}

/* Lightbox */
.lb {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: radial-gradient(circle at center,rgba(74,16,19,.72),rgba(18,5,5,.97));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease,visibility .25s ease;
    backdrop-filter: blur(8px)
}

.lb.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.lb-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 92vh
}

.lb img {
    max-width: 90vw;
    max-height: 84vh;
    border: 1px solid rgba(230,200,132,.35);
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0,0,0,.7);
    opacity: 0;
    transform: scale(.94);
    transition: opacity .28s ease,transform .28s ease
}

.lb.open img {
    opacity: 1;
    transform: scale(1)
}

.lb-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: min(88vw,900px);
    margin-top: 12px;
    color: #fff;
    text-align: center
}

.lb-counter {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid rgba(230,200,132,.38);
    border-radius: 100px;
    background: rgba(74,16,19,.72);
    color: var(--gold2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .7px
}

.lb-caption {
    overflow: hidden;
    color: rgba(255,255,255,.9);
    font-size: 13px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap
}

.page-rooms .lb-caption,.page-vip-guests .lb-caption {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff!important;
    -webkit-text-fill-color: #fff!important;
    opacity: 1;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: 700;
    letter-spacing: .1px;
    text-rendering: optimizeLegibility;
    text-shadow: none!important;
    filter: brightness(3)!important
}

body.lb-open {
    overflow: hidden
}

.lb .x,.lb .nav {
    position: absolute;
    background: rgba(255,255,255,.13);
    border: 0;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s
}

.lb .x:hover,.lb .nav:hover {
    background: var(--gold);
    color: #3a2408
}

.lb .x {
    top: 20px;
    right: 20px;
    width: auto;
    min-width: 108px;
    height: 46px;
    padding: 0 17px;
    gap: 9px;
    border: 1px solid rgba(230,200,132,.55);
    border-radius: 100px;
    background: rgba(74,16,19,.72);
    backdrop-filter: blur(10px)
}

.lb .x span {
    font-size: 18px;
    line-height: 1
}

.lb .x b {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .8px;
    text-transform: uppercase
}

.lb .prev {
    left: 22px;
    top: 50%;
    transform: translateY(-50%)
}

.lb .next {
    right: 22px;
    top: 50%;
    transform: translateY(-50%)
}

.page-rooms .lb .nav {
    z-index: 6;
    border: 2px solid var(--maroon);
    background: #fff;
    color: var(--maroon);
    box-shadow: 0 7px 22px rgba(0,0,0,.38);
    font-size: 32px;
    font-weight: 800;
    opacity: 1
}

.lb .nav svg {
    display: block;
    width: 24px;
    height: 24px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.page-rooms .lb .nav:hover,.page-rooms .lb .nav:focus-visible {
    border-color: var(--gold);
    background: var(--gold);
    color: #2d1705
}

@media(max-width: 620px) {
    .lb-stage {
        max-width:94vw
    }

    .lb img {
        max-width: 94vw;
        max-height: 72vh
    }

    .lb-meta {
        align-items: center;
        max-width: 92vw;
        gap: 9px;
        margin-top: 10px
    }

    .lb-caption {
        overflow: visible;
        font-size: 16px;
        line-height: 1.35;
        text-overflow: clip;
        white-space: normal
    }

    .page-rooms .lb-caption,.page-vip-guests .lb-caption {
        font-size: 18px
    }

    .lb-counter {
        font-size: 13px
    }

    .lb .x {
        top: 16px;
        right: 16px;
        min-width: 96px;
        height: 42px
    }

    .lb .nav {
        width: 44px;
        height: 44px
    }

    .lb .prev {
        left: 10px
    }

    .lb .next {
        right: 10px
    }
}

@media(max-width: 620px) {
    .page-rooms .lb-meta,.page-vip-guests .lb-meta {
        flex-direction:column;
        gap: 6px
    }

    .page-rooms .lb-counter,.page-vip-guests .lb-counter {
        align-self: center
    }

    .page-rooms .lb-caption,.page-vip-guests .lb-caption {
        width: 100%;
        text-align: center
    }
}

/* ---------- Services grid ---------- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px
}

.svc {
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s,box-shadow .2s
}

.svc:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.svc .ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#f6ead0,#eeddb8);
    color: var(--gold-deep);
    margin-bottom: 16px
}

.svc .ic svg {
    width: 26px;
    height: 26px
}

.svc h3 {
    font-size: 20px;
    color: var(--maroon);
    margin-bottom: 7px
}

.svc p {
    font-size: 14.5px;
    color: var(--muted)
}

@media(max-width: 900px) {
    .svc-grid {
        grid-template-columns:1fr 1fr
    }
}

@media(max-width: 560px) {
    .svc-grid {
        grid-template-columns:1fr
    }
}

/* ---------- Services text page ---------- */
.service-copy-card {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: clamp(28px,5vw,58px);
    overflow: hidden;
    background: linear-gradient(145deg,#fff 0%,#fffaf2 100%);
    border: 1px solid rgba(201,160,78,.34);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(74,16,19,.12)
}

.service-copy-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 4px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent)
}

.service-contact-lines {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 13px
}

.service-contact-lines p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: 14px
}

.service-contact-lines i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,#f6ead0,#ead3a2);
    color: var(--gold-deep)
}

.service-contact-lines strong {
    font-weight: 600;
    overflow-wrap: anywhere
}

.service-copy-intro {
    position: relative;
    margin: 36px 0 28px;
    padding: 22px 26px;
    border-left: 3px solid var(--gold);
    border-radius: 0 16px 16px 0;
    background: linear-gradient(90deg,#f8edd9,rgba(248,237,217,.25));
    color: #47372e;
    font-family: var(--serif);
    font-size: clamp(19px,2.4vw,24px);
    font-weight: 600;
    line-height: 1.5
}

.service-copy-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    list-style: none
}

.service-copy-list li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100px;
    padding: 22px 22px 22px 66px;
    border: 1px solid var(--sand);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    color: #4a3f36;
    font-size: 15px;
    line-height: 1.55;
    transition: transform .2s,box-shadow .2s
}

.service-copy-list li:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.service-copy-list li::before {
    content: "✓";
    position: absolute;
    left: 22px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: linear-gradient(135deg,var(--gold2),var(--gold));
    color: #4a2808;
    font-weight: 800;
    box-shadow: 0 5px 12px rgba(169,129,47,.25)
}

.service-copy-list li strong {
    display: block;
    color: var(--maroon);
    font-size: 15px;
    margin-bottom: 4px
}

.service-copy-list li span {
    display: block;
    color: var(--muted);
    font-size: 13.5px
}

@media(max-width: 760px) {
    .service-contact-lines,.service-copy-list {
        grid-template-columns:1fr
    }
}

@media(max-width: 520px) {
    .service-copy-card {
        padding:26px 17px;
        border-radius: 20px
    }

    .service-contact-lines p {
        padding: 12px
    }

    .service-copy-intro {
        margin: 28px 0 22px;
        padding: 18px;
        font-size: 19px
    }

    .service-copy-list li {
        min-height: auto;
        padding: 18px 16px 18px 57px
    }

    .service-copy-list li::before {
        left: 17px
    }
}

/* ---------- VIP grid ---------- */
.vip-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px
}

.vip {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .2s,box-shadow .2s
}

.vip:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.vip .ph {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: zoom-in
}

.vip .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.vip:hover .ph img {
    transform: scale(1.06)
}

.vip-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    background: rgba(74,16,19,.78);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    color: var(--gold2);
    opacity: 0;
    transform: scale(.8);
    transition: .25s;
    backdrop-filter: blur(7px)
}

.vip:hover .vip-zoom {
    opacity: 1;
    transform: scale(1)
}

@media(max-width: 900px) {
    .vip-zoom {
        opacity:1;
        transform: scale(1)
    }
}

.vip .body {
    padding: 16px 18px
}

.vip h3 {
    font-size: 18px;
    color: var(--maroon);
    margin-bottom: 4px
}

.vip p {
    font-size: 13px;
    color: var(--muted)
}

@media(max-width: 900px) {
    .vip-grid {
        grid-template-columns:1fr 1fr
    }
}

@media(max-width: 520px) {
    .vip-grid {
        grid-template-columns: 0fr 1fr;
        gap: 14px
    }
}

/* ---------- Prose / content ---------- */
.prose {
    max-width: 820px;
    margin: 0 auto
}

.prose p {
    font-size: 17px;
    color: #4a3f36;
    margin-bottom: 18px
}

.prose h2 {
    color: var(--maroon);
    font-size: 28px;
    margin: 26px 0 12px
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center
}

.split img {
    border-radius: 18px;
    box-shadow: var(--shadow);
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover
}

@media(max-width: 820px) {
    .split {
        grid-template-columns:1fr;
        gap: 28px
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .about-list {
        grid-template-columns: 1fr
    }
}

/* ---------- FAQ ---------- */
.faq {
    max-width: 820px;
    margin: 0 auto
}

.faq-item {
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm)
}

.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 18px 20px;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--maroon);
    font-family: var(--sans);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.faq-q .pm {
    font-size: 22px;
    color: var(--gold-deep);
    transition: transform .2s;
    flex: 0 0 auto
}

.faq-item.open .pm {
    transform: rotate(45deg)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.faq-a p {
    padding: 0 20px 18px;
    color: var(--muted);
    font-size: 15px
}

/* ---------- Price list ---------- */
.price-list {
    list-style: none;
    max-width: 820px;
    margin: 0 auto
}

.price-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 15px 4px;
    border-bottom: 1px dashed #e2d7c3
}

.price-list li:last-child {
    border-bottom: 0
}

.price-list .nm {
    font-size: 16px;
    color: var(--ink)
}

.price-list .pr {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--maroon);
    white-space: nowrap
}

.note {
    max-width: 820px;
    margin: 0 auto 18px;
    text-align: center;
    color: var(--muted);
    font-size: 15px
}

.note strong {
    color: var(--gold-deep)
}

/* ---------- Booking intro + plain room rates ---------- */
.book-intro {
    max-width: 960px;
    margin: 0 auto 40px
}

.bi-contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px
}

.bi-contacts span,.bi-contacts a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 100px;
    padding: 10px 18px;
    font-size: 14.5px;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: .15s
}

.bi-contacts a:hover {
    color: var(--maroon);
    border-color: var(--gold)
}

.bi-contacts i {
    color: var(--gold-deep)
}

.bi-text {
    max-width: 760px;
    margin: 0 auto;
    text-align: center
}

.bi-text p {
    color: var(--muted);
    font-size: 15.5px;
    margin: 9px 0
}

.bi-text strong {
    color: var(--ink)
}

.book-rates-box {
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 22px 24px
}

.book-rates-box h3 {
    font-size: 19px;
    color: var(--maroon);
    margin-bottom: 14px
}

.book-rates {
    list-style: none
}

.book-rates li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f1eadd;
    font-size: 15px;
    color: var(--ink)
}

.book-rates li:last-child {
    border-bottom: 0
}

.book-rates li > span:first-child {
    display: flex;
    align-items: center;
    gap: 11px
}

.book-rates li i {
    color: var(--gold-deep);
    width: 20px;
    text-align: center;
    font-size: 15px
}

.book-rates li .p {
    color: var(--maroon);
    font-weight: 600;
    white-space: nowrap
}

/* ---------- Location "nearby" cards ---------- */
.place-cols {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px
}

.place-card {
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--shadow-sm)
}

.place-card h3 {
    color: var(--maroon);
    font-size: 19px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 9px
}

.place-card h3 svg {
    width: 20px;
    height: 20px;
    color: var(--gold-deep)
}

.place-card ul {
    list-style: none
}

.place-card li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f4eee2;
    font-size: 14.5px
}

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

.place-card li span {
    color: var(--muted);
    text-align: right;
    flex: 0 0 auto
}

@media(max-width: 700px) {
    .place-cols {
        grid-template-columns:1fr
    }
}

/* ---------- Forms (booking / contact pages) ---------- */
.form-card {
    background: #fff;
    border: 1px solid var(--sand);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    padding: 30px
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.f-field {
    margin-bottom: 16px
}

.f-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 7px
}

.f-field input,.f-field select,.f-field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #e2d7c3;
    border-radius: 11px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: #fdfcf9
}

.f-field input:focus,.f-field select:focus,.f-field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,160,78,.18)
}

.f-field textarea {
    resize: vertical;
    min-height: 110px
}

.alert {
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14.5px;
    margin-bottom: 20px
}

.alert-ok {
    background: #e6f6ee;
    color: #1c6b48;
    border: 1px solid #9ed3b6
}

.alert-err {
    background: #fbeceb;
    color: #a3302b;
    border: 1px solid #e2a7a3
}

@media(max-width: 640px) {
    .frow {
        grid-template-columns:1fr
    }
}

/* ---------- Contact ---------- */
.contact-bg {
    background: var(--maroon);
    color: #fff
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: stretch
}

.contact-bg .sec-head .tt h2 {
    color: #fff
}

.contact-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding: 30px
}

.ci {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 20px
}

.ci:last-child {
    margin-bottom: 0
}

.ci .ic {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(201,160,78,.2);
    color: var(--gold2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px
}

.ci .ic svg {
    width: 21px;
    height: 21px
}

.ci b {
    display: block;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold2);
    margin-bottom: 3px
}

.ci span {
    font-size: 15.5px
}

.map-embed {
    border-radius: 18px;
    overflow: hidden;
    min-height: 320px;
    border: 1px solid rgba(255,255,255,.14)
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    filter: saturate(.9)
}

@media(max-width: 820px) {
    .contact-grid {
        grid-template-columns:1fr;
        gap: 24px
    }
}

/* ---------- CTA band ---------- */
.cta {
    background: linear-gradient(135deg,var(--maroon),var(--maroon2));
    color: #fff;
    border-radius: 22px;
    padding: 48px;
    text-align: center
}

.cta h2 {
    font-size: clamp(26px,4vw,38px);
    margin-bottom: 10px
}

.cta p {
    color: rgba(255,255,255,.85);
    margin-bottom: 22px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto
}

/* ---------- Footer ---------- */
footer {
    background: #360c0e;
    color: #fff;
    font-weight: bold
}

.foot-top {
    max-width: var(--cw);
    margin: 0 auto;
    padding: 60px 26px 40px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.4fr;
    gap: 48px
}

.foot-col h4 {
    font-family: var(--serif);
    color: #fff;
    font-size: 20px;
    margin-bottom: 16px
}

.foot-col .brand {
    margin-bottom: 14px
}

.foot-col p {
    font-size: 14px;
    line-height: 1.7
}

.foot-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.foot-links a {
    font-size: 14.5px;
    color: #fff
}

.foot-links a:hover {
    color: #fff
}

.foot-ci {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 13px;
    font-size: 14.5px
}

.foot-ci svg {
    width: 18px;
    height: 18px;
    color: var(--gold2);
    flex: 0 0 18px;
    margin-top: 2px
}

.foot-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 20px 26px;
    font-size: 12.5px;
    text-align: center
}

.developer-credit {
    color: #fff;
    transition: color .2s
}

.developer-credit:hover {
    color: #fff
}

footer .brand span {
    color: #fff
}

/* ---------- Bottom dock (MOBILE ONLY) ---------- */
.dock,.mobile-more {
    display: none
}

/* =====================================================
   MOBILE (≤900px)
   ===================================================== */
@media(max-width: 900px) {
    .hdr {
        position:sticky;
        background: rgba(74,16,19,.97);
        box-shadow: 0 2px 14px rgba(0,0,0,.22)
    }

    .hdr .inner {
        padding: 12px 16px
    }

    .hero {
        height: 250px;
        width: auto;
        margin: 14px 14px 0;
        border-radius: 20px
    }

    .hero-inner {
        justify-content: flex-end;
        padding-bottom: 16px
    }

    .hero-inner .container {
        padding: 0 20px
    }

    .hero-inner h1 {
        font-size: 32px;
        margin: 5px 0 10px;
        line-height: 1
    }

    .hero-inner p {
        display: none
    }

    .hero-inner .btn {
        padding: 10px 20px;
        font-size: 14px
    }

    .dots {
        bottom: 12px
    }

    .page-hero {
        height: 200px;
        margin: 14px 14px 0;
        width: auto;
        border-radius: 20px
    }

    .page-hero-caption {
        padding: 24px 0 20px
    }

    .book-wrap {
        margin-top: 16px;
        padding: 0 14px
    }

    .booking {
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: 11px;
        padding: 16px;
        border-radius: 18px
    }

    .bk-checkin,.bk-checkout,.bk-first,.bk-last,.bk-email,.bk-phone {
        grid-column: span 1
    }

    .bk-room,.booking .btn {
        grid-column: 1/-1;
        grid-row: auto
    }

    .features {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 16px;
        padding-bottom: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .features::-webkit-scrollbar {
        display: none
    }

    .feature {
        flex: 0 0 auto;
        padding: 6px 14px 6px 6px
    }

    .feature .ic {
        width: 28px;
        height: 28px;
        flex: 0 0 28px
    }

    .feature .ic svg {
        width: 15px;
        height: 15px
    }

    .feature b {
        font-size: 12.5px;
        white-space: nowrap
    }

    #roomsRow,#galRow {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 4px 0 10px;
        grid-template-columns: none
    }

    #roomsRow::-webkit-scrollbar,#galRow::-webkit-scrollbar {
        display: none
    }

    #roomsRow>*,#galRow>* {
        scroll-snap-align: start
    }

    #roomsRow>* {
        flex: 0 0 calc((100% - 14px)/1.5)
    }

    #galRow>* {
        flex: 0 0 84%
    }

    .rooms-grid {
        grid-template-columns: 1fr
    }

    .section {
        padding: 52px 0
    }

    .room .body {
        padding: 14px
    }

    .room h3 {
        font-size: 18px
    }

    .room .am {
        gap: 5px;
        margin: 8px 0 12px
    }

    .room .am span {
        font-size: 11px;
        padding: 3px 8px
    }

    .room .rowb {
        flex-direction: column;
        align-items: stretch;
        gap: 9px
    }

    .room .rowb .btn {
        width: 100%;
        justify-content: center
    }

    .foot-top {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
        padding: 44px 22px 28px
    }

    .foot-col .brand,.foot-links {
        align-items: center
    }

    .foot-ci {
        justify-content: center;
        text-align: left
    }

    footer {
        padding-bottom: 96px
    }

    .cta {
        padding: 32px 22px
    }

    .dock {
        display: flex;
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        z-index: 120;
        justify-content: space-around;
        padding: 8px 6px;
        border-radius: 22px;
        background: rgba(74,16,19,.94);
        backdrop-filter: blur(14px);
        box-shadow: 0 12px 40px rgba(0,0,0,.4);
        border: 1px solid rgba(201,160,78,.3)
    }

    .dock a,.dock button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: rgba(255,255,255,.75);
        min-width: 0;
        padding: 6px 8px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        font-family: var(--sans);
        font-size: 10px;
        font-weight: 600;
        flex: 1;
        cursor: pointer;
        transition: .2s
    }

    .dock a svg,.dock button svg {
        width: 21px;
        height: 21px
    }

    .dock a.active,.dock button.active {
        background: linear-gradient(135deg,var(--gold),var(--gold-deep));
        color: #3a2408
    }

    .mobile-more {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 180;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease,visibility .2s ease
    }

    .mobile-more.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto
    }

    .mobile-more-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(35,12,13,.42)
    }

    .mobile-more-panel {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-height: 72vh;
        overflow-y: auto;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
        border: 1px solid rgba(74,16,19,.08);
        border-radius: 22px;
        background: #fffaf5;
        box-shadow: 0 14px 40px rgba(31,8,9,.22);
        opacity: 0;
        transform: translateY(28px);
        transition: transform .24s ease-out,opacity .2s ease
    }

    .mobile-more.open .mobile-more-panel {
        opacity: 1;
        transform: translateY(0)
    }

    .mobile-more-panel::before {
        content: "";
        display: block;
        width: 34px;
        height: 3px;
        margin: 0 auto 12px;
        border-radius: 100px;
        background: rgba(74,16,19,.2)
    }

    .mobile-more-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        padding: 0 3px 8px;
        border-bottom: 1px solid rgba(74,16,19,.08)
    }

    .mobile-more-head span {
        display: none
    }

    .mobile-more-head h2 {
        color: var(--maroon);
        font-size: 22px;
        line-height: 1.15
    }

    .mobile-more-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: #f1e7db;
        color: var(--maroon);
        font-size: 16px;
        cursor: pointer;
        transition: background .18s ease,color .18s ease
    }

    .mobile-more-close:hover,.mobile-more-close:focus {
        outline: none;
        background: var(--maroon);
        color: #fff
    }

    .mobile-more-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 6px
    }

    .mobile-more-grid a {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 48px;
        padding: 7px 9px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: #4a3435;
        font-size: 13px;
        font-weight: 600;
        transition: background .16s ease,color .16s ease
    }

    .mobile-more-grid a i {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #f3e8dc;
        color: var(--maroon);
        font-size: 13px
    }

    .mobile-more-grid a.current {
        background: #f1e3d4;
        color: var(--maroon)
    }

    .mobile-more-grid a.current i {
        background: var(--maroon);
        color: #fff
    }

    .mobile-more-grid a:active {
        background: #ead8c5
    }

    body.more-open {
        overflow: hidden
    }
}

@media(max-width: 380px) {
    .mobile-more-panel {
        left:7px;
        right: 7px;
        bottom: 7px;
        padding-left: 10px;
        padding-right: 10px
    }

    .mobile-more-grid a {
        padding: 6px;
        gap: 7px;
        font-size: 12.5px
    }
}

/* ---------- Clean, compact mobile content ---------- */
@media(max-width: 640px) {
    .container {
        padding-left:16px;
        padding-right: 16px
    }

    .section {
        padding: 34px 0
    }

    .sec-head {
        margin-bottom: 20px
    }

    .sec-head .tt h2 {
        font-size: 29px
    }

    .sec-head .tt p {
        font-size: 14px;
        line-height: 1.55
    }

    .page-home #gallery .sec-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px
    }

    .gallery-head-actions {
        width: 100%;
        justify-content: space-between
    }

    .gallery-view-all {
        min-height: 40px;
        padding: 7px 9px 7px 14px;
        font-size: 12px
    }

    .gallery-view-all span {
        min-width: 25px;
        height: 25px
    }

    .gallery-more strong {
        font-size: 34px
    }

    .gallery-more small {
        font-size: 8px;
        letter-spacing: .7px
    }

    .kicker {
        font-size: 10px;
        letter-spacing: 2.3px
    }

    .btn {
        padding: 10px 17px;
        font-size: 13px;
        box-shadow: none
    }

    .page-hero {
        height: 250px;
        margin: 10px 10px 0;
        border-radius: 13px
    }

    .page-hero-caption {
        padding: 18px 0 14px
    }

    .page-hero-caption h1 {
        font-size: 30px
    }

    .crumb {
        margin-top: 6px;
        font-size: 11.5px
    }

    /* Home availability form */
    .book-wrap {
        margin-top: 12px;
        padding: 0 10px
    }

    .booking {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 12px;
        border-radius: 12px;
        box-shadow: none
    }

    .booking .bk-field {
        min-width: 0
    }

    .booking .bk-field {
        grid-column: span 1
    }

    .booking .bk-room,.booking .btn {
        grid-column: 1/-1
    }

    .booking .bk-email {
        grid-column: 1/-1
    }

    .booking .bk-phone,.booking .btn {
        grid-column: span 1
    }

    .booking .btn {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px;
        white-space: nowrap
    }

    .home-booking-notice {
        gap: 10px;
        margin-bottom: 8px;
        padding: 11px 12px;
        border-radius: 11px;
        box-shadow: none
    }

    .home-booking-notice .notice-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 17px
    }

    .home-booking-notice strong {
        font-size: 14px
    }

    .home-booking-notice p {
        font-size: 12px
    }

    .bk-field label {
        margin-bottom: 3px;
        font-size: 9.5px
    }

    .bk-field input,.bk-field select {
        height: 40px;
        padding: 7px 9px;
        border-radius: 8px;
        font-size: 13px
    }

    .booking .btn {
        height: 40px
    }

    /* Forms */
    .frow {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .f-field {
        margin-bottom: 10px;
        min-width: 0
    }

    .f-field label {
        margin-bottom: 4px;
        font-size: 11px
    }

    .f-field input,.f-field select,.f-field textarea {
        min-width: 0;
        padding: 9px 10px;
        border-radius: 8px;
        font-size: 13px;
        background: #fff
    }

    .f-field input,.f-field select {
        height: 40px
    }

    .f-field textarea {
        min-height: 72px
    }

    .alert {
        padding: 10px 12px;
        margin-bottom: 14px;
        border-radius: 8px;
        font-size: 12.5px
    }

    .page-booking .form-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .page-contact .form-card {
        padding: 0!important;
        border: 0;
        border-radius: 0;
        background: transparent!important;
        box-shadow: none
    }

    /* Booking page */
    .page-booking .sec-head {
        margin-bottom: 13px
    }

    .book-intro {
        margin-bottom: 20px
    }

    .bi-contacts {
        display: grid;
        justify-content: stretch;
        gap: 2px;
        margin-bottom: 14px
    }

    .bi-contacts span,.bi-contacts a {
        justify-content: flex-start;
        padding: 4px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 12.5px
    }

    .bi-text {
        text-align: left
    }

    .bi-text p {
        margin: 6px 0;
        font-size: 13.5px;
        line-height: 1.55
    }

    .page-booking .bi-text {
        padding: 2px 0 2px 13px;
        border-left: 2px solid var(--gold)
    }

    .page-booking .bi-text p:first-child {
        color: var(--maroon);
        font-weight: 650
    }

    .page-booking .bi-text strong {
        color: var(--maroon)
    }

    .page-booking .form-card label {
        color: var(--maroon);
        font-weight: 650
    }

    .page-booking .split {
        gap: 24px
    }

    .book-rates-box {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .book-rates-box h3 {
        margin-bottom: 6px;
        font-size: 20px
    }

    .book-rates li {
        gap: 8px;
        padding: 8px 0;
        font-size: 12.5px;
        line-height: 1.35
    }

    .book-rates li > span:first-child {
        gap: 6px
    }

    .book-rates li i {
        width: 15px;
        font-size: 12px
    }

    /* About page — editorial content without heavy boxes */
    .about-editorial-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .about-flow-photo {
        margin-bottom: 18px
    }

    .about-flow-photo img {
        border-radius: 11px;
        box-shadow: none
    }

    .about-flow h2 {
        font-size: 28px;
        margin-bottom: 13px
    }

    .about-flow>p {
        font-size: 14px;
        line-height: 1.62;
        margin-bottom: 12px
    }

    .about-rating {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent
    }

    .about-full-width {
        padding-top: 4px
    }

    .about-contact-lines {
        gap: 2px;
        margin: 17px 0 22px
    }

    .about-contact-lines p {
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 12.5px
    }

    .about-contact-lines i {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        background: transparent
    }

    .about-full-width h3 {
        margin-bottom: 12px;
        font-size: 27px
    }

    .about-price-note {
        gap: 0;
        margin-bottom: 12px
    }

    .about-price-note p {
        justify-content: flex-start;
        min-height: 0;
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-align: left;
        font-size: 13px
    }

    .about-room-rates {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .about-room-rates p {
        padding: 9px 0 9px 19px;
        font-size: 13px;
        line-height: 1.45
    }

    .about-room-rates p::before {
        left: 2px;
        width: 7px;
        height: 7px;
        box-shadow: none
    }

    .about-amenities-copy {
        margin: 18px 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent
    }

    .about-amenities-copy p {
        font-size: 13.5px;
        line-height: 1.6
    }

    .about-important-notes {
        gap: 0
    }

    .about-important-notes p {
        padding: 10px 0;
        border-bottom: 1px solid var(--sand);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--ink);
        font-size: 13px
    }

    .about-important-notes i {
        color: var(--gold-deep);
        font-size: 16px
    }

    /* Services page */
    .service-copy-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .service-copy-card::before {
        display: none
    }

    .service-contact-lines {
        gap: 2px
    }

    .service-contact-lines p {
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 12.5px
    }

    .service-contact-lines i {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        background: transparent
    }

    .service-copy-intro {
        margin: 19px 0 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 17px;
        line-height: 1.45
    }

    .service-copy-list {
        gap: 0
    }

    .service-copy-list li {
        min-height: 0;
        padding: 11px 0 11px 24px;
        border: 0;
        border-bottom: 1px solid var(--sand);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 13.5px;
        line-height: 1.5
    }

    .service-copy-list li::before {
        left: 1px;
        top: 14px;
        width: auto;
        height: auto;
        transform: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--gold-deep)
    }

    /* Rooms page */
    .room-copy-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .room-copy-card::before {
        display: none
    }

    .room-contact-lines {
        gap: 2px
    }

    .room-contact-lines p {
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 12.5px
    }

    .room-contact-lines i {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        background: transparent
    }

    .room-story {
        margin: 20px 0 16px;
        padding: 0;
        border: 0
    }

    .room-story::before {
        display: none
    }

    .room-story p,.room-story p:last-child {
        font-family: var(--sans);
        font-size: 13.5px;
        line-height: 1.6
    }

    .room-price-facts {
        gap: 0;
        margin-bottom: 14px
    }

    .room-price-facts p {
        justify-content: flex-start;
        min-height: 0;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px solid var(--sand);
        border-radius: 0;
        background: transparent;
        text-align: left;
        font-size: 13px
    }

    .room-rate-list {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .room-rate-list p {
        padding: 9px 0 9px 19px;
        font-size: 13px;
        line-height: 1.45
    }

    .room-rate-list p::before {
        left: 2px;
        width: 7px;
        height: 7px;
        box-shadow: none
    }

    .room-important-notes {
        gap: 0;
        margin-top: 16px
    }

    .room-important-notes p {
        padding: 10px 0;
        border-bottom: 1px solid var(--sand);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--ink);
        font-size: 13px
    }

    .room-important-notes i {
        color: var(--gold-deep);
        font-size: 16px
    }

    .room-gallery-grid {
        grid-template-columns: repeat(1,1fr);
        gap: 6px
    }

    .room-gallery-item {
        border-radius: 7px;
        box-shadow: none
    }

    .room-gallery-caption {
        display: -webkit-box;
        min-height: 39px;
        padding: 6px 1px 0;
        overflow: hidden;
        font-size: 19px;
        line-height: 1.3;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-align: center;
    }

    /* VIP, location and contact */
    .vip-grid {
        gap: 9px;
    }

    .vip {
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .vip .ph {
        border-radius: 9px
    }

    .vip .body {
        padding: 8px 2px
    }

    .vip h3 {
        font-size: 25px;
        line-height: 1.15;
        text-align: center;
    }

    .vip p {
        font-size: 11.5px;
        line-height: 1.4
    }

    .vip-zoom {
        right: 7px;
        bottom: 7px;
        width: 30px;
        height: 30px;
        box-shadow: none;
        backdrop-filter: none
    }

    .split {
        gap: 20px
    }

    .page-location .split h2 {
        font-size: 28px!important
    }

    .place-cols {
        gap: 22px
    }

    .place-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .place-card h3 {
        margin-bottom: 5px;
        font-size: 18px
    }

    .place-card li {
        padding: 6px 0;
        font-size: 12.5px
    }

    .map-embed,.map-embed iframe {
        min-height: 220px;
        border-radius: 10px
    }

    .contact-grid {
        gap: 22px
    }

    .page-contact .contact-bg {
        background: var(--paper);
        color: var(--ink)
    }

    .page-contact .contact-bg .sec-head .tt h2 {
        color: var(--maroon)
    }

    .contact-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent
    }

    .page-contact .contact-card a {
        color: var(--ink)!important
    }

    .ci {
        gap: 10px;
        margin-bottom: 13px
    }

    .ci .ic {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 7px;
        background: transparent
    }

    .ci .ic svg {
        width: 17px;
        height: 17px
    }

    .ci span {
        font-size: 13px
    }

    /* Home cards, FAQ, CTA and footer */
    .about-img img {
        border-radius: 11px;
        box-shadow: none
    }

    .about-contact-panel {
        padding: 14px 0 14px 16px;
        background: transparent
    }

    .home-contact-list {
        gap: 13px
    }

    .home-contact-list li {
        font-size: 13.5px;
        line-height: 1.45
    }

    .about-text p {
        font-size: 14px
    }

    .home-room-list {
        gap: 0
    }

    #rooms .sec-head .tt h2 {
        font-family: var(--sans);
        font-size: 24px;
        font-weight: 650;
        letter-spacing: -.4px
    }

    .home-room-item {
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 10px;
        min-height: 0;
        padding: 13px 2px;
        border: 0;
        border-bottom: 1px solid var(--sand);
        border-radius: 0;
        background: transparent;
        box-shadow: none
    }

    .home-room-number {
        display: none
    }

    .home-room-copy h3 {
        font-family: var(--sans);
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.4;
        color: #3f3330
    }

    .home-room-rates {
        grid-column: auto;
        align-items: flex-end;
        width: auto;
        padding: 0;
        border: 0;
        white-space: nowrap
    }

    .home-room-rates span {
        font-size: 0
    }

    .home-room-rates strong {
        margin: 0;
        font-family: var(--sans);
        font-size: 15px;
        font-weight: 700;
        color: var(--maroon)
    }

    .faq {
        display: grid;
        gap: 8px
    }

    .faq-item {
        margin: 0;
        border: 1px solid #eadfce;
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(46,16,12,.045)
    }

    .faq-q {
        padding: 13px 13px;
        font-family: var(--sans);
        font-size: 13.5px;
        line-height: 1.4
    }

    .faq-q .pm {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #f5eadc;
        font-size: 18px
    }

    .faq-a p {
        padding: 0 13px 13px;
        font-size: 13px;
        line-height: 1.55
    }

    .cta {
        padding: 24px 16px;
        border-radius: 13px;
        background: var(--maroon)
    }

    .cta h2 {
        font-size: 27px
    }

    .cta p {
        font-size: 13.5px;
        margin-bottom: 15px
    }

    .foot-top {
        gap: 25px;
        padding: 36px 20px 27px;
        text-align: left
    }

    .foot-top .foot-col:nth-child(2),.foot-top .foot-col:first-child>p {
        display: block
    }

    .foot-col .brand {
        justify-content: center
    }

    .foot-col:first-child>p {
        max-width: 340px;
        margin: 0 auto;
        text-align: center;
        font-size: 13px;
        line-height: 1.6
    }

    .foot-col h4 {
        text-align: center;
        margin-bottom: 10px;
        font-size: 19px
    }

    .foot-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
        align-items: stretch
    }

    .foot-links li {
        padding: 6px 2px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        text-align: center
    }

    .foot-links a {
        font-size: 13px
    }

    .foot-ci {
        justify-content: flex-start;
        max-width: 330px;
        margin: 0 auto 9px;
        text-align: left
    }

    .foot-ci {
        margin-bottom: 8px;
        font-size: 13px
    }
}