/* Golden Experiences. Loads after getaways.css (Bold tokens) and home.css (nav, doors, strips, steps, faqs). */
:root { --res: #1F8A4C; --warn-bg: #FFF4E5; --warn: #8A6D12;
  /* three levels of text: ink for what matters, then two steps of the same ink at lower opacity, so hierarchy reads without extra colours */
  --ink-2: rgba(14,15,14,.74); --ink-3: rgba(14,15,14,.55);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>"); }
.exp .nav-links a[aria-current="page"] { color: var(--gold-txt); }
.exp .hero p .long, .exp .why-head .long { display: none; }
.exp .hero p .short { display: inline; }
.why-head, .opts-sec .sec-head { flex-direction: column !important; align-items: flex-start !important; }
.why-head > div, .opts-sec .sec-head > div { display: flex; flex-direction: column; gap: 10px; }

/* hub hero: a black poster band. The words up top, then the three doors as photo tickets: each one an audience (staying, in port, living here),
   carrying that audience's star tour with its printed price, and filtering the list below when tapped. Photos are shown under their own pixel size. */
.hub-hero.poster { position: relative; overflow: hidden; display: block; background: radial-gradient(120% 90% at 12% 0%, #24261F 0%, var(--ink) 58%); color: #fff; padding: 36px var(--pad) 22px; }
.hub-hero.poster::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.hub-hero-in { position: relative; display: flex; flex-direction: column; gap: 26px; }
.hub-hero-t { display: flex; flex-direction: column; gap: 12px; }
.hub-hero.poster h1 { font-size: 44px; color: #fff; }
.hub-hero.poster p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 560px; }
.hub-hero p .long { display: none; }
/* the island sits in the band's empty right half on a laptop; a phone has no room for it and its hero is
   already tight, so it is left out there rather than shrunk into a smudge */
.hub-map { display: none; }
.hub-map-land { fill: rgba(255,255,255,.035); stroke: rgba(242,185,59,.5); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hub-map-dot .halo { fill: rgba(242,185,59,.16); }
.hub-map-dot .pip { fill: var(--gold); }
.hub-map-dot.on .halo { fill: rgba(242,185,59,.3); }
.hub-map-dot.on .pip { fill: #fff; stroke: var(--gold); stroke-width: 4; }
.tickets { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ticket { position: relative; display: block; width: 100%; height: 200px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; text-align: left; font: inherit; color: #fff; cursor: pointer; background: #1A1B19; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.ticket-img { position: absolute; inset: 0; }
.ticket-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ticket:hover img { transform: scale(1.04); }
.ticket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,14,.04) 38%, rgba(14,15,14,.82) 100%); pointer-events: none; }
.ticket-tag { position: absolute; left: 14px; top: 14px; z-index: 1; box-shadow: 0 6px 18px rgba(14,15,14,.3); }
.ticket-t { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.ticket-q { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ticket-t b { font-size: 22px; line-height: 1.1; color: #fff; }
.ticket-sub { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.8); }
.ticket-sub .long { display: none; }
.ticket[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold), 0 12px 32px rgba(0,0,0,.35); }
.ticket:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 899px) { .ticket-tag { max-width: calc(100% - 28px); height: auto; min-height: 24px; padding: 5px 10px; white-space: normal; line-height: 1.2; font-size: 10px; } }

/* doors as buttons */
.edoors { gap: 10px; }
.edoor { text-align: left; font: inherit; border: 0; cursor: pointer; width: 100%; }
.edoor[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink); }

/* catalogue */
.cat-sec { padding-top: 28px; gap: 18px; }
.cat-head h2 { font-size: 30px; }
.filters { display: flex; flex-direction: column; gap: 12px; }
.cat-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.area-pick { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; }
.area-pick span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.area-pick select { height: 38px; padding: 0 34px 0 14px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 2px var(--ink); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E0F0E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); -webkit-appearance: none; appearance: none; }
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
/* the leads stay full width on a phone; the rest pair up, so the list is five screens instead of ten */
.vcard.feat { grid-column: 1 / -1; }
.vgrid .vcard:not(.feat) .vcard-photo { height: 132px; border-radius: 14px; }
.vgrid .vcard:not(.feat) .vcard-t .h { font-size: 17px; line-height: 1.15; }
/* two lines of description and one line of facts on the narrow card, so every foot is the same height
   and the prices in a pair sit on the same line */
.vgrid .vcard:not(.feat) .vcard-t small { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* two up on a phone there is room for one fact, not two: the area drops out (the photo carries the drive
   time once a hotel is picked) and the deciding fact stays, so the foot is one line and nothing can widen
   the card past its grid track */
.vgrid .vcard:not(.feat) .vcard-facts .vf-where { display: none; }
.vgrid .vcard:not(.feat) .vcard-facts .vf-fact::after { content: none; }
.vgrid .vcard:not(.feat) .vcard-foot { flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 8px; }
.vgrid .vcard:not(.feat) .vcard-p b { font-size: 19px; }
.vgrid .vcard:not(.feat) .vcard-facts { font-size: 11px; }
.vcard { display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.vcard:hover { color: var(--ink); }
.vcard[hidden] { display: none; }
.vcard-photo { position: relative; display: block; height: 210px; border-radius: 18px; overflow: hidden; background: var(--ph-d); box-shadow: 0 1px 2px rgba(14,15,14,.08); transition: box-shadow .35s ease, transform .35s ease; }
.vcard-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,14,0) 60%, rgba(14,15,14,.32) 100%); pointer-events: none; }
.vcard-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vcard:hover .vcard-photo { box-shadow: 0 16px 36px rgba(14,15,14,.16); }
.vcard:hover .vcard-photo img { transform: scale(1.04); }
.vcard-photo .tag { z-index: 1; }
.vcard-photo .tag { position: absolute; left: 12px; bottom: 12px; }
.vcard-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vcard-where { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-txt); }
.vcard-t .h { font-size: 24px; }
.vcard-t small { font-size: 14px; line-height: 1.45; color: var(--muted); }
.vcard-meta { font-size: 12px; font-weight: 700; color: var(--muted); }
/* three facts a guest compares on: length, pickup, children */
.vcard-facts { display: flex; flex-wrap: wrap; gap: 3px 0; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.35; min-width: 0; }
.vcard-facts span { white-space: nowrap; }
.vcard-facts span:not(:last-child)::after { content: "·"; margin: 0 6px; font-weight: 900; opacity: .55; }
.vcard-photo .top-tag { top: 12px; bottom: auto; }
/* the three most-booked tours lead the grid: a taller photo and a bigger name, so twelve equal cards
   stop asking the guest to read all twelve before choosing */
