/* ============================================================
   CRUISECHEF V45 — CLEAN HERO IMPLEMENTATION
   Visual/layout layer only. Existing application logic untouched.
   ============================================================ */

.v45-hero{
  --v45-navy:#061226;
  --v45-navy-2:#0a2a50;
  --v45-gold:#f4c32f;
  --v45-white:#fff;
  position:relative;
  isolation:isolate;
  min-height:calc(100svh - 0px);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:96px;
  background:#061226;
}

/* One continuous photographic canvas. The left side is intentionally
   darkened so the typography reads as part of the photo, not a panel. */
.v45-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url("assets/ship.jpg");
  background-repeat:no-repeat;
  background-position:72% center;
  background-size:cover;
  transform:scale(1.035);
  filter:saturate(1.12) contrast(1.04) brightness(.98);
}

/* Deep navy-to-transparent photographic blend — no rectangular image cut. */
.v45-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,
      rgba(3,13,30,.98) 0%,
      rgba(4,17,38,.94) 18%,
      rgba(5,24,50,.80) 34%,
      rgba(5,29,58,.53) 48%,
      rgba(5,29,58,.17) 66%,
      rgba(5,29,58,.02) 82%,
      rgba(5,29,58,.16) 100%),
    linear-gradient(180deg,
      rgba(3,12,27,.42) 0%,
      rgba(3,12,27,0) 32%,
      rgba(2,10,23,.22) 72%,
      rgba(2,9,20,.70) 100%);
  pointer-events:none;
}

/* Atmospheric blue light and subtle ocean glow. */
.v45-hero .v45-atmosphere{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 55% 65% at 82% 34%, rgba(38,165,255,.18), transparent 70%),
    radial-gradient(ellipse 52% 28% at 55% 100%, rgba(0,195,255,.18), transparent 72%),
    linear-gradient(115deg, transparent 25%, rgba(53,184,255,.08) 49%, transparent 67%);
  mix-blend-mode:screen;
}

/* Hide the old absolutely-positioned hero image. V45 owns the photo canvas. */
.v45-hero .hero-ship{display:none!important;}
.v45-hero .stars{display:none!important;}
.v45-hero .hero-anchor{display:none!important;}

.v45-hero .hero-inner{
  width:100%;
  padding:54px 0 54px;
  position:relative;
  z-index:2;
}

.v45-hero .hero-inner > .wrap{
  width:min(100% - 80px, 1440px);
  max-width:none;
  margin:0 auto;
  padding:0;
}

.v45-hero .hero-content{
  width:min(690px, 52vw);
  max-width:none;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  transform:none;
}

/* Strong editorial display typography. */
.v45-hero .brand-lockup{
  margin:0 0 24px;
  max-width:680px;
}

.v45-hero .brand-lockup .name1,
.v45-hero .brand-lockup .name2{
  font-family:'Anton',sans-serif;
  font-size:clamp(58px,5.15vw,88px)!important;
  line-height:.90!important;
  letter-spacing:.3px!important;
  text-transform:uppercase;
  text-shadow:0 5px 24px rgba(0,0,0,.48);
}

