:root{
  --sea-50:#F1F7F8; --sea-100:#DCEDEF; --sea-200:#BBDCE0; --sea-300:#93C4CA;
  --sea-400:#6BA6AD; --sea-500:#4E8B93; --sea-600:#3A727A; --sea-700:#2E5C63;
  --sea-800:#26494F; --sea-900:#1B3539;
  --sand-50:#FDF6EF; --sand-100:#F9E7D3; --sand-300:#E9B078; --sand-400:#DC965A;
  --sand-500:#C77A3C; --sand-700:#8A4C23;
  --ink-50:#F6F8F9; --ink-100:#EAEEF0; --ink-200:#D4DBDF; --ink-300:#AEB9BF;
  --ink-400:#7D8B93; --ink-500:#5C6B73; --ink-700:#33424A; --ink-850:#16272F; --ink-900:#0F1E26;
  --stop-600:#8F2F2F; --stop-300:#E9A5A5;

  --bg:#FFFFFF; --surface:var(--ink-50); --surface-raised:#FFFFFF;
  --border:var(--ink-200); --border-strong:var(--ink-300);
  --text:var(--ink-900); --text-muted:var(--ink-500); --text-subtle:var(--ink-400);
  --brand:var(--sea-400); --brand-quiet:var(--sea-50);
  --action:var(--sea-700); --action-hover:var(--sea-800); --on-action:#FFFFFF;
  --accent:var(--sand-400); --accent-text:var(--sand-700); --accent-quiet:var(--sand-50);
  --focus:var(--sand-500); --alert-text:var(--stop-600);
  --logo-ink:var(--ink-900);
  --shadow-md:0 4px 14px -4px rgba(15,30,38,.16);
  --shadow-lg:0 18px 40px -18px rgba(15,30,38,.34);

  --font-display:"Fraunces",Georgia,serif;
  --font-text:"Schibsted Grotesk","Helvetica Neue",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,monospace;
  --step-0:1.0625rem;
  --step-2:clamp(1.25rem,1.18rem + .35vw,1.4rem);
  --step-3:clamp(1.5rem,1.38rem + .6vw,1.75rem);
  --step-4:clamp(1.875rem,1.65rem + 1.1vw,2.25rem);
  --step-6:clamp(2.5rem,1.7rem + 3.6vw,4.5rem);
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;
  --t-fast:120ms; --t-base:220ms; --ease:cubic-bezier(.2,.7,.3,1);
  --hdr:108px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--ink-900); --surface:var(--ink-850); --surface-raised:#1B2E36;
    --border:#2A3E47; --border-strong:#3C525C;
    --text:#E9EFF1; --text-muted:var(--ink-300); --text-subtle:var(--ink-400);
    --brand:var(--sea-300); --brand-quiet:#1A3238;
    --action:var(--sea-300); --action-hover:var(--sea-200); --on-action:var(--ink-900);
    --accent:var(--sand-300); --accent-text:var(--sand-300); --accent-quiet:#2E2216;
    --focus:var(--sand-300); --alert-text:var(--stop-300);
    --logo-ink:#FFFFFF;
    --shadow-md:0 4px 14px -4px rgba(0,0,0,.6);
    --shadow-lg:0 18px 40px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:var(--ink-900); --surface:var(--ink-850); --surface-raised:#1B2E36;
  --border:#2A3E47; --border-strong:#3C525C;
  --text:#E9EFF1; --text-muted:var(--ink-300); --text-subtle:var(--ink-400);
  --brand:var(--sea-300); --brand-quiet:#1A3238;
  --action:var(--sea-300); --action-hover:var(--sea-200); --on-action:var(--ink-900);
  --accent:var(--sand-300); --accent-text:var(--sand-300); --accent-quiet:#2E2216;
  --focus:var(--sand-300); --alert-text:var(--stop-300);
  --logo-ink:#FFFFFF;
  --shadow-md:0 4px 14px -4px rgba(0,0,0,.6);
  --shadow-lg:0 18px 40px -18px rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; font-variation-settings:"SOFT" 0,"WONK" 1; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
img{max-width:100%}
.wrap{max-width:1240px; margin:0 auto; padding-inline:20px}
.eyebrow{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-subtle)}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px; padding:13px 26px; font-family:var(--font-text); font-weight:600; font-size:.95rem;
  border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.btn-sm{min-height:38px; padding:8px 16px; font-size:.85rem}
