/* ==========================================================================
   RD HOTELS — Site composition layer
   Page-level patterns built ON the design system (ds.css tokens/components):
   header + nav, hero, statement, editorial split, full-bleed chapter,
   facilities, property collection, CTA band, reservation panel.
   ========================================================================== */

/* Optional, removable on-image overline contrast fix. To revert: delete
   assets/css/hero-overline-fix.css and remove this one @import line. */
@import url("hero-overline-fix.css");

/* -------------------------------- Header ------------------------------- */
.hdr__brand { display: inline-flex; align-items: center; }
.hdr__brand img { transition: height var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); }
.hdr__nav { gap: 20px; }
.hdr__actions { gap: var(--s-4); }
.hdr__nav a { color: var(--c-ink); position: relative; padding: 6px 0; letter-spacing: 0.08em; transition: color var(--dur-1) var(--ease); }
.hdr__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform var(--dur-2) var(--ease); opacity: 0.6; }
.hdr__nav a:hover::after, .hdr__nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr__tel { font-family: var(--font-text); font-size: var(--t-caption); letter-spacing: 0.02em; color: var(--c-ink); white-space: nowrap; }
.nav-reserve {
  white-space: nowrap;
  font-family: var(--font-text); font-weight: var(--w-medium); font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-paper); background: var(--c-ink);
  padding: 13px 24px; min-height: var(--tap); display: inline-flex; align-items: center;
  position: relative; overflow: hidden; isolation: isolate; transition: color var(--dur-2) var(--ease);
}
.nav-reserve::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); }
.nav-reserve:hover::after { transform: scaleX(1); transform-origin: left; }

/* --------------------- Our Hotels dropdown (header) --------------------- */
.hdr__drop { position: relative; }
.hdr__drop > button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-text); font-weight: var(--w-regular); font-size: var(--t-caption);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink);
  padding: 6px 0; position: relative; transition: color var(--dur-1) var(--ease);
}
.hdr__drop > button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform var(--dur-2) var(--ease); opacity: 0.6; }
.hdr__drop.open > button::after, .hdr__drop > button:hover::after { transform: scaleX(1); }
.hdr__drop > button svg { width: 9px; height: 6px; transition: transform var(--dur-2) var(--ease); }
.hdr__drop.open > button svg { transform: rotate(180deg); }
.hdr__drop-panel {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  min-width: 264px; background: var(--c-paper); border: 1px solid var(--line);
  box-shadow: var(--elev-2); padding: var(--s-3); display: none; z-index: 120;
}
/* hover bridge so the pointer can travel from button to panel */
.hdr__drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.hdr__drop.open .hdr__drop-panel { display: block; }
.hdr__drop-panel a { display: block; padding: var(--s-3) var(--s-4); color: var(--c-ink); font-family: var(--font-text); font-size: var(--t-small); letter-spacing: 0.02em; transition: background var(--dur-1) var(--ease); }
.hdr__drop-panel a:hover { background: var(--c-bone); }
.hdr__drop-panel a span { display: block; font-size: var(--t-caption); color: var(--c-stone-2); margin-top: 2px; }
.hdr__drop-all { border-top: 1px solid var(--line-soft); margin-top: var(--s-2); font-size: var(--t-label) !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--c-brass-text) !important; }

/* Transparent-over-hero state */
.hdr--over:not(.solid) { background: linear-gradient(to bottom, rgba(15,12,8,0.5), rgba(15,12,8,0)); }
.hdr--over:not(.solid) .hdr__nav a, .hdr--over:not(.solid) .hdr__tel, .hdr--over:not(.solid) .hdr__drop > button { color: var(--c-paper); }
/* panel links sit on a paper card — always ink, even over the hero */
.hdr--over:not(.solid) .hdr__drop-panel a { color: var(--c-ink); }
.hdr--over:not(.solid) .hdr__brand img { filter: brightness(0) invert(1); }
.hdr--over:not(.solid) .nav-reserve { background: var(--c-paper); color: var(--c-ink); }
.hdr--over:not(.solid) .nav-reserve::after { background: var(--c-brass-soft); }
.hdr--over:not(.solid) .hamburger span { background: var(--c-paper); }

/* Hamburger + mobile menu */
.hamburger { display: none; width: 42px; height: 30px; position: relative; z-index: 110; }
.hamburger span { position: absolute; left: 0; right: 0; height: 1.4px; background: var(--c-ink); transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), top var(--dur-1) var(--ease); }
.hamburger span:nth-child(1) { top: 7px; } .hamburger span:nth-child(2) { top: 15px; } .hamburger span:nth-child(3) { top: 23px; }
.hamburger.open span:nth-child(1) { top: 15px; transform: rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { top: 15px; transform: rotate(-45deg); }
.mobile-nav { position: fixed; inset: 0; z-index: 105; background: var(--c-dark); color: var(--c-on-dark); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-1); padding: var(--gutter); transform: translateY(-100%); transition: transform var(--dur-3) var(--ease-out), visibility 0s var(--dur-3); visibility: hidden; overflow-y: auto; }
/* auto margins centre the menu when it fits, and collapse to 0 when it
   overflows — every link stays reachable by scroll (a centred flex column
   would clip the first links irretrievably) */
