/* ============================================================
   Lux Romae · Arrival page
   ----------------------------------------------------------------
   Scope: only "gate → 7th-floor peephole + face check". Then the
   page hands off to /your-stay/ via a closing CTA. No transport
   tips (those live in /get-here/), no apartment-living info
   (those live in /your-stay/).
   ----------------------------------------------------------------
   The standard concierge bar (.lux-cbar) + hero (.lux-hero) are
   loaded from /css/concierge-bar.css for visual consistency with
   the rest of the site. This file styles only the page-specific
   pieces (helpline, scope boundary, gate code, route
   toggle, step cards, face-check card, handoff CTA, print
   layout).
   ============================================================ */

:root {
  --arr-nero: #0a0a0a;
  --arr-nero-c: #151519;
  --arr-oro: #d4af37;
  --arr-oro-c: #e8c968;
  --arr-oro-soft: #f5e7a8;
  --arr-crema: #faf7f0;
  --arr-bianco: #ffffff;
  --arr-bc: #fffdf8;
  --arr-txt: #1a1a1a;
  --arr-rd: #b71c1c;
  --arr-grn: #1b8a3e;
  --arr-line: rgba(10, 10, 10, 0.12);
  --fd: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
}

body {
  background: var(--arr-crema);
  color: var(--arr-txt);
  font-family: var(--fb);
  line-height: 1.55;
}

/* ============================================================
   HELP-LINE — sticky, always visible, never gated
   ============================================================ */
.arr-helpline {
  position: sticky;
  top: 0;
  z-index: 49;
  background: linear-gradient(135deg, var(--arr-oro) 0%, var(--arr-oro-c) 100%);
  color: var(--arr-nero);
  padding: 10px 16px;
  border-bottom: 2px solid var(--arr-nero);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.arr-helpline-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 500;
}
.arr-helpline-icon { font-size: 1.3rem; flex-shrink: 0; }
.arr-helpline-text { flex: 1 1 280px; }
.arr-helpline-text strong { font-weight: 700; }
.arr-helpline a {
  color: var(--arr-nero);
  text-decoration: underline;
  font-weight: 700;
  white-space: nowrap;
}
.arr-helpline a:hover { background: var(--arr-nero); color: var(--arr-oro); padding: 2px 6px; border-radius: 4px; }

/* ============================================================
   WELCOME STRIP — single banner image (SteLux + Logo + FraLux)
   ============================================================ */
.arr-welcome-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px 8px;
  max-width: 880px;
  margin: 0 auto;
}
.arr-welcome-banner {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  border: 2px solid var(--arr-oro);
  background: var(--arr-bianco);
  padding: 10px 14px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.2));
}
@media (max-width: 420px) {
  .arr-welcome-strip { padding: 14px 12px 4px; }
  .arr-welcome-banner { max-width: 280px; padding: 8px 10px; }
}

/* ============================================================
   SECTION CONTAINER
   ============================================================ */
.arr-sections { max-width: 880px; margin: 0 auto; padding: 14px 18px 60px; }
.arr-section { margin: 0; }

/* ============================================================
   DG-024 · INFORMATION BOUNDARY (Get Here ↔ Arrival)
   Replaces the removed LOCKED PLACEHOLDER block: the page is no
   longer gated, so what the guest needs here is orientation, not
   a lock. Text wraps; nothing may exceed the viewport width.
   ============================================================ */
.arr-scope {
  margin: 14px 16px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(232, 201, 104, 0.04) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-left: 4px solid var(--arr-oro);
  border-radius: 12px;
}
.arr-scope-title {
  font-family: var(--fd);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--arr-nero);
  overflow-wrap: anywhere;
}
.arr-scope-body,
.arr-scope-link {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
  overflow-wrap: anywhere;
}
.arr-scope-link { margin-top: 6px; }
.arr-scope-link a { color: var(--arr-oro); font-weight: 600; }
.arr-scope-link a:focus-visible {
  outline: 3px solid var(--arr-oro);
  outline-offset: 2px;
}

/* ============================================================
   PRINT CTA
   ============================================================ */
.arr-print-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--arr-nero);
  color: var(--arr-bianco);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 22px;
  border: 1px solid var(--arr-oro);
}
.arr-print-cta-head { display: flex; align-items: center; gap: 12px; }
.arr-print-cta-icon { font-size: 1.6rem; color: var(--arr-oro); }
.arr-print-cta-title { font-family: var(--fd); font-size: 1.35rem; margin: 0; font-weight: 600; color: var(--arr-oro-c); }
.arr-print-cta-body { font-size: 0.9rem; line-height: 1.55; margin: 0; color: rgba(255, 255, 255, 0.88); }
.arr-print-cta-body strong { color: var(--arr-oro-c); }
.arr-print-btn {
  align-self: flex-start;
  background: var(--arr-oro);
  color: var(--arr-nero);
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-family: var(--fb);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, transform 0.1s;
}
.arr-print-btn:hover { background: var(--arr-oro-c); }
.arr-print-btn:active { transform: scale(0.98); }
.arr-print-btn i { font-size: 1.1rem; }

