:root{
  --ocean-sky:#ffffff;
  --ocean-horizon:#eafafb;
  --ocean-surface:#a8e8ec;
  --ocean-shallows:#40bdca;
  --ocean-mid:#087f9d;
  --ocean-deep:#07506f;
  --ocean-abyss:#03172d;
  --ocean-ink:#06283d;
  --ocean-muted:#426779;
}

/*
  Ocean Depth is intentionally an additive layer over site.css.
  Set NEXT_PUBLIC_SITE_THEME=classic to omit this file and restore the
  original design without copying or rewriting the base stylesheet.
*/
body{
  background:
    radial-gradient(ellipse 70% 18% at 18% 17%,rgba(255,255,255,.72),transparent 70%),
    radial-gradient(ellipse 62% 16% at 86% 31%,rgba(150,247,244,.24),transparent 72%),
    linear-gradient(180deg,
      var(--ocean-sky) 0%,
      var(--ocean-horizon) 11%,
      var(--ocean-surface) 24%,
      var(--ocean-shallows) 39%,
      var(--ocean-mid) 55%,
      var(--ocean-deep) 74%,
      var(--ocean-abyss) 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.24;
  background:
    repeating-linear-gradient(112deg,transparent 0 9vw,rgba(255,255,255,.12) 10vw,transparent 13vw),
    radial-gradient(circle at 74% 18%,rgba(255,255,255,.46),transparent 13%);
  mix-blend-mode:soft-light;
}
body>main,body>.site-footer,body>.site-nav,body>.mobile-menu,body>.locale-toolbar{position:relative;z-index:1}

.site-nav{
  color:var(--ocean-ink);
  background:rgba(255,255,255,.84);
  border-bottom-color:rgba(6,40,61,.12);
  box-shadow:0 10px 42px rgba(15,80,104,.08);
}
.site-nav .nav-links a,.site-nav .lang{color:#244f62}
.site-nav .nav-links a:hover,.site-nav .nav-links a.active{color:#057f96}
.site-nav .burger{color:var(--ocean-ink);border-color:rgba(6,40,61,.2);background:rgba(255,255,255,.68)}
.mobile-menu{background:rgba(250,255,255,.98);border-bottom-color:rgba(6,40,61,.14);color:var(--ocean-ink)}

.hero,.page-hero{
  color:var(--ocean-ink);
  background:
    radial-gradient(circle at 78% 15%,rgba(104,220,229,.2),transparent 25%),
    linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(242,252,253,.95) 62%,rgba(218,247,249,.72) 100%);
}
.hero::before{
  background:
    linear-gradient(112deg,transparent 0 36%,rgba(51,177,194,.07) 36.2% 36.8%,transparent 37% 100%),
    repeating-linear-gradient(108deg,transparent 0 78px,rgba(15,135,153,.035) 78px 80px);
}
.hero::after,.page-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:90px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(120,220,227,.2));
}
.hero-grid,.page-hero>.container{z-index:1}
.hero h1,.page-hero h1{color:#05283d;text-shadow:0 1px 0 rgba(255,255,255,.72)}
.hero-copy,.hero .lead,.page-hero .lead{color:var(--ocean-muted)}
.hero .pill{color:#244f62;background:rgba(255,255,255,.62);border-color:rgba(7,86,108,.18)}
.hero .pill::before{color:#078f8d}
.hero .btn-secondary,.page-hero .btn-secondary,.detail-page .detail-back{
  color:var(--ocean-ink);
  background:rgba(255,255,255,.72);
  border-color:rgba(6,40,61,.18);
}
.glass.finder{
  color:var(--ocean-ink);
  background:rgba(255,255,255,.72);
  border-color:rgba(7,86,108,.16);
  box-shadow:0 30px 80px rgba(17,104,125,.16);
}
.finder-top b{color:var(--ocean-ink)}
.finder-top span,.finder .field label{color:#08778b}
.finder .field input,.finder .field textarea,.finder .field select{
  color:var(--ocean-ink);
  background:rgba(255,255,255,.78);
  border-color:rgba(7,86,108,.18);
}
.finder .field input::placeholder,.finder .field textarea::placeholder{color:#668795}
.finder .guest-field{background:rgba(244,253,253,.86);border-color:rgba(7,86,108,.14)}
.finder .guest-field strong{color:var(--ocean-ink)}
.search-row input{color:var(--ocean-ink);background:rgba(255,255,255,.78);border-color:rgba(7,86,108,.18)}
.search-row input::placeholder{color:#668795}

main>.filters-bar{background:rgba(219,248,250,.34);color:var(--ocean-ink)}
main>.filters-bar .section-head h2,main>.filters-bar .result-count{color:var(--ocean-ink)}
main>.filters-bar .filter{color:#1d5669;background:rgba(255,255,255,.54);border-color:rgba(6,40,61,.16)}
main>.filters-bar .filter.active,main>.filters-bar .filter:hover{color:#fff;background:#057f96;border-color:#057f96}
main>.filters-bar .btn-secondary{color:var(--ocean-ink);background:rgba(255,255,255,.62);border-color:rgba(6,40,61,.16)}

.section,.sand-section{background:transparent}
main>.section:nth-of-type(1){color:var(--ocean-ink)}
main>.section:nth-of-type(1) .section-head h2{color:var(--ocean-ink)}
main>.section:nth-of-type(1) .lead{color:#285a6b}
main>.section:nth-of-type(n+2){color:var(--white)}
main>.section:nth-of-type(n+2) .section-head h2{color:var(--white)}
main>.section:nth-of-type(n+2) .lead{color:rgba(228,245,248,.8)}
main>.section.sand-section{color:var(--ocean-ink)}
main>.section.sand-section .section-head h2{color:var(--ocean-ink)}
main>.section.sand-section .section-head>div>.eyebrow{color:#04384a}
main>.section.sand-section .lead{color:#285a6b}
.island-card{border:1px solid rgba(6,40,61,.1);box-shadow:0 24px 55px rgba(4,69,88,.16)}

.trip-card,.marine-card,.trust-card,.step-card,.package-card,.faq-grid details,.trip-faq details{
  background:rgba(7,31,47,.9);
  border-color:rgba(204,244,247,.14);
  box-shadow:0 18px 48px rgba(2,37,55,.14);
}
.trip-card{color:var(--white);border-color:rgba(181,239,243,.22);box-shadow:0 20px 52px rgba(2,37,55,.2)}
.trip-card h3{color:#f7fdff;text-shadow:0 1px 0 rgba(0,0,0,.14)}
.trip-card p{color:#c3dce2}
.trip-card .trip-facts{color:#d8edf1}
.trip-card .trip-id{color:#e8fbfd;background:rgba(3,19,32,.72);border-color:rgba(209,247,249,.2)}
.trip-card .tag{color:#baf5f1;border-color:rgba(48,225,218,.3);background:rgba(20,164,164,.13)}
.trip-card:hover{box-shadow:0 30px 70px rgba(2,28,45,.3)}
@media(min-width:981px){
  .filters-bar .trip-grid>.trip-card:last-child:nth-child(3n+1){grid-column:2}
}
.placeholder-review{background:rgba(4,39,59,.42);border-color:rgba(126,239,236,.32)}

.detail-page{
  background:
    radial-gradient(ellipse 70% 18% at 18% 17%,rgba(255,255,255,.72),transparent 70%),
    linear-gradient(180deg,var(--ocean-sky) 0%,var(--ocean-horizon) 11%,var(--ocean-surface) 24%,var(--ocean-shallows) 39%,var(--ocean-mid) 55%,var(--ocean-deep) 74%,var(--ocean-abyss) 100%);
  background-size:100% 100%;
}
.detail-page .detail-top{background:transparent}
.detail-page .detail-back{box-shadow:0 12px 35px rgba(10,80,102,.12)}
.detail-page .important-info,.detail-page .trip-overview,.detail-page .detail-panel,.detail-page .trip-faq,.detail-page .booking-glass{
  background:linear-gradient(160deg,rgba(8,43,61,.94),rgba(3,25,43,.96));
  border-color:rgba(205,245,248,.14);
  box-shadow:0 24px 70px rgba(1,22,37,.25);
}
.detail-page .detail-gallery{border-color:rgba(255,255,255,.2);box-shadow:0 28px 75px rgba(3,43,61,.28)}

.locale-toolbar{background:rgba(4,31,48,.92);border-color:rgba(215,249,250,.16)}
.site-footer{
  background:linear-gradient(180deg,rgba(3,28,50,.72),rgba(2,15,31,.96));
  border-top-color:rgba(197,240,245,.14);
}
.mobile-sticky{background:rgba(3,26,44,.94)}
.booking-success-page{background:linear-gradient(180deg,var(--ocean-sky) 0%,var(--ocean-surface) 23%,var(--ocean-mid) 58%,var(--ocean-abyss) 100%)}

@media(max-width:700px){
  body{
    background:
      radial-gradient(ellipse 90% 13% at 18% 14%,rgba(255,255,255,.62),transparent 72%),
      linear-gradient(180deg,var(--ocean-sky) 0%,var(--ocean-horizon) 10%,var(--ocean-surface) 23%,var(--ocean-shallows) 39%,var(--ocean-mid) 57%,var(--ocean-deep) 76%,var(--ocean-abyss) 100%);
    background-size:100% 100%;
  }
  body::before{opacity:.14;background:repeating-linear-gradient(112deg,transparent 0 28vw,rgba(255,255,255,.12) 30vw,transparent 39vw)}
  .site-nav{background:rgba(255,255,255,.9)}
  .hero,.page-hero{background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(226,248,250,.88))}
  .hero::after,.page-hero::after{height:52px}
  .glass.finder{background:rgba(255,255,255,.82)}
  main>.section:nth-of-type(1) .section-head h2{color:var(--ocean-ink)}
}

@media(prefers-reduced-motion:reduce){
  body::before{display:none}
  .hero::before{background:none}
}
