/* LS WORLDWIDE — MOBILE / TABLET RESPONSIVE ENHANCEMENT
   Desktop layout is intentionally unchanged. */

@media (max-width: 900px){

  :root{
    --header-h:72px !important;
  }

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    padding-top:var(--header-h) !important;
  }

  img,
  video,
  iframe{
    max-width:100% !important;
  }

  .container,
  .header-inner,
  .home-hero-content,
  .page-hero-content,
  body[data-page="services"] section > .container,
  #heavy-haul-field-gallery .container{
    width:calc(100% - 32px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Header / navigation */
  .site-header{
    width:100% !important;
    max-width:100% !important;
    height:var(--header-h) !important;
    overflow:visible !important;
  }

  .header-inner{
    height:var(--header-h) !important;
    gap:12px !important;
  }

  .header-brand{
    min-width:0 !important;
    max-width:calc(100% - 58px) !important;
  }

  .header-brand img{
    width:165px !important;
    max-width:46vw !important;
    max-height:50px !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .mobile-menu-button{
    display:block !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    padding:8px !important;
    margin-left:auto !important;
    border-radius:8px !important;
    touch-action:manipulation;
  }

  .mobile-menu-button span{
    width:100% !important;
  }

  .main-nav{
    position:absolute !important;
    top:var(--header-h) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - var(--header-h)) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:10px 18px 20px !important;
    background:#fff !important;
  }

  .main-nav.open{
    display:flex !important;
  }

  .nav-link{
    display:block !important;
    width:100% !important;
    padding:14px 4px !important;
    font-size:14px !important;
    line-height:1.3 !important;
    white-space:normal !important;
    border-bottom:1px solid rgba(7,20,38,.08);
  }

  .nav-service-wrap{
    width:100% !important;
  }

  .nav-service-row{
    width:100% !important;
  }

  .nav-services-link{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .services-arrow{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    touch-action:manipulation;
  }

  .services-dropdown{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .services-dropdown a{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    padding:11px 14px !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  /* Hero sections */
  .home-hero{
    min-height:calc(100svh - var(--header-h)) !important;
    height:auto !important;
  }

  .home-hero-content{
    padding:64px 0 54px !important;
  }

  .home-hero-copy{
    width:100% !important;
    max-width:720px !important;
  }

  .home-hero h1{
    font-size:clamp(38px,10vw,54px) !important;
    line-height:1.05 !important;
    overflow-wrap:anywhere;
  }

  .home-hero p{
    max-width:100% !important;
    font-size:16px !important;
    line-height:1.65 !important;
  }

  .hero-actions{
    gap:10px !important;
    width:100% !important;
  }

  .hero-actions .btn{
    min-height:48px !important;
  }

  .video-dots{
    right:16px !important;
    bottom:18px !important;
  }

  .page-hero,
  .heavy-haul-page-video-hero{
    min-height:430px !important;
    height:auto !important;
    align-items:flex-end !important;
  }

  .page-hero-content,
  .heavy-haul-page-video-hero .page-hero-content{
    padding:84px 0 48px !important;
  }

  .page-hero-content h1,
  .heavy-haul-page-video-hero .page-hero-content h1{
    max-width:100% !important;
    font-size:clamp(36px,8.5vw,50px) !important;
    overflow-wrap:anywhere;
  }

  .page-hero-content p,
  .heavy-haul-page-video-hero .page-hero-content p{
    max-width:100% !important;
    font-size:16px !important;
    line-height:1.65 !important;
  }

  /* Global section spacing / typography */
  section{
    padding:64px 0 !important;
  }

  h2{
    font-size:clamp(29px,7vw,40px) !important;
    overflow-wrap:anywhere;
  }

  h3{
    overflow-wrap:anywhere;
  }

  p,
  li{
    overflow-wrap:anywhere;
  }

  .lead{
    max-width:100% !important;
  }

  /* Common layouts */
  .split,
  .trust-grid,
  .contact-layout,
  .detail-layout,
  .service-directory,
  .project-detail-info,
  .clean-bullet-heading{
    grid-template-columns:1fr !important;
  }

  .split,
  .trust-grid,
  .contact-layout,
  .detail-layout{
    gap:32px !important;
  }

  .detail-sidebar{
    position:relative !important;
    top:auto !important;
    width:100% !important;
  }

  .detail-sidebar a{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
  }

  .detail-copy{
    width:100% !important;
    max-width:none !important;
  }

  .detail-copy p{
    line-height:1.75 !important;
  }

  .detail-cta{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
  }

  .detail-cta .btn{
    width:100% !important;
    max-width:360px !important;
  }

  .round-image img{
    height:auto !important;
    aspect-ratio:16 / 10;
  }

  .stats-row{
    grid-template-columns:1fr !important;
  }

  .stat + .stat{
    border-left:0 !important;
    border-top:1px solid var(--line) !important;
  }

  /* Service / project galleries */
  .preview-grid,
  .project-grid,
  .service-project-grid,
  #heavy-haul-field-gallery .heavy-haul-field-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .drayage-photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .project-card,
  .service-project-card{
    min-height:250px !important;
  }

  .service-project-gallery .service-gallery-heading{
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:start !important;
  }

  #heavy-haul-field-gallery .heavy-haul-field-heading{
    align-items:flex-start !important;
  }

  #heavy-haul-field-gallery .heavy-haul-field-heading h2{
    white-space:normal !important;
  }

  /* About page photo area */
  .about-four-photo-grid{
    gap:12px !important;
  }

  /* Contact */
  .quote-form{
    width:100% !important;
    padding:22px !important;
  }

  .form-grid{
    grid-template-columns:1fr 1fr !important;
  }

  input,
  textarea,
  select,
  button{
    max-width:100%;
  }

  input,
  textarea,
  select{
    font-size:16px !important; /* prevents iOS focus zoom */
  }

  /* CTA + footer */
  .cta-inner,
  .footer-main,
  .footer-bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .cta-inner .btn{
    width:100% !important;
    max-width:360px !important;
  }

  .footer-main,
  .footer-bottom{
    gap:18px !important;
  }

  .footer-links{
    justify-content:flex-start !important;
    gap:10px 16px !important;
  }

  .footer-logo{
    max-width:190px !important;
  }

  /* Lightboxes */
  .project-gallery-lightbox,
  #service-photo-lightbox,
  #about-photo-lightbox{
    padding:20px 12px !important;
  }

  .project-gallery-lightbox-image,
  #service-photo-lightbox img,
  #about-photo-lightbox img{
    max-width:94vw !important;
    max-height:82svh !important;
    object-fit:contain !important;
  }
}

