/* HotelNewYorkOnline.com - site stylesheet
   Implements the brand board: Midnight Navy and New York Gold, Newsreader
   headings, Inter UI, outline icons, gradient image treatment.
   Mobile-first. No framework. */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Brand board palette */
  --navy: #0B1D33;
  --navy-800: #123055;
  --navy-700: #17406F;
  --gold: #CDA24A;
  --gold-600: #B58C36;
  --gold-100: #F6EFDF;
  --light: #F2F4F7;
  --charcoal: #2B2B2B;
  --white: #FFFFFF;
  --skyline: #1E90FF;
  --park: #2E7D32;
  --subway: #E63946;
  --steel: #6F6F6F;
  --line: #DFE4EA;
  --line-strong: #C6CED8;

  /* Legacy aliases so component names stay readable */
  --color-midnight: var(--navy);
  --color-paper: var(--light);
  --color-graphite: var(--charcoal);
  --color-slate: var(--steel);
  --color-mist: var(--line);
  --color-white: var(--white);
  --color-link: #17406F;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-button: 8px;
  --radius-card: 14px;
  --radius-image: 10px;
  --radius-pill: 999px;

  --container-site: 1200px;
  --content-readable: 720px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px;
  --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px;

  --pad-x: 20px;
  --header-h: 78px;
  --shadow-1: 0 1px 2px rgba(11, 29, 51, .06), 0 6px 20px rgba(11, 29, 51, .06);
  --shadow-2: 0 2px 6px rgba(11, 29, 51, .08), 0 16px 40px rgba(11, 29, 51, .12);
  --shadow-nav: 0 10px 30px rgba(11, 29, 51, .14);

  /* The image treatment. A navy scrim for legibility with a warm gold sheen
     across the top so photography reads as elegant rather than flat. */
  --scrim-card: linear-gradient(
      to top,
      rgba(11, 29, 51, .92) 0%,
      rgba(11, 29, 51, .62) 40%,
      rgba(11, 29, 51, .30) 74%,
      rgba(11, 29, 51, .22) 100%),
    linear-gradient(115deg, rgba(205, 162, 74, .26) 0%, rgba(205, 162, 74, .04) 62%);
  --scrim-hero: linear-gradient(
      100deg,
      rgba(11, 29, 51, .97) 0%,
      rgba(11, 29, 51, .90) 32%,
      rgba(11, 29, 51, .66) 62%,
      rgba(11, 29, 51, .46) 100%),
    linear-gradient(200deg, rgba(205, 162, 74, .24) 0%, rgba(205, 162, 74, .04) 62%);
  /* Photography sets the mood; it does not compete with the words on top of it. */
  --photo-filter: saturate(.78) brightness(.92) contrast(1.03);
}

@media (min-width: 768px) { :root { --pad-x: 24px; } }
@media (min-width: 1024px) { :root { --pad-x: 32px; --header-h: 90px; } }

/* ---------- 3. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--charcoal);
  background: var(--white);
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
svg { width: 1em; height: 1em; }
table { border-collapse: collapse; }

h1, h2, h3, h4 { color: var(--navy); margin: 0 0 var(--s-4); }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5.2vw, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.625rem, 3.4vw, 2.25rem); line-height: 1.2; }
h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.28; font-weight: 600; letter-spacing: -.01em; }
h4 { font-family: var(--font-ui); font-size: 1.375rem; line-height: 1.36; font-weight: 600; }
p { margin: 0 0 var(--s-5); }
ul, ol { margin: 0 0 var(--s-5); padding-left: 1.2em; }
li { margin-bottom: var(--s-2); }
a { color: var(--color-link); text-underline-offset: .18em; }
a:hover { color: var(--navy); }
strong, b { font-weight: 600; }

:focus-visible {
  outline: 3px solid rgba(205, 162, 74, .85);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff;
  padding: var(--s-3) var(--s-4); border-radius: 0 0 var(--radius-button) 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- 4. Layout ---------- */
