/* ============================================================
   The Anya Hotel, Gurugram — layout cloned from the Hans Delhi
   (Cappa) chassis, restyled in Anya's own palette + typography.
   Palette: Brand Grey #939598 · Charcoal #4A4A4A · Gold #C5A46D
   Fonts:   Playfair Display (headings) · Montserrat (body)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #F5F5F4;   /* cool off-white */
  --bg-2:    #FBFBFA;   /* alt sections */
  --ink:     #4A4A4A;   /* charcoal heading/text */
  --body:    #6A6A6A;   /* muted grey body */
  --gold:    #C5A46D;   /* brand accent gold */
  --gold-d:  #B08E52;   /* gold, darkened for hover */
  --gold-txt:#7E6129;   /* accessible gold for TEXT on light bg — 5.3:1 on #F5F5F4 */
  --grey:    #939598;   /* brand primary grey */
  --dark:    #4A4A4A;   /* charcoal — dark bands / footer */
  --dark-2:  #3E3E3E;   /* charcoal, deepened */
  --champagne: #E7DED0; /* soft gold tint */
  --line:    #E4E3E1;   /* hairline */
  --line-2:  #EAE9E7;   /* lighter hairline */
  --white:   #fff;
  --maxw:    1240px;
  --gutter:  clamp(20px, 5vw, 60px);
  --shadow:  0 24px 60px rgba(40,40,40,.15);
  --shadow-sm: 0 10px 30px rgba(40,40,40,.10);
  --t: .4s cubic-bezier(.4,0,.2,1);
  --serif: 'Playfair Display', 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%; scroll-padding-top: 105px; }
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(2.5rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.45rem; }
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: clamp(52px, 6vw, 88px) 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-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; transition: var(--t); }
.hdr.scrolled { background: rgba(74,74,74,.97); backdrop-filter: blur(8px); 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; }
/* Top strip → brand group site */
.topbar { background: var(--dark-2); border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar-inner { padding-block: 4px; }
.topbar-label { font-family: var(--cond); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.68); }
.topbar-link { font-family: var(--cond); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; transition: color var(--t); }
.topbar-link:hover { color: #fff; }
.topbar-link i { font-size: .7rem; transition: transform var(--t); }
.topbar-link:hover i { transform: translateX(4px); }
.hdr-main { padding-block: 10px; transition: padding var(--t); }
.hdr.scrolled .hdr-main { padding-block: 8px; }
.hdr.scrolled .topbar { display: none; }
@media (max-width: 600px) { .topbar-label { display: none; } .topbar-inner { justify-content: center; } }
/* 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: 236px;
  background: rgba(74,74,74,.98); backdrop-filter: blur(8px); border: 1px solid rgba(197,164,109,.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: 11px 22px; font-family: var(--cond); text-transform: uppercase;
  letter-spacing: 1.5px; font-size: .9rem; color: #fff; white-space: nowrap; transition: color var(--t), background var(--t); }
.dropdown a:hover { color: var(--gold); background: rgba(197,164,109,.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; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(43,32,25,.44); }
.hero-inner { position: relative; z-index: 2; width: 100%; text-align: center; color: #fff; padding-top: 64px; }
.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; scroll-margin-top: 100px; }
/* Three fields on a property widget (dates + Rooms & Guests), four where a hotel has to
   be chosen first. The occupancy column is the widest of them: it carries a whole
   sentence — "2 Rooms · 4 Adults, 2 Children". */
.booking-inner { max-width: var(--maxw); margin: 0 auto; background: #fff; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr 1.45fr 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.5fr 1fr 1fr 1.45fr 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; }

/* ── Rooms & Guests (namespaced .rg-) ──
   The trigger is styled to read as the same kind of control as the selects beside it,
   so the row still scans as one bar rather than a button dropped into it. */
.bk-guests { position: relative; }
.rg-trigger { width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: .95rem; color: var(--ink); padding: 0 20px 0 0; }
.rg-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Two separate stacking problems, because .booking is position:relative with a z-index
   and therefore its own stacking context:
     · INSIDE it, the panel has to clear .wbd (60) and its bubble (70) — hence 80. A tie
       would lose, since .wbd comes later in the markup.
     · OUTSIDE it, no z-index here can escape .booking's own 20, so the bar is lifted
       while the panel is open — but only to 999, deliberately UNDER the header's 1000,
       because a booking panel must never paint over the nav. The one thing above it that
       would still overlap is the cookie notice (1200), so that is hidden for the
       duration instead of out-stacked — the same trade body.nav-open already makes. */
.booking.rg-raised { z-index: 999; }
body.rg-panel-open .cookie { display: none; }
/* The welcome-back card is fixed at 950 and shares the lower half of the screen with a
   dropped panel. Same treatment the nav drawer gets below — it steps aside for the
   duration rather than the two of them jostling over z-index. */
body.rg-panel-open .cbk { display: none; }
.rg-panel { position: absolute; z-index: 80; top: calc(100% - 6px); left: 0;
  width: min(340px, calc(100vw - 40px));
  background: var(--white); box-shadow: var(--shadow); border-top: 3px solid var(--gold);
  text-align: left; display: flex; flex-direction: column; }
/* max-height is set in JS to whatever room the chosen side actually has, so a tall
   panel on a laptop-height screen scrolls its body instead of putting its own header
   off the top of the window where nothing can reach it. */
.rg-head, .rg-note, .rg-foot { flex: none; }
.rg-panel[hidden] { display: none; }
/* The booking bar sits low on a short viewport, and a 340px panel dropped below it lands
   off-screen. Flipped above the bar when there is no room under it — the same up/down
   choice .wbd-bubble makes, measured the same way. */
.rg-panel.rg-up { top: auto; bottom: calc(100% - 6px); }

.rg-head { display: flex; align-items: center; justify-content: space-between;
  background: var(--dark); padding: 14px 10px 14px 20px; }
/* The same micro-label as the field it belongs to — .bk-field label's exact type, in gold
   on the dark band instead of on white. The panel is part of that field, not a section of
   its own, so it should not introduce a heading voice. */
.rg-head-name { font-family: var(--cond); font-size: .7rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold); }
.rg-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--white); font-size: .95rem; cursor: pointer; }

