/* =========================================================
   SIX NINE — HOME RESPONSIVE
   File: assets/css/responsive/home-responsive.css
   ========================================================= */


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1280px) {
  /* =======================================================
     HERO
     ======================================================= */

  .home-hero__content {
    padding:
      170px
      0
      72px;
  }

  .home-hero__title {
    font-size:
      clamp(
        5.5rem,
        12vw,
        11rem
      );
  }

  .home-hero__scroll {
    right: 28px;
    bottom: 72px;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .home-intro {
    padding:
      110px
      0
      180px;
  }

  .home-intro__grid {
    gap: 100px;
  }

  .home-intro__photo--large {
    min-height: 620px;
  }

  .home-intro__photo--large img {
    min-height: 620px;
  }

  .home-intro__photo--small {
    min-height: 300px;
  }

  .home-intro__photo--small img {
    min-height: 300px;
  }


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

  .home-experiences {
    padding:
      100px
      0
      160px;
  }

  .home-section-header {
    margin-bottom: 120px;
  }

  .home-experience {
    gap: 90px;

    margin-bottom: 170px;
  }

  .home-experience__visual {
    min-height: 650px;
  }


  /* =======================================================
     EDITORIAL STRIP
     ======================================================= */

  .home-editorial-strip {
    margin-bottom: 170px;
  }

  .home-editorial-strip__item {
    min-height: 330px;
  }

  .home-editorial-strip__item--wide {
    min-height: 420px;
  }


  /* =======================================================
     PRIVATE
     ======================================================= */

  .home-private {
    margin-bottom: 180px;
  }

  .home-private-card__media {
    min-height: 540px;
  }


  /* =======================================================
     PILATES
     ======================================================= */

  .home-pilates {
    min-height: 700px;
  }


  /* =======================================================
     GALLERY
     ======================================================= */

  .home-gallery {
    padding:
      110px
      0
      180px;
  }

  .home-gallery__item--portrait {
    min-height: 600px;
  }

  .home-gallery__item--wide,
  .home-gallery__item--square {
    min-height: 300px;
  }

  .home-gallery__item--landscape {
    min-height: 380px;
  }


  /* =======================================================
     FACILITIES
     ======================================================= */

  .home-facilities {
    padding:
      100px
      0
      160px;
  }


  /* =======================================================
     LOCATION
     ======================================================= */

  .home-location__layout,
  .home-location__media {
    min-height: 680px;
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .home-photo-break {
    min-height: 78svh;
  }


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

  .site-footer__top {
    gap: 58px;
  }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1024px) {
  /* =======================================================
     HERO
     ======================================================= */

  .home-hero {
    min-height: 92svh;
  }

  .home-hero__content {
    padding:
      150px
      0
      64px;
  }

  .home-hero__title {
    font-size:
      clamp(
        4.8rem,
        11vw,
        8rem
      );
  }

  .home-hero__bottom {
    gap: 40px;
  }

  .home-hero__scroll {
    display: none;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .home-intro {
    padding:
      100px
      0
      150px;
  }

  .home-intro__grid {
    grid-template-columns:
      0.8fr
      1.2fr;

    gap: 64px;
  }

  .home-intro__gallery {
    grid-template-columns:
      1.25fr
      0.75fr;
  }

  .home-intro__photo--large,
  .home-intro__photo--large img {
    min-height: 560px;
  }

  .home-intro__photo--small,
  .home-intro__photo--small img {
    min-height: 270px;
  }


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

  .home-section-header {
    grid-template-columns:
      1fr
      0.48fr;

    gap: 56px;

    margin-bottom: 96px;
  }


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

  .home-experience {
    grid-template-columns:
      1.1fr
      0.9fr;

    gap: 56px;

    margin-bottom: 140px;
  }

  .home-experience--reverse {
    grid-template-columns:
      0.9fr
      1.1fr;
  }

  .home-experience__visual {
    min-height: 560px;
  }


  /* =======================================================
     EDITORIAL STRIP
     ======================================================= */

  .home-editorial-strip {
    grid-template-columns:
      1.3fr
      0.85fr
      0.85fr;

    gap: 10px;

    margin-bottom: 140px;
  }

  .home-editorial-strip__item {
    min-height: 300px;
  }

  .home-editorial-strip__item--wide {
    min-height: 380px;
  }


  /* =======================================================
     PRIVATE
     ======================================================= */

  .home-private {
    margin-bottom: 150px;
  }

  .home-private__header {
    grid-template-columns:
      1fr
      0.55fr;

    gap: 56px;
  }

  .home-private-card__media {
    min-height: 470px;
  }


  /* =======================================================
     PILATES
     ======================================================= */

  .home-pilates {
    min-height: 620px;
  }

  .home-pilates__content {
    padding: 56px;
  }


  /* =======================================================
     GALLERY
     ======================================================= */

  .home-gallery__header {
    grid-template-columns:
      1fr
      0.48fr;

    gap: 56px;
  }

  .home-gallery__item--portrait {
    min-height: 520px;
  }

  .home-gallery__item--wide,
  .home-gallery__item--square {
    min-height: 260px;
  }

  .home-gallery__item--landscape {
    min-height: 340px;
  }


  /* =======================================================
     FACILITIES
     ======================================================= */

  .home-facilities__grid {
    grid-template-columns:
      0.75fr
      1.25fr;

    gap: 70px;
  }


  /* =======================================================
     LOCATION
     ======================================================= */

  .home-location__layout {
    grid-template-columns:
      1.08fr
      0.92fr;

    min-height: 600px;
  }

  .home-location__media {
    min-height: 600px;
  }

  .home-location__content {
    padding: 54px;
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .home-photo-break {
    min-height: 70svh;
  }


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

  .site-footer__top {
    grid-template-columns: 1fr;

    gap: 56px;
  }

  .site-footer__nav {
    gap: 26px;
  }
}


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

@media (max-width: 768px) {
  .home-page main {
    overflow: hidden;
  }


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

  .brand-wordmark {
    font-size: 1.55rem;
  }

  .mobile-menu {
    width: 100%;

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

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

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

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

    font-size: 1.55rem;
  }


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

  .home-hero {
    min-height: 100svh;
  }

  .home-hero__media img {
    inset:
      -3%
      0;

    height: 106%;

    object-position: center;
  }

  .home-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(12, 12, 13, 0.14) 0%,
        rgba(12, 12, 13, 0.18) 32%,
        rgba(12, 12, 13, 0.58) 70%,
        rgba(12, 12, 13, 0.92) 100%
      );
  }

  .home-hero__content {
    min-height: 100svh;

    align-content: end;

    gap: 20px;

    padding:
      calc(
        108px +
        env(safe-area-inset-top)
      )
      0
      42px;
  }

  .home-hero__title {
    font-size:
      clamp(
        4.6rem,
        21vw,
        7rem
      );

    line-height: 0.79;
  }

  .home-hero__bottom {
    align-items: flex-start;
    flex-direction: column;

    gap: 24px;

    margin-top: 4px;
  }

  .home-hero__bottom > p {
    font-size: 1rem;
  }

  .home-hero__actions {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
  }

  .home-hero__actions .btn {
    width: 100%;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .home-intro {
    padding:
      82px
      0
      104px;
  }

  .home-intro__grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .home-intro__copy {
    gap: 22px;
  }

  .home-intro__copy > p {
    max-width: 100%;
  }

  .home-intro__gallery {
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(120px, 0.75fr);

    gap: 9px;
  }

  .home-intro__photo--large,
  .home-intro__photo--large img {
    min-height: 470px;
  }

  .home-intro__photo--small,
  .home-intro__photo--small img {
    min-height: 230px;
  }

  .home-intro__statement {
    padding:
      18px
      2px;
  }

  .home-intro__statement span {
    font-size:
      clamp(
        1.3rem,
        6vw,
        1.8rem
      );
  }


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

  .home-experiences {
    padding:
      78px
      0
      100px;
  }

  .home-section-header {
    grid-template-columns: 1fr;

    gap: 26px;

    margin-bottom: 70px;
  }

  .home-section-header > p {
    max-width: 100%;
  }


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

  .home-experience,
  .home-experience--reverse {
    grid-template-columns: 1fr;

    gap: 34px;

    margin-bottom: 100px;
  }

  .home-experience--reverse
  .home-experience__visual,
  .home-experience--reverse
  .home-experience__content {
    order: initial;
  }

  .home-experience__visual {
    min-height: 500px;
  }

  .home-experience__content {
    gap: 20px;
  }

  .home-experience__content > p {
    max-width: 100%;
  }

  .home-experience__index {
    top: 18px;
    left: 18px;

    min-width: 38px;
    height: 38px;
  }

  .home-experience__meta {
    max-width: 100%;
  }


  /* =======================================================
     EDITORIAL STRIP
     ======================================================= */

  .home-editorial-strip {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 8px;

    margin:
      -36px
      0
      104px;
  }

  .home-editorial-strip__item {
    min-height: 230px;
  }

  .home-editorial-strip__item--wide {
    grid-column:
      1
      / -1;

    min-height: 360px;
  }


  /* =======================================================
     PRIVATE
     ======================================================= */

  .home-private {
    margin-bottom: 110px;
  }

  .home-private__header {
    grid-template-columns: 1fr;

    gap: 28px;

    margin-bottom: 38px;
  }

  .home-private__copy {
    gap: 20px;
  }

  .home-private__copy > p {
    max-width: 100%;
  }

  .home-private__grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .home-private-card__media {
    min-height: 460px;
  }

  .home-private-card__content {
    left: 20px;
    right: 20px;
    bottom: 20px;

    gap:
      8px
      16px;
  }

  .home-private-card__content strong {
    max-width: 290px;

    font-size:
      clamp(
        2rem,
        10vw,
        3rem
      );
  }


  /* =======================================================
     PILATES
     ======================================================= */

  .home-pilates {
    min-height: 600px;

    align-items: flex-end;
  }

  .home-pilates__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(12, 12, 13, 0.14) 20%,
        rgba(12, 12, 13, 0.84) 100%
      );
  }

  .home-pilates__content {
    width: 100%;

    max-width: none;

    padding: 28px 22px 34px;
  }

  .home-pilates__content .btn {
    width: 100%;
  }


  /* =======================================================
     GALLERY
     ======================================================= */

  .home-gallery {
    padding:
      82px
      0
      100px;
  }

  .home-gallery__header {
    grid-template-columns: 1fr;

    gap: 26px;

    margin-bottom: 44px;
  }

  .home-gallery__header > p {
    max-width: 100%;
  }

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

    gap: 7px;
  }

  .home-gallery__item--portrait {
    grid-column: span 1;
    grid-row: auto;

    min-height: 420px;
  }

  .home-gallery__item--wide {
    grid-column:
      1
      / -1;

    min-height: 260px;
  }

  .home-gallery__item--square {
    grid-column: span 1;

    min-height: 260px;
  }

  .home-gallery__item--landscape {
    grid-column:
      1
      / -1;

    min-height: 300px;
  }

  .home-gallery__item:not(
    .home-gallery__item--portrait,
    .home-gallery__item--wide,
    .home-gallery__item--square,
    .home-gallery__item--landscape
  ) {
    grid-column: span 1;

    min-height: 270px;
  }


  /* =======================================================
     FACILITIES
     ======================================================= */

  .home-facilities {
    padding:
      82px
      0
      100px;
  }

  .home-facilities__grid {
    grid-template-columns: 1fr;

    gap: 46px;
  }

  .home-facilities__header {
    position: static;
  }

  .home-facilities__list span {
    min-height: 62px;

    padding:
      15px
      36px
      15px
      0;

    font-size:
      clamp(
        1.35rem,
        6vw,
        1.8rem
      );
  }


  /* =======================================================
     LOCATION
     ======================================================= */

  .home-location__layout {
    grid-template-columns: 1fr;

    min-height: 0;
  }

  .home-location__media {
    min-height: 500px;
  }

  .home-location__content {
    gap: 22px;

    padding:
      62px
      22px
      76px;
  }

  .home-location__content address {
    max-width: 100%;
  }

  .home-location__actions {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .home-location__actions .btn {
    width: 100%;
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .home-photo-break {
    min-height: 68svh;
  }

  .home-photo-break > img {
    inset:
      -2%
      0;

    height: 104%;
  }

  .home-photo-break__caption {
    grid-template-columns:
      repeat(
        5,
        auto
      );

    gap: 0;

    padding:
      20px
      12px;

    overflow-x: auto;

    scrollbar-width: none;
  }

  .home-photo-break__caption::-webkit-scrollbar {
    display: none;
  }

  .home-photo-break__caption span {
    min-width: 118px;

    padding:
      0
      14px;

    font-size:
      clamp(
        1.25rem,
        6vw,
        1.7rem
      );

    white-space: nowrap;
  }


  /* =======================================================
     FINAL CTA
     ======================================================= */

  .home-final {
    padding:
      105px
      0;
  }

  .home-final__inner {
    gap: 24px;
  }

  .home-final__actions {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;
  }

  .home-final__actions .btn {
    width: 100%;
  }


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

  .site-footer {
    padding:
      58px
      0
      calc(
        92px +
        env(safe-area-inset-bottom)
      );
  }

  .site-footer__top {
    gap: 48px;

    padding-bottom: 50px;
  }

  .site-footer__wordmark {
    font-size:
      clamp(
        3.8rem,
        19vw,
        6rem
      );
  }

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

    gap:
      40px
      26px;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;

    gap: 8px;
  }


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

  .mobile-booking-cta {
    display: block;
  }

  .mobile-booking-cta .btn {
    width: 100%;
  }
}


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

@media (max-width: 480px) {
  /* =======================================================
     MOBILE MENU
     ======================================================= */

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

    font-size: 1.42rem;
  }


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

  .home-hero__content {
    padding-top:
      calc(
        100px +
        env(safe-area-inset-top)
      );

    padding-bottom: 34px;
  }

  .home-hero__title {
    font-size:
      clamp(
        4rem,
        21vw,
        5.7rem
      );
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .home-intro {
    padding:
      72px
      0
      92px;
  }

  .home-intro__gallery {
    grid-template-columns:
      minmax(0, 1.3fr)
      minmax(95px, 0.7fr);

    gap: 7px;
  }

  .home-intro__photo--large,
  .home-intro__photo--large img {
    min-height: 400px;
  }

  .home-intro__photo--small,
  .home-intro__photo--small img {
    min-height: 195px;
  }

  .home-intro__statement {
    padding:
      12px
      0;
  }

  .home-intro__statement span {
    font-size:
      clamp(
        1.15rem,
        5.8vw,
        1.55rem
      );
  }


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

  .home-experiences {
    padding:
      70px
      0
      88px;
  }

  .home-section-header {
    margin-bottom: 58px;
  }

  .home-experience {
    margin-bottom: 88px;
  }

  .home-experience__visual {
    min-height: 420px;
  }


  /* =======================================================
     EDITORIAL STRIP
     ======================================================= */

  .home-editorial-strip {
    margin:
      -26px
      0
      90px;
  }

  .home-editorial-strip__item {
    min-height: 190px;
  }

  .home-editorial-strip__item--wide {
    min-height: 300px;
  }


  /* =======================================================
     PRIVATE
     ======================================================= */

  .home-private {
    margin-bottom: 96px;
  }

  .home-private-card__media {
    min-height: 390px;
  }

  .home-private-card__content {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }


  /* =======================================================
     PILATES
     ======================================================= */

  .home-pilates {
    min-height: 520px;
  }


  /* =======================================================
     GALLERY
     ======================================================= */

  .home-gallery {
    padding:
      72px
      0
      88px;
  }

  .home-gallery__grid {
    gap: 5px;
  }

  .home-gallery__item--portrait {
    min-height: 350px;
  }

  .home-gallery__item--wide {
    min-height: 220px;
  }

  .home-gallery__item--square {
    min-height: 220px;
  }

  .home-gallery__item--landscape {
    min-height: 250px;
  }

  .home-gallery__item:not(
    .home-gallery__item--portrait,
    .home-gallery__item--wide,
    .home-gallery__item--square,
    .home-gallery__item--landscape
  ) {
    min-height: 230px;
  }


  /* =======================================================
     FACILITIES
     ======================================================= */

  .home-facilities {
    padding:
      72px
      0
      88px;
  }

  .home-facilities__list span {
    min-height: 58px;

    font-size:
      clamp(
        1.25rem,
        6vw,
        1.6rem
      );
  }


  /* =======================================================
     LOCATION
     ======================================================= */

  .home-location__media {
    min-height: 420px;
  }

  .home-location__content {
    padding:
      54px
      18px
      68px;
  }


  /* =======================================================
     PHOTO BREAK
     ======================================================= */

  .home-photo-break {
    min-height: 60svh;
  }

  .home-photo-break__caption {
    padding:
      18px
      8px;
  }

  .home-photo-break__caption span {
    min-width: 104px;

    font-size: 1.2rem;
  }


  /* =======================================================
     FINAL
     ======================================================= */

  .home-final {
    padding:
      90px
      0;
  }


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

  .site-footer__nav {
    grid-template-columns: 1fr;

    gap: 34px;
  }


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

  .mobile-booking-cta {
    padding:
      8px
      10px
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
  }

  .mobile-booking-cta .btn {
    min-height: 46px;
  }
}


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

@media (max-width: 360px) {
  .home-hero__title {
    font-size: 3.75rem;
  }

  .home-intro__photo--large,
  .home-intro__photo--large img {
    min-height: 360px;
  }

  .home-intro__photo--small,
  .home-intro__photo--small img {
    min-height: 175px;
  }

  .home-experience__visual {
    min-height: 380px;
  }

  .home-private-card__media {
    min-height: 350px;
  }

  .home-pilates {
    min-height: 480px;
  }

  .home-gallery__item--portrait {
    min-height: 320px;
  }

  .home-location__media {
    min-height: 380px;
  }
}


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

@media (
  max-width: 768px
) and (
  max-height: 700px
) {
  .home-hero__content {
    padding-top: 96px;
  }

  .home-hero__title {
    font-size:
      clamp(
        3.8rem,
        16vw,
        5rem
      );
  }

  .home-hero__bottom {
    gap: 18px;
  }
}


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

@media (
  max-width: 900px
) and (
  orientation: landscape
) {
  /* =======================================================
     HERO
     ======================================================= */

  .home-hero {
    min-height: 100svh;
  }

  .home-hero__content {
    min-height: 100svh;

    padding:
      100px
      0
      34px;
  }

  .home-hero__title {
    font-size:
      clamp(
        4rem,
        11vw,
        6rem
      );
  }

  .home-hero__bottom {
    flex-direction: row;

    align-items: flex-end;
  }

  .home-hero__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .home-intro__grid {
    grid-template-columns:
      0.8fr
      1.2fr;
  }


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

  .home-experience,
  .home-experience--reverse {
    grid-template-columns:
      1.05fr
      0.95fr;

    gap: 44px;
  }

  .home-experience--reverse
  .home-experience__visual {
    order: 2;
  }

  .home-experience--reverse
  .home-experience__content {
    order: 1;
  }

  .home-experience__visual {
    min-height: 430px;
  }


  /* =======================================================
     PRIVATE
     ======================================================= */

  .home-private__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .home-private-card__media {
    min-height: 400px;
  }


  /* =======================================================
     GALLERY
     ======================================================= */

  .home-gallery__grid {
    grid-template-columns:
      repeat(
        12,
        minmax(0, 1fr)
      );
  }

  .home-gallery__item--portrait {
    grid-column: span 4;

    min-height: 460px;
  }

  .home-gallery__item--wide {
    grid-column: span 8;

    min-height: 230px;
  }

  .home-gallery__item--square {
    grid-column: span 4;

    min-height: 230px;
  }

  .home-gallery__item--landscape {
    grid-column: span 6;

    min-height: 300px;
  }


  /* =======================================================
     FACILITIES
     ======================================================= */

  .home-facilities__grid {
    grid-template-columns:
      0.75fr
      1.25fr;
  }

  .home-facilities__header {
    position: sticky;

    top: 90px;
  }


  /* =======================================================
     LOCATION
     ======================================================= */

  .home-location__layout {
    grid-template-columns:
      1.05fr
      0.95fr;
  }

  .home-location__media {
    min-height: 520px;
  }


  /* =======================================================
     FINAL
     ======================================================= */

  .home-final__actions {
    grid-template-columns:
      auto
      auto;

    width: auto;
  }
}


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

@media (hover: none) {
  .home-intro__photo img,
  .home-editorial-strip__item img,
  .home-private-card__media img,
  .home-gallery__item img {
    transform: none !important;
  }

  .home-private-card__content svg {
    transform: none !important;
  }
}


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

@media (
  prefers-reduced-motion: reduce
) {
  .home-hero__media img,
  .home-intro__photo img,
  .home-experience__visual img,
  .home-editorial-strip__item img,
  .home-private-card__media img,
  .home-private-card__content svg,
  .home-pilates__media img,
  .home-gallery__item img,
  .home-location__media img,
  .home-photo-break > img {
    transform: none !important;

    transition: none !important;
  }
}