.btn-primary{background:var(--action); color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover)}
.btn-outline{background:transparent; color:var(--action); border-color:var(--action)}
.btn-outline:hover{background:var(--brand-quiet)}
.btn-onphoto{background:rgba(255,255,255,.95); color:var(--ink-900)}
.btn-onphoto:hover{background:#fff}
.btn-glass{background:rgba(15,30,38,.42); color:#fff; border-color:rgba(255,255,255,.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(15,30,38,.62)}

/* ============ HEADER ============ */
.hdr{position:fixed; top:0; left:0; right:0; z-index:60;
  padding-top:env(safe-area-inset-top,0px);
  transition:background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  border-bottom:1px solid transparent}
.hdr-in{display:flex; align-items:center; gap:var(--s-8);
  height:var(--hdr); transition:height var(--t-base) var(--ease)}
.hdr a{text-decoration:none}
.navset{display:flex; align-items:center; gap:var(--s-6)}
.navset.right{margin-left:auto; gap:var(--s-5)}
.navlink{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:.88; position:relative; padding-block:8px; white-space:nowrap}
.navlink::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-base) var(--ease)}
.navlink:hover{opacity:1}
.navlink:hover::after,.navlink:focus-visible::after{transform:scaleX(1)}
.brandlink{display:flex; align-items:center; flex:0 0 auto; margin-right:var(--s-2)}
.brandlink img{display:block; height:76px; width:auto; transition:height var(--t-base) var(--ease)}
.brandlink .onLight{display:none}
.hdr.solid .brandlink .onDark{display:none}
.hdr.solid .brandlink .onLight{display:block}
.hdr.solid .brandlink img{height:42px}
.burger,.wa{display:none; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:var(--r-full); border:1px solid rgba(255,255,255,.28); background:rgba(15,30,38,.3);
  color:#fff; cursor:pointer; backdrop-filter:blur(8px)}
.burger svg,.wa svg{width:20px; height:20px}
/* scrolled */
.hdr.solid{background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color:var(--border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.hdr.solid .hdr-in{height:66px}
.hdr.solid .navlink{color:var(--text); opacity:.75}
.hdr.solid .navlink:hover{opacity:1}
.hdr.solid .burger,.hdr.solid .wa{border-color:var(--border-strong); background:transparent; color:var(--text)}
@media (max-width:1000px){
  .navset:not(.right){display:none}
  .navset.right .navlink{display:none}
  .navset.right #hdrCta{display:none}
  .burger,.wa{display:inline-flex}
  .hdr-in{height:84px; gap:var(--s-3)}
  :root{--hdr:84px}
  .brandlink img{height:58px}
  .hdr.solid .hdr-in{height:62px}
  .hdr.solid .brandlink img{height:38px}
}

/* ============ MOBILE DRAWER ============ */
.drawer{position:fixed; inset:0; z-index:70; display:none}
.drawer[data-open="true"]{display:block}
.drawer-veil{position:absolute; inset:0; background:rgba(15,30,38,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); animation:fade 200ms var(--ease)}
.drawer-panel{position:absolute; inset:0; display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);
  background:var(--bg); animation:slideIn 260ms var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-8)}
.drawer-top svg.logo{width:104px; height:auto}
.drawer nav{display:flex; flex-direction:column}
.drawer nav a{font-family:var(--font-display); font-weight:600; font-size:1.65rem; line-height:1.1;
  padding-block:var(--s-4); border-bottom:1px solid var(--border); text-decoration:none; display:flex;
  align-items:baseline; gap:var(--s-3)}
.drawer nav a span{font-family:var(--font-mono); font-size:.68rem; color:var(--text-subtle)}
.drawer-foot{margin-top:auto; display:flex; flex-direction:column; gap:var(--s-3); padding-top:var(--s-6)}
.drawer-foot .row{display:flex; gap:var(--s-3); flex-wrap:wrap}

/* ============ HERO ============ */
.hero{position:relative; min-height:100vh; min-height:100svh; overflow:hidden}
.track{display:flex; height:100vh; height:100svh; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%; scroll-snap-align:start; position:relative; display:flex; align-items:flex-end;
  padding:0 0 calc(env(safe-area-inset-bottom,0px) + 118px)}
.slide .media{position:absolute; inset:0}
.slide .media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,30,38,.82) 0%,rgba(15,30,38,.42) 38%,rgba(15,30,38,.10) 68%,rgba(15,30,38,.34) 100%)}
.slide .media img,.slide .media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.slide-in{position:relative; z-index:2; width:100%; max-width:1240px; margin:0 auto; padding-inline:20px; color:#fff}
.slide h1,.slide h2{font-size:var(--step-6); line-height:1.02; letter-spacing:-.02em; max-width:15ch;
  text-shadow:0 2px 12px rgba(15,30,38,.34)}
.slide .kicker{display:inline-flex; align-items:center; gap:.5em; margin-bottom:var(--s-4);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  padding:6px 14px; border-radius:var(--r-full); backdrop-filter:blur(8px)}
.slide .lede{margin-top:var(--s-4); max-width:46ch; font-size:1.06rem; color:rgba(255,255,255,.93)}
.slide .acts{display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6)}
/* conditions bar */
.rail{background:var(--ink-900); color:#E9EFF1}
.rail-in{display:flex; align-items:center; gap:var(--s-8); flex-wrap:wrap; padding-block:var(--s-5)}
.cb{display:flex; flex-direction:column; gap:2px}
.cb b{font-family:var(--font-mono); font-size:1rem; font-variant-numeric:tabular-nums; color:#fff}
.cb span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:#7E97A0}
.cb-cta{margin-left:auto}
@media (max-width:860px){
  .rail-in{gap:var(--s-5)}
  .cb-cta{margin-left:0; width:100%}
  .cb-cta .btn{width:100%}
  .slide{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 112px)}
}
/* paginator: hairlines left, chevrons right, nothing else */
.pager{position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 34px); z-index:4}
.pager-in{max-width:1240px; margin:0 auto; padding-inline:20px; display:flex; align-items:center; gap:var(--s-4)}
.dots{display:flex; gap:8px; align-items:center}
.dot{position:relative; width:34px; height:2px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.34); overflow:hidden; transition:width var(--t-base) var(--ease)}
.dot i{position:absolute; inset:0; display:block; background:#fff; transform-origin:left; transform:scaleX(0)}
.dot[aria-current="true"]{width:56px}
.dot[aria-current="true"] i{transform:scaleX(1); transition:transform 140ms linear}
.dot[aria-current="true"].run i{animation:fill var(--dur,7s) linear forwards}
.dot:hover{background:rgba(255,255,255,.6)}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pager .arrows{margin-left:auto; display:flex; align-items:center; gap:var(--s-2)}
.rnd{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:none; color:#fff; opacity:.55; cursor:pointer; transition:opacity var(--t-fast) var(--ease)}
.rnd:hover{opacity:1}
.rnd svg{width:17px; height:17px}
@media (max-width:860px){.pager{bottom:calc(env(safe-area-inset-bottom,0px) + 26px)} .pager .arrows{display:none} .dot{width:26px} .dot[aria-current="true"]{width:44px}}
svg.i{width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ============ SECTIONS ============ */
section.band{padding-block:var(--s-20)}
@media (max-width:760px){section.band{padding-block:var(--s-12)}}
.band-head{max-width:60ch; margin-bottom:var(--s-10)}
.band-head h2{font-size:var(--step-4); line-height:1.15; margin-top:var(--s-3)}
.band-head p{margin-top:var(--s-4); color:var(--text-muted)}
.grid{display:grid; gap:var(--s-5)}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.alt{background:var(--surface)}

.vcard{display:flex; flex-direction:column; gap:var(--s-3)}
.vcard .ph{aspect-ratio:4/3; border-radius:var(--r-md); position:relative; overflow:hidden; background:var(--surface)}
.vcard .ph img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 600ms var(--ease)}
.vcard:hover .ph img{transform:scale(1.03)}
.vcard h3{font-size:var(--step-2)}
.vcard p{color:var(--text-muted); font-size:.95rem}

.rcard{position:relative; border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  justify-content:flex-end; min-height:380px; padding:var(--s-6); color:#fff; text-decoration:none;
  transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease)}
.rcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.rcard .bg{position:absolute; inset:0; transition:transform 600ms var(--ease)}
.rcard .bg img{width:100%; height:100%; object-fit:cover; display:block}
.rcard:hover .bg{transform:scale(1.04)}
.rcard .bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,30,38,.82),rgba(15,30,38,.18) 62%,transparent)}
.rcard > *{position:relative; z-index:1}
.rcard h3{font-size:var(--step-3)}
.rcard p{margin-top:var(--s-2); font-size:.92rem; color:rgba(255,255,255,.88); max-width:34ch}
.rcard .go{margin-top:var(--s-4); display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.9rem}

.boat{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:center}
.boat .shot{aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.boat .shot img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:820px){.boat{grid-template-columns:1fr; gap:var(--s-5)} .boat .flip{order:-1}}
.specs{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3); margin-top:var(--s-5)}
.spec{display:flex; gap:var(--s-3); align-items:flex-start}
.spec svg{width:20px; height:20px; color:var(--action); flex:0 0 auto; margin-top:2px}
.spec b{display:block; font-family:var(--font-mono); font-size:.86rem; font-weight:500}
.spec span{font-size:.76rem; color:var(--text-subtle)}

.trips{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-raised)}
.trip{display:grid; grid-template-columns:170px 1fr auto auto; gap:var(--s-4); align-items:center;
  padding:var(--s-4) var(--s-5); border-top:1px solid var(--border)}
