/* ── DESIGN TOKENS ─────────────────────────────── */
    :root {
      /* Palette anchored to the logo: warm charcoal wordmark + brown house emblem.
         Neutrals carry a warm (brown) undertone so charcoal reads warm, not blue.
         Gold is the emblem brown's bright metallic sibling (the one accent metal).
         No cool colours — the whole system is one warm earth family. */
      --ink:          #241F1A;   /* warm near-black — matches the wordmark's warmth */
      --paper:        #FBF8F2;   /* warm cream */
      --sand:         #EBE3D4;   /* warm sand band */
      --accent:       #C9A24C;   /* antique brass — brand-brown's bright sibling */
      --accent-deep:  #AC8836;
      --gold-text:    #8A6A1A;   /* dark brass for gold TEXT on light backgrounds — AA-safe (≥4.5:1 on cream) */
      --brown:        #6E5D48;   /* THE logo emblem brown — used as the recurring brand mark */
      --brown-deep:   #43321F;   /* deep espresso — rich feature panels (replaces the old green) */
      --foreshore:    #43321F;   /* legacy token name → now espresso brown, not teal-green */
      --line:         #E7DFCF;   /* warm hairline */
      --text:         #2A2520;   /* warm body text */
      --text-muted:   #7A7060;   /* warm muted */
      --white:        #FFFFFF;

      --ff-display: 'Fraunces', Georgia, serif;
      --ff-body:    'Hanken Grotesk', system-ui, sans-serif;
      --ff-mono:    'Space Mono', 'Courier New', monospace;

      /* Radius scale — intentional 3 tiers:
         pill = chips/score-bars · md = image tiles · lg = content cards · xl = large feature panels */
      --radius-sm:   4px;
      --radius-md:   8px;
      --radius-lg:   16px;
      --radius-xl:   24px;
      --radius-pill: 999px;

      /* Warm-tinted, soft and diffuse — keyed to the ink (36,31,26) not pure black,
         so shadows read as considered depth rather than a hard drop. */
      --shadow-card:  0 1px 2px rgba(36,31,26,.04), 0 8px 24px -12px rgba(36,31,26,.14);
      --shadow-float: 0 2px 8px rgba(36,31,26,.06), 0 24px 64px -24px rgba(36,31,26,.28);
      --shadow-soft:  0 2px 5px rgba(36,31,26,.05), 0 18px 44px -20px rgba(36,31,26,.16);
      --shadow-lift:  0 1px 2px rgba(36,31,26,.05), 0 18px 48px -20px rgba(36,31,26,.24);
      /* One brass glow for accent CTAs (rest + hover) and one focus ring — never ad-hoc. */
      --glow-brass:       0 10px 26px -14px rgba(201,162,76,.70);
      --glow-brass-hover: 0 16px 34px -14px rgba(201,162,76,.85);
      --ring-accent:      0 0 0 3px rgba(201,162,76,.22);

      /* Canonical motion — one easing family across the whole site. */
      --ease:     cubic-bezier(.22,.61,.36,1);
      --ease-out: cubic-bezier(.16,1,.3,1);

      --header-h: 68px;
      --announce-h: 40px;
      --transition: 0.25s ease;
    }

    /* ── RESET ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: var(--ff-body);
      color: var(--text);
      background: var(--paper);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    /* In-text links carry an underline so they're distinguishable without relying on
       colour alone (WCAG 1.4.1). Scoped to prose: nav, buttons & card links stay clean. */
    .section-body a, .booking-widget__note a, p a:not(.btn):not([class]) {
      text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px;
    }
    input, select, textarea { font-family: inherit; }
    ul { list-style: none; }

    /* ── SKIP LINK ─────────────────────────────────── */
    .skip-link {
      position: fixed; top: -100px; left: 16px;
      background: var(--accent); color: var(--ink);
      padding: 8px 16px; border-radius: var(--radius-sm);
      font-family: var(--ff-mono); font-size: 12px;
      z-index: 10000;
      transition: top .2s;
    }
    .skip-link:focus { top: 8px; }

    /* ── ROUTE PROGRESS BAR ─────────────────────────── */
    .route-progress {
      position: fixed; top: 0; left: 0; right: 0;
      height: 3px; z-index: 9999;
      pointer-events: none;
      background: var(--line);
    }
    .route-progress__fill {
      position: absolute; left: 0; top: 0; height: 100%; width: 0%;
      background: repeating-linear-gradient(
        to right,
        var(--accent) 0, var(--accent) 5px,
        transparent 5px, transparent 10px
      );
      transition: width .08s linear;
    }
    .route-progress__pin {
      position: absolute; top: 50%;
      width: 10px; height: 10px;
      background: var(--accent);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0 3px rgba(201,162,76,.25);
      transition: left .08s linear;
    }

    /* ── ANNOUNCEMENT BAR ──────────────────────────── */
    .announce-bar {
      background: var(--ink); color: var(--paper);
      height: var(--announce-h);
      display: flex; align-items: center; justify-content: center;
      gap: 12px;
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .06em; text-transform: uppercase;
      position: relative;
      padding: 0 48px;
    }
    .announce-bar__dot { color: var(--accent); font-size: 8px; }
    .announce-bar__link {
      color: var(--accent); text-decoration: underline;
      text-underline-offset: 3px;
    }
    .announce-bar__link:hover { color: var(--accent-deep); }
    .announce-bar__close {
      position: absolute; right: 16px; top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 18px; line-height: 1;
      cursor: pointer; padding: 4px 8px;
      transition: color var(--transition);
    }
    .announce-bar__close:hover { color: var(--paper); }

    /* ── HEADER ────────────────────────────────────── */
    .site-header {
      position: sticky; top: 3px; z-index: 1000;
      height: var(--header-h);
      display: flex; align-items: center;
      padding: 0 32px;
      background: var(--paper);
      border-bottom: 1px solid transparent;
      transition: background .3s, border-color .3s, box-shadow .3s, backdrop-filter .3s;
    }
    .site-header--frosted {
      background: rgba(251,250,246,.88);
      backdrop-filter: blur(20px) saturate(1.6);
      border-color: var(--line);
      box-shadow: 0 4px 24px rgba(36,31,26,.07);
    }
    .header-inner {
      display: flex; align-items: center;
      width: 100%; max-width: 1400px; margin: 0 auto;
      gap: 0;
    }

    /* Logo */
    .site-logo {
      display: flex; align-items: center; gap: 11px;
      line-height: 1; flex-shrink: 0;
      margin-right: 40px;
    }
    .site-logo__mark {
      width: 38px; height: 38px; border-radius: var(--radius-md);
      object-fit: cover; flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(36,31,26,.12);
    }
    .site-logo__word { display: flex; flex-direction: column; }
    .site-logo__top {
      font-family: var(--ff-display);
      font-size: 17px; font-weight: 600;
      color: var(--ink); letter-spacing: .02em;
    }
    .site-logo__bottom {
      font-family: var(--ff-mono);
      font-size: 12px; letter-spacing: .22em;
      color: var(--brown); text-transform: uppercase;
      margin-top: 2px;
    }
    .site-logo__accent {
      display: block; width: 24px; height: 2px;
      background: var(--accent); margin-top: 4px;
    }

    /* Primary nav */
    .primary-nav {
      display: flex; align-items: center; gap: 4px;
      flex: 1;
    }
    .primary-nav__item {
      position: relative;
    }
    .primary-nav__link {
      display: flex; align-items: center; gap: 4px;
      padding: 8px 14px;
      font-family: var(--ff-body); font-size: 16px; font-weight: 500;
      color: var(--text); letter-spacing: .01em;
      border-radius: var(--radius-sm);
      transition: background var(--transition), color var(--transition);
      cursor: pointer; white-space: nowrap;
    }
    .primary-nav__link:hover, .primary-nav__link.active {
      background: var(--sand); color: var(--ink);
    }
    .primary-nav__link svg { transition: transform .2s; }
    .primary-nav__item:hover .primary-nav__link svg { transform: rotate(180deg); }

    /* Header actions */
    .header-actions {
      display: flex; align-items: center; gap: 12px;
      margin-left: auto; flex-shrink: 0;
    }
    .header-phone {
      font-family: var(--ff-mono); font-size: 12px;
      color: var(--text-muted); letter-spacing: .04em;
      display: flex; align-items: center; gap: 6px;
    }
    .header-phone__dot { color: var(--accent); }
    .header-phone a { color: inherit; }
    .header-phone a:hover { color: var(--ink); }

    .btn-book {
      background: var(--ink); color: var(--paper);
      padding: 10px 22px;
      font-family: var(--ff-mono); font-size: 12px;
      font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      border-radius: var(--radius-sm);
      transition: background .4s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
      white-space: nowrap;
    }
    .btn-book:hover { background: var(--foreshore); transform: translateY(-1px); }
    .btn-book--accent {
      background: var(--accent); color: var(--ink);
    }
    .btn-book--accent:hover { background: var(--accent-deep); }

    .hamburger {
      display: none; flex-direction: column; gap: 5px;
      padding: 8px; cursor: pointer;
    }
    .hamburger__line {
      width: 22px; height: 2px;
      background: var(--ink); border-radius: 1px;
      transition: transform .25s, opacity .25s;
    }

    /* ── MEGA MENU ─────────────────────────────────── */
    .mega-menu {
      position: absolute; top: calc(100% + 8px); left: -24px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-float);
      padding: 24px;
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 12px; min-width: 780px;
      opacity: 0; pointer-events: none;
      transform: translateY(8px);
      transition: opacity .2s, transform .2s;
      z-index: 100;
    }
    .primary-nav__item:hover .mega-menu,
    .mega-menu:hover {
      opacity: 1; pointer-events: all;
      transform: translateY(0);
    }
    .mega-room-card {
      display: flex; flex-direction: column; gap: 8px;
      cursor: pointer; border-radius: var(--radius-md); overflow: hidden;
      border: 1px solid var(--line);
      transition: box-shadow .2s, transform .2s;
    }
    .mega-room-card:hover {
      box-shadow: var(--shadow-card); transform: translateY(-2px);
    }
    .mega-room-card__img {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      background: var(--sand);
    }
    .mega-room-card__body { padding: 8px 10px 10px; }
    .mega-room-card__name {
      font-family: var(--ff-display); font-size: 16px; font-weight: 600;
      color: var(--ink); line-height: 1.3;
    }
    .mega-room-card__price {
      font-family: var(--ff-mono); font-size: 12px;
      color: var(--text-muted); margin-top: 2px;
    }

    /* ── WALK-TIME CHIP ────────────────────────────── */
    .walk-chip {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .06em; text-transform: uppercase;
      background: rgba(201,162,76,.18);
      border: 1px solid rgba(201,162,76,.5);
      color: var(--ink);
      padding: 4px 10px 4px 8px;
      border-radius: var(--radius-pill);
      white-space: nowrap;
    }
    .walk-chip--light {
      background: rgba(201,162,76,.22);
      border-color: rgba(201,162,76,.6);
      color: #fff;
    }
    .walk-chip--dark {
      background: var(--accent); color: var(--ink);
      border-color: var(--accent);
      font-weight: 700;
    }
    .walk-chip__icon { font-size: 12px; }

    /* ── SECTION DIVIDER (dotted route line) ──────── */
    .route-divider {
      display: flex; align-items: center;
      gap: 0; width: 100%; height: 1px;
      background: repeating-linear-gradient(
        to right,
        var(--line) 0, var(--line) 6px,
        transparent 6px, transparent 14px
      );
      margin: 0;
    }

    /* ── BUTTONS ───────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 28px;
      font-family: var(--ff-mono); font-size: 12px;
      font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      border-radius: var(--radius-sm);
      transition: background .2s, color .2s, transform .15s, box-shadow .2s;
      cursor: pointer; border: 2px solid transparent;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn--primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
    .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
    .btn--outline { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.5); }
    .btn--outline:hover { border-color: var(--paper); background: rgba(255,255,255,.08); }
    .btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    .btn--ink:hover { background: var(--foreshore); border-color: var(--foreshore); }
    .btn--sand { background: var(--sand); color: var(--ink); border-color: var(--sand); }
    .btn--sand:hover { background: #DDD7C8; border-color: #DDD7C8; }
    .btn--sm { padding: 9px 18px; font-size: 12px; }

    /* ── HERO ──────────────────────────────────────── */
    .hero {
      position: relative;
      min-height: 92vh;
      display: flex; align-items: center;
      overflow: hidden;
    }
    .hero__bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center 62%;
      transform: scale(1.04);
      animation: heroKenBurns 20s ease-in-out infinite alternate;
    }
    @keyframes heroKenBurns {
      from { transform: scale(1.04) translateX(0); }
      to   { transform: scale(1.10) translateX(-1%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero__bg { animation: none; transform: scale(1); }
    }
    .hero__scrim {
      position: absolute; inset: 0;
      background: linear-gradient(
        105deg,
        rgba(36,31,26,.78) 0%,
        rgba(36,31,26,.55) 50%,
        rgba(36,31,26,.25) 100%
      );
    }
    .hero__content {
      position: relative; z-index: 1;
      width: 100%; max-width: 1400px; margin: 0 auto;
      padding: 80px 32px 60px;
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 48px; align-items: center;
    }
    .hero__eyebrow {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .2em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 20px;
      display: flex; align-items: center; gap: 10px;
    }
    .hero__eyebrow::before {
      content: ''; display: block; width: 32px; height: 1px;
      background: var(--accent);
    }
    .hero__headline {
      font-family: var(--ff-display);
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 600; line-height: 1.13;
      color: var(--paper);
      letter-spacing: -.01em;
      margin-bottom: 20px;
      text-wrap: pretty;
    }
    .hero__headline em {
      font-style: italic; color: var(--accent);
    }
    .hero__sub {
      font-size: 18px; line-height: 1.6;
      color: rgba(251,250,246,.75);
      max-width: 480px; margin-bottom: 32px;
      text-wrap: pretty;
    }
    .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
    .hero__chips { display: flex; gap: 10px; flex-wrap: wrap; }

    /* ── BOOKING WIDGET ────────────────────────────── */
    .booking-widget {
      background: var(--paper);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-float);
      padding: 32px;
      border: 1px solid var(--line);
    }
    .booking-widget__badge {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 4px;
      display: flex; align-items: center; gap: 6px;
    }
    .booking-widget__badge::before {
      content: ''; width: 20px; height: 1px;
      background: var(--accent); flex-shrink: 0;
    }
    .booking-widget__title {
      font-family: var(--ff-display); font-size: 26px;
      font-weight: 600; color: var(--ink);
      margin-bottom: 24px; line-height: 1.2;
    }
    .booking-widget__grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px; margin-bottom: 12px;
    }
    .booking-widget__field { display: flex; flex-direction: column; gap: 5px; }
    .booking-widget__label {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .booking-widget__input {
      width: 100%; padding: 11px 14px;
      border: 1.5px solid var(--line);
      border-radius: var(--radius-md);
      font-family: var(--ff-body); font-size: 16px;
      color: var(--ink); background: var(--paper);
      transition: border-color .2s, box-shadow .2s;
      appearance: none;
    }
    .booking-widget__input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(201,162,76,.2);
    }
    .booking-widget__submit {
      width: 100%;
      padding: 15px;
      background: var(--ink); color: var(--paper);
      border-radius: var(--radius-md);
      font-family: var(--ff-mono); font-size: 12px;
      font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      cursor: pointer; border: none;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: background .4s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
      margin-top: 16px;
    }
    .booking-widget__submit:hover { background: var(--foreshore); transform: translateY(-2px); }
    .booking-widget__note {
      text-align: center; margin-top: 10px;
      font-family: var(--ff-mono); font-size: 12px;
      color: var(--text-muted); letter-spacing: .04em;
    }

    /* ── TRUST STRIP ───────────────────────────────── */
    .trust-strip {
      background: var(--ink); padding: 20px 32px;
    }
    .trust-strip__inner {
      max-width: 1400px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      gap: 40px; flex-wrap: wrap;
    }
    .trust-item {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .06em; text-transform: uppercase;
      color: rgba(251,250,246,.75);
    }
    .trust-item__icon { color: var(--accent); font-size: 16px; }
    .trust-item strong { color: var(--paper); }

    /* ── SECTIONS ──────────────────────────────────── */
    .section { padding: 96px 32px; }
    .section--sm { padding: 64px 32px; }
    .section--sand { background: var(--sand); }
    .section--foreshore { background: var(--foreshore); color: var(--paper); }
    .section--ink { background: var(--ink); color: var(--paper); }
    .section__inner { max-width: 1400px; margin: 0 auto; }
    .section__inner--md { max-width: 1000px; margin: 0 auto; }
    .section__inner--sm { max-width: 720px; margin: 0 auto; }

    .section-eyebrow {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .2em; text-transform: uppercase;
      color: var(--brown); margin-bottom: 10px;
      display: flex; align-items: center; gap: 10px;
    }
    .section-eyebrow::before {
      content: ''; width: 20px; height: 1px;
      background: currentColor; opacity: .5; flex-shrink: 0;
    }
    .section-eyebrow--light { color: rgba(251,250,246,.5); }
    .section-eyebrow--light::before { background: var(--accent); opacity: 1; }
    .section-eyebrow--accent { color: var(--accent); }
    .section-eyebrow--accent::before { background: var(--accent); opacity: 1; }

    .section-title {
      font-family: var(--ff-display);
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 600; line-height: 1.15;
      color: var(--ink); letter-spacing: -.01em;
      margin-bottom: 16px; text-wrap: pretty;
    }
    .section-title--light { color: var(--paper); }
    .section-title em { font-style: italic; color: var(--gold-text); }
    .section-title--light em { color: var(--accent); }

    .section-body {
      font-size: 17px; line-height: 1.7;
      color: var(--text-muted); max-width: 600px;
      text-wrap: pretty;
    }
    .section-body--light { color: rgba(251,250,246,.7); }

    /* ── CBD MAP ───────────────────────────────────── */
    .map-section { background: var(--foreshore); padding: 96px 32px; }
    .map-section__inner { max-width: 1400px; margin: 0 auto; }
    .map-section__header { margin-bottom: 48px; }
    .map-container { position: relative; }
    .map-svg-wrap {
      position: relative; border-radius: var(--radius-xl);
      overflow: hidden; border: 1px solid rgba(255,255,255,.08);
    }
    .map-info-panel {
      position: absolute; right: 24px; top: 24px;
      width: 300px;
      background: var(--paper); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-float);
      overflow: hidden;
      transition: opacity .3s, transform .3s;
    }
    .map-info-panel--hidden { opacity: 0; pointer-events: none; transform: translateX(16px); }
    .map-info-panel__img { width: 100%; height: 160px; object-fit: cover; background: var(--sand); }
    .map-info-panel__body { padding: 16px 20px 20px; }
    .map-info-panel__cat {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 4px;
    }
    .map-info-panel__name {
      font-family: var(--ff-display); font-size: 18px;
      font-weight: 600; color: var(--ink); line-height: 1.2;
      margin-bottom: 8px;
    }
    .map-info-panel__desc { font-size: 16px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }

    /* ── REAL MAP + NEARBY PANEL ───────────────────── */
    .map-embed-wrap {
      border-radius: var(--radius-xl); overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: var(--shadow-float);
      height: 100%; min-height: 460px; background: #16241f;
    }
    .nearby-panel {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius-xl);
      padding: 24px 24px 22px;
      display: flex; flex-direction: column; height: 100%;
    }
    .nearby-panel__head {
      display: flex; align-items: flex-start; gap: 12px;
      padding-bottom: 16px; margin-bottom: 4px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .nearby-panel__pin { color: var(--accent); font-size: 16px; line-height: 1.4; flex-shrink: 0; }
    .nearby-panel__title {
      font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em;
      text-transform: uppercase; color: rgba(251,250,246,.5); margin-bottom: 3px;
    }
    .nearby-panel__addr {
      font-family: var(--ff-display); font-size: 16px; font-weight: 600;
      color: var(--paper); line-height: 1.25;
    }
    .nearby-list { display: flex; flex-direction: column; flex: 1; }
    .nearby-item {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nearby-item:last-child { border-bottom: none; }
    .nearby-item__txt { min-width: 0; }
    .nearby-item__name {
      display: block;
      font-family: var(--ff-display); font-size: 16px; font-weight: 600;
      color: var(--paper); line-height: 1.25;
    }
    .nearby-item__cat { display: block; margin-top: 3px; font-size: 12px; color: rgba(251,250,246,.5); line-height: 1.35; }
    .nearby-note {
      font-family: var(--ff-mono); font-size: 12px; letter-spacing: .06em;
      color: rgba(251,250,246,.35); text-align: center; margin-top: 12px;
    }
    @media (max-width: 860px) {
      .map-layout { grid-template-columns: 1fr !important; }
      .map-embed-wrap { min-height: 320px; }
    }

    /* ── ROOM CARDS ────────────────────────────────── */
    .rooms-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 24px;
    }
    /* Five rooms read as one clean collection row on wide desktop (no orphan card). */
    @media (min-width: 1160px) {
      .rooms-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; }
    }
    .room-card {
      background: var(--paper);
      border-radius: var(--radius-lg); overflow: hidden;
      border: 1px solid var(--line);
      transition: box-shadow .3s, transform .3s;
      cursor: pointer;
      display: flex; flex-direction: column;
    }
    .room-card__img-wrap { flex-shrink: 0; }
    .room-card:hover { box-shadow: var(--shadow-float); transform: translateY(-4px); }
    .room-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/10; }
    .room-card__img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .6s ease, filter .6s ease;
    }
    .room-card:hover .room-card__img { transform: scale(1.07); filter: brightness(1.05) saturate(1.1); }
    .room-card__chips {
      position: absolute; bottom: 12px; left: 12px;
      display: flex; gap: 6px;
    }
    .room-card__ticks {
      position: absolute; top: 0; right: 0;
      width: 32px; height: 32px; opacity: 0;
      transition: opacity .3s;
    }
    .room-card:hover .room-card__ticks { opacity: 1; }
    .room-card__ticks::before, .room-card__ticks::after {
      content: ''; position: absolute;
      background: var(--accent);
    }
    .room-card__ticks::before { top: 0; right: 0; width: 32px; height: 3px; }
    .room-card__ticks::after  { top: 0; right: 0; width: 3px; height: 32px; }
    .room-card__body { padding: 22px 22px 22px; display: flex; flex-direction: column; flex: 1; }
    .room-card__name {
      font-family: var(--ff-display); font-size: 21px; line-height: 1.2;
      font-weight: 600; color: var(--ink); margin-bottom: 6px;
      min-height: 2.4em; /* reserve 2 lines so meta/tag align across the row */
    }
    .room-card__meta {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .08em; color: var(--text-muted);
      text-transform: uppercase; margin-bottom: 10px;
    }
    .room-card__tag {
      font-size: 15px; color: var(--text-muted); line-height: 1.55;
      margin: 0; text-wrap: pretty;
    }
    .room-card__cta {
      margin-top: auto; padding-top: 18px;
      font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase; color: var(--foreshore);
      display: flex; align-items: center; gap: 6px;
    }
    .room-card:hover .room-card__cta { gap: 10px; }
    .room-card__cta { transition: gap .25s var(--ease); }
    .room-card__price {
      display: flex; align-items: baseline; gap: 4px;
      margin-top: 16px;
    }
    .room-card__from {
      font-family: var(--ff-mono); font-size: 12px;
      color: var(--text-muted); text-transform: uppercase;
    }
    .room-card__amount {
      font-family: var(--ff-display); font-size: 28px;
      font-weight: 600; color: var(--ink);
    }
    .room-card__night {
      font-family: var(--ff-mono); font-size: 12px;
      color: var(--text-muted);
    }

    /* ── ROOMS PREVIEW header/footer ───────────────── */
    .rooms-preview__head {
      display: grid; grid-template-columns: 1fr auto;
      gap: 48px; align-items: end; margin-bottom: 44px;
    }
    .rooms-preview__lede {
      max-width: 320px; font-size: 16px; color: var(--text-muted);
      line-height: 1.65; padding-bottom: 6px; text-wrap: pretty;
    }
    .rooms-preview__foot {
      display: flex; justify-content: space-between; align-items: center;
      gap: 20px; flex-wrap: wrap; margin-top: 36px;
      padding-top: 28px; border-top: 1px solid var(--line);
    }
    .rooms-preview__features {
      font-family: var(--ff-mono); font-size: 12px; color: var(--text-muted);
      letter-spacing: .08em; text-transform: uppercase;
    }
    @media (max-width: 860px) {
      .rooms-preview__head { grid-template-columns: 1fr; gap: 16px; }
      .rooms-preview__lede { max-width: none; padding-bottom: 0; }
      .rooms-preview__foot { justify-content: flex-start; }
    }

    /* ── ROOM BLOCKS (alternating layout) ─────────── */
    .room-block {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; border-radius: var(--radius-xl);
      overflow: hidden; border: 1px solid var(--line);
      margin-bottom: 32px;
      background: var(--paper);
    }
    .room-block--reverse .room-block__img { order: 2; }
    .room-block--reverse .room-block__body { order: 1; }
    .room-block__img-wrap { position: relative; overflow: hidden; min-height: 400px; }
    .room-block__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
    .room-block:hover .room-block__img { transform: scale(1.04); }
    .room-block__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
    .room-block__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .room-block__name {
      font-family: var(--ff-display); font-size: 32px;
      font-weight: 600; color: var(--ink); line-height: 1.2;
      margin-bottom: 8px;
    }
    .room-block__meta {
      font-family: var(--ff-mono); font-size: 12px;
      color: var(--text-muted); letter-spacing: .08em;
      text-transform: uppercase; margin-bottom: 20px;
    }
    .room-block__desc { font-size: 16px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
    .room-block__amenities {
      display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px;
    }
    .amenity-tag {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .08em; text-transform: uppercase;
      padding: 4px 10px; border-radius: var(--radius-pill);
      border: 1px solid var(--line); color: var(--text-muted);
    }
    .amenity-tag--bold { border-color: var(--foreshore); color: var(--foreshore); font-weight: 700; }
    .room-block__price-row {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
    }
    .room-block__price {
      display: flex; align-items: baseline; gap: 4px;
    }

    /* ── SOCIAL PROOF ──────────────────────────────── */
    .scores-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px; margin-bottom: 48px;
    }
    .score-card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius-lg);
      padding: 28px;
    }
    .score-card__platform {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: rgba(251,250,246,.5); margin-bottom: 8px;
    }
    .score-card__score {
      font-family: var(--ff-display); font-size: 48px;
      font-weight: 300; color: var(--paper); line-height: 1;
      margin-bottom: 4px;
    }
    .score-card__score span { color: var(--accent); }
    .score-card__label {
      font-size: 16px; color: rgba(251,250,246,.6); margin-bottom: 8px;
    }
    .score-card__reviews {
      font-family: var(--ff-mono); font-size: 12px;
      color: rgba(251,250,246,.4); letter-spacing: .04em;
    }
    .score-card--hero {
      background: var(--accent); border-color: var(--accent);
      grid-row: span 1;
    }
    .score-card--hero .score-card__platform { color: rgba(36,31,26,.6); }
    .score-card--hero .score-card__score { color: var(--ink); }
    .score-card--hero .score-card__score span { color: var(--foreshore); }
    .score-card--hero .score-card__label { color: rgba(36,31,26,.7); }
    .score-card--hero .score-card__reviews { color: rgba(36,31,26,.5); }

    /* Quote slider */
    .quote-slider { position: relative; overflow: hidden; }
    .quote-slide {
      display: none;
      animation: quoteFade .5s ease;
    }
    .quote-slide.active { display: block; }
    @keyframes quoteFade {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .quote-text {
      font-family: var(--ff-display); font-size: 22px;
      font-style: italic; line-height: 1.5;
      color: var(--paper); margin-bottom: 16px;
    }
    .quote-text::before { content: '\201C'; }
    .quote-text::after  { content: '\201D'; }
    .quote-attr {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(251,250,246,.5);
    }
    .quote-dots { display: flex; gap: 4px; margin-top: 20px; }
    .quote-dot {
      width: 24px; height: 24px; padding: 0; border: none;
      background: none; cursor: pointer;
      display: grid; place-items: center;
    }
    .quote-dot::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,.25); transition: background .2s;
    }
    .quote-dot.active::before { background: var(--accent); }

    /* ── GALLERY ───────────────────────────────────── */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 220px;
      gap: 8px;
    }
    .gallery-item {
      position: relative; overflow: hidden; cursor: pointer;
      border-radius: var(--radius-md);
      background: var(--sand);
    }
    .gallery-item--wide  { grid-column: span 2; }
    .gallery-item--tall  { grid-row: span 2; }
    .gallery-item__img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .5s ease, filter .5s ease;
    }
    .gallery-item:hover .gallery-item__img { transform: scale(1.07); filter: brightness(1.05); }
    .gallery-item__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(36,31,26,.5) 0%, transparent 60%);
      opacity: 0; transition: opacity .3s;
      display: flex; align-items: flex-end; padding: 16px;
    }
    .gallery-item:hover .gallery-item__overlay { opacity: 1; }
    .gallery-item__caption {
      font-family: var(--ff-mono); font-size: 12px;
      color: var(--paper); letter-spacing: .06em; text-transform: uppercase;
    }

    /* Gallery lightbox */
    .lightbox {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,.92);
      display: flex; align-items: center; justify-content: center;
      padding: 32px;
      opacity: 0; pointer-events: none;
      transition: opacity .3s;
    }
    .lightbox.open { opacity: 1; pointer-events: all; }
    .lightbox__img {
      max-width: 90vw; max-height: 85vh;
      object-fit: contain; border-radius: var(--radius-md);
    }
    .lightbox__close {
      position: absolute; top: 20px; right: 24px;
      color: rgba(255,255,255,.6); font-size: 28px;
      cursor: pointer; line-height: 1;
      transition: color .2s;
    }
    .lightbox__close:hover { color: #fff; }
    .lightbox__nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      color: rgba(255,255,255,.6); font-size: 36px;
      cursor: pointer; padding: 16px;
      transition: color .2s;
    }
    .lightbox__nav:hover { color: #fff; }
    .lightbox__prev { left: 12px; }
    .lightbox__next { right: 12px; }

    /* ── ATTRACTIONS ───────────────────────────────── */
    .attractions-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 24px;
    }
    .attraction-card {
      border-radius: var(--radius-lg); overflow: hidden;
      border: 1px solid var(--line); background: var(--paper);
      transition: box-shadow .3s, transform .3s;
    }
    .attraction-card:hover { box-shadow: var(--shadow-float); transform: translateY(-4px); }
    .attraction-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/10; }
    .attraction-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .attraction-card:hover .attraction-card__img { transform: scale(1.06); }
    .attraction-card__chip { position: absolute; bottom: 12px; left: 12px; }
    .attraction-card__body { padding: 20px 22px 24px; }
    .attraction-card__cat {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 6px;
    }
    .attraction-card__name {
      font-family: var(--ff-display); font-size: 20px;
      font-weight: 600; color: var(--ink); margin-bottom: 8px; line-height: 1.3;
    }
    .attraction-card__desc { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
    .attraction-card__link {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--foreshore); font-weight: 700;
      display: flex; align-items: center; gap: 6px;
      transition: gap .2s;
    }
    .attraction-card__link:hover { gap: 10px; }

    /* ── CONTACT FORM ──────────────────────────────── */
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
    .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .form-label {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .form-input {
      padding: 12px 16px; border: 1.5px solid var(--line);
      border-radius: var(--radius-md);
      font-family: var(--ff-body); font-size: 16px;
      color: var(--ink); background: var(--paper);
      transition: border-color .2s, box-shadow .2s;
      width: 100%;
    }
    .form-input:focus {
      outline: none; border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(201,162,76,.2);
    }
    .form-textarea { resize: vertical; min-height: 120px; }
    .contact-detail-card {
      display: flex; align-items: flex-start; gap: 16px;
      padding: 20px;
      border: 1px solid var(--line); border-radius: var(--radius-lg);
      margin-bottom: 16px; transition: box-shadow .2s;
    }
    .contact-detail-card:hover { box-shadow: var(--shadow-card); }
    .contact-detail-card__icon {
      width: 44px; height: 44px; border-radius: 50%;
      background: var(--sand); display: flex; align-items: center;
      justify-content: center; font-size: 20px; flex-shrink: 0;
    }
    .contact-detail-card__label {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 2px;
    }
    .contact-detail-card__value { font-size: 16px; font-weight: 600; color: var(--ink); }
    .contact-detail-card__sub { font-size: 16px; color: var(--text-muted); }

    /* ── FOOTER ────────────────────────────────────── */
    .site-footer {
      background: var(--ink); color: var(--paper);
      padding: 64px 32px 32px;
    }
    .footer-route-border {
      height: 3px; width: 100%;
      background: repeating-linear-gradient(
        to right,
        var(--accent) 0, var(--accent) 6px,
        transparent 6px, transparent 14px
      );
      margin-bottom: 64px;
    }
    .footer-inner { max-width: 1400px; margin: 0 auto; }
    .footer-top {
      display: grid; grid-template-columns: 280px 1fr 1fr 1fr;
      gap: 48px; margin-bottom: 48px;
    }
    .footer-logo { font-family: var(--ff-display); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
    .footer-tagline { font-size: 16px; color: rgba(251,250,246,.5); line-height: 1.5; margin-bottom: 20px; }
    .footer-wayfinding { display: flex; flex-direction: column; gap: 8px; }
    .footer-wayfinding__item {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .06em; color: rgba(251,250,246,.4);
      display: flex; align-items: center; gap: 8px;
    }
    .footer-wayfinding__item span { color: var(--accent); }
    .footer-col-title {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .2em; text-transform: uppercase;
      color: rgba(251,250,246,.35); margin-bottom: 16px;
    }
    .footer-links { display: flex; flex-direction: column; gap: 8px; }
    .footer-link {
      font-size: 16px; color: rgba(251,250,246,.6);
      transition: color .2s;
    }
    .footer-link:hover { color: var(--paper); }
    .footer-nap { font-size: 16px; color: rgba(251,250,246,.5); line-height: 1.8; }
    .footer-nap a { color: rgba(251,250,246,.6); }
    .footer-nap a:hover { color: var(--paper); }
    .footer-bottom {
      padding-top: 32px; border-top: 1px solid rgba(255,255,255,.06);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
    }
    .footer-copy { font-family: var(--ff-mono); font-size: 12px; color: rgba(251,250,246,.3); letter-spacing: .06em; }

    /* ── MOBILE FAB ────────────────────────────────── */
    .mobile-fab {
      position: fixed; bottom: 0; left: 0; right: 0;
      z-index: 900; display: none;
      background: var(--ink);
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 12px 16px env(safe-area-inset-bottom);
    }
    .mobile-fab__inner { display: flex; gap: 8px; max-width: 600px; margin: 0 auto; }
    .mobile-fab__btn {
      flex: 1; padding: 12px 8px;
      background: rgba(255,255,255,.08); border-radius: var(--radius-md);
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--paper); text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      transition: background .2s;
    }
    .mobile-fab__btn:hover, .mobile-fab__btn:active { background: rgba(255,255,255,.16); }
    .mobile-fab__btn--accent { background: var(--accent); color: var(--ink); }
    .mobile-fab__btn--accent:hover { background: var(--accent-deep); }
    .mobile-fab__btn__icon { font-size: 18px; }

    /* ── MOBILE MENU DRAWER ────────────────────────── */
    .mobile-drawer {
      position: fixed; inset: 0; z-index: 9000;
      pointer-events: none;
    }
    .mobile-drawer__backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0); transition: background .3s;
    }
    .mobile-drawer.open .mobile-drawer__backdrop {
      background: rgba(36,31,26,.55); pointer-events: all;
    }
    .mobile-drawer__panel {
      position: absolute; top: 0; right: 0; bottom: 0;
      width: min(340px, 90vw);
      background: var(--paper);
      transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
      padding: 24px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 8px;
    }
    .mobile-drawer.open .mobile-drawer__panel { transform: translateX(0); pointer-events: all; }
    .mobile-drawer__close {
      align-self: flex-end; font-size: 24px; color: var(--text-muted);
      cursor: pointer; padding: 4px 8px; margin-bottom: 8px;
    }
    .mobile-drawer__link {
      display: block; padding: 14px 16px;
      font-family: var(--ff-display); font-size: 20px;
      color: var(--ink); border-radius: var(--radius-md);
      transition: background .2s;
    }
    .mobile-drawer__link:hover { background: var(--sand); }
    .mobile-drawer__book {
      margin-top: 16px; padding: 14px;
      background: var(--accent); color: var(--ink);
      border-radius: var(--radius-md); text-align: center;
      font-family: var(--ff-mono); font-size: 12px;
      font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    }

    /* ── CTA BAND ──────────────────────────────────── */
    .cta-band {
      background: var(--accent); padding: 60px 32px;
      text-align: center;
    }
    .cta-band__inner { max-width: 700px; margin: 0 auto; }
    .cta-band__title {
      font-family: var(--ff-display); font-size: clamp(28px, 4vw, 44px);
      font-weight: 600; color: var(--ink); margin-bottom: 12px; line-height: 1.2;
    }
    .cta-band__sub { font-size: 17px; color: rgba(36,31,26,.7); margin-bottom: 28px; }
    .cta-band__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

    /* ── INNER PAGE HERO ───────────────────────────── */
    .page-hero {
      background: var(--foreshore);
      padding: 80px 32px 60px;
    }
    .page-hero__inner { max-width: 1400px; margin: 0 auto; }
    .page-hero__title {
      font-family: var(--ff-display);
      font-size: clamp(36px, 5vw, 60px);
      font-weight: 600; color: var(--paper); line-height: 1.15;
      margin-bottom: 12px; text-wrap: pretty;
    }
    .page-hero__sub {
      font-size: 18px; color: rgba(251,250,246,.65);
      max-width: 560px; text-wrap: pretty;
    }

    /* ── UTILITIES ─────────────────────────────────── */
    .text-accent { color: var(--accent); }
    .flex-gap-sm { display: flex; gap: 8px; flex-wrap: wrap; }
    .flex-gap-md { display: flex; gap: 16px; flex-wrap: wrap; }
    .mt-sm { margin-top: 12px; }
    .mt-md { margin-top: 24px; }
    .mt-lg { margin-top: 48px; }
    .mb-sm { margin-bottom: 12px; }
    .mb-md { margin-bottom: 24px; }
    .mb-lg { margin-bottom: 48px; }

    /* ── RESPONSIVE ────────────────────────────────── */
    @media (max-width: 1100px) {
      .hero__content { grid-template-columns: 1fr; max-width: 680px; }
      .booking-widget { max-width: 100%; }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 900px) {
      .primary-nav { display: none; }
      .header-phone { display: none; }
      .hamburger { display: flex; }
      .mobile-fab { display: block; }
      .room-block { grid-template-columns: 1fr; }
      .room-block--reverse .room-block__img { order: 0; }
      .room-block--reverse .room-block__body { order: 0; }
      .room-block__img-wrap { min-height: 260px; }
      .scores-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: repeat(2, 1fr); }
      .gallery-item--wide  { grid-column: span 1; }
      .gallery-item--tall  { grid-row: span 1; }
      body { padding-bottom: 72px; }
    }
    @media (max-width: 600px) {
      .section { padding: 64px 20px; }
      .hero__content { padding: 64px 20px 48px; }
      .trust-strip { padding: 16px 20px; }
      .trust-strip__inner { gap: 20px; }
      .trust-item { font-size: 12px; }
      .footer-top { grid-template-columns: 1fr; gap: 32px; }
      .attractions-grid { grid-template-columns: 1fr; }
      .booking-widget__grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    }

    /* ── REVEAL ANIMATIONS ─────────────────────────── */
    .reveal {
      opacity: 0; transform: translateY(24px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: .1s; }
    .reveal-delay-2 { transition-delay: .2s; }
    .reveal-delay-3 { transition-delay: .3s; }
    .reveal-delay-4 { transition-delay: .4s; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
    }

    /* ── PAGE TRANSITION ───────────────────────────── */
    .page-wipe {
      position: fixed; inset: 0; z-index: 8000;
      background: var(--accent);
      transform: scaleX(0); transform-origin: left;
      pointer-events: none;
    }
    .page-wipe.wiping {
      animation: wipeIn .4s cubic-bezier(.4,0,.2,1) forwards;
    }
    @keyframes wipeIn {
      from { transform: scaleX(0) translateX(0); }
      to   { transform: scaleX(1) translateX(0); }
    }

    /* ── ACCORDION ─────────────────────────────────── */
    .accordion-item { border-bottom: 1px solid var(--line); }
    .accordion-trigger {
      width: 100%; display: flex; justify-content: space-between; align-items: center;
      padding: 20px 0; cursor: pointer;
      font-size: 16px; font-weight: 600; color: var(--ink);
      font-family: var(--ff-body);
      background: none; border: none; text-align: left;
    }
    .accordion-trigger .acc-icon {
      flex-shrink: 0; font-size: 20px; transition: transform .3s;
      color: var(--text-muted);
    }
    .accordion-trigger[aria-expanded="true"] .acc-icon { transform: rotate(45deg); }
    .accordion-body {
      max-height: 0; overflow: hidden;
      transition: max-height .4s ease, padding .4s ease;
    }
    .accordion-body.open { max-height: 500px; padding-bottom: 20px; }
    .accordion-body p { font-size: 16px; color: var(--text-muted); line-height: 1.7; }

    /* ── COMPARISON STRIP ──────────────────────────── */
    /* Comparison table sits in a contained white panel, centred and capped so the
       columns read as a tidy menu rather than spreading thin across the full width. */
    .comparison-card {
      max-width: 1080px; margin-left: auto; margin-right: auto;
      background: var(--white); border: 1px solid var(--line);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
      padding: 6px 30px;
    }
    /* Under 600px each row becomes its own card — drop the outer panel so they don't nest. */
    @media (max-width: 600px) {
      .comparison-card { background: transparent; border: none; box-shadow: none; padding: 0; max-width: none; }
    }
    .comparison-table { width: 100%; border-collapse: collapse; }
    .comparison-table th {
      font-family: var(--ff-mono); font-size: 12px;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--text-muted); padding: 16px 14px;
      border-bottom: 1px solid var(--line); text-align: left;
    }
    .comparison-table td {
      padding: 18px 14px; border-bottom: 1px solid var(--line);
      font-size: 16px; color: var(--text); vertical-align: middle;
    }
    .comparison-table tr:last-child td { border-bottom: none; }
    .comparison-table tbody tr { transition: background .2s var(--ease); }
    .comparison-table tbody tr:hover td { background: var(--sand); }
    /* Column rhythm: Room leads, Sleeps centres, View anchors right — no dead gaps.
       Desktop only; under 600px the table restyles into stacked cards (see mobile pass). */
    @media (min-width: 601px) {
      .comparison-table th:first-child, .comparison-table td:first-child { width: 26%; }
      .comparison-table th:nth-child(2), .comparison-table td:nth-child(2) { text-align: center; width: 10%; }
      .comparison-table th:nth-child(3), .comparison-table td:nth-child(3) { width: 24%; }
      .comparison-table th:last-child, .comparison-table td:last-child { text-align: right; width: 1%; white-space: nowrap; }
    }
    .comparison-table .room-name-cell {
      font-family: var(--ff-display); font-size: 17px;
      font-weight: 600; color: var(--ink);
    }
    .comparison-table .price-cell {
      font-family: var(--ff-display); font-size: 18px;
      font-weight: 600; color: var(--ink);
    }

    /* ── AMENITIES CHAPTERS ────────────────────────── */
    .amenity-chapter { margin-bottom: 64px; }
    .amenity-chapter__header {
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
      align-items: center; margin-bottom: 32px;
    }
    .amenity-chapter__img {
      border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3;
    }
    .amenity-chapter__img img { width: 100%; height: 100%; object-fit: cover; }
    .amenity-chapter__title {
      font-family: var(--ff-display); font-size: 28px;
      font-weight: 600; color: var(--ink); margin-bottom: 12px;
    }
    .amenity-chapter__desc { font-size: 16px; color: var(--text-muted); line-height: 1.7; }
    .amenity-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

    /* ── ABOUT SECTION ─────────────────────────────── */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .about-mosaic {
      display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px;
      gap: 12px;
    }
    .about-mosaic__item { border-radius: var(--radius-md); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-card); }
    .about-mosaic__item img { width: 100%; height: 100%; object-fit: cover; }
    .about-mosaic__item:first-child { grid-row: span 2; }
    .about-quote {
      border-left: 3px solid var(--accent);
      padding: 16px 20px;
      font-family: var(--ff-display); font-size: 20px;
      font-style: italic; color: var(--text-muted);
      line-height: 1.5; margin: 24px 0;
    }

    /* ── BOOK PAGE ─────────────────────────────────── */
    .book-page-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
    .how-steps { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
    .how-step { display: flex; gap: 20px; align-items: flex-start; }
    .how-step__num {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--accent); color: var(--ink);
      font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .how-step__title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
    .how-step__desc { font-size: 16px; color: var(--text-muted); line-height: 1.6; }
    .why-direct { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
    .why-card {
      padding: 20px; border: 1px solid var(--line);
      border-radius: var(--radius-lg); background: var(--paper);
    }
    .why-card__icon { font-size: 24px; margin-bottom: 8px; }
    .why-card__title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
    .why-card__desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

    /* ════════════════════════════════════════════════════════
       ✦ POLISH LAYER — refinement pass (overrides above)
       (Shadow + easing tokens consolidated into the single :root above.)
    ════════════════════════════════════════════════════════ */
    ::selection { background: var(--accent); color: var(--ink); }
    /* One focus language site-wide: a calm brass ring. Transparent outline
       kept so focus stays visible in Windows high-contrast / forced-colors. */
    *:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ring-accent); border-radius: var(--radius-sm); }

    /* Tighter, more confident display type */
    .hero__headline { font-weight: 500; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(40px, 5.6vw, 74px); }
    .hero__headline em { font-variation-settings: 'opsz' 80; }
    .section-title { font-weight: 500; letter-spacing: -.02em; line-height: 1.08; }
    .page-hero__title { font-weight: 500; letter-spacing: -.02em; }
    .room-block__name, .attraction-card__name, .room-card__name { letter-spacing: -.01em; }

    /* ── Film-grain + vignette atmosphere on dark sections ── */
    .section--foreshore, .section--ink, .map-section, .site-footer, .page-hero, .hero {
      position: relative;
    }
    .grain::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
      opacity: .5; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    }

    /* ── HERO refinement ── */
    .hero__scrim {
      background:
        linear-gradient(102deg, rgba(18,26,23,.85) 0%, rgba(18,26,23,.6) 40%, rgba(18,26,23,.18) 78%),
        linear-gradient(180deg, rgba(18,26,23,.5) 0%, rgba(18,26,23,0) 26%, rgba(18,26,23,0) 64%, rgba(18,26,23,.42) 100%);
    }
    .hero__eyebrow { font-size: 12px; letter-spacing: .24em; }
    .hero__sub { font-size: 19px; color: rgba(251,250,246,.82); }
    .hero__rating {
      display: inline-flex; align-items: center; gap: 12px;
      background: rgba(251,250,246,.08);
      border: 1px solid rgba(251,250,246,.16);
      backdrop-filter: blur(8px);
      padding: 8px 8px 8px 16px; border-radius: var(--radius-pill);
      margin-bottom: 28px;
    }
    .hero__rating__score {
      font-family: var(--ff-display); font-size: 17px; font-weight: 600; color: var(--paper);
    }
    .hero__rating__txt {
      font-family: var(--ff-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
      color: rgba(251,250,246,.6);
    }
    .hero__rating__badge {
      background: var(--accent); color: var(--ink);
      font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      padding: 5px 11px; border-radius: var(--radius-pill);
    }
    .hero__scroll-cue {
      position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
      z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-family: var(--ff-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
      color: rgba(251,250,246,.5);
    }
    .hero__scroll-cue__line { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); position: relative; overflow: hidden; }
    .hero__scroll-cue__line::after { content:''; position:absolute; top:-40px; left:0; width:1px; height:40px; background: var(--accent); animation: scrollCue 2.2s var(--ease) infinite; }
    @keyframes scrollCue { to { transform: translateY(80px); } }
    @media (prefers-reduced-motion: reduce){ .hero__scroll-cue__line::after { animation: none; } }

    /* ── Buttons: crisper ── */
    .btn { border-radius: var(--radius-md); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
    .btn--primary { box-shadow: 0 8px 22px -10px rgba(201,162,76,.9); }
    .btn--primary:hover { box-shadow: 0 12px 28px -10px rgba(201,162,76,1); transform: translateY(-2px); }
    .btn--ink:hover, .btn--sand:hover { transform: translateY(-2px); }
    .btn-book { border-radius: var(--radius-md); }
    .btn-book--accent { box-shadow: 0 6px 18px -8px rgba(201,162,76,.95); }

    /* ── Booking widget: more premium ── */
    .booking-widget { box-shadow: var(--shadow-float); border: 1px solid rgba(36,31,26,.06); }
    .booking-widget__title { letter-spacing: -.015em; }
    .booking-widget__submit { border-radius: var(--radius-md); box-shadow: 0 10px 24px -12px rgba(36,31,26,.5); }
    .booking-widget__input { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
    .booking-widget__input:hover { border-color: #CFCABB; }

    /* ── Eyebrow: small route-dot ── */
    .section-eyebrow { font-weight: 700; }

    /* ── Cards: refined ── */
    .room-card, .attraction-card { border-color: rgba(36,31,26,.07); }
    .room-card:hover, .attraction-card:hover { box-shadow: var(--shadow-lift); }
    .score-card { backdrop-filter: blur(4px); }

    /* ── Trust strip: hairline top ── */
    .trust-strip { border-top: 1px solid rgba(251,250,246,.06); }
    .trust-item { transition: color .2s; }

    /* ════ MAP — premium wayfinding illustration ════ */
    .map-section__inner { position: relative; z-index: 1; }
    .map-svg-wrap { box-shadow: var(--shadow-float); border: 1px solid rgba(255,255,255,.06); }
    .map-route { transition: stroke .35s var(--ease), stroke-width .35s var(--ease), opacity .35s var(--ease); }
    .map-route--active { stroke-dasharray: 7 5; animation: routeDraw 1s var(--ease) forwards; }
    @keyframes routeDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
    .map-pin-pulse { transform-origin: center; animation: pinPulse 3s ease-in-out infinite; }
    @keyframes pinPulse { 0%,100% { opacity:.5; r: 30px; } 50% { opacity:0; r: 48px; } }
    .map-dot { transition: transform .3s var(--ease); transform-origin: center; transform-box: fill-box; }
    .map-node:hover .map-dot { transform: scale(1.18); }
    @media (prefers-reduced-motion: reduce){ .map-pin-pulse, .map-route--active { animation: none; } }
    .map-info-panel { box-shadow: var(--shadow-float); border: 1px solid rgba(36,31,26,.06); }
    .map-info-panel__img { height: 150px; }

    /* ── Foreshore stat band ── */
    .stat-band {
      display: grid; grid-template-columns: repeat(3, 1fr);
      border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg);
      overflow: hidden; margin-top: 28px;
    }
    .stat-band__cell { padding: 24px 28px; border-right: 1px solid rgba(255,255,255,.1); }
    .stat-band__cell:last-child { border-right: none; }
    .stat-band__num { font-family: var(--ff-display); font-size: 38px; font-weight: 500; color: var(--paper); line-height: 1; letter-spacing: -.02em; }
    .stat-band__num span { color: var(--accent); }
    .stat-band__lbl { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(251,250,246,.5); margin-top: 8px; }

    /* ── Section eyebrow dot accent ── */
    .pretitle-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--accent); margin-right: 2px; }

    @media (max-width: 760px) {
      .stat-band { grid-template-columns: 1fr; }
      .stat-band__cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
      .stat-band__cell:last-child { border-bottom: none; }
      .map-info-panel { position: static !important; width: 100% !important; margin-top: 12px; opacity: 1 !important; transform: none !important; }
      .map-info-panel--hidden { display: none; }
    }

    /* ════════════════════════════════════════════════════════
       ✦✦ EDITORIAL PASS — restraint + craft
    ════════════════════════════════════════════════════════ */
    /* Trust strip → text-only, hairline-divided */
    .trust-strip { padding: 24px 32px; }
    .trust-strip__inner { gap: 0; justify-content: center; max-width: 1080px; align-items: stretch; }
    .trust-item { flex-direction: column; align-items: flex-start; gap: 3px; padding: 2px 36px; position: relative; }
    .trust-item + .trust-item::before {
      content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      height: 30px; width: 1px; background: rgba(251,250,246,.12);
    }
    .trust-item__k { font-family: var(--ff-display); font-size: 16px; font-weight: 500; color: var(--paper); letter-spacing: -.01em; }
    .trust-item__v { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: rgba(251,250,246,.42); }

    /* why-card → numbered */
    .why-card { padding: 24px; }
    .why-card__num { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; color: var(--gold-text); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

    /* hero rating badge */
    .hero__rating__badge { display: inline-flex; align-items: center; gap: 5px; }

    /* contact icon → refined line glyph */
    .contact-detail-card__icon { color: var(--foreshore); background: #F1EDE2; }
    .contact-detail-card { transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
    .contact-detail-card:hover { border-color: #D9D3C4; }

    /* CTA band → charcoal sophistication, yellow as accent only */
    .cta-band { background: var(--ink); }
    .cta-band::before {
      content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
      background:
        radial-gradient(60% 120% at 80% 0%, rgba(110,93,72,.55), transparent 60%),
        radial-gradient(50% 100% at 0% 100%, rgba(67,50,31,.55), transparent 60%);
    }
    .cta-band__inner { position: relative; z-index: 1; }
    .cta-band__title { color: var(--paper); }
    .cta-band__title em { color: var(--accent); }
    .cta-band__sub { color: rgba(251,250,246,.62); }

    /* Eyebrow → add a leading dot */
    .section-eyebrow::after,
    .hero__eyebrow::after { content: none; }

    /* Mega-menu hover lift */
    .mega-menu { border-color: rgba(36,31,26,.08); }

    /* Footer wordmark refinement */
    .footer-logo { letter-spacing: -.01em; }

    /* Booking widget date inputs — calmer */
    .booking-widget__input { color: var(--ink); }

    /* Calmer map text */
    .map-svg-wrap text { font-feature-settings: "tnum"; }

    /* Selection refinement already set. Buttons in CTA on dark: */
    .cta-band .btn--sand { background: transparent; color: var(--paper); border-color: rgba(251,250,246,.4); }
    .cta-band .btn--sand:hover { background: rgba(251,250,246,.08); border-color: var(--paper); }
    .cta-band .btn--ink { background: var(--accent); color: var(--ink); border-color: var(--accent); }
    .cta-band .btn--ink:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

    @media (max-width: 760px) {
      .trust-strip__inner { flex-wrap: wrap; gap: 16px 0; }
      .trust-item { flex: 0 0 50%; padding: 8px 20px; }
      .trust-item + .trust-item::before { display: none; }
    }

    /* ── INTERACTIVE "EVERYTHING ON FOOT" WAYFINDING MAP ──────────── */
    .wmap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
    .wmap__canvas {
      background: var(--paper); border: 1px solid var(--line);
      border-radius: var(--radius-xl); padding: 10px;
      box-shadow: var(--shadow-card); overflow: hidden;
    }
    .wmap__svg { width: 100%; height: auto; display: block; }
    .wmap__map { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; border-radius: calc(var(--radius-lg) - 4px); }
    @media (max-width: 860px) { .wmap__map { min-height: 360px; } }
    .wmap__street { font-family: var(--ff-mono); font-size: 13px; letter-spacing: .18em; fill: var(--text-muted); opacity: .5; }
    .wmap__route {
      fill: none; stroke: var(--brown); stroke-width: 2.5; stroke-linecap: round;
      stroke-dasharray: 1 9; opacity: .4;
      transition: stroke .25s, stroke-width .25s, opacity .25s;
    }
    .wmap__route.is-active { stroke: var(--accent-deep); stroke-width: 4; opacity: 1; }
    .wmap__node { cursor: pointer; outline: none; }
    .wmap__node-halo { fill: var(--accent); opacity: 0; transition: opacity .25s; }
    .wmap__node-dot { fill: var(--paper); stroke: var(--brown); stroke-width: 2.5; transition: fill .25s, stroke .25s; }
    .wmap__node-label { font-family: var(--ff-display); font-size: 15px; font-weight: 600; fill: var(--ink); transition: fill .25s; }
    .wmap__node-time { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .03em; fill: var(--text-muted); transition: fill .25s; }
    .wmap__node.is-active .wmap__node-halo,
    .wmap__node:focus-visible .wmap__node-halo { opacity: .22; }
    .wmap__node.is-active .wmap__node-dot,
    .wmap__node:focus-visible .wmap__node-dot { fill: var(--accent); stroke: var(--accent-deep); }
    .wmap__node.is-active .wmap__node-label { fill: var(--brown-deep); }
    .wmap__home-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .5; transform-origin: 360px 250px; }
    .wmap__home-dot { fill: var(--accent); }
    .wmap__home-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; fill: var(--ink); font-weight: 700; }
    @media (prefers-reduced-motion: no-preference) {
      .wmap__home-ring { animation: wmapPulse 2.8s ease-in-out infinite; }
    }
    @keyframes wmapPulse {
      0%, 100% { opacity: .5; transform: scale(1); }
      50% { opacity: .12; transform: scale(1.16); }
    }
    .wmap-legend { display: flex; flex-direction: column; gap: 10px; }
    .wmap-legend__head { margin-bottom: 4px; }
    .wmap-legend__item {
      display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
      padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg);
      background: var(--white); cursor: pointer;
      transition: border-color .2s, background .2s, transform .2s;
    }
    .wmap-legend__item:hover, .wmap-legend__item.is-active {
      border-color: var(--accent); background: var(--sand); transform: translateX(3px);
    }
    .wmap-legend__icon {
      display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px;
      border-radius: var(--radius-md); background: var(--sand); color: var(--brown); font-size: 16px;
      transition: background .2s, color .2s;
    }
    .wmap-legend__item:hover .wmap-legend__icon, .wmap-legend__item.is-active .wmap-legend__icon { background: var(--accent); color: var(--ink); }
    .wmap-legend__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
    .wmap-legend__name { font-family: var(--ff-display); font-size: 16px; font-weight: 600; color: var(--ink); }
    .wmap-legend__sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
    .wmap-legend__cta { width: 100%; justify-content: center; margin-top: 6px; }
    .wmap-legend__note { font-family: var(--ff-mono); font-size: 12px; color: var(--text-muted); letter-spacing: .04em; text-align: center; line-height: 1.6; margin-top: 2px; }
    @media (max-width: 860px) { .wmap { grid-template-columns: 1fr; } }

    /* Review sub-score bars (Booking.com category breakdown, on dark section) */
    .subscore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 32px; max-width: 760px; }
    .subscore__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
    .subscore__label { font-size: 16px; color: rgba(251,250,246,.85); }
    .subscore__val { font-family: var(--ff-display); font-size: 17px; font-weight: 600; color: var(--accent); }
    .subscore__bar { height: 6px; border-radius: var(--radius-pill); background: rgba(251,250,246,.12); overflow: hidden; }
    .subscore__fill { height: 100%; border-radius: var(--radius-pill); background: var(--accent); }

    /* Evergreen review cards */
    .score-card__blurb { font-family: var(--ff-display); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 10px 0 16px; }
    .score-card__cta { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; display: inline-block; }
    .score-card--hero .score-card__blurb { color: var(--ink); }

    /* ── LOCAL'S GUIDE — hub cards ─────────────────── */
    .guide-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 28px; }
    .guide-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s, border-color .25s; }
    .guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--accent); }
    .guide-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--sand); }
    .guide-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
    .guide-card:hover .guide-card__img img { transform: scale(1.05); }
    .guide-card__cat { position: absolute; top: 12px; left: 12px; background: var(--brown-deep); color: var(--paper); font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill); }
    .guide-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
    .guide-card__title { font-family: var(--ff-display); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 8px; }
    .guide-card__excerpt { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; flex: 1; }
    .guide-card__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--ff-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
    .guide-card__more { color: var(--brown); font-weight: 700; }

    /* Article hero */
    .guide-hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; overflow: hidden; }
    .guide-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
    .guide-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,24,20,.93) 0%, rgba(28,24,20,.5) 45%, rgba(28,24,20,.35) 100%); }
    .guide-hero__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; width: 100%; padding: 0 32px 56px; }
    .guide-crumbs { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; color: rgba(251,250,246,.7); display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
    .guide-crumbs a { color: rgba(251,250,246,.7); }
    .guide-crumbs a:hover { color: var(--accent); }
    .guide-crumbs span:last-child { color: var(--accent); }
    .guide-hero__cat { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
    .guide-hero__title { font-family: var(--ff-display); font-size: clamp(30px, 5vw, 52px); font-weight: 600; color: var(--paper); line-height: 1.08; margin-bottom: 16px; }
    .guide-hero__excerpt { font-size: clamp(16px, 2vw, 19px); color: rgba(251,250,246,.85); line-height: 1.6; max-width: 640px; margin-bottom: 18px; }
    .guide-hero__meta { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; color: rgba(251,250,246,.6); display: flex; align-items: center; gap: 8px; }
    .guide-hero__meta svg { color: var(--accent); }
    .guide-hero__dot { opacity: .5; }

    /* Article body layout */
    .guide-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: start; max-width: 1120px; }
    .guide-lead { font-family: var(--ff-display); font-size: clamp(19px, 2.4vw, 23px); font-weight: 400; color: var(--ink); line-height: 1.5; margin-bottom: 40px; }
    .guide-block { margin-bottom: 44px; }
    .guide-block__h { font-family: var(--ff-display); font-size: clamp(22px, 3vw, 28px); font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: 14px; }
    .guide-prose p { font-size: 16px; color: var(--text); line-height: 1.8; margin-bottom: 16px; }
    .guide-prose strong { color: var(--ink); font-weight: 600; }
    .guide-figure { margin: 22px 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); }
    .guide-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
    .guide-map { margin: 22px 0; }
    .guide-map__cap { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-muted); margin-top: 10px; display: flex; align-items: center; gap: 6px; }

    /* Sources */
    .guide-sources { margin-top: 48px; padding: 28px 30px; background: var(--sand); border-radius: var(--radius-lg); }
    .guide-sources__h { font-family: var(--ff-display); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
    .guide-sources__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .guide-sources__list a { font-size: 16px; color: var(--brown-deep); font-weight: 500; }
    .guide-sources__list a:hover { color: var(--accent-deep); }
    .guide-sources__note { font-size: 12px; color: var(--text-muted); line-height: 1.6; font-style: italic; }

    /* Sticky facts aside */
    .guide-aside { position: sticky; top: calc(var(--header-h) + 24px); }
    .guide-facts { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-card); }
    .guide-facts__head { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brown); margin-bottom: 14px; }
    .guide-facts dl { display: flex; flex-direction: column; }
    .guide-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
    .guide-facts__row:last-of-type { border-bottom: none; }
    .guide-facts__row dt { font-size: 16px; color: var(--text-muted); }
    .guide-facts__row dd { font-family: var(--ff-display); font-size: 16px; font-weight: 600; color: var(--ink); text-align: right; }
    .guide-facts__cta { width: 100%; justify-content: center; margin-top: 20px; }
    .guide-facts__addr { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 14px; text-align: center; }

    /* Related */
    .guide-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 20px; }
    .guide-rel-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s, border-color .2s; }
    .guide-rel-card:hover { transform: translateY(-3px); border-color: var(--accent); }
    .guide-rel-card__img { aspect-ratio: 16/10; overflow: hidden; background: var(--sand); }
    .guide-rel-card__img img { width: 100%; height: 100%; object-fit: cover; }
    .guide-rel-card__body { padding: 16px 18px; }
    .guide-rel-card__cat { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); margin-bottom: 6px; }
    .guide-rel-card__title { font-family: var(--ff-display); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }

    @media (max-width: 880px) {
      .guide-layout { grid-template-columns: 1fr; gap: 32px; }
      .guide-aside { position: static; }
    }

    /* ── AMENITY CHAPTER header (grid moved off inline so it can stack) ── */
    .amenity-chapter__header { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

    /* ── MOBILE / RESPONSIVE REFINEMENTS ─────────────── */
    @media (max-width: 860px) {
      .book-page-grid { grid-template-columns: 1fr; }
      .about-grid { grid-template-columns: 1fr; gap: 40px; }
      .amenity-chapter__header { grid-template-columns: 1fr; gap: 28px; }
    }
    @media (max-width: 640px) {
      .stat-band { grid-template-columns: 1fr; }
      .why-direct { grid-template-columns: 1fr; }
      .guide-hub-grid { grid-template-columns: 1fr; }
      .about-mosaic { grid-template-rows: 150px 150px; }
      .guide-hero { min-height: 52vh; }
      .guide-hero__inner { padding: 0 20px 40px; }
      .guide-layout { gap: 26px; }
      .guide-hero__title { font-size: clamp(26px, 7vw, 40px); }
    }
    @media (max-width: 380px) {
      .guide-facts, .booking-widget { padding: 20px; }
      .section-title { font-size: clamp(24px, 8vw, 32px); }
    }

    /* ── Page-hero breadcrumbs (interior pages) ── */
    .page-hero__crumbs { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .04em; color: rgba(251,250,246,.6); display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
    .page-hero__crumbs a { color: rgba(251,250,246,.6); }
    .page-hero__crumbs a:hover { color: var(--accent); }
    .page-hero__crumbs span:last-child { color: var(--accent); }

    /* iOS zooms in on focus for inputs < 16px — bump to 16px on touch widths */
    @media (max-width: 768px) {
      .booking-widget__input, .form-input, .form-textarea, input, select, textarea { font-size: 16px; }
    }

    /* ── ATTRACTIONS text cards (further-afield, link to guides) ── */
    .attraction-textcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px 26px 24px; transition: transform .2s, border-color .2s, box-shadow .2s; }
    .attraction-textcard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-float); }
    .attraction-textcard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .attraction-textcard__cat { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
    .attraction-textcard__name { font-family: var(--ff-display); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 8px; line-height: 1.25; }
    .attraction-textcard__desc { font-size: 16px; color: var(--text-muted); line-height: 1.6; flex: 1; margin-bottom: 16px; }
    .attraction-textcard__link { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brown); }

    /* ── Back-to-top button ── */
    .to-top { position: fixed; right: 20px; bottom: 24px; z-index: 900; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; box-shadow: var(--shadow-float); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s, transform .25s, background .2s; border: none; cursor: pointer; }
    .to-top svg { transform: rotate(-90deg); }
    .to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .to-top:hover { background: var(--brown-deep); }
    .to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    @media (max-width: 900px) { .to-top { bottom: 84px; right: 16px; width: 44px; height: 44px; } }
    @media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

    /* ── PRINT — clean, ink-saving layout (great for the guide articles) ── */
    @media print {
      .site-header, .announce-bar, .mobile-fab, .mobile-drawer, .site-footer, .cta-band,
      .route-progress, .skip-link, .booking-widget, .guide-facts__cta, .hero__ctas,
      .hero__scroll-cue, .lightbox, .guide-rel-grid, .wmap-legend__cta, .to-top { display: none !important; }
      html, body { background: #fff !important; color: #000 !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
      .guide-hero, .page-hero, .hero { min-height: 0 !important; padding: 0 !important; }
      .guide-hero__bg, .guide-hero__scrim, .hero__bg, .hero__scrim { display: none !important; }
      .guide-hero__inner, .page-hero__inner, .hero__content { padding: 0 0 16px !important; max-width: 100% !important; }
      .guide-hero__title, .guide-hero__excerpt, .guide-hero__cat, .guide-hero__meta, .guide-crumbs,
      .guide-crumbs a, .page-hero__title, .page-hero__sub, .hero__headline, .section-title, .section-title--light { color: #000 !important; }
      .guide-layout { display: block !important; }
      .guide-aside { margin-top: 24px; }
      .guide-map iframe { display: none !important; }
      .guide-map__cap { font-style: italic; color: #333 !important; }
      .guide-map__cap::after { content: " — see map online"; }
      a { color: #000 !important; text-decoration: underline; }
      .section { padding: 14px 0 !important; }
      .guide-block { page-break-inside: avoid; }
      img { max-width: 100% !important; }
    }

    /* ════════════════════════════════════════════════════════
       ✦ PREMIUM ELEVATION — cinematic motion, soft image loading,
       restrained hovers. GPU-only (opacity/transform). Reduced-motion safe.
    ════════════════════════════════════════════════════════ */
    /* (--ease-out consolidated into the single :root at the top of the file.) */

    /* Cinematic scroll reveals — slower, refined easing */
    .reveal { transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }

    /* Restrained, premium image hovers (no heavy processing) */
    .room-card__img, .attraction-card__img, .gallery-item__img,
    .guide-card__img img, .guide-rel-card__img img, .about-mosaic__item img, .amenity-chapter__img img {
      transition: transform .8s var(--ease-out), filter .8s var(--ease-out);
      will-change: transform;
    }
    .room-card:hover .room-card__img,
    .attraction-card:hover .attraction-card__img { transform: scale(1.045); filter: none; }
    .gallery-item:hover .gallery-item__img { transform: scale(1.045); filter: brightness(1.02); }
    .guide-card:hover .guide-card__img img,
    .guide-rel-card:hover .guide-rel-card__img img,
    .about-mosaic__item:hover img,
    .amenity-chapter:hover .amenity-chapter__img img { transform: scale(1.04); }

    /* Soft image load-in — added by main.js; progressive (no-JS shows images normally) */
    img.img-fade { opacity: 0; }
    img.img-fade.is-loaded { opacity: 1; transition: opacity .8s var(--ease-out); }

    /* Airier, more premium reading rhythm */
    body { line-height: 1.68; }
    .section-body { line-height: 1.8; }

    @media (prefers-reduced-motion: reduce) {
      img.img-fade { opacity: 1 !important; transition: none !important; }
      .room-card__img, .gallery-item__img, .attraction-card__img,
      .guide-card__img img, .guide-rel-card__img img, .about-mosaic__item img, .amenity-chapter__img img { transition: none; }
    }

    /* ════════════════════════════════════════════════════════
       ✦ HERO — calmer single column + slim premium availability bar
    ════════════════════════════════════════════════════════ */
    .hero__content { grid-template-columns: 1fr; max-width: 1180px; align-items: center; }
    .hero__left { max-width: 780px; }
    .hero__sub { max-width: 560px; font-size: 19px; }
    .hero__rating { margin: 6px 0 30px; text-decoration: none; transition: transform .35s var(--ease-out), background .35s var(--ease-out); }
    .hero__rating:hover { transform: translateY(-1px); background: rgba(251,250,246,.13); }

    .hero-book {
      display: flex; align-items: stretch; gap: 10px;
      width: 100%; max-width: 700px;
      background: rgba(251,248,242,.96);
      border: 1px solid rgba(251,248,242,.5);
      border-radius: var(--radius-lg);
      box-shadow: 0 26px 70px -26px rgba(36,31,26,.55), 0 2px 8px rgba(36,31,26,.16);
      padding: 9px 9px 9px 6px;
      backdrop-filter: blur(8px);
    }
    .hero-book__fields { display: flex; flex: 1; align-items: stretch; min-width: 0; }
    .hero-book__field { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 16px; flex: 1; min-width: 0; }
    /* Date fields need room for the full DD/MM/YYYY value + the native picker icon —
       give them more grow than the short Guests/Dog selects so nothing clips. */
    .hero-book__field:has(input[type="date"]) { flex: 1.35; }
    .hero-book__label { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
    .hero-book__input { border: none; background: transparent; font-family: var(--ff-body); font-size: 16px; font-weight: 600; color: var(--ink); appearance: none; padding: 1px 0; cursor: pointer; width: 100%; }
    .hero-book__input[type="date"] { min-width: 112px; }
    .hero-book__input:focus { outline: none; }
    .hero-book__input::-webkit-calendar-picker-indicator { opacity: .35; cursor: pointer; flex-shrink: 0; margin-left: 2px; }
    .hero-book__sep { width: 1px; background: var(--line); align-self: center; height: 34px; flex-shrink: 0; }
    .hero-book__submit {
      display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
      background: var(--accent); color: var(--ink);
      font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      border: none; border-radius: var(--radius-md); padding: 0 22px; cursor: pointer;
      box-shadow: 0 8px 22px -10px rgba(201,162,76,.95);
      transition: background .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
    }
    .hero-book__submit:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(201,162,76,1); }

    .hero__rooms-link {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
      font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(251,250,246,.85); transition: gap .35s var(--ease-out), color .3s var(--ease-out);
    }
    .hero__rooms-link:hover { gap: 14px; color: var(--accent); }

    @media (max-width: 720px) {
      .hero-book { flex-direction: column; gap: 4px; max-width: 100%; padding: 12px; }
      .hero-book__fields { flex-direction: column; }
      .hero-book__field { padding: 11px 14px; border-bottom: 1px solid var(--line); }
      .hero-book__sep { display: none; }
      .hero-book__submit { padding: 15px; justify-content: center; margin-top: 4px; }
    }

    /* ── QA polish pass ── */
    /* Announce bar: trim on small screens so it never truncates */
    @media (max-width: 640px) {
      .announce-bar__long, .announce-bar__link, .announce-bar__dot { display: none; }
      .announce-bar__msg { font-size: 12px; }
    }
    /* Book page: surface the booking widget FIRST on mobile (conversion) */
    @media (max-width: 860px) {
      .book-aside { order: -1; position: static !important; margin-bottom: 12px; }
    }

    /* ============================================================
       LUXURY CRAFT LAYER — micro art-direction pass (wins the cascade)
       Goal: subconscious premium perception through restraint —
       generous rhythm, soft slow motion, no colour-flash gimmicks.
       ============================================================ */

    /* 1 — Section rhythm: more generous, fluid breathing room */
    .section      { padding: clamp(84px, 9vw, 132px) clamp(22px, 4vw, 40px); }
    .section--sm  { padding: clamp(56px, 6vw, 88px)  clamp(22px, 4vw, 40px); }
    .map-section  { padding: clamp(84px, 9vw, 132px) clamp(22px, 4vw, 40px); }

    /* 2 — Buttons: more presence, refined caps tracking, soft slow hover */
    .btn {
      padding: 16px 34px;
      letter-spacing: .15em;
      transition: background .45s var(--ease-out), color .45s var(--ease-out),
                  transform .55s var(--ease-out), box-shadow .55s var(--ease-out),
                  border-color .45s var(--ease-out);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn--sm   { padding: 11px 22px; letter-spacing: .13em; }
    .btn--primary { box-shadow: 0 10px 26px -16px rgba(201,162,76,.7); }
    .btn--primary:hover { box-shadow: 0 18px 38px -16px rgba(201,162,76,.85); }
    .btn--ink:hover  { box-shadow: 0 16px 34px -16px rgba(36,31,26,.45); }
    .btn--sand:hover { box-shadow: 0 12px 28px -16px rgba(36,31,26,.22); }

    /* 3 — Image motion: ONE refined gesture everywhere — slow, gentle,
           no brightness/saturate flash (the clearest "non-luxury" tell). */
    .room-card__img, .gallery-item__img, .attraction-card__img, .room-block__img,
    .guide-card__img img, .about-mosaic__item img, .amenity-chapter__img img,
    .mega-room-card__img img {
      transition: transform 1.15s var(--ease-out) !important;
      filter: none !important;
    }
    .room-card:hover .room-card__img,
    .gallery-item:hover .gallery-item__img,
    .attraction-card:hover .attraction-card__img,
    .room-block:hover .room-block__img,
    .guide-card:hover .guide-card__img img,
    .about-mosaic__item:hover img,
    .amenity-chapter:hover .amenity-chapter__img img {
      transform: scale(1.045) !important;
      filter: none !important;
    }

    /* 4 — Card elevation: ONE soft, slow lift for every card in the system.
           All content cards share identical timing + hover so interactions
           never feel like they come from different components. */
    .room-card, .guide-card, .attraction-card, .contact-detail-card,
    .mega-room-card, .guide-rel-card, .attraction-textcard {
      transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out),
                  border-color .45s var(--ease-out) !important;
    }
    .room-card:hover, .guide-card:hover, .attraction-card:hover,
    .guide-rel-card:hover, .attraction-textcard:hover, .contact-detail-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-soft);
      border-color: #DCD4C2;
    }

    /* 5 — Headlines: tight, confident tracking on the display serif */
    .hero__headline { letter-spacing: -.022em; }
    .section-title  { letter-spacing: -.018em; }

    /* 6 — Form fields: a soft brass focus halo, not a hard outline */
    .form-input:focus, .form-textarea:focus,
    .booking-widget__input:focus, .hero-book__input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: var(--ring-accent);
    }

    /* 7 — Hero drift: barely-there cinematic scale (calm, not a zoom).
           Only for users who haven't asked to reduce motion. */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes heroDriftSoft { from { transform: scale(1.015); } to { transform: scale(1.055); } }
      .hero__bg { animation: heroDriftSoft 26s var(--ease-out) forwards !important; }
    }

    /* 8 — Reveal: a slightly longer, more graceful entrance */
    .reveal { transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

    /* 9 — Links / wayfinding ticks: softer hover timing */
    .footer-link, .primary-nav__link, .attraction-card__link, .guide-card__more {
      transition: color .35s var(--ease-out), gap .35s var(--ease-out), opacity .35s var(--ease-out);
    }

    /* 10 — Mobile: keep the premium rhythm; ease the grids, never cramped */
    @media (max-width: 760px) {
      .rooms-grid, .guide-hub-grid, .attractions-grid { gap: 20px; }
      .section-title { line-height: 1.12; }
      .btn { padding: 15px 28px; }
      .stat-band__cell { padding: 22px 24px; }
    }

    /* ════════════════════════════════════════════════════════
       ✦ MOBILE UX PASS — world-class small-screen craft
       Goal: native-like, smooth, thumb-friendly, fast. Lighter
       motion, generous tap targets, no cramped or clipped layout.
       Wins the cascade (appended last).
       ════════════════════════════════════════════════════════ */

    /* — A — Comparison table → premium stacked cards (no side-scroll).
            The 4-col table cannot breathe under ~560px; restyle each
            row as a tappable card with label↔value lines. */
    @media (max-width: 600px) {
      .comparison-table { border-collapse: separate; border-spacing: 0; }
      .comparison-table, .comparison-table tbody { display: block; width: 100%; }
      .comparison-table thead {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
      }
      .comparison-table tr {
        display: block; background: var(--white);
        border: 1px solid var(--line); border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        padding: 16px 20px 14px; margin-bottom: 14px;
        transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
      }
      .comparison-table tr:active { transform: scale(.99); box-shadow: var(--shadow-soft); }
      .comparison-table tr:hover td,
      .comparison-table tr:last-child td { background: transparent; }
      .comparison-table td {
        display: flex; justify-content: space-between; align-items: baseline;
        gap: 18px; padding: 9px 0; border: none; text-align: right;
        font-size: 15px; color: var(--text);
      }
      .comparison-table td + td { border-top: 1px solid var(--line); }
      .comparison-table td::before {
        content: attr(data-label); font-family: var(--ff-mono);
        font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
        color: var(--text-muted); text-align: left; flex-shrink: 0;
      }
      .comparison-table td.room-name-cell {
        display: block; text-align: left; border-top: none;
        font-family: var(--ff-display); font-size: 21px; font-weight: 600;
        color: var(--ink); line-height: 1.15;
        padding: 0 0 12px; margin-bottom: 4px;
        border-bottom: 1px solid var(--line);
      }
      .comparison-table td.room-name-cell::before { display: none; }
      /* whole card already navigates (tr onclick) — drop the redundant button */
      .comparison-table__cta-cell { display: none !important; }
    }

    /* — B — Mobile FAB: lift clear of the screen edge + safe-area inset,
            slightly larger thumb targets, instant press feedback. */
    @media (max-width: 900px) {
      .mobile-fab { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
      .mobile-fab__btn { padding: 13px 8px; min-height: 56px; justify-content: center; }
      .mobile-fab__btn:active { transform: scale(.97); }
      .mobile-fab__btn { transition: background .2s, transform .12s var(--ease-out); }
    }

    /* — C — Footer: comfortable tap targets for stacked nav links. */
    @media (max-width: 760px) {
      .footer-links { gap: 2px; }
      .footer-link { display: inline-block; padding: 9px 0; }
      .footer-nap a { display: inline-block; padding: 4px 0; }
    }

    /* — D — Lighter, snappier mobile motion (native feel, battery-kind).
            Touch devices never trigger :hover, so we only tune entrances
            and remove the continuous hero drift on small screens. */
    @media (max-width: 760px) {
      .reveal { transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
      img.img-fade.is-loaded { transition: opacity .5s var(--ease-out); }
      /* hero image settles immediately — no slow drift to repaint on phones */
      .hero__bg { animation: none !important; transform: scale(1.03) !important; }
      /* buttons: keep press feedback crisp on touch */
      .btn { transition: background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
      .btn:active { transform: scale(.98); }
    }

    /* — E — Gentle rhythm trim on the smallest screens: stay airy, cut
            a little dead length so pages don't feel endless. */
    @media (max-width: 560px) {
      .section     { padding: clamp(60px, 15vw, 84px) 22px; }
      .section--sm { padding: clamp(44px, 11vw, 64px) 22px; }
      .map-section { padding: clamp(60px, 15vw, 84px) 22px; }
    }

    /* — F — Touch momentum for any intentional horizontal scrollers. */
    [style*="overflow-x:auto"], [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; }

    /* ════════════════════════════════════════════════════════
       ✦ SYSTEM UNIFICATION — single source of truth, nothing ad-hoc
       Pulls every drifted value back onto the token system so the
       whole site reads as one intentional design language.
       (Appended last — wins the cascade.)
       ════════════════════════════════════════════════════════ */

    /* 1 — Radius: enforce the 3-tier logic. Content cards were drifting
           between lg(16) and xl(24); pull the outliers onto lg so every
           content card in the system shares one corner. */
    .guide-card, .attraction-textcard, .guide-facts,
    .room-block, .map-card, .wmap__canvas { border-radius: var(--radius-lg); }

    /* 2 — Pills (chips, score-bars, tags) use --radius-pill at source. */

    /* 3 — Accent CTAs: ONE brass glow (rest + hover), never six variants. */
    .btn--primary, .booking-widget__submit, .hero-book__submit, .btn-book {
      box-shadow: var(--glow-brass);
    }
    .btn--primary:hover, .booking-widget__submit:hover,
    .hero-book__submit:hover, .btn-book:hover {
      box-shadow: var(--glow-brass-hover);
    }

    /* 4 — Focus: one calm brass ring everywhere a control receives focus
           (keyboard or pointer), replacing the .16/.2/.25 drift + hard outlines. */
    .btn:focus-visible, .room-card:focus-visible, .attraction-card:focus-visible,
    .guide-card:focus-visible, a:focus-visible, button:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: none;
      box-shadow: var(--ring-accent);
      border-radius: var(--radius-sm);
    }

    /* 5 — Card baseline: every content card sits on the SAME crisp white
           surface + warm hairline, so none looks like it came from a
           different kit (room & attraction cards were drifting to cream). */
    .room-card, .attraction-card, .guide-card, .guide-rel-card,
    .attraction-textcard, .contact-detail-card, .mega-room-card {
      background: var(--white);
      border: 1px solid var(--line);
    }