/* ============================================================
   RWA Site — Mobile Responsiveness Overhaul
   Fixes: navbar positioning, section spacing, card sizing,
   horizontal overflow, swiper responsiveness, layout drift.
   Scope: mobile (<=768px) with extra rules for <=640px (sq-m).
   ============================================================ */

/* ---------- 1. GLOBAL VIEWPORT & OVERFLOW ---------- */
@media screen and (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .sq-page {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
  .sq-page-wp {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  /* kill any transform that pushes content off-screen */
  .sq-screen[style*="translateX"] {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* ---------- 2. NAVBAR — sticky top, always visible ---------- */
@media screen and (max-width: 1024px) {
  .sq-page-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: block !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .sq-page-navbar .sq-screen {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .sq-page-navbar .sq-screen-wp {
    padding: 8px 16px !important;
    min-height: 0 !important;
  }
  .sq-page-navbar .sq-screen-flex {
    width: 100% !important;
  }
  /* logo sizing — fixed height, do not rely on the fragile aspect-ratio padding hack */
  .sq-page-navbar .sq-widget-logo { height: 32px !important; min-height: 32px !important; }
  .sq-page-navbar .sq-aspect-ratio { height: 32px !important; padding-top: 0 !important; width: auto !important; }
  .sq-page-navbar .sq-aspect-ratio-box { position: relative !important; height: 32px !important; width: auto !important; }
  .sq-page-navbar .sq-image-wp { width: auto !important; height: 32px !important; }
  .sq-page-navbar .sq-logo-img img { height: 32px !important; width: auto !important; max-height: 32px !important; max-width: none !important; object-fit: contain !important; }  /* logo sizing */
  .sq-page-navbar .sq-widget-logo {
    --m-img-width: 100px !important;
    --m-img-height: 28px !important;
  }
  .sq-page-navbar .sq-logo-img img {
    max-height: 32px !important;
    width: auto !important;
  }
  /* hamburger toggle */
  .sq-page-navbar .sq-widget-toggle {
    width: auto !important;
  }
  .sq-page-navbar .sq-toggle {
    --m-icon-size: 18 !important;
    --m-toggle-font-size: 12px !important;
  }
  .sq-page-navbar .sq-toggle-label {
    font-size: 11px !important;
    color: #fff !important;
  }
  .sq-page-navbar { height: 56px !important; }
  .sq-page-navbar .sq-screen,
  .sq-page-navbar .sq-screen-wp,
  .sq-page-navbar .sq-screen-flex {
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sq-page-navbar .sq-screen-wp {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
  }
  .sq-page-navbar .sq-row-wp {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    height: 56px !important;
  }
  .sq-page-navbar .sq-col { width: auto !important; flex: none !important; }
  .sq-page-navbar .sq-col:first-child { flex: 1 1 auto !important; }  /* desktop header (nav links + Connect) must be hidden on mobile; the hamburger navbar takes over */
  .sq-page-header {
    display: none !important;
  }
  /* push page content below the fixed mobile navbar */
  .sq-page-body {
    padding-top: 56px !important;
  }
}

/* ---------- 3. SECTION SPACING — reduce excessive gaps ---------- */
@media screen and (max-width: 768px) {
  .sq-widget-space {
    --space-height: var(--m-space-height, 20) !important;
  }
  /* cap all spacer widgets at reasonable mobile heights */
  .sq-widget-space[style*="--m-space-height"] {
    height: auto !important;
    min-height: 0 !important;
  }
  .sq-widget-space[style*="--m-space-height"]::before {
    content: "";
    display: block;
    height: calc(var(--m-space-height, 20) * 1px) !important;
  }
  /* reduce screen padding */
  .sq-screen-wp {
    padding: var(--m-screen-padding, 0 16px) !important;
  }
  .sq-screen {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* reduce row gaps */
  .sq-row-wp {
    --row-gap: var(--m-row-gap, 12px) !important;
    gap: var(--row-gap) !important;
  }
  /* reduce widget margins */
  .sq-widget-wp {
    margin: var(--m-widget-margin, 0) !important;
    padding: var(--m-widget-padding, 0) !important;
  }
  /* text spacing */
  .sq-widget-body p {
    margin-bottom: var(--p-gap, 8px) !important;
  }
}

/* extra-tight for <=640 (sq-m breakpoint) */
@media screen and (max-width: 640px) {
  .sq-widget-space {
    --space-height: 16 !important;
  }
  .sq-screen-wp {
    padding: 0 14px !important;
  }
}

/* ---------- 4. SWIPER & CARDS — responsive sizing ---------- */
@media screen and (max-width: 768px) {
  /* force all swipers to 1-2 slides on mobile regardless of data attr */
  .sq-swiper.swiper {
    width: 100% !important;
    overflow: hidden !important;
  }
  .sq-swiper .swiper-slide {
    width: auto !important;
    flex-shrink: 0 !important;
  }
  /* gallery card images — fix aspect ratio */
  .sq-widget-gallery .sq-aspect-ratio {
    padding-top: 60% !important; /* 5:3 ratio for mobile */
    min-height: 0 !important;
  }
  .sq-widget-gallery .sq-item-img-wp,
  .sq-widget-gallery .sq-item-img {
    width: 100% !important;
    height: 100% !important;
  }
  .sq-widget-gallery .sq-item-img-wp img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* card body text sizing */
  .sq-widget-gallery .sq-item-title {
    --m-font-size: 18px !important;
    --pc-font-size: 18px !important;
  }
  .sq-widget-gallery .sq-item-des {
    --m-font-size: 13px !important;
    --pc-font-size: 13px !important;
    --m-text-line-clamp: 2 !important;
  }
  .sq-widget-gallery .sq-texts {
    padding: 12px !important;
    gap: 6px !important;
  }
  /* fix slide-full width that causes horizontal overflow */
  .slide-full {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  .sq-pc .slide-full {
    width: 100% !important;
  }
  /* swiper navigation buttons — make them visible and properly sized */
  .swiper-button-prev,
  .swiper-button-next {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(4px) !important;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 14px !important;
    color: #fff !important;
  }
  .swiper-button-prev {
    left: 8px !important;
  }
  .swiper-button-next {
    right: 8px !important;
  }
  /* swiper pagination */
  .swiper-pagination {
    bottom: 8px !important;
  }
  .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4) !important;
    width: 6px !important;
    height: 6px !important;
  }
  .swiper-pagination-bullet-active {
    background: #fff !important;
    width: 18px !important;
    border-radius: 3px !important;
  }
}

/* <=640: 1 slide per view for most carousels */
@media screen and (max-width: 640px) {
  .sq-widget-gallery .swiper-slide {
    width: calc(100vw - 32px) !important;
  }
}

/* ---------- 5. CUSTOM SLIDE CONTROLS (Team Members arrows) ---------- */
@media screen and (max-width: 768px) {
  .slide-lr {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .slide-lr-item {
    --item-size: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  .slide-lr-more {
    font-size: 12px !important;
    padding: 0 14px !important;
    height: 40px !important;
  }
  .slide-lr-more a {
    font-size: 12px !important;
  }
}

/* ---------- 6. TYPOGRAPHY SCALING ---------- */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  /* hero / large display titles (the big title renders as <p> inside .sq-widget-text) */
  .home-videoplay .sq-widget-text.sf-pro-700 p,
  .sq-widget-text.sf-pro-700 p,
  .home-videoplay .irwa-typing,
  .home-videoplay .irwa-typing-text,
  .home-videoplay .irwa-typing .irwa-char {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
  h1 {
    --pc-font-size: 32px !important;
    --m-font-size: 32px !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  h2 {
    --pc-font-size: 28px !important;
    --m-font-size: 26px !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  h3 {
    --pc-font-size: 22px !important;
    --m-font-size: 20px !important;
    font-size: 20px !important;
  }
  h4, h5, h6 {
    font-size: 17px !important;
  }
}

/* ---------- 7. VIDEO & BACKGROUND FIXES ---------- */
@media screen and (max-width: 768px) {
  .video-bg {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
  .sq-bgx,
  .sq-screen-bg {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .sq-bgx-bg__media,
  .sq-screen-bg__media {
    background-size: cover !important;
    background-position: center !important;
  }
  /* fix backdrop-filter performance */
  .sq-bgx-blur {
    backdrop-filter: none !important;
  }
}

/* ---------- 8. GRID & ROW LAYOUT STACKING ---------- */
@media screen and (max-width: 768px) {
  .sq-row-wp {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .sq-col {
    --col: var(--m-col, 12) !important;
    --cols: var(--m-cols, 12) !important;
    width: 100% !important;
    flex: none !important;
  }
  .sq-col-wp {
    flex-direction: column !important;
    gap: 9px !important;
  }
  /* ensure images don't overflow */
  .sq-image img,
  .sq-item-img img,
  .sq-logo-img img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* fix aspect ratio boxes */
  .sq-aspect-ratio {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sq-aspect-ratio-box {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ---------- 9. FOOTER ---------- */
@media screen and (max-width: 768px) {
  .sq-page-footer {
    padding: 30px 16px !important;
  }
  .sq-page-footer .sq-screen-wp {
    padding: 0 !important;
  }
}

/* ---------- 10. WOW ANIMATION — disable on mobile for performance ---------- */
@media screen and (max-width: 768px) {
  .wow {
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .animate__animated {
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- 11. FIX ABSOLUTE-POSITIONED ELEMENTS DRIFT ---------- */
@media screen and (max-width: 768px) {
  /* any screen with absolute positioning that uses percentage offsets — reset */
  .sq-screen[style*="position: absolute"],
  .sq-screen[style*="position:fixed"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* fix quote screens */
  .sq-page-quote > .sq-quote-screen {
    position: relative !important;
    width: 100% !important;
    display: block !important;
  }
}

/* ---------- 12. BUTTONS & INTERACTIVE ELEMENTS ---------- */
@media screen and (max-width: 768px) {
  .rwa-btn {
    padding: 12px 26px !important;
    font-size: 15px !important;
    min-height: 46px !important;
  }
  .btn-semi-transparent {
    backdrop-filter: blur(4px) !important;
  }
}

/* ---------- 13. TABLET RANGE (641-1024px) transitional fixes ---------- */
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .sq-page {
    min-width: 0 !important;
  }
  .sq-page-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }
  .slide-full {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .sq-widget-gallery .swiper-slide {
    width: calc((100vw - 60px) / 2) !important;
  }
}

/* ---------- 14. SAFE AREA FOR NOTCHED DEVICES ---------- */
@supports (padding: max(0px)) {
  @media screen and (max-width: 768px) {
    .sq-page-navbar {
      padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    .sq-page-header {
      padding-top: calc(56px + env(safe-area-inset-top)) !important;
    }
    .sq-page-footer {
      padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
    }
  }
}


/* ---------- 15. SWIPER LAST SLIDE CLIPPING FIX ---------- */
.sq-widget-gallery .sq-widget-body {
  padding-right: 4px !important;
  box-sizing: border-box !important;
}
.sq-swiper.swiper {
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.sq-swiper .swiper-slide {
  box-sizing: border-box !important;
}
.sq-swiper .swiper-slide:last-child,
.sq-swiper .swiper-slide:last-of-type {
  margin-right: 0 !important;
}
.sq-swiper .swiper-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- 16. ALL VIEW GRID MODE (Industrial Layout) ---------- */
/* PC (>=769px): 3 columns x 2 rows, centered on page */
@media screen and (min-width: 769px) {
  .sq-widget-gallery.gallery-grid-mode .sq-swiper {
    overflow: visible !important;
  }
  .sq-widget-gallery.gallery-grid-mode .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    transform: none !important;
    transition: none !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .sq-widget-gallery.gallery-grid-mode .swiper-slide {
    width: 100% !important;
    margin-right: 0 !important;
    flex-shrink: 1 !important;
  }
}

/* Mobile (<=768px): 2 columns */
@media screen and (max-width: 768px) {
  .sq-widget-gallery.gallery-grid-mode .sq-swiper {
    overflow: visible !important;
  }
  .sq-widget-gallery.gallery-grid-mode .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
  }
  .sq-widget-gallery.gallery-grid-mode .swiper-slide {
    width: 100% !important;
    margin-right: 0 !important;
    flex-shrink: 1 !important;
  }
}

/* ---------- 17. FIXED 430 WIDE CANVAS + PER-SCREEN RATIOS (mobile) ---------- */
/* viewport fixed to 430px wide via head script; browser scales to device width.
   Width locked to 430; each screen's height derived from its aspect ratio. */
@media screen and (max-width: 768px) {
  .sq-page-body .sq-screen,
  .sq-page-body > .sq-screen {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  /* lighter / form / CTA / plain text screens: 3:4 */
  .sq-page-body .sq-screen:not(.home-videoplay):not(.sm2):not(.sm3) {
    aspect-ratio: 3 / 4;
  }
  /* visual / video-heavy screens: 2:3 */
  .sq-page-body .sq-screen.sm2,
  .sq-page-body .sq-screen.sm3 {
    aspect-ratio: 2 / 3;
  }
  /* hero / first screen: 9:16 */
  .sq-page-body .sq-screen.home-videoplay {
    aspect-ratio: 9 / 16;
  }
}
/* ---------- 18. HERO: center title/subtitle/button within the 9:16 video ---------- */
@media screen and (max-width: 768px) {
  .sq-screen.home-videoplay { position: relative; }
  .sq-screen.home-videoplay .sq-screen-wp {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .sq-screen.home-videoplay .sq-screen-flex {
    height: auto !important;
  }
}
/* ---------- 19. inline videos: full-bleed width on mobile ---------- */
@media screen and (max-width: 768px) {
  .sq-aspect-ratio-box.sq-videos,
  .sq-videos-widget {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .sq-aspect-ratio-box.sq-videos video,
  .sq-videos-widget video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}
/* ---------- 19b. reset stray screen margin + videos full-bleed to 430 ---------- */
@media screen and (max-width: 768px) {
  .sq-page-body .sq-screen {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .sq-aspect-ratio-box.sq-videos,
  .sq-videos-widget {
    width: calc(100% + 28px) !important;
    max-width: calc(100% + 28px) !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
  }
  .sq-aspect-ratio-box.sq-videos video,
  .sq-videos-widget video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}
/* ---------- 19c. videos: natural height (no vertical crop), full width ---------- */
@media screen and (max-width: 768px) {
  .sq-aspect-ratio-box.sq-videos,
  .sq-videos-widget,
  .sq-aspect-ratio-box.sq-videos .sq-aspect-ratio {
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .sq-aspect-ratio-box.sq-videos video,
  .sq-videos-widget video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }
}
/* ---------- 20. RWA Domains purple background: 100vw full width, all screens ---------- */
/* .sq-screen is capped at 1680px with overflow:hidden. Uncap this screen so the purple bg fills the viewport. */
.RWA_search {
  max-width: none !important;
  width: 100% !important;
  overflow: visible !important;
}
.RWA_search .sq-bgx,
.RWA_search .sq-bgx-m,
.RWA_search .sq-bgx-pc,
.RWA_search .sq-bgx-color,
.RWA_search .sq-bgx-color-0 {
  width: 100vw !important;
  left: 50% !important;
  right: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
}
/* ---------- 21. show the glowing domain-text background video on mobile too ---------- */
@media screen and (max-width: 768px) {
  .RWA_search .sq-bgx-pc { display: block !important; }
  .RWA_search .sq-bgx-pc .sq-bgx-video,
  .RWA_search .sq-bgx-pc .sq-bgx-video-1 { display: block !important; }
  .RWA_search .sq-bgx-pc .sq-bgx-video .video-bg {
    object-fit: cover !important;
    object-position: center;
  }
}
/* ---------- 22. mobile: confine glowing domain video to the searchbox band ---------- */
@media screen and (max-width: 768px) {
  .RWA_search .sq-bgx-pc .sq-bgx-video,
  .RWA_search .sq-bgx-pc .sq-bgx-video-1 {
    top: 27% !important;
    bottom: auto !important;
    height: 420px !important;
    width: 130% !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }
  .RWA_search .sq-bgx-pc .sq-bgx-video .video-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
/* ---------- 23. purple bg: soft dim vertical glow, transparent well before edges ---------- */
.RWA_search .sq-bgx-color-0 {
  background: linear-gradient(180deg,
    rgba(81, 45, 167, 0) 0%,
    rgba(81, 45, 167, 0.3) 40%,
    rgba(81, 45, 167, 0.5) 60%,
    rgba(81, 45, 167, 0.5) 75%,
    rgba(81, 45, 167, 0) 92%,
    rgba(81, 45, 167, 0) 100%) !important;
}
.RWA_search,
.RWA_search .sq-screen-wp,
.RWA_search .sq-screen-flex {
  background: transparent !important;
}
/* ---------- 24. fade the glowing video layer edges so no hard seam ---------- */
@media screen and (max-width: 768px) {
  .RWA_search .sq-bgx-pc .sq-bgx-video,
  .RWA_search .sq-bgx-pc .sq-bgx-video-1 {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 55%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 55%, transparent 100%);
  }
}
/* ---------- 25. move RWA Domains title/subtitle up on mobile ---------- */
@media screen and (max-width: 768px) {
  .RWA_search .sq_text_49HhTCPU,
  .RWA_search .sq_text_496aSvPw,
  .RWA_search .sq_space_49QP8o7a,
  .RWA_search .sq_space_49aq6zjP,
  .RWA_search .sq_space_49q2xepP {
    transform: translateY(-40px) !important;
  }
}
/* ---------- 26. hamburger: dark overlay + close on scroll ---------- */
@media screen and (max-width: 1024px) {
  .sq-mask {
    background: rgba(0,0,0,0.85) !important;
    z-index: 9998 !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }
}
/* ---------- 27. keep hamburger toggle clickable above mask ---------- */
@media screen and (max-width: 1024px) {
  .sq-toggle {
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
  }
}