.trip:first-child{border-top:0}
.t-date b{display:block; font-family:var(--font-mono); font-size:.98rem; font-variant-numeric:tabular-nums}
.t-date span{font-size:.72rem; color:var(--text-subtle); font-family:var(--font-mono)}
.t-dest b{font-family:var(--font-display); font-weight:600; font-size:1.02rem}
.t-dest span{display:block; font-size:.8rem; color:var(--text-muted)}
@media (max-width:760px){.trip{grid-template-columns:1fr auto; row-gap:var(--s-3)} .trip .t-cta{grid-column:1/-1}}
.badge{display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-full); border:1px solid transparent}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.b-open{background:var(--brand-quiet); color:var(--sea-700); border-color:color-mix(in srgb,var(--sea-700) 24%,transparent)}
.b-few{background:var(--accent-quiet); color:var(--accent-text); border-color:color-mix(in srgb,var(--sand-700) 28%,transparent)}
.b-full{background:color-mix(in srgb,var(--stop-600) 10%,transparent); color:var(--alert-text); border-color:color-mix(in srgb,var(--stop-600) 28%,transparent)}
:root[data-theme="dark"] .b-open{color:var(--sea-300)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-open{color:var(--sea-300)}}

.quote{display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-6);
  border-radius:var(--r-lg); background:var(--surface-raised); border:1px solid var(--border)}
.quote .stars{color:var(--accent-text); letter-spacing:.14em; font-size:.85rem}
.quote blockquote{margin:0; font-size:1.02rem; line-height:1.65}
.quote .by{font-size:.82rem; color:var(--text-muted); margin-top:auto}
.quote .by b{font-family:var(--font-display); color:var(--text)}

details.faq{border-bottom:1px solid var(--border); padding-block:var(--s-4)}
details.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s-4);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-family:var(--font-mono); color:var(--action); font-size:1.15rem}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin-top:var(--s-3); color:var(--text-muted); max-width:68ch}

.cta{border-radius:var(--r-lg); overflow:hidden; position:relative; padding:var(--s-16) var(--s-6); text-align:center; color:#fff}
.cta .bg{position:absolute; inset:0; background:radial-gradient(90% 120% at 50% 0%,#4F949B,#14303A)}
.cta > *{position:relative; z-index:1}
.cta h2{font-size:var(--step-4); max-width:20ch; margin:0 auto}
.cta p{margin:var(--s-4) auto 0; max-width:50ch; color:rgba(255,255,255,.88)}
.cta .acts{display:flex; gap:var(--s-3); justify-content:center; flex-wrap:wrap; margin-top:var(--s-6)}

/* ============ FOOTER ============ */
footer.ft{background:var(--ink-900); color:#E9EFF1; padding-block:var(--s-16) var(--s-8); margin-top:var(--s-20)}
.ft-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s-8)}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft h4{font-family:var(--font-mono); font-weight:400; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:#7E97A0; margin-bottom:var(--s-4)}
.ft ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-3)}
.ft a{color:#C9D6DB; text-decoration:none; font-size:.92rem}
.ft a:hover{color:#fff}
.ft .logo{width:150px; height:auto; margin-bottom:var(--s-4)}
.ft .blurb{color:#9FB2B9; font-size:.9rem; max-width:34ch}
.ft .next{display:flex; flex-direction:column; gap:var(--s-3)}
.ft .nx{display:flex; justify-content:space-between; gap:var(--s-3); align-items:baseline;
  padding-bottom:var(--s-3); border-bottom:1px solid #22353D}
.ft .nx b{font-family:var(--font-mono); font-size:.86rem; color:#E9EFF1; font-variant-numeric:tabular-nums}
.ft .nx span{font-size:.74rem; color:#7E97A0; font-family:var(--font-mono)}
.social{display:flex; gap:var(--s-2); margin-top:var(--s-5)}
.social a{width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); border:1px solid #2A3E47; color:#C9D6DB}
.social a:hover{background:#1B2E36; color:#fff}
.social svg{width:18px; height:18px}
.ft-base{margin-top:var(--s-12); padding-top:var(--s-5); border-top:1px solid #22353D;
  display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-size:.8rem; color:#7E97A0}
.ft-base nav{display:flex; gap:var(--s-5); flex-wrap:wrap}
.pill-note{display:inline-block; margin-top:var(--s-3); font-size:.72rem; color:#0F1E26;
  background:var(--sand-300); padding:3px 9px; border-radius:var(--r-full); font-family:var(--font-mono)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .track{scroll-behavior:auto}
  .rcard:hover{transform:none}
}

/* ================= SITE PAGES ================= */
.navlink.is-active{opacity:1}
.navlink.is-active::after{transform:scaleX(1)}
.micro{font-size:.85rem; color:var(--text-subtle); line-height:1.6}

/* page hero (not full height) */
.phero{position:relative; min-height:64svh; display:flex; align-items:flex-end; overflow:hidden;
  padding:calc(var(--hdr) + var(--s-12)) 0 var(--s-12)}
.phero.short{min-height:44svh}
.phero .media{position:absolute; inset:0}
.phero .media img,.phero .media video{width:100%; height:100%; object-fit:cover; display:block}
.phero .media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,30,38,.80) 0%,rgba(15,30,38,.40) 42%,rgba(15,30,38,.18) 72%,rgba(15,30,38,.40) 100%)}
.phero-in{position:relative; z-index:2; color:#fff; width:100%}
.phero .kicker{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.8); margin-bottom:var(--s-3)}
.phero h1{font-size:var(--step-6); line-height:1.04; letter-spacing:-.02em; max-width:17ch;
  text-shadow:0 2px 12px rgba(15,30,38,.34)}
.phero .lede{margin-top:var(--s-4); max-width:52ch; color:rgba(255,255,255,.92); font-size:1.05rem}

/* spot index bar */
.spotindex{position:sticky; top:calc(66px + env(safe-area-inset-top,0px)); z-index:40;
  background:color-mix(in srgb,var(--bg) 94%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)}
.spotindex .wrap{display:flex; gap:var(--s-4); overflow-x:auto; padding-block:var(--s-3); scrollbar-width:none}
.spotindex .wrap::-webkit-scrollbar{display:none}
.spotindex a{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; white-space:nowrap;
  color:var(--text-muted); text-decoration:none}
.spotindex a:hover{color:var(--action)}

/* spots */
.spots{display:flex; flex-direction:column; gap:var(--s-12)}
.spot{display:grid; gap:var(--s-6); align-items:start; scroll-margin-top:140px}
.spot.has-img{grid-template-columns:1fr 1fr}
.spot:nth-child(even).has-img .spot-txt{order:2}
@media (max-width:820px){.spot.has-img{grid-template-columns:1fr} .spot:nth-child(even).has-img .spot-txt{order:0}}
.spot-n{font-size:.72rem; color:var(--text-subtle); letter-spacing:.14em; margin-bottom:var(--s-2)}
.spot h3{font-size:var(--step-3); margin-bottom:var(--s-3)}
.spot p{color:var(--text-muted); max-width:62ch}
.spot-img{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/2; background:var(--surface)}
.spot-img img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in}

/* boat spec list */
.speclist{list-style:none; margin:var(--s-5) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s-3)}
.speclist li{padding-left:var(--s-5); position:relative; color:var(--text-muted); font-size:.95rem}
.speclist li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:1px; background:var(--action)}
.speclist b{font-family:var(--font-mono); font-weight:500; color:var(--text); font-size:.9rem; margin-right:.5em}

/* calendar */
.yr{font-size:var(--step-4); display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5)}
.yr span{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle)}
.panel-note{display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s-6)}
.panel-note p{max-width:60ch; color:var(--text-muted)}
.panel-note b{color:var(--text)}
.contact-block{display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s-10); align-items:center}
.contact-block img{border-radius:var(--r-lg); width:100%; height:auto; cursor:zoom-in}
@media (max-width:820px){.contact-block{grid-template-columns:1fr}}

