/* =========================================================
   Sand Dollar Boat Tours — tour detail page styles
   Builds on styles.css (shares the same design tokens).
   ========================================================= */

/* ---------- Tour hero ---------- */
.thero { position: relative; min-height: clamp(540px, 78vh, 760px); display: flex; align-items: center; overflow: hidden; background: var(--deep); }
.thero__bg { position: absolute; inset: 0; z-index: 0; }
.thero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.thero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,36,45,.86) 0%, rgba(4,36,45,.55) 42%, rgba(4,36,45,.18) 75%, rgba(4,36,45,.35) 100%),
    linear-gradient(0deg, rgba(4,36,45,.6) 0%, transparent 38%);
}
.thero__inner { position: relative; z-index: 1; padding: clamp(96px, 13vh, 150px) 0 clamp(70px, 9vw, 110px); max-width: 760px; }
.crumbs { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600; color: rgba(255,253,246,.7); margin-bottom: 18px; letter-spacing: .02em; }
.crumbs a { color: rgba(255,253,246,.7); transition: color .2s; }
.crumbs a:hover { color: var(--sun-2); }
.crumbs span[aria-current] { color: var(--sun); }
.thero .eyebrow { color: var(--sun); }
.thero__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 7vw, 5rem); line-height: .98; letter-spacing: -.02em; color: var(--paper); margin-bottom: 18px; text-shadow: 0 4px 30px rgba(0,0,0,.3); }
.thero__lede { font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.6; color: rgba(255,253,246,.92); max-width: 600px; margin-bottom: 26px; }
.thero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 30px; }
.thero__meta li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: .94rem; color: var(--paper); }
.thero__meta svg { width: 20px; height: 20px; fill: none; stroke: var(--aqua-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.thero__meta li:last-child svg { fill: var(--sun); stroke: var(--sun); }
.thero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.thero__price { display: inline-flex; flex-direction: column; line-height: 1.1; color: var(--paper); }
.thero__price b { font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.thero__price i { font-style: normal; font-size: .8rem; color: rgba(255,253,246,.7); letter-spacing: .04em; }
.thero__wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: clamp(48px, 6vw, 84px); z-index: 1; max-width: none; }

/* ---------- Quick facts bar ---------- */
.tfacts { background: var(--paper); padding: clamp(26px, 4vw, 40px) 0; border-bottom: 1px solid var(--line); }
.tfacts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tfact { display: flex; flex-direction: column; gap: 3px; padding-left: 52px; position: relative; min-height: 44px; justify-content: center; }
.tfact__ic { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 1.9rem; line-height: 1; }
.tfact__k { font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.tfact__v { font-size: .96rem; font-weight: 500; color: var(--deep); line-height: 1.35; }
@media (max-width: 860px) { .tfacts__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; } }
@media (max-width: 460px) { .tfacts__grid { grid-template-columns: 1fr; } }

/* ---------- Overview ---------- */
.toverview { background: var(--paper); }
.toverview__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 66px); align-items: center; }
.toverview__text p { color: var(--ink); font-size: 1.04rem; line-height: 1.7; margin-bottom: 16px; }
.toverview__text .btn { margin-top: 10px; }
.toverview__media { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.toverview__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.toverview__media figcaption { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: rgba(4,36,45,.75); color: #fff; font-family: var(--display); font-weight: 600; font-size: .82rem; padding: 8px 14px; border-radius: 100px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.toverview__media figcaption span { font-size: 1rem; }
@media (max-width: 800px) { .toverview__grid { grid-template-columns: 1fr; } .toverview__media { order: -1; aspect-ratio: 16/10; } }

/* ---------- Checklists ---------- */
.ticks { display: flex; flex-direction: column; gap: 11px; margin: 6px 0 26px; }
.ticks li { position: relative; padding-left: 32px; font-size: 1rem; color: var(--ink); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--teal); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.ticks--alt li::before { background: var(--coral); }

/* ---------- What you'll find ---------- */
.tfinds { background: var(--sand); }
.finds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.find { position: relative; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.find:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.find__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--sand-2); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.find__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.find:hover .find__img { transform: scale(1.05); }
/* touch scroll-activation mirror */
.js .find.is-active { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.find.is-active .find__img { transform: scale(1.05); }
.find figcaption { padding: 18px 20px 22px; }
.find figcaption h3 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--deep); margin-bottom: 5px; }
.find figcaption p { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.find--rare { border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun), var(--shadow-sm); }
.find__ribbon { position: absolute; top: 12px; right: 12px; z-index: 2; background: linear-gradient(135deg, var(--coral-2), var(--coral-d)); color: #fff; font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; box-shadow: 0 6px 16px rgba(255,106,61,.45); }
@media (max-width: 860px) { .finds__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .finds__grid { grid-template-columns: 1fr; } }

/* ---------- Where we go ---------- */
.tspots { background: var(--deep); }
.spots__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.spot { position: relative; background: rgba(255,253,246,.05); border: 1px solid rgba(255,253,246,.1); border-radius: var(--radius); padding: 30px 24px 26px; overflow: hidden; transition: transform .3s ease, border-color .3s ease; }
.spot:hover, .js .spot.is-active { transform: translateY(-5px); border-color: rgba(127,230,238,.4); }
.spot__num { font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: rgba(127,230,238,.28); line-height: 1; display: block; margin-bottom: 8px; }
.spot h3 { font-family: var(--display); font-weight: 700; font-size: 1.18rem; color: var(--paper); margin-bottom: 8px; }
.spot p { font-size: .92rem; color: rgba(255,253,246,.72); line-height: 1.6; }
.tspots__note { text-align: center; margin-top: 32px; color: rgba(255,253,246,.7); font-size: 1.02rem; }
@media (max-width: 880px) { .spots__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .spots__grid { grid-template-columns: 1fr; } }

/* ---------- Gallery (masonry, reuses .gphoto + lightbox) ---------- */
.tgallery { background: var(--sand-2); }
.tgallery__grid { columns: 3 250px; column-gap: 16px; }
.tgallery__grid .gphoto { flex: none; margin: 0 0 16px; width: 100%; height: auto; break-inside: avoid; display: block; cursor: zoom-in; }
.tgallery__grid .gphoto img { width: 100%; height: auto; display: block; }
.tgallery__grid .gphoto:hover { transform: scale(1.025); z-index: 5; }
@media (max-width: 760px) { .tgallery__grid { columns: 2 160px; column-gap: 12px; } .tgallery__grid .gphoto { margin-bottom: 12px; } }

/* ---------- Included / what to bring ---------- */
.tbring { background: var(--paper); }
.tbring__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.tbring__col { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3.5vw, 38px); }
.tbring__col h3 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--deep); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.tbring__col h3 span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-size: 1rem; }
.tbring__col:last-child h3 span { background: var(--coral); }
.tbring__col .ticks { margin-bottom: 0; }
@media (max-width: 720px) { .tbring__grid { grid-template-columns: 1fr; } }

