/* =========================================================
   SIX NINE — GLOBAL RESPONSIVE
   File: assets/css/responsive/global-responsive.css
   ========================================================= */


/* =========================================================
   EXTRA LARGE
   ========================================================= */

@media (min-width: 1800px) {
  :root {
    --container-max: 1420px;
    --container-wide: 1720px;

    --gutter: 56px;
  }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (max-width: 1440px) {
  :root {
    --container-max: 1280px;
    --container-wide: 1380px;

    --gutter:
      clamp(
        24px,
        3vw,
        44px
      );
  }


  /* -------------------------------------------------------
     DISPLAY
     ------------------------------------------------------- */

  .display-xl {
    font-size:
      clamp(
        4rem,
        8vw,
        7.4rem
      );
  }

  .display-lg {
    font-size:
      clamp(
        3.1rem,
        6.3vw,
        5.9rem
      );
  }

  .display-md {
    font-size:
      clamp(
        2.5rem,
        4.5vw,
        4.4rem
      );
  }


  /* -------------------------------------------------------
     NAVBAR
     ------------------------------------------------------- */

  .navbar {
    gap: 26px;

    padding-left: 20px;
  }

  .navbar__menu {
    gap: 17px;
  }

  .navbar__link {
    font-size: 0.64rem;

    letter-spacing: 0.025em;
  }

  .navbar__booking {
    padding-inline: 18px;
  }
}


/* =========================================================
   DESKTOP / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1280px) {
  :root {
    --container-max: 1180px;
    --container-wide: 1220px;

    --section-space:
      clamp(
        88px,
        10vw,
        150px
      );

    --section-space-small:
      clamp(
        60px,
        7vw,
        96px
      );
  }


  /* -------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------- */

  .body-xl {
    font-size:
      clamp(
        1.04rem,
        1.25vw,
        1.22rem
      );
  }

  .body-lg {
    font-size:
      clamp(
        0.96rem,
        1.1vw,
        1.08rem
      );
  }
}


/* =========================================================
   NAVBAR COLLAPSE
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1180px) {
  :root {
    --navbar-height: 64px;
  }


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

  .site-header {
    padding:
      14px
      var(--gutter)
      0;
  }


  /* =======================================================
     NAVBAR
     ======================================================= */

  .navbar {
    grid-template-columns:
      auto
      auto;

    justify-content: space-between;

    gap: 24px;

    min-height: 64px;

    padding:
      8px
      8px
      8px
      20px;

    border-radius:
      var(--radius-pill);
  }


  /* Desktop navigation no longer forced */
  .navbar__menu {
    display: none;
  }

  .navbar__booking {
    display: none;
  }


  /* Mobile trigger */
  .navbar__toggle {
    display: inline-flex;
  }


  /* Brand */
  .navbar__brand
  .brand-wordmark {
    font-size: 1.75rem;
  }


  /* Scrolled */
  .site-header.is-scrolled
  .navbar {
    min-height: 60px;
  }


  /* =======================================================
     CONTAINERS
     ======================================================= */

  .container,
  .container-wide {
    width:
      min(
        calc(
          100% -
          (
            var(--gutter) * 2
          )
        ),
        100%
      );
  }
}


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

