/* Grand Bosphorus Palace — editorial luxury theme.

   Layout notes that are easy to undo by accident:
   - The source design was desktop-only (a hard min-width of 1280px and no media
     queries at all). Everything below the `Responsive` section at the bottom is
     ours; a hotel site is read on phones more than on desktops.
   - Wide content (the rate calendar) scrolls inside its own container. The page
     body must never scroll sideways. */

:root {
    --navy: #0c1b2a;
    --navy-2: #12283d;
    --gold: #c9a227;
    --gold-light: #e6c65c;
    --gold-dark: #a08a3c;   /* eyebrow labels on light ground — passes contrast */
    --cream: #f7f3ea;
    --paper: #fbf9f4;       /* page background */
    --paper-2: #f4efe3;     /* alternating section background */
    --ink: #22303c;
    --body: #4a5866;
    --muted: #7d8b98;
    --line: #e6dfcd;
    --line-soft: #efe9db;
    --field: #ddd3bd;

    --shell: 1240px;
    --gutter: 64px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: 'Jost', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--paper);
    /* The design is a wide editorial layout; never let it push the page sideways. */
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, .serif { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; }

::selection { background: var(--gold-light); color: var(--navy); }

/* Keyboard focus ring on things you can actually operate. Not on every element:
   the router calls FocusOnNavigate on the page <h1>, and a bare :focus-visible
   rule paints a box around the heading on every page load. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 3px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

/* The navigation is sticky, so an anchored section would otherwise land with
   its heading underneath the bar. */
#rooms, #experiences, #dining, #spa, #rates, #booking { scroll-margin-top: 96px; }

/* Small caps label that opens most sections. */
.eyebrow {
    font-size: .66rem; letter-spacing: .4em; text-transform: uppercase;
    color: var(--gold-dark);
}
.eyebrow-gold { color: var(--gold); }

.section-title { font-size: 3rem; color: var(--navy); margin-top: 16px; line-height: 1.1; }

/* ---------- navigation ---------- */
.gb-nav {
    position: sticky; top: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px;
    padding: 22px var(--gutter);
    background: rgba(12, 27, 42, .97);
    color: var(--cream);
    border-bottom: 1px solid rgba(201, 162, 39, .28);
}
.gb-nav-links {
    display: flex; gap: 36px; align-items: center;
    font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 300;
}
.gb-nav-links a { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.gb-nav-links a:hover { color: var(--gold-light); border-bottom-color: var(--gold); }

.gb-brand { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.gb-brand .name {
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400;
    color: var(--gold-light); letter-spacing: .06em; white-space: nowrap;
}
.gb-brand .tag {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .42em;
    color: var(--muted); margin-top: 4px;
}

.gb-nav-right { display: flex; gap: 22px; align-items: center; justify-content: flex-end; }
.lang-switch { display: flex; border: 1px solid rgba(255, 255, 255, .22); }
.lang-switch button {
    background: transparent; color: var(--cream); border: 0; padding: 9px 14px;
    font-family: inherit; font-size: .68rem; letter-spacing: .14em; cursor: pointer;
}
.lang-switch button.active { background: var(--gold); color: var(--navy); }
.gb-cta {
    padding: 11px 26px; border: 1px solid var(--gold); color: var(--gold-light);
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
    transition: background .2s, color .2s; white-space: nowrap;
}
.gb-cta:hover { background: var(--gold); color: var(--navy); }

/* ---------- hero ---------- */
.gb-hero {
    position: relative; height: 660px; display: flex; align-items: flex-end;
    background: var(--navy); overflow: hidden;
}
.gb-hero picture, .gb-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(12,27,42,.92) 0%, rgba(12,27,42,.35) 55%, rgba(12,27,42,.55) 100%);
}
.gb-hero-inner {
    position: relative; z-index: 1;
    padding: 0 var(--gutter) 84px; width: 100%;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 64px;
    color: var(--cream);
    max-width: calc(var(--shell) + var(--gutter) * 2); margin: 0 auto;
}
.gb-hero-copy { max-width: 740px; }
.gb-hero-place { font-size: .68rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; }
.gb-hero h1 { font-size: 4.6rem; line-height: 1.04; letter-spacing: .01em; color: var(--cream); }
.gb-hero p {
    max-width: 560px; margin-top: 28px; font-weight: 200; font-size: 1.12rem;
    line-height: 1.8; color: #cfdae4; text-wrap: pretty;
}
.gb-hero-actions { flex: none; display: flex; flex-direction: column; gap: 14px; width: 280px; }
.btn-gold, .btn-ghost {
    text-align: center; padding: 17px 0; font-size: .74rem;
    letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
    font-family: inherit; border: 0; transition: background .2s, border-color .2s, color .2s;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-light); }
