@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/montserrat-italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/montserrat-regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/fonts/montserrat-semibold.ttf) format('truetype');
}

:root {
    --gold: #d0c08a;
    --gold-light: #f3e1a6;
    --ink: #292b29;
    --muted: #696b66;
    --line: #e4e1d9;
    --soft: #aba382;
    --white: #fff;
    --serif: 'Montserrat',Arial,Helvetica,sans-serif;
    --sans: 'Montserrat',Arial,Helvetica,sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font: 16px/1.7 var(--sans);
}

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

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

button,
input,
select {
    font: inherit;
}

button,
a,
input,
select {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a:hover {
    color: var(--gold);
}

.container {
    width: min(1220px,88%);
    margin-inline: auto;
}

.section {
    padding-block: 92px;
}

.eyebrow {
    color: var(--gold);
    font-size: .75rem;
    letter-spacing: .2em;
    font-weight: 600;
    margin: 0 0 19px;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.15;
}

h2 {
    font-size: clamp(2rem,3.1vw,3rem);
    margin-bottom: 0;
    letter-spacing: -.035em;
}

h2 em {
    color: var(--gold);
    font-weight: 400;
}

p {
    margin-bottom: 18px;
}

h3 {
    font-size: 1.5rem;
}

em {
    font-weight: 400;
}

.header {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 6%;
    gap: 36px;
    background: white;
    position: relative;
    z-index: 5;
}

.brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand img {
    width: 242px;
    filter: brightness(0) saturate(100%);
    opacity: .8;
}

.brand span {
    font-size: .65rem;
    letter-spacing: .3em;
    color: var(--gold);
}

nav {
    display: flex;
    align-items: center;
    gap: 29px;
    font-size: .875rem;
}

nav a {
    white-space: nowrap;
}

.button {
    background: var(--gold);
    color: white;
    border: 1px solid var(--gold);
    padding: 17px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    font-size: .875rem;
    line-height: 1.4;
    transition: background .2s;
}

.button:hover {
    color: white;
    background: #f1e2b1;
}

.button-small {
    padding: 13px 20px;
}

.menu-toggle {
    display: none;
}

.hero {
    height: 590px;
    min-height: 470px;
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    background: #54514a;
    color: white;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 54%;
}

.hero:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(22,23,20,.48),rgba(22,23,20,.3));
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 35px 20px 70px;
}

.hero .eyebrow {
    color: #fff;
    letter-spacing: .27em;
    margin-bottom: 25px;
}

.hero h1 {
    font-size: clamp(2.6rem,4.7vw,4.6rem);
    letter-spacing: -.035em;
    line-height: 1.16;
    margin-bottom: 23px;
    text-shadow: 0 2px 22px #3333;
}

.hero h1 em {
    color: #f1e2b1;
}

.hero-content>p:not(.eyebrow) {
    font-size: 1rem;
    letter-spacing: .035em;
}

.hero-link {
    display: inline-flex;
    gap: 38px;
    align-items: center;
    border-bottom: 1px solid #ffffff80;
    padding: 8px 0;
    font-size: .875rem;
    margin-top: 9px;
}

.hero-link:hover,
.hero-scroll:hover {
    color: #f1e2b1;
}

.hero-scroll {
    position: absolute;
    bottom: 54px;
    z-index: 1;
    font-size: .65rem;
    letter-spacing: .19em;
    display: flex;
    gap: 22px;
}

.booking-wrap {
    position: relative;
    z-index: 2;
    margin-top: -28px;
    scroll-margin-top: 50px;
}

.booking {
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
    align-items: center;
    gap: 24px;
    background: #fff;
    box-shadow: 0 10px 45px #292b2910;
    border: 1px solid var(--line);
}

.booking-intro .eyebrow {
    font-size: .65rem;
    letter-spacing: .12em;
}

.booking-intro p {
    font-family: var(--serif);
    font-size: 1.1rem;
    margin: 4px 0 0;
    line-height: 1.4;
}

.booking label {
    display: grid;
    gap: 7px;
    font-size: .75rem;
    color: var(--muted);
    border-left: 1px solid var(--line);
    padding-left: 22px;
    min-width: 0;
}

.booking input,
.booking select {
    border: 0;
    border-radius: 0;
    background: white;
    color: var(--ink);
    width: 100%;
    min-width: 0;
    font-size: .875rem;
    height: 30px;
    padding: 0;
}

.booking-note {
    font-size: .75rem;
    text-align: right;
    color: var(--muted);
    margin: 10px 0 0;
}

.booking-feedback {
    background: var(--soft);
    padding: 16px 20px;
    margin: 15px 0 0;
    border-left: 2px solid var(--gold);
}

.intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    padding-bottom: 80px;
}

.intro-copy {
    padding-top: 8px;
    color: var(--muted);
    max-width: 510px;
}

.intro-copy p {
    font-size: 1rem;
}

.text-link {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    color: var(--gold);
    font-size: .875rem;
    border-bottom: 1px solid #f1e2b1;
    padding: 6px 0;
}

