/* ==========================================================================
   RD HOTELS — DESIGN SYSTEM  (production foundation)
   Identity: quiet ultra-minimal. Space is the luxury.
   North star: Direct Bookings — engineered into the component layer.
   Type: Fraunces (display) + Hanken Grotesk (functional).
   Every value is a token. No magic numbers in components or pages.
   ========================================================================== */

/* ============================== 1. TOKENS ============================== */
:root {
  /* ---- Colour — warm near-monochrome ------------------------------------ */
  --c-paper:    #fcfbf8;   /* page background (warm white)                   */
  --c-bone:     #f3f0e9;   /* alternate section background                  */
  --c-bone-2:   #eae5da;   /* sunken / image placeholder                    */
  --c-ink:      #15130e;   /* primary text / near-black, warm               */
  --c-ink-2:    #3a352c;   /* secondary heading ink                         */
  --c-stone:    #6e6757;   /* body / secondary text  (AA on paper)          */
  --c-stone-2:  #756d5b;   /* tertiary / captions — AA-safe on paper & bone */
  --c-dark:     #15130e;   /* dark section surface                          */
  --c-dark-2:   #0f0d09;   /* deepest surface / footer                      */
  --c-on-dark:    #e7e1d4; /* text on dark                                  */
  --c-on-dark-2:  #a59c89; /* secondary text on dark                        */

  /* Single restrained metallic accent — hairlines, active states, never fills */
  --c-brass:      #9a7b43;  /* decorative: hairlines, rules, large text      */
  --c-brass-text: #7d5e1f;  /* AA-safe (>=4.5:1 on paper) for SMALL text/fill */
  --c-brass-soft: #b89a63;  /* accent on dark                                */
  --c-brass-light:#dabf83;  /* lighter gold for small labels over imagery    */

  /* Lines */
  --line:       rgba(21, 19, 14, 0.16);
  --line-soft:  rgba(21, 19, 14, 0.08);
  --line-dark:  rgba(231, 225, 212, 0.16);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text:    "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale — H1 is the largest HEADING (H1 > H2 > … > H6).
     "Hero" is a presentational treatment applied ONLY to the page's <h1>
     in hero contexts; it is not a heading level, so the largest text on a
     page is always still an <h1>. Use .t-h1…t-h6 to give any element a
     visual rank without changing its semantic tag. */
  --t-hero:    clamp(3.25rem, 7vw, 6.5rem);  /* hero <h1> treatment only    */
  --t-h1:      clamp(2.5rem, 5vw, 4rem);     /* largest standard heading    */
  --t-h2:      clamp(2rem, 3.6vw, 3rem);
  --t-h3:      clamp(1.55rem, 2.4vw, 2.15rem);
  --t-h4:      clamp(1.25rem, 1.7vw, 1.55rem);
  --t-h5:      clamp(1.1rem, 1.3vw, 1.25rem);
  --t-h6:      1rem;        /* 16px — QC TYP-03 strict floor */
  --t-lead:    clamp(1.2rem, 1.7vw, 1.6rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-small:   1rem;        /* 16px — QC TYP-03 strict floor (was 15px) */
  --t-caption: 1rem;        /* 16px — QC TYP-03 strict floor (was 13px) */
  --t-label:   1rem;        /* 16px — QC TYP-03 strict floor (was 11.5px); overlines/labels */

  --lh-tight: 1.04;
  --lh-snug:  1.22;
  --lh-body:  1.72;
  --tracking-label: 0.24em;
  --tracking-wide:  0.04em;

  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semi: 600;

  /* ---- Spacing — strict 4px base, 8px rhythm --------------------------- */
  --s-0: 0;     --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;
  --s-10: 128px; --s-11: 160px; --s-12: 192px; --s-13: 240px;

  /* Semantic spacing */
  --space-section: clamp(96px, 13vh, 200px);   /* between major sections    */
  --space-block:   clamp(48px, 7vh, 96px);     /* between blocks in section */
  --space-stack:   var(--s-5);                 /* default vertical stack    */

  /* ---- Layout ----------------------------------------------------------- */
  --content: 1200px;    /* text-led content column   */
  --wide:    1560px;    /* full-bleed-ish media       */
  --measure: 60ch;      /* max line length for reading */
  --gutter:  clamp(20px, 5vw, 80px);
  --grid-cols: 12;
  --grid-gap: clamp(16px, 1.6vw, 28px);

  /* ---- Radius / borders / elevation (ultra-minimal) -------------------- */
  --radius: 0px;        /* sharp, architectural        */
  --radius-sm: 2px;     /* inputs / small controls     */
  --border: 1px solid var(--line);
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(21,19,14,0.04);
  --elev-2: 0 24px 60px -34px rgba(21,19,14,0.30);  /* only for overlays/panels */

  /* ---- Motion ----------------------------------------------------------- */
  --dur-1: 0.2s;    /* micro — hovers           */
  --dur-2: 0.45s;   /* standard — UI transitions */
  --dur-3: 0.8s;    /* expressive — reveals      */
  --dur-4: 1.2s;    /* cinematic — image unmask  */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Imagery (rich & deep — NOT desaturated) ------------------------- */
  --img-grade: contrast(1.04) saturate(1.04) brightness(1.0);

  /* ---- A11y ------------------------------------------------------------- */
  --tap: 44px;          /* minimum touch target */
  --focus: 2px solid var(--c-brass);

  --header-h: 92px;
}

/* ============================== 2. RESET =============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-paper); color: var(--c-ink);
  font-family: var(--font-text); font-weight: var(--w-light);
  font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6,p,figure { margin: 0; }
::selection { background: var(--c-ink); color: var(--c-paper); }
:focus-visible { outline: var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================ 3. TYPOGRAPHY ===========================
   Semantic headings (bare h1–h6) descend H1 → H6. The matching .t-h*
   utility applies the SAME visual rank to any element, so you can keep
   correct tags (e.g. a section's <h2>) while choosing how big it looks.
   .t-hero is the oversized treatment for a page's <h1> in hero contexts. */
.t-hero { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--t-hero); line-height: 1.0; letter-spacing: -0.02em; font-optical-sizing: auto; }

h1, .t-h1 { font-family: var(--font-display); font-weight: var(--w-light);   font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.015em; font-optical-sizing: auto; }
h2, .t-h2 { font-family: var(--font-display); font-weight: var(--w-light);   font-size: var(--t-h2); line-height: var(--lh-snug);  letter-spacing: -0.01em; }
h3, .t-h3 { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-h3); line-height: var(--lh-snug);  letter-spacing: -0.005em; }
h4, .t-h4 { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-h4); line-height: 1.25; }
h5, .t-h5 { font-family: var(--font-text);    font-weight: var(--w-semi);    font-size: var(--t-h5); line-height: 1.35; }
h6, .t-h6 { font-family: var(--font-text);    font-weight: var(--w-semi);    font-size: var(--t-h6); line-height: 1.4; letter-spacing: 0.04em; }

.t-lead { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--t-lead); line-height: 1.4; color: var(--c-ink-2); }
.t-body { font-family: var(--font-text); font-weight: var(--w-light); font-size: var(--t-body); line-height: var(--lh-body); color: var(--c-stone); }
.t-body--ink { color: var(--c-ink-2); }
.t-small { font-size: var(--t-small); line-height: 1.65; color: var(--c-stone); }
.t-caption { font-size: var(--t-caption); color: var(--c-stone-2); letter-spacing: var(--tracking-wide); }
.t-label, .label {
  font-family: var(--font-text); font-weight: var(--w-medium);
  font-size: var(--t-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--c-brass-text);
}
.measure { max-width: var(--measure); }
em, .italic { font-style: italic; }

/* Overline with hairline — the one decorative motif, used sparingly */
.overline { display: inline-flex; align-items: center; gap: var(--s-3); }
.overline::before { content: ""; width: 36px; height: 1px; background: var(--c-brass); opacity: 0.7; }
.overline--center { justify-content: center; }
.overline--center::after { content: ""; width: 36px; height: 1px; background: var(--c-brass); opacity: 0.7; }
.overline--dark { color: var(--c-brass-soft); }

/* ============================== 4. LAYOUT ============================= */
.container { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.container--content { max-width: var(--content); }
.section { padding-block: var(--space-section); }
.section--bone { background: var(--c-bone); }
.section--dark { background: var(--c-dark); color: var(--c-on-dark); }
.section--dark .t-body { color: var(--c-on-dark-2); }
.section--dark .t-h1, .section--dark .t-h2, .section--dark .t-h3 { color: var(--c-paper); }

.grid { display: grid; grid-template-columns: repeat(var(--grid-cols), 1fr); gap: var(--grid-gap); }
.stack > * + * { margin-top: var(--space-stack); }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-7); }

/* Cinematic media wrapper — rich grade + optional depth */
.media { position: relative; overflow: hidden; background: var(--c-bone-2); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
.media--depth::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(15,13,9,0.45) 100%); }

/* ============================= 5. BUTTONS ============================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--tap);
  font-family: var(--font-text); font-weight: var(--w-medium);
  font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase;
  padding: var(--s-4) var(--s-7); border-radius: var(--radius);
  background: var(--c-ink); color: var(--c-paper);
  position: relative; overflow: hidden; isolation: isolate; transition: color var(--dur-2) var(--ease);
}
/* fill sits BEHIND the label (z-index:-1 within the button's isolated context),
   so the wipe never covers unwrapped button text */
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-brass-text); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-2) var(--ease); }
.btn > * { position: relative; z-index: 1; }
.btn:hover::after { transform: scaleX(1); transform-origin: left; }
.btn--secondary { background: transparent; color: var(--c-ink); border: var(--border); }
.btn--secondary::after { background: var(--c-ink); }
.btn--secondary:hover { color: var(--c-paper); border-color: var(--c-ink); }
.btn--light { background: var(--c-paper); color: var(--c-ink); }
.btn--light::after { background: var(--c-brass-soft); }
.btn--ghost-light { background: transparent; color: var(--c-paper); border: 1px solid var(--line-dark); }
.btn--ghost-light::after { background: var(--c-paper); }
.btn--ghost-light:hover { color: var(--c-ink); border-color: var(--c-paper); }
.btn--block { width: 100%; }
.btn--sm { padding: var(--s-3) var(--s-5); min-height: 0; }

/* Text link with animated rule */
.link {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-text); font-weight: var(--w-medium);
  font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase;
  padding-bottom: var(--s-1); position: relative; color: var(--c-ink);
}
.link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--c-brass); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.link:hover::after { transform: scaleX(1); }
.link svg { width: 24px; height: 8px; transition: transform var(--dur-2) var(--ease); }
.link:hover svg { transform: translateX(7px); }
.link--light { color: var(--c-paper); }

/* ============================== 6. FORMS ============================== */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label { font-family: var(--font-text); font-weight: var(--w-medium); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-brass-text); }
.field input, .field select {
  font-family: var(--font-text); font-size: var(--t-body); color: var(--c-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: var(--s-2) 0; min-height: var(--tap); width: 100%;
  -webkit-appearance: none; appearance: none; transition: border-color var(--dur-1) var(--ease);
}
/* keep the underline emphasis on focus but DON'T kill the focus ring —
   keyboard users still get the global :focus-visible outline */
.field input:focus, .field select:focus { border-color: var(--c-brass-text); }
.field input, .field select { min-width: 0; }
/* guarantee a visible keyboard focus ring on every form control
   (date inputs don't reliably honour the global :focus-visible) */
.field input:focus-visible, .field select:focus-visible,
.bookbar__field input:focus-visible, .bookbar__field select:focus-visible {
  outline: var(--focus); outline-offset: 2px;
}

/* ===================== 7. BOOKING ENGINE (north star) ================= */
/* Persistent booking bar — the core conversion surface */
.bookbar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: stretch;
  max-width: 100%; background: var(--c-paper); border: 1px solid var(--line); box-shadow: var(--elev-2);
}
.bookbar__field { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-5); border-right: 1px solid var(--line-soft); min-width: 0; }
.bookbar__field label { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-brass-text); font-weight: var(--w-medium); }
.bookbar__field input, .bookbar__field select { border: 0; background: transparent; font-family: var(--font-text); font-size: var(--t-body); color: var(--c-ink); min-height: 40px; min-width: 0; -webkit-appearance: none; appearance: none; width: 100%; cursor: pointer; }
.bookbar .btn { border-radius: 0; }
.bookbar--sticky { position: sticky; top: var(--header-h); z-index: 40; }

/* Why Book Direct — quiet typographic benefit module (no loud badges) */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); }
.benefit { padding: var(--s-7) var(--s-6); border-right: 1px solid var(--line); }   /* symmetric gutters */
.benefit:first-child { padding-left: 0; }       /* outer edges flush to the content column */
.benefit:last-child { padding-right: 0; border-right: 0; }
.benefit__no { font-family: var(--font-display); font-style: italic; font-size: var(--t-h4); color: var(--c-brass-text); margin-bottom: var(--s-4); display: block; }
.benefit h4 { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-h3); margin-bottom: var(--s-3); }
.benefit p { font-size: var(--t-small); color: var(--c-stone); }

/* USP highlight strip */
.usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.usp { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.usp__k { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--t-h2); line-height: 1; display: block; }
.usp__l { margin-top: var(--s-3); font-size: var(--t-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-stone-2); }

/* Offer card */
.offer { border: 1px solid var(--line); padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); }
.offer__tag { font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-brass-text); }
.offer h4 { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-h3); }

