/* ==========================================================================
   Hotel Jagdish Residency — site styles
   Hand-written, no build step: there is no node/npm on this Mac or on the
   Hostinger server, so a Tailwind/Vite pipeline cannot run. See
   docs/02-architecture.md.
   ========================================================================== */

:root {
    /* The hotel's logo colours, re-sampled from the CENTRE of the artwork.
       The first pass read the vignetted corners (#0b3231) and produced a
       palette noticeably darker and duller than the logo itself.

           logo teal   #23544e   (brightest quarter #275a54)
           gold        #f1db79 highlight / #daba55 core / #bb9a40 deep

       Accent gold is the CTA colour and must always carry dark text. */
    --ink:            #10322e;
    --ink-2:          #1c4a44;
    --brand:          #23544e;
    --brand-700:      #17403b;
    --brand-900:      #0e2c28;
    --brand-100:      #e7f1ef;
    --accent:         #daba55;
    --accent-500:     #f1db79;
    --accent-600:     #bb9a40;
    --accent-100:     #fbf4e0;
    --good:           #16794f;
    --good-100:       #e3f5ee;
    --danger:         #c2410c;
    --danger-100:     #ffede4;

    --text:           #17211f;
    --text-muted:     #566461;
    --text-faint:     #86928f;
    --line:           #e2e8e6;
    --line-strong:    #ccd6d3;
    --surface:        #ffffff;
    --surface-2:      #f5f8f7;
    --surface-3:      #e9f0ee;

    --radius-sm:      8px;
    --radius:         14px;
    --radius-lg:      22px;

    --shadow-sm:      0 1px 2px rgba(16, 50, 46, .06), 0 1px 3px rgba(16, 50, 46, .05);
    --shadow:         0 4px 12px rgba(16, 50, 46, .07), 0 2px 4px rgba(16, 50, 46, .04);
    --shadow-lg:      0 18px 40px rgba(16, 50, 46, .13), 0 4px 12px rgba(16, 50, 46, .06);
    --shadow-brand:   0 12px 28px rgba(35, 84, 78, .22);

    --container:      1180px;
    --header-h:       68px;

    --ease-out:       cubic-bezier(.22, .61, .36, 1);
    --ease-spring:    cubic-bezier(.34, 1.36, .64, 1);
}

/* --------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

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

/* Inline icons size to their text by default. Without this an icon dropped
   into a context with no explicit rule renders at its full intrinsic size. */
.icon { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -.15em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); }
p  { margin: 0 0 1rem; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--brand); color: #fff; padding: .75rem 1.25rem;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------- primitives --- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 1.75rem);
}

.section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.section--tint { background: var(--surface-2); }

.section__head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section__eyebrow {
    display: inline-block;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-600);
    margin-bottom: .5rem;
}
.section__sub { color: var(--text-muted); margin: 0; font-size: 1.03rem; }

.btn {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.5rem;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 0; border-radius: var(--radius-sm);
    font-weight: 650; font-size: .97rem; line-height: 1.2;
    cursor: pointer; text-decoration: none;
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
                background-color .18s var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn--accent  { --btn-bg: var(--accent); --btn-fg: #26200f; }
.btn--accent:hover { --btn-bg: var(--accent-600); }
.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--brand); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--brand-100); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    font-size: .78rem; font-weight: 650; line-height: 1.3;
    background: var(--surface-3); color: var(--text-muted);
}
.badge--good   { background: var(--good-100);   color: var(--good); }
.badge--urgent { background: var(--danger-100); color: var(--danger); }
.badge--accent { background: var(--accent-100); color: var(--accent-600); }

.stars { display: inline-flex; gap: 1px; color: var(--accent); vertical-align: middle; }
.stars svg { width: 15px; height: 15px; }

/* Rating block in the OTA idiom: score in a solid tile, label beside it. */
.score {
    display: inline-flex; align-items: center; gap: .6rem;
}
.score__box {
    background: var(--brand); color: #fff;
    font-weight: 750; font-size: 1.02rem;
    padding: .45rem .6rem;
    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 2px;
    min-width: 2.9rem; text-align: center;
}
.score__label { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.score__count { color: var(--text-muted); font-size: .82rem; }

/* --------------------------------------------------------------- header --- */

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.site-header__inner {
    height: var(--header-h);
    display: flex; align-items: center; gap: 1.25rem;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand__mark {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand), var(--brand-700));
    color: #fff; border-radius: 11px;
    font-weight: 800; font-size: .95rem; letter-spacing: -.03em;
}
.brand__name { font-weight: 750; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.02em; }
.brand__place { font-size: .76rem; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.site-nav__link {
    color: var(--text); font-size: .93rem; font-weight: 550; text-decoration: none;
    position: relative; padding-block: .35rem;
}
.site-nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease-out);
}
.site-nav__link:hover { text-decoration: none; }
.site-nav__link:hover::after { transform: scaleX(1); }

.header-phone {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 650; font-size: .93rem; color: var(--brand); text-decoration: none;
}
.header-phone:hover { text-decoration: none; }
.header-phone svg { width: 17px; height: 17px; }

