/* ============================================================
   Ocean Adventures Hawaii — shared site styles
   Shell (tokens, topbar, header/nav, footer) is identical to the
   homepage (oah-homepage-v4.html). Homepage-only component styles are
   retained so this sheet can serve the homepage too. Tour-page styles
   are appended at the bottom.
   ============================================================ */
:root{
  --navy:#081f38; --navy-2:#0c2b4d; --mid:#0e4a7e; --ocean:#0d74c6; --ocean-deep:#0a5a99;
  --sky:#e6f3fb; --sky-2:#d3eaf8; --foam:#f7fbfe; --ink:#22384e;
  --gold:#d9a441; --gold-soft:#f3d9a4; --line:#c9dfef; --radius:14px;
  --sticky-offset:132px;
}

/* ---------- self-hosted web fonts (no Google Fonts) ---------- */
@font-face{
  font-family:'DM Serif Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/dm-serif-display-400.woff2') format('woff2');
}
@font-face{
  font-family:'DM Serif Display';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/dm-serif-display-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/public-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/public-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/public-sans-600.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/public-sans-700.woff2') format('woff2');
}

*{margin:0;padding:0;box-sizing:border-box}
/* sitewide horizontal-overflow safety net — clip (not hidden) so position:sticky header keeps working */
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{font-family:'Public Sans',system-ui,sans-serif;color:var(--ink);background:var(--foam);line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--ocean)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3,.serif{font-family:'DM Serif Display',Georgia,serif}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ocean)}
/* ONE button model. Primary = solid, NO border (a transparent border over a
   solid fill left a faint compositing seam at the pill's curved ends). Outline
   variants get their ring from inset box-shadow, which doesn't change layout —
   so every button is the same height with zero border seam. */