.rooms {
    padding-top: 10px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    gap: 25px;
}

.section-heading>p {
    font-size: .875rem;
    color: var(--muted);
    margin: 0 0 5px;
}

.room-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px;
}

.room-photo {
    position: relative;
    height: 325px;
    overflow: hidden;
    background: var(--soft);
}

.room-photo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center 68%;
    transition: transform .5s;
}

.room:first-child img {
    object-position: 32% 67%;
    transform: scale(1.07);
}

.room:hover img {
    transform: scale(1.035);
}

.room-photo>span {
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: white;
    padding: 5px 13px;
    font-size: .65rem;
    letter-spacing: .12em;
}

.room-title {
    margin: 23px 0 12px;
}

.room-title h3 {
    font-size: 1.45rem;
    margin-bottom: 8px;
}

.room-title>span {
    font-size: .75rem;
    color: var(--gold);
}

.room>p {
    font-size: .875rem;
    color: var(--muted);
    margin-bottom: 13px;
}

.services-band {
    background: var(--soft);
}

.services-band h2 {
    text-align: center;
}

.services-band .eyebrow {
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 50px;
    gap: 30px;
}

.services-grid article {
    border-top: 1px solid #d8d1c3;
    padding-top: 20px;
}

.service-number {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--gold-light);
}

.services-grid h3 {
    font-size: 1.4rem;
    margin: 15px 0;
}

.services-grid p {
    font-size: .875rem;
    color: var(--muted);
    margin: 0;
}

.contact {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 90px;
    align-items: center;
}

.contact-visual {
    position: relative;
    padding-bottom: 36px;
}

.contact-visual>img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.location-card {
    background: white;
    position: relative;
    margin: -35px 22px 0;
    padding: 23px 16px;
    text-align: center;
    box-shadow: 0 6px 25px #292b290b;
    border: 1px solid var(--line);
}

.location-card .eyebrow {
    font-size: .65rem;
}

.location-card p {
    font-size: .875rem;
    margin: 8px 0 0;
}

.location-card strong {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 400;
}

.location-card p span {
    margin: 0 12px;
    color: var(--gold);
}

.location-card small {
    font-size: .75rem;
    color: var(--muted);
}

address {
    font-style: normal;
    margin: 25px 0 18px;
    color: var(--muted);
}

.contact-links {
    display: grid;
    margin-bottom: 25px;
    font-size: .9375rem;
    overflow-wrap: anywhere;
}

.button-outline {
    color: var(--gold);
    background: transparent;
}

.footer {
    border-top: 1px solid var(--line);
    padding: 42px 0 20px;
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-bottom: 35px;
}

.footer-main p {
    font-family: var(--serif);
    font-style: italic;
    color: var(--muted);
    margin: 0;
}

.footer-main>a:last-child {
    font-size: .75rem;
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: .75rem;
}

.skip-link {
    position: absolute;
    left: 20px;
    top: -100px;
    background: white;
    padding: 12px;
    z-index: 20;
}

.skip-link:focus {
    top: 10px;
}

[hidden] {
    display: none!important;
}

@media (min-width:1500px){
    .hero {
        height: 660px;
    }
}

@media (max-width:1100px){
    nav {
        gap: 18px;
    }

    .header {
        padding-inline: 4%;
        gap: 20px;
    }

    .brand img {
        width: 210px;
    }

    .booking {
        gap: 15px;
        padding: 24px;
    }

    .booking-intro {
        display: none;
    }

    .booking {
        grid-template-columns: 1fr 1fr 1fr auto;
    }

    .booking label:first-of-type {
        border-left: 0;
        padding-left: 0;
    }

    .intro {
        gap: 55px;
    }

    .contact {
        gap: 45px;
    }

    .room-photo {
        height: 290px;
    }
}

@media (max-width:800px){
    .header {
        flex-wrap: wrap;
        padding: 20px 6%;
        min-height: 90px;
    }

    .menu-toggle {
        display: flex;
        gap: 14px;
        border: 1px solid var(--line);
        background: white;
        padding: 8px 12px;
        font-size: .875rem;
    }

    nav {
        width: 100%;
        flex-wrap: wrap;
        gap: 18px;
        justify-content: center;
    }

    .js nav {
        display: none;
    }

    .js nav.is-open {
        display: flex;
    }

    .hero {
        height: 540px;
    }

    .hero h1 {
        font-size: 3.1rem;
    }

    .booking {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .booking label {
        padding-left: 0;
        border: 0;
    }

    .booking .button {
        justify-content: center;
        align-self: end;
    }

    .booking-note {
        text-align: left;
    }

    .section {
        padding-block: 64px;
    }

    .intro {
        gap: 30px;
    }

    .room-grid {
        gap: 18px;
    }

    .room-photo {
        height: 245px;
    }

    .room-title h3 {
        font-size: 1.2rem;
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
        gap: 18px;
    }

    .contact {
        gap: 35px;
    }

    .contact-visual>img {
        height: 370px;
    }

    .location-card {
        margin-inline: 10px;
    }

    .location-card p span {
        margin: 0 3px;
    }

    .footer-main {
        flex-wrap: wrap;
    }

    .footer-main p {
        display: none;
    }
}

@media (max-width:580px){
    .container {
        width: 88%;
    }

    .brand img {
        width: 190px;
    }

    .brand span {
        font-size: .6rem;
    }

    .hero {
        height: 480px;
        min-height: 0;
    }

    .hero h1 {
        font-size: 2.55rem;
    }

    .hero .eyebrow {
        font-size: .65rem;
        letter-spacing: .16em;
    }

    .hero-content {
        padding-bottom: 40px;
    }

    .hero-scroll {
        bottom: 43px;
    }

    .booking-wrap {
        margin-top: -20px;
    }

    .booking {
        padding: 22px 18px;
        gap: 20px 16px;
    }

    .booking .button {
        padding: 14px 12px;
        gap: 8px;
    }

    .intro,
    .contact {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .intro {
        padding-bottom: 45px;
    }

    .room-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .rooms {
        padding-top: 0;
    }

    .room-photo {
        height: 340px;
    }

    .room-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .room-title h3 {
        font-size: 1.4rem;
    }

    .room-title>span {
        white-space: nowrap;
    }

    .services-grid {
        gap: 27px 20px;
        margin-top: 35px;
    }

    .services-grid h3 {
        font-size: 1.2rem;
    }

    .services-band h2,
    .services-band .eyebrow {
        text-align: left;
    }

    .contact-visual {
        padding: 0;
    }

    .contact-visual>img {
        height: 280px;
    }

    .contact-copy {
        padding-top: 12px;
    }

    .footer-main {
        align-items: flex-start;
        gap: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .footer-main .brand img {
        width: 180px;
    }
}

@media (prefers-reduced-motion:reduce){
    html {
        scroll-behavior: auto;
    }

    *,
    *:before,
    *:after {
        transition: none!important;
    }
}

/* Composition inspired by the supplied mockup; hotel-specific content is preserved. */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    color: white;
    border-bottom: 1px solid #ffffff26;
}

.header .brand img {
    filter: none;
    opacity: 1;
}

.header .brand span {
    color: #f1e2b1;
}

.header nav>a:hover {
    color: #f1e2b1;
}

.header .menu-toggle {
    color: white;
    background: #27292380;
    border-color: #ffffff60;
}

.hero {
    height: 620px;
    text-align: left;
    place-items: center start;
}

.hero-image {
    object-position: center 57%;
}

.hero:after {
    background: linear-gradient(90deg,rgba(22,23,20,.67),rgba(22,23,20,.15)),linear-gradient(180deg,#171b2055,transparent 40%);
}

.hero-content {
    width: min(1220px,88%);
    margin-inline: auto;
    padding: 105px 0 50px;
}

.hero h1 {
    font-size: clamp(2.6rem,4.2vw,4.15rem);
}

.hero-scroll {
    left: 6%;
    bottom: 60px;
}

.hero-link {
    background: var(--gold);
    padding: 13px 22px;
    border: 0;
}

.hero-link:hover {
    background: #f1e2b1;
    color: white;
}

.booking-wrap {
    width: min(1050px,88%);
    margin-top: -35px;
}

.booking {
    grid-template-columns: 1fr 1fr .7fr .7fr auto;
    border-radius: 4px;
    gap: 22px;
    padding: 25px;
}

.booking label {
    border: 0;
    padding: 0;
}

.booking input,
.booking select {
    border: 1px solid var(--line);
    height: 40px;
    padding: 6px 9px;
}

.booking .button {
    align-self: end;
    height: 40px;
    padding-block: 9px;
}

.booking-note {
    text-align: center;
}

.rooms {
    padding-top: 45px;
    padding-bottom: 40px;
}

.section-heading {
    display: block;
    text-align: center;
    margin-bottom: 32px;
}

.section-heading>p {
    margin-top: 18px;
}

.room-photo {
    height: 235px;
}

.room {
    border: 1px solid var(--line);
    padding-bottom: 23px;
}

.room-photo>span {
    display: none;
}

.room-title,
.room>p,
.room>.text-link {
    margin-left: 22px;
    margin-right: 22px;
}

.room-title h3 {
    color: var(--gold);
}

.room-title {
    margin-top: 20px;
}

.intro {
    border-top: 1px solid var(--line);
    padding-top: 55px;
    padding-bottom: 65px;
}

.services-band .section {
    padding-block: 60px;
}

@media (max-width:1100px){
    .header nav {
        gap: 16px;
    }

    .header .brand img {
        width: 200px;
    }

    .booking {
        gap: 15px;
    }

    .room-photo {
        height: 220px;
    }
}

@media (max-width:800px){
    .header nav {
        background: #292b29;
        padding: 20px;
    }

    .hero-content {
        padding-top: 140px;
    }

    .hero {
        height: 590px;
    }

    .booking {
        grid-template-columns: 1fr 1fr;
    }

    .booking .button {
        grid-column: 1/-1;
        justify-content: center;
    }

    .room-photo {
        height: 200px;
    }

    .room-title,
    .room>p,
    .room>.text-link {
        margin-left: 15px;
        margin-right: 15px;
    }

    .room-title h3 {
        font-size: 1.15rem;
    }

    .header .brand img {
        width: 210px;
    }
}

@media (max-width:580px){
    .hero {
        height: 570px;
    }

    .hero h1 {
        font-size: 2.6rem;
    }

    .hero-content {
        padding-top: 50px;
    }

    .hero-scroll {
        bottom: 65px;
    }

    .hero-image {
        object-position: 62% center;
    }

    .header .brand img {
        width: 190px;
    }

    .booking {
        gap: 14px;
    }

    .room-photo {
        height: 280px;
    }

    .room-title {
        display: block;
    }

    .room-title h3 {
        font-size: 1.5rem;
    }

    .rooms {
        padding-top: 36px;
    }

    .intro {
        padding-block: 45px;
    }

    .booking-note {
        font-size: .75rem;
    }
}

/* Modern typography shared by all text elements. */
h1,
h2,
h3 {
    font-weight: 400;
    letter-spacing: -.025em;
}

nav {
    font-size: .8125rem;
    gap: 22px;
}

.hero h1 {
    line-height: 1.22;
}

.room-title h3 {
    font-size: 1.3rem;
}

.brand span {
    font-family: var(--sans);
}

@media (min-width:801px) and (max-width:1100px){
    .header nav {
        gap: 12px;
        font-size: .75rem;
    }

    .header .button-small {
        padding: 12px;
    }

    .header .brand img {
        width: 180px;
    }
}

/* Fixed navigation remains legible over every section. */
.header {
    position: fixed;
    background: rgba(255,255,255,.97);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 14px #292b2908;
}

.header .brand img {
    filter: brightness(0) saturate(100%);
    opacity: .8;
}

.header .brand span {
    color: var(--gold);
}

.header nav>a:hover {
    color: var(--gold);
}

.header nav>a.button:hover {
    color: white;
}

.header .menu-toggle {
    background: white;
    color: var(--ink);
    border-color: var(--line);
}

@media (max-width:800px){
    .header nav {
        background: white;
    }
}

.language-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    white-space: nowrap;
}

.header nav {
    gap: 18px;
}

@media (min-width:801px) and (max-width:1200px){
    .header {
        padding-inline: 3%;
        gap: 15px;
    }

    .header nav {
        gap: 11px;
        font-size: .75rem;
    }

    .header .brand img {
        width: 180px;
    }

    .header .button-small {
        padding: 12px;
    }

    .header .brand span {
        letter-spacing: .2em;
    }
}

@media (max-width:580px){
    html[lang="en"] .hero h1 {
        font-size: 2.4rem;
    }
}

.room-details,
.room-grid .room > button.text-link {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f1e2b1;
    font-family: inherit;
    cursor: pointer;
}

.dialog-open {
    overflow: hidden;
}

.room-dialog {
    width: min(940px,94vw);
    max-height: 90dvh;
    padding: 0;
    border: 0;
    background: white;
    color: var(--ink);
    overflow: auto;
    box-shadow: 0 20px 80px #0004;
}

.room-dialog::backdrop {
    background: #171b20b3;
    backdrop-filter: blur(4px);
}

.dialog-close {
    position: sticky;
    top: 12px;
    float: right;
    z-index: 2;
    margin: 12px 12px -56px 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: white;
    color: var(--ink);
    font-size: 1.8rem;
    line-height: 1;
}

.detail-gallery {
    position: relative;
    background: var(--soft);
}

.detail-gallery>img {
    width: 100%;
    height: 380px;
    object-fit: contain;
    background: #edece7;
}

.gallery-arrow {
    position: absolute;
    top: 45%;
    width: 44px;
    height: 48px;
    border: 0;
    background: #fffffff2;
    color: var(--gold);
    font-size: 2rem;
    line-height: 1;
}

.gallery-prev {
    left: 15px;
}

.gallery-next {
    right: 15px;
}

#gallery-caption {
    margin: 0;
    padding: 10px 18px;
    background: var(--soft);
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
}

.detail-body {
    padding: 32px 40px 40px;
}

.detail-body h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.detail-body>p:not(.eyebrow) {
    color: var(--muted);
}

.detail-body h3 {
    font-size: 1.1rem;
    margin-top: 28px;
}

.amenities {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px 25px;
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.amenities li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .8125rem;
    line-height: 1.5;
}

.amenities svg {
    color: var(--gold);
    flex-shrink: 0;
}

.equipment-note {
    font-size: .75rem;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

@media (max-width:580px){
    .detail-gallery>img {
        height: 270px;
    }

    .detail-body {
        padding: 24px;
    }

    .detail-body h2 {
        font-size: 1.6rem;
    }

    .amenities {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .amenities li {
        align-items: flex-start;
        font-size: .75rem;
        gap: 8px;
    }

    .room-dialog {
        max-height: 94dvh;
    }
}

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

.hero-slides .hero-image {
    opacity: 0;
    transition: opacity 1.2s ease;
    object-position: center;
    pointer-events: none;
}

.hero-slides .hero-image.is-active {
    opacity: 1;
}

.hero-controls {
    position: absolute;
    z-index: 2;
    right: 6%;
    bottom: 60px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.hero-controls button {
    background: #20241f65;
    color: white;
    border: 1px solid #ffffff60;
    min-height: 44px;
    min-width: 44px;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

.hero-pause {
    padding: 8px 14px;
}

.hero-dots {
    display: flex;
    gap: 7px;
}

.hero-dots button[aria-pressed="true"] {
    background: white;
    color: var(--ink);
    border-color: white;
}

@media (max-width:580px){
    .hero-scroll {
        bottom: 112px;
    }

    .hero-controls {
        left: 6%;
        right: auto;
        bottom: 55px;
    }

    .hero-slides .hero-image {
        object-position: 65% center;
    }
}

/* Compact hero controls; full-sized transparent hit areas remain accessible. */
.hero-controls {
    gap: 8px;
}

.hero-controls .hero-pause {
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: white;
}

.hero-dots {
    gap: 0;
}

.hero-controls .hero-dots button,
.hero-controls .hero-dots button[aria-pressed="true"] {
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 36px;
    min-height: 44px;
    color: white;
}

.hero-dot {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: white;
    opacity: .5;
    transition: opacity .2s;
}

.hero-dots button[aria-pressed="true"] .hero-dot {
    opacity: 1;
}

/* Unified gold palette requested for the entire site. */
.button,
.button:hover,
.header nav>a.button:hover,
.hero-link,
.hero-link:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.button-outline {
    background: transparent;
    color: var(--ink);
}

.button-outline:hover {
    background: var(--gold);
    color: var(--ink);
}

.language-switch select {
    min-height: 44px;
    min-width: 68px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: white;
    color: var(--ink);
    font-family: var(--sans);
    font-size: .8125rem;
    cursor: pointer;
}

/* Transparent fixed header, inverted against the content beneath it. */
.header {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    mix-blend-mode: difference;
    color: #fff;
    opacity: 80%;
}

.header .brand img {
    filter: none;
    opacity: 1;
}

.header .brand span,
.header nav>a,
.header nav>a:hover {
    color: #fff;
}

.header .button,
.header .button:hover,
.header nav>a.button:hover {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.header .menu-toggle {
    background: transparent;
    border-color: rgba(255, 255, 255, 0);
    color: #fff;
}

.header .language-switch select {
    background: transparent;
    border-color: #ffffff80;
    color: #fff;
    color-scheme: dark;
}

.header .language-switch option {
    background: #fff;
    color: #292b29;
}

@media (max-width:800px){
    .header nav {
        background: transparent;
    }
}

/* Stronger top overlay keeps the transparent navigation distinct over photographs. */
.hero:after {
    background: linear-gradient(180deg,rgba(10,15,20,.86) 0%,rgba(10,15,20,.5) 20%,transparent 48%),linear-gradient(90deg,rgba(22,23,20,.6),rgba(22,23,20,.18));
    pointer-events: none;
}

.cookie-banner {
    position: fixed;
    z-index: 20;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px,calc(100% - 32px));
    max-height: 80dvh;
    overflow: auto;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 8px 60px #0003;
    padding: 25px 30px;
}

.cookie-banner h2 {
    font-size: 1.3rem;
    margin: 0 0 12px;
}

.cookie-banner p {
    font-size: .8125rem;
    margin: 0 0 16px;
    color: var(--muted);
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-actions .button {
    min-height: 44px;
    padding: 11px 18px;
}

.cookie-options {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.cookie-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .875rem;
    margin-bottom: 12px;
}

.cookie-options input {
    width: 20px;
    height: 20px;
    accent-color: #292b29;
}

.cookie-settings {
    background: transparent;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: .75rem;
    padding: 12px 0;
    cursor: pointer;
}

@media (max-width:580px){
    .cookie-banner {
        bottom: 10px;
        padding: 20px;
    }

    .cookie-actions .button {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* A dark surface keeps fixed navigation readable once the page is scrolled. */
.header.is-scrolled {
    background: rgba(22,26,29,.94);
    mix-blend-mode: normal;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 3px 18px #0002;
    border-bottom: 1px solid #ffffff26;
}

/* Remove browser-native focus outlines as well as custom focus styling. */
*:focus,
*:focus-visible {
    outline: none!important;
    box-shadow: none!important;
}

button::-moz-focus-inner {
    border: 0;
}

/* Keep the navigation booking CTA identical to the search action. */
.header {
    mix-blend-mode: normal;
}

.header:not(.is-scrolled) .brand,
.header:not(.is-scrolled) nav>a:not(.button),
.header:not(.is-scrolled) .menu-toggle,
.header:not(.is-scrolled) .language-switch {
    mix-blend-mode: difference;
}

.header nav>a.button,
.header nav>a.button:hover {
    background: var(--gold);
    border: 1px solid var(--gold);
    color: var(--ink);
    height: 40px;
    padding: 9px 24px;
    font-size: .875rem;
    line-height: 1.4;
}

/* Consistent rounded corners for buttons and button-styled links. */
button,
.button,
.hero-link {
    border-radius: 8px;
}

.dialog-close {
    border-radius: 50%;
}

/* Full-screen mobile navigation, independent of the desktop header layout. */
.mobile-menu-close {
    display: none;
}

@media (max-width:800px){
    body.mobile-menu-open {
        overflow: hidden;
    }

    .header nav>a.button {
        display: none!important;
    }

    .js .header #navigation {
        display: none;
    }

    .js .header #navigation.is-open {
        display: flex;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: 100px 8% 50px;
        background: #191e22;
        color: white;
        z-index: 100;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: 28px;
        overflow-y: auto;
        mix-blend-mode: normal;
    }

    .header #navigation.is-open>a:not(.button) {
        font-size: clamp(1.5rem,5vw,2.25rem);
        line-height: 1.3;
        white-space: normal;
        color: white;
        mix-blend-mode: normal;
    }

    .header #navigation.is-open .language-switch {
        margin-top: 15px;
        mix-blend-mode: normal;
    }

    .header #navigation.is-open .language-switch select {
        font-size: 1rem;
        min-width: 85px;
    }

    .header #navigation.is-open .mobile-menu-close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 22px;
        right: 6%;
        width: 48px;
        height: 48px;
        padding: 0;
        background: transparent;
        border: 1px solid #ffffff60;
        color: white;
        font-size: 2rem;
        line-height: 1;
    }

    .mobile-menu-open .header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        mix-blend-mode: normal;
        z-index: 50;
    }
}

@media (max-width:800px) and (max-height:500px){
    .js .header #navigation.is-open {
        justify-content: flex-start;
        gap: 15px;
        padding-top: 85px;
    }
}

/* Opaque mobile menu and compact language buttons. */
.mobile-language-buttons {
    display: none;
}

@media (max-width:800px){
    .mobile-menu-open .header,
    .mobile-menu-open .header.is-scrolled {
        background: #191e22;
        opacity: 1;
        mix-blend-mode: normal;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .js .header #navigation.is-open {
        background: #191e22;
        opacity: 1;
        mix-blend-mode: normal;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .header .language-switch #language-select {
        display: none;
    }

    .header .mobile-language-buttons {
        display: flex;
        align-items: center;
        gap: 12px;
        color: white;
    }

    .header .mobile-language-buttons button {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        font: inherit;
        font-size: 1rem;
        color: white;
    }

    .header .mobile-language-buttons button[aria-pressed="true"] {
        color: var(--gold);
        border-bottom-color: var(--gold);
        font-weight: 600;
    }
}

/* Shared FR / EN controls live outside the navigation panel. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.header .mobile-language-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
}

.header .mobile-language-buttons button {
    min-width: 36px;
    min-height: 44px;
    padding: 8px 4px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font: inherit;
    font-size: .8125rem;
    color: white;
}

.header .mobile-language-buttons button[aria-pressed="true"] {
    color: var(--gold);
    border-bottom-color: var(--gold);
    font-weight: 600;
}

@media (min-width:801px){
    .header #navigation {
        margin-left: auto;
    }

    .header {
        gap: 20px;
    }
}

@media (max-width:800px){
    .header {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .header-actions {
        gap: 10px;
    }

    .header .language-switch {
        margin: 0;
    }

    .mobile-menu-open .header-actions {
        visibility: hidden;
    }
}

@media (max-width:420px){
    .header {
        padding-inline: 4%;
        gap: 8px;
    }

    .header .brand img {
        width: 150px;
    }

    .header .brand span {
        font-size: .5rem;
        letter-spacing: .18em;
    }

    .header-actions {
        gap: 6px;
    }

    .header .mobile-language-buttons button {
        min-width: 30px;
    }

    .header .menu-toggle {
        font-size: .75rem;
        padding: 8px;
        gap: 7px;
    }
}

@media (max-width:350px){
    .header .brand img {
        width: 125px;
    }

    .header .brand span {
        letter-spacing: .1em;
    }

    .header-actions {
        gap: 3px;
    }
}

/* Mobile menu entrance and language controls to the right of Menu. */
@keyframes mobile-menu-fade-in{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width:800px){
    .header-actions .menu-toggle {
        order: 0;
    }

    .header-actions .language-switch {
        order: 1;
    }

    .js .header #navigation.is-open {
        animation: mobile-menu-fade-in .3s ease-out both;
    }
}

@media (prefers-reduced-motion:reduce){
    .js .header #navigation.is-open {
        animation: none;
    }
}

/* Fine-line service pictograms in the shared gold palette. */
.service-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;color:var(--gold);margin-bottom:2px}
.service-icon svg{display:block;overflow:visible}

.availability-room{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}.availability-room h4{margin:0 0 8px}.availability-room p{margin:4px 0;font-size:.875rem}.availability-room .button{flex-shrink:0}.booking button:disabled{opacity:.6;cursor:wait}@media(max-width:580px){.availability-room{align-items:flex-start;flex-direction:column}}

.stay-details{width:min(560px,calc(100% - 32px));max-height:85dvh;overflow:auto;border:0;border-radius:16px;padding:28px;color:#292c29;background:#fff}.stay-details::backdrop{background:rgba(0,0,0,.65)}.stay-details form{display:grid;gap:14px;margin:20px 0}.stay-details label{display:grid;gap:6px}.stay-details input{width:100%;box-sizing:border-box;padding:12px;border:1px solid #ddd;border-radius:8px;font:inherit}.stay-details .button{margin:8px 8px 0 0}.stay-details button:disabled{opacity:.5;cursor:not-allowed}

.child-ages{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;padding-top:12px}.child-ages label{flex:1;min-width:150px}.child-ages p{flex-basis:100%;font-size:12px}.stay-details .stay-option{display:flex;align-items:center;gap:12px}.stay-details .stay-option input{width:18px;height:18px;flex-shrink:0}.breakfast-option{display:flex;align-items:center;gap:12px}.breakfast-info{font-size:24px;background:transparent;border:0;cursor:pointer;min-width:44px;min-height:44px}.breakfast-dialog img{width:100%;max-height:280px;object-fit:cover;border-radius:10px}.category-price{font-weight:600}

/* Same structure for database categories and initial room cards. */
.room-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch}
.room-grid>.room{min-width:0;display:flex;flex-direction:column}
.room-grid>.room[hidden]{display:none!important}
.room-grid .room-photo{height:235px;flex-shrink:0}
.room-grid .room-photo-illustration>.room-photo-caption{display:block;font-size:10px;letter-spacing:.03em}
.room-grid .room-title{display:block;min-width:0}
.room-grid .room-title h3{overflow-wrap:anywhere;line-height:1.3}
.room-grid .room-card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.room-grid .category-price{margin-top:auto;padding-top:12px;font-size:1.05rem;font-weight:600;color:var(--ink)}
.room-grid .room>.text-link{align-self:flex-start}
@media(max-width:600px){.room-grid{grid-template-columns:minmax(0,1fr)}}

