@layer reset, base, theme, components, utilities;

/* ==========================================================================
   1. RESET LAYER — Scoped to explicit elements (never global '*')
   ========================================================================== */
@layer reset {
  :where(
    html, body, div, span, header, footer, main, section, article, aside, nav,
    search, figure, figcaption, blockquote, dl, dt, dd, h1, h2, h3, h4, p,
    ul, ol, li, form, fieldset, legend, label, input, select, textarea,
    button, output, table, thead, tbody, tr, th, td, details, summary,
    address, dialog, iframe, img, a, strong, em, small, code
  ) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :where(img, svg, iframe) {
    display: block;
    max-inline-size: 100%;
  }

  :where(img) {
    block-size: auto;
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
    background: transparent;
  }

  :where(ul[role="list"], nav ul) {
    list-style: none;
  }

  :where(table) {
    border-collapse: collapse;
    inline-size: 100%;
  }
}

/* ==========================================================================
   2. THEME LAYER — Lahori Sandstone, Burnished Brass & Terracotta Palette
   ========================================================================== */
@layer theme {
  :root {
    color-scheme: light dark;
    --color-scheme: light;
    scrollbar-width: thin;

    --font-serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    /* Light Mode Raw Tokens (Warm Lahore Sandstone, Walnut Ink, Red-Brick Terracotta & Brass) */
    --l-bg-canvas: #f5efe4;
    --l-bg-paper: #fcf9f3;
    --l-bg-recessed: #ebe2d2;
    --l-ink-primary: #191512;
    --l-ink-secondary: #4e443a;
    --l-ink-muted: #736759;
    --l-hairline: #d5cab5;
    --l-hairline-strong: #ac9a7d;
    --l-accent-terracotta: #96381e;
    --l-accent-terracotta-hover: #782b15;
    --l-accent-brass: #8b631b;
    --l-accent-cypress: #194d33;
    --l-error: #a82020;
    --l-error-bg: #fbeaea;
    --l-success: #185835;
    --l-success-bg: #e6f4ec;

    /* Dark Mode Raw Tokens (Evening Walnut, Warm Parchment Ink, Burnished Gold) */
    --d-bg-canvas: #110f0c;
    --d-bg-paper: #1a1613;
    --d-bg-recessed: #241e19;
    --d-ink-primary: #f5efe4;
    --d-ink-secondary: #c8bca9;
    --d-ink-muted: #988b79;
    --d-hairline: #342c24;
    --d-hairline-strong: #574b3d;
    --d-accent-terracotta: #df7b59;
    --d-accent-terracotta-hover: #eb9375;
    --d-accent-brass: #e0b464;
    --d-accent-cypress: #78ca9d;
    --d-error: #ff8585;
    --d-error-bg: #361717;
    --d-success: #6fd699;
    --d-success-bg: #142e20;

    --bg-canvas: var(--l-bg-canvas);
    --bg-paper: var(--l-bg-paper);
    --bg-recessed: var(--l-bg-recessed);
    --ink-primary: var(--l-ink-primary);
    --ink-secondary: var(--l-ink-secondary);
    --ink-muted: var(--l-ink-muted);
    --hairline: var(--l-hairline);
    --hairline-strong: var(--l-hairline-strong);
    --accent: var(--l-accent-terracotta);
    --accent-hover: var(--l-accent-terracotta-hover);
    --brass: var(--l-accent-brass);
    --cypress: var(--l-accent-cypress);
    --error: var(--l-error);
    --error-bg: var(--l-error-bg);
    --success: var(--l-success);
    --success-bg: var(--l-success-bg);

    accent-color: var(--accent);
    scrollbar-color: var(--hairline-strong) var(--bg-recessed);
  }

  /* 1. OS Dark Mode Fallback when user has not explicitly pinned Light mode */
  @media (prefers-color-scheme: dark) {
    :root:not(:has(> head > meta[name="color-scheme"][content="light"])):not([data-theme="light"]) {
      --color-scheme: dark;
      --bg-canvas: var(--d-bg-canvas);
      --bg-paper: var(--d-bg-paper);
      --bg-recessed: var(--d-bg-recessed);
      --ink-primary: var(--d-ink-primary);
      --ink-secondary: var(--d-ink-secondary);
      --ink-muted: var(--d-ink-muted);
      --hairline: var(--d-hairline);
      --hairline-strong: var(--d-hairline-strong);
      --accent: var(--d-accent-terracotta);
      --accent-hover: var(--d-accent-terracotta-hover);
      --brass: var(--d-accent-brass);
      --cypress: var(--d-accent-cypress);
      --error: var(--d-error);
      --error-bg: var(--d-error-bg);
      --success: var(--d-success);
      --success-bg: var(--d-success-bg);
    }
  }

  /* 2. Native light-dark() automatic adaptation */
  @supports (color: light-dark(white, black)) {
    :root {
      --bg-canvas: light-dark(var(--l-bg-canvas), var(--d-bg-canvas));
      --bg-paper: light-dark(var(--l-bg-paper), var(--d-bg-paper));
      --bg-recessed: light-dark(var(--l-bg-recessed), var(--d-bg-recessed));
      --ink-primary: light-dark(var(--l-ink-primary), var(--d-ink-primary));
      --ink-secondary: light-dark(var(--l-ink-secondary), var(--d-ink-secondary));
      --ink-muted: light-dark(var(--l-ink-muted), var(--d-ink-muted));
      --hairline: light-dark(var(--l-hairline), var(--d-hairline));
      --hairline-strong: light-dark(var(--l-hairline-strong), var(--d-hairline-strong));
      --accent: light-dark(var(--l-accent-terracotta), var(--d-accent-terracotta));
      --accent-hover: light-dark(var(--l-accent-terracotta-hover), var(--d-accent-terracotta-hover));
      --brass: light-dark(var(--l-accent-brass), var(--d-accent-brass));
      --cypress: light-dark(var(--l-accent-cypress), var(--d-accent-cypress));
      --error: light-dark(var(--l-error), var(--d-error));
      --error-bg: light-dark(var(--l-error-bg), var(--d-error-bg));
      --success: light-dark(var(--l-success), var(--d-success));
      --success-bg: light-dark(var(--l-success-bg), var(--d-success-bg));
    }
  }

  /* 3. Explicit Light Override (placed AFTER @supports so user toggle always wins) */
  :root:is(:has(> head > meta[name="color-scheme"][content="light"]), [data-theme="light"]) {
    color-scheme: light;
    --color-scheme: light;
    --bg-canvas: var(--l-bg-canvas);
    --bg-paper: var(--l-bg-paper);
    --bg-recessed: var(--l-bg-recessed);
    --ink-primary: var(--l-ink-primary);
    --ink-secondary: var(--l-ink-secondary);
    --ink-muted: var(--l-ink-muted);
    --hairline: var(--l-hairline);
    --hairline-strong: var(--l-hairline-strong);
    --accent: var(--l-accent-terracotta);
    --accent-hover: var(--l-accent-terracotta-hover);
    --brass: var(--l-accent-brass);
    --cypress: var(--l-accent-cypress);
    --error: var(--l-error);
    --error-bg: var(--l-error-bg);
    --success: var(--l-success);
    --success-bg: var(--l-success-bg);
  }

  /* 4. Explicit Dark Override (placed AFTER @supports so user toggle always wins) */
  :root:is(:has(> head > meta[name="color-scheme"][content="dark"]), [data-theme="dark"]) {
    color-scheme: dark;
    --color-scheme: dark;
    --bg-canvas: var(--d-bg-canvas);
    --bg-paper: var(--d-bg-paper);
    --bg-recessed: var(--d-bg-recessed);
    --ink-primary: var(--d-ink-primary);
    --ink-secondary: var(--d-ink-secondary);
    --ink-muted: var(--d-ink-muted);
    --hairline: var(--d-hairline);
    --hairline-strong: var(--d-hairline-strong);
    --accent: var(--d-accent-terracotta);
    --accent-hover: var(--d-accent-terracotta-hover);
    --brass: var(--d-accent-brass);
    --cypress: var(--d-accent-cypress);
    --error: var(--d-error);
    --error-bg: var(--d-error-bg);
    --success: var(--d-success);
    --success-bg: var(--d-success-bg);
  }
}