.rg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 0; }
.rg-room + .rg-room { border-top: 1px solid var(--line); margin-top: 6px; }
.rg-room-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 6px; }
.rg-room-name { font-family: var(--cond); font-size: .7rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold-txt); }
.rg-remove { background: none; border: none; cursor: pointer; padding: 6px 0;
  font-family: var(--sans); font-size: .74rem; color: var(--body); text-decoration: underline; }
.rg-remove:hover { color: var(--ink); }

.rg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line); }
.rg-room-head + .rg-row { border-top: none; }
.rg-label { display: flex; flex-direction: column; }
.rg-name { font-family: var(--sans); font-size: .95rem; color: var(--ink); }
.rg-sub { font-family: var(--sans); font-size: .7rem; color: var(--body); margin-top: 2px; }

.rg-step { display: flex; align-items: center; gap: 4px; flex: none; }
/* 40px is under the 44px guideline, but these sit 4px apart inside a 44px-tall row and
   the label beside them is not a target — the effective touch area clears it. */
.rg-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1; cursor: pointer;
  transition: background var(--t), border-color var(--t); }
.rg-btn:hover:not([disabled]) { background: var(--bg); border-color: var(--gold); }
.rg-btn[disabled] { opacity: .35; cursor: default; }
.rg-count { min-width: 30px; text-align: center; font-family: var(--sans); font-size: .95rem; color: var(--ink); }

/* Scoped through .rg-panel deliberately: the bar's own `.bk-field select` rule is a
   class+type selector, so a bare `.rg-age` would lose to it and the age dropdown would
   inherit width:100% and no border — which stretches the row and wraps "Child 1". */
.rg-panel .rg-age { flex: none; width: auto; min-width: 92px; min-height: 40px; padding: 8px 10px;
  background: var(--white); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--sans); font-size: .95rem; }
/* Champagne rather than red: an unanswered field is not an error until they try to leave. */
.rg-panel .rg-age-missing { border-color: var(--gold); background: #FDFAF4; }
/* Keeps "Child 1" on one line next to its dropdown. */
.rg-label { min-width: 0; }
.rg-name { white-space: nowrap; }

.rg-note { margin: 0; padding: 10px 20px; background: #FDF4F4;
  font-family: var(--sans); font-size: .76rem; line-height: 1.45; color: #8A2B2B; }
.rg-note[hidden] { display: none; }

.rg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.rg-add { background: none; border: none; cursor: pointer; padding: 8px 0;
  font-family: var(--cond); font-size: .74rem; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold-txt); }
.rg-add:hover:not([disabled]) { color: var(--ink); }
.rg-add[disabled] { opacity: .4; cursor: default; }
.rg-add[hidden] { display: none; }
/* Deliberately .btn/.btn-gold's own metrics — it is the same button, in a panel. */
.rg-done { min-height: 44px; padding: 11px 26px; border: 1px solid transparent; cursor: pointer;
  background: var(--gold); color: var(--dark);
  font-family: var(--cond); font-weight: 500; font-size: .74rem; letter-spacing: 2px;
  text-transform: uppercase; transition: var(--t); }
.rg-done:hover { background: var(--gold-d); }

/* .has-hotel is repeated in both breakpoints on purpose. It is a two-class selector, so a
   bare .booking-inner inside a media query loses to it and the chain widget would keep its
   full-width track list all the way down — five tracks at 360px, overflowing the screen. */
@media (max-width: 900px) {
  .booking { margin-top: 0; }
  .booking-inner, .booking-inner.has-hotel { grid-template-columns: 1fr 1fr; }
  .bk-field { border-bottom: 1px solid var(--line-2); }
  .booking .btn-gold { grid-column: 1 / -1; min-height: 60px; }
  /* A whole sentence does not fit half a row. */
  .bk-guests { grid-column: 1 / -1; }
  /* Which hotel comes first and governs everything under it, so it takes the row rather
     than sitting beside a date and leaving the third field stranded on its own. */
  .booking-inner.has-hotel > .bk-field:first-child { grid-column: 1 / -1; }
  .rg-panel { width: auto; left: 12px; right: 12px; }
}
@media (max-width: 520px) {
  .booking-inner, .booking-inner.has-hotel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-btn, .rg-done { transition: none; }
}

/* ── About (single image) ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: stretch; }
.about-body { align-self: center; }
.about-body h2 { margin-bottom: var(--gap-h-lg); }
.about-media--single { position: relative; display: block; min-height: 440px; }
.about-media--single img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; align-items: start; } .about-media--single { min-height: 320px; } }

/* ── Rooms / Hotels grid ── */
#hotels { padding-top: 0; }
.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; } }