/* reviews */
.quotes{columns:2; column-gap:var(--s-5)}
@media (max-width:820px){.quotes{columns:1}}
.quotes .quote{break-inside:avoid; margin:0 0 var(--s-5)}

/* faq */
.faqwrap{max-width:860px}
.faqsec{margin-bottom:var(--s-12); scroll-margin-top:150px}
.faqsec h2{font-size:var(--step-2); margin-bottom:var(--s-4); padding-bottom:var(--s-3);
  border-bottom:1px solid var(--border); font-family:var(--font-mono); font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-subtle); font-size:.76rem}

/* gallery grid with real images */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3)}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr); gap:var(--s-2)}}
.gal figure{margin:0; position:relative; overflow:hidden; border-radius:var(--r-md);
  aspect-ratio:3/2; background:var(--surface); cursor:zoom-in}
.gal figure img{width:100%; height:100%; object-fit:cover; display:block}
.gal .wide{grid-column:span 2}
.gal .tall{grid-row:span 2; aspect-ratio:2/3}
.gal figcaption{position:absolute; inset:auto 0 0 0; padding:var(--s-3); color:#fff; font-size:.74rem;
  font-family:var(--font-mono); background:linear-gradient(to top,rgba(15,30,38,.8),rgba(15,30,38,0));
  opacity:0; transition:opacity var(--t-base) var(--ease)}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1}
.gal figure[hidden]{display:none}
.filterbar{display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-5)}
.chipbtn{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; padding:8px 15px;
  min-height:38px; border-radius:var(--r-full); border:1px solid var(--border-strong);
  background:transparent; color:var(--text-muted); cursor:pointer}
.chipbtn[aria-pressed="true"]{background:var(--action); border-color:var(--action); color:var(--on-action)}
.chipbtn:hover{color:var(--action); border-color:var(--action)}
.chipbtn[aria-pressed="true"]:hover{color:var(--on-action)}

