/* SP — HOME BANDS (combined from WPCode) */
/* =========================================================
   SP — HOME: Our Clients (WP Gallery)
   Fixes:
   - Title truly centered
   - Logos not tiny (uniform row height)
   - Desktop: 6 columns (single row if space)
   - Mobile: naturally wraps, min 4 columns
   Requires:
   - Outer Group block class: sp-clients-band
   ========================================================= */

   .home .sp-clients-band{
    background: #262626 !important;
    padding: 80px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Force the inner container to be centered and not offset */
  .home .sp-clients-band > .wp-block-group__inner-container{
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
  
    /* this prevents weird “shifted” behavior from inherited text-align/positioning */
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  
  /* ---- TITLE: hard center ---- */
  .home .sp-clients-band .wp-block-heading,
  .home .sp-clients-band h2{
    display: block !important;
    width: 100% !important;
    margin: 0 0 34px 0 !important;
  
    text-align: center !important;
  
    /* kill any stray positioning from theme */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  
    color: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  
  /* Some themes wrap headings; ensure wrapper doesn’t offset */
  .home .sp-clients-band .wp-block-heading *{
    position: static !important;
    transform: none !important;
  }
  
  /* ---- GALLERY GRID (override WP gallery layout) ---- */
  .home .sp-clients-band .wp-block-gallery,
  .home .sp-clients-band ul.wp-block-gallery,
  .home .sp-clients-band .blocks-gallery-grid{
    display: grid !important;
  
    /* 6 columns on large screens */
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  
    gap: 40px !important;
  
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  
    list-style: none !important;
  
    align-items: center !important;
    justify-items: center !important;
  }
  
  /* Each gallery item becomes a “logo cell” with consistent height */
  .home .sp-clients-band .blocks-gallery-item,
  .home .sp-clients-band .wp-block-gallery li{
    width: auto !important;
    margin: 0 !important;
  
    /* consistent visual size */
    height: 92px !important;
    display: grid !important;
    place-items: center !important;
  }
  
  /* Remove default figure spacing */
  .home .sp-clients-band figure{
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
  }
  
  /* Logos: scale up properly inside the cell (no grayscale, no hover) */
  .home .sp-clients-band img{
    display: block !important;
  
    max-width: 140px !important;
    max-height: 92px !important;
  
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* Tablet: 4 columns */
  @media (max-width: 900px){
    .home .sp-clients-band{
      padding: 60px 0 !important;
    }
  
    .home .sp-clients-band .wp-block-gallery,
    .home .sp-clients-band ul.wp-block-gallery,
    .home .sp-clients-band .blocks-gallery-grid{
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 22px !important;
      max-width: 720px !important;
    }
  
    .home .sp-clients-band .blocks-gallery-item,
    .home .sp-clients-band .wp-block-gallery li{
      height: 78px !important;
    }
  
    .home .sp-clients-band img{
      max-width: 110px !important;
      max-height: 78px !important;
    }
  }
  
  /* Small phones: still 4 columns, just slightly smaller logos */
  @media (max-width: 420px){
    .home .sp-clients-band .wp-block-gallery,
    .home .sp-clients-band ul.wp-block-gallery,
    .home .sp-clients-band .blocks-gallery-grid{
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 16px !important;
    }
  
    .home .sp-clients-band .blocks-gallery-item,
    .home .sp-clients-band .wp-block-gallery li{
      height: 70px !important;
    }
  
    .home .sp-clients-band img{
      max-width: 92px !important;
      max-height: 70px !important;
    }
  }
  /* --- HARD CENTER the "Our Clients" heading on large screens --- */
  .home .sp-clients-band .wp-block-heading{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: none !important;
    width: fit-content !important; /* prevents "full-width but offset" behavior */
  }
  
  /* If the heading is wrapped by a theme/container, force that wrapper to center */
  .home .sp-clients-band .wp-block-heading:where(:not(:root)){
    justify-self: center !important;
  }
  
  /* Most common: heading is inside a Group/Columns container with funky layout */
  .home .sp-clients-band .wp-block-heading{
    display: table !important;  /* table centers reliably even when parents are weird */
  }
  
  /* If Astra/Theme adds padding/translate to inner blocks, neutralize it */
  .home .sp-clients-band .wp-block-group__inner-container > *{
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }
  /* =========================================================
   SP — HOME: Instagram / What's New (CENTERED + SAFE)
   Requires:
   - Outer Group block has class: sp-ig-band
   ========================================================= */

.home .sp-ig-band{
    position: relative !important;
    isolation: isolate !important;
    padding: 80px 0 !important;
    margin: 0 !important;
    background: #1A1A1A !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Inner container centered like other sections */
  .home .sp-ig-band > .wp-block-group__inner-container{
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Fix white strip on right - ensure no overflow */
  .home .sp-ig-band > .wp-block-group__inner-container > *{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Title */
  .home .sp-ig-band .wp-block-heading,
  .home .sp-ig-band h2,
  .home .sp-ig-band .wp-block-heading p,
  .home .sp-ig-band h2 p{
    width: 100% !important;
    margin: 0 auto 34px auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    color: #fff !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: block !important;
  }
  
  /* Ensure heading wrapper is centered */
  .home .sp-ig-band .wp-block-heading,
  .home .sp-ig-band h2{
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Hide captions / plugin header/footer UI (keep feed visible) */
  .home .sp-ig-band .sb_instagram_header,
  .home .sp-ig-band .sbi_header,
  .home .sp-ig-band .sbi_footer,
  .home .sp-ig-band .sbi_follow_btn,
  .home .sp-ig-band figcaption,
  .home .sp-ig-band .wp-element-caption,
  .home .sp-ig-band .sbi_caption,
  .home .sp-ig-band .sbi_text,
  .home .sp-ig-band .sbi_info,
  .home .sp-ig-band .sbi_meta{
    display: none !important;
  }
  
  /* Show and style the load more button */
  .home .sp-ig-band .sbi_load_btn,
  .home .sp-ig-band #sbi_load .sbi_load_btn{
    display: inline-block !important;
    margin: 28px auto 0 auto !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #1A1A1A !important;
    border: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
  }
  
  /* Center the button container */
  .home .sp-ig-band #sbi_load,
  .home .sp-ig-band .sbi_footer{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 28px !important;
  }
  
  /* Make the plugin wrapper centered + not “layout constrained” weirdness */
  .home .sp-ig-band #sb_instagram{
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* THIS is the key: center the grid wrapper and give it a real width */
  .home .sp-ig-band #sb_instagram #sbi_images{
    width: 100% !important;
    max-width: 1440px !important; /* Wide enough to space out 3 posts */
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  
    /* enforce nice spacing even if plugin changes classes */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 340px)) !important; /* 3 posts, keep current size */
    column-gap: 60px !important; /* Increased spacing between posts */
    row-gap: 24px !important;
    justify-content: center !important; /* center the whole 3-col grid */
  }
  
  /* Rounded corners + no weird crop artifacts */
  .home .sp-ig-band #sb_instagram .sbi_item,
  .home .sp-ig-band #sb_instagram .sbi_photo_wrap,
  .home .sp-ig-band #sb_instagram .sbi_photo_wrap a,
  .home .sp-ig-band #sb_instagram .sbi_photo{
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  
  /* Handle both plugin modes: img OR background-image tiles */
  .home .sp-ig-band #sb_instagram img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* If the plugin uses .sbi_photo as the image surface */
  .home .sp-ig-band #sb_instagram .sbi_photo{
    background-size: cover !important;
    background-position: center !important;
  }
  
  /* Button centered + styled (your pill button look) */
  .home .sp-ig-band .wp-block-buttons{
    justify-content: center !important;
    margin-top: 28px !important;
  }
  
  .home .sp-ig-band .wp-block-button__link{
    border-radius: 999px !important;
    padding: 10px 18px !important;
    background: #fff !important;
    color: #1A1A1A !important;
    border: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  
  /* Responsive */
  @media (max-width: 1200px){
    .home .sp-ig-band #sb_instagram #sbi_images{
      grid-template-columns: repeat(3, minmax(0, 340px)) !important; /* Keep 3 posts */
      column-gap: 40px !important; /* Slightly less spacing on smaller screens */
    }
  }
  
  @media (max-width: 980px){
    .home .sp-ig-band{ padding: 60px 0 !important; }
  
    .home .sp-ig-band #sb_instagram #sbi_images{
      max-width: 100% !important;
      grid-template-columns: repeat(3, minmax(0, 300px)) !important; /* 3 posts on tablet, slightly smaller */
      column-gap: 24px !important;
      row-gap: 18px !important;
    }
  }
  
  @media (max-width: 640px){
    .home .sp-ig-band #sb_instagram #sbi_images{
      max-width: 100% !important;
      grid-template-columns: repeat(2, 1fr) !important; /* 2 posts on mobile */
      column-gap: 16px !important;
    }
  }
  /* =========================================================
   SP — HOME: “Easy Load-In Grip Vans” band (Figma)
   Fixes:
   - No left shift (kills wp-block-columns negative margins / wide alignment issues)
   - Content centers + scales with screen size
   - Full-bleed background
   Requires:
   - Outer Group OR Columns has class: sp-van-band (either is OK)
   ========================================================= */

html, body{ overflow-x: hidden !important; }

/* Allow the class to be on either the Group or the Columns */
.home .sp-van-band{
  position: relative !important;
  isolation: isolate !important;
  padding: 80px 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Full-bleed background */
.home .sp-van-band::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;

  background: #262626 !important;
  z-index: -1 !important;
}

/* Put all children above bg */
.home .sp-van-band > *{
  position: relative !important;
  z-index: 1 !important;
}

/* --------- THE KEY FIX: center the COLUMNS wrapper ---------
   This neutralizes wide/full alignment negative margins.
*/
.home .sp-van-band .wp-block-columns,
.home .wp-block-columns.sp-van-band{
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* IMPORTANT: kill theme negative margins */
  margin-inline: auto !important;
  padding-inline: clamp(28px, 8vw, 160px) !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(22px, 6vw, 80px) !important;
}

/* If you put the class on the OUTER group, remove default columns margins */
.home .sp-van-band .wp-block-columns{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reset any column padding that could “fake” a shift */
.home .sp-van-band .wp-block-column{
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Left text column */
.home .sp-van-band .wp-block-column:first-child{
  flex: 1 1 540px !important;
}

/* Right image column */
.home .sp-van-band .wp-block-column:last-child{
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Title */
.home .sp-van-band h2,
.home .sp-van-band .wp-block-heading{
  margin: 0 0 10px 0 !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 45px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

/* Subtitle */
.home .sp-van-band p{
  margin: 0 0 18px 0 !important;
  color: rgba(255,255,255,0.80) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Button */
.home .sp-van-band .wp-block-buttons{ margin: 0 !important; }

.home .sp-van-band .wp-block-button__link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #1A1A1A !important;
  border: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

@media (hover:hover){
  .home .sp-van-band .wp-block-button__link{
    transition: transform .16s ease, filter .16s ease !important;
    will-change: transform;
  }
  .home .sp-van-band .wp-block-button__link:hover{
    transform: translateY(-2px) !important;
    filter: brightness(1.02) !important;
  }
}

/* Image */
.home .sp-van-band figure{ margin: 0 !important; }
.home .sp-van-band img{
  width: 578px !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  display: block !important;
}

/* Responsive */
@media (max-width: 900px){
  .home .sp-van-band{ padding: 60px 0 !important; }

  .home .sp-van-band .wp-block-columns,
  .home .wp-block-columns.sp-van-band{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .home .sp-van-band .wp-block-column:last-child{
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .home .sp-van-band img{
    width: 100% !important;
    max-width: 560px !important;
  }
}
/* =========================================================
   SP — HOME: "Rent Gear in 3 Simple Steps" (Figma)
   Requirements:
   - Outer Group block has class: sp-steps
   - Each card is: Columns > Column > Group (your current structure)
   ========================================================= */

   .home .sp-steps{
    background: #1A1A1A !important;
    padding: 72px 0 !important;
  }
  
  /* Inner container centered */
  .home .sp-steps > .wp-block-group__inner-container{
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 28px !important;
  }
  
  /* Section title (CENTERED + readable) */
  .home .sp-steps > .wp-block-group__inner-container > .wp-block-heading,
  .home .sp-steps > .wp-block-group__inner-container > h2{
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 0 0 34px 0 !important;
  }
  
  /* Columns row */
  .home .sp-steps .wp-block-columns{
    justify-content: center !important;
    gap: 40px !important;
    margin: 0 auto 34px auto !important;
  }
  
  /* Prevent weird stretch */
  .home .sp-steps .wp-block-column{
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  /* ---------------------------------------------------------
     CARD LAYOUT (GRID) — keeps description first line aligned
     --------------------------------------------------------- */
  
  .home .sp-steps .wp-block-column > .wp-block-group{
    width: 350px !important;
    min-height: 399px !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 26px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
  
    /* Use GRID instead of flex so rows are consistent across cards */
    display: grid !important;
  
    /*
      Row 1: STEP label
      Row 2: Title (fixed-ish to prevent shifting)
      Row 3: Icon area (THIS controls how low the description sits)
      Row 4: Description
    */
    grid-template-rows:
      auto               /* STEP label */
      64px               /* Title row height: keeps icon/desc aligned even if title wraps */
      170px              /* Icon area height: increase to push description LOWER */
      auto;              /* Description */
    align-content: start !important;
  
    /* IMPORTANT: do NOT center content */
    text-align: left !important;
    align-items: stretch !important;
  }
  
  /* STEP label (left) */
  .home .sp-steps .wp-block-column > .wp-block-group p:first-of-type{
    margin: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,0.55) !important;
    align-self: start !important;
  }
  
  /* Card title ("Book", etc.) — LEFT */
  .home .sp-steps .wp-block-column > .wp-block-group .wp-block-heading{
    margin: 8px 0 0 0 !important;
    color: #1A1A1A !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    align-self: start !important;
  }
  
  /* Icon block — centered within its fixed row */
  .home .sp-steps .wp-block-column > .wp-block-group figure{
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important; /* center inside the 170px icon row */
  }
  
  .home .sp-steps .wp-block-column > .wp-block-group img{
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  /* Description text — always starts at same Y across cards */
  .home .sp-steps .wp-block-column > .wp-block-group p:last-of-type{
    margin: 0 !important;
    color: rgba(0,0,0,0.70) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 260px !important;
    align-self: start !important;
  }
  
  /* CTA button area centered */
  .home .sp-steps .wp-block-buttons{
    justify-content: center !important;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }
  
  .home .sp-steps .wp-block-buttons .wp-block-button__link{
    border-radius: 999px !important;
    padding: 10px 16px !important;
    background: #fff !important;
    color: #1A1A1A !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }
  
  /* Hover lift for the CTA button (Steps section) */
  @media (hover:hover){
    .home .sp-steps .wp-block-buttons .wp-block-button__link{
      transition: transform .16s ease, filter .16s ease !important;
      will-change: transform;
    }
  
    .home .sp-steps .wp-block-buttons .wp-block-button__link:hover{
      transform: translateY(-2px) !important;
      filter: brightness(1.03) !important;
    }
  }
  
  /* "Read more..." link */
  .home .sp-steps .sp-steps__readmore,
  .home .sp-steps .sp-steps__readmore a,
  .home .sp-steps a{
    color: rgba(255,255,255,0.85) !important;
    text-underline-offset: 4px !important;
  }
  
  .home .sp-steps a:hover{
    color: #fff !important;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .home .sp-steps{
      padding: 54px 0 !important;
    }
    .home .sp-steps .wp-block-columns{
      gap: 18px !important;
    }
    .home .sp-steps .wp-block-column > .wp-block-group{
      width: 100% !important;
      max-width: 420px !important;
      min-height: 0 !important;
  
      /* allow natural height on mobile while keeping spacing */
      grid-template-rows:
        auto
        auto
        140px
        auto;
    }
  }
  /* Exact section title only */
  .home .sp-steps-title{
    color: #ffffff !important;
  }
  /* =========================================================
   SP — Home Tiles Row (Figma)
   Section: 4 tiles (Camera/Lighting/Grip/Package)
   - Dark band background (#262626)
   - 1440 max width, centered, with side padding
   - Tile size ~250x263, radius 10px
   - Overlay rgba(0,0,0,0.30)
   - Label: SF Pro, 36px, bold, white, centered
   - Responsive stack on mobile
   ========================================================= */

:root{
    --sp-tiles-band: #262626;
    --sp-tiles-pad-y: 29px;     /* Figma shows ~29 bottom; we’ll match vibe */
    --sp-tiles-pad-x: 28px;
    --sp-tile-w: 250px;
    --sp-tile-h: 263px;
    --sp-tile-radius: 10px;
    --sp-tile-overlay: rgba(0,0,0,0.30);
  }
  
  /* Outer band */
  .home .sp-home-tiles{
    background: var(--sp-tiles-band) !important;
    padding: var(--sp-tiles-pad-y) 0 !important;
    margin: 0 !important;
  }
  
  /* Inner container (centers content like header/hero) */
  .home .sp-home-tiles__inner{
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding-left: var(--sp-tiles-pad-x) !important;
    padding-right: var(--sp-tiles-pad-x) !important;
  }
  
  /* Grid layout: force the 4 tiles to sit like a row */
  .home .sp-home-tiles__grid{
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 41px !important; /* matches the “gap: 41px” vibe you showed */
    margin: 0 !important;
  }
  
  /* Stop Gutenberg Columns from doing weird widths */
  .home .sp-home-tiles__grid.wp-block-columns{
    flex-wrap: nowrap !important;
  }
  
  /* Each column should not stretch */
  .home .sp-home-tiles__grid > .wp-block-column{
    flex: 0 0 auto !important;
    width: auto !important;
  }
  
  /* Tile sizing + rounding */
  .home .sp-home-tiles .sp-tile.wp-block-cover{
    width: var(--sp-tile-w) !important;
    min-width: var(--sp-tile-w) !important;
    height: var(--sp-tile-h) !important;
    min-height: var(--sp-tile-h) !important;
  
    border-radius: var(--sp-tile-radius) !important;
    overflow: hidden !important;
  
    margin: 0 !important;
  }
  
  /* Ensure the background image behaves */
  .home .sp-home-tiles .sp-tile.wp-block-cover{
    background-size: cover !important;
    background-position: center center !important;
  }
  
  /* Force overlay */
  .home .sp-home-tiles .sp-tile .wp-block-cover__background{
    background: var(--sp-tile-overlay) !important;
    opacity: 1 !important;
  }
  
  /* Center the label */
  .home .sp-home-tiles .sp-tile .wp-block-cover__inner-container{
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    text-align: center !important;
  }
  
  /* Label typography */
  .home .sp-home-tiles .sp-tile h2,
  .home .sp-home-tiles .sp-tile h3,
  .home .sp-home-tiles .sp-tile .wp-block-heading{
    margin: 0 !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  }
  
  /* Subtle hover (premium, but not cheesy) */
  @media (hover:hover){
    .home .sp-home-tiles .sp-tile.wp-block-cover{
      transition: transform .16s ease, filter .16s ease !important;
    }
    .home .sp-home-tiles .sp-tile.wp-block-cover:hover{
      transform: translateY(-2px) !important;
      filter: brightness(1.03) !important;
    }
  }
  
  /* Responsive: stack tiles nicely */
  @media (max-width: 1024px){
    .home .sp-home-tiles__grid.wp-block-columns{
      flex-wrap: wrap !important;
      justify-content: center !important;
    }
  }
  
  @media (max-width: 600px){
    :root{
      --sp-tile-w: 100%;
      --sp-tile-h: 180px;
    }
    .home .sp-home-tiles .sp-tile.wp-block-cover{
      max-width: 360px !important; /* keeps it from being insanely wide on phones */
    }
    .home .sp-home-tiles .sp-tile h2,
    .home .sp-home-tiles .sp-tile .wp-block-heading{
      font-size: 28px !important;
    }
  }
  
  /* =========================================================
     SP — Home Tiles: keep tiles perfectly square on narrow screens
     ========================================================= */
  
  /* Make the columns wrapper align rows cleanly */
  .home .sp-home-tiles .wp-block-columns{
    align-items: stretch !important;
  }
  
  /* Each column should behave like a flexible card holder */
  .home .sp-home-tiles .wp-block-column{
    display: flex !important;
  }
  
  /* Force each tile (Cover) to be a true square */
  .home .sp-home-tiles .wp-block-cover{
    aspect-ratio: 1 / 1 !important;   /* key */
    height: auto !important;          /* let aspect-ratio control height */
    min-height: 0 !important;
    width: 100% !important;           /* fill column width */
  }
  
  /* Make sure the background image obeys the square */
  .home .sp-home-tiles .wp-block-cover__image-background,
  .home .sp-home-tiles .wp-block-cover img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* When it wraps to 2 columns, lock consistent tile widths */
  @media (max-width: 920px){
    .home .sp-home-tiles .wp-block-column{
      flex: 0 0 auto !important;
    }
  
    .home .sp-home-tiles .wp-block-cover{
      width: min(320px, 44vw) !important; /* tweak 44vw if you want bigger/smaller */
    }
  }
  
  /* When it goes to 1 column, keep it square and not giant */
  @media (max-width: 520px){
    .home .sp-home-tiles .wp-block-cover{
      width: min(360px, 88vw) !important;
    }
  }
  /* ================================
     Full-clickable tile (Cover)
     ================================ */
  
  /* Make cover a positioning context */
  .wp-block-cover.sp-tile{
    position: relative;
  }
  
  /* Stretch the button to cover the entire tile */
  .wp-block-cover.sp-tile .wp-block-button{
    position: static;
  }
  
  .wp-block-cover.sp-tile .wp-block-button__link{
    position: absolute;
    inset: 0;
    z-index: 5;
  
    /* hide visuals */
    background: transparent !important;
    color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Cursor feedback */
  .wp-block-cover.sp-tile{
    cursor: pointer;
  }
  
  /* Optional hover polish */
  .wp-block-cover.sp-tile:hover{
    transform: translateY(-2px);
    transition: transform .15s ease;
  }
  
  /* =========================================================
     SP — Clickable Tiles (Cover) — full-tile link overlay
     Fixes:
     - Button no longer pushes text
     - Entire tile is clickable
     - Keeps label perfectly centered
     ========================================================= */
  
  /* Make each tile a stable positioning context */
  .sp-tile.wp-block-cover{
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Keep the visible content centered and above the overlay */
  .sp-tile .wp-block-cover__inner-container{
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* IMPORTANT: let clicks pass through the text to the overlay link */
  .sp-tile .wp-block-cover__inner-container *{
    pointer-events: none !important;
  }
  
  /* Turn the Buttons block into a full-tile overlay (no layout space) */
  .sp-tile .wp-block-buttons{
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
  
    display: block !important;
  }
  
  /* Make the button fill the entire tile */
  .sp-tile .wp-block-buttons .wp-block-button{
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  
  /* The actual clickable link fills the tile but is invisible */
  .sp-tile .wp-block-button__link{
    width: 100% !important;
    height: 100% !important;
  
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
  
    background: transparent !important;
    box-shadow: none !important;
  
    /* hide button visuals without breaking the link */
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
  }
  
  /* Optional: nice hover feel */
  .sp-tile:hover{
    transform: translateY(-1px);
    transition: transform .12s ease;
  }
  
  /* ---------- FIX: allow clicks on the overlay link ---------- */
  
  /* Only disable clicks on the TEXT layers (not everything) */
  .sp-tile .wp-block-cover__inner-container h1,
  .sp-tile .wp-block-cover__inner-container h2,
  .sp-tile .wp-block-cover__inner-container h3,
  .sp-tile .wp-block-cover__inner-container h4,
  .sp-tile .wp-block-cover__inner-container p{
    pointer-events: none !important;
  }
  
  /* Re-enable clicks for the Buttons overlay + link */
  .sp-tile .wp-block-buttons,
  .sp-tile .wp-block-buttons *,
  .sp-tile .wp-block-button__link{
    pointer-events: auto !important;
    cursor: pointer !important;
  }
/* =========================================================
   SP — Home Hero (Figma) v3 (Astra-safe)
   Fixes:
   - NO weird left white slab (removes vw breakout math)
   - True full-bleed hero by making Astra container full width on Home
   - Hero fills viewport (minus header + admin bar)
   - Removes overflow (no extra scroll)
   - Keeps overlay + typography + buttons exactly like you had
   ========================================================= */

/* Adjust if needed */
:root{
    --sp-header-h-desktop: 60px; /* your compact header is closer to this now */
    --sp-header-h-mobile: 56px;
    --sp-adminbar-h: 0px;
  }
  
  /* Admin bar height when logged in */
  body.admin-bar{ --sp-adminbar-h: 32px; }
  @media (max-width: 782px){
    body.admin-bar{ --sp-adminbar-h: 46px; }
  }
  
  /* ---------------------------------------------------------
     0) Prevent horizontal scroll (common with themes/plugins)
     --------------------------------------------------------- */
  html, body{
    overflow-x: hidden !important;
  }
  
  /* ---------------------------------------------------------
     1) Remove any top spacing between header and content (Home)
     --------------------------------------------------------- */
  .home #primary,
  .home #content,
  .home .site-content,
  .home .site-main,
  .home .entry-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* ---------------------------------------------------------
     2) Make Astra container FULL WIDTH on Home (this is the key)
     IMPORTANT: Only target content containers, NOT header containers
     --------------------------------------------------------- */
  .home .site-content .ast-container,
  .home #primary .ast-container{
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Also remove any default Gutenberg first-block margin */
  .home .entry-content > *:first-child{
    margin-top: 0 !important;
  }
  
  /* ---------------------------------------------------------
     3) Hero wrapper: full width, full height (minus header/admin bar)
     IMPORTANT: no 100vw breakout tricks
     --------------------------------------------------------- */
  .home .sp-home-hero{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  
    display: flex !important;
    align-items: center !important;
  
    min-height: calc(100svh - var(--sp-header-h-desktop) - var(--sp-adminbar-h)) !important;
    height: calc(100svh - var(--sp-header-h-desktop) - var(--sp-adminbar-h)) !important;
  
    overflow: hidden !important;
  }
  
  /* Mobile height */
  @media (max-width: 920px){
    .home .sp-home-hero{
      min-height: calc(100svh - var(--sp-header-h-mobile) - var(--sp-adminbar-h)) !important;
      height: calc(100svh - var(--sp-header-h-mobile) - var(--sp-adminbar-h)) !important;
    }
  }
  
  /* Ensure Cover media fills the hero */
  .home .sp-home-hero.wp-block-cover{
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 0 !important;
  }
  
  /* ---------------------------------------------------------
     4) EXACT overlay color from Figma: rgba(0,0,0,0.55)
     --------------------------------------------------------- */
  .home .sp-home-hero .wp-block-cover__background{
    background: rgba(0,0,0,0.55) !important;
    opacity: 1 !important;
  }
  
  /* Some WP versions render overlay via ::before */
  .home .sp-home-hero::before{
    background: rgba(0,0,0,0.55) !important;
    opacity: 1 !important;
  }
  
  /* ---------------------------------------------------------
     5) Content width like Figma (1440 with 28px padding)
     --------------------------------------------------------- */
  .home .sp-home-hero .wp-block-cover__inner-container{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .home .sp-home-hero__content{
    max-width: 1440px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    margin: 0 auto !important;
  }
  
  /* ---------------------------------------------------------
     6) Typography EXACT
     --------------------------------------------------------- */
  .home .sp-home-hero h1,
  .home .sp-home-hero .wp-block-heading{
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 64px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    margin: 0 0 14px 0 !important;
  }
  
  .home .sp-home-hero p{
    color: rgba(255,255,255,0.85) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    margin: 0 0 18px 0 !important;
    max-width: 520px !important;
  }
  
  @media (max-width: 920px){
    .home .sp-home-hero h1,
    .home .sp-home-hero .wp-block-heading{
      font-size: 44px !important;
    }
    .home .sp-home-hero p{
      font-size: 18px !important;
    }
  }
  
  /* ---------------------------------------------------------
     7) Buttons — match Figma
     --------------------------------------------------------- */
  .home .sp-home-hero .wp-block-buttons{
    gap: 12px !important;
    margin-top: 6px !important;
  }
  
  .home .sp-home-hero .wp-block-button__link,
  .home .sp-home-hero a.wp-block-button__link,
  .home .sp-home-hero .wp-block-buttons .wp-block-button a,
  .home .sp-home-hero .wp-block-buttons .wp-block-button__link{
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 590 !important;
    line-height: 1 !important;
  
    border-radius: 999px !important;
    padding: 10px 16px !important;
  
    background: #ffffff !important;
    color: #1A1A1A !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
  }
  
  .home .sp-home-hero .wp-block-button__link:hover{
    transform: translateY(-1px);
    transition: transform .12s ease, background .12s ease;
    background: rgba(255,255,255,0.92) !important;
  }
  
  /* Optional secondary outline button */
  .home .sp-home-hero .wp-block-button.is-style-outline .wp-block-button__link{
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
  }
  .home .sp-home-hero .wp-block-button.is-style-outline .wp-block-button__link:hover{
    background: rgba(255,255,255,0.08) !important;
  }
  
  /* ---------------------------------------------------------
     8) Remove any extra bottom spacing so no "overflow scroll"
     --------------------------------------------------------- */
  .home .sp-home-hero,
  .home .entry-content > .sp-home-hero{
    margin-bottom: 0 !important;
  }
  .home .entry-content{
    padding-bottom: 0 !important;
  }
  
  /* ---------------------------------------------------------
     9) Remove white spacing between client band and footer (HOME PAGE ONLY)
     Only affects home page - very specific selectors
     --------------------------------------------------------- */
  /* Remove bottom margin from last band, but keep internal padding */
  .home .entry-content > .sp-clients-band:last-child{
    margin-bottom: 0 !important;
  }
  
  /* Remove spacing from home page content containers only */
  .home #content.site-content,
  .home .site-content,
  .home .site-main,
  .home #primary{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove top spacing from footer only on home page */
  .home .site-footer{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }