/* BRAVE RENDER FINAL REQUEST PATCH 2026-05-07
   - true overlay scrollbar / no right gap
   - hero flush to viewport on desktop + mobile
   - mobile selected works header left aligned
   - service text affordance
*/
html, body, #root {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}
@supports (overflow: clip) {
  html, body, #root { overflow-x: clip !important; }
}
body::-webkit-scrollbar,
html::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.relative.overflow-x-hidden.min-h-screen,
main,
section {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Hero must occupy the exact viewport width, independent from inner page wrappers/scrollbar overlays */
.hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto !important;
  right: auto !important;
  overflow: hidden !important;
  border-right: 0 !important;
  box-sizing: border-box !important;
}
.br-hero-bg,
.hero-animated-assets {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  overflow: hidden !important;
}
.br-hero-layer,
.br-hero-layer img,
.hero-animated-asset,
.hero-animated-asset img {
  width: 100% !important;
  max-width: none !important;
}
.custom-scrollbar {
  position: fixed !important;
  z-index: 2147482500 !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  pointer-events: auto !important;
  background: transparent !important;
}

/* Mobile: remove the last remaining right strip and align Selected Works header to the left */
@media (max-width: 767px) {
  html, body, #root {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }
  @supports (overflow: clip) {
    html, body, #root { overflow-x: clip !important; }
  }
  .hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .br-hero-bg,
  .hero-animated-assets {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }
  .custom-scrollbar {
    right: 4px !important;
    width: 3px !important;
    pointer-events: none !important;
  }
  section:has(.selected-works-row) > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  section:has(.selected-works-row) > div:first-child * {
    text-align: left !important;
    align-self: flex-start !important;
  }
}

/* Services text should feel clickable without changing layout */
body[data-br-current-path="/services"] h3,
body[data-br-current-path="/services"] p {
  cursor: pointer;
}