.vcard.feat .vcard-photo { height: 250px; }
.vcard.feat .vcard-t .h { font-size: 27px; }
/* the port chips catch the eye for a moment when the cruise ticket sends someone to them */
.port-chips.flash .chip { animation: chip-flash 1.4s ease 1; }
@keyframes chip-flash { 0%, 100% { box-shadow: none; } 30%, 60% { box-shadow: 0 0 0 4px var(--gold); } }
@media (prefers-reduced-motion: reduce) { .port-chips.flash .chip { animation: none; } }
/* the foot: the price and the one fact that decides it, on a rule, so the number is not another line of grey.
   Still pinned to the bottom of the card so prices line up across a row whatever the title does. */
/* min-width: 0 everywhere down this chain, or the facts line (which never wraps on a phone) would set the card's width and push the grid past the screen */
.vcard-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; margin-top: auto; padding-top: 10px; border-top: 2px solid var(--line); }
.vcard-p { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--muted); flex: none; }
.vcard-p b { color: var(--ink); font-size: 24px; font-weight: 900; font-stretch: 110%; letter-spacing: -.03em; }
.empty { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; border: 2px dashed var(--line); }
.empty b { font-size: 20px; font-weight: 800; }
.empty p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.empty .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hsteps.four .hstep .n { color: var(--gold-txt); }