.btn-ghost { background: transparent; color: var(--cream); border: 1px solid rgba(247, 243, 234, .45); }
.btn-ghost:hover { border-color: var(--gold-light); color: var(--gold-light); }

/* Demo banner — this is a fictional property and the page has to say so. */
.gb-demo-note {
    background: var(--navy-2); color: #cfdae4;
    border-bottom: 1px solid rgba(201, 162, 39, .3);
    padding: 14px var(--gutter); text-align: center;
    font-size: .82rem; line-height: 1.7; letter-spacing: .04em;
}
.gb-demo-note b { color: var(--gold-light); font-weight: 500; }
.gb-demo-note a { color: var(--gold-light); border-bottom: 1px solid rgba(230, 198, 92, .5); }
.gb-demo-note a:hover { color: #fff; }

/* ---------- property intro ---------- */
.gb-intro {
    max-width: var(--shell); margin: 0 auto; padding: 120px var(--gutter) 40px;
    display: grid; grid-template-columns: 1fr 1.35fr; gap: 96px; align-items: start;
}
.gb-intro-rule { width: 44px; height: 1px; background: var(--gold); margin-top: 20px; }
.gb-intro-lead {
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300;
    font-size: 2rem; line-height: 1.5; color: var(--navy); text-wrap: pretty;
}
.gb-stats { display: flex; gap: 64px; margin-top: 56px; flex-wrap: wrap; }
.gb-stat-value { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; color: var(--gold); font-weight: 400; }
.gb-stat-label { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* ---------- section head ---------- */
.gb-section { max-width: var(--shell); margin: 0 auto; padding: 100px var(--gutter); }
.gb-section-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
    padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.gb-section-note { font-size: .8rem; letter-spacing: .1em; color: var(--muted); padding-bottom: 10px; }

/* ---------- rooms ---------- */
.room-feature { display: grid; gap: 0; border-bottom: 1px solid var(--line); }
.room-feature.image-left  { grid-template-columns: 1.1fr 1fr; }
.room-feature.image-right { grid-template-columns: 1fr 1.1fr; }
.room-feature img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.room-feature .copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.room-feature.image-left  .copy { padding: 64px 0 64px 64px; }
.room-feature.image-right .copy { padding: 64px 64px 64px 0; }
.room-meta { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.room-feature h3 { font-size: 2.3rem; font-weight: 400; color: var(--navy); }
.room-feature p { font-size: 1rem; line-height: 1.8; color: var(--body); max-width: 420px; font-weight: 300; }
.room-price { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.room-price .from { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.room-price .value { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--gold); }
.room-price .per { font-size: .85rem; color: var(--muted); }

.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 56px; }
.room-card { display: flex; flex-direction: column; gap: 14px; }
.room-card img { width: 100%; height: 180px; object-fit: cover; }
.room-card h3 { font-size: 1.6rem; font-weight: 400; color: var(--navy); margin-top: 6px; }
.room-card .room-meta { font-size: .64rem; letter-spacing: .22em; }
.room-card .room-price .value { font-size: 1.5rem; }
.room-card .room-price .per { font-size: .8rem; }

/* ---------- experiences ---------- */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 48px; }
.exp-card {
    background: #fff; border: 1px solid var(--line); padding: 28px 26px;
    display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .2s;
}
a.exp-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.exp-card .icon { font-size: 1.6rem; line-height: 1; }
.exp-card h3 { font-size: 1.25rem; font-weight: 400; color: var(--navy); }
.exp-card p { font-size: .9rem; color: var(--body); line-height: 1.7; font-weight: 300; }
.exp-card .more { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); margin-top: auto; padding-top: 8px; }
.exp-card img { width: 100%; height: 150px; object-fit: cover; margin-bottom: 4px; }

/* ---------- dining (dark band) ---------- */
.gb-dining { background: var(--navy); color: var(--cream); padding: 110px 0; }
.gb-dining .section-title { color: var(--cream); }
.dining-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; }
.dining-card img { width: 100%; height: 260px; object-fit: cover; }
.dining-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.7rem; color: var(--gold-light); margin-top: 24px; }
.dining-hours { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.dining-card p { font-size: .95rem; line-height: 1.8; color: #cfdae4; font-weight: 300; margin-top: 16px; }

/* ---------- spa ---------- */
.gb-spa {
    max-width: var(--shell); margin: 0 auto; padding: 110px var(--gutter);
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.gb-spa img { width: 100%; height: 520px; object-fit: cover; }
.gb-spa p { font-size: 1.05rem; line-height: 1.85; color: var(--body); font-weight: 300; margin-top: 24px; max-width: 460px; text-wrap: pretty; }
.spa-hours { display: grid; margin-top: 40px; max-width: 460px; }
.spa-hours div {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 16px 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--body);
}
.spa-hours div:last-child { border-bottom: 1px solid var(--line); }
.spa-hours span:last-child { color: var(--navy); white-space: nowrap; }

/* ---------- rate calendar ---------- */
.gb-rates { background: var(--paper-2); padding: 110px 0; }
.rates-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.rates-note { font-size: .8rem; line-height: 1.7; color: var(--muted); max-width: 340px; text-align: right; }
/* The 7-column grid is the one piece of the page that cannot shrink gracefully,
   so it scrolls inside itself rather than widening the document. */
.cal-scroll { overflow-x: auto; margin-top: 48px; -webkit-overflow-scrolling: touch; }
.cal {
    display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 1px;
    background: #e0d8c4; border: 1px solid #e0d8c4; min-width: 700px;
}
.cal-dow { background: var(--paper-2); padding: 14px 0; text-align: center; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cal-cell { background: #fff; min-height: 96px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; }
.cal-cell.empty { background: #efe9db; }
.cal-cell .day { font-size: .8rem; color: var(--navy); }
.cal-cell .price { font-size: .95rem; color: var(--body); }
.cal-cell .price.peak { color: var(--gold); }
.cal-cell.selected { background: var(--navy); }
.cal-cell.selected .day, .cal-cell.selected .price { color: var(--gold-light); }
.cal-legend { margin-top: 20px; font-size: .8rem; letter-spacing: .06em; color: var(--muted); }

/* ---------- booking ---------- */
.booking-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; margin-top: 56px; align-items: start; }
.booking-card { background: #fff; border: 1px solid var(--line); }
.booking-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.booking-tabs button {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 8px;
    border: 0; border-right: 1px solid var(--line); cursor: pointer; font-family: inherit;
    background: #fff; color: var(--muted); transition: background .2s, color .2s;
}
.booking-tabs button:last-child { border-right: 0; }
.booking-tabs button.active { background: var(--navy); color: var(--gold-light); }
.booking-tabs .step-no { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; }
.booking-tabs .step-name { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; }
.booking-body { padding: 48px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field > span { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
    padding: 14px 16px; border: 1px solid var(--field); background: var(--paper);
    font-family: inherit; font-size: .95rem; color: var(--navy); width: 100%;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field-error { color: #a3342f; font-size: .8rem; }

.booking-rooms { display: grid; }
.booking-room {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 22px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.booking-room.chosen { background: var(--paper); }
.booking-room .name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--navy); }
.booking-room .meta { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.booking-room .right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.booking-room .total { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold); }
.booking-room.sold .total { color: #b9b0a0; }

.btn-line, .btn-solid, .btn-select {
    font-family: inherit; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn-line { padding: 16px 30px; background: transparent; border: 1px solid var(--field); color: var(--body); }
.btn-line:hover { border-color: var(--navy); color: var(--navy); }
.btn-solid { padding: 16px 34px; background: var(--navy); color: var(--cream); border: 0; }
.btn-solid:hover { background: var(--navy-2); }
.btn-select { padding: 12px 24px; background: transparent; border: 1px solid var(--navy); color: var(--navy); }
.btn-select:hover { background: var(--navy); color: var(--cream); }
.btn-select.on { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn-select:disabled, .btn-solid:disabled { border-color: var(--field); color: #b9b0a0; background: transparent; cursor: default; }
.btn-submit { padding: 16px 34px; background: var(--gold); color: var(--navy); border: 0; font-family: inherit; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.btn-submit:hover { background: var(--gold-light); }
.btn-submit:disabled { background: var(--field); color: #fff; cursor: default; }
.booking-actions { display: flex; justify-content: space-between; margin-top: 40px; gap: 16px; flex-wrap: wrap; }
.booking-actions.end { justify-content: flex-end; }
.booking-fineprint { margin-top: 24px; font-size: .8rem; line-height: 1.7; color: var(--muted); }

.booking-summary { background: var(--navy); color: var(--cream); padding: 40px; }
.booking-summary .dates { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; margin-top: 16px; }
.booking-summary .guests { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.booking-summary hr { border: 0; height: 1px; background: rgba(247, 243, 234, .14); margin: 28px 0; }
.booking-summary .line { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; padding: 8px 0; }
.booking-summary .line span:last-child { color: #cfdae4; }
.booking-summary .grand { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.booking-summary .grand .label { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.booking-summary .grand .value { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--gold-light); }
.booking-summary .foot { font-size: .72rem; color: var(--muted); margin-top: 10px; text-align: right; }

.booking-done { padding: 56px 48px; text-align: center; }
.booking-done h3 { font-size: 2rem; color: var(--navy); }
.booking-done .ref { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: var(--gold); margin-top: 14px; letter-spacing: .1em; }
.booking-done p { color: var(--body); line-height: 1.8; margin-top: 16px; font-weight: 300; }
.booking-demo-note {
    margin-top: 24px; padding: 16px 20px; background: var(--paper);
    border: 1px solid var(--line); font-size: .85rem; line-height: 1.7; color: var(--body);
}

/* ---------- concierge ---------- */
.concierge-layout {
    max-width: 1100px; margin: 0 auto; padding: 80px var(--gutter) 100px;
    display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start;
}
.concierge-head h1 { font-size: 3rem; color: var(--navy); margin-top: 16px; }
.concierge-head p { font-size: 1.05rem; line-height: 1.85; color: var(--body); font-weight: 300; margin-top: 20px; max-width: 560px; }
.chat-window {
    background: #fff; border: 1px solid var(--line); margin-top: 40px;
    display: flex; flex-direction: column; height: 520px; overflow: hidden;
}
.chat-scroll { flex: 1; overflow-y: auto; padding: 36px 36px 16px; display: flex; flex-direction: column; gap: 22px; }
.msg { max-width: 76%; line-height: 1.75; font-size: .98rem; }
.msg .who { display: block; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 10px; }
.msg .bubble { padding: 18px 22px; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; }
.msg.assistant .bubble { background: var(--cream); border: 1px solid #eadfc4; color: var(--ink); }
.msg.user { align-self: flex-end; max-width: 70%; }
.msg.user .bubble { background: var(--navy); color: var(--cream); }
.typing { color: var(--muted); font-size: .85rem; padding: 0 36px 12px; }
.chat-input { display: flex; gap: 14px; padding: 20px 24px; border-top: 1px solid var(--line-soft); background: var(--paper); align-items: center; }
.chat-input textarea {
    flex: 1; resize: none; border: 1px solid var(--field); background: #fff; padding: 14px 16px;
    font-family: inherit; font-size: .95rem; outline: none; height: 50px;
}
.chat-input textarea:focus { border-color: var(--gold); }
.chat-input button {
    padding: 15px 30px; background: var(--gold); color: var(--navy); border: 0;
    font-family: inherit; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
}
.chat-input button:disabled { background: var(--field); color: #fff; cursor: default; }
.suggest-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.suggest-row button {
    background: transparent; border: 1px solid var(--field); color: var(--body);
    padding: 11px 20px; font-family: inherit; font-size: .82rem; cursor: pointer; transition: border-color .2s, color .2s;
}
.suggest-row button:hover { border-color: var(--gold); color: var(--navy); }
.suggest-row button:disabled { opacity: .5; cursor: default; }

.concierge-aside { border-left: 1px solid var(--line); padding-left: 36px; display: flex; flex-direction: column; gap: 34px; }
.concierge-aside h2 { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); font-family: 'Jost', sans-serif; font-weight: 400; }
.concierge-aside p { font-size: .88rem; line-height: 1.85; color: var(--body); margin-top: 14px; }
/* The shared voice panel keeps its own consent control; only its skin changes here. */
.concierge-aside .lv-panel, .chat-voice .lv-panel { font-family: inherit; }

/* ---------- footer ---------- */
.gb-footer { background: var(--navy); color: #9fb0bf; padding: 80px var(--gutter) 44px; margin-top: 0; }
.gb-footer-grid { max-width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; align-items: start; }
.gb-footer .fname { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold-light); letter-spacing: .06em; }
.gb-footer .ftag { font-size: .58rem; letter-spacing: .42em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.gb-footer .faddr { font-size: .85rem; line-height: 1.9; margin-top: 26px; }
.gb-footer h2 { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-family: 'Jost', sans-serif; font-weight: 400; }
.gb-footer .flist { display: flex; flex-direction: column; gap: 10px; font-size: .85rem; margin-top: 20px; }
.gb-footer .flist a:hover, .gb-footer .fcontact a:hover { color: var(--gold-light); }
.gb-footer .fcontact { font-size: .85rem; line-height: 2; margin-top: 20px; word-break: break-word; }
.gb-footer-base {
    max-width: var(--shell); margin: 56px auto 0; padding-top: 24px;
    border-top: 1px solid rgba(247, 243, 234, .12);
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    font-size: .72rem; color: #6f7f8d; line-height: 1.8;
}
.gb-footer-base a { color: var(--gold-light); }
.gb-footer-base a:hover { color: #fff; }

/* ---------- floating concierge bubble ---------- */
.gb-bubble { position: fixed; right: 36px; bottom: 36px; z-index: 50; display: flex; align-items: center; gap: 14px; }
.gb-bubble .label {
    background: #fff; border: 1px solid var(--line); padding: 12px 18px;
    font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--body);
    box-shadow: 0 10px 30px rgba(12, 27, 42, .12);
}
.gb-bubble .dot {
    width: 62px; height: 62px; border-radius: 50%; background: var(--navy); border: 1px solid var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--gold-light);
    box-shadow: 0 14px 34px rgba(12, 27, 42, .28); flex: none;
}
.gb-bubble .dot:hover { background: var(--navy-2); }

/* ============================================================
   Responsive — none of this existed in the source design.
   ============================================================ */
@media (max-width: 1100px) {
    :root { --gutter: 40px; }
    .gb-hero h1 { font-size: 3.4rem; }
    .gb-hero { height: 560px; }
    .gb-intro { grid-template-columns: 1fr; gap: 32px; padding-top: 80px; }
    .section-title { font-size: 2.4rem; }
    .room-feature.image-left, .room-feature.image-right { grid-template-columns: 1fr; }
    .room-feature.image-right img { order: -1; }
    .room-feature.image-left .copy, .room-feature.image-right .copy { padding: 36px 0 48px; }
    .room-feature img { min-height: 300px; }
    .dining-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .gb-spa { grid-template-columns: 1fr; gap: 40px; }
    .gb-spa img { height: 380px; }
    .booking-layout { grid-template-columns: 1fr; gap: 32px; }
    .concierge-layout { grid-template-columns: 1fr; gap: 40px; }
    .concierge-aside { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 32px; }
    .gb-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 860px) {
    .gb-nav { grid-template-columns: auto 1fr; gap: 16px; padding: 16px var(--gutter); }
    .gb-nav-links { display: none; }
    .gb-brand { align-items: flex-start; }
    .gb-brand .name { font-size: 1.2rem; }
    .gb-nav-right { gap: 12px; }
    .gb-cta { padding: 10px 16px; letter-spacing: .14em; }
    .gb-hero-inner { flex-direction: column; align-items: flex-start; gap: 32px; padding-bottom: 56px; }
    .gb-hero-actions { width: 100%; flex-direction: row; }
    .btn-gold, .btn-ghost { flex: 1; padding: 15px 8px; }
    .room-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .rates-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .rates-note { text-align: left; max-width: none; }
    .booking-body { padding: 32px 24px; }
    .gb-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 620px) {
    :root { --gutter: 20px; }
    /* "Reserve" leaves the bar rather than overflowing it — the hero button and
       the footer both still reach the booking panel. */
    .gb-nav .gb-cta { display: none; }
    .gb-brand .name { font-size: 1.05rem; }
    .gb-brand .tag { letter-spacing: .28em; }
    .gb-hero { height: auto; min-height: 460px; padding-top: 80px; }
    .gb-hero h1 { font-size: 2.4rem; }
    .gb-hero p { font-size: 1rem; }
    .gb-section, .gb-spa { padding-top: 64px; padding-bottom: 64px; }
    .gb-dining, .gb-rates { padding: 64px 0; }
    .section-title { font-size: 2rem; }
    .gb-intro-lead { font-size: 1.5rem; }
    .gb-stats { gap: 32px; }
    .room-feature h3 { font-size: 1.8rem; }
    .room-grid, .dining-grid, .exp-grid { grid-template-columns: 1fr; }
    .field-grid { grid-template-columns: 1fr; gap: 20px; }
    .booking-tabs .step-name { font-size: .58rem; letter-spacing: .12em; }
    .booking-actions { flex-direction: column-reverse; }
    .booking-actions button { width: 100%; }
    .booking-summary { padding: 28px 24px; }
    .chat-window { height: 68vh; min-height: 380px; }
    .chat-scroll { padding: 24px 20px 8px; }
    .msg, .msg.user { max-width: 90%; }
    .chat-input { padding: 14px; gap: 10px; flex-wrap: wrap; }
    .chat-input textarea { flex: 1 1 100%; }
    .chat-input button { flex: 1; padding: 13px 10px; }
    .gb-footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .gb-footer { padding-top: 56px; }
    /* The floating bubble keeps only its dot on a small screen. */
    .gb-bubble { right: 16px; bottom: 16px; }
    .gb-bubble .label { display: none; }
    .gb-bubble .dot { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}