:root {
      --gold: #C9A96E;
      --gold-light: #E8D5B0;
      --deep: #061524;
      --navy: #0D2B45;
      --text: rgba(255,255,255,.68);
      --border: rgba(255, 255, 255, 0.101);
      --ease: cubic-bezier(.22,1,.36,1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Outfit', sans-serif;
      background: var(--deep);
      color: #fff;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
    }


    /* =========================================================
       BACKGROUND SLIDER
    ========================================================= */

    .hero-background {
      position: absolute;
      inset: 0;
      height: 100vh;
      min-height: 650px;
      z-index: 0;
      overflow: hidden;
      background: var(--deep);
    }

    .bg-slide {
      position: absolute;
      inset: -3%;
      opacity: 0;
      background-size: cover;
      background-position: center;
      transform: scale(1.04);

      transition:
        opacity 1.1s ease,
        transform 8s ease;
    }

    .bg-slide.active {
      opacity: 1;
      transform: scale(1);
    }

    .bg-0 {
      background-image: url('/images/group-images/1.webp');
    }

    .bg-1 {
      background-image: url('/images/2.webp');
    }

    .bg-2 {
      background-image: url('/images/3-islands-images/18.webp');
    }

    .bg-3 {
      background-image: url('/images/background/12.webp');
    }

    .hero-gradient {
      position: absolute;
      inset: 0;
      z-index: 2;

      background:
        linear-gradient(
          90deg,
          rgba(4,15,27,.94) 0%,
          rgba(4,15,27,.82) 27%,
          rgba(4,15,27,.35) 58%,
          rgba(4,15,27,.16) 100%
        ),
        linear-gradient(
          180deg,
          rgba(5,18,31,.58) 0%,
          transparent 20%,
          transparent 60%,
          rgba(4,15,27,.95) 100%
        );
    }


    /* =========================================================
       HEADER
    ========================================================= */

    .header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      z-index: 1000;

      height: 96px;

      padding: 0 clamp(24px,5vw,82px);

      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo img {
      display: block;
      height: 46px;
      width: auto;

      filter:
        drop-shadow(0 4px 18px rgba(0,0,0,.4));
    }

    .desktop-nav {
      position: absolute;

      left: 50%;
      top: 50%;

      transform: translate(-50%,-50%);

      display: flex;
      align-items: center;

      padding: 6px;

      border: 1px solid rgba(255,255,255,.11);

      border-radius: 999px;

      background: rgba(6,18,31,.36);

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .desktop-nav a {
      padding: 10px 18px;

      border-radius: 999px;

      text-decoration: none;

      color: rgba(255,255,255,.52);

      font-size: .68rem;

      font-weight: 600;

      letter-spacing: .1em;

      text-transform: uppercase;

      transition: .25s;
    }

    .desktop-nav a:hover {
      color: #fff;
      background: rgba(255,255,255,.06);
    }

    .desktop-nav a.active {
      color: var(--gold-light);
      background: rgba(201, 169, 110, 0.048);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .language-switcher {
      position: relative;
    }

    .lang-button {
      width: 42px;
      height: 42px;

      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 50%;

      border: 1px solid var(--border);

      background: rgba(255,255,255,.05);

      backdrop-filter: blur(15px);

      color: #fff;

      cursor: pointer;
    }

    .language-menu {
      position: absolute;

      right: 0;
      top: 54px;

      width: 155px;

      padding: 8px;

      border-radius: 16px;

      border: 1px solid var(--border);

      background: rgba(5,17,30,.96);

      backdrop-filter: blur(22px);

      box-shadow:
        0 20px 60px rgba(0,0,0,.4);

      opacity: 0;

      visibility: hidden;

      transform: translateY(-8px);

      transition: .25s var(--ease);
    }

    .language-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .language-menu a {
      display: block;

      padding: 11px 12px;

      border-radius: 10px;

      text-decoration: none;

      color: rgba(255,255,255,.72);

      font-size: .8rem;
    }

    .language-menu a:hover {
      background: rgba(255,255,255,.07);
      color: #fff;
    }

    .header-book {
      height: 44px;

      padding-left: 20px;
      padding-right: 5px;

      border-radius: 999px;

      background: var(--gold);

      color: var(--navy);

      display: flex;
      align-items: center;

      gap: 14px;

      text-decoration: none;

      text-transform: uppercase;

      font-size: .68rem;

      font-weight: 700;

      letter-spacing: .08em;

      transition: .3s var(--ease);
    }

    .header-book:hover {
      transform: translateY(-2px);
    }

    .header-book-icon {
      width: 34px;
      height: 34px;

      border-radius: 50%;

      background: rgba(13,43,69,.12);

      display: flex;
      align-items: center;
      justify-content: center;
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      position: relative;

      z-index: 5;

      width: 100%;
      height: 100vh;

      min-height: 650px;

      padding:
        130px clamp(24px,5vw,82px)
        90px;

      display: flex;
      align-items: center;
    }

    .hero-copy {
      width: min(47vw,670px);

      position: relative;

      z-index: 10;
    }

    .hero-topline {
      display: flex;
      align-items: center;

      gap: 14px;

      margin-bottom: 25px;

      font-size: .62rem;

      color: var(--gold);

      font-weight: 700;

      letter-spacing: .34em;

      text-transform: uppercase;
    }

    .gold-line {
      width: 38px;
      height: 1px;

      background:
        linear-gradient(
          90deg,
          var(--gold),
          transparent
        );
    }

    .hero-index {
      position: absolute;

      left: -3px;
      top: -58px;

      display: flex;
      align-items: baseline;

      gap: 4px;

      color: rgba(255,255,255,.2);

      font-family:
        'Cormorant Garamond',
        serif;
    }

    .hero-index > span:first-child {
      font-size: 2rem;
    }

    .hero-index-total {
      font-size: .8rem;

      color:
        rgba(255,255,255,.28);
    }

    .hero-title {
      font-family:
        'Cormorant Garamond',
        serif;

      font-size:
        clamp(4.5rem,7.4vw,8.4rem);

      font-weight: 300;

      line-height: .79;

      letter-spacing: -.045em;

      text-shadow:
        0 10px 50px rgba(0,0,0,.25);
    }

    .hero-title em {
      display: block;

      margin-top: .08em;

      color: var(--gold-light);

      font-style: italic;

      font-weight: 300;
    }

    .hero-description {
      max-width: 470px;

      margin-top: 30px;

      color:
        rgba(255,255,255,.6);

      font-size: .92rem;

      line-height: 1.8;

      font-weight: 300;
    }

    .hero-meta {
      margin-top: 30px;

      display: flex;
      align-items: center;

      gap: 22px;
    }

    .meta-divider {
      width: 1px;
      height: 38px;

      background:
        rgba(255,255,255,.13);
    }

    .meta-item {
      display: flex;
      align-items: center;

      gap: 11px;
    }

    .meta-item > i {
      color: var(--gold);

      font-size: .82rem;
    }

    .meta-item div {
      display: flex;
      flex-direction: column;

      gap: 3px;
    }

    .meta-item span {
      color:
        rgba(255,255,255,.3);

      font-size: .57rem;

      text-transform: uppercase;

      letter-spacing: .12em;
    }

    .meta-item strong {
      color:
        rgba(255,255,255,.75);

      font-size: .71rem;

      font-weight: 500;
    }

    .hero-actions {
      display: flex;
      align-items: center;

      gap: 12px;

      margin-top: 34px;
    }

    .primary-button {
      min-height: 52px;

      padding: 0 25px;

      display: inline-flex;
      align-items: center;

      gap: 18px;

      border-radius: 999px;

      background: var(--gold);

      color: var(--navy);

      text-decoration: none;

      font-size: .7rem;

      font-weight: 700;

      letter-spacing: .08em;

      text-transform: uppercase;

      transition: .3s var(--ease);
    }

    .primary-button:hover {
      transform: translateY(-3px);
    }

    .secondary-button {
      min-height: 52px;

      padding: 0 24px;

      display: inline-flex;
      align-items: center;

      border-radius: 999px;

      border:
        1px solid rgba(255,255,255,.18);

      background:
        rgba(255,255,255,.04);

      color:
        rgba(255,255,255,.72);

      text-decoration: none;

      font-size: .7rem;

      font-weight: 600;

      letter-spacing: .07em;

      text-transform: uppercase;
    }


    /* =========================================================
       EXPERIENCE SELECTOR
    ========================================================= */

    .experience-selector {
      position: absolute;

      right:
        clamp(24px,4.2vw,74px);

      top: 50%;

      transform:
        translateY(-47%);

      width:
        min(51vw,790px);
    }

    .selector-header {
      padding:
        0 4px 18px;

      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .selector-label {
      display: block;

      margin-bottom: 3px;

      color: var(--gold);

      font-size: .56rem;

      text-transform: uppercase;

      letter-spacing: .3em;

      font-weight: 700;
    }

    .selector-header h2 {
      font-family:
        'Cormorant Garamond',
        serif;

      font-size: 1.7rem;

      font-weight: 300;
    }

    .selector-arrows {
      display: flex;
      gap: 7px;
    }

    .selector-arrows button {
      width: 37px;
      height: 37px;

      border-radius: 50%;

      border:
        1px solid var(--border);

      background:
        rgba(255,255,255,.04);

      color:
        rgba(255,255,255,.6);

      cursor: pointer;
    }

    .selector-arrows button:hover {
      background: var(--gold);
      color: var(--navy);
    }

    .experience-list {
      display: flex;

      align-items: stretch;

      gap: 11px;

      width: 100%;
    }

    .experience-card {
      position: relative;

      flex: 1 1 0;

      min-width: 0;

      height: 360px;

      overflow: hidden;

      border-radius: 18px;

      border:
        1px solid rgba(255,255,255,.1);

      text-decoration: none;

      box-shadow:
        0 22px 55px rgba(0,0,0,.28);

      transition:
        flex .5s var(--ease),
        transform .5s var(--ease);
    }

    .experience-card.active {
      flex: 1.55 1 0;

      transform:
        translateY(-10px);

      border-color:
        rgba(201,169,110,.4);
    }

    .experience-card-image {
      position: absolute;
      inset: 0;
    }

    .experience-card-image img {
      width: 100%;
      height: 100%;

      object-fit: cover;

      transition:
        transform .8s var(--ease);
    }

    .experience-card:hover
    .experience-card-image img,
    .experience-card.active
    .experience-card-image img {
      transform: scale(1.06);
    }

    .experience-card-overlay {
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          180deg,
          rgba(0,0,0,.08),
          rgba(0,0,0,.08) 40%,
          rgba(3,13,24,.94) 100%
        );
    }

    .experience-card-top {
      position: absolute;

      top: 16px;
      left: 16px;
      right: 16px;

      z-index: 3;

      display: flex;
      justify-content: space-between;
    }

    .experience-number {
      font-family:
        'Cormorant Garamond',
        serif;

      font-size: 1.1rem;
    }

    .experience-type {
      padding: 5px 9px;

      border-radius: 99px;

      border:
        1px solid rgba(255,255,255,.15);

      background:
        rgba(5,15,25,.3);

      font-size: .49rem;

      letter-spacing: .12em;

      text-transform: uppercase;
    }

    .experience-card-content {
      position: absolute;

      bottom: 0;
      left: 0;
      right: 0;

      z-index: 3;

      padding:
        21px 17px 18px;
    }

    .experience-card-content h3 {
      font-family:
        'Cormorant Garamond',
        serif;

      font-size:
        clamp(1.2rem,1.65vw,1.7rem);

      font-weight: 400;

      line-height: 1;

      text-transform: uppercase;
    }

    .experience-card-content h3 em {
      display: block;

      margin-top: 3px;

      color: var(--gold-light);

      font-style: italic;

      font-weight: 300;
    }

    .experience-bottom {
      margin-top: 16px;

      padding-top: 13px;

      border-top:
        1px solid rgba(255,255,255,.12);

      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .experience-price small {
      display: block;

      color:
        rgba(255,255,255,.35);

      font-size: .5rem;

      text-transform: uppercase;
    }

    .experience-price strong {
      font-family:
        'Cormorant Garamond',
        serif;

      font-size: 1.35rem;
    }

    .experience-price span {
      color:
        rgba(255,255,255,.35);

      font-size: .55rem;
    }

    .card-arrow {
      width: 32px;
      height: 32px;

      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      border:
        1px solid rgba(255,255,255,.2);

      font-size: .65rem;
    }

    .experience-card.active
    .card-arrow,
    .experience-card:hover
    .card-arrow {
      background: var(--gold);
      color: var(--navy);
    }


    /* =========================================================
       MOBILE EXPERIENCES
    ========================================================= */

    .mobile-experiences {
      display: none;
    }

    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
      background: #060F1A;

      border-top:
        1px solid rgba(201,169,110,.08);

      padding:
        52px 6% 110px;
    }

    .footer-grid {
      display: grid;

      grid-template-columns:
        repeat(auto-fit,minmax(200px,1fr));

      gap: 52px;

      margin-bottom: 44px;
    }

    .footer-col-label {
      font-size: .58rem;

      font-weight: 700;

      letter-spacing: 5px;

      text-transform: uppercase;

      color: var(--gold);

      margin-bottom: 18px;

      display: flex;
      align-items: center;

      gap: 10px;

      opacity: .7;
    }

    .footer-col-label::after {
      content: '';

      flex: 1;

      height: 2px;

      background:
        linear-gradient(
          90deg,
          rgba(201,169,110,.15),
          transparent
        );
    }

    .footer-text {
      font-size: .82rem;

      font-weight: 300;

      color:
        rgba(255,255,255,.4);

      line-height: 1.8;
    }

    .footer-text p {
      margin-bottom: 6px;
    }

    .footer-text a {
      color:
        rgba(255,255,255,.4);

      text-decoration: none;

      transition: .25s;
    }

    .footer-text a:hover {
      color: var(--gold-light);
    }

    .social-links {
      display: flex;

      gap: 16px;

      margin-top: 18px;
    }

    .social-links a {
      width: 40px;
      height: 40px;

      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      border:
        1px solid rgba(255,255,255,.06);

      color:
        rgba(255,255,255,.3);

      background:
        rgba(255,255,255,.02);

      transition: .25s;
    }

    .social-links a:hover {
      border-color: var(--gold);

      color: var(--gold);

      transform:
        translateY(-3px);
    }

    .footer-bottom {
      padding-top: 28px;

      border-top:
        1px solid rgba(255,255,255,.04);

      font-size: .72rem;

      font-weight: 300;

      color:
        rgba(255,255,255,.15);

      letter-spacing: .06em;

      display: flex;

      justify-content: space-between;
      align-items: center;
    }

    .footer-policy-link {
      color:
        rgba(255,255,255,.15);

      text-decoration: none;
    }


    /* =========================================================
       CHATBOT
    ========================================================= */

    .chatbot-button {
      position: fixed;

      right: 24px;

      bottom: 24px;

      z-index: 9999;

      width: 64px;
      height: 64px;

      border: none;

      border-radius: 50%;

      background:
        linear-gradient(
          135deg,
          var(--gold),
          #B8955E
        );

      color: var(--navy);

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;

      box-shadow:
        0 12px 35px rgba(0,0,0,.38),
        0 0 0 6px rgba(201,169,110,.08);

      transition:
        transform .3s var(--ease),
        box-shadow .3s;
    }

    .chatbot-button:hover {
      transform:
        translateY(-4px) scale(1.04);

      box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        0 0 0 8px rgba(201,169,110,.09);
    }

    .chatbot-button i {
      font-size: 23px;
    }

    .chatbot-pulse {
      position: absolute;

      right: 2px;
      top: 2px;

      width: 13px;
      height: 13px;

      border-radius: 50%;

      background: #38d98b;

      border: 3px solid var(--deep);
    }

    .chatbot-tooltip {
      position: fixed;

      right: 99px;

      bottom: 35px;

      z-index: 9998;

      padding:
        10px 15px;

      border-radius: 14px;

      background:
        rgba(6,18,31,.92);

      border:
        1px solid rgba(255,255,255,.1);

      backdrop-filter: blur(18px);

      color:
        rgba(255,255,255,.82);

      font-size: .72rem;

      box-shadow:
        0 10px 30px rgba(0,0,0,.3);

      transition:
        opacity .25s,
        transform .25s;
    }

    .chatbot-tooltip strong {
      color: var(--gold-light);
    }

    .chatbot-tooltip.hide {
      opacity: 0;

      pointer-events: none;

      transform:
        translateY(6px);
    }


    /* =========================================================
       MOBILE BOTTOM NAV
    ========================================================= */

    .mobile-bottom-nav {
      display: none;
    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (min-width:769px) and (max-width:1180px) {

      .desktop-nav {
        display: none;
      }

      .hero-copy {
        width: 42vw;
      }

      .experience-selector {
        width: 55vw;
        right: 3%;
      }

      .experience-card {
        height: 325px;
      }

    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width:768px) {

      .hero-background {
        height: 68svh;
        min-height: 520px;
      }

      .header {
        height: 76px;

        padding:
          0 17px;
      }

      .logo img {
        height: 37px;
      }

      .desktop-nav,
      .header-book {
        display: none;
      }

      .lang-button {
        width: 38px;
        height: 38px;
      }

      .hero {
        height: 68svh;

        min-height: 520px;

        padding:
          105px 19px 45px;

        align-items: flex-end;
      }

      .hero-copy {
        width: 100%;
      }

      .hero-index {
        position: static;

        margin-bottom: 8px;
      }

      .hero-index > span:first-child {
        font-size: 1.4rem;
      }

      .hero-topline {
        margin-bottom: 13px;

        font-size: .52rem;

        letter-spacing: .25em;
      }

      .hero-title {
        font-size:
          clamp(3.3rem,15vw,5.2rem);

        line-height: .82;
      }

      .hero-description {
        margin-top: 17px;

        max-width: 94%;

        font-size: .79rem;

        line-height: 1.65;
      }

      .hero-meta {
        display: none;
      }

      .hero-actions {
        margin-top: 20px;
      }

      .primary-button {
        min-height: 46px;

        padding: 0 18px;

        font-size: .6rem;
      }

      .secondary-button {
        min-height: 46px;

        padding: 0 17px;

        font-size: .6rem;
      }

      .experience-selector {
        display: none;
      }

      .mobile-experiences {
        display: block;

        position: relative;

        z-index: 10;

        padding:
          28px 0 60px;

        background:
          var(--deep);
      }

      .mobile-section-heading {
        padding:
          0 18px 18px;

        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .mobile-section-heading span {
        color: var(--gold);

        font-size: .53rem;

        letter-spacing: .24em;

        text-transform: uppercase;

        font-weight: 700;
      }

      .mobile-section-heading h2 {
        font-family:
          'Cormorant Garamond',
          serif;

        font-size: 2rem;

        font-weight: 300;
      }

      .mobile-section-heading a {
        color:
          rgba(255,255,255,.5);

        text-decoration: none;

        font-size: .62rem;

        text-transform: uppercase;
      }

      .mobile-card-track {
        display: flex;

        gap: 11px;

        overflow-x: auto;

        padding:
          0 18px 15px;

        scroll-snap-type:
          x mandatory;

        scrollbar-width: none;
      }

      .mobile-card-track::-webkit-scrollbar {
        display: none;
      }

      .mobile-card {
        flex:
          0 0 min(73vw,285px);

        height: 350px;

        position: relative;

        overflow: hidden;

        border-radius: 20px;

        scroll-snap-align: start;

        text-decoration: none;
      }

      .mobile-card img {
        width: 100%;
        height: 100%;

        object-fit: cover;
      }

      .mobile-card-shade {
        position: absolute;
        inset: 0;

        background:
          linear-gradient(
            180deg,
            rgba(0,0,0,.04),
            rgba(4,14,24,.94)
          );
      }

      .mobile-card-index {
        position: absolute;

        top: 15px;
        left: 15px;

        padding:
          6px 10px;

        border-radius: 999px;

        background:
          rgba(0,0,0,.25);

        border:
          1px solid rgba(255,255,255,.15);
      }

      .mobile-card-content {
        position: absolute;

        left: 18px;
        right: 18px;
        bottom: 20px;
      }

      .mobile-card-content > span {
        color: var(--gold);

        font-size: .52rem;

        text-transform: uppercase;

        letter-spacing: .18em;

        font-weight: 700;
      }

      .mobile-card-content h3 {
        margin-top: 6px;

        font-family:
          'Cormorant Garamond',
          serif;

        font-size: 1.7rem;

        line-height: .97;

        text-transform: uppercase;
      }

      .mobile-card-content strong {
        display: block;

        margin-top: 13px;

        padding-top: 11px;

        border-top:
          1px solid rgba(255,255,255,.13);

        color: var(--gold-light);
      }

      .why-section {
        padding:
          70px 6%;
      }

      .why-grid {
        grid-template-columns: 1fr;
      }

      .why-card {
        border-right: none;

        border-bottom:
          1px solid rgba(255,255,255,.06);
      }

      .why-card:last-child {
        border-bottom: none;
      }

      .final-cta {
        min-height: 520px;

        padding:
          75px 6% 90px;

        align-items: flex-end;

        background:
          linear-gradient(
            180deg,
            rgba(4,15,27,.12),
            rgba(4,15,27,.96)
          ),
          url('/images/group-images/12.webp');

        background-size: cover;
        background-position: center;
      }

      footer {
        padding:
          50px 6% 88px;
      }

      .footer-grid {
        gap: 36px;
      }

      .footer-bottom {
        flex-direction: column;

        gap: 10px;

        text-align: center;
      }

      .mobile-bottom-nav {
        position: fixed;

        left: 50%;

        bottom:
          calc(
            14px +
            env(safe-area-inset-bottom)
          );

        transform:
          translateX(-50%);

        z-index: 5000;

        display: flex;

        gap: 3px;

        padding: 6px;

        border-radius: 999px;

        border:
          1px solid rgba(255,255,255,.12);

        background:
          rgba(5,16,28,.85);

        backdrop-filter: blur(24px);

        white-space: nowrap;
      }

      .mobile-bottom-nav a {
        padding:
          9px 13px;

        border-radius: 999px;

        text-decoration: none;

        color:
          rgba(255,255,255,.52);

        font-size: .6rem;

        font-weight: 600;

        text-transform: uppercase;

        display: flex;

        gap: 6px;

        align-items: center;
      }

      .mobile-bottom-nav a.active {
        background:
          rgba(255,255,255,.08);

        color: #fff;
      }

      .mobile-bottom-nav .mobile-book {
        background: var(--gold);

        color: var(--navy);

        font-weight: 700;
      }

      .chatbot-button {
        right: 16px;

        bottom:
          calc(
            84px +
            env(safe-area-inset-bottom)
          );

        width: 58px;
        height: 58px;
      }

      .chatbot-tooltip {
        display: none;
      }

    }