.btn{display:inline-block;background:var(--ocean);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:14.5px 26px;border:0;border-radius:999px;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,box-shadow .2s}
.btn:hover{background:var(--ocean-deep)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.quiet{background:var(--navy)}
.btn.quiet:hover{background:var(--navy-2)}
.btn.outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--navy);color:var(--navy)}
.btn.outline:hover{background:var(--navy);color:#fff}

/* ---------- notification bar ---------- */
.topbar{background:var(--ocean-deep);color:#eaf5fd;font-size:13px;line-height:1.5;text-align:center;padding:8px 24px;position:sticky;top:0;z-index:60}
.topbar a{color:#fff;text-decoration:underline;font-weight:600}
.topbar a:hover{color:#ffd98a}
.topbar .sep{opacity:.55;margin:0 8px}
.topbar .short{display:none}
@media(max-width:760px){.topbar .full{display:none}.topbar .short{display:inline}}

/* ---------- header (transparent until scrolled; solid on subpages) ---------- */
header{position:sticky;top:36px;z-index:50;background:transparent;transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease}
header.scrolled,body.subpage:not(.has-hero) header{background:rgba(8,31,56,.94);backdrop-filter:blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.28)}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;height:120px;transition:height .3s ease}
header.scrolled .nav,body.subpage:not(.has-hero) .nav{height:88px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{height:96px;width:auto;display:block;transition:height .3s ease}
header.scrolled .brand-logo,body.subpage:not(.has-hero) .brand-logo{height:60px}
/* primary menu */
.menu{display:flex;align-items:center;gap:24px;justify-self:center}
.menu a{color:#cfe6f7;text-decoration:none;font-size:16px;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:color .2s}
.menu a:hover,.menu a:focus-visible{color:#fff}
.nav>.btn.book{color:#fff;justify-self:end}
.has-sub{position:relative;display:flex;align-items:center;gap:2px}
.has-sub > a{display:inline-flex;align-items:center}
.subtoggle{background:none;border:0;cursor:pointer;color:#cfe6f7;display:inline-flex;align-items:center;padding:6px}
.subtoggle .chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.has-sub:hover .subtoggle,.has-sub:focus-within .subtoggle{color:#fff}
.submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:255px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(8,31,56,.22);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.has-sub:hover .submenu,.has-sub:focus-within .submenu,.has-sub.open .submenu{opacity:1;visibility:visible;transform:none}
.has-sub:hover .chev,.has-sub:focus-within .chev,.has-sub.open .chev{transform:rotate(180deg)}
.submenu a{color:var(--navy);font-size:14px;font-weight:500;padding:11px 14px;border-radius:8px;white-space:nowrap}
.submenu a:hover,.submenu a:focus-visible{background:var(--sky);color:var(--navy)}
.book{padding:10px 22px;font-size:15px}
/* hamburger */
.hamburger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:10px;margin-left:6px;z-index:70}
.hamburger span{position:relative;display:block;height:2px;width:24px;background:#fff;border-radius:2px;transition:background .2s}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;display:block;height:2px;width:24px;background:#fff;border-radius:2px;transition:transform .3s}
.hamburger span::before{top:-7px}.hamburger span::after{top:7px}
body.nav-open .hamburger span{background:transparent}
body.nav-open .hamburger span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .hamburger span::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  .hamburger{display:block}
  .nav{display:flex;gap:14px}
  .brand{margin-right:auto}
  .nav>.btn.book{font-size:14px;padding:8px 15px;z-index:70}
  /* full-screen drawer: justify-self:stretch + width:100% override the desktop grid's justify-self:center
     (which was collapsing the fixed panel to content width ~155px and leaving it peeking on-screen).
     z-index stays BELOW the header (50) so the header's hamburger-turned-X remains visible/clickable. */
  .menu{position:fixed;inset:0;justify-self:stretch;width:100%;z-index:40;background:var(--navy);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:112px 26px 34px;transform:translateX(100%);transition:transform .32s ease;overflow-y:auto}
  body.nav-open .menu{transform:none}
  body.nav-open{overflow:hidden}
  body.nav-open .mobile-book-bar{transform:translateY(120%)}
  .menu > a{color:#eaf3fb;font-size:17px;padding:15px 4px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}
  .has-sub{flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}
  .has-sub > a{flex:1;color:#eaf3fb;font-size:17px;padding:15px 4px;min-height:48px}
  .subtoggle{color:#eaf3fb;min-width:48px;min-height:48px;justify-content:center}
  .subtoggle .chev{width:16px;height:16px}
  .submenu{position:static;opacity:1;visibility:hidden;transform:none;display:none;flex-basis:100%;box-shadow:none;border:0;background:transparent;padding:0 0 10px 12px;min-width:0}
  .has-sub.open .submenu{display:flex;visibility:visible}
  .submenu a{color:#bcd7ee;padding:13px 6px;min-height:46px;display:flex;align-items:center}
  .submenu a:hover{background:rgba(255,255,255,.06);color:#fff}
  /* book button lives in the top bar (three-zone header), not inside the panel */
}

/* ---------- video hero (homepage) ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;margin-top:-120px}
.hero .media-bg{position:absolute;inset:0;overflow:hidden}
.hero .media-bg .poster,.hero .media-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .media-bg .poster{z-index:0}
.hero .media-bg video{z-index:1}
.hero .media-bg::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(8,31,56,.55) 0%,rgba(8,31,56,.22) 45%,rgba(8,31,56,.80) 100%),
  linear-gradient(90deg,rgba(8,31,56,.55) 0%,rgba(8,31,56,0) 55%)}
/* video plays at ALL viewport sizes; only hidden as an accessibility fallback */
@media(prefers-reduced-motion:reduce){.hero .media-bg video{display:none}}
.hero .wrap{position:relative;z-index:3;padding:170px 24px 130px}
.hero .pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:26px}
.hero h1{font-size:clamp(38px,6vw,62px);font-weight:400;line-height:1.08;max-width:12ch}
.hero h1 em{font-style:italic;color:#6cc4f5}
.hero p{max-width:52ch;margin:22px 0 34px;font-size:18px;color:#d9ecfa}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- trust bar (no-wrap, gold accents) ---------- */
.trust{background:linear-gradient(180deg,#0d3055,#0c2b4d);border-top:1px solid var(--gold);border-bottom:1px solid rgba(255,255,255,.08)}
.trust ul{list-style:none;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:0;max-width:1320px;margin:0 auto;padding:15px 24px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trust ul::-webkit-scrollbar{display:none}
.trust li{display:flex;align-items:center;gap:8px;color:#cfe6f7;font-size:13.5px;font-weight:500;letter-spacing:.02em;white-space:nowrap;padding:2px 15px}
.trust li:first-child{padding-left:0}
.trust li:not(:first-child){border-left:1px solid rgba(255,255,255,.14)}
.trust li svg{flex:none;width:20px;height:20px;stroke:#d9a441;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:9px}
.trust a:hover{text-decoration:underline}
.trust .rating svg{fill:#d9a441;stroke:none}
.trust .rating .score{color:#fff;font-weight:600}
.trust .rating .count{color:#cfe6f7}
/* MOBILE (≤900px): centered vertical stack, no separators (replaces horizontal scroll) */
@media(max-width:900px){
  .trust ul{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;overflow-x:visible;row-gap:10px;padding:16px 18px}
  .trust li{border:0;padding:0;justify-content:center;text-align:center;white-space:normal;gap:8px}
  .trust li:first-child{padding-left:0}
  .trust li:not(:first-child){border-left:0}
  .trust li::before,.trust li::after{content:none}
  .trust li svg{width:18px;height:18px}
}
/* active nav item */
.menu a[aria-current="page"]{color:#fff;font-weight:600;box-shadow:0 2px 0 var(--gold)}

/* ---------- intro copy ---------- */
.intro{padding:82px 0 22px;text-align:center}
.intro .col{max-width:760px;margin:0 auto}
.intro h2{font-size:clamp(28px,3.8vw,40px);font-weight:400;color:var(--navy);margin:8px 0 20px}
.intro p{color:#44607c;margin-bottom:18px;font-size:16.5px}

/* ---------- fleet / cards ---------- */
.fleet{padding:56px 0 70px;background:linear-gradient(180deg,var(--foam),var(--sky) 220px,var(--foam))}
.fleet .head{text-align:center;max-width:640px;margin:0 auto 46px}
.fleet h2{font-size:clamp(30px,4vw,44px);font-weight:400;color:var(--navy);margin-top:10px}
.fleet h2 em{font-style:italic;color:var(--ocean)}
.fleet .head p{margin-top:14px;color:#4a6b80}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(8,31,56,.05)}
.card .media{position:relative;aspect-ratio:16/10;background:var(--sky-2);overflow:hidden}
.card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .media .tag{position:absolute;top:12px;left:12px;z-index:2;background:rgba(8,31,56,.85);color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:6px}
.card .media .price{position:absolute;top:12px;right:12px;z-index:2;background:var(--ocean);color:#fff;font-weight:700;font-size:14px;padding:6px 12px;border-radius:8px}
.card .media .price.tbd{background:var(--gold);color:var(--navy);font-size:12px;letter-spacing:.02em}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:22px;font-weight:400;color:var(--navy)}
.card .desc{font-size:14.5px;color:#44607c;margin:10px 0 18px;flex:1}
.specs{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:18px}
.specs div b{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7d97ae;font-weight:700;margin-bottom:2px}
.specs div{font-size:13px;color:var(--ink);font-weight:600}
.card .btns{display:flex;gap:10px;flex-wrap:wrap}
.card .btns .btn{flex:1 1 120px;text-align:center;padding:11px 8px;font-size:14px}

/* ---------- feature sections (homepage) ---------- */
.feature{padding:66px 0}
.feature .row{display:grid;grid-template-columns:55fr 45fr;align-items:stretch;max-width:1180px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px rgba(8,31,56,.05)}
.feature .media{position:relative;min-height:430px;overflow:hidden}
.feature .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature.img-right .media{order:2}
.slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:26px;color:#3f6a8e;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;line-height:1.7;
  background:repeating-linear-gradient(45deg,var(--sky-2) 0 22px,#c2e2f6 22px 44px)}
.feature .copy{padding:52px 50px;display:flex;flex-direction:column;justify-content:center}
.feature h2{font-size:clamp(28px,3.4vw,38px);font-weight:400;color:var(--navy);margin:8px 0 16px;line-height:1.15}
.feature .copy p{color:#44607c;margin-bottom:14px;font-size:15.5px}
.feature .specrow{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 24px;color:var(--navy);font-weight:600;font-size:13.5px}
.feature .specrow span:not(:last-child)::after{content:"·";margin-left:14px;color:var(--line)}
.feature .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.feature .note{margin-top:16px;font-size:13.5px;color:#5c7a92}
.feature .textlink{font-weight:600;color:var(--ocean);text-decoration:none}
.feature .textlink:hover{text-decoration:underline}
.kona-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 26px}
.kona-grid div{background:var(--sky);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.4}
@media(max-width:820px){
  .feature .row{grid-template-columns:1fr}
  .feature .media{order:0;min-height:280px}
  .feature.img-right .media{order:0}
  .feature .copy{padding:38px 30px}
  .kona-grid{grid-template-columns:1fr}
}

/* ---------- navy band ---------- */
.why{background:var(--navy);color:#fff;padding:90px 0}
.why .head{max-width:680px;margin:0 auto 50px;text-align:center}
.why h2{font-size:clamp(28px,3.6vw,40px);font-weight:400;line-height:1.2}
.why h2 em{font-style:italic;color:#6cc4f5}
.why .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.why .col{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:28px}
.why .col h3{font-size:19px;font-weight:400;margin-bottom:10px;color:#bfe2f8}
.why .col p{font-size:14.5px;color:#c4d9ea}

/* ---------- whale seasonal strip ---------- */
.whale-strip{background:var(--navy-2);color:#cfe6f7;padding:20px 24px;text-align:center;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:14.5px}
.whale-strip svg{width:30px;height:30px;stroke:#6cc4f5;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.whale-strip a{color:#6cc4f5;font-weight:600;text-decoration:none;white-space:nowrap}
.whale-strip a:hover{color:#fff;text-decoration:underline}

/* ---------- memorial (full-width) ---------- */
.memorial{background:var(--sky)}
.memorial .row{display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1240px;margin:0 auto}
.memorial .copy{padding:88px 64px}
.memorial h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:clamp(28px,3.6vw,40px);color:var(--navy);margin:10px 0 18px}
.memorial p{max-width:52ch;margin-bottom:16px;color:#416080;font-size:15.5px}
.memorial .cta-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:10px}
.memorial .calllink{font-weight:600;color:var(--ocean-deep);text-decoration:none}
.memorial .calllink:hover{text-decoration:underline}
.memorial .media{position:relative;min-height:460px;align-self:stretch}
@media(max-width:820px){.memorial .row{grid-template-columns:1fr}.memorial .copy{padding:56px 30px}.memorial .media{min-height:300px}}

/* ---------- faq ---------- */
.faq{padding:96px 0 100px}
.faq .head{text-align:center;margin-bottom:40px}
.faq h2{font-size:clamp(28px,3.6vw,40px);font-weight:400;color:var(--navy)}
.faq .list{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;align-items:start}
@media(max-width:820px){.faq .list{grid-template-columns:1fr;max-width:760px}}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px}
details summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::after{content:"+";font-size:22px;color:var(--ocean);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin-top:12px;font-size:14.5px;color:#44607c}

/* ---------- subpage stub ---------- */
.stub-main{max-width:1180px;margin:0 auto;padding:150px 24px 130px;min-height:62vh}
.stub-main h1{font-size:clamp(34px,5vw,52px);font-weight:400;color:var(--navy)}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#c4d9ea;padding:70px 0 34px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:50px}
footer h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
footer p, footer li{font-size:14.5px;line-height:1.8}
footer ul{list-style:none}
footer a{color:#9fc9e8;text-decoration:none}
footer a:hover{color:#fff}
.fbrand{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-family:'DM Serif Display',serif;font-size:22px}
.fbrand em{color:#6cc4f5;font-style:italic}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7fa3c2}
@media(max-width:820px){.fgrid{grid-template-columns:1fr}}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   TOUR PAGE PATTERN (shared by every tour subpage)
   ============================================================ */
/* tour hero */
.tour-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;min-height:460px;display:flex;align-items:flex-end}
.tour-hero .slot{z-index:0}
.tour-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,31,56,.88) 0%,rgba(8,31,56,.6) 13%,rgba(8,31,56,0) 30%)}
.tour-hero h1,.tour-hero .hero-sub{text-shadow:0 1px 3px rgba(8,31,56,.8),0 2px 22px rgba(8,31,56,.5)}
.tour-hero .inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:52px 24px 48px}
.breadcrumb{font-size:13px;color:#cfe6f7;margin-bottom:16px}
.breadcrumb a{color:#cfe6f7;text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.breadcrumb .sepc{margin:0 8px;color:#6f97b8}
.breadcrumb [aria-current]{color:#fff}
.tour-hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:400;line-height:1.06;white-space:nowrap}
@media(max-width:600px){.tour-hero h1{white-space:normal}}
.tour-hero .hero-sub{font-size:18px;color:#d9ecfa;margin-top:12px;max-width:44ch}
.spec-pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 24px;list-style:none}
.spec-pills li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600}
.tour-hero .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* breadcrumb rendered as the hero pill on tour pages */
.tour-hero .breadcrumb.hero-pill{margin-bottom:20px}
.tour-hero .breadcrumb.hero-pill a,.tour-hero .breadcrumb.hero-pill [aria-current],.tour-hero .breadcrumb.hero-pill .sepc{font-size:inherit;letter-spacing:inherit}

/* two-column body + sticky booking card */
.tour-body{max-width:1180px;margin:0 auto;padding:0 24px}
.tour-layout{display:grid;grid-template-columns:62fr 38fr;gap:48px;align-items:start;padding:58px 0 24px}
.tour-content > section{margin-bottom:44px}
.tour-content h2{font-size:clamp(24px,3vw,32px);font-weight:400;color:var(--navy);margin-bottom:14px}
.tour-content p{color:#3f5a72;margin-bottom:14px;font-size:16px}
.tour-content .lead{font-size:18px;line-height:1.7;color:var(--navy);background:var(--sky);border-left:4px solid var(--ocean);border-radius:0 10px 10px 0;padding:20px 24px;margin-bottom:6px}
.tour-content .textlink{font-weight:600;color:var(--ocean);text-decoration:none}
.tour-content .textlink:hover{text-decoration:underline}
.checklist{list-style:none;display:grid;gap:11px;margin:4px 0}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:#3f5a72;font-size:15.5px}
.checklist li svg{flex:none;width:22px;height:22px;stroke:var(--ocean);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.audience{display:grid;gap:12px}
.audience div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:15px;color:#3f5a72}
.audience b{color:var(--navy)}
.loclist{list-style:none;display:grid;gap:9px;margin:6px 0 16px}
.loclist li{color:#3f5a72;font-size:15px;padding-left:20px;position:relative}
.loclist li::before{content:"•";position:absolute;left:2px;color:var(--ocean)}
.inline-slot{position:relative;min-height:230px;border-radius:12px;overflow:hidden;margin:8px 0 4px}
.inline-slot.right{max-width:62%;margin-left:auto}
@media(max-width:600px){.inline-slot.right{max-width:100%}}

/* booking card */
.booking-col{position:relative}
.booking-card{position:sticky;top:112px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 24px rgba(8,31,56,.08);padding:26px 24px}
.booking-card h2{font-size:22px;font-weight:400;color:var(--navy);margin-bottom:6px}
.booking-card .price-lead{font-family:'Public Sans',sans-serif;font-size:15px;color:#3f5a72;margin-bottom:14px}
.booking-card .price-lead b{font-size:26px;color:var(--navy)}
.booking-card ul{list-style:none;display:grid;gap:9px;margin:4px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.booking-card ul li{font-size:14px;color:#3f5a72;display:flex;justify-content:space-between;gap:12px}
.booking-card ul li b{color:var(--navy);font-weight:600;text-align:right}
.booking-card .kama{font-size:13px;color:var(--ocean-deep);font-weight:600;margin-bottom:16px}
.booking-card .btn{display:block;text-align:center;width:100%;margin-bottom:12px}
.booking-card .call{display:block;text-align:center;font-weight:600;color:var(--navy);text-decoration:none;margin-bottom:14px}
.booking-card .call:hover{text-decoration:underline}
.booking-card .fine{font-size:12px;color:#6f8398;line-height:1.5}

/* related cruises */
.related{background:var(--foam);padding:60px 0;border-top:1px solid var(--line)}
.related .head{text-align:center;margin-bottom:34px}
.related h2{font-size:clamp(26px,3.4vw,36px);font-weight:400;color:var(--navy)}
.related .grid{max-width:1180px;margin:0 auto;padding:0 24px}

/* final CTA band */
.final-cta{background:var(--navy);color:#fff;text-align:center;padding:72px 24px}
.final-cta h2{font-size:clamp(28px,3.6vw,38px);font-weight:400;margin-bottom:10px}
.final-cta p{color:#c4d9ea;margin-bottom:24px}
.final-cta .cta-row{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.final-cta .call{color:#fff;font-weight:600;text-decoration:none}
.final-cta .call:hover{text-decoration:underline}

/* mobile bottom booking bar */
.mobile-book-bar{display:none}
@media(max-width:980px){
  .tour-layout{grid-template-columns:1fr;gap:0;padding-top:34px}
  .booking-col{order:-1;margin-bottom:34px}
  .booking-card{position:static;top:auto}
  .mobile-book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy);color:#fff;align-items:center;justify-content:space-between;gap:14px;padding:11px 18px;box-shadow:0 -4px 18px rgba(0,0,0,.28)}
  .mobile-book-bar .mb-price{font-weight:700;font-size:16px}
  .mobile-book-bar .btn{padding:11px 24px}
  .booking-card{max-width:none}
  body{padding-bottom:64px}
}

/* tour hero real image + inline section images */
.tour-hero .bg{position:absolute;inset:0;z-index:0}
.tour-hero .bg img{width:100%;height:100%;object-fit:cover}
.inline-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tour-content h3{font-size:19px;font-weight:400;color:var(--navy);margin:20px 0 8px;font-family:'DM Serif Display',serif}

/* booking card: constrain width + live calendar embed */
.booking-card{max-width:380px}
.booking-card .fh-calendar{width:100%;margin-bottom:14px}
/* Mobile: the fallback=simple inline calendar dead-ends on date re-selection, so
   ≤980px we hide it and show a Book Now item-link that opens the full FareHarbor
   lightframe (which handles changing dates). Desktop keeps the inline calendar. */
.fh-mobile-book{display:none}
@media(max-width:980px){
  .booking-card .fh-calendar{display:none}
  .booking-card .fh-mobile-book{display:block;width:100%;text-align:center;margin-bottom:12px}
}

/* add-on menu (reusable component) */
.addons{background:#fbf5ea;border:1px solid #ecdcbf;border-radius:16px;padding:30px 28px}
.addons > h2{font-size:clamp(24px,3vw,32px);font-weight:400;color:var(--navy);margin-bottom:8px}
.addons .intro-line{color:#6a5a3f;font-size:15px;margin-bottom:4px}
.addon{background:#fff;border:1px solid #ecdcbf;border-radius:12px;padding:20px 22px;margin-top:16px}
.addon h3{font-size:21px;font-weight:400;color:var(--navy);margin:0 0 8px;font-family:'DM Serif Display',serif}
.addon > p{color:#4a5b6b;font-size:14.5px;margin-bottom:14px}
.addon .tiers{display:grid;gap:10px}
.addon .tier{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--foam)}
.addon .tier .thead{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.addon .tier .tname{font-weight:700;color:var(--navy);font-size:14.5px}
.addon .tier .tprice{font-weight:700;color:var(--ocean-deep);font-size:14.5px;white-space:nowrap}
.addon .tier .tdesc{font-size:13px;color:#5a6b7b;margin-top:3px}

/* contact form (reusable) */
.contact-sec{background:var(--sky);padding:64px 0}
.contact-block{max-width:760px;margin:0 auto;padding:0 24px}
.contact-block h2{font-size:clamp(26px,3.4vw,36px);font-weight:400;color:var(--navy);text-align:center;margin-bottom:6px}
.cform{display:grid;gap:16px;margin-top:20px}
.cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label.fld{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}
.cform input,.cform textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.cform textarea{min-height:130px;resize:vertical}
.cform .consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#47586a;line-height:1.5}
.cform .consent input{width:auto;margin-top:3px;flex:none}
.cform button[disabled]{opacity:.55;cursor:not-allowed}
@media(max-width:600px){.cform .frow{grid-template-columns:1fr}}

/* Gravity Forms REST — site-styled states (no GF/Orbital CSS is loaded) */
.cform select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.cform .hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.cform .field-error{display:block;color:#b3261e;font-size:12.5px;line-height:1.4;margin-top:5px}
.cform .has-error input,.cform .has-error textarea,.cform .has-error select{border-color:#b3261e;background:#fdf6f6}
.cform .form-status{margin:0;font-size:14px;line-height:1.45;border-radius:10px;padding:11px 14px}
.cform .form-status.is-submitting{background:var(--foam);color:var(--navy)}
.cform .form-status.is-success{background:#e7f4ec;color:#1c6b3a;border:1px solid #bfe3cc}
.cform .form-status.is-error{background:#fbeaea;color:#b3261e;border:1px solid #f0c9c6}
.cform[data-state="submitting"] button[type="submit"]{opacity:.6;cursor:progress}

/* Reusable Google Maps embed (Ala Wai Boat Harbor, Slip #64) */
.mapembed{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--sky)}
.mapembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* ===== Option-B hybrid layout: reused homepage band system on tour pages ===== */
html{scroll-padding-top:var(--sticky-offset)}
h2,h3{scroll-margin-top:var(--sticky-offset)}
.tex{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2790%27 height=%2726%27%3E%3Cpath d=%27M0 13 Q22.5 3 45 13 T90 13%27 fill=%27none%27 stroke=%27%23081f38%27 stroke-opacity=%270.035%27 stroke-width=%271%27/%3E%3C/svg%3E")}
.band-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.band-wrap.narrow{max-width:820px}
.btn.outline-light{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.72);color:#fff}
.btn.outline-light:hover{background:rgba(255,255,255,.14)}

.feat{display:grid;grid-template-columns:1fr 1fr;position:relative}
.feat .media{position:relative;min-height:460px;overflow:hidden}
.feat .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* fade slider (welcome aboard / special events feature media) */
.feat .media.slider img{opacity:0;transition:opacity .9s ease}
.feat .media.slider img.is-active{opacity:1}
.feat .media.slider .dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;gap:8px;justify-content:center}
.feat .media.slider .dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(8,31,56,.4);cursor:pointer;transition:background .2s,transform .2s}
.feat .media.slider .dots button.is-active{background:#fff;transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.feat .media.slider img{transition:none}}
.feat.img-right .media{order:2}
.feat .copy{padding:78px clamp(26px,5vw,80px);display:flex;flex-direction:column;justify-content:center;max-width:660px}
.feat.img-right .copy{margin-left:auto}
.feat h2{font-size:clamp(28px,3.4vw,38px);font-weight:400;margin:8px 0 16px;line-height:1.15}
.feat .copy p{margin-bottom:14px;font-size:15.5px}
.feat .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}
.feat .textlink{font-weight:600;text-decoration:none}
.feat .textlink:hover{text-decoration:underline}
.feat .loclist{list-style:none;display:grid;gap:9px;margin:6px 0 16px}
.feat .loclist li{position:relative;padding-left:20px;font-size:15px}
.feat .loclist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--ocean)}
.feat.band-foam{background-color:var(--foam)}
.feat.band-foam h2{color:var(--navy)} .feat.band-foam .copy p{color:#44607c} .feat.band-foam .eyebrow{color:var(--ocean)} .feat.band-foam .textlink{color:var(--ocean)}
.feat.band-sky{background-color:var(--sky)}
.feat.band-sky h2{color:var(--navy)} .feat.band-sky .copy p{color:#416080} .feat.band-sky .eyebrow{color:var(--ocean)} .feat.band-sky .textlink{color:var(--ocean-deep)} .feat.band-sky .loclist li{color:#3f5a72}
.feat.band-navy{background-color:var(--navy);color:#eaf3fb}
.feat.band-navy h2{color:#fff} .feat.band-navy .copy p{color:#c7dcee} .feat.band-navy .eyebrow{color:var(--gold-soft)} .feat.band-navy .textlink{color:#7cc7f5}
@media(max-width:820px){.feat{grid-template-columns:1fr}.feat .media{order:0;min-height:280px}.feat.img-right .media{order:0}.feat .copy{padding:44px 26px;max-width:none;margin:0}}

.addon-band{padding:70px 0}
.faq-band{background-color:var(--foam);padding:80px 0}
.faq-band h2{font-size:clamp(26px,3.4vw,36px);font-weight:400;color:var(--navy);text-align:center;margin-bottom:28px}
.faq-band .faq-list{display:grid;gap:12px}
.closing-band{background-color:var(--sky);padding:78px 0}
.closing-band .eyebrow{color:var(--ocean)}
.closing-band h2{font-size:clamp(26px,3.4vw,36px);font-weight:400;color:var(--navy);margin:8px 0 16px}
.closing-band p{color:#416080;font-size:16.5px}
.pullquote{margin:26px 0 0;padding:22px 26px;background:#fff;border-left:4px solid var(--gold);border-radius:0 12px 12px 0}
.pullquote p{font-family:'DM Serif Display',serif;font-style:italic;font-size:20px;color:var(--navy);margin:0 0 8px;min-height:1.2em}
.pullquote cite{font-style:normal;font-weight:600;color:#5c7a92;font-size:14px}

.price-band{background:var(--navy);color:#fff;text-align:center;padding:60px 24px}
.price-band .eyebrow{color:var(--gold-soft)}
.price-band h2{font-size:clamp(26px,3.4vw,36px);font-weight:400;color:#fff;margin:8px 0 14px}
.price-band .price-line{font-size:18px;color:#dbe9f6;margin-bottom:6px}
.price-band .price-line b{font-family:'DM Serif Display',serif;font-size:30px;color:var(--gold)}
.price-band p{color:#b9cfe4;margin-bottom:22px;max-width:60ch;margin-left:auto;margin-right:auto}
.price-band .btn{background:var(--ocean)}

/* sticky card mechanics (Option B) */
.booking-card{top:var(--sticky-offset);max-height:calc(100vh - var(--sticky-offset) - 24px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding-top:28px}
.booking-card::-webkit-scrollbar{display:none}
@media(max-width:980px){.booking-card{max-height:none;overflow:visible}}

/* floating book pill (desktop only) */
.book-pill{position:fixed;right:24px;bottom:24px;z-index:60;display:none;align-items:center;gap:8px;background:var(--ocean);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px;box-shadow:0 10px 30px rgba(8,31,56,.32);transition:opacity .2s,transform .2s;opacity:0;transform:translateY(8px)}
.book-pill .star{color:var(--gold-soft)}
.book-pill.show{display:inline-flex;opacity:1;transform:none}
.book-pill:hover{background:var(--ocean-deep)}
@media(max-width:980px){.book-pill{display:none!important}}
@media(prefers-reduced-motion:reduce){.book-pill{transition:none;transform:none}}
/* MOBILE STICKY BOOK BAR (≤980px) — desktop hidden; on mobile a fixed bottom price+CTA row.
   Was previously unstyled, so it rendered as an orphan price block below the footer. */
.mobile-book-bar{display:none}
@media(max-width:980px){
  .mobile-book-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(8,31,56,.16);
    padding:11px 18px;padding-bottom:calc(11px + env(safe-area-inset-bottom));
    transform:none;transition:transform .3s ease}
  .mobile-book-bar.tuck{transform:translateY(130%)}
  /* clear space so the fixed bar never covers (and intercepts taps on) the last
     content — notably the FareHarbor calendar's bottom date row */
  body:has(.mobile-book-bar){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .mobile-book-bar .mb-price{font-family:'Public Sans',sans-serif;font-weight:700;font-size:20px;color:var(--navy);white-space:nowrap}
  .mobile-book-bar .btn{flex:0 0 auto;padding:13px 26px;font-size:15px;min-height:48px;display:inline-flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){.mobile-book-bar{transition:none}}
/* FareHarbor lightframe open: get our fixed elements out of its way (set by main.js) */
body.fh-open .mobile-book-bar,body.fh-open .book-pill{display:none!important}


/* ===== Option-B render fixes ===== */
.tour-hero{min-height:80vh;align-items:flex-start}
.tour-hero .bg{position:absolute;inset:0;z-index:0}
.tour-hero .bg img{width:100%;height:100%;object-fit:cover}
.tour-hero::after{background:linear-gradient(180deg,rgba(8,31,56,.88) 0%,rgba(8,31,56,.6) 13%,rgba(8,31,56,0) 30%)}
@media(max-width:760px){.tour-hero{min-height:40vh}}

.zimg{display:block;width:100%;height:auto;border-radius:12px;margin:12px 0 8px}

.addon-band .addons-head{text-align:center;max-width:720px;margin:0 auto 30px}
.addon-band .eyebrow{color:var(--ocean)}
.addon-band h2{font-size:clamp(26px,3.4vw,36px);font-weight:400;color:var(--navy);margin:8px 0 8px}
.addon-band .intro-line{color:#5c6f83;font-size:15.5px}
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1180px;margin:0 auto}
.addon{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:0 1px 2px rgba(8,31,56,.05)}
.addon h3{font-size:20px;font-weight:400;color:var(--navy);margin-bottom:8px}
.addon > p{color:#4a6178;font-size:14px;margin-bottom:14px}
.tiers{display:grid;gap:10px}
.tier{border-top:1px solid var(--line);padding-top:10px}
.tier .thead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tier .tname{font-weight:600;color:var(--navy);font-size:14px}
.tier .tprice{font-weight:700;color:var(--ocean-deep);font-size:16px;font-family:'DM Serif Display',serif}
.tier .tdesc{font-size:12.5px;color:#6a8097;margin-top:4px;line-height:1.5}
@media(max-width:900px){.addon-grid{grid-template-columns:1fr}}

.loc-band{background-color:var(--sky);padding:76px 0}
.loc-band .eyebrow{color:var(--ocean)}
.loc-band h2{font-size:clamp(26px,3.4vw,36px);font-weight:400;color:var(--navy);margin:8px 0 14px}
.loc-band p{color:#416080;font-size:16px;margin-bottom:14px}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;max-width:1180px;margin:0 auto}
.loc-band .textlink{font-weight:600;color:var(--ocean-deep);text-decoration:none}
.loc-band .textlink:hover{text-decoration:underline}
@media(max-width:820px){.loc-grid{grid-template-columns:1fr;gap:20px}}

.faq-band .faq-list{max-width:760px;margin:0 auto}
.pullquote p{font-size:24px;line-height:1.35}
.closing-band .band-wrap{max-width:820px}

.related .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1100px){.related .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.related .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.related .grid{grid-template-columns:1fr}}

.contact-block{max-width:680px;margin:0 auto;padding:0 24px}

/* sticky fix: let the booking column stretch to the zone height so the card travels the whole zone */
.booking-col{align-self:stretch}
@media(max-width:980px){.booking-col{align-self:auto}}

/* tour-hero pages: transparent large-logo header like the homepage */
body.has-hero .tour-hero{margin-top:-120px}
body.has-hero .tour-hero .inner{padding-top:232px}

/* hero text legibility over lightened overlays */
.pagehead h1,.pagehead .hero-sub,.blog-head h1,.blog-head .hero-sub,.gp-head h1,.gp-head .hero-sub{text-shadow:0 2px 4px rgba(8,31,56,.5),0 2px 26px rgba(8,31,56,.7)}

/* ============================================================
   SHARED HERO ANATOMY — pill · sub · ctas (applied on every hero)
   ============================================================ */
.hero-pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;text-decoration:none;margin-bottom:18px;white-space:normal}
.hero-pill a{color:#cfe6f7;text-decoration:none}
.hero-pill a:hover{color:#fff}
.hero-sub{font-size:18px;line-height:1.5;color:#d9ecfa;max-width:60ch;margin-top:14px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
/* pill legibility over bright dark-hero images */
.tour-hero .hero-pill,.pagehead .hero-pill,.blog-head .hero-pill,.gp-head .hero-pill{text-shadow:0 1px 3px rgba(8,31,56,.55)}
/* blog-post light-background header context */
.article-wrap .hero-pill{background:var(--sky);border-color:var(--line);color:var(--ocean-deep)}
.article-wrap .hero-sub{color:#44607c;max-width:64ch;margin:12px 0 22px;text-shadow:none}

/* blog-post trust bar: contained under the article title band, items wrap */
.article-wrap .trust{border-radius:12px;margin:20px 0 8px}
.article-wrap .trust ul{flex-wrap:wrap;justify-content:center;row-gap:4px;padding:12px 18px}
.article-wrap .trust li{white-space:nowrap}

/* larger-group CTA (added 2026-07-21) */
.group-cta{margin:14px 0 0;padding:12px 14px;background:var(--sky);border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:#44607c;text-align:center;line-height:1.5}
.group-cta a{color:var(--ocean);font-weight:600;text-decoration:none}
.group-cta a:hover{text-decoration:underline}