/* ---------- Reviews (simple cards) ---------- */
.treviews { background: var(--sand); }
.trev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.trev { background: #fff; border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.trev__stars { color: var(--sun); letter-spacing: 3px; font-size: 1.05rem; }
.trev blockquote { font-size: 1rem; line-height: 1.6; color: var(--ink); flex: 1; }
.trev figcaption { display: flex; flex-direction: column; }
.trev figcaption strong { font-family: var(--display); font-weight: 700; color: var(--deep); }
.trev figcaption span { font-size: .82rem; color: var(--muted); }
@media (max-width: 860px) { .trev__grid { grid-template-columns: 1fr; } }

/* ---------- Final CTA back link ---------- */
.finalcta__back { margin-top: 24px; }
.finalcta__back a { color: var(--aqua-2); font-weight: 600; font-size: .96rem; transition: color .2s; }
.finalcta__back a:hover { color: var(--sun-2); }

/* ---------- Shell slot machine ("Spin for a Junonia" — Vegas edition) ---------- */
.shellslot { background: radial-gradient(120% 90% at 50% 0%, #0c5263 0%, var(--deep) 52%, var(--deep-2) 100%); position: relative; overflow: hidden; }
.shellslot .section__title { color: var(--paper); }
.shellslot .eyebrow--dark { color: var(--sun); }
.shellslot .section__sub { color: rgba(255, 253, 246, .82); }
.shellslot__inner { position: relative; z-index: 1; }

.slot { display: flex; align-items: flex-end; justify-content: center; margin-top: 26px; }
.slot__cabinet {
  position: relative; width: clamp(300px, 94vw, 480px);
  background: linear-gradient(165deg, var(--coral-2) 0%, var(--coral) 46%, var(--coral-d) 100%);
  border-radius: 30px 30px 26px 26px; padding: 16px 18px 22px; border: 3px solid rgba(255, 255, 255, .3);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -10px 24px rgba(0, 0, 0, .3);
}

/* topper / marquee head */
.slot__topper {
  position: relative; margin: 0 0 16px; padding: 14px 18px 14px; border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, #06323d 0%, #04242d 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(127, 230, 238, .25); border: 2px solid rgba(255, 255, 255, .14);
}
.slot__brand { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 10px; }
.slot__logo { display: inline-flex; background: var(--paper); padding: 7px 16px; border-radius: 100px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.slot__logo img { height: 34px; width: auto; display: block; }
.slot__jackpot-sign {
  font-family: var(--display); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 1.05rem; white-space: nowrap;
  color: var(--sun); text-shadow: 0 0 8px rgba(255, 194, 74, .9), 0 0 18px rgba(255, 194, 74, .55);
}

/* chase-light bulbs */
.slot__bulbs { display: flex; pointer-events: none; }
.slot__bulbs--top { position: absolute; top: 7px; left: 14px; right: 14px; justify-content: space-between; }
.slot__bulb { width: 8px; height: 8px; border-radius: 50%; background: var(--sun-2); box-shadow: 0 0 6px 1px rgba(255, 217, 130, .55); animation: bulbChase 1.2s linear infinite; }
@keyframes bulbChase { 0% { opacity: 1; box-shadow: 0 0 9px 2px rgba(255, 217, 130, 1); transform: scale(1.15); } 26%, 100% { opacity: .28; box-shadow: 0 0 3px rgba(255, 217, 130, .4); transform: scale(1); } }

/* deck + bulb frame */
.slot__deck { position: relative; padding: 13px; border-radius: 18px; background: linear-gradient(180deg, #2a2f33, #14181b); box-shadow: inset 0 2px 4px rgba(255, 255, 255, .1), inset 0 -3px 8px rgba(0, 0, 0, .5); }
.slot__frame { position: absolute; inset: 0; pointer-events: none; }
.slot__frame .slot__bulbs { position: absolute; }
.slot__bulbs--ftop { top: 4px; left: 16px; right: 16px; justify-content: space-between; }
.slot__bulbs--fbottom { bottom: 4px; left: 16px; right: 16px; justify-content: space-between; }
.slot__bulbs--fleft { flex-direction: column; left: 4px; top: 16px; bottom: 16px; justify-content: space-between; }
.slot__bulbs--fright { flex-direction: column; right: 4px; top: 16px; bottom: 16px; justify-content: space-between; }

.slot__window {
  position: relative; background: linear-gradient(180deg, #04242d, #0a3a47); border-radius: 12px; padding: 12px;
  box-shadow: inset 0 7px 18px rgba(0, 0, 0, .65), inset 0 -2px 0 rgba(255, 255, 255, .06);
}
.slot__reels { display: flex; gap: 8px; justify-content: center; }
.slot__reel {
  position: relative; width: clamp(76px, 24vw, 118px); height: clamp(76px, 24vw, 118px);
  overflow: hidden; border-radius: 10px; background: var(--paper); transition: box-shadow .3s ease;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), inset 0 10px 16px rgba(0, 0, 0, .22), inset 0 -10px 16px rgba(0, 0, 0, .22);
}
.slot__strip { display: flex; flex-direction: column; will-change: transform; }
.slot__tile { width: 100%; aspect-ratio: 1; flex: none; background-size: cover; background-position: center; }
.slot__tile--rare { box-shadow: inset 0 0 0 3px var(--sun); }
.slot__reel.is-win { box-shadow: inset 0 0 0 3px var(--sun), 0 0 20px rgba(255, 194, 74, .8); }
.slot__payline { position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; transform: translateY(-50%); pointer-events: none; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 194, 74, .95) 30% 70%, transparent); box-shadow: 0 0 10px rgba(255, 194, 74, .7); }
.slot__pointer { position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; z-index: 3; pointer-events: none; }
.slot__pointer--l { left: 1px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 11px solid var(--sun); filter: drop-shadow(0 0 4px rgba(255, 194, 74, .8)); }
.slot__pointer--r { right: 1px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 11px solid var(--sun); filter: drop-shadow(0 0 4px rgba(255, 194, 74, .8)); }
.slot__glass { position: absolute; inset: 12px; border-radius: 10px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 22%, transparent 45%); }

/* digital readout */
.slot__readout { display: flex; gap: 10px; margin: 14px 4px 6px; }
.slot__meter { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 8px; background: #06120f; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.slot__meter-k { font-family: var(--display); font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 253, 246, .5); }
.slot__meter-v { font-family: "Courier New", monospace; font-weight: 700; font-size: 1.12rem; color: #ffd24a; text-shadow: 0 0 8px rgba(255, 194, 74, .8); letter-spacing: .06em; }
.slot__meter--win .slot__meter-v { color: #6fffa0; text-shadow: 0 0 8px rgba(111, 255, 160, .7); }
.slot__meter.is-flash { animation: meterFlash .5s ease 3; }
@keyframes meterFlash { 0%, 100% { background: #06120f; } 50% { background: #3a2e06; } }

.slot__result { text-align: center; font-family: var(--display); font-weight: 700; color: var(--paper); font-size: 1.02rem; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; justify-content: center; margin: 8px 4px 4px; transition: color .3s; }
.slot__result.is-win { color: var(--sun-2); }
.slot__result.is-jackpot { color: var(--sun); font-size: 1.14rem; }

.slot__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.slot__spin { min-width: 180px; }
.slot__spin[disabled] { opacity: .65; cursor: not-allowed; }
.slot__spin-ic { display: inline-block; margin-left: 8px; }
.slot__spin.is-spinning .slot__spin-ic { animation: slotSpinIc .6s linear infinite; }
@keyframes slotSpinIc { to { transform: rotate(360deg); } }
.slot__mute { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: transform .15s, background .2s; }
.slot__mute:hover { transform: scale(1.08); background: rgba(255, 255, 255, .28); }
.slot__count { display: block; text-align: center; font-size: .82rem; color: rgba(255, 253, 246, .72); font-weight: 600; min-height: 1em; margin-top: 10px; }

/* coin tray */
.slot__tray { margin: 14px -6px -6px; height: 26px; border-radius: 8px 8px 16px 16px; position: relative; background: linear-gradient(180deg, #7a2a18, #5a1d10); box-shadow: inset 0 6px 12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15); }
.slot__tray::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 46%; height: 6px; border-radius: 4px; background: #2a0d06; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8); }

/* jackpot light show */
.slot.is-jackpot .slot__cabinet { animation: slotShake .55s ease; box-shadow: 0 36px 80px rgba(0, 0, 0, .5), 0 0 0 4px var(--sun), 0 0 60px rgba(255, 194, 74, .65); }
.slot.is-jackpot .slot__bulb { animation-duration: .5s; background: var(--sun); }
.slot.is-jackpot .slot__jackpot-sign { animation: signBlink .4s steps(1) 6; }
@keyframes signBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes slotShake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-7px); } 38% { transform: translateX(7px); } 58% { transform: translateX(-5px); } 78% { transform: translateX(4px); } }

/* lever / arm */
.slot__arm { position: relative; width: 56px; height: 250px; }
.slot__lever { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.slot__lever-track { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 56px; border-radius: 11px; background: linear-gradient(90deg, #4a5358, #717c82 50%, #4a5358); box-shadow: 0 6px 14px rgba(0, 0, 0, .4), inset 0 2px 3px rgba(255, 255, 255, .3); }
/* rod + knob form ONE rigid arm that pivots at the track, so the ball stays on the rod when pulled */
.slot__lever-arm { position: absolute; bottom: 38px; left: 50%; width: 34px; height: 150px; transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.5, 0, .25, 1.45); }
.slot__lever-rod { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 128px; border-radius: 6px; background: linear-gradient(90deg, #7c878d, #f2f6f7 45%, #7c878d); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.slot__lever-knob { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ff9b6b, var(--coral) 55%, var(--coral-d)); box-shadow: 0 8px 16px rgba(0, 0, 0, .45), inset 0 3px 4px rgba(255, 255, 255, .55); animation: knobIdle 2.4s ease-in-out infinite; }
@keyframes knobIdle { 0%, 100% { box-shadow: 0 8px 16px rgba(0, 0, 0, .45), inset 0 3px 4px rgba(255, 255, 255, .55), 0 0 0 0 rgba(255, 194, 74, 0); } 50% { box-shadow: 0 8px 16px rgba(0, 0, 0, .45), inset 0 3px 4px rgba(255, 255, 255, .55), 0 0 14px 3px rgba(255, 194, 74, .5); } }
.slot__lever:hover .slot__lever-arm { transform: translateX(-50%) rotate(7deg); }
.slot__lever.is-pulled .slot__lever-arm { transform: translateX(-50%) rotate(36deg); }

/* Beachcomber Bonus — hold-and-spin overlay + bucket scatter tile */
.slot__tile--bucket { display: grid; place-items: center; font-size: 2.4rem; background: radial-gradient(circle at 50% 32%, #ffe9b0, #ffc24a 62%, #e8a32b); box-shadow: inset 0 0 0 3px var(--coral-d); }
.slot__bonus { position: absolute; inset: 0; z-index: 20; border-radius: 30px 30px 26px 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center; background: linear-gradient(165deg, rgba(6, 50, 61, .975), rgba(4, 36, 45, .985)); animation: bonusIn .4s ease; }
.slot__bonus.is-out { animation: bonusOut .38s ease forwards; }
@keyframes bonusIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes bonusOut { to { opacity: 0; transform: scale(.94); } }
.slot__bonus h3 { font-family: var(--display); font-weight: 800; color: var(--sun); font-size: 1.32rem; text-shadow: 0 0 12px rgba(255, 194, 74, .7); }
.slot__bonus-sub { color: rgba(255, 253, 246, .82); font-size: .85rem; line-height: 1.4; max-width: 340px; margin-top: -4px; }
.slot__bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 100%; max-width: 310px; }
.slot__bonus-slot { aspect-ratio: 1; border-radius: 12px; position: relative; overflow: hidden; background: rgba(255, 253, 246, .06); border: 2px dashed rgba(127, 230, 238, .4); background-size: cover; background-position: center; }
.slot__bonus-slot.is-filled { border-style: solid; border-color: var(--sun); animation: slotPop .42s cubic-bezier(.34, 1.7, .5, 1); }
@keyframes slotPop { 0% { transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.12) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
.slot__bonus-val { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background: var(--coral-d); color: #fff; font-family: var(--display); font-weight: 800; font-size: .68rem; padding: 2px 8px; border-radius: 100px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.slot__bonus-meta { font-family: var(--display); font-weight: 700; color: var(--paper); font-size: .95rem; }
.slot__bonus-meta b { color: var(--sun); }
.slot__bonus-flash { min-height: 1.3em; color: var(--aqua-2); font-family: var(--display); font-weight: 700; font-size: .95rem; }
.slot__bonus.is-jackpot { box-shadow: inset 0 0 0 4px var(--sun), inset 0 0 60px rgba(255, 194, 74, .4); }

.slot__cta { text-align: center; margin-top: 24px; color: rgba(255, 253, 246, .82); font-size: .98rem; }
.slot__cta a { color: var(--sun-2); font-weight: 700; white-space: nowrap; }
.slot__cta a:hover { color: var(--sun); }

.slot-burst { position: fixed; z-index: 9000; pointer-events: none; font-size: 26px; will-change: transform, opacity; }

@media (max-width: 560px) {
  .slot__arm { display: none; }
  .slot__reels { gap: 6px; }
  .slot__cabinet { padding: 14px 12px 18px; }
  .slot__jackpot-sign { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slot__bulb, .slot__lever-knob, .slot__spin.is-spinning .slot__spin-ic, .slot.is-jackpot .slot__cabinet, .slot.is-jackpot .slot__jackpot-sign, .slot__meter.is-flash, .slot__bonus, .slot__bonus-slot.is-filled { animation: none; }
}

/* ---------- Captain's Wheel (pick-your-adventure) ---------- */
.cwheel-sec { background: linear-gradient(180deg, var(--deep-2) 0%, var(--deep) 100%); position: relative; }
.cwheel-sec .section__title { color: var(--paper); }
.cwheel-sec .eyebrow--dark { color: var(--sun); }
.cwheel-sec .section__sub { color: rgba(255, 253, 246, .82); }
.cwheel-sec__inner { position: relative; z-index: 1; }

.cwheel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 54px); margin-top: 26px; }
.cwheel__stage { position: relative; width: clamp(258px, 72vw, 380px); aspect-ratio: 1; flex: none; }
.cwheel__svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .5)); }
#cwheelRot { transform-box: view-box; transform-origin: 120px 120px; }
.cwheel__hub-ring { fill: var(--sun); }
.cwheel__hub { fill: var(--deep); stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.cwheel__hub-ic { font-size: 20px; }
.cwheel__pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; z-index: 4; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 26px solid var(--sun); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)); }

.cwheel__panel { flex: 1 1 280px; max-width: 420px; text-align: center; }
.cwheel__result { font-family: var(--display); font-weight: 700; color: var(--paper); font-size: 1.1rem; line-height: 1.5; min-height: 4.4em; display: flex; align-items: center; justify-content: center; margin: 0 0 4px; }
.cwheel__result b { color: var(--sun); display: block; margin-bottom: 2px; }
.cwheel__result.is-shown { animation: cwPop .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cwPop { 0% { transform: scale(.95); opacity: .35; } 100% { transform: scale(1); opacity: 1; } }
.cwheel__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.cwheel__spin { min-width: 190px; }
.cwheel__spin[disabled] { opacity: .65; cursor: not-allowed; }
.cwheel__spin.is-spinning { animation: cwBtnPulse 1s ease-in-out infinite; }
@keyframes cwBtnPulse { 50% { transform: scale(1.035); } }
.cwheel__cta { display: inline-block; margin-top: 18px; padding: 13px 28px; border-radius: 100px; background: var(--sun); color: var(--deep); font-family: var(--display); font-weight: 800; box-shadow: 0 10px 24px rgba(255, 194, 74, .4); transition: transform .2s, box-shadow .2s; }
.cwheel__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 194, 74, .55); }
.cwheel__cta[hidden] { display: none; }

@media (max-width: 620px) { .cwheel { flex-direction: column; } .cwheel__panel { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cwheel__spin.is-spinning, .cwheel__result.is-shown { animation: none; } }

/* ---------- Why go by boat? (comparison) ---------- */
.whyboat { background: var(--paper); }
.whyboat__grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(14px, 3vw, 30px); }
.whyboat__col { position: relative; border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); }
.whyboat__col--no { background: var(--sand); }
.whyboat__col--yes { background: linear-gradient(165deg, #0a4a52, var(--deep)); border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.whyboat__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--coral-2), var(--coral-d)); color: #fff; font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; box-shadow: 0 8px 18px rgba(255, 106, 61, .45); white-space: nowrap; }
.whyboat__h { font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.whyboat__col--no .whyboat__h { color: var(--muted); }
.whyboat__col--yes .whyboat__h { color: var(--paper); }
.whyboat__list { display: flex; flex-direction: column; gap: 12px; }
.whyboat__list li { position: relative; padding-left: 30px; line-height: 1.45; font-size: .98rem; }
.whyboat__list--no li { color: var(--muted); }
.whyboat__list--yes li { color: rgba(255, 253, 246, .92); }
.whyboat__list li::before { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 1rem; }
.whyboat__list--no li::before { content: "\2715"; color: #c2503a; }
.whyboat__list--yes li::before { content: "\2713"; color: var(--aqua-2); }
.whyboat__vs { font-family: var(--display); font-weight: 800; color: var(--coral); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) { .whyboat__grid { grid-template-columns: 1fr; } .whyboat__col--yes { transform: none; } .whyboat__vs { justify-self: center; } }

/* ---------- Best time / tides ---------- */
.tides { background: var(--sand); }
.tides__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 28px); }
.tide { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.tide__top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.tide__ic { font-size: 2rem; line-height: 1; }
.tide__top h3 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--deep); }
.tide__range { font-size: .82rem; color: var(--coral); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tide__wave { width: 100%; height: 26px; display: block; margin: 4px 0 12px; opacity: .85; }
.tide__when { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--teal); margin-bottom: 8px; }
.tide__when b { color: var(--coral-d); }
.tide__desc { color: var(--ink); line-height: 1.6; font-size: .98rem; }
.tide__desc b { color: var(--deep); }
.tides__note { text-align: center; margin-top: 24px; font-family: var(--display); font-weight: 600; color: var(--teal); font-size: 1.02rem; }
@media (max-width: 620px) { .tides__grid { grid-template-columns: 1fr; } }

/* ---------- Your day, step by step ---------- */
.tsteps { background: var(--deep); }
.tsteps .section__title { color: var(--paper); }
.tsteps .eyebrow--dark { color: var(--sun); }
.tsteps .section__sub { color: rgba(255, 253, 246, .82); }
.tsteps__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.tsteps__list::before { content: ""; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; z-index: 0; background: repeating-linear-gradient(90deg, rgba(127, 230, 238, .5) 0 8px, transparent 8px 16px); }
.tstep { position: relative; z-index: 1; text-align: center; }
.tstep__num { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: linear-gradient(135deg, var(--coral-2), var(--coral-d)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.4rem; box-shadow: 0 10px 22px rgba(255, 106, 61, .4); border: 3px solid var(--deep); }
.tstep__ic { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.tstep h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--paper); margin-bottom: 6px; }
.tstep p { font-size: .9rem; color: rgba(255, 253, 246, .74); line-height: 1.5; }
@media (max-width: 860px) {
  .tsteps__list { grid-template-columns: 1fr; gap: 20px; max-width: 460px; margin-inline: auto; }
  .tsteps__list::before { display: none; }
  .tstep { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
  .tstep__num { margin: 0; flex: none; }
  .tstep__ic { display: inline-block; margin-bottom: 4px; }
}

/* ---------- Shell care ---------- */
.shellcare { background: var(--paper); }
.shellcare__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.carecard { position: relative; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px 24px; text-align: center; transition: transform .3s ease, box-shadow .3s ease; }
.carecard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.carecard__step { position: absolute; top: 12px; right: 16px; font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: rgba(12, 115, 133, .18); line-height: 1; }
.carecard__ic { font-size: 2.2rem; display: block; margin-bottom: 10px; }
.carecard h3 { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--deep); margin-bottom: 7px; }
.carecard p { font-size: .92rem; color: var(--muted); line-height: 1.55; }
.shellcare__note { text-align: center; margin-top: 22px; color: var(--teal); font-weight: 600; font-size: .98rem; }
@media (max-width: 820px) { .shellcare__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .shellcare__grid { grid-template-columns: 1fr; } }

/* ---------- Shell-find card animations ---------- */
/* springy hover/lift timing (decoupled from the entrance animation below) */
.tfinds .find { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; }
/* staggered entrance as the grid scrolls in */
.tfinds .find.reveal.is-visible { animation: findIn .7s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.finds__grid .find:nth-child(2).is-visible { animation-delay: .08s; }
.finds__grid .find:nth-child(3).is-visible { animation-delay: .16s; }
.finds__grid .find:nth-child(4).is-visible { animation-delay: .24s; }
.finds__grid .find:nth-child(5).is-visible { animation-delay: .32s; }
.finds__grid .find:nth-child(6).is-visible { animation-delay: .40s; }
@keyframes findIn { from { opacity: 0; transform: translateY(46px) scale(.92); } to { opacity: 1; transform: none; } }

/* gentle continuous float on each shell photo (organic, offset per card) */
.find__img img { animation: shellBob 6s ease-in-out infinite; }
.finds__grid .find:nth-child(2) .find__img img { animation-delay: -1.1s; }
.finds__grid .find:nth-child(3) .find__img img { animation-delay: -2.3s; }
.finds__grid .find:nth-child(4) .find__img img { animation-delay: -3.0s; }
.finds__grid .find:nth-child(5) .find__img img { animation-delay: -1.7s; }
.finds__grid .find:nth-child(6) .find__img img { animation-delay: -3.6s; }
@keyframes shellBob { 0%, 100% { transform: translateY(0) scale(1.06); } 50% { transform: translateY(-5px) scale(1.06); } }

/* light sheen sweeps across on hover */
.find__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; transform: translateX(-130%); transition: transform .75s ease; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); }
.find:hover .find__img::after, .find.is-active .find__img::after { transform: translateX(130%); }

/* the rare junonia: glowing gold ring + pulsing ribbon */
.find--rare { animation: rareGlow 2.6s ease-in-out infinite; }
.tfinds .find--rare.reveal.is-visible { animation: findIn .7s cubic-bezier(.34, 1.56, .64, 1) .24s backwards, rareGlow 2.6s ease-in-out 1s infinite; }
@keyframes rareGlow { 0%, 100% { box-shadow: 0 0 0 1px var(--sun), var(--shadow-sm); } 50% { box-shadow: 0 0 0 1px var(--sun), 0 0 24px rgba(255, 194, 74, .55); } }
.find__ribbon { animation: ribbonPulse 1.9s ease-in-out infinite; }
@keyframes ribbonPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }

@media (prefers-reduced-motion: reduce) {
  .tfinds .find.reveal.is-visible, .tfinds .find--rare.reveal.is-visible, .find__img img, .find--rare, .find__ribbon { animation: none; }
  .find__img::after { display: none; }
}

/* ---------- Cartoony card personality (shells · tide · steps · care · spots) ---------- */
/* bouncy pop-in entrance with a playful tilt (overrides the earlier findIn) */
.tfinds .find.reveal.is-visible,
.tides__grid .tide.reveal.is-visible,
.tsteps__list .tstep.reveal.is-visible,
.shellcare__grid .carecard.reveal.is-visible,
.spots__grid .spot.reveal.is-visible {
  animation: cartoonPop .6s cubic-bezier(.34, 1.7, .5, 1) backwards;
}
@keyframes cartoonPop {
  0% { opacity: 0; transform: scale(.62) translateY(20px) rotate(-5deg); }
  55% { opacity: 1; transform: scale(1.08) rotate(2.5deg); }
  78% { transform: scale(.97) rotate(-1.2deg); }
  100% { transform: scale(1) rotate(0); }
}
/* rare junonia keeps its glow alongside the pop */
.tfinds .find--rare.reveal.is-visible { animation: cartoonPop .6s cubic-bezier(.34, 1.7, .5, 1) .24s backwards, rareGlow 2.6s ease-in-out 1s infinite; }

/* per-grid entrance stagger */
.tides__grid .tide:nth-child(2).is-visible { animation-delay: .1s; }
.tsteps__list .tstep:nth-child(2).is-visible { animation-delay: .08s; }
.tsteps__list .tstep:nth-child(3).is-visible { animation-delay: .16s; }
.tsteps__list .tstep:nth-child(4).is-visible { animation-delay: .24s; }
.tsteps__list .tstep:nth-child(5).is-visible { animation-delay: .32s; }
.shellcare__grid .carecard:nth-child(2).is-visible { animation-delay: .08s; }
.shellcare__grid .carecard:nth-child(3).is-visible { animation-delay: .16s; }
.shellcare__grid .carecard:nth-child(4).is-visible { animation-delay: .24s; }
.spots__grid .spot:nth-child(2).is-visible { animation-delay: .08s; }
.spots__grid .spot:nth-child(3).is-visible { animation-delay: .16s; }
.spots__grid .spot:nth-child(4).is-visible { animation-delay: .24s; }

/* springy 'boing' hover with a cartoony tilt */
.tfinds .find,
.tides__grid .tide,
.shellcare__grid .carecard { transition: transform .42s cubic-bezier(.34, 1.85, .5, 1), box-shadow .35s ease; }
.tspots .spot { transition: transform .42s cubic-bezier(.34, 1.85, .5, 1), box-shadow .35s ease, border-color .3s ease; }
.tfinds .find:hover { transform: translateY(-9px) scale(1.03) rotate(-1.6deg); }
.tides__grid .tide:hover { transform: translateY(-9px) scale(1.02) rotate(1.4deg); box-shadow: var(--shadow-md); }
.shellcare__grid .carecard:hover { transform: translateY(-9px) scale(1.04) rotate(-2deg); box-shadow: var(--shadow-md); }
.tspots .spot:hover { transform: translateY(-9px) scale(1.03) rotate(1.5deg); }
/* timeline node does a bouncy spin on step hover */
.tstep__num { transition: transform .42s cubic-bezier(.34, 1.9, .5, 1); }
.tstep:hover .tstep__num { transform: scale(1.18) rotate(-8deg); }

/* continuous icon wiggle (playful pendulum, staggered) */
.tide__ic, .carecard__ic, .tstep__ic { display: inline-block; transform-origin: 50% 85%; animation: iconWiggle 3.4s ease-in-out infinite; }
.shellcare__grid .carecard:nth-child(2) .carecard__ic { animation-delay: -.5s; }
.shellcare__grid .carecard:nth-child(3) .carecard__ic { animation-delay: -1.1s; }
.shellcare__grid .carecard:nth-child(4) .carecard__ic { animation-delay: -1.7s; }
.tsteps__list .tstep:nth-child(2) .tstep__ic { animation-delay: -.6s; }
.tsteps__list .tstep:nth-child(3) .tstep__ic { animation-delay: -1.2s; }
.tsteps__list .tstep:nth-child(4) .tstep__ic { animation-delay: -1.8s; }
.tsteps__list .tstep:nth-child(5) .tstep__ic { animation-delay: -2.4s; }
.tides__grid .tide:nth-child(2) .tide__ic { animation-delay: -1.5s; }
@keyframes iconWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(8deg); } 60% { transform: rotate(-7deg); } }

/* cartoony 'RARE!' ribbon boing (replaces the gentle pulse) */
.find__ribbon { transform-origin: 50% 50%; animation: ribbonBoing 1.6s ease-in-out infinite; }
@keyframes ribbonBoing { 0%, 100% { transform: rotate(0) scale(1); } 45% { transform: rotate(-7deg) scale(1.14); } 70% { transform: rotate(4deg) scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .tfinds .find.reveal.is-visible, .tides__grid .tide.reveal.is-visible, .tsteps__list .tstep.reveal.is-visible,
  .shellcare__grid .carecard.reveal.is-visible, .spots__grid .spot.reveal.is-visible, .tfinds .find--rare.reveal.is-visible,
  .tide__ic, .carecard__ic, .tstep__ic, .find__ribbon { animation: none; }
  .tfinds .find:hover, .tides__grid .tide:hover, .shellcare__grid .carecard:hover, .tspots .spot:hover { transform: translateY(-4px); }
}

/* ---------- "Build Your Perfect Day" itinerary builder (Private Charters) ---------- */
.daybuilder { background: var(--sand); }
.daybuilder__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px, 4vw, 46px); align-items: start; margin-top: 8px; }
.daybuilder__opts { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.dbopt { font-family: var(--display); font-weight: 600; font-size: .96rem; padding: 11px 17px; border-radius: 100px; border: 2px solid var(--line); background: #fff; color: var(--deep); cursor: pointer; transition: transform .2s cubic-bezier(.34,1.6,.5,1), background .2s, border-color .2s, box-shadow .2s; }
.dbopt:hover { border-color: var(--teal); transform: translateY(-3px); }
.dbopt.is-on { background: linear-gradient(135deg, var(--coral-2), var(--coral-d)); border-color: transparent; color: #fff; box-shadow: 0 9px 20px rgba(255, 106, 61, .38); }
.daybuilder__board { position: relative; background: linear-gradient(165deg, #0a4a52, var(--deep)); color: var(--paper); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-lg); min-height: 280px; overflow: hidden; }
.daybuilder__board::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,194,74,.25), transparent 70%); pointer-events: none; }
.daybuilder__board h3 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--sun); margin-bottom: 14px; position: relative; }
.daybuilder__empty { color: rgba(255, 253, 246, .72); line-height: 1.6; }
.daybuilder__timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; position: relative; }
.daybuilder__timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, rgba(127,230,238,.45) 0 6px, transparent 6px 12px); }
.dbstep { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; animation: dbPop .38s cubic-bezier(.34, 1.7, .5, 1); }
.dbstep__n { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--sun); color: var(--deep); font-family: var(--display); font-weight: 800; font-size: .95rem; display: grid; place-items: center; border: 3px solid var(--deep); }
.dbstep__ic { font-size: 1.4rem; flex: none; }
.dbstep__t { font-family: var(--display); font-weight: 600; }
@keyframes dbPop { from { opacity: 0; transform: translateX(-14px) scale(.9); } to { opacity: 1; transform: none; } }
.daybuilder__summary { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255, 253, 246, .18); font-family: var(--display); font-weight: 700; color: var(--sun-2); font-size: 1.02rem; }
.daybuilder__board .btn { margin-top: 16px; }
@media (max-width: 760px) { .daybuilder__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dbopt, .dbstep { animation: none; transition: none; } }