.container { width: min(100% - (2 * var(--pad-x)), var(--container-site)); margin-inline: auto; }
.prose { max-width: var(--content-readable); }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.62; }

.section { padding-block: var(--s-8); }
@media (min-width: 1024px) { .section { padding-block: var(--s-9); } }
.section--light { background: var(--light); }
.section--white { background: var(--white); }
.section--paper { background: var(--light); }
.section--dark {
  background: var(--navy);
  background-image: radial-gradient(120% 80% at 12% 0%, rgba(205, 162, 74, .18) 0%, rgba(205, 162, 74, 0) 60%);
  color: #D7DEE8;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark a { color: #fff; text-decoration: underline; }
.section--dark .eyebrow { color: var(--gold); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600);
  margin: 0 0 var(--s-3);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--gold); flex: 0 0 auto;
}
.section--dark .eyebrow::before { background: var(--gold); }
.lead { font-size: 1.125rem; line-height: 1.58; color: var(--charcoal); max-width: 62ch; }
@media (min-width: 1024px) { .lead { font-size: 1.1875rem; } }
.section--dark .lead { color: #D7DEE8; }
.muted { color: var(--steel); }
.small { font-size: .875rem; line-height: 1.45; }
.micro { font-size: .75rem; font-weight: 500; letter-spacing: .02em; line-height: 1.35; color: var(--steel); }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- 5. Sticky header with submenus ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-nav); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--header-h);
}
.brand-block { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; min-width: 0; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The property sits on the block, not on the mark: the payoff is a sibling
   of the logo, not a child of it, so a variable on .brand never reaches it.
   One number drives both. The payoff is set to span the mark rather than to a
   size of its own: measured at 11px the line ran 298px against a 236px logo,
   which is why it overhung to the right and sat indented on the left. Dividing
   the logo width by 29 lands the text on the same width, measured at 262px
   wide. Below about 260px the 9px floor governs instead: an exact fit there
   asks for 7.7px, which is past the point where a letter-spaced line in caps
   is still a payoff rather than a smudge. */
.brand-block { --logo-w: 208px; }
.brand svg { width: var(--logo-w); height: auto; max-width: 100%; }
.brand__payoff {
  margin: 0; padding-left: 0;
  font-size: max(9px, calc(var(--logo-w) / 29));
  font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-600); white-space: nowrap;
}
@media (min-width: 480px) { .brand-block { --logo-w: 236px; } }
@media (min-width: 1024px) { .brand-block { --logo-w: 262px; } }
.brand-block--footer { --logo-w: 264px; }
.brand-block--footer .brand__payoff { color: var(--gold); }
/* The payoff is set in nowrap so it tracks the logo's own line. On a 375px
   screen that one line is 415px wide and drags the whole page sideways, so
   below 480px it scales down and is allowed to wrap. */
@media (max-width: 479px) {
  .brand-block--footer .brand svg { width: 100%; max-width: 240px; }
  .brand-block--footer .brand__payoff { font-size: .625rem; padding-left: 0; white-space: normal; }
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-3);
  background: var(--navy); border: 0;
  border-radius: var(--radius-button); color: #fff;
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul > li > a,
.site-nav > ul > li > .submenu-head > a {
  display: block; padding: var(--s-3) 0;
  font-size: .9375rem; font-weight: 600; color: var(--navy); text-decoration: none;
}
.site-nav a[aria-current="page"] { color: var(--gold-600); }

.submenu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.submenu-toggle {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--navy);
}
.submenu-toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.submenu { padding-left: var(--s-4) !important; }
.submenu a {
  display: block; padding: var(--s-3) 0; font-size: .9375rem; font-weight: 500;
  color: var(--charcoal); text-decoration: none;
}
.submenu a:hover { color: var(--gold-600); }
.submenu li { margin: 0; }
.submenu__note { font-size: .8125rem; color: var(--steel); margin: 0 0 var(--s-2); }

@media (max-width: 1023px) {
  .site-nav {
    display: none; border-top: 1px solid var(--line);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; padding-bottom: var(--s-5);
  }
  .site-nav.is-open { display: block; }
  .site-nav > ul > li + li { border-top: 1px solid var(--line); }
  .submenu { display: none; }
  .submenu.is-open { display: block; }
}

@media (min-width: 1024px) {
  .site-nav > ul { display: flex; gap: var(--s-5); align-items: center; }
  .site-nav > ul > li { position: relative; }
  .site-nav > ul > li > a,
  .site-nav > ul > li > .submenu-head > a { padding: var(--s-4) 0; }
  .site-nav > ul > li > a::after,
  .site-nav > ul > li > .submenu-head > a::after {
    content: ""; display: block; height: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left; transition: transform .18s ease; margin-top: 4px;
  }
  .site-nav > ul > li:hover > a::after,
  .site-nav > ul > li:focus-within > a::after,
  .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .submenu-toggle {
    display: inline-flex; min-width: 26px; width: 26px; min-height: 40px;
    margin-left: 2px; color: var(--gold-600);
  }
  .submenu-toggle svg { width: 12px; height: 12px; }
  .submenu {
    position: absolute; top: 100%; left: -20px; min-width: 320px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius-card); box-shadow: var(--shadow-nav);
    padding: var(--s-4) var(--s-5) var(--s-4) !important;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    border-top: 3px solid var(--gold);
  }
  .site-nav > ul > li:hover > .submenu,
  .site-nav > ul > li:focus-within > .submenu,
  .submenu.is-open {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .submenu a { padding: var(--s-2) 0; }
  .submenu--wide { min-width: 480px; columns: 2; column-gap: var(--s-5); }
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 12px 20px;
  border: 1px solid transparent; border-radius: var(--radius-button);
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-800); color: #fff; }
.btn--secondary { background: var(--gold); color: var(--navy); }
.btn--secondary:hover { background: var(--gold-600); color: var(--navy); }
.btn--tertiary { background: var(--white); border-color: var(--gold); color: var(--navy); }
.btn--tertiary:hover { background: var(--gold-100); }
.btn--ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; text-decoration: none; color: var(--color-link);
}
.link-arrow::after { content: "\203A"; font-size: 1.15em; line-height: 1; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 7. Hero ---------- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--scrim-hero); }
.hero__inner { position: relative; padding-block: var(--s-8) var(--s-8); }
@media (min-width: 1024px) { .hero__inner { padding-block: var(--s-10) var(--s-10); max-width: 62%; } }
.hero h1 { color: #fff; margin-bottom: var(--s-4); }
.hero .eyebrow { color: var(--gold); }
.hero .lead { color: #DDE4EE; }
.hero__accent { font-family: var(--font-display); font-style: italic; color: var(--gold); }

.trust-chips {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
}
.trust-chips li {
  display: inline-flex; align-items: center; gap: var(--s-2); margin: 0;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #D7DEE8;
}
.trust-chips svg { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; }

/* Compact hero for pages without a photograph */
.hero--plain { background: var(--navy); }
.hero--plain::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(90% 120% at 8% 0%, rgba(205,162,74,.22) 0%, rgba(205,162,74,0) 62%);
}

/* ---------- 8. Breadcrumbs ---------- */
.breadcrumb { padding-block: var(--s-3); border-bottom: 1px solid var(--line); background: var(--white); }
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: 0; padding: 0; font-size: .8125rem; font-weight: 500; color: var(--steel);
}
.breadcrumb li { margin: 0; }
.breadcrumb li::after { content: "\203A"; margin-left: var(--s-2); color: var(--line-strong); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--steel); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* ---------- 9. Cards and grids ---------- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card__body { padding: var(--s-5); }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1023px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid > * { min-width: 0; }

/* Playful info tile: gradient image, floating label, stat rows */
.tile { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; position: relative; }
.tile__media { position: relative; overflow: hidden; }
.tile__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: var(--photo-filter); transition: transform .5s ease; }
.tile--wide .tile__media img { aspect-ratio: 16 / 9; }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__media::after { content: ""; position: absolute; inset: 0; background-image: var(--scrim-card); }
.tile__kicker {
  position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.94); color: var(--navy);
  border-radius: var(--radius-pill); padding: 5px 12px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tile__kicker svg { width: 14px; height: 14px; color: var(--gold-600); }
