/* =====================================================
   LO Outdoors — Mobile fixes
   Loaded LAST so it overrides everything else.
   ===================================================== */

* { box-sizing: border-box; }
html, body { overflow-x: clip; width: 100%; margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; }

/* ============ TABLET (max 960px) ============ */
@media (max-width: 960px) {
  .container { padding-left: 22px !important; padding-right: 22px !important; }
  section { padding: 64px 0 !important; }

  /* NAV */
  .lo-nav { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 100 !important; }
  .lo-nav .topbar { padding: 6px 22px !important; font-size: 10px !important; letter-spacing: 0.06em !important; }
  .lo-nav .mainbar { padding: 10px 22px !important; gap: 14px !important; }
  .lo-nav .mainbar .logo img { height: 34px !important; }
  .lo-nav .mainbar > ul { display: none !important; }
  .lo-nav .mainbar .right { gap: 8px !important; }
  .lo-nav .mainbar .right .btn-outline-dark { display: none !important; }
  .lo-nav .mainbar .right .btn { padding: 9px 14px !important; font-size: 12px !important; }

  /* HERO */
  .lo-hero { padding: 80px 0 80px !important; min-height: 500px !important; }
  .lo-hero h1 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.05 !important; }
  .lo-hero p.lead { font-size: 15px !important; max-width: 100% !important; }
  .lo-hero .ctas { flex-direction: column !important; gap: 10px !important; }
  .lo-hero .ctas .btn { width: 100% !important; justify-content: center !important; padding: 14px 18px !important; }

  /* TRUST STRIP */
  .lo-trust { padding: 20px 0 !important; }
  .lo-trust .grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .lo-trust .item .num { font-size: 22px !important; }

  /* SECTION HEADS */
  .section-head h2 { font-size: clamp(28px, 6vw, 42px) !important; }
  .section-head p { font-size: 14px !important; }

  /* SERVICES (home) */
  .service-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .service-card { aspect-ratio: 4/3 !important; }
  .service-card .body { padding: 18px !important; }
  .service-card h3 { font-size: 18px !important; }
  .service-card .num { font-size: 10px !important; }
  .service-card .arrow { width: 32px !important; height: 32px !important; top: 14px !important; right: 14px !important; }

  /* ABOUT SPLIT */
  .about-grid { grid-template-columns: 1fr !important; gap: 50px !important; }
  .about-visual { max-width: 480px !important; margin: 0 auto 30px !important; }
  .about-visual .small { display: none !important; }
  .about-content h2 { font-size: clamp(28px, 7vw, 42px) !important; }
  .about-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; padding-top: 24px !important; margin-top: 28px !important; }
  .about-stats .num { font-size: 28px !important; }
  .about-stats .label { font-size: 10px !important; }

  /* GALLERY (home) — single column on mobile, clean */
  .lo-gallery .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 240px !important;
    gap: 10px !important;
  }
  .lo-gallery .gallery-grid .g.large,
  .lo-gallery .gallery-grid .g.wide,
  .lo-gallery .gallery-grid .g.tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* GALLERY PAGE mosaic */
  .gallery-mosaic { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 180px !important; gap: 8px !important; }
  .gallery-mosaic .proj.size-l,
  .gallery-mosaic .proj.size-w { grid-column: span 2 !important; }
  .gallery-mosaic .proj.size-t { grid-row: span 2 !important; }
  .gallery-mosaic .proj .overlay { padding: 16px !important; }
  .gallery-mosaic .proj h4 { font-size: 14px !important; }
  .gallery-mosaic .proj .meta { font-size: 10px !important; }
  .gallery-mosaic .proj .tag { font-size: 9px !important; }
  .gallery-filters { gap: 6px !important; flex-wrap: wrap !important; padding-bottom: 16px !important; }
  .gallery-filters .chip { font-size: 11px !important; padding: 8px 12px !important; }
  .gallery-filters .count { width: 100% !important; text-align: left !important; margin-top: 8px !important; font-size: 10px !important; }

  /* BEFORE / AFTER */
  .lo-before-after { padding: 50px 0 !important; }
  .ba-frame { aspect-ratio: 4/5 !important; border-radius: 4px !important; }
  .ba-tag { font-size: 9px !important; padding: 4px 8px !important; top: 10px !important; }
  .ba-tag-before { left: 10px !important; }
  .ba-tag-after { right: 10px !important; }
  .ba-handle-knob { width: 42px !important; height: 42px !important; border-width: 2.5px !important; }
  .ba-tabs { width: 100% !important; padding: 4px !important; }
  .ba-tab { padding: 8px 12px !important; flex: 1 1 auto !important; justify-content: center !important; }
  .ba-tab-label { font-size: 11px !important; }
  .ba-tab-num { font-size: 9px !important; }
  .lo-before-after h2 { font-size: clamp(26px, 6.5vw, 36px) !important; }

  /* CTA BAND */
  .lo-cta-band { padding: 60px 0 !important; }
  .lo-cta-band h2 { font-size: clamp(28px, 7vw, 42px) !important; }
  .lo-cta-band p { font-size: 15px !important; }
  .lo-cta-band .actions { flex-direction: column !important; gap: 10px !important; }
  .lo-cta-band .actions .btn { width: 100% !important; justify-content: center !important; }

  /* PAGE HEADERS (inner pages) */
  .lo-pageheader { padding: 80px 0 50px !important; min-height: auto !important; }
  .lo-pageheader h1 { font-size: clamp(34px, 9vw, 56px) !important; line-height: 1.05 !important; }
  .lo-pageheader p.lead { font-size: 14px !important; }
  .lo-pageheader .crumbs { font-size: 10px !important; }

  /* SERVICES PAGE detail rows — stack vertically */
  .lo-service-detail .block { grid-template-columns: 1fr !important; gap: 24px !important; }
  .lo-service-detail .photo { aspect-ratio: 4/3 !important; min-height: 240px !important; }
  .lo-service-detail .copy h2 { font-size: clamp(26px, 6.5vw, 38px) !important; }
  .lo-service-detail .included ul { grid-template-columns: 1fr 1fr !important; }
  .lo-service-detail .actions { flex-direction: column !important; gap: 10px !important; }
  .lo-service-detail .actions .btn { width: 100% !important; justify-content: center !important; }

  /* PROCESS PAGE */
  .lo-process .process-step { grid-template-columns: 1fr !important; gap: 14px !important; }
  .lo-process .process-step .big-num { font-size: 60px !important; line-height: 1 !important; }
  /* (.process-step .big-num handled above) */

  /* ABOUT PAGE */
  .lo-story .grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .lo-story .label { font-size: 12px !important; }
  .lo-story .text p { font-size: 15px !important; }
  .lo-story blockquote { font-size: 18px !important; padding-left: 16px !important; }
  .lo-values .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .lo-values .value-card { padding: 24px 22px !important; }
  .lo-equipment .spec-sheet { display: block !important; }
  .lo-equipment .row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 16px 0 !important; }

  /* CONTACT PAGE */
  .contact-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .contact-form { padding: 28px 22px !important; }
  .contact-form .row { grid-template-columns: 1fr !important; gap: 16px !important; }
  .contact-form input, .contact-form select, .contact-form textarea { font-size: 16px !important; }
  .contact-form .submit-row { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  .contact-form .submit-row .btn { width: 100% !important; justify-content: center !important; }
  .contact-info { padding: 0 !important; }
  .contact-info .info-card { padding: 22px !important; }
  .contact-info .big { font-size: 22px !important; }
  .area-served ul { grid-template-columns: 1fr 1fr !important; }

  /* FOOTER */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-about { grid-column: span 2 !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }

  /* QUOTE DIALOG */
  .lo-dialog { padding: 24px 20px !important; max-width: calc(100vw - 24px) !important; }
  .lo-dialog .row { grid-template-columns: 1fr !important; }
  .lo-dialog input, .lo-dialog select, .lo-dialog textarea { font-size: 16px !important; }
  .lo-dialog .submit-row { flex-direction: column !important; align-items: stretch !important; }
  .lo-dialog .submit-row .btn { width: 100% !important; justify-content: center !important; }
}