/* ---------- Boat picker cards (Private Charters "choose your boat") ---------- */
.boatpick__cap { display: inline-block; margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-d); }

/* ---------- Wildlife Spotting Bingo (Dolphin page) ---------- */
.wbingo { background: var(--sand); }
.wbingo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 540px; margin: 8px auto 0; }
.wbcell { position: relative; aspect-ratio: 1; border-radius: 16px; border: 2px solid var(--line); background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--display); font-weight: 700; color: var(--muted); font-size: .82rem; text-align: center; padding: 6px; transition: transform .25s cubic-bezier(.34, 1.6, .5, 1), border-color .25s, box-shadow .25s, background .25s, color .25s; }
.wbcell__e { font-size: 2rem; line-height: 1; filter: grayscale(.65); opacity: .6; transition: filter .25s, opacity .25s, transform .25s; }
.wbcell:hover { transform: translateY(-3px); border-color: var(--aqua); }
.wbcell.is-spotted { background: linear-gradient(165deg, #0a4a52, var(--deep)); border-color: var(--aqua); color: var(--paper); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.wbcell.is-spotted .wbcell__e { filter: none; opacity: 1; transform: scale(1.12); }
.wbcell__check { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--sun); color: var(--deep); font-weight: 900; font-size: .78rem; display: grid; place-items: center; opacity: 0; transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.7, .5, 1), opacity .3s; }
.wbcell.is-spotted .wbcell__check { opacity: 1; transform: scale(1); }
.wbingo__status { text-align: center; margin-top: 20px; font-family: var(--display); font-weight: 700; color: var(--teal); font-size: 1.05rem; min-height: 1.4em; }
.wbingo.is-complete .wbingo__status { color: var(--coral-d); }
.wbingo.is-complete .wbingo__grid { animation: wbWin .6s ease; }
@keyframes wbWin { 0%, 100% { transform: none; } 30% { transform: scale(1.025); } }
@media (max-width: 480px) { .wbcell { font-size: .72rem; border-radius: 12px; } .wbcell__e { font-size: 1.6rem; } }