.mobile-nav > a:first-of-type { margin-top: auto; }
.mobile-nav.open { transform: translateY(0); visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s 0s; }
.mobile-nav a { font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(1.8rem, 8vw, 2.6rem); color: var(--c-paper); padding: 8px 0; }
.mobile-nav a:hover { color: var(--c-brass-soft); }
.mobile-nav a.mobile-nav__sub { font-size: clamp(1.15rem, 4.6vw, 1.5rem); color: var(--c-on-dark-2); padding-left: var(--s-6); }
.mobile-nav a.mobile-nav__sub:hover { color: var(--c-brass-soft); }
/* expandable drawer group (Rooms → room types) */
.mnav-group__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.mnav-group__tgl { width: 44px; height: 44px; display: grid; place-items: center; color: var(--c-on-dark-2); flex-shrink: 0; }
.mnav-group__tgl svg { width: 15px; height: 9px; transition: transform var(--dur-2) var(--ease); }
.mnav-group__tgl[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav-group__tgl:hover { color: var(--c-brass-soft); }
.mnav-group__sub { display: grid; gap: var(--s-1); padding-bottom: var(--s-2); }
.mnav-group__sub[hidden] { display: none; }
.mobile-nav .nav-reserve { margin-top: var(--s-5); align-self: flex-start; background: var(--c-paper); color: var(--c-ink); }
.mobile-nav .nav-reserve::after { background: var(--c-brass-soft); }
.mobile-nav__close { position: sticky; top: 0; align-self: flex-end; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; color: var(--c-paper); background: var(--c-dark); z-index: 2; transition: background var(--dur-1) var(--ease); }
.mobile-nav__close:hover { background: rgba(255,255,255,0.12); }
.mobile-nav__close svg { width: 18px; height: 18px; }
.mobile-nav__foot { margin-top: auto; padding-top: var(--s-6); display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-caption); color: var(--c-on-dark-2); }
.mobile-nav__foot a { font-family: var(--font-text); font-size: var(--t-caption); }
body.lock { overflow: hidden; }

/* --------------------------------- Hero -------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--c-paper); overflow: hidden; background: var(--c-dark); }
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--c-dark); }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
/* data-start hero video stays invisible (poster background shows) until it is
   actually playing from its start point — no poster→intro frame pop */
.hero__media video[data-start] { opacity: 0; transition: opacity 0.9s var(--ease); }
.hero__media video[data-start].ready { opacity: 1; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__slide.active { opacity: 1; }
.hero__slide img { transform: scale(1.06); transition: transform 8s ease-out; }
.hero__slide.active img { transform: scale(1); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,12,8,0.5) 0%, rgba(15,12,8,0.12) 30%, rgba(15,12,8,0.22) 58%, rgba(15,12,8,0.78) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(15,12,8,0.5) 0%, rgba(15,12,8,0.14) 42%, transparent 68%); }
/* padding-top reserves the fixed-header height so the bottom-pinned hero content
   can't ride up under the logo/nav on short viewports (was 0 → eyebrow/H1 clashed
   with the header on the homepages at low heights; inner pages were already safe
   via .hero--page). Harmless on tall screens — content stays bottom-pinned. */
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wide); margin-inline: auto; padding: calc(var(--header-h) + var(--s-8)) var(--gutter) clamp(120px, 18vh, 200px); }
.hero__content { max-width: 64rem; }
.hero .overline { color: var(--c-brass-soft); margin-bottom: clamp(20px, 3vh, 36px); text-shadow: 0 1px 18px rgba(0,0,0,0.4); }
.hero .overline::before { background: var(--c-brass-soft); }
/* whole-title fade-up — robust at every width (per-line clip broke when long
   headlines wrapped on narrow screens). .ln just forces intentional breaks. */