@media (max-width: 620px){

  :root{
    --header-h:68px !important;
  }

  .container,
  .header-inner,
  .home-hero-content,
  .page-hero-content,
  body[data-page="services"] section > .container,
  #heavy-haul-field-gallery .container{
    width:calc(100% - 28px) !important;
  }

  .header-brand img{
    width:150px !important;
    max-width:52vw !important;
    max-height:46px !important;
  }

  .main-nav{
    padding:8px 14px 18px !important;
  }

  section{
    padding:52px 0 !important;
  }

  .home-hero-content{
    padding:50px 0 44px !important;
  }

  .home-hero h1{
    font-size:clamp(34px,11vw,44px) !important;
  }

  .home-hero p{
    font-size:15px !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .hero-actions .btn{
    width:100% !important;
  }

  .page-hero,
  .heavy-haul-page-video-hero{
    min-height:390px !important;
  }

  .page-hero-content,
  .heavy-haul-page-video-hero .page-hero-content{
    padding:72px 0 42px !important;
  }

  .page-hero-content h1,
  .heavy-haul-page-video-hero .page-hero-content h1{
    font-size:36px !important;
  }

  .preview-grid,
  .project-grid,
  .service-project-grid,
  #heavy-haul-field-gallery .heavy-haul-field-grid,
  .drayage-photo-grid,
  .about-four-photo-grid,
  .form-grid{
    grid-template-columns:1fr !important;
  }

  .project-card,
  .service-project-card{
    min-height:250px !important;
  }

  #heavy-haul-field-gallery,
  .service-project-gallery,
  .drayage-project-photos{
    padding-top:48px !important;
    padding-bottom:60px !important;
  }

  #heavy-haul-field-gallery .heavy-haul-field-heading{
    display:block !important;
    margin-bottom:20px !important;
  }

  #heavy-haul-field-gallery .heavy-haul-field-heading::after{
    display:none !important;
  }

  .about-four-photo-item{
    aspect-ratio:16 / 10 !important;
  }

  .timeline-item summary{
    grid-template-columns:42px minmax(0,1fr) 24px !important;
  }

  .timeline-copy{
    padding-right:0 !important;
  }

  .quote-form{
    padding:18px !important;
    border-radius:14px !important;
  }

  .detail-cta .btn,
  .cta-inner .btn{
    max-width:none !important;
  }

  /* Keep marquee prominent but phone-safe. */
  .network-marquee{
    margin-top:22px !important;
  }

  .network-row{
    height:76px !important;
  }

  .network-logo{
    height:76px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .network-logo img{
    height:46px !important;
    max-width:124px !important;
  }
}

/* Landscape phones: prevent the fixed menu from covering the whole screen. */
@media (max-width: 900px) and (max-height: 520px){
  .main-nav{
    max-height:calc(100vh - var(--header-h)) !important;
  }

  .home-hero{
    min-height:520px !important;
  }
}

/* Touch devices should not depend on hover states. */
@media (hover:none){
  .project-card:hover img,
  .service-project-card:hover img,
  #heavy-haul-field-gallery .heavy-haul-field-card:hover img,
  .drayage-photo-card:hover img{
    transform:none !important;
  }
}


/* =========================================================
   HOME SERVICES ACCORDION — MOBILE LAYOUT FIX
   Desktop appearance is intentionally untouched.
   ========================================================= */

@media (max-width: 700px){

  .home-services-section{
    overflow:hidden !important;
  }

  .home-services-section .container{
    width:calc(100% - 28px) !important;
    max-width:none !important;
  }

  .home-services-section h2{
    max-width:100% !important;
    margin-bottom:14px !important;
    line-height:1.08 !important;
  }

  .home-services-section .lead{
    max-width:100% !important;
    margin-bottom:0 !important;
    line-height:1.6 !important;
  }

  .home-services-section .service-timeline{
    margin-top:26px !important;
    width:100% !important;
  }

  /* Remove the desktop vertical timeline on phones.
     The numbered badges remain as the visual sequence. */
  .home-services-section .service-timeline::before{
    display:none !important;
    content:none !important;
  }

  .home-services-section .service-item{
    position:relative !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border-bottom:1px solid rgba(18,40,68,.12) !important;
  }

  .home-services-section .service-item:last-child{
    border-bottom:none !important;
  }

  /*
    Clean 3-column mobile row:
    number | service copy | +/-
  */
  .home-services-section .service-toggle{
    width:100% !important;
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) 30px !important;
    align-items:center !important;
    column-gap:14px !important;
    padding:18px 0 !important;
    margin:0 !important;
    text-align:left !important;
  }

  .home-services-section .service-step{
    position:static !important;
    inset:auto !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    margin:0 !important;
    border-width:2px !important;
    font-size:13px !important;
    line-height:1 !important;
    transform:none !important;
  }

  .home-services-section .service-main{
    min-width:0 !important;
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
    gap:5px !important;
  }

  .home-services-section .service-title{
    display:block !important;
    width:100% !important;
    font-size:18px !important;
    line-height:1.22 !important;
    overflow-wrap:anywhere !important;
  }

  .home-services-section .service-summary{
    display:block !important;
    width:100% !important;
    font-size:14px !important;
    line-height:1.5 !important;
    overflow-wrap:anywhere !important;
  }

  .home-services-section .service-icon{
    position:static !important;
    width:30px !important;
    min-width:30px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
    justify-self:end !important;
    text-align:center !important;
    font-size:24px !important;
    line-height:1 !important;
  }

  /*
    Expanded description aligns with the service text rather than starting
    underneath the number badge, which keeps the mobile layout compact.
  */
  .home-services-section .service-panel{
    width:auto !important;
    margin:0 0 0 66px !important;
    padding:0 0 20px !important;
  }

  .home-services-section .service-panel p{
    max-width:none !important;
    margin:0 0 12px !important;
    font-size:14px !important;
    line-height:1.65 !important;
  }

  .home-services-section .service-page-link{
    min-height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    font-size:14px !important;
  }

  .home-services-section .service-timeline + p{
    margin-top:22px !important;
  }
}

@media (max-width: 390px){

  .home-services-section .service-toggle{
    grid-template-columns:46px minmax(0,1fr) 26px !important;
    column-gap:11px !important;
    padding:16px 0 !important;
  }

  .home-services-section .service-step{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    font-size:12px !important;
  }

  .home-services-section .service-title{
    font-size:17px !important;
  }

  .home-services-section .service-summary{
    font-size:13.5px !important;
  }

  .home-services-section .service-icon{
    width:26px !important;
    min-width:26px !important;
    font-size:22px !important;
  }

  .home-services-section .service-panel{
    margin-left:57px !important;
  }
}