/* ============================================================
   Hans Hotels (brand) — heritage luxury homepage
   Brand system (parent & child):
     Primary  Heritage Brown  #36281F
     Secondary Warm Taupe Gold #B8A58B
     Supporting Champagne #D8C9B1 · Ivory #F8F6F2 · Stone #E5E1DB
     Text     #2B2B2B / #6A6A6A
   Fonts: Cormorant Garamond (headings) · Montserrat (body)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #F8F6F2;   /* Ivory White */
  --bg-2:    #E5E1DB;   /* Light Stone Grey (alt sections) */
  --ink:     #2B2B2B;   /* Primary Text */
  --body:    #6A6A6A;   /* Secondary Text */
  --gold:    #B8A58B;   /* Warm Taupe Gold (secondary) */
  --gold-d:  #A08D72;   /* taupe, darkened for hover */
  --gold-txt:#6B5638;   /* accessible gold for TEXT on light bg — 5.9:1 on #F8F6F2 */
  --dark:    #36281F;   /* Heritage Brown (primary) — dark bands / footer */
  --dark-2:  #2A2018;   /* Heritage Brown, deepened */
  --champagne: #D8C9B1; /* Champagne Beige */
  --line:    #E5E1DB;   /* Light Stone Grey */
  --line-2:  #D8C9B1;   /* Champagne Beige */
  --white:   #fff;
  --maxw:    1240px;
  --gutter:  clamp(20px, 5vw, 60px);
  --shadow:  0 24px 60px rgba(54,40,31,.16);
  --shadow-sm: 0 10px 30px rgba(54,40,31,.10);
  --t: .4s cubic-bezier(.4,0,.2,1);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cond:  'Montserrat', var(--sans);

  /* Header → text rhythm. One scale for the whole site, stepped by heading size so a
     5rem display heading and a 1.2rem card heading stay optically consistent.
     --gap-h-block is for a column/panel heading that introduces a whole block. */
  --gap-label:   8px;                    /* uppercase micro-label → its field or value */
  --gap-h-sm:   10px;                    /* small headings, under 1.5rem */
  --gap-h-md:   14px;                    /* mid headings, 1.5–2.4rem */
  --gap-h-lg:   22px;                    /* section headings, over 2.4rem */
  --gap-h-block: clamp(20px, 2.4vw, 28px);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { overflow-x: hidden; overflow-x: clip; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--body); background: var(--bg); overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(3rem, 6.5vw, 5.6rem); }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h3 { font-size: 1.7rem; }
p { margin-bottom: 1rem; }

/* Default header → text gap by level. The global * reset zeroes heading margins, so without
   this every gap is whatever each component happens to set. :where() holds specificity at 0,
   so any component rule further down (.hero h1, .venue-body h3, .page-head h1 …) still wins. */
