/* ============================================================
   MORE BOOKINGS — inner-page components ("Midnight Concierge")
   Loaded on generated pages only (homepage uses its own hero).
   Reuses tokens from styles.css :root.
   ============================================================ */

/* ---------- Page hero (lighter than the WebGL homepage hero) ---------- */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(120px,16vw,180px) 0 clamp(48px,7vw,80px);
  border-bottom:1px solid var(--line);
}
.page-hero::before{ /* drifting aurora glow, brand-tinted */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 78% 12%, rgba(95,183,174,.16), transparent 60%),
    radial-gradient(55% 55% at 14% 92%, rgba(217,178,106,.16), transparent 60%),
    linear-gradient(180deg,#0B0E11,#0C1116 60%,var(--bg));
  animation:heroDrift 22s var(--ease) infinite alternate;
}
@keyframes heroDrift{ to{ transform:translate3d(0,-14px,0) scale(1.04); } }
.page-hero__inner{ max-width:820px; }
.page-hero h1{ font-size:clamp(2.2rem,5.2vw,3.6rem); letter-spacing:-.03em; margin:.5rem 0 0; }
.page-hero .lead{ margin-top:1.2rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:.5em; align-items:center;
  font-size:.82rem; color:var(--muted); margin-bottom:1.1rem; }
.breadcrumb a{ color:var(--muted); transition:color .2s; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span[aria-current]{ color:var(--ink-soft); }
.breadcrumb .sep{ color:var(--faint); }

/* ---------- Page layout: content + sticky TOC ---------- */
.page-layout{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem); }
.page-layout.has-toc{ grid-template-columns:minmax(0,1fr) 260px; }
@media (max-width:980px){ .page-layout.has-toc{ grid-template-columns:1fr; } }

.toc{ position:sticky; top:96px; align-self:start; font-size:.92rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2);
  padding:1.2rem 1.3rem; }
.toc h4{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin:0 0 .8rem; font-family:var(--font-body); font-weight:600; }
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; counter-reset:toc; }
.toc a{ color:var(--ink-soft); display:flex; gap:.6em; transition:color .2s; }
.toc a::before{ counter-increment:toc; content:counter(toc,decimal-leading-zero);
  color:var(--faint); font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--gold); }
@media (max-width:980px){ .toc{ position:static; } }

/* ---------- Quick answer (AEO) ---------- */
.quick-answer{ position:relative; background:linear-gradient(160deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:1.5rem 1.6rem; margin:0 0 2rem; box-shadow:var(--shadow-sm); }
.quick-answer .qa-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.5rem; display:flex; align-items:center; gap:.5em; }
.quick-answer p{ margin:0; color:var(--ink-soft); font-size:1.05rem; line-height:1.6; }
.quick-answer p + p{ margin-top:.7rem; }

/* ---------- Key facts table (AEO) ---------- */
.key-facts{ width:100%; border-collapse:collapse; margin:0 0 2rem;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.key-facts caption{ text-align:left; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:600; padding:0 0 .7rem; }
.key-facts th, .key-facts td{ text-align:left; padding:.85rem 1.1rem; border-top:1px solid var(--line);
  font-size:.95rem; vertical-align:top; }
.key-facts tr:first-child th, .key-facts tr:first-child td{ border-top:none; }
.key-facts th{ color:var(--muted); font-weight:500; width:38%; background:var(--bg-2); }
.key-facts td{ color:var(--ink); background:var(--bg-3); }
.key-facts tr:hover td, .key-facts tr:hover th{ background:rgba(217,178,106,.06); }

/* ---------- Prose (page body) ---------- */
.prose{ max-width:68ch; }
.prose > section{ scroll-margin-top:96px; }
.prose h2{ font-size:clamp(1.5rem,2.8vw,2rem); margin:2.6rem 0 .9rem; letter-spacing:-.02em; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.2rem; margin:1.6rem 0 .5rem; }
.prose p{ color:var(--ink-soft); margin:0 0 1rem; line-height:1.7; }
.prose ul, .prose ol{ color:var(--ink-soft); margin:0 0 1.2rem; padding-left:0; list-style:none; display:grid; gap:.7rem; }
.prose ul li{ position:relative; padding-left:1.7rem; line-height:1.6; }
.prose ul li::before{ content:""; position:absolute; left:.2rem; top:.6em; width:7px; height:7px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(217,178,106,.6); }
.prose ol{ counter-reset:p; }
.prose ol li{ position:relative; padding-left:2.2rem; line-height:1.6; counter-increment:p; }
.prose ol li::before{ content:counter(p); position:absolute; left:0; top:-.1em; width:1.5rem; height:1.5rem;
  border-radius:8px; background:rgba(217,178,106,.12); color:var(--gold); font-size:.8rem; font-weight:600;
  display:grid; place-items:center; font-family:var(--font-display); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(217,178,106,.4); }
.prose a:hover{ text-decoration-color:var(--gold); }

/* ---------- Feature/checklist cards inside prose ---------- */
.incl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.4rem 0 1.6rem; }
.incl-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.3rem 1.4rem; }
.incl-card .ic{ width:40px; height:40px; border-radius:10px; background:rgba(95,183,174,.14); color:var(--teal);
  display:grid; place-items:center; margin-bottom:.9rem; }
.incl-card .ic svg{ width:20px; height:20px; }
.incl-card h3{ font-size:1.05rem; margin:0 0 .35rem; }
.incl-card p{ font-size:.92rem; color:var(--muted); margin:0; line-height:1.55; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2)); border:1px solid rgba(217,178,106,.25);
  border-radius:var(--radius-lg); padding:clamp(2.4rem,5vw,3.6rem); margin:clamp(3rem,6vw,5rem) 0 0; box-shadow:var(--shadow); }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(60% 120% at 50% 0%, rgba(217,178,106,.14), transparent 60%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin:0 0 .8rem; }
.cta-band p{ color:var(--ink-soft); max-width:54ch; margin:0 auto 1.6rem; }
.cta-band .btn{ margin:0 .35rem; }

/* ---------- Related services ---------- */
.related{ margin-top:clamp(3rem,6vw,4.5rem); }
.related h2{ font-size:1.4rem; margin-bottom:1.2rem; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.related-card{ display:block; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.4rem; transition:transform .3s var(--ease), border-color .3s; }
.related-card:hover{ transform:translateY(-4px); border-color:rgba(217,178,106,.4); }
.related-card h3{ font-size:1.05rem; margin:0 0 .3rem; display:flex; justify-content:space-between; align-items:center; gap:.5em; }
.related-card h3 .arrow{ color:var(--gold); transition:transform .25s var(--ease); }
.related-card:hover h3 .arrow{ transform:translateX(4px); }
.related-card p{ font-size:.9rem; color:var(--muted); margin:0; line-height:1.5; }

/* ---------- Generic content section wrapper ---------- */
.page-section{ padding:clamp(3rem,6vw,5rem) 0; }
.page-section.alt{ background:var(--bg-2); border-block:1px solid var(--line); }

/* ---------- Stat row (reused on results/about) ---------- */
.minihead{ max-width:720px; margin-bottom:2.2rem; }