/* ═══════════════════════════════════════════════════════════════════════
   SHARED HEADER + STICKY BAR — loaded on every page, homepage included.

   Everything here is scoped under .mast or .sticky and carries literal
   values rather than reading the palette variables, because the homepage
   and the inner pages define those variables differently. Scoping is what
   lets one header render identically on both without either stylesheet
   having to know about the other.
   ═══════════════════════════════════════════════════════════════════════ */

/* The homepage stylesheet sets font-family:var(--f-body)!important on several
   header elements, and --f-body resolves to a face that is not loaded — so the
   brand fell back to a system font on the homepage while inner pages, which do
   not load that stylesheet, rendered in Inter. Same header, two typefaces.
   !important here so one definition holds on both. */
.mast, .mast *, .sticky, .sticky *{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  box-sizing:border-box}

/* ── bar ─────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.965);
  border:0;border-bottom:1px solid rgba(31,28,26,.07);
  box-shadow:0 5px 20px rgba(24,20,18,.05);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px)}

.mast .portal-header-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  min-height:96px !important;display:flex !important;align-items:center;gap:26px}

/* ── brand ───────────────────────────────────────────────────────── */
.mast .portal-brand{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;color:#24211F;flex:0 0 auto;min-width:0}

/* The template sizes the logo mark five times over with !important —
   50px, 44px, 42px, 41px, 38px. Without matching weight the homepage got
   the template's size and inner pages got this one, so the same header
   rendered with two different logos. */
.mast .portal-brand-photo{
  width:58px !important;height:58px !important;flex:0 0 58px !important;
  border-radius:15px !important;overflow:visible !important;position:relative !important;
  background:#fff !important;padding:0 !important;
  box-shadow:0 9px 24px rgba(19,23,28,.14) !important}
.mast .portal-brand-photo img{
  width:100% !important;height:100% !important;object-fit:cover !important;
  display:block !important;border-radius:15px !important}
.mast .portal-brand-photo::after{
  content:"";position:absolute;right:-4px;bottom:-4px;
  width:15px;height:15px;border-radius:50%;
  background:#FF5533;box-shadow:0 0 0 3px #fff}

/* ── full brand name, never truncated ─────────────────────────────
   Written with .portal-brand-v20 in the selector and with !important,
   which is unusual here and deliberate.

   The homepage also loads home.css, and that file sets the brand type at
   14px, 14.5px, 15px, 15.5px and 17px in five separate places — most of
   them !important. Inner pages do not load it, which is why the same
   header rendered differently on the homepage: shorter text, and a
   200px cap that ellipsised the name.

   Matching specificity (0,3,0) and weight is the only way one header
   definition can win on both. max-width is reset explicitly because a
   cap left unset is not a cap overridden.                              */
.mast .portal-brand-v20 .portal-brand-copy,
.mast .portal-brand-copy{
  display:flex !important;flex-direction:column;line-height:1 !important;
  min-width:0 !important;max-width:none !important;overflow:visible !important}

.mast .portal-brand-v20 .portal-brand-copy strong,
.mast .portal-brand-copy strong{
  display:block !important;
  font-size:19px !important;line-height:1.08 !important;font-weight:800 !important;
  letter-spacing:-.03em !important;color:#17191d !important;
  white-space:nowrap !important;
  max-width:none !important;overflow:visible !important;text-overflow:clip !important}

.mast .portal-brand-v20 .portal-brand-copy small,
.mast .portal-brand-copy small{
  display:block !important;
  margin-top:5px !important;font-size:10.5px !important;line-height:1 !important;
  font-weight:700 !important;letter-spacing:.1em !important;
  text-transform:uppercase !important;color:#6c727b !important;
  white-space:nowrap !important;
  max-width:none !important;overflow:visible !important;text-overflow:clip !important}

/* ── nav ─────────────────────────────────────────────────────────── */
.mast .portal-nav{
  display:none;align-items:center;gap:2px;margin-left:auto;min-width:0}
@media (min-width:1000px){ .mast .portal-nav{display:flex} }
.mast .portal-nav a{
  position:relative;padding:10px 13px;border:0;border-radius:9px;
  color:#57534E;font-size:14px;font-weight:600;line-height:1;
  letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  transition:.18s ease}
.mast .portal-nav a:hover{background:#F8F6F3;color:#24211F}
.mast .portal-nav a[aria-current]{background:#FFF1EC;color:#E34A2C;font-weight:700}
.mast .portal-nav a[aria-current]:after{display:none}

/* ── cta ─────────────────────────────────────────────────────────── */
.mast .portal-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:1000px){ .mast .portal-header-actions{margin-left:14px} }

/* Same reason as the logo: the template sets this button's height, padding
   and type size with !important in four places. */
.mast .portal-ticket-btn{
  flex:0 0 auto;white-space:nowrap;
  display:inline-flex !important;align-items:center;justify-content:center;gap:9px !important;
  min-height:48px !important;padding:0 20px !important;
  border:0 !important;border-radius:11px !important;
  background:#FF5533 !important;color:#fff !important;
  font-size:14px !important;font-weight:700 !important;line-height:1 !important;
  letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  box-shadow:0 8px 18px rgba(255,85,51,.20) !important;
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease}
.mast .portal-ticket-btn:hover{
  background:#EA4C2C !important;color:#fff !important;transform:translateY(-1px);
  box-shadow:0 11px 24px rgba(255,85,51,.26) !important}
.mast .portal-ticket-btn span[aria-hidden]{font-size:1.05em;line-height:1}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1099px){
  .mast .portal-header-inner{min-height:86px !important;gap:16px;padding:0 20px}
  .mast .portal-brand-photo{width:52px !important;height:52px !important;flex-basis:52px !important}
  .mast .portal-brand-v20 .portal-brand-copy strong,
  .mast .portal-brand-copy strong{font-size:17.5px !important}
}
@media (max-width:760px){
  .mast .portal-header-inner{min-height:74px !important;gap:12px;padding:0 15px}
  .mast .portal-brand-photo{width:46px !important;height:46px !important;flex-basis:46px !important;border-radius:13px !important}
  .mast .portal-brand-photo img{border-radius:13px !important}
  .mast .portal-brand-v20 .portal-brand-copy strong,
  .mast .portal-brand-copy strong{font-size:16px !important;letter-spacing:-.035em !important}
  .mast .portal-brand-v20 .portal-brand-copy small,
  .mast .portal-brand-copy small{font-size:9px !important;letter-spacing:.08em !important}
  .mast .portal-ticket-btn{min-height:42px !important;padding:0 14px !important;font-size:13px !important;gap:6px !important}
  .mast .portal-ticket-btn span[aria-hidden]{display:none}
}
@media (max-width:420px){
  /* brand name stays complete; the tagline is what gives way */
  .mast .portal-brand-v20 .portal-brand-copy small,
  .mast .portal-brand-copy small{display:none !important}
  .mast .portal-brand-v20 .portal-brand-copy strong,
  .mast .portal-brand-copy strong{font-size:15px !important}
  .mast .portal-brand-photo{width:42px !important;height:42px !important;flex-basis:42px !important}
  .mast .portal-ticket-btn{padding:0 12px !important;font-size:12.5px !important}
}

/* ═══ STICKY BOOKING BAR — mobile, every page ══════════════════════════
   Third attempt, and the reasoning is worth writing down.

   Plain white disappeared: the page behind it is #F8FAFC on the homepage
   and #eef3f6 on inner pages, so a white card on near-white had no edge and
   nothing to pull a thumb towards. Going dark fixed the contrast but looked
   borrowed — a black bar under an orange site reads as a cookie notice.

   So the separation comes from the orange, not from darkness: a warm
   cream-to-peach card, a solid orange rule down the left, an orange
   hairline border and a warm shadow. Same family as the header CTA and the
   accent-soft panels already in the design, and it sits off the background
   without fighting it. Dark text on a light card also keeps contrast
   comfortably above AA, which white-on-orange does not.

   On !important: the original template ships `.sticky{display:grid
   !important}` and `.sticky-copy b{font-size:13px !important}`, and an
   !important declaration beats a plain one however specific. Only the
   properties that actually collide are matched in kind.
   ═══════════════════════════════════════════════════════════════════════ */
.sticky.mobile-ticket-bar{
  position:fixed !important;
  left:0 !important;right:0 !important;bottom:0 !important;
  z-index:120 !important;
  display:none !important;
  grid-template-columns:none !important;
  padding:0 10px calc(10px + env(safe-area-inset-bottom)) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  pointer-events:none}
@media (max-width:860px){
  .sticky.mobile-ticket-bar{display:block !important} }

.mobile-ticket-bar .sticky-card{
  pointer-events:auto;
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:11px 13px 11px 15px;
  border-radius:18px;
  max-width:100%;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6F1 52%,#FFEDE4 100%);
  border:1px solid rgba(255,85,51,.42);
  box-shadow:
    0 1px 2px rgba(120,52,28,.06),
    0 10px 24px rgba(160,70,38,.16),
    0 22px 46px rgba(90,40,22,.13);
  text-decoration:none;color:#24211F;
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease;
  animation:smb-rise .44s cubic-bezier(.22,.9,.3,1) both,
            smb-ring 2.6s ease-out .8s 2}
.mobile-ticket-bar .sticky-card:active{
  transform:translateY(1px);
  border-color:rgba(255,85,51,.68);
  box-shadow:
    0 1px 2px rgba(120,52,28,.06),
    0 6px 16px rgba(160,70,38,.18),
    0 14px 30px rgba(90,40,22,.14)}

/* solid orange rule down the left, the same gradient as the header CTA */
.mobile-ticket-bar .sticky-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,#FF8A5E 0%,#FF5533 52%,#E03A16 100%)}

@keyframes smb-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}}
@keyframes smb-ring{
  0%  {box-shadow:0 1px 2px rgba(120,52,28,.06), 0 10px 24px rgba(160,70,38,.16), 0 22px 46px rgba(90,40,22,.13)}
  35% {box-shadow:0 0 0 5px rgba(255,85,51,.15), 0 10px 24px rgba(160,70,38,.16), 0 22px 46px rgba(90,40,22,.13)}
  100%{box-shadow:0 1px 2px rgba(120,52,28,.06), 0 10px 24px rgba(160,70,38,.16), 0 22px 46px rgba(90,40,22,.13)}}