.tile__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.tile__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: var(--navy); margin: 0; line-height: 1.25; }
.tile__text { font-size: .9375rem; margin: 0; color: var(--charcoal); }
.tile__cta { margin-top: auto; font-size: .875rem; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.tile__cta::after { content: "\203A"; font-size: 1.2em; line-height: 1; color: var(--gold-600); transition: transform .18s ease; }
.tile:hover .tile__cta::after { transform: translateX(3px); }

/* Stat rows with icons, the playful bit */
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.stats li { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: .9375rem; color: var(--charcoal); }
.stats svg { width: 17px; height: 17px; color: var(--gold-600); flex: 0 0 auto; }
.stats b { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Panel with image, used for related link groups */
.panels { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 640px) { .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panel {
  position: relative; display: flex; align-items: flex-end; min-height: 168px;
  border-radius: var(--radius-card); overflow: hidden; text-decoration: none;
  color: #fff; background: var(--navy); box-shadow: var(--shadow-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.panel:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); color: #fff; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transition: transform .5s ease; }
.panel:hover img { transform: scale(1.05); }
.panel::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to top, rgba(11,29,51,.95) 0%, rgba(11,29,51,.68) 46%, rgba(11,29,51,.34) 100%),
                    linear-gradient(120deg, rgba(205,162,74,.26) 0%, rgba(205,162,74,.04) 62%);
}
.panel__body { position: relative; z-index: 2; padding: var(--s-4) var(--s-5); width: 100%; }
.panel__label { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.panel__title { display: block; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }
.panel__meta { display: block; font-size: .8125rem; color: #C9D3E0; margin-top: 4px; }
.panel--flat { background: var(--navy); }
.panel--flat::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(90% 120% at 85% 10%, rgba(205,162,74,.24) 0%, rgba(205,162,74,0) 62%);
}

/* ---------- 10. Hotel card ---------- */
.hotel-card { display: grid; gap: 0; overflow: hidden; align-items: stretch; }
.hotel-card > * { min-width: 0; }
/* One column, so there is no row height to fill: the ratio sets the height and
   the width comes from the card. */
.hotel-card__media {
  position: relative; overflow: hidden; background: var(--light);
  aspect-ratio: 4 / 3; width: 100%;
}
.hotel-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.86) brightness(.96); transition: transform .5s ease;
}
.hotel-card:hover .hotel-card__media img { transform: scale(1.03); }
.hotel-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to top, rgba(11,29,51,.56) 0%, rgba(11,29,51,.14) 58%),
                    linear-gradient(120deg, rgba(205,162,74,.20) 0%, rgba(205,162,74,.02) 62%);
}
.hotel-card__noimg {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  text-align: center; padding: var(--s-4);
  background: var(--navy);
  background-image: radial-gradient(90% 120% at 80% 15%, rgba(205,162,74,.20) 0%, rgba(205,162,74,0) 62%);
  color: #A8B6C8; font-size: .8125rem; line-height: 1.35;
}
.hotel-card__noimg svg { width: 30px; height: 30px; color: var(--gold); opacity: .85; }
.hotel-card__rank {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  background: var(--gold); color: var(--navy); font-size: .8125rem; font-weight: 700;
  min-width: 30px; height: 30px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--s-2);
  box-shadow: 0 2px 8px rgba(11,29,51,.28);
}
.hotel-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.hotel-card__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.25; margin: 0; color: var(--navy); }
.hotel-card__name a { color: inherit; text-decoration: none; }
.hotel-card__name a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.hotel-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: .875rem; color: var(--charcoal); align-items: baseline; }
.hotel-card__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.hotel-card__meta svg { width: 15px; height: 15px; color: var(--gold-600); }
.hotel-card__reason { font-size: .9375rem; margin: 0; }
.hotel-card__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; padding-top: var(--s-2); }
/* Two columns. The grid track fixes the width, so the media can fill the row
   from top to bottom. Dropping the ratio here is what makes that safe: an
   aspect-ratio combined with height 100% derives the WIDTH from the height, and
   a tall text column then paints the image straight over the copy. The track
   must own the width before the height is allowed to stretch. */