/* ==========================================================================
   3. BASE LAYER — Editorial Typography, View Transitions & Page Rhythm
   ========================================================================== */
@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: 1.65;
    background-color: var(--bg-canvas);
    color: var(--ink-primary);
    scroll-behavior: smooth;
    font-size-adjust: from-font;
    transition: background-color 280ms ease, color 280ms ease;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
      transition: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  body {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
  }

  :where(h1, h2, h3, h4) {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--ink-primary);
    text-wrap: balance;
    font-size-adjust: from-font;
  }

  :where(h1 em, h2 em, h3 em) {
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
  }

  :where(p, li, dd, blockquote) {
    text-wrap: pretty;
    max-inline-size: 68ch;
  }

  :where(a) {
    color: inherit;
    text-underline-offset: 0.22em;
    transition: color 180ms ease;

    &:hover {
      color: var(--accent);
    }
  }

  :where(:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  :root:has(dialog:modal[open]) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  /* Same-Document View Transitions for Hero Photo */
  #hero-photo {
    view-transition-name: branch-hero-photo;
  }

  ::view-transition-old(branch-hero-photo),
  ::view-transition-new(branch-hero-photo) {
    height: 100%;
    object-fit: cover;
  }
}

/* ==========================================================================
   4. COMPONENTS LAYER — Authentic Lahori Editorial Architecture & Animations
   ========================================================================== */