.nav-toggle {
    display: none; margin-left: auto;
    background: none; border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); padding: .5rem .6rem; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
    .site-nav {
        position: fixed; inset: var(--header-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--line);
        padding: .5rem 1rem 1rem;
        box-shadow: var(--shadow);
        transform: translateY(-8px); opacity: 0; pointer-events: none;
        transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
    }
    .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
    .site-nav__link { padding: .8rem .25rem; border-bottom: 1px solid var(--line); }
    .site-nav__link::after { display: none; }
    .nav-toggle { display: block; }
    .site-nav .header-phone, .site-nav .btn { margin-top: .75rem; }
}

/* ----------------------------------------------------------------- hero --- */

.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
/* Two layers rather than one flat wash: a strong scrim on the left where the
   headline sits, and a lighter vertical one for the header and the search bar
   overlap. A single heavy gradient made the photograph almost invisible. */
.hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(95deg,
            rgba(11,40,36,.94) 0%,
            rgba(11,40,36,.86) 38%,
            rgba(11,40,36,.60) 68%,
            rgba(11,40,36,.38) 100%),
        linear-gradient(180deg,
            rgba(11,40,36,.58) 0%,
            rgba(11,40,36,.30) 34%,
            rgba(11,40,36,.70) 100%);
}

/* Narrow screens have no empty right-hand side to lighten, so the text needs
   the vertical scrim to carry the contrast on its own. */
@media (max-width: 760px) {
    .hero__media::after {
        background: linear-gradient(180deg,
            rgba(11,40,36,.86) 0%,
            rgba(11,40,36,.80) 40%,
            rgba(11,40,36,.92) 100%);
    }
}
.hero__media .placeholder-img::after {
    position: absolute; right: 1.25rem; bottom: 1.25rem;
    font-size: .68rem; opacity: .55;
}
.hero__media img, .hero__media .placeholder-img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 24%;
    /* Slow drift keeps the hero alive without the jank of scroll parallax. */
    animation: hero-drift 26s var(--ease-out) infinite alternate;
}
@keyframes hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__media img, .hero__media .placeholder-img { animation: none; transform: scale(1.04); }
}

.hero__inner {
    position: relative;
    padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(6rem, 11vw, 8.5rem);
    color: #fff;
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
    max-width: 100%;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
    padding: .4rem .85rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em;
    margin-bottom: 1.1rem;
}
.hero h1 {
    color: #fff; max-width: 16ch; margin-bottom: .75rem;
    text-shadow: 0 2px 18px rgba(11, 40, 36, .55);
}
.hero__lede {
    font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
    color: rgba(255,255,255,.92); max-width: 52ch;
    text-shadow: 0 1px 12px rgba(11, 40, 36, .5);
}
.hero__place { text-shadow: 0 1px 10px rgba(11, 40, 36, .5); }

.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.hero__meta .score__box {
    background: #fff;
    color: var(--brand);
    box-shadow: 0 2px 10px rgba(11, 40, 36, .45), 0 0 0 1px rgba(11, 40, 36, .18);
}
.hero__meta .score__label { color: #fff; }
.hero__meta .score__count { color: rgba(255,255,255,.75); }
.hero__place { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.9); font-size: .95rem; }
.hero__place svg { width: 17px; height: 17px; flex: none; }

.hero__trust { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.hero__trust .badge { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* -------------------------------------------------------- search widget --- */
/* The single most important element on the page: it overlaps the hero the way
   every OTA does, so the first action a visitor sees is picking dates. */

.searchbar-wrap { position: relative; margin-top: clamp(-5.5rem, -7vw, -4rem); z-index: 20; }

.searchbar {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .6rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: .35rem;
    align-items: stretch;
    border: 1px solid var(--line);
}

.searchbar__field {
    position: relative;
    display: flex; flex-direction: column; justify-content: center;
    padding: .7rem .95rem;
    border-radius: var(--radius);
    transition: background-color .18s var(--ease-out);
    min-width: 0;
}
.searchbar__field:hover { background: var(--surface-2); }
.searchbar__field + .searchbar__field::before {
    content: ""; position: absolute; left: -.2rem; top: 22%; bottom: 22%;
    width: 1px; background: var(--line);
}

.searchbar__label {
    display: flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: .2rem;
}
.searchbar__label svg { width: 13px; height: 13px; }

.searchbar__input {
    border: 0; background: none; padding: 0;
    font-size: 1rem; font-weight: 600; color: var(--text);
    width: 100%; min-width: 0;
}
.searchbar__input:focus { outline: none; }
.searchbar__field:focus-within { background: var(--brand-100); }

.searchbar__submit { display: flex; align-items: stretch; padding: .15rem; }
.searchbar__submit .btn { border-radius: var(--radius); padding-inline: 1.9rem; white-space: nowrap; }

.searchbar__note {
    display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
    justify-content: center; margin-top: .9rem;
    font-size: .85rem; color: var(--text-muted);
}
.searchbar__note span { display: inline-flex; align-items: center; gap: .35rem; }
.searchbar__note svg { width: 15px; height: 15px; color: var(--good); }

@media (max-width: 900px) {
    .searchbar { grid-template-columns: 1fr 1fr; }
    .searchbar__submit { grid-column: 1 / -1; }
    .searchbar__field + .searchbar__field::before { display: none; }
    .searchbar__field { border: 1px solid var(--line); }
}
@media (max-width: 520px) {
    .searchbar { grid-template-columns: 1fr; }
    .searchbar-wrap { margin-top: -3rem; }
}

/* -------------------------------------------------------------- gallery --- */
/* Booking.com-style mosaic: one lead image, four supporting. */

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, clamp(115px, 17vw, 190px));
    gap: .5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gallery__item {
    position: relative; overflow: hidden; background: var(--surface-3);
    border: 0; padding: 0; cursor: pointer; display: block;
}
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery__item img, .gallery__item .placeholder-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease-out);
}
.gallery__item:hover img, .gallery__item:hover .placeholder-img { transform: scale(1.06); }
.gallery__more {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(12, 42, 38, .55); color: #fff;
    font-weight: 650; font-size: .95rem;
    transition: background-color .25s var(--ease-out);
}
.gallery__item:hover .gallery__more { background: rgba(12, 42, 38, .68); }

@media (max-width: 700px) {
    .gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 32vw); }
    .gallery__item:first-child { grid-column: span 2; grid-row: span 1; }
    .gallery__item:nth-child(n+4) { display: none; }
}

/* ------------------------------------------------------------ highlights --- */

.highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: .9rem;
}
.highlight {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
                border-color .22s var(--ease-out);
}
.highlight:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.highlight__icon {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--brand-100); color: var(--brand);
}
.highlight__icon svg { width: 19px; height: 19px; }
.highlight__title { font-weight: 650; font-size: .96rem; line-height: 1.3; }
.highlight__text { font-size: .86rem; color: var(--text-muted); margin: .15rem 0 0; }

/* ------------------------------------------------------------ room list --- */
/* The OTA "availability table": one row per room type, price and Reserve on
   the right. Collapses to stacked cards on small screens. */

.room-list { display: grid; gap: 1.1rem; }

.room {
    display: grid;
    grid-template-columns: 250px 1fr 260px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .25s var(--ease-out), border-color .25s var(--ease-out),
                transform .25s var(--ease-out);
}
.room:hover { box-shadow: var(--shadow-lg); border-color: var(--line-strong); transform: translateY(-2px); }
.room.is-soldout { opacity: .72; }
.room.is-soldout:hover { transform: none; box-shadow: var(--shadow-sm); }

.room__media { position: relative; background: var(--surface-3); min-height: 190px; overflow: hidden; }
.room__media img, .room__media .placeholder-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease-out);
}
.room:hover .room__media img, .room:hover .room__media .placeholder-img { transform: scale(1.05); }
.room__tag { position: absolute; top: .7rem; left: .7rem; }

.room__body { padding: 1.25rem 1.4rem; min-width: 0; }
.room__name { margin: 0 0 .2rem; font-size: 1.16rem; }
.room__desc { color: var(--text-muted); font-size: .91rem; margin: .35rem 0 .8rem; }

.room__specs { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: .8rem; }
.room__spec {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .85rem; color: var(--text-muted);
}
.room__spec svg { width: 15px; height: 15px; color: var(--text-faint); }

.room__amenities { display: flex; flex-wrap: wrap; gap: .35rem; }
.room__amenities .badge { font-weight: 550; }

.room__aside {
    padding: 1.25rem 1.4rem;
    border-left: 1px solid var(--line);
    background: var(--surface-2);
    display: flex; flex-direction: column; justify-content: center; gap: .55rem;
    text-align: right;
}
.room__price-from { font-size: .78rem; color: var(--text-muted); }
.room__price {
    font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
    font-weight: 750; letter-spacing: -.03em; color: var(--ink);
    line-height: 1.1;
}
.room__price s { font-size: .95rem; font-weight: 500; color: var(--text-faint); margin-right: .4rem; }
.room__price-note { font-size: .78rem; color: var(--text-muted); }
.room__stock { font-size: .82rem; font-weight: 650; }
.room__stock--low { color: var(--danger); }
.room__stock--ok  { color: var(--good); }

@media (max-width: 940px) {
    .room { grid-template-columns: 200px 1fr; }
    .room__aside {
        grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line);
        flex-direction: row; align-items: center; justify-content: space-between;
        text-align: left; flex-wrap: wrap;
    }
    .room__aside .btn { margin-left: auto; }
}
@media (max-width: 620px) {
    .room { grid-template-columns: 1fr; }

    /* Once the card stacks, the media is its own grid row and takes the
       image's natural height — a portrait room photo made the card over
       1000px tall. A fixed ratio keeps every card the same shape. */
    .room__media { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------- location --- */

.location { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 820px) { .location { grid-template-columns: 1fr; } }

.distances { display: grid; gap: .1rem; }
.distance {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--line);
}
.distance:last-child { border-bottom: 0; }
.distance__icon {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--accent-100); color: var(--accent-600);
}
.distance__icon svg { width: 17px; height: 17px; }
.distance__name { font-weight: 600; font-size: .95rem; }
.distance__sub { font-size: .8rem; color: var(--text-muted); }
.distance__km { margin-left: auto; font-weight: 700; white-space: nowrap; }