@media (min-width: 768px) {
  .hotel-card { grid-template-columns: 300px 1fr; }
  .hotel-card__media { aspect-ratio: auto; height: 100%; min-height: 220px; }
}
@media (min-width: 1024px) { .hotel-card { grid-template-columns: 340px 1fr; } }

.score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); }
.score__count { font-weight: 400; color: var(--steel); }

/* ---------- 11. Badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.badges li { margin: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  background: var(--navy); color: #fff; border: 1px solid transparent;
}
.badge svg { width: 14px; height: 14px; }
.badge--price { background: var(--white); border-color: var(--line-strong); color: var(--charcoal); }
.badge--score { background: var(--white); border-color: var(--gold); color: var(--navy); }
.badge--score svg { color: var(--gold); }
.badge--location { background: var(--park); color: #fff; }
.badge--value { background: var(--subway); color: #fff; }
.badge--snapshot { background: var(--light); border-color: var(--line); color: var(--steel); }
.badge--caution { background: #FBF3E4; color: #8A5B1B; }
.badge--verified { background: #E7F1E8; color: var(--park); }

.bestfor { display: block; }
.bestfor__label { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); display: block; }
.bestfor__value {
  font-size: 1rem; font-weight: 600; color: var(--navy);
  border-left: 3px solid var(--gold); padding-left: var(--s-3); display: block; margin-top: 4px;
}

/* ---------- 12. Trade-off ---------- */
.tradeoff {
  background: var(--light); border-left: 3px solid var(--navy-700);
  padding: var(--s-3) var(--s-4); border-radius: 0 var(--radius-image) var(--radius-image) 0;
}
.tradeoff__label { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-700); display: block; margin-bottom: 2px; }
.tradeoff p { margin: 0; font-size: .9375rem; }

/* ---------- 13. Facts block ---------- */
.facts {
  background: var(--light); border-radius: var(--radius-card); padding: var(--s-5);
  border: 1px solid var(--line);
}
.facts dl { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin: 0; }
@media (min-width: 640px) { .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .facts dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts dt { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin-bottom: 3px; }
.facts dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- 14. Callouts ---------- */
.callout { border-radius: var(--radius-card); padding: var(--s-5); border: 1px solid var(--line); background: var(--white); }
.callout--insight { border-left: 3px solid var(--navy-700); }
.callout--note { border-left: 3px solid var(--gold); background: #FDFAF3; }
.callout h3 { font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 700; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- 15. Comparison table ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); }
table.compare { width: 100%; min-width: 920px; font-size: .9375rem; }
table.compare caption { text-align: left; padding: var(--s-4) var(--s-5) var(--s-2); font-size: .875rem; color: var(--steel); caption-side: top; }
table.compare th, table.compare td {
  text-align: left; padding: var(--s-4) var(--s-4); border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.compare th:first-child, table.compare td:first-child { padding-left: var(--s-4); padding-right: var(--s-3); }
table.compare th:last-child, table.compare td:last-child { padding-right: var(--s-5); }
table.compare caption { padding-bottom: var(--s-3); }
table.compare thead th {
  font-size: .75rem; font-weight: 700; color: var(--navy); text-transform: uppercase;
  letter-spacing: .06em; white-space: nowrap; background: var(--light);
}
table.compare tbody tr:hover { background: #FBFCFD; }
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare .nums { white-space: nowrap; }
/* The element selector would otherwise outrank .btn--primary and paint navy
   text on a navy button, which is invisible rather than merely wrong. */
table.compare a:not(.btn) { font-weight: 600; text-decoration: none; color: var(--navy); }
table.compare a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--gold); }

.th-sort {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  text-transform: inherit; letter-spacing: inherit;
}
.th-sort:hover { color: var(--gold-600); }
.th-sort__icon { color: var(--steel); font-size: .9em; }
table.compare th[aria-sort="ascending"] .th-sort__icon,
table.compare th[aria-sort="descending"] .th-sort__icon { color: var(--gold-600); }

.table-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.table-filter__label { font-size: .875rem; font-weight: 600; color: var(--navy); }
.table-filter__input {
  min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-button); font: inherit; color: inherit; background: var(--white);
  flex: 1 1 220px; max-width: 340px;
}
.table-filter__status { margin: 0; }

