/* =====================================================================
   Kashi Boat Rides — shared cinematic theme for the static pages
   (ride / ghat / price / contact pages, the plain landing page and the
   policy pages). Loaded after each page's own <style>, so it wins.
   Body classes set in the HTML:  kbc + one of  kbc-tpl | kbc-plain | kbc-legal
   ===================================================================== */
:root{
  --x-bg:#0B0F14; --x-bg2:#10161D; --x-card:rgba(255,255,255,.04); --x-card2:rgba(255,255,255,.07);
  --x-line:rgba(255,255,255,.09); --x-ink:#F5EEE1; --x-mute:#A79F90; --x-dim:#6F695E;
  --x-gold:#F0C46B; --x-gold2:#D9A441; --x-ember:#E0603A;
  --x-ease:cubic-bezier(.22,1,.36,1);
  --x-serif:'Fraunces',Georgia,serif; --x-sans:'Inter','IBM Plex Sans',system-ui,sans-serif;
}
html:has(body.kbc){background:var(--x-bg);scroll-behavior:smooth}
body.kbc{background:var(--x-bg) !important;color:var(--x-ink) !important;font-family:var(--x-sans) !important;-webkit-font-smoothing:antialiased}
body.kbc ::selection{background:rgba(240,196,107,.35)}
body.kbc a{color:inherit}

/* ---------- shared top bar ---------- */
body.kbc .topbar,body.kbc-plain > header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(11,15,20,.78) !important;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--x-line) !important;box-shadow:none !important;color:var(--x-ink) !important;padding:14px max(20px,calc((100vw - 1180px)/2 + 20px)) !important;max-width:none !important;margin:0 !important}
body.kbc .topbar a{color:var(--x-ink) !important}
body.kbc .brand{font:400 21px var(--x-serif) !important;color:var(--x-ink) !important}
body.kbc .navlinks a{color:var(--x-mute) !important;font-size:13.5px;transition:color .2s}
body.kbc .navlinks a:hover{color:var(--x-gold) !important}
body.kbc .nav-cta,body.kbc .topbar .back{background:linear-gradient(180deg,#F5CF7E,#D9A441) !important;color:#15110A !important;border-radius:999px;padding:10px 18px !important;font-weight:700 !important;font-size:13px !important;text-decoration:none}
body.kbc-plain > header strong{font:400 21px var(--x-serif)}
body.kbc-plain > header nav a{color:var(--x-mute);text-decoration:none;font-size:13.5px}
body.kbc-plain > header nav a:hover{color:var(--x-gold)}

/* ---------- eyebrow + headings ---------- */
body.kbc .eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--x-sans) !important;letter-spacing:.16em !important;text-transform:uppercase;color:var(--x-gold) !important}
body.kbc .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
body.kbc h1,body.kbc h2,body.kbc h3{font-family:var(--x-serif) !important;font-weight:400 !important;letter-spacing:-.02em;color:var(--x-ink) !important}

