/* Kayal · Alappuzha
   Layout: bright split hero (copy + live backwater scene with floating photos), then alternating
   white / tinted bands; one pinned horizontal "day aboard" track as the signature moment. */
:root{
  --bg:#FFFCF5;        /* sunlit white */
  --paper:#FFFFFF;
  --sky:#E5F6F4;       /* lagoon tint band */
  --mint:#E3F5EA;      /* paddy tint band */
  --butter:#FFF4D6;    /* mango tint band */
  --ink:#0F2F36;       /* text: deep lagoon */
  --ink-soft:#4C676C;
  --line:#E4E7DE;
  --lagoon:#0FA3A3;
  --leaf:#2FA35A;
  --mango:#FFB320;
  --coral:#FF6250;
  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,5vw,80px);
  --radius:28px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --shadow:0 24px 60px -24px rgba(15,47,54,.28);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body);margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;width:100%;max-width:100vw}
@supports (overflow:clip){html,body{overflow-x:clip}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--mango);color:var(--ink)}
:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}
.eyebrow{font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--lagoon);margin-bottom:18px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:1}
h2{font-size:clamp(40px,6vw,88px)}
h3{letter-spacing:-.015em}
.serif{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;color:var(--coral)}
.price{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.lead{color:var(--ink-soft);max-width:42ch;margin:22px 0 0}
section{position:relative}
.sec{padding-block:clamp(80px,10vw,150px)}
.sec__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;margin-bottom:clamp(40px,5vw,72px)}
.sec__head p{max-width:38ch;color:var(--ink-soft);margin:0}
@media (max-width:860px){.sec__head{grid-template-columns:1fr}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;font:700 15px/1 var(--body);border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .4s,border-color .4s;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:-2px;border-radius:inherit;transform:translateY(102%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn--coral{background:var(--coral);color:#fff}
.btn--coral::before{background:var(--ink)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark::before{background:var(--coral)}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:#fff}

/* Loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--lagoon);display:grid;place-content:center;justify-items:center;gap:22px;color:#fff;animation:loaderOut .6s 3.2s forwards}
.loader__word{font:800 clamp(64px,12vw,140px)/1 var(--display);letter-spacing:-.04em;display:flex;overflow:hidden}
.loader__word span{display:inline-block}
.loader__dots{display:flex;gap:10px}
.loader__dots i{width:12px;height:12px;border-radius:50%;background:var(--mango);animation:hop .9s var(--ease) infinite}
.loader__dots i:nth-child(2){background:var(--coral);animation-delay:.1s}
.loader__dots i:nth-child(3){background:#fff;animation-delay:.2s}
.loader__dots i:nth-child(4){background:var(--leaf);animation-delay:.3s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .4s,box-shadow .4s}
.nav.is-solid{background:rgba(255,252,245,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand b{font:800 30px/1 var(--display);letter-spacing:-.04em;color:var(--lagoon)}
.brand small{font:italic 400 20px/1 var(--serif);color:var(--coral)}
.nav__links{display:flex;gap:28px;font-weight:600;font-size:15px}
.nav__links a{position:relative;padding-block:6px}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--mango);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:1180px){.nav__links{display:none}}

/* Hero: full-bleed video stage inside a rounded window that opens up on scroll */
.hero{padding-top:calc(80px + env(safe-area-inset-top,0px))}
.stage{position:relative;height:clamp(600px,calc(100vh - 100px),920px);margin-inline:12px;border-radius:36px;overflow:hidden;background:#4FC3E3;isolation:isolate}
.stage__media{position:absolute;inset:0;z-index:-2}
.stage__media canvas,.stage__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage__media video{opacity:0;transition:opacity 1.2s}
.stage__media video.is-ready{opacity:1}
.stage__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(8,40,46,.62) 0%,rgba(8,40,46,.28) 45%,rgba(8,40,46,0) 70%),linear-gradient(0deg,rgba(8,40,46,.45),rgba(8,40,46,0) 40%)}
.hero__content{height:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:32px;padding-block:40px 110px}
@media (max-width:980px){.hero__content{grid-template-columns:1fr;align-items:end}.hero__floats{display:none}}
.hero__text{color:#fff}
.chip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:#7CF0A6;box-shadow:0 0 0 4px rgba(124,240,166,.3);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(124,240,166,0)}}
.hero h1{font-size:clamp(46px,7vw,108px);margin-top:24px;line-height:.98;letter-spacing:-.04em;text-shadow:0 4px 30px rgba(0,0,0,.18)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero h1 .line>span{display:inline-block}
.hero h1 .serif{font-size:1.1em;color:var(--mango)}
.rotator{display:inline-grid;vertical-align:bottom;overflow:hidden;background:var(--mango);color:var(--ink);border-radius:.22em;padding:0 .14em .04em;text-shadow:none;transform:rotate(-2deg);transition:width .5s var(--ease)}
.rotator>span{grid-area:1/1;white-space:nowrap}
.rotator>span:not(:first-child){visibility:hidden}
.hero__lead{color:rgba(255,255,255,.9);max-width:44ch;margin:24px 0 0;font-size:18px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn--light{background:#fff;color:var(--ink)}
.btn--light::before{background:var(--mango)}

.hero__floats{position:relative;height:min(70%,520px);align-self:center}
.float{position:absolute;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);border:6px solid var(--paper)}
.float--a{width:58%;aspect-ratio:4/5;left:4%;top:18%;transform:rotate(-6deg);border-radius:26px}
.float--b{width:46%;aspect-ratio:1;right:0;top:0;transform:rotate(7deg);border-radius:26px}
.float--c{right:6%;bottom:6%}
.badge{background:var(--mango);color:var(--ink);border:none;border-radius:20px;padding:14px 18px;display:grid;transform:rotate(-4deg)}
.badge b{font:800 19px/1.1 var(--display)}
.badge span{font-size:13px;font-weight:600}

.spinner{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(110px,14vh,140px);width:clamp(96px,9vw,128px);aspect-ratio:1;display:grid;place-items:center;color:#fff}
.spinner svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite;overflow:visible}
.spinner text{fill:#fff;font:700 10.5px var(--body);letter-spacing:.18em}
.spinner__arrow{width:46%;aspect-ratio:1;border-radius:50%;background:var(--coral);display:grid;place-items:center;font-size:22px;font-weight:700;transition:transform .4s var(--ease)}
.spinner:hover .spinner__arrow{transform:scale(1.15) translateY(4px)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:980px){.spinner{display:none}}

.birds{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.bird{position:absolute;width:34px;fill:none;stroke:#0F2F36;stroke-width:2.4;stroke-linecap:round;opacity:.7;animation:fly 26s linear infinite}
.bird path{transform-origin:20px 9px;animation:flap .5s ease-in-out infinite alternate}
.b1{top:14%;animation-delay:-4s}
.b2{top:19%;width:26px;animation-delay:-5s;animation-duration:30s}
.b3{top:11%;width:22px;animation-delay:-6.5s;animation-duration:28s}
.b2 path{animation-delay:-.2s}.b3 path{animation-delay:-.35s}
@keyframes fly{from{transform:translateX(-60px)}to{transform:translateX(110vw)}}
@keyframes flap{to{transform:scaleY(-.5)}}

.rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);margin-top:-64px;position:relative;z-index:3}
@media (max-width:700px){.rates{grid-template-columns:1fr;margin-top:-40px}}
.rate{position:relative;display:grid;gap:4px;padding:20px 24px;border-radius:24px;background:var(--paper);box-shadow:0 24px 50px -24px rgba(15,47,54,.35);overflow:hidden;transition:transform .5s var(--ease)}
.rate::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--rc)}
.rate:hover{transform:translateY(-8px) rotate(-1deg)}
.rate span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.rate b{font:800 clamp(30px,3vw,40px)/1.05 var(--display);letter-spacing:-.03em;color:var(--rc)}
.rate sup{font-size:.45em}
.rate i{position:absolute;right:22px;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;background:var(--rc);color:#fff;font-style:normal;display:grid;place-items:center;font-weight:700;transition:transform .5s var(--ease)}
.rate:hover i{transform:rotate(-45deg) scale(1.1)}
.rate--lagoon{--rc:var(--lagoon)}
.rate--leaf{--rc:var(--leaf)}
.rate--coral{--rc:var(--coral)}

/* Wave dividers */
.wave-box{position:absolute;left:0;right:0;top:1px;height:clamp(30px,5vw,70px);transform:translateY(-100%);overflow:hidden;pointer-events:none}
.wave{position:absolute;left:0;top:0;width:200%;height:100%;animation:waveMove 16s linear infinite}
.day .wave{fill:var(--sky)} .taxi .wave{fill:var(--mint)} .enquire .wave{fill:var(--butter)} footer .wave{fill:var(--ink)}
@keyframes waveMove{to{transform:translateX(-50%)}}
.day,.taxi,.enquire,footer{overflow-x:clip!important;overflow-y:visible!important}

/* Progress + click ripples */
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--lagoon),var(--leaf),var(--mango),var(--coral))}
.ripple{position:fixed;z-index:150;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:3px solid var(--rp);pointer-events:none;animation:ripple .9s var(--ease) forwards}
@keyframes ripple{to{transform:scale(7);opacity:0;border-width:1px}}

/* Split headings */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block}

/* Photo placeholders: a colourful frame until the real photo is dropped into assets/images */
.ph{position:relative;margin:0;overflow:hidden;border-radius:var(--radius);isolation:isolate;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.55) 0 9%,transparent 9.5%),
    repeating-radial-gradient(circle at 20% 120%,rgba(255,255,255,.14) 0 14px,transparent 14px 30px),
    linear-gradient(140deg,var(--ph-a),var(--ph-b))}
