/* Ocean Jet Ski v4 - page styles. Pass 0: moved verbatim out of the Claude Design export. */
html{scroll-behavior:auto;scrollbar-width:none;scroll-padding-top:81px;scroll-padding-bottom:96px;}
  body::-webkit-scrollbar,html::-webkit-scrollbar{width:0;height:0;display:none;}
  body{margin:0;background:#ffffff;font-family:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;color:#111315;-webkit-font-smoothing:antialiased;}
  a{color:#111315;text-decoration:none;} @media (hover: hover){ a:hover{color:#db2433;} }
  ::placeholder{color:#6b7075;}
  @keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
  @keyframes sheetup{from{transform:translateY(100%);}to{transform:translateY(0);}}
  @keyframes heroFade{0%{opacity:0;}5.3%{opacity:1;}25.3%{opacity:1;}30.6%{opacity:0;}100%{opacity:0;}}
  @keyframes kenburns{0%{transform:scale(1.02);}50%{transform:scale(1.09);}100%{transform:scale(1.02);}}
  @keyframes clouddrift{0%{transform:scale(1.08) translateX(-1.2%);}50%{transform:scale(1.08) translateX(1.2%);}100%{transform:scale(1.08) translateX(-1.2%);}}
  :focus-visible{outline:2px solid #111315;outline-offset:2px;border-radius:2px;}
  .motion-ready .arrive{opacity:0;transform:translateY(10px);
    transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1);}
  .motion-ready .arrive.seen{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    .motion-ready .arrive{opacity:1;transform:none;transition:none;}
  }
  .hslide{position:absolute;inset:0;overflow:hidden;}
  .hs-align{position:absolute;inset:0;transform:scale(1);transform-origin:50% 50%;}
  .hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    animation:heroFade 30s linear infinite,kenburns 30s ease-in-out infinite;will-change:opacity,transform;}
  @keyframes kenburnsMobile{0%{transform:scale(1.02);}50%{transform:scale(1.05);}100%{transform:scale(1.02);}}
  /* Below 940 the frame is portrait, so object-position's vertical component is inert on
     these landscape photographs: cover already shows full image height and crops only the
     sides. Real vertical framing needs a static scale on the wrapper. Horizon targets 42%
     of hero height; Z solved per slide from pixel-sampled waterline positions. */
  .hs1 .hs-img{animation-delay:0s,0s;}
  .hs2 .hs-img{animation-delay:6s,6s;}
  .hs3 .hs-img{animation-delay:12s,12s;}
  .hs4 .hs-img{animation-delay:18s,18s;}
  .hs5 .hs-img{animation-delay:24s,24s;}
  @media (max-width:939px){
    .hs-img{animation-name:heroFade,kenburnsMobile;}
    /* Slide 3 is the volcanic coastline. Bringing its waterline to the shared 42% needs a
       2.0x crop, which leaves 340 source pixels across a 390px viewport where a DPR-2 phone
       wants 780. It is also the only slide that is rock rather than sky, so it lurches
       tonally in the sequence. It stays on desktop, where it is framed at 1.0 and looks
       right, and comes out of the phone rotation. Four slides, 7.5s apart, same 30s cycle. */
    .hs3{display:none;}
    .hs2 .hs-img{animation-delay:7.5s,7.5s;}
    .hs4 .hs-img{animation-delay:15s,15s;}
    .hs5 .hs-img{animation-delay:22.5s,22.5s;}
    .hs1 .hs-align{transform:scale(1.098);transform-origin:50% 100%;}
    .hs2 .hs-align{transform:scale(1);transform-origin:50% 50%;}
    .hs3 .hs-align{transform:scale(2);transform-origin:50% 100%;}
    .hs4 .hs-align{transform:scale(1.257);transform-origin:50% 0%;}
    .hs5 .hs-align{transform:scale(1.036);transform-origin:50% 100%;}
  }
  .bookbar{grid-template-columns:1.4fr 1fr 1fr auto;}
  @media (max-width:360px){
    .bookcard{padding-left:14px !important;padding-right:14px !important;}
    .bookcard select{font-size:16px !important;}
  }
  @media (min-width:940px) and (max-width:1179px){
    .bookbar{grid-template-columns:1.6fr 1fr !important;}
    .bookbar > :nth-child(1),.bookbar > :nth-child(2){border-bottom:1px solid #e3ded6 !important;}
    .bookbar > :nth-child(2){border-right:0 !important;}
    .bookbar > :nth-child(4){border-radius:0 0 16px 0 !important;padding:0 28px !important;}
  }
  @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}html{scroll-behavior:auto;}}

/* ---- unbundle helpers: layout and state blocks (were <sc-if> in the Claude Design template) ---- */
.dc-if{display:contents;}
.dc-if[hidden]{display:none;}
.only-desk{display:contents;} .only-mobile{display:none;}
@media (max-width:1023.98px){ .only-desk{display:none;} .only-mobile{display:contents;} }
/* ---- hover rules (were style-hover="..." attributes; !important beats the inline styles).
        Pointer devices only (brief 6.3, phone-first gate 4): on touch a tap must never leave a stuck hover. ---- */
@media (hover: hover){
.hv1:hover{opacity:.9 !important;}
.hv2:hover{opacity:.9 !important;}
.hv3:hover{background:rgba(17,19,21,.04) !important;}
.hv4:hover{opacity:.9 !important;}
.hv5:hover{transform:translateY(-6px) !important;}
.hv6:hover{transform:scale(1.06) !important;}
.hv7:hover{opacity:.9 !important;}
.hv8:hover{background:rgba(17,19,21,.04) !important;}
.hv9:hover{transform:translateY(-6px) !important;}
.hv10:hover{transform:scale(1.06) !important;}
.hv11:hover{opacity:.9 !important;}
.hv12:hover{background:rgba(17,19,21,.04) !important;}
.hv13:hover{transform:translateY(-6px) !important;}
.hv14:hover{transform:scale(1.06) !important;}
.hv15:hover{opacity:.9 !important;}
.hv16:hover{background:rgba(17,19,21,.04) !important;}
.hv17:hover{transform:translateY(-4px) !important;}
.hv18:hover{opacity:.9 !important;}
.hv19:hover{transform:translateY(-4px) !important;}
.hv20:hover{background:rgba(17,19,21,.04) !important;}
.hv21:hover{transform:scale(1.06) !important;}
.hv22:hover{transform:scale(1.06) !important;}
.hv23:hover{transform:scale(1.06) !important;}
.hv24:hover{transform:scale(1.06) !important;}
.hv25:hover{background:rgba(17,19,21,.04) !important;}
.hv26:hover{background:rgba(17,19,21,.04) !important;}
.hv27:hover{background:rgba(17,19,21,.04) !important;}
.hv28:hover{opacity:.9 !important;}
.hv29:hover{opacity:.9 !important;}
.hv30:hover{color:#db2433 !important;}
.hv31:hover{color:#db2433 !important;}
.hv32:hover{color:#db2433 !important;}
.hv33:hover{color:#db2433 !important;}
.hv34:hover{color:#db2433 !important;}
.hv35:hover{color:#db2433 !important;}
}