/* GwadaJetBoat — global styles.
   Fonts: Cormorant Garamond (display serif) + Montserrat (UI) via Google Fonts,
   replacing the base64 webfonts that were embedded in the original bundle. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:#FBF7EE;color:#0c2733;font-family:Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
a{color:inherit;}
::selection{background:#19B1B1;color:#fff;}

/* ---- keyframes (carried over from the original design) ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes ken{from{transform:scale(1.05)}to{transform:scale(1.16)}}
@keyframes dotf{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-18px);opacity:.9}}
@keyframes sheen{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
@keyframes tide{from{transform:translateX(-18px)}to{transform:translateX(18px)}}

/* ---- scroll-reveal: every section's content blocks except the hero ---- */
.section:not(#top) > .reveal,
.section:not(#top) > .container{animation:riseIn both linear;animation-timeline:view();animation-range:entry 0% cover 22%;}

/* ---- WhatsApp floating button ---- */
.wa-fab{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:2000;width:clamp(54px,6vw,62px);height:clamp(54px,6vw,62px);border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:transform .25s ease,box-shadow .25s ease;}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 16px 38px -8px rgba(37,211,102,.7);}

/* ---- generic hover lift used by cards/buttons ---- */
.lift{transition:transform .3s ease,box-shadow .3s ease;}

/* ---- header nav: desktop vs mobile ---- */
.desk-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,42px);}
.desk-cta{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);}
.mobile-ctrls{display:none;align-items:center;gap:14px;}
.nav-link:hover{opacity:1;color:#F4E5C7;}
@media (max-width:899px){
  .desk-nav,.desk-cta{display:none;}
  .mobile-ctrls{display:flex;}
}

/* ================= MOBILE ================= */
@media (max-width:900px){
  /* two-column blocks stack */
  .grid-2{grid-template-columns:1fr !important;}
  /* concept: video above the keypoints */
  #concept .concept-media{order:-1;}
}
@media (max-width:640px){
  .hide-sm{display:none !important;}
  /* the two nowrap display titles must be allowed to wrap on small screens */
  #top h1{font-size:clamp(38px,11.5vw,60px) !important;}
  #top h1 span{white-space:normal !important;}
  #concept h2{white-space:normal !important;font-size:clamp(26px,7vw,40px) !important;}
  /* hero: a bit less top padding */
  #top .container, #top > div:last-child{padding-top:clamp(96px,20vh,150px) !important;}
  /* fleet stage a little shorter so controls sit comfortably */
  #flotte > div:nth-child(2){height:clamp(300px,46vh,460px) !important;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .reveal,.container{opacity:1 !important;transform:none !important;}
}