/* ── Rooms coverflow slider ── */
.rooms-carousel { position: relative; }
.rooms-carousel .carousel-viewport { overflow: hidden; }
.rooms-carousel .carousel-track { display: flex; gap: 24px; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.rooms-carousel .roomcard { flex: 0 0 min(40%, 380px); aspect-ratio: 3/4; opacity: .5; transform: scale(.9); transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1); }
.rooms-carousel .roomcard.is-active { opacity: 1; transform: scale(1); }
.carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.05rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.16); transition: var(--t); }
.carousel-prev:hover, .carousel-next:hover { background: var(--gold); color: var(--dark); }
.carousel-prev { left: calc(22% - 26px); }
.carousel-next { right: calc(22% - 26px); }
.carousel-dots { display: flex; gap: 10px; justify-content: center; margin-top: 34px; }
.carousel-dots button { width: 11px; height: 11px; border-radius: 50%; border: none; background: var(--line); cursor: pointer; padding: 0; transition: var(--t); }
.carousel-dots button.active { background: var(--gold); width: 30px; border-radius: 6px; }
@media (max-width: 900px) { .rooms-carousel .roomcard { flex: 0 0 66%; } .carousel-prev { left: 8px; } .carousel-next { right: 8px; } }
@media (max-width: 560px) { .rooms-carousel .roomcard { flex: 0 0 82%; } }

/* ── Offers (full-width background image) ── */
.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; } }

/* ── Gallery grid ── */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }

/* ── Feature blocks (dining / meetings — image + offset grey panel) ── */
#events { padding-top: 0; }
.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); }
@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.35fr 1.5fr 1.15fr; 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-brand p { margin-top: 16px; font-size: .92rem; max-width: 34ch; }
/* Explore link list runs in two balanced columns */
.ftr-grid ul { columns: 2; column-gap: 34px; }
.ftr ul li { margin-bottom: 12px; break-inside: avoid; }
.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; }
/* Get Directions button in the footer contact column (light-panel variant is .ci-directions) */
.ftr-directions { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cond); font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 9px 18px; margin-top: 6px; transition: var(--t); }
.ftr-directions:hover { background: var(--gold); color: var(--dark); }
.ftr-directions i { font-size: .72rem; }
.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; } .ftr-grid ul { max-width: 420px; column-gap: 28px; } }

/* ── 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) ── */
.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: 900px) {
  .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; }
}

/* ── Legal / content page ── */
.legal-hero { background: var(--dark); color: #fff; padding: clamp(120px, 16vw, 180px) 0 clamp(40px, 6vw, 64px); text-align: center; }
.legal-hero .eyebrow { color: var(--gold); }
.legal-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.legal-hero p { color: rgba(255,255,255,.72); margin-top: 12px; }
.legal { max-width: 860px; margin-inline: auto; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 44px 0 var(--gap-h-md); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.15rem; color: var(--ink); margin: 26px 0 var(--gap-h-sm); }
.legal p { margin-bottom: 14px; }
.legal ul { list-style: none; padding: 0; margin: 0 0 18px; }
.legal ul li { position: relative; padding: 5px 0 5px 22px; font-size: .95rem; }
.legal ul li::before { content: '\2013'; position: absolute; left: 4px; color: var(--gold); }
.legal .legal-note { font-size: .95rem; }

/* ── 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; } }

/* ── Homepage gallery collage (mosaic) ── */
.gallery-collage { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; grid-auto-flow: dense; }
.gallery-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-collage img.g-wide { grid-column: span 2; }
.gallery-collage img.g-tall { grid-row: span 2; }
.gallery-collage img.g-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 860px) { .gallery-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } }
@media (max-width: 520px) { .gallery-collage img.g-tall { grid-row: span 1; } }

/* ── Neighbourhood sub-headings ── */
.near-head { font-size: 1.5rem; margin: clamp(30px, 3.5vw, 44px) 0 22px; }
.near-head:first-of-type { margin-top: 0; }

