/* 77 Rental responsive presentation.
 * Portrait hero art and layout share the <768px breakpoint with homepage-slider.php.
 * Header geometry for phone/tablet/small desktop is owned by the shared
 * #r77-phone-menu-hero-alignment block in functions.php. */

@media (max-width: 767px) {
  html { scrollbar-width:none; -ms-overflow-style:none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; display:none; }
  html, body, #page { max-width:100%; }
  body.home { --r77-home-hero-gap:clamp(12px,3.2vw,16px); }
  body.home .containers { box-sizing:border-box; width:100%; max-width:100%; padding-inline:12px; }

  body.home .home-hero {
    position:relative; isolation:isolate; box-sizing:border-box; width:100%;
    height:clamp(520px,calc(100vw + 100px),800px);
    min-height:clamp(520px,calc(100vw + 100px),800px);
    margin:0 auto 28px; padding:0; overflow:hidden; background:#19211d;
    border-radius:10px; box-shadow:0 14px 44px rgba(20,28,24,.18);
  }
  body.home .home-hero::after { display:none; content:none; }
  body.home .home-hero__media,
  body.home .home-hero__media img,
  body.home .home-hero__shade { position:absolute; inset:0; width:100%; height:100%; }
  body.home .home-hero__media { z-index:0; display:block; }
  body.home .home-hero__media img {
    display:block; max-width:none; margin:0; object-fit:cover;
    object-position:center bottom; transform:none;
  }
  body.home .home-hero__shade {
    z-index:1; pointer-events:none;
    background:linear-gradient(180deg,rgba(8,15,12,.78) 0%,rgba(8,15,12,.60) 32%,rgba(8,15,12,.12) 56%,transparent 72%);
  }
  body.home .home-hero__copy {
    position:relative; inset:auto; z-index:2; display:flex; box-sizing:border-box;
    width:calc(100% - 8px); height:100%; min-height:100%; margin-inline:auto;
    padding:calc(var(--r77-home-header-top) + var(--r77-home-header-height) + var(--r77-home-hero-gap)) clamp(12px,2vw,18px) 0;
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    color:#fff; text-align:left;
  }
  body.home .home-hero .ms_zag {
    max-width:680px; margin:0 0 8px; color:#fff; font-family:'Nunito',sans-serif;
    font-size:clamp(38px,11vw,48px); font-weight:900; line-height:.98;
    letter-spacing:-.045em; text-align:left; text-shadow:0 3px 20px rgba(0,0,0,.22);
  }
  body.home .home-hero__lead {
    max-width:420px; margin:0 0 14px; color:rgba(255,255,255,.9);
    font-size:15px; line-height:1.38; text-align:left;
  }
  body.home .home-hero__benefits {
    position:static; display:flex; flex-wrap:wrap; width:auto; max-width:100%;
    margin:0; padding:0; gap:7px; transform:none; list-style:none;
  }
  body.home .home-hero__benefits > li {
    box-sizing:border-box; width:auto; margin:0; padding:7px 9px; color:#fff;
    font-size:9px; font-weight:900; letter-spacing:.055em; text-align:left;
    text-transform:uppercase; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28); border-radius:8px;
  }
  body.home .home-hero__lights,
  body.home .home-hero__brand-mark { display:none; }

  .site-header > .container {
    background:rgba(15,23,19,.92); border:1px solid rgba(255,255,255,.12);
    border-radius:10px; box-shadow:0 8px 24px rgba(8,15,12,.16);
    backdrop-filter:blur(8px);
  }
  .site-header .site-logo-img img { filter:brightness(0) invert(1); }
  .site-header .header-menu-button {
    box-sizing:border-box; display:grid; width:42px; height:42px; padding:0;
    place-items:center; color:#fff; line-height:1;
    background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));
    border:1px solid rgba(255,255,255,.16); border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 5px 14px rgba(0,0,0,.13);
    transform:none; transition:background .16s ease,transform .16s ease;
  }
  .site-header .header-menu-button .fa { font-size:19px; line-height:1; }
  .site-header .header-menu-button:active { background:rgba(255,255,255,.18); transform:scale(.95); }

  .main-navigation #main-menu.main-menu-container {
    position:fixed; top:calc(-1 * var(--r77-header-top)); right:0; left:auto; z-index:100002; box-sizing:border-box;
    width:min(280px,82vw); height:100dvh; padding:88px 24px 28px;
    overflow-y:auto; visibility:hidden; opacity:0; pointer-events:none; background:#22211f; box-shadow:none;
    clip-path:inset(0 0 0 100%); transform:none!important;
    transition:clip-path .28s ease,opacity .2s ease,visibility 0s linear .28s;
  }
  body.admin-bar .main-navigation #main-menu.main-menu-container {
    top:calc(-1 * var(--r77-header-top)); height:calc(100dvh - 46px);
  }
  body.show-main-menu #page { right:0; transform:none; }
  body.show-main-menu .main-navigation #main-menu.main-menu-container {
    visibility:visible; opacity:1; pointer-events:auto; box-shadow:-18px 0 50px rgba(0,0,0,.28);
    clip-path:inset(0); transform:none!important; transition-delay:0s;
  }
  .site-header .main-menu-container .site-container { width:100%; padding:0; }
  .site-header .main-menu-container ul.menu { display:block; width:100%; margin:0; }
  .site-header .main-menu-container li { display:block; float:none; width:100%; margin:0; }
  .site-header .main-menu-container a {
    display:block; box-sizing:border-box; width:100%; padding:14px 4px; color:#fff;
    font-size:18px; text-align:left; text-shadow:none; white-space:normal;
    border-bottom:0; opacity:1;
  }
  .site-header .main-navigation ul.menu > li.current-menu-item > a::after,
  .site-header .main-navigation ul.menu > li.current_page_item > a::after {
    width:18px; height:1px; opacity:1; background:#67b56d;
  }
  .site-header .main-menu-close { display:none; }

  .site-header .top_socs a,
  .site-header .top_socs a .fa-stack { filter:none; box-shadow:none; text-shadow:none; }
  .site-header .top_socs a {
    display:inline-block; color:#278126; border-radius:50%;
    transform:translateY(0) scale(1); transform-origin:center;
    transition:transform 160ms ease,opacity 160ms ease;
  }
  .site-header .top_socs a .fa-circle { color:#278126; }
  .site-header .top_socs a .fa-inverse { color:#fff; }
  .site-header .top_socs a:active { opacity:.82; transform:translateY(0) scale(1); }
  #masthead #main-menu li.menu-item:not([id]) { display:none; }
  .page-id-37 .breadcrumbs { display:none; }
  .r77-message-dock .r77-whatsapp-only .r77-cta-label {
    color:#fff; font-size:17px; font-weight:500;
    -webkit-text-fill-color:#fff; -webkit-text-stroke:0;
  }
}

@media (max-width:350px) {
  .site-header > .container { padding-right:8px; padding-left:8px; }
}

@media (hover:hover) and (pointer:fine) {
  .site-header .top_socs a:hover,
  .site-header .top_socs a:focus-visible { transform:translateY(-1px) scale(1); }
  .site-header .top_socs a:hover .fa-circle,
  .site-header .top_socs a:focus-visible .fa-circle { color:#3f9a45; }
}