/* ---------- HERO (template pages) ---------- */
body.kbc-tpl .hero{min-height:88vh;min-height:88svh;display:flex;align-items:flex-end;padding:120px max(20px,calc((100vw - 1180px)/2 + 20px)) 90px !important;
  background:radial-gradient(70% 60% at 80% 10%,rgba(240,196,107,.18),transparent 60%),radial-gradient(60% 50% at 10% 90%,rgba(42,157,150,.16),transparent 60%),linear-gradient(180deg,#121A26 0%,var(--x-bg) 100%) !important;color:var(--x-ink) !important;isolation:isolate}
body.kbc-tpl .hero::after{display:none !important}
body.kbc-tpl .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(2px 2px at 12% 72%,#FFE3A3,transparent),radial-gradient(2px 2px at 28% 80%,#FFE3A3,transparent),radial-gradient(1.5px 1.5px at 46% 68%,#FFE3A3,transparent),radial-gradient(2px 2px at 64% 84%,#FFE3A3,transparent),radial-gradient(1.5px 1.5px at 82% 74%,#FFE3A3,transparent),radial-gradient(2px 2px at 92% 88%,#FFE3A3,transparent);
  animation:kbcTwinkle 5s ease-in-out infinite alternate}
@keyframes kbcTwinkle{to{opacity:.9;transform:translateY(-6px)}}
body.kbc-tpl .hero-inner{max-width:1180px !important;width:100%;margin:0 auto}
body.kbc-tpl .hero h1{font-size:clamp(48px,11vw,112px) !important;line-height:.95 !important;letter-spacing:-.035em !important;max-width:13ch !important;margin:18px 0 22px !important;text-wrap:balance}
body.kbc-tpl .hero p{font-size:17px !important;line-height:1.7 !important;color:#D8CFBF !important;max-width:560px !important}
body.kbc .btn{border-radius:999px !important;padding:16px 26px !important;font-weight:700 !important;text-decoration:none;transition:transform .25s var(--x-ease),box-shadow .25s}
body.kbc .btn.primary,body.kbc .cta .btn,body.kbc-plain .cta{background:linear-gradient(180deg,#F5CF7E,#D9A441) !important;color:#15110A !important;box-shadow:0 10px 30px rgba(217,164,65,.28) !important;border:0 !important}
body.kbc .btn.secondary{background:var(--x-card) !important;border:1px solid var(--x-line) !important;color:var(--x-ink) !important}
body.kbc .btn:hover{transform:translateY(-2px)}

/* ---------- MARQUEE (added by kb-cinema.js) ---------- */
.kbc-marquee{overflow:hidden;border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line);padding:20px 0;background:var(--x-bg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kbc-marquee > div{display:flex;align-items:center;gap:28px;width:max-content;animation:kbcMarq 38s linear infinite}
.kbc-marquee span{font:italic 400 clamp(26px,6vw,44px)/1 var(--x-serif);color:var(--x-ink);white-space:nowrap}
.kbc-marquee i{font-style:normal;color:var(--x-gold);font-size:16px}
@keyframes kbcMarq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
body.kbc-tpl .container{max-width:1180px !important;padding:110px 20px 20px !important}
body.kbc-tpl .container[style*="padding-top:0"]{padding-top:40px !important}
body.kbc-tpl .section-head h2{font-size:clamp(34px,8vw,64px) !important;line-height:1.02 !important;margin:12px 0 14px !important;text-wrap:balance}
body.kbc-tpl .section-head p,body.kbc .content,body.kbc .content p{color:var(--x-mute) !important;font-size:16px;line-height:1.8}
body.kbc .content h2{font-size:clamp(28px,6vw,40px) !important;margin:56px 0 12px !important}
body.kbc .cards{gap:14px !important}
body.kbc .card{background:var(--x-card) !important;border:1px solid var(--x-line) !important;border-radius:22px !important;box-shadow:none !important;color:var(--x-ink) !important;transition:border-color .3s,transform .4s var(--x-ease)}
body.kbc .card:hover{border-color:rgba(240,196,107,.4) !important;transform:translateY(-4px)}
body.kbc .card .icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(240,196,107,.12);border:1px solid rgba(240,196,107,.22)}
body.kbc .card h3{font-size:24px !important}
body.kbc .card p{color:var(--x-mute) !important}
body.kbc .highlight{background:radial-gradient(120% 120% at 100% 0%,rgba(240,196,107,.18),transparent 60%),var(--x-bg2) !important;border:1px solid rgba(240,196,107,.2);border-radius:24px !important;box-shadow:none !important}
body.kbc .highlight p{color:#D8CFBF !important}
body.kbc details{background:var(--x-card) !important;border:1px solid var(--x-line) !important;border-radius:18px !important;box-shadow:none !important;padding:20px 22px !important;transition:border-color .3s}
body.kbc details[open]{border-color:rgba(240,196,107,.35) !important}
body.kbc summary{color:var(--x-ink) !important;font:400 20px/1.3 var(--x-serif);list-style:none;display:flex;justify-content:space-between;gap:16px}
body.kbc summary::-webkit-details-marker{display:none}
body.kbc summary::after{content:"+";color:var(--x-gold);font:300 26px/1 var(--x-sans);transition:transform .3s var(--x-ease)}
body.kbc details[open] summary::after{transform:rotate(45deg)}
body.kbc details p{color:var(--x-mute) !important}
body.kbc details a,body.kbc .content a,body.kbc .wrap a{color:var(--x-gold) !important}
body.kbc .related{gap:0 !important;border-top:1px solid var(--x-line);display:block !important}
body.kbc .related a{display:flex !important;align-items:center;justify-content:space-between;background:none !important;border:0 !important;border-bottom:1px solid var(--x-line) !important;border-radius:0 !important;
  padding:20px 4px !important;font:400 clamp(24px,6vw,40px)/1.15 var(--x-serif) !important;color:var(--x-ink) !important;transition:color .3s,padding .4s var(--x-ease)}
body.kbc .related a::after{content:"→";font:400 22px var(--x-sans);color:var(--x-gold);opacity:0;transition:opacity .3s}
body.kbc .related a:hover{color:var(--x-gold) !important;padding-left:14px !important}
body.kbc .related a:hover::after{opacity:1}

/* closing CTA band */
body.kbc-tpl .cta{max-width:1180px !important;margin:110px auto 90px !important;padding:90px 24px !important;border-radius:32px !important;text-align:left !important;position:relative;overflow:hidden;
  background:radial-gradient(60% 80% at 20% 0%,rgba(240,196,107,.25),transparent 65%),radial-gradient(60% 80% at 100% 100%,rgba(224,96,58,.22),transparent 65%),var(--x-bg2) !important;border:1px solid var(--x-line);box-shadow:none !important}
body.kbc-tpl .cta h2{font-size:clamp(44px,11vw,104px) !important;line-height:.95 !important;letter-spacing:-.04em !important;margin:0 0 18px !important;max-width:12ch}
body.kbc-tpl .cta p{color:#D8CFBF !important;max-width:520px;font-size:16px}

/* footer */
body.kbc footer{background:#07090C !important;color:var(--x-mute) !important;border-top:1px solid var(--x-line) !important}
body.kbc footer h3{font-size:22px !important}
body.kbc footer a{color:var(--x-mute) !important}
body.kbc footer a:hover{color:var(--x-gold) !important}
body.kbc .copy{border-top-color:var(--x-line) !important;color:var(--x-dim) !important}

/* ---------- plain landing page ---------- */
body.kbc-plain main{max-width:1000px !important;padding:0 20px 60px !important}
body.kbc-plain main > h1:first-child{font-size:clamp(48px,11vw,104px) !important;line-height:.95 !important;letter-spacing:-.035em;margin:12vh 0 22px;max-width:13ch}
body.kbc-plain main > p{color:var(--x-mute);font-size:16.5px;max-width:640px}
body.kbc-plain main h2{font-size:clamp(32px,7vw,56px) !important;margin:100px 0 20px !important;line-height:1.05}
body.kbc-plain main a:not(.cta){color:var(--x-gold)}
body.kbc-plain .cta{padding:16px 28px !important;border-radius:999px !important;display:inline-block}
body.kbc-plain main ul{color:var(--x-mute);padding-left:20px}
body.kbc-plain footer{max-width:none !important;text-align:center}

/* ---------- policy pages ---------- */
body.kbc-legal .wrap{max-width:760px}
body.kbc-legal .wrap h1{font-size:clamp(40px,9vw,72px) !important;line-height:1 !important;letter-spacing:-.03em;margin:40px 0 12px !important}
body.kbc-legal .wrap h2{font-size:26px !important;margin:44px 0 12px !important}
body.kbc-legal .wrap p,body.kbc-legal .wrap li{color:#CFC6B4 !important;font-size:15px !important;line-height:1.75}
body.kbc-legal .updated{color:var(--x-dim) !important}
body.kbc-legal .note{background:rgba(240,196,107,.08) !important;border:1px solid rgba(240,196,107,.25) !important;color:#EAD9B4 !important;border-radius:16px !important}
body.kbc-legal :is(.policy-card,.contact-card,.hours-card){background:var(--x-card) !important;border:1px solid var(--x-line) !important;border-radius:18px !important;color:var(--x-ink) !important}
body.kbc-legal :is(.policy-row,.hours-row){border-color:var(--x-line) !important;color:#CFC6B4}
body.kbc-legal .contact-card b{color:var(--x-mute) !important}
body.kbc-legal .contact-card :is(a,.val){color:var(--x-ink) !important}
body.kbc-legal footer{background:none !important}

/* ---------- reveal (kb-cinema.js adds .kbc-in) ---------- */
html.kbc-fx [data-kbc]{opacity:0;translate:0 34px;transition:opacity .9s var(--x-ease),translate .9s var(--x-ease);transition-delay:calc(var(--xi,0) * 80ms)}
html.kbc-fx [data-kbc].kbc-in{opacity:1;translate:0 0}
html.kbc-fx .kbc-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--x-ease)}
html.kbc-fx .kbc-mask.kbc-in{clip-path:inset(-20% -5% -25% -5%)}

/* progress line */
#kbcProgress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none;background:linear-gradient(90deg,#D9A441,#F0C46B 60%,#FBF3E4);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px rgba(240,196,107,.6)}

/* ---------- mobile bottom tab bar (added by kb-cinema.js) ---------- */
.kbc-tabbar{display:none}
@media (max-width:767px){
  body.kbc{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important}
  .kbc-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:2px;padding:8px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(11,15,20,.86);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
    border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.07);box-shadow:0 -12px 32px rgba(0,0,0,.35);font-family:var(--x-sans)}
  .kbc-tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border-radius:16px;color:#8C8576 !important;text-decoration:none;position:relative;-webkit-tap-highlight-color:transparent}
  .kbc-tabbar a:active{transform:scale(.93)}
  .kbc-tabbar i{display:flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:15px}
  .kbc-tabbar svg{width:21px;height:21px;stroke-width:1.7}
  .kbc-tabbar span{font-size:11px;font-weight:500;letter-spacing:.03em;line-height:1.1;white-space:nowrap}
  .kbc-tabbar a.on{color:var(--x-gold) !important}
  .kbc-tabbar a.on i{background:rgba(240,196,107,.14)}
  body.kbc .wa-float-btn{bottom:calc(96px + env(safe-area-inset-bottom)) !important}
  body.kbc .topbar .navlinks{display:none}
  body.kbc-plain > header nav{display:none}
}
@media (min-width:768px){
  body.kbc-tpl .container{padding-left:40px !important;padding-right:40px !important}
  body.kbc-tpl .cta{padding:120px 64px !important}
}
@media (prefers-reduced-motion:reduce){
  .kbc-marquee > div,body.kbc-tpl .hero::before{animation:none}
  .kbc-marquee{overflow-x:auto}
}