/* ── Metro & transport connectivity ── */
.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: clamp(44px, 5vw, 62px); border-top: 1px solid var(--line); padding-top: clamp(34px, 4vw, 48px); }
.connect { display: flex; gap: 16px; align-items: flex-start; }
.connect > i { font-size: 1.5rem; color: var(--gold); flex: none; margin-top: 4px; }
.connect h4 { font-size: 1.2rem; margin-bottom: var(--gap-h-sm); }
.connect p { font-size: .92rem; margin: 0; }
@media (max-width: 860px) { .connect-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ── 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; }

/* NAV-05/RES-02: 9 primary nav links overflow the header between 901px and ~1000px,
   so hand over to the mobile drawer across that band (same pattern as Coco Palms,
   which does this up to 1200px because it carries more links). */
/* Drawer to 1200px (was 1000px): the nowrap desktop nav overflowed the header between
   ~1001-1200px — logo squeezed away, Book Now clipped — at widths as common as 1024. */
@media (min-width: 901px) and (max-width: 1200px) {
  .nav-menu { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); height: 100dvh; background: var(--dark);
    flex-direction: column; align-items: flex-start; gap: 6px; padding: 96px 30px 30px; transform: translateX(100%);
    transition: transform var(--t); z-index: 1500; overflow-y: auto; visibility: hidden; }
  .nav-menu.open { transform: translateX(0); visibility: visible; }
  .nav-menu a { width: 100%; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1.05rem; letter-spacing: 1.5px; }
  .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; }
  .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-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; }
}

/* ── Neighbourhood attraction cards (shared component, ported from The Hans, New Delhi) ── */
.attr-carousel { position: relative; }
.attr-carousel .carousel-viewport { overflow: hidden; padding: 6px 0; }
.attr-carousel .carousel-track { display: flex; gap: 24px; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.attr-card { flex: 0 0 calc((100% - 48px) / 3); background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.attr-media { aspect-ratio: 4/3; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.attr-media i { font-size: 2.6rem; color: var(--gold); }
.attr-media img { width: 100%; height: 100%; object-fit: cover; display: block; align-self: stretch; flex: none; }
.attr-body { padding: 22px 24px 26px; }
.attr-body h3 { font-size: 1.28rem; margin-bottom: var(--gap-h-sm); }
.attr-dist { font-family: var(--cond); font-size: .78rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-d); }
.attr-carousel .carousel-prev, .attr-carousel .carousel-next { position: absolute; top: 38%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; 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(40,40,40,.16); transition: var(--t); }
.attr-carousel .carousel-prev:hover, .attr-carousel .carousel-next:hover { background: var(--gold); color: var(--white); }
.attr-carousel .carousel-prev { left: -20px; } .attr-carousel .carousel-next { right: -20px; }
.attr-carousel .carousel-dots { display: flex; gap: 9px; justify-content: center; margin-top: 28px; }
.attr-carousel .carousel-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--line-2); cursor: pointer; padding: 0; transition: var(--t); }
.attr-carousel .carousel-dots button.active { background: var(--gold); width: 26px; border-radius: 5px; }
@media (max-width: 1024px) { .attr-card { flex: 0 0 min(70%, 420px); } }
@media (max-width: 640px)  { .attr-card { flex: 0 0 86%; } }


/* == 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; }

/* ===== Why Book Direct — benefits bubble (namespaced .wbd) ===== */
.wbd { position: relative; z-index: 60; max-width: var(--maxw); margin: 14px auto 0; text-align: center; }
.wbd-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; background: none; border: none; cursor: pointer;
  font-family: var(--cond); font-weight: 600; font-size: .82rem; letter-spacing: .6px; color: var(--gold-txt);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color var(--t); }
.wbd-link:hover { color: var(--gold-d); }
.wbd-bubble { position: absolute; left: 50%; z-index: 70; width: min(340px, calc(100vw - 24px));
  transform: translateX(calc(-50% + var(--wbd-shift, 0px)));
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 18px; text-align: left; }
.wbd-bubble[hidden] { display: none; }
.wbd-bubble.is-up   { bottom: calc(100% + 14px); }
.wbd-bubble.is-down { top: calc(100% + 14px); }
.wbd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wbd-list li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--sans); font-size: .86rem; line-height: 1.4; color: var(--ink); }
.wbd-list i { flex: 0 0 auto; width: 20px; margin-top: 2px; text-align: center; color: var(--gold-txt); font-size: .92rem; }
.wbd-tail { position: absolute; left: 50%; width: 16px; height: 16px; background: var(--white); border: 1px solid var(--line);
  transform: translateX(calc(-50% - var(--wbd-shift, 0px))) rotate(45deg); }
.wbd-bubble.is-up   .wbd-tail { bottom: -8px; border-top: none; border-left: none; }
.wbd-bubble.is-down .wbd-tail { top: -8px; border-bottom: none; border-right: none; }
@media (prefers-reduced-motion: no-preference) {
  .wbd-bubble:not([hidden]) { animation: wbdFade .18s ease-out; }
  @keyframes wbdFade { from { opacity: 0; } to { opacity: 1; } }
}