:where(h1, h2) { margin-bottom: var(--gap-h-lg); }
:where(h3)     { margin-bottom: var(--gap-h-md); }
:where(h4, h5, h6) { margin-bottom: var(--gap-h-sm); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: 100px 0; }
.eyebrow { display: inline-block; font-family: var(--cond); font-size: .78rem; font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold-txt); margin-bottom: 16px; }
.center { text-align: center; }
.stars { color: var(--gold-txt); font-size: .95rem; letter-spacing: 3px; margin-bottom: 16px; }
.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-cta { text-align: center; margin-top: 44px; }
.about-body .btn { margin-top: 8px; }
.sec-head.center { max-width: 720px; margin-inline: auto; text-align: center; }
.sr-only { position: absolute; left: -9999px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  font-family: var(--cond); font-size: .74rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  padding: 11px 26px; border: 1px solid transparent; transition: var(--t); min-height: 44px; white-space: nowrap; }
.btn-gold { background: var(--gold); color: var(--dark); }
.btn-gold:hover { background: var(--gold-d); color: var(--dark); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover { background: #fff; color: var(--ink); }
.btn-outline-gold { background: transparent; color: var(--gold-txt); border-color: var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--dark); color: #fff; padding: 12px 20px; transition: top .2s; }
.skip-link:focus { top: 12px; }

/* ── Header ── */
.hdr { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 11px 0; transition: var(--t); }
.hdr.scrolled { background: rgba(54,40,31,.97); backdrop-filter: blur(8px); padding: 8px 0; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.hdr .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1720px; }
/* flex:0 0 auto — without it the nowrap nav shrinks the logo away entirely at ~1181-1240px */
.brandmark { display: flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.brandmark img { height: 50px; width: auto; display: block; filter: brightness(0) invert(1); transition: height var(--t), filter var(--t); }
.hdr.scrolled .brandmark img { height: 44px; }
/* Anya co-brand logo — in nav-right, beside Book Now */
.brandmark-anya { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.28); }
.hdr.scrolled .brandmark-anya { border-left-color: rgba(255,255,255,.24); }
.brandmark-anya img { height: 46px; }
.hdr.scrolled .brandmark-anya img { height: 42px; }
/* Drop the secondary co-brand mark before the property's own logo runs out of room (was 1180px) */
@media (max-width: 1280px) { .brandmark-anya { display: none; } }
.nav-menu { display: flex; align-items: center; justify-content: center; flex: 1; gap: 22px; }
.nav-menu a { font-family: var(--cond); color: #fff; font-size: .85rem; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; transition: color var(--t); }
.nav-menu a:hover, .nav-menu a.active { color: var(--gold); }
/* ── Our Hotels dropdown ── */
.nav-item.has-dropdown { position: relative; display: flex; align-items: center; }
.nav-drop-toggle { display: inline-flex; align-items: center; gap: 7px; }
.nav-caret { font-size: .72rem; transition: transform var(--t); }
.has-dropdown:hover .nav-caret, .has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
.dropdown { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 12px); min-width: 200px;
  background: rgba(54,40,31,.98); backdrop-filter: blur(8px); border: 1px solid rgba(184,165,139,.38);
  padding: 8px 0; opacity: 0; visibility: hidden; transition: opacity var(--t), transform var(--t);
  box-shadow: 0 22px 48px rgba(0,0,0,.42); z-index: 1200; }
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 5px); }
.dropdown a { display: block; width: auto; padding: 9px 18px; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: 1px; font-size: .72rem; color: #fff; white-space: nowrap; transition: color var(--t), background var(--t); }
.dropdown a:hover { color: var(--gold); background: rgba(184,165,139,.14); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; width: 46px; height: 46px; background: none; border: none; cursor: pointer; flex-direction: column; gap: 6px; align-items: center; justify-content: center; }
.nav-toggle span { width: 28px; height: 2px; background: #fff; transition: var(--t); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
/* z-index 900 — must stay BELOW .hdr (1000). .hdr is a fixed, z-indexed stacking context, so the
   drawer's z-index:1500 cannot escape it; a scrim above 1000 painted over the whole open drawer
   and swallowed every tap on its links. The scrim only dims the page and closes on click. */
.scrim { position: fixed; inset: 0; background: rgba(43,32,25,.55); z-index: 900; opacity: 0; visibility: hidden; transition: var(--t); }
.scrim.open { opacity: 1; visibility: visible; }

/* ── Hero ── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Graded rather than flat: the hero carries no visible headline (its h1 is .sr-only), so the
   scrim only needs to hold the header legible at the top and the booking bar at the base.
   A flat 44% muted the enhanced property photography across the whole frame. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(43,32,25,.55) 0%, rgba(43,32,25,.18) 30%, rgba(43,32,25,.10) 65%, rgba(43,32,25,.28) 100%); }
.hero-inner { position: relative; z-index: 2; width: 100%; text-align: center; color: #fff; padding-top: 52px; }
.hero .stars { justify-content: center; }
.hero .eyebrow { color: #fff; letter-spacing: 5px; }
.hero h1 { color: #fff; letter-spacing: clamp(4px, 1.2vw, 14px); font-weight: 400; margin: 6px auto 34px; max-width: 20ch; text-transform: uppercase; }
.hero-resv { position: absolute; left: 30px; bottom: 30%; z-index: 3; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--cond); letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,.85); font-size: .85rem; display: flex; align-items: center; gap: 18px; }
.hero-resv::after { content: ""; height: 60px; width: 1px; background: rgba(255,255,255,.5); }
@media (max-width: 900px) { .hero-resv { display: none; } }

/* ── Booking bar ── */
.booking { position: relative; z-index: 20; margin-top: -46px; }
.booking-inner { max-width: var(--maxw); margin: 0 auto; background: #fff; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(5, 1fr) auto; align-items: stretch; }
.bk-field { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; border-right: 1px solid var(--line-2); }
.bk-field label { font-family: var(--cond); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: var(--gap-label); }
.bk-field input, .bk-field select { border: none; background: transparent; font-family: var(--sans); font-size: .95rem; color: var(--ink); width: 100%; }
.bk-field select { padding-right: 20px; text-overflow: ellipsis; }   /* reserve room for the native caret */
.booking-inner.has-hotel { grid-template-columns: 1.55fr 1.05fr 1.05fr .92fr .95fr auto; }   /* wider Hotel column on the chain widget */
.bk-field input:focus, .bk-field select:focus { outline: none; }
.booking .btn-gold { border: none; padding-inline: 40px; letter-spacing: 3px; }
@media (max-width: 900px) {
  .booking { margin-top: 0; }
  .booking-inner { grid-template-columns: 1fr 1fr; }
  .bk-field { border-bottom: 1px solid var(--line-2); }
  .booking .btn-gold { grid-column: 1 / -1; min-height: 60px; }
}
@media (max-width: 520px) { .booking-inner { grid-template-columns: 1fr; } }

/* ── About (staggered images) ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.about-body .stars { text-align: left; }
.about-body h2 { margin-bottom: var(--gap-h-lg); }
.about-resv { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.about-resv .ico { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.about-resv .r-label { font-size: .82rem; color: var(--body); }
.about-resv .r-num { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); }
.about-media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.about-media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; box-shadow: var(--shadow-sm); }
.about-media .am-1 { margin-top: 48px; }
.about-media .am-2 { margin-top: -10px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .about-media .am-1 { margin-top: 0; } }

/* ── Rooms / Hotels grid ── */
#hotels { padding-top: 100px; }
/* Our Hotels & Resorts — all three properties fill the row */
#hotels .rooms-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
#hotels .roomcard { aspect-ratio: 3/4; }
@media (max-width: 900px) { #hotels .rooms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #hotels .rooms-grid { grid-template-columns: 1fr; } #hotels .roomcard { aspect-ratio: 3/4; } }
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.roomcard { position: relative; overflow: hidden; display: block; aspect-ratio: 3/4; }
.roomcard.wide { aspect-ratio: 16/11; }
.roomcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.roomcard:hover img { transform: scale(1.06); }
.roomcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,32,24,0) 45%, rgba(42,32,24,.82) 100%); }
.roomcard-body { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 30px; color: #fff; }
.roomcard-body .price { font-family: var(--cond); font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.roomcard-body h3 { color: #fff; margin: 6px 0 0; position: relative; padding-bottom: 12px; }
.roomcard-body h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 1px; background: rgba(255,255,255,.6); }
.roomcard-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-family: var(--cond); font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; color: #fff; transition: color var(--t); }
.roomcard-link i { font-size: .8rem; transition: transform var(--t); }
.roomcard-link:hover { color: var(--gold); }
.roomcard-link:hover i { transform: translateX(5px); }
@media (max-width: 900px) { .rooms-grid { grid-template-columns: 1fr 1fr; } .roomcard.wide { aspect-ratio: 3/4; } }
@media (max-width: 560px) { .rooms-grid { grid-template-columns: 1fr; } }

/* ── Offers (dark band with cards) ── */
.offers { background: linear-gradient(rgba(42,32,24,.86), rgba(42,32,24,.86)), url("https://assets.simplotel.com/simplotel/image/upload/f_auto,q_auto,w_1600/the-hans-hotels/Dlx_Suite_Room_1_0d199aa2.jpeg") center/cover; color: rgba(255,255,255,.8); }
.offers .eyebrow { color: var(--gold); }
.offers h2 { color: #fff; }
.offers-cta { max-width: 640px; margin-inline: auto; }
.offers-cta p { margin-bottom: 26px; }
.offers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.offers .about-resv .r-label { color: rgba(255,255,255,.6); }
.offer-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.offer-card { background: var(--bg-2); color: var(--ink); }
.offer-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.offer-card .oc-body { padding: 26px 24px 28px; }
.offer-card h3 { margin-bottom: var(--gap-h-md); }
.offer-card .oc-price { font-family: var(--serif); font-size: 2rem; color: var(--gold); margin-bottom: 14px; }
.offer-card .oc-price span { font-family: var(--sans); font-size: .85rem; color: var(--body); }
.offer-card ul li { display: flex; gap: 10px; align-items: center; font-size: .9rem; padding: 6px 0; border-top: 1px solid var(--line-2); }
.offer-card ul li i { color: var(--gold); font-size: .8rem; }
@media (max-width: 900px) { .offers-grid, .offer-cards { grid-template-columns: 1fr; } }

/* ── Facilities icon grid ── */
.fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fac { padding: 44px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; transition: var(--t); }
.fac:hover { background: var(--bg-2); }
.fac i { font-size: 2.1rem; color: var(--gold); margin-bottom: 20px; display: block; }
.fac h4 { font-size: 1.4rem; margin-bottom: var(--gap-h-sm); }
.fac p { font-size: .92rem; margin: 0; }
@media (max-width: 860px) { .fac-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fac-grid { grid-template-columns: 1fr; } }

/* ── Feature blocks (dining / meetings — image + offset grey panel) ── */
#events { padding-top: 100px; }
.feature { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(30px, 5vw, 70px); }
.feature + .feature { margin-top: clamp(56px, 8vw, 100px); }
.feature-media { position: relative; z-index: 2; padding-bottom: 42px; }
.feature-media .fm-main { width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow); }
.feature-media .fm-front { position: absolute; z-index: 3; width: 44%; aspect-ratio: 1/1; object-fit: cover; left: -6%; bottom: 0; border: 6px solid var(--bg); box-shadow: var(--shadow-sm); }
.feature-text { position: relative; z-index: 2; }
.feature-text h2 { margin: 8px 0 var(--gap-h-lg); }
.feature-text .btn { margin-top: 28px; }
.feature-rev .feature-media { order: 2; }
.feature-rev .feature-text { order: 1; }
.feature-rev .feature-media .fm-front { left: auto; right: -6%; }
@media (max-width: 860px) {
  .feature, .feature-rev { grid-template-columns: 1fr; gap: 0; }
  .feature::before, .feature-rev::before { display: none; }
  .feature-rev .feature-media { order: 0; }
  .feature-rev .feature-text { order: 0; }
  .feature-media { padding-bottom: 34px; margin-bottom: 22px; }
  .feature-media .fm-front { width: 38%; left: auto; right: 4%; }
  .feature + .feature { margin-top: 48px; }
}

/* ── Testimonials (minimal boxed cards) ── */
.testi { background: var(--bg-2); color: var(--ink); }
.testi .eyebrow { color: var(--gold-txt); }
.testi h2 { color: var(--ink); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 30px); align-items: stretch; }
.testi-card { background: var(--white); border: 1px solid var(--line); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; }
.testi-card > i { color: var(--gold); font-size: 1.4rem; margin-bottom: 18px; }
.testi-card .t-quote { font-family: var(--serif); font-size: 1.25rem; line-height: 1.55; color: var(--ink); margin-bottom: 22px; }
.testi-card .t-who { margin-top: auto; }
.testi-card .t-who strong { display: block; font-family: var(--cond); font-size: .9rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.testi-card .t-who span { font-size: .82rem; letter-spacing: 1px; color: var(--body); }
/* Guest reviews — TripAdvisor rating cards */
a.testi-card { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
a.testi-card:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(54,40,31,.12); transform: translateY(-3px); }
.testi-card .t-count { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; color: var(--ink); margin-bottom: 22px; }
.testi-card .t-who span { display: block; }
.testi-card .t-who span.t-more { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-family: var(--cond); font-size: .76rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-txt); }
.testi-card .t-more i { transition: transform var(--t); }
a.testi-card:hover .t-more i { transform: translateX(4px); }
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; gap: 18px; max-width: 560px; margin-inline: auto; } }

