/* Premier Designs 702: screenshot-led mobile stabilization, 2026-10-10.
   Intentional scope: header icon on mobile site-wide; remaining rules homepage mobile only. */
@media (max-width:1024px) {
  body#ut-sitebody #header-section .ha-header-front,
  body#ut-sitebody #header-section .ut-mm-trigger,
  body#ut-sitebody #header-section #ut-hamburger-wrap-mobile {
    overflow:visible!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger,
  body#ut-sitebody #header-section #ut-hamburger-wrap-mobile {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body#ut-sitebody #header-section #ut-open-mobile-menu.ut-hamburger {
    position:relative!important;
    display:block!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0 0 0 auto!important;
    border:0!important;
    background:transparent!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    cursor:pointer!important;
    z-index:1002!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger span {
    display:block!important;
    position:absolute!important;
    left:9px!important;
    top:21px!important;
    width:26px!important;
    height:3px!important;
    border:0!important;
    border-radius:2px!important;
    background:#60efff!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger span::before,
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger span::after {
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    width:26px!important;
    height:3px!important;
    border:0!important;
    border-radius:2px!important;
    background:#60efff!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger:not(.is-active) span::before {
    top:-8px!important;transform:none!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger:not(.is-active) span::after {
    top:8px!important;transform:none!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger.is-active span {
    background:transparent!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger.is-active span::before {
    top:0!important;transform:rotate(45deg)!important;
  }
  body#ut-sitebody #header-section .ut-mm-trigger #ut-open-mobile-menu.ut-hamburger.is-active span::after {
    top:0!important;transform:rotate(-45deg)!important;
  }
}
@media (max-width:767px) {
  /* Mobile hero: the original slider stays enabled for desktop.
     A static copy of the existing slide is inserted for mobile through a tiny script. */
  body.home #ut-custom-hero {
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    background:#141618!important;
  }
  /* Hide Revolution's mobile layer only after the static hero has mounted. */
  body.home #ut-custom-hero:has(> .pd702-mobile-hero) > sr7-module,
  body.home #ut-custom-hero:has(> .pd702-mobile-hero) > .rs-p-wp-fix {
    display:none!important;
  }
  body.home #ut-custom-hero .pd702-mobile-hero {
    box-sizing:border-box!important;
    min-height:clamp(410px,77svh,650px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:12px!important;
    padding:125px 20px 52px!important;
    color:#fff!important;
    text-align:center!important;
    background:#141618!important;
  }
  body.home .pd702-mobile-hero__eyebrow {
    color:#fff!important;
    font-size:15px!important;
    line-height:1.4!important;
    font-weight:600!important;
    margin:0!important;
  }
  body.home .pd702-mobile-hero__title {
    color:#fff!important;
    font-size:clamp(30px,8vw,43px)!important;
    line-height:1.08!important;
    font-weight:800!important;
    margin:0 0 8px!important;
    text-wrap:balance!important;
  }
  body.home .pd702-mobile-hero__intro {
    color:#fff!important;
    font-size:15px!important;
    line-height:1.5!important;
    margin:0 0 16px!important;
  }
  body.home a.pd702-mobile-hero__cta {
    width:100%!important;
    max-width:380px!important;
    height:52px!important;
    min-height:52px!important;
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px 10px!important;
    background:#60efff!important;
    border-radius:999px!important;
    color:#101214!important;
    font-size:clamp(10px,3vw,14px)!important;
    line-height:1.15!important;
    font-weight:800!important;
    white-space:nowrap!important;
    text-decoration:none!important;
  }
  body.home a.pd702-mobile-hero__cta:focus-visible {
    outline:3px solid #fff!important;outline-offset:3px!important;
  }
  /* Full-bleed homepage: remove Brooklyn's outer 40px mobile grid gutters.
     Section backgrounds reach both screen edges; column text retains 18px safe padding.
     Footer styles/containers are deliberately untouched. */
  body.home #main-content,
  body.home #main-content > .main-content-background,
  body.home #main-content > .main-content-background > .grid-container,
  body.home #main-content > .main-content-background > .grid-container > #primary,
  body.home #main-content #post-18,
  body.home #main-content #post-18 > .grid-100,
  body.home #main-content #post-18 > .grid-100 > .entry-content,
  body.home #main-content .wpb-content-wrapper {
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.home #main-content .wpb-content-wrapper > .vc_row,
  body.home #main-content .wpb-content-wrapper > .vc_section,
  body.home #main-content .wpb-content-wrapper > .vc_section > .vc_row {
    position:relative!important;
    left:0!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  /* Mobile page widths and internal card gutters, with no desktop overrides. */
  body.home #main-content,
  body.home #main-content .entry-content,
  body.home #main-content .wpb-content-wrapper {
    box-sizing:border-box!important;
    max-width:100%!important;
  }
  body.home #main-content .wpb-content-wrapper .vc_column_container,
  body.home #main-content .wpb-content-wrapper .wpb_column {
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.home #main-content .wpb-content-wrapper .vc_column-inner {
    min-width:0!important;
    box-sizing:border-box!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.home #main-content .wpb-content-wrapper :is(.vc_row-o-full-height,.vc_row-o-equal-height) {
    min-height:0!important;
    height:auto!important;
  }
  body.home #main-content .wpb-content-wrapper .vc_empty_space {
    max-height:36px!important;
  }
  body.home #main-content .wpb-content-wrapper .wpb_text_column {
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.home #main-content .wpb-content-wrapper div[style*="padding: 45px"],
  body.home #main-content .wpb-content-wrapper div[style*="padding: 40px"],
  body.home #main-content .wpb-content-wrapper div[style*="padding:45px"],
  body.home #main-content .wpb-content-wrapper div[style*="padding:40px"] {
    padding:24px 20px!important;
    box-sizing:border-box!important;
    max-width:100%!important;
  }
  body.home #main-content .wpb-content-wrapper .wpb_text_column :is(h1,h2,h3) {
    max-width:100%!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:none!important;
    text-wrap:pretty!important;
  }
  /* Do not use global light/dark text overrides; correct only known light panels. */
  body.home #main-content .wpb_text_column div[style*="background: #ffffff"] > p,
  body.home #main-content .wpb_text_column div[style*="background: #fff"] > p,
  body.home #main-content .wpb_text_column div[style*="background: #f7f8fa"] > p,
  body.home #main-content .wpb_text_column div[style*="background:#ffffff"] > p,
  body.home #main-content .wpb_text_column div[style*="background:#fff"] > p {
    color:#30343a!important;
  }
  body.home #main-content .wpb_text_column div[style*="background: #ffffff"] > p > span[style*="color: #ffffff"],
  body.home #main-content .wpb_text_column div[style*="background: #fff"] > p > span[style*="color: #ffffff"] {
    color:#30343a!important;
  }
  /* Identical CTA dimensions and single-line labels without shrinking ordinary links. */
  body.home #main-content .bklyn-btn-holder {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.home #main-content .bklyn-btn-holder > a.bklyn-btn,
  body.home #main-content a.vc_btn3,
  body.home #main-content a.ut-btn,
  body.home #main-content .pd702-callback-form button.pd702-action-button {
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:100%!important;
    min-height:52px!important;
    height:auto!important;
    padding:12px 10px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    gap:6px!important;
    font-size:clamp(10px,3vw,13px)!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    border-radius:999px!important;
  }
  body.home #main-content .bklyn-btn-holder > a.bklyn-btn :is(span,b,strong,i),
  body.home #main-content a.vc_btn3 :is(span,b,strong,i),
  body.home #main-content a.ut-btn :is(span,b,strong,i) {
    font-size:inherit!important;
    line-height:inherit!important;
    white-space:nowrap!important;
  }
  body.home #main-content .pd702-callback-card {
    box-sizing:border-box!important;
    max-width:100%!important;
    padding:26px 20px!important;
    margin:0 auto 20px!important;
    overflow:hidden!important;
  }
  body.home #main-content .pd702-callback-form,
  body.home #main-content .pd702-callback-form label,
  body.home #main-content .pd702-callback-form .wide {
    min-width:0!important;
    max-width:100%!important;
  }
  body.home #main-content .pd702-callback-form input,
  body.home #main-content .pd702-callback-form select,
  body.home #main-content .pd702-callback-form textarea {
    box-sizing:border-box!important;
    max-width:100%!important;
    width:100%!important;
    font-size:16px!important;
  }
  body.home #main-content .pd702-analytics {
    box-sizing:border-box!important;
    max-width:100%!important;
    padding:20px 16px!important;
  }
  body.home #main-content .pd702-stat-card {
    padding:15px 8px!important;
  }
  body.home #main-content .pd702-stat-card h3 {
    font-size:24px!important;
    line-height:1.2!important;
    min-height:0!important;
    margin:0 0 10px!important;
  }
  body.home #main-content .pd702-stat-row {
    padding:5px 0!important;
  }
  body.home #main-content .pd702-chart {
    height:105px!important;
  }
  body.home #main-content .wpb-content-wrapper img {
    max-width:100%!important;
    height:auto;
  }
  /* Flexible statistics row in the Why Businesses Choose Us card. */
  body.home #main-content div[style*="background: #f7f8fa"] > div[style*="display: flex"] {
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }
  body.home #main-content div[style*="background: #f7f8fa"] > div[style*="display: flex"] > div {
    flex:1 1 28%!important;
    min-width:0!important;
    font-size:12px!important;
    line-height:1.4!important;
    overflow-wrap:break-word!important;
  }
  body.home #main-content div[style*="background: #f7f8fa"] > div[style*="display: flex"] strong {
    font-size:20px!important;
  }
  body.home #main-content .vc_row,
  body.home #main-content .vc_section {
    scroll-margin-top:105px!important;
  }
  body.home #main-content :is(p,h1,h2,h3,h4,li) {
    max-width:100%;
  }
  body.home footer,
  body.home footer :is(.widget,a,p,li) {
    overflow-wrap:anywhere;
  }
  body.home #main-content .wpb-content-wrapper [style*="min-height: 260px"],
  body.home #main-content .wpb-content-wrapper [style*="min-height: 230px"] {
    min-height:0!important;
    height:auto!important;
  }

  /* Screenshot cleanup: the two final WPBakery rows after the contact
     details are truly empty. They create a white band with orphaned
     visual decorations on mobile. Hide only these direct-child rows
     and their following full-width spacer elements. Keep the footer,
     scroll-to-top control, and actual contact section untouched. */
  body.home #main-content .wpb-content-wrapper > .vc_row.autoseo-studio-section-16,
  body.home #main-content .wpb-content-wrapper > .vc_row.autoseo-studio-section-17,
  body.home #main-content .wpb-content-wrapper > .vc_row.autoseo-studio-section-16 + .vc_row-full-width,
  body.home #main-content .wpb-content-wrapper > .vc_row.autoseo-studio-section-17 + .vc_row-full-width {
    display:none!important;
  }
}