.hero h1 { color: var(--c-paper); text-shadow: 0 2px 34px rgba(0,0,0,0.4); opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out) 0.12s, transform 0.9s var(--ease-out) 0.12s; }
.hero.show h1 { opacity: 1; transform: none; }
.hero h1 .ln { display: block; }
.hero__sub { margin-top: clamp(20px, 3vh, 32px); max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.18rem); color: rgba(255,255,255,0.88); font-weight: var(--w-light); text-shadow: 0 1px 16px rgba(0,0,0,0.45); opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease-out) 0.4s, transform 1s var(--ease-out) 0.4s; }
.hero.show .hero__sub { opacity: 1; transform: none; }
.hero__cta { margin-top: clamp(28px, 4vh, 44px); display: flex; gap: var(--s-4); flex-wrap: wrap; opacity: 0; transition: opacity 1s var(--ease-out) 0.55s; }
.hero.show .hero__cta { opacity: 1; }
.hero__scroll { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(120px, 18vh, 200px); writing-mode: vertical-rl; font-family: var(--font-text); font-size: var(--t-label); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 16px; }
.hero__scroll::after { content: ""; height: 60px; width: 1px; background: linear-gradient(var(--c-brass-soft), transparent); animation: scrollcue 2.4s var(--ease) infinite; }
@keyframes scrollcue { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* Hero dots (parent slider) */
/* below the hero CTA, clear of the buttons and the booking bar overlap */
.hero__dots { position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(52px, 7vh, 88px); display: flex; gap: 10px; }
.hero__dots button { width: 28px; height: 2px; background: rgba(255,255,255,0.35); transition: background var(--dur-2) var(--ease); }
.hero__dots button.active { background: var(--c-brass-soft); }

/* ---------------------- Booking bar overlap on hero ------------------- */
.book-wrap { position: relative; z-index: 30; max-width: var(--wide); margin: -44px auto 0; padding-inline: var(--gutter); }
@media (max-width: 540px) { .book-wrap { margin-top: -28px; } }

/* ------------------------------ Statement ------------------------------ */
.statement { max-width: 1100px; }
.statement.center { margin-inline: auto; text-align: center; }
.statement .overline { display: inline-flex; margin-bottom: clamp(24px, 3.5vh, 40px); }
.statement__big { font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(1.8rem, 3.4vw, 3.2rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--c-ink); }
.statement__big em { font-style: italic; color: var(--c-brass-text); }
.statement__sign { margin-top: clamp(28px, 4vh, 48px); font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.55rem); color: var(--c-stone); }
.section--dark .statement__big { color: var(--c-paper); }
.section--dark .statement__big em { color: var(--c-brass-soft); }

/* --------------------- Editorial split (media + text) ------------------ */
.split { display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center; gap: clamp(32px, 6vw, 104px); }
.split--rev .split__media { order: 2; }
.split__media { aspect-ratio: 4/5; }
.split--wide .split__media { aspect-ratio: 5/4; }
.split__body { max-width: 520px; }
.split--rev .split__body { margin-left: auto; }
.split__body > * + * { margin-top: var(--s-5); }
.split__body .overline { display: inline-flex; }
.split__list { display: flex; flex-direction: column; gap: var(--s-3); }
.split__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-family: var(--font-text); font-weight: var(--w-light); color: var(--c-stone); }
.split__list svg { width: 18px; height: 18px; color: var(--c-brass-text); flex-shrink: 0; margin-top: 5px; stroke-width: 1.4; }
.section--dark .split__list li { color: var(--c-on-dark-2); }
.section--dark .split__list svg { color: var(--c-brass-soft); }
.metaline { display: flex; gap: clamp(24px, 3vw, 44px); padding-top: var(--s-5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.section--dark .metaline { border-color: var(--line-dark); }
.metaline > div b { display: block; font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1; color: var(--c-ink); }
.section--dark .metaline > div b { color: var(--c-paper); }
.metaline > div span { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-stone-2); }
.section--dark .metaline > div span { color: var(--c-on-dark-2); }

/* --------------------------- Full-bleed chapter ------------------------ */
.chapter { position: relative; }
.chapter__media { height: clamp(420px, 82vh, 880px); }
.chapter__cap { position: absolute; left: var(--gutter); bottom: clamp(36px, 6vh, 72px); z-index: 2; color: var(--c-paper); max-width: 28ch; }
.chapter__cap .overline { color: var(--c-brass-soft); margin-bottom: 14px; }
.chapter__cap .overline::before { background: var(--c-brass-soft); }
.chapter__cap p { font-family: var(--font-display); font-weight: var(--w-light); font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.16; }

/* ------------------------------ Facilities ----------------------------- */
.facilities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facility { background: var(--c-paper); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.facility svg { width: 26px; height: 26px; color: var(--c-brass-text); stroke-width: 1.2; }
.facility h4 { font-family: var(--font-text); font-weight: var(--w-semi); font-size: var(--t-small); letter-spacing: 0.01em; }
.section--dark .facilities { background: var(--line-dark); border-color: var(--line-dark); }
.section--dark .facility { background: var(--c-dark); }
.section--dark .facility svg { color: var(--c-brass-soft); }
.section--dark .facility h4 { color: var(--c-paper); }

/* ------------------- Property collection (parent page) ----------------- */
.collection { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); }
.prop { position: relative; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: var(--c-paper); background: var(--c-dark); }
.prop.feature { grid-column: span 2; min-height: 560px; }
.prop__img { position: absolute; inset: 0; z-index: 0; }
.prop__img img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); transition: transform 1.2s var(--ease); }
.prop:hover .prop__img img { transform: scale(1.05); }
/* darker through the lower half where the body text sits — keeps the meta
   line + name readable over bright façade photos */