.ph--lagoon{--ph-a:#8BE0D9;--ph-b:#0FA3A3}
.ph--mango{--ph-a:#FFE08A;--ph-b:#FF9F1C}
.ph--coral{--ph-a:#FFB4A6;--ph-b:#FF6250}
.ph--leaf{--ph-a:#A8E3B4;--ph-b:#2FA35A}
.ph.float{position:absolute}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph figcaption{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em;text-align:center;padding:12px;text-shadow:0 1px 8px rgba(0,0,0,.15)}
.ph figcaption::before{content:"";width:44px;height:44px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='17' cy='15' r='7' fill='white'/%3E%3Ccircle cx='33' cy='17' r='6' fill='white' fill-opacity='.8'/%3E%3Cpath d='M4 42c0-8 6-14 13-14s13 6 13 14z' fill='white'/%3E%3Cpath d='M26 42c1-7 3-12 7-12 6 0 11 5 11 12z' fill='white' fill-opacity='.8'/%3E%3C/svg%3E")}

/* Marquee */
.marquee-wrap{overflow:hidden;padding-block:14px;margin-top:clamp(24px,4vw,48px)}
.marquee{background:var(--lagoon);color:#fff;overflow:hidden;padding-block:20px;white-space:nowrap;transform:rotate(-1.2deg) scaleX(1.03);position:relative;z-index:2}
.marquee__track{display:inline-flex;gap:48px;animation:marq 34s linear infinite;font:700 clamp(26px,3vw,42px)/1 var(--display);letter-spacing:-.02em}
.marquee__track span::after{content:"✿";color:var(--mango);margin-left:48px}
.marquee__track span:nth-child(3n)::after{color:var(--coral)}
.marquee__track span:nth-child(3n+1)::after{color:#C9F2D6}
@keyframes marq{to{transform:translateX(-50%)}}

/* Statement */
.statement{padding-block:clamp(100px,14vw,200px)}
#scrub{font:700 clamp(30px,4.2vw,62px)/1.12 var(--display);letter-spacing:-.03em;max-width:24ch;margin:0}
.statement .w{display:inline-block}

/* Houseboats */
.boats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);perspective:1400px}
@media (max-width:980px){.boats{grid-template-columns:1fr;max-width:560px}}
.boat{position:relative;background:var(--paper);border-radius:var(--radius);padding:12px;box-shadow:0 2px 0 var(--line),0 20px 50px -30px rgba(15,47,54,.35);transform-style:preserve-3d;display:flex;flex-direction:column}
.boat__img{aspect-ratio:4/3;border-radius:20px}
.boat__body{display:grid;gap:16px;padding:22px 16px 16px;flex:1;align-content:start}
.tag{justify-self:start;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.boat--lagoon .tag{background:var(--sky);color:#0B6F6F}
.boat--mango .tag{background:var(--butter);color:#A05F00}
.boat--coral .tag{background:#FFE6E1;color:#C2392A}
.boat h3{font-size:clamp(32px,3vw,44px)}
.boat ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--ink-soft);font-size:15px}
.boat li{display:flex;gap:10px}
.boat li::before{content:"✓";font-weight:800;color:var(--leaf)}
.boat__price{display:flex;align-items:baseline;gap:8px;border-top:2px dashed var(--line);padding-top:16px;margin-top:auto}
.boat__price .price{font-size:clamp(38px,3.6vw,50px);line-height:1;letter-spacing:-.03em}
.boat__price span:last-child{color:var(--ink-soft);font-size:14px}
.boat .btn{justify-self:start}
.boat--featured{background:var(--ink);color:#fff}
.boat--featured ul,.boat--featured .boat__price span:last-child{color:#B9CFD2}
.boat--featured .boat__price{border-color:rgba(255,255,255,.18)}
.ribbon{position:absolute;z-index:3;top:26px;right:-8px;background:var(--coral);color:#fff;font-weight:800;font-size:13px;padding:8px 16px;border-radius:999px 0 0 999px;transform:translateZ(40px)}
.note{margin-top:28px;font-size:14px;color:var(--ink-soft)}

/* Day aboard */
.day{background:var(--sky);overflow:hidden}
.day__intro{padding-top:clamp(80px,10vw,140px)}
.day__track{display:flex;gap:clamp(18px,2.4vw,32px);padding:clamp(40px,5vw,64px) var(--gutter) clamp(80px,10vw,140px);width:max-content}
.slot{width:min(80vw,380px);flex:none;background:var(--paper);border-radius:var(--radius);padding:12px 12px 26px;display:grid;gap:12px;align-content:start;box-shadow:0 20px 50px -30px rgba(15,47,54,.35)}
.slot:nth-child(even){transform:translateY(40px)}
.slot .ph{aspect-ratio:5/4;border-radius:20px}
.slot time{font:800 clamp(48px,5vw,68px)/1 var(--display);letter-spacing:-.04em;padding-inline:12px;margin-top:8px}
.slot--lagoon time{color:var(--lagoon)}
.slot--mango time{color:#F29A00}
.slot--leaf time{color:var(--leaf)}
.slot--coral time{color:var(--coral)}
.slot h3{font-size:24px;padding-inline:12px}
.slot p{margin:0;color:var(--ink-soft);padding-inline:12px;font-size:15px}
@media (max-width:799px){.day__track{flex-direction:column;width:auto}.slot{width:auto}.slot:nth-child(even){transform:none}}

/* Moments mosaic */
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(140px,15vw,230px);gap:clamp(12px,1.6vw,22px)}
.m1{grid-column:1/3;grid-row:1/3}
.m2{grid-column:3/5;grid-row:1/2}
.m3{grid-column:5/7;grid-row:1/3}
.m4{grid-column:3/5;grid-row:2/3}
.m5{grid-column:1/7;grid-row:3/4}
.mtag{position:absolute;z-index:2;left:14px;bottom:14px;background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px}
@media (max-width:760px){
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .m1,.m2,.m3,.m4{grid-column:auto;grid-row:auto}
  .m1,.m3{grid-row:span 2}
  .m5{grid-column:1/-1;grid-row:auto}
}

/* Taxi */
.taxi{background:var(--mint)}
.taxi__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.taxi__grid{grid-template-columns:1fr}}
.taxi .eyebrow{color:var(--leaf)}
.routes{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:8px}
.routes button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.55);transition:background .3s,transform .4s var(--ease)}
.routes button:hover,.routes button.is-on{background:var(--paper);transform:translateX(8px);box-shadow:0 10px 30px -18px rgba(15,47,54,.4)}
.routes button.is-on b{color:var(--leaf)}
.routes button:focus-visible{outline:2px solid var(--coral)}
.routes b{font:700 20px/1.2 var(--display);letter-spacing:-.01em;transition:color .3s}
.routes span{font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.taxi__visual{position:relative;padding-bottom:40px}
.map{background:var(--paper);border-radius:36px;padding:clamp(16px,3vw,32px);box-shadow:var(--shadow)}
.map svg{width:100%;height:auto;display:block;overflow:visible}
.map .sea{fill:#CDEFF2}
.map .land{fill:#F4FBF5}
.map .route{fill:none;stroke:var(--leaf);stroke-width:2;stroke-linecap:round;opacity:.3;transition:opacity .4s,stroke-width .4s,stroke .4s}
.map .route.is-on{opacity:1;stroke-width:3.5;stroke:var(--coral)}
.map .pt circle{fill:var(--paper);stroke:var(--leaf);stroke-width:2.5}
.map .pt text{fill:var(--ink-soft);font:700 11px var(--body)}
.map .home circle{fill:var(--coral);stroke:var(--paper);stroke-width:3}
.map .home text{fill:var(--ink);font:800 19px var(--display)}
.map .car{fill:var(--ink)}
.map .car-halo{fill:var(--mango);opacity:.55}
.map .sea-label{fill:#5AA9B0;font:italic 400 18px var(--serif)}
.driver{width:36%;aspect-ratio:1;left:-6%;bottom:0;border-radius:50%!important;transform:rotate(-4deg)}

/* Tours */
.tours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
@media (max-width:1100px){.tours{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tours{grid-template-columns:1fr}}
.tour{display:grid;gap:12px;align-content:start}
.tour__art{aspect-ratio:3/4}
.tour__art img{transition:transform 1.2s var(--ease)}
.tour:hover .tour__art img{transform:scale(1.06)}
.tour__dur{position:absolute;z-index:2;top:14px;left:14px;background:var(--paper);font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px}
.tour h3{font-size:clamp(22px,1.8vw,27px);line-height:1.1;margin-top:6px}
.tour p{margin:0;color:var(--ink-soft);font-size:15px}
.tour .price{font-size:22px;color:var(--coral)}
.tour .ask{font-weight:700;font-size:14px;color:var(--lagoon)}

/* Enquire */
.enquire{background:var(--butter)}
.enquire .eyebrow{color:#C27700}
.enq__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.enq__grid{grid-template-columns:1fr}}
.panel{background:var(--paper);border-radius:36px;padding:clamp(20px,3vw,40px);display:grid;gap:24px;box-shadow:var(--shadow)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px;position:relative}
.seg button{all:unset;cursor:pointer;text-align:center;padding:12px 6px;font-weight:700;font-size:15px;color:var(--ink-soft);position:relative;z-index:1;transition:color .4s;border-radius:999px}
.seg button[aria-selected="true"]{color:#fff}
.seg button:focus-visible{outline:2px solid var(--coral)}
.seg__pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);background:var(--lagoon);border-radius:999px;transition:transform .6s var(--ease),background .6s}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.fields{grid-template-columns:1fr}}
.field{display:grid;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.field select,.field input{width:100%;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:13px 14px;font:500 16px var(--body);transition:border-color .3s}
.field select:focus,.field input:focus{outline:none;border-color:var(--lagoon)}
.estimate{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;border-top:2px dashed var(--line);padding-top:20px}
.estimate span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.estimate .price{font-size:clamp(40px,5vw,58px);line-height:1;letter-spacing:-.03em}
.status{min-height:1.4em;margin:0;font-size:15px;font-weight:600;color:var(--leaf)}

/* Footer */
footer{padding-block:clamp(72px,9vw,120px) 32px;overflow:hidden;background:var(--ink);color:#fff}
.foot__big{font:800 clamp(80px,17vw,260px)/.9 var(--display);letter-spacing:-.05em;white-space:nowrap;margin-bottom:56px;background:linear-gradient(90deg,var(--lagoon),var(--mango) 40%,var(--coral) 70%,var(--leaf));-webkit-background-clip:text;background-clip:text;color:transparent}
.foot__big em{font-family:var(--serif);font-weight:400}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:14px;color:#B9CFD2;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}

/* WhatsApp button */
.wa{position:fixed;z-index:60;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.1) rotate(-8deg)}
.wa svg{width:30px;height:30px}

/* Cursor */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--coral);border-radius:50%;pointer-events:none;z-index:200;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s;display:none}
.cursor.is-big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(255,179,32,.25);border-color:var(--mango)}
@media (pointer:fine){.cursor{display:block}}

/* ---------- Budget Houseboats additions ---------- */
.brand b{font-size:24px}
.brand small{font-size:18px}
.seg{grid-template-columns:repeat(4,1fr)}
.seg__pill{width:calc((100% - 10px)/4)}

/* Story */
.story{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin-top:clamp(48px,6vw,80px);align-items:start}
@media (max-width:900px){.story{grid-template-columns:1fr}}
.story__text p{color:var(--ink-soft);margin:0 0 18px;max-width:60ch}
.story__text b{color:var(--ink)}
.story blockquote{margin:24px 0 0;font:italic 400 clamp(24px,2.4vw,34px)/1.2 var(--serif);color:var(--coral)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.fact{border-radius:24px;padding:22px;display:grid;gap:6px;align-content:end;min-height:150px}
.fact dt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85;order:2}
.fact dd{margin:0;font:800 clamp(40px,4.4vw,60px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;order:1}
.fact--lagoon{background:var(--sky);color:#0B6F6F}
.fact--mango{background:var(--butter);color:#A05F00}
.fact--coral{background:#FFE6E1;color:#C2392A}
.fact--leaf{background:var(--mint);color:#1F7A41}

/* Fleet cards */
.fleet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.bcard{grid-column:span 2;position:relative;background:var(--paper);border-radius:var(--radius);padding:10px;box-shadow:0 2px 0 var(--line),0 20px 50px -30px rgba(15,47,54,.35);display:flex;flex-direction:column;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s}
.bcard:nth-child(1){grid-column:span 4}
.bcard:nth-child(2){grid-column:span 2}
.bcard:hover{transform:translateY(-6px);box-shadow:0 2px 0 var(--line),0 30px 60px -28px rgba(15,47,54,.45)}
.bcard .ph{aspect-ratio:4/3;border-radius:20px}
.bcard:nth-child(1) .ph{aspect-ratio:16/9}
.bcard .ph img{transition:transform 1.2s var(--ease)}
.bcard:hover .ph img{transform:scale(1.06)}
.bcard__count{position:absolute;z-index:2;right:12px;bottom:12px;background:rgba(15,47,54,.75);color:#fff;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.bcard__tag{position:absolute;z-index:2;left:12px;top:12px;background:var(--paper);font-size:12px;font-weight:700;letter-spacing:.06em;padding:7px 12px;border-radius:999px}
.bcard__body{padding:18px 12px 10px;display:grid;gap:12px;flex:1;align-content:start}
.bcard h3{font-size:clamp(22px,2vw,30px);line-height:1.08}
.bcard__meta{display:flex;flex-wrap:wrap;gap:8px}
.bcard__meta span{font-size:13px;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.bcard__foot{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:auto;padding-top:14px;border-top:2px dashed var(--line);flex-wrap:wrap}
.bcard__price small{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.bcard__price b{font:800 clamp(28px,2.6vw,36px)/1 var(--display);letter-spacing:-.03em}
.bcard__price b.req{font-size:20px;color:var(--lagoon)}
.bcard__view{font-weight:700;font-size:14px;color:var(--coral);display:inline-flex;gap:6px;align-items:center}
.bcard:nth-child(5n+1) .bcard__price b{color:var(--lagoon)}
.bcard:nth-child(5n+2) .bcard__price b{color:var(--coral)}
.bcard:nth-child(5n+3) .bcard__price b{color:#E08A00}
.bcard:nth-child(5n+4) .bcard__price b{color:var(--leaf)}
@media (max-width:1000px){.fleet{grid-template-columns:1fr 1fr}.bcard,.bcard:nth-child(1),.bcard:nth-child(2){grid-column:span 1}.bcard:nth-child(1){grid-column:1/-1}}
@media (max-width:640px){.fleet{grid-template-columns:1fr}.bcard:nth-child(1) .ph{aspect-ratio:4/3}}

.aboard{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,64px);background:var(--sky);border-radius:var(--radius);padding:clamp(24px,3vw,40px)}
@media (max-width:900px){.aboard{grid-template-columns:1fr}}
.aboard h3{font-size:24px;margin-bottom:16px}
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;font-size:15px}
@media (max-width:520px){.ticks{grid-template-columns:1fr}}
.ticks li{display:flex;gap:10px}
.ticks li::before{content:"✓";font-weight:800;color:var(--leaf)}
.times{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.times div{background:var(--paper);border-radius:18px;padding:16px;display:grid;gap:4px}
.times b{font:800 20px/1.1 var(--display);color:var(--lagoon)}
.times span{font-size:13px;color:var(--ink-soft)}

/* Day note */
.day__note{color:var(--ink-soft);max-width:70ch;margin:0;padding-bottom:clamp(60px,8vw,110px)}
.day__track{padding-bottom:clamp(40px,5vw,64px)}

/* Tours route */
.tour .troute{font-weight:600;color:var(--ink);font-size:14px}
.tour .ask{justify-self:start}

/* Day cruises */
.cruise{background:var(--sky);overflow-x:clip!important;overflow-y:visible!important}
.cruise .wave{fill:var(--sky)}
.cruise__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:900px){.cruise__grid{grid-template-columns:1fr}}
.cruise__cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.cruise__cards{grid-template-columns:1fr}}
.ccard{background:var(--paper);border-radius:24px;padding:22px;display:grid;gap:6px;box-shadow:0 16px 40px -28px rgba(15,47,54,.4)}
.ccard h3{font-size:19px;line-height:1.2}
.ccard b{font:800 34px/1 var(--display);letter-spacing:-.03em;margin-top:10px}
.ccard small{color:var(--ink-soft);font-size:13px}
.ccard:nth-child(1) b{color:var(--lagoon)}.ccard:nth-child(2) b{color:var(--leaf)}.ccard:nth-child(3) b{color:var(--coral)}.ccard:nth-child(4) b{color:#E08A00}
.route-list{list-style:none;margin:0;padding:0 0 0 30px;position:relative;display:grid;gap:22px}
.route-list::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--line)}
.route-list::after{content:"";position:absolute;left:9px;top:8px;width:3px;height:var(--fill,100%);border-radius:3px;background:linear-gradient(var(--lagoon),var(--coral))}
.route-list li{position:relative;display:grid;gap:2px}
.route-list li::before{content:"";position:absolute;left:-28px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--paper);border:3px solid var(--lagoon);z-index:1}
.route-list b{font:700 18px/1.25 var(--display)}
.route-list span{font-size:14px;color:var(--ink-soft)}

/* Taxi cars */
.sub{font-size:24px;margin:clamp(40px,5vw,64px) 0 16px}
.cars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cars li{background:var(--paper);border-radius:18px;padding:14px 16px;display:grid;gap:2px}
.cars b{font:700 17px/1.2 var(--display)}
.cars span{font-size:13px;color:var(--ink-soft)}

/* Hotels & offers */
.hotels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.hotels{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hotels{grid-template-columns:1fr}}
.hotel{border-radius:24px;padding:24px;display:grid;gap:10px;align-content:start;background:var(--paper);border-top:6px solid var(--hc);box-shadow:0 16px 40px -28px rgba(15,47,54,.4)}
.hotel span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hc)}
.hotel h3{font-size:24px}
.hotel p{margin:0;color:var(--ink-soft);font-size:15px}
.hotel--lagoon{--hc:var(--lagoon)}.hotel--leaf{--hc:var(--leaf)}.hotel--mango{--hc:#E08A00}.hotel--coral{--hc:var(--coral)}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(40px,5vw,72px)}
@media (max-width:900px){.offers{grid-template-columns:1fr}}
.offer{border-radius:28px;padding:28px;color:#fff;display:grid;gap:8px;align-content:start}
.offer b{font:800 clamp(44px,5vw,64px)/1 var(--display);letter-spacing:-.04em}
.offer h3{font-size:22px}
.offer p{margin:0;opacity:.92;font-size:15px}
.offer--coral{background:var(--coral)}.offer--lagoon{background:var(--lagoon)}.offer--mango{background:var(--mango);color:var(--ink)}

/* Booking */
.steps{list-style:none;counter-reset:s;margin:28px 0 0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;color:var(--ink-soft);font-size:15px}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.contact{display:grid;gap:4px;margin-top:28px;font-size:15px;color:var(--ink-soft)}
.contact__big{font:800 clamp(28px,3vw,38px)/1.1 var(--display);color:var(--ink);letter-spacing:-.02em}
.contact a{color:var(--ink);font-weight:600}
.mail-alt{font-size:14px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;justify-self:start}

/* Footer */
.foot__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:40px}
@media (max-width:800px){.foot__cols{grid-template-columns:1fr}}
.foot__cols>div{display:grid;gap:8px;align-content:start;font-size:15px;color:#B9CFD2}
.foot__cols b{color:#fff;font:700 18px var(--display)}
.foot__cols p{margin:0;max-width:44ch}
.foot__cols a:hover{color:var(--mango)}
.foot__brand{font-size:24px!important}

/* Gallery dialog */
.gallery{border:none;padding:0;margin:auto;width:min(1180px,calc(100% - 32px));max-height:calc(100dvh - 32px);border-radius:32px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 40px 120px -20px rgba(0,0,0,.5)}
.gallery::backdrop{background:rgba(8,40,46,.72);backdrop-filter:blur(6px)}
.gallery[open]{animation:gIn .6s var(--ease)}
@keyframes gIn{from{opacity:0;transform:translateY(40px) scale(.96)}}
.gallery__inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);max-height:calc(100dvh - 32px)}
.gallery__media{background:var(--ink);display:grid;grid-template-rows:1fr auto;min-height:0}
.gallery__stage{position:relative;min-height:320px;aspect-ratio:4/3;max-height:calc(100dvh - 140px);overflow:hidden;touch-action:pan-y}
.gallery__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink);transition:opacity .35s}
.gallery__empty{position:absolute;inset:0;display:none;place-items:center;color:#fff;font-weight:700;background:linear-gradient(140deg,#8BE0D9,#0FA3A3)}
.gallery.is-empty .gallery__empty{display:grid}
.gallery.is-empty .gnav,.gallery.is-empty .gcount{display:none}
.gnav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;padding-bottom:4px;transition:transform .3s var(--ease)}
.gnav:hover{transform:scale(1.1)}
.gnav--prev{left:14px}.gnav--next{right:14px}
.gcount{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px}
.gallery__thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px;scrollbar-width:thin}
.gallery__thumbs button{flex:none;width:76px;height:56px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;opacity:.6;transition:opacity .3s,border-color .3s;background:#123}
.gallery__thumbs button.is-on{opacity:1;border-color:var(--mango)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}
.gallery__info{padding:clamp(22px,3vw,40px);display:grid;gap:14px;align-content:start;overflow-y:auto}
.gallery__info h3{font-size:clamp(26px,2.6vw,36px);line-height:1.05}
.gallery__info p{margin:0;color:var(--ink-soft)}
.gallery__info .tag{background:var(--sky);color:#0B6F6F}
.gallery__info .ticks{grid-template-columns:1fr}
.gallery__meta{display:flex;flex-wrap:wrap;gap:8px}
.gallery__meta span{font-size:13px;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.gallery__price{display:grid;gap:2px;border-top:2px dashed var(--line);padding-top:14px}
.gallery__price span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.gallery__price b{font-size:40px;line-height:1;color:var(--coral);letter-spacing:-.03em}
.gallery__price small{color:var(--ink-soft);font-size:13px}
.gallery .btn{justify-self:start}
.gallery__close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:none;background:var(--paper);color:var(--ink);font-size:18px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:3}
@media (max-width:860px){
  .gallery{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .gallery__inner{grid-template-columns:1fr;height:100dvh;max-height:100dvh;overflow-y:auto;display:block}
  .gallery__stage{aspect-ratio:4/3;max-height:none}
  .gnav{width:40px;height:40px;font-size:26px}
}

/* ---------- Multi-page additions ---------- */
/* Page curtain: covers on load, slides away (CSS); JS slides it back before leaving */
.curtain{position:fixed;inset:0;z-index:250;background:var(--lagoon);color:#fff;display:grid;place-items:center;pointer-events:none;animation:curtainOut .9s .15s cubic-bezier(.7,0,.2,1) forwards}
.curtain span{font:800 clamp(28px,4vw,48px)/1 var(--display);letter-spacing:-.03em}
.curtain em{font:italic 400 1em var(--serif);color:var(--mango)}
@keyframes curtainOut{to{transform:translateY(-100%);visibility:hidden}}

/* Nav: current page + dropdowns */
.nav__links{align-items:center}
.nav__links a[aria-current="page"]{color:var(--lagoon)}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links i{font-style:normal;font-size:.7em;opacity:.6}
.dd{position:relative}
.dd__menu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:250px;background:var(--paper);border-radius:20px;padding:8px;box-shadow:0 24px 60px -20px rgba(15,47,54,.35);display:grid;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .4s var(--ease),visibility .3s}
.dd__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.dd:hover .dd__menu,.dd:focus-within .dd__menu{opacity:1;visibility:visible;transform:none}
.dd__menu a{padding:10px 14px;border-radius:12px;font-weight:600;font-size:15px;color:var(--ink)}
.dd__menu a::after{display:none}
.dd__menu a:hover{background:var(--sky);color:#0B6F6F}
.mmenu{overflow-y:auto;align-content:start}
.mmenu a{font-size:clamp(28px,8vw,40px)}

/* Inner page hero */
.stage--page{height:clamp(420px,64vh,620px)}
.stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--page .stage__shade{background:linear-gradient(90deg,rgba(8,40,46,.7) 0%,rgba(8,40,46,.35) 55%,rgba(8,40,46,.1) 100%),linear-gradient(0deg,rgba(8,40,46,.55),rgba(8,40,46,0) 50%)}
.hero--page .hero__content{grid-template-columns:1fr;align-items:end;padding-block:40px clamp(36px,6vw,64px)}
.hero--page h1{font-size:clamp(40px,6vw,88px)}
.hero--page .hero__lead{max-width:52ch}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.crumbs a:hover{color:var(--mango)}
.crumbs>*:not(:last-child)::after{content:"/";margin-left:8px;opacity:.6}
.hero--page+.sec,.hero--page+.statement,.hero--page+.day,.hero--page+div .sec{padding-top:clamp(64px,8vw,110px)}

/* Shared bits */
.link-arrow{font-weight:700;color:var(--coral);display:inline-flex;gap:6px}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}
.tag{display:inline-block}
.bcard{color:inherit}
.fleet--others{grid-template-columns:repeat(4,minmax(0,1fr))}
.fleet--others .bcard,.fleet--others .bcard:nth-child(n){grid-column:span 1}
.fleet--others .bcard .ph,.fleet--others .bcard:nth-child(1) .ph{aspect-ratio:4/3}
@media (max-width:1000px){.fleet--others{grid-template-columns:1fr 1fr}.fleet--others .bcard:nth-child(1){grid-column:span 1}}
@media (max-width:640px){.fleet--others{grid-template-columns:1fr}}
.tours a.tour{color:inherit}
.tours a.tour:hover h3{color:var(--coral)}

/* Explore cards (home) */
.explore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.explore{grid-template-columns:1fr}}
.xcard{position:relative;border-radius:28px;padding:28px 28px 72px;color:#fff;display:grid;gap:8px;align-content:start;overflow:hidden;transition:transform .5s var(--ease)}
.xcard:hover{transform:translateY(-6px) rotate(-.6deg)}
.xcard span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.xcard h3{font-size:clamp(26px,2.6vw,34px)}
.xcard p{margin:0;opacity:.92;max-width:34ch}
.xcard i{position:absolute;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-style:normal;font-weight:800;transition:transform .5s var(--ease)}
.xcard:hover i{transform:rotate(-45deg) scale(1.1);background:#fff;color:var(--ink)}
.xcard--lagoon{background:var(--lagoon)}.xcard--leaf{background:var(--leaf)}.xcard--coral{background:var(--coral)}

/* CTA band */
.cta-wrap{padding-bottom:clamp(80px,10vw,140px)}
.cta{border-radius:36px;padding:clamp(28px,5vw,64px);background:linear-gradient(120deg,var(--lagoon),#0B7F86 60%,#0A6C72);color:#fff;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px;align-items:end;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-180px;background:radial-gradient(circle,rgba(255,179,32,.55),transparent 65%);pointer-events:none}
.cta .eyebrow{color:var(--mango)}
.cta h2{font-size:clamp(34px,4.6vw,64px)}
.cta .serif{color:var(--mango)}
.cta p{margin:16px 0 0;opacity:.9;max-width:46ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
@media (max-width:900px){.cta{grid-template-columns:1fr}}

/* Compare table */
.table-scroll{overflow-x:auto;border-radius:24px;background:var(--paper);box-shadow:0 16px 40px -28px rgba(15,47,54,.4)}
.compare{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.compare th,.compare td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line)}
.compare thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);background:var(--sky)}
.compare tbody th{font:700 17px var(--display)}
.compare tbody th a:hover{color:var(--coral)}
.compare .num{font:800 18px var(--display);color:var(--lagoon);font-variant-numeric:tabular-nums}
.compare tbody tr:last-child>*{border-bottom:none}
.compare tbody tr:hover{background:var(--bg)}

/* Boat page */
.bp-photos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,clamp(150px,17vw,260px));gap:12px;position:relative}
.bp-tile{border:none;padding:0;cursor:zoom-in;border-radius:22px}
.bp-tile:first-child{grid-row:span 2}
.bp-tile img{transition:transform 1s var(--ease)}
.bp-tile:hover img{transform:scale(1.06)}
.bp-more{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(15,47,54,.55);color:#fff;font:800 clamp(22px,2.4vw,32px) var(--display)}
.bp-all{position:absolute;right:16px;bottom:16px;z-index:3;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media (max-width:700px){
  .bp-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bp-tile{aspect-ratio:4/3}
  .bp-tile:first-child{grid-column:1/-1;grid-row:auto}
  .bp-all{position:relative;right:auto;bottom:auto;grid-column:1/-1;justify-self:start}
}
.bp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);margin-top:clamp(40px,5vw,64px);align-items:start}
@media (max-width:980px){.bp-grid{grid-template-columns:1fr}}
.bp-info{display:grid;gap:18px;align-content:start}
.bp-info .tag{justify-self:start;background:var(--sky);color:#0B6F6F}
.bp-info h3{font-size:24px;margin-top:8px}
.bp-blurb{margin:0;font-size:18px;color:var(--ink-soft);max-width:60ch}
.bp-info .aboard{margin-top:12px}
.bp-info .aboard{grid-template-columns:1fr}
.bp-book{display:grid;gap:14px;position:sticky;top:96px}
@media (max-width:980px){.bp-book{position:static}}
.bp-price{background:var(--butter);border-radius:24px;padding:20px 24px;display:grid;gap:2px}
.bp-price span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#A05F00}
.bp-price b{font-size:clamp(36px,4vw,52px);line-height:1;color:var(--coral);letter-spacing:-.03em}
.bp-price small{color:var(--ink-soft);font-size:13px}
[data-boat-page] .seg{display:none}

/* Tour details */
.tdetails{display:grid;gap:clamp(48px,7vw,100px)}
.tdetail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:start}
.tdetail:nth-child(even) .tdetail__img{order:2}
@media (max-width:900px){.tdetail{grid-template-columns:1fr}.tdetail:nth-child(even) .tdetail__img{order:0}}
.tdetail__img{aspect-ratio:4/5;position:sticky;top:100px}
@media (max-width:900px){.tdetail__img{aspect-ratio:16/10;position:relative;top:0}}
.tdetail__body{display:grid;gap:16px;align-content:start}
.tdetail__body .tag{justify-self:start;background:#FFE6E1;color:#C2392A}
.tdetail h2{font-size:clamp(32px,3.6vw,52px)}
.tdetail .btn{justify-self:start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13px;font-weight:600;background:var(--sky);color:#0B6F6F;border-radius:999px;padding:6px 12px}
.days{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.days li{background:var(--paper);border-radius:18px;padding:14px 18px;display:grid;gap:4px;color:var(--ink-soft);font-size:15px;box-shadow:0 10px 30px -24px rgba(15,47,54,.5)}
.days b{color:var(--ink);font:700 17px var(--display)}

/* Menu cards (day aboard) */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:clamp(32px,4vw,56px)}
@media (max-width:700px){.menu-grid{grid-template-columns:1fr}}
.menu-card{border-radius:28px;padding:28px;color:#fff}
.menu-card h3{font-size:26px;margin-bottom:14px}
.menu-card ul{margin:0;padding-left:20px;display:grid;gap:6px}
.menu-card--lagoon{background:var(--lagoon)}.menu-card--coral{background:var(--coral)}

/* About: why us */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why{grid-template-columns:1fr}}
.why__item{border-radius:24px;padding:24px;display:grid;gap:10px;align-content:start;background:var(--paper);border-top:6px solid var(--wc);box-shadow:0 16px 40px -28px rgba(15,47,54,.4)}
.why__item h3{font-size:22px}
.why__item p{margin:0;color:var(--ink-soft);font-size:15px}
.why--lagoon{--wc:var(--lagoon)}.why--coral{--wc:var(--coral)}.why--mango{--wc:var(--mango)}.why--leaf{--wc:var(--leaf)}

/* Gallery page */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{all:unset;cursor:pointer;padding:10px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-weight:600;font-size:14px;transition:background .3s,color .3s}
.filters button small{opacity:.6;margin-left:4px}
.filters button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters button:focus-visible{outline:2px solid var(--coral)}
.masonry{columns:4 260px;column-gap:12px}
.mitem{display:block;width:100%;border:none;padding:0;margin:0 0 12px;border-radius:18px;overflow:hidden;cursor:zoom-in;break-inside:avoid;background:var(--sky)}
.mitem img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
.mitem:hover img{transform:scale(1.05)}

/* Plain photo viewer (gallery page) */
.gallery.is-plain .gallery__inner{grid-template-columns:1fr}
.gallery.is-plain .gallery__info{display:none}

/* Mobile menu */
.menu-btn{display:none;width:48px;height:48px;border-radius:50%;border:none;background:var(--ink);color:#fff;cursor:pointer;position:relative;z-index:61;flex:none}
.menu-btn i{position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.menu-btn i:nth-child(1){top:18px}.menu-btn i:nth-child(2){top:23px}.menu-btn i:nth-child(3){top:28px}
.menu-open .menu-btn i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){opacity:0}
.menu-open .menu-btn i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:55;background:var(--lagoon);color:#fff;display:grid;align-content:center;gap:6px;padding:calc(100px + env(safe-area-inset-top,0px)) 24px calc(40px + env(safe-area-inset-bottom,0px));clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .7s var(--ease);visibility:hidden}
.menu-open .mmenu{clip-path:circle(150% at calc(100% - 40px) 40px);visibility:visible}
.mmenu a{font:800 clamp(36px,11vw,52px)/1.15 var(--display);letter-spacing:-.03em}
.mmenu a:nth-child(2){color:var(--mango)}.mmenu a:nth-child(4){color:#C9F2D6}
.mmenu .btn{margin-top:24px;justify-self:start;font:700 16px/1 var(--body);letter-spacing:0}
.mmenu small{margin-top:28px;opacity:.8;font-size:14px}

/* Phones */
@media (max-width:1180px){
  .menu-btn{display:block}
  .nav .btn--dark{display:none}
  .menu-open .nav{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:60}
  .menu-open .menu-btn{background:#fff;color:var(--ink)}
  .menu-open .brand b,.menu-open .brand small{color:#fff}
}
@media (max-width:700px){
  body{font-size:16px}
  .nav__bar{height:68px}
  .brand b{font-size:19px}
  .brand small{font-size:15px}
  .hero{padding-top:calc(68px + env(safe-area-inset-top,0px))}
  .stage{margin-inline:8px;border-radius:28px;height:auto;min-height:calc(100svh - 84px)}
  .stage__shade{background:linear-gradient(0deg,rgba(8,40,46,.88) 0%,rgba(8,40,46,.55) 55%,rgba(8,40,46,.25) 100%)}
  .hero__content{padding-block:28px 84px;min-height:calc(100svh - 84px)}
  .chip{font-size:12px;padding:8px 12px}
  .hero h1{font-size:clamp(40px,12.5vw,58px);margin-top:18px}
  .hero__lead{font-size:16px;margin-top:18px}
  .hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero__cta .btn{padding:15px 12px;font-size:14px}
  .rates{gap:10px}
  .rate{padding:16px 20px}
  .rate b{font-size:28px}
  .rate i{width:36px;height:36px}
  .statement{padding-block:80px}
  .sec{padding-block:72px}
  .sec__head{gap:16px;margin-bottom:32px}
  h2{font-size:clamp(36px,10.5vw,48px)}
  .boat__body{padding:18px 10px 10px}
  .ribbon{right:0;border-radius:999px 0 0 999px}
  .day__intro{padding-top:72px}
  .day__track{padding:32px var(--gutter) 72px;gap:16px}
  .slot time{font-size:44px}
  .mosaic{gap:10px}
  .mtag{font-size:12px;padding:6px 10px;left:10px;bottom:10px}
  .routes b{font-size:18px}
  .routes button{padding:12px 14px}
  .routes button:hover,.routes button.is-on{transform:none}
  .taxi__visual{padding-bottom:0}
  .driver{width:30%;left:auto;right:8px;bottom:auto;top:-28px}
  .map{border-radius:24px}
  .panel{border-radius:24px}
  .seg button{font-size:13px;padding:11px 4px}
  .estimate{flex-direction:column;align-items:stretch}
  .estimate .btn{width:100%}
  .foot__big{margin-bottom:32px}
  .foot__row{flex-direction:column;gap:8px}
  .wa{width:54px;height:54px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .loader__word{font-size:72px}
}

@media (prefers-reduced-motion:reduce){
  .marquee__track,.loader__dots i,.wave,.spinner svg,.bird,.bird path,.dot{animation:none}
  .loader{display:none}
  *{transition-duration:.01ms!important}
}

/* Inner page heroes stay shorter on phones */
@media (max-width:700px){.stage--page{min-height:0;height:auto}.hero--page .hero__content{min-height:clamp(440px,72svh,580px)}.hero--page h1{font-size:clamp(36px,10.5vw,52px)}}

[hidden]{display:none!important}

/* ---------- Fixes: overlap, laptop fit, footer, speed ---------- */
/* price cards never touch the tilted strip */
.marquee-wrap{margin-top:clamp(48px,5vw,96px);padding-block:24px}
.marquee{transform:rotate(-1deg) scaleX(1.03)}

/* faster page curtain */
.curtain{animation:curtainOut .55s .05s cubic-bezier(.7,0,.2,1) forwards}

/* "A day aboard" fits one laptop screen while pinned */
@media (min-width:800px){
  .day__intro{padding-top:clamp(96px,12vh,130px)}
  .day h2{font-size:clamp(34px,4.2vw,60px)}
  .day__track{padding-top:clamp(20px,3vh,36px);padding-bottom:clamp(28px,5vh,56px);align-items:flex-start}
  .slot{width:clamp(280px,24vw,360px);padding-bottom:20px}
  .slot:nth-child(even){transform:translateY(18px)}
  .slot .ph{aspect-ratio:16/10}
  .slot time{font-size:clamp(34px,3vw,46px)}
  .slot h3{font-size:20px}
  .slot p{font-size:14px;line-height:1.5}
}
@media (min-width:800px) and (max-height:800px){
  .day__intro .eyebrow{margin-bottom:10px}
  .slot .ph{aspect-ratio:16/9}
  .slot{gap:8px}
}

/* footer: 4 columns, centred big word, credit */
.foot__cols{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
@media (max-width:1000px){.foot__cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__cols{grid-template-columns:1fr}}
.foot__big{font-size:clamp(52px,12.5vw,240px);text-align:center;letter-spacing:-.055em;line-height:.95;padding-inline:16px;margin-inline:auto;width:100%}
.foot__row{align-items:center}
.credit a{color:var(--mango);font-weight:700}
.credit a:hover{text-decoration:underline;text-underline-offset:3px}
.heart{color:var(--coral);display:inline-block;animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}}
@media (max-width:700px){.foot__row{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.heart{animation:none}}
.foot__big span{display:inline-block;background:inherit;-webkit-background-clip:text;background-clip:text}