.map-card {
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); background: var(--surface-3);
    min-height: 320px; position: relative;
}
.map-card iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ------------------------------------------------------------- reviews --- */

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 1.1rem; }
.review {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.3rem;
    display: flex; flex-direction: column; gap: .7rem;
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.review__text { margin: 0; font-size: .96rem; color: var(--text); }
.review__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.review__avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--brand-100); color: var(--brand);
    font-weight: 700; font-size: .9rem;
}
.review__name { font-weight: 650; font-size: .9rem; line-height: 1.25; }
.review__city { font-size: .8rem; color: var(--text-muted); }

/* ------------------------------------------------------- policies + faq --- */

.policy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1rem; }
.policy {
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
}
.policy__label { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.policy__value { font-size: 1.28rem; font-weight: 750; margin: .3rem 0 .35rem; letter-spacing: -.02em; }
.policy__note { font-size: .87rem; color: var(--text-muted); margin: 0; }

.faq { display: grid; gap: .6rem; max-width: 820px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.faq__q {
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 1.05rem 1.2rem; font-weight: 650; font-size: 1rem;
    display: flex; align-items: center; gap: 1rem;
}
.faq__q::after {
    content: ""; margin-left: auto; flex: none;
    width: 10px; height: 10px;
    border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s var(--ease-out);
}
.faq__item.is-open .faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .28s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 1.2rem 1.15rem; color: var(--text-muted); font-size: .94rem; }

/* -------------------------------------------------------------- footer --- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.78); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: .9rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .91rem; }
.site-footer .brand__name, .site-footer .brand { color: #fff; }
.site-footer__bar {
    margin-top: 2.25rem; padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.13);
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
    font-size: .84rem; color: rgba(255,255,255,.6);
}

/* --------------------------------------------------- sticky booking bar --- */
/* Appears once the search widget scrolls away, so "Reserve" is never far. */

.stickybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(16,50,46,.09);
    transform: translateY(110%);
    transition: transform .32s var(--ease-out);
    padding: .7rem 0 max(.7rem, env(safe-area-inset-bottom));
}
.stickybar.is-visible { transform: none; }
.stickybar__inner { display: flex; align-items: center; gap: 1rem; }
.stickybar__price { font-weight: 750; font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.15; }
.stickybar__note { font-size: .8rem; color: var(--text-muted); }
.stickybar .btn { margin-left: auto; white-space: nowrap; }
@media (max-width: 420px) { .stickybar__note { display: none; } }

/* ---------------------------------------------------- placeholder images --- */
/* No client photos yet. Deliberately styled rather than broken: a gradient
   plus a label, so the layout is honest about what is missing. */