/* lightbox */
dialog.lb{border:0; padding:0; background:transparent; color:#fff; max-width:min(94vw,1100px); width:100%; max-height:94vh}
dialog.lb::backdrop{background:rgba(15,30,38,.72); backdrop-filter:blur(20px) saturate(120%); -webkit-backdrop-filter:blur(20px) saturate(120%)}
.lb-frame{border-radius:var(--r-lg); overflow:hidden; background:#0F1E26; box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.lb-frame img{width:100%; height:auto; max-height:80vh; object-fit:contain; display:block}
.lb-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding-top:var(--s-3)}
.lb-meta small{color:rgba(255,255,255,.8); font-size:.82rem}
.lb-ctrl{display:flex; gap:var(--s-2)}
.lb-btn{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  color:#fff; cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.24)}
.lb-btn svg{width:20px; height:20px}

/* ================= REVISION: lighter, squarer, real logo ================= */
:root{
  --r-sm:3px; --r-md:5px; --r-lg:7px; --r-xl:9px;
  --surface:#F7F4EF;              /* warm, not blue-grey */
  --surface-raised:#FFFFFF;
  --border:#E3DED6; --border-strong:#CFC8BE;
  --hdr:92px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:#1A2B31; --surface-raised:#1E3138; --border:#2A3E47;
}}
:root[data-theme="dark"]{--surface:#1A2B31; --surface-raised:#1E3138; --border:#2A3E47}
body{background:var(--bg)}
.alt{background:var(--surface)}

/* header: always light so the real black wordmark reads, and social links */
.hdr{background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.hdr .navlink{color:var(--text); opacity:.7}
.hdr .navlink:hover,.hdr .navlink.is-active{opacity:1}
.hdr.solid .hdr-in{height:64px}
.brandlink img{height:66px; filter:drop-shadow(0 1px 2px rgba(15,30,38,.28))}
.hdr.solid .brandlink img{height:44px}
.hdr-social{display:flex; gap:2px; margin-right:var(--s-2)}
.hdr-social a{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-muted); border-radius:var(--r-sm)}
.hdr-social a:hover{color:var(--action); background:var(--brand-quiet)}
.hdr-social svg{width:17px; height:17px}
.burger,.wa{border-color:var(--border-strong); background:transparent; color:var(--text); border-radius:var(--r-sm)}
@media (max-width:1100px){.hdr-social{display:none}}
@media (max-width:1000px){:root{--hdr:74px} .brandlink img{height:52px} .hdr.solid .brandlink img{height:40px}}

/* hero sits below the header now */
.hero{padding-top:var(--hdr)}
.track{height:calc(100svh - var(--hdr))}
.hero{min-height:100svh}
.phero{padding-top:calc(var(--hdr) + var(--s-10))}
.phero .media::after{background:linear-gradient(to top,rgba(15,30,38,.74) 0%,rgba(15,30,38,.30) 48%,rgba(15,30,38,.06) 80%)}
.slide .media::after{background:linear-gradient(to top,rgba(15,30,38,.74) 0%,rgba(15,30,38,.32) 42%,rgba(15,30,38,.04) 74%)}
.spotindex{top:calc(64px + env(safe-area-inset-top,0px))}

/* next-departure rail, light */
.rail{background:var(--sea-700); color:#fff}
.rail .cb b{color:#fff}
.rail .cb span{color:rgba(255,255,255,.62)}

/* footer, light so the black wordmark works as drawn */
footer.ft{background:var(--surface); color:var(--text); border-top:1px solid var(--border)}
.ft h4{color:var(--text-subtle)}
.ft a{color:var(--text-muted)}
.ft a:hover{color:var(--action)}
.ft .blurb{color:var(--text-muted)}
.ft .logo{filter:drop-shadow(0 2px 3px rgba(15,30,38,.30))}
.ft .nx{border-bottom-color:var(--border)}
.ft .nx b{color:var(--text)}
.ft .nx span{color:var(--text-subtle)}
.social a{border-color:var(--border-strong); color:var(--text-muted)}
.social a:hover{background:var(--brand-quiet); color:var(--action)}
.ft-base{border-top-color:var(--border); color:var(--text-subtle); align-items:center}
.ft-base .powered{margin-left:auto; font-family:var(--font-mono); font-size:.74rem}
.ft-base .powered a{color:var(--action); text-decoration:none}
.ft-base .powered a:hover{text-decoration:underline}

/* boats spec list: plain, as written on the live site */
.speclist li{padding-left:var(--s-4)}
.speclist li::before{top:.75em; width:6px}

/* FAQ: seven panels, one at a time */
.faqlayout{display:grid; grid-template-columns:260px 1fr; gap:var(--s-10); align-items:start}
@media (max-width:900px){.faqlayout{grid-template-columns:1fr; gap:var(--s-6)}}
.faqtabs{display:flex; flex-direction:column; gap:2px; position:sticky; top:calc(84px + env(safe-area-inset-top,0px))}
@media (max-width:900px){.faqtabs{position:static; flex-direction:row; overflow-x:auto; padding-bottom:var(--s-2)}
  .faqtabs::-webkit-scrollbar{display:none}}
.faqtab{display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  padding:var(--s-3) var(--s-4); border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent; color:var(--text-muted); white-space:nowrap}
.faqtab b{font-family:var(--font-text); font-weight:600; font-size:.92rem; color:var(--text)}
.faqtab span{font-family:var(--font-mono); font-size:.66rem; color:var(--text-subtle)}
.faqtab:hover{background:var(--surface)}
.faqtab[aria-selected="true"]{background:var(--action); border-color:var(--action)}
.faqtab[aria-selected="true"] b,.faqtab[aria-selected="true"] span{color:var(--on-action)}
.faqpanel h2{font-size:var(--step-3); margin:var(--s-2) 0 var(--s-5)}
.faqpanel .eyebrow{display:block}

/* legal pages */
.phero.legal{min-height:auto; background:var(--surface); padding-block:calc(var(--hdr) + var(--s-10)) var(--s-10)}
.phero.legal .phero-in{color:var(--text)}
.phero.legal .kicker{color:var(--text-subtle)}
.phero.legal h1{font-size:var(--step-5); text-shadow:none; max-width:20ch}
.phero.legal .lede{color:var(--text-muted)}
.legalwrap{max-width:74ch}
.legalmeta{font-size:.74rem; color:var(--text-subtle); padding-bottom:var(--s-5);
  border-bottom:1px solid var(--border); margin-bottom:var(--s-8)}
.legalsec{margin-bottom:var(--s-8); scroll-margin-top:120px}
.legalsec h2{font-size:var(--step-2); margin-bottom:var(--s-3)}
.legalsec p{color:var(--text-muted); margin-bottom:var(--s-3); max-width:70ch}
.legalsec b{color:var(--text)}
.flagbox{border-left:3px solid var(--accent); padding:var(--s-3) 0 var(--s-3) var(--s-4);
  background:var(--accent-quiet); font-size:.92rem}

/* squarer components */
.card,.panel,.panel-quiet,.trips,.tablewrap,.spot-img,.gal figure,.rcard,.boat .shot,
.lb-frame,.panel-note,.contact-block img,.quote,.vcard .ph{border-radius:var(--r-lg)}
.btn,.input,.chipbtn{border-radius:var(--r-sm)}
.badge{border-radius:var(--r-sm)}
.rnd,.lb-btn,.social a{border-radius:var(--r-sm)}

/* ================= MOBILE HARDENING ================= */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
img,video{max-width:100%}

@media (max-width:760px){
  .wrap{padding-inline:16px}
  .phero{min-height:70svh; padding-top:calc(var(--hdr) + var(--s-8)); padding-bottom:var(--s-8)}
  .phero.short{min-height:38svh}
  .phero h1{max-width:100%}
  .phero .lede{font-size:.98rem}
  .slide h1,.slide h2{max-width:100%}
  .slide .lede{font-size:.98rem}
  .slide .acts .btn{flex:1 1 auto; min-width:0}
  /* bigger hit areas for the hero dots */
  .dots{gap:12px}
  .dot{padding:14px 0; height:auto; background:none}
  .dot::before{content:""; display:block; height:2px; background:rgba(255,255,255,.34)}
  .dot i{top:14px; bottom:14px; height:auto}
  .dot[aria-current="true"]::before{background:rgba(255,255,255,.34)}
  /* touch targets */
  .chipbtn,.faqtab{min-height:44px}
  .spotindex .wrap{gap:var(--s-3)}
  .spotindex a{padding-block:8px}
  /* stacking */
  .rail-in{flex-direction:column; align-items:flex-start; gap:var(--s-4)}
  .contact-block{gap:var(--s-6)}
  .panel-note{flex-direction:column; align-items:flex-start}
  .panel-note .btn{width:100%}
  .yr{gap:var(--s-2)}
  .trip{padding:var(--s-4)}
  .t-cta .btn{width:100%}
  .boat{gap:var(--s-5)}
  .speclist li{font-size:.92rem}
  .quotes{columns:1}
  .ft-base{flex-direction:column; align-items:flex-start; gap:var(--s-3)}
  .ft-base .powered{margin-left:0}
  .ft-base nav{gap:var(--s-4)}
  .gal .tall{grid-row:span 1; aspect-ratio:3/2}
  .gal .wide{grid-column:span 2}
  .lb-bar{flex-wrap:wrap}
  .legalsec p{font-size:.95rem}
}
@media (max-width:400px){
  .wrap{padding-inline:14px}
  .brandlink img{height:46px}
  .burger,.wa{width:42px; height:42px}
  .gal{grid-template-columns:1fr}
  .gal .wide,.gal .tall{grid-column:span 1; grid-row:span 1; aspect-ratio:3/2}
  .btn{padding:12px 18px; font-size:.9rem}
}
/* very short landscape phones: do not trap the hero */
@media (max-height:520px) and (orientation:landscape){
  .hero,.track{min-height:auto; height:auto}
  .track{height:88svh}
  .phero{min-height:auto; padding-block:calc(var(--hdr) + var(--s-6)) var(--s-6)}
}

/* ================= CALENDAR: tabs + past trips ================= */
.faqtabs.row{flex-direction:row; position:static; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-8)}
.faqtabs.row .faqtab{border:1px solid var(--border-strong); flex:0 0 auto}
.faqtabs.row .faqtab[aria-selected="true"]{border-color:var(--action)}
.calpanels .yr{margin-bottom:var(--s-5)}
.trip.is-past{opacity:.48}
.trip.is-past .t-date b{text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--text-subtle)}
.badge.b-past{background:transparent; color:var(--text-subtle); border-color:var(--border-strong)}
.badge.b-past::before{background:var(--text-subtle)}
.pasttoggle{margin-top:var(--s-4); background:none; border:0; cursor:pointer; padding:10px 0; min-height:44px;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; color:var(--text-muted);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.pasttoggle:hover{color:var(--action)}
@media (max-width:760px){
  .faqtabs.row{flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding-inline:16px}
  .faqtabs.row .faqtab{white-space:nowrap}
}

/* ================= FORECAST + MAP ================= */
.fc{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-raised); padding:var(--s-5)}
.fc-head{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4)}
.fc-src{font-size:.68rem; color:var(--text-subtle); letter-spacing:.06em}
.fc-flag{font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-900);
  background:var(--sand-300); padding:3px 9px; border-radius:var(--r-sm)}
.fc-days{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-3)}
@media (max-width:820px){.fc-days{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.fc-days{grid-template-columns:1fr}}
.fcd{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s-4); display:flex;
  flex-direction:column; gap:var(--s-3); background:var(--bg)}
.fcd.is-today{border-color:var(--action); box-shadow:inset 0 0 0 1px var(--action)}
.fcd .d{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-subtle)}
.fcd .surf{font-family:var(--font-display); font-weight:600; font-size:1.65rem; line-height:1}
.fcd .surf small{font-size:.72rem; font-family:var(--font-mono); color:var(--text-subtle); display:block; margin-top:4px}
.fcrow{display:flex; align-items:center; gap:var(--s-2); font-size:.8rem; color:var(--text-muted)}
.fcrow b{font-family:var(--font-mono); font-weight:500; color:var(--text)}
.arrow{width:18px; height:18px; flex:0 0 auto; color:var(--action)}
.fc-note{margin-top:var(--s-4); color:var(--text-subtle)}
.fc-skel{height:150px; border-radius:var(--r-md); background:var(--surface)}

.rmap{position:relative; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); min-height:420px}
.rmap-canvas{position:absolute; inset:0; display:none}
.rmap.is-live .rmap-canvas{display:block}
.rmap.is-live .rmap-fallback{display:none}
.rmap-fallback{position:relative; padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3);
  align-items:flex-start; min-height:420px; justify-content:center}
.rmap-coords{font-size:.8rem; color:var(--text-muted)}
.rmap-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-2); width:100%; max-width:46ch}
.rmap-list li{display:flex; gap:var(--s-3); align-items:baseline; padding-bottom:var(--s-2);
  border-bottom:1px solid var(--border)}
.rmap-list b{font-family:var(--font-display); font-weight:600; min-width:9em}
.rmap-list span{font-size:.88rem; color:var(--text-muted)}
.leaflet-container{background:var(--surface)!important; font-family:var(--font-text)!important}
.rpin{background:var(--action); color:#fff; font-family:var(--font-mono); font-size:.66rem;
  padding:4px 8px; border-radius:var(--r-sm); white-space:nowrap; box-shadow:0 2px 6px rgba(15,30,38,.3)}
@media (max-width:760px){.rmap,.rmap-fallback{min-height:320px}}

/* ================= SPOT STRIPS (every spot, every image) ================= */
.spot{display:flex; flex-direction:column; gap:var(--s-5); scroll-margin-top:150px}
.spot-txt{max-width:66ch}
.spot-n{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-subtle); margin-bottom:var(--s-2)}
.spotstrip{display:grid; gap:var(--s-2)}
.spotstrip.n1{grid-template-columns:1fr; max-width:760px}
.spotstrip.n2{grid-template-columns:1fr 1fr}
.spotstrip.n3{grid-template-columns:1.6fr 1fr 1fr}
.spotstrip figure{margin:0; aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.spotstrip img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;
  transition:transform 600ms var(--ease)}
.spotstrip figure:hover img{transform:scale(1.03)}
@media (max-width:760px){
  .spotstrip.n3{grid-template-columns:1fr 1fr}
  .spotstrip.n3 figure:first-child{grid-column:1 / -1}
  .spots{gap:var(--s-10)}
}

/* ================= NAV v3: minimal burger + overlay, theme toggle ========= */

/* --- icon button (theme toggle) --- */
.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; cursor:pointer;
  background:transparent; color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  transition:color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.iconbtn:hover{color:var(--action); border-color:var(--action)}
.iconbtn .i{width:18px; height:18px}
.iconbtn .moon{display:none}
:root[data-theme="dark"] .iconbtn .sun{display:none}
:root[data-theme="dark"] .iconbtn .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .iconbtn .sun{display:none}
  :root:not([data-theme="light"]) .iconbtn .moon{display:block}
  :root[data-theme="light"] .iconbtn .sun{display:block}
  :root[data-theme="light"] .iconbtn .moon{display:none}
}

/* --- minimal burger: two rules, becomes an X --- */
.burger{
  display:none; position:relative; width:40px; height:40px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--border-strong); border-radius:var(--r-sm);
  color:var(--text);
}
.burger span{
  position:absolute; left:50%; width:18px; height:1.5px; border-radius:2px;
  background:currentColor; transform:translateX(-50%);
  transition:transform 320ms var(--ease), opacity 200ms var(--ease), width 320ms var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px; width:12px}
.burger:hover span:nth-child(2){width:18px}
.burger.is-open{border-color:rgba(255,255,255,.28); color:#fff}
.burger.is-open span{width:20px; top:19px}
.burger.is-open span:nth-child(1){transform:translateX(-50%) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateX(-50%) rotate(-45deg)}

/* --- full-screen overlay navigation --- */
.ov{position:fixed; inset:0; z-index:200; display:block}
.ov[hidden]{display:none}
.ov-bg{
  position:absolute; inset:0; background:rgba(12,24,30,.78);
  -webkit-backdrop-filter:blur(22px) saturate(120%); backdrop-filter:blur(22px) saturate(120%);
  opacity:0; transition:opacity 420ms var(--ease);
}
.ov.is-on .ov-bg{opacity:1}
.ov-in{
  position:relative; height:100%; display:flex; flex-direction:column;
  padding:0 max(24px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom,0px));
  max-width:1280px; margin:0 auto; color:#F3F7F8;
}
.ov-top{display:flex; align-items:center; justify-content:space-between; height:88px; flex:0 0 auto}
.ov-logo{height:52px; width:auto; background:#FBF9F6; padding:5px 9px;
  border-radius:var(--r-sm); box-sizing:content-box}
.ov nav{flex:1 1 auto; display:flex; align-items:center; min-height:0; overflow-y:auto}
.ov-list{list-style:none; margin:0; padding:0; width:100%}
.ov-list li{
  border-top:1px solid rgba(255,255,255,.12);
  opacity:0; transform:translateY(18px);
  transition:opacity 460ms var(--ease), transform 460ms var(--ease);
  transition-delay:calc(90ms + var(--i) * 55ms);
}
.ov-list li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.ov.is-on .ov-list li{opacity:1; transform:none}
.ov-list a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:var(--s-5); padding:clamp(14px, 2.4vh, 26px) 4px;
  text-decoration:none; color:inherit;
  transition:color 200ms var(--ease), padding-left 260ms var(--ease);
}
.ov-list a:hover,.ov-list a:focus-visible{color:var(--sea-300); padding-left:12px; outline:none}
.ov-n{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; opacity:.45}
.ov-t{font-family:var(--font-display); font-weight:400; line-height:1;
  font-size:clamp(2rem, 8.5vw, 3.4rem); letter-spacing:-.015em}
.ov-d{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; opacity:.45; text-align:right}
.ov-foot{flex:0 0 auto; padding-top:var(--s-6);
  opacity:0; transition:opacity 420ms var(--ease) 420ms}
