/* AquaTour approved surface depth. Last updated: 2026-10-15. Version: 1.3. */
:root {
  --aqua-depth-rest: 0 0 .8px rgba(0, 24, 32, .62),
    0 2px 4px -1px rgba(0, 24, 32, .24),
    0 10px 18px -6px rgba(0, 24, 32, .40),
    0 20px 28px -14px rgba(0, 24, 32, .32);
  --aqua-depth-hover: 0 0 .8px rgba(0, 24, 32, .62),
    0 2px 4px -1px rgba(0, 24, 32, .24),
    0 14px 22px -7px rgba(0, 24, 32, .42),
    0 24px 32px -16px rgba(0, 24, 32, .34);
  --aqua-depth-pressed: 0 0 .8px rgba(0, 24, 32, .62),
    0 2px 4px -1px rgba(0, 24, 32, .24),
    0 6px 12px -4px rgba(0, 24, 32, .34),
    0 12px 20px -10px rgba(0, 24, 32, .26);
  --aqua-depth-keylight: inset 0 1px 0 rgba(255, 251, 242, .18),
    inset 0 0 .8px rgba(0, 24, 32, .18);
  --aqua-depth-edge: rgba(255, 251, 242, .34);
}

/* The approved Included gallery, with unchanged photograph coordinates. */
#how .included-life-row-frame { display: flow-root; }
#how .included-life-row {
  width: 100%;
  padding: 16px 0 36px;
  margin: -8px 0 -18px;
}
#how .included-life-grid.included-life-rail .included-life-photo {
  box-shadow: var(--aqua-depth-rest);
}
#how .included-life-rail .included-life-photo::after {
  border-color: var(--aqua-depth-edge);
  box-shadow: var(--aqua-depth-keylight);
}
#how .included-life-rail .included-life-photo:focus-visible { outline: none; }
#how .included-life-rail .included-life-photo:focus-visible::after {
  border: 3px solid #FFD3D8;
}
@media (hover: hover) and (pointer: fine) {
  #how .included-life-grid.included-life-rail .included-life-photo:hover {
    box-shadow: var(--aqua-depth-hover);
  }
}
#how .included-life-grid.included-life-rail .included-life-photo:active {
  box-shadow: var(--aqua-depth-pressed);
}

/* Expose the existing sea field without changing the map or card layout. */
#areas.home-areas .ha-layout::before { content: none; }
/* The removed parent frame no longer reserves an inner gutter. Keep the
   existing page-shell, map projection, responsive stacking and card gap. */
#areas.home-areas .ha-layout {
  padding: 0;
  max-width: none;
}
@media (max-width: 1023px) {
  #areas.home-areas > .page-shell { max-width: var(--shell-max) !important; }
}
#areas.home-areas .ha-map {
  border-color: var(--aqua-depth-edge);
  box-shadow: var(--aqua-depth-rest), var(--aqua-depth-keylight);
}
#areas.home-areas .ha-card,
#areas.home-areas .ha-card.is-open {
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
#areas.home-areas .ha-card::after { content: none; }
#areas.home-areas .ha-card:focus-visible { outline: none; }
#areas.home-areas .ha-flipper { box-shadow: none; }
/* Each hidden-backface plane owns its frame and depth. The interactive shell
   stays unpainted throughout the flip; face overflow still clips its contents. */
#areas.home-areas .ha-face {
  position: relative;
  clip-path: none;
  overflow: hidden;
  border-color: var(--aqua-depth-edge);
  box-shadow: var(--aqua-depth-rest);
}
#areas.home-areas .ha-face::before {
  content: '';
  position: absolute;
  z-index: 10;
  inset: 0;
  box-sizing: border-box;
  border: 0 solid var(--aqua-depth-edge);
  border-radius: inherit;
  box-shadow: var(--aqua-depth-keylight);
  pointer-events: none;
}
#areas.home-areas .ha-card.is-open .ha-face,
#areas.home-areas .ha-card:focus-visible .ha-face { border-color: #FFD3D8; }
#areas.home-areas .ha-card.is-open .ha-face::before,
#areas.home-areas .ha-card:focus-visible .ha-face::before {
  border: 1px solid #FFD3D8;
}
@media (min-width: 769px) {
  /* Keep the panorama at its original outer-box coordinates after positioning
     the face: the existing desktop border remains one pixel wide. */
  #areas.home-areas .ha-back > .ha-photo { inset: -1px; }
}
@media (hover: hover) and (pointer: fine) {
  #areas.home-areas .ha-card:hover .ha-face { box-shadow: var(--aqua-depth-hover); }
}
#areas.home-areas .ha-card:active .ha-face { box-shadow: var(--aqua-depth-pressed); }
@media (max-width: 1023px) {
  #areas.home-areas .ha-interaction-hint { color: rgba(255, 251, 242, .78); }
}
@media (max-width: 768px) {
  /* Additional vertical room, preserving the existing 160px rail footprint. */
  #areas.home-areas .ha-cards {
    height: 186px;
    min-height: 186px;
    padding-top: 16px;
    padding-bottom: 36px;
    margin-top: -8px;
    margin-bottom: -18px;
  }
  #areas.home-areas .ha-face::before { border-width: 1px; }
  #areas.home-areas .ha-card.is-open .ha-face::before,
  #areas.home-areas .ha-card:focus-visible .ha-face::before { border-width: 2px; }
}

/* The light review surface remains intact; the whole card carries the depth. */
#reviews.reviews-section .review-card {
  border-color: var(--aqua-depth-edge);
  box-shadow: var(--aqua-depth-rest), var(--aqua-depth-keylight);
}
@media (max-width: 768px) {
  #reviews.reviews-section .reviews-grid {
    padding-top: 12px;
    padding-bottom: 36px;
    margin-top: -12px;
    margin-bottom: -36px;
  }
}

/* Reuse the existing sea field for the requested boat-care section. */
.why-proof {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #006582;
}
.why-proof::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -16% -10%;
  pointer-events: none;
  background-image: url('assets/sea-depth-field.svg?v=20260928-5');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 1;
  transform: perspective(680px) rotateX(12deg) scale(1.08);
  transform-origin: 50% 18%;
}
.why-proof > * { position: relative; z-index: 1; }
.why-proof #why-proof-heading { color: #FFFBF2; }
.why-proof .why-proof-card {
  color: #26292F;
  border-color: var(--aqua-depth-edge);
  box-shadow: var(--aqua-depth-rest), var(--aqua-depth-keylight);
}
@media (max-width: 768px) {
  .why-proof::before {
    inset: -10% -13%;
    background-size: 235% 100%;
    transform: perspective(520px) rotateX(9deg) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-proof::before { transform: none; }
}

/* Map digits share one font axis and scale in the same SVG coordinates as the
   zones. Override the legacy mobile-only size/translation of digit zero. */
#areas.home-areas .ha-numbers text[data-zone-number] {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 44px !important;
  font-weight: 600;
  font-style: normal;
  text-anchor: middle;
  dominant-baseline: middle;
  transform: none !important;
  fill: #FFD3D8;
  stroke: #003847;
  stroke-width: 1.5px;
  stroke-opacity: .78;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Center the existing flag pair within its full-width divider row. */
@media (max-width: 768px) {
  .site-header .site-nav-links > .language-switcher { justify-content: center; }
}