.placeholder-img {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background:
        linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(160deg, var(--ph-a, #327a70), var(--ph-b, #17433d));
    color: rgba(255,255,255,.72);
    position: relative;
}
.placeholder-img::after {
    content: attr(data-label);
    font-size: .78rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
}
.placeholder-img--warm { --ph-a: #8a6a2e; --ph-b: #4a3714; }
.placeholder-img--cool { --ph-a: #3d857a; --ph-b: #1b4a43; }
.placeholder-img--dusk { --ph-a: #48897a; --ph-b: #204740; }
.placeholder-img--stone { --ph-a: #5a6b64; --ph-b: #2b3733; }

.notice {
    display: flex; gap: .75rem; align-items: flex-start;
    background: var(--accent-100); border: 1px solid #e8d9a6;
    border-radius: var(--radius); padding: .9rem 1.1rem;
    font-size: .9rem; color: #6b551a;
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; }

/* ------------------------------------------------------ scroll reveals --- */

/* Scoped to .js so the hidden state only ever applies when JavaScript is
   actually running. Without this guard a blocked or failed site.js leaves most
   of the page permanently invisible — far worse than losing the animation. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .room, .highlight, .review, .gallery__item img, .gallery__item .placeholder-img { transition: none; }
}

/* ------------------------------------------------------------- utility --- */

.stack   { display: grid; gap: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.muted   { color: var(--text-muted); }
.center  { text-align: center; }
.mt-lg   { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================== booking flow pages === */

.container--narrow { max-width: 720px; }
.booking-page { padding-top: clamp(1.75rem, 4vw, 2.75rem); }

.back-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .9rem; font-weight: 600; color: var(--text-muted);
    margin-bottom: 1rem;
}
.back-link:hover { color: var(--brand); text-decoration: none; }

.booking-title { margin-bottom: .35rem; }

.booking-grid {
    display: grid; grid-template-columns: 1fr 380px;
    gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start;
    margin-top: 1.5rem;
}
@media (max-width: 900px) {
    .booking-grid { grid-template-columns: 1fr; }
    /* Price first on mobile: it is what the guest is deciding on. */
    .booking-summary { order: -1; }
}

/* ------------------------------------------------------------- form ---- */

.booking-form { display: grid; gap: 1.25rem; }

.field-group {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem 1.35rem; margin: 0; background: var(--surface);
    display: grid; gap: 1rem;
}
.field-group legend {
    padding: 0 .5rem; margin-left: -.5rem;
    font-weight: 700; font-size: .95rem;
}

.field { display: grid; gap: .35rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field label { font-size: .88rem; font-weight: 600; color: var(--text); }
.req { color: var(--danger); }

.field input, .field select, .field textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 1rem;
    transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.field textarea { resize: vertical; min-height: 82px; }
.field__hint { font-size: .8rem; color: var(--text-muted); }

.checkbox {
    display: flex; gap: .7rem; align-items: flex-start;
    font-size: .9rem; color: var(--text-muted);
    padding: .9rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
}
.checkbox input { margin-top: .2rem; width: 17px; height: 17px; flex: none; accent-color: var(--brand); }

.form-foot {
    display: flex; gap: .5rem; align-items: flex-start;
    font-size: .84rem; color: var(--text-muted); margin: 0;
}
.form-foot .icon { color: var(--good); margin-top: .15rem; }

.notice--error { background: var(--danger-100); border-color: #f4c8b2; color: #8a2c06; }

/* ---------------------------------------------------------- summary ---- */

.booking-summary { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: 1rem; }
@media (max-width: 900px) { .booking-summary { position: static; } }

.summary-card {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm);
}
.summary-card__media { height: 150px; background: var(--surface-3); }
.summary-card__media img { width: 100%; height: 100%; object-fit: cover; }
.summary-card__body { padding: 1.15rem 1.25rem; }
.summary-card__name { font-size: 1.1rem; margin-bottom: .85rem; }

.summary-line {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .38rem 0; font-size: .92rem;
}
.summary-line span:first-child { color: var(--text-muted); }
.summary-line--sm { font-size: .84rem; }
.summary-line--accent { color: var(--accent-600); font-weight: 650; }
.summary-line--accent span:first-child { color: inherit; }
.paid { color: var(--good); }

.summary-rule { border: 0; border-top: 1px solid var(--line); margin: .7rem 0; }

.summary-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: .5rem; margin-top: .4rem;
    border-top: 2px solid var(--ink);
    font-size: 1.05rem;
}
.summary-total strong { font-size: 1.4rem; letter-spacing: -.02em; }

.rate-breakdown { margin: .5rem 0; }
.rate-breakdown summary {
    cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--brand);
    padding: .3rem 0;
}
.rate-name { font-style: normal; color: var(--accent-600); font-size: .78rem; }

.summary-urgency {
    margin: .85rem 0 0; padding: .55rem .75rem;
    background: var(--danger-100); color: var(--danger);
    border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 650; text-align: center;
}

.summary-assurances {
    list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem;
    font-size: .87rem; color: var(--text-muted);
}
.summary-assurances li { display: flex; gap: .55rem; align-items: flex-start; }
.summary-assurances .icon { color: var(--good); margin-top: .15rem; }

/* -------------------------------------------------- pay + confirm ------ */

.pay-card, .confirm-card {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    display: grid; gap: 1rem;
}
.confirm-card { text-align: center; justify-items: center; }
.confirm-card .summary-line { text-align: left; width: 100%; }

.pay-amount {
    display: grid; gap: .2rem; justify-items: center; text-align: center;
    padding: 1.35rem; border-radius: var(--radius);
    background: var(--surface-2); border: 1px solid var(--line);
}
.pay-amount span:first-child { font-size: .85rem; color: var(--text-muted); }
.pay-amount strong { font-size: 2.1rem; letter-spacing: -.03em; line-height: 1.1; }

.confirm-tick {
    width: 62px; height: 62px; border-radius: 50%;
    background: var(--good-100); color: var(--good);
    display: grid; place-items: center;
    animation: tick-pop .5s var(--ease-spring) both;
}
.confirm-tick svg { width: 30px; height: 30px; }
@keyframes tick-pop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .confirm-tick { animation: none; } }

.confirm-ref {
    display: grid; gap: .2rem; justify-items: center;
    padding: 1rem 1.5rem; border-radius: var(--radius);
    background: var(--brand); color: #fff; width: 100%;
}
.confirm-ref span { font-size: .78rem; opacity: .82; letter-spacing: .08em; text-transform: uppercase; }
.confirm-ref strong { font-size: 1.7rem; letter-spacing: .06em; font-weight: 750; }

.confirm-details { width: 100%; text-align: left; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.confirm-help { font-size: .87rem; color: var(--text-muted); margin: 0; max-width: 46ch; }

/* ============================================ landing page motion layer ===
   Tuned for paid traffic: the page must feel alive within the first second
   and pull the eye to the date picker, without ever delaying the fold or
   shifting layout (both hurt Ads quality score and Core Web Vitals).
   ========================================================================= */

/* --- scroll progress -------------------------------------------------- */

.scroll-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
    background: linear-gradient(90deg, var(--accent), var(--accent-600));
    transform: scaleX(0); transform-origin: left;
    will-change: transform;
    pointer-events: none;
}

/* --- hero entrance ----------------------------------------------------- */
/* Staggered, and CSS-driven so it runs before site.js has parsed. */

.js .hero__eyebrow,
.js .hero h1,
.js .hero__lede,
.js .hero__meta,
.js .hero__trust {
    animation: rise-in .75s var(--ease-out) both;
}
.js .hero__eyebrow { animation-delay: .05s; }
.js .hero h1       { animation-delay: .14s; }
.js .hero__lede    { animation-delay: .24s; }
.js .hero__meta    { animation-delay: .34s; }
.js .hero__trust   { animation-delay: .44s; }

@keyframes rise-in {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
}

/* The search bar arrives last and lands, so the eye finishes on the form. */
.js .searchbar { animation: search-land .8s var(--ease-spring) .5s both; }
@keyframes search-land {
    from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* One slow sweep across the submit button after the page settles — a single
   nudge toward the CTA, not a loop that turns into visual noise. */
.searchbar__submit .btn { position: relative; overflow: hidden; }
.searchbar__submit .btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    transform: translateX(-120%);
}
.js .searchbar__submit .btn::after { animation: sweep 1.5s var(--ease-out) 1.7s 2; }
@keyframes sweep {
    to { transform: translateX(120%); }
}

/* --- counters ---------------------------------------------------------- */

.counter { font-variant-numeric: tabular-nums; }

/* --- richer reveals ---------------------------------------------------- */

.js [data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
.js [data-reveal="zoom"]  { transform: scale(.965); }
.js [data-reveal].is-revealed { transform: none; }

/* --- interactive polish ------------------------------------------------ */

.btn--accent { position: relative; }
.btn--accent::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%),
                rgba(255,255,255,.45), transparent 70%);
    opacity: 0; transition: opacity .25s var(--ease-out);
    pointer-events: none;
}
.btn--accent:hover::before { opacity: 1; }

.room { will-change: transform; }
.room__aside .btn { transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out); }
.room:hover .room__aside .btn { transform: translateY(-2px) scale(1.02); }

/* The score tile gets one attention beat when it scrolls into view. */
.score__box.is-revealed { animation: score-pop .55s var(--ease-spring) both; }
@keyframes score-pop {
    0%   { transform: scale(.8); opacity: 0; }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}

/* Distances slide in one after another — reads as a route, not a list. */
.js .distance { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
    .js .hero__eyebrow, .js .hero h1, .js .hero__lede, .js .hero__meta,
    .js .hero__trust, .js .searchbar, .score__box.is-revealed {
        animation: none;
    }
    .js .searchbar__submit .btn::after { animation: none; }
    .scroll-progress { display: none; }
}

/* ------------------------------------------------------------ brand mark --- */
/* The logo already carries its own teal ground, so it sits in the header as a
   rounded tile rather than needing a transparent cut-out. The wordmark inside
   the artwork is illegible at this size, which is why the header shows only
   the crest and renders the hotel name as real text beside it. */

img.brand__mark {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 11px;
    background: var(--brand-700);
    box-shadow: 0 1px 3px rgba(16, 50, 46, .18);
    transition: transform .3s var(--ease-spring);
}
.brand:hover img.brand__mark { transform: scale(1.06) rotate(-2deg); }

.footer-logo { display: inline-block; border-radius: var(--radius); overflow: hidden; }
.footer-logo img { width: 180px; height: auto; display: block; }
.footer-logo:hover { text-decoration: none; }

/* The pickup offer is the hotel's strongest differentiator, so its badge is
   gold rather than the muted glass used by the other hero chips. */
.hero__trust .badge--offer {
    background: var(--accent);
    color: #241d08;
    border-color: var(--accent);
    font-weight: 700;
}

/* ------------------------------------------------------ rate options ----- */
/* Two selectable plans per room. The breakfast one is given the solid button
   because it is the better-value, higher-margin sale — but both are one click. */

.room__aside { gap: .75rem; text-align: left; }

.rate-option {
    display: grid; gap: .2rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.rate-option--alt {
    border-color: var(--accent);
    background: var(--accent-100);
}
.rate-option__label {
    display: flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted);
}
.rate-option--alt .rate-option__label { color: var(--accent-600); }
.rate-option__tick .icon { width: .95em; height: .95em; color: var(--good); }
.rate-option__price {
    font-size: 1.4rem; font-weight: 750; letter-spacing: -.03em;
    line-height: 1.15; color: var(--ink);
}
.rate-option__note { font-size: .75rem; color: var(--text-muted); margin-bottom: .45rem; }
.rate-option .btn { padding: .55rem 1rem; font-size: .9rem; }

@media (max-width: 940px) {
    .room__aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
    .room__stock { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 620px) {
    .room__aside { grid-template-columns: 1fr; }
}

.plan-switch {
    display: block; margin-top: .7rem; padding: .55rem .7rem;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
    font-size: .84rem; font-weight: 600; text-align: center;
    color: var(--brand); background: var(--surface-2);
}
.plan-switch:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-100); }

.rate-option__label { justify-content: space-between; }
.rate-option__code {
    font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    padding: .1rem .35rem; border-radius: 4px;
    background: var(--surface-3); color: var(--text-muted);
}
.rate-option--alt .rate-option__code { background: #fff; color: var(--accent-600); }

/* Without JS the observer never runs, so the button stays available. */
html:not(.js) .wa-fab { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* --------------------------------------------------------- whatsapp fab --- */
/* Bottom LEFT, deliberately. Every primary CTA on this site — Reserve, Check
   availability, the sticky bar button — sits on the right, and a floating
   button there covered them on narrow screens. */

.wa-fab {
    position: fixed; z-index: 80;
    left: 1.15rem; bottom: 1.15rem;
    /* Hidden over the hero, where it covered the "Call for booking" number.
       Revealed with the sticky bar once the hero scrolls away. */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(10px);
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .7rem 1.1rem;
    background: #25d366; color: #06331a;
    border-radius: 999px;
    font-weight: 700; font-size: .92rem;
    box-shadow: 0 8px 22px rgba(6, 51, 26, .3);
    transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out),
                opacity .25s var(--ease-out), visibility .25s;
}
.wa-fab.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.wa-fab:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(6, 51, 26, .36); }
.wa-fab svg { width: 22px; height: 22px; flex: none; }

/* The sticky reserve bar owns the bottom strip once it appears. */
.stickybar.is-visible ~ .wa-fab,
body:has(.stickybar.is-visible) .wa-fab { bottom: 5.4rem; }

@media (max-width: 620px) {
    .wa-fab { padding: .8rem; left: .9rem; }
    .wa-fab__text { display: none; }
    body:has(.stickybar.is-visible) .wa-fab { bottom: 5.6rem; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }

/* The tariff is quoted ex-tax, the way the hotel's own card quotes it, with the
   inclusive figure directly under it so nobody is surprised at checkout. */
.rate-option__plus {
    font-size: .78rem; font-weight: 600; letter-spacing: 0;
    color: var(--text-muted); margin-left: .15rem;
}
.rate-option__note strong { color: var(--text); font-weight: 700; }

/* ============================================ hero: offer + feature bar ===
   Rebuilds the hotel's own banner message over the real photograph. Live text
   rather than baked artwork, so it stays sharp everywhere and stays editable.
   ========================================================================= */

.hero__kicker {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
    padding: .38rem .8rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; letter-spacing: .03em;
    margin: 0 0 1rem;
}

.hero__place-tag {
    display: block;
    font-size: .34em; font-weight: 600; letter-spacing: .5em;
    text-transform: uppercase; color: var(--accent);
    margin-top: .35rem;
}

/* ------------------------------------------------------------- offer ----- */

.offer {
    display: inline-block;
    margin-top: 1.4rem;
    padding: .85rem 1.15rem;
    border-radius: var(--radius);
    background: rgba(11, 40, 36, .72);
    border: 1px solid rgba(208, 175, 84, .45);
    backdrop-filter: blur(8px);
    max-width: 100%;
}
.offer__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.offer__free {
    background: var(--accent); color: #241d08;
    font-weight: 800; font-size: .82rem; letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .7rem; border-radius: 999px;
    flex: none;
}
.offer__title {
    font-size: clamp(1.05rem, .95rem + .6vw, 1.5rem);
    font-weight: 750; letter-spacing: -.01em; color: #fff; line-height: 1.15;
}
.offer__title span {
    display: block;
    font-size: .68em; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent);
}

.offer__places {
    list-style: none; margin: .7rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .3rem .95rem;
}
.offer__places li {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .85rem; font-weight: 550; color: rgba(255,255,255,.92);
}
.offer__places .icon { color: var(--accent); }

/* -------------------------------------------------------------- call ----- */

.hero__call {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .55rem .95rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.24);
    color: #fff; font-weight: 700; font-size: 1rem;
    line-height: 1.2;
}
.hero__call:hover { text-decoration: none; background: rgba(255,255,255,.2); }
.hero__call small {
    display: block; font-size: .68rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent); margin-bottom: .1rem;
}
.hero__call .icon { color: var(--accent); width: 1.3em; height: 1.3em; }
.hero__call-alt { font-weight: 550; color: rgba(255,255,255,.8); }
@media (max-width: 460px) { .hero__call-alt { display: none; } }

/* ---------------------------------------------------------- feature bar -- */

.hero__features {
    position: relative;
    background: rgba(11, 40, 36, .82);
    border-top: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    /* Clears the search bar, which is pulled up to 88px into the hero. The
       bottom padding must exceed that overlap or the bar covers the features. */
    padding: .8rem 0 clamp(6.5rem, 8vw, 8rem);
}
.hero__features-inner {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: .5rem 1.25rem;
}
.hero__feature {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.88);
    white-space: nowrap;
}
.hero__feature .icon { color: var(--accent); width: 1.15em; height: 1.15em; }

@media (max-width: 880px) {
    .hero__features-inner { justify-content: flex-start; }
    .hero__feature { font-size: .78rem; }
}

/* The hero already carries a lot; give the inner block a little less bottom
   padding now that the feature bar sits under it. */
.hero__inner { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 3vw, 2.25rem); }

/* The score is out of 5 (Google's scale), not out of 10 — say so, or 3.6 reads
   like a far worse number than it is. */
.score__box small {
    font-size: .62em; font-weight: 600; opacity: .72; margin-left: .05em;
}

/* The directions button sits over the map so the whole card is actionable
   without the iframe swallowing the tap. */
.map-card { position: relative; }
.map-card iframe { filter: saturate(.9); }
/* Lifted clear of the attribution strip — Google's terms require the logo and
   "Map data" line to stay visible. */