/* ============ PHONE (max 600px) ============ */
@media (max-width: 600px) {
  .container { padding-left: 18px !important; padding-right: 18px !important; }
  section { padding: 50px 0 !important; }

  /* HERO */
  .lo-hero h1 { font-size: clamp(32px, 10vw, 44px) !important; }
  .lo-hero p.lead { font-size: 14px !important; }

  /* TRUST */
  .lo-trust .grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .lo-trust .item { font-size: 11px !important; }
  .lo-trust .item .num { font-size: 20px !important; }
  .lo-trust .item strong { font-size: 11px !important; }
  .lo-trust .item span { font-size: 9px !important; }

  /* SERVICES → 1 column */
  .service-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .service-card { aspect-ratio: 16/10 !important; }
  .service-card h3 { font-size: 22px !important; }

  /* ABOUT STATS */
  .about-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; }
  .about-stats .num { font-size: 24px !important; }

  /* GALLERY → 1 column */
  .lo-gallery .gallery-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 200px !important;
    gap: 8px !important;
  }
  .lo-gallery .gallery-grid .g.large,
  .lo-gallery .gallery-grid .g.wide,
  .lo-gallery .gallery-grid .g.tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .gallery-mosaic {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px !important;
  }
  .gallery-mosaic .proj.size-l,
  .gallery-mosaic .proj.size-w,
  .gallery-mosaic .proj.size-t {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* SERVICES PAGE list-included → 1 col */
  .lo-service-detail .included ul { grid-template-columns: 1fr !important; }

  /* FOOTER → 1 column */
  .footer-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .footer-about { grid-column: span 1 !important; }
  .area-served ul { grid-template-columns: 1fr !important; }

  /* PAGE TITLES */
  .lo-pageheader h1 { font-size: clamp(30px, 10vw, 44px) !important; }

  /* About visual smaller */
  .about-visual { max-width: 320px !important; }
}

