/* Time 2 Thai Tour — shared styles across all pages */
:root { --ember:#E85D1F; --ink:#0A0A0A; }
html { scroll-behavior: smooth; }
body { background: #FBF8F2; color: #0A0A0A; font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 50, 'opsz' 144; }
.font-display-tight { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 0, 'opsz' 144; }
.reveal { opacity:0; transform: translateY(28px); transition: opacity 1.1s cubic-bezier(.2,.65,.2,1), transform 1.1s cubic-bezier(.2,.65,.2,1); }
.reveal.in { opacity:1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.marquee { display:flex; gap:3rem; animation: scroll 38s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover { animation-play-state: paused; }
.underline-grow { background-image: linear-gradient(currentColor,currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size .5s ease; }
.underline-grow:hover { background-size: 100% 1px; }
.nav-pill { backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); background: rgba(251,248,242,0.72); border:1px solid rgba(10,10,10,0.06); }
.btn-ember { background:#E85D1F; color:#fff; transition: transform .3s ease, background .3s ease; }
.btn-ember:hover { background:#FF7A33; transform: translateY(-2px); }
.btn-ghost { border:1px solid #0A0A0A; color:#0A0A0A; transition: all .3s ease; }
.btn-ghost:hover { background:#0A0A0A; color:#FBF8F2; }
.tour-card { transition: transform .6s cubic-bezier(.2,.65,.2,1); }
.tour-card:hover { transform: translateY(-6px); }
.tour-card .photo { overflow:hidden; }
.tour-card .photo img { transition: transform 1.4s cubic-bezier(.2,.65,.2,1); }
.tour-card:hover .photo img { transform: scale(1.06); }
details > summary { list-style: none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }
.lang-menu { display:none; }
.lang-menu.open { display:block; }
.nums { font-variant-numeric: tabular-nums; }
.sticky-cta { transform: translateY(120%); transition: transform .5s cubic-bezier(.2,.65,.2,1); }
.sticky-cta.visible { transform: translateY(0); }
.scroll-progress { position: fixed; top:0; left:0; height:2px; background:#E85D1F; z-index: 100; width:0; }
.hero-img { will-change: transform; }
.ar-3-4 { aspect-ratio: 3/4; }
.ar-4-5 { aspect-ratio: 4/5; }
.ar-16-9 { aspect-ratio: 16/9; }
.ar-1-1 { aspect-ratio: 1/1; }
.img-fallback { background:linear-gradient(135deg,#CDE4ED 0%,#5BE0EE 60%,#E85D1F 100%); }
.no-bar::-webkit-scrollbar { display:none; }
.no-bar { scrollbar-width: none; }
input, select, textarea { font-family: inherit; }
.field { width:100%; background:transparent; border:0; border-bottom:1px solid #0A0A0A; padding:14px 0; font-size:16px; outline:none; transition: border-color .3s; }
.field:focus { border-color:#E85D1F; }
.field-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6B6862; }
/* Jetski rental cards — branded layout with checklist beside the photo */
.jetski-card { background: #FFFFFF; border: 3px solid #E85D1F; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.2,.65,.2,1), box-shadow .5s ease; }
.jetski-card:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -16px rgba(232, 93, 31, 0.3); }
.jetski-card.flagship { border-color: #E85D1F; box-shadow: 0 0 0 4px rgba(232, 93, 31, 0.15); }

.jetski-top { background: #FBF8F2; padding: 20px 22px 80px; position: relative; min-height: 320px; }

.brand-block { display: flex; flex-direction: column; gap: 4px; max-width: 50%; }
.brand-mark { display: inline-flex; align-items: center; gap: 6px; font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 100, 'opsz' 9; font-size: 13px; font-weight: 600; color: #E85D1F; letter-spacing: 0.04em; }
.brand-mark .dot { width: 18px; height: 18px; border-radius: 50%; background: #E85D1F; color: #FBF8F2; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.brand-tagline { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: #6B6862; }
.brand-model { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 80, 'opsz' 144; font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: #0A0A0A; margin-top: 6px; }
.brand-model .brand { color: #1E90FF; font-style: italic; }
.brand-model.seadoo .brand { color: #2D9EAA; }
.insurance-tag { display: inline-block; margin-top: 4px; padding: 2px 0; font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 100, 'opsz' 144; font-style: italic; font-weight: 600; font-size: 14px; background: linear-gradient(90deg, #E85D1F, #FF7A33, #1E90FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Right column checklist inside the photo top area */
.spec-list { position: absolute; top: 20px; right: 22px; display: flex; flex-direction: column; gap: 6px; max-width: 48%; }
.spec-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.25; color: #0A0A0A; font-weight: 500; }
.spec-list .check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; background: #FFFFFF; border: 1.8px solid #E85D1F; border-radius: 4px; color: #E85D1F; font-size: 10px; font-weight: 800; line-height: 1; margin-top: 1px; }

/* Jetski photo — large, centered, transparent bg */
.jetski-hero { position: absolute; bottom: 18px; left: 0; right: 0; padding: 0 22px; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.jetski-hero img { width: 100%; max-width: 360px; height: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)); }

/* Price pill bottom-left, 2-pax label */
.price-pill { position: absolute; left: 0; bottom: 14px; background: linear-gradient(135deg, #1E90FF, #5BB8FF); color: #FFFFFF; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; font-weight: 600; padding: 8px 18px 8px 14px; border-radius: 0 999px 999px 0; letter-spacing: 0.04em; box-shadow: 0 4px 14px rgba(30, 144, 255, 0.4); z-index: 3; }
.pax-pill { position: absolute; bottom: 24px; right: 22px; background: #FFFFFF; color: #0A0A0A; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 999px; letter-spacing: 0.1em; border: 1.5px solid #E85D1F; z-index: 3; }

/* Optional "PREMIUM" rotated stamp (flagship) */
.premium-stamp { position: absolute; right: -8px; bottom: 64px; width: 90px; height: 90px; transform: rotate(-12deg); border: 2.5px solid #E85D1F; color: #E85D1F; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 100, 'opsz' 144; font-weight: 700; font-size: 14px; letter-spacing: 0.05em; background: rgba(255,255,255,0.5); z-index: 3; pointer-events: none; }

/* Bottom title strip + Book Now button */
.jetski-bottom { background: #FFFFFF; border-top: 1px dashed #E5DECF; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.jetski-title { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 70, 'opsz' 144; font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: #0A0A0A; text-align: center; }
.jetski-title .stress { color: #E85D1F; }
.book-btn { background: linear-gradient(135deg, #1E90FF 0%, #5BB8FF 100%); color: #FFFFFF; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; padding: 16px 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; box-shadow: 0 8px 22px rgba(30, 144, 255, 0.4); border: 0; cursor: pointer; text-decoration: none; }
.book-btn:hover { background: linear-gradient(135deg, #1976D2 0%, #1E90FF 100%); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30, 144, 255, 0.55); }

/* Booking-page jetski picker (dark background, radio-style cards) */
.jetski-pick { background: rgba(251,248,242,0.04); border: 2px solid rgba(251,248,242,0.18); border-radius: 16px; padding: 12px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.jetski-pick:hover { border-color: #FF7A33; background: rgba(232,93,31,0.08); }
.jetski-pick.selected { border-color: #E85D1F; background: rgba(232,93,31,0.18); }
.jetski-pick .pick-thumb { aspect-ratio: 16/10; background: #FBF8F2; border-radius: 10px; display:flex; align-items:center; justify-content:center; padding: 8px; }
.jetski-pick .pick-thumb img { width: 100%; height: 100%; object-fit: contain; }
.jetski-pick .pick-name { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #FBF8F2; font-weight: 500; opacity: 0.85; }
.jetski-pick .pick-price { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 60, 'opsz' 144; font-size: 22px; font-weight: 600; color: #FBF8F2; line-height: 1; }
.jetski-pick.selected .pick-price { color: #FF7A33; }
.jetski-pick .pick-badge { display:inline-block; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #E85D1F; color: #FBF8F2; align-self: flex-start; margin-top: 2px; }

/* Tour detail cards — includes/places columns + price tiers with thumbnails */
.tour-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; padding: 20px; background: #FBF8F2; border-radius: 16px; border: 1px solid #E5DECF; }
@media (max-width: 640px) { .tour-info-grid { grid-template-columns: 1fr; } }
.info-col-title { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #E85D1F; font-weight: 600; margin-bottom: 12px; }
.included-list, .places-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.included-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #1A1A1A; line-height: 1.35; }
.included-list .tick-box { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; background: #FFFFFF; border: 2px solid #E85D1F; border-radius: 4px; color: #E85D1F; font-size: 12px; font-weight: 800; line-height: 1; margin-top: 1px; }
.places-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #1A1A1A; line-height: 1.35; }
.places-list .dot { display: inline-flex; align-items: center; justify-content: center; width: 6px; height: 6px; flex-shrink: 0; background: #5BE0EE; border-radius: 50%; margin-top: 8px; }

/* Pricing tier with thumbnail + inline Book Now (Stripe) */
.price-tiers { display: grid; gap: 12px; margin-bottom: 20px; }
.price-tier { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid #E5DECF; border-radius: 14px; transition: border-color .2s ease, background .2s ease, transform .3s ease; background: #FFFFFF; flex-wrap: wrap; }
.price-tier:hover { border-color: #E85D1F; transform: translateY(-1px); }
.price-tier.flagship-tier { border-color: #E85D1F; border-width: 2px; background: #FFF8F2; }
.tier-thumb { width: 72px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #FBF8F2; border-radius: 8px; padding: 4px; }
.tier-thumb img { width: 100%; height: 100%; object-fit: contain; }
.tier-text { flex: 1; min-width: 130px; }
.tier-model { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B6862; font-weight: 500; }
.tier-price { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 60, 'opsz' 144; font-size: 22px; font-weight: 600; color: #0A0A0A; line-height: 1.1; margin-top: 2px; }
.tier-price .nums { font-variant-numeric: tabular-nums; }
.flagship-tier .tier-price { color: #E85D1F; }
.tier-deposit { font-size: 11px; letter-spacing: 0.04em; color: #6B6862; margin-top: 3px; }
.tier-deposit strong { color: #1E90FF; font-weight: 600; }
.tier-buy { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #1E90FF, #5BB8FF); color: #FFFFFF; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding: 11px 18px; border-radius: 999px; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 4px 14px rgba(30,144,255,0.3); white-space: nowrap; }
.tier-buy:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,144,255,0.45); }
.tier-buy.tier-buy-ember { background: linear-gradient(135deg, #E85D1F, #FF7A33); box-shadow: 0 4px 14px rgba(232,93,31,0.35); }
.tier-buy.tier-buy-ember:hover { box-shadow: 0 6px 18px rgba(232,93,31,0.5); }
.tier-buy.tier-buy-wa { background: #25D366; box-shadow: 0 4px 14px rgba(37,211,102,0.35); }
.tier-buy.tier-buy-wa:hover { box-shadow: 0 6px 18px rgba(37,211,102,0.5); }
@media (max-width: 480px) { .tier-buy { width: 100%; justify-content: center; } }

/* Calendar widget */
.calendar-wrap { border: 1px solid rgba(251,248,242,0.25); border-radius: 16px; padding: 18px; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.cal-nav-btn { background: transparent; border: 1px solid rgba(251,248,242,0.25); border-radius: 999px; width: 32px; height: 32px; color: inherit; cursor: pointer; font-size: 14px; transition: all .2s ease; display:flex; align-items:center; justify-content:center; }
.cal-nav-btn:hover { background: rgba(251,248,242,0.08); border-color: rgba(251,248,242,0.4); }
.cal-month-label { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 60, 'opsz' 144; font-size: 18px; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekdays { margin-bottom: 6px; }
.cal-weekdays span { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; padding: 8px 0; opacity: 0.55; }
.cal-weekdays span.sat-label { text-decoration: line-through; opacity: 0.35; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 50%; cursor: pointer; transition: background .2s ease, color .2s ease; border: 0; background: transparent; color: inherit; font-family: inherit; }
.cal-day.empty { cursor: default; opacity: 0; pointer-events: none; }
.cal-day:hover:not(.disabled):not(.weekend-closed):not(.empty):not(.selected) { background: rgba(251,248,242,0.1); }
.cal-day.selected { background: #E85D1F; color: #FBF8F2; font-weight: 500; }
.cal-day.disabled { opacity: 0.25; cursor: not-allowed; }
.cal-day.weekend-closed { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; position: relative; }
.cal-day.today:not(.selected) { outline: 1px solid #E85D1F; }
.cal-note { margin-top: 12px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; text-align: center; }
/* Light-mode calendar (when used on white background) */
.calendar-wrap.light { border-color: #E5DECF; color: #0A0A0A; }
.calendar-wrap.light .cal-nav-btn { border-color: #E5DECF; }
.calendar-wrap.light .cal-nav-btn:hover { background: #F2EBDD; }
.calendar-wrap.light .cal-day:hover:not(.disabled):not(.weekend-closed):not(.empty):not(.selected) { background: #F2EBDD; }
/* ─── Premium micro-interactions ─── */

/* Marquee edge fade — fades the moving names in/out at the edges instead of hard-cutting */
.marquee-mask { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }

/* SVG icon draw-in — strokes animate themselves on view */
@media (prefers-reduced-motion: no-preference) {
  .icon-draw path, .icon-draw circle, .icon-draw rect, .icon-draw line { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.65,.2,1); }
  .reveal.in .icon-draw path, .reveal.in .icon-draw circle, .reveal.in .icon-draw rect, .reveal.in .icon-draw line { stroke-dashoffset: 0; transition-delay: 0.18s; }
}

/* Star row — stagger reveal with subtle spring */
@media (prefers-reduced-motion: no-preference) {
  .star-row svg { opacity: 0; transform: scale(0.5); transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
  .reveal.in .star-row svg { opacity: 1; transform: scale(1); }
  .reveal.in .star-row svg:nth-child(1) { transition-delay: 0.10s; }
  .reveal.in .star-row svg:nth-child(2) { transition-delay: 0.18s; }
  .reveal.in .star-row svg:nth-child(3) { transition-delay: 0.26s; }
  .reveal.in .star-row svg:nth-child(4) { transition-delay: 0.34s; }
  .reveal.in .star-row svg:nth-child(5) { transition-delay: 0.42s; }
}

/* FAQ refinement — drawn underline + answer fade-up */
.faq-item summary { position: relative; }
.faq-item summary::after { content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: -1px; height: 2px; background: #E85D1F; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.2,.65,.2,1); }
.faq-item[open] summary::after { transform: scaleX(1); }
.faq-answer { opacity: 0; transform: translateY(6px); transition: opacity .4s ease .12s, transform .4s cubic-bezier(.2,.65,.2,1) .12s; }
.faq-item[open] .faq-answer { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after, .faq-answer { transition: none; }
}

/* Magnetic button — base; JS applies transforms */
.btn-magnetic { transition: transform .35s cubic-bezier(.2,.65,.2,1); will-change: transform; }

/* Counter — keep width stable so it doesn't reflow as digits grow */
.counter { display: inline-block; font-variant-numeric: tabular-nums; }

/* Word-reveal — wraps each word so its inner can slide up from below the baseline */
.word-reveal .word { display: inline-block; overflow: hidden; line-height: inherit; vertical-align: top; }
.word-reveal .word .inner { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2,.65,.2,1); }
.reveal.in .word-reveal .word .inner, .word-reveal.in .word .inner { transform: translateY(0); }
.word-reveal .word:nth-child(1) .inner { transition-delay: 0.06s; }
.word-reveal .word:nth-child(2) .inner { transition-delay: 0.16s; }
.word-reveal .word:nth-child(3) .inner { transition-delay: 0.26s; }
.word-reveal .word:nth-child(4) .inner { transition-delay: 0.36s; }
.word-reveal .word:nth-child(5) .inner { transition-delay: 0.46s; }

/* ─── Mobile nav (hamburger + sheet, injected by site.js) ─── */
.mobile-toggle { display: none; }
.mobile-menu { position: fixed; inset: 0; background: #FBF8F2; z-index: 250; display: none; overflow-y: auto; }
.mobile-menu.open { display: block; animation: mobileFade .25s ease-out; }
@keyframes mobileFade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-menu-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; border: 1px solid #E5DECF; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #0A0A0A; z-index: 2; }
.mobile-menu-inner { padding: 80px 24px 56px; max-width: 480px; margin: 0 auto; }
.mobile-menu-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.mobile-menu-brand .mark { width: 32px; height: 32px; border-radius: 50%; display: inline-block; object-fit: cover; }
.mobile-menu-brand .name { font-family: 'Fraunces', serif; font-size: 18px; letter-spacing: -0.03em; color: #0A0A0A; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu-link { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 60, 'opsz' 144; font-size: 28px; font-weight: 500; padding: 16px 0; border-bottom: 1px solid #E5DECF; color: #0A0A0A; text-decoration: none; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: space-between; transition: color .2s; }
.mobile-menu-link:hover, .mobile-menu-link.is-active { color: #E85D1F; }
.mobile-menu-link::after { content: '→'; opacity: 0.35; font-size: 16px; }
.mobile-menu-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; background: #E85D1F; color: #FFFFFF; padding: 16px 24px; border-radius: 999px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; text-decoration: none; }
.mobile-menu-langs { margin-top: 36px; padding-top: 28px; border-top: 1px solid #E5DECF; }
.mobile-menu-langs-label { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #6B6862; margin-bottom: 14px; }
.mobile-menu-langs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-menu-langs-grid .lang-opt { padding: 12px 14px; background: transparent; border: 1px solid #E5DECF; border-radius: 999px; font-size: 13px; cursor: pointer; text-align: center; font-family: inherit; color: #0A0A0A; transition: background .2s; }
.mobile-menu-langs-grid .lang-opt:hover { background: #F2EBDD; }
.mobile-menu-meta { margin-top: 36px; font-size: 12px; color: #6B6862; line-height: 1.6; }
.mobile-menu-meta a { color: #0A0A0A; }

/* ─── Mobile pass: tighter rhythm, smaller type, single-column tiers ─── */
@media (max-width: 767px) {
  /* Show hamburger, hide desktop language picker */
  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; color: inherit; padding: 0; }
  .lang-picker-desktop-only { display: none !important; }

  /* Section padding shrinks ~50% on mobile */
  section.py-28 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section.py-32 { padding-top: 4rem;   padding-bottom: 4rem; }
  section.py-40 { padding-top: 4rem;   padding-bottom: 4rem; }
  section.py-20 { padding-top: 3rem;   padding-bottom: 3rem; }
  section.py-24 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  section.pt-40 { padding-top: 6.5rem; }
  section.pt-48 { padding-top: 7rem; }

  /* Hero eyebrow: smaller letter-spacing, smaller text */
  section#top > div .reveal.text-\[11px\] { font-size: 9px; letter-spacing: 0.18em; }

  /* Hero CTA padding tighter */
  section#top .btn-ember { padding: 14px 22px; }

  /* Marquee size down */
  .marquee { font-size: 24px !important; }

  /* Tour card title smaller */
  article.tour-card h3 { font-size: 22px !important; }

  /* 9-Point: pricing tiers stack vertically; polaroid bounded */
  #nine .grid.grid-cols-3 { grid-template-columns: 1fr; gap: 10px; }
  #nine [style*="rotate(-3deg)"] { max-width: 200px; margin-left: auto; margin-right: auto; }

  /* Fleet card: shrink premium stamp, tighten brand model */
  .jetski-card .brand-model { font-size: 22px; }
  .jetski-card .spec-list { gap: 5px; }
  .jetski-card .spec-list li { font-size: 11px; }
  .jetski-card .premium-stamp { width: 68px; height: 68px; font-size: 10px; right: -10px; bottom: 70px; }
  .jetski-card .jetski-top { min-height: 280px; padding: 18px 18px 70px; }

  /* Price tiers (tour detail pages): more breathable, button below */
  .price-tier { flex-wrap: wrap; }
  .tier-buy { width: 100%; justify-content: center; }

  /* Calendar: ensure tappable cells (44px iOS guideline) */
  .cal-day { font-size: 13px; min-height: 38px; }

  /* Smaller review quote */
  blockquote.font-display.text-2xl { font-size: 19px; line-height: 1.35; }

  /* Footer: hide the redundant Languages list (already in the mobile menu) */
  footer .md\:col-span-2:has(.tracking-\[0\.25em\]:nth-of-type(1):not([class*="mb-3"])) { display: none; }

  /* Sticky CTA: tighter */
  .sticky-cta { padding: 11px 18px; font-size: 11px; }

  /* Photo grid gaps tighter */
  .grid.grid-cols-2.md\:grid-cols-4 { gap: 8px; }

  /* Container: tighter horizontal padding */
  .container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 380px) {
  /* Tiny phones */
  .container { padding-left: 16px; padding-right: 16px; }
  section#top h1 { font-size: 16vw; }
  .marquee { font-size: 22px !important; }
  .mobile-menu-link { font-size: 24px; }
}

/* RTL for Arabic */
html[dir="rtl"] body { font-family: 'Geist', 'Segoe UI', system-ui, sans-serif; }
html[dir="rtl"] .underline-grow { background-position: 100% 100%; }
html[dir="rtl"] .marquee { animation-direction: reverse; }
html[dir="rtl"] .sticky-cta { right: auto; left: 1.25rem; }
html[dir="rtl"] .nav-pill { direction: rtl; }
html[dir="rtl"] .scroll-progress { left: auto; right: 0; }

/* ────────────────────────────────────────────────────────────
   Ember outline + cyan glow on packages & products
   Ember (#E85D1F) hairline border + skydp (#5BE0EE) halo.
   Layers on top of existing .tour-card / .jetski-card rules.
   ──────────────────────────────────────────────────────────── */
article.tour-card {
  border: 1.5px solid rgba(232, 93, 31, 0.55);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow:
    0 0 24px rgba(91, 224, 238, 0.22),
    0 0 60px rgba(232, 93, 31, 0.10);
  transition:
    transform .6s cubic-bezier(.2,.65,.2,1),
    box-shadow .55s ease,
    border-color .4s ease;
}
article.tour-card:hover {
  border-color: #E85D1F;
  box-shadow:
    0 0 32px rgba(91, 224, 238, 0.48),
    0 0 80px rgba(232, 93, 31, 0.22),
    0 24px 48px -18px rgba(232, 93, 31, 0.28);
}

.jetski-card {
  box-shadow:
    0 0 26px rgba(91, 224, 238, 0.28),
    0 0 60px rgba(232, 93, 31, 0.10);
}
.jetski-card:hover {
  box-shadow:
    0 28px 48px -16px rgba(232, 93, 31, 0.35),
    0 0 36px rgba(91, 224, 238, 0.55),
    0 0 80px rgba(232, 93, 31, 0.22);
}
.jetski-card.flagship {
  box-shadow:
    0 0 0 4px rgba(232, 93, 31, 0.15),
    0 0 30px rgba(91, 224, 238, 0.40),
    0 0 70px rgba(232, 93, 31, 0.18);
}

/* Price tiers on the tour detail pages get the same treatment */
.price-tier {
  border: 1px solid rgba(232, 93, 31, 0.5);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow:
    0 0 18px rgba(91, 224, 238, 0.18),
    0 0 44px rgba(232, 93, 31, 0.08);
  transition: box-shadow .45s ease, border-color .4s ease, transform .45s ease;
}
.price-tier:hover {
  border-color: #E85D1F;
  transform: translateY(-2px);
  box-shadow:
    0 0 26px rgba(91, 224, 238, 0.42),
    0 0 60px rgba(232, 93, 31, 0.18);
}

/* Jetski pick cards on the booking page */
.jetski-pick {
  box-shadow:
    0 0 18px rgba(91, 224, 238, 0.20),
    0 0 44px rgba(232, 93, 31, 0.08);
  transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}
.jetski-pick:hover,
.jetski-pick.selected {
  box-shadow:
    0 0 28px rgba(91, 224, 238, 0.50),
    0 0 60px rgba(232, 93, 31, 0.18);
}

/* Reduce-motion users get no animated glow shift */
@media (prefers-reduced-motion: reduce) {
  article.tour-card,
  .jetski-card,
  .price-tier,
  .jetski-pick,
  .trip-card { transition: none; }
}

/* ────────────────────────────────────────────────────────────
   008 — Reserve your day: trip product cards
   Direct-to-Stripe booking grid on the home page.
   ──────────────────────────────────────────────────────────── */
.trip-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(232, 93, 31, 0.5);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 24px rgba(91, 224, 238, 0.22),
    0 0 60px rgba(232, 93, 31, 0.10);
  transition:
    transform .5s cubic-bezier(.2,.65,.2,1),
    box-shadow .5s ease,
    border-color .4s ease;
}
.trip-card:hover {
  transform: translateY(-5px);
  border-color: #E85D1F;
  box-shadow:
    0 0 32px rgba(91, 224, 238, 0.48),
    0 0 80px rgba(232, 93, 31, 0.22),
    0 22px 44px -16px rgba(232, 93, 31, 0.30);
}
.trip-card--flagship {
  border-color: #E85D1F;
  box-shadow:
    0 0 0 1px rgba(232, 93, 31, 0.5),
    0 0 30px rgba(91, 224, 238, 0.40),
    0 0 70px rgba(232, 93, 31, 0.18);
}
.trip-card--flagship:hover {
  box-shadow:
    0 0 0 2px rgba(232, 93, 31, 0.8),
    0 0 36px rgba(91, 224, 238, 0.55),
    0 0 80px rgba(232, 93, 31, 0.25),
    0 22px 44px -16px rgba(232, 93, 31, 0.35);
}

.trip-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F2EBDD;
}
.trip-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.65,.2,1);
}
.trip-card:hover .trip-photo img { transform: scale(1.05); }

.trip-city {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(10, 10, 10, 0.78);
  color: #FBF8F2;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
.trip-flagship-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #E85D1F;
  color: #FBF8F2;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
}

.trip-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.trip-route {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0A0A0A;
  font-variation-settings: 'SOFT' 80, 'opsz' 144;
}
.trip-jetski {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #6B6862;
  text-transform: uppercase;
  margin-top: -6px;
}
.trip-meta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed #E5DECF;
}
.trip-price {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 600;
  color: #0A0A0A;
  letter-spacing: -0.01em;
}
.trip-price-tbd {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  color: #6B6862;
  font-variation-settings: 'SOFT' 80, 'opsz' 144;
}
.trip-deposit-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #6B6862;
  text-transform: uppercase;
  margin-top: 4px;
}

.trip-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #E85D1F;
  color: #FBF8F2;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease, box-shadow .35s ease;
  box-shadow: 0 8px 24px -10px rgba(232, 93, 31, 0.6);
}
.trip-cta:hover {
  background: #FF7A33;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(232, 93, 31, 0.75);
}
.trip-cta svg { transition: transform .3s ease; }
.trip-cta:hover svg { transform: translateX(3px); }

@media (max-width: 640px) {
  .trip-body { padding: 18px 18px 20px; gap: 12px; }
  .trip-route { font-size: 22px; }
  .trip-price { font-size: 20px; }
  .trip-price-tbd { font-size: 16px; }
  .trip-cta { padding: 13px 16px; font-size: 11px; letter-spacing: 0.18em; }
}

/* ────────────────────────────────────────────────────────────
   Inline home-page gallery: CSS-column masonry + lightbox
   ──────────────────────────────────────────────────────────── */
.home-masonry { column-count: 1; column-gap: 14px; }
@media (min-width: 640px) { .home-masonry { column-count: 2; } }
@media (min-width: 1024px) { .home-masonry { column-count: 3; } }
@media (min-width: 1280px) { .home-masonry { column-count: 4; } }
.home-gallery-item {
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: block;
  cursor: zoom-in;
  background: #F2EBDD;
  transition: transform .5s cubic-bezier(.2,.65,.2,1), box-shadow .5s ease;
}
.home-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px rgba(232, 93, 31, 0.25);
}
.home-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.65,.2,1);
}
.home-gallery-item:hover img { transform: scale(1.04); }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: #FBF8F2;
  color: #0A0A0A;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 201;
}

/* ════════════════════════════════════════════════════════════
   MOBILE PASS — phone-first refinements for iPhone widths
   320 / 375 / 390 / 393 / 430 covered.
   ════════════════════════════════════════════════════════════ */

/* ── Booking page: jetski picker fix ───────────────────────────
   The picker was single-column with 16:10 thumbnails on phones,
   making each jetski card take a full screen and pushing form
   fields off-screen. Now: 2-col grid with capped thumb height. */
@media (max-width: 640px) {
  #jetski-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .jetski-pick {
    padding: 10px;
    gap: 6px;
    border-radius: 12px;
    border-width: 1.5px;
  }
  .jetski-pick .pick-thumb {
    aspect-ratio: auto;
    height: 80px;
    padding: 6px;
    border-radius: 8px;
  }
  .jetski-pick .pick-name {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .jetski-pick .pick-price {
    font-size: 18px;
  }
  .jetski-pick .pick-badge {
    font-size: 8px;
    padding: 2px 7px;
    letter-spacing: 0.12em;
  }
}

/* ── Booking page: compact aside, tighter form on mobile ─────── */
@media (max-width: 767px) {
  /* Aside stops being sticky — scroll naturally with content */
  form#booking-form aside .sticky { position: static; top: auto; }

  /* Hide the duplicate phone/email/line block on mobile (in footer) */
  form#booking-form aside .space-y-4 { display: none; }

  /* Compact the indicative-total tile */
  form#booking-form aside .border.border-ivory\/15 {
    padding: 14px 18px;
    border-radius: 14px;
  }
  form#booking-form aside .font-display.text-4xl { font-size: 26px; }

  /* Form labels & fields — tighter */
  .field-label { font-size: 11px; letter-spacing: 0.10em; }
  .field { padding: 12px 14px; font-size: 14px; }

  /* Pay button: full width, generous touch target */
  #pay-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 18px;
    font-size: 12px;
    min-height: 52px;
  }

  /* Reduce vertical gap between form rows */
  form#booking-form .gap-y-6 { row-gap: 1rem; }
  form#booking-form .gap-12 { gap: 1.5rem; }

  /* Calendar buttons: iOS 44px tap target */
  .cal-day { min-height: 44px; font-size: 14px; }
  .cal-nav-btn { min-width: 38px; min-height: 38px; }

  /* Booking page hero: tighter title */
  section#top h1.text-5xl { font-size: 40px; line-height: 1; }
  section#top p.text-\[16px\] { font-size: 14px; }
}

/* ── Home: tighter cluster headings + spacing ───────────────── */
@media (max-width: 640px) {
  section#tours h3.font-display.text-5xl { font-size: 40px; }
  section#tours .mb-16 { margin-bottom: 2.25rem; }
  section#tours .md\:mb-20 { margin-bottom: 2.25rem; }
  section#tours .gap-8 { gap: 1.25rem; }
  section#tours .mb-8 { margin-bottom: 1rem; }
  section#tours .pb-4 { padding-bottom: 0.5rem; }

  /* Home gallery section: tighter masonry */
  section#gallery .mb-12 { margin-bottom: 1.5rem; }
  section#gallery .md\:mb-16 { margin-bottom: 1.5rem; }
  section#gallery h2.font-display.text-5xl { font-size: 38px; }
  .home-masonry { column-gap: 8px; }
  .home-gallery-item { margin-bottom: 8px; border-radius: 12px; }

  /* Editorial intro (001) — keep readable, reduce body type */
  section .text-\[15px\] { font-size: 14px; line-height: 1.55; }

  /* In-the-price (004) icon grid: smaller, more breathable */
  .grid.md\:grid-cols-6 { gap: 0.75rem; }
}

/* ── Tap targets: minimum 44px for iOS guidelines ───────────── */
@media (max-width: 767px) {
  .btn-ember {
    padding: 14px 22px;
    font-size: 12px;
    min-height: 44px;
  }
  /* Inline underline-grow text links: keep tappable height */
  .underline-grow { padding: 4px 0; display: inline-block; }
}

/* ── Tiny phones (≤ 380px, iPhone SE 1st gen) ───────────────── */
@media (max-width: 380px) {
  .jetski-pick .pick-thumb { height: 70px; }
  .jetski-pick .pick-price { font-size: 16px; }
  section#tours h3.font-display.text-5xl { font-size: 36px; }
  section#gallery h2.font-display.text-5xl { font-size: 32px; }
  section#top h1.text-5xl { font-size: 36px; }
}

/* ── Catch-all: no horizontal overflow ──────────────────────── */
body { overflow-x: hidden; }
img, picture, video { max-width: 100%; }