/* ===== Offer toast (homepage, top-left) ===== */
.offer-toast { position: fixed; top: 112px; left: 20px; z-index: 850; width: min(330px, calc(100vw - 40px));
  background: var(--dark); color: rgba(255,255,255,.86); border-radius: 12px; box-shadow: var(--shadow);
  padding: 18px 20px; transform: translateX(-115%); opacity: 0;
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s; }
.offer-toast.show { transform: none; opacity: 1; }
.offer-toast[hidden] { display: none; }
.offer-toast-title { display: block; font-family: var(--cond); font-weight: 600; font-size: .95rem; letter-spacing: .3px; color: #fff; margin-bottom: 6px; padding-right: 20px; }
.offer-toast-text { font-family: var(--sans); font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.8); margin: 0 0 12px; }
.offer-toast-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 600; font-size: .74rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: color .3s; }
.offer-toast-cta:hover { color: var(--champagne); }
.offer-toast-cta i { font-size: .72rem; transition: transform .3s; }
.offer-toast-cta:hover i { transform: translateX(3px); }
.offer-toast-close { position: absolute; top: 9px; right: 11px; background: none; border: none; color: rgba(255,255,255,.55); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 5px; }
.offer-toast-close:hover { color: #fff; }
@media (max-width: 600px) { .offer-toast { top: 82px; left: 12px; } }
@media (prefers-reduced-motion: reduce) { .offer-toast { transition: opacity .3s; transform: none; } }
/* ===== Welcome back — continue your booking (namespaced .cbk) =====
   Stacks above the WhatsApp / back-to-top column (.floating: 52px tall, 20px
   from the base) instead of beside it, and stays under the header's z-index:1000
   so it can never cover the nav. Pulled entirely while the mobile drawer is open,
   because the drawer's scrim only reaches 900. */
.cbk { position: fixed; right: 20px; bottom: 88px; z-index: 950;
  width: min(340px, calc(100vw - 40px));
  background: var(--white); border-top: 3px solid var(--gold);
  box-shadow: var(--shadow); padding: 26px 26px 24px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
.cbk.show { opacity: 1; transform: none; }

.cbk-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.15;
  color: var(--ink); margin: 0 0 var(--gap-h-md); padding-right: 30px; }
.cbk-sub { font-family: var(--sans); font-size: .82rem; line-height: 1.45; color: var(--body);
  margin: 0 0 var(--gap-label); }
/* --gold-txt, not --gold: the taupe reads as grey on white at this size. */
.cbk-hotel { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; line-height: 1.2;
  color: var(--gold-txt); margin: 0 0 12px; }
/* The guest's own search, read back to them: "10 Sep – 12 Sep · 2 nights · 2 adults, 1 child".
   Either of these rows may be absent — the dates line is dropped when the engine had none,
   the price line only arrives if the engine answers — so the 20px gap the card used to carry
   under .cbk-hotel lives on .cbk-cta instead, and the spacing holds either way. */
.cbk-meta { font-family: var(--sans); font-size: .78rem; line-height: 1.5; color: var(--body);
  margin: 0 0 4px; }
/* Engine-supplied markup, styled here because its own stylesheet is not loaded. */
.cbk-price { font-family: var(--sans); font-size: .78rem; line-height: 1.5; color: var(--body);
  margin: 0; }
.cbk-price .price-msg { font-weight: 700; color: var(--gold-txt); }


.cbk-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 22px; margin-top: 8px;
  background: var(--dark); color: #fff; text-decoration: none;
  font-family: var(--cond); font-weight: 600; font-size: .72rem; letter-spacing: 1.6px;
  text-transform: uppercase; transition: background .3s, color .3s; }
.cbk-cta:hover, .cbk-cta:focus-visible { background: var(--gold); color: var(--dark); }
.cbk-cta i { font-size: .68rem; transition: transform .3s; }
.cbk-cta:hover i { transform: translateX(4px); }

/* 44px hit area, small glyph — the box is invisible, so it stays quiet in the corner. */
.cbk-close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--body); font-size: .95rem; line-height: 1;
  cursor: pointer; transition: color .3s; }
.cbk-close:hover { color: var(--ink); }

body.nav-open .cbk { display: none; }