.map-card__directions {
    position: absolute; left: 1rem; bottom: 2.4rem;
    box-shadow: var(--shadow-lg);
}

/* =============================================================== ticker ===
   Gold announcement line under the header.
   ========================================================================= */

.ticker {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--accent-600), var(--accent) 35%, #f0d590 50%, var(--accent) 65%, var(--accent-600));
    color: #2a2107;
    border-block: 1px solid rgba(87, 66, 12, .28);
    padding-block: .5rem;
    /* Above the hero image, below the sticky header. */
    z-index: 40;
}

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 28s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
    display: inline-flex; align-items: center; gap: .55rem;
    padding-right: 2.5rem;
    font-size: .92rem; font-weight: 700; letter-spacing: .01em;
    white-space: nowrap;
}
.ticker__item .icon { width: 1.15em; height: 1.15em; flex: none; }
.ticker__dot { opacity: .5; margin-left: 1.9rem; }

/* Exactly half the track, so copy two lands where copy one started. */
@keyframes ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 620px) {
    .ticker__item { font-size: .84rem; padding-right: 1.75rem; }
    .ticker__track { animation-duration: 22s; }
}

/* Moving text is hard to read for anyone with motion sensitivity, and
   impossible to finish reading if it scrolls past. Hold it still and show a
   single copy instead. */
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; width: 100%; justify-content: center; }
    .ticker__item + .ticker__item { display: none; }
    .ticker__item { white-space: normal; text-align: center; padding-right: 0; }
    .ticker__dot { display: none; }
}

