*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:#08110f;color:#f3efe6;font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure{margin:0}
img{max-width:100%;display:block}
a{color:#d8c08a;text-decoration:none}
button{font-family:inherit}
::selection{background:#c9a24b;color:#08110f}
:focus-visible{outline:2px solid #c9a24b;outline-offset:3px}
@keyframes advRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes advSpin{to{transform:rotate(360deg)}}
@keyframes advFade{from{opacity:0}to{opacity:1}}
/* ===== motion tokens (DESIGN_SYSTEM) ===== */
:root{
--ease-out:cubic-bezier(.22,1,.36,1);
--d-fast:180ms; --d-mid:240ms; --d-slow:600ms; --d-slower:1200ms;
--stagger:60ms; --reveal-y:24px;
/* type */
--serif:'Cormorant Garamond',serif; --sans:Manrope,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
/* color */
--ink-900:#08110f; --ink-800:#0a1512; --ink-700:#0c1a16; --ink-950:#060d0b;
--cream:#f3efe6; --sand:#f4efe4;
--gold:#c9a24b; --gold-soft:#e7d6a8; --gold-hover:#d8b968; --teal:#0e5a52;
/* spacing 8pt */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px; --s7:64px; --s8:104px; --s9:160px;
}
/* scroll reveal */
/* content is visible by default; only hidden once JS confirms it can reveal it */
.reveal{transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
.js .reveal{opacity:0;transform:translateY(var(--reveal-y))}
.js .reveal.in{opacity:1;transform:none}
.reveal-img{overflow:hidden}
.js .reveal-img>img,.js .reveal-scale{transform:scale(1.06);transition:transform var(--d-slower) var(--ease-out)}
.js .reveal-img.in>img,.js .reveal-scale.in{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal,.reveal-img>img,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important}
/* sheets appear in place: a slide-up someone cannot see must not leave the
panel parked off-screen */
#modal-panel,.sheet-panel,.ccp-panel{animation:none!important;transform:none!important}
}
/* icons */
.ic{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.125em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{fill:currentColor;stroke:none}
/* ===== editorial utilities ===== */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#c9a24b;font-weight:500}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,230,.62)}
.hair-v{width:1px;height:12px;background:rgba(216,192,138,.3);display:inline-block}
.hair{height:1px;background:rgba(216,192,138,.14);border:0;margin:0}
.quiet-link{display:inline-flex;align-items:center;gap:9px;font-size:14px;letter-spacing:.02em;color:rgba(243,239,230,.86);padding-bottom:4px;border-bottom:1px solid rgba(216,192,138,.35);transition:color var(--d-mid) var(--ease-out),border-color var(--d-mid) var(--ease-out)}
.quiet-link:hover{color:#e7d6a8;border-color:#c9a24b}
.quiet-link .ic{transition:transform var(--d-mid) var(--ease-out)}
.quiet-link:hover .ic{transform:translateX(4px)}
.btn-magnetic{transition:background var(--d-mid) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.btn-magnetic:active{transform:scale(.98)}
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:20px 46px;background:transparent;border-bottom:1px solid transparent;transition:background .35s,box-shadow .35s,padding .35s,border-color .35s}
.nav.scrolled{background:rgba(7,14,12,.92);border-bottom:1px solid rgba(216,192,138,.14);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);box-shadow:0 12px 34px -20px rgba(0,0,0,.7);padding:14px 46px}
.nav-links{display:flex;gap:34px;font-size:13.5px;letter-spacing:.04em}
.nav-links a{color:rgba(243,239,230,.86);transition:color .2s}
.nav-links a:hover{color:#d8c08a}
.nav-phone{font-size:13.5px;color:rgba(243,239,230,.74);letter-spacing:.02em;transition:color .2s}
.nav-phone:hover{color:#f3efe6}
.btn{cursor:pointer;font-family:inherit}
.btn-gold{background:#c9a24b;color:#08110f;font-weight:700;border:none;transition:background .25s}
.btn-gold:hover{background:#d8b968}
.btn-outline-gold{border:1px solid #c9a24b;background:transparent;color:#e7d6a8;transition:background .25s,color .25s}
.btn-outline-gold:hover{background:#c9a24b;color:#08110f}
.btn-outline-cream{border:1px solid rgba(243,239,230,.42);color:#f3efe6;transition:border-color .25s,color .25s}
.btn-outline-cream:hover{border-color:#c9a24b;color:#e7d6a8}
.btn-dark{background:#12201c;color:#f4efe4;border:none;transition:background .25s}
.btn-dark:hover{background:#0e5a52}
.btn-wa{background:transparent;color:#e7d6a8;border:1px solid rgba(216,192,138,.42);font-weight:600;transition:background var(--d-mid) var(--ease-out),border-color var(--d-mid) var(--ease-out)}
.btn-wa:hover{background:rgba(201,162,75,.12);border-color:#c9a24b}
.tour-card{transition:border-color .25s,transform .25s}
.tour-card:hover{border-color:rgba(216,192,138,.45);transform:translateY(-3px)}
.dest-tile{transition:opacity .3s}
.dest-tile:hover{opacity:.94}
.link-underline{transition:color .2s}
.link-underline:hover{color:#e9d9a8}
.f-link{color:rgba(243,239,230,.72);transition:color .2s}
.f-link:hover{color:#d8c08a}
.hero-widget{transition:border-color .25s}
.hero-widget:hover{border-color:rgba(216,192,138,.55)}
.icon-btn{transition:background .2s,border-color .2s}
.icon-btn:hover{background:rgba(201,162,75,.15)}
.modal-input:focus,.modal-input:focus-visible{border-color:#c9a24b!important;outline:none}
/* gallery */
.gal-tab{background:transparent;border:1px solid rgba(216,192,138,.28);color:rgba(243,239,230,.72);padding:9px 20px;border-radius:100px;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:.2s}
.gal-tab.on{background:#c9a24b;color:#08110f;border-color:#c9a24b;font-weight:700}
.gal-item{border:none;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#0c1a16;position:relative}
.gal-item img{transition:transform .5s ease,opacity .4s}
.gal-item:hover img{transform:scale(1.06)}
/* lightbox */
#lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(4,9,8,.94);animation:advFade .2s}
#lb.open{display:flex}
#lb img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 40px 90px -20px rgba(0,0,0,.9)}
.lb-btn{position:absolute;background:rgba(11,22,19,.7);border:1px solid rgba(216,192,138,.3);color:#e7d6a8;width:52px;height:52px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.lb-btn:hover{background:rgba(201,162,75,.2)}
#lbPrev{left:20px;top:50%;transform:translateY(-50%)}
#lbNext{right:20px;top:50%;transform:translateY(-50%)}
#lbClose{right:20px;top:20px;width:46px;height:46px}
#lbCount{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.14em;color:rgba(243,239,230,.7);background:rgba(11,22,19,.6);padding:7px 16px;border-radius:100px}
/* sticky mobile CTA */
/* floating whatsapp (desktop) */
#waFab{position:fixed;right:28px;bottom:28px;z-index:54;width:54px;height:54px;border-radius:50%;background:rgba(10,18,16,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(216,192,138,.32);color:#e7d6a8;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);transition:transform var(--d-mid) var(--ease-out),border-color var(--d-mid) var(--ease-out)}
#waFab:hover{transform:scale(1.06);border-color:#c9a24b}
/* ============================================================
ADV Yachting — page system
Phase 2 (type scale, grid, rhythm, restraint, contrast)
Phase 3 (grain, micro-interactions, states)
============================================================ */
:root{
/* foreground ramp — all ≥ 4.5:1 on --ink-900 (WCAG AA) */
--fg-0:#f4f0e7; /* headings */
--fg-1:#e4e0d6; /* body */
--fg-2:#b9b5aa; /* secondary 5.6:1 */
--fg-3:#9d998f; /* tertiary 4.6:1 */
--hair:rgba(216,192,138,.16);
--hair-2:rgba(216,192,138,.28);
/* type scale ~1.28 */
--fs-display:clamp(60px,9vw,140px);
--fs-h1:clamp(44px,6.4vw,104px);
--fs-h2:clamp(30px,3.6vw,52px);
--fs-h3:clamp(21px,2vw,26px);
--fs-lead:clamp(21px,2.4vw,32px);
--fs-body:16.5px;
--maxw:1280px;
}
/* ── layout ─────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 46px}
.wrap.wide{max-width:1400px}
.wrap.narrow{max-width:860px}
main{display:block}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink-900);
padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;font-size:14px}
.skip:focus{left:0}
/* ── nav ────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:flex;
align-items:center;justify-content:center;flex:0 0 auto;transition:transform var(--d-slow) var(--ease-out)}
.brand-mark>span{width:10px;height:10px;background:var(--gold);transform:rotate(45deg);display:block}
.brand:hover .brand-mark{transform:rotate(90deg)}
.brand-name{display:block;font-family:Marcellus,serif;font-size:24px;letter-spacing:.2em;color:var(--fg-0)}
.brand-sub{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.4em;color:var(--gold-soft);margin-top:5px}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
background:var(--gold);transition:right var(--d-mid) var(--ease-out)}
.nav-links a:hover::after,.nav-links a.on::after{right:0}
.nav-links a.on{color:var(--gold-soft)}
/* ── type ───────────────────────────────────────────────── */
.t-h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-h1);line-height:.94;
letter-spacing:-.022em;color:var(--fg-0);max-width:20ch}
.h2,.sec-head h2,.faq-gh{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);
line-height:1.06;letter-spacing:-.012em;color:var(--fg-0)}
.h2.mt8{margin-top:var(--s8)}.h2.mt6{margin-top:var(--s6)}
.lead{font-family:var(--serif);font-size:var(--fs-lead);line-height:1.34;color:var(--fg-0);letter-spacing:-.008em}
.body-p{font-size:var(--fs-body);line-height:1.78;color:var(--fg-2);margin-top:var(--s5)}
.body-p strong{color:var(--fg-1);font-weight:600}
.hero-sub{font-family:var(--serif);font-size:clamp(19px,2.1vw,27px);line-height:1.4;color:var(--gold-soft);
margin-top:18px;max-width:34ch}
.fineprint{font-size:13.5px;color:var(--fg-3);margin-top:var(--s4);line-height:1.65}
.prose-narrow{max-width:720px;margin:0 auto}
.gold{color:var(--gold)}
.mb18{margin-bottom:18px}
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);flex:0 0 auto}
/* ── section heads ──────────────────────────────────────── */
.sec-head{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s7);align-items:end;margin-bottom:var(--s7)}
.sec-head h2{max-width:22ch}
.sec-note{font-size:15.5px;line-height:1.72;color:var(--fg-2);max-width:38ch;justify-self:end}
.sec-head.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center h2{max-width:26ch}
/* ── hero ───────────────────────────────────────────────── */
.t-hero{position:relative;min-height:84vh;display:flex;align-items:flex-end;
background-size:cover;background-position:center}
/* heroes sit over photographs of unknown brightness — keep text legible everywhere */
.t-hero-inner .eyebrow,.t-hero-inner .label,.t-hero .crumb{text-shadow:0 1px 12px rgba(4,9,8,.75)}
.t-h1,.hero-sub{text-shadow:0 2px 30px rgba(4,9,8,.5)}
.t-hero.short{min-height:62vh}
.t-hero-inner{max-width:var(--maxw);margin:0 auto;padding:180px 46px 68px;width:100%}
.hero-meta{margin-top:var(--s6)}
.hero-cta{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:24px;margin-top:var(--s6);flex-wrap:wrap}
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.crumb a{color:var(--fg-2);transition:color var(--d-mid) var(--ease-out)}
.crumb a:hover{color:var(--gold-soft)}
.crumb>span{color:var(--fg-3)}
.crumb .gold{color:var(--gold)}
/* ── cards grids ────────────────────────────────────────── */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* tour card */
.tcard{display:flex;flex-direction:column;background:var(--ink-700);border:1px solid var(--hair);
border-radius:16px;overflow:hidden;transition:border-color var(--d-mid) var(--ease-out),
transform var(--d-mid) var(--ease-out)}
.tcard:hover{border-color:var(--hair-2);transform:translateY(-4px)}
.tcard-img{display:block;height:212px;background-size:cover;background-position:center;
transition:transform var(--d-slower) var(--ease-out)}
.tcard:hover .tcard-img{transform:scale(1.045)}
.tcard-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.tcard-name{display:block;font-family:var(--serif);font-size:30px;line-height:1.05;color:var(--fg-0);margin-top:10px}
.tcard-tag{display:block;font-size:13.5px;color:var(--gold);margin-top:6px}
.tcard-meta{display:flex;gap:18px;align-items:center;margin-top:18px;padding-top:16px;
border-top:1px solid var(--hair);flex-wrap:wrap}
.tcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:20px}
.tcard-price{font-family:var(--serif);font-size:28px;color:var(--fg-0)}
.tcard-price span{font-family:var(--sans);font-size:12.5px;color:var(--fg-3)}
.tcard-go{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair-2);display:flex;
align-items:center;justify-content:center;color:var(--gold-soft);font-size:17px;flex:0 0 auto;
transition:background var(--d-mid) var(--ease-out),transform var(--d-mid) var(--ease-out)}
.tcard:hover .tcard-go{background:var(--gold);color:var(--ink-900);transform:translateX(3px)}
/* destination card */
.dcard{position:relative;min-height:300px;border-radius:14px;overflow:hidden;display:flex;
align-items:flex-end;padding:24px;background-size:cover;background-position:center;
transition:transform var(--d-mid) var(--ease-out)}
.dcard:hover{transform:translateY(-4px)}
.dcard-name{display:block;font-family:var(--serif);font-size:27px;color:#fff;line-height:1.1}
.dcard-where{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:7px}
/* why card */
.why-card{border-top:1px solid var(--hair-2);padding-top:24px}
.why-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold)}
.why-card h3{font-size:17.5px;color:var(--fg-0);margin-top:16px;font-weight:600}
.why-card p{font-size:14.5px;line-height:1.68;color:var(--fg-2);margin-top:10px}
/* journal card */
.jcard{display:flex;flex-direction:column;background:var(--ink-700);border:1px solid var(--hair);
border-radius:16px;overflow:hidden;transition:border-color var(--d-mid) var(--ease-out),transform var(--d-mid) var(--ease-out)}
.jcard:hover{border-color:var(--hair-2);transform:translateY(-4px)}
.jcard-img{display:block;height:200px;background-size:cover;background-position:center;
transition:transform var(--d-slower) var(--ease-out)}
.jcard:hover .jcard-img{transform:scale(1.045)}
.jcard-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.jcard-h{font-family:var(--serif);font-size:24px;line-height:1.18;color:var(--fg-0)}
.jcard-p{font-size:14.5px;line-height:1.65;color:var(--fg-2);flex:1}
/* ── split / feature ───────────────────────────────────── */
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s7);align-items:center}
.split-media{min-height:520px;border-radius:16px;background-size:cover;background-position:center;
border:1px solid var(--hair)}
.split-text .h2{margin-top:18px;max-width:16ch}
/* ── two-column article layout ─────────────────────────── */
.t-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:var(--s7);align-items:start;
max-width:var(--maxw);margin:0 auto;padding:0 46px}
.t-main{min-width:0}
/* ── booking card ──────────────────────────────────────── */
.bookcard{position:sticky;top:104px;background:var(--ink-700);border:1px solid var(--hair-2);
border-radius:16px;padding:26px}
.bookcard .row{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:13px 15px;border:1px solid var(--hair);border-radius:10px}
.row-h{font-size:14.5px;color:var(--fg-0);font-weight:600}
.row-s{font-size:12px;color:var(--fg-3)}
.stepper{display:flex;align-items:center;gap:14px}
.stepper>span{min-width:18px;text-align:center;font-size:16px;color:var(--fg-0);font-family:var(--mono)}
.bookcard input,.bookcard select{width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--hair-2);
background:rgba(255,255,255,.03);color:var(--fg-0);font-size:14.5px;outline:none;color-scheme:dark;
transition:border-color var(--d-fast) var(--ease-out)}
.bookcard input:focus,.bookcard select:focus{border-color:var(--gold)}
.step-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--hair-2);background:transparent;
color:var(--gold-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
font-size:15px;transition:background var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.step-btn:hover{background:rgba(201,162,75,.15)}
.step-btn:active{transform:scale(.92)}
.bc-name{font-family:var(--serif);font-size:29px;color:var(--fg-0);line-height:1.1;margin-top:6px}
.bc-price{display:flex;align-items:baseline;gap:7px;margin-top:14px;padding-bottom:var(--s5);
border-bottom:1px solid var(--hair)}
.bc-price>span:first-child{font-family:var(--serif);font-size:34px;color:var(--gold)}
.bc-unit{font-size:13px;color:var(--fg-2)}
.bc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s5);
padding-top:var(--s4);border-top:1px solid var(--hair)}
.bc-total>span:last-child{font-family:var(--serif);font-size:30px;color:var(--gold)}
.bc-err{display:none;font-size:12.5px;color:#e8a87c;margin-top:var(--s3)}
.bc-cta{width:100%;margin-top:var(--s5);padding:17px;border-radius:100px;font-size:14.5px;letter-spacing:.03em}
.bc-wa{display:block;width:100%;margin-top:10px;padding:16px;border-radius:100px;text-align:center;font-size:14px}
.bc-note{font-size:12px;color:var(--fg-3);margin-top:var(--s4);line-height:1.6}
.mini-tour{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--hair);
color:var(--fg-1);transition:color var(--d-mid) var(--ease-out)}
.mini-tour:hover{color:var(--gold-soft)}
.mini-tour .ic{margin-left:auto;color:var(--gold);flex:0 0 auto}
.mini-img{width:52px;height:40px;border-radius:7px;background-size:cover;background-position:center;flex:0 0 auto}
.mini-name{display:block;font-size:15px;color:var(--fg-0);font-weight:600;margin-top:2px}
.mini-price{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--fg-3);margin-top:3px}
/* ── specs / facts ─────────────────────────────────────── */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
border:1px solid var(--hair);border-radius:12px;overflow:hidden;margin-top:var(--s7)}
.specs>div{background:var(--ink-800);padding:20px}
.specs .v{font-family:var(--serif);font-size:25px;color:var(--fg-0);margin-top:8px;line-height:1.15}
/* ── itinerary ─────────────────────────────────────────── */
.itin{display:flex;flex-direction:column;margin-top:var(--s5)}
.itin>div{display:flex;gap:26px;padding:20px 0;border-top:1px solid var(--hair)}
.itin>div:last-child{border-bottom:1px solid var(--hair)}
.itin .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--gold);
width:92px;flex:0 0 auto;padding-top:5px}
.itin-h{font-weight:600;font-size:16px;color:var(--fg-0)}
.itin-p{font-size:14.5px;color:var(--fg-2);margin-top:5px;line-height:1.62}
/* ── included / not ────────────────────────────────────── */
.inc{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-top:var(--s5)}
.inc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.inc ul.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px var(--s6)}
.inc li{display:flex;gap:11px;font-size:14.5px;line-height:1.55;color:var(--fg-1)}
.inc li .ic{margin-top:3px;font-size:16px;flex:0 0 auto}
.inc .yes .ic{color:var(--gold)}
.inc .no{color:var(--fg-3)}
.inc .no .ic{color:var(--fg-3)}
/* ── gallery ───────────────────────────────────────────── */
.gal-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));grid-auto-rows:162px;gap:10px}
.gal-item{border:none;padding:0;border-radius:12px;overflow:hidden;cursor:zoom-in;background:var(--ink-700);position:relative}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slower) var(--ease-out),opacity var(--d-slow)}
.gal-item:hover img{transform:scale(1.065)}
.crew-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.crew-grid>.gal-item{min-height:440px}
.crew-col{display:grid;grid-template-rows:1fr 1fr;gap:16px}
/* ── quotes ────────────────────────────────────────────── */
.quote-band{padding:var(--s9) 0;background-size:cover;background-position:center;background-attachment:fixed}
.pull{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(27px,4.2vw,52px);
line-height:1.2;color:#fff;margin:0}
.q{margin:0;border-top:1px solid var(--hair-2);padding-top:var(--s5);
font-family:var(--serif);font-size:23px;line-height:1.4;color:var(--fg-0)}
.q footer{margin-top:var(--s5);display:block}
/* ── faq ───────────────────────────────────────────────── */
.faq-group{margin-bottom:var(--s7)}
.faq-gh{font-size:clamp(24px,2.4vw,32px);margin-bottom:var(--s3)}
.faq-d{border-top:1px solid var(--hair)}
.faq-d:last-child{border-bottom:1px solid var(--hair)}
.faq-d summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
align-items:center;gap:20px;padding:24px 2px;font-size:16.5px;color:var(--fg-0);font-weight:600}
.faq-d summary::-webkit-details-marker{display:none}
.faq-d summary:hover{color:var(--gold-soft)}
.faq-i{color:var(--gold);font-size:18px;flex:0 0 auto}
.faq-i .m{display:none}
.faq-d[open] .faq-i .p{display:none}
.faq-d[open] .faq-i .m{display:inline-block}
.faq-d p{font-size:15px;line-height:1.75;color:var(--fg-2);padding:0 2px 26px;max-width:70ch;margin:0}
/* ── misc blocks ───────────────────────────────────────── */
.note-band{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.legal-s{margin-top:var(--s6)}
.legal-s h2{font-family:var(--serif);font-weight:400;font-size:23px;color:var(--fg-0);letter-spacing:-.005em}
.legal-s p{font-size:15.5px;line-height:1.78;color:var(--fg-2);margin-top:var(--s3)}
.c-rows{border-top:1px solid var(--hair)}
.c-row{display:grid;grid-template-columns:180px 1fr;gap:var(--s5);padding:20px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.c-val{font-size:17px;color:var(--fg-0)}
.c-val a{color:var(--gold-soft);border-bottom:1px solid var(--hair-2);padding-bottom:2px;transition:border-color var(--d-mid)}
.c-val a:hover{border-color:var(--gold)}
.map-wrap{margin-top:var(--s5);border-radius:14px;overflow:hidden;border:1px solid var(--hair);
filter:saturate(.7) brightness(.85)}
.map-wrap iframe{width:100%;height:340px;border:0;display:block}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
background:var(--ink-700);border:1px solid var(--hair);border-radius:16px;padding:26px}
.jcta-name{font-family:var(--serif);font-size:24px;color:var(--fg-0);margin-top:8px}
.cta-band{padding:var(--s9) 0;background-size:cover;background-position:center}
.cta-h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.2vw,72px);line-height:1.02;color:var(--fg-0)}
/* ── footer ────────────────────────────────────────────── */
footer{background:var(--ink-950);padding:var(--s8) 0 40px;border-top:1px solid var(--hair)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:var(--s6)}
.f-col{display:flex;flex-direction:column;gap:12px;font-size:13.5px}
.f-icon{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair-2);display:flex;
align-items:center;justify-content:center;color:var(--gold-soft);font-size:19px;
transition:background var(--d-mid) var(--ease-out),border-color var(--d-mid) var(--ease-out)}
.f-icon:hover{background:rgba(201,162,75,.14);border-color:var(--gold)}
.footer-base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
margin-top:var(--s7);padding-top:24px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--fg-3)}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap}
/* ── Phase 3: grain + modal shell ─────────────────────── */
.grain{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.grain{display:none}}
#modal-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
padding:22px;font-family:var(--sans)}
.modal-scrim{position:absolute;inset:0;background:rgba(4,9,8,.76);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#modal-panel{position:relative;width:100%;max-width:960px;max-height:90vh;display:flex;flex-direction:column;
background:#0b1613;border:1px solid var(--hair-2);border-radius:18px;overflow:hidden;
box-shadow:0 60px 120px -30px rgba(0,0,0,.85);animation:advRise .35s var(--ease-out)}
/* ── responsive ────────────────────────────────────────── */
@media(max-width:1180px){
.t-layout{grid-template-columns:minmax(0,1fr) 330px;gap:var(--s6)}
.cards-4{grid-template-columns:repeat(2,1fr)}
.split{grid-template-columns:1fr;gap:var(--s6)}
.split-media{min-height:380px}
}
@media(max-width:1024px){
.cards-3{grid-template-columns:repeat(2,1fr)}
.t-layout{grid-template-columns:1fr;gap:var(--s7)}
.bookcard{position:static}
.specs{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
.sec-head{grid-template-columns:1fr;gap:var(--s5)}
.sec-note{justify-self:start}
}
@media(max-width:820px){
/* mobile chrome: the site runs as an app — tab bar instead of a burger */
.nav-links,.nav-phone,.nav-reserve{display:none!important}
.nav-call{display:inline-flex}
#waFab{display:none}
#tabbar{display:grid}
body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
.nav,.nav.scrolled{padding:14px 20px!important}
.wrap,.t-layout,.t-hero-inner{padding-left:20px;padding-right:20px}
.t-hero-inner{padding-top:132px;padding-bottom:44px}
.t-hero{min-height:76vh}.t-hero.short{min-height:56vh}
.cards-3,.cards-4{grid-template-columns:1fr}
.inc,.note-band{grid-template-columns:1fr;gap:var(--s5)}
.inc ul.two-col{grid-template-columns:1fr}
.crew-grid{grid-template-columns:1fr}
.crew-grid>.gal-item{min-height:300px}
.quote-band{background-attachment:scroll}
.c-row{grid-template-columns:1fr;gap:6px}
.gal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:130px}
.hero-cta{gap:20px}
.hero-trust,.hero-meta .label{font-size:10px}
.hero-trust,.t-hero .hero-meta>div{flex-direction:column;align-items:flex-start;gap:9px}
.hero-trust .hair-v,.hero-meta .hair-v{display:none}
.itin>div{gap:16px;flex-direction:column}
.itin .t{width:auto}
.post-cta{flex-direction:column;align-items:flex-start}
footer{padding-top:var(--s7)}
}
@media(max-width:520px){
.specs{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:120px}
}
/* ── transfer routes table ─────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rt-wrap{margin-top:var(--s5);overflow-x:auto}
.rt{width:100%;border-collapse:collapse;min-width:520px}
.rt th,.rt td{text-align:left;padding:18px 16px 18px 0;border-top:1px solid var(--hair);vertical-align:baseline}
.rt tr:last-child th,.rt tr:last-child td{border-bottom:1px solid var(--hair)}
.rt th{font-weight:600;font-size:16px;color:var(--fg-0);white-space:nowrap}
.rt th span{display:inline-flex;color:var(--gold);font-size:14px;margin:0 6px;vertical-align:-.1em}
.rt .rt-note{font-size:14px;color:var(--fg-2);line-height:1.5}
.rt .rt-price{font-family:var(--serif);font-size:22px;color:var(--gold);white-space:nowrap;text-align:right;padding-right:0}
@media(max-width:820px){
.rt th,.rt td{padding:14px 12px 14px 0}
.rt th{font-size:14.5px;white-space:normal}
.rt .rt-note{display:none}
.rt .rt-price{font-size:19px}
.rt{min-width:0}
}
/* ── request forms (transfer / custom) ─────────────────── */
.reqform .bc-intro{font-size:13.5px;line-height:1.6;color:var(--fg-2);margin-top:10px;
padding-bottom:var(--s5);border-bottom:1px solid var(--hair)}
.reqform .f-row{margin-top:var(--s5)}
.reqform .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.reqform .label{display:block;margin-bottom:var(--s2)}
.reqform textarea{width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--hair-2);
background:rgba(255,255,255,.03);color:var(--fg-0);font-size:14.5px;outline:none;
font-family:var(--sans);resize:vertical;line-height:1.55;
transition:border-color var(--d-fast) var(--ease-out)}
.reqform textarea:focus{border-color:var(--gold)}
.reqform input[type=number]{-moz-appearance:textfield}
.reqform select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px}
.reqform select:invalid{color:var(--fg-3)}
.reqform option{background:var(--ink-700);color:var(--fg-0)}
/* checkbox row */
.check{display:flex;align-items:center;gap:11px;margin-top:var(--s5);cursor:pointer;
font-size:14px;color:var(--fg-1)}
.check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 auto;
border:1px solid var(--hair-2);border-radius:6px;background:rgba(255,255,255,.03);cursor:pointer;
transition:background var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out)}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{content:"";display:block;width:100%;height:100%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308110f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/14px no-repeat}
/* place chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:9px 15px;border-radius:100px;border:1px solid var(--hair-2);
font-size:13px;color:var(--fg-2);transition:.2s var(--ease-out);white-space:nowrap}
.chip input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--ink-900);font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.chip span:hover{border-color:var(--gold);color:var(--fg-0)}
@media(max-width:520px){
.reqform .f-grid{grid-template-columns:1fr}
}
/* private charters: capacity note instead of guest steppers */
.cap-note{display:flex;gap:12px;align-items:flex-start;margin-top:var(--s5);padding:15px 16px;
border:1px solid var(--hair);border-radius:10px;font-size:13.5px;line-height:1.55;color:var(--fg-2)}
.cap-note strong{color:var(--fg-0)}
/* ══ mobile app shell ═══════════════════════════════════
Phones get a fixed bottom tab bar and a slide-up sheet instead of a
burger, so navigation never scrolls away. Everything here is inside a
max-width query — the desktop layout is untouched. */
#tabbar{display:none}
.nav-call{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--hair-2);
align-items:center;justify-content:center;color:var(--gold-soft);font-size:19px}
.sheet[hidden]{display:none}
@keyframes advSheet{from{transform:translateY(101%)}to{transform:translateY(0)}}
@media(max-width:820px){
html{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:contain}
html{scroll-padding-top:74px}
#tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
position:fixed;left:0;right:0;bottom:0;z-index:60;
padding:7px 4px calc(7px + env(safe-area-inset-bottom));
background:rgba(8,17,15,.93);border-top:1px solid rgba(216,192,138,.16);
backdrop-filter:saturate(170%) blur(18px);-webkit-backdrop-filter:saturate(170%) blur(18px)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
background:transparent;border:none;cursor:pointer;padding:5px 2px;min-height:48px;
font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:rgba(233,232,224,.55);
transition:color .18s var(--ease-out),transform .1s var(--ease-out)}
.tab .ic{font-size:21px;stroke-width:1.6}
.tab:active{transform:scale(.9)}
.tab.on{color:var(--gold)}
.tab-book{color:var(--gold)}
.tab-fab{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
border-radius:50%;background:var(--gold);color:var(--ink-900);margin-top:-24px;
border:3px solid #08110f;box-shadow:0 12px 26px -8px rgba(201,162,75,.75)}
.tab-fab .ic{font-size:23px;stroke-width:2.6}
/* "More" sheet */
.sheet{position:fixed;inset:0;z-index:70}
.sheet-scrim{position:absolute;inset:0;background:rgba(4,9,8,.74);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:advFade .22s ease}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;background:#0b1613;
border-top:1px solid var(--hair-2);border-radius:24px 24px 0 0;
padding:10px 16px calc(18px + env(safe-area-inset-bottom));
max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
box-shadow:0 -30px 60px -20px rgba(0,0,0,.8);animation:advSheet .3s var(--ease-out)}
.sheet-grip{display:block;width:46px;height:4px;border-radius:2px;padding:0;
background:rgba(216,192,138,.34);border:none;margin:4px auto 18px;cursor:pointer}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sh-link{display:flex;align-items:center;gap:11px;padding:15px 13px;border-radius:14px;
background:rgba(255,255,255,.035);border:1px solid var(--hair);
color:var(--fg-0);font-size:14px;font-weight:500;min-height:52px}
.sh-link .ic{color:var(--gold);font-size:19px}
.sh-link:active{background:rgba(201,162,75,.14);border-color:var(--gold)}
.sh-foot{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding-top:12px;
border-top:1px solid var(--hair)}
.sh-call{display:flex;align-items:center;gap:12px;color:var(--fg-1);font-size:14px;
padding:13px 4px;min-height:48px}
.sh-call .ic{color:var(--gold);font-size:18px}
/* the booking modal becomes a sheet too */
#modal-overlay{padding:0;align-items:flex-end}
#modal-panel{max-width:none;max-height:94dvh;border-radius:22px 22px 0 0;
border-left:none;border-right:none;border-bottom:none;animation:advSheet .3s var(--ease-out)}
#modal-panel .pay-grid{grid-template-columns:1fr!important}
/* 16px is the smallest size iOS will not zoom into on focus */
.modal-input{font-size:16px!important}
/* leave the phone field usable: the dial picker must not eat the row */
select.modal-input[data-field="cc"]{max-width:132px!important;padding-left:12px;padding-right:12px}
/* thumb-sized targets everywhere that matters */
.btn{min-height:48px}
.faq-d summary{padding-top:20px;padding-bottom:20px}
footer .f-link,.footer-legal a{display:flex;align-items:center;min-height:44px}
.footer-base{flex-direction:column;align-items:flex-start;gap:6px}
.footer-legal{display:flex;flex-wrap:wrap;gap:0 18px}
.c-val a,.br-card .quiet-link{display:inline-flex;align-items:center;min-height:44px}
}
/* ══ after-payment pages ════════════════════════════════ */
.br-wrap{display:flex;justify-content:center;padding:calc(var(--s8) + 60px) 20px var(--s8)}
.br-card{width:100%;max-width:560px;text-align:center;background:var(--ink-800);
border:1px solid var(--hair-2);border-radius:20px;padding:var(--s7) var(--s6)}
.br-ico{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
margin:0 auto var(--s5);font-size:31px}
.br-ico-ok{background:rgba(201,162,75,.14);border:1px solid var(--gold);color:var(--gold)}
.br-ico-no{background:rgba(232,168,124,.12);border:1px solid #e8a87c;color:#e8a87c}
.br-h1{font-family:var(--serif);font-size:clamp(30px,7vw,42px);line-height:1.08;margin-top:12px}
.br-lead{font-size:15px;line-height:1.65;color:var(--fg-2);margin:14px auto 0;max-width:420px}
.br-rows{margin-top:var(--s6);text-align:left;display:flex;flex-direction:column;gap:2px}
.br-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;
border-bottom:1px solid var(--hair);font-size:14px;color:var(--fg-2)}
.br-row strong{color:var(--fg-0);font-weight:600;text-align:right}
.br-row:last-child{border-bottom:none}
.br-fall{font-size:14px;line-height:1.6;color:var(--fg-2);padding:var(--s4) 0;text-align:left}
.br-good{font-size:14px;line-height:1.6;color:var(--gold-soft);padding-top:var(--s4);text-align:left}
.br-actions{display:flex;flex-direction:column;gap:10px;margin-top:var(--s6)}
.br-cta,.br-cta2{padding:16px 28px;border-radius:100px;font-size:14px;text-align:center;
display:flex;align-items:center;justify-content:center;min-height:50px}
@media(min-width:560px){.br-actions{flex-direction:row;justify-content:center}}
/* ══ calling-code picker ════════════════════════════════
Replaces a 236-option