.ov.is-on .ov-foot{opacity:1}
.ov-actions{display:flex; gap:var(--s-3)}
.ov-actions .btn{flex:1; justify-content:center}
.ov-actions .btn-outline{border-color:rgba(255,255,255,.35); color:#fff}
.ov-actions .btn-outline:hover{background:rgba(255,255,255,.12); border-color:#fff}
body.ov-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .ov-bg,.ov-list li,.ov-foot{transition:none}
  .ov-list li{opacity:1; transform:none}
  .ov-foot{opacity:1}
}

/* --- header at mobile: logo, WhatsApp, theme, burger --- */
.mnav{display:none}
.actionbar{display:none}
@media (max-width:1000px){
  .hdr-in{height:64px; gap:var(--s-2)}
  :root{--hdr:64px}
  .brandlink img{height:44px}
  .hdr.solid .hdr-in{height:56px}
  .hdr.solid .brandlink img{height:38px}
  .navset:not(.right){display:none}
  .hdr-social{display:none}
  .navset.right{gap:8px}
  .navset.right #hdrCta{display:none}
  .wa{display:inline-flex}
  .burger{display:inline-flex}

  /* booking stays under the thumb */
  .actionbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
    gap:1px; background:var(--border);
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -6px 24px -12px rgba(15,30,38,.45);
  }
  .actionbar a{display:flex; align-items:center; justify-content:center; text-decoration:none; min-height:60px}
  .ab-main{flex:1; flex-direction:column; gap:1px; background:var(--action); color:var(--on-action); padding:10px 16px}
  .ab-main b{font-size:.95rem; font-weight:600}
  .ab-main span{font-family:var(--font-mono); font-size:.64rem; opacity:.8}
  .ab-wa{flex:0 0 96px; flex-direction:column; gap:2px; background:var(--surface-raised); color:var(--text)}
  .ab-wa svg{width:20px; height:20px; color:var(--action)}
  .ab-wa span{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em}
  .actionbar a:active{filter:brightness(.94)}
  body{padding-bottom:78px}
  footer.ft{margin-bottom:0}
  .ov-in{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .ov-top{height:64px}
  .ov-logo{height:40px}
}
@media (max-width:480px){
  .iconbtn,.burger,.wa{width:38px; height:38px}
  .burger span:nth-child(1){top:15px}
  .burger span:nth-child(2){top:21px}
  .burger.is-open span{top:18px}
  .ab-wa{flex:0 0 84px}
  .ov-list a{grid-template-columns:auto 1fr; gap:var(--s-4)}
  .ov-d{display:none}
}
@media (min-width:1001px){
  .ov{display:none !important}
}

/* --- footer next departures --- */
.ft .next{display:flex; flex-direction:column; gap:10px; margin-top:var(--s-3)}
.ft .next a{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:10px;
  text-decoration:none; color:#E9EFF1; padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ft .next a:last-child{border-bottom:0}
.ft .next a:hover .nx-d{color:var(--sea-300)}
.ft .nx-d{font-size:.9rem; transition:color 180ms var(--ease)}
.ft .nx-b{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.09em; opacity:.6; text-transform:uppercase}
.ft .nx-s{grid-column:1 / -1; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; opacity:.55}
.ft .nx-s.low{color:#E9B44C; opacity:1}

/* --- review cards: avatar, name, role --- */
.q-top{display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-4)}
.av{
  width:46px; height:46px; flex:0 0 46px; border-radius:50%; object-fit:cover;
  background:var(--surface); border:1px solid var(--border);
}
.q-top .by{display:flex; flex-direction:column; gap:2px; min-width:0}
.q-top .by b{font-size:.95rem; font-weight:600; line-height:1.2}
.q-top .by span{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em;
  color:var(--text-muted); text-transform:uppercase}

/* ================= language switch ================= */
.langsw{display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 12px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-decoration:none;
  color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  transition:color 180ms var(--ease), border-color 180ms var(--ease)}
.langsw:hover{color:var(--action); border-color:var(--action)}
.ov .langsw{border-color:rgba(255,255,255,.3); color:#fff}

/* ================= contact page ================= */
.contactgrid{display:grid; grid-template-columns:1fr 1.1fr; gap:var(--s-12); align-items:start}
.contactcol h2{font-size:var(--step-2); margin-bottom:var(--s-3)}
.contactlist{display:flex; flex-direction:column; gap:1px; margin-top:var(--s-6);
  background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
.contactrow{display:grid; gap:2px; padding:var(--s-5); background:var(--surface-raised);
  text-decoration:none; color:var(--text); transition:background 180ms var(--ease)}
.contactrow:hover{background:var(--surface)}
.cr-k{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-subtle)}
.cr-v{font-size:1.02rem; font-weight:600}
.cr-n{font-size:.85rem; color:var(--text-muted)}

.cform{background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--s-8); display:flex; flex-direction:column; gap:var(--s-4)}
.cform h2{margin-bottom:var(--s-1)}
.frow{display:flex; flex-direction:column; gap:6px}
.frow2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4)}
.cform label{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted)}
.cform input,.cform select,.cform textarea{
  font-family:inherit; font-size:.98rem; color:var(--text); background:var(--bg);
  border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:11px 12px; width:100%;
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease)}
.cform textarea{resize:vertical; min-height:110px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none; border-color:var(--action); box-shadow:0 0 0 3px var(--brand-quiet)}
.cform input:user-invalid,.cform textarea:user-invalid{border-color:#B4472F}
.cform .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.cform .btn{align-self:flex-start; margin-top:var(--s-2)}
.cform .btn[disabled]{opacity:.55; pointer-events:none}
.fstatus{font-size:.9rem; min-height:1.2em; margin:0}
.fstatus.ok{color:var(--action)}
.fstatus.err{color:#B4472F}
@media (max-width:900px){
  .contactgrid{grid-template-columns:1fr; gap:var(--s-8)}
  .cform{padding:var(--s-6)}
}
@media (max-width:480px){
  .frow2{grid-template-columns:1fr}
}

/* short hero for legal and contact pages */
.phero.phero-short{min-height:clamp(320px, 42vh, 460px)}
.phero.phero-short .phero-in{padding-block:var(--s-16) var(--s-10)}
.phero.phero-short h1{font-size:clamp(2rem, 5vw, 3.2rem)}

/* ================= overlay foot: actions, social, language ================= */
.ov-foot{display:flex; flex-direction:column; gap:var(--s-5)}
.ov-meta{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.12)}
.ov-social{display:flex; gap:4px}
.ov-social a{display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-sm); color:#F3F7F8; text-decoration:none;
  transition:background 180ms var(--ease), color 180ms var(--ease)}
.ov-social a:hover{background:rgba(255,255,255,.12); color:var(--sea-300)}
.ov-social svg{width:18px; height:18px}
.ov-meta .langsw{border-color:rgba(255,255,255,.3); color:#fff; flex:0 0 auto}
.ov-meta .langsw:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}

/* the list must keep its room even when the foot grows */
.ov nav{flex:1 1 auto; min-height:0; display:flex; align-items:center; overflow-y:auto}
.ov-foot{flex:0 0 auto}

/* ================= animated in-page scrolling ================= */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr, 72px) + 16px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* the browser's own furniture follows the theme, so the switch is unmistakable */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){color-scheme:dark} }
:root[data-theme="light"]{color-scheme:light}
body{transition:background-color 200ms var(--ease), color 200ms var(--ease)}