/* ============================================================
   GATE CODE BOX — large and unmistakable
   ============================================================ */
.arr-gatecode-box {
  background: linear-gradient(135deg, var(--arr-nero) 0%, var(--arr-nero-c) 100%);
  color: var(--arr-bianco);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 0 0 26px;
  text-align: center;
  border: 2px solid var(--arr-oro);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.arr-gatecode-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--arr-oro-c);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.arr-gatecode {
  font-family: 'DM Sans', monospace;
  font-size: 3rem;
  font-weight: 700;
  color: var(--arr-oro);
  letter-spacing: 0.3em;
  margin: 0;
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}
.arr-gatecode-note {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 8px 0 0;
}

/* ============================================================
   ROUTE TOGGLE
   ============================================================ */
.arr-route-toggle {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
  background: var(--arr-bianco);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--arr-line);
}
.arr-route-btn {
  flex: 1;
  padding: 12px 14px;
  border: none;
  background: transparent;
  font-family: var(--fb);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  color: rgba(0, 0, 0, 0.55);
}
.arr-route-btn.is-active {
  background: var(--arr-nero);
  color: var(--arr-oro);
}
.arr-route-btn-num {
  display: inline-block;
  font-family: var(--fd);
  font-size: 1.1rem;
  margin-right: 6px;
  color: var(--arr-oro);
}

/* ============================================================
   STEP CARDS
   ============================================================ */
.arr-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  margin: 0 0 22px;
  align-items: flex-start;
}
@media (min-width: 720px) {
  .arr-step { grid-template-columns: 64px 1fr; gap: 22px; }
}
.arr-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--arr-oro);
  color: var(--arr-nero);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd);
  font-size: 1.8rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
  flex-shrink: 0;
}
@media (min-width: 720px) {
  .arr-num { width: 64px; height: 64px; font-size: 2rem; }
}
.arr-step-body { min-width: 0; }
.arr-action {
  font-family: var(--fd);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 6px 0 10px;
  line-height: 1.35;
  color: var(--arr-nero);
}
.arr-action strong { color: var(--arr-oro); font-weight: 700; }
.arr-code {
  display: inline-block;
  font-family: 'DM Sans', monospace;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--arr-nero);
  color: var(--arr-oro);
  padding: 4px 14px;
  border-radius: 6px;
  letter-spacing: 0.15em;
  margin: 0 4px;
  vertical-align: baseline;
}
.arr-photo {
  margin: 8px 0 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--arr-line);
  background: rgba(0, 0, 0, 0.03);
}
.arr-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.arr-photo-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--arr-oro);
  background: repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.07) 0 12px, transparent 12px 24px);
  text-align: center;
  padding: 18px;
  border: 2px dashed var(--arr-oro);
  border-radius: 8px;
}
.arr-photo-placeholder i {
  font-size: 2.4rem;
  opacity: 0.55;
}
.arr-photo-placeholder-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--arr-oro);
  text-transform: uppercase;
}
.arr-photo-placeholder-desc {
  font-size: 0.86rem;
  color: rgba(0, 0, 0, 0.62);
  max-width: 82%;
  line-height: 1.45;
  font-style: italic;
}
.arr-note {
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.55;
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--arr-oro-c);
}
.arr-warn {
  background: rgba(183, 28, 28, 0.07);
  border-left: 4px solid var(--arr-rd);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.88rem;
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.82);
}
.arr-warn strong { color: var(--arr-rd); }

/* Step 8 — face check */
.arr-step--doorhelp .arr-action { color: var(--arr-rd); }
.arr-step--doorhelp .arr-num { background: var(--arr-rd); color: var(--arr-bianco); }
.arr-doorhelp-card {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--arr-oro);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 10px;
}
.arr-doorhelp-card h4 {
  font-family: var(--fd);
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--arr-nero);
  display: flex;
  align-items: center;
  gap: 8px;
}
.arr-doorhelp-card h4 i { color: var(--arr-oro); }
.arr-doorhelp-card p { font-size: 0.88rem; margin: 0 0 6px; line-height: 1.55; color: rgba(0, 0, 0, 0.78); }
.arr-doorhelp-card p:last-child { margin-bottom: 0; }
.arr-doorhelp-card strong { color: var(--arr-nero); }