@layer components {
  .container {
    inline-size: min(100% - 2.25rem, 84rem);
    margin-inline: auto;
  }

  @media (min-width: 64rem) {
    .container {
      inline-size: min(100% - 4.5rem, 84rem);
    }
  }

  /* Top Scroll Progress Indicator Ribbon (Compositor-Friendly scaleX) */
  @keyframes grow-progress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  .scroll-progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 4px;
    z-index: 300;
    pointer-events: none;
    background: linear-gradient(90deg, var(--accent) 0%, var(--brass) 55%, var(--cypress) 100%);
    transform-origin: 0 50%;
    transform: scaleX(0);

    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: scroll()) {
        animation: grow-progress auto linear;
        animation-timeline: scroll(root block);
      }
    }
  }

  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 1rem;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background-color: var(--ink-primary);
    color: var(--bg-paper);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-decoration: none;

    &:focus {
      inset-block-start: 1rem;
    }
  }

  /* Live Toast Feedback Notification */
  .live-toast {
    position: fixed;
    inset-block-start: 1.1rem;
    inset-inline-end: 1.1rem;
    z-index: 220;
    max-inline-size: 27rem;
    padding: 0.85rem 1.25rem;
    background-color: var(--ink-primary);
    color: var(--bg-paper);
    border: 1px solid var(--brass);
    border-inline-start: 4px solid var(--brass);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    animation: toast-slide-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes toast-slide-in {
    from {
      opacity: 0;
      transform: translateY(-0.6rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Pulsing Emerald Live Indicator Dot */
  .live-pulse-dot {
    display: inline-block;
    inline-size: 0.52rem;
    block-size: 0.52rem;
    border-radius: 50%;
    background-color: var(--cypress);
    box-shadow: 0 0 0 0 rgba(25, 77, 51, 0.55);

    @media (prefers-reduced-motion: no-preference) {
      animation: live-pulse 2.4s infinite ease-out;
    }
  }

  @keyframes live-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(40, 167, 96, 0.55);
    }
    70% {
      box-shadow: 0 0 0 7px rgba(40, 167, 96, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(40, 167, 96, 0);
    }
  }

  /* Monospace & Editorial Kickers */
  .mono-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }

  .mono-index {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fffaf5;
    background-color: var(--accent);
    padding: 0.25rem 0.68rem;
    box-shadow: inset 0 0 0 1px rgba(255, 250, 245, 0.22);
  }

  .heritage-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-block-end: 0.9rem;
  }

  .heritage-street-tag {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--brass);
    font-weight: 500;
  }

  .editorial-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    margin-block-end: 0.85rem;
  }

  .section-title {
    font-size: clamp(2.1rem, 1.5rem + 2.3vw, 3.35rem);
    max-inline-size: 24ch;
  }

  /* Top Architectural Ledger Bar */
  .ledger-topbar {
    border-block-start: 3px solid var(--accent);
    border-block-end: 1px solid var(--hairline);
    background-color: var(--bg-recessed);
    font-size: 0.78rem;
    color: var(--ink-secondary);
    transition: background-color 240ms ease, border-color 240ms ease;
  }

  .ledger-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding-block: 0.5rem;
  }

  .ledger-topbar__left,
  .ledger-topbar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
  }

  .urdu-welcome {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--accent);
  }

  .ledger-divider {
    color: var(--hairline-strong);
  }

  .ledger-link {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-decoration: none;
    color: var(--ink-primary);
    font-weight: 500;
  }

  /* Persistent Multi-Branch Area Switcher Strip */
  .area-switcher-bar {
    background-color: var(--bg-paper);
    border-block-end: 2px solid var(--hairline-strong);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: background-color 240ms ease, border-color 240ms ease;
  }

  .area-switcher-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.15rem;
    padding-block: 0.7rem;
  }

  .area-switcher-bar__intro {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .area-switcher-bar__label {
    color: var(--accent);
    font-weight: 600;
  }

  .area-switcher-bar__sub {
    font-size: 0.76rem;
    color: var(--ink-muted);
  }

  .area-switcher-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    flex: 1;
  }

  @media (min-width: 48rem) {
    .area-switcher-tabs {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .area-tab {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-block-size: 62px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-canvas);
    cursor: pointer;
    text-align: left;
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      transform 180ms ease,
      box-shadow 180ms ease;

    &:hover {
      border-color: var(--accent);
      background-color: var(--bg-recessed);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(1px);
    }

    &[aria-pressed="true"] {
      background-color: var(--ink-primary);
      border-color: var(--ink-primary);
      color: var(--bg-paper);
      box-shadow: inset 0 3px 0 var(--d-accent-brass), 0 8px 22px rgba(0, 0, 0, 0.14);

      & .area-tab__area {
        color: var(--d-accent-brass);
      }

      & .area-tab__pill {
        background-color: rgba(224, 180, 100, 0.18);
        border-color: var(--d-accent-brass);
        color: var(--d-accent-brass);
      }

      & .area-tab__addr {
        color: var(--d-ink-secondary);
      }
    }
  }

  .area-tab__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 0.12rem;
  }

  .area-tab__area {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .area-tab__pill {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1rem 0.42rem;
    border: 1px solid var(--hairline-strong);
    color: var(--brass);
    background-color: var(--bg-paper);
  }

  .area-tab__name {
    font-family: var(--font-serif);
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.15;
  }

  .area-tab__addr {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-muted);
    margin-block-start: 0.12rem;
  }

  .btn-area-modal-trigger {
    min-block-size: 54px;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fffaf5;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 250, 245, 0.18);
    transition: background-color 180ms ease, transform 160ms ease, box-shadow 180ms ease;

    &:hover {
      background-color: var(--accent-hover);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(150, 56, 30, 0.25);
    }
  }

  /* Sticky Editorial Header & Bespoke Brand Crest Logo */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background-color: color-mix(in srgb, var(--bg-canvas) 93%, transparent);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--hairline-strong);
    transition: background-color 240ms ease, border-color 240ms ease;
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 0.85rem;
  }

  .brand-crest {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    transition: transform 200ms ease;

    &:hover {
      transform: translateY(-1px);
    }
  }

  .brand-crest__logo-svg {
    inline-size: 3.45rem;
    block-size: 3.45rem;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .brand-crest:hover .brand-crest__logo-svg {
    transform: scale(1.05);
  }

  .brand-crest__text {
    display: flex;
    flex-direction: column;
  }

  .brand-crest__kicker {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
    margin-block-end: 0.08rem;
  }

  .brand-crest__title {
    font-family: var(--font-serif);
    font-size: 1.48rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.06;
    color: var(--ink-primary);
  }

  .brand-crest__sub {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-block-start: 0.16rem;
  }

  .primary-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
  }

  .primary-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: 48px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--ink-secondary);

    &::after {
      content: '';
      position: absolute;
      inset-block-end: 0.55rem;
      inset-inline: 0;
      block-size: 2px;
      background-color: var(--accent);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    &:hover {
      color: var(--accent);

      &::after {
        transform: scaleX(1);
        transform-origin: left;
      }
    }
  }

  @media (max-width: 74rem) {
    .primary-nav {
      display: none;
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  /* Labeled Day / Night Theme Switch Button */
  .theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-block-size: 48px;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
    color: var(--ink-primary);
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, transform 150ms ease;

    &:hover {
      border-color: var(--accent);
      background-color: var(--bg-recessed);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(1px);
    }

    & svg {
      inline-size: 1.1rem;
      block-size: 1.1rem;
      color: var(--brass);
      flex-shrink: 0;
    }
  }

  .theme-switch__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  @media (max-width: 42rem) {
    .theme-switch__label {
      display: none;
    }
  }

  .icon-moon {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    :root:not(:has(> head > meta[name="color-scheme"][content="light"])):not([data-theme="light"]) .icon-sun {
      display: none;
    }
    :root:not(:has(> head > meta[name="color-scheme"][content="light"])):not([data-theme="light"]) .icon-moon {
      display: block;
    }
  }

  :root:is(:has(> head > meta[name="color-scheme"][content="dark"]), [data-theme="dark"]) .icon-sun {
    display: none;
  }
  :root:is(:has(> head > meta[name="color-scheme"][content="dark"]), [data-theme="dark"]) .icon-moon {
    display: block;
  }

  /* Buttons (Minimum 48px target, 52px on coarse pointer) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 48px;
    padding: 0.68rem 1.3rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 180ms ease,
      color 180ms ease,
      border-color 180ms ease,
      transform 150ms ease,
      box-shadow 180ms ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    &:active:not(:disabled) {
      transform: translateY(1px);
    }

    &:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
  }

  @media (pointer: coarse) {
    .btn,
    .theme-switch,
    .filter-tab,
    .currency-tab,
    .area-tab,
    .hero-pill {
      min-block-size: 52px;
    }
  }

  .btn--primary {
    background-color: var(--accent);
    color: #fffaf5;
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(255, 250, 245, 0.16);

    &:hover:not(:disabled) {
      background-color: var(--accent-hover);
      border-color: var(--accent-hover);
      color: #fffaf5;
      box-shadow: 0 10px 24px rgba(150, 56, 30, 0.28);
    }
  }

  .btn--ghost {
    background-color: var(--bg-paper);
    color: var(--ink-primary);
    border-color: var(--hairline-strong);

    &:hover:not(:disabled) {
      border-color: var(--ink-primary);
      background-color: var(--bg-recessed);
      color: var(--ink-primary);
    }
  }

  .btn--tall {
    padding-inline: 1.75rem;
  }

  .btn--full {
    inline-size: 100%;
  }

  /* ==========================================================================
     HERO SECTION — Asymmetric Editorial Spread + Ambient Radial Illumination
     ========================================================================== */
  .hero {
    position: relative;
    padding-block: clamp(2rem, 4vw, 3.75rem) clamp(2.75rem, 5vw, 4.5rem);
    border-block-end: 1px solid var(--hairline-strong);
    background-image:
      radial-gradient(circle at 86% 24%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 46%),
      radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%);
  }

  .hero__editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
  }

  @media (min-width: 62rem) {
    .hero__editorial-grid {
      grid-template-columns: 1.05fr 0.95fr;
      gap: 3.5rem;
      align-items: center;
    }
  }

  @keyframes hero-fade-up {
    from {
      opacity: 0;
      transform: translateY(1.2rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes hero-ken-burns {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.045);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__narrative > * {
      animation: hero-fade-up 550ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
    .hero__narrative > *:nth-child(1) { animation-delay: 40ms; }
    .hero__narrative > *:nth-child(2) { animation-delay: 95ms; }
    .hero__narrative > *:nth-child(3) { animation-delay: 150ms; }
    .hero__narrative > *:nth-child(4) { animation-delay: 210ms; }
    .hero__narrative > *:nth-child(5) { animation-delay: 270ms; }
    .hero__narrative > *:nth-child(6) { animation-delay: 330ms; }

    .hero__visual-stage {
      animation: hero-fade-up 650ms 160ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
  }

  /* Inline Hero Area Quick-Switch Pills */
  .hero__area-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-block-end: 1.15rem;
  }

  .hero-pill {
    display: inline-flex;
    align-items: center;
    min-block-size: 38px;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 150ms ease;

    &:hover {
      border-color: var(--accent);
      color: var(--ink-primary);
      transform: translateY(-1px);
    }

    &[aria-pressed="true"] {
      background-color: var(--accent);
      border-color: var(--accent);
      color: #fffaf5;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(150, 56, 30, 0.22);
    }
  }

  .hero__title {
    font-size: clamp(2.55rem, 1.75rem + 3.2vw, 4.35rem);
    line-height: 1.04;
    margin-block-end: 1.2rem;
  }

  .hero__lead {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.14rem);
    color: var(--ink-secondary);
    max-inline-size: 56ch;
    margin-block-end: 1.75rem;
  }

  .hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 2.1rem;
  }

  .hero__ledger-notes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--hairline-strong);
    border-block-start: 3px solid var(--brass);
    background-color: var(--bg-paper);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05);
  }

  @media (min-width: 40rem) {
    .hero__ledger-notes {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .hero__ledger-item {
    padding: 0.9rem 0.85rem;

    &:not(:last-child) {
      border-inline-end: 1px solid var(--hairline);
    }

    & dt {
      font-family: var(--font-mono);
      font-size: 0.66rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-muted);
      margin-block-end: 0.2rem;
    }

    & dd {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--ink-primary);
      font-variant-numeric: tabular-nums;
    }
  }

  .hero__visual-stage {
    position: relative;
  }

  /* Architectural Brass Seal Badge on Top-Right of Hero Stage */
  .hero__brass-seal {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.9rem;
    margin-block-end: 0.65rem;
    background-color: var(--ink-primary);
    color: var(--bg-paper);
    border: 1px solid var(--brass);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  }

  @media (min-width: 62rem) {
    .hero__brass-seal {
      position: absolute;
      inset-block-start: -1.1rem;
      inset-inline-end: 1rem;
      z-index: 4;
      margin-block-end: 0;
    }
  }

  .hero__brass-seal-num {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    color: var(--d-accent-brass);
  }

  .hero__brass-seal-text {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--bg-paper);
  }

  .hero__figure {
    border: 1px solid var(--ink-primary);
    outline: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
    outline-offset: -6px;
    padding: 0.7rem;
    background-color: var(--bg-paper);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.14);
    transition: transform 320ms ease, box-shadow 320ms ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    }
  }

  .hero__img-frame {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background-color: var(--bg-recessed);

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);

      @media (prefers-reduced-motion: no-preference) {
        animation: hero-ken-burns 18s ease-in-out infinite alternate;
      }
    }
  }

  .hero__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block-start: 0.65rem;
    font-size: 0.78rem;
    color: var(--ink-secondary);
  }

  /* Interactive 3-Photo Hero Preview Strip */
  .hero__gallery-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-block-start: 0.55rem;
  }

  .hero-thumb-btn {
    min-block-size: 40px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;

    &:hover {
      border-color: var(--ink-primary);
      color: var(--ink-primary);
    }

    &[aria-pressed="true"] {
      background-color: var(--ink-primary);
      border-color: var(--ink-primary);
      color: var(--bg-paper);
      box-shadow: inset 0 2px 0 var(--d-accent-brass);
      font-weight: 600;
    }
  }

  .hero__stamp-card {
    margin-block-start: 1rem;
    padding: 1rem 1.2rem;
    background-color: var(--bg-paper);
    border: 1px solid var(--hairline-strong);
    border-inline-start: 4px solid var(--brass);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
  }

  .hero__stamp-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass);
    margin-block-end: 0.25rem;
  }

  .hero__stamp-body {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-secondary);
  }

  /* Docked Architectural Booking Ledger (<search>) */
  .booking-ledger {
    display: block;
    margin-block-start: clamp(2.5rem, 4.5vw, 3.75rem);
    border: 2px solid var(--ink-primary);
    background-color: var(--bg-paper);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.1);
  }

  .booking-ledger__form {
    display: grid;
    grid-template-columns: 1fr;
    border-block-end: 1px solid var(--hairline);
  }

  @media (min-width: 48rem) {
    .booking-ledger__form {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 72rem) {
    .booking-ledger__form {
      grid-template-columns: 1.25fr 0.9fr 0.9fr 1.3fr 0.8fr 1.1fr;
    }
  }

  .booking-ledger__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.85rem 1.05rem;
    border-block-end: 1px solid var(--hairline);

    @media (min-width: 72rem) {
      border-block-end: none;
      border-inline-end: 1px solid var(--hairline);
    }
  }

  .booking-ledger__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass);
    font-weight: 500;
    margin-block-end: 0.25rem;
  }

  .booking-ledger__input {
    min-block-size: 40px;
    border: none;
    border-block-end: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-primary);
    background-color: transparent;
    cursor: pointer;

    &:focus {
      outline: none;
      border-block-end-color: var(--accent);
    }
  }

  .booking-ledger__input option {
    background-color: var(--bg-paper);
    color: var(--ink-primary);
  }

  .booking-ledger__action {
    display: flex;
    align-items: stretch;
    padding: 0.6rem;
  }

  .booking-ledger__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1.15rem;
    background-color: var(--bg-recessed);
    font-size: 0.85rem;
  }

  .booking-ledger__estimate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--ink-primary);
    font-variant-numeric: tabular-nums;
  }

  .booking-ledger__hint {
    font-size: 0.82rem;
    color: var(--ink-secondary);
  }

  /* ==========================================================================
     SCROLL-DRIVEN ENTRY ANIMATIONS (ViewTimeline + IntersectionObserver Fallback)
     ========================================================================== */
  @keyframes scroll-reveal-entry {
    from {
      opacity: 0;
      transform: translateY(1.65rem) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .scroll-reveal {
        animation: scroll-reveal-entry auto ease-out backwards;
        animation-timeline: view(block);
        animation-range: entry 0% entry 26%;
      }
    }

    .scroll-reveal-fallback {
      opacity: 0;
      transform: translateY(1.5rem);
      transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);

      &.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  /* ==========================================================================
     BELOW-THE-FOLD SECTIONS
     ========================================================================== */
  .section {
    padding-block: clamp(3.5rem, 6vw, 5.75rem);
    border-block-end: 1px solid var(--hairline-strong);
    content-visibility: auto;
    contain-intrinsic-block-size: auto 42rem;
  }

  .section-header-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.25rem 2rem;
    padding-block-end: 2rem;
    border-block-end: 1px solid var(--hairline-strong);
  }

  .rooms-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .control-cluster {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
  }

  .filter-tab,
  .currency-tab {
    min-block-size: 48px;
    padding: 0.5rem 0.9rem;
    border: none;
    border-inline-end: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.73rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;

    &:last-child {
      border-inline-end: none;
    }

    &:hover {
      color: var(--ink-primary);
      background-color: var(--bg-recessed);
    }

    &[aria-pressed="true"] {
      background-color: var(--ink-primary);
      color: var(--bg-paper);
      font-weight: 600;
    }
  }

  /* Branch Address & Contact Dossier Grid */
  .branch-dossier-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-block: 2rem 2.5rem;
  }

  @media (min-width: 54rem) {
    .branch-dossier-grid {
      grid-template-columns: 1.12fr 0.88fr;
    }
  }

  .branch-dossier-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.85rem;
    background-color: var(--bg-paper);
    border: 1px solid var(--ink-primary);
    border-block-start: 4px solid var(--accent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
    transition: transform 240ms ease, box-shadow 240ms ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
    }
  }

  .branch-dossier-card__title {
    font-size: 1.9rem;
    margin-block: 0.25rem 0.65rem;
  }

  .branch-dossier-card__address {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-primary);
    padding: 0.75rem 1rem;
    background-color: var(--bg-recessed);
    border-inline-start: 3px solid var(--brass);
    margin-block-end: 0.85rem;
  }

  .branch-dossier-card__note {
    font-size: 0.92rem;
    color: var(--ink-secondary);
    margin-block-end: 1.35rem;
  }

  .branch-dossier-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
  }

  .branch-dossier-card__actions--spaced {
    margin-block-start: 1.25rem;
  }

  .contact-spec-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-block-start: 0.5rem;

    & > div {
      padding-block-end: 0.6rem;
      border-block-end: 1px solid var(--hairline);

      &:last-child {
        border-block-end: none;
        padding-block-end: 0;
      }
    }

    & dt {
      font-family: var(--font-mono);
      font-size: 0.66rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    & dd {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--ink-primary);
    }
  }

  .subsection-title {
    font-size: 1.55rem;
    margin-block-end: 1rem;
  }

  .location-editorial {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: start;
  }

  @media (min-width: 62rem) {
    .location-editorial {
      grid-template-columns: 1.12fr 0.88fr;
      gap: 3rem;
    }
  }

  .table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
  }

  .distance-ledger th,
  .distance-ledger td {
    padding: 0.85rem 1rem;
    border-block-end: 1px solid var(--hairline);
    text-align: left;
    font-size: 0.88rem;
  }

  .distance-ledger thead th {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background-color: var(--bg-recessed);
  }

  .distance-ledger tbody tr {
    transition: background-color 150ms ease;

    &:hover {
      background-color: var(--bg-recessed);
    }
  }

  .distance-ledger tbody th {
    font-weight: 600;
    color: var(--ink-primary);
  }

  .distance-ledger tbody td {
    color: var(--ink-secondary);
  }

  .distance-ledger .num-col {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .copy-status {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cypress);
  }

  .map-frame {
    border: 1px solid var(--ink-primary);
    outline: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
    outline-offset: -5px;
    padding: 0.6rem;
    background-color: var(--bg-paper);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);

    & iframe {
      inline-size: 100%;
      block-size: 27rem;
      border: 0;
    }
  }

  .map-caption {
    margin-block-start: 0.65rem;
    font-size: 0.82rem;
    color: var(--ink-secondary);
  }

  /* Rooms & Suites Editorial List with Interactive Angle Switcher */
  .rooms-editorial-list {
    display: flex;
    flex-direction: column;
  }

  .room-entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 2.65rem;
    border-block-end: 1px solid var(--hairline-strong);
    contain: layout style;

    &[hidden] {
      display: none;
    }
  }

  @media (min-width: 58rem) {
    .room-entry {
      grid-template-columns: 0.94fr 1.06fr;
      gap: 3rem;
      align-items: center;
    }

    .room-entry:nth-child(even) .room-entry__media-col {
      order: 2;
    }
  }

  .room-entry__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ink-primary);
    outline: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
    outline-offset: -5px;
    padding: 0.6rem;
    background-color: var(--bg-paper);
    cursor: pointer;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);

    & img {
      aspect-ratio: 16 / 10;
      object-fit: cover;
      inline-size: 100%;
      transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    }

    &:hover img {
      transform: scale(1.03);
    }
  }

  .room-entry__index {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    padding: 0.28rem 0.65rem;
    background-color: var(--ink-primary);
    color: var(--bg-paper);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    border: 1px solid var(--brass);
  }

  .room-angle-switcher {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-block-start: 0.5rem;
  }

  .room-angle-btn {
    min-block-size: 40px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-canvas);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;

    &:hover {
      border-color: var(--ink-primary);
      color: var(--ink-primary);
    }

    &[aria-pressed="true"] {
      background-color: var(--accent);
      border-color: var(--accent);
      color: #fffaf5;
      font-weight: 600;
    }
  }

  .room-entry__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-block-end: 0.85rem;
  }

  .room-entry__title {
    font-size: clamp(1.85rem, 1.4rem + 1.2vw, 2.4rem);
    margin-block-start: 0.2rem;
  }

  .room-entry__tariff {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    @media (min-width: 40rem) {
      align-items: flex-end;
      text-align: right;
    }
  }

  .room-entry__price {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .room-entry__per {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
    margin-block-start: 0.25rem;
  }

  .room-entry__desc {
    font-size: 0.96rem;
    color: var(--ink-secondary);
    max-inline-size: 62ch;
    margin-block-end: 1.1rem;
  }

  /* Room Amenity Highlight Pills */
  .room-amenity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-end: 1.25rem;
  }

  .room-amenity-pill {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.6rem;
    background-color: var(--bg-recessed);
    border: 1px solid var(--hairline-strong);
    color: var(--ink-primary);
  }

  .room-spec-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-block: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
    margin-block-end: 1.45rem;

    @media (min-width: 42rem) {
      grid-template-columns: repeat(4, 1fr);
    }

    & > div {
      padding: 0.75rem 0.7rem;

      &:not(:last-child) {
        border-inline-end: 1px solid var(--hairline);
      }
    }

    & dt {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-muted);
      margin-block-end: 0.2rem;
    }

    & dd {
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--ink-primary);
    }
  }

  .room-entry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* ==========================================================================
     CHAPTER III: ARCHITECTURAL & CULINARY VISUAL TOUR (GALLERY MOSAIC)
     ========================================================================== */
  .gallery-mosaic {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-block-start: 2.25rem;
  }

  @media (min-width: 58rem) {
    .gallery-mosaic {
      grid-template-columns: repeat(3, 1fr);
    }

    .gallery-card--featured {
      grid-column: span 3;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: center;
    }
  }

  .gallery-card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-paper);
    border: 1px solid var(--ink-primary);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;

    &:hover {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 20px 44px rgba(0, 0, 0, 0.12);
    }
  }

  .gallery-card__media {
    position: relative;
    overflow: hidden;
    padding: 0.55rem;
    background-color: var(--bg-canvas);
    border-block-end: 1px solid var(--hairline);

    & img {
      aspect-ratio: 16 / 10;
      object-fit: cover;
      inline-size: 100%;
      transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    &:hover img {
      transform: scale(1.04);
    }
  }

  @media (min-width: 58rem) {
    .gallery-card--featured .gallery-card__media {
      border-block-end: none;
      border-inline-end: 1px solid var(--hairline);
    }
  }

  .gallery-card__badge {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    padding: 0.25rem 0.65rem;
    background-color: var(--ink-primary);
    color: var(--bg-paper);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    border: 1px solid var(--brass);
  }

  .gallery-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 1.5rem;
  }

  .gallery-card__title {
    font-size: 1.65rem;
    margin-block-end: 0.5rem;
  }

  .gallery-card__desc {
    font-size: 0.9rem;
    color: var(--ink-secondary);
    margin-block-end: 1.25rem;
  }

  .gallery-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  /* 3-Property Directory Cards */
  .directory-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-block-start: 2.25rem;
  }

  @media (min-width: 58rem) {
    .directory-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .directory-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.85rem;
    background-color: var(--bg-paper);
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;

    &:hover {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
    }

    &[data-active-branch="true"] {
      border-color: var(--accent);
      border-block-start: 4px solid var(--accent);
    }
  }

  .directory-card__title {
    font-size: 1.7rem;
    margin-block: 0.25rem 0.35rem;
  }

  .directory-card__address {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent);
    margin-block-end: 0.9rem;
  }

  .directory-card__desc {
    font-size: 0.9rem;
    color: var(--ink-secondary);
    margin-block-end: 1.5rem;
  }

  .directory-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--hairline);
  }

  .directory-card__btns {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  /* House Standards Architectural Grid */
  .standards-header {
    margin-block-end: 2.5rem;
  }

  .standards-ledger {
    display: grid;
    grid-template-columns: 1fr;
    border-block-start: 1px solid var(--hairline-strong);
    border-inline-start: 1px solid var(--hairline-strong);
  }

  @media (min-width: 44rem) {
    .standards-ledger {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 66rem) {
    .standards-ledger {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .standards-ledger__item {
    padding: 1.85rem 1.65rem;
    background-color: var(--bg-paper);
    border-inline-end: 1px solid var(--hairline-strong);
    border-block-end: 1px solid var(--hairline-strong);
    transition: background-color 220ms ease;

    &:hover {
      background-color: var(--bg-recessed);
    }
  }

  .standards-ledger__num {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--brass);
    margin-block-end: 0.5rem;
  }

  .standards-ledger__title {
    font-size: 1.38rem;
    margin-block-end: 0.5rem;
  }

  .standards-ledger__body {
    font-size: 0.91rem;
    color: var(--ink-secondary);
  }

  /* Guestbook Entries */
  .guestbook-score {
    font-size: 0.9rem;
    color: var(--ink-secondary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    @media (min-width: 48rem) {
      align-items: flex-end;
    }
  }

  .guestbook-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-block-start: 2.25rem;
  }

  @media (min-width: 58rem) {
    .guestbook-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .guestbook-entry {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.85rem;
    background-color: var(--bg-paper);
    border: 1px solid var(--hairline-strong);
    border-block-start: 3px solid var(--brass);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;

    &:hover {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1);
    }
  }

  .guestbook-entry__meta {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--brass);
    margin-block-end: 0.9rem;
  }

  .guestbook-entry__quote p {
    font-family: var(--font-serif);
    font-size: 1.26rem;
    line-height: 1.42;
    color: var(--ink-primary);
    margin-block-end: 1.35rem;
  }

  .guestbook-entry__author {
    display: flex;
    flex-direction: column;
    padding-block-start: 0.9rem;
    border-block-start: 1px solid var(--hairline);

    & strong {
      font-size: 0.92rem;
      color: var(--ink-primary);
    }

    & span {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--ink-muted);
    }
  }

  /* Practicalities (FAQ Accordion + Dispatch Form) */
  .practicalities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
  }

  @media (min-width: 62rem) {
    .practicalities-grid {
      grid-template-columns: 1fr 1fr;
      gap: 3.75rem;
    }
  }

  .faq-ledger {
    margin-block-start: 1.75rem;
    border-block-start: 1px solid var(--hairline-strong);
  }

  .faq-row {
    border-block-end: 1px solid var(--hairline-strong);
  }

  .faq-row__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-block-size: 54px;
    padding-block: 1.1rem;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink-primary);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: '+';
      font-family: var(--font-mono);
      font-size: 1.1rem;
      color: var(--accent);
      flex-shrink: 0;
    }
  }

  .faq-row[open] .faq-row__summary::after {
    content: '−';
  }

  .faq-row__body {
    padding-block-end: 1.25rem;
    font-size: 0.93rem;
    color: var(--ink-secondary);
    max-inline-size: 58ch;
  }

  /* Front Desk Dispatch Form Card */
  .dispatch-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background-color: var(--bg-paper);
    border: 1px solid var(--ink-primary);
    border-block-start: 4px solid var(--accent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  }

  .dispatch-card__header {
    margin-block-end: 1.5rem;
    padding-block-end: 1.15rem;
    border-block-end: 1px solid var(--hairline);

    & h3 {
      font-size: 1.95rem;
      margin-block: 0.25rem 0.35rem;
    }

    & p {
      font-size: 0.9rem;
      color: var(--ink-secondary);
    }
  }

  /* Editorial Forms & Validation (:user-invalid + fallback) */
  .editorial-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }

  .form-row-2,
  .form-row-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  @media (min-width: 38rem) {
    .form-row-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .form-row-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .form-field__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-primary);
  }

  .req-flag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--accent);
  }

  .form-field__hint {
    font-size: 0.78rem;
    color: var(--ink-muted);
  }

  .form-field__input {
    min-block-size: 48px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--hairline-strong);
    border-radius: 2px;
    background-color: var(--bg-canvas);
    color: var(--ink-primary);
    font-size: 0.94rem;

    &:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
      border-color: var(--accent);
    }
  }

  .form-field__error {
    display: none;
    margin-block-start: 0.25rem;
    padding: 0.45rem 0.65rem;
    background-color: var(--error-bg);
    border-inline-start: 3px solid var(--error);
    color: var(--error);
    font-size: 0.8rem;
    font-weight: 600;
  }

  .form-field__input:user-invalid,
  .form-field__input.user-invalid-fallback {
    border-color: var(--error);
    background-color: var(--error-bg);
  }

  .form-field__input:user-invalid ~ .form-field__error,
  .form-field__input.user-invalid-fallback ~ .form-field__error {
    display: block;
  }

  .form-field__input:user-valid,
  .form-field__input.user-valid-fallback {
    border-color: var(--cypress);
  }

  .form-fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .radio-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: 48px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-canvas);
    font-size: 0.82rem;
    cursor: pointer;

    &:has(input:checked) {
      border-color: var(--accent);
      background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-canvas));
      font-weight: 600;
    }
  }

  .radio-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  @media (min-width: 38rem) {
    .radio-grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .radio-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-block-size: 52px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-canvas);
    cursor: pointer;

    & input {
      margin-block-start: 0.25rem;
    }

    & span {
      display: flex;
      flex-direction: column;
    }

    & strong {
      font-size: 0.9rem;
    }

    & small {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--ink-muted);
    }

    &:has(input:checked) {
      border-color: var(--accent);
      background-color: color-mix(in srgb, var(--accent) 12%, var(--bg-canvas));
    }
  }

  .form-actions-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;

    @media (min-width: 36rem) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .status-banner {
    padding: 1rem 1.15rem;
    background-color: var(--success-bg);
    border: 1px solid var(--success);
    color: var(--ink-primary);
    font-size: 0.9rem;
  }

  .status-banner__actions {
    margin-block-start: 0.85rem;
  }

  /* ==========================================================================
     MODAL DIALOGS (<dialog closedby="any">)
     ========================================================================== */
  .editorial-dialog {
    margin: auto;
    inline-size: min(94vw, 46rem);
    max-block-size: 90dvh;
    padding: 0;
    border: 2px solid var(--ink-primary);
    background-color: var(--bg-paper);
    color: var(--ink-primary);
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.38);

    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition:
      opacity 220ms ease-out,
      transform 220ms ease-out,
      display 220ms ease-out allow-discrete,
      overlay 220ms ease-out allow-discrete;

    &::backdrop {
      background-color: rgba(15, 12, 9, 0);
      backdrop-filter: blur(0px);
      transition:
        background-color 220ms ease-out,
        backdrop-filter 220ms ease-out,
        display 220ms ease-out allow-discrete,
        overlay 220ms ease-out allow-discrete;
    }

    &[open] {
      opacity: 1;
      transform: translateY(0) scale(1);

      &::backdrop {
        background-color: rgba(15, 12, 9, 0.74);
        backdrop-filter: blur(5px);
      }
    }

    &[data-closing] {
      opacity: 0;
      transform: translateY(10px) scale(0.98);

      &::backdrop {
        background-color: rgba(15, 12, 9, 0);
        backdrop-filter: blur(0px);
      }
    }
  }

  @starting-style {
    .editorial-dialog[open] {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }

    .editorial-dialog[open]::backdrop {
      background-color: rgba(15, 12, 9, 0);
      backdrop-filter: blur(0px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .editorial-dialog {
      transform: none;
      transition-duration: 100ms;
    }

    @starting-style {
      .editorial-dialog[open] {
        transform: none;
      }
    }
  }

  dialog:modal {
    overscroll-behavior: contain;
    overflow-y: auto;
  }

  dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .editorial-dialog--wide {
    inline-size: min(95vw, 72rem);
  }

  .editorial-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-block-end: 1px solid var(--hairline-strong);
    background-color: var(--bg-recessed);
  }

  .dialog-brand-row {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
  }

  .dialog-brand-row__crest {
    inline-size: 2.85rem;
    block-size: 2.85rem;
    flex-shrink: 0;
    margin-block-start: 0.15rem;
  }

  .editorial-dialog__title {
    font-size: 1.75rem;
    margin-block-start: 0.15rem;
  }

  .area-selector-subtitle {
    margin-block-start: 0.3rem;
    font-size: 0.9rem;
    color: var(--ink-secondary);
    max-inline-size: 62ch;
  }

  .dialog-header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .dialog-theme-btn {
    min-block-size: 48px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
    color: var(--ink-primary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;

    &:hover {
      border-color: var(--accent);
      background-color: var(--bg-canvas);
    }
  }

  .dialog-close {
    display: inline-grid;
    place-items: center;
    inline-size: 48px;
    block-size: 48px;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-paper);
    cursor: pointer;
    flex-shrink: 0;

    &:hover {
      border-color: var(--ink-primary);
      background-color: var(--accent);
      color: #fffaf5;
    }
  }

  .editorial-dialog__body {
    padding: 1.5rem;
  }

  /* Area Gate Grid inside Modal 0 */
  .area-gate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  @media (min-width: 56rem) {
    .area-gate-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .area-gate-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline-strong);
    background-color: var(--bg-canvas);
    transition: border-color 180ms ease, transform 200ms ease, box-shadow 200ms ease;

    &:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    }
  }

  .area-gate-card__photo {
    position: relative;
    overflow: hidden;
    padding: 0.45rem;
    border-block-end: 1px solid var(--hairline);
    background-color: var(--bg-paper);
    cursor: pointer;

    & img {
      aspect-ratio: 16 / 10;
      object-fit: cover;
      inline-size: 100%;
      transition: transform 450ms ease;
    }

    &:hover img {
      transform: scale(1.04);
    }
  }

  .area-gate-card__badge {
    position: absolute;
    inset-block-start: 0.85rem;
    inset-inline-start: 0.85rem;
    z-index: 2;
    padding: 0.25rem 0.6rem;
    background-color: var(--ink-primary);
    color: var(--bg-paper);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    border: 1px solid var(--brass);
  }

  .area-gate-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem;
  }

  .area-gate-card__title {
    font-size: 1.55rem;
    margin-block: 0.2rem 0.45rem;
  }

  .area-gate-card__address {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink-primary);
    padding: 0.5rem 0.65rem;
    background-color: var(--bg-recessed);
    border-inline-start: 3px solid var(--accent);
    margin-block-end: 0.65rem;
  }

  .area-gate-card__desc {
    font-size: 0.85rem;
    color: var(--ink-secondary);
    margin-block-end: 0.85rem;
    flex: 1;
  }

  .area-gate-card__rate {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-secondary);
    margin-block-end: 0.85rem;

    & strong {
      font-family: var(--font-serif);
      font-size: 1.35rem;
      color: var(--accent);
    }
  }

  .area-gate-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .area-gate-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-block-start: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--hairline);
  }

  .dialog-summary-ledger {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    background-color: var(--bg-recessed);
    border: 1px solid var(--hairline-strong);
  }

  .dialog-summary-ledger__total {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .editorial-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-block-start: 0.5rem;
  }

  .dossier-photo-wrap {
    border: 1px solid var(--hairline-strong);
    padding: 0.45rem;
    background-color: var(--bg-canvas);
    margin-block-end: 1rem;

    & img {
      aspect-ratio: 16 / 10;
      object-fit: cover;
      inline-size: 100%;
    }
  }

  .dossier-meta {
    display: block;
    margin-block-end: 0.55rem;
  }

  .dossier-desc {
    color: var(--ink-secondary);
    margin-block-end: 1.25rem;
  }

  .dossier-subheading {
    font-size: 1.35rem;
    margin-block-end: 0.65rem;
  }

  .dossier-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-block-end: 1.35rem;

    @media (min-width: 36rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    & li {
      padding: 0.55rem 0.75rem;
      border: 1px solid var(--hairline);
      background-color: var(--bg-canvas);
      font-size: 0.85rem;
    }
  }

  .dossier-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  /* Floating Quick-Action Concierge Bar */
  .floating-concierge {
    position: fixed;
    inset-block-end: 1.15rem;
    inset-inline-end: 1.15rem;
    z-index: 80;
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem;
    background-color: var(--bg-paper);
    border: 1px solid var(--ink-primary);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
  }

  .floating-concierge__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: 0.5rem 0.95rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
  }

  .floating-concierge__btn--wa {
    background-color: var(--cypress);
    color: #fffaf5;

    &:hover {
      color: #fffaf5;
      opacity: 0.92;
    }
  }

  .floating-concierge__btn--book {
    background-color: var(--accent);
    color: #fffaf5;

    &:hover {
      background-color: var(--accent-hover);
    }
  }

  /* Architectural Footer */
  .site-footer {
    margin-block-start: auto;
    padding-block: 3.5rem 5rem;
    background-color: var(--bg-recessed);
    border-block-start: 2px solid var(--hairline-strong);
  }

  .site-footer__brand-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding-block-end: 2.25rem;
    margin-block-end: 2.25rem;
    border-block-end: 1px solid var(--hairline-strong);
  }

  .site-footer__brand-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .site-footer__crest-img {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    flex-shrink: 0;
  }

  .site-footer__group-name {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink-primary);
  }

  .site-footer__quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-block-end: 2.75rem;
    border-block-end: 1px solid var(--hairline);
  }

  @media (min-width: 52rem) {
    .site-footer__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .site-footer__brand {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    margin-block-end: 0.2rem;
  }

  .site-footer__address {
    margin-block: 0.55rem 0.95rem;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--ink-secondary);
  }

  .site-footer__btn {
    inline-size: 100%;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block-start: 1.5rem;
    font-size: 0.82rem;
    color: var(--ink-muted);
  }
}

/* ==========================================================================
   5. UTILITIES & FORCED COLORS LAYER
   ========================================================================== */
@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (forced-colors: active) {
    .btn,
    .editorial-dialog,
    .room-entry__media,
    .guestbook-entry,
    .dispatch-card,
    .branch-dossier-card,
    .area-gate-card,
    .gallery-card {
      border: 1px solid ButtonText;
    }
  }
}