/* =========================== 8. CARDS / ROOMS ========================= */
.rooms { position: relative; }
.rooms__track { display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.rooms__track::-webkit-scrollbar { display: none; }
.rooms__track.dragging { cursor: grabbing; scroll-snap-type: none; }
.room { flex: 0 0 clamp(280px, 38vw, 460px); scroll-snap-align: start; }
.room__media { aspect-ratio: 3/4; margin-bottom: var(--s-5); }
.room__media img { transition: transform var(--dur-4) var(--ease); }
.room:hover .room__media img { transform: scale(1.04); }
.room__name { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-h3); margin-bottom: var(--s-2); }
.room__meta { font-size: var(--t-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-stone-2); margin-bottom: var(--s-4); }
.room__spec { display: flex; gap: var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.room__spec div span { font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-stone-2); display: block; }
.room__spec div b { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-h4); }
.room__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

/* Carousel controls (shared) */
.carousel-nav { display: flex; gap: var(--s-3); }
.cbtn { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--c-ink); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.cbtn:hover { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.cbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.cbtn svg { width: 20px; height: 20px; }

/* ============================== 9. GALLERY ============================
   Simple uniform carousel — equal slides, arrow-driven, scroll-snap. */
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-6); }
.gallery { display: flex; gap: var(--grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(24px, 4vw, 56px); scrollbar-width: none; cursor: grab; }
.gallery::-webkit-scrollbar { display: none; }
.gallery.dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery figure { flex: 0 0 clamp(280px, 46vw, 560px); aspect-ratio: 4/3; scroll-snap-align: start; }
.gallery .media { width: 100%; height: 100%; }
.gallery img { transition: transform var(--dur-4) var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }

/* Lightbox (shared component — must live here so it works on every page) */
.lb { position: fixed; inset: 0; z-index: 300; background: rgba(12,9,6,0.95); display: none; align-items: center; justify-content: center; padding: 5vw; }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; filter: var(--img-grade); }
.lb button { position: absolute; color: #fff; width: 52px; height: 52px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.2); transition: background var(--dur-1) var(--ease); }
.lb button:hover { background: rgba(255,255,255,0.14); }
.lb svg { width: 20px; height: 20px; }
.lb [data-lb-close] { top: 24px; right: 24px; }
.lb [data-lb-prev] { left: 24px; top: 50%; transform: translateY(-50%); }
.lb [data-lb-next] { right: 24px; top: 50%; transform: translateY(-50%); }

/* ============================ 10. ACCORDION ========================== */
.accordion { border-top: 1px solid var(--line); max-width: var(--content); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); text-align: left; padding: var(--s-6) 0; font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--t-h4); color: var(--c-ink); }
.acc__q svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--c-brass-text); transition: transform var(--dur-2) var(--ease); }
.acc__item.open .acc__q svg { transform: rotate(45deg); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-2) var(--ease); }
.acc__a p { padding-bottom: var(--s-6); color: var(--c-stone); max-width: var(--measure); }

/* ============================= 11. HEADER ============================= */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--s-5) var(--gutter); transition: background var(--dur-2) var(--ease), padding var(--dur-2) var(--ease); }
.hdr.solid { background: rgba(252,251,248,0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); padding-block: var(--s-3); }
.hdr__brand img { height: 80px; width: auto; }
.hdr__nav { justify-self: center; display: flex; gap: var(--s-7); }
.hdr__nav a { font-family: var(--font-text); font-weight: var(--w-regular); font-size: var(--t-caption); letter-spacing: 0.16em; text-transform: uppercase; }
.hdr__actions { justify-self: end; display: flex; align-items: center; gap: var(--s-5); }

/* ============================= 12. FOOTER ============================= */
.footer { background: var(--c-dark-2); color: var(--c-on-dark); padding-top: var(--s-10); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-8); padding-bottom: var(--s-8); border-bottom: 1px solid var(--line-dark); }
.footer a:hover { color: var(--c-paper); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-6); font-size: var(--t-caption); color: var(--c-on-dark-2); flex-wrap: wrap; }

/* ============================== 13. MOTION ============================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-mask { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-4) var(--ease-out); }
.reveal-mask.in { clip-path: inset(0 0 0 0); }
.reveal-mask img { transform: scale(1.1); transition: transform calc(var(--dur-4) + 0.4s) var(--ease-out); }
.reveal-mask.in img { transform: scale(1); }

/* ============================ 14. UTILITIES =========================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ============================ 15. RESPONSIVE ========================== */
@media (max-width: 900px) {
  .benefits, .usps { grid-template-columns: 1fr; }
  .benefit { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s-6) 0; }
  .benefit:last-child { border-bottom: 0; }
  .usp { } /* stays stacked via grid */
  .usps { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hdr__nav { display: none; }
  .bookbar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .bookbar__field:nth-child(3) { grid-column: span 2; }
  .bookbar .btn { grid-column: span 2; }
}
@media (max-width: 540px) {
  .usps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .bookbar { grid-template-columns: minmax(0,1fr); }
  .bookbar__field { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .room__spec { gap: var(--s-4); }
}