/* ---------- 16. FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); background: var(--white); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) 0;
  font-size: 1.0625rem; font-weight: 600; color: var(--navy);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--gold-600); line-height: 1; flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] { background: var(--light); }
.faq .faq__answer { padding: 0 0 var(--s-4); }
.faq .faq__answer p:last-child { margin-bottom: 0; }
.faq details[open] summary, .faq details[open] .faq__answer { padding-inline: var(--s-4); }

/* ---------- 17. Quick picks ---------- */
.picks { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 768px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); position: relative; overflow: hidden; }
.pick::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gold); }
.pick__label { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); }
.pick__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--navy); }
.pick__name a { color: inherit; text-decoration: none; }
.pick__name a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.pick__why { font-size: .9375rem; margin: 0; }
.pick__metric { font-size: .875rem; color: var(--steel); font-variant-numeric: tabular-nums; margin-top: auto; }

/* ---------- 18. Trust signals row ---------- */
.signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .signals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.signals li { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.signals svg { width: 26px; height: 26px; color: var(--gold); }
.signals b { display: block; font-size: .9375rem; color: var(--navy); }
.section--dark .signals b { color: #fff; }
.signals span { font-size: .875rem; color: var(--steel); }
.section--dark .signals span { color: #C3CDDB; }

/* ---------- 19. Footer ---------- */
.site-footer {
  background: var(--navy); color: #C3CDDB; padding-block: var(--s-8) var(--s-6); margin-top: var(--s-9);
  background-image: radial-gradient(80% 100% at 10% 0%, rgba(205,162,74,.16) 0%, rgba(205,162,74,0) 58%);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }
.site-footer h2 { font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer__brand svg { width: 216px; height: auto; }
.site-footer__tag { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: var(--s-4) 0 var(--s-2); }
.site-footer__note {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--s-7); padding-top: var(--s-5);
  font-size: .8125rem; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
}

/* ---------- 20. 404 ---------- */
.notfound { background: var(--navy); color: #fff; overflow: hidden; position: relative; }
.notfound::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(70% 90% at 82% 12%, rgba(205,162,74,.26) 0%, rgba(205,162,74,0) 60%);
}
.notfound__inner { position: relative; display: grid; gap: var(--s-6); padding-block: var(--s-8) var(--s-9); }
@media (min-width: 900px) { .notfound__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-8); } }
.notfound h1 { color: #fff; }
.notfound .lead { color: #DDE4EE; }
.notfound__art svg { width: 100%; height: auto; }
.quotes { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.quote {
  background: var(--white); border-radius: var(--radius-card); padding: var(--s-4) var(--s-5);
  position: relative; box-shadow: var(--shadow-1); margin: 0;
}
.quote p { margin: 0 0 var(--s-2); font-size: .9375rem; color: var(--charcoal); }
.quote footer { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-600); }
.quote::after {
  content: ""; position: absolute; left: var(--s-6); bottom: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--white);
}
.quotes li:nth-child(even) .quote { margin-left: var(--s-5); }

/* ---------- 21. Misc ---------- */
.divider { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-7); }
.rule-strong { border: 0; border-top: 3px solid var(--gold); margin-block: var(--s-6); width: 56px; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-check { list-style: none; padding: 0; }
.list-check li { position: relative; padding-left: 28px; }
/* Equal arms read as a chevron, not a tick. The short arm has to be about half
   the long one before the eye sees a check mark. */
.list-check li::before {
  content: ""; position: absolute; left: 5px; top: .3em;
  width: 6px; height: 12px;
  border-right: 2.5px solid var(--gold-600); border-bottom: 2.5px solid var(--gold-600);
  transform: rotate(42deg);
}
.figure { margin: 0 0 var(--s-5); }
.figure img { width: 100%; border-radius: var(--radius-card); }
.figure figcaption { font-size: .75rem; color: var(--steel); margin-top: var(--s-2); }
.pagelist { columns: 1; }
@media (min-width: 640px) { .pagelist { columns: 2; } }
@media (min-width: 1024px) { .pagelist { columns: 3; } }
.pagelist li { break-inside: avoid; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 22. Screen reader only ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 23. Design refinements ---------- */
/* The promise reads as two lines, as on the brand board. */
@media (min-width: 640px) { .hero__accent { display: block; } }

/* Caret only where a submenu exists, and only where hover can reveal it. */
/* The caret is the button itself, so it is never drawn twice. */
.nav-caret { display: none; }

/* Submenus for the right-hand nav items open to the left, or a wide panel
   pushes past the viewport edge. */
@media (min-width: 1024px) {
  .site-nav > ul > li:nth-last-child(-n+3) > .submenu { left: auto; right: -20px; }
  .submenu__note { column-span: all; }
}

/* The open mobile menu has to drop below the logo row. Without this it stays a
   flex item in the header row, takes its intrinsic width and pushes the page
   sideways. Only visible with the menu open, which is why it is easy to miss. */
@media (max-width: 1023px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { flex: 1 0 100%; }
  .site-nav > ul > li > .submenu-head > a { flex: 1 1 auto; min-width: 0; }
}

.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.10); margin-top: var(--s-4); padding-top: var(--s-4);
  font-size: .75rem; color: #93A2B6;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between;
}

/* ---- Table thumbnails, booking cell and facility pills ---- */
.thumb-cell { width: 72px; }
.thumb {
  display: block; width: 72px; height: 54px; object-fit: cover;
  border-radius: var(--radius-image); background: var(--light);
  filter: saturate(.86) brightness(.96);
}
.thumb--none {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy);
  background-image: radial-gradient(100% 130% at 78% 12%, rgba(205,162,74,.22) 0%, rgba(205,162,74,0) 64%);
}
.thumb--none svg { width: 20px; height: 20px; color: var(--gold); opacity: .9; }
/* Nine columns squeeze the two text columns into three-line stacks unless the
   numeric ones are told to stay narrow. */
