:root {
  --navy: #14264a;
  --navy-deep: #0c1428;
  --yellow: #f5b301;
  --blue: #2563eb;
  --bg: #f7f8fb;
  --text: #1a2438;
  --muted: #5b6b85;
  --card: #ffffff;
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 20, 40, 0.92); backdrop-filter: blur(8px);
  color: #fff;
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.25rem; max-width: 1080px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none; }
.brand .badge { background: var(--yellow); color: var(--navy-deep); border-radius: 8px; padding: 0.1rem 0.45rem; font-size: 0.95rem; }
.nav-links { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.nav-links a { color: #d7e0f2; text-decoration: none; font-size: 0.95rem; }
.nav-links a:hover { color: #fff; }
.nav-links a.cta {
  background: var(--yellow); color: var(--navy-deep); font-weight: 700;
  padding: 0.45rem 0.9rem; border-radius: 10px;
}
.lang { border: 1px solid #44557a; border-radius: 8px; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.nav-links a.login {
  border: 1px solid #7c93c4; border-radius: 10px;
  padding: 0.4rem 0.85rem; font-weight: 700; color: #fff;
}
.nav-links a.login:hover { background: rgba(255, 255, 255, 0.08); }
.lang-switch {
  /* width:auto beats the global full-width form-control rule */
  width: auto; background: transparent; color: #d7e0f2; border: 1px solid #44557a;
  border-radius: 8px; padding: 0.25rem 0.4rem; font-size: 0.85rem;
  font-family: inherit; cursor: pointer;
}
.lang-switch:hover { color: #fff; }
.lang-switch option { color: var(--navy-deep); }

/* Hero */
.hero {
  position: relative; color: #fff;
  background: linear-gradient(rgba(12,20,40,0.55), rgba(12,20,40,0.75)), url("/img/dorm10-a.jpg") center 60% / cover no-repeat;
  padding: 6rem 1.25rem 5rem;
  text-align: center;
}
/* Homepage picture keeps the original cover crop and gradient. Other
   pages retain their existing CSS hero; only these three opt in. The larger
   mobile sizes hint accounts for the tall hero cropping this wide photo. */
.hero.responsive-hero { background: none; isolation: isolate; }
.responsive-hero .hero-image { position: absolute; inset: 0; z-index: -2; }
.responsive-hero .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero.responsive-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(12,20,40,0.55), rgba(12,20,40,0.75)); }
/* The overlay always covers the whole hero. Season/moment themes load after
   this file with equal specificity, so geometry is pinned here: a theme may
   recolour the overlay, never resize it (autumn did, 2026-10-03). */
.hero.responsive-hero::before { inset: 0 !important; width: auto !important; height: auto !important; }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; }
.hero h1 span { color: var(--yellow); }
.hero .theme-line { display: none; margin: 0.5rem auto 0; max-width: 42rem; font-size: clamp(1rem, 2.2vw, 1.15rem); font-style: italic; font-weight: 600; color: #fed7aa; }
.hero .hero-motto { margin: 0.5rem auto 0; max-width: 42rem; font-size: clamp(1.1rem, 2.8vw, 1.35rem); font-weight: 700; color: var(--yellow); letter-spacing: -0.01em; }
.hero p.tag { margin: 0.75rem auto 0; max-width: 42rem; font-size: clamp(1.05rem, 2.5vw, 1.3rem); color: #e3eaf7; }
.reviews-story-margin, .reserve-story-margin { font-style: italic; font-weight: 600; color: var(--muted); margin: 0.25rem 0 1.25rem; font-size: 0.95rem; }
.hero .opening { display: inline-block; margin-top: 1.2rem; background: var(--yellow); color: var(--navy-deep); font-weight: 800; padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.95rem; }
.hero .actions { margin-top: 2rem; display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
/* Third-party credentials under the hero. Kept understated: these are facts, not badges to shout. */
.hero .creds { margin: 2rem auto 0; display: flex; gap: 0.5rem 1.4rem; justify-content: center; flex-wrap: wrap; max-width: 46rem; font-size: 0.9rem; color: #cbd6ea; }
.hero .creds span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero .creds .mark { color: var(--yellow); font-weight: 800; }
/* No photo of a specific building — used on pre-launch/coming-soon pages where
   there is no confirmed building to photograph yet (see SPEC-multi-property-prelaunch.md §3). */
.hero.no-photo { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); }
/* The HTML `hidden` attribute must always win. The UA sheet's [hidden]
   {display:none} loses to any author `display:` rule — so `.btn` below kept
   every hidden button on screen. Found 2026-08-20 on the guided check-in's
   Step 3/4, where the "Continue →" handoff (hidden until Step 5) was drawn
   anyway; the same latent defect sat on every page with a hidden .btn. */
[hidden] { display: none !important; }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 0.85rem 1.6rem; border-radius: 12px; font-size: 1.05rem;
}
.btn-primary { background: var(--yellow); color: var(--navy-deep); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { border: 2px solid #ffffff88; color: #fff; }
.btn-ghost:hover { border-color: #fff; }

/* Sections */
section { padding: 3.5rem 0; }
section h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin-bottom: 0.4rem; }
section p.lead { color: var(--muted); max-width: 44rem; margin-bottom: 2rem; }
.alt { background: #eef1f7; }

/* Rooms */
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.room { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 14px rgba(16,32,60,0.08); }
.room img { height: 200px; width: 100%; object-fit: cover; }
.room .body { padding: 1.1rem 1.2rem 1.4rem; }
.room h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.room .price { color: var(--navy); font-weight: 800; font-size: 1.25rem; }
.room .price small { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
.room ul { list-style: none; margin-top: 0.7rem; color: var(--muted); font-size: 0.92rem; }
.room ul li::before { content: "✓ "; color: var(--blue); font-weight: 700; }
/* September direct-offer promotion cards */
.room .price .was { color: var(--muted); font-weight: 600; font-size: 1rem; text-decoration: line-through; margin-right: 0.3rem; }
.room .deal { color: var(--muted); font-size: 0.88rem; margin-top: 0.15rem; }
.room .book-direct { display: inline-block; margin-top: 0.55rem; font-size: 0.95rem; padding: 0.55rem 1rem; }
.promo-note { background: #f8efdc; border: 1px solid #e6cf97; border-radius: var(--radius); padding: 0.85rem 1.1rem; margin: 0 0 1.25rem; }
.promo-note p { color: #8a5300; font-size: 0.95rem; line-height: 1.55; }
.rewards-plug { margin-top: 1.4rem; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

/* "Book direct and choose your bed" value block (2026-09-11) —
   scripts/refresh-book-direct-value.mjs is the only writer of its content. */
.direct-value { background: #eef4ff; border: 1px solid #cfe0fb; border-radius: var(--radius); padding: 1rem 1.1rem 1.15rem; margin: 0 0 1.4rem; }
.direct-value h3 { font-size: 1.05rem; color: var(--navy); margin: 0 0 0.7rem; }
.direct-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; }
.direct-value-item { background: #fff; border: 1px solid #dbe6fa; border-radius: 10px; padding: 0.7rem 0.85rem; }
.direct-value-item strong { display: block; color: var(--navy); font-size: 0.95rem; margin-bottom: 0.2rem; }
.direct-value-item p { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.direct-value-code { margin: 0.85rem 0 0; font-size: 0.9rem; color: var(--muted); }
.direct-value-code a { font-weight: 700; }

/* Same-day morning flash-sale banner (public/shared/flash-banner.js). In
   normal document flow — never fixed — so it can never overlap the
   Law-25 consent banner (fixed to the viewport bottom, public/shared/consent.js). */
.flash-banner { background: var(--yellow); color: var(--navy-deep); text-align: center; padding: 0.55rem 1rem; font-weight: 700; font-size: 0.92rem; line-height: 1.4; }
.flash-banner a { color: var(--navy-deep); text-decoration: underline; }

/* Seasonal / Holiday Notice Ribbon (public/themes/activate.js) */
.theme-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 60;
  padding: 0.65rem 3.5rem 0.65rem 1.25rem;
  text-align: center;
  box-sizing: border-box;
}
.theme-ribbon-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 1080px;
  margin: 0 auto;
}
.theme-ribbon-close {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.theme-ribbon-close:hover,
.theme-ribbon-close:focus-visible {
  background: rgba(255, 255, 255, 0.35);
  outline: none;
}

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.gallery img { border-radius: 10px; height: 190px; width: 100%; object-fit: cover; }

/* Info grid */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.info { background: var(--card); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: 0 2px 14px rgba(16,32,60,0.06); }
.info h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.info p, .info li { color: var(--muted); font-size: 0.95rem; }
.info ul { padding-left: 1.1rem; }

/* Form */
form { max-width: 620px; }
.field { margin-bottom: 1rem; }
label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; }
input, select, textarea {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid #c9d2e2; border-radius: 10px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
button[type="submit"] {
  background: var(--navy); color: #fff; font-weight: 700; font-size: 1.05rem;
  border: none; border-radius: 12px; padding: 0.9rem 1.8rem; cursor: pointer;
}
button[type="submit"]:hover { background: var(--blue); }
.form-note { color: var(--muted); font-size: 0.88rem; margin-top: 0.8rem; }
/* #ci-status was missing here, so the check-in confirmation rendered as plain
   unstyled body text while every other form on the site got a green box. With
   the form blanking itself on success, guests read that as "nothing happened"
   and submitted again. Keep this selector list in sync when adding a form. */
#form-status, #lg-status, #group-status, #ci-status, #interest-status, #rw-status, #j-step1-status { margin-top: 1rem; font-weight: 600; display: none; padding: 0.8rem 1rem; border-radius: 10px; }
#form-status.ok, #lg-status.ok, #group-status.ok, #ci-status.ok, #interest-status.ok, #rw-status.ok, #j-step1-status.ok { display: block; background: #e5f6ec; color: #166534; }
#form-status.err, #lg-status.err, #group-status.err, #ci-status.err, #interest-status.err, #rw-status.err, #j-step1-status.err { display: block; background: #fdecec; color: #991b1b; }

/* Luggage storage */
.rates-wrap { max-width: 620px; margin-bottom: 2rem; }
table.rates { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 14px rgba(16,32,60,0.08); }
table.rates th, table.rates td { text-align: left; padding: 0.7rem 1rem; font-size: 0.95rem; }
table.rates thead th { background: var(--navy); color: #fff; font-weight: 700; }
table.rates tbody tr + tr td { border-top: 1px solid #e4e9f2; }
table.rates td:last-child { font-weight: 800; color: var(--navy); white-space: nowrap; }
table.rates td.rate-free { color: #166534; }
.subhead { font-size: 1.2rem; font-weight: 800; margin-bottom: 1rem; }
.estimate { font-weight: 700; color: var(--navy); min-height: 1.4em; margin-bottom: 0.8rem; }

/* Event notice */
.event-notice {
  max-width: 44rem; margin: -1rem 0 2rem; padding: 0.8rem 1rem;
  background: #fff3cd; border: 1px solid #e6c766; border-radius: 10px;
  color: #6b5200; font-size: 0.95rem;
}
.event-notice a { color: #6b5200; font-weight: 700; }

/* Legal pages */
.legal { padding: 3.5rem 0 4rem; }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; margin-bottom: 0.6rem; }
.legal .lead { color: var(--muted); max-width: 46rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.15rem; font-weight: 800; margin: 1.6rem 0 0.5rem; }
.legal p { max-width: 46rem; margin-bottom: 0.8rem; }
.legal ul { max-width: 46rem; margin: 0 0 0.8rem 1.3rem; }
.legal li { margin-bottom: 0.35rem; }

/* Agreement checkboxes */
/* Each consent is one tappable row: the whole label is the hit target
   (min 44px, WCAG 2.5.8) and the native box is enlarged to 22px. Found at 13px
   on the live 375px check of v1.15.17 (2026-08-20). Hanging indent keeps the
   box clear of wrapped text; no markup change across the three locale pages. */
.agree label { display: block; position: relative; font-weight: 400; padding: 0.55rem 0 0.55rem 2.1rem; min-height: 44px; box-sizing: border-box; margin: 0; cursor: pointer; }
.agree input[type="checkbox"] { position: absolute; left: 0; top: 0.6rem; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--blue, #14264a); cursor: pointer; }
/* Deposit-exception intake (checkin/done/): the global input{width:100%} rule
   above also caught these radios, stretching each one to the full row width
   so the browser centred the dot and dropped the label text onto the next
   line. Reset to natural size and lay the row out with flex so the dot sits
   beside its label, same as every other choice control on the site. */
#depExcReasons label { display: flex; align-items: flex-start; gap: 0.5rem; }
#depExcReasons input[type="radio"] { width: auto; padding: 0; border: none; margin: 0.2rem 0 0; accent-color: var(--blue, #14264a); cursor: pointer; }
.loc-check { display: block; font-weight: 400; margin-top: 0.4rem; }
.loc-check input[type="checkbox"] { width: auto; margin-right: 0.5rem; }


/* Status badges used across the homepage and ecosystem sections */
.soon { display: inline-block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; background: #243c66; color: #f5b301; border-radius: 6px; padding: 0.1rem 0.4rem; margin-left: 0.25rem; vertical-align: middle; white-space: nowrap; }
.badge-status { display: inline-block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; border-radius: 6px; padding: 0.12rem 0.45rem; margin-left: 0.35rem; vertical-align: middle; white-space: nowrap; }
.badge-status.live { background: #e5f6ec; color: #166534; border: 1px solid rgba(22, 101, 52, 0.2); }
.badge-status.beta { background: #f3e8ff; color: #6b21a8; border: 1px solid rgba(107, 33, 168, 0.2); }
.badge-status.soon { background: #243c66; color: #f5b301; border: 1px solid rgba(245, 179, 1, 0.3); }
.badge-status.partner { background: #e0f2fe; color: #0369a1; border: 1px solid rgba(3, 105, 161, 0.2); }
.btn-network { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; color: #14264a; text-decoration: none; margin-top: 0.5rem; transition: color 0.15s ease; }
.btn-network:hover { color: #f5b301; text-decoration: underline; }

/* Intelligent, guest-first footer */

/* Kiosk footer (check-in flow screens): compact, centred, no directory. */
.site-footer-kiosk .footer-inner { text-align: center; }
.site-footer-kiosk p { margin: 0.4rem 0; color: #aebad0; }

.site-footer {
  background: var(--navy-deep); color: #b9c5d9; padding: 0; text-align: left;
  font-size: 0.94rem; line-height: 1.55;
}
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.site-footer a { color: #e5ebf6; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.site-footer a:hover { color: #fff; text-decoration-thickness: 2px; }
.site-footer a:active { color: var(--yellow); }
.site-footer a:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 4px;
}
.site-footer a[aria-current="page"] { color: #fff; font-weight: 800; text-decoration-color: var(--yellow); }
.footer-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;
}
.footer-action {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin: 0 -1.5rem; padding: 2rem 1.5rem;
  background: linear-gradient(105deg, #1a315e 0%, #122449 100%);
  border-bottom: 1px solid #34466a;
}
.footer-eyebrow {
  margin: 0 0 0.35rem; color: var(--yellow); font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.footer-action h2 { margin: 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; }
.footer-action p:last-child { margin: 0.35rem 0 0; color: #ccd6e8; }
.footer-actions { display: flex; gap: 0.75rem; flex: 0 0 auto; }
.footer-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 0.7rem 1.05rem; border-radius: 10px; font-weight: 800; text-decoration: none;
  white-space: nowrap;
}
.footer-button-primary { background: var(--yellow); color: var(--navy-deep) !important; }
.footer-button-primary:hover { background: #ffd04a; }
.footer-button-secondary { border: 1px solid #8092b6; color: #fff; }
.footer-button-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.footer-brand-row {
  display: flex; align-items: center; gap: 1.25rem; padding: 2.15rem 0 1.6rem;
  border-bottom: 1px solid #283955;
}
.footer-brand {
  display: inline-flex; align-items: center; gap: 0.55rem; color: #fff !important;
  font-size: 1.2rem; font-weight: 800; text-decoration: none !important; white-space: nowrap;
}
.footer-brand-mark {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.8rem;
  padding: 0.14rem 0.45rem; border-radius: 8px; background: var(--yellow);
  color: var(--navy-deep); font-size: 0.93rem; letter-spacing: 0.03em;
}
.footer-brand-row p { margin: 0; max-width: 46rem; color: #9fadc6; }
.footer-directory {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6rem;
  padding: 2.3rem 0;
}
.footer-column h2, .footer-address-block h2, .footer-registration h2 {
  margin: 0 0 0.8rem; color: #fff; font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.06em; line-height: 1.35; text-transform: uppercase;
}
.footer-column ul, .footer-address ul { margin: 0; padding: 0; list-style: none; }
.footer-column li + li { margin-top: 0.32rem; }
.footer-column li > a, .footer-pending {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
  padding: 0.22rem 0;
}
.footer-pending { color: #aab7cc; }
.footer-link-detail { display: block; color: #aebbd1; font-size: 0.82em; }
.footer-status {
  flex: 0 0 auto; margin-top: 0.12rem; padding: 0.08rem 0.38rem;
  border: 1px solid #8f7833; border-radius: 999px; color: #f7d979;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; line-height: 1.45;
  text-transform: uppercase; white-space: nowrap;
}
.footer-external { margin-left: 0.3em; color: #aebbd1; font-size: 0.86em; }
.footer-contact-row {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr); gap: 3rem;
  padding: 2rem 0; border-top: 1px solid #283955; border-bottom: 1px solid #283955;
}
.footer-address { font-style: normal; }
.footer-address ul { display: grid; grid-template-columns: 1.45fr 0.65fr 0.65fr 1fr; gap: 1rem; }
.footer-address a { display: flex; flex-direction: column; gap: 0.12rem; text-decoration: none; }
.footer-address a > span:not(.footer-contact-label) { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.footer-contact-label { color: #95a4bf; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-registration p { margin: 0; }
.footer-registration strong { color: #fff; font-size: 1.05rem; }
.footer-registration-note { max-width: 28rem; margin-top: 0.35rem !important; color: #aebbd1; font-size: 0.82rem; }
.footer-registration-links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 0.45rem !important; }
.footer-contact-row-prelaunch { grid-template-columns: 1fr; }
.footer-prelaunch-note { max-width: 48rem; }
.footer-prelaunch-note h2 {
  margin: 0 0 0.5rem; color: #fff; font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.06em; line-height: 1.35; text-transform: uppercase;
}
.footer-prelaunch-note p { margin: 0 0 0.6rem; }
.footer-utility {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem;
  align-items: end; padding: 1.35rem 0 1.8rem; color: #99a8c1; font-size: 0.82rem;
}
.footer-corporate p { margin: 0 0 0.25rem; }
.footer-corporate .footer-signature { font-style: italic; color: #c5d3ea; font-size: 0.92rem; margin: 0 0 0.5rem; letter-spacing: 0.01em; }
.footer-languages { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem 1rem; }
.footer-languages span[aria-current="page"] { color: #fff; font-weight: 800; }
.footer-build {
  grid-column: 1 / -1; margin: 0; color: #94a3bd; font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.site-footer-dynamic .footer-locale { display: none; }
html[lang="en"] .site-footer-dynamic .footer-locale[data-footer-lang="en"],
html[lang="fr"] .site-footer-dynamic .footer-locale[data-footer-lang="fr"],
html[lang="es"] .site-footer-dynamic .footer-locale[data-footer-lang="es"] { display: block; }
.site-footer-dynamic .footer-utility { padding-bottom: 0.6rem; }
.footer-build-dynamic { padding-bottom: 1.8rem; }
.footer-build [data-footer-build-lang] { display: none; }
html[lang="en"] .footer-build [data-footer-build-lang="en"],
html[lang="fr"] .footer-build [data-footer-build-lang="fr"],
html[lang="es"] .footer-build [data-footer-build-lang="es"] { display: inline; }

@media (max-width: 1099px) {
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .footer-contact-row { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 719px) {
  .footer-inner { padding: 0 1rem; }
  .footer-action { margin: 0 -1rem; padding: 1.6rem 1rem; }
  .footer-directory { grid-template-columns: 1fr; gap: 0; padding: 1.4rem 0; }
  .footer-column { padding: 1.2rem 0; border-bottom: 1px solid #283955; }
  .footer-column:last-child { border-bottom: 0; }
  .footer-column h2 { margin-bottom: 0.45rem; }
  .footer-column li + li { margin-top: 0; }
  .footer-column li > a, .footer-pending { min-height: 44px; align-items: center; padding: 0.55rem 0; }
  .footer-brand-row { align-items: flex-start; flex-direction: column; padding: 1.65rem 0 1.2rem; }
  .footer-contact-row { padding: 1.5rem 0; }
  .footer-address ul { grid-template-columns: 1fr; gap: 0.9rem; }
  .footer-address a { min-height: 44px; justify-content: center; }
  .footer-utility { grid-template-columns: 1fr; align-items: start; }
  .footer-languages { justify-content: flex-start; }
}

@media (max-width: 619px) {
  .footer-action { align-items: stretch; flex-direction: column; gap: 1.25rem; }
  .footer-actions { flex-direction: column; }
  .footer-button { width: 100%; white-space: normal; text-align: center; }
}

/* Neighbourhood proof photos in the Location section */
.hood-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.hood-photos figure { margin: 0; }
.hood-photos img { width: 100%; height: 210px; object-fit: cover; border-radius: var(--radius); }
.hood-photos figcaption { color: var(--muted); font-size: 0.88rem; margin-top: 0.45rem; }

/* Group bookings page */
.steps { max-width: 46rem; margin: 0; padding-left: 1.3rem; }
.steps li { margin-bottom: 0.9rem; line-height: 1.6; }
.req { color: #c0392b; font-weight: 700; }
.muted { color: var(--muted); }
.info p { margin: 0; line-height: 1.6; }
.group-nudge {
  max-width: 44rem; margin: -1rem 0 1rem; padding: 0.8rem 1rem;
  background: #e8f0fe; border: 1px solid #a9c4f0; border-radius: 10px;
  color: #16386e; font-size: 0.95rem;
}
.group-nudge a { color: #16386e; font-weight: 700; }

/* Instant group quote */
.quote-card {
  margin-top: 1.2rem; padding: 1.2rem 1.3rem; border-radius: var(--radius);
  background: #fff; border: 2px solid var(--navy); box-shadow: 0 4px 20px rgba(16,32,60,0.10);
}
.quote-card h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.quote-card .ref { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; }
.quote-card .big { font-size: 2rem; font-weight: 800; color: var(--navy); margin: 0.6rem 0 0.1rem; line-height: 1.1; }
.quote-card .breakdown { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.9rem; }
.quote-card .flag { background: #fff3cd; border: 1px solid #e6c766; color: #6b5200; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.88rem; margin-bottom: 0.9rem; }
.quote-card .cta-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.quote-card .wa { background: #25d366; color: #062b16; font-weight: 800; padding: 0.7rem 1.1rem; border-radius: 10px; text-decoration: none; }
.quote-card .small { font-size: 0.82rem; color: var(--muted); margin-top: 0.8rem; }

/* 2026-08-15 review: hero hierarchy — one primary, WhatsApp demoted to a text line */
.hero-alt { margin-top: 0.9rem; font-size: 0.95rem; color: #cbd6ea; }
.hero-alt a { color: #fff; font-weight: 700; }
@media (max-width: 560px) { .hero .actions { flex-direction: column; align-items: stretch; } }

/* 2026-08-15 review: cleanliness commitment band */
.standard { background: #fff; border-bottom: 3px solid var(--yellow); padding: 2.5rem 0; }
.standard-eyebrow { color: var(--muted); font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.4rem; }
.standard h2 { max-width: 34rem; }
.standard-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.standard-list li { color: var(--muted); font-size: 0.95rem; padding-left: 1.6rem; position: relative; }
.standard-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.standard-proof { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid #e4e9f2;
  color: var(--muted); font-size: 0.9rem; }

/* 2026-08-15 review: mobile header — collapse instead of wrapping into six rows */
@media (max-width: 860px) {
  .nav { padding: 0.6rem 1rem; flex-wrap: nowrap; }
  .brand { font-size: 1rem; white-space: nowrap; }
  .nav-links a:not(.cta):not(.login) { display: none; }
  /* The collapsed row is a TRIAD: brand + Check-in pill + Reserve CTA.
     Login and the language <select> hide (both reachable in the footer) —
     five nowrap controls measured ~600px against a 360px phone and dragged
     the page into horizontal scroll (UX audit 2026-08-15). */
  .nav-links a.login, .nav-links .lang-switch { display: none; }
  .nav-links { gap: 0.5rem; flex-wrap: nowrap; }
  .nav-links a.cta { padding: 0.5rem 0.8rem; font-size: 0.9rem; }
  .brand { font-size: 0.9rem; }
}

/* Phones proper: the full wordmark + check-in pill + Reserve CTA measured
   ~490px of real rendered width against a 360px screen — the brand collapses
   to its badge, leaving a triad that actually fits (measured ≈330px). */
@media (max-width: 560px) {
  .nav .brand { font-size: 0; }
  .nav .brand .badge { font-size: 0.8rem; }
}

/* 2026-08-15 review: factual book-direct nudge by the reserve form */
.direct-perk { color: var(--muted); font-size: 0.95rem; margin: 0.4rem 0 0.8rem; }
.direct-perk strong { color: inherit; }

/* 2026-08-15 founder: online check-in must be PROMINENT in the phone header.
   The mobile collapse hides plain nav links; the check-in link (any locale)
   survives as an outlined pill. Attribute selectors so all ~50 hand-written
   headers inherit without edits. */
@media (max-width: 860px) {
  .nav-links a[href="/checkin/"],
  .nav-links a[href="/fr/enregistrement/"],
  .nav-links a[href="/es/enregistro/"] {
    display: inline-block !important;
    border: 2px solid var(--yellow); border-radius: 999px;
    padding: 0.35rem 0.7rem; font-weight: 800; font-size: 0.85rem;
    white-space: nowrap;
  }
}

/* Guided check-in journey (Wave "Journey-1", 2026-08-20 SPEC-guided-checkin-journey.md).
   Opening screen, the persistent stepper chrome (checkin/index.html and its FR/ES
   twins, and checkin/done/index.html's steps 3-5 + completion handoff), and the
   completion-handoff status cards. Kept compact on purpose: §4.11 requires the
   primary action reachable without scrolling past the fold at 375px. */
.j-opening { max-width: 46rem; }
.j-opening .j-list { list-style: none; margin: 1.1rem 0 1.3rem; padding: 0; }
.j-opening .j-list li { position: relative; padding: 0.5rem 0 0.5rem 2.3rem; border-bottom: 1px solid #e3e6ea; font-size: 0.94rem; line-height: 1.4; }
.j-opening .j-list li:last-child { border-bottom: none; }
.j-opening .j-list li b { display: block; }
.j-opening .j-list li span.j-desc { color: var(--muted); font-size: 0.88rem; }
.j-opening .j-num {
  position: absolute; left: 0; top: 0.5rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 800; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

.j-stepper { margin: 0 0 1.4rem; max-width: 620px; }
.j-stepper-track { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.j-stepper-track .j-seg { flex: 1 1 0; height: 6px; border-radius: 999px; background: #dde2ea; }
.j-stepper-track .j-seg.done, .j-stepper-track .j-seg.current { background: var(--navy); }
.j-stepper-label { font-weight: 800; font-size: 0.98rem; margin-bottom: 0.25rem; }
.j-stepper-why { color: var(--muted); font-size: 0.88rem; margin-bottom: 0; }

.j-next-preview {
  margin-top: 1rem; padding: 0.75rem 1rem; background: #eef2ff; border: 1px solid #ccd6f7;
  border-radius: 10px; color: #29335c; font-size: 0.88rem; line-height: 1.5;
}
.j-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 1rem; }
.j-continue-later { color: var(--muted); font-size: 0.88rem; text-decoration: underline; }
.j-back { margin: 0 0 0.8rem; font-size: 0.9rem; }
.j-back a { color: var(--muted); text-decoration: none; }
.j-back a:hover { color: var(--text); }

.j-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 1.3rem 0; }
.j-card { background: var(--card); border: 1px solid #e3e6ea; border-radius: 12px; padding: 0.85rem 1rem; }
.j-card .j-card-label { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; }
.j-card .j-card-value { font-weight: 800; font-size: 0.98rem; }
.j-card .j-card-value.j-ok { color: #166534; }
.j-card .j-card-value.j-pending { color: #8a5300; }
.j-card .j-card-value.j-bad { color: #991b1b; }
.j-card a.j-card-value { text-decoration: none; }
.j-card .j-card-sub { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; font-weight: 400; }

@media (max-width: 560px) {
  .j-opening h1 { font-size: 1.4rem; margin-top: -1.6rem; } /* offsets .legal's shared 3.5rem top pad — §4.11 primary action above the fold */
  .j-opening .lead { font-size: 0.9rem; margin-bottom: 1.1rem; }
  .j-opening .j-list { margin: 0.6rem 0 0.9rem; }
  /* Title + description flow as ONE wrapped line on narrow screens instead of
     two stacked lines — the single biggest lever on total list height. */
  .j-opening .j-list li { padding: 0.32rem 0 0.32rem 1.9rem; font-size: 0.86rem; line-height: 1.35; }
  .j-opening .j-list li b { display: inline; }
  .j-opening .j-list li b::after { content: " — "; font-weight: 400; }
  .j-opening .j-list li span.j-desc { font-size: 0.86rem; }
  .j-opening .j-num { width: 1.3rem; height: 1.3rem; font-size: 0.72rem; top: 0.34rem; }
  .j-opening #j-start { padding: 0.7rem 1.4rem; font-size: 1rem; }
  .j-opening .form-note { font-size: 0.8rem; margin-top: 0.6rem; }
  .j-stepper-track .j-seg { height: 5px; }
  .j-cards { grid-template-columns: 1fr; }
}

/* Seasonal & Holiday feature sections — activated only when corresponding moment/season is scheduled */
#fright-stories,
#thanksgiving-harvest {
  display: none !important;
}

/* 101 Ways to Die in a Hostel Book Series Section */
.book-series-section {
  padding: 4.5rem 0;
  background: linear-gradient(180deg, #0b1120 0%, #060913 100%);
  color: #f1f5f9;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.book-series-section .container {
  max-width: 1120px;
}
.book-series-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 179, 1, 0.12);
  border: 1px solid rgba(245, 179, 1, 0.35);
  color: var(--yellow);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.book-series-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.book-series-section p.lead {
  color: #94a3b8;
  max-width: 46rem;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.book-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.book-card:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 179, 1, 0.15);
}
.book-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}
.book-num {
  font-weight: 800;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.book-city {
  color: #94a3b8;
  font-weight: 600;
}
.book-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.book-tagline {
  font-style: italic;
  font-size: 0.88rem;
  color: #cbd5e1;
  margin-bottom: 0.75rem;
  line-height: 1.45;
}
.book-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.55;
  margin-bottom: 1.25rem;
  flex: 1;
}
.book-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.book-action-btn:hover {
  background: var(--yellow);
  color: var(--navy-deep);
  border-color: var(--yellow);
}
.book-series-cta {
  background: rgba(15, 23, 42, 0.95);
  border: 1px dashed rgba(245, 179, 1, 0.4);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.book-series-cta h3 {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}
.book-series-cta p {
  color: #94a3b8;
  font-size: 0.92rem;
  margin: 0;
}
.btn-series {
  background: var(--yellow);
  color: var(--navy-deep);
  font-weight: 800;
  white-space: nowrap;
}
.btn-series:hover {
  background: #ffc425;
}
@media (max-width: 640px) {
  .book-series-cta {
    flex-direction: column;
    text-align: center;
  }
  .btn-series {
    width: 100%;
    text-align: center;
  }
}

/* Group Stays Expanded Homepage Section */
.hero-group-link { margin-top: .75rem; font-size: .95rem; }
.hero-group-link a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: inherit; }

.group-band { background: var(--navy); color: #fff; padding: 4.5rem 0; }
.group-band h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: .25rem 0 .75rem; }
.group-eyebrow { color: var(--yellow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; margin: 0; }
.group-lede { max-width: 62ch; color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.6; }

.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 2rem 0; }
.group-tile { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.25rem; }
.group-tile h3 { color: #fff; font-size: 1.05rem; margin: 0 0 .4rem; }
.group-tile p { color: rgba(255,255,255,.8); margin: 0; line-height: 1.5; font-size: .95rem; }

.group-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.group-steps li { counter-increment: s; display: grid; gap: .25rem; padding-left: 2.75rem; position: relative; }
.group-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); color: var(--navy-deep); font-weight: 800; display: grid; place-items: center; }
.group-steps span { color: rgba(255,255,255,.78); font-size: .93rem; line-height: 1.5; }

.group-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.group-btn-ghost { border: 1.5px solid rgba(255,255,255,.6); color: #fff; background: transparent; }
.group-btn-ghost:hover { background: rgba(255,255,255,.1); }
.group-note { color: rgba(255,255,255,.7); font-size: .88rem; }

@media (max-width: 600px) {
  .group-band { padding: 3rem 0; }
  .group-cta .btn { flex: 1 1 100%; text-align: center; }
}