/* =========================================================
   SIX NINE — CONTACT RESPONSIVE
   File: assets/css/responsive/contact-responsive.css

   Shared navbar / mobile menu / footer responsive
   are owned by global-responsive.css
   ========================================================= */


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

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

  .contact-hero {
    padding:
      145px
      0
      118px;
  }

  .contact-hero__grid {
    gap: 70px;
  }

  .contact-hero__title {
    font-size:
      clamp(
        4.6rem,
        8.3vw,
        7.8rem
      );
  }

  .contact-hero__image {
    min-height: 600px;
  }


  /* =======================================================
     DIRECT
     ======================================================= */

  .contact-direct-card {
    min-height: 330px;

    padding: 25px;
  }


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

  .contact-location__layout {
    grid-template-columns:
      minmax(0, 0.82fr)
      minmax(0, 1.18fr);
  }

  .contact-location__building,
  .contact-location__map-panel {
    min-height: 670px;
  }

  .contact-location__building-image,
  .contact-location__map {
    min-height: 520px;
  }


  /* =======================================================
     INQUIRY
     ======================================================= */

  .contact-inquiry__grid {
    gap: 100px;
  }


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

  .contact-experience-card {
    min-height: 290px;

    padding: 24px;
  }
}


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

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

  .contact-hero {
    padding:
      132px
      0
      96px;
  }

  .contact-hero__grid {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);

    gap: 42px;
  }

  .contact-hero__title {
    font-size:
      clamp(
        4rem,
        8vw,
        6.4rem
      );
  }

  .contact-hero__image {
    min-height: 520px;
  }

  .contact-hero__caption {
    gap: 12px;

    font-size: 0.58rem;
  }


  /* =======================================================
     DIRECT
     ======================================================= */

  .contact-direct {
    padding:
      90px
      0
      130px;
  }

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

  .contact-direct-card:last-child {
    grid-column:
      1
      / -1;
  }

  .contact-direct-card {
    min-height: 300px;
  }


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

  .contact-location {
    padding:
      92px
      0
      135px;
  }

  .contact-location__header {
    grid-template-columns:
      1fr
      0.48fr;

    gap: 50px;
  }

  .contact-location__layout {
    grid-template-columns: 1fr;
  }

  .contact-location__building,
  .contact-location__map-panel {
    min-height: auto;
  }

  .contact-location__building {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(260px, 0.8fr);

    grid-template-rows: auto;
  }

  .contact-location__building-image {
    min-height: 500px;
  }

  .contact-location__building-meta {
    grid-template-columns: 1fr;

    align-content: end;
  }

  .contact-location__map-panel {
    grid-template-rows:
      500px
      auto;
  }

  .contact-location__map {
    min-height: 500px;
  }


  /* =======================================================
     INQUIRY
     ======================================================= */

  .contact-inquiry {
    padding:
      92px
      0
      135px;
  }

  .contact-inquiry__grid {
    grid-template-columns:
      minmax(260px, 0.75fr)
      minmax(0, 1.25fr);

    gap: 62px;
  }

  .contact-inquiry__intro {
    top: 104px;
  }


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

  .contact-experiences {
    padding:
      92px
      0
      135px;
  }

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

  .contact-experience-card {
    min-height: 270px;
  }
}


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

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


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

  .contact-hero {
    padding:
      calc(
        108px +
        env(safe-area-inset-top)
      )
      0
      72px;
  }

  .contact-hero__grid {
    grid-template-columns: 1fr;

    gap: 42px;
  }

  .contact-hero__content {
    gap: 22px;

    padding-bottom: 0;
  }

  .contact-hero__title {
    font-size:
      clamp(
        3.8rem,
        18vw,
        5.8rem
      );

    line-height: 0.83;
  }

  .contact-hero__address {
    margin-top: 2px;
  }

  .contact-hero__address address {
    font-size: 0.84rem;
  }

  .contact-hero__actions {
    display: grid;

    grid-template-columns:
      1fr
      1fr;

    width: 100%;
  }

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


  /* HERO VISUAL */

  .contact-hero__image {
    min-height: 480px;
  }

  .contact-hero__caption {
    align-items: flex-start;

    font-size: 0.54rem;
  }


  /* =======================================================
     DIRECT CONTACT
     ======================================================= */

  .contact-direct {
    padding:
      76px
      0
      96px;
  }

  .contact-direct__header {
    margin-bottom: 38px;
  }

  .contact-direct__grid {
    grid-template-columns: 1fr;
  }

  .contact-direct-card:last-child {
    grid-column: auto;
  }

  .contact-direct-card {
    min-height: 230px;

    padding: 22px;
  }

  .contact-direct-card__icon {
    top: 22px;
    right: 22px;
  }

  .contact-direct-card__content h3 {
    font-size:
      clamp(
        2rem,
        9vw,
        2.8rem
      );
  }


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

  .contact-location {
    padding:
      76px
      0
      96px;
  }

  .contact-location__header {
    grid-template-columns: 1fr;

    gap: 24px;

    margin-bottom: 40px;
  }

  .contact-location__header > p {
    max-width: 100%;
  }

  .contact-location__layout {
    gap: 10px;
  }


  /* BUILDING */

  .contact-location__building {
    grid-template-columns: 1fr;
  }

  .contact-location__building-image {
    min-height: 420px;
  }

  .contact-location__building-meta {
    grid-template-columns:
      0.8fr
      1.2fr;

    gap: 22px;

    padding: 22px;
  }

  .contact-location__building-meta strong {
    font-size: 1.5rem;
  }


  /* MAP */

  .contact-location__map-panel {
    grid-template-rows:
      430px
      auto;
  }

  .contact-location__map {
    min-height: 430px;
  }

  .contact-location__map-info {
    grid-template-columns: 1fr;

    gap: 22px;

    padding: 22px;
  }

  .contact-location__map-info
  .btn {
    width: 100%;
  }


  /* =======================================================
     INQUIRY
     ======================================================= */

  .contact-inquiry {
    padding:
      76px
      0
      96px;
  }

  .contact-inquiry__grid {
    grid-template-columns: 1fr;

    gap: 44px;
  }

  .contact-inquiry__intro {
    position: static;
  }

  .contact-inquiry__meta {
    max-width: 100%;
  }


  /* FORM */

  .contact-inquiry__form-wrapper {
    padding: 26px 22px;
  }

  .contact-form {
    gap: 24px;
  }

  .contact-form__row {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .contact-form .form-control {
    min-height: 54px;

    font-size: 0.88rem;
  }

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


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

  .contact-experiences {
    padding:
      76px
      0
      96px;
  }

  .contact-experiences__header {
    margin-bottom: 38px;
  }

  .contact-experiences__grid {
    grid-template-columns: 1fr;
  }

  .contact-experience-card {
    min-height: 220px;

    padding: 22px;
  }

  .contact-experience-card strong {
    max-width: 100%;

    font-size:
      clamp(
        2rem,
        9vw,
        2.9rem
      );
  }


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

  .contact-final {
    padding:
      96px
      0
      110px;
  }

  .contact-final__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }

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


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

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


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

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

  .contact-hero {
    padding:
      calc(
        98px +
        env(safe-area-inset-top)
      )
      0
      62px;
  }

  .contact-hero__title {
    font-size:
      clamp(
        3.35rem,
        18vw,
        4.8rem
      );
  }

  .contact-hero__actions {
    grid-template-columns: 1fr;
  }

  .contact-hero__image {
    min-height: 400px;
  }

  .contact-hero__caption {
    flex-direction: column;

    gap: 5px;
  }


  /* =======================================================
     DIRECT
     ======================================================= */

  .contact-direct {
    padding:
      66px
      0
      84px;
  }

  .contact-direct-card {
    min-height: 215px;

    padding: 19px;
  }

  .contact-direct-card__icon {
    top: 19px;
    right: 19px;
  }

  .contact-direct-card__content p {
    font-size: 0.74rem;
  }


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

  .contact-location {
    padding:
      66px
      0
      84px;
  }

  .contact-location__building-image {
    min-height: 350px;
  }

  .contact-location__building-meta {
    grid-template-columns: 1fr;

    gap: 20px;

    padding: 20px;
  }

  .contact-location__map-panel {
    grid-template-rows:
      360px
      auto;
  }

  .contact-location__map {
    min-height: 360px;
  }

  .contact-location__map-info {
    padding: 20px;
  }


  /* =======================================================
     INQUIRY
     ======================================================= */

  .contact-inquiry {
    padding:
      66px
      0
      84px;
  }

  .contact-inquiry__form-wrapper {
    padding:
      24px
      18px;
  }

  .contact-inquiry__meta span {
    min-height: 30px;

    padding-inline: 10px;

    font-size: 0.56rem;
  }

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

    font-size: 0.84rem;
  }

  .contact-form__note {
    font-size: 0.66rem;
  }


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

  .contact-experiences {
    padding:
      66px
      0
      84px;
  }

  .contact-experience-card {
    min-height: 205px;

    padding: 19px;
  }

  .contact-experience-card strong {
    font-size:
      clamp(
        1.9rem,
        9vw,
        2.6rem
      );
  }


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

  .contact-final {
    padding:
      84px
      0
      100px;
  }


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

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

  .mobile-contact-cta__grid {
    gap: 6px;
  }

  .mobile-contact-cta
  .btn {
    min-height: 44px;

    font-size: 0.58rem;
  }
}


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

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

  .contact-hero__image {
    min-height: 350px;
  }

  .contact-direct-card {
    min-height: 200px;
  }

  .contact-location__building-image {
    min-height: 310px;
  }

  .contact-location__map-panel {
    grid-template-rows:
      320px
      auto;
  }

  .contact-location__map {
    min-height: 320px;
  }

  .contact-experience-card {
    min-height: 190px;
  }

  .mobile-contact-cta__grid {
    grid-template-columns:
      0.78fr
      1.22fr;
  }
}


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