/* The label wraps to two lines rather than pushing the table into a horizontal
   scroll on a 1200px container. */
.book-cell { text-align: right; width: 124px; padding-left: var(--s-3); }
.book-cell .btn { width: 100%; justify-content: center; text-align: center; }
table.compare .nums { width: 1%; padding-left: var(--s-3); padding-right: var(--s-3); }
table.compare tbody td:nth-child(2) { min-width: 190px; }
table.compare tbody td:last-child { padding-left: var(--s-5); }
.btn--small { padding: 9px 14px; font-size: .8125rem; min-height: 0; line-height: 1.2; }

.pills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); padding: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 11px; border-radius: var(--radius-pill);
  background: var(--white); border: 1px solid var(--line);
  font-size: .875rem; font-weight: 500; color: var(--navy); line-height: 1.2;
}
.pill svg { width: 16px; height: 16px; color: var(--gold-600); flex: none; }
.pill--unverified { background: #FBF6EC; border-color: rgba(205,162,74,.45); color: var(--charcoal); }
.pill--unverified svg { color: var(--gold-600); }
.pill-legend { font-size: .9375rem; color: var(--steel); margin: var(--s-5) 0 var(--s-3); }
.pill-legend:first-child { margin-top: 0; }
.pill-legend--warn { color: var(--charcoal); max-width: 62ch; }

/* ---- The verdict pair: two cards instead of two bullet lists ---- */
.verdict-pair { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 820px) { .verdict-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verdict-card { border-top: 4px solid var(--gold); }
.verdict-card--no { border-top-color: var(--steel); }
.verdict-card__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: var(--s-4);
}
.verdict-card--no .verdict-card__tag { color: var(--steel); }
.verdict-card__tag svg { width: 18px; height: 18px; }
.verdict-card .list-check, .verdict-card .list-cross { margin: 0; }
.list-cross { list-style: none; padding: 0; }
.list-cross li { position: relative; padding-left: 28px; margin-bottom: var(--s-3); }
.list-cross li::before {
  content: ""; position: absolute; left: 4px; top: .45em;
  width: 11px; height: 11px;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--steel) 44%, var(--steel) 56%, transparent 56%),
    linear-gradient(to bottom left, transparent 44%, var(--steel) 44%, var(--steel) 56%, transparent 56%);
}