@media (max-width: 1024px) {
  :root {
    --gutter:
      clamp(
        22px,
        4vw,
        38px
      );

    --section-space:
      clamp(
        82px,
        10vw,
        130px
      );

    --section-space-small:
      clamp(
        56px,
        7vw,
        90px
      );
  }


  /* =======================================================
     DISPLAY
     ======================================================= */

  .display-xl {
    font-size:
      clamp(
        3.8rem,
        9vw,
        6.5rem
      );
  }

  .display-lg {
    font-size:
      clamp(
        3rem,
        7vw,
        5.3rem
      );
  }

  .display-md {
    font-size:
      clamp(
        2.4rem,
        5vw,
        4rem
      );
  }

  .heading-lg {
    font-size:
      clamp(
        2rem,
        4vw,
        3.3rem
      );
  }

  .heading-md {
    font-size:
      clamp(
        1.7rem,
        3vw,
        2.6rem
      );
  }


  /* =======================================================
     BODY
     ======================================================= */

  .body-xl {
    font-size:
      clamp(
        1.03rem,
        1.55vw,
        1.18rem
      );
  }

  .body-lg {
    font-size:
      clamp(
        0.95rem,
        1.35vw,
        1.05rem
      );
  }


  /* =======================================================
     BUTTONS
     ======================================================= */

  .btn {
    min-height: 47px;

    padding-inline: 20px;
  }


  /* =======================================================
     PRELOADER
     ======================================================= */

  .preloader__inner {
    width:
      min(
        460px,
        calc(
          100% - 48px
        )
      );
  }


  /* =======================================================
     FORMS
     ======================================================= */

  .form-control {
    min-height: 50px;
  }
}


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

