*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(100deg,#dff8fb 0%,#fef8ef 50%,#dff8fb 100%);font-family:Arial,sans-serif;overflow-x:hidden}
.desktop-site{display:flex;flex-direction:column;min-height:100vh;width:100%;background:linear-gradient(100deg,#dff8fb 0%,#fef8ef 50%,#dff8fb 100%)}
.approved-canvas{
  position:relative;
  /* Fit the full approved homepage inside the visible desktop window without making it oversized. */
  width:min(100vw,1400px,calc(100vh * 1134 / 770));
  aspect-ratio:1134/770;
  margin:0 auto;
  overflow:hidden;
  background:white;
  flex:0 0 auto;
}
.approved-canvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hotspot{position:absolute;z-index:5;display:block;background:transparent}
.hotspot:focus{outline:3px solid #ff0d7b;outline-offset:2px;border-radius:6px}

/* top nav */
.home{left:35.0%;top:2.8%;width:4.3%;height:5.3%}
.destinations-nav{left:39.0%;top:2.8%;width:8.1%;height:5.3%}
.cruises-nav{left:47.2%;top:2.8%;width:5.5%;height:5.3%}
.honeymoons-nav{left:53.0%;top:2.8%;width:14.4%;height:5.3%}
.about-nav{left:67.5%;top:2.8%;width:5.0%;height:5.3%}
.contact-nav{left:72.5%;top:2.8%;width:5.7%;height:5.3%}
.instagram-top{left:78.9%;top:2.5%;width:2.7%;height:5.6%}
.facebook-top{left:81.7%;top:2.5%;width:2.7%;height:5.6%}
.plan-top{left:84.5%;top:2.1%;width:12.7%;height:6.4%}

/* hero */
.plan-hero{left:14.0%;top:45.6%;width:18.6%;height:6.2%}

/* cards */
.caribbean-card{left:0;top:54.2%;width:25.0%;height:21.0%}
.europe-card{left:25.0%;top:54.2%;width:25.0%;height:21.0%}
.cruises-card{left:50.0%;top:54.2%;width:25.0%;height:21.0%}
.romance-card{left:75.0%;top:54.2%;width:25.0%;height:21.0%}

/* advisor link */
.advisor-link{left:17.0%;top:91.6%;width:22.0%;height:4.5%}

/* bottom contact */
.phone-link{left:63.0%;top:84.0%;width:12.0%;height:12.0%}
.email-link{left:75.0%;top:84.0%;width:12.0%;height:12.0%}
.instagram-bottom{left:82.0%;top:84.0%;width:8.5%;height:13.0%}
.facebook-bottom{left:90.5%;top:84.0%;width:8.5%;height:13.0%}



.contact-social-fix{
  position:absolute;
  z-index:6;
  left:55.2%;
  top:84.0%;
  width:43.7%;
  height:13.1%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  padding:4px 7px 3px;
  background:linear-gradient(180deg,rgba(224,250,252,.985) 0%,rgba(239,252,253,.985) 100%);
  border-radius:2px;
  pointer-events:none;
}
.contact-item{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#082f63;
  text-align:center;
  line-height:1.08;
}
.contact-icon{
  width:28px;
  height:28px;
  margin-bottom:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;
  border-radius:50%;
}
.phone-icon{color:#ff1680;}
.email-icon{background:#10c7d4;color:white;font-size:18px;}
.instagram-icon{color:#ff1680;font-size:30px;font-family:Arial,sans-serif;line-height:1;}
.facebook-icon{background:#ff1680;color:white;font-family:Arial,sans-serif;font-size:21px;}
.contact-label{
  font-size:clamp(8px,.82vw,10px);
  font-weight:500;
  white-space:nowrap;
  margin-bottom:2px;
}
.contact-value{
  font-size:clamp(8px,.82vw,10.5px);
  font-weight:800;
  white-space:nowrap;
}
.contact-email{font-size:clamp(7px,.75vw,9.5px);}


/* Full-screen desktop finishing band.
   It expands only when the approved artwork is shorter than the browser window. */
.desktop-screen-fill{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 24px;
  background:
    radial-gradient(circle at 8% 20%,rgba(255,255,255,.72) 0 5%,transparent 5.3%),
    radial-gradient(circle at 92% 75%,rgba(255,255,255,.62) 0 4%,transparent 4.3%),
    linear-gradient(100deg,#d8f7fb 0%,#fdf6e8 49%,#d9f8fa 100%);
  border-top:1px solid rgba(5,91,130,.12);
}
.screen-fill-inner{
  width:min(1120px,94vw);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  text-align:center;
}
.screen-fill-tagline{
  color:#08346a;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:clamp(23px,3vw,44px);
  font-weight:700;
  line-height:1.05;
}
.screen-fill-tagline span{color:#ff1680}
.screen-fill-cta{
  display:inline-block;
  padding:12px 24px;
  border-radius:999px;
  background:#ff1680;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:clamp(12px,1.1vw,16px);
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 6px 16px rgba(255,22,128,.22);
}
.screen-fill-cta:hover{transform:translateY(-1px)}

/* Mobile homepage: same approved desktop artwork, cropped and rearranged for a phone */
.mobile-site{display:none}

@media (max-width:700px){
  html,body{
    background:#eaf9fb;
  }

  .desktop-site,
  .desktop-screen-fill{
    display:none !important;
  }

  .mobile-site{
    display:block;
    width:100%;
    max-width:520px;
    margin:0 auto;
    background:#ffffff;
    color:#082f63;
    box-shadow:0 0 20px rgba(8,47,99,.08);
  }

  .mobile-home-header{
    background:linear-gradient(180deg,#ffffff 0%,#edfafe 100%);
    padding:8px 10px 13px;
    border-bottom:3px solid #ff1680;
    text-align:center;
  }

  .mobile-logo-link{
    display:block;
    width:min(92%,390px);
    margin:0 auto 7px;
  }

  .mobile-logo-link img{
    width:100%;
    height:auto;
    display:block;
  }

  .mobile-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px 11px;
    padding:4px 4px 10px;
  }

  .mobile-nav a{
    color:#082f63;
    text-decoration:none;
    text-transform:uppercase;
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:.01em;
    line-height:1.35;
  }

  .mobile-plan-top,
  .mobile-final-cta{
    display:inline-block;
    background:#ff1680;
    color:#fff;
    text-decoration:none;
    font-family:Arial,sans-serif;
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
    padding:11px 22px;
    border-radius:999px;
    box-shadow:0 6px 15px rgba(255,22,128,.18);
  }

  .mobile-home-main{
    background:
      radial-gradient(circle at 7% 8%,rgba(255,22,128,.06),transparent 17%),
      linear-gradient(180deg,#e8fbfd 0%,#fff 38%,#fff8ef 100%);
  }

  .mobile-hero-copy,
  .mobile-hero-scene,
  .mobile-features,
  .mobile-advisor-art,
  .mobile-contact-art{
    position:relative;
    width:100%;
    overflow:hidden;
  }

  .mobile-hero-copy img,
  .mobile-hero-scene img,
  .mobile-features img,
  .mobile-advisor-art img,
  .mobile-contact-art img{
    width:100%;
    height:auto;
    display:block;
  }

  .mobile-hero-copy{
    background:#e8faff;
  }

  .mobile-hero-copy img{
    width:100%;
  }

  .mobile-hero-hotspot{
    position:absolute;
    left:30%;
    top:80%;
    width:50%;
    height:14%;
    z-index:4;
  }

  .mobile-hero-scene{
    border-top:3px solid #fff;
    border-bottom:3px solid #fff;
  }

  .mobile-features{
    background:#fff;
    padding:0;
  }

  .mobile-destination-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    padding:5px;
    background:#fff;
  }

  .mobile-destination-grid a{
    display:block;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 4px 13px rgba(8,47,99,.09);
  }

  .mobile-destination-grid img{
    display:block;
    width:100%;
    height:auto;
  }

  .mobile-advisor-art{
    margin-top:3px;
    background:#fff8ef;
  }

  .mobile-advisor-hotspot{
    position:absolute;
    left:29%;
    top:70%;
    width:55%;
    height:18%;
    z-index:4;
  }

  .mobile-contact-art{
    border-top:4px solid #fff;
    background:#e8fbfd;
  }

  .mobile-phone-hotspot{
    position:absolute;
    left:8%;
    top:49%;
    width:28%;
    height:40%;
    z-index:4;
  }

  .mobile-email-hotspot{
    position:absolute;
    left:36%;
    top:49%;
    width:36%;
    height:40%;
    z-index:4;
  }

  .mobile-instagram-hotspot{
    position:absolute;
    left:72%;
    top:49%;
    width:26%;
    height:40%;
    z-index:4;
  }

  .mobile-social-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 14px;
    padding:16px 14px 11px;
    background:linear-gradient(100deg,#e4fafc,#fff8ef);
  }

  .mobile-social-row a{
    color:#082f63;
    font-family:Arial,sans-serif;
    font-size:11px;
    font-weight:800;
    text-decoration:underline;
    text-decoration-color:#ff1680;
    text-underline-offset:3px;
  }

  .mobile-final-cta{
    display:block;
    width:max-content;
    margin:2px auto 22px;
  }
}