/* =========================================================
   MOBILE FIXES — SCOPED + SAFE
   Only:
   1) Home Case Studies edge padding
   2) Home Free Audit form layout on mobile
   Does NOT touch html/body overflow or any swiper internals
   ========================================================= */

   @media (max-width: 720px){

    /* -----------------------------------------
       BASELINE SAFE (non-invasive)
       ----------------------------------------- */
    img, video, iframe, svg {
      max-width: 100%;
      height: auto;
    }
  
    button, .btn, a.btn {
      min-height: 44px;
    }
  
    p, li {
      font-size: 16px;
      line-height: 1.55;
    }
  
  
    /* -----------------------------------------
       1) HOME — Selected Case Studies (EDGE SPACE)
       Your structure:
       <section id="case-studies" class="cs-section">...</section>
       <div class="cs-slider">...</div>
       ----------------------------------------- */
  
    /* Give the heading block a bit of breathing room */
    #case-studies.cs-section {
      padding-top: 20px;
      padding-bottom: 12px;
    }
  
    /* Add left/right padding ONLY to the slider that follows the section */
    #case-studies.cs-section + .cs-slider {
      padding-left: 16px;
      padding-right: 16px;
      padding-bottom: 18px;
      box-sizing: border-box;
    }
  
    /* IMPORTANT: do NOT change swiper sizing; just ensure it respects container */
    #case-studies.cs-section + .cs-slider .swiper {
      width: 100%;
      box-sizing: border-box;
    }
  
  
    /* -----------------------------------------
       2) HOME — Free Audit Form (MOBILE LAYOUT FIX)
       Your structure:
       <section id="free-audit" class="audit-section">...</section>
       Uses: .audit-card, .audit-grid, .audit-form, .audit-options
       ----------------------------------------- */
  
    /* Ensure the whole section uses normal mobile side padding */
    #free-audit.audit-section {
      padding-left: 16px;
      padding-right: 16px;
      box-sizing: border-box;
    }
  
    /* The card should be full width and not squashed */
    #free-audit .audit-card {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      padding: 18px 16px;
      box-sizing: border-box;
    }
  
    /* Collapse the two-column layout to one column */
    #free-audit .audit-grid {
      display: grid;
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
  
    /* Checkbox list: one clean column with better spacing */
    #free-audit .audit-options {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }
  
    /* Inputs: easier to tap/read on mobile */
    #free-audit input,
    #free-audit select,
    #free-audit textarea {
      width: 100%;
      font-size: 16px;
      padding: 12px 14px;
      box-sizing: border-box;
    }
  
    /* Button: full width on mobile */
    #free-audit .btn-audit,
    #free-audit button[type="submit"] {
      width: 100%;
      justify-content: center;
    }
  }
  @media (max-width: 720px){

    /* FREE AUDIT — make it readable on mobile */
    #free-audit .audit-card{
      padding: 20px 16px !important;
      border-radius: 18px !important;
    }
  
    /* Force the inner layout to STACK */
    #free-audit .audit-grid{
      display: flex !important;
      flex-direction: column !important;
      gap: 18px !important;
    }
  
    /* Left "What you'll get" block should not be a skinny column */
    #free-audit .audit-info{
      width: 100% !important;
      max-width: 100% !important;
    }
  
    #free-audit .audit-info h3,
    #free-audit .audit-info h4{
      font-size: 18px !important;
      line-height: 1.2 !important;
      margin-bottom: 10px !important;
    }
  
    #free-audit .audit-info p,
    #free-audit .audit-info li{
      font-size: 16px !important;
      line-height: 1.6 !important;
    }
  
    #free-audit .audit-info ul{
      padding-left: 18px !important;
      margin-top: 10px !important;
    }
  
    #free-audit .audit-info li{
      margin-bottom: 10px !important;
    }
  
    /* Form column full width */
    #free-audit .audit-form{
      width: 100% !important;
      max-width: 100% !important;
    }
  
    /* Labels easier to scan */
    #free-audit label,
    #free-audit .field-label{
      font-size: 13px !important;
      letter-spacing: 0.04em !important;
      line-height: 1.3 !important;
    }
  
    /* Inputs: full width, readable */
    #free-audit input,
    #free-audit select,
    #free-audit textarea{
      width: 100% !important;
      font-size: 16px !important;
      padding: 12px 14px !important;
      border-radius: 999px !important;
      box-sizing: border-box !important;
    }
  
    /* Checkboxes: stack, increase tap space */
    #free-audit .audit-options{
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin-top: 10px !important;
    }
  
    #free-audit .audit-options label{
      display: flex !important;
      align-items: flex-start !important;
      gap: 10px !important;
      padding: 8px 0 !important;
    }
  
    #free-audit .audit-options input[type="checkbox"]{
      width: 18px !important;
      height: 18px !important;
      margin-top: 2px !important;
      flex: 0 0 auto !important;
      border-radius: 4px !important;
    }
  
    /* Submit button: full width */
    #free-audit .btn-audit,
    #free-audit button[type="submit"]{
      width: 100% !important;
      padding: 14px 16px !important;
      border-radius: 999px !important;
    }
  }
  @media (max-width: 720px){

    /* FREE AUDIT: stack layout cleanly */
    #free-audit .audit-grid{
      display: flex !important;
      flex-direction: column !important;
      gap: 18px !important;
    }
  
    /* Make card padding consistent */
    #free-audit .audit-card{
      padding: 18px 16px !important;
      border-radius: 18px !important;
    }
  
    /* Keep pill style for inputs/selects */
    #free-audit input,
    #free-audit select{
      width: 100% !important;
      font-size: 16px !important;
      padding: 12px 14px !important;
      border-radius: 999px !important;
      box-sizing: border-box !important;
    }
  
    /* FIX: textarea should NOT be a pill/circle */
    #free-audit textarea{
      width: 100% !important;
      font-size: 16px !important;
      line-height: 1.4 !important;
      padding: 12px 14px !important;
      min-height: 110px !important;     /* gives real writing space */
      border-radius: 14px !important;   /* normal rounded rectangle */
      resize: vertical !important;
      box-sizing: border-box !important;
    }
  
    /* Give labels breathing room */
    #free-audit label{
      display: block !important;
      margin: 10px 0 6px !important;
    }
  
    /* Checkbox list: clean spacing */
    #free-audit .audit-options{
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
  
    #free-audit .audit-options label{
      display: flex !important;
      gap: 10px !important;
      align-items: flex-start !important;
      padding: 6px 0 !important;
    }
  
    /* Submit full width */
    #free-audit button[type="submit"],
    #free-audit .btn-audit{
      width: 100% !important;
      padding: 14px 16px !important;
      border-radius: 999px !important;
    }
  }
  /* EVENTS/ECOMM — Case studies slider only (mobile)
   Fix: text overlapping image + add spacing
*/
@media (max-width: 900px) {

  /* Scope ONLY this page's swiper */
  #case-studies.cs-section .ecomm-case-swiper .swiper-slide{
    flex-direction: column;
  }

  /* Keep your existing 50/50 layout but add space + stop parallax lift */
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-media,
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-copy{
    width: 100%;
    height: 50%;
    transform: none !important; /* kills the parallax translate that causes overlap */
  }

  /* The actual breathing room you wanted */
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-copy-inner{
    padding-top: 18px;
  }
}
/* EVENTS/ECOMM — Case Studies slider spacing fix (mobile only)
   Goal: add breathing room between image + copy WITHOUT breaking Swiper/scroll
*/
@media (max-width: 900px){

  /* Scope to THIS page's swiper only */
  #case-studies.cs-section .ecomm-case-swiper .swiper-slide{
    flex-direction: column;
  }

  /* Give the image a bit less height so the copy has room */
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-media{
    height: 46% !important;
  }

  #case-studies.cs-section .ecomm-case-swiper .cs-slide-copy{
    height: 54% !important;
    padding-top: 12px;              /* the “gap” you want */
    box-sizing: border-box;
  }

  /* Extra inner breathing room (optional but usually helps) */
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-copy-inner{
    padding-top: 14px !important;
  }

  /* Stop parallax nudging blocks into each other on mobile */
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-media,
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-copy{
    transform: none !important;
  }
}
/* EVENTS/ECOMM — Case Studies slider: prevent bottom text clipping (mobile) */
@media (max-width: 900px){

  /* Scope ONLY this page's swiper */
  #case-studies.cs-section .ecomm-case-swiper .swiper-slide{
    flex-direction: column;
  }

  /* Your spacing split (keep these if you’re using them) */
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-media{
    height: 46% !important;
  }
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-copy{
    height: 54% !important;
    padding-top: 12px;
    box-sizing: border-box;
    overflow: hidden; /* important: keep rounded corners clean */
    transform: none !important;
  }

  /* KEY FIX: let the INNER content scroll instead of being clipped */
  #case-studies.cs-section .ecomm-case-swiper .cs-slide-copy-inner{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 34px; /* ensures the last line clears the bottom */
    box-sizing: border-box;
  }
}
/* =========================================
   WHAT WE DO CARDS — mobile layout fix
   Goal: 2-wide max on mobile, 1-wide on tiny screens
   Scope: only affects grids using .sb-services-grid
   ========================================= */

   @media (max-width: 900px){
    .sb-services-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }
  
    .sb-service-card{
      height: auto;
    }
  
    /* keep headings readable */
    .sb-service-card h3{
      font-size: 16px;
      line-height: 1.2;
    }
  
    .sb-service-card p{
      font-size: 13.5px;
      line-height: 1.45;
    }
  
    /* icons don’t need to dominate the card on mobile */
    .sb-card-icon{
      width: 52px;
      height: 52px;
      object-fit: contain;
    }
  }
  
  /* very small phones: stack */
  @media (max-width: 420px){
    .sb-services-grid{
      grid-template-columns: 1fr;
    }
  }
  /* SMALL BUSINESS — “What We Do” cards: 2-wide on mobile */