/* ====================================================== brand enrichment ===
   The logo is embossed gold on deep teal. These bring the same feel to the
   page — a metallic sheen on the primary action, gold hairlines where sections
   meet, and hero darks in the brand hue rather than near-black.
   ========================================================================= */

/* Gold reads as metal when it carries a light-to-deep gradient, the way the
   logo's lettering does. Flat gold looks like mustard. */
.btn--accent {
    background: linear-gradient(180deg, var(--accent-500), var(--accent) 45%, var(--accent-600));
    color: #2a2107;
    border: 1px solid rgba(120, 92, 20, .35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}
.btn--accent:hover {
    background: linear-gradient(180deg, #f6e493, var(--accent) 55%, var(--accent-600));
}

/* A thin gold rule at the very top, echoing the logo's border. */
body::before {
    content: "";
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100;
    background: linear-gradient(90deg, var(--accent-600), var(--accent-500) 50%, var(--accent-600));
    pointer-events: none;
}
.scroll-progress { top: 3px; }

/* Tinted sections pick up a hint of the brand instead of plain grey. */
.section--tint {
    background: linear-gradient(180deg, var(--surface-2), #eef4f2);
    border-block: 1px solid var(--line);
}

/* Section eyebrows get a small gold rule, so each section opens deliberately. */
.section__eyebrow { display: inline-flex; align-items: center; gap: .55rem; }
.section__eyebrow::after {
    content: ""; width: 2rem; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

/* The rating tile and score box carry the brand gradient. */
.score__box, .brand__mark {
    background: linear-gradient(150deg, var(--brand), var(--brand-900));
}

/* Footer in the deep brand tone with a gold hairline above it. */
.site-footer {
    background: linear-gradient(180deg, var(--ink), var(--brand-900));
    border-top: 2px solid var(--accent-600);
}

/* Room cards lift onto a warm gold edge on hover rather than a grey one. */
.room:hover { border-color: rgba(218, 186, 85, .55); }
.rate-option--alt {
    background: linear-gradient(180deg, #fdf8ea, var(--accent-100));
    border-color: rgba(187, 154, 64, .55);
}

/* The offer block is the page's centrepiece — give it a gold inner glow. */
.offer {
    background: linear-gradient(150deg, rgba(16, 50, 46, .82), rgba(11, 40, 36, .72));
    box-shadow: inset 0 1px 0 rgba(241, 219, 121, .22), 0 10px 30px rgba(11, 40, 36, .35);
}

/* Highlight and policy cards get a gold top edge on hover. */
.highlight, .policy { position: relative; overflow: hidden; }
.highlight::after, .policy::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--ease-out);
}
.highlight:hover::after, .policy:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .highlight::after, .policy::after { transition: none; }
}

/* ------------------------------------------------- google reviews panel --- */
/* Real social proof in place of written-for-effect quotes. */

.reviews-google {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
                border-color .22s var(--ease-out);
}
.reviews-google:hover {
    text-decoration: none; transform: translateY(-2px);
    box-shadow: var(--shadow); border-color: rgba(218, 186, 85, .6);
}
.reviews-google__mark {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.35rem; line-height: 1;
    color: #fff;
    background: conic-gradient(from 210deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
}
.reviews-google__body { display: grid; gap: .15rem; min-width: 0; }
.reviews-google__body strong { font-size: 1.02rem; }
.reviews-google__body span { font-size: .88rem; color: var(--text-muted); }
.reviews-google__cta {
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; font-size: .92rem; color: var(--brand);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .reviews-google { flex-wrap: wrap; }
    .reviews-google__cta { margin-left: 0; width: 100%; }
}