/* ── CTA / Newsletter ── */
.cta { background: var(--bg-2); text-align: center; }
.cta form { display: flex; gap: 12px; max-width: 520px; margin: 24px auto 0; flex-wrap: wrap; justify-content: center; }
.cta input { flex: 1; min-width: 240px; min-height: 54px; padding: 14px 20px; border: 1px solid var(--line); background: #fff; font-family: var(--sans); }
.cta .form-status { font-size: .85rem; margin-top: 12px; min-height: 20px; }

/* ── Footer ── */
.ftr { background: var(--dark); color: rgba(255,255,255,.66); }
.ftr .container { padding-top: 84px; padding-bottom: 30px; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 48px; padding-bottom: 50px; }
.ftr h4 { color: #fff; font-size: 1.5rem; margin-bottom: var(--gap-h-lg); }
.ftr-brand .bm-main { font-family: var(--serif); letter-spacing: 4px; color: var(--gold); font-size: 1.5rem; }
.ftr-logo { height: 104px; width: auto; display: block; filter: brightness(0) invert(1); }
.ftr-logo-link { display: inline-block; transition: opacity var(--t); }
.ftr-logo-link:hover { opacity: .8; }
.ftr-brand p { margin-top: 16px; font-size: .92rem; max-width: 34ch; }
.ftr ul li { margin-bottom: 12px; }
.ftr ul li a { font-family: var(--cond); letter-spacing: 1px; transition: color var(--t); }
.ftr ul li a:hover { color: var(--gold); }
.ftr-contact p { font-size: .92rem; margin-bottom: 14px; }
.ftr-phone { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--sans); font-size: .92rem; margin-bottom: 12px; }
.ftr-phone i { color: var(--gold); font-size: 1.1rem; }
.ftr-social { display: flex; align-items: center; gap: 4px; margin-left: -10px; margin-top: 16px; }
.ftr-social a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: rgba(255,255,255,.75); font-size: 1.05rem; transition: color var(--t); }
.ftr-social a:hover { color: var(--gold); }
.ftr-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 26px; text-align: center; font-family: var(--cond); letter-spacing: 1px; font-size: .85rem; }
@media (max-width: 860px) { .ftr-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ── Floating + cookie ── */
.floating { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 12px; }
.fab { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; box-shadow: var(--shadow); border: none; cursor: pointer; transition: var(--t); }
.fab-wa { background: #25D366; } .fab-wa[aria-disabled="true"] { background: #9db3a5; cursor: not-allowed; }
.fab-top { background: var(--gold); color: var(--dark); font-size: 1.05rem; opacity: 0; visibility: hidden; }
.fab-top.show { opacity: 1; visibility: visible; }
.fab:hover { transform: translateY(-3px); }
.cookie { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 1200; max-width: 640px; margin-inline: auto; background: #fff; box-shadow: var(--shadow); padding: 20px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.cookie p { margin: 0; font-size: .85rem; flex: 1; min-width: 220px; }
.cookie.hidden { display: none; }

/* ── Nav drawer (mobile + small desktop) ──
   Up to 1200px, not 900px: the desktop nav is nowrap, so between ~901-1200px it needed
   more width than the header had and the overflow was clipped (logo squeezed to nothing,
   Book Now cut off) at common widths like 1024. Every property switches at the same point. */
.nav-drawer-close { display: none; }
/* Book Now lives in the mobile drawer too (main.js appends it) — hidden on desktop, where the
   header button is already visible. Sticky so a long link list can never scroll it away. */
.nav-book { display: none; }
@media (max-width: 1200px) {
  .nav-menu { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); height: 100dvh; background: var(--dark);
    flex: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 96px 30px 30px; transform: translateX(100%);
    transition: transform var(--t); z-index: 1500; overflow-y: auto; }
  .nav-menu:not(.open) { visibility: hidden; }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu.open { visibility: visible; }
  .nav-menu a { width: 100%; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1.05rem; }
  .nav-item.has-dropdown { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav-drop-toggle { width: 100%; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); justify-content: space-between; font-size: 1.05rem; }
  .nav-caret { transform: none; }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; width: 100%;
    background: none; backdrop-filter: none; border: none; box-shadow: none; padding: 2px 0 6px; }
  .dropdown::before { display: none; }
  .dropdown a { padding: 11px 0 11px 16px; font-size: .92rem; letter-spacing: 1px; white-space: normal;
    color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav-toggle { display: flex; }
  .nav-menu .nav-book { display: inline-flex; justify-content: center; width: 100%; order: -1;
    margin: 0 0 18px; padding: 14px 22px; font-size: .74rem; border-bottom: none; }
  /* Nothing may paint over the open drawer — the cookie bar (z-index 1200) otherwise sits on top
     of it, since .hdr's own z-index keeps the drawer inside that stacking context. */
  body.nav-open .cookie { display: none; }
  .nav-drawer-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
}

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ── Guest reviews slider ── */
.testi-carousel { position: relative; }
.testi-carousel .carousel-viewport { overflow: hidden; padding: 14px 0 6px; }
.testi-carousel .carousel-track { display: flex; gap: 26px; transition: transform .6s cubic-bezier(.4,0,.2,1); }
/* exactly three full cards per viewport: (track width - 2 gaps) / 3 */
.testi-slide { flex: 0 0 calc((100% - 52px) / 3); background: var(--white); border: 1px solid var(--line); padding: clamp(28px, 2.6vw, 38px); position: relative; display: flex; flex-direction: column; }
.testi-slide .t-mark { position: absolute; top: 22px; right: 26px; font-size: 1.9rem; color: var(--champagne); line-height: 1; }
.testi-slide .t-stars { color: var(--gold); font-size: .95rem; letter-spacing: 5px; margin-bottom: 20px; }
.testi-slide .t-text { font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.75; color: var(--ink); margin-bottom: 30px; }
.testi-slide .t-by { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testi-slide .t-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--dark); color: var(--gold); font-family: var(--serif); font-size: 1.35rem; display: flex; align-items: center; justify-content: center; flex: none; }
.testi-slide .t-name { font-family: var(--sans); font-weight: 600; font-size: .96rem; color: var(--ink); display: block; line-height: 1.4; }
.testi-slide .t-stay { font-size: .85rem; color: var(--body); }
.testi-carousel .carousel-prev, .testi-carousel .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(54,40,31,.16); transition: var(--t); }
.testi-carousel .carousel-prev:hover, .testi-carousel .carousel-next:hover { background: var(--gold); color: var(--white); }
.testi-carousel .carousel-prev { left: -22px; } .testi-carousel .carousel-next { right: -22px; }
.testi-carousel .carousel-dots { display: flex; gap: 9px; justify-content: center; margin-top: 30px; }
.testi-carousel .carousel-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--line-2); cursor: pointer; padding: 0; transition: var(--t); }
.testi-carousel .carousel-dots button.active { background: var(--gold); width: 26px; border-radius: 5px; }
/* below 3-up, centre a single card with symmetric peeks (data-center centres one slide,
   so only odd counts can render fully — 2-up would always clip both neighbours) */