/* Welcome step (no number, just an icon) */
.arr-step--welcome .arr-num {
  background: linear-gradient(135deg, var(--arr-grn) 0%, #25d366 100%);
  color: var(--arr-bianco);
  font-size: 1.6rem;
}
.arr-step--welcome .arr-action { color: var(--arr-grn); }
.arr-step--welcome .arr-action strong { color: var(--arr-grn); }

/* Vikey explainer */
.arr-vikey-explain {
  background: var(--arr-bianco);
  border: 1px solid var(--arr-line);
  border-left: 4px solid var(--arr-oro);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 18px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.78);
}
.arr-vikey-explain strong { color: var(--arr-nero); }
.arr-vikey-explain h4 {
  font-family: var(--fd);
  font-size: 1.1rem;
  margin: 0 0 6px;
  color: var(--arr-nero);
}

/* ============================================================
   HANDOFF CTA — the page's end-state: link to /your-stay/
   ============================================================ */
.arr-handoff {
  margin-top: 36px;
  background: linear-gradient(160deg, var(--arr-nero) 0%, var(--arr-nero-c) 100%);
  color: var(--arr-bianco);
  border-radius: 16px;
  padding: 24px 22px 18px;
  border-top: 3px solid var(--arr-oro);
}
.arr-handoff-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
@media (min-width: 640px) {
  .arr-handoff-inner {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
}
.arr-handoff-icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  color: var(--arr-oro);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  border: 1.5px solid var(--arr-oro);
}
.arr-handoff-body { flex: 1; min-width: 0; }
.arr-handoff-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--arr-oro-c);
  text-transform: uppercase;
  margin: 0 0 4px;
  font-weight: 700;
}
.arr-handoff-title {
  font-family: var(--fd);
  font-size: 1.45rem;
  margin: 0 0 4px;
  color: var(--arr-oro-soft);
  font-weight: 600;
}
.arr-handoff-sub {
  font-size: 0.92rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}
