@media (max-width: 1199px) {
  .workflow { grid-template-columns: repeat(3, 1fr); }
  .workflow-step:nth-child(4n)::after { display: block; }
  .workflow-step:nth-child(3n)::after, .workflow-step:last-child::after { display: none; }
}

@media (max-width: 991px) {
  .hero { padding: 56px 0 64px; }
  .hero-title { font-size: 2.5rem; }
  .section { padding: 64px 0; }
  .navbar-collapse { padding: 16px 0 8px; }
  .nav-actions { flex-direction: column; align-items: stretch !important; }
  .nav-login { text-align: left; padding-left: 14px; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-side { padding: 10px; }
  .dash-side ul { flex-direction: row; overflow-x: auto; }
  .dash-side li { white-space: nowrap; }
}

@media (max-width: 767px) {
  .workflow { grid-template-columns: repeat(2, 1fr); }
  .workflow-step:nth-child(3n)::after { display: block; }
  .workflow-step:nth-child(even)::after, .workflow-step:last-child::after { display: none; }
  .section-head { margin-bottom: 36px; }
  .section-head h2, .h2-lg, .cta-box h2 { font-size: 1.95rem; }
  .cta-box { padding: 44px 20px; }
  .cta { padding-bottom: 56px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 575px) {
  .hero-title { font-size: 2rem; }
  .hero-text { font-size: 1rem; }
  .hero .btn-lg { width: 100%; }
  .workflow { grid-template-columns: 1fr; }
  .workflow-step::after { display: none !important; }
  .progress-row { grid-template-columns: 90px 1fr 36px; }
  .list-rows li { grid-template-columns: 1fr auto; }
  .list-rows li .muted { display: none; }
  .kpi-value { font-size: 1.5rem; }
  .dash-main { padding: 12px; }
  .chart { gap: 8px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding: 8px 9px; font-size: .9rem; }
  .nav-actions .btn { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}

@media (max-width: 991px) {
  .side-card { position: static; }
  .page-hero { padding: 48px 0 40px; }
  .page-hero h1 { font-size: 2.1rem; }
}

@media (max-width: 575px) {
  .page-hero h1 { font-size: 1.7rem; }
  .form-card { padding: 20px; }
  .job-card { padding: 18px; }
  .job-top { flex-direction: column; }
  .job-actions .btn { flex: 1; }
}

/* Gradient theme adjustments */
@media (max-width: 1199px) {
  .highlight-strip { grid-template-columns: repeat(3, 1fr); }
  .chip-a { left: -8px; }
  .chip-b { right: -8px; }
}

@media (max-width: 991px) {
  .hero { padding: 64px 0 72px; }
  .hero-visual { transform: none; }
  .filters { margin-top: -56px; }
}

@media (max-width: 575px) {
  .highlight-strip { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .highlight-strip li { padding: 16px 18px; }
  .float-chip { display: none; }
  .hero { padding: 48px 0 56px; }
}

/* Hero: heading on two lines, larger artwork on wide screens */
@media (min-width: 992px) {
  .hero-title .t-line { white-space: nowrap; }
  .hero-art { width: 114%; max-width: none; margin-left: -5%; margin-right: -9%; }
}

@media (max-width: 991px) {
  .hero-title .t-line { display: inline; }
}

/* Dark band */
@media (max-width: 991px) {
  .dband-wrap { margin: 28px 0; padding: 48px 0; }
  .dband h2 { font-size: 1.95rem; }
  .dband-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .dband-card { padding: 26px 22px; }
}

/* Dashboard + Benefits boxes */
@media (max-width: 1199px) {
  .section-duo { padding: 12px 0 48px; }
  .duo { grid-template-columns: 1fr; }
  .duo-left::after { font-size: 7rem; }
  .bn-grid { grid-auto-rows: auto; }
  .bn-card { min-height: 130px; }
}

@media (max-width: 767px) {
  .duo-box { padding: 26px 20px; border-radius: 26px; }
  .duo-title { font-size: 2.2rem; }
  .duo-head { flex-direction: column; gap: 10px; }
  .duo-lead { font-size: 1.2rem; }
  .dm-kpis { grid-template-columns: repeat(2, 1fr); }
  .dm-mid { grid-template-columns: 1fr; }
  .bn-grid { grid-template-columns: 1fr; }
}

/* Security bento */
@media (max-width: 991px) {
  .section-sec { padding: 48px 0 24px; }
  .sec-bento { height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: minmax(250px, auto); grid-template-areas: "a b" "c c" "d f" "e e"; }
  .sec-c { min-height: 360px; }
  .sec-c .sec-art { height: 60%; max-width: 60%; }
  .sec-e .sec-art { height: 78%; }
}

@media (max-width: 575px) {
  .sec-bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; gap: 14px; }
  .sec-card { padding: 24px; border-radius: 24px; }
  .sec-c { min-height: 380px; }
  .sec-e { min-height: 330px; }
  .sec-e .sec-art { top: 24px; right: 50%; transform: translateX(50%); width: 62%; height: auto; max-width: none; }
  .sec-e:hover .sec-art { transform: translateX(50%) scale(1.05); }
}

/* How it works: 7-in-a-row on wide screens, stacked list below 1200px */
@media (max-width: 1199px) {
  .flow-row { flex-direction: column; padding-top: 0; }
  .flow-row::before, .flow-row::after, .flow-card::before, .flow-card::after { display: none; }
  .flow-row { padding-top: 0; }
  .flow-card { position: relative; padding-top: 58px; }
  .flow-node, .flow-card:hover .flow-node, .flow-card:focus-within .flow-node { position: absolute; top: 18px; left: 22px; right: auto; transform: none; flex: none; height: 28px; padding: 0 14px; font-size: .74rem; box-shadow: none; z-index: 1; }
  .flow-text { text-align: left; }
  .flow-orb, .flow-card:hover .flow-orb, .flow-card:focus-within .flow-orb { left: auto; right: 44px; bottom: 50%; margin: 0 0 -26px; width: 52px; height: 52px; font-size: 1.4rem; transform: none; box-shadow: 0 0 0 12px rgba(255, 255, 255, .3), 0 0 0 26px rgba(255, 255, 255, .16); }
  .flow-card { flex: none; flex-direction: row; align-items: center; min-height: 0; padding: 58px 22px 20px; gap: 18px; }
  .flow-card:hover, .flow-card:focus-within { flex-grow: 0; }
  .flow-text p { max-height: none; opacity: 1; }
  .flow-text { flex: 1; }
  .flow-ghost { margin: 0 0 0 auto; align-self: center; font-size: 3rem; }
}

@media (max-width: 575px) {
  .flow-icon { width: 52px; height: 52px; font-size: 1.3rem; }
  .flow-ghost { display: none; }
}

/* Features banner */
@media (max-width: 991px) {
  .features-wrap { padding: 16px 16px 0; }
  .features-banner { padding: 48px 0; }
  .features-banner > .container { padding: 0 24px; }
  .feat-figure img { max-width: 320px; }
}

@media (max-width: 575px) {
  .features-banner { padding: 36px 0; border-radius: 24px; }
  .features-banner > .container { padding: 0 14px; }
  .feat-acc .accordion-body { padding-left: 18px; }
}

/* Wider site container (Bootstrap default: 1140 / 1320) */
@media (min-width: 1200px) {
  .container { max-width: 1360px; }
}

@media (min-width: 1400px) {
  .container { max-width: 1500px; }
}

/* "Why BSBH Services" timeline */
@media (max-width: 991px) {
  #about { padding: 64px 0 32px; }
  .why-left { position: static; }
  .why-figure { max-width: 520px; }
}

@media (max-width: 575px) {
  .why-timeline::before, .why-line-fill { left: 18px; top: 34px; }
  .why-timeline::before { bottom: 34px; }
  .why-line-fill { height: calc((100% - 68px) * var(--p, 0)); }
  .why-item { padding-left: 54px; margin-bottom: 20px; }
  .why-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 12px; top: 16px; box-shadow: 0 0 0 4px #fff; }
  .why-item.is-in .why-icon { box-shadow: 0 0 0 4px #fff, 0 8px 16px rgba(2, 39, 89, .22); }
  .why-card { padding: 18px; }
  .why-item::before { left: 40px; width: 14px; top: 34px; }
}

/* Menu spacing by screen width */
@media (min-width: 1200px) and (max-width: 1399px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding: 7px 12px; }
}

@media (min-width: 1400px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding: 7px 20px; }
  .navbar-nav { gap: 4px; }
}

/* Security heading matches the other section headings on small screens too */
@media (max-width: 767px) {
  .section-sec .section-head h2 { font-size: 1.95rem; }
}

/* Client logo slots */
@media (max-width: 991px) {
}

@media (max-width: 575px) {
}

/* Hero switch on phones: label above, full-width segmented control */
@media (max-width: 575px) {
  .hero-switch { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; padding: 12px 12px 12px; border-radius: 26px; margin-bottom: 22px; }
  .hero-switch-label { padding-left: 6px; }
  .hero-switch-track { width: 100%; }
  .hero-switch-track button { flex: 1; padding: 10px 8px; font-size: .88rem; white-space: normal; text-align: center; }
}

/* "Why" section CTAs stay on one row on ~1024px screens (narrow left column) */
@media (min-width: 992px) and (max-width: 1199px) {
  .why-left .why-cta { flex-wrap: nowrap; gap: 10px !important; }
  .why-left .why-cta .btn-lg { font-size: .88rem; padding-left: 16px; gap: 10px; white-space: nowrap; }
  .why-left .why-cta .btn-ic { width: 28px; height: 28px; font-size: .8rem; }
}

/* Highlight strip: all five cards in one row on ~1024px screens */
@media (min-width: 992px) and (max-width: 1199px) {
  .highlight-strip { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .highlight-strip li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 14px; }
  .highlight-strip li:nth-child(n) i { padding-right: 0; margin-right: 0; border-right: 0; font-size: 1.6rem; }
  .highlight-strip b { font-size: .92rem; }
  .highlight-strip span { font-size: .76rem; }
}

/* Phone menu: full-height panel, links right-aligned, CTA pinned to the bottom of the panel */
@media (max-width: 767px) {
  .navbar-collapse.show, .navbar-collapse.collapsing {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100dvh - 100%) !important; transition: none;
    display: flex !important; flex-direction: column; align-items: stretch;
    padding: 12px 24px 24px; background: #fff; overflow-y: auto; z-index: 1029;
  }
  .navbar-collapse.collapsing:not(.show) { display: none !important; }
  .navbar-collapse .navbar-nav { align-items: flex-end; text-align: right; margin-bottom: 0 !important; }
  .navbar-collapse .navbar-nav .nav-link { text-align: right; }
  .navbar-collapse .nav-actions { margin-top: auto; padding-top: 24px; }
}

/* Tablet: menu is a compact right-aligned dropdown; the CTA moves out of it to a bar fixed at the page bottom */
.tablet-cta-bar { display: none; }
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-collapse .navbar-nav { align-items: flex-end; text-align: right; }
  .navbar-collapse .navbar-nav .nav-link { text-align: right; }
  .navbar-collapse .nav-actions { display: none !important; }
  .navbar-collapse.show, .navbar-collapse.collapsing { position: absolute; top: 100%; left: 0; right: 0; padding: 8px 24px 20px; background: #fff; box-shadow: 0 18px 30px rgba(2, 39, 89, .16); z-index: 1029; }
  .tablet-cta-bar { display: flex; justify-content: flex-end; position: fixed; left: 24px; right: 24px; bottom: 16px; z-index: 1020; pointer-events: none; }
  .tablet-cta-bar .btn { width: auto; pointer-events: auto; }
  .site-footer { padding-bottom: 84px; }
}

/* Testimonial slider */
@media (max-width: 991px) {
  .tslide { grid-template-columns: 1fr; gap: 20px; }
  .tphoto { min-height: 300px; }
  .testi-head h2 { font-size: 2.1rem; }
}
@media (max-width: 575px) {
  .section-testi { padding: 64px 0 70px; }
  .testi-head h2 { font-size: 1.7rem; }
  .tcard { padding: 26px 22px; }
  .tcard blockquote { font-size: 1.08rem; }
  .tcard-top > i { font-size: 3rem; }
  .tstars { padding: 8px 16px; }
  .ttrust { font-size: .78rem; padding-left: 14px; }
}

/* Talent section photo overlays on smaller screens */
@media (max-width: 991px) {
  .feat-photo { max-width: 340px; }
  .fp-vetted { left: -12px; } .fp-match { right: -14px; } .fp-skills { left: -8px; } .fp-avail { right: 0; }
  .fp-orbit { inset: 0 -12px 4px -12px; }
}
@media (max-width: 575px) {
  .feat-photo { max-width: 300px; }
  .fp-chip { font-size: .68rem; padding: 7px 10px 7px 8px; }
  .fp-chip b { font-size: .76rem; }
  .fp-s2 { display: none; }
}

/* Why-us photo: on phones the screen sits below the photo instead of covering it */
@media (max-width: 575px) {
  .why-visual { padding-bottom: 0; }
  .why-visual .app-window { position: relative; right: auto; bottom: auto; width: 94%; margin: -34px 0 0 auto; }
  .why-visual .chip-a { left: -4px; }
  .why-visual .chip-b { right: -4px; }
}

/* Dark band centre photo on smaller screens */
@media (max-width: 1199px) {
  .dband-grid { grid-template-columns: 1fr minmax(240px, 290px) 1fr; gap: 16px; }
  .dband-card { padding: 20px 20px 22px; }
  .dc-wrap { width: 100%; }
  .dc-biz { left: -22px; } .dc-exp { right: -22px; }
  .dc-chip { font-size: .66rem; padding: 6px 10px 6px 7px; }
  .dc-chip b { font-size: .74rem; }
  .dc-chip i { width: 26px; height: 26px; font-size: .85rem; }
}
@media (max-width: 991px) {
  .dband-grid { grid-template-columns: 1fr; gap: 20px; }
  .dband-center { order: -1; max-width: 340px; margin: 14px auto 30px; width: 100%; }
  .dc-wrap { position: relative; left: auto; top: auto; transform: none; width: 100%; margin: 0 auto; }
  .dc-link { left: -10px; right: -10px; }
  .dc-biz { left: -10px; } .dc-exp { right: -10px; }
}

/* About hero on smaller screens */
@media (max-width: 991px) {
  .page-hero-split { padding-top: 44px; padding-bottom: 48px; }
  .page-hero-split h1 { font-size: 2.2rem; }
  .ah-visual { margin: 6px auto 0; max-width: 460px; }
}
@media (max-width: 575px) {
  .page-hero-split h1 { font-size: 1.8rem; }
  .ah-visual { padding-left: 8px; }
  .ah-a { left: -6px; } .ah-b { right: -8px; }
}

/* About approach centre photo on smaller screens */
@media (max-width: 991px) {
  .ac-visual { min-height: 420px; height: 420px; max-width: 340px; }
  .ac-a { left: -12px; } .ac-b { right: -12px; }
}

/* About values cards on smaller screens */
@media (max-width: 991px) {
  .vcards { row-gap: 80px !important; padding-top: 64px; }
}
@media (max-width: 575px) {
  .vcard { padding-top: 175px; }
  .vc-img { max-width: 260px; }
}

/* About values (dark) on smaller screens */
@media (max-width: 991px) {
  .section-values .vcards { row-gap: 64px !important; padding-top: 48px; }
}
@media (max-width: 575px) {
  .section-values { padding: 64px 0 70px; }
  .section-values .vcard { padding-top: 140px; }
  .section-values .vc-img { max-width: 190px; }
}

/* About values infographics on smaller screens */
@media (max-width: 991px) {
  .section-values .vcards { padding-top: 0; row-gap: 22px !important; }
}
@media (max-width: 575px) {
  .section-values .vcard { padding: 18px 18px 24px; }
}

/* About values round badges on smaller screens */
@media (max-width: 991px) {
  .section-values .vcards { padding-top: 76px; row-gap: 92px !important; }
}
@media (max-width: 575px) {
  .section-values .vcard { padding: 134px 18px 24px; }
}

/* About offer banner on smaller screens */
@media (max-width: 991px) {
  .offer-banner { padding: 60px 0 64px; }
  .offer-head h2 { font-size: 2rem; }
}
@media (max-width: 575px) {
  .offer-wrap { padding: 16px 12px 0; }
  .offer-banner { padding: 44px 0 48px; border-radius: 24px; }
  .offer-card { padding: 26px 22px; }
  .offer-head h2 { font-size: 1.7rem; }
}

/* About values photos + icons on smaller screens */
@media (max-width: 991px) {
  .section-values .vcards { padding-top: 70px; row-gap: 88px !important; }
}
@media (max-width: 575px) {
  .section-values .vcard { padding: 160px 18px 24px; }
  .va { width: 200px; }
}

/* About offer overlap on smaller screens */
@media (max-width: 991px) {
  .section-values { padding-bottom: 120px; }
  .offer-wrap { margin-top: -56px; }
}
@media (max-width: 575px) {
  .section-values { padding-bottom: 100px; }
  .offer-wrap { margin-top: -44px; padding: 0 12px; }
}

/* About offer (container width) on smaller screens */
@media (max-width: 991px) {
  .offer-wrap { padding: 0 0 8px; }
  .offer-banner { padding: 40px 0 44px; }
  .offer-inner { padding: 0 28px; }
}
@media (max-width: 575px) {
  .offer-wrap { padding: 0 0 0; }
  .offer-banner { padding: 34px 0 38px; }
  .offer-inner { padding: 0 16px; }
}

@media (max-width: 991px) { .offer-wrap + .cta { padding-top: 56px; } }
@media (max-width: 575px) { .offer-wrap + .cta { padding-top: 44px; } }

/* About values photo a little smaller */
@media (max-width: 575px) {
  .section-values .vcard { padding-top: 138px; }
  .va { width: 172px; }
}

/* Home: services + FAQ on smaller screens */
@media (max-width: 991px) {
  .section-services { padding-top: 64px; }
  .svc-intro h2 { font-size: 1.8rem; }
  .faq-intro { position: static; }
  .faq-intro h2 { font-size: 1.9rem; }
}
@media (max-width: 575px) {
  .svc-intro { padding: 28px 22px; }
  .svc-card { padding: 18px; }
  .faq-acc .accordion-button { padding: 16px 16px; gap: 12px; font-size: 1rem; }
  .faq-acc .accordion-body { padding: 0 16px 18px 16px; }
}

/* Logo strip overlap on smaller screens */
@media (max-width: 991px) {
  .logos-wrap { margin-top: -48px; padding-bottom: 56px; }
  .section:has(+ .logos-wrap) { padding-bottom: 120px; }
}
@media (max-width: 575px) {
  .logos-wrap { margin-top: -36px; padding-bottom: 44px; }
  .section:has(+ .logos-wrap) { padding-bottom: 96px; }
}

@media (max-width: 991px) { .logos-wrap + .section-faq { padding-top: 56px; } }
@media (max-width: 575px) { .logos-wrap + .section-faq { padding-top: 44px; } }

@media (max-width: 575px) { .logo-marquee { padding: 18px 0; } .logo-item { padding: 0 26px; } .logo-item img { height: 24px; } }

/* Home hero boxes on smaller screens */
@media (max-width: 991px) {
  .hv { margin: 0 auto; max-width: 560px; }
}
@media (max-width: 575px) {
  .hv { max-width: 100%; }
  .hvb-r3 { display: none; }
}

@media (max-width: 575px) {
  .tcats { flex-direction: column; width: 100%; border-radius: 20px; }
  .tcat { padding-right: 14px; }
}

@media (max-width: 575px) {
  .job-filters .form-select, .job-levels { flex: 1 1 100%; }
  .job-levels button { flex: 1; padding: 9px 8px; }
}
@media (max-width: 991px) { .tlayout { grid-template-columns: 1fr; gap: 20px; } }

@media (max-width: 991px) {
  .jd-side { position: static; }
  .jd-title-row h1 { font-size: 1.9rem; }
}
@media (max-width: 575px) {
  .jd-title-row { align-items: flex-start; gap: 14px; }
  .jd-ic { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 18px; }
  .jd-title-row h1 { font-size: 1.6rem; }
}

@media (min-width: 992px) {
  .contact-split .contact-art { margin: 0; width: 480px; max-width: 100%; }
}