.stay-price-summary{background:#faf7ed;border:1px solid #f1e2b1;border-radius:14px;padding:22px;margin-top:12px}.stay-price-summary h3{font-size:1rem;margin:0 0 16px}.stay-price-row{display:flex;justify-content:space-between;gap:16px;font-size:.875rem;padding:7px 0}.stay-total-row{border-top:1px solid #d6cba7;margin-top:12px;padding-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.stay-total-row>span{font-weight:600}.stay-total-row strong{font-size:clamp(1.6rem,5vw,2.25rem);font-weight:700;letter-spacing:-.04em;color:#242d2b}.stay-details .stay-total-note{font-size:.75rem;line-height:1.6;margin:12px 0 0;color:#555}.stay-breakfast-basis{font-size:.8rem;color:#666;margin:0}.stay-occupancy{font-weight:600}

.test-booking-notice{padding:16px;border:1px solid #d7ae51;background:#fff5d8;border-radius:10px;font-size:.85rem}.test-card-fields{border:1px dashed #bda66a;border-radius:10px;padding:16px;display:grid;gap:12px}.test-card-fields input[readonly]{background:#f1f2ef;color:#666}.test-card-fields select{font:inherit;max-width:100%;padding:10px}

.stay-child-ages h3{font-size:1rem;margin:0 0 8px}.stay-child-ages p{margin:4px 0}


.good-deals h2 { text-align: center; }
.good-deals-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.good-deals-grid article { overflow-wrap: anywhere; }
.good-deals-grid p + p { margin-top: 12px; }
.good-deals-grid .good-deal-price { font-weight: 600; color: var(--ink); }
.good-deals-grid .text-link { display: block; margin-top: 14px; font-size: .875rem; }
.good-deals-note { text-align: center; margin: 40px 0 0; color: var(--muted); }
@media (max-width: 900px) { .good-deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .good-deals-grid { grid-template-columns: 1fr; } }
.date-range-trigger{width:100%;padding:12px 10px;background:white;border:1px solid var(--line);border-radius:8px;font:inherit;text-align:left;cursor:pointer;min-height:48px}.date-range-dialog{width:min(760px,94vw);padding:28px;border:0;border-radius:18px;max-height:90dvh;overflow:auto;color:var(--ink);background:white}.date-range-dialog::backdrop{background:#18202099}.range-heading,.range-navigation,.range-actions{display:flex;justify-content:space-between;align-items:center;gap:15px}.range-heading h2{font-size:1.5rem}.range-heading button,.range-navigation button{border:1px solid var(--line);background:white;border-radius:8px;font-size:25px;width:40px;height:40px;cursor:pointer}.range-months{display:grid;grid-template-columns:1fr 1fr;gap:28px}.range-months h3{text-transform:capitalize;text-align:center;margin:15px 0}.range-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;gap:3px}.range-grid>span{font-size:11px;padding:6px 0}.range-grid button{aspect-ratio:1;border:0;background:transparent;border-radius:7px;cursor:pointer;font:inherit}.range-grid .range-selected{background:#f1e2b1;color:#242726;font-weight:700}.range-grid .range-between{background:#f1e2b166}.range-grid button:disabled{opacity:.25;cursor:default}.range-grid button:focus-visible{outline:2px solid #70623b;outline-offset:1px}.range-summary,.range-instruction{margin:18px 0}.range-actions{justify-content:flex-end}.brand-stars{font-size:14px;letter-spacing:4px;display:block;margin-top:8px}.brand{flex-wrap:wrap}.brand-stars{flex-basis:100%}@media(max-width:600px){.range-months{grid-template-columns:1fr}.date-range-dialog{padding:18px}.range-heading h2{font-size:1.2rem}}

.range-grid button.range-today,.today-marker,.fc .fc-day-today .fc-daygrid-day-number,.fc .fc-day-today .fc-col-header-cell-cushion{background:#000!important;color:#fff!important;border-radius:50%!important;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}.range-grid button.range-today.range-selected{box-shadow:0 0 0 3px #f1e2b1}.today-marker{width:32px;height:32px}

.category-photo-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 0}.category-photo-strip[hidden]{display:none}.category-photo-thumb{flex:0 0 85px;padding:0;border:0;background:transparent;border-radius:8px;overflow:hidden;cursor:pointer}.category-photo-thumb img{display:block;width:85px;height:65px;object-fit:cover}

.stay-details .booking-status.booking-success{display:block;width:100%;box-sizing:border-box;padding:20px 22px;margin:20px 0;background:#e7f5eb!important;color:#186236!important;border:1px solid #a2d5b1;border-left:5px solid #26834a;border-radius:12px;font-weight:600;line-height:1.6}.stay-details .booking-status.booking-error{color:#a12c2c}

.stay-cancellation{white-space:pre-line;border-top:1px solid #e0d7bc;padding-top:18px;font-size:14px;line-height:1.7}.special-offers-button{display:block;margin:20px auto}.stay-practical-info{margin:30px auto;padding:24px;background:#faf7ef;text-align:center}.offers-dialog article{padding:16px 0;border-bottom:1px solid #e0d7bc}

.night-price-group{padding:14px 0;border-top:1px solid #e4dcc4}.night-price-group h4{margin:0 0 8px}.night-price-group p{font-size:14px;margin:6px 0}.offers-dialog{width:min(900px,94vw)}.offers-dialog #booking-form{margin:20px 0;box-shadow:none}.offer-book{margin:0 0 20px}

.offers-dialog .offer-list-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-top:1px solid #e6e1d5}
.offers-dialog .offer-list-row p{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.7}
.offers-dialog .offer-list-row .offer-book{flex:0 0 auto;width:auto;min-height:38px;margin:0;padding:9px 14px;font-size:12px;line-height:1.4;white-space:nowrap}
@media(max-width:520px){.offers-dialog .offer-list-row{gap:12px;flex-wrap:wrap}.offers-dialog .offer-list-row p{flex-basis:100%}.offers-dialog .offer-list-row .offer-book{margin-left:auto}}

.offers-dialog .offer-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}
.offers-dialog article.offer-card{padding:24px;border:1px solid #e6ddc7;border-top:4px solid #f1e2b1;border-radius:16px;background:linear-gradient(145deg,#faf7ee,#fff 65%);box-shadow:0 8px 24px #242d2b08;min-width:0}
.offers-dialog .offer-card>h3{font-size:23px;font-weight:500;margin:0 0 18px;color:#242d2b}
.offers-dialog .offer-card .offer-list-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:18px 0;border-top:1px solid #e6ddc7}
.offers-dialog .offer-card .offer-list-row:last-child{padding-bottom:0}
.offers-dialog .offer-room-info h4{font-size:15px;margin:0 0 8px;font-weight:600}
.offers-dialog .offer-room-info .offer-dates{font-size:12px;color:#747870;margin:0 0 14px}
.offers-dialog .offer-room-info .offer-price{font-size:12px;color:#747870;margin:0}
.offers-dialog .offer-price strong{font-size:25px;color:#242d2b;font-weight:600}
.offers-dialog .offer-card .offer-book{align-self:flex-end;margin:0;font-size:12px;padding:10px 16px}
.offers-footnote{grid-column:1/-1;font-size:13px;color:#747870;line-height:1.7}
@media(max-width:620px){.offers-dialog .offer-cards{grid-template-columns:1fr}.offers-dialog article.offer-card{padding:20px}}

/* Secure card entry is hosted by Saferpay, never native card inputs. */
.saferpay-card-fields{border:1px solid #f1e2b1;border-radius:16px;padding:20px;margin:24px 0;display:grid;gap:12px}.saferpay-card-fields legend{padding:0 8px}.saferpay-card-fields p{margin:0 0 6px}.saferpay-card-fields iframe{width:100%;border:0}

.experience-footer-links{display:flex;gap:24px;flex-wrap:wrap;padding-block:20px}.experience-footer-links a{color:inherit;text-underline-offset:5px}