.arr-handoff-btn {
  flex-shrink: 0;
  background: var(--arr-oro);
  color: var(--arr-nero);
  border: none;
  border-radius: 10px;
  padding: 14px 22px;
  font-family: var(--fb);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.arr-handoff-btn:hover { background: var(--arr-oro-c); }
.arr-handoff-btn:active { transform: scale(0.98); }
.arr-handoff-sig {
  font-family: var(--fd);
  font-size: 1rem;
  color: var(--arr-oro);
  text-align: center;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  font-style: italic;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.is-hidden { display: none !important; }
[hidden] { display: none !important; }

/* ============================================================
   PRINT HEADER · hidden on screen, shown only in @media print
   ============================================================ */
.arr-print-header { display: none; }

/* ============================================================
   @media print — THE primary physical fallback (A4)
   ============================================================ */
/* Print-only section titles — hidden on screen */
.arr-route-print-title, .arr-shared-print-title { display: none; }

@media print {
  @page { size: A4 portrait; margin: 7mm 9mm 8mm 9mm; }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 9pt;
    line-height: 1.2;
  }

  /* Hide chrome that's not useful on paper */
  .lux-cbar,
  .lux-hero,
  .arr-welcome-strip,
  .arr-print-cta,
  .arr-route-toggle,
  .arr-scope,
  .arr-handoff,
  .arr-vikey-explain,
  script, noscript {
    display: none !important;
  }

  /* Print-only header — logo + brand */
  .arr-print-header {
    display: flex !important;
    align-items: center;
    gap: 4mm;
    padding: 0 0 1.5mm;
    margin: 0 0 2mm;
    border-bottom: 1.5px solid #000000;
    page-break-after: avoid;
  }
  .arr-print-logo {
    width: 10mm;
    height: 10mm;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 2mm;
  }
  .arr-print-header-meta { flex: 1; min-width: 0; }
  .arr-print-brand {
    font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
    font-size: 14pt;
    margin: 0;
    color: #000000 !important;
    letter-spacing: 0.03em;
    line-height: 1.05;
  }
  .arr-print-sub {
    font-size: 8pt;
    margin: 0.5mm 0 0;
    color: #000000 !important;
    font-style: italic;
  }
  /* Helpline — printed prominently at top */
  .arr-helpline {
    position: static !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 1.5px solid #000000 !important;
    padding: 1.8mm 3mm !important;
    box-shadow: none !important;
    page-break-after: avoid;
    margin-bottom: 2mm;
  }
  .arr-helpline a {
    color: #ffffff !important;
    text-decoration: underline !important;
  }
  .arr-helpline-inner { justify-content: flex-start; font-size: 8.5pt; font-weight: 700; }

  /* Layout */
  .arr-sections { max-width: 100% !important; padding: 0 !important; }

  /* Gate code */
  .arr-gatecode-box {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    padding: 1.8mm !important;
    margin: 1.5mm 0 2.5mm !important;
    box-shadow: none !important;
  }
  .arr-gatecode-label { color: #000000 !important; font-size: 7.5pt; }
  .arr-gatecode { color: #000000 !important; font-size: 19pt; text-shadow: none !important; margin: 0.5mm 0 0; }
  .arr-gatecode-note { color: #000000 !important; font-size: 7.5pt; margin: 0.5mm 0 0; }

  /* Steps */
  .arr-step {
    grid-template-columns: 7mm 1fr !important;
    gap: 2.5mm !important;
    margin: 0 0 1.5mm !important;
    page-break-inside: avoid;
  }
  .arr-num {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1.2px solid #000000 !important;
    box-shadow: none !important;
    width: 7mm; height: 7mm;
    font-size: 9pt;
  }
  .arr-step--doorhelp .arr-num { background: #000000 !important; color: #ffffff !important; }
  .arr-step--welcome .arr-num { background: #000000 !important; color: #ffffff !important; }
  .arr-action { color: #000000 !important; font-size: 11pt; margin: 0 0 1.5mm; line-height: 1.25; }
  .arr-action strong { color: #000000 !important; text-decoration: underline; }
  .arr-step--doorhelp .arr-action,
  .arr-step--welcome .arr-action { color: #000000 !important; }
  .arr-code {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1.5px solid #000000 !important;
    font-size: 12pt;
    padding: 0 5px;
  }
  .arr-photo {
    border: 1px solid #000000 !important;
    max-width: 55mm;
    margin: 1mm 0 1.5mm !important;
  }
  /* Show placeholder boxes in print so guests/owner see WHERE the
     photos will go. When real <img> tags replace them, photos
     print at the same dimensions automatically. */
  .arr-photo-placeholder {
    display: flex !important;
    border: 1px dashed #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 2mm !important;
    aspect-ratio: 3 / 4;
    gap: 1mm !important;
  }
  .arr-photo-placeholder i { color: #000000 !important; opacity: 0.6; font-size: 10pt !important; }
  .arr-photo-placeholder-label {
    color: #000000 !important; font-size: 6pt !important;
    font-weight: 700; letter-spacing: 0.12em;
  }
  .arr-photo-placeholder-desc {
    color: #000000 !important; font-size: 7pt !important;
    max-width: 95% !important; font-style: italic; line-height: 1.2;
  }
  .arr-note {
    font-size: 8.5pt;
    color: #000000 !important;
    border-left: 1.5px solid #000000 !important;
    padding-left: 2mm;
    margin: 1mm 0 0 !important;
  }
  .arr-warn {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    border-left: 3px solid #000000 !important;
    padding: 1.5mm 2mm !important;
    font-size: 8.5pt;
    margin: 1mm 0 0 !important;
  }
  .arr-warn strong { color: #000000 !important; }

  /* Face check */
  .arr-doorhelp-card {
    background: #ffffff !important;
    border: 1.5px solid #000000 !important;
    padding: 2mm 2.5mm !important;
    margin: 1.5mm 0 0 !important;
    page-break-inside: avoid;
  }
  .arr-doorhelp-card h4 { color: #000000 !important; font-size: 10pt; margin: 0 0 1mm; }
  .arr-doorhelp-card h4 i { color: #000000 !important; }
  .arr-doorhelp-card p { color: #000000 !important; font-size: 8.5pt; margin: 0 0 1mm; line-height: 1.3; }
  .arr-doorhelp-card p:last-child { margin-bottom: 0; }
  .arr-doorhelp-card strong { color: #000000 !important; }

  /* Expand link URLs next to anchors */
  a[href^="http"]::after,
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #000000 !important;
  }
  .arr-helpline a::after { content: "" !important; }

  /* ---- One complete route per printed page ---- */
  /* Print ONLY the route selected on screen — the other keeps its [hidden]
     attribute, so it does not print. The shared indoor steps follow, giving
     one complete page: main gate → apartment door → peephole, with the
     Lux Romae header on top. To print the other route, select it and reprint. */
  .arr-route-print-title, .arr-shared-print-title {
    display: block !important;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 11pt; font-weight: 700; color: #000000 !important;
    border-bottom: 1.2px solid #000000; margin: 0.8mm 0 1mm; padding-bottom: 0.4mm;
    page-break-after: avoid;
  }
  /* Legal ID-check explainer is screen-only; the printed sheet is the steps */
  .arr-doorhelp-card { display: none !important; }
  /* Small floated photos so all steps fit a single A4 page */
  .arr-step-body { overflow: hidden; }
  .arr-photo {
    float: right;
    width: 12mm !important; max-width: 12mm !important;
    margin: 0 0 0.6mm 1.8mm !important;
  }
  /* Empty photo slots: a tiny marker only, no bulky caption on paper */
  .arr-photo-placeholder { padding: 0.5mm !important; }
  .arr-photo-placeholder-label, .arr-photo-placeholder-desc { display: none !important; }
  .arr-photo-placeholder i { font-size: 8pt !important; }
  .arr-action { font-size: 8pt; margin: 0 0 0.4mm; line-height: 1.1; }
  .arr-note, .arr-warn { font-size: 6.8pt; margin: 0.3mm 0 0 !important; line-height: 1.12; }
  .arr-warn { padding: 0.6mm 1mm !important; }
  .arr-step { margin: 0 0 0.7mm !important; page-break-inside: avoid; }
  /* Trim the top chrome a touch more */
  .arr-helpline { padding: 1.4mm 2.5mm !important; margin-bottom: 1.5mm; }
  .arr-helpline-inner { font-size: 8pt; }
  .arr-gatecode { font-size: 17pt; }
  .arr-gatecode-box { padding: 1.4mm !important; margin: 1mm 0 2mm !important; }
}

/* ============================================================
   DG-021 · public last-mile map, visual boundary, moved welcome
   ============================================================ */
.arr-public-map{max-width:720px;margin:14px auto 0;padding:0 16px}
.arr-boundary{max-width:720px;margin:20px auto 10px;padding:0 16px;display:flex;align-items:center;gap:10px;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;font-weight:700;line-height:1.15}
.arr-boundary-ic{font-size:1.1rem}
.arr-boundary--public{color:#1b5e20}
.arr-boundary--private{color:#0a0a0a;border-top:1px dashed #d8cfa8;padding-top:16px}
.arr-boundary--private .arr-boundary-ic{color:#b8860b}
.arr-welcome-strip--inline{margin:18px auto;max-width:520px}
@media(max-width:600px){
  .arr-boundary{font-size:1.15rem;margin:16px auto 8px}
  /* keep the emergency help-line compact but never hidden on mobile */
  .arr-helpline-inner{padding:10px 12px}
}
@media print{
  .arr-public-map,.arr-boundary--public{display:none !important}
}

/* ============================================================
   DG-041 · ENGLISH ENTRY ASSISTANT
   ------------------------------------------------------------
   Everything below is scoped to — the marker the
   synchronous head script sets only when the resolved language is
   English. No rule here can reach a non-English guest, and with
   JavaScript off neither marker exists, so the complete legacy page
   renders untouched (with BOTH routes expanded, which is the safer
   failure mode for a guest standing at a gate).

   Palette: the guide's ivory / navy / restrained gold. Gold is used
   for borders and for badge BACKGROUNDS with dark text only — never
   as text on ivory, where it cannot reach AA.
     navy  #122344 on ivory #fbf8f1 .... 14.6:1
     ink   #1a1a1a on ivory ........... 17.4:1
     muted #4a4740 on ivory ............ 8.7:1
     ink   #1a1a1a on gold #d4af37 ..... 8.2:1
     gold  #d4af37 on navy ............. 7.4:1
   ============================================================ */

:root {
  --arren-navy: #122344;
  --arren-navy-dk: #0b1730;
  --arren-ivory: #fbf8f1;
  --arren-ink: #1a1a1a;
  --arren-muted: #4a4740;
  --arren-gold: #d4af37;
  --arren-line: rgba(18, 35, 68, 0.16);
  /* Measured from the live concierge bar by arrival.js; the fallback is the
     bar's own min-height so the first paint is never wrong by much. */
  --arr-cbar-h: 80px;
  --arr-help-h: 0px;
}

/* Blocks that belong to exactly one of the two experiences.
   DG-042 removed the English-only gate these rules used to carry: every
   string the assistant renders now exists in all fifteen locales, so there is
   no "other side" left to hide. */

/* The shared decorative hero delays the one action that matters on a phone. */
@media screen {
  .lux-hero,
  .arr-boundary--private,
  .arr-route-toggle { display: none; }
}

/* ---- route visibility: a class, not [hidden] -------------------------------
   [hidden]{display:none!important} could never be overridden by the print
   stylesheet, which is why the printed sheet used to carry one route only.
   The rule below applies ONLY while scripting is on, so a no-JS guest keeps
   both complete routes. */
html[data-arr-js] [data-route]:not(.is-route-on) { display: none; }

/* ============================================================
   English head — compact by design; no oversized hero
   ============================================================ */
body { background: var(--arren-ivory); }

.arren {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 0;
}
.arren-head { margin: 0 0 16px; }
.arren-eyebrow {
  margin: 0 0 4px;
  font-family: var(--fb);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--arren-muted);
}
.arren-title {
  margin: 0 0 8px;
  font-family: var(--fd);
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--arren-navy);
}
.arren-intro {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--arren-muted);
  max-width: 48ch;
}

/* Once an entrance is chosen the page is an instruction sheet, not an
   introduction: the title stays (the document needs its h1) and shrinks. */
html[data-arr-stage="route"] .arren-eyebrow,
html[data-arr-stage="route"] .arren-intro { display: none; }
html[data-arr-stage="route"] .arren-title { font-size: 1.25rem; margin-bottom: 0; }
html[data-arr-stage="route"] .arren-head { margin-bottom: 10px; }

/* ============================================================
   "Where are you now?" — the first and only question
   ============================================================ */
.arren-where {
  margin: 0 0 12px;
  font-family: var(--fd);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--arren-ink);
}
.arren-choice {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 12px;
  padding: 16px 18px;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid var(--arren-line);
  background: #ffffff;
  color: var(--arren-ink);
  font-family: var(--fb);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.arren-choice:last-of-type { margin-bottom: 0; }
.arren-choice-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--arren-gold);
  color: var(--arren-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.arren-choice-title {
  display: block;
  font-family: var(--fd);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.arren-choice-help {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--arren-muted);
}

/* The recommended entrance is the loudest thing on the screen. */
.arren-choice--primary {
  background: linear-gradient(160deg, var(--arren-navy) 0%, var(--arren-navy-dk) 100%);
  border-color: var(--arren-gold);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(11, 23, 48, 0.22);
  padding: 20px 18px;
}
.arren-choice--primary .arren-choice-help { color: rgba(255, 255, 255, 0.86); }
.arren-choice--alt { border-color: var(--arren-navy); }
.arren-choice--plan {
  border-style: dashed;
  background: transparent;
}
.arren-choice--plan .arren-choice-title { font-size: 1.08rem; }
.arren-choice:hover { box-shadow: 0 10px 26px rgba(11, 23, 48, 0.18); }
.arren-choice:active { transform: scale(0.995); }
.arren-choice[aria-expanded="true"] { border-style: solid; background: #ffffff; }

.arren-secondaries { margin: 14px 0 0; }
.arren-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  background: none;
  font-family: var(--fb);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--arren-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* The access-codes disclosure holds the page's own Vikey explainer, moved
   here by arrival.js — never a second copy of it. */
.arren-codes { margin: 12px 0 0; }
.arren-codes .arr-vikey-explain { margin-top: 0; }

/* ============================================================
   Reach the building — the third choice, collapsed until asked for
   ============================================================ */
#arr-reach {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
@media screen {
  /* Collapsed in the stylesheet, not by script, so the planner is never
     painted and then yanked away. arrival.js opens it by setting
     data-arr-reach on <html> and clearing [hidden] on the panel. */
  #arr-reach { display: none; }
  html[data-arr-reach="open"] #arr-reach { display: block; }
  #arr-reach .arr-boundary--public {
    margin-top: 14px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   Before a choice, the page is the question — not the answer sheet.
   ------------------------------------------------------------
   `main.arr-sections` holds exactly one section, which holds exactly
   one #arrival-guide: the gate code, both routes, the shared indoor
   sequence, the step controls, the print/download panel and the "You're
   in. Now make yourself at home" handoff. None of that is true yet
   while the guest is still telling us where they are — a route-only
   print panel and a completion message underneath an unanswered
   question are simply wrong — so the whole container is collapsed
   rather than emptied. Collapsing the container, not its children, is
   what leaves no residual padding or unexplained whitespace behind.

   Scoped to @media screen, so print still puts every one of them on the
   paper regardless of what the screen was showing.
   ============================================================ */
@media screen {
  html[data-arr-js]:not([data-arr-stage="route"]) .arr-sections { display: none !important; }
}

/* ============================================================
   Help line — compact, and never underneath the concierge bar
   ============================================================ */
@media screen {
  .arr-helpline {
    top: var(--arr-cbar-h, 80px);
    padding: 8px 14px;
    z-index: 45;
  }
  /* A sticky bar that wraps its icon onto its own line and centres four lines of
     text eats a third of a 320px screen. Left-aligned, icon inline, nothing
     removed: the same words, the same two numbers, a third of the height. */
  .arr-helpline-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: left;
    gap: 9px;
    font-size: 0.84rem;
    line-height: 1.35;
  }
  .arr-helpline-icon { font-size: 1rem; align-self: flex-start; margin-top: 1px; }
  .arr-helpline-text { flex: 1 1 auto; min-width: 0; }
}

/* The gate panel reads as a label, not as a shout: the legacy uppercase
   transform is dropped so "Street gate code" arrives exactly as written. */
.arr-gatecode-label {
  text-transform: none;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
}

/* ============================================================
   Route status — "Starting from …" + Change entrance
   ============================================================ */
.arren-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--arren-line);
  border-left: 4px solid var(--arren-gold);
  background: #ffffff;
}
.arren-status-title {
  flex: 1 1 200px;
  margin: 0;
  font-family: var(--fd);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--arren-navy);
}
.arren-status-title:focus-visible { outline: 3px solid var(--arren-navy); outline-offset: 3px; }
.arren-change {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid var(--arren-navy);
  background: #ffffff;
  color: var(--arren-navy);
  font-family: var(--fb);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.arren-change:hover { background: var(--arren-navy); color: #ffffff; }

/* ============================================================
   Guided mode — one instruction at a time, on a phone
   ------------------------------------------------------------
   Steps are hidden with a CLASS, never [hidden], so @media print can
   put every one of them back on the paper.
   ============================================================ */
@media screen {
  html[data-arr-guided] #arrival-guide .arr-step { display: none; }
  html[data-arr-guided] #arrival-guide .arr-step.is-current { display: grid; }
  /* The welcome banner belongs to the final step; arrival.js marks it current
     at the same moment, so it appears with "Welcome home" and not before. */
  html[data-arr-guided] #arrival-guide .arr-welcome-strip { display: none; }
  html[data-arr-guided] #arrival-guide .arr-welcome-strip.is-current { display: flex; }
}

/* The photograph is the evidence: cap its height so the instruction and the
   controls share the screen with it, but never crop it. */
html[data-arr-guided] #arrival-guide .arr-step.is-current .arr-photo {
  border: 0;
  background: none;
  text-align: center;
}
html[data-arr-guided] #arrival-guide .arr-step.is-current .arr-photo img {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 46vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--arr-line);
}

.arren-nav {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 8px -18px 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 248, 241, 0.97);
  border-top: 2px solid var(--arren-navy);
  backdrop-filter: blur(6px);
}
.arren-nav-btn {
  min-width: 92px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--arren-navy);
  background: var(--arren-navy);
  color: #ffffff;
  font-family: var(--fb);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.arren-nav-btn[data-arr-step-nav="prev"] { background: #ffffff; color: var(--arren-navy); }
.arren-nav-btn:disabled { opacity: 0.42; cursor: default; }
.arren-progress { text-align: center; min-width: 0; }
.arren-progress-text {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--arren-ink);
  white-space: nowrap;
}
.arren-progress-bar {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 6px;
  margin: 5px auto 0;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 35, 68, 0.14);
  color: var(--arren-navy);          /* IE/legacy value fill */
  appearance: none;
  -webkit-appearance: none;
}
.arren-progress-bar::-webkit-progress-bar { background: rgba(18, 35, 68, 0.14); border-radius: 999px; }
.arren-progress-bar::-webkit-progress-value { background: var(--arren-navy); border-radius: 999px; }
.arren-progress-bar::-moz-progress-bar { background: var(--arren-navy); border-radius: 999px; }

.arren-viewswitch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
}
.arren-viewswitch .arren-linkbtn { font-size: 0.9rem; }

/* ============================================================
   Secondary actions — print and download, after the route, not before
   ============================================================ */
.arr-print-cta {
  background: #ffffff;
  color: var(--arren-ink);
  border: 1px solid var(--arren-line);
  border-left: 4px solid var(--arren-gold);
  margin-top: 26px;
  padding: 14px 16px;
}
.arr-print-cta-title { font-size: 1.1rem; color: var(--arren-navy); }
.arr-print-cta-icon { color: var(--arren-navy); }
.arr-print-cta-body { color: var(--arren-muted); font-size: 0.86rem; }
.arr-print-cta-body strong { color: var(--arren-ink); }
.arr-print-btn {
  background: var(--arren-navy);
  color: #ffffff;
  min-height: 48px;
}
.arr-print-btn:hover { background: var(--arren-navy-dk); }

/* ============================================================
   Contrast — the reused route content, brought to AA in English
   ------------------------------------------------------------
   The step emphasis, the Get Here link and the welcome heading were
   painted in the brand gold or the brand green on ivory, which read at
   about 2:1 and 4.1:1. The emphasis itself is carried by <strong>, so
   recolouring loses no meaning and no information depends on colour.
   Scoped to English: the legacy pages are left exactly as they were.
   ============================================================ */
.arr-action strong { color: var(--arren-navy); }
.arr-scope-link a { color: var(--arren-navy); }
.arr-step--welcome .arr-action,
.arr-step--welcome .arr-action strong { color: #146b30; }
.arr-note { color: #3c3a34; }

/* The shared planner's Google Maps call to action ships white on Google's
   brand blue, which reads 3.6:1 — below AA for its 14px label. Darkened here
   only, inside the English Arrival planner; the shared component and every
   other page that uses it are untouched, and the defect is recorded as a
   follow-up rather than fixed across pages from inside this task. */
#arr-reach .lmm-cta-maps {
  background: linear-gradient(135deg, #1a5fd0, #1257b8);
  border-color: #1257b8;
}

/* ============================================================
   The day/night control is a display preference, not a travel
   decision: inside the planner it keeps its 44px target and loses
   the weight of the two questions above it.
   ============================================================ */
#arr-reach .lmm-ctl-group:has([data-lmm^="mode:"]) {
  margin-top: 2px;
  opacity: 0.9;
}
#arr-reach .lmm-ctl-group:has([data-lmm^="mode:"]) .lmm-btnrow {
  justify-content: flex-start;
}
#arr-reach .lmm-ctl-group:has([data-lmm^="mode:"]) .lmm-btn {
  flex: 0 0 auto;
  min-width: 0;
  padding: 10px 14px;
  font-size: 0.74rem;
  font-weight: 600;
}
#arr-reach .lmm-ctl-group:has([data-lmm^="mode:"]) .lmm-btn.is-active {
  background: transparent;
  color: var(--arren-navy);
  border-color: var(--arren-navy);
}

/* ============================================================
   Focus, motion, small screens
   ============================================================ */
:is(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--arren-navy);
  outline-offset: 3px;
  border-radius: 6px;
}
.arren-choice--primary:focus-visible,
.arren-nav-btn:focus-visible { outline-color: var(--arren-gold); }

/* Anything scrolled to must clear the concierge bar AND the sticky help line. */
.arren-status,
#arr-reach,
.arren-codes,
#arrival-guide .arr-step {
  scroll-margin-top: calc(var(--arr-cbar-h, 80px) + var(--arr-help-h, 0px) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

@media screen and (max-width: 420px) {
  .arr-helpline { padding: 7px 11px; }
  .arr-helpline-inner { font-size: 0.76rem; gap: 7px; }
  .arren { padding: 12px 12px 0; }
  #arr-reach { padding: 0 12px; }
  .arr-sections { padding-left: 12px; padding-right: 12px; }
  .arren-choice { padding: 14px 14px; }
  .arren-choice--primary { padding: 16px 14px; }
  .arren-choice-title { font-size: 1.12rem; }
  .arren-nav { margin-left: -12px; margin-right: -12px; }
  .arren-nav-btn { min-width: 78px; padding: 12px 10px; font-size: 0.9rem; }
}

/* Nothing may push the document sideways at 320px. */
body { overflow-x: hidden; }
.arren,
.arren-choice,
.arren-status { max-width: 100%; box-sizing: border-box; }
.arren { max-width: 720px; }

/* At desktop widths the whole route stays visible — guided mode is a
   small-screen answer to a small screen, not a philosophy. */
@media screen and (min-width: 768px) {
  /* The head and the route below it share one measure, so the h1, the route
     status and the step cards line up on the same left edge. The address
     choices keep a comfortable reading width inside it. */
  .arren, #arr-reach { max-width: 880px; padding-left: 18px; padding-right: 18px; }
  .arren { padding-top: 22px; }
  .arren-choice { max-width: 640px; }
  .arren-choice--primary { padding: 22px 22px; }
  .arren-choice-title { font-size: 1.35rem; }
}

/* ============================================================
   PRINT — the English page prints MORE than it shows, never less
   ============================================================ */
@media print {
  .arren-head,
  .arren-chooser,
  .arren-status,
  .arren-nav,
  .arren-viewswitch,
  .arren-codes { display: none !important; }
  /* Both complete routes and every guided step reach the paper, whatever the
     screen was showing when Print was pressed. */
  [data-route] { display: block !important; }
  #arrival-guide .arr-step { display: grid !important; }
  .arr-boundary--private { display: flex !important; }
  .arr-route-print-title,
  .arr-shared-print-title { display: block !important; }
  /* The printed sheet is what a guest carries to the gate; it should end
     the way the screen ends. The legacy stylesheet drops the handoff
     because it is a dark gradient panel — so it is printed here in ink
     instead of dropped. */
  .arr-sections { display: block !important; }
  .arr-handoff {
    display: block !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 1.2px solid #000000 !important;
    border-radius: 0 !important;
    margin: 2mm 0 0 !important;
    padding: 1.6mm 2mm !important;
    page-break-inside: avoid;
  }
  .arr-handoff-icon { display: none !important; }
  .arr-handoff-kicker,
  .arr-handoff-title,
  .arr-handoff-sub,
  .arr-handoff-btn,
  .arr-handoff-sig { color: #000000 !important; }
  .arr-handoff-kicker { font-size: 6.5pt; }
  .arr-handoff-title { font-size: 10pt; margin: 0 0 0.6mm; }
  .arr-handoff-sub { font-size: 7.5pt; line-height: 1.2; }
  .arr-handoff-btn {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    padding: 0.6mm 1.5mm !important;
    font-size: 7.5pt;
  }
  .arr-handoff-sig { font-size: 8pt; margin: 1mm 0 0; padding-top: 0.8mm; }
}