: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}
/* the last footer line is one line: one size, one typeface, all the way across.
   .ft a sets .92rem for the link columns, which made these links outgrow the text. */
.ft-base a{font-size:inherit}
.ft-base .powered{margin-left:auto}
.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 */
/* A legal hero is short, so the text covers most of it and the standard hero
   gradient, which is strongest at the very bottom, leaves the eyebrow sitting on
   bare photograph. These get a flat scrim instead, dark all the way up.

   Without a photograph the same hero is dark text on the surface colour. Those
   two treatments must never mix: dark text over a bright picture is what made
   these three pages unreadable, and the :not(:has(.media)) is what keeps them
   apart. */
.phero.legal{min-height:auto; padding-block:calc(var(--hdr) + var(--s-10)) var(--s-10)}
.phero.legal h1{font-size:var(--step-5); max-width:20ch}
.phero.legal .media::after{background:linear-gradient(to top,
  rgba(15,30,38,.88) 0%, rgba(15,30,38,.66) 55%, rgba(15,30,38,.54) 100%)}

.phero.legal:not(:has(.media)){background:var(--surface)}
.phero.legal:not(:has(.media)) .phero-in{color:var(--text)}
.phero.legal:not(:has(.media)) .kicker{color:var(--text-subtle)}
.phero.legal:not(:has(.media)) h1{text-shadow:none}
.phero.legal:not(:has(.media)) .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 sets display:grid, which beats the hidden attribute, so say it outright. */
.trip[hidden]{display:none}
.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)}
/* At sea right now: the boat's own colour, solid, with a slow pulse on the dot. */
.badge.b-live{background:var(--sea-700); color:#fff; border-color:var(--sea-700)}
.badge.b-live::before{animation:livepulse 1.8s ease-in-out infinite}
@keyframes livepulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.badge.b-live::before{animation:none}}
.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}
/* the cookie control sits in the footer's legal row, so it reads as one of
   those links and not as a button dropped among them: same size, same colour,
   same hover. The whole row is now the row's own .8rem, links included. */
.cc-link{background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:inherit; line-height:inherit;
  color:var(--text-muted); text-decoration:none}
.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%}
}

/* ================= hero: grow with its text instead of clipping it ==== */
/* The track had a fixed height and the text sits at the bottom of each slide,
   so on a short phone, or with the longer Portuguese copy, the top of the text
   ran under the header and was cut off. A minimum height keeps the same look
   on a tall screen and lets the slides grow when the words need the room. */
.track{height:auto; min-height:calc(100svh - var(--hdr))}
.slide{padding-top:var(--s-8)}
@media (max-width:1000px){ .track{min-height:calc(84svh - var(--hdr))} }
@media (max-width:1000px) and (orientation:landscape){ .track{min-height:calc(100svh - var(--hdr))} }

/* ================= footer social icons: follow the text colour ========= */
/* The paths carry no fill, so they drew black in both themes. */
.social svg{fill:currentColor}
:root[data-theme="dark"] .social a{color:#fff}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .social a{color:#fff} }