/* faq + cta */
.faq-grid { display: flex; flex-direction: column; gap: 18px; }
.cta-band { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 12% 0%, #24261F 0%, var(--ink) 58%); color: #fff; padding: 40px var(--pad); }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.cta-band > * { position: relative; }
.cta-in { display: flex; flex-direction: column; gap: 22px; }
.cta-in h2 { font-size: 30px; color: #fff; }
.cta-in p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); max-width: 520px; }
.cta-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cta-call { font-size: 14px; font-weight: 800; color: #fff; text-decoration: underline; }

/* venue page */
.crumbs { display: flex; gap: 8px; padding: 14px var(--pad) 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.crumbs a { color: var(--ink); }
.vhero { display: flex; flex-direction: column; gap: 16px; padding: 12px var(--pad) 8px; }
.vhero-photo { position: relative; height: 260px; border-radius: 20px; overflow: hidden; background: var(--ph-d); }
.vhero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vhero-t { display: flex; flex-direction: column; gap: 10px; }
.vhero-t h1 { font-size: 36px; }
.vhero-t .lead { font-size: 15px; line-height: 1.5; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.fact { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gph { position: relative; height: 72px; border-radius: 12px; overflow: hidden; background: var(--ph); }
.gph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.vbody { display: flex; flex-direction: column; gap: 28px; padding: 16px var(--pad) 90px; }
.vmain { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.opts-sec { display: flex; flex-direction: column; gap: 14px; }
.opts-sec h2 { font-size: 28px; }
.ops { display: flex; flex-direction: column; gap: 10px; }
.op-group { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 4px; }
.op-group b { font-size: 16px; font-weight: 800; }
.op-group small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.op { display: flex; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.op:has(input:checked) { box-shadow: inset 0 0 0 3px var(--ink); }
.op-only { cursor: default; box-shadow: inset 0 0 0 2px var(--ink); }
.op-only input { display: none; }
.op input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 2px 0 0; border-radius: 999px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
.op input:checked { background: var(--ink); box-shadow: inset 0 0 0 4px #fff; }
.op input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.op-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.op-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-name { font-size: 18px; font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.1; }
.op-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.op-hours { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.op-desc { font-size: 14px; line-height: 1.45; color: var(--muted); }
.op-times { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.op-prices { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; }
.op-price { display: flex; flex-direction: column; gap: 1px; }
.op-price b { font-size: 20px; font-weight: 900; font-stretch: 110%; letter-spacing: -.03em; }
.op-price small { font-size: 12px; color: var(--muted); }
.op-price.res b { color: var(--res); }
.op-more { display: none; flex-direction: column; gap: 10px; }
.op:has(input:checked) .op-more { display: flex; }
.op-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.op-notes li { font-size: 13px; line-height: 1.45; color: var(--muted); }
.op-choose { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--alt); }
.op-choose .fixed { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 800; }
.op-choose .fixed small { font-size: 12px; font-weight: 700; color: var(--muted); }
.op-choose-l { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.op-choose-c { display: flex; flex-wrap: wrap; gap: 6px; }
.op-choose-c .chip { height: 34px; font-size: 13px; }
.op[data-expired] { display: none; }

.enq { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: var(--alt); }
.enq-t { display: flex; flex-direction: column; gap: 6px; }
.enq-t b { font-size: 24px; }
.enq-t p { font-size: 14px; color: var(--muted); }
.enq-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.enq-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 2px solid var(--line); }
.enq-list b { font-size: 15px; font-weight: 800; }
.enq-list span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.enq .btn { align-self: flex-start; }

.info-grid { display: flex; flex-direction: column; gap: 18px; }
.ib { display: flex; flex-direction: column; gap: 10px; }
.ib > b { font-size: 18px; font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; }
.ib ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ib li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.ib li svg { margin-top: 2px; }
.ib.inc li svg { color: var(--res); }
.ib.exc li svg { color: var(--muted); }
.ib.warn { padding: 16px 18px; border-radius: 18px; background: var(--warn-bg); }
.ib.warn > b { color: var(--warn); }
.ib.warn li { color: var(--ink); }
.ib.warn li svg { color: var(--warn); }
.ib.go li svg { color: var(--ink); }

.often { display: flex; flex-direction: column; gap: 12px; }
.often .sec-head { flex-direction: row; align-items: baseline; gap: 12px; }
.often .sec-head b { font-size: 22px; }
.often .sec-head small { font-size: 13px; color: var(--muted); }
.pairs { display: flex; flex-direction: column; gap: 10px; }
.pair { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--alt); color: var(--ink); }
.pair:hover { color: var(--ink); }
.pair-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; background: var(--ph); }
.pair-img img { width: 100%; height: 100%; object-fit: cover; }
.pair-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pair-t b { font-size: 15px; font-weight: 800; }
.pair-t small { font-size: 13px; color: var(--muted); }
.pair-p { font-size: 15px; font-weight: 900; font-stretch: 110%; letter-spacing: -.02em; white-space: nowrap; }

/* booking panel */
.panel { display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 22px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 18px 50px rgba(14,15,14,.12); }
.panel-head { display: flex; flex-direction: column; gap: 6px; }
.panel-total { display: flex; align-items: baseline; gap: 10px; }
.panel-total b { font-size: 34px; font-weight: 900; font-stretch: 110%; letter-spacing: -.04em; line-height: 1; }
.panel-total small { font-size: 13px; color: var(--muted); }
.panel-caption { font-size: 13px; line-height: 1.45; color: var(--muted); }
#book { display: flex; flex-direction: column; gap: 16px; }
.pf { display: flex; flex-direction: column; gap: 8px; }
.pf.two { flex-direction: row; gap: 10px; }
.pf.two .pf-f { flex: 1; min-width: 0; }
.pf-f { display: flex; flex-direction: column; gap: 6px; }
.pf-l { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-in { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--ink); background: #fff; }
.pf-in input, .pf-in select { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); -webkit-appearance: none; appearance: none; }
.pf-in input::placeholder { color: var(--muted); font-weight: 600; }
.pf-in select { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E0F0E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right center; padding-right: 22px; }
.pf-hint { font-size: 12px; line-height: 1.45; color: var(--muted); }
/* the panel's own calendar: days that can't be booked are greyed and can't be tapped */
.cal-host { position: relative; }
.date-btn { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; height: 100%; }
.date-btn.empty { color: var(--muted); font-weight: 600; }
.cal { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 31; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(14,15,14,.18), inset 0 0 0 2px var(--ink); }
.cal[hidden] { display: none; }
.cal-title { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-head b { font-size: 15px; font-weight: 800; }
.cal-nav { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--alt); color: var(--ink); font: inherit; font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
.cal-nav:hover { background: var(--line); }
.cal-nav[disabled] { opacity: .3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow span { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.cal-d { height: 38px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cal-d:hover { background: var(--alt); }
.cal-d.today { box-shadow: inset 0 0 0 2px var(--line); }
.cal-d.sel { background: var(--ink); color: #fff; }
.cal-d[disabled] { color: var(--ink); opacity: .22; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 2px; background: transparent; }
.cal-legend { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pf-hint.bad { color: #B42318; font-weight: 700; }
.pf-hint.ok { color: var(--res); font-weight: 700; }
.pf-hint.warn { color: var(--warn); font-weight: 700; }
/* ship days: options and starts that can't get a cruise guest back to the pier in time */
.op.op-noship { opacity: .55; }
.op.op-noship .op-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.op-badge-ship { background: var(--ink); color: #fff; }
.chip.chip-late { opacity: .5; text-decoration: line-through; }
.chip.chip-late small { text-decoration: none; }
.aboard-chips { gap: 8px; }
.link-btn { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--ink); }
.aboard-chips .chip-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.vcard.no-ship { opacity: .5; }
.vcard.no-ship .vcard-photo img { filter: grayscale(1); }
#pf-times .chip { height: 36px; }
#pf-times .chip[disabled] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
#pf-times .chip small { margin-left: 6px; font-weight: 600; opacity: .7; }
.rate-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rate-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.rate-opt:has(input:checked) { box-shadow: inset 0 0 0 3px var(--ink); }
.rate-opt input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 999px; border: 2px solid var(--ink); flex: none; }
.rate-opt input:checked { background: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.rate-opt span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rate-opt b { font-size: 14px; font-weight: 800; }
.rate-opt small { font-size: 11px; color: var(--muted); }
.rate-note { font-size: 12px; line-height: 1.45; color: var(--muted); }
/* the panel's steppers are one row each (label left, buttons right); getaways.css has a stacked .stepper for the quote page, so these say it outright */
.panel .stepper { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.panel .stepper > span { font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.panel .stepper > span:first-child { display: flex; flex-direction: column; gap: 1px; }
.panel .stepper b { font-size: 15px; font-weight: 800; }
.panel .stepper small { font-size: 12px; color: var(--muted); }
.step-c { display: inline-flex; align-items: center; gap: 4px; }
.step-c button { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--alt); color: var(--ink); font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.step-c button:hover { background: var(--line); }
.step-c button[disabled] { opacity: .3; cursor: not-allowed; }
.step-c output { min-width: 28px; text-align: center; font-size: 18px; font-weight: 900; }
.panel .stepper[data-off] { opacity: .45; }
.pf-preview pre { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--alt); font: 600 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
/* the panel's two steps: the booking and its total, then who's booking and the payment */
.bstep { display: flex; flex-direction: column; gap: 16px; }
.bstep[hidden] { display: none; }
.step-back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.step-back svg { transform: rotate(180deg); }
.step-back:hover { text-decoration: underline; }
.sum { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--alt); font-size: 13px; line-height: 1.45; color: var(--ink-2, var(--ink)); }
.sum b { font-size: 15px; font-weight: 800; color: var(--ink); }
.sum:empty { display: none; }
#next-sub:empty { display: none; }
.pf-sub { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.pf-alt { font-size: 13px; line-height: 1.45; text-align: center; color: var(--muted); }
.pf-alt a { text-decoration: underline; color: var(--ink); }
.pf-fine { font-size: 11px; line-height: 1.45; color: var(--muted); text-align: center; }
#cta[disabled] { opacity: .6; cursor: wait; }
.panel .btn-lg { gap: 12px; }

.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--pad); background: #fff; border-top: 2px solid var(--ink); }
.sticky-bar > div { display: flex; flex-direction: column; gap: 1px; }
.sticky-bar b { font-size: 20px; font-weight: 900; font-stretch: 110%; letter-spacing: -.03em; line-height: 1; }
.sticky-bar small { font-size: 12px; color: var(--muted); }
.sticky-bar[hidden] { display: none; }

/* booked page */
.booked { padding: 32px var(--pad) 72px; display: flex; flex-direction: column; gap: 20px; }
.booked-card { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 22px; background: var(--alt); }
.booked .state { display: flex; flex-direction: column; gap: 10px; }
.booked h1 { font-size: 34px; }
.booked p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.bk-dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.bk-dl dt { font-weight: 800; color: var(--muted); }
.bk-dl dd { margin: 0; font-weight: 700; }
.bk-order { font-size: 14px; }
.bk-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .hub-hero.poster { padding: 34px var(--pad) 28px; }
  /* two columns, not an absolutely placed map: the words and the island each own their half, so the coastline
     can never run under the headline whatever the viewport does */
  .hub-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-areas: "text map" "tickets tickets"; align-items: center; gap: 24px 28px; }
  .hub-hero-t { grid-area: text; gap: 14px; max-width: 620px; width: 100%; margin: 0; }
  .hub-hero.poster h1 { font-size: 46px; }
  .hub-hero.poster p { font-size: 16px; max-width: 520px; }
  .hub-map { grid-area: map; display: block; align-self: center; pointer-events: none; }
  .hub-map-svg { display: block; width: 100%; height: auto; }
  .tickets { grid-area: tickets; }
  .hub-hero p .long { display: inline; }
  .hub-hero p .short { display: none; }
  .tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ticket { height: 300px; border-radius: 22px; }
  .ticket-tag { left: 16px; top: 16px; }
  .ticket-t { left: 18px; right: 18px; bottom: 18px; }
  .ticket-t b { font-size: 24px; }
  .ticket-sub { font-size: 14px; }
  .ticket-sub .long { display: inline; }
  .ticket-sub .short { display: none; }
  .exp .hero p .long { display: inline; }
  .exp .hero p .short { display: none; }
  .edoors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-sec { padding: 72px var(--pad) 24px; gap: 28px; }
  .cat-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .cat-head h2 { font-size: 52px; }
  .cat-note { max-width: 440px; font-size: 15px; }
  .filters { flex-direction: row; align-items: center; justify-content: space-between; }
  .cat-chips { overflow: visible; flex-wrap: wrap; margin: 0; padding: 0; }
  .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
  .vcard.feat { grid-column: auto; }
  .vgrid .vcard:not(.feat) .vcard-photo { height: 260px; border-radius: 22px; }
  .vgrid .vcard:not(.feat) .vcard-t .h { font-size: 26px; line-height: 1.1; }
  .vgrid .vcard:not(.feat) .vcard-t small { font-size: 14px; line-height: 1.45; display: block; -webkit-line-clamp: none; overflow: visible; }
  .vgrid .vcard:not(.feat) .vcard-facts .vf-where { display: inline; }
  .vgrid .vcard:not(.feat) .vcard-foot { flex-direction: row; align-items: baseline; gap: 14px; padding-top: 10px; }
  .vgrid .vcard:not(.feat) .vcard-p b { font-size: 24px; }
  .vgrid .vcard:not(.feat) .vcard-facts { font-size: 12px; }
  .vcard.feat .vcard-photo { height: 320px; }
  .vcard.feat .vcard-t .h { font-size: 30px; }
  .vcard-photo { height: 260px; border-radius: 22px; }
  .vcard-t .h { font-size: 26px; }
  .faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; }
  .faq-side .btn { display: inline-flex; align-self: flex-start; margin-top: 8px; }
  .faq-side h2 { font-size: 44px; }
  .cta-band { padding: 80px var(--pad); }
  .cta-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .cta-in h2 { font-size: 44px; max-width: 640px; }
  .cta-in p { font-size: 15px; }
  .cta-btns { align-items: center; flex-direction: row; gap: 20px; }
  .hsteps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .crumbs { padding-top: 22px; }
  .vhero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; padding: 20px var(--pad) 12px; }
  .vhero-photo { height: 400px; border-radius: 24px; }
  .vhero-t h1 { font-size: 56px; }
  .vhero-t .lead { font-size: 17px; }
  .gph { height: 90px; }
  .vbody { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; padding: 32px var(--pad) 96px; }
  .vmain { gap: 44px; }
  .opts-sec h2 { font-size: 36px; }
  .op { padding: 18px 20px; }
  .op-name { font-size: 20px; }
  .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .ib.warn { grid-column: 1 / -1; }
  .panel { position: sticky; top: 20px; padding: 24px; border-radius: 24px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* on a short screen the panel is taller than the window: it scrolls inside itself, and the bottom bar carries the button until the real one is in view */
  .sticky-bar { padding: 10px var(--pad); }
  .sticky-bar > div { flex-direction: row; align-items: baseline; gap: 10px; }
  .booked { max-width: 760px; margin: 0 auto; padding: 56px var(--pad) 96px; }
  .booked h1 { font-size: 44px; }
}
@media (max-width: 899px) {
  .exp .foot-grid .foot-col { display: none; }
}
@media (min-width: 1200px) {
  .hub-hero.poster h1 { font-size: 54px; }
  .ticket { height: 320px; }
  .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* hotel picker (hub) */
.hotel-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: linear-gradient(180deg, #F7F7F3 0%, #EEEEE8 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(14,15,14,.05); }
.hotel-q { position: relative; }
.hotel-f .pf-in { background: #fff; }
.hotel-f input[type="search"]::-webkit-search-cancel-button { display: none; }
#hotel-clear { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 0; background: var(--alt); color: var(--ink); cursor: pointer; flex: none; }
.hotel-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(14,15,14,.18), inset 0 0 0 2px var(--ink); }
.hotel-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 700; }
.hotel-list li small { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.hotel-list li[aria-selected="true"], .hotel-list li:hover { background: var(--alt); }
.hotel-list .none { color: var(--muted); font-weight: 600; cursor: default; }
.hotel-list li.area { border-top: 1px solid var(--line); border-radius: 0; }
.hotel-list li.area + li.area { border-top: 0; }
.hotel-list li.own { border-top: 2px solid var(--ink); border-radius: 0 0 10px 10px; margin-top: 4px; }
/* pickup picker in the booking panel */
.pickup-alts { gap: 8px; }
.pickup-alts .chip-sm { height: 32px; padding: 0 12px; font-size: 12px; }
#pf-pickup-wrap .hotel-q { position: relative; flex: none; }
#pf-pickup-wrap .hotel-list { top: calc(100% + 4px); }
.dist-chips .chip { height: 34px; font-size: 13px; }
/* cruise ports as one-tap picks: above the box on phones (the open list must never cover them), beside it on desktop */
.port-chips { gap: 8px; align-items: center; }
.hotel-box .port-chips { order: -1; }
.port-chips .chips-l { flex-basis: 100%; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.port-chips .chip-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.drive-tag { left: auto !important; right: 12px; }
.vcard .drive-tag[hidden] { display: none; }
.hotel-on .cat-note { font-weight: 700; color: var(--ink); }

/* near-hotel pages */
.near { display: flex; flex-direction: column; gap: 28px; padding: 0 var(--pad) 72px; }
.near .crumbs { padding-left: 0; padding-right: 0; }
.near-hero { display: flex; flex-direction: column-reverse; gap: 18px; }
.near-t { display: flex; flex-direction: column; gap: 12px; }
.near-t h1 { font-size: 36px; }
.near-t .lead { font-size: 15px; line-height: 1.5; color: var(--muted); }
.near-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.near-photo { position: relative; height: 240px; border-radius: 20px; overflow: hidden; background: var(--ph-d); }
.near-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.near-list { display: flex; flex-direction: column; gap: 10px; }
.nrow { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); color: var(--ink); }
.nrow:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.nrow-img { width: 84px; height: 84px; border-radius: 14px; overflow: hidden; flex: none; background: var(--ph); }
.nrow-img img { width: 100%; height: 100%; object-fit: cover; }
.nrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nrow-drive { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-txt); }
.nrow-drive.ask { color: var(--warn); }
.nrow-drive.off { color: var(--muted); }
.nrow.nrow-off { opacity: .6; }
.nrow.nrow-off .nrow-img img { filter: grayscale(1); }
.near-group { display: flex; flex-direction: column; gap: 3px; padding: 18px 4px 6px; grid-column: 1 / -1; }
.near-group b { font-size: 18px; font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; }
.near-group small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.nrow-t b { font-size: 18px; font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; line-height: 1.1; }
.nrow-t small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.nrow-p { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.nrow-p b { font-size: 18px; font-weight: 900; font-stretch: 110%; letter-spacing: -.03em; }
.nrow-p small { font-size: 11px; color: var(--muted); }
.near-foot { display: flex; flex-direction: column; gap: 14px; }
.near-foot h2 { font-size: 28px; }
.near-links { display: flex; flex-direction: column; gap: 10px; }
.fact-hotel { color: var(--gold-txt); }

@media (min-width: 900px) {
  .hotel-box { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 20px; padding: 18px 22px; }
  .hotel-q { flex: 1 1 380px; }
  .hotel-box .port-chips { flex: 0 1 auto; order: 0; }
  .port-chips .chips-l { flex-basis: auto; }
  .hotel-box .dist-chips { flex-basis: 100%; }
  .hotel-box .pf-hint { flex-basis: 100%; }
  .near { padding: 0 var(--pad) 96px; gap: 40px; }
  .near-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
  .near-t h1 { font-size: 56px; }
  .near-t .lead { font-size: 17px; }
  .near-photo { height: 420px; border-radius: 24px; }
  .near-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .nrow { padding: 14px; }
  .nrow-img { width: 100px; height: 100px; }
  .near-foot h2 { font-size: 40px; }
  .near-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .near-links .pair { align-items: flex-start; }
}

/* Tripadvisor block (venue pages), below the booking panel */
.ta-sentinel { height: 1px; }
.ta-sec { margin-top: 24px; padding: 40px 0 48px; background: var(--alt); }
.ta-sec[hidden] { display: none; }
.ta-in { display: flex; flex-direction: column; gap: 18px; padding: 0 var(--pad); }
.ta-head { display: flex; flex-direction: column; gap: 12px; }
.ta-head h2 { font-size: 28px; }
.ta-head h2 a { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.ta-brand { display: inline-flex; align-items: center; align-self: flex-start; padding: 10px 14px; border-radius: 999px; background: #fff; font-weight: 800; }
.ta-brand img { height: 24px; width: auto; display: block; }
.ta-brand-txt { display: none; }
.ta-grid { display: flex; flex-direction: column; gap: 12px; }
.ta-score { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border-radius: 20px; background: var(--ink); color: #fff; }
.ta-score .lbl { color: var(--gold); }
.ta-score b { font-size: 64px; line-height: .9; font-weight: 900; font-stretch: 110%; letter-spacing: -.05em; }
.ta-score img { height: 22px; width: auto; }
.ta-score img[hidden] { display: none; }
.ta-score a { font-size: 14px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ta-score a:empty, .ta-score span:empty { display: none; }
.ta-score span { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.75); }
.ta-award { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.ta-award img { height: 44px; width: auto; }
.ta-award:not([hidden]) { display: inline-flex; }
.ta-reviews { display: flex; flex-direction: column; gap: 10px; }
.ta-rev { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: #fff; }
.ta-rev-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ta-rev-top img { height: 16px; width: auto; }
.ta-rev-top b { font-size: 16px; font-weight: 800; }
.ta-rev p { font-size: 14px; line-height: 1.5; color: var(--ink); }
.ta-rev small { font-size: 12px; color: var(--muted); }
.ta-rev .ta-read { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: underline; align-self: flex-start; }
.ta-foot { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ta-foot p { font-size: 12px; line-height: 1.5; color: var(--muted); }
.ta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 900px) {
  .ta-sec { margin-top: 40px; padding: 72px 0 80px; }
  .ta-in { gap: 28px; }
  .ta-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .ta-head h2 { font-size: 40px; max-width: 760px; }
  .ta-brand img { height: 28px; }
  .ta-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .ta-score { padding: 28px; gap: 10px; }
  .ta-score b { font-size: 88px; }
  .ta-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .ta-foot { flex-direction: row; align-items: center; gap: 24px; }
  .ta-foot p { max-width: 520px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .ta-reviews { grid-template-columns: 1fr; }
}

/* three levels of text, applied last so they win over the older per-element greys: level two is the sentence under a heading, level three is meta, hints and small print */
.hub-hero p, .vhero-t .lead, .near-t .lead, .sec-sub, .op-desc, .vcard-t small, .nrow-t small, .empty p, .faq-i p, .door small, .pair-t small, .cta-in p { color: var(--ink-2); }
.cta-band .cta-in p { color: rgba(255,255,255,.72); }
.vcard-meta, .vcard-facts, .op-hours, .op-times, .vcard-p, .pf-hint, .nrow-p small, .crumbs, .area-pick span, .pf-l, .op-group small, .hotel-list li small, .stepper small, .panel .stepper small { color: var(--ink-3); }
.pf-hint.bad { color: #B42318; } .pf-hint.ok { color: var(--res); } .pf-hint.warn { color: var(--warn); }

/* the photo viewer: bigger tiles that open the photo full screen, with a "N photos" pill on the hero */
.gallery { grid-template-columns: repeat(auto-fill, minmax(96px, 128px)); justify-content: start; }
.gph { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; padding: 0; border: 0; cursor: zoom-in; font: inherit; }
.gph img { transition: transform .4s ease; }
.gph:hover img, .gph:focus-visible img { transform: scale(1.05); }
.gph:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.vhero-photo img.lb-open { cursor: zoom-in; }
.photos-btn { position: absolute; right: 12px; top: 12px; z-index: 1; gap: 6px; border: 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13px; font-family: inherit; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.photos-btn:hover { background: var(--gold); }
.photos-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lb-open-page { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(8,8,8,.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100vw; max-height: 100vh; }
.lb-img { display: block; max-width: 100vw; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; cursor: pointer; user-select: none; -webkit-user-drag: none; }
.lb-cap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 70px; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.4; text-align: center; }
.lb-n { color: rgba(255,255,255,.55); font-weight: 700; white-space: nowrap; }
.lb button { position: absolute; width: 44px; height: 44px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.lb button:hover { background: var(--gold); }
.lb button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lb-x { top: 14px; right: 14px; }
.lb-prev, .lb-next { bottom: 18px; }
.lb-prev { left: 14px; } .lb-prev svg { transform: scaleX(-1); }
.lb-next { right: 14px; }
@media (min-width: 900px) {
  .photos-btn { right: 20px; top: auto; bottom: 24px; height: 30px; font-size: 13px; }
  .lb-cap { flex-direction: row; align-items: baseline; gap: 14px; }
  .lb-img { max-width: calc(100vw - 150px); max-height: calc(100vh - 96px); border-radius: 8px; }
  .lb-cap { padding: 12px 20px; }
  .lb-x { top: 20px; right: 20px; }
  .lb-prev, .lb-next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lb-prev { left: 24px; } .lb-next { right: 24px; }
}

/* the hero strip: every photo side by side, snapping one at a time; the tag, the pill, the dots and the arrows float above it */
.hero-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.hero-dots { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1; display: flex; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: pointer; pointer-events: auto; transition: transform .2s ease, background .2s ease; }
.hero-dots button[aria-selected="true"] { background: #fff; transform: scale(1.3); }
.hero-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); display: none; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.hero-arrow:hover { background: var(--gold); }
.hero-arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hero-prev { left: 14px; } .hero-prev svg { transform: scaleX(-1); }
.hero-next { right: 14px; }
@media (min-width: 900px) {
  .hero-arrow { display: grid; opacity: 0; transition: opacity .2s ease; }
  .vhero-photo:hover .hero-arrow, .hero-arrow:focus-visible, .vhero-photo:focus-within .hero-arrow { opacity: 1; }
  .hero-dots { top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero-track { scroll-behavior: auto; } .hero-dots button, .hero-arrow { transition: none; } }

/* the lead under a near page's heading lines up with the heading (getaways.css pads every .lead for its own pages) */
.near-t .lead { padding: 0; }

/* pay on arrival: two big choices in step two of the JamWest panel, and the reserved note that replaces the step when it goes through */
.pay-when .pw-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pw { position: relative; display: block; cursor: pointer; }
.pw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pw span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.pw span b { font-weight: 800; font-size: 14px; }
.pw span small { font-size: 12px; color: var(--ink-3); }
.pw input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pw input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.reserved { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }
.reserved .hh { font-size: 24px; line-height: 1.1; }
.reserved p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }