/*
 * Isolated baseMSP site chrome.
 * Header and utility-bar styles only. The footer is a separate bmsf- component.
 */

/* Page templates previously used overflow:hidden on their root wrapper, which
   prevents position:sticky from working. Clip only horizontal overflow so the
   one shared header can remain sticky on every page. */
#basemsp-accessible-homepage {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* A card that visually behaves like a link must also be clickable across its
   full surface. Keep exactly one real link in each card so keyboard and screen
   reader users receive one clear destination rather than duplicate links. */
#basemsp-accessible-homepage .bmc-linked-card {
  position: relative;
  cursor: pointer;
}

#basemsp-accessible-homepage .bmc-card-primary-link {
  position: static !important;
}

#basemsp-accessible-homepage .bmc-card-primary-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

#basemsp-accessible-homepage .bmc-linked-card:focus-within {
  outline: 2px solid #019fdb;
  outline-offset: 3px;
}

#basemsp-accessible-homepage .bmc-card-primary-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* One primary-button interaction across every page: a static-position colour
   change and a short sheen. Page-specific styles must not lift the button. */
#basemsp-accessible-homepage .bm-button,
#basemsp-accessible-homepage .bmc-review-cta {
  position: relative;
  overflow: hidden;
  transform: none !important;
}

#basemsp-accessible-homepage .bm-button::before,
#basemsp-accessible-homepage .bmc-review-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform: translateX(-115%) skewX(-20deg);
  transition: transform .6s ease;
}

#basemsp-accessible-homepage .bm-button:hover,
#basemsp-accessible-homepage .bm-button:focus-visible,
#basemsp-accessible-homepage .bmc-review-cta:hover,
#basemsp-accessible-homepage .bmc-review-cta:focus-visible {
  transform: none !important;
}

#basemsp-accessible-homepage .bm-button:hover::before,
#basemsp-accessible-homepage .bm-button:focus-visible::before,
#basemsp-accessible-homepage .bmc-review-cta:hover::before,
#basemsp-accessible-homepage .bmc-review-cta:focus-visible::before {
  transform: translateX(115%) skewX(-20deg);
}

#basemsp-accessible-homepage .bm-button > *,
#basemsp-accessible-homepage .bmc-review-cta > * {
  position: relative;
  z-index: 1;
}

.bmc-skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 8px;
  color: #ffffff;
  background: #051e29;
  box-shadow: 0 0 0 3px #ffffff,0 0 0 6px #007eae;
  font: 500 15px/1.4 "Manrope","Segoe UI",sans-serif;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .18s ease;
}

.bmc-skip-link:focus { transform: translateY(0); }

#basemsp-accessible-homepage #main-content { scroll-margin-top: 92px; }

#basemsp-accessible-homepage :where(a,button,summary,input,select,textarea):focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #007eae !important;
}

#basemsp-accessible-homepage .bmc-utility,
#basemsp-accessible-homepage .bmc-header {
  --bmc-primary: #019fdb;
  --bmc-link-light: #00769f;
  --bmc-accent-dark: #67d8f3;
  --bmc-deep: #051e29;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

#basemsp-accessible-homepage .bmc-utility *,
#basemsp-accessible-homepage .bmc-utility *::before,
#basemsp-accessible-homepage .bmc-utility *::after,
#basemsp-accessible-homepage .bmc-header *,
#basemsp-accessible-homepage .bmc-header *::before,
#basemsp-accessible-homepage .bmc-header *::after {
  box-sizing: border-box;
}

#basemsp-accessible-homepage .bmc-container {
  width: min(1180px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

/* Utility bar: a fixed 40px desktop component on every page. */
#basemsp-accessible-homepage .bmc-utility {
  position: relative;
  z-index: 90;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  color: var(--bmc-deep);
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid rgba(7,58,77,.1);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

#basemsp-accessible-homepage .bmc-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 40px;
  padding: 0;
}

#basemsp-accessible-homepage .bmc-utility-contact,
#basemsp-accessible-homepage .bmc-utility-client {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 18px;
  height: 100%;
  margin: 0;
  padding: 0;
}

#basemsp-accessible-homepage .bmc-utility span,
#basemsp-accessible-homepage .bmc-utility a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin: 0;
  padding: 0;
  color: var(--bmc-deep);
  font: inherit;
  line-height: 1.5;
  text-decoration: none;
  transform: none;
  transition: color .22s ease;
}

#basemsp-accessible-homepage .bmc-utility a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--bmc-link-light);
  transition: right .24s ease;
}

#basemsp-accessible-homepage .bmc-utility a:hover,
#basemsp-accessible-homepage .bmc-utility a:focus-visible {
  color: var(--bmc-link-light);
  transform: none;
}

#basemsp-accessible-homepage .bmc-utility a:hover::after,
#basemsp-accessible-homepage .bmc-utility a:focus-visible::after { right: 0; }

/* Header: a fixed 72px desktop component with an exact 156px by 32px logo. */
#basemsp-accessible-homepage .bmc-header {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  height: 72px;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: linear-gradient(90deg,#041a24,#05232f,#041a24);
  border: 0;
  box-shadow: 0 14px 42px rgba(0,0,0,.13);
}

body.admin-bar #basemsp-accessible-homepage .bmc-header { top: 32px; }

#basemsp-accessible-homepage .bmc-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg,rgba(239,251,254,.03),rgba(103,216,243,.32),rgba(239,251,254,.03));
}

#basemsp-accessible-homepage .bmc-header-inner {
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto minmax(180px,1fr);
  align-items: center;
  gap: 28px;
  height: 72px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

#basemsp-accessible-homepage .bmc-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: 156px;
  height: 32px;
  margin: 0;
  padding: 0;
  line-height: 0;
  text-decoration: none;
}

#basemsp-accessible-homepage .bmc-header-logo {
  display: block;
  width: 156px;
  min-width: 156px;
  max-width: 156px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: left center;
  background: transparent;
  box-shadow: none;
}

#basemsp-accessible-homepage .bmc-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  justify-content: center;
  gap: 24px;
  height: 44px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

#basemsp-accessible-homepage .bmc-nav > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0;
  color: #d5e2e6;
  font: inherit;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transform: none;
  transition: color .22s ease;
}

#basemsp-accessible-homepage .bmc-nav > a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: var(--bmc-accent-dark);
  box-shadow: 0 0 10px rgba(103,216,243,.58);
  transition: right .3s ease;
}

#basemsp-accessible-homepage .bmc-nav > a:hover,
#basemsp-accessible-homepage .bmc-nav > a:focus-visible,
#basemsp-accessible-homepage .bmc-nav > a[aria-current] {
  color: var(--bmc-accent-dark);
  transform: none;
}

#basemsp-accessible-homepage .bmc-nav > a:hover::after,
#basemsp-accessible-homepage .bmc-nav > a:focus-visible::after,
#basemsp-accessible-homepage .bmc-nav > a[aria-current]::after { right: 0; }

#basemsp-accessible-homepage .bmc-review-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 10px;
  height: 44px;
  margin: 0;
  padding: 0 20px;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(135deg,#007eae,#00739f 54%,#00658c);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(1,159,219,.24),inset 0 1px 0 rgba(255,255,255,.28);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transform: none;
  transition: box-shadow .25s ease,filter .25s ease;
}

#basemsp-accessible-homepage .bmc-header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  white-space: nowrap;
}

#basemsp-accessible-homepage .bmc-review-cta:hover,
#basemsp-accessible-homepage .bmc-review-cta:focus-visible {
  color: #ffffff;
  filter: none;
  box-shadow: 0 18px 44px rgba(1,159,219,.32),inset 0 1px 0 rgba(255,255,255,.32);
  transform: none;
}

#basemsp-accessible-homepage .bmc-review-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform: translateX(-115%) skewX(-20deg);
  transition: transform .6s ease;
}

#basemsp-accessible-homepage .bmc-review-cta:hover::before,
#basemsp-accessible-homepage .bmc-review-cta:focus-visible::before {
  transform: translateX(115%) skewX(-20deg);
}

#basemsp-accessible-homepage .bmc-review-cta span {
  position: relative;
  z-index: 1;
  color: inherit;
  font: inherit;
  line-height: inherit;
  transform: none;
}

#basemsp-accessible-homepage .bmc-mobile-nav { display: none; }

/* Shared internal-page hero alignment. New page templates use this component. */
#basemsp-accessible-homepage .bmc-centred-hero { text-align: center; }

#basemsp-accessible-homepage .bmc-centred-hero > nav,
#basemsp-accessible-homepage .bmc-centred-hero .bm-actions,
#basemsp-accessible-homepage .bmc-centred-hero .bm-approach-signals,
#basemsp-accessible-homepage .bmc-centred-hero .bm-legal-meta,
#basemsp-accessible-homepage .bmc-centred-hero .bm-hwh-signals,
#basemsp-accessible-homepage .bmc-centred-hero .bm-review-signals,
#basemsp-accessible-homepage .bmc-centred-hero .bm-migration-signals {
  justify-content: center;
}

#basemsp-accessible-homepage .bmc-centred-hero > [class*="-hero-copy"],
#basemsp-accessible-homepage .bmc-centred-hero h1,
#basemsp-accessible-homepage .bmc-centred-hero .bm-lead,
#basemsp-accessible-homepage .bmc-centred-hero .bm-legal-lead {
  margin-right: auto;
  margin-left: auto;
}

/* Shared two-column section introduction. The copy starts level with the H2,
   while the eyebrow remains above it in the heading column. */
@media (min-width: 981px) {
  #basemsp-accessible-homepage .bmc-heading-copy-layout {
    align-items: start;
  }

  #basemsp-accessible-homepage .bmc-heading-copy-layout > .bmc-heading-copy {
    padding-top: 44px;
  }
}

/* Shared icon-and-title alignment. Icons and numbered badges stay aligned to
   the top when adjacent headings wrap over multiple lines. */