@media (max-width: 900px){

  /* Try the known grid class + common alternates */
  .sb-services-grid,
  .services-grid,
  .service-grid,
  .cards-grid,
  .service-cards,
  .sb-cards,
  .what-we-do-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  /* Cards: stop them being skinny skyscrapers */
  .sb-service-card,
  .service-card,
  .card-tile{
    height: auto !important;
    min-height: 0 !important;
  }

  /* Make text readable */
  .sb-service-card h3,
  .service-card h3,
  .card-tile h3{
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .sb-service-card p,
  .service-card p,
  .card-tile p{
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
}

/* Very small phones: 1 column */
@media (max-width: 420px){
  .sb-services-grid,
  .services-grid,
  .service-grid,
  .cards-grid,
  .service-cards,
  .sb-cards,
  .what-we-do-grid{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 900px){
  header.nav{
    position: sticky;
    top: 0;
    z-index: 9999;
  }
}
@media (max-width: 900px){
  header.nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  /* push page content down so it doesn’t sit under the fixed nav */
  body{
    padding-top: 72px; /* adjust to your nav height */
  }
}
/* FORCE NAV TO STAY FIXED ON MOBILE (overrides the accidental .nav {position:relative}) */
@media (max-width: 860px){
  header.nav{
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  /* prevent page content sitting underneath the fixed nav */
  body{
    padding-top: 64px; /* match your nav height */
  }
}
/* MOBILE: keep top nav + burger always visible */
@media (max-width: 860px){
  header.nav{
    position: fixed !important;   /* always visible */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  /* stop content hiding under the fixed header */
  body{
    padding-top: 64px; /* adjust if your header is taller */
  }
}
/* ABOUT SECTION – fix left offset on mobile */
@media (max-width: 860px){

  .about-section .about-wrapper{
    padding-left: 0;
    padding-right: 0;
  }

  .about-section .about-grid{
    grid-template-columns: 1fr;
  }

  .about-section .about-card{
    padding-left: 1.25rem; /* re-center content */
    padding-right: 1.25rem;
  }

  /* vertical accent line */
  .about-section .about-card::before{
    left: 0.5rem;   /* pull line back to the edge */
  }

  /* badge alignment */
  .about-section .about-badge{
    margin-left: 0;
  }
}
/* HERO — optical centering on mobile */
@media (max-width: 860px){

  /* Make header padding symmetrical */
  header.nav{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Center the hero wrapper more precisely */
  .hero,
  .hero .wrapper{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Optical centering to counter burger button weight */
  .hero .hero-content{
    margin-left: 8px; /* subtle nudge right */
    margin-right: -8px;
    text-align: center;
  }

  /* Ensure buttons stay centered */
  .hero .hero-actions{
    justify-content: center;
  }
}
/* HERO — subtle right nudge for optical centering on mobile */
@media (max-width: 860px){
  .hero .hero-content{
    padding-left: 24px;   /* increase if needed: 28–32px */
    padding-right: 16px;
    box-sizing: border-box;
  }
}
/* Home hero: nudge content right on mobile */
@media (max-width: 860px){
  #hero.hero-home .hero-content{
    padding-left: 40px !important;  /* increase to 36/40 if needed */
    padding-right: 16px !important;
    box-sizing: border-box;
  }
}