@media (
  max-width: 768px
) and (
  max-height: 700px
) {
  .contact-hero {
    padding-top:
      calc(
        90px +
        env(safe-area-inset-top)
      );
  }

  .contact-hero__title {
    font-size:
      clamp(
        3.2rem,
        14vw,
        4.4rem
      );
  }

  .contact-hero__image {
    min-height: 360px;
  }
}


/* =========================================================
   LANDSCAPE MOBILE / SMALL TABLET
   ========================================================= */

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

  .contact-hero {
    padding:
      100px
      0
      70px;
  }

  .contact-hero__grid {
    grid-template-columns:
      0.88fr
      1.12fr;

    gap: 32px;
  }

  .contact-hero__title {
    font-size:
      clamp(
        3.5rem,
        8vw,
        5.2rem
      );
  }

  .contact-hero__actions {
    grid-template-columns: 1fr;
  }

  .contact-hero__image {
    min-height: 420px;
  }


  /* =======================================================
     DIRECT
     ======================================================= */

  .contact-direct__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .contact-direct-card:last-child {
    grid-column: auto;
  }

  .contact-direct-card {
    min-height: 240px;
  }


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

  .contact-location__building {
    grid-template-columns:
      1.2fr
      0.8fr;
  }

  .contact-location__building-image {
    min-height: 420px;
  }

  .contact-location__building-meta {
    grid-template-columns: 1fr;
  }


  /* =======================================================
     INQUIRY
     ======================================================= */

  .contact-inquiry__grid {
    grid-template-columns:
      0.8fr
      1.2fr;
  }

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


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

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

  .contact-experience-card {
    min-height: 220px;
  }


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

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

    width: auto;
  }
}


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

@media (hover: none) {
  .contact-hero__image img,
  .contact-location__building-image img {
    transform:
      none !important;
  }

  .contact-direct-card,
  .contact-experience-card {
    -webkit-tap-highlight-color:
      transparent;
  }
}


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

@media (
  prefers-reduced-motion: reduce
) {
  .contact-hero__image img,
  .contact-direct-card,
  .contact-direct-card::before,
  .contact-direct-card__icon svg,
  .contact-location__building-image img,
  .contact-experience-card,
  .contact-experience-card::before,
  .contact-experience-card__eyebrow,
  .contact-experience-card__action,
  .contact-experience-card__action svg {
    transform:
      none !important;

    transition:
      none !important;
  }
}