.v45-hero .brand-lockup .name1{color:#fff;}
.v45-hero .brand-lockup .name2{color:var(--v45-gold);}

.v45-hero .tagline-script{
  margin-top:14px!important;
  font-family:'Caveat',cursive!important;
  font-size:clamp(30px,2.45vw,42px)!important;
  line-height:1!important;
  color:#fff1bf!important;
  text-shadow:0 3px 14px rgba(0,0,0,.52);
}

.v45-hero .tagline-script::after{
  content:"";
  display:block;
  width:165px;
  height:4px;
  margin-top:7px;
  background:var(--v45-gold);
  border-radius:100%;
  transform:rotate(-2deg);
  box-shadow:0 0 16px rgba(244,195,47,.25);
}

.v45-hero .hero-q{
  margin:26px 0 0!important;
  max-width:650px!important;
  font-family:'Work Sans',sans-serif;
  font-size:clamp(18px,1.65vw,25px)!important;
  line-height:1.25!important;
  letter-spacing:.15px!important;
  color:#fff!important;
  text-shadow:0 3px 16px rgba(0,0,0,.62);
}

.v45-hero .hero-q b{color:var(--v45-gold)!important;}

.v45-hero .hero-headline{
  margin:9px 0 0!important;
  font-family:'Anton',sans-serif!important;
  font-size:clamp(72px,8.2vw,132px)!important;
  line-height:.82!important;
  letter-spacing:-.8px!important;
  text-transform:uppercase;
  color:#fff!important;
  text-shadow:0 6px 24px rgba(0,0,0,.56);
}

.v45-hero .hero-headline .free{
  color:var(--v45-gold)!important;
  text-shadow:0 6px 26px rgba(0,0,0,.56),0 0 30px rgba(244,195,47,.15);
}

.v45-hero .hero-program{
  margin-top:13px!important;
  max-width:650px!important;
  font-family:'Work Sans',sans-serif!important;
  font-size:clamp(16px,1.45vw,21px)!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:1.1px!important;
  color:#fff!important;
}

.v45-hero .hero-cta-row{
  display:flex!important;
  align-items:center;
  justify-content:flex-start!important;
  flex-wrap:wrap;
  gap:18px;
  max-width:none!important;
  margin-top:31px!important;
  padding:0!important;
}

.v45-hero .hero-cta-row .btn{
  min-height:58px;
  padding:16px 34px!important;
  border-radius:28px;
  white-space:nowrap;
}

.v45-hero .hero-note{
  margin-top:24px!important;
  max-width:none!important;
  text-align:left!important;
  color:rgba(255,255,255,.82)!important;
  font-size:14px!important;
  line-height:1.4!important;
  letter-spacing:.35px!important;
}

.v45-hero .scroll-cue{
  left:max(28px,calc((100vw - 1440px)/2));
  bottom:30px;
  z-index:5;
  color:rgba(255,255,255,.55);
}

.v45-hero .scroll-cue .line{
  background:linear-gradient(var(--v45-gold),transparent);
}

/* Desktop nav — visually proportioned to the hero rather than the old compact bar. */
@media(min-width:760px){
  body{padding-bottom:0!important;}
  nav{
    height:96px!important;
    background:rgba(4,17,38,.70)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    backdrop-filter:blur(12px);
  }
  nav .wrap{
    width:min(100% - 80px,1440px)!important;
    max-width:none!important;
    height:96px!important;
    padding:0!important;
  }
  .brand img{
    width:66px!important;height:66px!important;
  }
  .brand{gap:14px!important;}
  .brand-text .b1{
    font-size:20px!important;
    letter-spacing:.4px!important;
  }
  .brand-text .b2{
    font-size:11px!important;
    letter-spacing:2px!important;
  }
  .nav-links{
    gap:38px!important;
    margin-left:auto;
    margin-right:34px;
  }
  .nav-links a{
    color:#f4f7fb!important;
    font-size:16px!important;
    font-weight:600!important;
  }
  .nav-cta{
    min-width:296px;
    min-height:64px;
    border-radius:14px!important;
    font-size:15px!important;
    padding:15px 30px!important;
  }
}

/* Tablet: preserve the same left-to-right art direction without overcrowding. */
@media(min-width:760px) and (max-width:1100px){
  .v45-hero .hero-inner > .wrap{width:calc(100% - 48px);}
  .v45-hero .hero-content{width:min(610px,58vw);}
  .v45-hero .brand-lockup .name1,
  .v45-hero .brand-lockup .name2{font-size:clamp(50px,6.4vw,70px)!important;}
  .v45-hero .hero-headline{font-size:clamp(64px,9vw,92px)!important;}
  nav .wrap{width:calc(100% - 48px)!important;}
  .nav-links{gap:20px!important;margin-right:16px;}
  .nav-cta{min-width:210px!important;}
}

/* ====================== MOBILE ART DIRECTION ====================== */
@media(max-width:759px){
  body{padding-bottom:70px!important;}

  .v45-hero{
    min-height:calc(100svh - 0px)!important;
    align-items:flex-start!important;
    padding-top:78px!important;
  }

  .v45-hero::before{
    background-position:64% center;
    background-size:auto 100%;
    transform:scale(1.02);
    filter:saturate(1.08) contrast(1.03) brightness(.90);
  }

  .v45-hero::after{
    background:
      linear-gradient(90deg,
        rgba(3,12,28,.96) 0%,
        rgba(3,15,34,.87) 27%,
        rgba(4,23,48,.60) 51%,
        rgba(4,23,48,.25) 73%,
        rgba(4,23,48,.10) 100%),
      linear-gradient(180deg,
        rgba(3,10,22,.20) 0%,
        rgba(3,10,22,.04) 32%,
        rgba(3,10,22,.38) 70%,
        rgba(2,9,20,.92) 100%);
  }

  .v45-hero .hero-inner{
    padding:46px 0 90px!important;
  }

  .v45-hero .hero-inner > .wrap{
    width:100%!important;
    padding:0 20px!important;
    margin:0!important;
  }

  .v45-hero .hero-content{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
  }

  .v45-hero .brand-lockup{
    margin-bottom:20px!important;
    max-width:100%!important;
  }

  .v45-hero .brand-lockup .name1,
  .v45-hero .brand-lockup .name2{
    font-size:clamp(43px,12.4vw,62px)!important;
    line-height:.91!important;
    letter-spacing:0!important;
  }

  .v45-hero .tagline-script{
    font-size:clamp(25px,7.4vw,34px)!important;
    margin-top:12px!important;
  }

  .v45-hero .tagline-script::after{
    width:120px;
    height:3px;
  }

  .v45-hero .hero-q{
    margin-top:22px!important;
    max-width:100%!important;
    font-size:clamp(17px,4.7vw,21px)!important;
    line-height:1.22!important;
  }

  .v45-hero .hero-headline{
    margin-top:9px!important;
    max-width:100%!important;
    font-size:clamp(56px,17.2vw,82px)!important;
    line-height:.84!important;
    letter-spacing:-.5px!important;
  }

  .v45-hero .hero-program{
    margin-top:15px!important;
    max-width:100%!important;
    font-size:clamp(14px,3.9vw,17px)!important;
    line-height:1.25!important;
    letter-spacing:.65px!important;
  }

  .v45-hero .hero-cta-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:11px!important;
    width:100%!important;
    margin-top:25px!important;
  }

  .v45-hero .hero-cta-row .btn{
    width:100%!important;
    min-height:56px!important;
    border-radius:10px!important;
    padding:15px 18px!important;
  }

  .v45-hero .hero-note{
    width:100%!important;
    margin-top:17px!important;
    font-size:12.5px!important;
    line-height:1.5!important;
    text-align:left!important;
  }

  .v45-hero .scroll-cue{
    left:20px!important;
    bottom:20px!important;
  }

  nav{
    height:78px!important;
  }
  nav .wrap{
    height:78px!important;
    padding-left:18px!important;
    padding-right:12px!important;
  }
  .brand{gap:9px!important;}
  .brand img{
    width:52px!important;height:52px!important;
  }
  .brand-text .b1{font-size:15px!important;}
  .brand-text .b2{
    font-size:8.5px!important;
    letter-spacing:1.25px!important;
  }
  .nav-right{gap:8px!important;}
  .menu-toggle{
    width:44px!important;height:44px!important;
  }
  .nav-cta{
    min-height:52px!important;
    padding:10px 17px!important;
    border-radius:9px!important;
    font-size:12px!important;
    line-height:1.1!important;
  }
}

/* Very narrow phones: prioritize legibility and prevent any overflow. */
@media(max-width:390px){
  .v45-hero .hero-inner > .wrap{padding-left:17px!important;padding-right:17px!important;}
  .v45-hero .brand-lockup .name1,
  .v45-hero .brand-lockup .name2{
    font-size:clamp(39px,12.2vw,50px)!important;
  }
  .v45-hero .hero-headline{
    font-size:clamp(52px,16.7vw,70px)!important;
  }
  .nav-cta{padding-left:13px!important;padding-right:13px!important;font-size:11px!important;}
}