/* ================= mobile: let the departures rail peek above the fold ==== */
@media (max-width:1000px){
  /* a full-height hero buries the next departure. Leave a sliver showing so
     the visitor knows there is something under it. */
  .hero{min-height:84svh}
  .track{height:calc(84svh - var(--hdr))}

  /* and make the rail compact instead of one tall stacked column */
  .rail-in{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-5);
    align-items:start; padding-block:var(--s-4);
  }
  .rail .cb{min-width:0}
  .rail .cb span{font-size:.6rem}
  .rail .cb b{font-size:.95rem; line-height:1.25}
  .rail .cb-cta{grid-column:1 / -1; margin-top:2px}
  .rail .cb-cta .btn{width:100%; justify-content:center}
}
@media (max-width:1000px) and (orientation:landscape){
  .hero{min-height:100svh}
  .track{height:calc(100svh - var(--hdr))}
}

/* ================= overlay nav v4: follows the theme, nothing clipped ==== */
:root{
  --ov-bg:rgba(251,249,246,.94);
  --ov-ink:var(--ink-900);
  --ov-line:rgba(15,30,38,.12);
  --ov-dim:rgba(15,30,38,.45);
}
:root[data-theme="dark"]{
  --ov-bg:rgba(12,24,30,.90);
  --ov-ink:#F3F7F8;
  --ov-line:rgba(255,255,255,.13);
  --ov-dim:rgba(255,255,255,.45);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ov-bg:rgba(12,24,30,.90);
    --ov-ink:#F3F7F8;
    --ov-line:rgba(255,255,255,.13);
    --ov-dim:rgba(255,255,255,.45);
  }
  :root[data-theme="light"]{
    --ov-bg:rgba(251,249,246,.94);
    --ov-ink:var(--ink-900);
    --ov-line:rgba(15,30,38,.12);
    --ov-dim:rgba(15,30,38,.45);
  }
}

.ov-bg{background:var(--ov-bg)}
.ov-in{color:var(--ov-ink)}

/* top: logo on the left, close on the right, with room beneath it */
.ov-top{height:auto; padding-block:14px 0; margin-bottom:var(--s-5)}
.ov-logo{height:48px; width:auto; background:none; padding:0; filter:none}
:root[data-theme="dark"] .ov-logo{
  background:#FBF9F6; padding:5px 9px; border-radius:var(--r-sm); box-sizing:content-box}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ov-logo{
    background:#FBF9F6; padding:5px 9px; border-radius:var(--r-sm); box-sizing:content-box}
  :root[data-theme="light"] .ov-logo{background:none; padding:0}
}
.burger.is-open{border-color:var(--ov-line); color:var(--ov-ink)}

/* the list scrolls on its own and never sits under the buttons */
.ov nav{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:block; padding-block:var(--s-2) var(--s-6);
}
.ov-list li{border-top:1px solid var(--ov-line)}
.ov-list li:last-child{border-bottom:1px solid var(--ov-line)}
.ov-list a{color:var(--ov-ink)}
.ov-list a:hover,.ov-list a:focus-visible{color:var(--action)}
.ov-n,.ov-d{color:var(--ov-dim); opacity:1}

/* foot sits on its own band so the list visibly ends above it */
.ov-foot{
  flex:0 0 auto; padding-top:var(--s-5); border-top:1px solid var(--ov-line);
  background:var(--ov-bg); margin-top:auto;
}
.ov-actions .btn-outline{border-color:var(--border-strong); color:var(--text)}
.ov-actions .btn-outline:hover{background:var(--brand-quiet); border-color:var(--action); color:var(--action)}
.ov-meta{border-top:1px solid var(--ov-line)}
.ov-social a{color:var(--ov-ink)}
.ov-social a:hover{background:var(--brand-quiet); color:var(--action)}
.ov-meta .langsw{border-color:var(--ov-line); color:var(--ov-ink)}
.ov-meta .langsw:hover{background:var(--brand-quiet); border-color:var(--action); color:var(--action)}

@media (max-height:720px){
  .ov-t{font-size:clamp(1.5rem, 6.5vw, 2.2rem)}
  .ov-list a{padding-block:11px}
  .ov-logo{height:40px}
}

/* ================= overlay logo: original on light, reversed on dark ===== */
.ov-logo{height:48px; width:auto; background:none; padding:0; filter:none}
.ov-logo-dark{display:none}
:root[data-theme="dark"] .ov-logo-light{display:none}
:root[data-theme="dark"] .ov-logo-dark{display:block; background:none; padding:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ov-logo-light{display:none}
  :root:not([data-theme="light"]) .ov-logo-dark{display:block; background:none; padding:0}
  :root[data-theme="light"] .ov-logo-light{display:block}
  :root[data-theme="light"] .ov-logo-dark{display:none}
}
@media (max-height:720px){ .ov-logo{height:40px} }

/* ===== fix 17 Sep 2026: logo sem sombra, 4a coluna do rodape legivel ===== */
.brandlink img,
.hdr.solid .brandlink img,
.ft .logo{filter:none}

/* next departures: was near-white text on the cream footer, invisible in light mode */
.ft .next a{color:var(--text); border-bottom-color:var(--border)}
.ft .next a:last-child{border-bottom:0}
.ft .nx-d{color:var(--text); opacity:1}
.ft .nx-b{color:var(--text-subtle); opacity:1}
.ft .nx-s{color:var(--text-muted); opacity:1}
.ft .nx-s.low{color:var(--accent-text); opacity:1}
.ft .next a:hover .nx-d{color:var(--action)}

/* The header and footer carry the ORIGINAL lockup in both themes.
   Do not substitute it with content:url() here: the only dark surface that
   needs the reverse lockup is the overlay menu, and that one swaps its own
   <img> by class (.ov-logo-light / .ov-logo-dark). */

/* contact page without the form: one column, not half a grid */
.contactgrid.one{grid-template-columns:minmax(0,640px)}
@media (max-width:900px){.contactgrid.one{grid-template-columns:1fr}}


/* ================= cookie consent ======================================= */
.cc{position:fixed; inset:auto 0 0 0; z-index:300; padding:var(--s-4);
  display:flex; justify-content:center; pointer-events:none}
.cc[hidden]{display:none}
.cc-card{pointer-events:auto; width:min(720px,100%); background:var(--surface-raised);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:var(--s-5) var(--s-6); display:flex; flex-direction:column; gap:var(--s-4);
  animation:cc-in var(--t-base) var(--ease) both}
@keyframes cc-in{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.cc-card{animation:none}}
.cc-t{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-subtle)}
.cc-card p{margin:0; font-size:.92rem; line-height:1.55; color:var(--text-muted)}
.cc-card p a{color:var(--action); text-underline-offset:2px}
.cc-btns{display:flex; gap:var(--s-3); flex-wrap:wrap}
.cc-btns .btn{flex:1 1 auto; min-width:150px}
.cc-link{background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.cc-link:hover{color:var(--action)}
@media (max-width:560px){
  .cc{padding:var(--s-3)}
  .cc-card{padding:var(--s-4); gap:var(--s-3)}
  .cc-btns .btn{flex:1 1 100%}
}