/* =====================================================
   HAMBURGER + MOBILE MENU OVERLAY
   ===================================================== */

/* Hide hamburger on desktop */
.hamburger { display: none; }

/* Hide mobile menu overlay on desktop */
.mobile-menu { display: none; }

@media (max-width: 960px) {
  /* Show hamburger; tighten nav layout */
  .hamburger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1.5px solid var(--lo-ink, #1A1A1A);
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
    gap: 5px;
    margin-left: 6px;
    flex-shrink: 0;
  }
  .hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--lo-ink, #1A1A1A);
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.2s;
  }
  .lo-nav.menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lo-nav.menu-open .hamburger span:nth-child(2) { opacity: 0; }
  .lo-nav.menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Inline nav links hidden on mobile */
  .lo-nav .mainbar > ul.nav-links { display: none !important; }

  /* Hide phone outline in mainbar on mobile — it's in the overlay */
  .lo-nav .mainbar .right .btn-outline-dark { display: none !important; }
  .lo-nav .mainbar .right { gap: 8px !important; }
  .lo-nav .mainbar .right .btn { padding: 9px 14px !important; font-size: 12px !important; }

  /* Mobile menu overlay */
  .mobile-menu {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
  }
  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
  }
  .mobile-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 88px 24px 32px !important;
    background: var(--bg, #F5F1E8) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.5, 0, 0.2, 1) !important;
    border-bottom: 4px solid var(--accent, #F2E40C) !important;
    display: block !important;
    gap: 0 !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .mobile-menu li { display: block !important; width: 100% !important; }
  .mobile-menu.is-open ul { transform: translateY(0) !important; }
  .mobile-menu li { border-bottom: 1px solid rgba(26, 26, 26, 0.08); }
  .mobile-menu li:last-child { border-bottom: 0; }
  .mobile-menu li a,
  .mobile-menu li button {
    display: block;
    padding: 18px 4px;
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lo-ink, #1A1A1A);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
  }
  .mobile-menu li a.is-active { color: var(--lo-ink, #1A1A1A); border-left: 3px solid var(--accent, #F2E40C); padding-left: 14px; }
  .mobile-menu li.mm-cta { border-bottom: 0; padding-top: 12px; }
  .mobile-menu li.mm-cta a,
  .mobile-menu li.mm-cta button {
    background: var(--accent, #F2E40C);
    color: var(--lo-ink, #1A1A1A);
    padding: 14px 16px;
    border-radius: 3px;
    text-align: center;
    margin-top: 8px;
  }
  .mobile-menu li.mm-cta:first-of-type a {
    background: transparent;
    border: 1.5px solid var(--lo-ink, #1A1A1A);
  }
}

/* =====================================================
   OVERFLOW FIXES (about visual, hero, gallery)
   ===================================================== */
@media (max-width: 960px) {
  /* Stop the about-visual small inset from overflowing right edge */
  .about-visual { overflow: visible; }
  .about-visual .small {
    right: 12px !important;
    bottom: -18px !important;
    width: 45% !important;
  }
  /* Make sure containers don't overflow horizontally */
  body, html { overflow-x: clip !important; }
  .container { max-width: 100vw !important; }
}

@media (max-width: 600px) {
  /* Hide the small inset entirely on phones — it crowds the big image */
  .about-visual .small { display: none !important; }
}