@media (max-width: 1024px) { .testi-slide { flex: 0 0 min(72%, 430px); } }
@media (max-width: 700px) { .testi-slide { flex: 0 0 86%; } }

/* ── Homepage FAQ accordion ── */
.faq-list { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 46px 24px 0; position: relative;
  font-family: var(--serif); font-size: 1.3rem; color: var(--ink); line-height: 1.3; }
.faq-q::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 4px; top: 26px; font-size: .9rem; color: var(--gold); transition: transform var(--t); }
.faq-q[aria-expanded="true"]::after { content: "\f068"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.faq-a p { padding: 0 0 24px; margin: 0; font-size: .96rem; }


/* ── Hero image slider (JS: .hero-slide + #heroDots, 6s auto-advance) ── */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-dots { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 3; display: flex; gap: 10px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: var(--t); }
.hero-dots button.active { background: #fff; width: 28px; border-radius: 5px; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
/* below 900px the booking bar no longer overlaps the hero, so dots sit lower */
@media (max-width: 900px) { .hero-dots { bottom: 26px; } }
.ftr-social .ti-svg { width: 16.8px; height: 16.8px; display: block; }


/* == Lead-form consent, reCAPTCHA slot & status (js/forms.js) == */
.form-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: .9rem; line-height: 1.55; cursor: pointer; }
.form-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); }
.g-recaptcha-slot { margin: 12px 0 16px; }
.contact-form .form-status { padding: 10px 14px; border-radius: 6px; font-size: .9rem; margin-bottom: 14px; }