.prop__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,8,0.05) 0%, rgba(15,12,8,0.18) 32%, rgba(15,12,8,0.58) 56%, rgba(15,12,8,0.86) 76%, rgba(15,12,8,0.96) 100%); }
.prop__body { position: relative; z-index: 1; padding: clamp(28px, 3vw, 48px); width: 100%; }
.prop__meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-brass-light); margin-bottom: var(--s-3); text-shadow: 0 1px 12px rgba(0,0,0,0.85); }
.prop__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--c-brass-light); }
.prop h3 { color: var(--c-paper); margin-bottom: var(--s-2); text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.prop__loc, .prop__stats { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.prop__loc { font-family: var(--font-text); font-size: var(--t-small); color: rgba(255,255,255,0.82); display: flex; align-items: center; gap: 8px; }
.prop__loc svg { width: 15px; height: 15px; color: var(--c-brass-soft); }
.prop__foot { margin-top: var(--s-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.prop__stats { display: flex; gap: var(--s-6); }
.prop__stats div b { display: block; font-family: var(--font-display); font-weight: var(--w-light); font-size: 1.6rem; line-height: 1; color: var(--c-paper); }
.prop__stats div span { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.prop__tag { position: absolute; top: 22px; left: 22px; z-index: 2; font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 14px; background: rgba(15,12,8,0.5); backdrop-filter: blur(4px); color: var(--c-brass-soft); border: 1px solid var(--line-dark); }
/* photoless branded plate */
.prop--plate { background: linear-gradient(150deg, #1c1812 0%, #100d09 100%); }
.prop--plate .prop__img { display: none; }
.prop--plate::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; background: radial-gradient(120% 80% at 82% 0%, rgba(154,123,67,0.16) 0%, transparent 55%); }
.prop--plate .plate-mark { position: absolute; z-index: 0; top: clamp(28px,4vw,44px); right: clamp(24px,3vw,40px); width: 72px; height: 72px; opacity: 0.45; color: var(--c-brass); }
.prop--plate .plate-mark svg { width: 100%; height: 100%; stroke-width: 1.2; }
.prop__link { font-family: var(--font-text); font-weight: var(--w-medium); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-paper); display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--c-brass-soft); }
.prop__link svg { width: 22px; height: 8px; transition: transform var(--dur-2) var(--ease); }
.prop:hover .prop__link svg { transform: translateX(6px); }

/* ------------------------------ CTA band ------------------------------- */
.cta-band { position: relative; overflow: hidden; color: var(--c-paper); text-align: center; }
.cta-band__bg { position: absolute; inset: 0; z-index: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(15,12,8,0.66), rgba(15,12,8,0.74)); }
.cta-band__inner { position: relative; z-index: 2; padding-block: clamp(96px, 14vh, 190px); max-width: 760px; margin-inline: auto; }
.cta-band h2 { color: var(--c-paper); margin-bottom: var(--s-5); }
.cta-band p { color: rgba(255,255,255,0.85); margin-bottom: var(--s-4); }
.cta-band__times { display: flex; gap: var(--s-7); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s-7); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-brass-soft); }
.cta-band__btns { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }

/* --------------------------- Location / map ---------------------------- */
.loc { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 5vw, 88px); align-items: stretch; }
.loc__map { position: relative; min-height: 440px; }
.loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) sepia(0.1) contrast(1.04); }
.addr { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-6); }
.addr__row { display: flex; gap: var(--s-4); align-items: flex-start; }
.addr__row svg { width: 20px; height: 20px; color: var(--c-brass-text); flex-shrink: 0; margin-top: 4px; stroke-width: 1.4; }
.addr__row a:hover { color: var(--c-brass-text); }
.hubs { columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.hubs li { break-inside: avoid; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-text); font-weight: var(--w-light); font-size: var(--t-small); color: var(--c-ink-2); display: flex; align-items: center; gap: 12px; }
.hubs li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-brass); flex-shrink: 0; }

