:root {

      --gold: #C9A96E;
      --gold-light: #E8D5B0;

      --navy: #0D2B45;
      --deep: #07182A;
      --deep-2: #05111E;

      --orange: #E07B4A;
      --green: #2DC4A0;

      --white: #FFFFFF;

      --text:
        rgba(255,255,255,.64);

      --muted:
        rgba(255,255,255,.38);

      --border:
        rgba(255,255,255,.09);

      --ease:
        cubic-bezier(.22,1,.36,1);

    }


    /* =========================================================
       RESET
    ========================================================= */

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }


    html {

      scroll-behavior: smooth;

    }


    body {

      min-height: 100vh;

      overflow-x: hidden;

      background: var(--deep);

      font-family:
        'Outfit',
        sans-serif;

      color: #fff;

      -webkit-font-smoothing:
        antialiased;

    }


    a {

      color: inherit;

    }


    button {

      font-family: inherit;

    }



    /* =========================================================
       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;

    }


    .site-logo {

      display: block;

      position: relative;

      z-index: 5;

    }


    .site-logo img {

      height: 46px;

      width: auto;

      display: block;

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

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

    }


    .site-logo:hover img {

      transform:
        scale(1.04);

    }



    /* DESKTOP NAV */

    .desktop-nav {

      position: absolute;

      left: 50%;
      top: 50%;

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

      display: flex;

      align-items: center;

      gap: 2px;

      padding: 6px;

      border-radius: 999px;

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

      background:
        rgba(4,16,28,.38);

      backdrop-filter:
        blur(18px);

      -webkit-backdrop-filter:
        blur(18px);

      box-shadow:
        0 12px 40px
        rgba(0,0,0,.15);

    }


    .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:
        all .25s ease;

    }


    .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,.13);

    }



    /* HEADER ACTIONS */

    .header-actions {

      display: flex;

      align-items: center;

      gap: 10px;

    }


    .header-book {

      height: 44px;

      padding:
        0 5px 0 20px;

      border-radius: 999px;

      display: inline-flex;

      align-items: center;

      gap: 14px;

      background:
        var(--gold);

      color:
        var(--navy);

      text-decoration: none;

      text-transform: uppercase;

      font-size: .68rem;

      font-weight: 700;

      letter-spacing: .08em;

      transition:
        transform .3s var(--ease),
        filter .3s;

    }


    .header-book:hover {

      transform:
        translateY(-2px);

      filter:
        brightness(1.06);

    }


    .header-book-icon {

      width: 34px;
      height: 34px;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

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

      font-size: .7rem;

    }



    /* LANGUAGE */

    .language-switcher {

      position: relative;

    }


    .lang-button {

      width: 42px;
      height: 42px;

      border-radius: 50%;

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

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

      backdrop-filter:
        blur(15px);

      -webkit-backdrop-filter:
        blur(15px);

      color: #fff;

      display: flex;

      align-items: center;

      justify-content: center;

      cursor: pointer;

      transition: .25s;

    }


    .lang-button:hover {

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

      border-color:
        rgba(255,255,255,.28);

    }


    .language-menu {

      position: absolute;

      right: 0;

      top: 54px;

      width: 155px;

      padding: 8px;

      border-radius: 16px;

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

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

      backdrop-filter:
        blur(22px);

      -webkit-backdrop-filter:
        blur(22px);

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

      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;

      font-size: .8rem;

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

      transition: .2s;

    }


    .language-menu a:hover {

      color: #fff;

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

    }



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

    .page-hero {

      position: relative;

      min-height: 56vh;

      min-height: 56svh;

      display: flex;

      align-items: flex-end;

      overflow: hidden;

      padding:
        130px 6% 64px;

      background:
        var(--deep);

    }


    .hero-bg-img {

      position: absolute;

      inset: 0;

      z-index: 0;

      background-image:
        url('/images/background/12.webp');

      background-size: cover;

      background-position:
        center 42%;

      transform:
        scale(1.025);

    }


    .hero-overlay {

      position: absolute;

      inset: 0;

      z-index: 1;

      background:

        linear-gradient(
          90deg,
          rgba(4,15,27,.87) 0%,
          rgba(4,15,27,.56) 44%,
          rgba(4,15,27,.18) 100%
        ),

        linear-gradient(
          180deg,
          rgba(4,15,27,.42) 0%,
          transparent 32%,
          rgba(4,15,27,.20) 60%,
          var(--deep) 100%
        );

    }


    .hero-glow {

      position: absolute;

      width: 420px;
      height: 420px;

      border-radius: 50%;

      left: -140px;
      bottom: -190px;

      z-index: 1;

      pointer-events: none;

      background:
        radial-gradient(
          circle,
          rgba(201,169,110,.13),
          transparent 68%
        );

    }


    .hero-content {

      position: relative;

      z-index: 3;

      width: 100%;

      max-width: 740px;

    }


    .hero-eyebrow {

      margin-bottom: 16px;

      display: flex;

      align-items: center;

      gap: 12px;

      color:
        var(--gold);

      font-size: .6rem;

      font-weight: 700;

      letter-spacing: .34em;

      text-transform: uppercase;

    }


    .eyebrow-line {

      width: 38px;

      height: 1px;

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

    }


    .hero-title {

      font-family:
        'Cormorant Garamond',
        serif;

      font-size:
        clamp(4rem,7.5vw,7.2rem);

      font-weight: 300;

      line-height: .84;

      letter-spacing:
        -.035em;

      color: #fff;

      text-shadow:
        0 8px 40px
        rgba(0,0,0,.25);

    }


    .hero-title em {

      display: block;

      margin-top: .06em;

      color:
        var(--gold-light);

      font-style: italic;

      font-weight: 300;

    }


    .hero-sub {

      margin-top: 22px;

      max-width: 500px;

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

      font-size: .9rem;

      font-weight: 300;

      line-height: 1.75;

    }


    .hero-summary {

      margin-top: 27px;

      display: flex;

      align-items: center;

      gap: 24px;

    }


    .hero-summary-item {

      display: flex;

      align-items: center;

      gap: 10px;

    }


    .hero-summary-item i {

      color:
        var(--gold);

      font-size: .78rem;

    }


    .hero-summary-item span {

      display: block;

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

      font-size: .53rem;

      letter-spacing: .1em;

      text-transform: uppercase;

      margin-bottom: 2px;

    }


    .hero-summary-item strong {

      display: block;

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

      font-size: .68rem;

      font-weight: 500;

    }


    .summary-divider {

      width: 1px;

      height: 35px;

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

    }



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

    .tours-section {

      position: relative;

      z-index: 5;

      padding:
        0 6% 110px;

      background:
        var(--deep);

    }


    .section-heading {

      padding:
        54px 0 38px;

      display: flex;

      align-items: flex-end;

      justify-content: space-between;

      gap: 30px;

    }


    .section-kicker {

      margin-bottom: 7px;

      color:
        var(--gold);

      font-size: .58rem;

      font-weight: 700;

      letter-spacing: .3em;

      text-transform: uppercase;

    }


    .section-heading h2 {

      font-family:
        'Cormorant Garamond',
        serif;

      font-size:
        clamp(2.4rem,4.8vw,4.3rem);

      font-weight: 300;

      line-height: .9;

    }


    .section-heading h2 em {

      color:
        var(--gold-light);

      font-style: italic;

      font-weight: 300;

    }


    .section-heading-description {

      max-width: 380px;

      padding-bottom: 4px;

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

      font-size: .78rem;

      line-height: 1.65;

      text-align: right;

    }



    /* =========================================================
       TOUR GRID
    ========================================================= */

    .tour-grid {

      display: grid;

      grid-template-columns:
        repeat(3,1fr);

      gap: 18px;

      max-width: 1500px;

      margin: auto;

    }


    .tour-card {

      --accent:
        var(--gold);

      position: relative;

      min-width: 0;

      overflow: hidden;

      display: flex;

      flex-direction: column;

      border-radius: 20px;

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

      background:
        linear-gradient(
          145deg,
          rgba(255,255,255,.035),
          rgba(255,255,255,.012)
        );

      text-decoration: none;

      box-shadow:
        0 18px 50px
        rgba(0,0,0,.18);

      transition:
        transform .45s var(--ease),
        border-color .3s,
        box-shadow .45s var(--ease);

    }


    .tour-card:hover {

      transform:
        translateY(-8px);

      border-color:
        color-mix(
          in srgb,
          var(--accent) 35%,
          transparent
        );

      box-shadow:
        0 28px 70px
        rgba(0,0,0,.32);

    }


    .card-t1 {

      --accent:
        var(--gold);

    }


    .card-t2 {

      --accent:
        var(--orange);

    }


    .card-t3 {

      --accent:
        var(--green);

    }



    /* CARD IMAGE */

    .card-image {

      position: relative;

      aspect-ratio:
        16 / 10;

      overflow: hidden;

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

    }


    .card-image video,
    .card-image img {

      width: 100%;
      height: 100%;

      display: block;

      object-fit: cover;

      transition:
        transform .75s var(--ease);

    }


    .tour-card:hover
    .card-image video,

    .tour-card:hover
    .card-image img {

      transform:
        scale(1.055);

    }


    .card-image::after {

      content: '';

      position: absolute;

      inset: 0;

      background:

        linear-gradient(
          180deg,
          rgba(0,0,0,.02),
          rgba(0,0,0,.08) 60%,
          rgba(5,17,30,.64)
        );

      pointer-events: none;

    }


    .card-number {

      position: absolute;

      z-index: 5;

      top: 15px;
      left: 15px;

      min-width: 36px;
      height: 36px;

      padding: 0 10px;

      border-radius: 999px;

      display: flex;

      align-items: center;

      justify-content: center;

      background:
        rgba(4,15,27,.34);

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

      backdrop-filter:
        blur(13px);

      -webkit-backdrop-filter:
        blur(13px);

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

      font-family:
        'Cormorant Garamond',
        serif;

      font-size: 1rem;

    }


    .card-chip {

      position: absolute;

      z-index: 5;

      top: 15px;
      right: 15px;

      padding:
        7px 11px;

      border-radius: 999px;

      background:
        rgba(4,15,27,.34);

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

      backdrop-filter:
        blur(13px);

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

      font-size: .5rem;

      font-weight: 600;

      letter-spacing: .12em;

      text-transform: uppercase;

    }



    /* CARD BODY */

    .card-body {

      padding:
        23px 23px 24px;

      flex: 1;

      display: flex;

      flex-direction: column;

    }


    .card-tag {

      margin-bottom: 9px;

      display: flex;

      align-items: center;

      gap: 8px;

      color:
        var(--accent);

      font-size: .53rem;

      font-weight: 700;

      letter-spacing: .24em;

      text-transform: uppercase;

    }


    .card-tag-dot {

      width: 5px;
      height: 5px;

      border-radius: 50%;

      flex-shrink: 0;

      background:
        var(--accent);

      box-shadow:
        0 0 12px
        color-mix(
          in srgb,
          var(--accent) 40%,
          transparent
        );

    }


    .card-title {

      margin-bottom: 10px;

      font-family:
        'Cormorant Garamond',
        serif;

      font-size:
        clamp(1.7rem,2.2vw,2.25rem);

      font-weight: 400;

      line-height: .95;

      color: #fff;

    }


    .card-title em {

      display: block;

      margin-top: 2px;

      color:
        var(--gold-light);

      font-style: italic;

      font-weight: 300;

    }


    .card-desc {

      flex: 1;

      margin-bottom: 22px;

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

      font-size: .79rem;

      font-weight: 300;

      line-height: 1.7;

    }


    .card-meta {

      display: flex;

      flex-wrap: wrap;

      gap: 7px;

      margin-bottom: 18px;

    }


    .card-meta span {

      padding:
        6px 9px;

      border-radius: 999px;

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

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

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

      font-size: .57rem;

      white-space: nowrap;

    }


    .card-meta i {

      margin-right: 5px;

      color:
        var(--accent);

    }


    .card-footer {

      padding-top: 16px;

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

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 14px;

    }


    .card-price {

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

      font-size: .61rem;

    }


    .card-price strong {

      display: block;

      margin-bottom: 2px;

      color: #fff;

      font-family:
        'Cormorant Garamond',
        serif;

      font-size: 1.45rem;

      font-weight: 400;

      line-height: 1;

    }


    .card-btn {

      min-height: 39px;

      padding:
        0 15px;

      border-radius: 999px;

      display: inline-flex;

      align-items: center;

      gap: 8px;

      border:
        1px solid
        color-mix(
          in srgb,
          var(--accent) 32%,
          transparent
        );

      background:
        color-mix(
          in srgb,
          var(--accent) 10%,
          transparent
        );

      color:
        var(--accent);

      font-size: .6rem;

      font-weight: 700;

      letter-spacing: .07em;

      text-transform: uppercase;

      transition: .25s;

    }


    .tour-card:hover
    .card-btn {

      background:
        var(--accent);

      color:
        #07182A;

      border-color:
        var(--accent);

    }


    .card-btn i {

      font-size: .56rem;

      transition:
        transform .25s;

    }


    .tour-card:hover
    .card-btn i {

      transform:
        translateX(3px);

    }



    /* =========================================================
       INFO STRIP
    ========================================================= */

    .info-strip {

      max-width: 1500px;

      margin:
        46px auto 0;

      padding:
        7px;

      border-radius: 19px;

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

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

    }


    .info-strip-inner {

      display: grid;

      grid-template-columns:
        repeat(4,1fr);

    }


    .info-cell {

      position: relative;

      min-width: 0;

      padding:
        26px 27px;

    }


    .info-cell:not(:last-child)::after {

      content: '';

      position: absolute;

      right: 0;

      top: 24%;

      width: 1px;

      height: 52%;

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

    }


    .info-label {

      margin-bottom: 6px;

      color:
        var(--gold);

      font-size: .52rem;

      font-weight: 700;

      letter-spacing: .21em;

      text-transform: uppercase;

    }


    .info-value {

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

      font-family:
        'Cormorant Garamond',
        serif;

      font-size: 1.22rem;

      font-weight: 400;

    }


    .info-value small {

      display: block;

      margin-top: 2px;

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

      font-family:
        'Outfit',
        sans-serif;

      font-size: .62rem;

      font-weight: 300;

    }



    /* =========================================================
       BOOKING CTA
    ========================================================= */

    .booking-card {

      position: relative;

      max-width: 1500px;

      margin:
        20px auto 0;

      overflow: hidden;

      padding:
        43px 45px;

      border-radius: 20px;

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 40px;

      border:
        1px solid
        rgba(201,169,110,.13);

      background:

        radial-gradient(
          circle at 88% 10%,
          rgba(201,169,110,.11),
          transparent 27%
        ),

        linear-gradient(
          135deg,
          rgba(201,169,110,.065),
          rgba(13,43,69,.29)
        );

    }


    .booking-card::before {

      content: '';

      position: absolute;

      width: 300px;
      height: 300px;

      border-radius: 50%;

      right: -120px;
      top: -155px;

      border:
        1px solid
        rgba(201,169,110,.07);

    }


    .booking-card-left {

      position: relative;

      z-index: 2;

      max-width: 690px;

    }


    .booking-card-kicker {

      margin-bottom: 10px;

      display: flex;

      align-items: center;

      gap: 9px;

      color:
        var(--gold);

      font-size: .55rem;

      font-weight: 700;

      letter-spacing: .25em;

      text-transform: uppercase;

    }


    .booking-card-title {

      margin-bottom: 10px;

      color: #fff;

      font-family:
        'Cormorant Garamond',
        serif;

      font-size:
        clamp(2rem,3.4vw,3.3rem);

      font-weight: 300;

      line-height: .95;

    }


    .booking-card-title em {

      color:
        var(--gold-light);

      font-style: italic;

      font-weight: 300;

    }


    .booking-card-desc {

      max-width: 610px;

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

      font-size: .8rem;

      font-weight: 300;

      line-height: 1.72;

    }


    .booking-btn {

      position: relative;

      z-index: 2;

      min-height: 49px;

      padding:
        0 23px;

      flex-shrink: 0;

      border-radius: 999px;

      display: inline-flex;

      align-items: center;

      gap: 13px;

      background:
        var(--gold);

      color:
        var(--navy);

      text-decoration: none;

      font-size: .66rem;

      font-weight: 700;

      letter-spacing: .09em;

      text-transform: uppercase;

      transition:
        transform .3s var(--ease),
        filter .3s;

    }


    .booking-btn:hover {

      transform:
        translateY(-3px);

      filter:
        brightness(1.06);

    }



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

    footer {

      position: relative;

      z-index: 5;

      padding:
        55px 6% 110px;

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

      background:
        #060F1A;

    }


    .footer-grid {

      display: grid;

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

      gap: 48px;

      max-width: 1500px;

      margin:
        0 auto 42px;

    }


    .footer-col-label {

      margin-bottom: 17px;

      display: flex;

      align-items: center;

      gap: 9px;

      color:
        var(--gold);

      font-size: .57rem;

      font-weight: 700;

      letter-spacing: .26em;

      text-transform: uppercase;

      opacity: .78;

    }


    .footer-col-label::after {

      content: '';

      height: 1px;

      flex: 1;

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

    }


    .footer-text {

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

      font-size: .79rem;

      font-weight: 300;

      line-height: 1.75;

    }


    .footer-text p {

      margin-bottom: 6px;

    }


    .footer-text a {

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

      text-decoration: none;

      transition:
        color .2s;

    }


    .footer-text a:hover {

      color:
        var(--gold-light);

    }


    .social-links {

      display: flex;

      gap: 12px;

      margin-top: 17px;

    }


    .social-links a {

      width: 38px;
      height: 38px;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

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

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

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

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

    }


    .social-links a:hover {

      color:
        var(--gold);

      border-color:
        var(--gold);

      transform:
        translateY(-3px);

    }


    .footer-bottom {

      max-width: 1500px;

      margin: auto;

      padding-top: 25px;

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

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 20px;

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

      font-size: .68rem;

      font-weight: 300;

      letter-spacing: .055em;

    }


    .footer-policy-link {

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

      text-decoration: none;

      transition: .2s;

    }


    .footer-policy-link:hover {

      color:
        var(--gold);

    }



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

    .chatbot-wrap {

      position: fixed;

      right: 24px;

      bottom: 24px;

      z-index: 9999;

      display: flex;

      align-items: center;

      gap: 11px;

    }


    .chatbot-label {

      padding:
        9px 13px;

      border-radius: 13px;

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

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

      backdrop-filter:
        blur(18px);

      -webkit-backdrop-filter:
        blur(18px);

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

      font-size: .66rem;

      box-shadow:
        0 10px 35px
        rgba(0,0,0,.32);

      opacity: 0;

      transform:
        translateX(8px);

      pointer-events: none;

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

    }


    .chatbot-wrap:hover
    .chatbot-label {

      opacity: 1;

      transform:
        translateX(0);

    }



    /* GOLD CHAT BUTTON */

    .chatbot-button {

      position: relative;

      width: 62px;

      height: 62px;

      flex-shrink: 0;

      padding: 0;

      border: none;

      border-radius: 50%;

      cursor: pointer;

      background:

        linear-gradient(
          145deg,
          #D9BB7B,
          #B88F4E
        );

      box-shadow:

        inset
        0 1px 1px
        rgba(255,255,255,.32),

        0 8px 24px
        rgba(0,0,0,.4),

        0 0 0 5px
        rgba(201,169,110,.07);

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

    }


    .chatbot-button:hover {

      transform:
        translateY(-4px)
        scale(1.03);

      box-shadow:

        inset
        0 1px 1px
        rgba(255,255,255,.35),

        0 13px 32px
        rgba(0,0,0,.45),

        0 0 0 7px
        rgba(201,169,110,.08);

    }



    /* CHAT BUBBLE 1 */

    .chat-bubble-a {

      position: absolute;

      width: 25px;
      height: 19px;

      left: 17px;
      top: 21px;

      border-radius:
        50%;

      background:
        #0D2B45;

    }


    .chat-bubble-a::after {

      content: '';

      position: absolute;

      left: 1px;
      bottom: -4px;

      width: 8px;
      height: 8px;

      background:
        #0D2B45;

      clip-path:
        polygon(
          0 0,
          100% 0,
          0 100%
        );

      transform:
        rotate(-8deg);

    }



    /* CHAT BUBBLE 2 */

    .chat-bubble-b {

      position: absolute;

      width: 21px;
      height: 16px;

      right: 15px;
      bottom: 17px;

      border-radius:
        50%;

      background:
        #0D2B45;

    }


    .chat-bubble-b::after {

      content: '';

      position: absolute;

      right: 1px;
      bottom: -4px;

      width: 7px;
      height: 7px;

      background:
        #0D2B45;

      clip-path:
        polygon(
          0 0,
          100% 0,
          100% 100%
        );

    }



    /* GREEN ONLINE DOT */

    .chat-online {

      position: absolute;

      top: 1px;
      right: 2px;

      width: 13px;
      height: 13px;

      border-radius: 50%;

      background:
        #33D69F;

      border:
        3px solid
        #07182A;

      box-shadow:
        0 0 0 2px
        rgba(201,169,110,.20);

    }



    /* =========================================================
       MINI CHAT PLACEHOLDER
    ========================================================= */

    .chat-panel {

      position: fixed;

      right: 24px;

      bottom: 99px;

      z-index: 9998;

      width: 300px;

      padding: 19px;

      border-radius: 19px;

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

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

      backdrop-filter:
        blur(22px);

      -webkit-backdrop-filter:
        blur(22px);

      box-shadow:
        0 24px 70px
        rgba(0,0,0,.48);

      opacity: 0;

      visibility: hidden;

      transform:
        translateY(12px)
        scale(.97);

      transform-origin:
        bottom right;

      transition:
        all .28s var(--ease);

    }


    .chat-panel.open {

      opacity: 1;

      visibility: visible;

      transform:
        translateY(0)
        scale(1);

    }


    .chat-panel-header {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 10px;

      margin-bottom: 11px;

    }


    .chat-panel-title {

      font-family:
        'Cormorant Garamond',
        serif;

      font-size: 1.3rem;

      font-weight: 400;

    }


    .chat-panel-status {

      display: flex;

      align-items: center;

      gap: 6px;

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

      font-size: .56rem;

    }


    .chat-panel-status::before {

      content: '';

      width: 6px;
      height: 6px;

      border-radius: 50%;

      background:
        #33D69F;

    }


    .chat-panel p {

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

      font-size: .72rem;

      line-height: 1.65;

    }


    .chat-panel-note {

      margin-top: 13px;

      padding:
        9px 11px;

      border-radius: 10px;

      background:
        rgba(201,169,110,.07);

      color:
        rgba(232,213,176,.65);

      font-size: .63rem;

    }



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

    .bottom-nav {

      display: none;

    }



    /* =========================================================
       FADE
    ========================================================= */

    .fade-up {

      opacity: 0;

      transform:
        translateY(25px);

      transition:

        opacity .8s ease,

        transform
        .8s
        cubic-bezier(
          .2,.9,.3,1
        );

    }


    .fade-up.visible {

      opacity: 1;

      transform:
        translateY(0);

    }



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

    @media (
      max-width: 1050px
    ) {

      .desktop-nav {

        display: none;

      }


      .tour-grid {

        grid-template-columns:
          repeat(2,1fr);

      }


      .tour-card:last-child {

        grid-column:
          span 2;

      }


      .tour-card:last-child
      .card-image {

        aspect-ratio:
          16 / 7;

      }


      .info-strip-inner {

        grid-template-columns:
          repeat(2,1fr);

      }


      .info-cell:nth-child(2)::after {

        display: none;

      }


      .info-cell:nth-child(-n+2) {

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

      }

    }



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

    @media (
      max-width: 768px
    ) {

      body {

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

      }


      /* HEADER */

      .header {

        height: 76px;

        padding:
          0 16px;

      }


      .site-logo img {

        height: 37px;

      }


      .desktop-nav,
      .header-book {

        display: none;

      }


      .lang-button {

        width: 38px;

        height: 38px;

      }



      /* HERO
         IMPORTANT:
         title sits LOWER,
         not pushed up
      */

      .page-hero {

        min-height: 54svh;

        padding:
          95px 5%
          38px;

        align-items:
          flex-end;

      }


      .hero-bg-img {

        background-position:
          center 43%;

      }


      .hero-overlay {

        background:

          linear-gradient(
            180deg,
            rgba(4,15,27,.34) 0%,
            rgba(4,15,27,.12) 28%,
            rgba(4,15,27,.53) 65%,
            var(--deep) 100%
          );

      }


      .hero-eyebrow {

        margin-bottom:
          11px;

        font-size:
          .51rem;

        letter-spacing:
          .26em;

      }


      .eyebrow-line {

        width: 27px;

      }


      .hero-title {

        max-width:
          95%;

        font-size:
          clamp(
            3.2rem,
            14vw,
            4.8rem
          );

        line-height:
          .84;

      }


      .hero-sub {

        max-width:
          94%;

        margin-top:
          15px;

        font-size:
          .77rem;

        line-height:
          1.62;

      }


      .hero-summary {

        margin-top:
          17px;

        gap: 15px;

      }


      .hero-summary-item span {

        font-size:
          .49rem;

      }


      .hero-summary-item strong {

        font-size:
          .62rem;

      }



      /* SECTION */

      .tours-section {

        padding:
          0 5% 75px;

      }


      .section-heading {

        padding:
          38px 0
          25px;

      }


      .section-heading-description {

        display: none;

      }


      .section-heading h2 {

        font-size:
          2.5rem;

      }



      /* CARDS */

      .tour-grid {

        grid-template-columns:
          1fr;

        gap: 15px;

      }


      .tour-card:last-child {

        grid-column: auto;

      }


      .tour-card:last-child
      .card-image {

        aspect-ratio:
          16 / 10;

      }


      .tour-card {

        border-radius:
          17px;

      }


      .card-body {

        padding:
          20px
          19px
          21px;

      }


      .card-title {

        font-size:
          1.75rem;

      }


      .card-desc {

        margin-bottom:
          16px;

        font-size:
          .76rem;

      }


      .card-meta {

        margin-bottom:
          14px;

      }



      /* INFO */

      .info-strip {

        margin-top:
          30px;

      }


      .info-strip-inner {

        grid-template-columns:
          1fr 1fr;

      }


      .info-cell {

        padding:
          18px 14px;

      }


      .info-cell:nth-child(2)::after {

        display: none;

      }


      .info-cell:nth-child(-n+2) {

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

      }



      /* BOOK CTA */

      .booking-card {

        padding:
          28px 21px;

        flex-direction:
          column;

        align-items:
          flex-start;

        gap: 24px;

      }


      .booking-btn {

        width: 100%;

        justify-content:
          center;

      }



      /* FOOTER */

      footer {

        padding:
          48px 6%
          115px;

      }


      .footer-grid {

        gap: 34px;

      }


      .footer-bottom {

        flex-direction:
          column;

        text-align:
          center;

        gap: 9px;

      }



      /* BOTTOM NAV */

      .bottom-nav {

        position: fixed;

        left: 50%;

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

        transform:
          translateX(-50%);

        z-index: 5000;

        display: flex;

        align-items: center;

        gap: 3px;

        padding:
          6px;

        border-radius:
          999px;

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

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

        backdrop-filter:
          blur(24px);

        -webkit-backdrop-filter:
          blur(24px);

        box-shadow:
          0 14px 42px
          rgba(0,0,0,.4);

        white-space:
          nowrap;

      }


      .nav-link {

        padding:
          9px 13px;

        border-radius:
          999px;

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

        text-decoration: none;

        font-size:
          .59rem;

        font-weight: 600;

        letter-spacing:
          .04em;

        text-transform:
          uppercase;

      }


      .nav-link.active {

        color: #fff;

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

      }


      .nav-link.primary {

        color:
          var(--navy);

        background:
          var(--gold);

        font-weight:
          700;

      }


      .nav-divider {

        width: 1px;

        height: 16px;

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

      }



      /* CHATBOT */

      .chatbot-wrap {

        right: 15px;

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

      }


      .chatbot-button {

        width: 57px;

        height: 57px;

      }


      .chat-bubble-a {

        width: 23px;

        height: 17px;

        left: 16px;

        top: 20px;

      }


      .chat-bubble-b {

        width: 19px;

        height: 15px;

        right: 14px;

        bottom: 16px;

      }


      .chatbot-label {

        display: none;

      }


      .chat-panel {

        right: 14px;

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

        width:
          min(
            300px,
            calc(100vw - 28px)
          );

      }

    }



    /* =========================================================
       SMALL MOBILE / IPHONE
    ========================================================= */

    @media (
      max-width: 480px
    ) {

      /*
       * THIS REPLACES THE OLD
       * 100px BOTTOM PADDING.
       *
       * Keeps title lower.
       */

      .page-hero {

        min-height:
          52svh;

        padding:
          88px 5%
          32px;

      }


      .hero-title {

        font-size:
          clamp(
            3rem,
            14vw,
            4rem
          );

      }


      .hero-sub {

        font-size:
          .74rem;

      }


      .hero-summary {

        display: none;

      }


      .card-image {

        aspect-ratio:
          16 / 10.8;

      }


      .card-footer {

        align-items:
          center;

      }


      .card-btn {

        min-height:
          38px;

        padding:
          0 13px;

      }


      .info-strip-inner {

        grid-template-columns:
          1fr;

      }


      .info-cell {

        padding:
          14px 12px;

      }


      .info-cell::after {

        display: none !important;

      }


      .info-cell:not(:last-child) {

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

      }


      .booking-card-title {

        font-size:
          2rem;

      }

    }