@media (max-width: 768px) {
  :root {
    --navbar-top: 10px;
    --navbar-height: 58px;

    --gutter:
      clamp(
        18px,
        5vw,
        24px
      );

    --section-space:
      clamp(
        72px,
        18vw,
        104px
      );

    --section-space-small:
      clamp(
        50px,
        13vw,
        74px
      );
  }


  /* =======================================================
     DOCUMENT
     ======================================================= */

  html {
    scroll-padding-top: 80px;
  }

  body {
    font-size: 15px;
  }


  /* =======================================================
     CONTAINER
     ======================================================= */

  .container,
  .container-wide {
    width:
      calc(
        100% -
        (
          var(--gutter) * 2
        )
      );
  }

  .container-fluid {
    padding-inline:
      var(--gutter);
  }


  /* =======================================================
     DISPLAY
     ======================================================= */

  .display-xl {
    font-size:
      clamp(
        3.65rem,
        17vw,
        5.7rem
      );

    line-height: 0.87;
  }

  .display-lg {
    font-size:
      clamp(
        3rem,
        14vw,
        4.8rem
      );

    line-height: 0.9;
  }

  .display-md {
    font-size:
      clamp(
        2.45rem,
        11vw,
        3.8rem
      );

    line-height: 0.94;
  }

  .heading-lg {
    font-size:
      clamp(
        2.15rem,
        9vw,
        3.15rem
      );
  }

  .heading-md {
    font-size:
      clamp(
        1.8rem,
        7vw,
        2.5rem
      );
  }


  /* =======================================================
     BODY COPY
     ======================================================= */

  .body-xl {
    font-size: 1.04rem;

    line-height: 1.7;
  }

  .body-lg {
    font-size: 0.96rem;

    line-height: 1.7;
  }

  .body-md {
    font-size: 0.9rem;
  }

  .body-sm {
    font-size: 0.8rem;
  }


  /* =======================================================
     EYEBROW
     ======================================================= */

  .eyebrow {
    gap: 9px;

    font-size: 0.6rem;

    letter-spacing: 0.15em;
  }

  .eyebrow::before {
    width: 18px;
  }


  /* =======================================================
     BUTTONS
     ======================================================= */

  .btn {
    min-height: 48px;

    padding:
      0
      20px;

    font-size: 0.65rem;

    letter-spacing: 0.105em;
  }


  /* =======================================================
     LINK ARROW
     ======================================================= */

  .link-arrow {
    gap: 9px;

    font-size: 0.64rem;

    letter-spacing: 0.09em;
  }


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

  .site-header {
    padding:
      var(--navbar-top)
      12px
      0;
  }


  /* =======================================================
     NAVBAR
     ======================================================= */

  .site-header
  .container-wide {
    width: 100%;
  }

  .navbar {
    min-height: 58px;

    gap: 18px;

    padding:
      6px
      6px
      6px
      17px;

    border-color:
      rgba(
        255,
        255,
        255,
        0.1
      );

    background:
      rgba(
        10,
        10,
        11,
        0.82
      );

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

    backdrop-filter:
      blur(20px)
      saturate(120%);

    -webkit-backdrop-filter:
      blur(20px)
      saturate(120%);
  }

  .site-header.is-scrolled
  .navbar {
    min-height: 56px;
  }


  /* Brand */
  .navbar__brand
  .brand-wordmark {
    font-size: 1.55rem;
  }


  /* Toggle */
  .navbar__toggle {
    width: 44px;
    height: 44px;

    display: inline-flex;

    border-radius: 50%;
  }

  .navbar__toggle svg {
    width: 20px;
    height: 20px;
  }


  /* Desktop elements remain hidden */
  .navbar__menu,
  .navbar__booking {
    display: none;
  }


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

  .mobile-menu {
    width: 100%;

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

  .mobile-menu__header {
    min-height: 58px;

    padding-bottom: 20px;
  }

  .mobile-menu__header
  .brand-wordmark {
    font-size: 1.65rem;
  }

  .mobile-menu__close {
    width: 44px;
    height: 44px;
  }

  .mobile-menu__links {
    margin-top: 22px;
  }

  .mobile-menu__links a {
    min-height: 60px;

    font-size:
      clamp(
        1.55rem,
        7vw,
        1.95rem
      );
  }

  .mobile-menu__footer {
    padding-top: 26px;
  }


  /* =======================================================
     FORM
     ======================================================= */

  .form-group {
    gap: 8px;
  }

  .form-label {
    font-size: 0.61rem;
  }

  .form-control {
    min-height: 50px;

    padding:
      13px
      14px;

    font-size: 0.9rem;
  }

  textarea.form-control {
    min-height: 125px;
  }


  /* =======================================================
     PRELOADER
     ======================================================= */

  .preloader__inner {
    width:
      calc(
        100% -
        40px
      );
  }

  .preloader__brand {
    margin-bottom: 28px;

    font-size:
      clamp(
        3.2rem,
        17vw,
        5rem
      );
  }

  .preloader__meta {
    font-size: 0.57rem;
  }


  /* =======================================================
     SCROLLBAR
     ======================================================= */

  ::-webkit-scrollbar {
    width: 4px;
  }
}


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

@media (max-width: 480px) {
  :root {
    --gutter: 18px;

    --section-space: 76px;
    --section-space-small: 54px;
  }


  /* =======================================================
     TYPOGRAPHY
     ======================================================= */

  .display-xl {
    font-size:
      clamp(
        3.35rem,
        17vw,
        4.75rem
      );
  }

  .display-lg {
    font-size:
      clamp(
        2.8rem,
        14vw,
        4rem
      );
  }

  .display-md {
    font-size:
      clamp(
        2.3rem,
        11vw,
        3.3rem
      );
  }

  .heading-lg {
    font-size:
      clamp(
        2rem,
        9vw,
        2.8rem
      );
  }

  .heading-md {
    font-size:
      clamp(
        1.7rem,
        7vw,
        2.25rem
      );
  }


  /* =======================================================
     NAVBAR
     ======================================================= */

  .site-header {
    padding:
      8px
      10px
      0;
  }

  .navbar {
    min-height: 56px;

    padding:
      6px
      6px
      6px
      15px;
  }

  .navbar__brand
  .brand-wordmark {
    font-size: 1.45rem;
  }

  .navbar__toggle {
    width: 42px;
    height: 42px;
  }


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

  .mobile-menu {
    padding:
      16px
      16px
      calc(
        16px +
        env(safe-area-inset-bottom)
      );
  }

  .mobile-menu__header {
    padding-bottom: 17px;
  }

  .mobile-menu__links {
    margin-top: 16px;
  }

  .mobile-menu__links a {
    min-height: 56px;

    font-size:
      clamp(
        1.45rem,
        7vw,
        1.8rem
      );
  }

  .mobile-menu__links
  a span {
    font-size: 0.54rem;
  }


  /* =======================================================
     BUTTONS
     ======================================================= */

  .btn {
    min-height: 46px;

    padding:
      0
      17px;

    font-size: 0.62rem;
  }


  /* =======================================================
     FORM
     ======================================================= */

  .form-control {
    min-height: 48px;

    padding:
      12px
      13px;
  }

  textarea.form-control {
    min-height: 116px;
  }


  /* =======================================================
     PRELOADER
     ======================================================= */

  .preloader__inner {
    width:
      calc(
        100% -
        34px
      );
  }

  .preloader__brand {
    margin-bottom: 24px;
  }

  .preloader__meta {
    gap: 12px;

    font-size: 0.54rem;

    letter-spacing: 0.11em;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
  :root {
    --gutter: 16px;
  }


  .display-xl {
    font-size: 3.15rem;
  }

  .display-lg {
    font-size: 2.65rem;
  }

  .display-md {
    font-size: 2.15rem;
  }


  .navbar__brand
  .brand-wordmark {
    font-size: 1.35rem;
  }


  .mobile-menu__links a {
    min-height: 54px;

    font-size: 1.4rem;
  }


  .btn {
    padding-inline: 14px;
  }
}


/* =========================================================
   SHORT VIEWPORT
   ========================================================= */

@media (
  max-width: 768px
) and (
  max-height: 700px
) {
  .mobile-menu__header {
    padding-bottom: 14px;
  }

  .mobile-menu__links {
    margin-top: 12px;
  }

  .mobile-menu__links a {
    min-height: 50px;

    font-size: 1.4rem;
  }

  .mobile-menu__footer {
    padding-top: 18px;
  }
}


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

@media (
  max-width: 900px
) and (
  orientation: landscape
) {
  :root {
    --navbar-top: 8px;
  }


  /* =======================================================
     NAVBAR
     ======================================================= */

  .site-header {
    padding-top: 8px;
  }

  .navbar {
    min-height: 54px;
  }


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

  .mobile-menu {
    padding:
      14px
      20px;

    overflow-y: auto;
  }

  .mobile-menu__header {
    min-height: 50px;

    padding-bottom: 12px;
  }

  .mobile-menu__links {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    column-gap: 28px;

    margin-top: 12px;
  }

  .mobile-menu__links a {
    min-height: 48px;

    font-size: 1.25rem;
  }

  .mobile-menu__footer {
    padding-top: 14px;
  }

  .mobile-menu__footer
  .btn {
    min-height: 44px;
  }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) {
  .btn:hover {
    transform: none;
  }

  .navbar__booking:hover {
    transform: none;

    box-shadow: none;
  }

  .navbar__link:hover::after {
    opacity: 0;
  }
}


/* =========================================================
   HIGH CONTRAST
   ========================================================= */

@media (prefers-contrast: more) {
  .navbar {
    border-color:
      rgba(
        255,
        255,
        255,
        0.35
      );
  }

  .navbar__link {
    color:
      rgba(
        255,
        255,
        255,
        0.9
      );
  }

  .btn-outline-light {
    border-color:
      rgba(
        255,
        255,
        255,
        0.8
      );
  }

  .btn-outline-dark {
    border-color:
      rgba(
        12,
        12,
        13,
        0.8
      );
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .navbar,
  .navbar__toggle,
  .mobile-menu,
  .site-overlay,
  .btn,
  .link-arrow,
  [data-reveal] {
    transition: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;

    transform: none !important;
  }

  [data-parallax] {
    transform: none !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .site-header,
  .mobile-menu,
  .site-overlay,
  .preloader {
    display: none !important;
  }

  body {
    background:
      var(--color-white);

    color:
      var(--color-black);
  }

  main {
    overflow: visible;
  }

  [data-reveal] {
    opacity: 1 !important;

    transform: none !important;
  }
}

/* =========================================================
   MOBILE MENU LAYER FIX
   Keep the navigation above the blurred site overlay.
   ========================================================= */

.mobile-menu {
  z-index:
    calc(
      var(--z-overlay) + 20
    ) !important;
}

.site-overlay {
  z-index:
    var(--z-overlay) !important;
}

.site-header {
  z-index:
    var(--z-navbar);
}

body.menu-open
.site-header {
  pointer-events: none;
}