/*
 * SMS Personnel Theme — Design Overrides v1.7.8
 * Derived from prototype build session; responsive rules converted from
 * prototype viewer classes (.frame.tablet/.frame.mobile) to real @media queries.
 * Enqueued globally after all page CSS files.
 *
 * Contains:
 *   - Global border-radius (16px on all images/heroes)
 *   - Contained layout (hero-outer, bg-wrap system, 1600px max-width)
 *   - Unified section spacing (24px / 20px / 16px / 12px scale)
 *   - Overview section layout (icon+title row 1, paragraph row 2)
 *   - Responsive: ≤1024px | ≤768px | ≤480px
 */

/* ===================================================================
   GLOBAL IMAGE BORDER RADIUS — 16px on all image placeholders & heroes
=================================================================== */

/* ── Hero banners ── */
.home-hero,
.ind-pg-hero,
.ip-hero,
.sp-hero,
.ct-hero,
.ah-hero,
.bl-single-hero,
.bl-featured-main,
.obp-hero { border-radius: 16px; overflow: hidden; }

/* ── Whole banners ── */
.whole-banner,
.ip-cta-banner { border-radius: 16px !important; }

/* ── Overview / split image panels ── */
.sp-ov-single,
.ind-pg-staff,
.ip-overview-img,
.ah-why-img,
.ah-lha-img,
.obp-problem-img,
.obp-preview-img { border-radius: 16px; overflow: hidden; }

/* ── Highlight cards ── */
.sp-hl,
.ip-hl,
.ind-pg-hl,
.ah-ind-card,
.bl-side-card .bl-img,
.bl-post-card .bl-img-wrap { border-radius: 16px; overflow: hidden; }

/* ── Blog / news images ── */
.bl-featured-main,
.bl-post-card { border-radius: 16px; overflow: hidden; }

/* ── Map placeholder ── */
.ct-map-placeholder,
.ct-map-link,
.ah-contact-map { border-radius: 16px; overflow: hidden; }

/* ── Inline image placeholder divs (aspect-ratio based) ── */
.page [style*="background:#b8b8b8"],
.page [style*="background: #b8b8b8"],
.page [style*="background:#b0b0b0"],
.page [style*="background:#c8c8c8"],
.page [style*="background:#d0d0d0"] { border-radius: 16px; overflow: hidden; }

/* ── Specific page placeholders ── */
.obp-cta,
.obp-hero { border-radius: 16px; overflow: hidden; }

/* ── OBP hero — contained & rounded like the homepage hero (issue 13) ── */
.hero-outer > .obp-hero {
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

/* ── Industry overview left column ── */
.ind-pg-split > div:first-child { border-radius: 16px; overflow: hidden; }

/* ── sp-overview left image ── */
.sp-overview > div:first-child { border-radius: 16px 0 0 16px; overflow: hidden; }
.sp-overview { border-radius: 16px; }
.ip-overview > div:first-child { border-radius: 16px 0 0 16px; overflow: hidden; }
.ip-overview { border-radius: 16px; }

/* ── Logos strip image items ── */
.logo-item img { border-radius: 4px; }

/* ── Testi cards ── */
.tcard { border-radius: 16px !important; }

/* ── Feature cards ── */
.sp-feat-card,
.obp-feature,
.obp-stat-box,
.obp-persona { border-radius: 16px !important; }

/* ── CTA strip ── */
.cta-strip { border-radius: 16px !important; }

/* ── Form cards ── */
.ip-form-wrap,
.ct-form-card,
.obp-form-card { border-radius: 16px !important; }

/* ── Blog sidebar cards ── */
.bl-sidebar-card,
.bl-cta-card,
.bl-explore-card,
.bl-topic-tile { border-radius: 16px !important; }

/* ── Login cards ── */
.lp-card { border-radius: 16px !important; }


/* ===================================================================
   CONTAINED LAYOUT v2
   Heroes, banners, and section backgrounds all capped at 1600px.

   Structure:
   .hero-outer            → full-width outer (provides side padding)
     .home-hero etc.      → max-width:1600px, border-radius:16px
       .hero-content      → inner content, padding already in place

   .bg-wrap               → full-width, carries background colour
     .logos-strip etc.    → max-width:1600px, margin:0 auto
=================================================================== */

/* ── Hero outer wrapper ─────────────────────────────────────────── */
.hero-outer {
  padding: 0 60px;
  background: #fff;
  box-sizing: border-box;
}

/* Hero elements: contained + rounded ───────────────────────────── */
.hero-outer .home-hero,
.hero-outer .ind-pg-hero,
.hero-outer .ip-hero,
.hero-outer .sp-hero,
.hero-outer .ct-hero,
.hero-outer .ah-hero,
.hero-outer .bl-single-hero {
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 16px !important;
  overflow: hidden;
}

/* Fix content padding — hero-content divs already have padding:0 60px
   but now the hero itself has 60px outer padding so reduce inner padding */
.hero-outer .home-hero-content,
.hero-outer .ind-pg-hero-content,
.hero-outer .ip-hero-content,
.hero-outer .sp-hero-content,
.hero-outer .ct-hero-content,
.hero-outer .ah-hero-left,
.hero-outer .bl-single-hero-content {
  padding-left: 48px;
  padding-right: 48px;
}

/* ── Section background wrapper ─────────────────────────────────── */
.bg-wrap {
  width: 100%;
  padding: 0 60px;
  box-sizing: border-box;
}

/* Strip off existing padding/margin from wrapped elements */
.bg-wrap > .logos-strip,
.bg-wrap > .testi-section,
.bg-wrap > .ind-pg-staff-strip,
.bg-wrap > .bl-page-hero,
.bg-wrap > .bl-cat-bar {
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

/* Testi and logos strip: rounded corners with bg contained */
.bg-wrap > .testi-section {
  border-radius: 16px;
  padding: 29px 0;
}
.bg-wrap > .logos-strip {
  border-radius: 16px;
  padding: 29px 0;
}
.bg-wrap > .ind-pg-staff-strip {
  border-radius: 16px;
  padding: 28px 60px;
  width: auto;
}

/* ── Background colour variants ─────────────────────────────────── */
.bg-wrap--offwhite   { background: var(--offwhite, #f7f9f7); padding-top: 0; padding-bottom: 0; }
.bg-wrap--green-tint { background: #f0f5f0; padding-top: 0; padding-bottom: 0; }
.bg-wrap--cream      { background: var(--bl-cream, #fafaf6); padding-top: 0; padding-bottom: 0; }
.bg-wrap--white      { background: #fff; }

/* Logos strip fade should match contained bg */
.bg-wrap--green-tint .logos-track-wrap::before { background: linear-gradient(90deg, #f0f5f0, transparent); }
.bg-wrap--green-tint .logos-track-wrap::after  { background: linear-gradient(-90deg, #f0f5f0, transparent); }

/* ── Whole banner outer — already padded, just ensure no bleed ─── */
.whole-banner-outer {
  padding: 29px 60px;
  background: #fff;
  box-sizing: border-box;
}

/* ── CTA strip outer ─────────────────────────────────────────────── */
.cta-strip-outer {
  padding: 29px 60px;
  background: #fff;
  box-sizing: border-box;
}

/* ── Highlights wrap sections (ip-, sp-, ind-pg-) ───────────────── */
.ip-highlights-wrap,
.sp-highlights-wrap,
.ind-pg-hl-wrap,
.ah-stats-wrap {
  padding: 29px 60px;
  background: #fff;
  max-width: 100%;
  box-sizing: border-box;
}
.ip-highlights-wrap > *,
.sp-highlights-wrap > *,
.ind-pg-hl-wrap > *,
.ah-stats-wrap > * {
  max-width: 1600px;
  margin: 0 auto;
}

/* ── bl-page-hero & bl-cat-bar ───────────────────────────────────── */
.bg-wrap > .bl-page-hero {
  border-radius: 0;
  overflow: visible;
}
.bg-wrap > .bl-cat-bar {
  border-radius: 0;
  position: sticky;
  top: 68px;
  z-index: 40;
}

/* ── ab-hero-wrap (About Us) acts as its own hero-outer ── */
.ab-hero-wrap {
  padding: 0 60px;
  background: #fff;
  box-sizing: border-box;
}
.ab-hero-wrap .ind-pg-hero {
  max-width: 1600px;
  margin: 0 auto;
  border-radius: 12px !important;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .hero-outer,
  .bg-wrap,
  .whole-banner-outer,
  .cta-strip-outer,
  .ip-highlights-wrap,
  .sp-highlights-wrap,
  .ind-pg-hl-wrap,
  .ah-stats-wrap { padding-left: 28px; padding-right: 28px; }

  .hero-outer .home-hero-content,
  .hero-outer .ind-pg-hero-content,
  .hero-outer .ip-hero-content,
  .hero-outer .sp-hero-content,
  .hero-outer .ct-hero-content,
  .hero-outer .ah-hero-left,
  .hero-outer .bl-single-hero-content { padding-left: 32px; padding-right: 32px; }

  .bg-wrap > .ind-pg-staff-strip { padding: 20px 28px; }

  .ab-hero-wrap { padding: 0 28px; }
}

@media (max-width: 768px) {
  .hero-outer,
  .bg-wrap,
  .whole-banner-outer,
  .cta-strip-outer { padding-left: 16px; padding-right: 16px; }

  .hero-outer .home-hero-content,
  .hero-outer .ind-pg-hero-content,
  .hero-outer .ip-hero-content,
  .hero-outer .sp-hero-content,
  .hero-outer .ct-hero-content,
  .hero-outer .ah-hero-left,
  .hero-outer .bl-single-hero-content { padding-left: 20px; padding-right: 20px; }

  .bg-wrap > .ind-pg-staff-strip { padding: 16px 16px; }

  .bg-wrap > .logos-strip,
  .bg-wrap > .testi-section { border-radius: 12px; }

  .hero-outer .home-hero,
  .hero-outer .ind-pg-hero,
  .hero-outer .ip-hero,
  .hero-outer .sp-hero,
  .hero-outer .ct-hero,
  .hero-outer .ah-hero { border-radius: 12px !important; }

  .ab-hero-wrap { padding: 0 16px; }
  .ab-hero-wrap .ind-pg-hero { border-radius: 8px !important; }
}

@media (max-width: 480px) {
  .hero-outer,
  .bg-wrap,
  .whole-banner-outer,
  .cta-strip-outer { padding-left: 12px; padding-right: 12px; }

  .bg-wrap > .logos-strip,
  .bg-wrap > .testi-section { border-radius: 10px; }

  .hero-outer .home-hero,
  .hero-outer .ind-pg-hero,
  .hero-outer .ip-hero,
  .hero-outer .sp-hero,
  .hero-outer .ct-hero,
  .hero-outer .ah-hero { border-radius: 10px !important; }

  .ab-hero-wrap { padding: 0 12px; }
}


/* ── Industry pages: staff strip spacing & alignment ──────────────
   Gap between hero and staff strip, aligned to hero text (60px sides).
─────────────────────────────────────────────────────────────────── */

/* Gap between hero-outer and staff strip bg-wrap */
.hero-outer + .bg-wrap--green-tint {
  margin-top: 16px;
}

/* Staff strip inner already has padding:0 60px — remove it since
   bg-wrap provides the 60px side padding */
.bg-wrap > .ind-pg-staff-strip {
  padding: 28px 0 !important;
  border-radius: 16px;
  overflow: hidden;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* The inner strip container — remove its own side padding */
.bg-wrap > .ind-pg-staff-strip .ind-pg-staff-strip-inner {
  padding: 0 60px;
  max-width: none;
}

@media (max-width: 1024px) {
  .hero-outer + .bg-wrap--green-tint { margin-top: 14px; }
  .bg-wrap > .ind-pg-staff-strip .ind-pg-staff-strip-inner { padding: 0 28px; }
}

@media (max-width: 768px) {
  .hero-outer + .bg-wrap--green-tint { margin-top: 12px; }
  .bg-wrap > .ind-pg-staff-strip .ind-pg-staff-strip-inner { padding: 0 16px; }
}

@media (max-width: 480px) {
  .bg-wrap > .ind-pg-staff-strip .ind-pg-staff-strip-inner { padding: 0 14px; }
}


/* ===================================================================
   OVERVIEW SECTIONS — consistent image size + even 40px padding
   Applies to: sp-overview, ip-overview, ind-pg-split, ah-why
=================================================================== */

/* ── Shared container ───────────────────────────────────────────── */
.sp-overview,
.ip-overview,
.ind-pg-split,
.ah-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, #e0e0e0);
  background: #fff;
}

/* ── Image panels — all the same consistent proportions ─────────── */
.sp-ov-single,
.ip-overview-img,
.ind-pg-staff,
.ah-why-img {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  min-height: 400px;
  aspect-ratio: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

/* Remove old min-heights that differ per component */
.sp-ov-single  { min-height: 0; }
.ip-overview-img { min-height: 0; }
.ind-pg-staff  { min-height: 0; }
.ah-why-img    { min-height: 0; }

/* Both image and text columns stretch to match the taller side */
.sp-overview > *,
.ip-overview > *,
.ind-pg-split > *,
.ah-why > * {
  align-self: stretch;
}

/* Image panels fill their cell completely */
.sp-ov-single,
.ip-overview-img,
.ind-pg-staff,
.ah-why-img {
  min-height: 340px;
}

/* ── Converted bg→img panels: <picture><img> fills container like background-size:cover ── */
.sp-ov-single picture,
.ip-overview-img picture,
.ind-pg-staff picture,
.ah-why-img picture,
.ah-lha-img picture,
.obp-problem-img picture,
.obp-preview-img picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.sp-ov-single picture img,
.ip-overview-img picture img,
.ind-pg-staff picture img,
.ah-why-img picture img,
.ah-lha-img picture img,
.obp-problem-img picture img,
.obp-preview-img picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Texture overlay on all image panels ────────────────────────── */
.sp-ov-single::before,
.ip-overview-img::before,
.ind-pg-staff::before,
.ah-why-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 1px,
    transparent 1px, transparent 24px
  );
  pointer-events: none;
}

/* ── Text panels — even 40px padding all sides ──────────────────── */
.sp-overview-text,
.ip-overview-text,
.ind-pg-overview,
.ah-why-text {
  padding: 40px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

/* Remove any inline styles that override padding */
.sp-overview-text > div,
.ip-overview-text > div { margin: 0; }

/* Text typography inside overview */
.sp-overview-text h2,
.ip-overview-text h2,
.ind-pg-overview h2,
.ah-why-text h2 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: var(--black, #111);
  margin-bottom: 8px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.sp-overview-text p,
.ip-overview-text p,
.ind-pg-overview p,
.ah-why-text p {
  font-size: 14.5px;
  color: var(--mid, #555);
  line-height: 1.78;
  margin-bottom: 0;
}

/* ── sp-overview: had a gap:32px — remove it ─────────────────────── */
.sp-overview { gap: 0; }

@media (max-width: 1024px) {
  .sp-overview,
  .ip-overview,
  .ind-pg-split,
  .ah-why {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }

  .sp-ov-single,
  .ip-overview-img,
  .ind-pg-staff,
  .ah-why-img { min-height: 280px; }

  .sp-overview-text,
  .ip-overview-text,
  .ind-pg-overview,
  .ah-why-text { padding: 32px !important; gap: 16px; }

  /* ah-why: text on LEFT, image on RIGHT — on tablet image stacks above */
  .ah-why-text { order: 2; }
  .ah-why-img  { order: 1; }
}

@media (max-width: 768px) {
  .sp-ov-single,
  .ip-overview-img,
  .ind-pg-staff,
  .ah-why-img { min-height: 220px; }

  .sp-overview-text,
  .ip-overview-text,
  .ind-pg-overview,
  .ah-why-text { padding: 24px !important; gap: 14px; }

  .sp-overview,
  .ip-overview,
  .ind-pg-split,
  .ah-why { border-radius: 10px; }
}


/* ===================================================================
   HERO TOP GAP — padding between sticky header and all hero banners
=================================================================== */
.hero-outer {
  padding-top: 16px;
  padding-bottom: 0;
}

.ab-hero-wrap {
  padding-top: 16px;
}

/* News hub — bl-page-hero is the first thing after header */
.bg-wrap--cream:first-of-type {
  padding-top: 16px;
}

/* Login page — lp-wrap is the first content after header */
.lp-wrap {
  padding-top: 48px;
}


/* ── Services pages (labour hire, perm placement, flexsperts)
   Match hero height to industry pages standard (280px) ── */
.sp-hero {
  min-height: 280px;
}

@media (max-width: 1024px) {
  .sp-hero { min-height: 260px; }
}

@media (max-width: 768px) {
  .sp-hero { min-height: 220px; }
}


/* ── Overview text panel headings — label style ── */
.sp-overview-text h2,
.ip-overview-text h2,
.ind-pg-overview h2,
.ah-why-text h2 {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--mid, #555) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

/* Keep the About page main heading normal (it uses sec-h class) */
.sp-overview-text .sec-h,
.ip-overview-text .sec-h {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--black, #111) !important;
  margin-bottom: 10px !important;
}


/* ===================================================================
   UNIFIED SECTION SPACING — compact & consistent across all pages
   Desktop: 24px | Tablet ≤1024px: 20px | Mobile ≤768px: 16px | XS ≤480px: 12px
=================================================================== */

/* ── Core section vertical rhythm ─────────────────────────────── */
.section,
.section-alt {
  padding: 24px 0 !important;
}

/* ── Hero outer top gap stays 16px ────────────────────────────── */
.hero-outer { padding-top: 16px !important; }

/* ── Whole banners ─────────────────────────────────────────────── */
.whole-banner-outer {
  padding: 24px 60px !important;
}

/* ── CTA strip ──────────────────────────────────────────────────── */
.cta-strip-outer {
  padding: 24px 60px !important;
}

/* ── bg-wrap wrappers: vertical gap built into wrapper ────────── */
.bg-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logos strip inner padding */
.bg-wrap > .logos-strip {
  padding: 24px 0 !important;
}

/* Testimonial section inner padding */
.bg-wrap > .testi-section {
  padding: 24px 0 !important;
}

/* Staff strip inner */
.bg-wrap > .ind-pg-staff-strip {
  padding: 24px 0 !important;
}
.bg-wrap > .ind-pg-staff-strip .ind-pg-staff-strip-inner {
  padding: 0 60px !important;
}

/* ── Highlights wraps ──────────────────────────────────────────── */
.sp-highlights-wrap,
.ip-highlights-wrap,
.ind-pg-hl-wrap,
.ah-stats-wrap {
  padding: 24px 60px !important;
}

/* ── OBP page sections ─────────────────────────────────────────── */
.obp-problem,
.obp-inside,
.obp-preview,
.obp-who,
.obp-about {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.obp-cta-wrap { padding: 24px 60px !important; }

/* ── Blog sections ─────────────────────────────────────────────── */
.bl-featured-section { padding: 24px 32px 0 !important; }
.bl-topic-section    { padding: 32px 32px 0 !important; }
.bl-newsletter       { margin-top: 32px !important; margin-bottom: 32px !important; }

/* ── Login & Contact page ──────────────────────────────────────── */
.lp-wrap    { padding: 24px 60px !important; }
.ct-page-bg { padding: 24px 60px !important; }

/* ── sp-overview-outer ─────────────────────────────────────────── */
.sp-overview-outer { padding: 0 60px !important; }

@media (max-width: 1024px) {
  .section,
  .section-alt { padding: 20px 0 !important; }

  .whole-banner-outer,
  .cta-strip-outer { padding: 20px 28px !important; }

  .sp-highlights-wrap,
  .ip-highlights-wrap,
  .ind-pg-hl-wrap,
  .ah-stats-wrap { padding: 20px 28px !important; }

  .bg-wrap > .logos-strip,
  .bg-wrap > .testi-section,
  .bg-wrap > .ind-pg-staff-strip { padding: 20px 0 !important; }

  .bg-wrap > .ind-pg-staff-strip .ind-pg-staff-strip-inner { padding: 0 28px !important; }

  .sp-overview-outer { padding: 0 28px !important; }

  .obp-problem,
  .obp-inside,
  .obp-preview,
  .obp-who,
  .obp-about { padding-top: 36px !important; padding-bottom: 36px !important; }

  .obp-cta-wrap { padding: 20px 28px !important; }

  .lp-wrap,
  .ct-page-bg { padding: 20px 28px !important; }

  .bl-featured-section { padding: 20px 28px 0 !important; }
  .bl-topic-section    { padding: 24px 28px 0 !important; }
}

@media (max-width: 768px) {
  .section,
  .section-alt { padding: 16px 0 !important; }

  .whole-banner-outer,
  .cta-strip-outer { padding: 16px 16px !important; }

  .sp-highlights-wrap,
  .ip-highlights-wrap,
  .ind-pg-hl-wrap,
  .ah-stats-wrap { padding: 16px !important; }

  .bg-wrap > .logos-strip,
  .bg-wrap > .testi-section,
  .bg-wrap > .ind-pg-staff-strip { padding: 16px 0 !important; }

  .bg-wrap > .ind-pg-staff-strip .ind-pg-staff-strip-inner { padding: 0 16px !important; }

  .sp-overview-outer { padding: 0 16px !important; }

  .obp-problem,
  .obp-inside,
  .obp-preview,
  .obp-who,
  .obp-about { padding-top: 24px !important; padding-bottom: 24px !important; }

  .obp-cta-wrap { padding: 16px !important; }

  .lp-wrap,
  .ct-page-bg { padding: 16px !important; }

  .bl-featured-section { padding: 16px 16px 0 !important; }
  .bl-topic-section    { padding: 20px 16px 0 !important; }
}

@media (max-width: 480px) {
  .section,
  .section-alt { padding: 12px 0 !important; }

  .whole-banner-outer,
  .cta-strip-outer { padding: 12px !important; }

  .sp-highlights-wrap,
  .ip-highlights-wrap,
  .ind-pg-hl-wrap,
  .ah-stats-wrap { padding: 12px !important; }

  .bg-wrap > .logos-strip,
  .bg-wrap > .testi-section { padding: 12px 0 !important; }

  .obp-cta-wrap,
  .lp-wrap,
  .ct-page-bg { padding: 12px !important; }

  .bl-featured-section,
  .bl-topic-section { padding-left: 14px !important; padding-right: 14px !important; }
}


/* ── Location pages: ah-why containment to 1600px ── */
.ah-why-outer {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
  width: 100%;
}
.ah-why-outer .ah-why {
  max-width: none;
  width: 100%;
}

@media (max-width: 1024px) {
  .ah-why-outer { padding: 0 28px; }
}

@media (max-width: 768px) {
  .ah-why-outer { padding: 0 16px; }
}

@media (max-width: 480px) {
  .ah-why-outer { padding: 0 12px; }
}


/* ===================================================================
   COMPONENT BASE LAYOUTS (all widths)
   Restored from designer build; previously dropped during conversion.
=================================================================== */

/* ── Homepage hero title — allow the full two-line title to show
   (560px cap forced an awkward 3-line wrap on desktop) ───────────── */
.is-front-page .home-hero-content h1 { max-width: 720px; }

/* ── "Working with SMS" cards (.wi): icon + title on row 1,
   paragraph on row 2 ──────────────────────────────────────────────── */
.working-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 32px;
}
.wi {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 0;
  padding: 22px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--r8, 10px);
  background: #fff;
  transition: all .2s;
  overflow: visible;
}
.wi:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: transparent;
  transform: translateY(-2px);
}
.wi-ico {
  grid-row: 1; grid-column: 1;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(76,175,80,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--green, #4CAF50);
  font-size: 20px;
  margin: 0; flex-shrink: 0; align-self: center;
}
.wi h3 {
  grid-row: 1; grid-column: 2;
  font-size: 15px; font-weight: 700;
  color: var(--black, #111);
  margin: 0; align-self: center; line-height: 1.3;
}
.wi p {
  grid-row: 2; grid-column: 1 / -1;
  font-size: 13px; color: var(--mid, #555);
  line-height: 1.65; margin: 10px 0 0;
  display: block; overflow: visible; max-height: none;
}

/* ── Employers/Candidates "working" cards (.ip-wi): same layout ────── */
.ip-working-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.ip-wi {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  padding: 22px !important;
  border: 1px solid var(--border, #e0e0e0) !important;
  border-radius: 10px !important;
  background: #fff !important;
  overflow: visible !important;
}
.ip-wi-ico {
  grid-row: 1 !important; grid-column: 1 !important;
  margin: 0 !important; align-self: center !important;
}
.ip-wi h3 {
  grid-row: 1 !important; grid-column: 2 !important;
  margin: 0 !important; align-self: center !important;
  font-size: 15px; font-weight: 700; line-height: 1.3;
}
.ip-wi p {
  grid-row: 2 !important; grid-column: 1 / -1 !important;
  margin: 10px 0 0 !important;
  font-size: 13px; color: var(--mid, #555); line-height: 1.65;
  display: block !important; overflow: visible !important;
}

/* ── LHA compliance section ───────────────────────────────────────── */
.ah-lha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.ah-lha-text { display: flex; flex-direction: column; gap: 12px; }
.ah-lha-text p { font-size: 14.5px; color: #555; line-height: 1.75; }
.ah-lha-text strong { color: #111; }
.ah-lha-badge-img {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1a3a6b !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  width: auto !important; height: auto !important;
  min-height: unset !important; min-width: unset !important;
  position: static !important; overflow: visible !important;
  flex-direction: row !important;
  margin-top: 8px; align-self: flex-start;
}
.ah-lha-badge-img::before { display: none !important; }
.ah-lha-badge-img i { font-size: 14px !important; color: rgba(255,255,255,.7) !important; position: static !important; }
.ah-lha-badge-img span { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .05em !important; color: #fff !important; text-transform: uppercase !important; position: static !important; }

/* ── About page overview spacing ──────────────────────────────────── */
#p-about .ip-overview-text { gap: 12px !important; }
#p-about .ip-overview-text .sec-h { margin-bottom: 2px !important; }
#p-about .ip-overview-text .sec-sub { margin-bottom: 4px !important; }

/* ── Hide broken LHA authority placeholder image ──────────────────── */
img[alt="Victorian Labour Hire Authority Licensed"] { display: none !important; }

/* ── Banner inline button rows wrap ───────────────────────────────── */
.whole-banner-content > div[style*="display:flex"] { flex-wrap: wrap; }


/* ===================================================================
   RESPONSIVE GRIDS & COMPONENTS — TABLET (≤1024px)
=================================================================== */
@media (max-width: 1024px) {
  /* Grids → 2 columns */
  .svc-3col            { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .ind-grid-home       { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .working-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ip-working-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .sp-feat-grid        { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .sp-highlights       { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ip-highlights       { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ind-pg-hl-grid      { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ind-pg-roles-strip  { grid-template-columns: repeat(2, 1fr); gap: 6px 20px; }
  .ah-stats            { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ah-ind-grid         { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ah-svc-grid         { grid-template-columns: 1fr; gap: 12px; }
  .ah-area-grid        { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .obp-who-grid        { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .obp-features-grid   { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .obp-stats-grid      { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .lp-inner            { grid-template-columns: 1fr; gap: 16px; }

  .wi    { padding: 18px !important; }
  .wi h3 { font-size: 14px; }
  .ip-wi { padding: 18px !important; }

  /* CTA strip buttons side by side */
  .cta-strip-btns { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; width: auto !important; }
  .cta-strip-btn, .cta-strip-btn-outline { display: inline-flex !important; width: auto !important; text-align: center !important; white-space: nowrap; }

  /* Banner buttons inline, not full-width */
  .whole-banner-content .btn { display: inline-flex !important; width: auto !important; min-width: 120px; text-align: center; }

  /* How It Works: 2 col, left-aligned stacked steps */
  .how-it-works-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .how-it-works-grid > div { text-align: left !important; padding: 0 4px; }
  .how-it-works-grid > div > div:first-child { margin: 0 0 12px 0 !important; }

  /* LHA: text on top, image on bottom */
  .ah-lha { display: flex !important; flex-direction: column !important; gap: 0 !important; grid-template-columns: none !important; }
  .ah-lha-text { order: 1 !important; width: 100% !important; padding: 0 0 20px !important; }
  .ah-lha-img  { order: 2 !important; width: 100% !important; min-height: 220px !important; border-radius: 0 0 12px 12px !important; }
}


/* ===================================================================
   RESPONSIVE GRIDS & COMPONENTS — MOBILE (≤768px)
=================================================================== */
@media (max-width: 768px) {
  /* Hero */
  .home-hero-content h1 { font-size: clamp(22px, 8vw, 30px); max-width: 100%; }
  .hero-sub { font-size: 14px; }
  .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-cta-box { width: 100%; max-width: 100%; }

  /* Grids → 1 column (or tighter 2-col for compact tiles) */
  .svc-3col        { grid-template-columns: 1fr !important; gap: 10px; }
  .sp-feat-grid    { grid-template-columns: 1fr !important; gap: 10px; }
  .ah-svc-grid     { grid-template-columns: 1fr !important; gap: 10px; }
  .ind-grid-home   { grid-template-columns: 1fr !important; gap: 10px; }
  .working-grid    { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ip-working-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .sp-highlights      { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ip-highlights      { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ind-pg-hl-grid     { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ind-pg-roles-strip { grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .ah-stats           { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ah-ind-grid        { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ah-area-grid       { grid-template-columns: 1fr 1fr; gap: 8px; }
  .obp-features-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .obp-who-grid       { grid-template-columns: 1fr 1fr; gap: 10px; }
  .obp-stats-grid     { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lp-inner           { grid-template-columns: 1fr; gap: 12px; }

  .wi    { padding: 16px !important; }
  .wi h3 { font-size: 14px; }
  .wi p  { margin-top: 8px; }
  .ip-wi { padding: 16px !important; }

  /* CTA strip: heading stacks above buttons; buttons stay side by side */
  .cta-strip { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .cta-strip-left h2 { font-size: 18px; }
  .cta-strip-btns { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; width: auto !important; }
  .cta-strip-btn, .cta-strip-btn-outline { display: inline-flex !important; width: auto !important; text-align: center !important; white-space: nowrap; }

  /* Banner buttons inline */
  .whole-banner-content .btn { display: inline-flex !important; width: auto !important; min-width: 120px; text-align: center; }

  /* How It Works: 1 col, stacked card (number → title → paragraph) */
  .how-it-works-grid { grid-template-columns: 1fr !important; gap: 16px !important; text-align: left !important; }
  .how-it-works-grid > div { display: block !important; text-align: left !important; padding: 16px; background: #fff; border: 1px solid var(--border, #e0e0e0); border-radius: 12px; }
  .how-it-works-grid > div > div:first-child { width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 16px !important; border-radius: 50% !important; background: #4CAF50 !important; color: #fff !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 10px 0 !important; }
  .how-it-works-grid > div h3 { text-align: left !important; margin-bottom: 6px !important; font-size: 15px !important; }
  .how-it-works-grid > div p { text-align: left !important; margin: 0 !important; }

  /* LHA: text on top, image on bottom */
  .ah-lha { display: flex !important; flex-direction: column !important; gap: 0 !important; grid-template-columns: none !important; }
  .ah-lha-text { order: 1 !important; width: 100% !important; padding: 0 0 20px !important; }
  .ah-lha-img  { order: 2 !important; width: 100% !important; min-height: 180px !important; border-radius: 0 0 12px 12px !important; }
}


/* ===================================================================
   REVIEW ROUND 2 — issues 6–10
   High-specificity reinforcements so the intended layouts win over
   main.css / alt-homepage.css media-query rules in every browser.
=================================================================== */

/* ── Issues 8 & 9 — "Working with" cards keep the icon+title (row 1) /
   paragraph (row 2) grid layout at tablet & mobile, overriding the
   main.css flex layout that kicks in below 1024px ────────────────── */
@media (max-width: 1024px) {
  .wi, .ip-wi {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
  }
  .wi    { grid-template-columns: 48px 1fr !important; }
  .ip-wi { grid-template-columns: 56px 1fr !important; }
  .wi-ico, .ip-wi-ico { grid-row: 1 !important; grid-column: 1 !important; margin: 0 !important; align-self: center !important; }
  .wi h3,  .ip-wi h3  { grid-row: 1 !important; grid-column: 2 !important; margin: 0 !important; align-self: center !important; }
  .wi p,   .ip-wi p   { grid-row: 2 !important; grid-column: 1 / -1 !important; margin: 10px 0 0 !important; }
}
@media (max-width: 768px) {
  .wi, .ip-wi {
    display: grid !important;
    grid-template-rows: auto auto !important;
  }
  .wi    { grid-template-columns: 44px 1fr !important; }
  .ip-wi { grid-template-columns: 52px 1fr !important; }
  .wi-ico, .ip-wi-ico { grid-row: 1 !important; grid-column: 1 !important; margin: 0 !important; align-self: center !important; }
  .wi h3,  .ip-wi h3  { grid-row: 1 !important; grid-column: 2 !important; margin: 0 !important; align-self: center !important; }
  .wi p,   .ip-wi p   { grid-row: 2 !important; grid-column: 1 / -1 !important; margin: 8px 0 0 !important; }
}

/* ── Issues 6 & 7 — service-page highlight/feature cards:
   2-col on tablet (all three service pages); the 4 image cards stay
   2-col on mobile too (override main.css's 1-col mobile rule) ─────── */
@media (max-width: 1024px) {
  .sp-highlights,
  .ip-highlights,
  .sp-feat-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .sp-highlights,
  .ip-highlights { grid-template-columns: 1fr 1fr !important; }
}

/* ── Issue 10 — location-page hero (Dandenong / Bayswater / Melbourne):
   add top & bottom padding so the eyebrow / heading / button aren't
   flush against the banner edges on tablet & mobile. Horizontal padding
   from alt-homepage.css is preserved. ────────────────────────────── */
@media (max-width: 1024px) {
  .ah-hero-left { padding-top: 40px !important; padding-bottom: 40px !important; }
}
@media (max-width: 768px) {
  .ah-hero-left { padding-top: 32px !important; padding-bottom: 32px !important; }
}
@media (max-width: 480px) {
  .ah-hero-left { padding-top: 26px !important; padding-bottom: 26px !important; }
}


/* ===================================================================
   REVIEW ROUND 3 — issues 11, 13, 14
=================================================================== */

/* ── Issue 11 — Contact Us: add a gap between the hero banner and the
   intro copy section so the body no longer butts up against the banner ── */
.hero-outer + .ct-intro { margin-top: 16px; }
@media (max-width: 1024px) { .hero-outer + .ct-intro { margin-top: 14px; } }
@media (max-width: 768px)  { .hero-outer + .ct-intro { margin-top: 12px; } }

/* ── Issue 14 — Labour Hire & Perm Placement feature cards: stack to a
   single column on mobile (round-2 forced 2-col at ≤1024 which was
   bleeding into mobile; reassert 1-col below 768px) ──────────────── */
@media (max-width: 768px) {
  .sp-feat-grid { grid-template-columns: 1fr !important; }
}

/* ── Issue 13 — OnboardingHP hero: contained content padding to match
   the homepage hero (the hero-outer wrapper supplies the 60px side
   inset + 16px top gap; trim the column padding so text isn't doubly
   inset) ─────────────────────────────────────────────────────────── */
.hero-outer > .obp-hero { min-height: 460px; }
.hero-outer > .obp-hero .obp-hero-left  { padding: 48px 48px; }
.hero-outer > .obp-hero .obp-hero-right { padding: 40px 48px; }
@media (max-width: 1024px) {
  .hero-outer > .obp-hero .obp-hero-left  { padding: 36px 32px; }
  .hero-outer > .obp-hero .obp-hero-right { padding: 32px 32px; }
}
@media (max-width: 768px) {
  .hero-outer > .obp-hero .obp-hero-left  { padding: 28px 20px; }
  .hero-outer > .obp-hero .obp-hero-right { padding: 24px 20px; }
}

/* ── Issue 13 — OnboardingHP "problem" section: match the standard
   overview layout (bordered, rounded card; image flush one side,
   padded paragraph the other). Markup wraps the two columns in
   .obp-problem-grid; .obp-problem becomes the section/outer. ─────── */
.obp-problem {
  display: block !important;
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 60px !important;
}
.obp-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  align-items: stretch;
}
.obp-problem-grid > .obp-problem-img {
  border-radius: 0 !important;
  min-height: 340px;
  height: 100%;
}
.obp-problem-grid > .obp-problem-text {
  padding: 40px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1024px) {
  .obp-problem { padding: 20px 28px !important; }
  .obp-problem-grid { grid-template-columns: 1fr; border-radius: 12px; }
  .obp-problem-grid > .obp-problem-img { min-height: 280px; }
  .obp-problem-grid > .obp-problem-text { padding: 32px !important; }
}
@media (max-width: 768px) {
  .obp-problem { padding: 16px 16px !important; }
  .obp-problem-grid { border-radius: 10px; }
  .obp-problem-grid > .obp-problem-img { min-height: 220px; }
  .obp-problem-grid > .obp-problem-text { padding: 24px !important; }
}

/* ── Hub-and-spoke reciprocal link (location pages → Melbourne page) ── */
.loc-hub-link {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t, .2s), text-decoration-color var(--t, .2s);
}
.loc-hub-link:hover {
  color: var(--green-dark, #388e3c);
  text-decoration-color: var(--green-dark, #388e3c);
}

/* ── Issue 5 (SEO) — Contact Us: "What to Expect" intro copy above form ── */
.ct-intro {
  background: #fff;
  padding: 48px 0;
}
.ct-intro h2 {
  margin-bottom: 16px;
}
.ct-intro p {
  max-width: 820px;
  line-height: 1.7;
  margin-bottom: 12px;
  color: var(--text, #333);
}
.ct-intro p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .ct-intro { padding: 36px 0; } }
@media (max-width: 768px)  { .ct-intro { padding: 28px 0; } }