/* ---------- Golden Hour Planner (Sunset page) ---------- */
.sunplanner-sec { background: var(--sand); }
.sunplanner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(18px, 4vw, 40px); align-items: stretch; margin-top: 8px; }
.sunplanner__months { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.spmonth { font-family: var(--display); font-weight: 700; font-size: .9rem; padding: 9px 15px; border-radius: 100px; border: 2px solid var(--line); background: #fff; color: var(--deep); cursor: pointer; transition: transform .2s cubic-bezier(.34,1.6,.5,1), background .2s, border-color .2s, box-shadow .2s; }
.spmonth:hover { border-color: var(--coral); transform: translateY(-2px); }
.spmonth.is-on { background: linear-gradient(135deg, var(--coral-2), var(--coral-d)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(255, 106, 61, .35); }
.sunplanner__panel { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.sunplanner__sky { position: absolute; inset: 0; z-index: 0; transition: background 1s ease; background: linear-gradient(180deg, #5a2a5a, #ff5a2a); }
.sunplanner__sun { position: absolute; left: 50%; bottom: 34%; width: 66px; height: 66px; border-radius: 50%; transform: translateX(-50%); z-index: 1; background: radial-gradient(circle, #fff6d8, var(--sun)); box-shadow: 0 0 60px 22px rgba(255, 210, 120, .6); transition: bottom 1s ease; }
.sunplanner__info { position: relative; z-index: 2; padding: clamp(20px, 3vw, 28px); background: linear-gradient(0deg, rgba(0, 0, 0, .58), rgba(0,0,0,.05) 70%, transparent); }
.sunplanner__info .sp-lbl { font-size: .92rem; opacity: .92; }
.sunplanner__info .sp-lbl b { color: var(--sun-2); }
.sunplanner__time { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; margin: 5px 0 8px; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.sunplanner__board { font-family: var(--display); font-weight: 600; font-size: .98rem; }
.sunplanner__board b { color: var(--sun-2); }
.sunplanner__info .btn { margin-top: 15px; }
@media (max-width: 720px) { .sunplanner { grid-template-columns: 1fr; } }

/* ---------- "Light Up the Tiki" LED mixer (Tiki page) ---------- */
.tikilights-sec { background: var(--deep); }
.tikilights-sec .section__title { color: var(--paper); }
.tikilights-sec .eyebrow--dark { color: var(--sun); }
.tikilights-sec .section__sub { color: rgba(255, 253, 246, .82); }
.tikilights { --led: #ff6a3d; max-width: 620px; margin: 8px auto 0; }
.tikilights__stage { position: relative; height: clamp(220px, 42vw, 300px); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, #04122e 0%, #0a2a3a 62%, #0a3a4a 100%); display: grid; place-items: end center; box-shadow: var(--shadow-lg); }
.tikilights__glow { position: absolute; left: 0; right: 0; top: 30%; height: 150px; z-index: 0; background: radial-gradient(ellipse at 50% 0%, var(--led), transparent 68%); opacity: .55; filter: blur(8px); transition: background .4s; }
.tikilights__reflect { position: absolute; left: 50%; bottom: 0; width: 64%; height: 34px; transform: translateX(-50%); z-index: 1; background: var(--led); filter: blur(15px); opacity: .45; transition: background .4s; }
.tiki { position: relative; z-index: 2; width: clamp(210px, 62%, 290px); margin-bottom: 14px; }
.tiki__roof { height: 50px; border-radius: 50% 50% 10px 10px / 92% 92% 10px 10px; background: repeating-linear-gradient(93deg, #7a4f25 0 7px, #8a5a2b 7px 14px); box-shadow: 0 6px 12px rgba(0, 0, 0, .5); }
.tiki__led { height: 9px; margin: 3px 8px 0; border-radius: 6px; background: var(--led); box-shadow: 0 0 18px 4px var(--led), 0 0 34px 9px var(--led); transition: background .4s, box-shadow .4s; }
.tiki__body { height: 64px; margin: 6px 18px 0; border-radius: 4px; background: linear-gradient(180deg, #3a2a1a, #241810); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .05); }
.tiki__deck { height: 11px; margin: 0 6px; background: #5a3a1a; border-radius: 3px; }
.tikilights__btns { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 20px; }
.tikilights__btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); cursor: pointer; background: var(--c); transition: transform .2s, box-shadow .2s; }
.tikilights__btn:hover { transform: scale(1.12); }
.tikilights__btn.is-on { box-shadow: 0 0 0 3px var(--paper), 0 0 18px 3px var(--c); transform: scale(1.12); }
.tikilights__btn--party { background: conic-gradient(from 0deg, #ff6a3d, #ffc24a, #39d98a, #1ec8d8, #9b5de5, #ff6a3d); }
.tikilights__hint { text-align: center; color: rgba(255, 253, 246, .7); font-size: .88rem; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .wbingo.is-complete .wbingo__grid, .sunplanner__sky, .sunplanner__sun { animation: none; transition: none; }
}

/* ---------- "What's Biting?" season chart (Fishing page) ---------- */
.fishchart-sec { background: var(--deep); }
.fishchart-sec .section__title { color: var(--paper); }
.fishchart-sec .eyebrow--dark { color: var(--sun); }
.fishchart-sec .section__sub { color: rgba(255, 253, 246, .82); }
.fishchart__seasons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 26px; }
.fseason { font-family: var(--display); font-weight: 700; font-size: .95rem; padding: 10px 18px; border-radius: 100px; border: 2px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: var(--paper); cursor: pointer; transition: transform .2s cubic-bezier(.34,1.6,.5,1), background .2s, border-color .2s, box-shadow .2s; }
.fseason:hover { border-color: var(--aqua); transform: translateY(-2px); }
.fseason.is-on { background: linear-gradient(135deg, var(--aqua), var(--teal-2)); border-color: transparent; color: #04242d; box-shadow: 0 8px 18px rgba(30, 200, 216, .3); }
.fishgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fcard { background: rgba(255, 253, 246, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 22px 14px; text-align: center; transition: transform .35s cubic-bezier(.34,1.5,.5,1), box-shadow .35s, border-color .35s, background .35s, opacity .35s; }
.fcard__e { font-size: 2.2rem; display: block; margin-bottom: 8px; filter: grayscale(.55); opacity: .65; transition: filter .35s, opacity .35s, transform .35s; }
.fcard h3 { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--paper); margin-bottom: 9px; }
.fcard__badge { display: inline-block; font-family: var(--display); font-weight: 700; font-size: .76rem; padding: 4px 12px; border-radius: 100px; background: rgba(255, 255, 255, .1); color: rgba(255, 253, 246, .6); }
.fcard.is-hot { border-color: var(--sun); background: rgba(255, 194, 74, .12); transform: translateY(-5px); box-shadow: 0 0 24px rgba(255, 194, 74, .32); }
.fcard.is-hot .fcard__e { filter: none; opacity: 1; transform: scale(1.12); }
.fcard.is-hot .fcard__badge { background: var(--sun); color: var(--deep); }
.fcard.is-good .fcard__e { filter: none; opacity: .95; }
.fcard.is-good .fcard__badge { background: rgba(127, 230, 238, .22); color: var(--aqua-2); }
.fcard.is-slow { opacity: .5; }
.fishchart__note { text-align: center; margin-top: 24px; font-family: var(--display); font-weight: 600; color: var(--aqua-2); font-size: 1.02rem; min-height: 1.4em; }
@media (max-width: 760px) { .fishgrid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .fcard, .fcard__e { transition: none; } }

/* ---------- "Chart Your Island Day" island picker (Beach & Island page) ---------- */
.islandmap-sec { background: var(--sand); }
.islandmap { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(18px, 4vw, 40px); align-items: center; margin-top: 8px; }
.islandmap__stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: radial-gradient(120% 100% at 30% 18%, #9aeef4 0%, var(--aqua) 36%, var(--teal-2) 100%); }
.islandmap__route { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.islandmap__route path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.1; stroke-dasharray: 3 3; stroke-linecap: round; }
.islandmap__compass { position: absolute; top: 12px; right: 14px; z-index: 3; display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, .85); font-family: var(--display); font-size: 1.4rem; line-height: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.islandmap__compass small { font-size: .58rem; font-weight: 700; letter-spacing: .1em; }
.islandmap__mainland { position: absolute; left: -12%; bottom: -14%; width: 52%; height: 42%; z-index: 0; border-radius: 50%; background: linear-gradient(160deg, #ecdcb6, #d8c290); opacity: .9; }
.isle { position: absolute; transform: translate(-50%, -50%); z-index: 2; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.isle__blob { width: 56px; height: 42px; border-radius: 50% 50% 48% 52% / 62% 58% 42% 40%; background: linear-gradient(160deg, #f7efdd, #e6d4ad); box-shadow: 0 6px 14px rgba(0, 0, 0, .25), inset 0 -3px 6px rgba(180, 150, 100, .4); transition: transform .25s cubic-bezier(.34, 1.6, .5, 1), box-shadow .25s; }
.isle__label { font-family: var(--display); font-weight: 700; font-size: .72rem; color: var(--deep); background: rgba(255, 253, 246, .92); padding: 2px 9px; border-radius: 100px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: background .25s, color .25s; }
.isle:hover .isle__blob { transform: scale(1.1); }
.isle.is-on .isle__blob { transform: scale(1.2); box-shadow: 0 0 0 3px var(--coral), 0 9px 18px rgba(0, 0, 0, .3); }
.isle.is-on .isle__label { background: var(--coral); color: #fff; }
.islandmap__detail .isle-kicker { font-family: var(--display); font-weight: 800; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 6px; }
.islandmap__detail h3 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--deep); margin-bottom: 2px; }
.isle-tagline { font-family: "Pacifico", cursive; font-size: 1.4rem; color: var(--teal); margin-bottom: 12px; }
.isle-tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0 0 14px; }
.isle-tags li { font-family: var(--display); font-weight: 600; font-size: .78rem; background: rgba(30, 200, 216, .15); color: var(--teal); padding: 5px 12px; border-radius: 100px; }
.isle-desc { color: var(--ink); line-height: 1.65; margin-bottom: 16px; }
.islandmap__detail.is-swap h3, .islandmap__detail.is-swap .isle-tagline, .islandmap__detail.is-swap .isle-desc { animation: isleSwap .35s ease; }
@keyframes isleSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .islandmap { grid-template-columns: 1fr; } .islandmap__stage { aspect-ratio: 3 / 2; } }
@media (prefers-reduced-motion: reduce) { .isle__blob, .islandmap__detail.is-swap h3, .islandmap__detail.is-swap .isle-tagline, .islandmap__detail.is-swap .isle-desc { transition: none; animation: none; } }

/* ---------- Animated hop-on/hop-off route (Water Shuttle page) ---------- */
.shuttleroute-sec { background: var(--sand); }
.sroute { position: relative; max-width: 880px; margin: 14px auto 0; }
.sroute__line { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(180deg, var(--teal), var(--aqua) 60%, var(--teal-2)); }
.sroute__boat { position: absolute; left: 50%; top: 30px; transform: translate(-50%, -50%); z-index: 5; width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.45rem; background: var(--paper); border-radius: 50%; box-shadow: 0 6px 16px rgba(0, 0, 0, .28), 0 0 0 3px var(--sun); transition: top .6s cubic-bezier(.5, 0, .3, 1); }
.sstop { position: relative; display: flex; align-items: flex-start; margin-bottom: clamp(26px, 5vw, 50px); }
.sstop:last-child { margin-bottom: 0; }
.sstop__marker { position: absolute; left: 50%; top: 8px; transform: translate(-50%, 0) scale(1); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(165deg, #0a4a52, var(--deep)); display: grid; place-items: center; z-index: 3; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); transition: transform .55s cubic-bezier(.34, 1.7, .5, 1); }
.sstop__ic { font-size: 1.45rem; line-height: 1; }
.sstop__marker::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--sun); opacity: 0; }
.sstop__card { width: calc(50% - 56px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.sstop--right { justify-content: flex-end; }
.sstop__num { display: inline-block; font-family: var(--display); font-weight: 800; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: 2px; }
.sstop__card h3 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--deep); margin-bottom: 3px; }
.sstop__sub { font-size: .85rem; color: var(--muted); margin-bottom: 13px; }
.sstop__spots { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sstop__spots li { position: relative; padding-left: 20px; font-size: .94rem; color: var(--ink); line-height: 1.35; }
.sstop__spots li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
/* JS-gated arrival animation */
.js .sstop__marker { transform: translate(-50%, 0) scale(0); }
.js .sstop__card { opacity: 0; transition: opacity .6s ease, transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.js .sstop--right .sstop__card { transform: translateX(38px); }
.js .sstop--left .sstop__card { transform: translateX(-38px); }
.js .sstop__spots li { opacity: 0; transform: translateY(7px); transition: opacity .4s ease, transform .4s ease; }
.sstop.is-arrived .sstop__marker { transform: translate(-50%, 0) scale(1); }
.sstop.is-arrived .sstop__marker::after { animation: sripple .85s ease-out; }
@keyframes sripple { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
.sstop.is-arrived .sstop__card { opacity: 1; transform: none; }
.sstop.is-arrived .sstop__spots li { opacity: 1; transform: none; }
.sstop.is-arrived .sstop__spots li:nth-child(2) { transition-delay: .07s; }
.sstop.is-arrived .sstop__spots li:nth-child(3) { transition-delay: .14s; }
.sstop.is-arrived .sstop__spots li:nth-child(4) { transition-delay: .21s; }
.sstop.is-arrived .sstop__spots li:nth-child(5) { transition-delay: .28s; }
@media (max-width: 680px) {
  .sroute { max-width: 520px; }
  .sroute__line, .sroute__boat { left: 28px; }
  .sstop__marker { left: 28px; }
  .sstop, .sstop--right { justify-content: flex-end; }
  .sstop__card { width: calc(100% - 72px); }
  .js .sstop--left .sstop__card, .js .sstop--right .sstop__card { transform: translateX(28px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .sstop__marker { transform: translate(-50%, 0) scale(1); }
  .js .sstop__card { opacity: 1; transform: none; }
  .js .sstop__spots li { opacity: 1; transform: none; }
  .sstop.is-arrived .sstop__marker::after { animation: none; }
  .sroute__boat { display: none; }
}

/* --- interactive route: controls, active stop, boat bob --- */
.sroute__controls { display: flex; align-items: center; justify-content: center; gap: 16px 22px; flex-wrap: wrap; margin: 4px 0 32px; }
.sroute__play { min-width: 178px; }
.sroute__play-ic { display: inline-block; margin-right: 8px; }
.sroute__now { font-family: var(--display); font-weight: 700; font-size: .98rem; color: var(--teal); }
.sroute__now b { color: var(--coral-d); }
.js .sstop__marker, .js .sstop__card { cursor: pointer; }
.js .sstop__marker:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.js .sstop.is-active .sstop__marker { box-shadow: 0 0 0 4px var(--sun), 0 8px 20px rgba(0, 0, 0, .35); }
.js .sstop.is-active .sstop__marker::after { animation: sripple .85s ease-out; }
.js .sstop.is-active .sstop__card { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--coral), var(--shadow-md); }
.js .sstop.is-active .sstop__num { color: var(--coral-d); }
.js .sroute__boat { animation: boatBob 2.6s ease-in-out infinite; }
@keyframes boatBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -64%); } }
.sroute__play.is-playing { background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%); }
@media (prefers-reduced-motion: reduce) { .js .sroute__boat { animation: none; } .js .sstop.is-active .sstop__marker::after { animation: none; } }

/* ============================================================
   BACHELORETTE — "Build Her Bash" planner (signature interactive)
   ============================================================ */
.bachbash-sec { background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%); }
.bachbash {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 30px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 880px) { .bachbash { grid-template-columns: 1fr; gap: 24px; } }

/* steps / headings */
.bachbash__step { margin-bottom: 26px; }
.bachbash__step:last-child { margin-bottom: 0; }
.bachbash__steph {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 700; font-size: 1.18rem;
  color: var(--deep); margin: 0 0 15px;
}
.bachbash__stepn {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; background: linear-gradient(180deg, var(--coral-2), var(--coral-d));
  color: #fff; font-size: .95rem; font-weight: 800;
  box-shadow: 0 4px 12px rgba(232, 84, 43, .35);
}

/* vibe cards */
.bachbash__vibes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .bachbash__vibes { grid-template-columns: 1fr; } }
.bbvibe {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 14px 13px; border-radius: 16px;
  background: var(--paper); border: 2px solid var(--line);
  font: inherit; color: var(--ink);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.bbvibe:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--aqua); }
.bbvibe__ic { font-size: 1.7rem; line-height: 1; }
.bbvibe__t { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--deep); }
.bbvibe__d { font-size: .82rem; color: var(--muted); }
.bbvibe.is-on {
  border-color: var(--sun); background: var(--sand-2);
  box-shadow: 0 0 0 3px var(--sun-2), var(--shadow-md); transform: translateY(-2px);
}
.bbvibe.is-on::after {
  content: "✓"; position: absolute; top: 9px; right: 11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral-d); color: #fff; font-size: .8rem; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.25);
  animation: bbPop .3s cubic-bezier(.34,1.56,.64,1);
}

/* add-on chips */
.bachbash__addons { display: flex; flex-wrap: wrap; gap: 9px; }
.bbadd {
  cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600;
  padding: 9px 14px; border-radius: 999px;
  background: var(--paper); border: 2px solid var(--line); color: var(--deep);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.bbadd:hover { transform: translateY(-2px); border-color: var(--coral-2); box-shadow: var(--shadow-sm); }
.bbadd[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--coral-2), var(--coral-d));
  border-color: var(--coral-d); color: #fff;
  box-shadow: 0 6px 16px rgba(232, 84, 43, .3);
}
.bbadd[aria-pressed="true"]:hover { transform: translateY(-2px); }
.bachbash__hint, .bachbash__note { font-size: .85rem; color: var(--muted); margin: 12px 0 0; }
.bachbash__note { text-align: center; margin-top: 22px; }

/* live preview stage */
.bachbash__preview { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 880px) { .bachbash__preview { position: static; } }
.bbstage {
  position: relative; overflow: hidden; height: 340px; border-radius: 22px;
  background: var(--bb-grad, linear-gradient(180deg,#ffd982,#e8542b));
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.4);
  transition: background .6s ease;
}
.bbstage__sun {
  position: absolute; top: 38px; right: 42px; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,247,224,.95) 40%, rgba(255,255,255,0) 72%);
  filter: blur(.5px);
}
.bbstage__sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(4,36,45,.32));
  border-radius: 50% 50% 0 0 / 26px 26px 0 0;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
}
.bbstage__boat {
  position: absolute; left: 50%; bottom: 30%; transform: translate(-50%, 0);
  font-size: 3.4rem; line-height: 1; z-index: 2;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.3));
  animation: bbBoatBob 3s ease-in-out infinite;
}
.bbstage__tag {
  position: absolute; left: 14px; bottom: 14px; right: 14px; z-index: 3; margin: 0;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  background: rgba(4,36,45,.28); backdrop-filter: blur(3px);
  padding: 9px 14px; border-radius: 12px;
  transition: opacity .3s ease, transform .3s ease;
}
/* floating add-on tokens */
.bbstage__tokens { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bbtoken {
  position: absolute; font-size: 1.7rem; line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.28));
  animation: bbPop .42s cubic-bezier(.34,1.56,.64,1) both, bbFloat 4.5s ease-in-out infinite;
}
.bbtoken.is-leaving { animation: bbPopOut .3s ease forwards; }

/* summary card */
.bbsummary {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 18px 16px; box-shadow: var(--shadow-md);
  transition: box-shadow .35s ease, transform .35s ease;
}
.bbsummary__h {
  font-family: var(--script); font-size: 1.5rem; color: var(--coral-d);
  margin: 0 0 2px; line-height: 1;
}
.bbsummary__vibe {
  font-family: var(--display); font-weight: 700; font-size: 1.06rem; color: var(--deep);
  margin: 0 0 12px; display: flex; align-items: center; gap: 7px;
}
.bbsummary__vibe span[aria-hidden] { color: var(--sun); }
.bbsummary__list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.bbsummary__empty { color: var(--muted); font-size: .88rem; font-style: italic; }
.bbchip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--sand-2); color: var(--deep); border-radius: 999px;
  padding: 5px 12px; font-size: .85rem; font-weight: 600;
  animation: bbPop .32s cubic-bezier(.34,1.56,.64,1);
}
.bbsummary__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bbsummary__count { font-family: var(--display); font-weight: 700; color: var(--teal); font-size: .92rem; }
.bbsummary__cta { white-space: nowrap; }
.bachbash.is-celebrating .bbsummary { box-shadow: 0 0 0 3px var(--sun-2), 0 18px 40px rgba(232,84,43,.22); transform: translateY(-2px); }
.bachbash.is-celebrating .bbsummary__count { color: var(--coral-d); }

/* confetti */
.bbconfetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.bbconfetti i {
  position: absolute; top: -24px; width: 10px; height: 14px; border-radius: 2px;
  opacity: .95; animation: bbConfetti 1.5s ease-in forwards;
}

@keyframes bbPop { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bbPopOut { to { transform: scale(0) rotate(20deg); opacity: 0; } }
@keyframes bbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes bbBoatBob { 0%, 100% { transform: translate(-50%, 0) rotate(-2deg); } 50% { transform: translate(-50%, -10px) rotate(2deg); } }
@keyframes bbConfetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(102vh) rotate(560deg); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .bbstage__boat, .bbtoken { animation: none !important; }
  .bbconfetti { display: none; }
}

/* ============================================================
   SPECIAL OCCASIONS — "What are we celebrating?" concierge
   ============================================================ */
.occasion-sec { background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%); }
.occ { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; margin-top: 8px; }
@media (max-width: 860px) { .occ { grid-template-columns: 1fr; gap: 20px; } }

/* occasion picker */
.occ__picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 860px) { .occ__picker { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .occ__picker { grid-template-columns: 1fr 1fr; } }
.occtile {
  cursor: pointer; font: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 13px 9px; border-radius: 15px;
  background: var(--paper); border: 2px solid var(--line); color: var(--deep);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.occtile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--aqua); }
.occtile__ic { font-size: 1.7rem; line-height: 1; }
.occtile__t { font-family: var(--display); font-weight: 600; font-size: .82rem; line-height: 1.15; }
.occtile.is-on {
  border-color: var(--sun); background: var(--sand-2);
  box-shadow: 0 0 0 3px var(--sun-2), var(--shadow-md);
}
.occtile.is-on .occtile__ic { animation: occMedalPop .4s cubic-bezier(.34,1.56,.64,1); }

/* morphing concierge card */
.occcard {
  position: relative; border-radius: 22px; overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.occcard__head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 26px 26px 24px;
  background: var(--occ-grad, linear-gradient(135deg,#ffd982,#e8542b));
  color: #fff; transition: background .55s ease;
}
.occcard__medal {
  flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem; z-index: 2;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55);
  backdrop-filter: blur(3px); box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.occcard__headtext { z-index: 2; }
.occcard__kicker {
  margin: 0 0 2px; font-family: var(--display); font-weight: 600;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.occcard__title {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.12;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
/* floating themed flair */
.occcard__flair { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.occflair {
  position: absolute; bottom: -10px; font-size: 1.4rem; line-height: 1; opacity: 0;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
  animation: occFloatUp 2.6s ease-out forwards;
}

.occcard__body { padding: 22px 26px 26px; }
.occcard__blurb { margin: 0 0 16px; color: var(--ink); font-size: 1.02rem; line-height: 1.6; }
.occcard__mh {
  margin: 0 0 10px; font-family: var(--display); font-weight: 700;
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; color: var(--teal);
}
.occcard__moments { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.occcard__moments li {
  position: relative; padding-left: 30px; color: var(--ink); font-size: .98rem; line-height: 1.45;
}
.occcard__moments li::before {
  content: "✦"; position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sand-2); color: var(--coral-d); font-size: .72rem; font-weight: 800;
}
.occcard__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.occtag {
  background: var(--sand-2); color: var(--deep); border-radius: 999px;
  padding: 5px 13px; font-size: .82rem; font-weight: 600;
}
.occcard__cta { width: fit-content; }
.occ__note { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 22px; }

/* content swap transition */
.occcard__body, .occcard__medal, .occcard__kicker, .occcard__title { transition: opacity .28s ease, transform .28s ease; }
.occ.is-swapping .occcard__body { opacity: .25; transform: translateY(8px); }
.occ.is-swapping .occcard__medal { opacity: .3; transform: scale(.85); }
.occ.is-swapping .occcard__kicker, .occ.is-swapping .occcard__title { opacity: .3; }

@keyframes occFloatUp {
  0% { opacity: 0; transform: translateY(0) scale(.7) rotate(0); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-128px) scale(1.05) rotate(var(--occ-rot, 14deg)); }
}
@keyframes occMedalPop { 0% { transform: scale(0) rotate(-14deg); } 70% { transform: scale(1.22) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .occflair { display: none; }
  .occcard__head, .occcard__body, .occcard__medal, .occcard__kicker, .occcard__title { transition: none; }
}

/* ============================================================
   TIKI PAGE — colorful tiki decor (scoped to tiki-tours.html;
   these classes/symbols exist only on that page, so the other
   tour pages are unaffected)
   ============================================================ */
.tikidefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tdec, .ttk, .tg { display: block; }
.tdec svg, .ttk svg, .tg svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* gentle sway + flame flicker (animate inside <use> shadow trees too) */
@keyframes tsway { 0%,100% { transform: rotate(var(--r,0deg)); } 50% { transform: rotate(calc(var(--r,0deg) + 3deg)) translateY(-5px); } }
.flame-o, .flame-y { transform-box: fill-box; transform-origin: 50% 100%; }
.flame-o { animation: tflame 1.05s ease-in-out infinite; }
.flame-y { animation: tflame 0.8s ease-in-out infinite reverse; }
@keyframes tflame { 0%,100% { transform: scaleY(1) translateX(0); } 30% { transform: scaleY(1.14) translateX(-1px); } 65% { transform: scaleY(.9) translateX(1px); } }

/* ---- hero corner tikis ---- */
.thero { position: relative; }
.thero__tikis { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; z-index: 3; }
.thero__tikis .ttk { position: absolute; }
.thero__tikis .ttk svg { filter: drop-shadow(0 9px 12px rgba(0,0,0,.32)); }
.ttk--m1 { width: 80px; height: 120px; right: 40px; bottom: 4px; --r: 6deg; animation: tsway 5s ease-in-out infinite; }
.ttk--m2 { width: 64px; height: 96px; right: 116px; bottom: -2px; --r: -5deg; animation: tsway 6s ease-in-out infinite .4s; }
.ttk--leaf1 { width: 124px; height: 124px; left: 6px; bottom: -16px; transform: rotate(-20deg); }
.ttk--flower1 { width: 62px; height: 62px; left: 116px; bottom: 6px; --r: -8deg; animation: tsway 5.5s ease-in-out infinite .25s; }
@media (max-width: 720px) { .ttk--m2, .ttk--flower1 { display: none; } .ttk--m1 { width: 58px; height: 87px; right: 12px; } .ttk--leaf1 { width: 86px; height: 86px; left: 0; } }

/* ---- bamboo photo frame ---- */
.tikiframe {
  border: 13px solid transparent;
  border-image: repeating-linear-gradient(46deg, #e6bd5d 0 11px, #c2913a 11px 14px, #936d1e 14px 16px) 15;
  position: relative;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  background: #c2913a;
}
.tikiframe > img, .tikiframe > video { border-radius: 3px; }
/* corner lashings */
.tikiframe::before, .tikiframe::after {
  content: ""; position: absolute; width: 26px; height: 26px; z-index: 4; pointer-events: none;
  background: center/contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%236b4a1e' stroke-width='6' stroke-linecap='round'%3E%3Cline x1='8' y1='8' x2='32' y2='32'/%3E%3Cline x1='32' y1='8' x2='8' y2='32'/%3E%3C/g%3E%3Cg stroke='%23a87a2e' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='8' y1='8' x2='32' y2='32'/%3E%3Cline x1='32' y1='8' x2='8' y2='32'/%3E%3C/g%3E%3C/svg%3E");
}
.tikiframe::before { top: -20px; left: -20px; }
.tikiframe::after { bottom: -20px; right: -20px; }

/* ---- tiki garland divider band ---- */
.tikigarland {
  display: flex; align-items: flex-end; justify-content: center; gap: 16px;
  overflow: hidden; padding: 16px 12px; margin: 0;
  background: linear-gradient(90deg, #0c7385, #0f93a6 30%, #1ec8d8 50%, #0f93a6 70%, #0c7385);
  box-shadow: inset 0 8px 14px rgba(0,0,0,.18), inset 0 -8px 14px rgba(0,0,0,.18);
}
.tikigarland .tg { flex: 0 0 auto; }
.tikigarland .tg svg { filter: drop-shadow(0 5px 7px rgba(0,0,0,.28)); }
.tg--mask { width: 46px; height: 69px; --r: 0deg; animation: tsway 4.5s ease-in-out infinite; }
.tg--flower { width: 46px; height: 46px; margin-bottom: 8px; --r: -6deg; animation: tsway 4s ease-in-out infinite .3s; }
.tg--leaf { width: 56px; height: 56px; margin-bottom: 4px; transform: rotate(-12deg); }
.tikigarland .tg:nth-child(even) { animation-delay: .5s; }
@media (max-width: 620px) { .tikigarland { gap: 10px; } .tg--mask { width: 38px; height: 57px; } .tg--flower, .tg--leaf { width: 38px; height: 38px; } }

/* ---- corner decor clusters on sections ---- */
.tiki-corner { position: relative; overflow: hidden; }
.tdec--cluster { position: absolute; pointer-events: none; z-index: 2; display: flex; align-items: flex-end; gap: 6px; opacity: .96; }
.tdec--cluster .tdec-mask { width: 60px; height: 90px; --r: -6deg; animation: tsway 6s ease-in-out infinite; }
.tdec--cluster .tdec-flower { width: 46px; height: 46px; margin-bottom: 10px; --r: 8deg; animation: tsway 5s ease-in-out infinite .3s; }
.tdec--cluster .tdec-mask svg, .tdec--cluster .tdec-flower svg { filter: drop-shadow(0 7px 10px rgba(0,0,0,.22)); }
.tdec--bl { left: -10px; bottom: -8px; }
.tdec--br { right: -10px; bottom: -8px; flex-direction: row-reverse; }
.tdec--tr { right: -8px; top: -6px; }
@media (max-width: 720px) { .tdec--cluster { transform: scale(.7); transform-origin: bottom; opacity: .85; } }

/* ---- tiki torches flanking booking CTA ---- */
.tikitorch { position: absolute; bottom: 0; width: 56px; height: 150px; z-index: 2; pointer-events: none; }
.tikitorch svg { filter: drop-shadow(0 6px 9px rgba(0,0,0,.2)); }
.tikitorch--l { left: 4%; } .tikitorch--r { right: 4%; }
@media (max-width: 980px) { .tikitorch { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ttk, .tg--mask, .tg--flower, .tdec-mask, .tdec-flower, .flame-o, .flame-y { animation: none !important; }
}

/* ============================================================
   TIKI PAGE v2 — real cartoon art (sanddollartikitours assets).
   Overrides the earlier hand-coded SVG decor with WebP images.
   ============================================================ */
/* hero corner tikis (now real art) */
.thero__tikis { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 3; pointer-events: none; }
.thero__tikis .ttk { position: absolute; bottom: 8px; width: auto; height: 158px; filter: drop-shadow(0 9px 13px rgba(0,0,0,.34)); animation: tsway 5s ease-in-out infinite; }
.ttk--right { right: 34px; --r: 4deg; }
.ttk--left  { left: 26px; --r: -4deg; animation-duration: 6s; }
@media (max-width: 720px) { .thero__tikis .ttk { height: 96px; } .ttk--right { right: 10px; } .ttk--left { display: none; } }

/* floral border divider (replaces the teal garland) */
.tikidivider { display: flex; justify-content: center; padding: 10px 16px 2px; }
.tikidivider .tikiborder { width: min(700px, 92%); height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }

/* corner clusters now hold a single real tiki */
.tdec--cluster img { display: block; height: 170px; width: auto; filter: drop-shadow(0 8px 11px rgba(0,0,0,.24)); animation: tsway 6s ease-in-out infinite; }
.tdec--cluster.tdec--bl { left: -6px; bottom: -8px; }
.tdec--cluster.tdec--br { right: -6px; bottom: -8px; }
@media (max-width: 720px) { .tdec--cluster img { height: 104px; } }

/* tiki guys flanking the booking CTA (replace torches) */
.tikiflank { position: absolute; bottom: -6px; width: auto; height: 210px; z-index: 2; pointer-events: none; filter: drop-shadow(0 9px 12px rgba(0,0,0,.22)); }
.tikiflank--l { left: 3%; transform: scaleX(-1); } .tikiflank--r { right: 3%; }
@media (max-width: 1040px) { .tikiflank { display: none; } }

/* subtle tropical pattern behind a section */
.tiki-pattern-bg { position: relative; }
.tiki-pattern-bg::before { content: ""; position: absolute; inset: 0; background: url("../img/tiki/tiki-pattern.webp") repeat; background-size: 360px; opacity: .10; z-index: 0; pointer-events: none; }
.tiki-pattern-bg > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .thero__tikis .ttk, .tdec--cluster img { animation: none !important; } }

/* ============================================================
   TIKI STORM — eruption / night-mode theatrical overlay
   Triggered by body.eruption-mode (JS adds for ~17s).
   Timeline mapped to %: 1s=6 2s=12 3s=18 4s=24 5s=29 6s=35
   7s=41 10s=59 13s=76 15s=88 17s=100
   ============================================================ */
.tikistorm { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; visibility: hidden; }
body.eruption-mode .tikistorm { opacity: 1; visibility: visible; }

.tikistorm > * { position: absolute; }
.storm-dim { inset: 0; background: radial-gradient(120% 90% at 50% 100%, rgba(40,12,4,.30), rgba(6,16,28,.66) 70%); opacity: 0; }
.storm-flash { inset: 0; background: #fff; opacity: 0; mix-blend-mode: screen; }
.storm-glow { left: 0; right: 0; bottom: 0; height: 60%; background: radial-gradient(60% 100% at 50% 100%, rgba(255,150,40,.55), rgba(255,90,20,.18) 55%, transparent 75%); opacity: 0; }
.storm-volcano { bottom: -8px; left: 50%; width: clamp(220px, 30vw, 360px); height: auto; transform: translateX(-50%) translateY(60px) scale(.9); opacity: 0; filter: drop-shadow(0 0 26px rgba(255,120,30,.6)); }
.storm-smoke { bottom: 20%; left: 50%; width: clamp(160px, 22vw, 260px); height: auto; transform: translateX(-50%) translateY(40px) scale(.7); opacity: 0; }
.storm-flame { bottom: -4px; width: clamp(90px,12vw,150px); height: auto; opacity: 0; filter: drop-shadow(0 0 14px rgba(255,140,30,.8)); }
.storm-flame--l { left: 16%; } .storm-flame--r { right: 16%; }
.storm-cloud { top: -10px; width: clamp(220px, 30vw, 380px); height: auto; opacity: 0; filter: brightness(.8); }
.storm-cloud--l { left: -3%; } .storm-cloud--r { right: -3%; transform: scaleX(-1); }
.storm-bolt { top: 0; width: clamp(120px,16vw,210px); height: auto; opacity: 0; filter: drop-shadow(0 0 10px rgba(255,240,140,.9)); }
.storm-bolt--l { left: 18%; } .storm-bolt--r { right: 16%; transform: scaleX(-1); }
.storm-embers { left: 0; right: 0; bottom: 0; height: 100%; }
.storm-ember { position: absolute; bottom: 4%; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #ffd24a, #ff6a1a 70%); box-shadow: 0 0 8px rgba(255,140,30,.9); opacity: 0; }

/* run the choreography only while erupting */
body.eruption-mode .storm-dim    { animation: stDim 17s ease both; }
body.eruption-mode .storm-flash  { animation: stFlash 17s linear both; }
body.eruption-mode .storm-glow   { animation: stGlow 17s ease both; }
body.eruption-mode .storm-volcano{ animation: stVolcano 17s ease both; }
body.eruption-mode .storm-smoke  { animation: stSmoke 17s ease-out both; }
body.eruption-mode .storm-flame  { animation: stFlame 17s ease both; }
body.eruption-mode .storm-cloud  { animation: stCloud 17s ease both; }
body.eruption-mode .storm-cloud--r { animation: stCloudR 17s ease both; }
body.eruption-mode .storm-bolt   { animation: stBolt 17s linear both; }
body.eruption-mode .storm-ember  { animation: stEmber 2.6s ease-in infinite; }
/* tiki masks glow + booking flanks light up during the storm */
body.eruption-mode .ttk, body.eruption-mode .tikiflank, body.eruption-mode .tdec--cluster img { filter: drop-shadow(0 0 14px rgba(255,150,40,.85)) drop-shadow(0 3px 6px rgba(0,0,0,.4)); }

@keyframes stDim   { 0%{opacity:0} 12%{opacity:.55} 76%{opacity:.5} 90%{opacity:.28} 100%{opacity:0} }
@keyframes stFlash { 0%,11%{opacity:0} 13%{opacity:.85} 16%{opacity:0} 39%{opacity:0} 41%{opacity:.7} 44%{opacity:0} 60%{opacity:0} 62%{opacity:.8} 65%{opacity:0} 100%{opacity:0} }
@keyframes stGlow  { 0%,18%{opacity:0} 35%{opacity:.5} 59%{opacity:.85} 80%{opacity:.6} 100%{opacity:0} }
@keyframes stVolcano { 0%{opacity:0;transform:translateX(-50%) translateY(60px) scale(.9)} 20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} 35%{transform:translateX(-50%) translateY(-4px) scale(1.05)} 41%{transform:translateX(-50%) translateY(0) scale(1.02)} 88%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} 100%{opacity:0;transform:translateX(-50%) translateY(36px) scale(.95)} }
@keyframes stSmoke { 0%,22%{opacity:0;transform:translateX(-50%) translateY(40px) scale(.7)} 41%{opacity:.92} 60%{transform:translateX(-50%) translateY(-34px) scale(1.12)} 88%{opacity:.6;transform:translateX(-50%) translateY(-60px) scale(1.2)} 100%{opacity:0;transform:translateX(-50%) translateY(-90px) scale(1.25)} }
@keyframes stFlame { 0%,29%{opacity:0;transform:translateY(20px) scale(.8)} 41%{opacity:1;transform:translateY(0) scale(1)} 50%{transform:translateY(0) scale(1.08)} 88%{opacity:.9} 100%{opacity:0} }
@keyframes stCloud { 0%{opacity:0;transform:translateY(-40px)} 12%{opacity:.85} 85%{opacity:.78} 100%{opacity:0;transform:translateY(-20px)} }
@keyframes stCloudR { 0%{opacity:0;transform:scaleX(-1) translateY(-40px)} 12%{opacity:.85} 85%{opacity:.78} 100%{opacity:0;transform:scaleX(-1) translateY(-20px)} }
@keyframes stBolt  { 0%,12%{opacity:0} 14%{opacity:1} 19%{opacity:0} 40%{opacity:0} 42%{opacity:1} 47%{opacity:0} 61%{opacity:0} 63%{opacity:.95} 68%{opacity:0} 100%{opacity:0} }
@keyframes stEmber { 0%{opacity:0;transform:translateY(0) scale(1)} 12%{opacity:1} 100%{opacity:0;transform:translateY(-60vh) scale(.4)} }

/* "Start Tiki Storm" trigger button in the Light Up the Tiki section */
.stormtrigger { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: 700 1rem var(--display); color: #fff; padding: 12px 22px; border: none; border-radius: 999px;
  background: linear-gradient(180deg, #ff8a1e, #e8542b); box-shadow: 0 8px 22px rgba(232,84,43,.45), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .2s ease, box-shadow .2s ease; }
.stormtrigger:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 28px rgba(232,84,43,.55); }
.stormtrigger:disabled { opacity: .6; cursor: default; transform: none; }
.stormtrigger__ic { font-size: 1.2rem; animation: tsway 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  body.eruption-mode .tikistorm > * { animation-duration: .01s !important; }
  .storm-ember, .storm-flame { display: none; }
}

/* ============================================================
   TIKI HERO SCENE — layered tropical framing (real art)
   ============================================================ */
.thero__sunset { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(68% 54% at 72% 20%, rgba(255,184,74,.45), rgba(255,140,50,.12) 46%, transparent 68%);
  mix-blend-mode: soft-light; }
.thero__frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.thero__leaf { position: absolute; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.thero__leaf--tr1 { top: -28px; right: -22px; width: min(232px, 30vw); transform: rotate(16deg) scaleX(-1); }
.thero__leaf--tr2 { top: 40px; right: -36px; width: min(182px, 24vw); transform: rotate(-8deg); }
.thero__leaf--rmid { top: 132px; right: 16px; width: min(84px, 12vw); transform: rotate(8deg); }
.thero__leaf--bl { left: -26px; bottom: 64px; width: min(150px, 22vw); transform: rotate(150deg); opacity: .92; }
.thero__volcano { position: absolute; left: 5%; bottom: 25%; width: min(94px, 15vw); opacity: .4;
  filter: brightness(.72) saturate(.85) blur(.4px); }
.thero__inner { position: relative; z-index: 6; }
@media (max-width: 760px) {
  .thero__leaf--rmid, .thero__volcano, .thero__leaf--bl { display: none; }
  .thero__leaf--tr1 { width: 132px; } .thero__leaf--tr2 { width: 104px; }
}

/* ============================================================
   TIKI SECTIONS THEMING (Phase 4) — route map, booking hut,
   foliage edge accents
   ============================================================ */
/* (removed) old tiki route-map styling — it used the SHARED .tspots/.spots__grid/.spot
   selectors, which leaked a dashed line + emoji icons onto other tour pages'
   "where we go" sections (e.g. the shelling page). The rebuilt tiki page uses
   its own .tk-dests classes, so this generic styling is no longer needed. */

/* --- Booking as a glowing tiki hut --- */
.booking.tiki-corner::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 130%; height: 100%;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(58% 80% at 50% 90%, rgba(255,166,64,.34), rgba(255,140,50,.07) 50%, transparent 72%); }
.booking.tiki-corner .container { position: relative; z-index: 1; }
.bookflame { position: absolute; bottom: -4px; width: clamp(64px, 8vw, 104px); height: auto; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 13px rgba(255,140,30,.7)); animation: stFlame2 2.4s ease-in-out infinite; }
.bookflame--l { left: 6%; } .bookflame--r { right: 6%; }
@keyframes stFlame2 { 0%,100% { transform: scaleY(1) } 45% { transform: scaleY(1.1) translateY(-2px) } 70% { transform: scaleY(.94) } }
@media (max-width: 1040px) { .bookflame { display: none; } }

/* --- foliage edge accents (site-wide tropical atmosphere) --- */
.tiki-edged { position: relative; overflow: hidden; }
.tiki-edge { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 6px 11px rgba(0,0,0,.16)); }
.tiki-edge--palm-tr { top: -14px; right: -26px; width: min(150px, 20vw); transform: rotate(14deg) scaleX(-1); }
.tiki-edge--monstera-bl { bottom: -22px; left: -28px; width: min(140px, 20vw); transform: rotate(18deg); }
.toverview.tiki-edged > .container, .tgallery.tiki-edged > .container { position: relative; z-index: 2; }
@media (max-width: 760px) { .tiki-edge { display: none; } }
@media (prefers-reduced-motion: reduce) { .bookflame { animation: none !important; } }

/* ============================================================
   FLOWING LAVA (eruption) + hero cleanup (round 35)
   ============================================================ */
.storm-lava { top: 0; left: 0; right: 0; width: 100%; height: auto; z-index: 6; opacity: 0;
  transform: translateY(-100%); filter: drop-shadow(0 4px 18px rgba(255,80,16,.75)); }
.storm-lavaburst { bottom: 3%; left: 50%; width: clamp(120px, 16vw, 200px); height: auto; opacity: 0; z-index: 5;
  transform: translateX(-50%) scale(.5); filter: drop-shadow(0 0 15px rgba(255,120,30,.85)); }
body.eruption-mode .storm-lava { animation: stLava 17s ease both; }
body.eruption-mode .storm-lavaburst { animation: stBurst 17s ease both; }
@keyframes stLava { 0%{opacity:0;transform:translateY(-100%)} 14%{opacity:1;transform:translateY(0)} 30%{transform:translateY(7px)} 46%{transform:translateY(0)} 62%{transform:translateY(9px)} 85%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-28%)} }
@keyframes stBurst { 0%,32%{opacity:0;transform:translateX(-50%) scale(.4)} 40%{opacity:1;transform:translateX(-50%) scale(1)} 55%{transform:translateX(-50%) scale(1.1)} 85%{opacity:.9} 100%{opacity:0} }

/* hero: bolder tikis + tighter, non-clipping mobile foliage */
.thero__tikis .ttk { height: 184px; }
.ttk--right { right: 26px; } .ttk--left { left: 22px; }
@media (max-width: 760px) {
  .thero__tikis .ttk { height: 110px; bottom: 4px; }
  .ttk--right { right: 6px; }
  .thero__leaf--tr1 { width: 104px; top: -10px; right: -10px; }
  .thero__leaf--tr2 { width: 78px; top: 30px; }
}

/* ============================================================
   VOLCANO FLIPBOOK — 4-frame sprite animation (round 38)
   Overrides the single static storm-volcano with a cycling
   eruption (small -> med -> big -> settle).
   ============================================================ */
.storm-volcano { bottom: -8px; left: 50%; width: clamp(250px, 33vw, 400px); height: auto;
  transform: translateX(-50%) translateY(60px); opacity: 0; z-index: 4; }
.storm-volcano .vframe { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; opacity: 0;
  filter: drop-shadow(0 0 24px rgba(255,120,30,.6)); }
body.eruption-mode .storm-volcano { animation: stVolBox 17s ease both; }
@keyframes stVolBox {
  0% { opacity: 0; transform: translateX(-50%) translateY(60px) scale(.9); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(34px) scale(.96); }
}
body.eruption-mode .vframe { animation: vflip .92s linear infinite; }
body.eruption-mode .vframe--1 { animation-delay: 0s; }
body.eruption-mode .vframe--2 { animation-delay: .23s; }
body.eruption-mode .vframe--3 { animation-delay: .46s; }
body.eruption-mode .vframe--4 { animation-delay: .69s; }
@keyframes vflip { 0%, 23% { opacity: 1; } 24%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.eruption-mode .vframe { animation: none; } body.eruption-mode .vframe--3 { opacity: 1; }
}

/* ============================================================
   TIKI CREW lineup — a bobbing row of the mascots (round 40)
   ============================================================ */
.tikicrew { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 2.4vw, 34px);
  flex-wrap: nowrap; padding: 26px 16px 10px; overflow: hidden; }
.tikicrew__guy { height: clamp(78px, 11vw, 138px); width: auto; flex: 0 0 auto;
  filter: drop-shadow(0 9px 13px rgba(0,0,0,.22)); animation: tcbob 3s ease-in-out infinite; transform-origin: bottom center; }
.tikicrew__guy:nth-child(2n) { animation-delay: .35s; }
.tikicrew__guy:nth-child(3n) { animation-delay: .7s; }
.tikicrew__guy:nth-child(5n) { animation-delay: 1s; }
@keyframes tcbob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
@media (max-width: 680px) { .tikicrew { gap: 8px; } .tikicrew__guy:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .tikicrew__guy { animation: none; } }

/* ============================================================
   round 42 — remove bamboo borders, BIG tikis behind content
   ============================================================ */
/* kill the disliked bamboo frame -> clean rounded image */
.tikiframe { border: 0 !important; background: none !important; box-shadow: var(--shadow-md); }
.tikiframe::before, .tikiframe::after { display: none !important; }

/* hero guardian tikis — bigger, behind the hero content */
.thero__tikis .ttk { height: 320px; }
.ttk--left { left: 0; } .ttk--right { right: 4px; }
@media (max-width: 760px) { .thero__tikis .ttk { height: 168px; } .ttk--right { right: -10px; } .ttk--left { left: -14px; } }

/* section corner clusters — large, layered behind the content boxes */
.tiki-corner > .container { position: relative; z-index: 2; }
.tdec--cluster { z-index: 0; }
.tdec--cluster img { height: 360px; }
@media (max-width: 760px) { .tdec--cluster img { height: 175px; } }

/* booking flanks — large, behind the content */
.tikiflank { height: 360px; z-index: 0; }
.tikiflank--l { left: 0; } .tikiflank--r { right: 0; }