/* ------------------------------ Breadcrumbs ---------------------------- */
.crumbs { font-family: var(--font-text); font-weight: var(--w-regular); font-size: var(--t-caption); letter-spacing: 0.05em; margin-bottom: clamp(14px, 2vh, 22px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.78); text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.crumbs li + li::before { content: "/"; opacity: 0.45; }
.crumbs a { color: rgba(255,255,255,0.92); transition: color var(--dur-1) var(--ease); }
.crumbs a:hover { color: var(--c-brass-light); }
.crumbs [aria-current="page"] { color: var(--c-brass-light); }
.holding .crumbs ol { justify-content: center; }
/* below-hero placement: slim bar at the top of the content area */
.crumbs-bar { max-width: var(--wide); margin-inline: auto; padding: clamp(20px, 3.5vh, 36px) var(--gutter) 0; }
.crumbs-bar .crumbs { margin-bottom: 0; }
/* ink variant for pages without a hero (e.g. the sitemap record page) */
.crumbs--ink li { color: var(--c-stone); text-shadow: none; }
.crumbs--ink a { color: var(--c-ink-2); }
.crumbs--ink a:hover { color: var(--c-brass-text); }
.crumbs--ink [aria-current="page"] { color: var(--c-brass-text); }

/* --------------------------- Section heading --------------------------- */
.sec-head { margin-bottom: clamp(40px, 6vh, 80px); max-width: 760px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .overline { display: inline-flex; margin-bottom: var(--s-4); }
.sec-head h2 { margin-bottom: var(--s-4); }
.sec-head p { color: var(--c-stone); }
.section--dark .sec-head p { color: var(--c-on-dark-2); }
.split-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: clamp(40px, 6vh, 72px); flex-wrap: wrap; }

/* ------------------------- Reservation panel --------------------------- */
.rpanel { position: fixed; inset: 0; z-index: 200; display: none; }
.rpanel.open { display: block; }
.rpanel__scrim { position: absolute; inset: 0; background: rgba(15,12,8,0.55); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.rpanel.open .rpanel__scrim { opacity: 1; }
.rpanel__card { position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 100%); background: var(--c-paper); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-3) var(--ease-out); overflow-y: auto; }
.rpanel.open .rpanel__card { transform: none; }
.rpanel__close { align-self: flex-end; flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.rpanel__close svg { width: 18px; height: 18px; }
.rpanel h3 { margin: clamp(16px,3vh,32px) 0 var(--s-2); }
.rpanel .field { margin-bottom: var(--s-2); }
.rpanel .btn { margin-top: var(--s-5); }
.rpanel__note { margin-top: var(--s-4); font-size: var(--t-caption); color: var(--c-stone-2); text-align: center; }

/* --------------- Booking bar with hotel select (4 fields) -------------- */
.bookbar--hotel { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
@media (max-width: 900px) and (min-width: 541px) {
  .bookbar--hotel { grid-template-columns: 1fr 1fr; }
  .bookbar--hotel .bookbar__field:nth-child(1),
  .bookbar--hotel .bookbar__field:nth-child(4),
  .bookbar--hotel .btn { grid-column: span 2; }
  .bookbar--hotel .bookbar__field:nth-child(3) { grid-column: auto; }
}
@media (max-width: 540px) {
  .bookbar--hotel { grid-template-columns: 1fr; }
  /* kill every span-2 leaking from the ≤900 rules — a span in a 1-col grid
     spawns a phantom second column */
  .bookbar--hotel .bookbar__field:nth-child(1),
  .bookbar--hotel .bookbar__field:nth-child(3),
  .bookbar--hotel .bookbar__field:nth-child(4),
  .bookbar--hotel .btn { grid-column: auto; }
}

/* --------------------- Guest selector (booking forms) ------------------ */
.gsel { position: relative; }
.gsel__trigger { width: 100%; text-align: left; font-family: var(--font-text); font-size: var(--t-body); color: var(--c-ink); padding: var(--s-2) 0; min-height: var(--tap); border-bottom: 1px solid var(--line); cursor: pointer; transition: border-color var(--dur-1) var(--ease); }
.gsel__trigger:hover { border-color: var(--c-brass-text); }
.gsel__pop { background: var(--c-paper); border: 1px solid var(--line); padding: var(--s-5); margin-top: var(--s-3); display: grid; gap: var(--s-4); }
.gsel__pop[hidden] { display: none; }
.bookbar .gsel__pop { position: absolute; left: calc(-1 * var(--s-5)); top: calc(100% + 10px); min-width: 272px; z-index: 60; box-shadow: var(--elev-2); margin-top: 0; }
.gsel__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); font-family: var(--font-text); font-size: var(--t-small); color: var(--c-ink-2); }
.gsel__step { display: flex; align-items: center; gap: var(--s-3); }
.gsel__step button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; color: var(--c-ink); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.gsel__step button:hover { background: var(--c-ink); color: var(--c-paper); }
.gsel__step b { min-width: 22px; text-align: center; font-weight: var(--w-semi); font-size: var(--t-small); }
.gsel__ages { display: grid; gap: var(--s-2); border-top: 1px solid var(--line-soft); padding-top: var(--s-4); }
.gsel__ages[hidden] { display: none; }
.gsel__ages label { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--t-caption); color: var(--c-stone); }
.gsel__ages select { border: 1px solid var(--line); background: transparent; padding: 4px 10px; font-family: var(--font-text); font-size: var(--t-caption); color: var(--c-ink); min-height: 34px; }
.gsel__rooms { display: grid; gap: var(--s-4); }
.gsel__room { display: grid; gap: var(--s-3); border-top: 1px solid var(--line-soft); padding-top: var(--s-4); }
.gsel__room:first-child { border-top: 0; padding-top: 0; }
.gsel__room-head { display: flex; justify-content: space-between; align-items: center; 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); }
.gsel__room-head button { font-size: var(--t-caption); letter-spacing: 0.04em; text-transform: none; color: var(--c-stone-2); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.gsel__room-head button:hover { color: var(--c-ink); }
.gsel__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); border-top: 1px solid var(--line-soft); padding-top: var(--s-2); }
.gsel__add { 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-ink); padding: var(--s-2) 0; min-height: var(--tap); }
.gsel__add:hover { color: var(--c-brass-text); }
.gsel__add:disabled { opacity: 0.35; cursor: not-allowed; }
.gsel__done { 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); padding: var(--s-2) 0; min-height: var(--tap); }
.gsel__opt { text-transform: none; letter-spacing: 0; color: var(--c-stone-2); font-weight: var(--w-regular); }

/* -------------------------------- Reveal ------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); 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.08); transition: transform calc(var(--dur-4) + .4s) var(--ease-out); }
.reveal-mask.in img { transform: scale(1); }
[data-stagger] .reveal { transition-delay: calc(var(--i, 0) * 0.08s); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 999; background: var(--c-ink); color: var(--c-paper); padding: 12px 20px; transition: top var(--dur-1) var(--ease); }
.skip:focus { top: 16px; }

/* ----------------- Chapter caption legibility (over bright photos) ------ */
.chapter .chapter__media::after { background: linear-gradient(180deg, transparent 22%, rgba(13,9,5,0.5) 60%, rgba(13,9,5,0.84) 100%); }
.chapter::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(80deg, rgba(13,9,5,0.5) 0%, rgba(13,9,5,0.12) 38%, transparent 60%); pointer-events: none; }
.chapter__cap { z-index: 2; }
.chapter__cap .overline { text-shadow: 0 1px 16px rgba(0,0,0,0.55); }
.chapter__cap p { text-shadow: 0 2px 26px rgba(0,0,0,0.6); }

/* ------------------------- Rooms as static cards ----------------------- */
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px); }
.rooms-grid .room { flex: initial; }
.rooms-grid .room__media { aspect-ratio: 4/5; }
/* Properties with only two room types (e.g. Peenya) — fill the row. */
.rooms-grid--duo { grid-template-columns: repeat(2, 1fr); }
.rooms-grid--duo .room__media { aspect-ratio: 3/2; }

/* --------------------- Media slider (dining / meetings) ---------------- */
.mslider { position: relative; overflow: hidden; }
.mslider .mslide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.mslider .mslide:first-child { position: relative; }   /* gives the box its height */
.mslider .mslide.active { opacity: 1; }
.mslider .mslide, .mslider .mslide .media { width: 100%; height: 100%; }
.mslider__nav { position: absolute; z-index: 3; right: var(--s-5); bottom: var(--s-5); display: flex; gap: var(--s-3); }
.mslider__nav button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(252,251,248,0.9); color: var(--c-ink); transition: background var(--dur-1) var(--ease); }
.mslider__nav button:hover { background: var(--c-paper); }
.mslider__nav svg { width: 18px; height: 18px; }
.mslider__dots { position: absolute; z-index: 3; left: var(--s-5); bottom: calc(var(--s-5) + 14px); display: flex; gap: 8px; }
.mslider__dots button { width: 22px; height: 2px; background: rgba(255,255,255,0.5); transition: background var(--dur-1) var(--ease); }
.mslider__dots button.active { background: var(--c-paper); }

/* ----------------- Footer: two-column Explore list (child) ------------- */
.footer__links--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: var(--s-3) var(--s-6); }
.footer__links--duo > * + * { margin-top: 0; }  /* cancel .stack-sm spacing — the grid gap spaces rows */

/* ------------------------------- Footer logo --------------------------- */
.footer img { width: auto; height: 80px; }

/* ===================== Interior brand pages (About, Dining, …) ========== */
/* Shorter static hero — reuses .hero gradients, reveal + over-hero header.
   No slider, no 100svh; title/overline sit bottom-left like the homepage.
   Content is pinned to the bottom (inherited align-items:flex-end), so the
   band MUST be tall enough that a tall title never rides up under the fixed
   header. Interior titles therefore use a smaller-than-hero size, and the
   inner block reserves header clearance up top. */
.hero--page { min-height: clamp(560px, 74vh, 720px); }
.hero--page .hero__inner { padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: clamp(48px, 8vh, 88px); }
.hero--page .hero__content { max-width: 60rem; }
.hero--page h1 { font-size: clamp(2.5rem, 4.8vw, 4.25rem); line-height: 1.05; text-wrap: balance; }

/* Simple two-line lead under interior sec-heads sits on --measure already. */

/* ------------------------- Pillars / value trio ------------------------ */
/* (uses the .benefits/.benefit component from ds.css — no new rules needed) */

/* --------------------------- Contact / forms --------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-6); }
.form-grid .field--full { grid-column: 1 / -1; }
/* reCAPTCHA lives in a popup — hidden while still inside the form; forms.js moves it
   into the .rc-modal on Submit. */
form [id^="g-recaptcha-"] { display: none; }
.rc-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(21, 19, 14, 0.55); padding: var(--s-4);
}
.rc-modal__card {
  position: relative; background: var(--c-paper); color: var(--c-ink);
  width: 100%; max-width: 360px; padding: var(--s-7) var(--s-6) var(--s-6);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 24px 60px rgba(21, 19, 14, 0.32); text-align: center;
}
.rc-modal__title { font-family: var(--font-display); font-size: var(--t-h5); margin: 0 0 var(--s-5); }
.rc-modal__body { display: flex; justify-content: center; min-height: 78px; }
.rc-modal__hint { font-family: var(--font-text); font-size: var(--t-caption); color: var(--c-stone); margin: var(--s-4) 0 0; }
.rc-modal__close {
  position: absolute; top: 6px; right: 10px; width: 32px; height: 32px;
  background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--c-stone);
}
.rc-modal__close:hover { color: var(--c-ink); }
/* Consent checkbox on lead forms — override the uppercase/tracked .field label styling. */
.field > label.check {
  flex-direction: row; align-items: flex-start; gap: var(--s-3);
  font-family: var(--font-text); font-weight: var(--w-regular); font-size: var(--t-body);
  letter-spacing: normal; text-transform: none; color: var(--c-ink); cursor: pointer;
}
/* Restore a real, visible checkbox — the base .field input rule strips appearance,
   removes the border/background and forces min-height:44px, which hides it. */
.field > label.check input {
  -webkit-appearance: auto; appearance: auto;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin-top: 2px;
  flex: 0 0 auto; padding: 0; border: 0; background: none;
  accent-color: var(--c-brass-text); cursor: pointer;
}
.field textarea {
  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; width: 100%; resize: vertical; min-height: 104px;
  -webkit-appearance: none; appearance: none; transition: border-color var(--dur-1) var(--ease);
}
.field textarea:focus { border-color: var(--c-brass-text); }
.field textarea:focus-visible { outline: var(--focus); outline-offset: 2px; }
.contact-card { background: var(--c-bone); padding: clamp(28px, 4vw, 52px); }
.section--dark .contact-card { background: rgba(231,225,212,0.05); }

/* ----------------------- Full gallery (grid + lightbox) ---------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(180px, 21vw, 300px); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 18px); }
.gallery-grid figure { position: relative; overflow: hidden; background: var(--c-bone-2); cursor: zoom-in; }
.gallery-grid figure img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); transition: transform var(--dur-4) var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(15,12,8,0.28)); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.gallery-grid figure:hover::after { opacity: 1; }
.gallery-grid .tall { grid-row: span 2; }
.gallery-grid .wide { grid-column: span 2; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(220px, 62vw, 300px); }
  .gallery-grid .tall, .gallery-grid .wide { grid-row: span 1; grid-column: span 1; }
}

/* --------------------------- Holding page ------------------------------ */
/* dignified 'content in preparation' state for MoM-pending pages */
.holding { min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; color: var(--c-paper); }
.holding__bg { position: absolute; inset: 0; z-index: 0; }
.holding__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
.holding::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,12,8,0.72), rgba(15,12,8,0.82)); }
.holding__inner { position: relative; z-index: 2; max-width: 640px; padding: clamp(120px, 20vh, 200px) var(--gutter) clamp(64px, 10vh, 120px); }
.holding .overline { color: var(--c-brass-soft); justify-content: center; margin-bottom: var(--s-5); }
.holding .overline::before, .holding .overline::after { background: var(--c-brass-soft); }
.holding h1 { color: var(--c-paper); margin-bottom: var(--s-5); }
.holding p { color: rgba(255,255,255,0.86); font-weight: var(--w-light); max-width: 46ch; margin: 0 auto var(--s-7); }
.holding__btns { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }
@media (max-width: 540px) { .holding__btns .btn { width: 100%; } }
/* Collection-card stats: at the strict 16px labels the 3-across flex row overflowed
   the card on phones (a single 10-char word like "RESTAURANT" can't fit a ~85px
   column at 320px). On phones stack the stats vertically — "46 SUITES" per row —
   so nothing clips or overlaps and the labels keep the full 16px size. */
@media (max-width: 560px) {
  .prop__stats { flex-direction: column; gap: var(--s-3); align-items: flex-start; }
  .prop__stats > div { display: flex; align-items: baseline; gap: 10px; }
  .prop__stats div b { font-size: 1.3rem; }
  .prop__stats div span { letter-spacing: 0.1em; }
}

/* ============================== RESPONSIVE ============================== */
/* Custom responsive navbar: with the Our Hotels dropdown the child nav holds
   7 items. At the strict 16px type scale it was overflowing, so the nav gap +
   link tracking + actions gap are tightened (nav gap 20px, tracking 0.08em,
   actions gap 16px) and the header phone is set nowrap — which lets the full
   "nav + phone + Book Now" cluster sit with ~18px breathing room at 1501px on
   the 7-item children (measured, 5 properties). The hamburger takes over ≤1500px
   (covers the cramped range incl. small laptops); the full desktop nav shows
   ≥1501px WITH the header phone always visible. Below 1501px every nav link +
   the phone live in the drawer, so nothing is lost — the switch just relocates
   them into the existing menu. */
@media (max-width: 1500px) { .hdr__tel { display: none; } }
@media (max-width: 1500px) {
  /* logo hard-left, actions (Book Now + hamburger) hard-right */
  .hdr { display: flex; justify-content: space-between; align-items: center; }
  .hdr__nav { display: none; }
  .hamburger { display: block; }
}
@media (max-width: 1040px) {
  .split, .split--rev .split { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
  .split--rev .split__media { order: 0; }
  .split__body, .split--rev .split__body { max-width: none; margin: 0; }
  .split__media, .split--wide .split__media { aspect-ratio: 16/11; }
  .collection { grid-template-columns: 1fr; }
  .prop.feature { grid-column: span 1; min-height: 460px; }
  .rooms-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
  .rooms-grid .room__media { aspect-ratio: 16/11; }
  .facilities { grid-template-columns: repeat(2, 1fr); }
  .loc { grid-template-columns: 1fr; }
  .loc__map { min-height: 360px; order: 2; }
}
@media (max-width: 540px) {
  .facilities { grid-template-columns: 1fr 1fr; }
  .hubs { columns: 1; }
  .hero__scroll { display: none; }
  .hero__content { max-width: none; }
  .cta-band__btns .btn, .hero__cta .btn { width: 100%; justify-content: center; }
  /* Short phones: hero content is bottom-pinned, so a tall title + stacked CTAs
     used to ride up UNDER the fixed header. Reserve header clearance (the hero
     grows past 100svh instead of overlapping) and tighten the scale. */
  .hero__inner { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: clamp(84px, 12vh, 140px); }  /* rendered header (80px logo + padding) exceeds --header-h */
  .hero h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
  .hero__sub { margin-top: var(--s-4); }
  .hero__cta { margin-top: var(--s-5); }
  /* content sits mid-frame on grown mobile heroes — deepen the scrim so white
     text stays legible over bright video/photo frames */
  .hero::after { background: linear-gradient(180deg, rgba(15,12,8,0.58) 0%, rgba(15,12,8,0.4) 38%, rgba(15,12,8,0.48) 66%, rgba(15,12,8,0.82) 100%); }
}

/* ---------------- Inner-page grid variants (collapse on mobile) --------- */
/* .grid with a custom --grid-cols never collapses; these named variants do. */
.grid--duo { grid-template-columns: repeat(2, 1fr); }
.grid--trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--duo, .grid--trio { grid-template-columns: 1fr; } }
/* Long unbreakable amenity labels ("Complimentary") overflow 2-up at 320px */
@media (max-width: 380px) { .facilities { grid-template-columns: 1fr; } }

/* ============================================================
   QC 3.1 fixes — 2026-07-27 (COL-04/ACC-03, BTN-04/RES-05)
   ============================================================ */
/* COL-04 / ACC-03 — in-prose links carry a non-colour cue (underline) */
.t-body a, .t-small a, .acc__a a, .statement__big a, .addr a, .node__desc a {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
/* BTN-04 / RES-05 — mobile tap targets >= 44x44px */
@media (max-width: 768px) {
  .hamburger { width: 44px; height: 44px; }
  .hamburger span:nth-child(1) { top: 14px; }
  .hamburger span:nth-child(2) { top: 22px; }
  .hamburger span:nth-child(3) { top: 30px; }
  .hamburger.open span:nth-child(1), .hamburger.open span:nth-child(3) { top: 22px; }
  .footer li a, .mobile-nav__foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .bookbar__field input, .bookbar__field select,
  .rpanel input, .rpanel select, .gsel__trigger { min-height: 44px; }
}
/* FRM-03 — required-field marker */
.field label .req { color: var(--c-brass-text); margin-left: 2px; }

/* QC fix — unified parent footer (4 columns, parent pages only) */
.footer__grid--wide { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
@media (max-width: 1024px) { .footer__grid--wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .footer__grid--wide { grid-template-columns: 1fr; } }

/* Footer social icon (TripAdvisor) */
.footer__social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--c-on-dark-2); transition: color var(--dur-1) var(--ease); }
.footer__social:hover { color: var(--c-brass-soft); }
.footer__social svg { width: 24px; height: 24px; }

/* Footer contact icons (call + email) */
.footer__ct { display: inline-flex; align-items: center; gap: 8px; }
.footer__ct-ico { width: 16px; height: 16px; flex-shrink: 0; }