/* ---- Hotel lead: the photograph sits beside the facts, not below them ---- */
.hotel-lead { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }
.hotel-lead > * { min-width: 0; }
@media (min-width: 900px) {
  .hotel-lead--photo { grid-template-columns: 1fr minmax(0, 42%); }
}
.hotel-lead__media { margin: 0; }
.hotel-lead__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card); filter: var(--photo-filter);
}
.hotel-lead__media figcaption { font-size: .8125rem; color: var(--steel); margin-top: var(--s-2); }

/* ---- Street map on the hotel page ---- */
.location-pair { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }
.location-pair > * { min-width: 0; }
@media (min-width: 900px) { .location-pair { grid-template-columns: 1fr minmax(0, 46%); } }
.minimap-figure { margin: 0; }
/* An inline SVG with no CSS size falls back to 300 x 150 and opens the page
   sideways, so the width is set here and not left to the viewBox. */
.minimap {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius-card);
}
.minimap-figure figcaption { font-size: .8125rem; color: var(--steel); margin-top: var(--s-3); }
.minimap__bg { fill: #F7F8FA; }

/* Roads are strokes, never fills: a clipped street that got a fill would read
   as a city block that is not there. */
.minimap__road { fill: none; stroke: #BCC6D3; stroke-linecap: round; stroke-linejoin: round; }
.minimap__road--motorway, .minimap__road--trunk { stroke: #D8C79A; }
.minimap__road--primary { stroke: #DCCFAF; }
.minimap__road--secondary { stroke: #AEBCCE; }
.minimap__road--tertiary { stroke: #B7C3D2; }

.minimap__subway { fill: #fff; stroke: var(--navy); stroke-width: 2.2; }
.minimap__entrance { fill: var(--steel); opacity: .55; }
.minimap__dot { fill: var(--navy); }
.minimap__here { fill: rgba(205,162,74,.30); }
.minimap__here-core { fill: var(--gold-600); }
.minimap__north, .minimap__scale { stroke: var(--steel); fill: var(--steel); }
.minimap__scale { stroke-width: 1.6; }

.minimap__road, .minimap__place, .minimap__subway-label,
.minimap__here-label, .minimap__scale-label, .minimap__north-label {
  font-family: var(--font-ui);
}
text.minimap__road { fill: var(--steel); stroke: none; font-size: 10px; font-weight: 500; }
.minimap__place { fill: var(--charcoal); font-size: 12px; font-weight: 600; }
.minimap__subway-label { fill: var(--navy); font-size: 10.5px; font-weight: 600; }
.minimap__here-label { fill: var(--gold-600); font-size: 11px; font-weight: 700;
                       letter-spacing: .06em; text-transform: uppercase; }
.minimap__scale-label, .minimap__north-label { fill: var(--steel); font-size: 10px; font-weight: 600; }

/* ---- Best for, as a chip ---- */
/* The column used to carry a full sentence and ran four lines deep in a table
   that already has nine columns. */
.tag {
  display: inline-block; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--gold-100); color: var(--navy);
  font-size: .8125rem; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
table.compare td:nth-last-child(2) { white-space: nowrap; }