@media (max-width: 600px) {
  .cbk { left: 12px; right: 12px; width: auto; padding: 22px 20px 20px; }   /* bottom set by JS */
  .cbk-title { font-size: 1.35rem; }
  .cbk-hotel { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cbk { transform: none; transition: opacity .3s; }
  .cbk-cta, .cbk-cta i { transition: none; }
  .cbk-cta:hover i { transform: none; }
}

/* == remarketing-nudge == "Get these prices emailed to you!" (namespaced .pi-)
   THE TOKEN BLOCK IS THE ONLY PART YOU EDIT PER SITE. Derive every value from the
   target site's own CSS (SKILL.md STEP 3); the structure below is proven on The Hans
   Hotels (Sep 2026) and stays as-is. Scoped to .pi-modal — no :root pollution.

   This is the only true modal on most sites: it takes the whole screen and locks body
   scroll, so nothing else may paint above it except a skip link. Set --rmn-z above the
   site's drawer/cookie notice and below its skip link. */
.pi-modal {
  /* ---- design tokens: fill from the target site ---- */
  --rmn-z: 2000;                                   /* above drawer + cookie notice, below skip link */
  --rmn-backdrop: rgba(43, 32, 25, .62);           /* site's dark ink at ~.6 alpha */
  --rmn-surface: var(--dark);                          /* panel: the site's dark band / footer colour */
  --rmn-shadow: var(--shadow);
  --rmn-ink: var(--white);                              /* title + success title on --rmn-surface (AA >= 4.5:1) */
  --rmn-muted: var(--champagne);                            /* note, success sub-line, error (AA >= 4.5:1 on surface) */
  --rmn-accent: var(--champagne);                           /* property name on success, focus ring */
  --rmn-field-bg: var(--white);
  --rmn-field-ink: var(--ink);
  --rmn-field-placeholder: var(--body);                /* AA >= 4.5:1 on --rmn-field-bg */
  --rmn-cta-bg: var(--gold);                           /* site's primary booking CTA background */
  --rmn-cta-ink: var(--dark-2);                   /* CTA label — site --dark fails AA on Anya gold (3.76:1); --dark-2 clears 4.5:1 on every folder */
  --rmn-cta-hover: var(--champagne);
  --rmn-close-bg: rgba(255, 255, 255, .10);
  --rmn-close-hover: rgba(255, 255, 255, .22);
  --rmn-font-display: var(--serif);          /* site heading font */
  --rmn-font-body: var(--sans); /* site body font */
  --rmn-font-cta: var(--cond);                               /* site button font */
  --rmn-display-weight: 600;                       /* match the site's heading weight (serif display faces are often 400) */
  --rmn-cta-transform: none;                       /* match the site's button typography */
  --rmn-cta-tracking: 0;
  --rmn-radius: 0;                                 /* panel corners — match the site's cards */
  --rmn-field-radius: 0;                           /* input + button corners — match the site's forms */
  --rmn-t: var(--t);         /* site's transition token */
  /* ---- end tokens ---- */

  position: fixed; inset: 0; z-index: var(--rmn-z); display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.pi-modal.show { display: flex; }
.pi-backdrop { position: absolute; inset: 0; background: var(--rmn-backdrop);
  opacity: 0; transition: opacity var(--rmn-t); }
.pi-modal.in .pi-backdrop { opacity: 1; }

/* A dark card reads as an offer rather than an error, and the CTA carries all the
   contrast it needs against it. */
.pi-panel { position: relative; z-index: 1; width: min(460px, 100%);
  background: var(--rmn-surface); box-shadow: var(--rmn-shadow); border-radius: var(--rmn-radius);
  padding: 44px 44px 34px; text-align: center;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity var(--rmn-t), transform var(--rmn-t); }
.pi-modal.in .pi-panel { opacity: 1; transform: none; }

.pi-view { display: flex; flex-direction: column; align-items: stretch; }

.pi-title { font-family: var(--rmn-font-display); font-size: 1.95rem; font-weight: var(--rmn-display-weight); line-height: 1.18;
  color: var(--rmn-ink); margin: 0 0 26px; }

.pi-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* 17px keeps iOS from zooming the viewport when the field takes focus. */
.pi-field { width: 100%; min-height: 52px; padding: 14px 18px; box-sizing: border-box;
  background: var(--rmn-field-bg); color: var(--rmn-field-ink); border: 1px solid transparent;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-body); font-size: 17px; line-height: 1.4; }
.pi-field::placeholder { color: var(--rmn-field-placeholder); }
.pi-field:focus-visible { outline: 2px solid var(--rmn-accent); outline-offset: 2px; }

.pi-error[hidden] { display: none; }
/* Muted accent, not red: it has to clear 4.5:1 on the dark surface, which a warning
   red does not. The role="alert" is what carries the urgency. */
.pi-error { font-family: var(--rmn-font-body); font-size: .78rem; line-height: 1.4;
  color: var(--rmn-muted); text-align: left; margin: -4px 0 0; }

.pi-submit { width: 100%; min-height: 52px; padding: 14px 22px;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); border: none; cursor: pointer;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .95rem;
  text-transform: var(--rmn-cta-transform); letter-spacing: var(--rmn-cta-tracking);
  transition: background var(--rmn-t); }
.pi-submit:hover, .pi-submit:focus-visible { background: var(--rmn-cta-hover); }

.pi-note { font-family: var(--rmn-font-body); font-size: .8rem; line-height: 1.4;
  color: var(--rmn-muted); margin: 16px 0 0; }

/* 44px hit area, small glyph. */
.pi-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--rmn-close-bg); border: none; border-radius: 50%;
  color: var(--rmn-ink); cursor: pointer; transition: background var(--rmn-t); }