@media (prefers-reduced-motion:reduce){
  .mobile-ticket-bar .sticky-card{animation:none}}

/* ── thumbnail ───────────────────────────────────────────────────── */
.mobile-ticket-bar .sticky-thumb{
  flex:0 0 56px !important;width:56px !important;height:56px !important;
  display:block;
  border-radius:13px;overflow:hidden;background:#FFE4D8;
  box-shadow:0 0 0 1px rgba(255,85,51,.20), 0 3px 8px rgba(160,70,38,.16)}
.mobile-ticket-bar .sticky-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ── copy ────────────────────────────────────────────────────────── */
.mobile-ticket-bar .sticky-copy{
  flex:1 1 0;min-width:0;max-width:100%;
  display:flex;flex-direction:column;gap:4px;overflow:hidden}

.mobile-ticket-bar .sticky-top{
  display:flex !important;align-items:center;gap:7px;
  min-width:0;overflow:hidden;font-size:inherit}

.mobile-ticket-bar .sticky-badge{
  flex:0 0 auto;display:inline-block !important;
  padding:3px 7.5px;border-radius:999px;
  background:#FF5533;color:#fff !important;
  font-size:9.5px !important;font-weight:800;letter-spacing:.055em;text-transform:uppercase;
  line-height:1.3;white-space:nowrap;
  box-shadow:0 2px 7px rgba(255,85,51,.34)}

