:root{
  --ae-deep:#07566f; --ae-teal:#078f9d; --ae-aqua:#32b8ad;
  --ae-sand:#fff3cf; --ae-coral:#ef6d7a; --ae-ink:#244b56;
  --ae-soft:#f4fcfa;
}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(circle at 92% 5%,rgba(255,214,105,.16),transparent 18%),
    linear-gradient(rgba(248,254,252,.94),rgba(255,252,242,.94));
}
main#content{position:relative;isolation:isolate}
.ae-page{max-width:1050px;margin:0 auto;padding:28px 18px 42px;position:relative}
.ae-hero{
  position:relative;overflow:hidden;padding:34px clamp(22px,5vw,54px);border-radius:26px;
  color:#fff;background:
    radial-gradient(circle at 88% 18%,rgba(255,215,105,.92) 0 27px,rgba(255,215,105,.18) 28px 49px,transparent 50px),
    linear-gradient(125deg,var(--ae-deep),var(--ae-teal) 58%,#2aaa90);
  box-shadow:0 16px 38px rgba(5,91,104,.16)
}
.ae-hero:after{content:"🌴  🌺";position:absolute;right:24px;bottom:12px;font-size:44px;opacity:.72}
.ae-kicker{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#fff0b7}
.ae-hero h1{margin:7px 0 8px;color:#fff;font-size:clamp(30px,5vw,48px)}
.ae-hero p{max-width:680px;margin:0;color:rgba(255,255,255,.94);line-height:1.7}
.ae-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.ae-card{padding:23px;border:1px solid #d9ece7;border-radius:19px;background:rgba(255,255,255,.93);box-shadow:0 10px 28px rgba(13,88,80,.07)}
.ae-card h2,.ae-card h3{margin:0 0 9px;color:var(--ae-deep)}
.ae-card p{margin:0;color:#587069;line-height:1.65}
.ae-icon{font-size:28px;margin-bottom:9px}
.ae-note{margin-top:20px;padding:17px 20px;border-radius:17px;border:1px solid #e7e2c9;background:linear-gradient(110deg,#effbf8,#fff8e7);color:#536961;line-height:1.65}
.site-footer{position:relative;overflow:hidden;background:linear-gradient(135deg,#063f58,#078b9b 58%,#07536b)!important}
@media(max-width:760px){
  .ae-page{padding:18px 12px 30px}.ae-grid{grid-template-columns:1fr}
  .ae-hero{padding:26px 20px}.ae-hero:after{font-size:31px;opacity:.45}
}

/* Final mobile compatibility pass */
img,video,iframe{max-width:100%}
@media(max-width:760px){
  input,select,textarea,button{max-width:100%;font-size:16px}
  .ae-card,.gallery-card,.booking-wrapper,.caribbean-visit-shell{max-width:100%;min-width:0}
}






/* =========================================================
   FULL MAIN-AREA TROPICAL BACKGROUND
   Fills the complete area between header and footer.
   The artwork stays visually fixed while page content scrolls.
   ========================================================= */
body{
  position:relative;
  background:#f7fcfb;
}

/* The background is clipped to MAIN only, so header and footer stay separate. */
main#content{
  position:relative;
  isolation:isolate;
  min-height:72vh;
  background:transparent !important;
}

/* Fixed tropical artwork: a viewport-sized fixed layer, clipped to MAIN
   (clip-path on main), scaled up so the soft faded edges of the image sit
   outside the screen -> no white sides on wide screens, no seams/white
   stripe while scrolling, works the same on phones. */
main#content{ clip-path:inset(0 -100vw); } /* clip top/bottom to MAIN, full screen width */
main#content::before{
  content:"";
  position:fixed;
  top:-14vh; bottom:-14vh;
  left:-16vw; right:-16vw;
  z-index:-2;
  pointer-events:none;

  background-image:url("images/design/palm_transparent_bg.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;

  opacity:.50;
}
/* veil is now part of the full-width layer below */
main#content::after{ display:none !important; }
html body main#content::before{
  box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.10);
}

/* Very light veil so text remains readable without hiding the image. */
main#content::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(255,255,255,.10);
}

/* Keep every dynamically loaded PHP page above the background. */
main#content > *{
  position:relative;
  z-index:1;
}

/* On phones: fixed backgrounds can stutter in some mobile browsers.
   Keep the same visual effect with a stable, full-area background. */
@media(max-width:760px){
  main#content::before{
    top:-8vh; bottom:-8vh;
    left:-30vw; right:-30vw;
    opacity:.44;
  }
  main#content::after{
    background:rgba(255,255,255,.13);
  }
}

/* No white band between page content and footer: the spacing now lives
   inside the palm area instead of as a margin above the footer. */
.site-footer{ margin-top:0 !important; }
main#content{ padding-bottom:90px !important; }