.pi-close:hover, .pi-close:focus-visible { background: var(--rmn-close-hover); }
.pi-close svg { width: 14px; height: 14px; }

/* ---- success view ---- */
.pi-success { align-items: center; gap: 0; }
.pi-success-icon { display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 0 18px; border-radius: 50%;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); }
.pi-success-icon svg { width: 22px; height: 22px; }
.pi-success-title { font-family: var(--rmn-font-display); font-size: 1.7rem; font-weight: var(--rmn-display-weight);
  line-height: 1.2; color: var(--rmn-ink); margin: 0 0 10px; }
.pi-success-sub { font-family: var(--rmn-font-body); font-size: .82rem; line-height: 1.5;
  color: var(--rmn-muted); margin: 0 0 6px; }
.pi-success-prop { font-family: var(--rmn-font-display); font-size: 1.22rem; font-weight: var(--rmn-display-weight);
  line-height: 1.25; color: var(--rmn-accent); margin: 0 0 24px; }
.pi-success-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 22px; box-sizing: border-box;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); text-decoration: none;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .72rem; letter-spacing: 1.6px;
  text-transform: uppercase; transition: background var(--rmn-t); }
.pi-success-cta:hover, .pi-success-cta:focus-visible { background: var(--rmn-cta-hover); color: var(--rmn-cta-ink); }
.pi-success-cta svg { width: 14px; height: 14px; transition: transform var(--rmn-t); }
.pi-success-cta:hover svg { transform: translateX(4px); }

@media (max-width: 600px) {
  .pi-modal { padding: 16px; }
  .pi-panel { padding: 38px 24px 28px; }
  .pi-title { font-size: 1.6rem; }
  .pi-success-title { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pi-panel { transform: none; transition: opacity .3s; }
  .pi-backdrop { transition: opacity .3s; }
  .pi-submit, .pi-close, .pi-success-cta, .pi-success-cta svg { transition: none; }
  .pi-success-cta:hover svg { transform: none; }
}
/* == /remarketing-nudge == */


/* =====================================================================
   Sept 2026 changes-tracker revamp (preview build, 29 Sep 2026)
   ===================================================================== */
/* Preview-only flags: every .pv-note marks content awaiting client confirmation.
   Remove them (and resolve what they say) before this goes live. */
.pv-note { display: block; margin: 14px 0; padding: 9px 13px; background: #FFF6DB; border: 1px dashed #D9B64A; color: #5E4700; font-family: var(--sans); font-size: .8rem; line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none; }
.pv-note strong { color: #5E4700; }

/* Homepage intro (Sl 3-6): the hero stays image-only, as on the live site; its copy sits
   in this block directly under the booking bar, in the site's standard section styling. */
.home-intro { text-align: center; padding-bottom: 0; }
.home-intro .container { max-width: 920px; }
.home-intro h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.2; max-width: 30ch; margin: 0 auto 16px; }
.home-intro .intro-sub { font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 700px; margin: 0 auto 22px; }
.home-intro .tag-list { justify-content: center; margin-bottom: 28px; }
.intro-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.home-intro + #why-anya { padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 600px) { .intro-ctas .btn { flex: 1 1 100%; max-width: 320px; } }

/* Location strip + Why Anya? (Sl 2, 42) */
/* 7 tiles: 3 location tiles across the top row, then 4 across (12-col grid) — no orphan card */
.why-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.why { grid-column: span 3; }
.why:nth-child(-n+3) { grid-column: span 4; }
.why { background: var(--white); border: 1px solid var(--line); padding: 28px 26px; }
.why > i { color: var(--gold); font-size: 1.5rem; margin-bottom: 14px; display: block; }
.why h3 { font-size: 1.22rem; margin-bottom: var(--gap-h-sm); }
.why p { font-size: .92rem; margin: 0; }
@media (max-width: 1024px) { .why, .why:nth-child(-n+3) { grid-column: span 6; } .why:first-child { grid-column: span 12; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } .why, .why:nth-child(-n+3), .why:first-child { grid-column: auto; } }

/* Tag chips: occasions, highlights, "Perfect for" */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.tag-list li { font-family: var(--cond); font-size: .68rem; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-txt); border: 1px solid var(--gold); padding: 6px 11px; line-height: 1.3; }
.tag-list li a { color: inherit; }
.tag-list li a:hover { color: var(--ink); }
.center .tag-list, .tag-list.center { justify-content: center; }
.cta-band .tag-list li, .offers .tag-list li { color: #fff; border-color: rgba(255,255,255,.55); }
.pf-label { display: block; font-family: var(--cond); font-size: .7rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); margin: 4px 0 8px; }
.perfect-for { margin: 20px 0 22px; }
.h1-sub { display: block; font-size: .5em; font-style: italic; line-height: 1.35; margin-top: 10px; color: var(--body); }
.feature-text .line { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink); margin-bottom: 14px; }
.btn-set { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.feature-text .btn-set .btn { margin-top: 0; }
/* Inline WhatsApp buttons use the site's own outline-gold button, not WhatsApp green (only the floating button is green) */
.btn-wa { background: transparent; color: var(--gold-txt); border-color: var(--gold); }
.btn-wa:hover { background: var(--gold); color: var(--dark); border-color: var(--gold); }
.btn-wa i { font-size: 1rem; }
.cta-band .btn-wa, .offers .btn-wa { color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .btn-wa:hover, .offers .btn-wa:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Meetings highlights + distance lists (Sl 20, 23, 25) */
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 6px 0 24px; }
.hl { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--ink); line-height: 1.45; }
.hl i { color: var(--gold); margin-top: 3px; width: 18px; text-align: center; flex: none; }
.dist-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; max-width: 900px; margin: 0 auto; }
.dist-list li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink); }
.dist-list li span:last-child { font-family: var(--cond); font-size: .78rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-txt); white-space: nowrap; }
@media (max-width: 700px) { .hl-grid, .dist-list { grid-template-columns: 1fr; } }