.mobile-ticket-bar .sticky-rating{
  display:flex !important;align-items:center;gap:4px;
  min-width:0;flex:0 1 auto;overflow:hidden;
  font-size:10.5px !important;line-height:1.3;color:#8A7A72 !important}
.mobile-ticket-bar .sticky-rating i{flex:0 0 auto}
.mobile-ticket-bar .sticky-rating i{font-style:normal;color:#F0A419;letter-spacing:-.5px;font-size:10px}
.mobile-ticket-bar .sticky-rating b{
  font-weight:800 !important;color:#24211F !important;font-size:10.5px !important;
  display:inline !important;white-space:nowrap}
.mobile-ticket-bar .sticky-rating em{
  font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-ticket-bar .sticky-rating em::before{content:"("}
.mobile-ticket-bar .sticky-rating em::after{content:")"}

.mobile-ticket-bar .sticky-title{
  display:block !important;
  font-size:13px !important;font-weight:700;color:#24211F !important;
  line-height:1.22;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mobile-ticket-bar .sticky-price{
  display:flex !important;align-items:baseline;gap:5px;
  min-width:0;line-height:1;margin-top:0 !important}
.mobile-ticket-bar .sticky-price b{
  display:inline !important;
  font-size:17px !important;font-weight:850;color:#C2410C !important;letter-spacing:-.03em}
.mobile-ticket-bar .sticky-price em{
  font-style:normal;font-size:10.5px !important;color:#8A7A72 !important;white-space:nowrap}

/* ── cta ─────────────────────────────────────────────────────────── */
.mobile-ticket-bar .sticky-cta{
  flex:0 0 auto;
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;
  min-height:48px;padding:0 17px;
  border-radius:13px;
  max-width:46%;
  background:linear-gradient(180deg,#FF6A44 0%,#FF5533 55%,#EE4620 100%);
  color:#fff !important;
  font-size:13.5px !important;font-weight:800;line-height:1;letter-spacing:-.01em;
  white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,
             0 5px 14px rgba(255,85,51,.38)}
.mobile-ticket-bar .sticky-card:active .sticky-cta{
  background:linear-gradient(180deg,#EE4620 0%,#DC3A13 100%)}
.mobile-ticket-bar .sticky-cta-label{
  font-size:13.5px !important;color:#fff !important;display:inline !important}
.mobile-ticket-bar .sticky-cta-arrow{
  font-size:15px !important;line-height:1;color:#fff !important;
  display:inline !important;transform:translateY(-.5px)}

/* ── narrow phones ───────────────────────────────────────────────
   Each step drops the least useful thing rather than squeezing everything:
   the arrow, then the review count, then the thumbnail, then the badge.
   The price and the button never shrink, because they are the two reasons
   the bar exists. */
@media (max-width:440px){
  .sticky.mobile-ticket-bar{padding:0 8px calc(8px + env(safe-area-inset-bottom)) !important}
  .mobile-ticket-bar .sticky-card{gap:10px;padding:10px 10px 10px 13px;border-radius:16px}
  .mobile-ticket-bar .sticky-thumb{
    flex-basis:48px !important;width:48px !important;height:48px !important;border-radius:11px}
  .mobile-ticket-bar .sticky-title{font-size:12px !important}
  .mobile-ticket-bar .sticky-price b{font-size:16px !important}
  .mobile-ticket-bar .sticky-cta{min-height:44px;padding:0 13px;font-size:12.5px !important;gap:5px}
  .mobile-ticket-bar .sticky-cta-label{font-size:12.5px !important}
  .mobile-ticket-bar .sticky-cta-arrow{display:none !important}
  .mobile-ticket-bar .sticky-badge{font-size:9px !important;padding:2.5px 6px}
}
@media (max-width:380px){
  .mobile-ticket-bar .sticky-rating em{display:none !important}   /* the review count */
  .mobile-ticket-bar .sticky-price em{font-size:9.5px !important}
  .mobile-ticket-bar .sticky-cta{padding:0 11px;max-width:42%}
}
@media (max-width:340px){
  .mobile-ticket-bar .sticky-thumb{display:none !important}
  .mobile-ticket-bar .sticky-card{gap:9px;padding:9px 9px 9px 12px}
}
@media (max-width:310px){
  .mobile-ticket-bar .sticky-badge{display:none !important}
}

/* landscape on a phone: the viewport is short, so shrink the whole bar */
@media (max-width:860px) and (max-height:450px){
  .mobile-ticket-bar .sticky-card{padding:7px 10px 7px 12px;gap:9px}
  .mobile-ticket-bar .sticky-thumb{
    flex-basis:40px !important;width:40px !important;height:40px !important}
  .mobile-ticket-bar .sticky-cta{min-height:38px}
  .mobile-ticket-bar .sticky-card{animation:none}
}

/* Keep the page clear of the bar. Measured against the tallest the card
   gets (56px thumb + 22px padding + 2px border) plus the safe-area inset,
   rather than a round number that happens to work on one handset. */
@media (max-width:860px){
  body{padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important}
  body.smb-nobar{padding-bottom:0 !important}
}
@media (max-width:440px){
  body{padding-bottom:calc(94px + env(safe-area-inset-bottom)) !important}
}
@media (max-width:860px) and (max-height:450px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important}
}

/* ══ FOOTER BLURB ══════════════════════════════════════════════════
   The one-line description of the site sat at #aeb3bb on the homepage and
   inherited #aab6c0 on inner pages — legible, but it read as small print
   beside the white column headings. White, so it reads as the statement of
   what this site is.

   Both footers are targeted here because chrome.css is the only stylesheet
   that loads on every page; putting it in one of the two page sheets would
   only fix half the site.
   ═══════════════════════════════════════════════════════════════════════ */
.foot .footer-desc,
.pg-foot .pg-foot-desc{
  color:#ffffff;
  opacity:1}