#basemsp-accessible-homepage .bmc-icon-title,
#basemsp-accessible-homepage .bm-access-point,
#basemsp-accessible-homepage .bm-price-service,
#basemsp-accessible-homepage .bm-hwh-card-heading,
#basemsp-accessible-homepage .bm-hwh-path-heading,
#basemsp-accessible-homepage .bm-hwh-process-heading-row,
#basemsp-accessible-homepage .bm-migration-card-title,
#basemsp-accessible-homepage .bm-migration-step-title,
#basemsp-accessible-homepage .bm-migration-assurance-title,
#basemsp-accessible-homepage .bm-review-card-title,
#basemsp-accessible-homepage .bm-review-step-title,
#basemsp-accessible-homepage .bm-review-result-title,
#basemsp-accessible-homepage .bm-approach-step-title {
  align-items: flex-start;
}

@media (max-width: 980px) {
  #basemsp-accessible-homepage .bmc-utility { display: none; }

  #basemsp-accessible-homepage .bmc-header,
  #basemsp-accessible-homepage .bmc-header-inner { height: 68px; }

  #basemsp-accessible-homepage .bmc-header-inner {
    grid-template-columns: 1fr auto;
    gap: 16px;
  }

  #basemsp-accessible-homepage .bmc-nav,
  #basemsp-accessible-homepage .bmc-header-actions { display: none; }

  #basemsp-accessible-homepage .bmc-mobile-nav {
    position: relative;
    display: block;
    justify-self: end;
    height: 44px;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
  }

  #basemsp-accessible-homepage .bmc-mobile-nav > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    color: #e6f0f2;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(239,251,254,.16);
    border-radius: 999px;
    font: inherit;
    line-height: 1.5;
    list-style: none;
    cursor: pointer;
  }

  #basemsp-accessible-homepage .bmc-mobile-nav > summary::-webkit-details-marker { display: none; }

  #basemsp-accessible-homepage .bmc-mobile-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(190px,1fr));
    gap: 1px;
    width: min(430px,calc(100vw - 32px));
    margin: 0;
    padding: 8px;
    background: rgba(247,252,253,.99);
    border: 1px solid rgba(208,238,247,.2);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,.34);
  }

  #basemsp-accessible-homepage .bmc-mobile-panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 14px 16px;
    color: #073a4d;
    background: #ffffff;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
  }

  #basemsp-accessible-homepage .bmc-mobile-panel a:hover,
  #basemsp-accessible-homepage .bmc-mobile-panel a:focus-visible,
  #basemsp-accessible-homepage .bmc-mobile-panel a[aria-current] {
    color: var(--bmc-link-light);
  }

  #basemsp-accessible-homepage .bmc-mobile-panel .bmc-mobile-review {
    justify-content: center;
    font-weight: 500;
  }

  #basemsp-accessible-homepage .bmc-mobile-panel .bmc-mobile-review {
    color: #ffffff;
    background: linear-gradient(135deg,#31b8ea,var(--bmc-primary) 54%,#0189bd);
  }

  #basemsp-accessible-homepage .bmc-mobile-panel .bmc-mobile-review:hover,
  #basemsp-accessible-homepage .bmc-mobile-panel .bmc-mobile-review:focus-visible { color:#ffffff; }
}

@media (max-width: 782px) {
  body.admin-bar #basemsp-accessible-homepage .bmc-header { top: 46px; }
}

@media (max-width: 720px) {
  #basemsp-accessible-homepage .bmc-container { width: calc(100% - 32px); }

  /* Mobile card rails need their own vertical paint area. Without this space,
     overflow-x scrolling clips the soft card shadows at the rail edges. */
  #basemsp-accessible-homepage :is(
    .bm-services,
    .bm-capabilities,
    .bm-hwh-service-grid,
    .bm-hwh-m365-paths,
    .bm-hwh-process,
    .bm-support-cover-grid,
    .bm-support-management-grid,
    .bm-m365-app-grid,
    .bm-security-outcome-grid,
    .bm-security-plan-grid,
    .bm-technology-card-grid,
    .bm-technology-process-grid,
    .bm-wider-card-grid,
    .bm-wider-assurance-grid,
    .bm-wider-assurance-difference,
    .bm-migration-scope-grid,
    .bm-migration-process,
    .bm-migration-assurance-grid,
    .bm-migration-responsibility-grid,
    .bm-review-scope-grid,
    .bm-review-process,
    .bm-review-results-grid,
    .bm-review-context-grid,
    .bm-approach-start-grid,
    .bm-approach-process,
    .bm-approach-review-track,
    .bm-pricing-support-grid,
    .bm-pricing-roadmap-cards,
    .bm-pricing-security-grid,
    .bm-about-people,
    .bm-article-related-grid,
    .bm-locations-grid,
    .bm-location-local-proof-grid,
    .bm-location-service-grid,
    .bm-contact-route-grid
  ) {
    padding-top: 8px;
    padding-bottom: 24px;
  }

  #basemsp-accessible-homepage .bmc-brand,
  #basemsp-accessible-homepage .bmc-header-logo {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    height: 27px;
    min-height: 27px;
    max-height: 27px;
  }

  #basemsp-accessible-homepage .bmc-mobile-panel {
    grid-template-columns: 1fr;
    width: min(310px,calc(100vw - 32px));
  }

}