/* ==========================================================================
   MOBILE.CSS
   Mobile-only overrides. Load this AFTER hero.css and short.css:

     <link rel="stylesheet" href="css/hero.css">
     <link rel="stylesheet" href="css/short.css">
     <link rel="stylesheet" href="css/mobile.css">

   Everything in this file lives inside `@media (max-width: 991px)` (the
   site's existing mobile breakpoint — matches breakPoint = 992 in hero.js),
   so nothing here can ever change anything on desktop. Safe to include
   unconditionally.

   What it does:
     1. Kills all scroll-triggered / parallax / marquee motion — every
        section renders in its final state immediately, no fade/slide/scale.
     2. Stops horizontal page overflow caused by fixed pixel widths that
        were only ever sized for desktop (contact photos, the ARBORIA
        wordmark, the connect-section photos).
     3. Makes images full-width/fluid instead of fixed px.
     4. Lets wide/dense content (the units table, footer photo strip)
        overflow into a horizontal swipe/scroll instead of squeezing or
        breaking the page layout.
   ========================================================================== */

@media (max-width: 991px) {

  /* ---------------------------------------------------------------------
     0. PAGE-LEVEL OVERFLOW SAFETY NET
     --------------------------------------------------------------------- */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .h1.uper_text.a-center {
    font-size: 60px;
  }

  .upper_second_text {
    font-size: 70px;
  }

  .a2 {
    font-size: 80px;
  }

  .u-272 {
    height: 80px;
  }

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

  .exclusivity_heading {
    font-size: 60px;
  }

  .hero-s_logo_a {
    margin-top: -2px !important;
  }

  .exclusivity_aerial {
    height: 300px
  }

  .exclusivity_bottom-img {
    width: 100%;
    height: 300px;
  }

  .about_features {
    grid-template-columns: 1fr;
    margin-top: 30px;
    gap: 0px;
  }

  .about {
    padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .exclusivity .img.cover {
    top: 0px;
    left: 0;
  }

  .exclusivity_top-img {
    width: 100%;
    height: 400px;
  }

  .exclusivity {
    padding-top: 60px !important;
    /* desktop reserves padding-bottom:700px as scroll runway for the
       pin+cover transition into the next section — that pin is killed on
       mobile (see mobile-fix.js), so this section must be fully static:
       no pin, no runway, just normal in-flow padding. */
    padding-bottom: 60px !important;
    position: static !important;
    height: auto !important;
  }

  .exclusivity_bottom {
    margin-top: 40px;
    gap: 20px
  }

  .exclusive-showcase_photo {
    width: 100%;
    height: 100%;
  }

  .exclusivity_bottom-text,
  .exclusive-showcase_media {
    max-width: 100%;
  }

  .benefits-intro-w {
    padding-top: 30px;
  }

  .benefits-intro-s .u-272 {
    display: none;
  }

  .exclusive-showcase_logo {
    margin: 0 auto 40px;
    width: 100%;
    text-align: center;
    height: auto;
  }

  .exclusive-showcase_heading {
    font-size: 80px;
  }

  .exclusive-showcase_desc {
    margin-bottom: 40px;
  }

  .building_betwen_clouds {
    margin-top: 0px;
  }

  .arch-scroll-area .arch-s {
    width: 100%;
    height: 100%;
  }

  .arch_h_heading {
    font-size: 60px !important;
  }

  .loc-w_bg_img {
    width: 100%;
  }

  .loc-slide-1_flower,
  .loc-slide-4_flower {
    DISPLAY: NONE;
  }

  .loc-slide-1_heading {
    left: auto !important;
    top: auto;
    position: relative !important;
    width: 100%;
    margin-top: 70px;
    text-align: center;

    transform: translateX(0%);
  }

  .loc-slide-1_heading h2 {
    font-size: 60px;
  }

  .loc-slide {
    height: 100%;
  }

  .loc-slide-1_photo-loggia {
    POSITION: relative;
    top: auto !important;
    width: 100%;
    left: auto;
    max-width: 100%;
    height: 400px;
    margin-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .loc-slide-1_photo-dining {
    left: auto;
    top: auto;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    margin-top: 70px;
    bottom: auto;
    right: auto;
  }

  .loc-slide-2 {
    margin-top: 60px;
  }

  .loc-slide-4_content {
    width: 100%;
    height: 100%;
    padding: 40px 20px 70px;
  }

  .loc-slide-4_content h3 {

    max-width: 100%;
    margin: 0;
    font-weight: 500;
    font-style: Regular;
    font-size: 35px;
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
  }

  .loc-slide-4_content p {
    max-width: 100%;
    margin: 0;
    font-family: Maison Neue;
    font-weight: 400;
    font-style: Book;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 184%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-align: center;
    margin-left: 0px;
    margin-top: 20px;
  }

  h2.connect-s_heading {
    font-size: 60px;
  }

  .connect-s_top {
    margin-bottom: 30px;
  }

  .connect-s_listing_right .img-w {
    position: relative;
    right: auto;
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
  }

  .loc-slide-4_corner-line {
    height: 50px;
  }

  .loc-slide-2_text h3 {
    left: auto;
    top: auto;
    margin-top: 70px;
    width: 100%;
    position: relative;
    padding: 0px 20px;
    font-size: 70px;
  }

  .loc-slide-2_text p {
    left: auto;
    top: auto;
    right: auto;
    padding: 0 20px;
    width: 100%;
    bottom: auto;
    margin-top: 30px;
    position: relative;
    font-size: 18px;
  }

  .loc-slide-1_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translate(0) !important;
  }

  .loc-slide-1_caption {
    left: auto;
    top: auto;
    width: 100%;
    text-align: left;
    align-items: center;
    margin-top: 60px;
    bottom: 0px;
    padding: 0 20px;
    position: relative;
  }

  .loc-slide-2_flower {
    display: none;
  }

  .loc-slide-3_content {
    left: auto;
    top: auto;
    width: 100%;
    position: relative;
  }

  .loc-slide-3_content h2 {
    font-size: 60px;
  }

  .loc-slide-3 {
    background-color: #F3E8D6;
    padding: 50px 20px;
    margin-top: 70px;
  }

  .loc-slide-3_map {
    right: auto;
    top: auto;
    position: relative;
    width: 100%;
    opacity: .6;
  }

  .loc-slide-3_exterior {
    left: auto;
    top: auto;
    width: 100%;
    position: relative;

    height: 500px;

  }

  .loc-slide-3_facts_row dt,
  .loc-slide-3_facts_row dd {
    font-size: 18px;
  }

  .container.loc {
    padding-right: 0px;
  }

  .loc-slide-2_photo {
    left: auto;
    top: auto;
    position: relative;
    width: 100%;
    right: auto;
    padding: 0px 20px;
    height: 100%;
  }

  .loc-slide-2_photo img {
    transform: translate(0) !important;
  }

  .image_crack {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    font-size: 60px !important;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .about_heading {

    font-size: 24px;
    leading-trim: CAP_HEIGHT;
    line-height: 135%;
  }

  img,
  video,
  .img,
  .img-w {
    max-width: 100%;
  }

  /* ---------------------------------------------------------------------
     1. KILL SCROLL / REVEAL / PARALLAX ANIMATION
     Every element the site normally fades/slides/scales in via GSAP +
     ScrollTrigger (initScrollElementsReveal, initAllParallax, and the
     about-section.js reveal/parallax helpers) gets forced to its final,
     fully-visible resting state. GSAP still runs in the background and
     keeps writing inline styles each frame, but these rules use
     !important, so they always win over those inline (non-!important)
     values — the element simply never visibly moves.
     --------------------------------------------------------------------- */
  [data-scroll-reveal="h"],
  [data-scroll-reveal="p"],
  [data-scroll-reveal="a"],
  [data-scroll-reveal="ctn"],
  [data-scroll-reveal="line"],
  [data-scroll-reveal="slide"],
  [data-scroll-reveal="w"],
  [data-about-rise],
  [data-reveal],
  .split-word,
  .split-char,
  .split-line,
  .about-word {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .about-word {
    color: var(--about-text) !important;
  }

  [data-parallax="img"],
  [data-parallax="img-out"],
  [data-parallax="w"],
  [data-parallax="ctn-down"],
  [data-parallax="ctn-up"],
  [data-about-parallax],
  [data-excl-parallax],
  .loc-w_bg_img {
    transform: none !important;
  }

  /* Oasis material-swatch photo swap: instant, no crossfade */
  .oasis__image {
    transition: none !important;
  }

  /* Units-table row hover-blur effect (desktop-only interaction anyway,
     but neutralize in case touch triggers :hover/:active) */
  .units-table_row_grid {
    transition: none !important;
    filter: none !important;
  }

  /* ---------------------------------------------------------------------
     2. STOP DECORATIVE MARQUEES (clouds, footer photo strip)
     --------------------------------------------------------------------- */
  [data-marquee-css="track"] {
    /* animation: none !important;
    transform: none !important; */
  }

  .loc-w_clouds,
  .benefits-intro_sky_clouds {
    /* display: none !important; */
  }

  /* Footer photo strip: keep the photos, drop the duplicate loop-copy and
     the animation, let people swipe through it instead */
  .footer_gallery_marquee {
    /* overflow-x: auto !important; */
    -webkit-overflow-scrolling: touch;
  }

  .footer_gallery_marquee .marquee_list:nth-of-type(n + 2) {
    display: none !important;
  }

  /* ---------------------------------------------------------------------
     3. FIXED-WIDTH ELEMENTS THAT OVERFLOW ON MOBILE
     --------------------------------------------------------------------- */

  /* connect section — side photo (was position:absolute, 527x418px) */
  .connect-s_listing_right {
    position: relative;
    margin-top: var(--_units---u-32);
  }

  .connect-s_listing_right .img-w {
    position: relative;
    right: auto;
    width: 100% !important;
    height: 60vw !important;
    max-height: 360px;
  }

  /* connect section — bottom full-width photo (was fixed 1100x621px) */
  .connect-s_bottom {
    max-width: 100%;
    margin: 40px 0px 0px;
    padding: 0 20px;
  }

  .connect-s_feature {
    margin: 0 auto 0px;
  }

  .connect-s_bottom .img.h-auto {
    width: 100% !important;
    height: 500px !important;
  }

  .connect-s {

    padding-top: 90px;
    padding-bottom: 90px;
  }

  /* contact section — staggered photos (were position:absolute, up to
     630px wide) become a simple stacked full-width pair */
  .contact-s_right {
    position: relative;
    min-height: auto;
  }

  .contact-s_img {
    position: relative;
    top: auto !important;
    right: auto !important;
    height: auto;
    width: 100%;
    margin-bottom: var(--_units---u-16);
  }

  .connect-s_listing_left {
    margin-top: 20px;
  }

  .contact-s {
    padding-top: 80px;
  }

  section#spSection {
    padding: 80px 20px 0px;
  }

  .contact-s_heading {
    margin-bottom: 30px;

    font-size: 60px;
  }


  .contact-s_img-a .img-w img,
  .contact-s_img-b .img-w img {
    width: 100% !important;
    height: 200px !important;
    max-height: 100%;
    object-fit: cover;
  }

  /* contact section — giant ARBORIA wordmark (was fixed 553px, nowrap) */
  .contact-s_brand_word {
    font-size: 140px !important;
    margin-bottom: -6vw !important;
    white-space: nowrap;
  }

  footer {
    padding-top: 70px;
  }

  .contact-s_brand {
    margin-top: -80px;
    padding-top: 80px;
  }

  /* ---------------------------------------------------------------------
     4. TABLES / DENSE STRIPS — LET THEM OVERFLOW HORIZONTALLY
     Instead of squeezing columns or hiding data, the whole row grid keeps
     its natural (desktop) width and the table wrapper scrolls sideways.
     --------------------------------------------------------------------- */
  .units-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .units-table_head,
  .units-table_row_grid {
    /* grid-template-columns: 90px 70px 70px 90px 220px 130px 110px !important; */
    width: max-content;
    min-width: 100%;
  }

  .units-table_row_grid {
    height: auto;
    padding: 20px 0;
  }

  .units-table_download {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: var(--_units---u-8) 0 0;
  }

  .section.arch {
    margin-top: 200px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }

  .loc-w_clouds {
    top: -38%;
  }

  .loc-slide-1_caption .p2 {
    font-size: 20px;
  }

  .preloader_bg_arch_is-1,
  .preloader_bg_arch_is-2 {
    position: fixed !important;
    top: auto !important;
    bottom: -25vh !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}