/*
 * RDESIGNR UI STATE LAYER
 * -----------------------
 * This file is the single owner of visibility, pointer state and geometry for
 * site-level panels. Component styling remains in style.css / rdesignr.css.
 */
:root {
  --rdx-header-h: 74px;
  --rdx-footer-h: 90px;
  --rdx-ui-ease: cubic-bezier(.22,.61,.36,1);
  --rdx-ui-speed: 480ms;
  --rdx-close-size: 44px;
  --rdx-close-icon: 24px;
  --rdx-close-top: 18px;
  --rdx-close-right: 20px;
  --rdx-main-close-gutter: 0px;
}

@media (max-width: 880px) {
  :root {
    --rdx-header-h: 72px;
    --rdx-footer-h: 90px;
    --rdx-main-close-gutter: 0px;
  }
}

@media (max-width: 640px) {
  :root {
    --rdx-header-h: 68px;
    --rdx-footer-h: 50px;
    --rdx-close-top: 14px;
    --rdx-close-right: 14px;
    --rdx-main-close-gutter: 0px;
  }
}

/* Mobile nav state: the trigger/panel styling lives in rdesignr.css; state lives here. */
@media (max-width: 640px) {
  .rdesignr-mobile-nav-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  #menu-mobile.rdesignr-mobile-open .rdesignr-menu-trigger-mark {
    transform: rotate(45deg);
    border-color: var(--rd-accent);
  }

  #menu-mobile.rdesignr-mobile-open .rdesignr-mobile-nav-panel {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Branded close: hidden and non-interactive unless its owning surface is open. */
.rdx-close {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: var(--rdx-close-top);
  right: var(--rdx-close-right);
  width: var(--rdx-close-size);
  height: var(--rdx-close-size);
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;
  line-height: 1;
}

.rdx-close img {
  display: block;
  width: var(--rdx-close-icon);
  height: var(--rdx-close-icon);
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

.open > .rdx-close {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rdx-close:focus-visible {
  outline: 1px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}

/* Audience is a nested About surface: show a return arrow, not a destructive close X. */
.rdx-audience-back {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  color: #f2ece4;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 32px;
  line-height: 1;
}
.rdx-audience-back span {
  display: block;
  transform: translateY(-1px);
  pointer-events: none;
}

/* Main-nav close geometry:
   - desktop: dedicated right-side gutter so the icon never sits over copy
   - tablet/mobile: legacy floating close (cleaner, more minimal) */

/* Main lifting panels. The moving content is the inner container; the close stays fixed in panel space. */
#about-lifting,
#services-lifting,
#works-lifting,
#news-lifting {
  position: fixed;
  top: var(--rdx-header-h);
  right: 0;
  bottom: var(--rdx-footer-h);
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  z-index: 30;
  background: #000;
  box-sizing: border-box;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
  transition: opacity 180ms linear, visibility 0s linear 180ms;
}

#about-lifting > .container-fluid,
#services-lifting > .container-fluid,
#works-lifting > .container-fluid,
#news-lifting > .container-fluid {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateY(104%);
  transition: transform var(--rdx-ui-speed) var(--rdx-ui-ease);
  -webkit-overflow-scrolling: touch;
}

#about-lifting.open,
#services-lifting.open,
#works-lifting.open,
#news-lifting.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms linear, visibility 0s;
}

#about-lifting.open > .container-fluid,
#services-lifting.open > .container-fluid,
#works-lifting.open > .container-fluid,
#news-lifting.open > .container-fluid {
  transform: none;
}

/* Main lifting geometry follows the original The One proportions.
   Desktop is deliberately a fixed 300px lower panel; it must not grow with
   viewport height. Tablet returns to the original half-height character. */
@media (min-width: 881px) {
  :root {
    --rdx-main-close-gutter: 58px;
  }

  #about-lifting,
  #services-lifting,
  #works-lifting,
  #news-lifting {
    top: auto;
    bottom: var(--rdx-footer-h);
    height: 300px;
    max-height: calc(100vh - var(--rdx-header-h) - var(--rdx-footer-h) - 24px);
    padding-right: var(--rdx-main-close-gutter);
  }

  #about-lifting > .rdx-close,
  #services-lifting > .rdx-close,
  #works-lifting > .rdx-close,
  #news-lifting > .rdx-close {
    right: calc((var(--rdx-main-close-gutter) - var(--rdx-close-size)) / 2);
  }

  #about-lifting > .container-fluid,
  #services-lifting > .container-fluid,
  #works-lifting > .container-fluid,
  #news-lifting > .container-fluid {
    height: 100%;
    min-height: 0;
  }

  /* Projects and Field Notes are designed to fit the fixed 300px The One
     desktop lift. Keep their desktop surface static instead of exposing a
     browser scrollbar for a few overflow pixels. Tablet/mobile retain the
     normal scrollable panel behaviour below. */
  #works-lifting > .container-fluid,
  #news-lifting > .container-fluid {
    overflow-y: hidden;
  }

  #about-lifting .all-lifting-inner,
  #services-lifting .all-lifting-inner,
  #works-lifting .all-lifting-inner,
  #news-lifting .all-lifting-inner {
    min-height: 250px;
  }
}

@media (min-width: 641px) and (max-width: 880px) {
  #about-lifting,
  #services-lifting,
  #works-lifting,
  #news-lifting {
    top: auto;
    bottom: var(--rdx-footer-h);
    height: 50vh;
    max-height: calc(100vh - var(--rdx-header-h) - var(--rdx-footer-h) - 16px);
  }
}

/* Field Notes owns one continuous tablet / compact-desktop geometry.
   Do not let the template's 880px breakpoint and Bootstrap's 992px grid
   produce three different layouts between common tablet widths. */
@media (min-width: 768px) and (max-width: 1280px) {
  #news-lifting {
    top: auto;
    bottom: var(--rdx-footer-h);
    height: 300px;
    max-height: calc(100vh - var(--rdx-header-h) - var(--rdx-footer-h) - 16px);
  }
  #news-lifting > .container-fluid {
    height: 100%;
    min-height: 0;
    overflow-y: hidden;
  }
}

/* Location / Contact occupy the same safe viewport between fixed chrome. */
.location-modal,
.contact-modal {
  position: fixed;
  top: var(--rdx-header-h);
  right: 0;
  bottom: var(--rdx-footer-h);
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(24px);
  z-index: 32;
  transition: opacity 220ms linear, transform var(--rdx-ui-speed) var(--rdx-ui-ease), visibility 0s linear var(--rdx-ui-speed);
  -webkit-overflow-scrolling: touch;
}

.location-modal.open,
.contact-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 220ms linear, transform var(--rdx-ui-speed) var(--rdx-ui-ease), visibility 0s;
}

/* Audience panel. */
#rdesignr-audience-panel {
  position: fixed;
  top: var(--rdx-header-h);
  right: 0;
  bottom: var(--rdx-footer-h);
  left: 0;
  width: auto;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(24px);
  z-index: 34;
  transition: opacity 220ms linear, transform var(--rdx-ui-speed) var(--rdx-ui-ease), visibility 0s linear var(--rdx-ui-speed);
  -webkit-overflow-scrolling: touch;
}

#rdesignr-audience-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 220ms linear, transform var(--rdx-ui-speed) var(--rdx-ui-ease), visibility 0s;
}

/* Realestic / GEODIO: two synchronized halves, below header and above footer. */
.panel-left-instagram-feed,
.panel-right-instagram-feed,
.panel-left-credits,
.panel-right-credits {
  position: fixed;
  top: var(--rdx-header-h);
  bottom: var(--rdx-footer-h);
  height: auto;
  margin: 0;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  z-index: 36;
  transition: transform var(--rdx-ui-speed) var(--rdx-ui-ease), visibility 0s linear var(--rdx-ui-speed);
}

.panel-left-instagram-feed,
.panel-left-credits {
  left: 0;
  right: auto;
  width: 50%;
  transform: translateX(-101%);
}

.panel-right-instagram-feed,
.panel-right-credits {
  left: 50%;
  right: auto;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(101%);
  -webkit-overflow-scrolling: touch;
}

.panel-left-instagram-feed.open,
.panel-right-instagram-feed.open,
.panel-left-credits.open,
.panel-right-credits.open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform var(--rdx-ui-speed) var(--rdx-ui-ease), visibility 0s;
}

/* The visual half is display-only; all controls live on the content half. */
.panel-left-instagram-feed.open,
.panel-left-credits.open {
  pointer-events: none;
}

/* Legal overlays sit above all site-level panels. */
.rdesignr-legal-overlay {
  position: fixed;
  top: var(--rdx-header-h);
  right: 0;
  bottom: var(--rdx-footer-h);
  left: 0;
  width: auto;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  z-index: 80;
  transition: opacity 200ms linear, transform 360ms var(--rdx-ui-ease), visibility 0s linear 360ms;
  -webkit-overflow-scrolling: touch;
}

.rdesignr-legal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 200ms linear, transform 360ms var(--rdx-ui-ease), visibility 0s;
}

/* Original The One nav hover requested for final UI. */
#menu .menu a:hover,
#menu .menu a:focus-visible,
.rdesignr-mobile-nav-list > li > a:hover,
.rdesignr-mobile-nav-list > li > a:focus-visible {
  background: #fff !important;
  color: #090908 !important;
}

/* Mobile footer legal links remain microcopy, never large nav items.
   This intentionally outranks the global #menu-mobile a nav typography. */
#menu-mobile .rdesignr-mobile-legal,
#menu-mobile .rdesignr-mobile-legal span,
#menu-mobile .rdesignr-mobile-legal a {
  font-family: var(--rd-body, "Barlow Semi Condensed", Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255,255,255,.52) !important;
}

#menu-mobile .rdesignr-mobile-legal a {
  background: transparent !important;
}

#menu-mobile .rdesignr-mobile-legal a:hover,
#menu-mobile .rdesignr-mobile-legal a:focus-visible {
  color: rgba(255,255,255,.78) !important;
  background: transparent !important;
}

/* Gallery controls are intentionally not branded close controls. */
.rdesignr-project-gallery .c-btn,
.rdesignr-gallery-open,
.rdesignr-gallery-back {
  border: 0;
  box-shadow: none;
}

@media (max-width: 640px) {
  .panel-left-instagram-feed,
  .panel-left-credits {
    display: none;
  }

  .panel-right-instagram-feed,
  .panel-right-credits {
    left: 0;
    right: 0;
    width: 100%;
    background: #000;
    transform: translateX(101%);
  }

  .panel-right-instagram-feed.open,
  .panel-right-credits.open {
    transform: translateX(0);
  }

  .rdesignr-legal-shell {
    padding-top: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about-lifting,
  #services-lifting,
  #works-lifting,
  #news-lifting,
  #about-lifting > .container-fluid,
  #services-lifting > .container-fluid,
  #works-lifting > .container-fluid,
  #news-lifting > .container-fluid,
  .location-modal,
  .contact-modal,
  #rdesignr-audience-panel,
  .panel-left-instagram-feed,
  .panel-right-instagram-feed,
  .panel-left-credits,
  .panel-right-credits,
  .rdesignr-legal-overlay {
    transition-duration: 1ms;
  }
}

/* v37 breakpoint reconciliation.
   Bootstrap stacks its md grid below 992px, so non-custom panels in the
   881–991px band need tablet height/scroll rather than the 300px desktop lift. */
@media (min-width: 881px) and (max-width: 991px){
  #about-lifting,
  #services-lifting{
    top:auto;
    bottom:var(--rdx-footer-h);
    height:50vh;
    max-height:calc(100vh - var(--rdx-header-h) - var(--rdx-footer-h) - 16px);
    padding-right:0;
  }
  #about-lifting > .container-fluid,
  #services-lifting > .container-fluid{
    overflow-y:auto;
  }
  #about-lifting > .rdx-close,
  #services-lifting > .rdx-close{
    right:var(--rdx-close-right);
  }
}

/* Projects and Field Notes deliberately bypass Bootstrap stacking in the
   compact/tablet range and keep the original fixed lower-lift character. */
@media (min-width: 768px) and (max-width: 1280px){
  #works-lifting,
  #news-lifting{
    top:auto;
    bottom:var(--rdx-footer-h);
    height:300px;
    max-height:calc(100vh - var(--rdx-header-h) - var(--rdx-footer-h) - 16px);
  }
  #works-lifting > .container-fluid,
  #news-lifting > .container-fluid{
    height:100%;
    min-height:0;
    overflow-y:hidden;
  }
}