/* Reviews (Sl 40) — reuses the unused .testi component */
.rating-line { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0; font-family: var(--cond); font-size: .8rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.rating-line .stars { margin: 0; font-size: 1.1rem; }
.testi-card.is-placeholder { border-style: dashed; }
.testi-card.is-placeholder .t-quote { color: var(--body); font-style: italic; }
.testi-cta { text-align: center; margin-top: clamp(30px, 4vw, 44px); }

/* Offers page categories (Sl 29-37) */
.oc-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -18px 0 clamp(36px, 4vw, 52px); }
.oc-cats a { font-family: var(--cond); font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); background: var(--white); padding: 10px 18px; }
.oc-cats a:hover { border-color: var(--gold); color: var(--gold-txt); }
.oc-group + .oc-group { margin-top: clamp(48px, 6vw, 72px); }
.oc-group-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 26px; }
.oc-group-head h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0; }
.oc-group-head .eyebrow { margin: 0; }
.oc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.offercard .oc-btns .btn { margin-top: 0; padding: 9px 14px; letter-spacing: 1.3px; font-size: .68rem; }
.offercard .pv-note { margin: 0 0 16px; }
.bd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bd { background: var(--white); border: 1px solid var(--line); padding: 24px 22px; }
.bd i { color: var(--gold); font-size: 1.35rem; margin-bottom: 12px; display: block; }
.bd h3 { font-size: 1.1rem; margin-bottom: 6px; }
.bd p { font-size: .88rem; margin: 0; }
@media (max-width: 900px) { .bd-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bd-grid { grid-template-columns: 1fr; } }

/* Tripadvisor review slider (Sl 40) — reuses the neighbourhood carousel; Tripadvisor green only on its bubbles/mark */
.rating-line .ta-bubbles { margin-right: 2px; }
.ta-bubbles { display: inline-flex; gap: 3px; vertical-align: middle; }
.ta-bubbles i { width: 13px; height: 13px; border-radius: 50%; background: #00AA6C; border: 1.5px solid #00AA6C; display: inline-block; }
.ta-bubbles i.half { background: linear-gradient(90deg, #00AA6C 50%, transparent 50%); }
.ta-bubbles i.empty { background: transparent; }
.ta-mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ta-mark .ta-owl { width: 18px; height: 18px; color: #000; flex: none; }
a.ta-mark:hover { color: #00AA6C; }
.rv-card { background: var(--white); }
.rv-body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rv-card h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 10px; }
.rv-text { font-size: .92rem; line-height: 1.6; margin: 0 0 18px; }
.rv-who { margin-top: auto; margin-bottom: 14px; }
.rv-who strong { display: block; font-family: var(--cond); font-size: .82rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.rv-who span { font-size: .8rem; color: var(--body); }
.rv-link { font-family: var(--cond); font-size: .72rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-txt); display: inline-flex; align-items: center; gap: 8px; }
.rv-link:hover { color: var(--ink); }
.rv-link i { font-size: .7rem; }
.rv-carousel .carousel-prev, .rv-carousel .carousel-next { top: 45%; }
.rv-source { text-align: center; font-size: .78rem; color: var(--body); margin: 18px 0 0; }

/* Meetings liquor-policy note (1 Oct 2026): same look as the preview .pv-note, but a permanent class
   so the pre-go-live pv-note strip leaves it alone. */
.event-note { display: block; margin: 14px 0; padding: 9px 13px; background: #FFF6DB; border: 1px dashed #D9B64A; color: #5E4700; font-family: var(--sans); font-size: .8rem; line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none; }
.event-note strong { color: #5E4700; }

/* Labelled WhatsApp button (Sl 38) */
.floating { align-items: flex-end; }
.fab.fab-pill { width: auto; padding: 0 20px 0 16px; border-radius: 26px; gap: 9px; font-family: var(--cond); font-size: .76rem; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap; }
.fab.fab-pill i { font-size: 1.35rem; }
@media (max-width: 380px) { .fab.fab-pill { padding: 0 16px 0 14px; font-size: .7rem; } }