*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(100deg,#dff8fb,#fff8ef,#dff8fb);font-family:Arial,sans-serif;color:#082f63}
.contact-canvas{position:relative;width:min(100vw,1400px);aspect-ratio:1150/803;margin:0 auto;overflow:hidden;background:#e8fafc;box-shadow:0 0 24px rgba(8,47,99,.08)}
.design{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.hot{position:absolute;z-index:10;display:block}
.hot:focus{outline:3px solid #ff1680;outline-offset:-2px}

/* Header hotspots based on the exact approved header */
.nav-home{left:34.8%;top:1.8%;width:4.4%;height:7.5%}
.nav-dest{left:39.0%;top:1.8%;width:8.2%;height:7.5%}
.nav-cruises{left:47.2%;top:1.8%;width:5.5%;height:7.5%}
.nav-honeymoons{left:52.9%;top:1.8%;width:14.7%;height:7.5%}
.nav-about{left:67.7%;top:1.8%;width:5.0%;height:7.5%}
.nav-contact{left:72.7%;top:1.8%;width:5.7%;height:7.5%}
.nav-instagram{left:78.7%;top:1.8%;width:2.8%;height:7.5%}
.nav-facebook{left:81.6%;top:1.8%;width:2.8%;height:7.5%}
.nav-plan{left:84.6%;top:1.6%;width:12.4%;height:7.8%}

/* Actual form area */
.live-form-panel{
  position:absolute;z-index:6;left:4.0%;top:44.1%;width:63.1%;height:53.4%;
  background:#fff;border-radius:16px;padding:1.8% 1.8% 1.5%;
  box-shadow:0 2px 8px rgba(8,47,99,.04);
}
.form-heading{text-align:center;margin-bottom:1.7%}
.eyebrow{font-size:clamp(8px,1vw,13px);font-weight:900;letter-spacing:.12em}
.form-heading h1{font-family:"Brush Script MT","Segoe Print",cursive;font-weight:400;font-size:clamp(25px,3.5vw,48px);line-height:.95;margin:2px 0 7px}
.form-heading p{font-size:clamp(8px,1vw,13px);margin:0;color:#345b77}

form{height:calc(100% - 19%);display:flex;flex-direction:column;justify-content:space-between}
.row{display:grid;gap:1.55%}
.row.three{grid-template-columns:repeat(3,1fr)}
label span{display:block;font-size:clamp(7px,.82vw,11px);font-weight:900;text-transform:uppercase;letter-spacing:.025em;margin-bottom:4px}
input,select,textarea{width:100%;font:inherit;color:#082f63;background:#fff;border:1px solid #b9cbd7;border-radius:6px;padding:8px 10px;outline:none}
input,select{height:36px;font-size:clamp(8px,.9vw,12px)}
textarea{height:68px;resize:none;font-size:clamp(8px,.9vw,12px)}
input:focus,select:focus,textarea:focus{border-color:#1cc9d6;box-shadow:0 0 0 2px rgba(28,201,214,.12)}
.full{display:block}
button{align-self:center;border:0;border-radius:999px;background:#ff1680;color:white;font-size:clamp(9px,1.05vw,14px);font-weight:900;padding:12px 28px;min-width:46%;cursor:pointer;box-shadow:0 7px 18px rgba(255,22,128,.18)}
button:hover{filter:brightness(.98)}
.honeypot{display:none!important}

/* Right contact card clickable regions */
.direct-phone{left:71.4%;top:57.0%;width:22%;height:6%}
.direct-email{left:71.4%;top:64.0%;width:22%;height:6%}
.direct-instagram{left:71.4%;top:70.7%;width:22%;height:6%}
.direct-facebook{left:71.4%;top:77.5%;width:22%;height:6%}

@media(max-width:700px){
  .contact-canvas{aspect-ratio:auto;min-height:100vh;background:linear-gradient(150deg,#e7fbfd,#fff8ef);padding:24px 16px}
  .design{display:none}.hot{display:none}
  .live-form-panel{position:relative;left:auto;top:auto;width:100%;height:auto;padding:24px 18px;border-radius:18px}
  .form-heading{margin-bottom:22px}
  .form-heading h1{font-size:43px}
  .form-heading p{font-size:14px;line-height:1.5}
  form{height:auto;display:block}
  .row.three{grid-template-columns:1fr}
  label{display:block;margin-bottom:15px}
  label span{font-size:11px}
  input,select{height:44px;font-size:14px}
  textarea{height:130px;font-size:14px}
  button{width:100%;margin-top:8px;font-size:13px;padding:14px}
}


.mobile-contact-header,.mobile-contact-hero,.mobile-direct-contact{display:none}

@media(max-width:700px){
  .mobile-contact-header{display:block;max-width:520px;margin:0 auto;padding:8px 10px 13px;text-align:center;background:linear-gradient(180deg,#fff,#edfafe);border-bottom:3px solid #ff1680}
  .mobile-contact-header .m-logo{display:block;width:min(94%,400px);margin:0 auto 7px}
  .mobile-contact-header .m-logo img{display:block;width:100%;height:auto}
  .mobile-contact-header .m-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 11px;padding:4px 3px 2px}
  .mobile-contact-header .m-nav a{color:#082f63;text-decoration:none;text-transform:uppercase;font-size:10px;line-height:1.35;font-weight:800}
  .mobile-contact-header .m-nav a.active{color:#ff1680;text-decoration:underline;text-underline-offset:3px}

  .mobile-contact-hero{display:block;max-width:520px;margin:0 auto;background:#e8fbfd}
  .mobile-contact-hero img{display:block;width:100%;height:auto}

  .contact-canvas{width:100%;max-width:520px;margin:0 auto;min-height:0;padding:18px 14px 13px;background:linear-gradient(150deg,#e7fbfd,#fff8ef)}
  .live-form-panel{padding:24px 17px 20px;border-radius:16px}
  .form-heading h1{font-size:41px;line-height:1}
  .form-heading p{font-size:13px;line-height:1.48}
  label span{font-size:10px}
  input,select{height:44px;font-size:14px}
  textarea{height:130px;font-size:14px}
  button{font-size:12px;padding:14px 12px}

  .mobile-direct-contact{display:block;max-width:520px;margin:0 auto;padding:25px 14px 24px;text-align:center;background:#e8fbfd}
  .mobile-direct-contact h2{margin:0 0 7px;font-family:"Brush Script MT","Segoe Print",cursive;font-size:42px;font-weight:400}
  .mobile-direct-contact>p{margin:0 auto 17px;max-width:430px;color:#345774;font-size:13px;line-height:1.45}
  .mobile-direct-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .mobile-direct-grid a{min-height:99px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 7px;border:1px solid #d4ecef;border-radius:12px;background:rgba(255,255,255,.8);color:#082f63;text-decoration:none}
  .mobile-direct-grid span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;margin-bottom:5px;border-radius:50%;background:#ff1680;color:#fff;font-size:18px;font-weight:900}
  .mobile-direct-grid strong{font-size:11px;line-height:1.25;overflow-wrap:anywhere}.mobile-direct-grid small{margin-top:2px;font-size:10px}
}