@font-face {
  font-family: "Boundlearn Navigation";
  src: url("/assets/media/shared/satoshi/satoshi-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Boundlearn Navigation";
  src: url("/assets/media/shared/satoshi/satoshi-black.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("/assets/media/shared/cinzel/cinzel-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/*
 * Canonical Boundlearn shell.
 *
 * This stylesheet intentionally owns only the ecosystem header/menu. Product
 * navigation remains in each product's own stylesheet.
 */
@media (max-width: 1180px) {
  :root {
    --bl-shell-height: 67px;
    --bl-shell-inline: 20px;
    --bl-shell-trigger: 44px;
    --bl-shell-radius: 12px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Source headers are retained for desktop, but never compete with the shell. */
  html body :is(#bl-sticky, #bl-hdr-row),
  html body .bl-unified-header:not(.bl-canonical-responsive-header),
  html body .bl-tier1:has(img[src*="boundlearn_logo_vector"]),
  html body .bl-source-boundlearn-header,
  html.bl-canonical-shell-ready body.delta-page #dc-root div:has(> a > img[alt="Boundlearn"]),
  html.bl-canonical-shell-ready body #dc-root div:has(> a.scp0 > img[alt="Boundlearn"]),
  html.bl-canonical-shell-ready body #dc-root div:has(> a > img[alt="Boundlearn"]):has(> .bl-bar-nav) {
    display: none !important;
  }

  html body :is(
    .bl-mnav-panel,
    .bl-mnav-mobile-unified,
    .bl-main-mobile-nav,
    .bl-mobile-system-boundlearn-panel,
    #bl-mnav
  ):not(.bl-canonical-mobile-panel) {
    display: none !important;
  }

  html body .bl-canonical-responsive-header {
    position: relative !important;
    z-index: 5000 !important;
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: var(--bl-shell-height) !important;
    min-height: var(--bl-shell-height) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 var(--bl-shell-inline) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-radius: 0 !important;
    background: #0b1221 !important;
    color: #f5f5f7 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .bl-canonical-responsive-header[data-bl-menu-open="true"] {
    z-index: 10000 !important;
  }

  html body .bl-canonical-responsive-header[data-bl-main="true"] {
    position: fixed !important;
    inset: 0 0 auto !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, backdrop-filter 160ms ease !important;
  }

  html body .bl-canonical-responsive-header[data-bl-main="true"].is-solid {
    background: rgba(11, 18, 33, 0.97) !important;
    border-bottom-color: rgba(212, 175, 55, 0.2) !important;
    backdrop-filter: blur(12px) !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-home {
    display: inline-flex !important;
    min-width: 0 !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-home img {
    display: block !important;
    width: auto !important;
    height: 22px !important;
    max-width: 170px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
  }

  html body .bl-canonical-responsive-header .bl-unified-trigger {
    position: relative !important;
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: var(--bl-shell-trigger) !important;
    min-width: var(--bl-shell-trigger) !important;
    height: var(--bl-shell-trigger) !important;
    min-height: var(--bl-shell-trigger) !important;
    flex: 0 0 var(--bl-shell-trigger) !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 1px solid rgba(212, 175, 55, 0.36) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .bl-shell-menu-icon,
  .bl-shell-close-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bl-shell-menu-icon {
    flex-direction: column;
    gap: 5px;
  }

  .bl-shell-menu-icon i,
  .bl-shell-close-icon i {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .bl-shell-close-icon {
    opacity: 0;
  }

  .bl-shell-close-icon i {
    position: absolute;
    opacity: 0;
    visibility: hidden;
  }

  .bl-shell-close-icon i:first-child { transform: rotate(45deg); }
  .bl-shell-close-icon i:last-child { transform: rotate(-45deg); }

  .bl-unified-trigger[aria-expanded="true"] .bl-shell-menu-icon { opacity: 0; }
  .bl-unified-trigger[aria-expanded="true"] .bl-shell-close-icon { opacity: 1; }
  .bl-unified-trigger[aria-expanded="true"] .bl-shell-close-icon i {
    opacity: 1;
    visibility: visible;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel {
    position: absolute !important;
    z-index: 1 !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    display: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100svh - var(--bl-shell-height)) !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px var(--bl-shell-inline) 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--bl-shell-radius) var(--bl-shell-radius) !important;
    background: #0b1221 !important;
    color: #f5f5f7 !important;
    box-shadow: 0 18px 36px rgba(4, 9, 18, 0.2) !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel[data-bl-open="true"] {
    display: flex !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel a,
  html body .bl-canonical-responsive-header > .bl-unified-panel summary {
    box-sizing: border-box !important;
    color: #f5f5f7 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    letter-spacing: 0.065em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel > a,
  html body .bl-canonical-responsive-header > .bl-unified-panel > details > summary {
    display: flex !important;
    width: 100% !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 2px !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.16) !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel > details {
    width: 100% !important;
    border: 0 !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel > details > summary {
    justify-content: space-between !important;
    cursor: pointer !important;
    list-style: none !important;
  }

  html body .bl-canonical-responsive-header summary::-webkit-details-marker { display: none !important; }

  html body .bl-canonical-responsive-header summary svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
  }

  html body .bl-canonical-responsive-header details[open] summary svg { transform: rotate(180deg); }

  html body .bl-canonical-responsive-header .bl-shell-programs a {
    display: block !important;
    width: 100% !important;
    min-height: 32px !important;
    padding: 8px 2px 8px 14px !important;
    color: #c7d0e0 !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-language {
    display: inline-flex !important;
    width: auto !important;
    align-self: flex-start !important;
    gap: 4px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-language button {
    display: inline-flex !important;
    width: 38px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #c7d0e0 !important;
    font: 700 11px/14px "Montserrat", Arial, sans-serif !important;
    cursor: pointer !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-language button[aria-pressed="true"] {
    background: #d4af37 !important;
    color: #0b1221 !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel > a.bl-shell-apply {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #d4af37 !important;
    color: #0b1221 !important;
    font-weight: 700 !important;
  }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  :root {
    --bl-shell-height: 50px;
    --bl-shell-inline: 16px;
    --bl-shell-trigger: 40px;
  }

  html body .bl-canonical-responsive-header .bl-shell-home img { height: 20px !important; }

  html body .bl-canonical-responsive-header > .bl-unified-panel[data-bl-open="true"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
    align-content: start !important;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-language,
  html body .bl-canonical-responsive-header .bl-shell-apply {
    grid-column: 1 / -1 !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-language {
    justify-self: start !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (min-height: 501px) {
  :root {
    --bl-shell-height: 56px;
    --bl-shell-inline: 20px;
    --bl-shell-trigger: 40px;
  }

  html body .bl-canonical-responsive-header .bl-shell-home img {
    height: 20px !important;
    max-width: 160px !important;
  }
}

@media (min-width: 1181px) {
  .bl-canonical-responsive-header { display: none !important; }
}

/* The ecosystem tier is persistent. Programme navigation remains a separate
   second tier and must never be allowed to replace or hide this bar. */
@media (max-width:1180px) {
  html body .bl-canonical-responsive-header {
    position:sticky!important;
    top:0!important;
    transition:transform .22s cubic-bezier(.4,0,.2,1),background-color .16s ease,border-color .16s ease,backdrop-filter .16s ease!important;
    will-change:transform;
  }

  html body .bl-canonical-responsive-header.is-scroll-hidden {
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  html body .bl-canonical-responsive-header[data-bl-menu-open="true"] {
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  html body .bl-canonical-responsive-header[data-bl-main="true"] {
    position:fixed!important;
  }
}

@media (min-width:1181px) {
  html body .bl-source-boundlearn-header {
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:0!important;
    width:100%!important;
    margin:0!important;
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }

  html body.bl-boundlearn-home #bl-sticky {
    display:none!important;
  }

  html body.bl-boundlearn-home #bl-hdr-row {
    background:rgba(11,18,33,.97)!important;
    border-bottom:1px solid rgba(212,175,55,.2)!important;
    backdrop-filter:blur(12px)!important;
  }

  html body.bl-boundlearn-home #bl-hdr-row.is-at-page-top {
    background:transparent!important;
    border-bottom-color:transparent!important;
    backdrop-filter:none!important;
  }
}

@media (max-width: 1180px) {
  html body .bl-canonical-responsive-header,
  html body .bl-canonical-responsive-header * {
    font-family: "Montserrat", Arial, sans-serif !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel {
    position: fixed !important;
    inset: var(--bl-shell-height) 0 0 !important;
    width: 100% !important;
    height: calc(100svh - var(--bl-shell-height)) !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 28px !important;
    align-content: start !important;
    padding: clamp(26px, 5vh, 48px) clamp(22px, 6vw, 54px) 24px !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(11, 18, 33, .99), rgba(11, 18, 33, .9)),
      url("/assets/media/boundlearn/boundlearn-experiences-responsive-backgrounds/boundlearn-experiences-bg-desktop-2880x1400.jpg") center / cover no-repeat !important;
  }

  html body .bl-canonical-responsive-header > .bl-unified-panel[data-bl-open="true"] {
    display: grid !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-primary {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-primary > a,
  html body .bl-canonical-responsive-header .bl-shell-primary > details > summary {
    position: relative !important;
    display: flex !important;
    width: auto !important;
    min-height: 0 !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 4px 0 !important;
    border: 0 !important;
    color: #f5f5f7 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: clamp(24px, 7.2vw, 34px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    text-transform: uppercase !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-primary > details {
    width: 100% !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-primary > details > summary {
    justify-content: flex-start !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-primary > details > summary svg {
    width: 18px !important;
    height: 18px !important;
    margin-left: 4px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-programs {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 18px !important;
    padding: 8px 0 12px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-programs a {
    min-height: 34px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(245, 245, 247, .14) !important;
    color: #c7d0e0 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .03em !important;
    text-transform: none !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-meta {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-self: stretch !important;
    justify-content: flex-end !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-meta > a.bl-shell-apply {
    position: relative !important;
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 16px 0 0 !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 2px solid #d4af37 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f5f5f7 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  /* Delta keeps the conversion action in the primary reading order so it
     stays directly below Contact Us in portrait, tablet and landscape. */
  html body.delta-page .bl-canonical-responsive-header .bl-shell-primary > a.bl-shell-apply {
    position: relative !important;
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 8px 0 0 !important;
    padding: 0 0 8px !important;
    border: 0 !important;
    border-bottom: 2px solid #d4af37 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f5f5f7 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-note {
    margin-top: auto !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(244, 215, 122, .34) !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-note strong {
    display: block !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: clamp(18px, 5vw, 25px) !important;
    font-weight: 500 !important;
    line-height: 1.24 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-note strong span {
    display: block !important;
    font-family: inherit !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-note-white { color: #f5f5f7 !important; }
  html body .bl-canonical-responsive-header .bl-shell-note-gold { color: #f4d77a !important; }

  html body .bl-canonical-responsive-header .bl-shell-socials {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin-top: 16px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-socials a {
    display: inline-flex !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(245, 245, 247, .28) !important;
    border-radius: 8px !important;
    color: #f5f5f7 !important;
    background: transparent !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-socials svg {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) and (min-height: 501px) {
  html body .bl-canonical-responsive-header > .bl-unified-panel {
    grid-template-columns: minmax(0, 1.08fr) minmax(240px, .72fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: clamp(46px, 8vw, 90px) !important;
    align-items: stretch !important;
    padding: clamp(42px, 7vh, 74px) clamp(38px, 7vw, 76px) 34px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-primary > a,
  html body .bl-canonical-responsive-header .bl-shell-primary > details > summary {
    font-size: clamp(30px, 4.6vw, 46px) !important;
  }

  html body.delta-page .bl-canonical-responsive-header .bl-shell-primary > a.bl-shell-apply {
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  html body .bl-canonical-responsive-header > .bl-unified-panel,
  html body .bl-canonical-responsive-header > .bl-unified-panel[data-bl-open="true"] {
    grid-template-columns: minmax(0, 1.08fr) minmax(220px, .72fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 34px !important;
    padding: 20px 28px 18px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-primary > a,
  html body .bl-canonical-responsive-header .bl-shell-primary > details > summary {
    font-size: clamp(18px, 4.2vh, 24px) !important;
    padding-block: 2px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-programs {
    position: absolute !important;
    top: 14px !important;
    left: calc(100% + 28px) !important;
    width: min(300px, 42vw) !important;
    padding: 0 !important;
    background: #0b1221 !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-language {
    margin-top: 0 !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-meta > a.bl-shell-apply {
    margin-top: 8px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-note {
    padding-top: 10px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-note strong {
    font-size: 16px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-socials {
    margin-top: 8px !important;
  }

  html body .bl-canonical-responsive-header .bl-shell-socials a {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}
