/* =====================================================================
   หน้าเรือทั้งหมด (/yacht-charter) — Liquid Glass
   แบบที่อนุมัติ: mockup/boattripthailand-fleet-liquid-glass.html · โค้ด: public/site/fleet.js
   กระจกเฉพาะของที่ลอย (ช่องค้นหา ป๊อปอัป ปุ่ม/ป้ายบนรูป) · ข้อมูลเรือและราคาพื้นทึบ
   ===================================================================== */
#view-fleet, .fx-card, #cmpTray { --fx-m: #70000e; --fx-m7: #5e000c; --fx-m50: #f9f1f2; --fx-ink: #231416; --fx-muted: #6b5e60; --fx-sand: #f8f4f3; --fx-line: rgb(35 20 22 / .08); --fx-ease: cubic-bezier(.2, .8, .2, 1); position: relative; overflow-x: clip; }   /* the frosted band behind the sticky search reaches past the edges */
#view-fleet .tnum { font-variant-numeric: tabular-nums; }
#view-fleet svg, .fx-card svg, #cmpTray svg { display: inline-block; flex: none; }
.fx-amb { position: absolute; left: 0; right: 0; top: -80px; height: 560px; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-amb img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(60px) saturate(140%); opacity: .55; }
.fx-amb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 500px at 12% 0, rgb(255 255 255 / .55), transparent 60%), linear-gradient(180deg, rgb(248 244 243 / .2), #fff 96%); }

/* header */
.fx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.fx-head h1 { font-weight: 400; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.015em; margin: 0; }
.fx-head h1 sup { font-size: .4em; color: var(--fx-m); margin-left: 6px; font-weight: 500; top: -1.1em; }
.fx-sub { color: var(--fx-muted); margin: 10px 0 0; max-width: 56ch; font-size: 14.5px; }
.fx-stats { display: flex; gap: 22px; font-size: 12.5px; color: var(--fx-muted); }
.fx-stats b { display: block; font-size: 22px; font-weight: 400; color: var(--fx-ink); line-height: 1.2; }

/* smart finder */
.fx-fw { position: sticky; top: 82px; z-index: 30; margin-top: 24px; }
.fx-fw::before { content: ''; position: absolute; left: -50vw; right: -50vw; top: -92px; bottom: -14px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: rgb(248 244 243 / .6); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  -webkit-mask: linear-gradient(180deg, #000 80%, transparent); mask: linear-gradient(180deg, #000 80%, transparent); }
.fx-fw.stuck::before { opacity: 1; }
.fx-box { position: relative; }
.fx-finder { display: flex; align-items: stretch; gap: 2px; padding: 6px; border-radius: 26px; background: var(--g-bg-strong); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow), var(--g-spec); transition: padding .3s; }
.fx-seg { flex: 1; min-width: 0; text-align: left; padding: 10px 18px; border-radius: 20px; position: relative; transition: background .25s; cursor: pointer; }
.fx-seg:hover, .fx-seg.open { background: rgb(255 255 255 / .75); }
.fx-seg.open { box-shadow: var(--g-spec), 0 8px 20px -12px rgb(58 0 7 / .4); }
.fx-seg + .fx-seg::after { content: ''; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 1px; background: rgb(35 20 22 / .1); }
.fx-seg:hover::after, .fx-seg.open::after, .fx-seg:hover + .fx-seg::after, .fx-seg.open + .fx-seg::after { opacity: 0; }
.fx-seg small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fx-muted); }
.fx-seg small svg { width: 13px; height: 13px; }
.fx-seg b { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; color: var(--fx-ink); }
.fx-seg b.dim { color: rgb(35 20 22 / .45); font-weight: 400; }
.fx-seg .dp-vis { background: none !important; padding: 0 !important; box-shadow: none !important; height: auto !important; border: 0 !important; outline: none; }
.fx-seg .dp-vis { all: unset; display: block; width: 100%; font-weight: 500; font-size: 15px; margin-top: 1px; cursor: pointer; color: var(--fx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-seg .dp-vis::placeholder { color: rgb(35 20 22 / .45); font-weight: 400; }
.fx-season { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; vertical-align: 1px; }
.fx-season.low { background: #eef3ee; color: #2f6b45; } .fx-season.high { background: var(--fx-m50); color: var(--fx-m); } .fx-season.peak { background: var(--fx-m); color: #fff; }
.fx-step { display: flex; align-items: center; gap: 10px; margin-top: 1px; }
.fx-step button { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .12); transition: transform .15s, background .2s; }
.fx-step button:hover { background: #fff; } .fx-step button:active { transform: scale(.9); }
.fx-step button svg { width: 14px; height: 14px; }
.fx-step b { min-width: 52px; text-align: center; margin: 0; }
.fx-go { flex: none; align-self: center; height: 52px; padding: 0 22px 0 18px; border-radius: 20px; margin-left: 4px; background: var(--fx-m); color: #fff; display: flex; align-items: center; gap: 10px; font-size: 14.5px; white-space: nowrap; box-shadow: 0 12px 28px -12px rgb(112 0 14 / .8), inset 0 1px 0 rgb(255 255 255 / .25); transition: background .2s, transform .2s; }
.fx-go:hover { background: var(--fx-m7); transform: translateY(-1px); }
.fx-go svg { width: 18px; height: 18px; }
.fx-fw.stuck .fx-finder { padding: 4px; }
.fx-fw.stuck .fx-seg { padding: 7px 16px; }
.fx-fw.stuck .fx-go { height: 44px; }
.fx-mfind { display: none; }

/* popovers */
.fx-pop { position: absolute; top: calc(100% + 10px); z-index: 35; border-radius: 24px; padding: 18px; min-width: 300px; background: rgb(255 255 255 / .88); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow), var(--g-spec);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity .25s var(--fx-ease), transform .3s var(--fx-ease); }
.fx-pop.on { opacity: 1; transform: none; pointer-events: auto; }
.fx-pop h4 { margin: 0 0 12px; font-weight: 500; font-size: 13px; color: var(--fx-muted); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip { height: 38px; padding: 0 14px; border-radius: 99px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .1); transition: background .2s, color .2s, transform .15s; }
.fx-chip:hover { background: #fff; } .fx-chip:active { transform: scale(.96); }
.fx-chip.on { background: var(--fx-m); color: #fff; box-shadow: 0 8px 18px -10px rgb(112 0 14 / .8); }
.fx-chip i { font-style: normal; font-size: 11.5px; opacity: .6; }
/* where are you staying → drive time to the pier */
.fx-stays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fx-stay { text-align: left; padding: 9px 11px; border-radius: 16px; background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .1); transition: background .2s, color .2s, transform .15s; }
.fx-stay:hover { background: #fff; } .fx-stay:active { transform: scale(.97); }
.fx-stay b { display: block; font-weight: 500; font-size: 13px; line-height: 1.25; }
.fx-stay small { display: block; font-size: 11px; color: var(--fx-muted); margin-top: 1px; }
.fx-stay.on { background: var(--fx-m); color: #fff; box-shadow: 0 8px 18px -10px rgb(112 0 14 / .8); }
.fx-stay.on small { color: rgb(255 255 255 / .75); }
.fx-stay.clr { display: flex; align-items: center; gap: 6px; color: var(--fx-muted); }
.fx-stay.clr svg { width: 13px; height: 13px; }
.fx-pnote { margin: 10px 0 0; font-size: 11px; color: var(--fx-muted); }
.fx-drive { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--fx-muted); min-width: 0; }
.fx-drive span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-drive b { font-weight: 500; }
.fx-drive svg { width: 13px; height: 13px; flex: none; }
.fx-drive.near svg, .fx-drive.near b { color: #2f7a4a; }
.fx-drive.mid svg, .fx-drive.mid b { color: #9a6400; }
@media (max-width: 600px) { .fx-stays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-dests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 400px; }
.fx-dest { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px; background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .08); text-align: left; transition: background .2s, box-shadow .2s; }
.fx-dest:hover { background: #fff; }
.fx-dest.on { box-shadow: inset 0 0 0 2px var(--fx-m); background: #fff; }
.fx-dest .e { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--fx-m50); color: var(--fx-m); flex: none; }
.fx-dest .e svg { width: 17px; height: 17px; }
.fx-dest b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.25; }
.fx-dest small { font-size: 11.5px; color: var(--fx-muted); }
.fx-hist { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin: 6px 2px 0; }
.fx-hist i { flex: 1; border-radius: 3px 3px 0 0; background: rgb(112 0 14 / .18); transition: background .2s, height .4s var(--fx-ease); }
.fx-hist i.in { background: rgb(112 0 14 / .7); }
#view-fleet input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; }
#view-fleet input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--fx-m) var(--v, 100%), rgb(35 20 22 / .14) var(--v, 100%)); }
#view-fleet input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 99px; background: #fff; box-shadow: 0 4px 14px -4px rgb(58 0 7 / .5), inset 0 0 0 1px rgb(35 20 22 / .08); cursor: grab; }
#view-fleet input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(35 20 22 / .14); }
#view-fleet input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fx-m); }
#view-fleet input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 4px 14px -4px rgb(58 0 7 / .5); }
.fx-rl { display: flex; justify-content: space-between; font-size: 12px; color: var(--fx-muted); }
.fx-budv { font-size: 22px; font-weight: 400; margin: 2px 0; }

/* toolbar */
.fx-bar { display: flex; align-items: center; gap: 14px; margin: 28px 0 18px; flex-wrap: wrap; }
.fx-tabs { position: relative; display: flex; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; max-width: 100%; background: var(--g-bg); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow), var(--g-spec); }
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-ind { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -8px rgb(58 0 7 / .45), var(--g-spec); transition: transform .45s var(--fx-ease), width .45s var(--fx-ease); }
.fx-tab { position: relative; z-index: 1; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; color: rgb(35 20 22 / .72); transition: color .25s; display: flex; align-items: center; gap: 6px; }
.fx-tab.on { color: var(--fx-m); }
.fx-tab i { font-style: normal; font-size: 11px; color: var(--fx-muted); }
.fx-bar .r { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fx-muted); }
.fx-sort { position: relative; }
.fx-sort select { -webkit-appearance: none; appearance: none; height: 40px; padding: 0 36px 0 16px; border-radius: 999px; border: 0; font-size: 13.5px; color: var(--fx-ink); cursor: pointer; background: var(--g-bg); box-shadow: var(--g-shadow), var(--g-spec); }
.fx-sort svg { position: absolute; right: 13px; top: 12px; width: 16px; height: 16px; pointer-events: none; }

/* insight */
.fx-ins { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px; margin: 0 0 18px; font-size: 13.5px; background: var(--g-bg); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow), var(--g-spec); }
.fx-ins[hidden] { display: none; }
.fx-spark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--fx-m), #a8122a); color: #fff; flex: none; box-shadow: 0 8px 18px -8px rgb(112 0 14 / .8); }
.fx-spark svg { width: 17px; height: 17px; }
.fx-ins b { font-weight: 500; }
.fx-share { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; color: var(--fx-m); background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(112 0 14 / .15); white-space: nowrap; }
.fx-share svg { width: 14px; height: 14px; }
.fx-clr { font-size: 13px; color: var(--fx-muted); white-space: nowrap; }

/* grid + cards */
.fx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fx-card { position: relative; border-radius: 22px; background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 #fff, 0 14px 40px -26px rgb(58 0 7 / .45), 0 0 0 1px var(--fx-line); transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease); }
.fx-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -30px rgb(58 0 7 / .55), 0 0 0 1px var(--fx-line); }
.fx-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fx-sand); }
.fx-ph-link { position: absolute; inset: 0; display: block; }
.fx-ph-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--fx-ease); }
.fx-card:hover .fx-ph-link img { transform: scale(1.06); }
.fx-ph::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .18), transparent 28%, transparent 52%, rgb(0 0 0 / .58)); }
.fx-tl, .fx-tr { position: absolute; top: 12px; z-index: 4; display: flex; gap: 6px; }
.fx-tl { left: 12px; } .fx-tr { right: 12px; }
.fx-badge { height: 28px; padding: 0 11px; border-radius: 99px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.fx-badge svg { width: 13px; height: 13px; }
.fx-badge.best { background: rgb(255 255 255 / .92); color: var(--fx-m); font-weight: 500; box-shadow: 0 8px 18px -10px rgb(0 0 0 / .5); }
.fx-badge.value { background: #fff; color: #2f6b45; font-weight: 500; box-shadow: 0 8px 18px -10px rgb(0 0 0 / .5); }
.fx-gd { background: rgb(20 6 8 / .26); color: #fff; -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: var(--g-spec-dark); }
.fx-cmp { height: 32px; padding: 0 12px 0 9px; border-radius: 99px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; transition: background .2s, color .2s; }
.fx-cmp svg { width: 15px; height: 15px; }
.fx-cmp:hover, .fx-fav:hover { background: rgb(20 6 8 / .42); }
.fx-cmp .n, .fx-cmp .y { display: inline-flex; align-items: center; gap: 5px; }
.fx-cmp .y { display: none; }
.fx-cmp[aria-pressed="true"] .n { display: none; }
.fx-cmp[aria-pressed="true"] .y { display: inline-flex; }
.fx-cmp[aria-pressed="true"] { background: #fff; color: var(--fx-m) !important; }
.fx-fav { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; transition: background .2s, color .2s; }
.fx-fav svg { width: 15px; height: 15px; }
.fx-fav[aria-pressed="true"] { background: #fff; color: var(--fx-m) !important; }
.fx-more { position: absolute; right: 14px; bottom: 16px; z-index: 3; height: 32px; padding: 0 12px 0 14px; border-radius: 99px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--fx-ease); }
.fx-more svg { width: 14px; height: 14px; }
.fx-card:hover .fx-more { opacity: 1; transform: none; }
.fx-nm { position: absolute; left: 16px; right: 130px; bottom: 14px; z-index: 3; color: #fff; }
.fx-nm small { font-size: 12px; opacity: .85; letter-spacing: .02em; }
.fx-nm b { display: block; font-weight: 400; font-size: 23px; line-height: 1.15; text-shadow: 0 2px 16px rgb(0 0 0 / .35); }
.fx-nm:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fx-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.fx-specs { display: flex; gap: 12px; font-size: 12px; color: var(--fx-muted); min-width: 0; }
.fx-specs span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fx-specs .m { min-width: 0; }
.fx-specs .m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fx-specs svg { width: 13px; height: 13px; color: rgb(35 20 22 / .45); }
.fx-fit { margin-top: 12px; }
.fx-fit .t { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fx-muted); }
.fx-fit .t b { font-weight: 500; color: var(--fx-ink); }
.fx-meter { height: 4px; border-radius: 4px; background: rgb(35 20 22 / .08); margin-top: 5px; overflow: hidden; }
.fx-meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #a8122a, var(--fx-m)); }
.fx-tags { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; height: 26px; overflow: hidden; }
.fx-tag { height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; display: inline-flex; align-items: center; background: var(--fx-sand); color: rgb(35 20 22 / .75); }
.fx-tag.hit { background: var(--fx-m50); color: var(--fx-m); }
.fx-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--fx-line); }
.fx-body > .fx-specs + .fx-price, .fx-body > * + .fx-price { margin-top: 14px; }
.fx-price .lbl { display: block; font-size: 11.5px; color: var(--fx-muted); }
.fx-price .lbl b { font-weight: 500; color: var(--fx-ink); }
.fx-price .amt { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.005em; margin-top: 1px; color: var(--fx-ink); white-space: nowrap; }
.fx-price .amt span { font-size: 12.5px; color: var(--fx-muted); font-weight: 400; }
.fx-price .xtra { display: block; font-size: 11.5px; color: var(--fx-muted); margin-top: 2px; }
.fx-book { flex: none; height: 40px; padding: 0 20px; border-radius: 999px; background: var(--fx-m); color: #fff; font-size: 14px; letter-spacing: .04em; box-shadow: 0 12px 26px -12px rgb(112 0 14 / .75), inset 0 1px 0 rgb(255 255 255 / .22); transition: background .2s, transform .2s; }
.fx-book:hover { background: var(--fx-m7); transform: translateY(-1px); }
.fx-book:active { transform: scale(.97); }

/* the recommended boat: wide bento card */
.fx-card.fx-pick { grid-column: span 2; display: grid; grid-template-columns: 1.1fr 1fr; }
.fx-card.fx-pick .fx-ph { aspect-ratio: auto; min-height: 100%; }
.fx-card.fx-pick .fx-body { padding: 22px 22px 20px; }
.fx-eye { font-size: 11.5px; letter-spacing: .1em; color: var(--fx-m); display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.fx-eye svg { width: 14px; height: 14px; }
.fx-why { display: grid; gap: 8px; margin: 2px 0 10px; }
.fx-why > div { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.fx-why > div > span { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--fx-m50); color: var(--fx-m); }
.fx-why > div > span svg { width: 14px; height: 14px; }
.fx-why b { font-weight: 500; }
.fx-alt-h { margin: 14px 0 8px; font-size: 11.5px; color: var(--fx-muted); }
.fx-alts { display: grid; gap: 6px; margin-bottom: 14px; }
.fx-alt { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 14px; background: var(--fx-sand); transition: background .2s; }
.fx-alt:hover { background: var(--fx-m50); }
.fx-alt img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.fx-alt b { display: block; font-weight: 500; font-size: 13px; line-height: 1.25; }
.fx-alt small { font-size: 11.5px; color: var(--fx-muted); white-space: nowrap; }

.fx-empty, .fx-big { grid-column: 1 / -1; border-radius: 28px; background: var(--g-bg); box-shadow: var(--g-shadow), var(--g-spec); }
.fx-empty { text-align: center; padding: 64px 20px; }
.fx-empty b { display: block; font-size: 20px; font-weight: 400; margin: 10px 0 6px; }
.fx-empty p { color: var(--fx-muted); margin: 0 0 18px; }
.fx-empty > div { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fx-reset { height: 48px; padding: 0 22px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px rgb(35 20 22 / .12); }
.fx-big { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 26px 28px; }
.fx-big b { display: block; font-size: 20px; font-weight: 400; }
.fx-big p { margin: 6px 0 0; color: var(--fx-muted); }

/* mobile sheet */
.fx-veil { position: fixed; inset: 0; z-index: 60; background: rgb(35 20 22 / .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s; display: flex; align-items: flex-end; justify-content: center; padding: 10px; }
.fx-veil.on { opacity: 1; pointer-events: auto; }
.fx-sheet { width: 100%; min-width: 0; max-width: 560px; max-height: 86vh; overflow: auto; border-radius: 28px; padding: 20px; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow), var(--g-spec); transform: translateY(24px); transition: transform .4s var(--fx-ease); }
.fx-veil.on .fx-sheet { transform: none; }
.fx-sheet h3 { margin: 0; font-weight: 400; font-size: 22px; }
.fx-sheet .fx-pop { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; margin: 0 0 22px; width: auto !important; min-width: 0; }
.fx-srow { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; gap: 12px; }
.fx-srow h4 { margin: 0; font-weight: 500; font-size: 13px; color: var(--fx-muted); }
.fx-srow .dp-vis { height: 40px; border-radius: 12px; border: 0; padding: 0 12px; background: #fff; box-shadow: inset 0 0 0 1px rgb(35 20 22 / .12); max-width: 210px; }
.fx-sfoot { display: flex; gap: 10px; position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px 20px; background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / .95) 30%); }
.fx-sfoot .fx-book { flex: 1; height: 50px; }
.fx-x { width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; }
.fx-x:hover { background: rgb(255 255 255 / .7); }

@media (max-width: 1180px) { .fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fx-stats { display: none; }
  .fx-fw { top: 78px; margin-top: 18px; }
  .fx-finder { display: none; }
  .fx-mfind { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 22px; text-align: left; background: var(--g-bg-strong); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow), var(--g-spec); }
  .fx-mfind > svg { width: 18px; height: 18px; color: var(--fx-m); flex: none; }
  .fx-mfind div { flex: 1; min-width: 0; }
  .fx-mfind b { display: block; font-weight: 500; font-size: 14.5px; }
  .fx-mfind small { display: block; font-size: 12px; color: var(--fx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-mfind .f { width: 40px; height: 40px; border-radius: 15px; display: grid; place-items: center; background: var(--fx-m); color: #fff; flex: none; }
  .fx-mfind .f svg { width: 18px; height: 18px; }
  .fx-bar { margin: 16px 0 14px; }
  .fx-bar .r { width: 100%; margin: 0; justify-content: space-between; }
  .fx-grid { gap: 16px; }
  .fx-card.fx-pick { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .fx-card.fx-pick .fx-ph { aspect-ratio: 4 / 3; }
  .fx-card.fx-pick .fx-why { display: none; }
  .fx-dests { width: auto; }
  .fx-dest small .h { display: none; }
  .fx-ins .fx-clr, .fx-share span { display: none; }
  .fx-cmp { height: 44px; padding: 0 14px 0 11px; } .fx-fav { width: 44px; height: 44px; }
  .fx-book { height: 42px; padding: 0 18px; font-size: 14px; }
  .fx-big { grid-template-columns: 1fr; }
}
@media (hover: none) { .fx-more { display: none; } .fx-nm { right: 16px; } }
@media (prefers-reduced-motion: reduce) { #view-fleet *, #view-fleet *::before, #view-fleet *::after { transition: none !important; animation: none !important; } }

/* booking form: country code + contact language (added by fleet.js to every booking form) */
.bf-tel { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }

/* the same boat card everywhere (home "featured boats", destination pages…): tighter when the column is narrow */
.fx-card { container-type: inline-size; }
@container (max-width: 340px) {
  .fx-nm b { font-size: 20px; }
  .fx-nm { right: 16px; }
  .fx-more { display: none; }
  .fx-specs { gap: 10px; font-size: 11.5px; }
  .fx-price .amt { font-size: 16.5px; }
  .fx-price .amt span { font-size: 12px; }
  .fx-book { height: 36px; padding: 0 16px; font-size: 13px; }
  .fx-body { padding: 12px 14px 14px; }
  .fx-price .lbl { font-size: 11px; }
}
@container (max-width: 250px) { .fx-cmp .n, .fx-cmp .y { font-size: 0; gap: 0; } .fx-cmp { padding: 0 9px; } }

/* ---------- compare tray: glass pill, photos of the picked boats + empty slots ---------- */
#cmpTray.fx-tray { position: fixed; left: 50%; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 10px; border-radius: 34px; max-width: calc(100vw - 20px);
  color: var(--fx-ink); background: rgb(255 255 255 / .72) !important; -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  box-shadow: 0 18px 50px -20px rgb(58 0 7 / .45), 0 2px 8px -4px rgb(35 20 22 / .1), var(--g-spec) !important;
  transform: translate(-50%, 160%); visibility: hidden; transition: transform .5s var(--fx-ease), visibility .5s; }
#cmpTray.fx-tray.on { transform: translate(-50%, 0); visibility: visible; }
.fx-tth { display: flex; flex: none; }
.fx-tth > * { width: 56px; height: 56px; border-radius: 18px; margin-left: -12px; flex: none; position: relative; }
.fx-tth > :first-child { margin-left: 0; }
.fx-tth button { padding: 0; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 6px 14px -8px rgb(0 0 0 / .45); }
.fx-tth button img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s; }
.fx-tth button span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; background: rgb(35 20 22 / .45); transition: opacity .2s; }
.fx-tth button span svg { width: 18px; height: 18px; }
.fx-tth button:hover span, .fx-tth button:focus-visible span { opacity: 1; }
.fx-tth i { border: 2px dashed rgb(35 20 22 / .22); background: rgb(255 255 255 / .45); }
.fx-tp { margin: 0 4px 0 2px; min-width: 0; line-height: 1.3; }
.fx-tp b { display: block; font-weight: 500; font-size: 17px; white-space: nowrap; }
.fx-tp small { display: block; font-size: 13px; color: var(--fx-muted); white-space: nowrap; }
.fx-tgo { flex: none; height: 54px; padding: 0 30px; border-radius: 999px; background: var(--fx-m); color: #fff; font-size: 16.5px; box-shadow: 0 12px 26px -12px rgb(112 0 14 / .8), inset 0 1px 0 rgb(255 255 255 / .22); transition: background .2s, transform .2s, opacity .2s; }
.fx-tgo:hover:not(:disabled) { background: var(--fx-m7); transform: translateY(-1px); }
.fx-tgo:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.fx-tx { flex: none; width: 42px; height: 42px; border-radius: 99px; display: grid; place-items: center; color: var(--fx-muted); transition: background .2s, color .2s; }
.fx-tx:hover { background: rgb(255 255 255 / .8); color: var(--fx-ink); }
.fx-tx svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  #cmpTray.fx-tray { gap: 10px; padding: 6px 6px 6px 8px; bottom: 12px; width: calc(100vw - 20px); }
  .fx-tth > * { width: 44px; height: 44px; border-radius: 14px; margin-left: -10px; }
  .fx-tp { flex: 1; } .fx-tp b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; } .fx-tp b .l, .fx-tp small { display: none; }
  .fx-tgo { height: 46px; padding: 0 18px; font-size: 15px; }
  .fx-tx { width: 36px; height: 36px; }
}

/* compare dialog: every boat column the same width → photos the same size (long text like cabins wraps instead of widening its column) */
#cmpBody table { table-layout: fixed; }
#cmpBody thead th:first-child { width: 150px; }
#cmpBody td, #cmpBody th { overflow-wrap: anywhere; vertical-align: top; }
#cmpBody thead img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 640px) { #cmpBody thead th:first-child { width: 96px; } }

@media (max-width: 600px) { .fx-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Boat page → marina section (ท่าเรือ · จุดขึ้นเรือ): pier name on top, short real map, 2 buttons
   ===================================================================== */
#marinaSec.pr { container: pier / inline-size; --pr-m: var(--bp-maroon, #70000e); --pr-ink: var(--bp-ink, #231416); --pr-mu: var(--bp-muted, #6b5e60);
  --pr-gb: rgb(255 255 255 / .82); --pr-blur: blur(22px) saturate(185%);
  --pr-sh: 0 18px 50px -24px rgb(58 0 7 / .38), 0 2px 8px -4px rgb(35 20 22 / .08);
  --pr-spec: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .42);
  --pr-ease: cubic-bezier(.2, .8, .2, 1); }
#marinaSec.pr svg, .pr-taxi svg { display: inline-block; flex: none; }
.pr .pr-eye { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--pr-m); }
.pr .pr-eye svg { width: 14px; height: 14px; }
.pr .pr-h h2 { margin: 6px 0 0; }
.pr .pr-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pr .pr-sub p { margin: 0; font-size: 12.5px; color: var(--pr-mu); }
.pr .pr-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 11px; color: var(--pr-ink); background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .1); transition: background .2s; }
.pr .pr-chip:hover { background: #fff; }
.pr .pr-chip svg { width: 12px; height: 12px; }
.pr .pr-g { background: var(--pr-gb); -webkit-backdrop-filter: var(--pr-blur); backdrop-filter: var(--pr-blur); box-shadow: var(--pr-sh), var(--pr-spec); }

/* map */
.pr .pr-map { position: relative; margin-top: 16px; height: 300px; border-radius: 24px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #cfdde4, #e9e2d6); box-shadow: 0 40px 80px -46px rgb(58 0 7 / .6), 0 0 0 1px rgb(255 255 255 / .6); }
.pr .pr-gl { position: absolute; inset: 0; }
.pr .pr-ph { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 24px; color: var(--pr-mu); font-size: 12.5px; transition: opacity .5s; }
.pr .pr-ph.off { opacity: 0; pointer-events: none; }
.pr .pr-ph b { color: var(--pr-ink); font-weight: 500; font-size: 14px; }
.pr .pr-ph-pin { width: 34px; height: 34px; border-radius: 12px 12px 12px 3px; transform: rotate(-45deg); background: var(--pr-m); display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 10px 24px -6px rgb(58 0 7 / .6); }
.pr .pr-ph-pin svg { transform: rotate(45deg); width: 16px; height: 16px; color: #fff; }
.pr .pr-ov { position: absolute; z-index: 5; }
.pr .pr-map.fail .pr-ov { display: none; }
.pr .pr-tl { top: 14px; left: 14px; }
.pr .pr-tr { top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; }
.pr .pr-seg { display: flex; padding: 3px; border-radius: 99px; font-size: 11.5px; }
.pr .pr-seg button { height: 26px; padding: 0 10px; border-radius: 99px; color: var(--pr-mu); }
.pr .pr-seg button.on { background: #fff; color: var(--pr-ink); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .3); }
.pr .pr-mb { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: var(--pr-ink); font-size: 10.5px; font-weight: 600; transition: background .2s, transform .15s; }
.pr .pr-mb:hover { background: #fff; } .pr .pr-mb:active { transform: scale(.94); }
.pr .pr-mb svg { width: 15px; height: 15px; }
.pr .pr-mb.on { background: var(--pr-ink); color: #fff; }
#prCmp { transition: transform .3s; }
.pr .maplibregl-ctrl-attrib { background: rgb(255 255 255 / .65) !important; border-radius: 10px 0 0 0; font-size: 10px; }
.pr .maplibregl-ctrl-attrib a { color: var(--pr-mu); }
.pr .maplibregl-cooperative-gesture-screen { font-family: inherit; font-size: 15px; }
/* pier pin */
.pr-pin { position: relative; width: 0; height: 0; }
.pr-pin .stem { position: absolute; left: -1px; bottom: 0; width: 2px; height: 26px; background: linear-gradient(var(--pr-m), rgb(112 0 14 / 0)); }
.pr-pin .head { position: absolute; left: -16px; bottom: 25px; width: 32px; height: 32px; border-radius: 12px 12px 12px 3px; transform: rotate(-45deg); background: var(--pr-m); box-shadow: 0 10px 24px -6px rgb(58 0 7 / .6), inset 0 1px 0 rgb(255 255 255 / .3); display: grid; place-items: center; }
.pr-pin .head svg { transform: rotate(45deg); width: 16px; height: 16px; color: #fff; }
.pr-pin .ring { position: absolute; left: -18px; top: -8px; width: 36px; height: 16px; border-radius: 50%; border: 2px solid rgb(112 0 14 / .5); animation: prRing 2.4s var(--pr-ease) infinite; }
@keyframes prRing { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.pr-pin .lab { position: absolute; left: 22px; bottom: 32px; white-space: nowrap; padding: 6px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--pr-ink); }
.pr-pin .lab small { display: block; font-weight: 400; font-size: 10px; color: var(--pr-mu); }

/* buttons */
.pr .pr-acts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.pr-btn { height: 42px; padding: 0 16px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; white-space: nowrap; transition: background .2s, transform .2s; }
.pr-btn svg { width: 15px; height: 15px; }
.pr-btn span { overflow: hidden; text-overflow: ellipsis; }
.pr-btn.pr-p { background: var(--pr-m, #70000e); color: #fff; box-shadow: 0 12px 26px -12px rgb(112 0 14 / .8), inset 0 1px 0 rgb(255 255 255 / .22); }
.pr-btn.pr-p:hover { background: #5e000c; transform: translateY(-1px); }
.pr-btn.pr-s { background: rgb(255 255 255 / .82); color: var(--pr-ink, #231416); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .1); }
.pr-btn.pr-s:hover { background: #fff; }
@container pier (max-width: 560px) {
  .pr .pr-map { height: 260px; border-radius: 22px; }
  .pr .pr-acts { grid-template-columns: 1fr; }
  .pr .pr-btn.pr-p { height: 46px; }
  .pr-pin .lab { display: none; }
}

/* taxi card */
.pr-taxi { --pr-m: #70000e; --pr-mu: #6b5e60; --pr-ink: #231416; position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgb(20 6 8 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s; color: var(--pr-ink); }
.pr-taxi.on { opacity: 1; pointer-events: auto; }
.pr-tcard { width: min(620px, 100%); border-radius: 32px; padding: 34px 30px 26px; background: #fff; text-align: center; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6); transform: scale(.96); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.pr-taxi.on .pr-tcard { transform: none; }
.pr-tcard p { margin: 0; }
.pr-tcard .k { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--pr-m); }
.pr-tcard .k2 { font-size: 18px; color: var(--pr-mu); margin-top: 6px; }
.pr-tcard h3 { margin: 22px 0 6px; font-size: clamp(34px, 7vw, 54px); font-weight: 500; line-height: 1.15; }
.pr-tcard .en { font-size: 20px; color: var(--pr-mu); }
.pr-tcard .ad { margin: 18px auto 0; max-width: 32ch; font-size: 17px; line-height: 1.5; }
.pr-tcard .ll { margin-top: 10px; font-size: 13px; color: var(--pr-mu); }
.pr-tcard .ft { display: flex; gap: 10px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.pr-tcard .call { background: #eef3ee; color: #2f6b45; box-shadow: none; }
.pr-tcard .rot { margin-top: 14px; font-size: 12px; color: var(--pr-mu); }
@media (prefers-reduced-motion: reduce) { .pr-pin .ring { animation: none; } }

/* =====================================================================
   Boat page → programs: trip route map + timeline for the picked program
   (reuses the marina map's .pr-* controls)
   ===================================================================== */
#rtBox.rt { container: rt / inline-size; margin-top: 18px; --pr-m: var(--bp-maroon, #70000e); --pr-ink: var(--bp-ink, #231416); --pr-mu: var(--bp-muted, #6b5e60);
  --pr-gb: rgb(255 255 255 / .82); --pr-blur: blur(22px) saturate(185%); --pr-sh: 0 18px 50px -24px rgb(58 0 7 / .38), 0 2px 8px -4px rgb(35 20 22 / .08);
  --pr-spec: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .42); --pr-ease: cubic-bezier(.2, .8, .2, 1); --rt-sea: #1f7a8c; }
#rtBox[hidden] { display: none; }
#rtBox svg { display: inline-block; flex: none; }
.rt-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--pr-ink); }
.rt-h svg { width: 15px; height: 15px; color: var(--rt-sea); }
.rt .rt-map { position: relative; margin-top: 10px; height: 340px; border-radius: 24px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #cfdde4, #e9e2d6); box-shadow: 0 40px 80px -46px rgb(58 0 7 / .6), 0 0 0 1px rgb(255 255 255 / .6); }
.rt .rt-map.fail .pr-ov, .rt .rt-map.fail .rt-sum { display: none; }
.rt-ph { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; padding: 24px; font-size: 12.5px; color: var(--pr-mu); transition: opacity .5s; }
.rt-ph.off { opacity: 0; pointer-events: none; }
.rt-sum { position: absolute; z-index: 5; left: 12px; bottom: 12px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; border-radius: 18px; }
.rt-sum .ic { width: 34px; height: 34px; border-radius: 12px; background: var(--rt-sea); color: #fff; display: grid; place-items: center; flex: none; }
.rt-sum .ic svg { width: 17px; height: 17px; }
.rt-sum b { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--pr-ink); }
.rt-sum span { display: block; font-size: 11px; color: var(--pr-mu); }
.rt-sum .st { display: flex; gap: 14px; padding-left: 14px; border-left: 1px solid rgb(35 20 22 / .1); white-space: nowrap; }
.rt-sum .st b { font-size: 15px; }
.rt-pier { width: 30px; height: 30px; border-radius: 11px 11px 11px 3px; transform: rotate(-45deg); background: var(--bp-maroon, #70000e); display: grid; place-items: center; box-shadow: 0 10px 22px -6px rgb(58 0 7 / .6); }
.rt-pier svg { transform: rotate(45deg); width: 15px; height: 15px; color: #fff; }
.rt-stop { display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px; border-radius: 99px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--bp-ink, #231416); cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s;
  background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: 0 10px 26px -12px rgb(58 0 7 / .4), inset 0 0 0 1px rgb(255 255 255 / .5); }
.rt-stop i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #1f7a8c; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.rt-stop:hover, .rt-stop.hl { transform: scale(1.06); background: #231416; color: #fff; }
.rt-boat { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -4px rgb(0 0 0 / .4), 0 0 0 3px rgb(31 122 140 / .25); }
.rt-boat svg { width: 15px; height: 15px; color: #1f7a8c; display: inline-block; }
/* timeline */
.rt-tl { display: flex; margin-top: 14px; overflow-x: auto; padding: 18px 2px 8px; scrollbar-width: thin; }
.rt-tp { flex: 1 0 132px; position: relative; padding-right: 10px; }
.rt-tp .row { display: flex; align-items: center; gap: 6px; }
.rt-tp .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 11px; font-weight: 600; color: #fff; background: var(--rt-sea); box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgb(31 122 140 / .9); }
.rt-tp.pt .dot { background: var(--pr-m); box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgb(112 0 14 / .9); }
.rt-tp .dot svg { width: 13px; height: 13px; }
.rt-tp .ln { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--rt-sea) 0 6px, transparent 6px 11px); opacity: .45; }
.rt-tp:last-child .ln { display: none; }
.rt-tp .leg { position: absolute; top: -4px; right: calc(100% - 22px); transform: translate(50%, -100%); font-size: 10px; color: var(--pr-mu); white-space: nowrap; }
.rt-tp:first-child .leg { display: none; }
.rt-tp .tm { margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--pr-ink); }
.rt-tp b { display: block; font-size: 13px; font-weight: 500; line-height: 1.25; margin-top: 1px; color: var(--pr-ink); }
.rt-tp p { margin: 2px 0 0; font-size: 11px; color: var(--pr-mu); line-height: 1.45; }
.rt-tp.hl b { color: var(--rt-sea); }
.rt-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 11px; color: var(--pr-mu); }
.rt-note svg { width: 12px; height: 12px; }
@container rt (max-width: 600px) {
  .rt .rt-map { height: 300px; border-radius: 22px; }
  .rt-sum .st { display: none; }
}
/* pier bar under the route map (replaces the separate marina section when a route is shown) */
#rtBox .rt-pbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 20px; background: rgb(255 255 255 / .62); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 14px 34px -26px rgb(58 0 7 / .5); }
#rtBox .rt-pbar[hidden] { display: none; }
.rt-pin { width: 40px; height: 40px; border-radius: 14px 14px 14px 4px; transform: rotate(-45deg); background: var(--pr-m); display: grid; place-items: center; box-shadow: 0 10px 22px -8px rgb(58 0 7 / .7); transition: transform .2s; }
.rt-pin:hover { transform: rotate(-45deg) scale(1.06); }
.rt-pin svg { transform: rotate(45deg); width: 18px; height: 18px; color: #fff; }
.rt-pi small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pr-m); }
.rt-pi b { display: block; font-size: 15px; font-weight: 500; color: var(--pr-ink); line-height: 1.3; }
.rt-pi p { margin: 1px 0 6px; font-size: 12px; color: var(--pr-mu); }
.rt-pa { display: flex; gap: 8px; }
.rt-pa .pr-btn { height: 40px; }
@container rt (max-width: 760px) {
  #rtBox .rt-pbar { grid-template-columns: auto minmax(0, 1fr); }
  .rt-pa { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@container rt (max-width: 440px) { .rt-pa { grid-template-columns: 1fr; } }

/* =====================================================================
   Boat card · clean & quiet: no book button (guests open the boat first), one spec line,
   no divider, a soft arrow that fills on hover · the whole card opens the boat page
   ===================================================================== */
.fx-card { border-radius: 24px; box-shadow: 0 1px 0 #fff, 0 18px 44px -30px rgb(58 0 7 / .4), 0 0 0 1px rgb(35 20 22 / .06); }
.fx-card:hover { transform: translateY(-3px); box-shadow: 0 30px 64px -34px rgb(58 0 7 / .5), 0 0 0 1px rgb(35 20 22 / .07); }
.fx-more { display: none !important; }
.fx-nm { right: 16px; bottom: 16px; }
.fx-nm small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.fx-nm b { font-size: 22px; font-weight: 400; letter-spacing: -.005em; margin-top: 2px; }
.fx-body { position: relative; padding: 16px 18px 18px; }
.fx-specs { gap: 0; font-size: 12.5px; color: var(--fx-muted); letter-spacing: .01em; }
.fx-specs i { font-style: normal; margin: 0 8px; color: rgb(35 20 22 / .25); }
.fx-specs .m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-price { border-top: 0; padding-top: 0; align-items: flex-end; }
.fx-body > .fx-specs + .fx-price, .fx-body > * + .fx-price { margin-top: 18px; }
.fx-price .lbl { font-size: 11px; letter-spacing: .02em; }
.fx-price .lbl b { font-weight: 400; color: var(--fx-muted); }
.fx-price .amt { font-size: 20px; font-weight: 400; letter-spacing: -.01em; margin-top: 3px; }
.fx-price .amt span { font-size: 12px; }
.fx-view { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--fx-ink); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .14); transition: background .3s var(--fx-ease), color .3s, box-shadow .3s, transform .3s var(--fx-ease); }
.fx-view svg { width: 17px; height: 17px; transition: transform .3s var(--fx-ease); }
.fx-card:hover .fx-view { background: var(--fx-m); color: #fff; box-shadow: 0 10px 22px -10px rgb(112 0 14 / .7); }
.fx-card:hover .fx-view svg { transform: rotate(45deg); }
/* stretched link: tapping anywhere on the card body opens the boat (links/buttons inside stay on top) */
.fx-view::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.fx-body .fx-view::after { border-radius: 0 0 24px 24px; }
.fx-body a:not(.fx-view), .fx-body button, .fx-body .fx-tags { position: relative; z-index: 1; }
@container (max-width: 340px) {
  .fx-body { padding: 14px 15px 15px; }
  .fx-nm b { font-size: 19px; }
  .fx-price .amt { font-size: 17.5px; }
  .fx-view { width: 36px; height: 36px; }
  .fx-specs { font-size: 11.5px; } .fx-specs i { margin: 0 6px; }
}

/* =====================================================================
   Footer · Liquid Glass: a floating light glass panel (same width as the nav) over a soft
   maroon / sea glow, ink text, maroon accents, glass contact icons and social buttons.
   CSS only — site/shell.html stays as it is.
   ===================================================================== */
body > footer.bg-maroon-900 { --ft-m: #70000e; --ft-ink: #231416; --ft-mu: #6b5e60; --ft-line: rgb(35 20 22 / .08);
  position: relative; isolation: isolate; max-width: 80rem; margin: 56px auto 18px; border-radius: 34px; overflow: hidden;
  background: rgb(255 255 255 / .58) !important; color: var(--ft-ink) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  box-shadow: 0 30px 80px -40px rgb(58 0 7 / .45), 0 2px 10px -6px rgb(35 20 22 / .1), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .55); }
@media (max-width: 1360px) { body > footer.bg-maroon-900 { margin-left: 16px; margin-right: 16px; } }
/* the glow behind the glass */
body > footer.bg-maroon-900::before { content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 12% 18%, rgb(112 0 14 / .16), transparent 70%), radial-gradient(36% 44% at 88% 80%, rgb(31 122 140 / .16), transparent 70%), radial-gradient(30% 40% at 60% 10%, rgb(255 214 170 / .22), transparent 70%); filter: blur(10px); }
body > footer.bg-maroon-900 svg { display: inline-block; }
body > footer.bg-maroon-900 > div:first-child { padding-top: 44px; padding-bottom: 30px; }
/* text */
body > footer.bg-maroon-900 .text-white, body > footer.bg-maroon-900 .text-white\/90 { color: var(--ft-ink) !important; }
body > footer.bg-maroon-900 p.font-medium.mb-4 { color: var(--ft-m) !important; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
body > footer.bg-maroon-900 .uppercase.tracking-\[\.3em\] { color: var(--ft-m) !important; }
body > footer.bg-maroon-900 [data-i18n="foot.about"] { color: var(--ft-mu); max-width: 34ch; }
body > footer.bg-maroon-900 [data-set="tat"], body > footer.bg-maroon-900 p.text-xs.mt-4 { color: var(--ft-mu) !important; }
body > footer.bg-maroon-900 ul a, body > footer.bg-maroon-900 ul span { color: var(--ft-ink); transition: color .2s; }
body > footer.bg-maroon-900 ul.space-y-2 a { color: var(--ft-mu); }
body > footer.bg-maroon-900 ul a:hover, body > footer.bg-maroon-900 .hover\:text-sun:hover { color: var(--ft-m) !important; }
/* contact rows: icon in a small glass tile */
body > footer.bg-maroon-900 ul.space-y-3 li { align-items: center; gap: 10px; }
body > footer.bg-maroon-900 ul.space-y-3 li > svg, body > footer.bg-maroon-900 ul.space-y-3 li > i { box-sizing: content-box; width: 14px !important; height: 14px !important; padding: 8px; border-radius: 11px; color: var(--ft-m) !important;
  background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 6px 16px -10px rgb(58 0 7 / .5); }
body > footer.bg-maroon-900 ul.space-y-3 li:last-child span { color: var(--ft-mu); font-size: 12.5px; }
/* social buttons */
body > footer.bg-maroon-900 .flex.gap-2.mt-4 a { background: rgb(255 255 255 / .7) !important; color: var(--ft-ink) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .9), 0 8px 18px -12px rgb(58 0 7 / .55); transition: background .25s, color .25s, transform .25s; }
body > footer.bg-maroon-900 .flex.gap-2.mt-4 a:hover { background: var(--ft-m) !important; color: #fff !important; transform: translateY(-2px); }
/* bottom bar */
body > footer.bg-maroon-900 > .border-t { border-color: var(--ft-line) !important; background: rgb(255 255 255 / .35); }
body > footer.bg-maroon-900 > .border-t, body > footer.bg-maroon-900 > .border-t p, body > footer.bg-maroon-900 > .border-t a { color: var(--ft-mu) !important; }
body > footer.bg-maroon-900 > .border-t a:hover { color: var(--ft-m) !important; }
@media (max-width: 640px) {
  body > footer.bg-maroon-900 { margin: 40px 12px 90px; border-radius: 28px; }
  body > footer.bg-maroon-900 > div:first-child { padding-top: 32px; grid-template-columns: 1fr 1fr; row-gap: 28px; }
  body > footer.bg-maroon-900 > div:first-child > div:first-child, body > footer.bg-maroon-900 > div:first-child > div:last-child { grid-column: 1 / -1; }
}

/* =====================================================================
   Liquid Glass sweep · every page of the public site
   One soft ambient background behind the whole site; flat white/sand bands become transparent and the
   blocks on them become glass panels. CSS only, scoped by view, nothing in app.js / shell.html changes.
   ===================================================================== */
:root { --lg-bg: rgb(255 255 255 / .6); --lg-bg2: rgb(255 255 255 / .74); --lg-blur: blur(22px) saturate(185%);
  --lg-sh: 0 18px 50px -30px rgb(58 0 7 / .4), 0 2px 8px -6px rgb(35 20 22 / .08);
  --lg-spec: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .5); --lg-line: rgb(35 20 22 / .07); }
body { background: radial-gradient(1100px 700px at 0% -5%, rgb(255 255 255 / .95), transparent 60%), radial-gradient(900px 600px at 100% 20%, rgb(112 0 14 / .05), transparent 65%),
  radial-gradient(900px 700px at 0% 70%, rgb(31 122 140 / .06), transparent 65%), linear-gradient(180deg, #eef1f3 0%, #f5f0ee 45%, #f3eeec 100%); background-repeat: no-repeat; min-height: 100vh; }
/* bands that used to be flat colour */
#view-home > section#boats, #view-home > section#seoGuide, #view-home > section#faq, #view-home > section#booking,
#view-about > section, #view-legal > section.bg-sand, #view-blog section.bg-sand, body > main section.bg-sand.border-t, section.bg-sand.border-t { background: transparent !important; border-color: transparent !important; }
section.bg-sand.border-t { background-image: none !important; }
/* the glass recipe, shared */
#seoGuide #guide-types > div, #seoGuide #guide-prices > div, #seoGuide #guide-routes > ul, #seoGuide #guide-how li,
#view-about section ul > li.bg-white, #view-about section ol > li.bg-sand, #view-about section .ring-1.bg-white,
#view-dest dl > div.bg-sand, #view-dest .mt-5.bg-sand, #view-dest ul.divide-y, #view-dest aside#destForm,
#view-legal aside > div, #view-legal .legal, #view-legal .bg-sand.p-6, #view-blog aside .rounded-\[18px\].ring-1, #view-nf > section {
  background: var(--lg-bg) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-sh), var(--lg-spec) !important; border: 0 !important; --tw-ring-shadow: 0 0 #0000; }

/* ---------- home ---------- */
#typeBand { max-width: 80rem; margin: 0 auto; border-radius: 34px; box-shadow: 0 40px 90px -50px rgb(11 26 36 / .8); }
@media (max-width: 1360px) { #typeBand { margin: 0 16px; } }
#typeBand ul > li { padding: 22px 12px 18px; border-radius: 24px; background: rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .14); transition: background .3s, transform .3s; }
#typeBand ul > li:hover { background: rgb(255 255 255 / .18); transform: translateY(-3px); }
#typeBand ul { gap: 14px !important; }
#promo > div { border-radius: 34px; background: radial-gradient(120% 140% at 0% 0%, #8a1a26, #5a0010 55%, #3a0007) !important; box-shadow: 0 40px 90px -50px rgb(58 0 7 / .9), inset 0 1px 0 rgb(255 255 255 / .18); }
#promo > div .img-fallback { border-radius: 0 34px 34px 0; }
@media (max-width: 767px) { #promo > div .img-fallback { border-radius: 0 0 34px 34px; } }
#categories .cbar { background: var(--lg-bg2) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-sh), var(--lg-spec) !important; border-radius: 24px !important; }
.act-card, .rt-card { border-radius: 22px !important; }
#seoGuide #guide-types > div { gap: 0 !important; overflow: hidden; border-radius: 22px !important; }
#seoGuide #guide-types > div > * { background: transparent !important; box-shadow: inset 0 0 0 .5px var(--lg-line); }
#seoGuide #guide-prices > div, #seoGuide #guide-routes > ul { border-radius: 22px !important; overflow: hidden; }
#seoGuide table thead, #seoGuide table thead tr { background: rgb(255 255 255 / .45) !important; }
#seoGuide table td, #seoGuide table th { border-color: var(--lg-line) !important; }
#seoGuide #guide-routes > ul > li { border-color: var(--lg-line) !important; }
#seoGuide #guide-routes > ul > li:hover, #seoGuide #guide-routes > ul a:hover { background: rgb(255 255 255 / .5); }
#seoGuide #guide-how li { border-radius: 20px !important; }

/* ---------- about ---------- */
#view-about > section.border-y > div { max-width: 80rem; border-radius: 28px; background: var(--lg-bg); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-sh), var(--lg-spec); padding: 26px 32px !important; }
@media (max-width: 1360px) { #view-about > section.border-y > div { margin: 0 16px; } }
#view-about section ul > li.bg-white { border-radius: 22px !important; }
#view-about section ul.gap-3 > li.bg-white { background: var(--lg-bg2) !important; border-radius: 16px !important; }
#view-about section ol > li.bg-sand { border-radius: 22px !important; }
#view-about .bg-maroon.rounded-\[24px\] { border-radius: 30px !important; background: radial-gradient(120% 140% at 0% 0%, #8a1a26, #5a0010 55%, #3a0007) !important; box-shadow: 0 40px 90px -50px rgb(58 0 7 / .9), inset 0 1px 0 rgb(255 255 255 / .18); }
#view-about section .ring-1.bg-white.rounded-\[24px\] { border-radius: 30px !important; }

/* ---------- destination ---------- */
#view-dest > section.bg-ink:first-child { max-width: 80rem; margin: 8px auto 0; border-radius: 34px; box-shadow: 0 40px 90px -50px rgb(11 26 36 / .8); }
@media (max-width: 1360px) { #view-dest > section.bg-ink:first-child { margin: 8px 16px 0; } }
#view-dest dl > div.bg-sand { border-radius: 20px; }
#view-dest ul.divide-y { border-radius: 24px; padding: 4px 22px; }
#view-dest ul.divide-y > li { border-color: var(--lg-line) !important; }
#view-dest .mt-5.bg-sand { border-radius: 24px; }
#view-dest .mt-5.bg-sand details { border-color: var(--lg-line) !important; }
#view-dest aside#destForm { border-radius: 30px !important; }

/* ---------- legal ---------- */
#view-legal aside > div { padding: 18px 16px; border-radius: 24px; }
#view-legal .legal { padding: 30px 34px; border-radius: 30px; }
#view-legal .bg-sand.p-6 { border-radius: 24px !important; }
@media (max-width: 640px) { #view-legal .legal { padding: 22px 18px; border-radius: 24px; } }

/* ---------- blog post ---------- */
#view-blog aside .rounded-\[18px\].ring-1 { border-radius: 24px !important; }
#view-blog .mt-12.rounded-\[22px\] { border-radius: 30px !important; box-shadow: 0 40px 90px -50px rgb(58 0 7 / .9), inset 0 1px 0 rgb(255 255 255 / .18); }

/* ---------- 404 ---------- */
#view-nf > section { max-width: 560px; margin: 64px auto; padding: 56px 28px !important; border-radius: 34px; }
@media (max-width: 600px) { #view-nf > section { margin: 40px 16px; } }

/* ---------- team band (every page): the band stays a soft glow, cards were already glass ---------- */
section#team { background: transparent !important; background-image: none !important; border-color: transparent !important; }

/* =====================================================================
   Boat page photo bento: the rows scale with the screen instead of a fixed 250 + 250 px,
   so on tablets / small laptops the photos keep a landscape shape instead of turning into tall strips
   ===================================================================== */
@media (min-width: 721px) {
  .bento { grid-template-rows: repeat(2, clamp(150px, 17.4vw, 250px)); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .bento { grid-template-columns: 2.4fr 1fr 1fr; gap: 8px; }
  .bento-n3 { grid-template-columns: 2.4fr 1.3fr; }
  .bt { border-radius: 18px !important; }
}
@media (max-width: 720px) {
  .bento { grid-template-rows: clamp(230px, 60vw, 400px) 84px; }
  .bento-n2, .bento-n1 { grid-template-rows: clamp(230px, 60vw, 400px); }
}

/* =====================================================================
   Minimal type · lighter, smaller headings across the public site (body text was already 13 px).
   Scale: page title 28–34 · section title 22–26 · panel title 19 · card title 16–17 · article body 15.5
   ===================================================================== */
[id^="view-"] h1:not(#heroTitle) { font-size: clamp(26px, 2.5vw, 34px) !important; font-weight: 400 !important; letter-spacing: -.012em; line-height: 1.2 !important; }
#heroTitle > span:not(.ht-kw) { font-size: clamp(26px, 3vw, 38px) !important; font-weight: 400 !important; letter-spacing: -.01em; }
.fx-head h1, #fxH1 { font-size: clamp(30px, 3.2vw, 42px) !important; font-weight: 300 !important; }
.bt-main h1, #view-boat .bento h1 { font-size: clamp(30px, 3.4vw, 46px) !important; font-weight: 300 !important; }
#view-dest > section:first-child h1 { font-size: clamp(28px, 3vw, 40px) !important; font-weight: 300 !important; }
/* section titles */
[id^="view-"] h2.tm-title, [id^="view-"] h2.font-display, #typeBandTitle, section#team h2 { font-size: clamp(21px, 1.9vw, 26px) !important; font-weight: 400 !important; letter-spacing: -.008em; line-height: 1.3 !important; }
.bp-panel h2, .bp-simhead h2 { font-size: 19px !important; font-weight: 400 !important; }
#rtBox .rt-h, .pr .pr-h h2 { font-weight: 400; }
.pr .pr-h h2 { font-size: 22px !important; }
/* smaller titles inside sections */
[id^="view-"] h3.font-display, [id^="view-"] .font-display.text-xl { font-size: 16px !important; font-weight: 400 !important; }
#homeBlog h3, #view-blog .grid h3 { font-size: 15.5px !important; font-weight: 400 !important; }
#view-about h3.text-lg, #view-about li h3 { font-size: 15px !important; }
#view-about .font-display.text-3xl.text-maroon, #view-about p.font-display.text-3xl { font-size: 26px !important; font-weight: 300 !important; }
/* boat cards */
.fx-nm b { font-size: 19px !important; font-weight: 300 !important; }
.fx-price .amt { font-size: 17px !important; }
@container (max-width: 340px) { .fx-nm b { font-size: 17px !important; } .fx-price .amt { font-size: 16px !important; } }
/* article */
#view-blog .post-body { font-size: 15.5px; line-height: 1.75; }
#view-blog .post-body p, #view-blog .post-body li { font-size: 15.5px !important; }
#view-blog .post-body h2 { font-size: 21px !important; font-weight: 500 !important; letter-spacing: -.005em; margin-top: 1.8em; }
#view-blog .post-body h3 { font-size: 17px !important; font-weight: 500 !important; }
#view-blog p.font-display.text-2xl { font-size: 22px !important; }
/* team cards: the phone number */
section#team .tm-card b, section#team [class*="phone"] { font-weight: 400; }

/* =====================================================================
   Brand icons: brand colour where the icon sits on a light tile; white on maroon buttons
   ===================================================================== */
svg.bi { display: inline-block; flex: none; }
/* footer: one colour for every mark (maroon, like the other contact icons); the brand colour only on hover */
body > footer svg.bi { color: #70000e !important; }
body > footer .flex.gap-2.mt-4 a { color: #70000e !important; }
body > footer .flex.gap-2.mt-4 a svg.bi { width: 17px !important; height: 17px !important; transition: color .25s, transform .25s; }
body > footer .flex.gap-2.mt-4 a:hover svg.bi { color: #fff !important; transform: scale(1.06); }
/* booking contact cards: every tile in the site's maroon (like the phone tile), white marks */
.ct-card svg.bi { color: #fff !important; }
body > footer .flex.gap-2.mt-4 a:hover:has(.bi-facebook) { background: #0866FF !important; }
body > footer .flex.gap-2.mt-4 a:hover:has(.bi-instagram) { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF) !important; }
body > footer .flex.gap-2.mt-4 a:hover:has(.bi-youtube) { background: #FF0000 !important; }
body > footer .flex.gap-2.mt-4 a:hover:has(.bi-tiktok) { background: #000 !important; }
body > footer .flex.gap-2.mt-4 a:hover:has(.bi-line) { background: #06C755 !important; }
/* team cards: smaller phone number */
#team .tm-tel { font-size: 17px !important; font-weight: 400 !important; letter-spacing: .01em; }

/* =====================================================================
   Article cards (home, blog list, related): photo edge to edge on top, quiet panel below —
   title, date, then the summary. One card everywhere.
   ===================================================================== */
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  box-shadow: 0 18px 50px -32px rgb(58 0 7 / .45), inset 0 0 0 1px rgb(255 255 255 / .7); padding-bottom: 24px; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]):hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgb(58 0 7 / .55), inset 0 0 0 1px rgb(255 255 255 / .8); }
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > div:first-child { border-radius: 0 !important; aspect-ratio: 16 / 10; }
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > div:first-child span { top: 14px; left: 14px; font-size: 11px; padding: 4px 11px; background: rgb(255 255 255 / .82) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > h3 { order: 1; margin: 0 !important; padding: 20px 24px 0; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4; color: #231416; }
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]):hover > h3 { color: #70000e; }
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > p.text-xs { order: 2; margin: 4px 0 0 !important; padding: 0 24px; font-size: 13px !important; color: #6b5e60; }
a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > p.text-sm { order: 3; margin: 12px 0 0 !important; padding: 0 24px; font-size: 13.5px !important; line-height: 1.65; color: #3d3133; }
@media (max-width: 640px) {
  a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) { border-radius: 24px; padding-bottom: 20px; }
  a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > h3 { padding: 16px 18px 0; }
  a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > p.text-xs { padding: 0 18px; }
  a.group.block:has(> div.aspect-\[4\/3\] img[data-pid]) > p.text-sm { padding: 0 18px; }
}

/* =====================================================================
   Contact page
   ===================================================================== */
#view-contact svg { display: inline-block; flex: none; }
#view-contact nav svg { width: 12px; height: 12px; }
.cx-eye { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #70000e; }
.cx-eye svg { width: 14px; height: 14px; }
.cx-hero { margin-top: 22px; padding: 34px 36px; border-radius: 32px; background: rgb(255 255 255 / .6); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: 0 18px 50px -30px rgb(58 0 7 / .4), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .5);
  background-image: radial-gradient(600px 260px at 100% 0%, rgb(112 0 14 / .07), transparent 70%), radial-gradient(500px 260px at 0% 100%, rgb(31 122 140 / .07), transparent 70%); }
.cx-hero h1 { margin: 10px 0 0; }
.cx-sub { margin: 10px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.7; color: #6b5e60; }
.cx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cx-meta > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12px; color: #231416; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .08); }
.cx-meta svg { width: 14px; height: 14px; color: #70000e; }
.cx-open i { width: 8px; height: 8px; border-radius: 50%; background: #9a8f90; }
.cx-open.on i { background: #1e9e55; box-shadow: 0 0 0 3px rgb(30 158 85 / .18); }
.cx-open.on { color: #1e7a46; }
.cx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.cx-ch { display: flex; flex-direction: column; border-radius: 26px; padding: 18px; background: rgb(255 255 255 / .66); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  box-shadow: 0 18px 44px -32px rgb(58 0 7 / .45), inset 0 0 0 1px rgb(255 255 255 / .7); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.cx-ch:hover { transform: translateY(-3px); box-shadow: 0 28px 54px -32px rgb(58 0 7 / .55), inset 0 0 0 1px rgb(255 255 255 / .8); }
.cx-main { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cx-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #8a1a26, #70000e 60%, #4a0009); box-shadow: 0 10px 22px -10px rgb(112 0 14 / .8), inset 0 1px 0 rgb(255 255 255 / .22); }
.cx-ic svg { width: 21px; height: 21px; color: #fff !important; }
.cx-tx small { display: block; font-size: 12px; color: #6b5e60; }
.cx-tx b { display: block; font-size: 16px; font-weight: 500; color: #231416; margin-top: 2px; overflow-wrap: anywhere; }
.cx-tx em { display: block; font-style: normal; font-size: 11.5px; color: #8a7d7f; margin-top: 4px; line-height: 1.5; }
.cx-act { display: flex; gap: 6px; margin-top: 16px; }
.cx-go { flex: 1; height: 38px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: #fff; background: #70000e; box-shadow: 0 10px 20px -12px rgb(112 0 14 / .8); transition: background .2s; }
.cx-go:hover { background: #5e000c; }
.cx-go svg { width: 14px; height: 14px; }
.cx-cp { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #231416; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .1); }
.cx-cp:hover { background: #fff; }
.cx-cp svg { width: 15px; height: 15px; }
.cx-two > * { min-width: 0; }
.cx-two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cx-form { padding: 30px; border-radius: 32px; background: rgb(255 255 255 / .6); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: 0 18px 50px -30px rgb(58 0 7 / .4), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .5); }
.cx-form h2 { margin: 8px 0 0; }
.cx-sub2 { margin: 6px 0 20px; font-size: 13px; color: #6b5e60; }
.cx-side { display: grid; gap: 14px; }
.cx-card { padding: 22px; border-radius: 26px; background: rgb(255 255 255 / .6); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: 0 18px 44px -32px rgb(58 0 7 / .45), inset 0 0 0 1px rgb(255 255 255 / .7); }
.cx-card h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #231416; }
.cx-card h3 svg { width: 16px; height: 16px; color: #70000e; }
.cx-co { margin: 0; font-size: 14px; font-weight: 500; }
.cx-ad { margin: 4px 0 0; font-size: 13px; color: #6b5e60; line-height: 1.6; }
.cx-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: 12.5px; }
.cx-dl dt { color: #8a7d7f; } .cx-dl dd { margin: 0; color: #231416; }
.cx-map { margin-top: 16px; height: 38px; padding: 0 16px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #231416; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .12); }
.cx-map:hover { background: #fff; color: #70000e; }
.cx-map svg { width: 14px; height: 14px; color: #70000e; }
.cx-note { margin: 12px 0 0; font-size: 11.5px; color: #8a7d7f; line-height: 1.55; }
.cx-piers { list-style: none; margin: 0; padding: 0; }
.cx-piers li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgb(35 20 22 / .07); }
.cx-piers li:first-child { border-top: 0; padding-top: 0; }
.cx-piers b { display: block; font-size: 13px; font-weight: 500; }
.cx-piers small { display: block; font-size: 11.5px; color: #8a7d7f; }
.cx-piers a { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #70000e; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(35 20 22 / .1); }
.cx-piers a:hover { background: #70000e; color: #fff; }
.cx-piers a svg { width: 14px; height: 14px; }
.cx-tips ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.cx-tips li { display: flex; gap: 8px; align-items: flex-start; }
.cx-tips li svg { width: 14px; height: 14px; color: #1e7a46; margin-top: 3px; }
@media (max-width: 1100px) { .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cx-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .cx-hero { padding: 24px 20px; border-radius: 26px; }
  .cx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #ctFormWrap .bf { grid-template-columns: minmax(0, 1fr); }
  #ctFormWrap .bf > * { grid-column: 1 / -1; }
  .cx-main { flex-direction: row; align-items: center; }
  .cx-form { padding: 22px 16px; border-radius: 26px; }
}

/* booking form: privacy notice + marketing consent */
.bf-note a { color: #70000e; text-decoration: underline; text-underline-offset: 2px; }
.bf-check small { color: #8a7d7f; font-size: .92em; }